Create Bootstrap Search Form with PHP MySQL
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.
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.
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.
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 :
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 :
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.
