Tutorial PHP Lanjutan Part 38 : Membuat Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL

Tutorial PHP Lanjutan Part 38 : Membuat Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari mengenai PHP dan kita sudah masuk ketahap lanjutan sekarang saya akan membuat materi baru dengan judul Membuat Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL.

Keknya menarik nih kalau kita buat search engine ala ala google hehehe tapi search engine ini hanya mencari artikel/data pada website kamu saja ya biar website kalian kelihatan keren tuh dan pada materi ini saya juga menggunakan algoritma Rocchio relevance feedback namun saya juga masih tahap belajar jadi kalau tidak terlalu sesuai algoritmanya mohon maafkan saya hehehe.

Yuk simak terus ya!

Membuat Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL

Ada beberapa hal yang harus kamu persiapkan yaitu sebagai berikut:

Database (Untuk menampung data artikel)
File index.php (Halaman utama)
File get_data.php (Halaman yang berfungsi sebagai menampilkan hasil pencarian lalu ditampilkan pada halaman utama)
File function.php (Halaman yang berfungsi sebagai mengelolah data yang direquest oleh user lalu hasil datanya akan dikembalikan ke file get_data.php)

Jika sudah sekarang mari kita langsung praktek.

Membuat Database

Buatlah database dengan nama “belajarwithib” setelah itu buat juga table didalam database tersebut dengan nama “artikel” lalu buat field didalam table tersebut seperti dibawah ini :

id_artikel int(11)
artikel_judul varchar(150)
artikel_deks text
artikel_slug text
artikel_katakunci varchar(100)

Setelah itu kamu masukan data artikel sebanyak apapun yang kamu buat namun kalau mau lebih cepat dan tidak mau ribet untuk buat table lalu mengisi datanya silahkan gunakan query seperti dibawah :


