Membuat Live Search Database menggunakan AJAX dan PHP MySQL

Assalamualaikum

Artikel kali ini akan membahas tentang bagaimana caranya membuat Live Search data dari database menggunakan Ajax dan PHP MySQL

Latar belakang penulisan artikel ini adalah, saat ini saya sedang mengerjakan pembuatan sebuah aplikasi tentang pencarian lokasi pelanggan salah satu ISP pada google map. Data lokasi pelanggan tersebut tersimpan di dalam database MySQL, nah untuk mempermudah pencarian data pelanggan maka saya harus membuat sebuah Input textbox yang fungsinya adalah untuk mencari nama pelanggan yang ada di dalam database berdasarkan beberapa karakter yang diinputkan pada textbox tersebut tanpa harus melewati proses submit form terlebih dahulu.

Untuk mensiasatinya makanya digunakanlah Ajax sebagai media Live Search data. karena saat ini saya tidak memiliki Hosting makanya saya tidak bisa memberikan Demonya, jadi untuk yang penasaran untuk mencoba silahkan download saja File yang ada di akhir artikel ini.

Sebagai Contoh pada kasus kali ini saya mempunya sebuah database dengan nama lamers dan didalamnya terdapat sebuah tabel dengan nama pelanggan yang field-fieldnya berupa id, nama, alamat dan koordinat

Membuat Live Search Database menggunakan Ajax

	-- phpMyAdmin SQL Dump
	-- version 2.10.3
	-- http://www.phpmyadmin.net
	-- Host: localhost
	-- Waktu pembuatan: 19. April 2017 jam 16:48
	-- Versi Server: 5.0.51
	-- Versi PHP: 5.2.6

	SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

	-- Struktur dari tabel `pelanggan`

	CREATE TABLE `pelanggan` (
	`id` int(3) NOT NULL auto_increment,
	`nama` varchar(50) NOT NULL,
	`alamat` varchar(50) NOT NULL,
	`koordinat` varchar(50) NOT NULL,
	PRIMARY KEY (`id`)
	) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

	-- Dumping data untuk tabel `pelanggan`

	INSERT INTO `pelanggan` VALUES (1, 'Uphik', 'Nusagiya', '-0.924238,122.843590');
	INSERT INTO `pelanggan` VALUES (2, 'Lamers', 'Kilongan', '-0.928872,122.847613');

view raw database.sql hosted with ❤ by GitHub

Selanjutnya kita hanya akan membuat file pertama dengan nama index.html dan isi kodenya adalah sebagai berikut

	<html>
	<head>
	<title>Ajax Search Box using PHP and MySQL</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="typeahead.min.js"></script>
	<script>
	$(document).ready(function(){
	$('input.typeahead').typeahead({
	name: 'typeahead',
	remote:'cari.php?key=%QUERY',
	limit : 10
	});
	});
	</script>
	<style type="text/css">
	.bs-example{
	font-family: sans-serif;
	position: relative;
	margin: 50px;
	}
	.typeahead, .tt-query, .tt-hint {
	border: 2px solid #CCCCCC;
	border-radius: 8px;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
	outline: medium none;
	padding: 8px 12px;
	width: 396px;
	}
	.typeahead {
	background-color: #FFFFFF;
	}
	.typeahead:focus {
	border: 2px solid #0097CF;
	}
	.tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	}
	.tt-hint {
	color: #999999;
	}
	.tt-dropdown-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 422px;
	}
	.tt-suggestion {
	font-size: 24px;
	line-height: 24px;
	padding: 3px 20px;
	}
	.tt-suggestion.tt-is-under-cursor {
	background-color: #0097CF;
	color: #FFFFFF;
	}
	.tt-suggestion p {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div class="row">
	<div class=".col-md-6">
	<div class="jumbotron">
	<h1>Ajax Search Box <small>Catatan Lamers</small></h1>
	<button type="button" class="btn btn-primary btn-lg">Visit Tutorial</button>
	</div>
	</div>
	<div class=".col-md-6">
	<div class="panel panel-default">
	<div class="bs-example">
	<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Cari Nama Pelanggan">
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

selanjutnya kita akan buat sebuah file php dengan nama cari.php yang fungsinya adalah untuk mencari kecococokan inputan dari textbox yang ada di file index.html dengan data yang ada di database dan selanjutnya dikirim kembali ke index.html untuk ditampilkan.

	<?php
	$key=$_GET['key'];
	$array = array();
	$con=mysql_connect("localhost","root","root");
	$db=mysql_select_db("lamers",$con);
	$query=mysql_query("select * from pelanggan where nama LIKE '%{$key}%'");
	while($row=mysql_fetch_assoc($query))
	{
	$array[] = $row['nama'];
	}
	echo json_encode($array);
	?>

view raw cari.php hosted with ❤ by GitHub

jangan lupa Download file javascript dibawah ini lalu tempatkan 1 folder dengan kedua file sebelumnya (index.html dan cari.php)

Download typeahead.min.js

Oh ia untuk Jquery dan Bootstrap saya pakai yang CDN, jadi agar script ini bisa berjalan, harus ada koneksi internet ya, kalo penerapanya nanti akan di pakai offline maka ada baiknya Jquery dan CSS Bootstrap nya di download aja langsung dari situsnya biar ditaruh di server lokal.

Buat yang gak mau ribet langsung aja download seluruh filenya beserta dengan database melalui Link dibawah ini

Download Live Search With AJAX

Oke terima kasih dan sampai jumpa lagi
Wassalam