Membuat Serching Sederhana dengan PHP, MySQL dan Bootstrap

Dalam dunia aplikasi Web, kita mengenal istilah searching yang biasanya digunakan untuk mencari data dalam konten web tersebut. Kali ini kita akan mencoba untuk mengaplikasikan fitur searching sederhana dengan menggunakan PHP, MySQL dan juga Bootstrap.

Desain Aplikasi Searching Sederhana

Kita akan memiliki 2 desain untuk menerapkan aplikasi sederhana ini. Pertama kita mempersiapkan desain antarmuka web seperti gambar dibawah ini. Css yang kita gunakan menggunakan bootstrap. Kita bisa mendownload css bootstrap terlebih dahulu di page site bootstrap.

Membuat Serching Sederhana dengan PHP, MySQL dan Bootstrap

tampilan awal searching sederhana dengan bootstrap

Desain yang kedua kita memerlukan database yang mana datanya akan kita tampilkan nanti. Kita membuat database melalui phpmyadmin. Kita dapat mengakses phpmyadmin melalui browser, kemudian ketik di kolom url "localhost/phpmyadmin". Desain database yang kita buat adalah seperti berikut :

struktur tabel searching sederhana dengan phpmyadmin

Struktur tabel yaitu :

nama database : mahasiswa
nama tabel : mhs.
atribut tabel :

atribut Id =

nama field id sebagai primary key,
Type int (integer) degan lenght 11 = int(11)
atribut not null
atribut dengan AUTO_INCREMENT

atribut Nama =

nama field nama
type varchar dengan lenght 35 = varchar(35)
atribut not null

atribut Fakultas =

nama field fakultas
type char dengan lenght 40 = char(40)

Untuk tutorial pembuatan database dengan phpmyadmin bisa dipelajari melalui posting sebelumnya (klik disini) , yang perlu hanya untuk penyesuaian nama tabel dan atribut seperti diatas.

Alur Program

Alur program searching sederhana ini berjalan dengan inputan nama dari user. Di database mahasiswa , ada atribut nama. Jadi user mengetikkan nama yang ingin dicari pada kolom search, kemudian user mengklik button search. Hasil akan ditampilkan pada tabel di sebelah kanan kolom search.

Inputan user dapat satu huruf atau lebih. dapat juga dengan hitungan kata. Apabila data yang disearching tidak ada, maka tidak akan muncul data apapun pada tabel.

Kebutuhan Program

Hal - hal yang dibutuhkan sebelum membangun aplikasi searching sederhana ini adalah sebagai berikut :

Aplikasi untuk mengetikkan scrip code (sublime, notepad++, dreamweaver, notepad, dsb)
Bootstrap, yang dapat didownload di situs resminya. File bootstrap kita letakkan pada satu direktori / folder dengan file.php yang akan kita buat selanjutnya.
XAMPP, sebagai localhost
PhpMyAdmin yang sudah ada di fitur XAMPP.

Membuat data Dummy di Database

Kita isi tabel mhs dengan data dummy terlebih dahulu. Misalnya sebagai berikut :

insert data dummy di phpmyadmin

Kita bisa mengetikkan code berikut di phpmyadmin, pada kolom SQL. Kemudian klik go.

INSERT INTO `mhs` (`nama`,`fakultas`) VALUES
('Jamadi', 'MIPA'),
('Sanuta', 'Teknik'),
('Muhammad Hainun', 'MIPA'),
('Rokiq sinamupa', 'Satra'),
('Dikil Alfa Hadi', 'Sastra'),
('Sams Bahk Roch', 'Kedokteran');

Code Program

Berikutnya kita ketikkan code program yang kita perlukan untuk membuat sebuah aplikasi web searching. Pertama kita perlukan adalah membuat koneksi ke database. Namun sebelumnya, karena kita menggunakan XAMPP, kita letakkan folder project kita di direktori installasi XAMPP. Yaitu pada C/xampp/htdocs .

Pertama kita buat scrip untuk koneksi dengan database. Kita misalnya membuat sebiah file.php dengan nama config.php. Salin atau copy code berikut pada file config.php.

<?php 
// isi nama host, username mysql, dan password mysql anda
$host = mysql_connect("localhost","root","");

/*if($host){
 echo "koneksi host berhasil.<br/>";
}else{
 echo "koneksi gagal.<br/>";
}
*/
// isikan dengan nama database yang akan di hubungkan
$db = mysql_select_db("mahasiswa");

/*
if($db){
 echo "koneksi database berhasil.";
}else{
 echo "koneksi database gagal.";
}
*/
?>

contoh pengisian code koneksi database di config.php

Klik pada gambar diatas untuk mempermudah mengcopy posisi code koneksi database pada file config.php. Selanjutnya kita membuat code untuk form inputan user dan juga tabel untuk menampilkan database.

Kita buat sebuah file.php dengan nama index.php. Kemudian kita sisipkan code berikut pada file index.php.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Searching</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<?php 
include 'config.php';
?>
<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
 <h3>Form Pencarian Dengan PHP</h3>
 <hr>
 <div class="row">
  <div class="col-sm-4">
  <form role="form" action="index.php" method="get">
   <div class="form-group">
   <label>Cari :</label>
   <input type="text" name="cari" class="form-control">     
   </div>

  <button type="submit" class="btn btn-info btn-block">Search</button>
  </form> 
  </div>
  <div class="col-sm-8">
  <?php 
   if(isset($_GET['cari'])){
   $cari = $_GET['cari'];
   echo "<b>Hasil pencarian : ".$cari."</b>";
  }
  ?>
    
  <table class="table table-striped">
  <tr>
   <th>ID</th>
   <th>Nama</th>
   <th>Fakultas</th>
  </tr>
  <?php 
  if(isset($_GET['cari'])){
  $cari = $_GET['cari'];
  $data = mysql_query("select * from mhs where nama like '%".$cari."%'");    
  }else{
  $data = mysql_query("select * from mhs");  
  }
  //$no = 1;
  while($d = mysql_fetch_array($data)){
  ?>
  <tr>
   <td><?php echo $d['id']; ?></td>
   <td><?php echo $d['nama']; ?></td>
   <td><?php echo $d['fakultas']; ?></td>
  </tr>
  <?php } ?>
  </table>   
  </div> 
 </div>   
 </div>  
</body>
</html>

Penjelasan dari baris code diatas adalah sebagai berikut :

Baris code untuk memanggil css bootstrap.

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
 <script src="js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.min.js"></script>

Baris code untuk memanggil koneksi ke database.

<?php 
include 'config.php';
?>

Baris code untuk membuat form inputan user.

<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
<h3>Form Pencarian Dengan PHP</h3>
<hr>

<div class="row">
<div class="col-sm-4">
<form role="form" action="index.php" method="get">
<div class="form-group">
<label>Cari :</label>
<input type="text" name="cari" class="form-control">      
</div>
<button type="submit" class="btn btn-info btn-block">Search</button>
</form> 
</div>

Baris code untuk menampilakan hasil searching dari inputan user.


<div class="col-sm-8">
<?php 
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
echo "<b>Hasil pencarian : ".$cari."</b>";
}
?>
    
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Nama</th>
<th>Fakultas</th>
</tr>
<?php 
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
$data = mysql_query("select * from mhs where nama like '%".$cari."%'");    
}else{
$data = mysql_query("select * from mhs");  
}
//$no = 1;
while($d = mysql_fetch_array($data)){
?>
<tr>
<td><?php echo $d['id']; ?></td>
<td><?php echo $d['nama']; ?></td>
<td><?php echo $d['fakultas']; ?></td>
</tr>
<?php } ?>
</table>    
</div>

Running Program

Program kita akses melalui browser dengan mengetikkan di kolom url sebagai localhost/ nama folder project/ index.php sehingga menjadi localhost/searching/index.php. Kemudian tekan enter atau go, dan muncul tampilan sperti berikut.

running program pertama kali

Kita coba inputkan nama mahasiswa pada kolom searching, kemudian klik search. Dan berikut hasil salah satu pencarian berdasarkan nama mahasiswa.

contoh searching berdasarkan nama user

Kita berhasil menampilkan data berdasarkan nama user yang sesuai dan juga nama user yang terkait.

contoh searching user berdasarkan nama terkait al

Sekian contoh penerapan program searching sederhana dengan PHP, MySQL dan Bootstrap. Semoga tutorial kali ini membantu permasalahan sobat untuk menerapkan aplikasi searching sederhana berbasis web. Untuk mendownload source code lengkapnya, bisa sobat klik pada link dibawah ini.

Download Source Code

Mirror Download

Cari Blog Ini

Sofyan Yusuf © 2019