Membuat Live Search PHP Menggunakan Ajax Jquery

Kali ini kita membuat live search yang sering kali menjadi masalah sejauh ini. Kalau mengitu kita bisa langsung saja cara menggunakan Ajax untuk search.

Live Search PHP Mengunakan Ajax Jquery

Hal yang pertama kali kita akan menggunakan mysqli prosedural untuk menyambungkan koneksi ke database. Kedua, kita menggunakan framework bootstrap untuk memperindah tambilan nantinya. Ketiga, kita harus sudah menyediakan library jQuery. Keempat, membuat database dan table di phpMyAdmin kita. Silakan simak langkah dibawah ini.

Baca juga: Membuat Live Serach PHP jQuery

Persiapan

Buat folder baru dengan nama tutorial dan di dalam folder terdapat beberapa file seperti dibawah ini.

bootsrap.min.css (download)
connect.php
index.php
jQuery-3.3.1.min.js (download)
search.php

Langkah 1

Membuat nama database tutorial lalu klik sql dan masukan script di bawah ini agar tidak perlu repot membuat table dan kolomnya.

Membuat Nama Table Users

CREATE TABLE users (
id int AUTO_INCREMENT PRIMARY KEY,
name varchar(50) NOT NULL,
username varchar(50) NOT NULL,
password varchar(50) NOT NULL
);

Langkah 2

Kita membuat koneksi seperti biasanya dengan mysqli prosedural, ada juga beberapa diantara kita menggunakan mysqli oop dan PDO. Tetapi kali ini tutorialnya mysqli prosedural, silakan masukan script dibawah ini di file connect.php

Koneksi Ke Database connect.php

<?php
$conn = mysqli_connect('localhost', 'root', '', 'tutorial');

Langkah 3

Untuk menampilkan halaman awal masukan script dibawah ini di file index.php untuk penjelasannya silakan lihat setelah script ini.

Script File index.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Membuat Live Search PHP Ajax - Sekolah Program</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-3.3.1.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="container">
      <input type="text" id="search" class="form-control mt-3 mb-5" placeholder="serach name...">
      <div class="table-responsive">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>name</th>
              <th>username</th>
              <th>password</th>
            </tr>
          </thead>
          <tbody id="tampil">
            <?php
              require_once 'connect.php';
              $no = 1;
              $query = mysqli_query($conn, "SELECT * FROM users");
              while ($row = mysqli_fetch_object($query)) {
             ?>
            <tr>
              <td><?= $no++; ?></td>
              <td><?= $row->name; ?></td>
              <td><?= $row->username; ?></td>
              <td><?= $row->password; ?></td>
            </tr>
          <?php } ?>
          </tbody>
        </table>
      </div>
      <a href="https://www.sekolahprogram.com" class="btn btn-success mt-3 btn-block">By Sekolah Program</a>
    </div>
  </body>
  <script type="text/javascript">
    $(document).ready( function() {
      $('#search').on('keyup', function() {
        $.ajax({
          type: 'POST',
          url: 'search.php',
          data: {
            search: $(this).val()
          },
          cache: false,
          success: function(data) {
            $('#tampil').html(data);
          }
        });
      });
    });
  </script>
</html>

Dimulai dari peletakan library jquery yang kita ketahui biasanya kita letakan di bagian bawah, kenapa yang satu ini diletakan diatas. Karena agar kita bisa menggunakan fungsi yang ada pada jquery atau lainnya lebih baik kita letakan diatas agar terbaca. Penjelasan di bawah ini untuk mengenal atribut dan beberapa hal lainnya.

Baca juga: Belajar PHP Untuk Pemula

Menggunakan atribut id dengan nama search yang dimaksud untuk memberikan nama penanda agar kita bisa menghubungkan nama tersebut dengan jquery-Nya.

Menggunakan on lalu keyup disini apabila kita memasukan satu huruf apapun itu maka secara otomatis fungsi tersebut akan ready dan siap dijalankan.

Hal yang sama untuk atribut id nama tampil untuk menampilkan hasil dari pada yang kita cari.

Pada penggunakan ajak ada beberapa nama yaitu type untuk memberikan method GET atau POST yang disarankan ialah POST. Lalu ada url untuk mengirim data ke file mana. Data semua data yang akan dikirimkan berapa nilai dan lainnya yang di kirimkan ke file tujuan. Cache untuk memberikan penyimpanan data sementara. Success apa bila berhasil maka akan menampilkan datanya yang sesuia.

Langkah 4

Pada langkah terakhir silakan bisa langsung saja copy dan paste ke file search.php.

Scipt File search.php

<?php
if (isset($_POST['search'])) {
  require_once 'connect.php';
  $no = 1;
  $search = $_POST['search'];
  $query = mysqli_query($conn, "SELECT * FROM users WHERE name LIKE '%".$search."%'");
  while ($row = mysqli_fetch_object($query)) {
 ?>
<tr>
  <td><?= $no++; ?></td>
  <td><?= $row->name; ?></td>
  <td><?= $row->username; ?></td>
  <td><?= $row->password; ?></td>
</tr>
<?php }
}?>

Apabila telah selesai bisa langsung dicoba atau bisa melihat hasilnya dibawah ini dan bisa langsung di download.

Demo dan Download

Mohon maaf apabila ada kesalahan yang diberikan dan silakan komentar bila ada yang ditanyakan

Category jQuery PHPTags Ajax Live Search Live Search PHP Search Ajax

Membuat Live Search PHP Menggunakan Ajax Jquery

Live Search PHP Mengunakan Ajax Jquery

Mari Tinggalkan Komentar Batalkan balasan