Auto Complete Form Isian dengan PHP

MEMBUAT AUTO COMPLETE ISI FORM DENGAN PHP

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 :

<?php include('conn.php'); ?>

                       

<label class="control-label col-md-3">Tanggal</label>

<input name="tanggal" placeholder="Tanggal Hari Ini"  value="<?php echo date('m-d-Y')?>" /> // otomatis menampilkan tanggal hari ini

<label class="control-label col-md-3">NIK</label>

<input type="text"  placeholder="Nomor Induk" class="form-control" name="nik" id="nik" > 

<label class="control-label col-md-3">Nama Organisasi</label>

<input type="text"  placeholder="Nama Organisasi" class="form-control" name="namaorga" >

                               

<label class="control-label col-md-3">Nama Pemimpin</label>

<input type="text"  placeholder="Nama Pemimpin" class="form-control" name="nama">

<label class="control-label col-md-3">Alamat</label><input type="text"  placeholder="Alamat Pemimpin " class="form-control" name="alamat"> </div> </div>

dan tambahkan Script ini dibawah nya merupakan Script untuk menghubungkan ke JQueryUI

<script type="text/javascript">

        $(function(){

            $("#nik").autocomplete({

                source:"auto1.php",

                minLength:2,

                select:function(event,data){

                    $('input[name=namaorga]').val(data.item.namaorga);

                    $('input[name=nama]').val(data.item.nama);

                    $('input[name=alamat]').val(data.item.alamat);

                }

            });

        });

    </script>

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

>>> Download Contoh AutoCompelete <<<

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

Follow Blog Orang IT dan Like FansPage Helmykkediricomp serta untuk Donasi kepada Admin jangan lupa klik iklan yang ada di blog ini sekian dan terimakasih

Diketik dan dipos oleh Helmy Kurniawan by Helmykkediricomp

Kata Kunci :

Membuat form isi otomatis dengan php, membuat autocomplete sederhana dengan php via ajax, cara mudah membuat form isian otomatis php, membuat form isian database dengan php, membuat otomatis form isian dari database dengan php, membuat autocomplete dari database dengan php 

Tweet