tutorialswb

Saya adalah pendiri dari TutorialsWB.com dan TutorPHPID.com. Saya adalah Blogger dan Pengembang Web. Saya sudah ngeblog sejak 2016 dan mencari proyek online. Percayakan Pembuatan Website dan Aplikasi Anda kepada Kami.

Hubungi Saya

Live Search Database Menggunakan Ajax


Apakah anda pernah mencoba mencari data atau mengecek status barang atau ingin menampilkan data anda hanya dengan memasukkan ID, username atau kata kunci tertentu?

Aplikasi seperti di atas kebanyaan digunakan pada website-website besar, tetapi dominan digunakan oleh jasa pengiriman dimana user atau pengguna dapat mengecek status barang yang dia kirm.

Mungkin itu menggunakan live search dimana aplikasi seperti ini terkoneksi kedatabase kemudian menampilkan data database sesuai dengan data yang di cari.

live search database menggunakan ajax


Langsung saja kita menuju kepembahasan intinya, disini kami menggunakan Bootstrap jadi kami tidak menggunakan CSS. Let's Start...

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://www.tutorialswb.com/', '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; 

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://www.tutorialswb.com/">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> 

Terakhir buat file dengan nama search.php file ini berfungsi sebagai live search data dimana proses ini merupakan proses inti dibelakang layar, atau back end.
 <?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 dibawah ini, kalian bisa mencoba dan memodifikasinya sebagai bahan kalian untuk belajar.


Sekian share kali ini semoga apa yang kami share diatas bermanfaat bagi anda jangan lupa share keteman dan kerabat anda. Jika kaalian ingin menanyakan sesuatu hal silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.



Baca Juga