Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

PHP

Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan PHP AJAX dan MySQL

img-responsive

Catatan kali ini yaitu mengenai bagaimana cara membuat pencarian data dari database kemudian menampilkan data tersebut ke dalam sebuah textbox. Pada catatan ini, kita akan menggunakan plugin JQUERY dan memanfaat bahasa pemograman AJAX. Dengan AJAX, kita bisa melakukan sebuah proses tanpa harus me-refresh / me-reload halaman web kita. Berikut ini langkah-langkah membuatnya :

STEP 1 – PERSIAPAN

Kita akan mempersiapkan terlebih dahulu hal-hal yang diperlukan.

  1. Download Plugin JQUERYnya, Klik link berikut ini : Download.
  2. Buat sebuah folder baru dengan nama latihan_ajax, lalu simpan di xampp/htdocs/
  3. Copy plugin JQUERY yang sudah didownload ke dalam folder xampp/htdocs/latihan_ajax/

STEP 2 – DATABASE

Buat sebuah database dengan nama mynotescode, lalu buat tabel siswa dengan struktur tabel seperti gambar berikut ini :

Struktur Tabel - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan PHP AJAX dan MySQL

CREATE TABLE IF NOT EXISTS `siswa` (
  `nis` varchar(11) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `telp` varchar(15) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (`nis`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

STEP 3 – KONEKSI DATABASE
Pada tahap ini, kita akan membuat sebuah file php yang berfungsi untuk koneksi ke database MySQL. Buat sebuah file dengan nama koneksi.php lalu simpan di folder xampp/htdocs/latihan_ajax/. Berikut ini isi dari file tersebut :

<?php
$host = "localhost"; // Nama hostnya
$user = "root"; // Username
$pass = ""; // Password (Isi jika menggunakan password)
$database = "mynotescode"; // Nama databasenya
$connect = mysqli_connect($host, $user, $pass, $database); // Koneksi ke MySQL
?>

STEP 4 – FORM

Pada tahap ini kita akan membuat formnya. Buat sebuah file dengan nama index.php dan simpan di folder xampp/htdocs/latihan_ajax/. Berikut ini isinya :

<html>
<head>
    <title>GET DATA with AJAX</title>
    <script src="jquery-2.2.4.min.js"></script> <!-- Load library jquery -->
    <script src="process.js"></script> <!-- Load file process.js -->
</head>
<body>

<h1>FORM SISWA</h1><hr>
<form>
<table>
  <tr>
    <td>NIS</td>
    <td>:</td>
    <td><input type="text" name="nis" id="nis"> <button type="button" id="btn-search">Cari</button> <span id="loading">LOADING...</span></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td>:</td>
    <td><input type="text" name="nama" id="nama"></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><input type="text" name="jenis_kelamin" id="jenis_kelamin"></td>
  </tr>
  <tr>
    <td>Telepon</td>
    <td>:</td>
    <td><input type="text" name="telepon" id="telepon"></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><input type="text" name="alamat" id="alamat"></td>
  </tr>
</table>
</form>

</body>
</html>

STEP 5 – AJAX

Pada tahap ini, kita akan membuat skrip ajaxnya. Buat sebuah file dengan nama process.js dan simpan di folder xampp/htdocs/latihan_ajax/. Berikut ini isi file tersebut :

function search(){
  $("#loading").show(); // Tampilkan loadingnya
  
  $.ajax({
        type: "POST", // Method pengiriman data bisa dengan GET atau POST
        url: "search.php", // Isi dengan url/path file php yang dituju
        data: {nis : $("#nis").val()}, // data yang akan dikirim ke file proses
        dataType: "json",
        beforeSend: function(e) {
            if(e && e.overrideMimeType) {
                e.overrideMimeType("application/json;charset=UTF-8");
            }
    },
    success: function(response){ // Ketika proses pengiriman berhasil
            $("#loading").hide(); // Sembunyikan loadingnya
            
            if(response.status == "success"){ // Jika isi dari array status adalah success
        $("#nama").val(response.nama); // set textbox dengan id nama
        $("#jenis_kelamin").val(response.jenis_kelamin); // set textbox dengan id jenis kelamin
        $("#telepon").val(response.telepon); // set textbox dengan id telepon
        $("#alamat").val(response.alamat); // set textbox dengan id alamat
      }else{ // Jika isi dari array status adalah failed
        alert("Data Tidak Ditemukan");
      }
    },
        error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
      alert(xhr.responseText);
        }
    });
}

$(document).ready(function(){
  $("#loading").hide(); // Sembunyikan loadingnya
  
    $("#btn-search").click(function(){ // Ketika user mengklik tombol Cari
        search(); // Panggil function search
    });
    
    $("#nis").keyup(function(event){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
      search(); // Panggil function search
    }
  });
});

