Jasa Pembuatan Website Termurah! Klik Disini

Banner

IDCloudHost | SSD Cloud Hosting Indonesia
Beranda
PHP
tutorial

Membuat Auto Search Suggestion/Autocomplete Dengan PHP

Auto Search Suggestion/Autocomplete sepertinya sudah banyak kamu lihat pada website karena memudahkan seorang user untuk mencari data yang sesuai pada

Membuat Auto Search Suggestion/Autocomplete Dengan PHP

Tutorial PHP Lanjutan Part 37 : Membuat Auto Search Suggestion/Autocomplete Dengan PHP

Tutorial PHP Lanjutan Part 37 : Membuat Auto Search Suggestion/Autocomplete Dengan PHP -  Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari mengenai PHP dan kita sudah masuk ketahap lanjutan sekarang saya akan membuat materi baru dengan judul Membuat Auto Search Suggestion/Autocomplete Dengan PHP.

Auto Search Suggestion/Autocomplete sepertinya sudah banyak kamu lihat pada website karena memudahkan seorang user untuk mencari data yang sesuai pada database. Jadi kesannya hampir seperti pencarian google ya!.

Lanjut bahas kebawah yuk!

Membuat Auto Search Suggestion/Autocomplete Dengan PHP

Hal Yang Harus Disiapkan

Okey teman-teman, pada materi ini ada hal yang harus kita persiapkan dulu untuk membuat autocomplete.

Hal pertama yang kita butuhkan adalah plugin jQuery-Autocomplete yang berfungsi untuk memungkinkan Kamu dengan mudah membuat kotak autocomplete/autosuggest untuk bidang input teks.

Hal kedua yaitu data provinsi atau data daerah untuk hal ini sih saya sudah mencari digithub dan ketemu pastinya, apabila kamu perlu data daerah Indonesia silahkan kunjungi profile github cahyadsn atau bisa kamu klik disini 

Dengan demikian kita dapat melanjutkan pelajaran mengenai Membuat Auto Search Suggestion/Autocomplete Dengan PHP.

Membuat Database Provinsi

Buatlah database dengan nama “belajarwithib” setelah itu buat juga table didalam database tersebut dengan nama “provinsi” lalu buat field didalam table tersebut seperti dibawah ini :

  • id_prov char(2) NOT NULL,
  • nama tinytext NOT NULL,
  • PRIMARY KEY (id_prov)

Atau lebih cepat bisa gunakan query seperti dibawah ini:


CREATE TABLE IF NOT EXISTS provinsi (
  id_prov char(2) NOT NULL,
  nama tinytext NOT NULL,
  PRIMARY KEY (id_prov)
);

Setelah itu kamu masukan data provinsi sebanyak apapun yang kamu tahu namun kalau mau lebih cepat silahkan gunakan query seperti dibawah


INSERT INTO provinsi (id_prov, nama) VALUES
('11', 'Aceh'),
('12', 'Sumatera Utara'),
('13', 'Sumatera Barat'),
('14', 'Riau'),
('15', 'Jambi'),
('16', 'Sumatera Selatan'),
('17', 'Bengkulu'),
('18', 'Lampung'),
('19', 'Kepulauan Bangka Belitung'),
('21', 'Kepulauan Riau'),
('31', 'DKI Jakarta'),
('32', 'Jawa Barat'),
('33', 'Jawa Tengah'),
('34', 'DI Yogyakarta'),
('35', 'Jawa Timur'),
('36', 'Banten'),
('51', 'Bali'),
('52', 'Nusa Tenggara Barat'),
('53', 'Nusa Tenggara Timur'),
('61', 'Kalimantan Barat'),
('62', 'Kalimantan Tengah'),
('63', 'Kalimantan Selatan'),
('64', 'Kalimantan Timur'),
('65', 'Kalimantan Utara'),
('71', 'Sulawesi Utara'),
('72', 'Sulawesi Tengah'),
('73', 'Sulawesi Selatan'),
('74', 'Sulawesi Tenggara'),
('75', 'Gorontalo'),
('76', 'Sulawesi Barat'),
('81', 'Maluku'),
('82', 'Maluku Utara'),
('92', 'Papua'),
('91', 'Papua Barat');

Okey masalah database sudah beres nih  sekarang kita masuk kedalam tahap berikutnya.

Membuat Tampilan Search

Kita masih memakai bootstrap agar lebih cepat dan lebih agak manusiawi tampilannya namun jika ingin lebih keren silahkan kembangkan atau costum sendiri ya.

