Edisi tutorial pemrograman web kali ini, akan membahas tentang proses pencarian data dengan menggunakan query : Select * from nama_tabel WHERE nama_field like '%$variabel_inputan%'".
Misalkan kita memiliki database db_nisn dengan tabel siswa sebagai berikut :
Jika seandainya sistem dari web kita ingin mencari nama-nama yang mengandung kata Doni, apakah diawal maupun diakhir ataupun ditengah. Caranya kita menggunakan operasi like %nama_yg_dicari%. Jadi kalo ingin mencari nama Doni, maka sistem akan memberikan hasil : Doni Yen, Andri Doni dan Doni Persada.
Studi Kasus
Dalam tutorial ini, studi kasus yang akan kita coba adalah mencari data siswa dengan memasukkan nama, nama tidak harus lengkap, baik itu nama depan maupun nama belakang. Sehingga sistem nanti akan mencari ke database, apakah terdapat di dalam database atau tidak nama-nama yang dicari tadi , seperti yang dijelas pada tabel diatas.Berikut ini adalah interface inputan pencarian nama seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
 |
| Gambar.2 |
 |
| Gambar.3 |
Langkah-langkah pembuatan sistem searching
Proses perancangan sistem pencarian terdiri dari pembuatan database, css Boostrap yang dioverride, form searching, script php untuk proses searching. Untuk mempercantik tampilan, kita menggunakan framework Bootstrap.Langkah.1 Membuat DatabaseBuatlah sebuah database dengan nama db_nisn, kemudian buatlah field-field seperti script berikut :
CREATE TABLE IF NOT EXISTS `siswa` (
`nisn` int(10) NOT NULL,
`nama` varchar(30) NOT NULL,
`jenis_kelamin` enum('Perempuan','Laki-laki') NOT NULL,
`tempat_lahir` varchar(30) NOT NULL,
`tgl_lahir` date NOT NULL,
PRIMARY KEY (`nisn`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Langkah.2 Membuat file koneksi.phpPembuatan file ini bertujuan untuk memanggil database, sehingga sistem diberikan otorisasi menggunakan database tersebut.
<?php
$con=mysqli_connect("localhost","root","","db_nisn");
?>
Langkah 3 Membuat ilmudetil.cssPembuatan file css ini bertujuan untuk membangun interface yang menarik. Tapi file css ini bukan bagian yang terpenting dalam proses searching, hanya asesoris mempercantik tampilan. Script css dari ilmudetil adalah sebagai berikut :
.navbar-default .navbar-nav > li.clr1 a{
color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
color:#fff;
background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
color: #fff;
background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
color: #fff;
background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
color: #fff;
background: #29AAE2;
}
.navbar-default{
background-color: #3b5998;
font-size:18px;
}
.navbar-default .navbar-brand {
color: #ffffff;
font-weight:bold;
}
.navbar-default .navbar-text {
color:#ffffff;
}
a{color: #FFC107;text-decoration: none;}
img{width:120px; height:135px;padding-top: 10px;}Langkah.4 Membuat file index_nama.phpFile index_nama.php merupakan interface untuk inputan nama yang akan dicari pada database.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial implementasi search dengan php</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<!--<link rel='stylesheet' href='assets/css/jquery-ui-custom.css'>-->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Akhir dari Bagian css -->
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<!--- Bagian Judul-->
<div class ="container">
<div class="row">
<div class="col-md-12">
<h4>Pencarian Data Siswa </h4>
</div>
</div>
</div>
<!--- Akhir Bagian Judul-->
<!-- Bagian pencarian -->
<div class ="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Pencarian Data</div>
<div class="panel-body">
<div class="row">
<div class="col-md-8" style="padding-top:25px">
<form method="POST" action="getuser_nama.php">
<div class="form-group">
<label for="input_no_siswa">Masukkan Nama</label>
<input type="text" class="form-control" required="required" name="inputnama" placeholder="Nama">
<span class="help-block"></span>
</div>
<div class="form-actions" style="padding-bottom:25px">
<button type="submit" class="btn btn-primary" name="submit" >Search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir dari pencarian -->
</body>
</html>
Langkah.5 Membuat file getuser_nama.phpFile ini berfungsi untuk memproses pencarian nama yang sebelumnya diinput pada form inputan nama.
<?php include "koneksi.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial implementasi search dengan php ajax </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Akhir dari Bagian css -->
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<!--- Bagian Judul-->
<div class ="container">
<div class="row">
<div class="col-md-12">
<h4>Pencarian Data Siswa </h4>
</div>
</div>
</div>
<!--- Akhir Bagian Judul-->
<!-- Bagian Searching -->
<div class ="container">
<div class="row">
<div class="col-md-6" style="padding-top:25px">
<?php
$nama = $_POST['inputnama'];
$sql ="Select * from siswa WHERE nama like '%$nama%'";
$result = mysqli_query($con, $sql);
//$row=mysqli_fetch_array($result);
if (mysqli_num_rows($result) == 0)
{
echo "<h5>Data tidak ditemukan</h5>";
echo "<br>";
}
else
{
echo "
<table class='table table-bordered'>
<thead>
<tr style='background-color: rgba(0, 0, 0, 0.05);'>
<th>NISN</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
</tr>
</thead>";
while($row =mysqli_fetch_array($result))
{
echo "<tbody>";
echo"<tr>";
echo "<td>" . $row['nisn']. "</td>";
echo "<td>" . $row['nama']. "</td>";
echo "<td>" . $row['jenis_kelamin']. "</td>";
echo "<td>" . $row['tempat_lahir']. "</td>";
echo "<td>" . $row['tgl_lahir']. "</td>";
echo "</tr>";
echo "</tbody>";
}
}
echo "</table> ";
mysqli_close($con);
?>
</div>
</div>
</div>
<!-- Akhir dari Searching -->
</body>
</html>
Untuk melakukan ujicoba pada Live Preview, silahkan masukkan nama :Doni, Andri dan Yeni
0 Response to "Tutorial searching dengan PHP MySQL"
Posting Komentar