Home » Archive for February 2016

Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery

1 Comment
http://dedymanado.blogspot.co.id/2016/02/cara-insert-update-delete-data-tanpa.html


Insert Data Tanpa Loading Halaman atau bahasa kerennya Insert Data Without Loading :).

Kali ini share tips ini karena saya lihat ada postingan saya sebelumnya yang popular yang konsepnya sama yaitu Insert dan load data tanpa refresh halaman PHP. Saya tertarik kembali membuat postingan yang serupa tapi dalam bentuk aplikasi web yang sudah jalan.

Metode insert yang disertai loading page sangat menguras bandwidth client yang mengakses web kita, selain menguras bandwidth juga memakan waktu dalam proses insert atau update atau delete data.

Turorial kali ini kita menggabungkan PHP dengan jQuery serta ajax dalam melakukan insert tanpa loading halaman ini.
Langsung saja pada tutorialnya yang mau lihat demonya klik link dibawah :



DEMO | Download Source Code

Dari tampilan saya menggunakan bootstrap ya, jadi tutorial ini bukan untuk pemula yang baru belajar atau belum pernah membuat web sama sekali.

File yang diperlukan :

  1. config.php
  2. index.php
  3. header.php
dan file php yang lainnya.

Pada file config.php isi code ini; "membuat koneksi database"

