--> Skip to main content
Home Bootstrap Pemrograman Web php Tutorial searching dengan PHP MySQL

Tutorial searching dengan PHP MySQL

tutorial membuat pencarian data dengan php mysql
Dalam tutorial pemrograman web sebelumnya yang berjudul : Source Code Searching dengan Php MySQL, kita telah membuat proses pencarian data dengan menggunakan operasi query dari sql : Select * from nama_tabel WHERE nama_field= '".$variabel_inputan."'".  Operasi tersebut akan memeriksa database, apakah data yang diinput terdapat di dalam database atau tidak.
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
Jika data yang dimasukkan terdapat di dalam database, maka akan ditampilkan output seperti Gambar.2 dibawah ini :
Gambar.2
Jika seandainya data yang dicari tidak ditemukan, maka output ditampilkan seperti Gambar.3 dibawah ini: 
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 Database
Buatlah 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.php
Pembuatan 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.css
Pembuatan 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.php
File 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.php
File 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

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar