Cara membangun live search jquery ajax dengan gampang – Pada membangun situs, pastinya setiap programmer web meninginginkan websitenya amat bagus dan gampang dijelajahi. Seiring perkembangannya bahasa pemrograman web dan kemampuan penerjemahan oleh browser, kini situs telah semakin dapat dikerjakan lebih modern.
Diantara cara membangun situs php dan html menjadi lebih dinamis ialah dengan menggunakan Jquery. Jquery ialah bahasa javascript yang telah mengalami perkembangan sehingga dapat digunakan dengan lebih gampang. Kemudahan jquery salah satunya ialah function yang lebih banyak dan dapat ditulis dengan lebih gampang.
Mungkin ada yang belum tau bagaimana sih cara membangun situs dinamis dengan jquery? Terutama pada penyusunan live search?
Ya, live search memang sering ditanya-tanya oleh beberapa orang. Live search memungkinkan pengunjung bagi mencari sebuah data lewat form input dengan seketika menampilkan hasil. Contoh live search dapat kalian lihat ketika mencari sesuatu di google.
Cara membangun live search yang sangat gampang ialah menggunakan ajax yang telah disederhanakan oleh jquery. Hanya beberapa baris kode, telah dapat membangun pencarian data situs menjadi lebih dinamis.
Berikut ini ialah cara membangun pencarian data dinamis atau live search menggunakan jquery ajax php mysql.
1. Bikin 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 `Referensi Coding_siswa`
--
CREATE TABLE IF NOT EXISTS `Referensi Coding_siswa` (
`id` int(9) NOT NULL,
`nama` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `Referensi Coding_siswa`
--
INSERT INTO `Referensi Coding_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 `Referensi Coding_siswa`
--
ALTER TABLE `Referensi Coding_siswa`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `Referensi Coding_siswa`
--
ALTER TABLE `Referensi Coding_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. Bikin folder latihan di htdocs
3. Bikin 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 Referensi Coding_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 Referensi Coding_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>
Perhatikan!
Di baris kode berikut ini:
<script type="text/javascript">
$(document).ready(function(){
$('#carinama').on('keyup', function(){
$('table').load('ajax.php?nama=' + $('#carinama').val());
});
});
</script>
Itu ialah kode jquery yang digunakan bagi mengembalikan data ke server. Logikanya ialah, ketika seseorang menulis kolom input, karenanya server akan mengembalikan ke file ‘ajax.php‘ dan kemudian ditampilkan kembali.
4. Nah, lalu bikin 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 Referensi Coding_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
Sekianlah artikel cara membangun live search dengan ajax dan jquery di kesempatan kali ini. Semoga panduan singkat ini bermanfaat. Terima Kasih!
(Visited 16 times, 1 visits today)
