Blog

Belajarphp > Blog > Tutorial Ajax Jquery > Tutorial Autocomplate Dengan PHP Ajax Dan MySQL

Tutorial Autocomplate Dengan PHP Ajax Dan MySQL

November 12, 2017
Posted by: Nuris Akbar
Category: Tutorial Ajax Jquery

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

Kali ini kita akan belajar bagaimana caranya membuat fitur pencarian autocomplate dengan teknik ajax dengan data yang berasal dari database MySQL. untuk proses autocomplate nya kita akan menggunakan fitur dari jquery sehingga script yang kita buat menjadi lebih sederhana dan mudah.

Membuat Database Untuk Menyimpan Data

Karna data yang akan dicari nanti berasal dari database maka kita akan membuat sebuah database baru dengan nama test, lalu pada database tersebut kita akan membuat sebuah tabel baru dengan nama autocomplate, tabel ini nanti akan bertugas menyimpan informasi yang akan dicari melalui form autocomplate dengan php dan ajax.

--
-- 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/');

-- 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/');

Membuat Form Pencarian Autocomplate

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

<!doctype html>

<head>

<title>Autocomplete search using PHP Mysql Jquery and Ajax</title>

$(function() {

$( "#skills" ).autocomplete({

source: 'autocomplete_search.php'

});

</script>

</head>

<body>

<h2>Autocomplete search using PHP Mysql Jquery and Ajax</h2>

<label for="skills" class="control-label">Skills: </label>

</div>

</body>

</html>

Memproses Pencarian Autocomplate Dengan Ajax

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);
?>

<?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);

Uji Coba Script Pencarian Automplate Dengan PHP MySQL Dan Ajax

Sekarang silahkan buka web browser anda dan masukan http://localhost/autocomplete/ pada address bar web browser anda, jika script yang anda buat sudah benar maka akan muncul tampilan seperti dibawah ini :