Kategori Random

Sorter Data Tabel MySQL berdasarkan judul dengan JQuery Table.Sorter

Posted : 23 Februari 2015 | 09:42:55 , Dibaca 3216 kali

Dalam php kita dapat mengurutkan sebuah data dengan menggunakan key terntentu dan diurutkan berdasarkan yang terakhir maupun yang terawal atau secara acak atau random. Pada mysql perintah mengurutkan adalah SELECT ... ORDER BY [..perintah_urut..] jika kita gabungkan dengan php barangkali mudah jika mengurutkan sebuah key tertentu, bagaimana jika key yang digunakan lebih dari satu atau bahkan semua key yang ada pada tabel database kita? kan repot mesti menggunakan banyak akal.

Pada kesempatan kali ini saya akan berbagi sebuah tips yang mempermudahkan kita dalam mengurutkan data pada sebuah tabel secara dinamis dan sesuai dengan key dan banyak key yang terdapat tabel, anda bertanya-tanya bagai mana bisa seperti itu terjadi.

Jadi kita tidak menggunakan query database lagi dalam mensortir data tersebut melainkan menggunakan plugin jquery yang sudah dibangun khusus untuk sorter plugin tersebut adalah jquery.tablesorter.

Mari kita mulai, pertama sediakan terlebih dahulu plugin jquery.tablesorter bisa didownload disini, kemudian jangan lupa jquerynya juga, kalo belum ada bisa didownload disini

Database

Kita buat databasenya terlebih dahulu, pada kasus ini saya menggunakan database pada tutorial sebelum-sebelumnya yaitu database barang. Jika sobat belum ada ini saya buat kan kembali

CREATE TABLE `tb_barang` (
  `kode_brg` int(5) NOT NULL AUTO_INCREMENT,
  `barcode` varchar(20) NOT NULL,
  `nama_brg` varchar(150) NOT NULL,
  `harga_brg` int(10) NOT NULL,
  `keterangan` tinytext NOT NULL,
  `jenis` varchar(30) DEFAULT NULL,
  `satuan` varchar(30) DEFAULT NULL,
  `stok_brg` int(5) DEFAULT NULL,
  PRIMARY KEY (`kode_brg`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1

kemudian insert kan isi data nya berikut ini

insert into `tb_barang` (`kode_brg`, `barcode`, `nama_brg`, `harga_brg`, `keterangan`, `jenis`, `satuan`, `stok_brg`) values('1','233012','Papan Triplek','30000','','Papan','lembar','200');
insert into `tb_barang` (`kode_brg`, `barcode`, `nama_brg`, `harga_brg`, `keterangan`, `jenis`, `satuan`, `stok_brg`) values('2','110029','Piring Kaca','21000','Piring Kaca dengan motif cantik','Kelontong','Lusin','10');
insert into `tb_barang` (`kode_brg`, `barcode`, `nama_brg`, `harga_brg`, `keterangan`, `jenis`, `satuan`, `stok_brg`) values('3','123993','Tisu Basah','2500','Tisu basah untuk muka','Tools','buah','10');
insert into `tb_barang` (`kode_brg`, `barcode`, `nama_brg`, `harga_brg`, `keterangan`, `jenis`, `satuan`, `stok_brg`) values('4','123499','Aqua 600 ml','25000','Air Mineral AQUA 600 ml','Minuman','kardus','40');
insert into `tb_barang` (`kode_brg`, `barcode`, `nama_brg`, `harga_brg`, `keterangan`, `jenis`, `satuan`, `stok_brg`) values('5','123500','Mie Sedap','45000','Mie Instan Mie Sedap ','Makanan','kardus','40');

Setelah kita buat databasenya kini mari kita rancang tampilannya

index.php

Buat seperti skrip dibawah ini

<?
$hostname = 'localhost'; /*** mysql hostname ***/
$username = 'root';  /*** mysql username ***/
$password = 'scripterror';  /*** mysql password ***/
$database = 'db_crud'; /*** mysql database ***/
try {
    $koneksi = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);
?>
<!DOCTYPE html>
<html>
<head>
  <title>Sorter Data dengan JQuery Table Sorter</title>
</head>
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script>
$(document).ready(function()
	{
		$("#myTable").tablesorter();
	}
);

</script>
<style>
 body{
  margin: 10px 100px;
}

</style>
<body>

<table id="myTable" class="tablesorter">
<thead>
<tr>
	<th>No</th>
	<th>Barcode</th>
	<th>Nama Barang</th>
	<th>Harga Barang</th>
	<th>Keterangan</th>
</tr>
</thead>
<tbody>
<?
    $preparedStatement=$koneksi->prepare("SELECT * from tb_barang"); //query select dari table  barang
    $preparedStatement->execute(); //perintah eksekusi sama dengan mysql_query

    /*** Menampikan Hasil Perintah Select ***/
    $results=$preparedStatement->fetchAll();
    $no=0;
    foreach($results as $result){$no++;
    //loop untuk menampilkan data dari tabel barang
?>

<tr>
	<td><?=$no?></td>
	<td><?=$result['barcode']?></td>
	<td><?=$result['nama_brg']?></td>
	<td><?=$result['harga_brg']?></td>
	<td><?=$result['keterangan']?></td>
</tr>
<? }?>
</tbody>
</table>
</body>
</html>
<?
$koneksi=null; // menutup koneksi
}catch(PDOException $e){
    echo $e->getMessage(); //pesan jika terjadi error pada koneksi
}?>

Baik pada skrip diatas

<?
$hostname = 'localhost'; /*** mysql hostname ***/
$username = 'root';  /*** mysql username ***/
$password = '';  /*** mysql password ***/
$database = 'db_crud'; /*** mysql database ***/
try {
    $koneksi = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);
?>

skrip diatas adalah file koneksi ke database mysql menggunakan PDO php

<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script>
$(document).ready(function()
	{
		$("#myTable").tablesorter();
	}
);

</script>

3 buah file include dan skrip javascript pertama adalah css thema untuk style bawaan dari table sorter dimana saya buat template blue, bisa sobat sesuaikan dengan selera sobat, kedua file include untuk plugin jquery.table sorter nya, sementara include yang ketiga adalah plugin jquery.
Kemudian pada skrip javascript kita buat ready function dimana nama yang akan tersorter adalah dengan nama id mytable. penggunaan id sorter kita letakkan di id table langsung tidak dibaris maupun colomnya.

Anda bisa membaca beberapa tulisan tag komen pada skrip agar lebih jelas.

Source Code

bagi sobat maupun agan-agan yang pengen source codenya bisa didownload pada link diatas.

Output

Gambar tampilan akhir

Mungkin sekian tutorial kali ini, semoga bermanfaat.
:D keep smile

Postingan Terkait
» Membuat Text Slider Testimonial dengan JQuery Cycle Plugin ( 10 Mar 2015 | 16:06:41 , 2434 hits )
» Memasang JQuery Isotope pada tampilan portofolio item ( 30 Jan 2015 | 19:24:28 , 1459 hits )
» Membuat SyntaxHighlighter pada website ( 30 Jan 2015 | 04:28:10 , 1175 hits )
» HTML5 ( 20 Jan 2012 | 04:08:00 , 1361 hits )
» jQuery Mobile ( 20 Jan 2012 | 04:08:00 , 1672 hits )