mmlpro21: Membuat Pencarian Menggunakan Ajax dan Php

Hi teman-teman, kali ini saya ingin berbagi kode cara membuat pencarian yang otomatis muncul jika diketik di form pencarian. Munkin bisa dikatakan seperti di facebook. Tau kan facebook? Saya rasa kalian sudah tau.(Sapa sih yang gak kenal sama Om facebook???hehehehe)

Kembali ke pembahasan. Disini saya membuat dengan ajax, php dan css untuk tampilannya.

Seperti biasa kita membuat table databasenya terlebih dahulu. koneksi databasenya buat sendiri ya. Untuk contoh disini saya mengincludekan koneksi.php.

Kode SQL

CREATE TABLE `datamahasiswa` (
`id_dtamhs` int(11) NOT NULL auto_increment,
`nama` varchar(50) NOT NULL,
`alamat` varchar(80) NOT NULL,
`email` varchar(90) NOT NULL,
PRIMARY KEY (`id_dtamhs`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

Keterangan :
Table di atas saya memberikan nama datamahasiswa.

Langkah selanjutnya mari kita buat indexnya.

index.php

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />

<title>search dengan ajax</title>
<link type="text/css" href="kostumCss.css" rel="stylesheet"/>
<script type="text/javascript" src="ajax-pencarian.js"></script>
</head>

<body>
<div id="headerSdAEXP">
<div class="classHeadSdAEXP">
<b>mmlpro21 : Search tutorial</b><?include "cari.php";?>
</div>
</div>

</body>
</html>

Keterangan :
<link type="text/css" href="kostumCss.css" rel="stylesheet"/>
Kode diatas ini untuk pemanggilan cssnya.
<script type="text/javascript" src="ajax-pencarian.js"></script>
Kode di atas ini untuk pemanggilan ajaxnya.

Selanjutnya pembuatan form

cari.php

Keterangan :
onkeyup="cariAjax(this.value)"
Kode diatas untuk pemanggilan function diajaxnya.
Yang tadinya name sekarang menggunakan id saja.

eksekusi_pencarian.php

<?php include "koneksi.php";
$cari=$_GET['cari'];
$pencarian=mysql_query("SELECT * FROM datamahasiswa WHERE nama like '%$cari%' ORDER BY id_dtamhs DESC");
$jum_cari=mysql_num_rows($pencarian);
if($jum_cari==0){echo "
<div class='kotakHasilEksekusi'>
Hasil pencarian tidak ditemukan...
</div>";}
else{
echo "<div class='infoCari'>Ditemukan : <b>$jum_cari</b> data mahasiswa.Dengan kata kunci $cari.</div>";
while($p=mysql_fetch_array($pencarian)){
?>
<div class="kotakHasilEksekusi">
<div><?echo "$p[nama]";?></div>
<div><?echo "$p[alamat]";?></div>
<div><?echo "$p[email]";?></div>
</div>
<?}}?>

Keterangan :
include "koneksi.php";
Kode diatas ini ganti dengan kode koneksi ke database anda.
Where nama bisa anda ganti berdasarkan pencarian yang ingin di cari, misal alamat, atau email.

ajax-pencarian.js

Terahir kita membuat tampilannya biar lebih bagus dengan css.

kostumCss.css

body{background: #fff;margin: 0;padding: 0;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;font-size: 12px;color:#555555;} #headerSdAEXP{width:100%;background: #eb5200;} .classHeadSdAEXP{background: #eb5200;width:970px;margin-left: auto;margin-right: auto;padding:5px;} .classHeadSdAEXP b{display: inline-block; margin-right: 10px;color:#fff;} #kotakCariSdAEXP{width:300px;display: inline-block;} #kotakCariSdAEXP input[type=text]{border:1px solid #fff;width:90%;padding-left:26px;padding-bottom:5px;padding-right:5px;padding-top:5px;background: url(iconcari.png)no-repeat #fff;background-size: 20px;background-position: 5px;} #myDivHasilCari{position: absolute;background: #fff;margin-top:5px;margin-left: 175px;box-shadow: 0px 3px 5px #555555;} .kotakHasilEksekusi{width:400px;padding:5px;} .kotakHasilEksekusi div{display: inline-block;padding:5px;border-right: 1px #ccc solid;min-width:100px;background: #f7f7f7;} .infoCari{padding:5px;margin-bottom: 10px;} .infoCari b{color:#555555;}

Gimana teman-teman?cukup mudah bukan?? Jika ada yang belum dimengerti ditanyakan saja.
Bagi master-master kalau ingin menambahkan juga boleh.hehehe
Sekian pembahasan hari ini. Kurang lebihnya mohon dimaafkan. Semoga bermanfaat.

Bagi yang ingin mendownload silahkan klik di bawah ini :

Salam hangat

mmlpro21

mmlpro21

Rabu, 26 Februari 2014

Membuat Pencarian Menggunakan Ajax dan Php

1 komentar: