Refresh Isi Table Menggunakan AJAX Berdasarkan Pilihan Drop Down ComboBox

Buat: 06/17/2013 - 10:03
Refresh Isi Table Menggunakan AJAX Berdasarkan Pilihan Drop Down ComboBox

Setelah sebelumnya saya berbagi artikel mengenai Paging dan Proteksi website dari serangan SQL Injection, kali ini saya mau berbagi mengenai ajax dropdown untuk me-refresh contents pada table.

Untuk memanage content yang banyak dalam sebuah website tidak mudah, kita perlu manajemen content yang simple tapi bagus dan sangat membantu. diantaranya kita dapat menggunakan pagination untuk menampilkan content perpage sehingga tidak tampil sekaligus, bisa juga kita menggunakan plihan untuk menampilkan content per-kategori.

Untuk pagination, telah dibahas pada artikel sebelumnya. Kali ini saya membahas mengenai cara menampilkan content perkategori dengan ajax dropdown refresh content table.

Berikut codenya.

  1. Buat tabel artikel
    CREATE TABLE IF NOT EXISTS artikel (
      idartikel int(5) NOT NULL AUTO_INCREMENT,
      judul varchar(255) NOT NULL,
      kategori varchar(255) NOT NULL,
      PRIMARY KEY (idartikel)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=50 ;
  2. Kemudian isi table artikel, berikut sql hasil dump
    INSERT INTO artikel (idartikel, judul, kategori) VALUES
    (15, 'Repair GRUB Booting Linux setelah install windows', 'Linux Tutorial'),
    (16, 'Proteksi Website dari serangan SQL Injection', 'Web Security'),
    (17, 'Install Desktop Mate di Ubuntu Server atau Desktop Edition', 'Linux Tutorial'),
    (18, 'GDebi Package Installer', 'Linux Aplikasi'),
    (19, 'Install Y PPA Manager untuk memanage PPA', 'Linux Aplikasi'),
    (20, 'E Book Attacking Side With Backtrack v1', 'E Book'),
    (21, 'Mengatasi XSS atau Cross Site Scripting dengan PHP Code', 'Web Security'),
    (22, 'E Book Attacking Side With Backtrack v2 Release and Ready to Download', 'E Book'),
    (23, 'Install WPScan di Ubuntu', 'Linux Pentest Aplikasi'),
    (24, 'Memasang CKEditor Dengan Plugin Video Pada CMS Buatan Sendiri', 'Web Programming PHP'),
    (25, 'Install Aircrack ng di Ubuntu 12.xx', 'Linux Pentest Aplikasi'),
    (26, 'Install Ninja IDE di Ubuntu', 'Linux Aplikasi'),
    (27, 'Fixed install and running uniscan.pl on ubuntu 12.xx', 'Linux Tutorial'),
    (28, 'Mengatur urutan sistem operasi pada grub booting manager', 'Linux Tutorial'),
    (29, 'Membuat Button Share ke Social Media Facebook, Twitter, dan Digg', 'Web Programming'),
    (30, 'BlackBerry dalam Linux', 'Linux Aplikasi'),
    (32, 'Install and Running Arachni Web Application Security Scanner Framework on Ubuntu', 'Linux Pentest Aplikasi'),
    (31, 'cek subdomain dengan tools dnsmap pada backtrack ', 'Linux Tutorial'),
    (33, 'Enable Flash Player Support on Mozilla Firefox Browser', 'Linux Tutorial'),
    (34, 'Install And Running nVidia Optimus on Ubuntu 12.XX', 'Linux Tutorial'),
    (35, 'Install and running Httrack Website Copier on Ubuntu 12.10', 'Linux Tutorial'),
    (36, 'Melihat Metadata Foto Menggunakan Hexedit di Backtrack 5', 'Linux Tutorial'),
    (37, 'Crack Password Zip dengan Fcrackzip di Backtrack 5', 'Linux Tutorial'),
    (38, 'Setting dan Configurasi Mikrotik', 'Networking Tutorial'),
    (39, 'Setting DHCP Pada Mikrotik', 'Networking Tutorial'),
    (40, 'Install MariaDB on Ubuntu 12.xx', 'Linux Tutorial'),
    (41, 'E Book Installas and Setting IPCOP with DMZ', 'E Book'),
    (42, 'Running VLC as root user', 'Linux Tutorial'),
    (43, 'Running Chrome or Chromium Browser as Root user', 'Linux Tutorial'),
    (44, 'Enable Flash Player Support for Chromium Browser', 'Linux Tutorial'),
    (45, 'Uninstall Aplikasi Yang Diinstall Dengan Make Install', 'Linux Tutorial'),
    (46, 'Saatnya Beralih dari MySQL extension ke MySQLi Extension', 'Web Programming'),
    (47, 'Menggunakan PHP 5 MySQLi Functions Untuk Koneksi Select Insert Update dan Delete', 'Web Programming'),
    (48, 'Dynamic Dropdown menu', 'Web Programming'),
    (49, 'Melacak Orang Lewat Twitter Dengan Tools Creepy', 'Linux Tutorial');
  3. Buat table kategori
    CREATE TABLE IF NOT EXISTS kategori (
      idkategori int(11) NOT NULL AUTO_INCREMENT,
      kategori varchar(255) NOT NULL,
      keterangan varchar(255) NOT NULL,
      PRIMARY KEY (idkategori)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
    4. Isi table kategori, berikut hasi dump Sql
    <code>
    INSERT INTO kategori (idkategori, kategori, keterangan) VALUES
    (1, 'Linux Tutorial', 'Tutorial Linux'),
    (2, 'Linux Aplikasi', 'aplikasi seputar linux',
    (3, 'Linux Pentest Aplikasi', 'Pentest dengan Linux'),
    (5, 'Web Programming', 'php programming'),
    (9, 'General', 'kategori umum'),
    (10, 'Python Programming', 'python programming'),
    (11, 'Web Security', 'Security seputar web'),
    (12, 'E Book', 'e-book download'),
    (13, 'Networking Tutorial', 'tutorial seputar networking');
  4. Buat file index.php
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    </head>
    <body>
    <script>
    var cat;
    $(document).ready(function(){
        //meloading option categori
        $("#categ").load("category.php","op=ambiloption");
      //load article
      $("#article").load("article.php","op=ambiloption");
      //ajax dropdown
      $("#categ").change(function(){
        cat =$("#categ").val();
        $.ajax({
          type: "GET",
          url: "article.php",
          data: "op=ambilpercateg&categ="+cat,
          success: function(html){
            $("#article").html(html);
            }
            });
      });
    });
    </script>
    <select id='categ' name='categ'></select>
    <div id='article'></div>
    </body>
    </html>
  5. Buat file connection.php
    <?php
    error_reporting(0);
    $con = new mysqli("localhost","tabel","tabel","tabel");
    if (!$con)
      {
      die('Could not connect: ' . mysqli_connect_error());
      }
    ?>
  6. Buat file article.php
    <?php
    error_reporting(0);
    require_once("connection.php");
    $op = $_GET['op'];

    if($op == "ambiloption"){
        $option = mysqli_query($con,"SELECT * from artikel");
        echo "<table width='710'>
      <th id='head' class='head'>judul</th>
      <th id='head' class='head'>kategori</th>\n";
        while($op = mysqli_fetch_array($option)){
        echo "<tr>
          <td class='data'>".$op['judul']."</td><td class='data'>".$op['kategori']."</td>\n";
        }
      echo "</table\n";
    }
    if($op == "ambilpercateg"){
        $option = mysqli_query($con,"SELECT * from artikel where kategori='".$_GET['categ']."'");
        echo "<table width='710'>
      <th id='head' class='head'>judul</th>
      <th id='head' class='head'>kategori</th>\n";
        while($op = mysqli_fetch_array($option)){
        echo "<tr>
          <td class='data'>".$op['judul']."</td><td class='data'>".$op['kategori']."</td>\n";
        }
      echo "</table\n";
    }
    ?>
  7. Buat file category.php
    <?php
    error_reporting(0);
    require_once("connection.php");
    $op = $_GET['op'];

    if($op == "ambiloption"){
        $option = mysqli_query($con,"SELECT * from kategori");
        echo "<option value=''>==choose category==</option>\n";
        while($op = mysqli_fetch_array($option)){
        echo "<option value='".$op['kategori']."'>".$op['kategori']."</option>\n";
        }
    }
    ?>

jangan lupa disini kita menggunakan jquery yaitu jquery-1.9.1.min.js

berikut screen shot hasil dari code diatas: tampilan seluruh data table tampilah setelah pilih kategori

Full source code bisa didapat di sini

Refresh Isi Tablex Menggunakan AJAX Berdasarkan Pilihan Drop Down ComboBox

.

About Author

Tentang PHP Indonesia

PHP Indonesia adalah sebuah komunitas untuk semua orang yang mencintai PHP. Fokus utama kami adalah pemrograman menggunakan bahasa PHP, namun tidak menutup kemungkinan pembahasan yang mencakup keseluruhan LAMP stack. Topik bisa dari pemrograman PHP, penanganan memcached, optimasi database, konfigurasi server, tuning server web, application deployment, framework PHP, hosting pilihan dan sebagainya.

Petunjuk Penulisan

Berikut ini adalah beberapa petunjuk penulisan artikel. Petunjuk dibuat bukan untuk membatasi tetapi demi menjaga kualitas artikel yang terpublikasi di situs ini. Selain itu, keseragaman gaya bahasa dapat menjaga readibilitas (tingkat keterbacaan) sehingga pembaca akan lebih nyaman dalam membaca artikel di situs ini.