Sekarang buatlah file dengan nama index.php lalu ketikan code seperti dibawah:

Index.php


<!doctype html>
    <html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

        <title>Membuat Auto Search Suggestion/Autocomplete Dengan PHP</title>
        <style type="text/css">
        .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
        .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
        .autocomplete-selected { background: #F0F0F0; }
        .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
        .autocomplete-group { padding: 2px 5px; }
        .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
    </style>
</head>
<body>
    <div class="container">
        <div class="card mt-5">
          <div class="card-header">
            Auto Search Suggestion/Autocomplete Data Provinsi
        </div>
        <div class="card-body">
            <form>
                <div class="mb-3">
                  <label class="form-label">Cari Provinsi</label>
                  <input type="text" class="form-control" id="search" name="search" placeholder="Cari disini...">
              </div>
          </form>
          <p class="text-center mt-2"><a href="https://www.belajarwithib.my.id/" target="_blank" style="text-decoration:none;">www.belajarwithib.my.id</a></p>
      </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.11/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $( "#search" ).autocomplete({
      serviceUrl: "get_data.php",   
      dataType: "JSON",          
      onSelect: function (suggestion) {
          $( "#search" ).val(suggestion.nama);
      }
  });
})
</script>
</body>
</html>

Pada code dibawah ini lah cara kita menggunakan Jquery-Autocomplete kode emang singkat.


<script type="text/javascript">
  $(document).ready(function() {
    $( "#search" ).autocomplete({
      serviceUrl: "get_data.php",   
      dataType: "JSON",          
      onSelect: function (suggestion) {
          $( "#search" ).val(suggestion.nama);
      }
  });
})
</script>

Maksud dari serviceUrl: "get_data.php" kalau get_data.php itulah akan diproses datanya jadi sama seperti ajax ya.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.11/jquery.autocomplete.min.js"></script>

Code diatas berfungsi untuk memanggil plugin jQuery-Autocomplete agar bisa kita gunakan pada project kita saat ini.

Memproses Data Untuk Suggestion/AutoComplete

Ya tentu Jquery juga membutuhkan data agar dijadikan Suggestion jadi kita buat dengan PHP dan cara nya pun tidak jauh beda dengan cara menampilkan data dari database.

Sekarang buatlah file dengan nama get_data.php dan ketikan code seperti dibawah:

get_data.php


<?php
header("Content-Type: application/json; charset=UTF-8");
$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");

  if(isset($_GET['query'])){
    $keyword = $_GET['query'];
    $query = mysqli_query($koneksi,"SELECT * FROM provinsi WHERE nama LIKE '%".$keyword."%' ORDER BY id_prov LIMIT 10");
 
    while ($data = mysqli_fetch_array($query)) {
        $output['suggestions'][] = [
            'value' => $data['nama'],
            'nama'  => $data['nama']
        ];
    }
 
    if (! empty($output)) {
        echo json_encode($output);
    }
  }
?>

Jika kamu sudah mengikuti atau sudah paham mengenai PHP dasar atau PHP menengah saya rasa sudah cukup jelaskan apa yang saya ketikan diatas dan kamu pun akan paham.


 if(isset($_GET['query'])){
    $keyword = $_GET['query'];
    $query = mysqli_query($koneksi,"SELECT * FROM provinsi WHERE nama LIKE '%".$keyword."%' ORDER BY id_prov LIMIT 10");
 
    while ($data = mysqli_fetch_array($query)) {
        $output['suggestions'][] = [
            'value' => $data['nama'],
            'nama'  => $data['nama']
        ];
    }

Pada code diatas kita harus dulu mengambil data berdasarkan Keyword atau Query yang sudah kita tampung kedalam variable dan Keyword itu berasal dari kata atau text yang kita tuliskan pada text input.

Dan setelah itu kita ubah datanya kedalam bentuk JSON agar Jquery-AutoComplete dapat mengambil data tersebut.

Hasil dari program kita akan seperti dibawah ini:

Membuat Auto Search Suggestion/Autocomplete Dengan PHP


Apapun yang kamu ketikan atau apapun yang kamu cari otomatis akan muncul kotak sarannya.

File Untuk Kebutuhan Belajar

Source CodeMembuat Auto Search Suggestion/Autocomplete Dengan PHP

Okey sekian lah materi dari saya, semoga kamu bisa untuk mengembangkan tutorial ini jadi jauh lebih kompleks.

Semoga Bermanfaat!

Content Creator, Web Developer

Posting Komentar

© ‧ BelajarwithIB. All rights reserved. Developed by Jago Desain