Our social:

Latest Post

Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Tuesday, February 7, 2017

Contoh Create Update Delete dengan PHP / XML





halo kali ini saya share CARA CRUD XML dengan PHP, fitur tambah data, update/edit data, dan hapus data, pencarian data dengan menggunakan jquery data tables,  lalu data di parsing ke xml , xml berfungsi database nya,  lumayan untuk tugas XML bukan ? :D

okeee ini link downloadnya gann..
klik link : DOWNLOAD  / DEMO
fitur:
  • HTML 5
  • CSS 3
  • BOOSTRAP 3
  • FONT AWESOME 4.6
  • JQUERY 3.1
  • JQUERY DATA TABLE
  • PHP
  • XML
oke itu saja selamat mencoba ...

NB : jika css nya berantakan, ganti link url di header.php seperti ini
<?php $url = 'http://localhost/namafolder'; ?>

Saturday, February 4, 2017

Cara Memasang Tag Pre dengan Tema Vanila di Blog

Tag pre adalah sebuah penanda yang hampir sama dengan blockquote. Tag pre sering digunakan dalam menyampaikan tutorial pemasangan Widget atau penerapan-penerapan yang berada pada HTML yang di mana di dalam isi tag pre ini berisi kode-kode seperti HTML, Javascript, CSS, JQuery, PHP, atau pun XML.


Cara Memasang Tag Pre dengan Tema Vanila di Blog

Nah sekarang saya akan membagikan tutorial cara pemasangan Tag pre dengan bertemakan Vanila. Ini cocok sekali bagi anda yang blognya Full Color.

Baiklah berikiut caranya.

1. Simpan kode CSS di bawah ini tepat sebelum kode ]]></b:skin>

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  position:relative;
}

pre[data-codetype] {
  padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  background-color:#666;
  padding:0 7px;
  font:bold 11px/20px Arial,Sans-Serif;
  color:white;
}


pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

2. Lalu Simpan template

Dan untuk penerapan pada postingan di blog Anda gunakan kode di bawah ini pada mode HTML


<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>
<pre data-codetype="PHP"> ... </pre>
<pre data-codetype="XML"> ... </pre>


Demikian Tutorial ini terimakasih sudah berkunjung.


SUMBER : http://www.rumahmedia.id/2016/03/Cara-Memasang-Tag-Pre-dengan-Tema-Vanila-di-Blog.html

Thursday, February 2, 2017

Contoh Create Update Delete Search dan View Data

Ok kali ini saya akan bahas cara CRUD di php

fitur-fitur contoh kali ini adalah :

1. Menggunakan bootstrap dan font-awesome sebagai desainnya
2. Dapat menginput data beserta gambar
3. Dapat mengedit data beserta gambar
4. Dapat menghapus data
5. Sudah menggunakan PDO ( php data object ) yang sudah familiar di pakai
6. search data menggunakan jquery data table

buat database db_crud


CREATE TABLE `anggota` (
  `id_anggota` int(11) NOT NULL,
  `nama` varchar(255) NOT NULL,
  `alamat` text NOT NULL,
  `telepon` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `jenkel` varchar(255) NOT NULL,
  `gambar` varchar(255) NOT NULL,
  `tgl_input` varchar(255) NOT NULL
) ;


lanjutt buat folder contoh crud lalu buat file:

config.php  = untuk koneksi menghubungkan file ke database

index.php   = buat menampilkan data

tambah.php = untuk tambah data

edit.php = untuk edit data

hapus.php  = untuk hapus data

lalu buat folder assets untuk menyimpan
1. css
2. img
3. js

sesuai keperluan lalu download bootstrap, font awesome, jquery, dan datatables.js taruh di folder assets

oke kita koding mulai membuat koneksi dahulu :
config.php

<?php
 $user = 'root';
 $pass = ''; 
 
 $koneksi = new PDO('mysql:host=localhost;dbname=db_crud;', $user, $pass);

 
 if($koneksi){
  //echo 'koneksi berhasil';
 }else{
  echo 'gagal koneksi' .$e -> getMessage();
 }
?>


di atas di variabel $user, kita memakai username mysql default xampp dan $pass untuk password mysql di xampp di kosongkan saja, kita membuat $koneksi untuk memanggil dan konfigurasi database nya di situ ada if else, jika $koneksi bisa maka  konfigurasi menyambungkan file php ke database berhasil, kalau tidak maka muncul error / gagalnya koneksi.

Jika koneksi berhasil maka comment saja seperti ini :

//echo 'koneksi berhasil';

setelah selesai masuk langkah ke 2 : index.php (untuk view data di database) 

<!DOCTYPE HTML>

 <html>

  <head>

   <title>

    Contoh View

   </title>

   <link rel="stylesheet" href="assets/css/bootstrap.css">

   <link rel="stylesheet" href="assets/css/font-awesome.css">

   <link rel="stylesheet" href="assets/css/datatables.css">

   <script src="assets/js/jquery-3.1.1.min.js"></script>

   <style>

    body{width:95%;}

    .thead{

     background:#317CA3;

     color:#fff;

    }

   </style>

  </head>

  <body>

   <div class="row">

    <div class="container">

     <h1>Contoh Create Update Delete Search dan View Data</h1>

     

     <div style="padding-top:3pc;"></div>

     

     <div class="panel panel-primary">

      <div class="panel-heading">

       <h4><i class="fa fa-users"></i> Data

        <div class="pull-right">

         <a href="tambah.php"><button class="btn btn-primary"><i class="fa fa-user-plus"></i></button></a>

        </div>

       </h4>

      </div>

      <div class="panel-body">

       

       <table id="Mytable" class="table table-bordered" border="1">

        <thead>

         <tr class="thead">

          <td>No.</td>

          <td>Nama Anggota</td>

          <td>Alamat</td>

          <td>Telepon</td>

          <td>Email</td>

          <td>Jenis kelamin</td>

          <td>Gambar</td>

          <td>Tanggal Bergabung</td>

          <td style="width:80px;">Aksi</td>

         </tr>

        </thead>

        <tbody>

        <?php 

         require 'config.php'; // panggil koneksi yang sudah di buat

         $sql = 'select*from anggota order by id_anggota desc'; // query

         $row = $koneksi -> prepare($sql); // mempersiapkan untuk masuk ke eksekusi data

         $row -> execute();

         

         $hasil = $row -> fetchAll(); // tampilkan semua data di database

         $no =1; // membuat nomor

        ?>

        <?php foreach($hasil as $isi){ ?>

         <tr>

          <td><?php echo $no;?></td>

          <td><?php echo $isi['nama'];?></td>

          <td><?php echo $isi['alamat'];?></td>

          <td><?php echo $isi['telepon'];?></td>

          <td><?php echo $isi['email'];?></td>

          <td><?php echo $isi['jenkel'];?></td>

          <td>

           <a href="assets/img/<?php echo $isi['gambar'];?>">

            <img src="assets/img/<?php echo $isi['gambar'];?>" style="width100px;height:100px;" class="img-responsive">

           </a> 

          </td>

          <td><?php echo $isi['tgl_input'];?></td>

          <td>

           <a href="edit.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-primary"><i class="fa fa-edit"></i></button></a>

           <a href="hapus.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-danger" value="Deleteimage"><i class="fa fa-trash"></i></button></a>

          </td>

         </tr>

        <?php $no++; }?>

        </tbody>

       </table>

      </div>

     </div>

    </div>

   </div>

  </body>

  <script src="assets/js/datatables.js"></script>

  <script>

   $(document).ready(function(){

    $('#Mytable').DataTable();

   });

  </script>

 </html>


lalu buat file tambah.php untuk create data : 

<?php date_default_timezone_set("Asia/Jakarta");?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Create Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-user-plus"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td class="pad">Tgl Input</td>
           <td><input type="text" class="form-control" value="<?php echo date('d M Y, H:i:s');?>" name="tgl_input"></td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
require 'config.php';
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $tgl_input = $_POST['tgl_input'];
 
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $tgl_input; //7
  $sql ='insert into anggota (nama, alamat, telepon, email,jenkel,gambar,tgl_input)values(?,?,?,?,?,?,?)';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Tambah Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal tambah Anggota")window.location="tambah.php";</script>';
 }
}
?>


setelah itu test create data nya jika berhasil lalu masuk ke proses edit.php 

<?php date_default_timezone_set("Asia/Jakarta");?>
<?php require'config.php';?>
<?php $id = $_GET['anggota'];?>
<?php 
 $sql ='select * from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Edit Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-edit"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['nama'];?>" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['alamat'];?>" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['telepon'];?>" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['email'];?>" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="<?php echo $hasil['jenkel'];?>"><?php echo $hasil['jenkel'];?></option>
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td><input type="hidden" class="form-control" value="<?php echo $hasil['id_anggota'];?>" name="id"></td>
           <td>
            <a href="assets/img/<?php echo $hasil['gambar'];?>">
             <img src="assets/img/<?php echo $hasil['gambar'];?>" style="width100px;height:100px;" class="img-responsive">
            </a> 
           </td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $id = $_POST['id'];
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $id; //7
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=?,gambar=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }elseif($_POST['proses'] == 'Tambah'){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $id; //6
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal Edit Anggota")window.location="tambah.php";</script>';
 }
}
?>


lalu setelah edit data bisa membuat hapus.php untuk hapus data : 

