$type=carousel$cols=3

Auto Complete Form Isian dengan PHP

MEMBUAT AUTO COMPLETE ISI FORM DENGAN PHP

Auto Complete Form Isian 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 .

Auto Complete Form Isian dengan PHP
Tabel Seniman

Auto Complete Form Isian dengan PHP
Tabel Rekom
Pastikan dalam Tabel Seniman sudah diisi ya , misalnya saya isi dengan Nama saya Helmy Kurniawan dan Nik 909090

Auto Complete Form Isian dengan PHP

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 :

Auto Complete Form Isian dengan PHP
Butuh Contoh ? Download disini file yang baru saja kita buat diatas bisa anda download gratis dibawah dengan database lengkapnya

>>> Download Contoh AutoCompelete <<<

Update 13 April 2016 

>> Download Project Saya Terbaru <<

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 helmykkediri serta untuk Donasi kepada Admin jangan lupa klik iklan yang ada di blog ini sekian dan terimakasih

Diketik dan dipos oleh Helmy Kurniawan by helmykkediri

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 

COMMENTS

BLOGGER: 19
Loading...
Nama

Android,3,Blog,350,Info,212,Islami,43,Software,74,Tutorial,120,Web,18,
ltr
item
BLOG ORANG IT 2017: Auto Complete Form Isian dengan PHP
Auto Complete Form Isian dengan PHP
https://3.bp.blogspot.com/-Cxoi01Mn7Jc/ViCzRT_J4EI/AAAAAAAACQY/JE90DvqefS0/s320/4.PNG
https://3.bp.blogspot.com/-Cxoi01Mn7Jc/ViCzRT_J4EI/AAAAAAAACQY/JE90DvqefS0/s72-c/4.PNG
BLOG ORANG IT 2017
http://www.helmykkediri.com/2015/10/auto-complete-form-isian-dengan-php_93.html
http://www.helmykkediri.com/
http://www.helmykkediri.com/
http://www.helmykkediri.com/2015/10/auto-complete-form-isian-dengan-php_93.html
true
7204675838149040268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy