Membuat Autofill PHP dengan perintah select

Dipublikasikan oleh admin pada

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.

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

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.

PHP
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

PHP
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.

PHP
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.

PHP
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

tutorial membuat autofill PHP
Sebelum data dimasukkan

Tampilan pilih diselect

after autofill PHP
setelah pilih value pada select

Full code

PHP
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

Kategori: auto fillconnectConnect to MYSQLHTMLphpmyadmin
Tags:

1 Komentar

nizar · 28/02/2021 pada 8:41 pm

tutorial membuat Autofill PHP dengan perintah select tanpa database nya 🙂

Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos Terkait

database php
auto fill

Cara Mudah Menampilkan Data Dari Database Dengan PHP

Cara Mudah Menampilkan data dari database dengan PHP - Hallo, semua selamat bertemu kembali dengan studykuy, pada kali ini kita akan memberikan informasi dan ilmu lagi teman.

format number php
auto fill

Cara Mudah Membuat Format Number PHP Singkat

StudyKuy - Format Number PHP kalian pasti tidak asing kan dengan ini, yang ingin membuat dashboard pada website kalian atau mau membuat website E-commerce kalian pasti tidak mau tulisan harga kalian panjang seperti kereta apikan,

dashboard php
bootstrap

Membuat Dashboard Responsive Dengan Mudah

Pada kesempatan ini kita akan belajar bagaimnana cara membuat dashboard php dengan menggunakan CSS dan fontawesome, yuk ikuti terus blognya study kuy kita mulai sebelumnya sudah membahas untuk membuat form login php dengan CSS dan Bootstrap. Pada kesempatan kali ini saya akan membagikan ilmu ngoding lagi dengan membuat dashboard PHP hanya dengan CSS dan Fontawesome.