<?php
$conn = new mysqli("localhost", "root", "", "test");
if ($conn->connect_errno) {
    echo "Failed to connect to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
?>


Pada file index.php isi code dibawah ini :

<?php
   include "config.php";
   include "header.php";
?> 
    <div class="panel panel-default">
  <div class="panel-body">


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Add Data
</button>
<br/>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Data</h4>
      </div>
      <div class="modal-body">
        
<form>
  <div class="form-group">
    <label for="nm">Nama</label>
    <input type="text" class="form-control" id="nm">
  </div>
  <div class="form-group">
    <label for="gd">Gender</label>
    <input type="text" class="form-control" id="gd">
  </div>
  <div class="form-group">
    <label for="pn">Phone</label>
    <input type="text" class="form-control" id="pn">
  </div>
  <div class="form-group">
    <label for="al">Alamat</label>
    <input type="text" class="form-control" id="al">
  </div>
  
</form>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="save" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>  



<div id="info"></div><!-- menampilkan info hasil insert update dan delete -->

      <br/>
      <div id="viewdata"></div><!-- memanggil data dari fungsi viewdata -->
    </div>

    <script>
    function viewdata(){
         $.ajax({
       type: "GET",
       url: "php/getdata.php"
        }).done(function( data ) {
      $('#viewdata').html(data);
        });
    }
    $('#save').click(function(){
  
      var nm = $('#nm').val();
      var gd = $('#gd').val();
      var pn = $('#pn').val();
      var al = $('#al').val();
      
      var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;
          
      $.ajax({
         type: "POST",
         url: "php/newdata.php",
         data: datas
      }).done(function( data ) {
        $('#myModal').modal('hide')
        $('#info').html(data);
        viewdata();
      });
    });
    function updatedata(str){
  
      var id = str;
      var nm = $('#nm'+str).val();
      var gd = $('#gd'+str).val();
      var pn = $('#pn'+str).val();
      var al = $('#al'+str).val();
      
      var datas="nm="+nm+"&gd="+gd+"&pn="+pn+"&al="+al;
          
      $.ajax({
         type: "POST",
         url: "php/updatedata.php?id="+id,
         data: datas
      }).done(function( data ) {
        $('#info').html(data);
        viewdata();
      });
    }
    function deletedata(str){
  
      var id = str;
          
      $.ajax({
         type: "GET",
         url: "php/deletedata.php?id="+id
      }).done(function( data ) {
        $('#info').html(data);
viewdata();
      });
    }
    </script>
  </body>


  </div>
  <div class="panel-footer"><?php 
include 'footer.php';

?></div>
</div>






  
Dan Untuk file header.php isikan code berikut:




<!DOCTYPE html>
<html>
<head>

    <title>App System</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="assets/js/jquery-ui/jquery-ui.css">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui/jquery-ui.js"></script>    
</head>
<body onload="viewdata()">
    <div class="navbar navbar-default navbar-fixed-top ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">App System</a>
    <h5>Cara Insert Update Delete Data Tanpa Loading Halaman dengan PHP dan jQuery</h5>    

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">                
                <ul class="nav navbar-nav navbar-right">
                    <li><a id="pesan_sedia" href="#" data-toggle="modal" data-target="#modalpesan"><span class='glyphicon glyphicon-comment'></span>  Pesan</a></li>
                    <li><a class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Hy , Admin&nbsp&nbsp<span class="glyphicon glyphicon-user"></span></a></li>
                </ul>
            </div>
        </div>
    </div>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- linkdemohead -->
                <ins class="adsbygoogle"
                     style="display:inline-block;width:728px;height:15px"
                     data-ad-client="ca-pub-2026348872783475"
                     data-ad-slot="1795313518"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
    <!-- modal input -->
    <div id="modalpesan" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Pesan Notification</h4>
                </div>
                <div class="modal-body">
                    <?php 
                    $periksa=mysql_query("select * from barang where jumlah <=3");
                    while($q=mysql_fetch_array($periksa)){    
                        if($q['jumlah']<=3){            
                            echo "<div style='padding:5px' class='alert alert-warning'><span class='glyphicon glyphicon-info-sign'></span> Stok  <a style='color:red'>". $q['nama']."</a> yang tersisa sudah kurang dari 3 . silahkan pesan lagi !!</div>";    
                        }
                    }
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>                        
                </div>
                
            </div>
        </div>
    </div>

    <div class="col-md-2">
        <div class="row">
            
        </div>

        <div class="row"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
        <ul class="nav nav-pills nav-stacked">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- demolinksamping -->
            <ins class="adsbygoogle"
                 style="display:inline-block;width:200px;height:90px"
                 data-ad-client="ca-pub-2026348872783475"
                 data-ad-slot="9318580317"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </ul>

        
    </div>
    <div class="col-md-10">


pada file getdata.php , pada file ini kita membuat table da menampilkan datanya serta modal bootstrap untuk edit data.


 
<table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Kode</th>
        <th>Nama</th>
        <th>Gender</th>
        <th>Phone</th>
      <th>Alamat</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
<?php
include "config.php";
$res = $conn->query("select * from orang");
while ($row = $res->fetch_assoc()) {
?>
    
      <tr>
        <td><?php echo $row['kode']; ?></td>
        <td><?php echo $row['nama']; ?></td>
        <td><?php echo $row['gender']; ?></td>
        <td><?php echo $row['phone']; ?></td>
      <td><?php echo $row['alamat']; ?></td>
        <td>
        <a class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal<?php echo $row['kode']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <a class="btn btn-danger btn-sm" onclick="deletedata('<?php echo $row['kode']; ?>')"  ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>

<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $row['kode']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $row['kode']; ?>" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel<?php echo $row['kode']; ?>">Edit Data</h4>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group">
    <label for="nm">Nama</label>
    <input type="text" class="form-control" id="nm<?php echo $row['kode']; ?>" value="<?php echo $row['nama']; ?>">
  </div>
  <div class="form-group">
    <label for="gd">Gender</label>
    <input type="text" class="form-control" id="gd<?php echo $row['kode']; ?>" value="<?php echo $row['gender']; ?>">
  </div>
  <div class="form-group">
    <label for="pn">Phone</label>
    <input type="text" class="form-control" id="pn<?php echo $row['kode']; ?>" value="<?php echo $row['phone']; ?>">
  </div>
  <div class="form-group">
    <label for="al">Alamat</label>
    <input type="text" class="form-control" id="al<?php echo $row['kode']; ?>" value="<?php echo $row['alamat']; ?>">
  </div>
  
</form>
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" onclick="updatedata('<?php echo $row['kode']; ?>')" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>
        
        </td>
      </tr>
<?php
}
?>
    </tbody>
      </table>


Pada file newdata.php isikan code berikut: 
"pada file ini adalah proses penambahan data baru"

<?php
include "config.php";
$nm = $_POST['nm'];
$gd = $_POST['gd'];
$pn = $_POST['pn'];
$al = $_POST['al'];
if($nm != null && $gd != null && $pn != null && $al != null){
$stmt = $conn->prepare("INSERT INTO orang VALUES ('',?,?,?,?)");
$stmt->bind_param('ssss', $nm, $gd, $pn, $al);

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> Anda berhasil menambah data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?> 
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Isi semua form area.
</div>
<?php
}
?>


Pada file updatedata.php isi code ini:
"pada file ini berisi code proses update data"

<?php
include "config.php";
if(isset($_GET['id'])){
$stmt = $conn->prepare("update orang set nama=?, gender=?, phone=?, alamat=? where kode=?");
$stmt->bind_param('sssss', $nm, $gd, $pn, $al, $id);

$nm = $_POST['nm'];
$gd = $_POST['gd'];
$pn = $_POST['pn'];
$al = $_POST['al'];
$id = $_GET['id'];

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> Anda berhasil mengubah data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?> 
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Maaf anda salah alamat.
</div>
<?php
}
?>


Pada file deletedata.php isikan code ini:
"pada file ini adalah proses penghapusan data"

<?php
include "config.php";
if(isset($_GET['id'])){
$stmt = $conn->prepare("delete from orang where kode=?");
$stmt->bind_param('s', $id);

$id = $_GET['id'];

if($stmt->execute()){
?>
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> Anda berhasil menghapus data.
</div>
<?php
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Error!</strong> Maaf terjadi kesalahan, data error.
</div>
<?php
}
} else{
?> 
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Maaf anda salah alamat.
</div>
<?php
}
?>

Membuat Table Datatables jquery

Add Comment


http://dedymanado.blogspot.co.id/2015/10/membuat-table-cantik-dan-mudah-dengan.html
http://harviacode.com/2015/01/15/menampilkan-data-dengan-datatables/
http://allmywebstfn.blogspot.co.id/2014/11/cara-menggunakan-jquery-datatable.html

Membuat table di PHP sebenarnya tidaklah sulit, tapi juga cukup merepotkan karena tidak sedikit coding yang harus kita ketik, tapi sekarang membuat table di php tidaklah serumit itu lagi karena sudah ada yang namanya Datatables, untuk cari tau apa itu datatables silahkan masuk ke webnya.

Dengan Datatables kita bisa membuat table yang cantik juga menarik serta sangat simple, juga ringan. Saya akan membahas tutorial mengenai pembuatan table menggunakan datatables dengan engine php.

Mari mulai:
Pertama kita harus membuat database dulu di phpmyadmin terserah nama databasenya apa saja"tentunya saya tidak perlu lagi menjelaskan apa itu database dan phpmyadmin".. saya menggunakan xampp sebagai server.

Setelah database dibuat, maka buatlah table dengan nama table "test" supaya sama saja agar tidak terjadi error nantinya. Berikut detail table yang saya buat:



Buatlah file koneksi.php untuk memanggil koneksi dari database yang kita buat ke file php nantinya.

<?php
/* Database connection information */
 $gaSql['user']       = "wirecard_test";
 $gaSql['password']   = "T01Nbbl,n]F!";
 $gaSql['db']         = "wirecard_wireca";
 $gaSql['server']     = "localhost";
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * If you just want to use the basic configuration for DataTables with PHP server-side, there is
  * no need to edit below this line
  */
 
 /* 
  * MySQL connection
  */
 $gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
  die( 'Could not open connection to server' );
 
 mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
  die( 'Could not select database '. $gaSql['db'] );
 

?>

Lalu kita buat file index.php nya untuk menampilkan tabel berikut kodenya:


index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data Karyawan</title>

<script  src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.js" type="text/javascript"></script>
  <script src="js/dataTables.responsive.js"></script>
        <style type="text/css">
    @import "css/jquery.dataTables_themeroller.css";
    @import "css/jquery.dataTables.css";
    @import "css/jquery-ui-1.8.4.custom.css";
        </style>
  <style>
.ui-widget {
    font-size: 10px;
}
        </style>
<body class="ui-widget">

<p>Kembali ke Tutorial</p>

<div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="">
        <div class="">
          <table id="example" class="display" width="100%" cellspacing="0">
          <thead>
            <tr>
     <th>Nama</th>
     <th>Alamat</th>
     <th>Jenis Kelamin</th>
     <th>Email</th>
            <th>HP</th> 
            </tr>
         </thead>
         <tfoot>
            <tr>
            <th>Nama</th>
     <th>Alamat</th>
     <th>Jenis Kelamin</th>
     <th>Email</th>
     <th>HP</th>
            </tr>
        </tfoot>
        </table>
      </div>
    </div> 
</div>
<!---->

<?php include "hits.php"; ?>
</body></html>
<script type="text/javascript">
$(document).ready(function() {
 $('#example').dataTable( {
   "sPaginationType":"full_numbers",
  "bProcessing": true,
  "bServerSide": true,
   "bJQueryUI":true,
   "aaSorting":[[1, "asc"]],
   "sAjaxSource": "source.php",
  "iDisplayLength": 10,
     "aLengthMenu": [[10,25, 50, 100, -1], [10,25, 50, 100, "All"]] 
 } );
} );
</script>

file PHP yang kedua yaitu source.php

source.php

<?php
require_once('lib/koneksi.php');
 /*
  * Script:    DataTables server-side Table cantik
  * Copyright: 2015 - Dedy Saputra
  */
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  * Easy set variables
  */
 
 /* Array of database columns which should be read and sent back to DataTables. Use a space where
  * you want to insert a non-database field (for example a counter or static image)
  */

 $aColumns = array( 'nama', 'alamat', 'jenis_kelamin','email','hp');
 
 
 /* Indexed column (used for fast and accurate table cardinality) */
 $sIndexColumn = "id";
 
 /* DB table to use */
 $sTable = "test";
 
 
 /* 
  * Paging
  */
 $sLimit = "";
 if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
 {
  $sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
   mysql_real_escape_string( $_GET['iDisplayLength'] );
 }
 
 
 /*
  * Ordering
  */
 if ( isset( $_GET['iSortCol_0'] ) )
 {
  $sOrder = "ORDER BY  ";
  for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
  {
   if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
   {
    $sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
      ".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
   }
  }
  
  $sOrder = substr_replace( $sOrder, "", -2 );
  if ( $sOrder == "ORDER BY" )
  {
   $sOrder = "";
  }
 }
 
 
 /* 
  * Filtering
  * NOTE this does not match the built-in DataTables filtering which does it
  * word by word on any field. It's possible to do here, but concerned about efficiency
  * on very large tables, and MySQL's regex functionality is very limited
  */
 $sWhere = "";
 if ( $_GET['sSearch'] != "" )
 {
  $sWhere = "WHERE (";
  for ( $i=0 ; $i<count($aColumns) ; $i++ )
  {
   $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
  }
  $sWhere = substr_replace( $sWhere, "", -3 );
  $sWhere .= ')';
 }
 
 /* Individual column filtering */
 for ( $i=0 ; $i<count($aColumns) ; $i++ )
 {
  if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
  {
   if ( $sWhere == "" )
   {
    $sWhere = "WHERE";
   }
   else
   {
    $sWhere .= " AND ";
   }
   $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
  }
 }
 
 
 /*
  * SQL queries
  * Get data to display
  */
 $sQuery = "
  SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
  FROM   $sTable
  $sWhere
  $sOrder
  $sLimit
 ";
 $rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 
 /* Data set length after filtering */
 $sQuery = "
  SELECT FOUND_ROWS()
 ";
 $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 $iFilteredTotal = $aResultFilterTotal[0];
 
 /* Total data set length */
 $sQuery = "
  SELECT COUNT(".$sIndexColumn.")
  FROM   $sTable
 ";
 $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 $aResultTotal = mysql_fetch_array($rResultTotal);
 $iTotal = $aResultTotal[0];
 
 
 /*
  * Output
  */
 $output = array(
  "sEcho" => intval($_GET['sEcho']),
  "iTotalRecords" => $iTotal,
  "iTotalDisplayRecords" => $iFilteredTotal,
  "aaData" => array()
 );
 
 while ( $aRow = mysql_fetch_array( $rResult ) )
 {
  $row = array();
  for ( $i=0 ; $i<count($aColumns) ; $i++ )
  {
   if ( $aColumns[$i] == "version" )
   {
    /* Special output formatting for 'version' column */
    $row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
   }
   else if ( $aColumns[$i] != ' ' )
   {
    /* General output */
    $row[] = $aRow[ $aColumns[$i] ];
   }
  }
  $output['aaData'][] = $row;
 }
 
 echo json_encode( $output );
?>

Tidak perlu saya jelaskan satu perstu codenya ya.. silahkan dipahami sendiri dengan melihat demo dan source codenya.
Setelah buat file diatas yaitu koneksi.php, index.php dan source.php silahkan jalankan  
Cara Menggunakan Datatables dengan PHP

Cara Menggunakan Datatables dengan PHP

Add Comment

https://www.onphpid.com/cara-menggunakan-datatables-dengan-php.html
http://jintoples.blogspot.co.id/2015/03/cara-membuat-tabel-bootstrap-dengan-data-tables.html#.VswEJkcabDd
http://harviacode.com/2015/01/15/menampilkan-data-dengan-datatables/

cara menggunkan datatables
Dalam membuat sebuah website kebutuhan akan kemudahan dalam penggunaan, akses yang cepat merupakan dan enak dipandang adalah keinginan yang kita inginkan ataupun klien inginkan. Selain multifungsi tampilan website yang sederhana juga menjadi sebuah sorotan penting, salah satunya dalam menampilkan sebuah list atau daftar data yang akan terus bertambah panjang setiap kali ada penambahan. Mungkin tidak akan berpengaruh apapun ketika jumlahnya hanya sekitar puluhan.. tapi bagaimana jika data yang kita miliki hingga ribuan ? kira-kira seberapa banyak scrol akan kita putar?
Hal di atas akan lebih terlihat rapi apabila disajikan dalam bentuk table dengan pagination, dengan menu search, sort kolom. tapi apakah tidak ribet ? tidak jika kita menggunakan datatables. sebuah plugin yang akan membantu kita dalam menyajikan data dalam bentuk table dengan fitur search, sort, pagination dan display options.
Datatables sebenarnya adalah sebuah library jQuery atau JavaScript yang pada dasarnya dibuat dengan tujuan untuk memanipulasi data yang panjang menjadi sebuah data yang pendek-pendek karena dibagi kedalam beberapa halaman dan hal tersebut menjadi salah satu alasan mengapa table yang dibuat oleh datatables sangat rapi dan interaktif. Selain itu terdapat beberapa fitur dari datatables yang dapat kita rasakan seperti menu search yang responsive, pagination, data sort dan display options yang akan membuat website kita tampak lebih pro…

Cara Implementasi Datatables

Untuk mengimplemntasikan datatables pada website buatan kita, kita perlu mempersiapakn beberapa tool :
  1.  Library Datatables yang bisa di unduh di https://datatables.net/download/packages
  2.  Mengikuti langkah-langkah berikut

Langkah-langkah menggunakan datatables

Buatlah sebuah folder dengan nama “tutorial-datatables” di dalam folder htdocs (jika kalian menggunakan XAMPP)
Buatlah folder ‘assets’ dan file ‘index.php’  di dalam folder tutorial-datatables yang sudah kita buat sebelumnya.
Lalu ekstrak file datatables yang baru kita download, lalu cari folder “media” yang berada di examples/server-side kemudian pindahkan folder “css, js, images” ke folder “assets”, inilah yang akan menjadi modal kita untuk installasi datatables.
Setelah persiapan oke… kita akan mulai mengetikan kode untuk menggunakan datatable.
kode yang pertama adalah pada file config.php, di sini kita akan membuat koneksi database dengan mysqli object, silakan ketik atau Copy kode berikut :
kedua : bukalah browser ketikan localhost/phpmyadmin dan buat sebuah database sesuai dengan $dbname.
Ketiga : buatlah/bukalah index.php ketikan kode berikut :
keempat : pada bagian ini kita akan memulai menggunakan libary datatable. tambahkan script berikut sebelum tag </head>.
dan tambahkan script berikut sebelum tag </body>
Kelima : pada bagian kelima silahkan perhatikan tag </tfoot>.. kita akan menambahkan kode PHP tepat setelah tag tersebut. dimana kode PHP tersebut berfungsi untuk memanggil data ditable karyawan dari database yang sudah kita buat tadi.. lho tadikan belum membuat table..
Di sini kita tidak perlu membuat table. cukup copy dan paste-kan script SQL disini ke database.. bagaimana caranya ?

Cara untuk membuat table database dengan SQL

  1. bukalah localhost/phpmyadmin
  2. klik nama database yang sudah kita buat. dalam studi kasus ini adalah “datatables”
  3. Cari Tombol SQL seperti berikut, lalu paste dan klik Go..
cara import table dengan SQL
Nah sekarang kita sudah punya table “karyawan” selanjutnya adalah melakukan query pemanggilan data. seperti berikut :
Ingat sisipkan kode diatas tepat dibawah tag </tfoot>
keenam : sebagai sentuhan terakhir untuk melakukan aksi agar datatables dapat berjalan tambahkan script berikut. dan letakkan di atas tag </body>
Nah Demikian cara menggunakan datatables untuk melihat script penuhnya silahkan klik Disini.
Metode di atas adalah metode paling simple (zero configuration) dari datatables, karena metode ini paling sederhana maka akan terdapat sebuah masalah ketika data yang kita load berjumlah ribuan hingga ratusan ribu seperti data kecamatan atau desa se-Indonesia. untuk menangani masalah tersebut kita bisa memanfaatkan fasilitas Server-Side dari Datatables yang sudah onphpid tulis di cara Menangani banyak data dengan datatables.
Sekian tutorial PHP dari onphpid.com semoga bermanfaat dan selamat belajar.
Subscribe to: Posts (Atom)