Ads Header

› ›

Membuat Live Search Php Jquery Mudah Gampang Dipahami

Rabu, 09 Juni 2010 Tambah Komentar

Cara menciptakan live search jquery ajax dengan mudah – Dalam menciptakan website, pastinya setiap programmer web meninginginkan websitenya sangat cantik dan praktis dijelajahi. Seiring perkembangannya bahasa pemrograman web dan kemampuan penerjemahan oleh browser, sekarang website sudah semakin bisa dibentuk lebih modern.

Salah satu cara menciptakan website php dan html menjadi lebih dinamis yaitu dengan memakai Jquery. Jquery yaitu bahasa javascript yang sudah mengalami perkembangan sehingga bisa dipakai dengan lebih mudah. Kemudahan jquery salah satunya yaitu function yang lebih banyak dan bisa ditulis dengan lebih gampang.

Mungkin ada yang belum tau bagaimana sih cara menciptakan 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 pribadi menampilkan hasil. Contoh live search bisa kalian lihat dikala mencari sesuatu di google.


Cara menciptakan live search yang paling mudah yaitu memakai ajax yang sudah disederhanakan oleh jquery. Hanya beberapa baris kode, sudah bisa menciptakan pencarian data website menjadi lebih dinamis.

Berikut ini yaitu cara menciptakan pencarian data dinamis atau live search memakai jquery ajax php mysql.

1. Buat database berjulukan ‘db_siswa’ tanpa tanda petik

2. Kemudian klik SQL, masukan instruksi 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 instruksi 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>


Perhatikan!
Pada baris instruksi berikut ini:
<script type="text/javascript">
$(document).ready(function(){
$('#carinama').on('keyup', function(){
$('table').load('ajax.php?nama=' + $('#carinama').val());
});
});
</script>
Itu yaitu instruksi jquery yang dipakai untuk mengembalikan data ke server. Logikanya adalah, dikala seseorang menulis kolom input, maka server akan mengembalikan ke file 'ajax.php' dan kemudian ditampilkan kembali.

4. Nah, kemudian buat file dengan nama ‘ajax.php’ tanpa tanda petik, dan masukan instruksi 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 kanal di browser dengan url localhost/latihan

6. Dan silahkan mencoba J


Sekian artikel cara menciptakan live search dengan ajax dan jquery pada kesempatan kali ini. Semoga tutorial singkat ini bermanfaat. Terima Kasih!

Belum ada Komentar untuk "Membuat Live Search Php Jquery Mudah Gampang Dipahami"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel