Tutorial Membuat Data Tabel dengan JQuery dan PHP

membuat-data-tabel-dengan-jquery

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

download-ebook

 

Tutorial Membuat Data Tabel dengan JQuery dan PHP

  1. Persiapkan file pendukung yang bisa anda download diatas
  2. Buat database dan import pintar.sql yang sudah anda download ke database anda
  3. 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

view-demo-button

Tutorial Membuat Tabel dengan JQuery dan PHP sudah siap, anda bisa kembangkan sendiri untuk tampilan website yang lebih baik

 

 

Comments

comments

Leave a comment