Belajar Membuat Simple Add, Edit, Delete dan Search Data beserta Pagination berbasis Ajax dengan Jquery dan PHP

Dalam mengelola data utama pada sebuah aplikasi maka dibutuhkan fungsi-fungsi yang dapat menangani proses penambahan data (Add), perubahan data (Edit), penghapusan data (Delete) dan pencarian data (Search). Tulisan kali ini akan membahas bagaimana membuat sebuah aplikasi sederhana berbasis web untuk dapat menangani fungsi-fungsi tersebut termasuk menampilkan data dengan pagination dimana di dalamnya telah menerapkan mekanisme Ajax. Aplikasi web yang dibahas pada tulisan ini, sebenarnya dibuat berdasarkan aplikasi yang telah dibahas sebelumnya pada sebuah blog yang ada di sini, matur nuwun 😀 Dari aplikasi web tersebut, kemudian ditambahkan fungsi pencarian data dan menampilkan data dengan pagination. Untuk menerapkan mekanisme Ajax pada aplikasi web tersebut, dalam pembahasan ini digunakan sebuah javascript library yakni Jquery dan didukung bahasa pemrograman PHP. Selain itu, untuk menangani pagination dalam menampilkan data digunakan sebuah class yang dibuat oleh Reneesh T K.

Baik, langsung menuju ke bagian pembahasan. Aplikasi web sederhana yang dibahas disini akan berkaitan dengan pengelolaan data-data pelanggan. Berikut ini merupakan langkah-langkah yang perlu dilakukan.

Pertama adalah membuat tabel data pelanggan terlebih dahulu.

CREATE TABLE IF NOT EXISTS `tbl_pelanggan` (
  `id_pelanggan` varchar(5) COLLATE latin1_general_ci NOT NULL,
  `nama_pelanggan` varchar(25) COLLATE latin1_general_ci NOT NULL,
  `alamat` varchar(50) COLLATE latin1_general_ci NOT NULL,
  `no_hp` varchar(15) COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id_pelanggan`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

Selanjutnya adalah membuat file-file pendukung utama, seperti berikut ini.

1. config.php
merupakan file yang digunakan untuk melakukan pengaturan koneksi ke database.

<?php
$mysql_hostname = "localhost";  //alamat server
$mysql_user = "username";       //username untuk koneksi ke database
$mysql_password = "password";   //password koneksi ke database, klo tidak ada bisa dikosongkan
$mysql_database = "database";   //nama database yang akan diakses/digunakan

mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Koneksi ke database gagal!");
mysql_select_db($mysql_database) or die("Database tidak ditemukan!");
?>

2. style-page.css
merupakan file css untuk mengatur tampilan web.

/**********************************/
/* CSS Document                   */
/* filename     : style-page.css  */
/**********************************/

body{
 font-family: Verdana,Tahoma,sans-serif;
 font-size: 8pt;
 color: #333333;
}

input,textarea,select{
 font-family: Verdana,Tahoma,sans-serif;
 font-size: 8pt;
}

table {
 font-family: Verdana;
 font-size: 8pt;
 border-width: 1px;
 border-style: solid;
 border-color: #ccd2d2;
 border-collapse: collapse;
 background-color: #f9f9f9;
 margin: 10px 0px;
}

th {
 color: #FFFFFF;
 font-size: 7pt;
 text-transform: uppercase;
 text-align: center;
 padding: 0.5em;
 border-width: 1px;
 border-style: solid;
 border-color: #ccd2d2;
 border-collapse: collapse;
 background-color: #7D7D7D;
}

td {
 padding: 0.5em;
 color: #272727;
 vertical-align: top;
 border-width: 1px;
 border-style: solid;
 border-color: #ccd2d2;
 border-collapse: collapse;
}

/*
-- untuk menangani tampilan pagination
*/

ul{border:0; margin:0; padding:0;}

#pagination li{
 border:0; margin:0; padding:0;
 font-size:11px;
 list-style:none;
}

#pagination a{
 border:solid 1px #DDDDDD;
 margin-right:2px;
}

#pagination .previous-off,
#pagination .next-off {
 color:#666666;
 display:block;
 float:left;
 font-weight:bold;
 padding:3px 4px;
}

#pagination .next a,
#pagination .previous a {
 font-weight:bold;
 border:solid 1px #FFFFFF;
}

#pagination .active{
 color:#ff0084;
 font-weight:bold;
 display:block;
 float:left;
 padding:4px 6px;
}

#pagination a:link,
#pagination a:visited {
 color:#0063e3;
 display:block;
 float:left;
 padding:3px 6px;
 text-decoration:none;
}

#pagination a:hover{
 border:solid 1px #666666;
}

/*
-- tampilan tabel selang-seling
*/

.odd {
 background-color: #EDEFE9;
}
.even {
 background-color: #f9f9f9;
}

3. index.php
merupakan halaman utama, dimana menampung tampilan data pelanggan, form pencarian data pelanggan, dan form pelanggan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Add Edit Delete Search & Pagination berbasis Ajax dengan JQuery</title>
<link rel="stylesheet" type="text/css" href="css/style-page.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/pelanggan.js"></script>
</head>

<body>
<div id="divFormContent"></div>
<br /><input type="button" value="Tambah Pelanggan" id="btntambah"><input type="button" value="Tampilkan/Sembunyikan" id="btnhide" /><br /><br />

<div id="divSearch">
  <form id="formSearch">
  <table><tr>
  <td>Cari Berdasarkan</td><td><select id="pilihcari">
      <option value="namapelanggan">Nama Pelanggan</option>
      <option value="idpelanggan">ID Pelanggan</option>
      <option value="semua">Semua</option>
  </select></td>
  <td id="kolompilih"><input type="text" name="fieldcari" id="fieldcari" /></td><td>
  <input type="submit" value="Cari" /></td>
  </tr></table>
  </form><br />
</div>

<div id="divLoading"></div>
<div id="divPageData"></div>

</body>
</html>

4. pelanggan.js
merupakan file yang berisi kode-kode jquery untuk menangani request Ajax.

$(document).ready(function(){

  //menangkap error dan men-set parameter global (timeout, dll)
  $.ajaxSetup({
    timeout: 10000,
    cache: false,
    error:function(x,e){
    	if(x.status==0){
    	  alert('Anda sedang offline!\nSilahkan cek koneksi anda!');
    	}else if(x.status==404){
    	  alert('Permintaan URL tidak ditemukan!');
    	}else if(x.status==500){
    	  alert('Internal Server Error!');
    	}else if(e=='parsererror'){
    	  alert('Error.\nParsing JSON Request failed!');
    	}else if(e=='timeout'){
    	  alert('Request Time out!');
    	}else {
    	  alert('Error tidak diketahui: \n'+x.responseText);
    	}
    }
  });

  // menampilkan image untuk menandakan proses Ajax sedang berlangsung atau telah selesai
  $('#divLoading').ajaxStart(function(){
    $(this).fadeIn();
    $(this).html("<img src='images/ajax-loader.gif' /> ");
  }).ajaxStop(function(){
    $(this).fadeOut();
  });

  $("#btnhide").hide();

  // ketika tombol tambah di-klik, maka formpelanggan akan ditampilkan pada bagian #divFormContent
  $("#btntambah").click(function(){
    page="formpelanggan.php";
    $("#divFormContent").load(page);
    $("#divFormContent").show();
    $("#btnhide").show();
    return false;
  });

  $("#btnhide").click(function(){
    $("#divFormContent").toggle();
    return false;
  });

  //menangani jika user melakukan pilihan pada combo #pilihcari
  $("select#pilihcari").change(function(){
    if ($(this).val() == "idpelanggan"){
      $("td#kolompilih").show();
      $("input#fieldcari").show();
      $("input#fieldcari").focus();
    }
    else if ($(this).val() == "namapelanggan"){
      $("td#kolompilih").show();
      $("input#fieldcari").show();
      $("input#fieldcari").focus();
    }
    else{
      $("td#kolompilih").hide();
    }
  });

  //menampilkan list data pelanggan
  loadData();

  // fungsi untuk me-load tampilan list data pelanggan, data yang ditampilkan disesuaikan
  // juga dengan input data pada bagian search
  function loadData(){
    var dataString;
    var cari = $("input#fieldcari").val();
    var combo = $("select#pilihcari").val();

    if (combo == "namapelanggan"){
      dataString = 'nama='+ cari;
    }
    else if (combo == "idpelanggan"){
      dataString = 'id='+ cari;
    }

    $.ajax({
      url: "page_data.php",
      type: "GET",
      data: dataString,
      success:function(data)
      {
        $('#divPageData').html(data);
      }
    });
  }

  // melakukan pemrosesan data untuk bagian search (pencarian data)
  $("form#formSearch").submit(function(){
    var cari = $("input#fieldcari").val();
    var combo = $("select#pilihcari").val();
    if (cari.replace(/\s/g,"") != ""){ // mengecek field text kosong atau tidak)
        loadData();
    }
    else if ((cari.replace(/\s/g,"") == "") && (combo != "semua") ){
      alert("Maaf, field harus diisi!");
      $("input#fieldcari").focus();
    }
    else{
      loadData();
    }
    return false;
  });

});

5. formpelanggan.php
merupakan file yang berisi kode-kode untuk form pelanggan, dimana form pelanggan nantinya akan ditampilkan untuk menangani fungsi penambahan/perubahan data pelanggan. form ini ditampilkan dengan mekanisme Ajax pada halaman index.php.

<?php
  include_once("config.php");

  $action="add";
  $judul="Penambahan Data Pelanggan";
  $nama="";
  $alamat="";
  $nohp="";
  $status="Tambah";
  if(isset($_GET['action']) and $_GET['action']=="update" and !empty($_GET['id']))
  {
	$str="select * from tbl_pelanggan where id_pelanggan = '$_GET[id]'";
	$res=mysql_query($str) or die("query gagal dijalankan");
	$data=mysql_fetch_assoc($res);
	$idplgn=$data['id_pelanggan'];
	$nama=$data['nama_pelanggan'];
	$alamat=$data['alamat'];
	$nohp=$data['no_hp'];
	$action="update";
	$readonly="readonly=readonly";
	$status="Update";
	$judul="Update Data Pelanggan";
  }
?>
<script type="text/javascript">

$(function(){
  $("input#namapelanggan").focus();

  function loadData(){
    var dataString;
    var cari = $("input#fieldcari").val();
    var combo = $("select#pilihcari").val();

    if (combo == "namapelanggan"){
      dataString = 'nama='+ cari;
    }
    else if (combo == "idpelanggan"){
      dataString = 'id='+ cari;
    }

    $.ajax({
      url: "page_data.php",
      type: "GET",
      data: dataString,
      success:function(data)
      {
  	     $('#divPageData').html(data);
      }
    });
  }

  $("form#formPelanggan").submit(function(){
    if (confirm("Apakah benar akan menyimpan data pelanggan ini?")){
      var vNama = $("input#namapelanggan").val();
      var vAlamat = $("textarea#alamat").val();
      var vNoHP = $("input#nohp").val();
      var myRegExp=/^\+62[0-9]+$/;

      // cek validasi form dahulu, semua field data harus diisi
      if ((vNama.replace(/\s/g,"") == "") || (vAlamat.replace(/\s/g,"") == "") || (vNoHP.replace(/\s/g,"") == "")) {
        alert("Mohon melengkapi semua field data!");
        $("input#namapelanggan").focus();
        return false;
      }
      // cek validasi no handphone
      else if (!myRegExp.test(vNoHP)){
        alert ('No handphone harus angka dan diawali +62 (contoh: +62818040567890)');
        $("input#nohp").focus();
        return false;
      }
      else{
    	  $.ajax({
          url: "proses_data.php",
          type:$(this).attr("method"), //metode yg digunakan sesuai pada form, dalam hal ini 'POST'
          data:$(this).serialize(), //mengirim data secara serialize -- seluruh data input dikirim untuk diproses
          dataType: 'json', //respon yang diminta dalam format JSON
          success:function(response){
             if(response.status == 1) // return nilai dari hasil proses
             {
                  alert("Data berhasil disimpan!");
            	  loadData(); //reload list data
            	  $("#divFormContent").load("formpelanggan.php");
            	  $("#divFormContent").hide();
            	  $("#btnhide").hide();
             }
             else
             {
            	alert("Data gagal di simpan!");
             }
          }
        });
        return false;
      }
    }
    return false;
  });
});
</script>

<form method="post" name="formPelanggan" action="" id="formPelanggan">
<table>
<tr><th colspan="2"><b><?php echo $judul; ?></b></th></tr>
<?php if ($action == "update"){?> <!-- //jika update maka textfield ID Pelanggan ditampilkan -->
<tr><td>ID Pelanggan</td><td><input type="text" id="idpelanggan" name="idpelanggan" size="10" <?php echo $readonly;?> value="<?php echo $idplgn;?>" /></td></tr>
<?php }?>
<tr><td>Nama Pelanggan</td><td><input type="text" id="namapelanggan" name="namapelanggan" size="30" maxlength="25" value="<?php echo $nama;?>" /></td></tr>
<tr><td>Alamat</td><td><textarea id="alamat" name="alamat" cols="50" rows="1"><?php echo $alamat;?></textarea></td></tr>
<tr><td>No. Handphone</td><td><input type="text" id="nohp" name="nohp" size="20" maxlength="15" value="<?php echo $nohp;?>" /> *) diawali dengan +62 (contoh: +62818034567890)</td></tr>
<tr><td colspan="2"><input type="submit" value="<?php echo $status;?>" /></td></tr>
</table>
<input type="hidden" name="action" value="<?php echo $action;?>" />
</form>

6. pagination_class.php
merupakan class untuk menangani pagination, yang dibuat oleh Reneesh T K.

<?php
/*
Developed by Reneesh T.K
reneeshtk@gmail.com
You can use it with out any worries...It is free for you..It will display the out put like:
First | Previous | 3 | 4 | 5 | 6 | 7| 8 | 9 | 10 | Next | Last
Page : 7  Of  10 . Total Records Found: 20
*/
class Pagination_class{
	var $result;
	var $anchors;
	var $total;
	function Pagination_class($qry,$starting,$recpage)
	{
		$rst		=	mysql_query($qry) or die(mysql_error());
		$numrows	=	mysql_num_rows($rst);
		$qry		 .=	" limit $starting, $recpage";
		$this->result	=	mysql_query($qry) or die(mysql_error());
		$next		=	$starting+$recpage;
		$var		=	((intval($numrows/$recpage))-1)*$recpage;
		$page_showing	=	intval($starting/$recpage)+1;
		$total_page	=	ceil($numrows/$recpage);

		if($numrows % $recpage != 0){
			$last = ((intval($numrows/$recpage)))*$recpage;
		}else{
			$last = ((intval($numrows/$recpage))-1)*$recpage;
		}
		$previous = $starting-$recpage;
		$anc = "<ul id='pagination'>";
		if($previous < 0){
			$anc .= "<li class='previous-off'>First</li>";
			$anc .= "<li class='previous-off'>Previous</li>";
		}else{
			$anc .= "<li class='next'><a href='javascript:pagination(0);'>First </a></li>";
			$anc .= "<li class='next'><a href='javascript:pagination($previous);'>Previous </a></li>";
		}

		################If you dont want the numbers just comment this block###############
		$norepeat = 2;//no of pages showing in the left and right side of the current page in the anchors
		$j = 1;
		$anch = "";
		for($i=$page_showing; $i>1; $i--){
			$fpreviousPage = $i-1;
			$page = ceil($fpreviousPage*$recpage)-$recpage;
			$anch = "<li><a href='javascript:pagination($page);'>$fpreviousPage </a></li>".$anch;
			if($j == $norepeat) break;
			$j++;
		}
		$anc .= $anch;
		$anc .= "<li class='active'>".$page_showing."</li>";
		$j = 1;
		for($i=$page_showing; $i<$total_page; $i++){
			$fnextPage = $i+1;
			$page = ceil($fnextPage*$recpage)-$recpage;
			$anc .= "<li><a href='javascript:pagination($page);'>$fnextPage</a></li>";
			if($j==$norepeat) break;
			$j++;
		}
		############################################################
		if($next >= $numrows){
			$anc .= "<li class='previous-off'>Next</li>";
			$anc .= "<li class='previous-off'>Last</li>";
		}else{
			$anc .= "<li class='next'><a href='javascript:pagination($next);'>Next </a></li>";
			$anc .= "<li class='next'><a href='javascript:pagination($last);'>Last</a></li>";
		}
			$anc .= "</ul>";
		$this->anchors = $anc;

		$this->total = "Halaman : <b>$page_showing</b> dari <b>$total_page</b>. Total Records : <b>$numrows</b>";
	}
}
?>

7. page_data.php
merupakan file yang berisi kode-kode untuk menampilkan data pelanggan beserta pagination (class untuk pagination nantinya digunakan pada bagian ini), termasuk kode jquery untuk menangani request Ajax ketika link update/delete pada baris data di-klik.

<script type="text/javascript">

// fungsi ini untuk menampilkan list data pelanggan sesuai halaman (page) yang dipilih.
// list data yang ditampilkan disesuaikan juga dengan input data pada bagian search.
function pagination(page){
  var cari = $("input#fieldcari").val();
  var combo = $("select#pilihcari").val();

  if (combo == "namapelangan"){
    dataString = 'starting='+page+'&nama='+cari+'&random='+Math.random();
  }
  else if (combo == "idpelanggan"){
    dataString = 'starting='+page+'&id='+cari+'&random='+Math.random();
  }
  else{
    dataString = 'starting='+page+'&random='+Math.random();
  }

  $.ajax({
    url:"page_data.php",
    data: dataString,
    type:"GET",
    success:function(data)
    {
      $('#divPageData').html(data);
    }
  });
}

// fungsi untuk me-load tampilan list data pelanggan, data yang ditampilkan disesuaikan
// juga dengan input data pada bagian search
function loadData(){
  var dataString;
  var cari = $("input#fieldcari").val();
  var combo = $("select#pilihcari").val();

  if (combo == "namapelanggan"){
    dataString = 'nama='+ cari;
  }
  else if (combo == "idpelanggan"){
    dataString = 'id='+ cari;
  }

  $.ajax({
    url: "page_data.php", //file tempat pemrosesan permintaan (request)
    type: "GET",
    data: dataString,
    success:function(data)
    {
      $('#divPageData').html(data);
    }
  });
}

$(function(){
  // membuat warna tampilan baris data pada tabel menjadi selang-seling
  $('#tblpelanggan tr:even:not(#nav):not(#total)').addClass('even');
  $('#tblpelanggan tr:odd:not(#nav):not(#total)').addClass('odd');

  $("a.edit").click(function(){
    page=$(this).attr("href");
    $("#divFormContent").load(page); // me-load formpelanggan untuk melakukan edit data
    $("#divFormContent").show();
    $("#btnhide").show();
    return false;
  });

  $("a.delete").click(function(){
    if(confirm("Apakah benar akan menghapus data pelanggan ini?"))
    {
    	$.ajax({
    	  url:$(this).attr("href"),
    	  type:"GET",
    	  dataType: 'json', //respon yang diminta dalam format JSON
    	  success:function(response)
    	  {
    	     if(response.status == 1){
    		      loadData();
    		      $("#divFormContent").load("formpelanggan.php");
                  $("#divFormContent").hide();
                  $("#btnhide").hide();
                  alert("Data berhasil di hapus!");
    	     }
    	     else{
    		      alert("Data gagal di hapus!");
    	     }
    	  }
    	});
    }
    return false;
  });

});

</script>

<?php
// memanfaatkan class pagination dari Reneesh T.K
include_once('config.php');
include_once('pagination_class.php');

if (isset($_GET['nama']) and !empty($_GET['nama'])){
  $nama = $_GET['nama'];
  $sql = "select * from tbl_pelanggan where nama_pelanggan like '%$nama%' order by id_pelanggan";
}
else if (isset($_GET['id']) and !empty($_GET['id'])){
  $id = $_GET['id'];
  $sql = "select * from tbl_pelanggan where id_pelanggan = '$id' order by id_pelanggan";
}
else{
  $sql = "select * from tbl_pelanggan order by id_pelanggan";
}

if(isset($_GET['starting'])){ //starting page
	$starting=$_GET['starting'];
}else{
	$starting=0;
}

$recpage = 5;//jumlah data yang ditampilkan per page(halaman)
$obj = new pagination_class($sql,$starting,$recpage);
$result = $obj->result;
?>

  <table id="tblpelanggan">
	  <tr><th>Id Pelanggan</th><th>Nama Pelanggan</th><th>Alamat</th><th>No. Handphone</th><th>Aksi</th></tr>
		<?php
		//menampilkan data pelanggan
		if(mysql_num_rows($result)!=0){
  		while($row = mysql_fetch_array($result)){ ?>
        <tr><td><?php echo $row['id_pelanggan']; ?></td><td><?php echo $row['nama_pelanggan']; ?></td><td><?php echo $row['alamat']; ?></td><td><?php echo $row['no_hp']; ?></td>
        <td><a href="formpelanggan.php?action=update&id=<?php echo $row['id_pelanggan'];?>" class="edit">edit</a> | <a href="proses_data.php?action=delete&id=<?php echo $row['id_pelanggan'];?>" class="delete">delete</a></td></tr>
  		<?php } //end while ?>
		 <tr id="nav"><td colspan="5"><?php echo $obj->anchors; ?></td></tr>
	   <tr id="total"><td colspan="5"><?php echo $obj->total; ?></td></tr>
    <?php }else{?>
    <tr><td align="center" colspan="5">Data tidak ditemukan!</td></tr>
    <?php }?>
	</table>

8. proses_data.php
merupakan file yang berisi kode-kode untuk memproses request Ajax, baik itu penambahan, perubahan, dan delete data pelanggan. proses yang dilakukan disini akan mengembalikan nilai-nilai dalam format JSON untuk kemudian diproses pada bagian yang sebelumnya melakukan request.

<?php
  // file proses_data.php merupakan halaman untuk menangani request Ajax baik untuk proses tambah, ubah, maupun hapus
  // respon balikan dari masing-masing proses tersebut adalah dalam format JSON.

  include_once("config.php");

  //fungsi untuk men-generate ID pelanggan, ex: P0001
  function buatID($tabel, $inisial){
    $struktur = mysql_query("select * from $tabel") or die("query tidak dapat dijalankan!");
    $field = mysql_field_name($struktur,0);
    $panjang = mysql_field_len($struktur,0);
    $row = mysql_num_rows($struktur);

    $panjanginisial = strlen($inisial);
    $awal = $panjanginisial + 1;
    $bnyk = $panjang-$panjanginisial;

    if ($row >= 1){
      $query = mysql_query("select max(substring($field,$awal,$bnyk)) as max from $tabel") or die("query tidak dapat dijalankan!");
      $hasil = mysql_fetch_assoc($query);
      $angka = intval($hasil['max']);
    }
    else{
      $angka = 0;
    }

    $angka++;
    $tmp= "";
    for ($i=0; $i < ($panjang-$panjanginisial-strlen($angka)) ; $i++){
      $tmp = $tmp."0";
    }
    //return hasil generate ID
    return strval($inisial.$tmp.$angka);
  }

  if(isset($_POST['action']) && $_POST['action']=="add") //menangani aksi penambahan data pelanggan
  {
     $nama=$_POST['namapelanggan'];
     $alamat=$_POST['alamat'];
     $nohp=$_POST['nohp'];

     $idpelanggan = buatID("tbl_pelanggan","P");
     mysql_query("INSERT INTO tbl_pelanggan(id_pelanggan,nama_pelanggan,alamat,no_hp) VALUES('$idpelanggan','$nama','$alamat','$nohp')") or die ("data gagal ditambahakan!");
     // mengembalikan respon dalam format JSON.
     // status "1" berarti proses berhasil dilakukan.
     echo '{"status":"1"}';
     exit;
  }
  elseif(isset($_POST['action']) && $_POST['action']=="update") //menangani aksi perubahan data pelanggan
  {
     $idplgn=$_POST['idpelanggan'];
     $nama=$_POST['namapelanggan'];
     $alamat=$_POST['alamat'];
     $nohp=$_POST['nohp'];

     $test = mysql_query("UPDATE tbl_pelanggan SET nama_pelanggan='$nama',alamat='$alamat',no_hp='$nohp' WHERE id_pelanggan='$idplgn'") or die ("data gagal di-update!");
     echo '{"status":"1"}';
     exit;
  }
  elseif(isset($_GET['action']) && $_GET['action']=="delete") //menangani aksi penghapusan data pelanggan
  {
     $id = $_GET['id'];
     $test = mysql_query("delete from tbl_pelanggan where id_pelanggan='$id'");
     if(mysql_affected_rows() == 1){ //jika jumlah baris data yang dikenai operasi delete == 1
       echo '{"status":"1"}';
     }else{
       echo '{"status":"0"}';
     }
     exit;
  }
?>

Setelah keseluruhan file-file pendukung dibuat, maka saatnya untuk melihat bagaimana hasilnya. Demo  untuk aplikasi tersebut dapat dilihat pada link ini dan untuk mendownload seluruh source code yang diperlukan dapat melalui link ini.

Demikian yang dapat disampaikan dalam tulisan ini, mohon maaf jika masih banyak kekurangan dan codingnya masih cupu.. hehe.. semoga bermanfaat.

Selanjutnya adalah membuat file-file pendukung utama, seperti berikut ini.

1. config.php
digunakan untuk melakukan pengaturan koneksi ke database.

2. style-page.css
merupakan file css untuk mengatur tampilan web.

2. index.php
merupakan halaman utama, dimana menampung tampilan data pelanggan, form pencarian data pelanggan, dan form pelanggan.

3. pelanggan.js
berisi kode-kode jquery untuk menangani request Ajax.

4. formpelanggan.php
merupakan file yang berisi kode-kode untuk form pelanggan, dimana form pelanggan nantinya akan ditampilkan untuk menangani fungsi penambahan/perubahan data pelanggan. form ini ditampilkan dengan mekanisme Ajax pada halaman index.

5. pagination_class.php
merupakan class untuk menangani pagination, yang dibuat oleh Reneesh T K.

6. page_data.php
merupakan file yang berisi kode-kode untuk menampilkan data pelanggan beserta pagination (class untuk pagination nantinya digunakan pada bagian ini), termasuk kode jquery untuk menangani request Ajax ketika link update/delete pada baris data di-klik.

7. proses_data.php
merupakan file yang berisi kode-kode untuk memproses request Ajax, baik itu penambahan, perubahan, dan delete data pelanggan. proses yang dilakukan disini akan mengembalikan nilai-nilai dalam format JSON untuk kemudian diproses pada bagian yang sebelumnya melakukan request.

Setelah keseluruhan file-file pendukung dibuat, maka saatnya untuk mencoba aplikasinya. Untuk melihat hasilnya, demo dapat dilihat pada link ini dan untuk mendownload seluruh source code yang diperlukan dapat melalui link ini.

Demikian yang dapat disampaikan dalam tulisan ini, mohon maaf jika masih banyak kekurangan dan codingnya masih cupu.. hehe.. semoga bermanfaat.