STEP 6 – PROSES PENCARIAN

Di tahap yang terakhir ini, kita akan membuat file php yang berfungsi untuk memproses pencarian ke tabel siswa yang ada di database. Buat sebuah file dengan nama search.php dan simpan di folder xampp/htdocs/latihan_ajax/. Berikut ini isi file tersebut :

<?php
include "koneksi.php"; // Load file koneksi.php

$nis = $_POST['nis']; // Ambil data NIS yang dikirim lewat AJAX

$query = mysqli_query($connect, "SELECT * FROM siswa WHERE nis='".$nis."'"); // Tampilkan data siswa dengan NIS tersebut
$row = mysqli_num_rows($query); // Hitung ada berapa data dari hasil eksekusi $query

if($row > 0){ // Jika data lebih dari 0
  $data = mysqli_fetch_array($query); // ambil data siswa tersebut
  
  // BUat sebuah array
  $callback = array(
    'status' => 'success', // Set array status dengan success
    'nama' => $data['nama'], // Set array nama dengan isi kolom nama pada tabel siswa
    'jenis_kelamin' => $data['jenis_kelamin'], // Set array jenis_kelamin dengan isi kolom jenis_kelamin pada tabel siswa
    'telepon' => $data['telp'], // Set array jenis_kelamin dengan isi kolom telp pada tabel siswa
    'alamat' => $data['alamat'], // Set array jenis_kelamin dengan isi kolom alamat pada tabel siswa
  );
}else{
  $callback = array('status' => 'failed'); // set array status dengan failed
}

echo json_encode($callback); // konversi varibael $callback menjadi JSON
?>

HASIL

Form - Cara Membuat Pencarian Data dan Menampilkannya ke Textbox dengan PHP AJAX dan MySQL

PENJELASAN CARA KERJA
Saya akan coba jelaskan cara kerja / alur proses pencarian.
Pertama, User akan menginput NIS pada textbox dengan id=”nis”.

<input type="text" name="nis" id="nis">

Kemudian ketika user menekan tombol ENTER atau mengklik tombol Cari,

<button type="button" id="btn-search">Cari</button>

function search() akan mengeksekusi perintah AJAX (yang ada di file process.js) untuk mengirimkan NIS yang telah diinput tadi ke file search.php. Lalu di file search.php, dilakukan pencarian data ke tabel siswa di database berdasarkan NIS yang dikirim tadi oleh AJAX. Kemudian, file search.php akan memberikan hasil pencarian dalam bentuk array $callback yang telah di konversi menjadi JSON. Array tersebut akan diambil kembali oleh AJAX dan memasukkannya ke dalam variabel response. Lalu langkah terakhir adalah men-set textbox dengan hasil pencarian tadi.

Source Code
Untuk mengunduh source code nya, klik link berikut ini : Download.

Sekian untuk catatan kali ini, semoga catatan ini bisa bermanfaat. Jika ada hal yang kurang dimengerti, jangan sungkan untuk bertanya pada kolom komentar di bawah ini.

Terimakasih.

Load data dari database ke dalam textbox, Cara membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox, Cara mudah dan cepat membuat pencarian tanpa refresh halaman dan menampilkannya ke textbox, Load data dari database tanpa refresh halaman ke dalam textbox, cara menampilkan data otomatis dari database ke textbox

Pencarian Data

(Total : 27,727 viewers, 1 viewers today)
cara-membuat-pencarian-data-dan-menampilkannya-ke-textbox-dengan-php-ajax-dan-mysql

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

41 Comments

  1. dio andira

    bang mau nanya, saya sudah ngikutin semua nya dan sukses beberapa berhasil tampil di textbox
    nah saya kan mau nambah lagi text box, di textbox yg baru ane tambahin ini kok bisa gk muncul ya result nya? padahal di process.js dan search php nya dah ane tambahin juga.
    di textbox yg sebelumnya work aja dan ane coba pindahin data yg bakal ane tampilin di textbox baru ke textbox yg lama, malah muncul datanya disitu tapi textbox yg baru tetep gk muncul juga

  2. andi devrian

    bang… kalo radio dan select… cara ngirim datanya gmana??

  3. Prozoila

    kalo nis nya menggunakan combobox gimana mas ?

    • tinggal ganti fungsi ini :
      $("#nis").keyup(function(event){ // Ketika user menekan tombol di keyboard
      if(event.keyCode == 13){ // Jika user menekan tombol ENTER
      search(); // Panggil function search
      }
      });

      menjadi :

      $("#nis").change(function(event){ // Ketika user memilih
      search(); // Panggil function search
      });

  4. Shahibmirbath

    Ini gak jalan bang..

    $(“#nis”).keyup(function(){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
    search(); // Panggil function search

    Di Console Log ada error gini : event is not defined

    • Oh maaf om. Itu dari tutorial saya nya ada yang kelewat skripnya. Sudah saya perbaiki om. Silahkan ubah pada file process.js baris ke 39 :
      $(“#nis”).keyup(function(){

      ubah menjadi

      $(“#nis”).keyup(function(event){

  5. andisurjana

    bro mw nanya kl array nya sy kasih [] kenapa ga mw dieksekusi ya… kayak gini

    $callback[] = array(
    ‘status’ => ‘success’, // Set array status dengan success
    ‘nama’ => $data[‘nama’], // Set array nama dengan isi kolom nama pada tabel siswa
    ‘jenis_kelamin’ => $data[‘jenis_kelamin’], // Set array jenis_kelamin dengan isi kolom jenis_kelamin pada tabel siswa
    ‘telepon’ => $data[‘telp’], // Set array jenis_kelamin dengan isi kolom telp pada tabel siswa
    ‘alamat’ => $data[‘alamat’], // Set array jenis_kelamin dengan isi kolom alamat pada tabel siswa
    );

    ??

    • bentar itu tujuannya dibikin kaya gitu buat apa? kan $callback itu sudah array, ga perlu pakai [] itu lagi

      • andisurjana

        jadi saya mw buat combobox yang di filter berdasarkan tanggal yang saya input. saya membuat fungsi seperti dibawah ini yang saya letakin di process.js(di bawah fungsi search yang ada di artikel ini)..

        function tamu() {
        $(‘#namatamu’).empty();
        $(‘#namatamu’).append(“–Pilih Tamu–“);
        $.ajax ({
        type:”POST”,
        url:”search.php”,
        contentType:”application/json; charset=UTF-8″,
        dataType:”json”,
        success: function(data) {
        $(‘#namatamu’).empty();
        $(‘#namatamu’).append(“–Select Tamu–“);
        $.each(function(i, item) {
        $(‘#namatamu’).append(” + data[i].namatamu + ‘</option');
        });
        },
        complete:function() {
        }
        });
        }

        cuma ga muncul2 isi combobox nya… ? (saya menggunakan script yang ada pada artikel ini untuk menangkap tanggalnya – process.js)

  6. Tomas herianto

    Gan mau tanya kenapa saat saya tambahkan kategori textbox satu lagi dan masukkan dalam ajax muncul alert undefined index terus?? Bagaimana membuat pencarian dengan dua keyword?

  7. penambangilmu

    Terimakasih mas atas dokumentasinya. Tetap semangat membuat dokumentasinya

    • Rizaldi Maulidia Achmad

      sama-sama om. senang bisa membantu 😀
      siap om haha

  8. ahmad akhrom

    gan array ane udah bener sesuai urutan data yang ada di tabel database tapi, data tidak ditemukan terus ya.. yang bagian buat array di prosesajax.php udah bener.. apanya ya gan..

    • Rizaldi Maulidia Achmad

      Coba kirim kan source code yang sudah di buat lewat fans page fb kami om. Tapi paling besok saya bisa bantu cek nya

  9. aries jabrik

    gan kalo misalnya saya tambahkan fild foto trus saya mau tampilkan fotonya , itu bgaiamana

  10. zaguar Rigil

    Terima kasih telah membantu.

    Maaf saya mau tanyak lagi, ini saya sudah gunakan script ini dan berhasil. tpi agar data yang dicari bisa langsung disimpan bagaimana caranya ?? terima kasih

    • Rizaldi Maulidia Achmad

      tinggal kirim melalu form submit. dan arahkan action nya ke file untuk memproses simpan data ke databasenya om. di coba dulu. kalau ada masalah baru coba tanya ke saya lagi om

      • aries jabrik

        gan kalo misalnya saya tambahkan fild foto trus saya mau tampilkan fotonya , itu bgaiamana

        • Rizaldi Maulidia Achmad

          tampilkan saja om. kalo foto kan berarti harus pakai tag . bingung nya dimana?

  11. zaguar rigil

    Selamat Sore,
    saya ingn bertanya, ini kan ngambil dar 1 tabel aja. jika kita megambil data dari 2 tabel atau lebih bagaimana ??

    terima kasih

    • Rizaldi Maulidia Achmad

      tinggal disesuaikan saja om query nya. kalau tabel-tabel tersebut berelasi. gunakan queyr join om. kalau mau saya bantu. tolong screenshot struktur tabel nya seperti apa, dan data apa saja yang mau ditampilkan. kirim screenshotnya dengan pesan melalui fans page facebook kami di http://www.facebook.com/mynotescode

  12. abel irnando

    Terima Kasih Gan Sanga Membantu Postingannya Sudah Beberapa Saat Saya Mencari Postingan Seperti Ini Tapi Baru Ketemu Sekarang Makasih Banyak Gan

    • Rizaldi Maulidia Achmad

      Sama-sama om. Senang bisa membantu 😀

  13. Merry_Sky

    Saya mau tanya krna saya baru belajar..

    kenapa saat saya terapkan, terus saya ganti databasenya dengan data karyawan kok gak bisa jalan yah ??

    function search(){
    $(“#loading”).show(); // Tampilkan loadingnya

    $.ajax({
    type: “POST”, // Method pengiriman data bisa dengan GET atau POST
    url: “search.php”, // Isi dengan url/path file php yang dituju
    data: {nik : $(“#nik”).val()}, // data yang akan dikirim ke file proses
    dataType: “json”,
    beforeSend: function(e) {
    if(e && e.overrideMimeType) {
    e.overrideMimeType(“application/json;charset=UTF-8”);
    }
    },
    success: function(response){ // Ketika proses pengiriman berhasil
    $(“#loading”).hide(); // Sembunyikan loadingnya

    if(response.status == “success”){ // Jika isi dari array status adalah success
    $(“#nama_karyawan”).val(response.nama_karyawan); // set textbox dengan id nama
    $(“#jabatan”).val(response.jabatan); // set textbox dengan id jenis kelamin
    $(“#dept”).val(response.dept); // set textbox dengan id telepon
    }else{ // Jika isi dari array status adalah failed
    alert(“Data Tidak Ditemukan”);
    }
    },
    error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
    alert(xhr.responseText);
    }
    });
    }

    $(document).ready(function(){
    $(“#loading”).hide(); // Sembunyikan loadingnya

    $(“#btn-search”).click(function(){ // Ketika user mengklik tombol Cari
    search(); // Panggil function search
    });

    $(“#nik”).keyup(function(){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
    search(); // Panggil function search
    }
    });
    });

    mohon bantuannya.
    Terima Kasih

    • Rizaldi Maulidia Achmad

      coba cek kembali pada file search.php nya. pastikan nama field pada query selectnya sama dengan tabel yang ada di database. lalu coba jalankan kembali tapi sebelumnya buka console pada browsernya terlebih dahulu agar terlihat error nya apa.

  14. Malik Adhi

    Bagaimana kodingnya bila ini diterapkan dalam codeigniter?
    Terima kasih

    • Rizaldi Maulidia Achmad

      Bisa saja om. Cuman kalau saya jrlaskan lewat komentar step2 nya lumayan panjang hehe

      • Malik Adhi

        Om, mohon dicek, salahnya dimana ya kalau pake codeigniter:
        controller (menu):
        public function get_parent()
        {
        $keyword = $this->uri->segment(3);
        $data = $this->db->from(‘tbl_menu’)->like(‘menu_id’,$keyword)->get();
        foreach($data->result() as $row)
        {
        $arr[‘query’] = $keyword;
        $arr[‘success’][] = array(
        ‘menu_id’ =>$row->menu_id,
        ‘descr’ =>$row->descr
        );
        }
        echo json_encode($arr);
        }

        view(menu_view):

        function search_parent() {
        $.ajax({
        type: “POST”,
        url : “”,
        data: {menu_id : $(“#menu_id”).val()},
        dataType: “json”,
        success: function(response){
        if(response.status == “success”){
        $(‘#descr-x’).val(result.descr);
        }
        else {
        $( ‘#descr-x’ ).val(‘Data unavailable’);
        }
        },
        error: function (xhr, ajaxOptions, thrownError){
        alert(xhr.responseText);
        }
        });
        }
        $(document).ready(function(){
        $(“#btn_get_parent”).click(function(){
        search_parent();
        });
        $(“#parent_id”).keyup(function(){
        if(event.keyCode == 13){
        search_parent();
        }
        });
        }

        • Rizaldi Maulidia Achmad

          apakah ada error yang muncul? coba running sambil membuka console nya. Tekan CTRL + SHIFT + I (untuk mozilla), CTRL + SHIFT + J (Chrome)

  15. Gerry...

    saya mau tanya mas

    code ini mas bsa jelaskan tidak?
    $(document).ready(function(){
    $(“#loading”).hide(); // Sembunyikan loadingnya

    $(“#cari”).click(function(){ // Ketika user mengklik tombol Cari
    search(); // Panggil function search
    });

    $(“#nis”).keyup(function(){ // Ketika user menekan tombol di keyboard
    if(event.keyCode == 13){ // Jika user menekan tombol ENTER
    search(); // Panggil function search
    }
    });
    });

    soalnya saya coba nilai “$” error

    • Rizaldi Maulidia Achmad

      itu sudah saya jelaskan dengan comment2 pada setiap kodenya om.
      Maksudnya dari “soalnya saya coba nilai “$” error” apa yah?

  16. Temy Ramdhan

    zal urg hoyong menta codingan anu NOTES HEADLINE nya

    • Rizaldi Maulidia Achmad

      Itu bawaan dari theme wordpressnya om

  17. marshal

    bang file download kode nya bagidonk

      • PUJI JOKO PURWANTO

        Bagaimana cara menggunakannya untuk dihubungkan dengan website WordPress. Mkasih sebelumnya atas bantuan dan infonya. Semoga aplikasinya barokah bagi semua. Amin

        • kalau dengan wordpress saya kurang tau om, tapi karna wordpress sama-sama dibuat dari php juga, harusnya bisa di impementasikan

NOTE ARCHIVES