Cara Membuat Mesin Pencarian Live Search Menggunakan PHP, Mysql, Jquery Ajax

Cara Membuat Mesin Pencarian Live Search Menggunakan PHP, Mysql, Jquery Ajax

Cara Membuat Mesin Pencarian Live Search Menggunakan PHP, Mysql, Jquery Ajax

Selamat datang di fajarproject.com Dalam kesempatan kali ini, kita akan membuat sistem pencarian sederhana menggunakan Php, Jquery Ajax, Bootstrap, dan Mysql.

Step 1 : Membuat Database Mysql

Seperti biasa kita buat lebih dulu, database di dalam PHPmyadmin lalu inputkan data-data produk yang kita inginkan. Atau bisa langsung meng-import query dibawah ini.

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 14, 2019 at 11:29 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.3.2

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
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 utf8mb4 */;

--
-- Database: `livesearch`
--

-- --------------------------------------------------------

--
-- Table structure for table `produk`
--

CREATE TABLE `produk` (
  `produkID` int(11) NOT NULL,
  `image` varchar(100) NOT NULL,
  `namaProduk` varchar(100) NOT NULL,
  `hargaProduk` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `produk`
--

INSERT INTO `produk` (`produkID`, `image`, `namaProduk`, `hargaProduk`) VALUES
(1, 'bedcover-fata-black-butterfly.jpg', 'Bedcover Fata Black Butterfly 180X200', '250000.00'),
(2, 'bedcover-fata-black-box.jpg', 'Bedcover Fata Black Box 180X200', '254000.00'),
(3, 'bedcover-fata-persian-stripe.jpg', 'Bedcover Fata Persian Stripe 180X200', '350000.00'),
(4, 'Jaket-WaterProof-Polos-Jaket-Distro-Tahan-Air-Terbaru.jpg', 'Jaket Water Proof', '180000.00'),
(5, 'Karpet-Bulu-Fata-Balinese-200X200.jpg', 'Karpet Bulu Fata Balinese 200X200', '350000.00'),
(6, 'Karpet-Bulu-Fata-Songket-Blue-200X200.jpg', 'Karpet Bulu Fata Songket Blue 200X200', '270000.00'),
(7, 'Vtech-Equatorial-Watch.jpg', 'Vtech Equatorial Watch', '245000.00'),
(8, 'kintakun-dluxe-sprei-rainbow.jpg', 'Kintakun Dluxe sprei Rainbow', '80000.00'),
(9, 'Karpet-Bulu-Fata-Stardust-200X200.jpg', 'Karpet Bulu Fata Stardust 200X200', '390000.00'),
(10, 'Karpet-Bulu-Fata-Wedding-Rose-200X200.jpg', 'Karpet Bulu Fata Wedding Rose 200X200', '200000.00'),
(11, 'Meja-Panel-Murah-Meriah.jpg', 'Meja Panel Murah Meriah', '350000.00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `produk`
--
ALTER TABLE `produk`
  ADD PRIMARY KEY (`produkID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `produk`
--
ALTER TABLE `produk`
  MODIFY `produkID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;

/*!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 */;

Step 2 : Membuat Koneksi ke Database koneksi.php

Koneksi untuk menghubungkan project kita dengan Database. Sesuaikan dengan nama database, root user, dan password didalam phpmyadmin kita.

<?php
    
    $dsn = 'mysql:host=localhost;dbname=fajd7811_demoloadmore';
    $user = 'fajd7811_demoloadmore';
    $pass = 'bholang245613';
    $option = array(
            PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
        );

    try {
        $con = new PDO($dsn, $user, $pass, $option);
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    catch(PDOException $e) {
        echo 'Failed To Connect' . $e->getMessage();
    }

Step 3 : Membuat halaman index.php

Didalam halaman Index masukkan beberapa kebutuhan untuk <head> seperti Title, file CSS, Bootstrap, dan Jquery. Setelah kebutuhan pendukung terpenuhi. Didalam <body> saya menambahkan kotak mesin cari menggunakan class CSS yang di miliki Bootstrap.
Perhatikan ( <input type=”text” class=”form-control” id=”cari”> ) id=cari sangat penting karena nantinya akan kita buat aksi saat ada kata yang dimasukkan kedalam mesin carinya.
Sedangkan ( <div class=”row” id=”tampil_data”> ) id=tampil_data kita butuhkan untuk menampilkan data di halaman livesearch.php menggunakan Ajax.

<html>
<head>
	<title>Cara Membuat Mesin Pencarian Live Search Menggunakan PHP, Mysql, Jquery Ajax</title>
	<link href="css/style.css" rel="stylesheet" media="all">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="js/livesearch.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h4 class="m-4 text-center">Mesin Pencarian / Live Search</h4>
	<div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Cari Produk</span>
      </div>
      <input type="text" class="form-control" id="cari">
    </div>
    <div class="row" id="tampil_data">
		
	</div>
</div>
</body>
</html>

Step 4 : Membuat Script Ajax livesearch.js

Mari kita perhatikan hal penting di dalam script livesearch.js yang kita buat. Pertama kita membuat function load_data dengan parameter cariproduk. Selanjutnya kita akan mengarahkan permintaan data ajax menuju livesearch.php. Kalau data berhasil didapatkan, perintahkan ajax untuk menampilkan datanya di index.php yang mengandung id=”tampil_data”.

Selanjutnya dibaris selanjutnya, kita buat event keyup. Event ini berfungsi untuk memberikan aksi ketika user memasukkan atau melakukan sesuatu di mesin pencarian yang mengandung id=”cari”. Event inilah yang membuat mesin pencarian langsung mengeksekusi huruf yang dimasukkan user.

Terakhir ada fungsi IF untuk mengindentifikasi, apakah didalam index dengan id=”cari” terdapat inputan atau tidak. Jika ada maka tampilkan produk sesuai huruf – huruf yang dinputkan user. Jika tidak ada inputan, tampilkan seluruh produk.

$(document).ready(function(){

 load_data();

 function load_data(cariproduk)
 {
  $.ajax({
   url:"livesearch.php",
   method:"POST",
   data:{cariproduk:cariproduk},
   success:function(data)
   {
    $('#tampil_data').html(data);
   }
  });
 }
 $('#cari').keyup(function(){
  var cari = $(this).val();
  if(cari != '')
  {
   load_data(cari);
  }
  else
  {
   load_data();
  }
 });
});

Step 5 : Membuat livesearch.php

Tahap 5 kita mulai bekerja di dalam file livesearch.php
IF terdapat data dari cariproduk, lakukan query database dengan WHERE LIKE. Apa sih operarator LIKE itu, operator ini digunakan untuk membuat pola sebuah data. Sehingga data memiliki sebuah pola pencarian yang sesuai dengan yang di minta user.

dibagian ( if(count($pecah) > 0 ) kita memastikan apakah hasil dari variable $pecah memiliki isi atau tidak. Jika memiliki isi, eksekusi produk yang diminta user dari mesin pencarian. sedangkan jika kata yang dimasukkan user tidak sesuai dengan nama barang yang ada, maka tampilkan “Produk Tidak di Temukan”

<?php
// Koneksi ke Database
include('koneksi.php');

// Kalau user melakukan input ke dalam form pencarian
if(isset($_POST["cariproduk"])) {
    
    $query = $con->prepare("SELECT * FROM produk WHERE namaProduk LIKE '%".$_POST["cariproduk"]."%'");
}else {
    $query = $con->prepare("SELECT * FROM produk");
}

$query->execute();
$pecah = $query->fetchAll();
$query->setFetchMode(PDO::FETCH_ASSOC);

if(count($pecah) > 0)
{
 foreach($pecah as $tampil) {
?>
     
    <div class="col-6 col-md-3">
		<div class="box-produk mb-3 bg-white">
			<div class="gambar" style="background-image: url(images/<?= $tampil['image']; ?>);"></div>
			<div class="keterangan-box pl-3 pr-3">
				<p class="nama-produk"><?= $tampil["namaProduk"]; ?></p>
				<p class="harga text-right pb-1">Rp <?= number_format($tampil["hargaProduk"]); ?></p>
			</div>
		</div>
	</div>

 <?php }

}
else
{
 echo 'Produk Tidak di Temukan';
}

Step 6 : Membuat Halaman Style Css style.css

Bagian style Css hanya memberikan keindahan di dalam project kita.

body {
    background-color: #EAEAEA !important;
}
.box-produk {
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,.1);
    border-radius: .125rem;
}
.gambar {
    background-size: contain; 
    background-repeat: no-repeat; 
    padding-top: 100%;
}
.nama-produk{
    height: 2.25rem;
}
.harga {
    border-top: 1px solid #EEE;
}

Leave a Reply

Your email address will not be published. Required fields are marked *