Cara membuat live search jquery ajax dengan mudah – Dalam membuat website, pastinya setiap programmer web meninginginkan websitenya sangat bagus dan mudah dijelajahi. Seiring perkembangannya bahasa pemrograman web dan kemampuan penerjemahan oleh browser, kini website sudah semakin bisa dibuat lebih modern.
Salah satu cara membuat website php dan html menjadi lebih dinamis adalah dengan menggunakan Jquery. Jquery adalah bahasa javascript yang sudah mengalami perkembangan sehingga bisa digunakan dengan lebih mudah. Kemudahan jquery salah satunya adalah function yang lebih banyak dan bisa ditulis dengan lebih gampang.
Mungkin ada yang belum tau bagaimana sih cara membuat website dinamis dengan jquery? Terutama dalam pembuatan live search?
Ya, live search memang sering ditanya-tanya oleh beberapa orang. Live search memungkinkan pengunjung untuk mencari sebuah data lewat form input dengan langsung menampilkan hasil. Contoh live search bisa kalian lihat ketika mencari sesuatu di google.
Cara membuat live search yang paling mudah adalah menggunakan ajax yang sudah disederhanakan oleh jquery. Hanya beberapa baris kode, sudah bisa membuat pencarian data website menjadi lebih dinamis.
Berikut ini adalah cara membuat pencarian data dinamis atau live search menggunakan jquery ajax php mysql.
1. Buat database bernama ‘db_siswa’ tanpa tanda petik
2. Kemudian klik SQL, masukan kode berikut ini
-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jul 22, 2018 at 09:27 AM
-- Server version: 5.6.21
-- PHP Version: 5.6.3
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `db_siswa`
--
-- --------------------------------------------------------
--
-- Table structure for table `tb_siswa`
--
CREATE TABLE IF NOT EXISTS `tb_siswa` (
`id` int(9) NOT NULL,
`nama` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tb_siswa`
--
INSERT INTO `tb_siswa` (`id`, `nama`) VALUES
(1, 'Andi Saputra'),
(2, 'Anca Sarmidi'),
(3, 'Ance Sarmini'),
(4, 'Benni Dony'),
(5, 'Bento Harianto'),
(6, 'Bentar Samodra'),
(7, 'Tegar Santosa');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
MODIFY `id` int(9) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;3. Buat folder latihan pada htdocs
3. Buat file dengan nama ‘index.php’ tanpa tanda petik, dan masukan kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Live Search Atau Autoload</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<?php
$db = mysqli_connect('localhost','root','','db_siswa');
if (isset($_POST['input'])) {
mysqli_query($db, "INSERT INTO tb_siswa VALUES ('','$_POST[nama]')");
}
?>
<form method="post" action="">
<input type="text" name="nama" id="nama" placeholder="Nama Orang"> <input type="submit" name="input" value="Kirim">
</form>
<input type="text" name="carinama" id="carinama">
<h3>DATA NAMA ORANG</h3>
<table>
<tr>
<th>Nomor</th>
<th>Nama</th>
</tr>
<?php
$q = mysqli_query($db, "SELECT*FROM tb_siswa");
$no = 1;
while ($d = mysqli_fetch_array($q)) {
?>
<tr>
<td><?=$no;?></td>
<td><?=$d['nama'];?></td>
</tr>
<?php
$no++;
}
?>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#carinama').on('keyup', function(){
$('table').load('ajax.php?nama=' + $('#carinama').val());
});
});
</script>
</body>
</html><script type="text/javascript">
$(document).ready(function(){
$('#carinama').on('keyup', function(){
$('table').load('ajax.php?nama=' + $('#carinama').val());
});
});
</script>Itu adalah kode jquery yang digunakan untuk mengembalikan data ke server. Logikanya adalah, ketika seseorang menulis kolom input, maka server akan mengembalikan ke file 'ajax.php' dan kemudian ditampilkan kembali.
4. Nah, lalu buat file dengan nama ‘ajax.php’ tanpa tanda petik, dan masukan kode berikut ini.
<table>
<tr>
<th>Nomor</th>
<th>Nama</th>
</tr>
<?php
$db = mysqli_connect('localhost','root','','db_siswa');
$q = mysqli_query($db, "SELECT*FROM tb_siswa WHERE nama LIKE '%$_GET[nama]%'");
$no = 1;
while ($d = mysqli_fetch_array($q)) {
?>
<tr>
<td><?=$no;?></td>
<td><?=$d['nama'];?></td>
</tr>
<?php
$no++;
}
?>
</table>5. SIlahkan akses di browser dengan url localhost/latihan
6. Dan silahkan mencoba J
Sekian artikel cara membuat live search dengan ajax dan jquery pada kesempatan kali ini. Semoga tutorial singkat ini bermanfaat. Terima Kasih!
akhirnya paham jugaa :)
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteTerimakasih banyak mas atas ilmu dan artikelnya, Alhamdulillah saya jadi bisa, Semoga bisa berguna buat yang lain juga.
ReplyDelete