Tutorial Php Untuk Membuat Fitur Auto-Suggest Pada Form
Membuat fitur auto-suggest pada form tanpa menggunakan PHP mungkin terasa mustahil. Namun, dengan tutorial khusus PHP yang tepat, kamu bisa menjadi ahli dalam membuat fitur auto-suggest pada form. Artikel ini akan membantu kamu memahami bagaimana membuat fitur auto-suggest pada form dengan PHP.
Memanfaatkan tutorial PHP ini, kamu bisa membuat fitur auto-suggest pada form dengan mudah. Dengan membaca artikel ini, kamu akan tahu cara membuat fitur auto-suggest pada form yang efisien. Artikel ini akan memberikan kamu solusi untuk menyelesaikan masalah yang kamu hadapi saat membuat fitur auto-suggest pada form.
Jadi, jangan lewatkan kesempatan ini untuk mengetahui tentang Tutorial PHP Untuk Membuat Fitur Auto-Suggest Pada Form. Selamat membaca!
Tutorial PHP Untuk Membuat Fitur Auto-Suggest Pada Form
Auto-suggest atau autocomplete adalah fitur yang memungkinkan user untuk mencari kata atau kalimat dengan lebih cepat. Fitur ini sudah sering digunakan di berbagai platform. Pada artikel ini, kita akan membahas bagaimana membuat auto-suggest pada form menggunakan bahasa pemrograman PHP.
Mempersiapkan Database
Sebelum memulai membuat auto-suggest, kita harus mempersiapkan database terlebih dahulu. Buatlah sebuah database dan tabel. Untuk memudahkan, nama tabel yang dibuat adalah ‘names’. Lalu isi tabel dengan nama-nama yang akan dicari.
Membuat Koneksi Database
Setelah mempersiapkan database, selanjutnya kita perlu membuat koneksi ke database. Buat sebuah file bernama ‘connect.php’ dan masukkan kode berikut:
<?php$servername = localhost;$username = username;$password = password;$dbname = myDB;// Create connection$conn = new mysqli($servername, $username, $password, $dbname);// Check connectionif ($conn->connect_error) { die(Connection failed: . $conn->connect_error);} ?>
Jangan lupa ganti ‘username’ dan ‘password’ sesuai dengan yang digunakan pada database.
Membuat Script PHP dan AJAX
Script PHP dan AJAX ini akan mengambil data dari database dan menampilkannya dalam bentuk auto-suggest. Buat sebuah file bernama ‘fetch.php’ dan masukkan kode berikut:
<?phpinclude(connect.php);// Get search term$searchTerm = $_GET['term'];// Get matched data from names table$query = $conn->query(SELECT * FROM names WHERE name LIKE '%.$searchTerm.%' ORDER BY name ASC);$data = array();while ($row = $query->fetch_assoc()) { $data[] = $row['name'];}// Return json dataecho json_encode($data);?>
Selanjutnya, buatlah file bernama ‘index.php’ dan masukkan kode berikut:
<html><head><script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script><link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css /><script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js></script></head> <body><div class=container> <h2 align=center>Tutorial PHP Untuk Membuat Fitur Auto-Suggest Pada Form</h2> <br /> <div align=center> <input type=text name=name id=name class=form-control input-lg autocomplete=off placeholder=Cari Nama /> </div> <br /> <div id=nameList></div></div></body></html><script>$(document).ready(function(){ $('#name').typeahead({ source: function(query, result) { $.ajax({ url:fetch.php, method:POST, data:{query:query}, dataType:json, success:function(data) { result($.map(data, function(item){ return item; })); } }) } });});</script>
Untuk menggunakan plugin Bootstrap Typeahead ini, kamu bisa download di https://github.com/bassjobsen/Bootstrap-3-Typeahead.
Kesimpulan
Dengan membuat script PHP dan AJAX, kita bisa membuat fitur auto-suggest pada form. Dengan auto-suggest ini, user bisa mencari data dengan lebih cepat dan mudah. Selain itu, kita juga menggunakan plugin Bootstrap Typeahead untuk membuat desain yang lebih menarik.
Source: CHANNET YOUTUBE VLY Studio
Semoga tutorial ini bermanfaat untuk anda dan membuat anda lebih mudah dalam membuat fitur auto-suggest pada form. Jika anda memiliki pertanyaan lebih lanjut tentang tutorial ini, jangan ragu untuk meninggalkan komentar di bawah ini. Terima kasih telah berkunjung ke blog kami.
Tutorial PHP Untuk Membuat Fitur Auto-Suggest Pada Form
Bagaimana cara membuat fitur auto-suggest pada form?