CREATE TABLE `artikel` (
  `id_artikel` int(11) NOT NULL,
  `artikel_judul` varchar(150) NOT NULL,
  `artikel_deks` text NOT NULL,
  `artikel_slug` text NOT NULL,
  `artikel_katakunci` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data untuk tabel `artikel`
--

INSERT INTO `artikel` (`id_artikel`, `artikel_judul`, `artikel_deks`, `artikel_slug`, `artikel_katakunci`) VALUES
(1, 'Membuat Auto Search Suggestion/Autocomplete Dengan PHP', 'Auto Search Suggestion/Autocomplete sepertinya sudah banyak kamu lihat pada website karena memudahkan seorang user untuk mencari data yang sesuai pada database. Jadi kesannya hampir seperti pencarian google ya!.', 'https://www.belajarwithib.my.id/2021/08/auto-search-suggestion-php.html', 'PHP, Ajax, Search, Autocomplete'),
(2, 'Mengetahui Konsep Dasar React JS', 'Pada tutorial sebelumnya kita sudah mengetahui apa itu React JS dan Bagaimana cara menginstall React JS dan pada artikel ini saya akan membahas mengenai materi dasar untuk melanjutkan belajar mengenai React JS yaitu mengenai konsep dasar dari React JS itu sendiri.', 'https://www.belajarwithib.my.id/2021/08/konsep-dasar-react-js.html', 'ReactJS, React, Javascript'),
(3, 'Konsep Dasar React JS Bagian Form', 'Ini Merupakan lanjutan dari artikel sebelumnya yang berjudul Mengetahui Konsep Dasar React JS, saya harap kamu membaca artikel sebelumnya agar kamu mengerti dengan apa yang saya maksud dan apa yang saya akan sampaikan nanti.', 'https://www.belajarwithib.my.id/2021/08/form-react-js.html', 'ReactJS, JS, React, Javascript, Form'),
(4, 'Multiple Delete Checkbox Dengan PHP', 'Sepertinya fitur multiple delete ini sangat kamu butuhkan ketika sudah membuat website yang sudah banyak menampung data daripada menghapusnya satu-persatu atau menghapus sekaligus lebih baik kita belajar dulu bagaimana cara menghapus banyak data sekali tekan tombol delete.', 'https://www.belajarwithib.my.id/2021/08/multiple-delete-checkbox-.html', 'PHP, Javascipt, Delete, Multiple'),
(5, 'Menampilkan Data Dari Database Menggunakan AJAX', 'Mungkin kalian selama ini menggunakan PHP biasa untuk menampilkan data dari database, nah pada tutorial kali ini agak sedikit mirip tapi kita menampilkan data menggunakan AJAX. Artikel ini sangat singkat mungkin kalian sudah tahu mengenai AJAX jadi kita lanjut saja.', 'https://www.belajarwithib.my.id/2021/07/menampilkan-data-dari-database-ajax.html', 'AJAX, PHP, MYSQLI'),
(6, 'Import Data Excel Ke MySQLi Dengan PHP Dan AJAX', 'Fungsi import ini sangat berguna sekali bagi kalian yang ingin membuat website karena kalian bisa memasukan data sekali banyak dalam 1 file upload saja. Seperti misalnya kamu sedang membangun website pemilihan osis dan kamu bisa saja sih sebenarnya memasukan data 1 per 1 ke database namun hal itu sangat ribet dengan adanya fitur import data ini sangat membantu anda dalam memasukan data pemilih yang sangat banyak.', 'https://www.belajarwithib.my.id/2021/06/import-data-excel-ke-mysqli-dengan-php.html', 'PHP, AJAX, Javascript, Mysqli'),
(7, 'Mengenal 3 Kotak Dialog Pada JavaScript', 'Pada tutorial sebelumnya kita sudah membahas Property Dan Method Objek Tanggal Dalam Javascript dan sekarang kita akan belajar mengenai 3 Kotak Dialog Pada JavaScript.', 'https://www.belajarwithib.my.id/2021/01/kotak-dialog-javascript.html', 'Javascript'),
(8, 'Perbedaan Var, Const Dan Let Pada Javascript', 'Ada beberapa orang yang mungkin bertanya Perbedaan Var, Const Dan Let Pada Javascript karena salah satu orang itu adalah saya dulu jadi saya mau ngeshare sama kalian mengenai Perbedaan Var, Const Dan Let Pada Javascript.', 'https://www.belajarwithib.my.id/2021/01/var-const-dan-let-javascript.html', 'Javascript'),
(9, 'Upload Dan Crop Image Menggunakan PHP Dan AJAX', 'Dalam pengembangan sebuah website mungkin kamu akan membuat fitur upload foto untuk kebutuhan foto profile, dokumen atau hal yang lainnya. Namun mungkin kamu akan menginginkan kalau ukuran foto harus sesuai dengan kebutuhan aplikasi atau kamu ingin membuat fitur upload foto namun foto tersebut harus dicrop terlebih dahulu sebelum diupload keserver maka dari itu saya ingin berbagi tutorial untuk membuat fitur tersebut.', 'https://www.belajarwithib.my.id/2021/06/upload-dan-crop-image-menggunakan-php.html', 'PHP, Javascript, AJAX');

Jika sudah berhasil untuk membuat datanya, mari kita lanjut ke langkah selanjutnya.

Membuat Halaman Search Engine Menggunakan Bootstrap

Saya masih mempercayakan bootstrap untuk membantu saya dalam membuat tutorial karena biar halaman nya lebih rapi dan manusiawi.

Sekarang buatlah file dengan nama index.php lalu langsung ketikkan saja kode seperti dibawah ini :

Index.php


<!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Membuat Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL</title>
  </head>
  <body>
    <div class="container">
      <div class="card mt-5">
        <div class="card-header">
         Search Engine Sederhana Seperti Google Dengan PHP Dan MYSQL
       </div>
       <div class="card-body">
        <form id="form_search" method="post">
          <div class="mb-3">
            <label class="form-label">Cari Artikel</label>
            <input type="text" class="form-control" id="search" name="search" placeholder="Cari disini...">
          </div>
          <button type="submit" class="btn btn-warning text-white">Cari</button>
        </form>
        <p class="text-center mt-2"><a href="https://www.belajarwithib.my.id/" target="_blank" style="text-decoration:none;">www.belajarwithib.my.id</a></p>
      </div>
    </div>

    <div class="card mt-5">
      <div class="card-header">
       Hasil Pencarian
     </div>
     <div class="card-body">

      <div class="hasil" id="hasil"></div>

      <p class="text-center mt-2"><a href="https://www.belajarwithib.my.id/" target="_blank" style="text-decoration:none;">www.belajarwithib.my.id</a></p>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).on('submit','#form_search',function(e){
    e.preventDefault();
    var search = $('#search').val();
      // memulai ajax
      $.ajax({
        url: 'get_data.php', 
        method: 'post',  
        data: {search:search},    
        success:function(data){   
          $('#hasil').html(data);
          console.log(data);
        }
      });
    });
  </script>
</body>
</html>

