Membuat Filter Tabel Menggunakan PHP MySQL - Kebutuhan akan informasi data yang begitu penting dalam waktu yang cepat dan mudah sehingga pekerjaan yang lain tidak tertinggal begitu saja. Oleh karena itu saya akan memberikan tips dan trick untuk membuat Filter Tabel menggunakan PHP MySQL.
Sebagaimana telah kita ketahui bahwa dalam membuat sebuah aplikasi perlu merancang data yang ada, salah satu cara untuk merancang sebuah aplikasi yaitu dengan membuat sebuah Normalisasi terlebih dahulu.
Cara Membuat NormalisasiLangkah - Langkah Membuat Filter Tabel Menggunakan PHP MySQL
Cara Membuat Tooltip
- Pastikan komputer anda dalam keadaan hidup
- Buka aplikasi XAMPP kemudian aktifkan MySQL dan Apache
- Masuk ke Web Browser kemudian ketikan pada Address Bar dengan "localhost"
- Buatlah sebuah database dengan nama "pcci" lalu buat juga tabelnya dengan nama student dan teacher.
- Buka Text Editor yang akan anda gunakan
- Buatlah Script PHP seperti berikut<?php
include('db.php');
?>
<html xmlns='http://www.w3.org/1999/xhtml' >
<head>
<title>pn.ui.filter.TableFilter</title>
<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'></script>
<script type='text/javascript' src='picnet.table.filter.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
for (var i = 0; i < 50; i++) {
var tr = $('<tr><td>Value(2) ' + Math.floor(Math.random() * 500) + '</td></tr>');
$('#demotable2 tbody').append(tr);
}
// Initialise Plugin
var options1 = {
additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#quickfind')],
clearFiltersControls: [$('#cleanfilters')],
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) {
return true;
}
var child = tr.children('td:eq(2)');
if (!child) return true;
var val = child.text();
switch (state.id) {
case 'onlyyes':
return state.value !== true || val === 'Student';
case 'onlyno':
return state.value !== true || val === 'Teacher';
default:
return true;
}
}
};
$('#demotable1').tableFilter(options1);
var grid2 = $('#demotable2');
var options2 = {
filteringRows: function(filterStates) {
grid2.addClass('filtering');
},
filteredRows: function(filterStates) {
grid2.removeClass('filtering');
setRowCountOnGrid2();
}
};
function setRowCountOnGrid2() {
var rowcount = grid2.find('tbody tr:not(:hidden)').length;
$('#rowcount').text('(Rows ' + rowcount + ')');
}
grid2.tableFilter(options2); // No additional filters
setRowCountOnGrid2();
});
</script>
<style type='text/css'>
body {
}
h3 {
font-size:1em;
}
.wrapper {
width:640px;
margin:0 auto;
}
.header {
width:640px;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:1px solid #ddd;
}
.content {
font-size:8pt;
clear:both;
}
.header,
.picnet_logo,
.instructions,
.column1,
.column2 {
display:inline;
position:relative;
float:left;
}
table,
td,
th {
border: solid 1px silver;
color:#666;
padding:5px;
font-size:8pt;
}
table {
border-collapse:collapse;
}
table tr.teacher {
background-color:#fff;
}
table tr.student {
background-color:#ccc;
}
#teacher {
background-color:#fff;
padding:5px;
width: 130px;
}
#student {
background-color:#ccc;
padding:5px;
width: 130px;
margin-bottom: 7px;
}
table td, table th{
border:1px solid #fff;}
.column1 {
width:608px
}
table#demotable2 {
width:100px;
}
th {
background-color:#333;
color:#fff;
font-size:0.85em
}
a {
color:#0079c1;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.filtering {
background-color:light-gray
}
#jqtf_filters {
list-style:none;
}
#jqtf_filters li {
display:inline-block;
position:relative;
float:left;
margin-bottom:20px
}
#quickfind {
width:480px;
border:1px solid #ccc;
}
.clear {
clear:both
}
hr {
margin-top:20px;
border:1px dotted #eee;
width:640px;
}
#cleanfilters {
margin-left:20px;
}
.filters{
display:none;
}
#demotable1{
width:608px;
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='content'>
<div id="student"><input type='checkbox' id='onlyyes'/> Tampilkan Data Siswa</div>
<div id="teacher"><input type='checkbox' id='onlyno'/> Tampilkan Data Guru</div> <br/>
<input type='text' id='quickfind' placeholder="Cari Data ... " />
<a id='cleanfilters' href='#'>Hapus Pencarian</a>
<div class='clear'></div>
<br/>
<div class='column1'>
<table id='demotable1'>
<thead>
<tr><th>Nama</th><th>Alamat</th><th>Status</th><th filter-type='ddl'>Jenis Kelamin</th><th filter='false'>Email</th><th>No. Kontak</th><th>Username</th><th filter='false'>Action</th></tr>
</thead>
<tbody>
<?php
$results = mysql_query("SELECT * FROM student");
while($rows = mysql_fetch_array($results))
{
echo '<tr class="teacher">
<td>'.$rows['lname'].' '.$rows['fname'].'</td>
<td>'.$rows['address'].'</td>
<td>Student</td>
<td>'.$rows['gender'].'</td>
<td>'.$rows['email'].'</td>
<td>'.$rows['contact'].'</td>
<td>'.$rows['username'].'</td>
<td>edit|delete</td>
</tr>';
}
?>
<?php
$results = mysql_query("SELECT * FROM teacher");
while($rows = mysql_fetch_array($results))
{
echo '<tr class="student">
<td>'.$rows['lname'].' '.$rows['fname'].'</td>
<td>'.$rows['address'].'</td>
<td>Teacher</td>
<td>'.$rows['gender'].'</td>
<td>'.$rows['email'].'</td>
<td>'.$rows['contact'].'</td>
<td>'.$rows['username'].'</td>
<td>edit|delete</td>
</tr>';
}
?>
</tbody>
</table>
</div>
<div class='clear'></div>
<hr/>
</div>
</div>
</body>
</html> - Kemudian simpan script diatas dengan nama "index.php"
- Buatlah koneksi untuk menghubungkan PHP dengan MySQL. Untuk membuat koneksi silahkan anda bisa baca disini.
- Untuk download sourcecode nya silahkan download dibawah ini
DOWNLOAD SOURCECODE FILTER TABLE
Demikian Cara Membuat Filter Tabel Menggunakan PHP MySQL semoga dapat bermanfaat bagi pembacanya
0 Comments