Selamat Datang di Blog Orang IT. Pada postingan kali ini saya akan Share AutoComplete Form dengan menggunakan PHP . Pada saat kita menginputkan Data pada form isian tidak semua data kita inputkan secara manual karena hal itu akan menguras banyak tenaga selain itu juga apabila data yang dimasukkan banyak maka besar kemungkinan terjadinya kesalahan data. Maka dari itu kita akan menambahkan fitur AutoComplete pada sebuah form isian yang mengambil data dari suatu tabel tertentu.
Autocomplete adalah fitur yang sering dipakai dalam sebuah website yang menggunakan fitur pencarian atau input data. Tujuan utama dari fitur ini jelas untuk memudahkan user mencari atau melengkapi data
Contohnya : Pada sebuah Aplikasi Administrasi Mahasiswa ada 2 tabel yaitu Tabel Mahasiswa yang berisi data mahasiswa nim, nama, alamat dll dan Tabel Pembayaran yang berisi Id_pembayaran, nim, nama, alamat , jumlah uang . Intinya pada Form menu pembayaran ketika NIM mahasiswa dimasukkan maka pada Field isian nama dan alamat akan terisi otomatis mengambil data dari tabel Mahasiswa . ( Semoga Bisa Dipahami apa yang saya maksudkan )
Disini kita akan menggunakan JQueryUI pada template Bootstrap untuk membuat Fitur AutoComplete , dan sebagai contoh saya menggunakan Aplikasi saya yang sudah jadi yaitu Aplikasi Register Induk Seniman dan Ijin Keramaian . Pada contoh kali ini kita hanya menggunakan 2 tabel yaitu Tabel Seniman ( Berisi Data Seniman ) dan Tabel Rekom ( Berisi data ijin keramaian yang diajukan oleh seniman )
Berikut cara membuat fitur autocomplete dengan menggunakan JQueryUI pada admin template bootsrap terlengkap dan mudah dipahami :
1. Buat Database dengan nama RegisterKesenian dan 2 ( dibaca dua ) tabel dengan nama Tabel Seniman dan Tabel Rekom ( untuk ijin keramaian seniman ) yang berisi data seperti gambar dibawah ini .
Tabel Seniman
Tabel Rekom
Pastikan dalam Tabel Seniman sudah diisi ya , misalnya saya isi dengan Nama saya Helmy Kurniawan dan Nik 909090
2. Buat dulu koneksi database dengan nama conn.php yang berisi Script berikut :
<?php
$dbhost = ‘localhost’;
$dbuser = ‘root‘; // user default
$dbpass = ”; // pass default kosong
$dbname = ‘RegisterKesenian‘; // nama databasenya
$konek = mysql_connect($dbhost, $dbuser, $dbpass) or die (‘Koneksi Gagal!’);
mysql_select_db($dbname);
?>
3. Buat file dengan nama rekomendasi.php yang berisi Script untuk menampilkan Form Isian permohonan Ijin Rekomendasi Kesenian , ketikkan Script berikut :
Jadi pada field NIK ( Nomor Induk Kesenian ) apabila dimasukkan NIK yang terdapat pada Tabel Seniman maka otomatis data seperti nama organisasi , nama, alamat seniman akan ditampilkan ( lihat Script warna merah diatas ) dan prosenya ada di file auto1.php . Oh ya jangan lupa pada field nik ditambahkan id=”nik” karena kita akan mengambil data berdasarkan NIK
4. Berikut Script auto1.php yang merupakan proses dari autocomplete
<?php include (‘conn.php’); $q = $_GET[‘term’]; // variabel $q untuk mengambil inputan user $sql = mysql_query(“SELECT * FROM seniman WHERE nik LIKE ‘%”.$q.”%'”); // menampilkan data yg ada didatabase yg sesuai dengan inputan user ( nik ) while ($data = mysql_fetch_array($sql)){ $row[‘value’] =$data[‘nik’]; $row[‘namaorga’] =$data[‘namaorga’]; $row[‘nama’] =$data[‘nama’]; $row[‘alamat’] =$data[‘alamat’]; $row_set[] =$row; } //echo json_encode($result); echo json_encode($row_set); ?>
5. Selesai , coba anda ketikkan Nomor Induk Kesenian pada field kolom nik maka field dibawahnya field nama organisasi , nama dan alamat akan ditampilkan secara otomatis mengambil data dari Tabel Seniman
Screen Shoot Hasil :
Butuh Contoh ? Download disini file yang baru saja kita buat diatas bisa anda download gratis dibawah dengan database lengkapnya
Demikian Postingan saya mengenai Cara membuat otomatis isi form dari tabel dengan menggunakan AutoComplete semoga bermanfaat dan berguna buat kalian semua. Jangan lupa postingan saya sebelumnya mengenai Cara Analisa Karakter , Bakat, Minat dan Profesi Anda
Diketik dan dipos oleh Helmy Kurniawan by helmykkediri
