Pusat Ilmu Secara Detil

Create Bootstrap Search Form with PHP MySQL

Create Bootstrap Search Form with PHP MySQL

In this tutorial we are going to create a search feature with PHP and MySQL. By having a search feature in our site is very handy for helping user  find what they are looking for. For example : someone search for people by entering the ID number, if it is finded in the database then the system will provide full information contained such ID numbers.

In this tutorial, the study case about  searching the complete student's data by entering NISN (National Student Identification Number). The NISN should be a numeric and must have 10 digits.  Once we type NISN, the system will check in database, if it exists the system will provide full information about student.

Figure.1 is a Student  search form based on NISN (National Student Identification Number) which using Bootstrap as front-end.

(Fig.1 Form Search Student)

The following figure (Fig.2) shows a result of searching for student's data based on NISN,the system provide full information of student's data.
(Fig.2 The result of searching for student)

In this application we implement also the process of checking error, if there is user enter the combination character and numeric in search form , of course it is not found. The system will display the error message : "The value must be numeric 0 to 9,it is not allowed character or its combination", as shown by Figure.3.
(Fig.3 The result of checking error to character)

If the NISN is comprised of fewer than 10 digits and contains no letters, the error message will also be displayed as shown by the Fig.4 below :
(Fig.4 The error message about NISN less than 10 digits)


Step by Step Guide: Bootstrap Search Form with PHP MySQL

In designing this system we will create a database, script php to connect database, css to override Boostrap, form searching, the php script for search process that contain the checking error.

Step.1 Create Database and table 

Create database db_nisn, then create a table like the SQL statement below :
CREATE TABLE IF NOT EXISTS `siswa` (
  `nisn` int(10) NOT NULL,
  `name` varchar(30) NOT NULL,
  `sex` enum('Male','Female') NOT NULL,
  `place_birth` varchar(30) NOT NULL,
  `date_birth` date NOT NULL,
  PRIMARY KEY (`nisn`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

The above query will create table siswa in the database which will be used to store the details or information to be stored in the database. Then insert data in the table siswa as shown in the figure below :






(Fig.5 Student's data)

Step.2 Create file connection.php

The file connection.php establish a connection to MySQL from inside a php script. In here, we use mysqli_connect.
<?php
$con=mysqli_connect("localhost","root","","db_nisn");
?>


  • localhost is a host or your MySQL Server
  • root is your username
  • After root you see the mark "", it means is your password. In here we use no password.
  • db_nisn is your database name

Step.3 Create ilmudetil.css

The file ilmudetil.css only to create an interesting interface, it is not essential thing in the search form. Because we use bootstrap and don't want the default feature, we override some css like below :
.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;}


Step.4 Create file index_nis.php

Now we create main interface which have a search form. So that the visitor can perform their search. This file we called index_nis.php, you can rename it as you want. All code in the interface using Bootstrap.
<!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 about searching NISN</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="http://dtc-eng.blogspot.co.id/">
            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="">Learn French</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</div>
</br></br></br></br>
    
<!-- Part of search form -->
<div class ="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Search Student By NISN</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8" style="padding-top:25px">
                        
                        <form method="POST" action="getuser_nis.php">
                            <div class="form-group">
                                <label for="input_no_siswa">Enter NISN</label>
                                <input type="text" class="form-control" required="required" name="inputnisn" maxlength="10" placeholder="No NISN">
                                <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>
<!-- end of part search form -->
</body>
</html>

Notice in the code containing maxlength="10", it limits the input only 10 digits. Once we press the search button, then the file getuser_nis.php will be called to process the search that we input. In here we input NISN (National Identification Student Number).

Step. 5 Create file getuser_nis.php

The file getuser_nis.php is a page where the results from the search will be displayed. In this file we attach file connection.php before process the search by add : <?php include connection.php ?>. As we said before, we implement also the checking error to check if the input is numeric or not and ensure the input not fewer than 10 digits.
<?php include "connection.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 about searching NISN </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="">Learn French</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</div>
</br></br></br></br>

<!--- Part of Title-->  
<div class ="container">
    <div class="row">
            <div class="col-md-12">
            <h4>The student's data </h4>
            </div>
    </div>
</div>
<!--- End part of tile-->       
    
<div class ="container">
        <div class="row">
                <div class="col-md-6" style="padding-top:25px">
                            <?php
                                $nilai_nisn  = $_POST['inputnisn'];
                            
                                //Check if input is numeric and it has 10 digit
                                if(is_numeric($nilai_nisn) && strlen($nilai_nisn)==10)  {
                            
                                    $sql ="Select * from siswa WHERE nisn= '".$nilai_nisn."'";
                                    $result = mysqli_query($con, $sql);
                                    $row=mysqli_fetch_array($result);
                                    
                                    if (mysqli_num_rows($result) == 0)
                                    {
                                        echo "<h5>Data not found</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>Name</th>
                                            <th>Sex</th>
                                            <th>Place of birth</th>
                                            <th>Date of birth</th>
                                        </tr>
                                        </thead>";
                            
                                        
                                        echo "<tbody>";
                                        echo"<tr>";
                                        echo "<td>" . $row['nisn'].          "</td>";
                                        echo "<td>" . $row['name'].          "</td>";
                                        echo "<td>" . $row['sex']. "</td>";
                                        echo "<td>" . $row['place_birth']. "</td>";
                                        echo "<td>" . $row['date_birth'].     "</td>";
                                        echo  "</tr>";
                                        echo "</tbody>";
                                    
                                        echo "</table> "; 
                                    }
                                }
                            
                                //Check if input is numeric and it has not 10 digits
                                else if (is_numeric($nilai_nisn) && strlen($nilai_nisn)!=10)
                                {
                                    echo"<h5>NISN : Less than 10 digits</h5>";
                                    echo"<br>";
                                }
                                else
                                {
                                    echo "<h5>The value must be numeric 0 to 9,it is not allowed character or its combination</h5>";
                                    echo "<br>";
                                }
                                mysqli_close($con);
                            ?>

                </div>
        </div>
</div>
</body>
</html>

To try our live preview, you can use NISN that found in Figure 4 : 2012020201, 2012020202 etc.

Share this:

You Might Also Like:

Disqus Comments