Coba perhatikan pada code dibawah, code dibawah ini kita akan menggunakan AJAX agar halaman atau hasil pencarian ditampilkan tanpa Refresh halaman lagi. AJAX akan mengirim request user ke halaman get_data.php lalu get_data.php akan memproses request user dan hasilnya akan ditampilkan pada div yang atribut id nya “#hasil”.


<script type="text/javascript">
  $(document).on('submit','#form_search',function(e){
    e.preventDefault();
    var search = $('#search').val();
      // memulai ajax
      $.ajax({
        url: 'get_data.php', 
        method: 'post',  
        data: {search:search},    
        success:function(data){   
          $('#hasil').html(data);
          console.log(data);
        }
      });
    });
  </script>

Memproses Request User

Seperti yang saya katakan sebelumnya bahwa AJAX akan mengirim request user ke halaman get_data.php.

Sekarang buatlah file dengan nama get_data.php lalu ketikkan lah code seperti dibawah ini :

get_data.php


<?php
require 'function.php';
$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");


$search = $_POST['search'];
$artikel_result = search_artikel($search);
$relevan_kalimat = relevan_kalimat($search);
$relevan_perkata = relevan_kata($search);
?>
<?php 
if (strlen($search) == 0) {
    ?>

    <div class="list-group">

        <div href="#" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 text-center"><center>Tidak ada data yang ditemukan</center></h5>
          </div>
      </div>
  </div>
<?php }else{ ?> 
    <h4 class="mb-3 text-center">Hasil pencarian teratas</h4>
    <?php foreach ($artikel_result as $artikel) { ?>
        <div class="list-group">
            <div class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1"><?php echo str_ireplace($search,"<mark>".$search."</mark>",$artikel['artikel_judul']); ?></h5>
              </div>
              <p class="mb-1 text-muted"><small><?php echo substr(str_ireplace($search,"<mark>".$search."</mark>",$artikel['artikel_deks']),0,100)."..."; ?></small></p>
              <small><a href="<?php echo $artikel['artikel_slug'] ?>"><?php echo $artikel['artikel_slug'] ?></a></small>
          </div>
      </div>
  <?php  } ?>


  <hr>
  <h4 class="mb-3 text-center">Rekomendasi yang relevan dengan keyword</h4>
  <div class="list-group">
      <?php foreach ($relevan_kalimat as $kalimat) {
        ?>
        <div class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1"><?php echo $kalimat['artikel_judul'] ?></h5>
          </div>
          <p class="mb-1 text-muted"><small><?php echo  substr($kalimat['artikel_deks'],0,100)."..."; ?></small></p>
          <small><a href="<?php echo $kalimat['artikel_slug'] ?>"><?php echo $kalimat['artikel_slug'] ?></a></small>
      </div>
  <?php  } ?>
</div>
<hr>
<h4 class="mb-3 text-center">Rekomendasi yang relevan perkata</h4>
<div class="list-group">

  <?php foreach ($relevan_perkata as $kata) {
    ?>
    <div class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1"><?php echo $kata['artikel_judul'] ?></h5>
      </div>
      <p class="mb-1 text-muted"><small><?php echo  substr($kata['artikel_deks'],0,100)."..."; ?></small></p>
      <small><a href="<?php echo $kata['artikel_slug'] ?>"><?php echo $kata['artikel_slug'] ?></a></small>
  </div>
<?php  } ?>

</div>

<?php } ?>

Kamu perhatikanlah pada code dibawah ini, Pada code dibawah itu berfungsi sebagai memanggunakan function yang berada pada file function.php, misalnya jadi kita menggunakan function search_artikel($search) nah pada variable $search itu kita memberikan argument yang isi argument itu adalah keyword dari pencarian yang kamu ketik pada kolom pencarian.


$artikel_result = search_artikel($search);
$relevan_kalimat = relevan_kalimat($search);
$relevan_perkata = relevan_kata($search);

Lalu pada code dibawah inilah kita memanggil file function.php nya, disini saya menggunakan fungsi require() agar untuk menghubungkan file get_data.php dengan function.php lalu apa bila file function.php tidak ditemukan oleh require maka akan ditampilkan error atau code yang berada di get_data.php tidak akan dijalankan.


require 'function.php';

Kalau code dibawah ini cuman fungsi sebagai penghubung ke database saja.


$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");

Membuat Function Search Engine

Saya sengaja membuat atau menjadikan pencarian datanya menjadi sebuah function agar code didalam get_data.php menjadi lebih pendek dan rapi.

Sekarang buatlah file dengan nama function.php lalu silahkan ketik code seperti dibawah:

Function.php


<?php 
$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");

function search_artikel($keyword){
	global $koneksi;
	$keyword = $keyword;
	$query = mysqli_query($koneksi,"SELECT * FROM artikel WHERE artikel_judul LIKE '%".$keyword."%' ORDER BY id_artikel DESC");
	while ($row = mysqli_fetch_assoc($query)) {
		$data[] = $row; 
	}
	return $data;
}

function relevan_kalimat($keyword){
	global $koneksi;
	$keyword = strtolower($keyword);

	if ($imbuhan = strpos($keyword, "mem")) {

		$kalimat = substr($keyword,$imbuhan+3,4);

	} elseif ($imbuhan = strpos($keyword, "ter")) {

		$kalimat = substr($keyword,$imbuhan+3,4);

	} elseif ($imbuhan = strpos($keyword, "pem")) {

		$kalimat = substr($keyword,$imbuhan+2,4);
		
	} elseif ($imbuhan = strpos($keyword, "me")) {

		$kalimat = substr($keyword,$imbuhan+2,4);
		
	} elseif ($imbuhan = strpos($keyword, "ke")) {

		$kalimat = substr($keyword,$imbuhan+2,4);
		
	} elseif ($imbuhan = strpos($keyword, "te")) {

		$kalimat = substr($keyword,$imbuhan+2,4);
		
	} elseif ($imbuhan = strpos($keyword, "se")) {

		$kalimat = substr($keyword,$imbuhan+2,4);
		
	} elseif ($imbuhan = strpos($keyword, "pe")) {

		$kalimat = substr($keyword,$imbuhan+2,4);

	} else {
		$kalimat = substr($keyword, -1, 4);
	}

	$query = mysqli_query($koneksi,"SELECT * FROM artikel WHERE artikel_judul LIKE '%".$kalimat."%'");
	while ($row = mysqli_fetch_assoc($query)) {
		$data[] = $row; 
	}
	return $data;
}


function relevan_kata($keyword){
	global $koneksi;
	$search = strtolower($keyword);

	$kata = substr($search,0,2);

	if ($kata == 'me' || $kata == 'ke' || $kata == 'te' || $kata == 'se' || $kata == 'be' || $kata == 'pe' ) {

		$kalimat = substr($search,3, 3);

	} else {

		$kalimat = substr($search,-4);
	}

	$query = mysqli_query($koneksi,"SELECT * FROM artikel WHERE artikel_judul LIKE '%".$kalimat."%' OR artikel_katakunci LIKE '%".$kalimat."%' OR artikel_deks LIKE '%".$kalimat."%' ORDER BY id_artikel DESC ");
	while ($row = mysqli_fetch_assoc($query)) {
		$data[] = $row; 
	}

	return $data;
}
?>

Wow agak panjang ya code nya dan banyak sekali if else didalamnya.

Perlu kamu ketahui pada file function.php memiliki 3 function yaitu:

function search_artikel($keyword){} fungsi dari function ini adalah mengambil data dari pencarian yang sesuai atau mendekati dengan keyword.
function relevan_kalimat($keyword){} fungsi ini berguna untuk mencari kalimat yang relavan dari keyword.
function relevan_kata($keyword){} fungsi ini berguna untuk mencari kata yang relavan dari keyword.

Dan untuk mencari data sebenarnya kita hanya perlu memanipulasi string saja, jika kamu sudah belajar atau sudah paham mengenai cara memanipulasi string di php mungkin akan cepat mengerti dengan fungsi fungsi yang dari file function. Ada beberapa fungsi untuk memanipulasi string yang saya gunakan dalam file function.php yaitu sebagai berikut:

Strtolower() berfungsi untuk memanipulasi sebuah string menjadi huruf kecil.
Strops() berfungsi untuk mencari posisi sebuah karakter atau sebuah string di dalam string lainnya.
substr() berfungsi untuk memotong string, atau untuk mengambil sebagian nilai dari sebuah string.

Untuk mencari data didalam query yang sesuai dengen keyword kita menggunakan operator LIKE memang digunakan untuk melakukan pencarian data pada database, berdasarkan teks / huruf yang dimasukan dan MYSQL juga karakter khusus untuk membantu kita mencari data yaitu ‘%’ fungsinya sebagai karakter ganti yang cocok untuk karakter apa saja dengan panjang karakter tidak terbatas, termasuk tidak ada karakter.

Kalau code dibawah berfungsi cuman membuat agar variable $koneksi bisa diakses difungsi tersebut dan menjadikan variable $koneksi menjadi variable global karena variable itu juga memiliki cakupan nya tersendiri.