More

    Membuat AutoComplete Dengan PHP, Ajax dan MySQL

    Membuat AutoComplete Dengan PHP, Ajax dan MySQL – Pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat autocomplete dengan php, ajax dan mysql.

    Apa itu autocomplete?

    Pernahkah anda melakukan pencarian di google, lalu dengan menggetikkan permulaan keyword yang ingin anda cari maka google akan memberikan ‘suggestion keyword’ (saran kata kunci) yang ingin anda cari dan anda bisa langsung memilihnya, nah itu adalah salah satu contoh dari autocomplete yang akan kita pelajari pada tutorial ini.

    Lalu, bagaimana cara membuat autocomplete dengan php?

    Berikut ini akan saya berikan tutorial tentang membuat autocomplete dengan php.

    Membuat AutoComplete Dengan PHP, Ajax dan MySQL

    1. Buat database terlebih dahulu, kali ini saya tidak saya jelaskan secara mendetil tentang bagaimana cara membuat database dan table baru pada mysql. Untuk mempermudah anda bisa dumping query sql berikut:
      --
      -- Table structure for table `autocomplete`
      --
      
      CREATE TABLE IF NOT EXISTS `autocomplete` (
        `id` int(100) NOT NULL,
        `title` varchar(100) NOT NULL,
        `url` varchar(100) NOT NULL
      ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
      
      --
      -- Dumping data for table `autocomplete`
      --
      
      INSERT INTO `autocomplete` (`id`, `title`, `url`) VALUES
      (1, 'How to create preloader using CSS & Jquery', 'http://www.webidea4u.com/create-preloader-using-css-jquery/'),
      (2, 'Login with Google Account using PHP & Mysql', 'http://www.webidea4u.com/login-google-account-using-php-mysql/'),
      (3, 'Login with Facebook using PHP & Mysql', 'http://www.webidea4u.com/login-facebook-using-php-mysql/'),
      (4, 'Export to Excel using PHP & Mysql', 'http://www.webidea4u.com/export-excel-using-php-mysql/'),
      (5, 'Login and Registration in PHP and Mysql', 'http://www.webidea4u.com/login-registration-php-mysql/'),
      (6, 'How to create bootstrap form validation', 'http://www.webidea4u.com/how-to-create-bootstrap-form-validation/');

       

    2. setelah membuat database, kemudian kita akan membuat form yang akan digunakan untuk melakukan pencarian data autocomplate dengan teknik ajax, silahkan buat sebuah file baru dengan nama index.php dan tulislah script berikut :
      <!doctype html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>TutorialPedia.net | Autocomplete search using PHP Mysql Jquery and Ajax</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script>
        $(function() {
          $( "#skills" ).autocomplete({
            source: 'autocomplete_search.php'
          });
        });
        </script>
      </head>
      <body>
      <div class="container">
        <h2>Autocomplete search using PHP Mysql Jquery and Ajax</h2>
        <label for="skills" class="control-label">Skills: </label>
        <input id="skills" class="form-control" placeholder="Enter your skills like PHP, Mysql, Jquery, Ajax">
      </div>
      </body>
      </html>
    3. sekarang kita akan membuat sebuah file baru dengan nama  autocomplate_search.php, file ini nanti akan bertugas untuk menggenerate data json berdasarkan keyword yang dikirimkan oleh file utama dengan teknik ajax, silahkan ketik script berikut ini :
      <?php
      $host = 'localhost';
      $username = 'root';
      $pass = '';
      $Dbname = 'test';
      //connect with the database
      $db = new mysqli($host,$username,$pass,$Dbname);
      //get search term
      $searchTerm = $_GET['term'];
      //get matched data from skills table
      $query = $db->query("SELECT * FROM autocomplete WHERE title LIKE '%".$searchTerm."%' ORDER BY id ASC");
      while ($row = $query->fetch_assoc()) {
          $data[] = $row['title'];
      }
      //return json data
      echo json_encode($data);
      ?>

       

    Sekarang coba jalankan.

    Itulah tutorial Membuat AutoComplete Dengan PHP, Ajax dan MySQL.

    sumber : belajarphp.net

    Free $100
    Deal

    Daftar menggunakan link di pojok kanan atas, minimal top up $25 usd. Maka dalam waktu 30 hari setelah registrasi anda akan mendapatkan credit $100 gratis dari vultr untuk mencoba layanan mereka.

    More Less
    Doesn't expire

    Recent Articles

    apa itu mirkotik

    Apa itu Mikrotik dan Fungsinya

    0
    Apa itu mikrotik? - Untuk beberapa orang yang biasa berkecimpung di dunia jaringan, mungkin sudah tidak asing lagi dengan yang namanya Mikrotik. Alat tersebut biasa ada...
    aplikasi belajar online

    Moodle, Aplikasi Belajar Online Gratis

    0
    Aplikasi Belajar Online - Saat ini membuat aplikasi pembelajaran online sangatlah mudah. Banyak sekali platform yang bisa anda gunakan untuk pembelajaran online, salah satunya...
    cara install mikrotik CHR

    Cara Install Mikrotik CHR (Cloud Host Router) pada Centos 8

    0
    Cara Install Mikrotik CHR - Mikrotik seringkali diperlukan ketika mengelola sebuah network secara fisik atau virtual. Saat ini, Mikrotik tersedia dalam versi cloud yang bernama Mikrotik CHR. Sistem operasi...
    upgrade windows 11

    Cara Upgrade Windows 11 Gratis!

    0
    Pada tanggal 5 Oktober 2021, microsoft telah resmi meluncurkan generasi windowsnya yaitu windows 11. Dengan serangkaian fitur baru, Windows 11 diklaim akan menyajikan pengalaman menggunakan...
    tips memilih isp

    Tips Memilih ISP Untuk Kebutuhan Internet Anda

    0
    Dalam memilih ISP kita perlu mempertimbangkan beberapa hal, diantaranya ialah budget. Namun, selain itu tentunya kita perlu memilih isp yang cocok dengan kita. Memilih ISP...

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!