Tutorial Membuat Data Tabel dengan JQuery dan PHP
Tutorial Membuat Data Tabel dengan JQuery dan PHP
Setelah saya memberikan tutorial mengenai cara membuat membuat tabel dinamis di Blogger sekarang kita akan meningkatkan level tutorial membuat data tabel dengan php dan mysql.
Berbeda dengan cms seperti blogspot, wordpress, joomla dan lainnya membuat program dengan php dan mysql dari nol membuat program anda bisa menyesuaikan dengan keinginan anda sendiri maupun kebutuhan client anda. Memang membuat program dan PHP dan MySql membutuhkan sedikit ekstra tenaga dan waktu karena anda harus mengetahui bahasa PHP seperti sintax, function, prosedure dan lainnya.
Apakah susah mempelajari PHP? itu tergantung dari niat anda, jika niatnya kuat maka mempelajari PHP akan jadi mudah, lagipula banyak tutorial PHP di internet, buku tutorial di toko buku, maupun komunitas yang akan membantu anda di internet jika anda mengalami kesulitan.
Manfaat Tabel pada PHP
Dalam Sistem Informasi tabel mempunyai peran yang sangat penting. Dengan tabel informasi sangat mudah disampaikan ke user atau pengguna website anda. Untuk menggunakan tabel anda harus mengetahui tag table HTML. Tabel juga dimudahkan dengan JQuery sehingga data yang banyak akan mudah untuk di kelola. Lalu bagaimana membuat tabel JQuery yang terkoneksi dengan PHP dan MySql? Anda bisa mengikuti tutorial dibawah ini.
Sebelum mengikuti tutorial dibawah ada file yang harus anda persiapkan yang bisa anda download di www.datatable.net atau anda bisa download file dan source code dibawah ini
Tutorial Membuat Data Tabel dengan JQuery dan PHP
- Persiapkan file pendukung yang bisa anda download diatas
- Buat database dan import pintar.sql yang sudah anda download ke database anda
- Berikut script yang bisa anda gunakan, sesuaikan dengan nama tabel yang anda gunakan pada phpmyadmin
<!DOCTYPE html>
<html>
<head>
<title>Plugin dataTables</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css">
@import "media/css/demo_table_jui.css";
@import "media/themes/sunny/jquery-ui.css";
</style>
<script src="media/js/jquery.js"></script>
<script src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#datatables').dataTable({
"oLanguage": {
"sLengthMenu": "Tampilkan _MENU_ data per halaman",
"sSearch": "Pencarian: ",
"sZeroRecords": "Maaf, tidak ada data yang ditemukan",
"sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
"sInfoEmpty": "Menampilkan 0 s/d 0 dari 0 data",
"sInfoFiltered": "(di filter dari _MAX_ total data)",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sPrevious": "<",
"sNext": ">"
}
},
"sPaginationType":"full_numbers",
"bJQueryUI":true
});
})
</script>
</head>
<body>
<table id="datatables" class="display">
<thead>
<tr>
<th>No</th>
<th>Judul Lagu</th>
<th>Penyanyi</th>
</tr>
</thead>
<tbody>
<?php
mysql_connect("localhost","root","");
mysql_select_db("pintar");
$sql = mysql_query("SELECT * FROM lagu ORDER BY id");
$no = 1;
while ($r = mysql_fetch_array($sql)) {
echo "<tr>
<td width=40>$no</td>
<td>$r[judul]</td>
<td>$r[penyanyi]</td>
</tr>";
$no++;
}
?>
</tbody>
</table>
</body>
</html>
Anda bisa melihat demonya silahkan klik tombol demo dibawah
Tutorial Membuat Tabel dengan JQuery dan PHP sudah siap, anda bisa kembangkan sendiri untuk tampilan website yang lebih baik