aplikasi ini adalah aplikasi yang bisa digunakan untuk mencari data dengan memasukan nama ,anda di dalam form yang telah tersedia ,apabila data yang anda masukan ada di dalam dtabase maka akan menampilkan data alamat ,no dan nama ,anda , namun jika nama anda menyerupai atau hampir sama akan di tampilkan data pada database yang urutan nya lebih awal !
seperti tampilan dibawah apabila data yang ditampilkan ada:
langkah pembuatanya seperti diwabah ini
pertama kita buat dulu index.php
nya
<html>
<head>
<title> Halaman Pencarian </title>
<title>nusakom</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="page-title">
<h1>aplikasi pencari data<br/></h1><small>BETA </small>
<small class="author"> by<a href="http://www.nusa-kom.blogspot.com">chulis</a></small>
</div>
<form class="ac-form" name="formcari" method="post" action="search_exe.php">
<div class="form-group">
<strong><font color='red'>makusakan nama anda dibawah </font> </strong>
<input type="text" name="name" id="search" class="search-input" >
<button class="search-submit" type="SUBMIT" name="SUBMIT" id="SUBMIT">Go</button>
</div>
</form>
</div>
</body>
</html>
<head>
<title> Halaman Pencarian </title>
<title>nusakom</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="page-title">
<h1>aplikasi pencari data<br/></h1><small>BETA </small>
<small class="author"> by<a href="http://www.nusa-kom.blogspot.com">chulis</a></small>
</div>
<form class="ac-form" name="formcari" method="post" action="search_exe.php">
<div class="form-group">
<strong><font color='red'>makusakan nama anda dibawah </font> </strong>
<input type="text" name="name" id="search" class="search-input" >
<button class="search-submit" type="SUBMIT" name="SUBMIT" id="SUBMIT">Go</button>
</div>
</form>
</div>
</body>
</html>
setelah itu buat search_exe.php simpan dengan nama itu juga
<html>
<head>
<title> Halaman Pencarian </title>
<title>nusakom</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php
include "koneksi.php";
$name= $_POST['name']; //get the nama value from form
$q = "SELECT * from tb_student where name like '%$name%' "; //query to get the search result
$result = mysql_query($q); //execute the query $q
echo "<center>";
echo "<h2><font color='white'/> Hasil Searching </h2>";
if ($data = mysql_fetch_array($result))
{
echo "<h3><font color='white'/> data hampir sama</h3>
<table border='1' cellpadding='5' cellspacing='8'>
<tr bgcolor='orange'>
<td width='300'><b>No</td>
<td width='300'><b>nama</td>
<td width='300'><b>Alamat</td>
</tr>
<tr bgcolor='white'>
<td>".$data['no']."</td>
<td>".$data['name']."</td>
<td>".$data['address']."</td>
</tr>";
}
else
{
echo "<h1><font color='red'/>nama tidak tersedia</h1></font>
<br/><center>
<img src='img/haha.jpg'/>";
}
echo "</table>";
?>
</body>
</html>
<head>
<title> Halaman Pencarian </title>
<title>nusakom</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php
include "koneksi.php";
$name= $_POST['name']; //get the nama value from form
$q = "SELECT * from tb_student where name like '%$name%' "; //query to get the search result
$result = mysql_query($q); //execute the query $q
echo "<center>";
echo "<h2><font color='white'/> Hasil Searching </h2>";
if ($data = mysql_fetch_array($result))
{
echo "<h3><font color='white'/> data hampir sama</h3>
<table border='1' cellpadding='5' cellspacing='8'>
<tr bgcolor='orange'>
<td width='300'><b>No</td>
<td width='300'><b>nama</td>
<td width='300'><b>Alamat</td>
</tr>
<tr bgcolor='white'>
<td>".$data['no']."</td>
<td>".$data['name']."</td>
<td>".$data['address']."</td>
</tr>";
}
else
{
echo "<h1><font color='red'/>nama tidak tersedia</h1></font>
<br/><center>
<img src='img/haha.jpg'/>";
}
echo "</table>";
?>
</body>
</html>
lalu buat style nya juga simpan di css/style.css
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
body {
background:url(../img/bn.jpg)center no-repeat scroll;
background-size: 100% 100%;
background-color:#D580FE;
min-height: 700px;
font-family: 'cambria', sans-serif;
}
@media (min-width:768px){
.container {
width:900px;
}
}
.container {
margin:10px auto;
position: relative;
overflow: hidden;
}
.page-title {
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
@media (min-width: 768px) {
.ac-form{
width:370px;
margin:100px auto;
}
}
.ac-form .search-input, .ac-form .search-submit {
padding:15px;
display: inline-block;
border:0;
font-size: 15px;
font-family: 'cambria', serif;
}
.ac-form .search-input:focus, .ac-form .search-submit:focus {
outline: none;
}
.ac-form .search-input {
width: 80%;
}
.ac-form .search-submit {
width: 20%;
background-color: #FF3337;
cursor: pointer;
color:#fff;
}
/* Styling Data sugesti */
ul.ui-autocomplete {
width: auto;
border:none;
}
ul.ui-autocomplete li.ui-menu-item {
font-weight: 100 !important;
font-size: 17px;
padding:10px;
}
ul.ui-autocomplete li.ui-menu-item:hover {
background-color: #333;
color:#fff;
border:0;
font-weight: 100 !important;
}
.hasil
{
margin:17px auto;
text-align: center;
color:#fff;
font-size: 18px;
}
setelah itu buat koneksi nya
<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbName = "latih2";
mysql_connect($host, $user, $pass);
mysql_select_db($dbName)
or die ("Connect Failed !! : ".mysql_error());
?>
$host = "localhost";
$user = "root";
$pass = "";
$dbName = "latih2";
mysql_connect($host, $user, $pass);
mysql_select_db($dbName)
or die ("Connect Failed !! : ".mysql_error());
?>
namun sebelum itu buat databasenya dulu
buat tabel nya seperti diatas
namun buat agan yang dari tadi mau cari link download nya , sabar sudah saya sediakan dibawah ini
download disini
selamat mencoba semoga berhasil
salam sayang ;)
Tidak ada komentar:
Posting Komentar