<?php
 require 'config.php';
 $id = $_GET['anggota'];
 $sql = 'select *from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

 
 unlink('assets/img/'.$hasil['gambar'].''); //hapus img di folder
 
 $sql_delete = 'delete from anggota where id_anggota=?';
 $row_delete = $koneksi -> prepare($sql_delete);
 $row_delete -> execute(array($id));
 
 echo '<script>alert("Hapus Berhasil");window.location="index.php";</script>';
?>

setelah itu coba dan jalankan  jika anda error silahkan di download    sekian semoga berhasil

Saturday, January 28, 2017

Form Login dan Pendaftaran Dengan HTML 5 CSS3 dan JQUERY

Script Login dan pendaftaran dengan html5 / css3 dan jquery
yah kali ini saya hanya ngasih script aja dulu ya buat login / sign up pakai jquery.. kalau kamu belum tau apa itu jquery ini saya jelaskan dulu..

JQUERY :
sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.
SOURCE : www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery/
oke itu saja langsung koding dulu.. simpan di login.php di halaman htdocs/folderbaru/ atau sesuai selera

<!DOCTYPE HTML>
<html>
    <head>
        <title>Latihan jquery </title>
        <script type="text/javascript" src="jquery-3.1.1.js"></script>
        <!--  Created by : fauzan1892  -->
        <style>
             body{ background:#ddd; color:#fff; width:99%; font-family:sans serif;}
            .row{ background:#24303C; margin:0 545px; margin-top:5pc; }
            .sub-menu{ text-align:center; padding-top:1pc; padding-bottom:1pc;}
            .btn-1{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#1AB188;color:#fff;}
            .btn-2{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#FE5E54;color:#fff;}
            .body{ text-align:center; }
             center{font-size:20px;}
            .form{border:1px solid #fff; height:2.5pc; font-size:16px; padding-left:5px; background:#24303C; color:#fff;width:84%;}
            .pull-left{float:left; width:45%; padding-left:18.5px;}
            .pull-right{float:right;width:45%;  padding-right:18.5px;}
        </style>
    </head>
    <body>
        <div class="row">
            <div class="sub-menu">
                <a href="#" id="formlogin"><button class="btn-1">Sign In</button></a>
                <a href="#" id="formdaftar"><button class="btn-2">Sign Up</button></a>
            </div>
            <div id="login">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign In For Admin</center>
                        <br>
                        <form method="POST" action="">
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Password *" name="password" required="required">
                            <br><br>
                            <p><button class="btn-1" name="proses">LOG IN</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
            <div id="daftar">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign Up For New Member</center>
                        <br><br>
                        <form method="POST" action="">
                            <div class="pull-left">
                                <input type="text" class="form" placeholder="First Name *" name="email" required="required">
                            </div>
                            <div class="pull-right">
                                <input type="text" class="form" placeholder="Last Name *" name="email" required="required">
                            </div>
                            <br><br><br>
                            <input type="text" class="form" placeholder="Email Address *" name="email" required="required">
                            <br><br>
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Set A Password *" name="password" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Retype Password *" name="retype" required="required">
                            <br><br>
                            <p><button class="btn-2" name="proses">GET STARTED</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#daftar').hide();
            $('#formdaftar').click(
                function(){
                    $('#daftar').show();
                    $('#login').hide();
                }
            );
        </script>
        <script>
            $('#login').hide();
            $('#formlogin').click(
                function(){
                    $('#login').show();
                    $('#daftar').hide();
                }
            );
        </script>
    </body>
</html>

hasil :




oke itu dulu sekian terima kasih

Tutorial Cara Menggunakan Plug-in Data Tables


Salah satu plug-in yang digunakan pada AdminLTE adalah Data Tables. Data Tables merupakan sebuah plug-in JQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan pencarian di tabel, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb.

 

1. Menyisipkan Data Tables

Plug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index. Berikut ini cara menyisipkan Data Tables melalui CDN.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

2. Kode HTML

Kode Tabel ini saya ambil dari web resmi data tables.

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Hover Data Table</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="tabel-data" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Rendering engine</th>
                  <th>Browser</th>
                  <th>Platform(s)</th>
                  <th>Engine version</th>
                  <th>CSS grade</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 4.0
                  </td>
                  <td>Win 95+</td>
                  <td> 4</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.0
                  </td>
                  <td>Win 95+</td>
                  <td>5</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.5
                  </td>
                  <td>Win 95+</td>
                  <td>5.5</td>
                  <td>A</td>
                </tr>
               </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
         </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>

3. Persiapan Data Tables

Kita akan menerapkan Data Tables saat web di-load. taruh di footer
<script>
  $(document).ready(function(){
       $('#tabel-data').DataTable();
  });
</script>
Perhatikan #tabel-data, kata kunci tersebut untuk memilih tabel dengan ID tabel-data. Kemudian, method .DataTable() fungsinya untuk menerapkan Data Tables pada tabel yang dipilih.

Copyright 2017 CODEBARENG All Rights Reserved