Tutorial searching dengan PHP MySQL

Januari 28, 2016 | | 0 komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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

Live Preview Download

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Tutorial searching dengan PHP MySQL, Diterbitkan oleh scodeaplikasi pada Kamis, 28 Januari 2016. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tutorial searching dengan PHP MySQL

Studi Kasus

Langkah-langkah pembuatan sistem searching

Terimakasih Telah mengunjungi website Kami..!!

Tawk.to

Pencarian

Blog

Populer

Populer

My Ads

Artikel

Artikel