Categories
PHP

Membuat Live Search Database Menggunakan Ajax

live search menggunakan ajax

Pernahkah anda melakakukan pengecekan status barang pada perusahaan pengiriman seperti kantor pos, Jne bahkan penerbangan seperti lion air dan banyak lagi perusahaan yang menggunakan sistem live search ini.

Nah disinilah fungsinya live search ini dimana pengguna sistem bisa mengecek status barang dan sebagainya dalam sistem tanpa melakukan login. Nah kali ini kami akan membahas bagaimana membuat live search database menggunaka Ajax. Langsung saja kita kembali ke pembahasan intinya.

1. Buat database dengan nama nama search kemudian masukkan struktur database dibawah ini.

CREATE TABLE `search` (
  `id` int(10) NOT NULL,
  `name` text NOT NULL,
  `link` varchar(300) NOT NULL,
  `description` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `search`
--

INSERT INTO `search` (`id`, `name`, `link`, `description`) VALUES
(1, 'Arman Basir', 'https://jasawebsite.ooo/', 'Arman Is Web Developer and Content Writer'),
(2, 'Mamampang', 'Link Not Found', 'Mamampang Is Districk in Tinggimoncong, Gowa, Sul-Sel');

--
-- Indeks untuk tabel `search`
--
ALTER TABLE `search`
  ADD PRIMARY KEY (`id`);
COMMIT;

2. Buat file dengan nama index.php file ini berfungsi sebagai interface atau tampilan pencarian dimana semua proses nyatanya atau front end dilakukan pada file ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ajax Live Search</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold" type="text/css" />
    <!-- Load jQuery library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Load custom js -->
    <script type="text/javascript" src="scripts/custom.js"></script>
    
</head>

<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="https://jasawebsite.ooo/">PHP Ajax Live Search </a>
            </div>
        </div>
    </nav>
    <div class="form-group col-md-6">
        <label for="exampleInputEmail1">Enter Your Name</label>
        <input type="email" class="form-control" id="search" autocomplete="off" placeholder="Enter Your Name">
    </div>

    <h5 align="center" id="results-text">Showing results for: <b id="search-string">Array</b></h5>
    <div align="center">
        <ul id="results" class="text-decoration;none">
        </ul>
    </div>

</div>
</body>
</html>

3. Buat file dengan nama search.php file ini berfungsi sebagai live search data dimana proses ini merupakan proses inti dibelakang layar.

<?php

$dbhost = "localhost";
$dbname = "search";
$dbuser = "root";
$dbpass = "";

global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

if ($tutorial_db->connect_errno) {
 printf("Connect failed: %s\n", $tutorial_db->connect_error);
 exit();
}


$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h5>nameString</h5>';
$html .= '<h5>descriptionString</h5>';
$html .= '</a>';
$html .= '</li>';

$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);

if (strlen($search_string) >= 1 && $search_string !== ' ') {
 $query = 'SELECT * FROM search WHERE description LIKE "%'.$search_string.'%" OR name LIKE "%'.$search_string.'%"';

 $result = $tutorial_db->query($query);
 while($results = $result->fetch_array()) {
  $result_array[] = $results;
 }

 if (isset($result_array)) {
  foreach ($result_array as $result) {

   // Format Output Strings And Hightlight Matches
   $display_description = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['description']);
   $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['name']);
   $display_url = $result['link'];

   // Insert Name
   $output = str_replace('nameString', $display_name, $html);

   // Insert Function
   $output = str_replace('descriptionString', $display_description, $output);

   // Insert URL
   $output = str_replace('urlString', $display_url, $output);

   // Output
   echo($output);
  }
 }else{

  $output = str_replace('urlString', 'javascript:void(0);', $html);
  $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
  $output = str_replace('descriptionString', 'Sorry :(', $output);

  echo($output);
 }
}

?>

Kalian bisa mendownload file di atas dan mencobnaya langsung dengan menekan link button download dibawah ini.

Jika kalian belum begitu paham silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.

Leave a Reply

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