Tutorial Membuat Autofill PHP dengan perintah select dengan . Menggunakan ajax kalian dapat membuat file dapat terisi otomatis Sesuai dengan isi dari database kalian.
Bagaimana cara sih? dengan menggunakan ajax, form dengan input menggunakan select adalah menjadi perintah data mana yang akan di tampilkan.
Page Contents
Pengertian AutoFill PHP
Apa itu Autofill PHP? dalam bahasa indonesia artinya pengisian otomatis jadi dapat disimpulkan bahwa autofill/ IsiOtomatis adalah fungsi di beberapa aplikasi atau program komputer,
biasanya yang berisi formulir, yang secara otomatis mengisi bidang dan menghemat waktu berjam-jam.Nahh
dalam membuat website dengan menggunakan autofill PHP ada beberapa langkah kalian harus perhatikan setiap detail langkahnya agar website autofill PHP kalian dapat berjalan dengan sempurna ya kan..
Mari kita mulai membuat autofill PHP
Langkah pertama yang harus kalian lakukan buka semua aplikasi pendukung seperti, XAMPP dan Text Editor kalian
Buat file baru Autofill PHP
Buat lah file baru dengan nama autofill.php, lalu kalian masukkan script sesusai dengan yang di butuhkan, atau copy paste dari blog sebelumnya .
Baca Juga : Tutorial : Cara membuat tabel dengan Datatables
Head autofill PHP
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet"> <link href="css/style-responsive.css" rel="stylesheet"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.css"> <title>Auto Fill</title> </head> |
di atas merupakan css nya yah teman-teman kalian mau menggunakan atau tidak, tidak jadi masalah yang terpenting adalah script berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> function cek_db(){ var id = $("#id").val(); $.ajax({ url : 'auto_proses.php', // file proses penginputan data : "id="+id, }).success(function (data){ var json = data, obj = JSON.parse(json); $('#nama').val(obj.nama); $('#email').val(obj.email); }) } </script> |
source code di atas merupakan perintah ajax yang di mana yang di awali tanda ‘#‘ variable yang akan dipanggil dengan ‘id’,
jadi nanti perhatian antara id dan nama yang di awali #.
Sumber belajar : membuat autofill pada textbox/combobox pada php yang terkoneksi dengan MYSQL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>No ID</label> <select class="form-control" name="id" id="id" onchange="cek_db()"> <option value="">-- Pilih ID --</option> <?php include "koneksi.php"; $sql=mysqli_query($koneksi,"SELECT * FROM user order by id_user DESC"); while ($data = mysqli_fetch_array($sql)){ echo '<option name="id" value="'.$data['id_user'].'">'.$data['id_user'].'</option>'; }?> </select> </div> </div> |
Source code yaitu perintah yang utama di mana kita akan memanggil data lainnya dengan memilih dari data yang kita sematkan di perintah select data yang ada di data base kalian.
include “koneksi.php”;
$sql=mysqli_query($koneksi,”SELECT * FROM user order by id_user DESC”);
whille
($data = mysqli_fetch_array($sql)){
echo ”.$data[‘id_user’].”;
}?>
perintah ini di mana kalian mengambil data dari tabel user berdasarkan data id_user, kurang lebih seperti itu untuk perintahnya.
Akan melakukan perulangan dengan menggunakan data yang di tampilkan adalah data id_user.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>Nama User</label> <input type="text" name="nama" value="" id="nama" class="form-control" readonly> </div> </div> <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>Email</label> <input type="text" name="email" value="" id="email" class="form-control" readonly> </div> </div> |
jika pada id_user kita buatkan select maka di nama dan email kita readonly maka data tidak dapat di ketik hanya bisa di baca, jadi tulisannya form nya akan di block.
Buat file baru autofill PHP prosesnya
Lalu selanjutnya kalian buatkan file baru dengan nama autofill_proses.php file ini akan memproses penginputan yang akan dilakukan otomatis jika kalian memilih id_user.
1 2 3 4 5 6 7 | <?php include "koneksi.php"; $query = mysqli_query($koneksi,"SELECT * FROM user WHERE id_user='$_GET[id]'"); $user = mysqli_fetch_array($query); $data = array('nama' => $user['nama_user'],'email' => $user['email']); echo json_encode($data); ?> |
code diatas adalah perintah untuk melakukan pembacaan aray jika id_user diinput. maka nama pada database dan email akan terbaca dan disana ada perintah get untuk mengambil value pada id.
Baca Juga : Cara Mudah Menampilkan Data dari Database dengan PHP
nahh seperti itulahh tutorial membuat autofill PHP form dapat terisi otomatis dengan menggunakan ajax semoga dapat mengatasi masalah masalah teman teman, dan selamat mencoba di rumah yahh.
Tampilan Awal

Tampilan pilih diselect

Full code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet"> <link href="css/style-responsive.css" rel="stylesheet"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.css"> <title>Auto Fill</title> </head> <body> <center> <h1>Belajar Bersama StudyKuy</h1> <h3>Membuat Auto Fill dengan perintah select</h3> </center> <div class="row" style="margin:0 100px"> <form class="form-horizontal style-form" method="post" action="" > <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>No ID</label> <select class="form-control" name="id" id="id" onchange="cek_db()"> <option value="">-- Pilih ID --</option> <?php include "koneksi.php"; $sql=mysqli_query($koneksi,"SELECT * FROM user order by id_user DESC"); while ($data = mysqli_fetch_array($sql)){ echo '<option name="id" value="'.$data['id_user'].'">'.$data['id_user'].'</option>'; }?> </select> </div> </div> <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>Nama User</label> <input type="text" name="nama" value="" id="nama" class="form-control" readonly> </div> </div> <div class="form-group "> <div class="col-xs-4 col-md-2"> <label>Email</label> <input type="text" name="email" value="" id="email" class="form-control" readonly> </div> </div> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> function cek_db(){ var id = $("#id").val(); $.ajax({ url : 'auto_proses.php', data : "id="+id, }).success(function (data){ var json = data, obj = JSON.parse(json); $('#nama').val(obj.nama); $('#email').val(obj.email); }) } </script> </body> </html> |
Bagaiman apakah kalian merasa kesulitan untuk membuat sebuah perintah autofill PHP dengan menggunakan select ?
Jika kalian mengalami kesulitan maka apa yang kalian lakukan yahh tinggal kan jejak pada kolom komentar dongg pastinya hehe
Oke terimakasih kepada kalian yang sudah terus ikutin blog belajar menjadi programer handal Studykuy tetap semangat yahh
1 Komentar
nizar · 28/02/2021 pada 8:41 pm
tutorial membuat Autofill PHP dengan perintah select tanpa database nya 🙂