�ݺ�ߣ

di edit dikitiseng iseng ngedit
PencarianBerdasarkanKategori
PilihanDalam Combobox
Dilengkapi Dengan Validasi Input
Form, Dapat MenampilkanHasil
PencarianData dan Juga Dapat
MenampilkanPesan Data
Tidak Ditemukan
Posted on July 16, 2013
0
Tulisan kali ini membahas tentangpencarian berdasarkan pilihan kategori dengan
combobox. Pertamaterdapat forminput untuk memasukkan hal yangkita cari,
kemudian terdapatcombobox yang berisi kategori apa yang halyang akan dicari.
Disini saya mencontohan pencarian skripsi di (mantan)kampus saya, dan kategori
yang saya gunakan yaitu berdasarkannama mahasiswa, judul skripsi, prodi,fakultas
dan tahun pembuatan skripsi.
Apabila form input ataucombobox belum dipilihmaka pencarian tidak dapat
dilakukan. Apabilasudah memasukkan katayang mau dicari dan memilih
kategorinya, maka akanmunculhasil pencarian katayang dicari sesuai dengan
kategori yang dipilih. Apabila yang dicari tidak ada makaakan muncul sebuah
pesan. Langsung saja ke coding nya.
Pertama kali kita harus membuat databasenyaterlebih dahulu. Kita kasih nama
skripsih.
1 CREATE DATABASE 'skripsih' ;

Setelah itu bikin tabelnya. Daripadarepot2 bikin tabel terus masukin datanya
mending donlot databasenya disini terus diimport.Wes rampung.
Kemudian kita buat file index.php. File ini digunakan untuk memasukkan inputan
yang akan dicari sekaligus menampilkanhasil eksekusi inputan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
include("koneksi.php");
?>
<html>
<head>
<title>Pencarian Berdasarkan Kategori</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=/slideshow/di-edit-dikit/44096927/"jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate({
rules: {
txtsearch: "required",
kategori: "required"
},
messages: {
txtsearch: {
required: ''
},
kategori: {
required: ''
},
},
success: function(label) {
label.text('').addClass('valid');
}
});
});
</script>
</head>
<body>
<form method="POST" action="" id="form">
<label for="txtsearch">Cari: <input type="text" name="txtsearch">
<select name="kategori">
<option value="">-- Cari Berdasarkan --</option>
<option value="namamahasiswa">Nama Mahasiswa</option>
<option value="judulskripsi">Judul Skripsi</option>
<option value="programstudi">Program Studi</option>
<option value="fakultas">Fakultas</option>
<option value="tahun">Tahun</option>
</select>
<input type="submit" value="Cari" name="submit"/>
<?php
if (isset($_POST['submit'])) {
$search = $_POST['txtsearch'];
$skripsi = $_POST['kategori'];

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$sql = "SELECT * FROM skripsih WHERE $skripsi LIKE '%$search%'";
$i=1;
$result = mysql_query($sql) or die('Error, list skripsih failed. ' . mysql_error())
if (mysql_num_rows($result) == 0) {
echo '<p></p><p>Pencarian tidak ditemukan</p>';
} else {
echo '<p></p>';
while ($row = mysql_fetch_array($result)) {
extract($row);
echo '<table border="0">';
echo '<tr><td valign="top" width="20px" rowspan="6">'.$i.'</td></tr>';
echo '<tr><td width="150px" valign="top">Nama Mahasiswa</td><td valign="top">:</
echo '<tr><td valign="top">Judul Skripsi</td><td valign="top">: </td><td valign=
echo '<tr><td valign="top">Program Studi</td><td valign="top">: </td><td valign=
echo '<tr><td valign="top">Fakultas</td><td valign="top">: </td><td valign="top"
echo '<tr><td valign="top">Tahun</td><td valign="top">: </td><td valign="top">'.
$i++;
echo '</table>';
echo '<p></p>';
}
}
}
?>
</form>
</body>
</html>
Selanjutnya kita buat file koneksi.php, untuk memanggil datadari database.
1
2
3
4
5
6
7
8
9
10
<?php
//set the database connection variables
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$dbDatabase = "skripsih";
//connet to the database
$db = mysql_connect("$dbHost", "$dbUser", "$dbPass") or die ("I cannot connect to the

11
12
13
mysql_select_db("$dbDatabase", $db) or die ("I cannot select the database '$dbname' be
?>
Kemudian untuk mempercantik tampilannya, kita buat file css.css.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body {
font-family:georgia;
font-size: 14px;
text-align: left;
}
#form {
}
fieldset {
background-color: #E1E1E1;
}
label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
cursor: hand;
}
label.error {
width: auto;
display: inline;
color: #F60;
font-style: italic;
}
input.error {
border-color: #FF0000;
}
input.submit {
margin-left: 150px;
}
Kemudian kita perlu javascript dikit, bisa donlot disini.
Pastikan semua filenya terletak dalam satu folder seperti gabar dibawah ini.
Hasil

�ݺ�ߣ

Di edit dikit

More Related Content

Di edit dikit