Arsa's blog..

try to express myself..

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

with 125 comments


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 :grin: 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.. :mrgreen: 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.


About these ads

Written by dearsa

13 August 2010 at 22:17

Posted in Jquery, PHP

125 Responses

Subscribe to comments with RSS.

  1. Bagus banget ini… thx2 ^_^

    hikarianna

    21 August 2010 at 21:51

    • terima kasih sudah berkunjung.. semoga bisa bermanfaat.. ^^

      dearsa

      31 August 2010 at 18:51

  2. thnx.good.sy sdh donlut.pada saat di gabung dengan website utama kok ga bisa jalan y?apa tabrakan dengan script website utama ya?

    ismail

    22 September 2010 at 08:52

    • maaf, klo boleh tau mas apanya ya yg ga mau jalan? ajax-nya ato lainnya? klo ajax-nya mungkin bisa dipastikan terlebih dahulu bahwa library jquery sudah dipanggil pada halaman website, seperti berikut ini.

      <!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" />
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      </head>
      <body>
      </body>
      </html>
      

      dimana folder penempatan file jquery-nya juga disesuaikan dgn yg mas gunakan. Apabila menggunakan library lainnya jg bersama jquery (spt: prototype ato lainnya), mungkin solusi ini bisa digunakan. Selain itu, pastikan jg query database telah disesuaikan dgn database yg digunakan. Oya, satu lagi mas mungkin mas bisa menginstall add-on Firebug jika menggunakan Firefox shg bisa menganalisa request ajax yg terjadi.

      dearsa

      22 September 2010 at 09:49

      • Trims solusinya.maksudnya begini.
        misal sy punya website utama dengan nama index.php
        di index.php sy include datapelanggan.php
        nah pada saat sy buka http://www.xx.index.php itu tidak bisa menampilkan seluruh datapelanggan.php.
        jika sy buka secara terpisah http://www.xx/datapelanggan.php itu bisa menampilkan seluruh datapelanggan, dengan kata lain tidak ada trouble.
        mungkinkah bentrok dengan script index.php nya?mohon pencerahannya mas

        ismail

        22 September 2010 at 12:21

      • oya mas, mungkin klo sy menangkapnya bgini: jadi tutorial ‘ajax-aeds’ tsb ingin di-include-kan pada hal utama yg baru ya? dimana file index.php yg ada di tutorial ‘ajax-aeds’ diubah menjadi datapelanggan.php kemudian di-include-kan pada hal utama yg baru (index.php). bgitu ya mas? klo memang spt itu, tidak bisa di-include-kan secara langsung karena akan ada masalah untuk path dari file2 yg diperlukan. jadi ada beberapa perubahan untuk menyesuaikannya. perubahan tsb bisa dilihat pada contoh yg sy coba buat di sini. mungkin bisa dicoba dan dipelajari terlebih dahulu, juga bisa dilihat perubahan yg ada. semoga sesuai dgn yg dimaksud dan semoga membantu. :grin:

        dearsa

        22 September 2010 at 19:28

      • ok trims.sudah sy coba bisa mas.sekarnag masalahnya.misalkan di http://index.php itu kan ada menu2 nya: misal home, data pelanggan.
        yang sy tanyakan gimana jika di klik data pelanggan itu bisa manmilkan tutorial data pelanggan. trim sebelumnya atas pencerahannya

        ismail

        25 September 2010 at 09:41

      • jika pada hal utama terdapat menu spt home dan data pelanggan maka ada beberapa hal yg perlu diubah dan ditambahkan. ada 3 file yg perlu ditambahkan seperti berikut.
        – index.php

        <?php
          header("location:main.php?hal=home"); 
        ?>
        

        – main.php

        <!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-utama.css" />
        <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="container">
        <div id="header"><h1>Free CSS Layouts</a></h1></div>
          <div id="wrapper">
            <div id="content">
            <?php 
              include("content.php");
            ?>   
            </div>
          </div>
          <div id="navigation">
            <ul>
              <li><a href="?hal=home">Home</a></li>
              <li><a href="?hal=datapelanggan">Data Pelanggan</a></li>
            </ul>
          </div>
          <div id="footer">
            <p>Footer</p>
          </div>
        </div>
        </body>
        </html>
        

        – content.php

        <?php 
        if ($_GET[hal] == 'home'){
          echo "<p>Hallo, ini adalah halaman home..</p>";
        }
        else if ($_GET[hal] == 'datapelanggan'){
          //include file datapelanggan.php yg ada di folder pelanggan
          include("pelanggan/datapelanggan.php");
        }
        else{
          echo "<p>Maaf, halaman tidak ditemukan!</p>";
        }
        ?>
        

        dimana file main.php merupakan file yg diubah dari file index.php yg ada sebelumnya. selamat mencoba mas.. :grin:

        dearsa

        26 September 2010 at 09:34

      • Ueko. Trims Solusinya Lanjut gan

        ismail

        27 September 2010 at 09:50

  3. Parse error: parse error in C:\wamp\www\pdate\page_data.php on line 144

    dodoy

    10 October 2010 at 21:04

    • klo di tmpt saya bisa berjalan dengan baik, saya menggunakan xampp 1.7.1

      dearsa

      14 October 2010 at 07:46

      • dear mas dearsa saya ada notifikasi eror seperti ini :
        Parse error: syntax error, unexpected $end in C:\xampp\htdocs\pagingtes\page_data.php on line 140

        saya pake xampp 1.7.3

        mohon pencerahannya mas :)

        Thanx

        imam

        24 November 2010 at 10:36

      • oya mas Imam, saya baru sempat mencoba pada xampp 1.7.3 terdapat error seperti itu. hal ini karena pada xampp yg lebih baru sepertinya setting ‘short open tag’ di-nonaktifkan.

        <? ... ?> 

        solusinya adalah pertama mengganti seluruh ‘short open tag’ yg ada dgn tag standar :

        <?php ... ?> 

        karena ada beberapa file yg masih menggunakannya. kedua meng-aktifkan setting ‘short open tag’ di xampp\php\php.ini, tapi untuk solusi kedua setelah baca2 tidak direkomendasikan. untuk itu, file2 source code sudah saya sesuaikan dan dpt di-download pd link yg sama. semoga membantu.. :grin:

        dearsa

        24 November 2010 at 22:20

      • oya mungkin error yg terjadi ini hampir sama bila dijalankan pada wamp seperti error yg disampaikan oleh mas dodoy sblmnya. semoga solusi diatas bisa digunakan.. :grin:

        dearsa

        24 November 2010 at 22:43

  4. bagaimana menambahkan scroltable ke samping. terima kasih

    martunis alfatih

    12 October 2010 at 16:41

    • mungkin untuk scrolltable ke samping bisa ditambahkan code css berikut. (file page_data.php)

      <div style="width:350px; overflow-x:auto;">
      <table id="tblpelanggan">
      .....
      </table>
      </div>
      

      dimana dalam contoh tersebut jika ukuran lebar tabel melebihi 350px maka scroll bar ke samping akan ditampilkan.

      dearsa

      14 October 2010 at 08:03

  5. Thanks so much for the tutorial :)

    Eiger Yap

    7 November 2010 at 21:07

  6. mas mau tanya mas.
    jika menu itu tampil pada saat login gmn mas cara menempelkan session nya mas.
    trimakasih sebelumnya

    ismail

    9 November 2010 at 13:00

    • apabila disertai login maka session yg telah didaftarkan (ketika login berhasil) harus dicek pada halaman yg dituju setelah login tsb. mungkin dapat dilihat pengecekan session pada file berikut ini.

      – misal halaman yg dituju setelah login adalah index.php

      <?php
      // mengaktifkan session dan mengecek jika session belum terbentuk atau login belum dilakukan
      // maka user tidak dapat membuka halaman selanjutnya (user akan diarahkan ke halaman login.php)
      session_start();
      if (empty($_SESSION[uname]) AND empty($_SESSION[password]) AND empty($_SESSION[role])){
        header("location:login.php");
      }
      else{
      ?>
      
      <!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-utama.css" />
      <link rel="stylesheet" type="text/css" href="css/style-page.css" />
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      </head>
      
      <body>
      <div id="container">
      <div id="header"><h1>Free CSS Layouts</a></h1></div>
        <div id="wrapper">
          <div id="content">
          <?php 
            include("content.php");
          ?>   
          </div>
        </div>
        <div id="navigation">
          <ul>
            <li><a href="index.php?hal=home">Home</a></li>
            <li><a href="index.php?hal=datapelanggan">Data Pelanggan</a></li>
            <li><a href="logout.php">Logout</a></li>
          </ul>
        </div>
        <div id="footer">
          <p>Footer</p>
        </div>
      </div>
      </body>
      </html>
      <?php
      }
      ?>
      

      – dalam file index.php terdapat include ‘content.php’ maka dalam file content.php perlu dicek pula halaman mana yg dapat diakses oleh user tsb.

      <?php 
      if ($_GET[hal] == 'home'){
        echo "<p>Hallo, ini adalah halaman home..</p>";
      }
      else if ($_GET[hal] == 'datapelanggan'){
        if ($_SESSION['role']=='admin'){
          //include file datapelanggan.php yg ada di folder pelanggan
          include("pelanggan/datapelanggan.php");
        }
        else{
          echo "<p>Maaf, anda tidak berhak mengakses halaman ini!</p>";
        }
      }
      else{
        echo "<p>Maaf, halaman tidak ditemukan!</p>";
      }
      ?>
      

      mungkin lebih lengkap bisa mencoba contoh yg saya coba buat di sini. semoga membantu.. :grin:

      dearsa

      10 November 2010 at 10:42

      • uke mas trims.lain waktu sambung lagi mas

        ismail

        11 November 2010 at 10:04

  7. Mas, sorry nih mo minta petunjuk nya.
    aku include kan script dari mas.
    tapi pas di akses hanya muncul button tambah saja. data tidak tampil dan ketika saya klik button tambah itu, muncul error “Internal Server Error”
    mohon petunjuk nya..maklum baru belajar nih..thanks before..

    Oerangkampoeng

    24 November 2010 at 16:24

    • oya mas, kyaknya tidak bisa di-include-kan secara langsung karena akan ada masalah untuk path dari file2 yg diperlukan. mungkin mas bisa membaca komentar2 sebelumnya, sepertinya ada permasalahan yg hampir sama.

      dearsa

      24 November 2010 at 22:56

  8. maaf mas lum punya website…
    mw tax cara bwt wedsite biar bsa diupload di intrnet,gmna mas?
    mkas dblumx

    suciati

    2 December 2010 at 17:51

    • klo untuk membuat website agar bisa di-upload di internet, maka dibutuhkan web host (tempat dimana web akan di-host) dan nama domain (alamatnya). setelah itu web yg telah dibuat dpt di-upload lewat ftp atau fasilitas file manager yg tersedia pd cpanel. lewat pencarian di google bnyk sekali penyedia jasa web hosting yg bisa digunakan. sebagai alternatif, apabila ingin mencoba dpt memanfaatkan layanan web hosting gratis seperti 000webhost. selain itu apabila ingin memperoleh domain gratis dpt mencoba co.cc. semoga membantu.. :grin:

      dearsa

      3 December 2010 at 22:07

  9. bagus nich…ijin make….

    adekjeyek

    14 December 2010 at 06:52

    • iya silahkan, semoga bisa bermanfaat.. :grin:

      dearsa

      14 December 2010 at 17:23

  10. terimakasih banyak gan.
    kebetulan ane lagi nyari2 ginian.
    tq

    bie

    24 December 2010 at 21:40

  11. mas cara konekin databasenya bagai mana ya? q jalanin tp ada warning begini… tolong bantuaannya mas…

    Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘username’@’localhost’ (using password: YES) in C:\xampp\htdocs\budi\ajax-aeds\config.php on line 7
    Koneksi ke database gagal!

    de

    27 December 2010 at 18:19

    • apabila error-nya seperti itu berarti ‘konfigurasi’ untuk koneksi ke database masih ada yg salah. sebelumnya pastikan ‘database’ telah dibuat beserta ‘tabel’ yg diperlukan (untuk ‘tabel’ bisa menggunakan file ‘saeds-sql.sql’) setelah itu mas bisa buka file ‘config.php’ yg ada lalu ubahlah konfigurasi database sesuai dgn yg digunakan, seperti alamat server database (klo di komputer local menggunakan localhost atau 127.0.0.1), username untuk koneksi ke database (tergantung yg digunakan, bisa saja ‘root’ atau username lainnya, silahkan disesuaikan), password dari username tsb dan nama database yg digunakan. semoga membantu. :grin:

      dearsa

      27 December 2010 at 20:42

  12. mas jika menunya dropdwon gmn mas?

    ismail

    4 January 2011 at 12:05

  13. wah bagus banget gan..
    saya ko tidak bisa meng`update dan menambah data ya mas.
    mohon pencerahannya mas..

    wawan

    26 January 2011 at 08:29

    • oya mas, saya masih blm jelas ttg tidak bisanya meng-update dan menambah data. apakah contoh code yg telah di-download tidak bisa berjalan dgn baik? apakah ada error yg ditampilkan? mungkin yg pertama diperhatikan saat mencoba contoh code-nya adalah mempersiapkan database-nya dan konfigurasi koneksi ke database pd file config.php.

      dearsa

      27 January 2011 at 21:40

  14. mas mau tanya mas?
    di tutorial actionnya hanya dua yaitu add dan update.
    jika ingin menambahkan satu action lagi gmn mas?
    misalkan action validasi.
    alurnya demikian:
    1. pada saat data pelanggan di edit
    2. kemudian di klik validasi maka data yang di edit tersebut tersimpan di tabel yang lain ex. validasi_pelanggan

    ismail

    4 February 2011 at 09:53

    • oya mas, apabila ingin menambah sebuah aksi seperti ‘validasi’ tsb, dapat dilakukan dgn 2 cara. pertama dapat menambahkan sebuah aksi ‘validasi’ pada tiap baris data pelanggan yg ditampilkan pada tabel dimana sebelumnya telah ada aksi ‘edit’ dan ‘delete’. modifikasi utk hal ini dapat dilakukan pada file ‘page_data.php’. kedua menambahkan sebuah button ‘validasi’ pada formpelanggan yg ditampilkan ketika sebuah data pelanggan di-edit. modifikasi utk hal ini dapat dilakukan pada file ‘formpelanggan.php’. tentunya kedua cara tersebut akan melakukan ‘aksi’ yg berhubungan dgn database, dimana hal tsb diproses pada file ‘proses_data.php’. untuk hal itu, maka tambahkan juga code untuk memproses aksi dari kedua cara tsb. oya, jangan lupa jg bahwa tabel ‘validasi_pelanggan’ telah dibuat sblmnya. mungkin untuk lebih jelas dapat melihat contoh codenya di sini. semoga membantu.. :grin:

      dearsa

      5 February 2011 at 07:34

      • Thnx mas. jika kita joinkan dengan tabel lain gmn mas. misalkan ada sebuah tabel jual.pada saat menambahkan data jual nama dengan dropdown sedangkan alamat dan no_hp muncul pada saat nama di pilih. mohon pencerahan. terimakasih.

        ismail

        11 February 2011 at 15:53

      • apabila mas ingin menampilkan data alamat dan no hp ketika data nama dipilih pada drop-down list, mungkin prinsipnya hampir sama seperti pada bagian ‘search’. bisa diperhatikan lagi kode pada bagian search data pelanggan yg ada pilihan drop-down list-nya (file index.php dan pelanggan.js). bayangannya seperti ini.

        awalnya, mas membuat query untuk mendapatkan ‘nama pelanggan’ yg ada untuk ditampilkan pada drop-down list. misalkan id dari drop-down list-nya: ‘pilihnama’.

        <select id="pilihnama"> 
              <!-- tampilkan hasil query -->
              <option value=......>......</option>
        </select>
        

        kemudian tambahkan kode javascript(jquery) untuk menangani aksi pilih nama yg terjadi. hal ini dilakukan dengan memanfaatkan event change.

        $("select#pilihnama").change(function(){ 
            // pada bagian ini dilakukan request ajax untuk mendapatkan
            // data alamat dan no hp dari 'nama' yg dipilih.
            dataString = 'nama='+ $(this).val();
            $.ajax({
              url: "getdata.php",
              type: "GET",
              data: dataString,
              dataType: 'json',
              success:function(response)
              {
          	 //tampilkan data pada field alamat dan nohp
                 $("textarea#alamat").val(response.alamat);
                 $("input#nohp").val(response.nohp);
              }
            });
        });
        

        nantinya request ajax diproses pada file getdata.php dan mengembalikan data alamat & nohp dalam format json untuk kemudian ditampilkan.

        dearsa

        12 February 2011 at 12:29

  15. wah ini yang saya cari-cari mas. dah kesana kemari mencari contoh penerapan add,edit,delete dan search eh malah ada paging sekalian wah thx bgt mas. boleh saya add ym ato fb nya untuk minta pencerahan lainnya?

    anton hilman

    20 February 2011 at 21:31

  16. Saya sangat berterima kasih tutorialnya .. sumpah dah keren saya sgt bingung udh 2minggu nyari tutorial begian .

    Terima kasih
    James

    James

    27 February 2011 at 00:55

  17. mas tanya mas.kode pelanggan sy emtrykan secara manual di mysql nya dimana kode pelanggan ada spasinya (Ex: P 007).kenapa pada saat di klik edit kok tidak bisa menampilkan form edit nya mas? apakah field yang di jadikan kunci datanya tidak boleh ada spasi?

    ismail

    7 March 2011 at 14:06

    • field yg dijadikan kunci dpt berisi ‘spasi’, tetapi dalam hal ini ketika link edit di-klik maka data yg dikirimkan (string URL) yakni pada variabel id hanya berisi ‘P’ saja sedangkan bagian selanjutnya tidak disertakan. spasi merupakan karakter yg perlu dikodekan dlm URL agar dpt diproses dgn benar, untuk itu dpt digunakan fungsi urlencode(). agar data pelanggan dgn id ex: ‘P 007′ dapat ditampilkan pd form edit, maka pada file page_data.php (bagian tblpelanggan – kolom ‘aksi’ link edit/delete) perlu ditambahkan pemanggilan fungsi urlencode().

      <td><a href="formpelanggan.php?action=update&id=<?php echo urlencode($row['id_pelanggan']);?>" class="edit">edit</a> | 
      <a href="proses_data.php?action=delete&id=<?php echo urlencode($row['id_pelanggan']);?>" class="delete">delete</a></td>
      

      dearsa

      7 March 2011 at 15:26

      • Thnx mas. klo boleh bisa komunikasi lewat YM g?

        ismail

        8 March 2011 at 08:52

  18. mas mau tanya lagi.
    1. jika data pelanggan di tambahi satu field lagi misalkan picture gmn?dimana picturenya itu pada saat input ada browse nya.
    2. kemudian ada sat menu lagi yaitu cetak data gmn? dalam bentuk pdf?

    ismail

    17 March 2011 at 13:56

    • pertama:
      sbg bayangan apabila ingin menambahkan field utk meng-upload image maka perlu dilakukan perubahan pd file ‘formpelanggan.php’ baik utk tambah atau edit data pelanggan dan jg file ‘proses_data.php’ utk pemrosesan data-nya (termasuk proses upload). selain itu perlu disediakan folder utk menyimpan upload file image tsb dan pada ‘tbl_pelanggan’ di database juga perlu ditambahkan field untuk menyimpan nama file image yg di-upload tsb. nantinya image yg telah di-upload dpt ditampilkan (ketika edit data) dgn kode misal:

      <img src='imgupload/$img'>

      dimana $img menampung nama file image yg diperoleh dr hasil query dan ‘imgupload’ merupakan folder tmpt penyimpanannya.

      pada file ‘proses_data.php’ ketika dilakukan delete data pelanggan, perlu diperhatikan keberadaan file image yg di-upload berdasarkan ‘id_pelanggan’ tsb, dimana dpt memanfaatkan fungsi php ‘file_exists()’ dan jg ‘unlink()’ utk men-delete file image tsb. jadi ketika delete data pelanggan maka file image jg dihapus.

      mungkin sbg referensi, mas bisa membaca ttg PHP File Upload di sini atau bisa search lebih lanjut lewat google. oya mas, saya jg sempat membaca diskusi: link1 dan link2 ttg upload file dgn jquery, disana disebutkan dpt memanfaatkan jQuery Form Plugin.

      kedua:
      untuk membuat laporan dalam format PDF, mungkin mas dapat memanfaatkan FPDF library.

      dearsa

      18 March 2011 at 15:03

  19. Jika file pelanggan di tambah 1 field yaitu jenis kelamin pake combo gmn mas?mohon pencerahannya.terimakasih

    rara

    29 March 2011 at 14:29

  20. mas tanya mas jika nama ada petik satu atas kok selalu gagal itu kenapa mas? contoh isma’il

    ismail

    4 April 2011 at 13:19

    • maaf sblmnya mas, saya jarang OL belakangan ini. saya coba untuk menjawab pertanyaan yg ada:
      @rara, apabila terdapat penambahan data untuk jenis kelamin maka dapat dilakukan dengan melakukan perubahan code pada file ‘formpelanggan.php’ dimana di dalamnya bisa ditambahkan combo box. tentunya pada database juga perlu penambahan field untuk menyimpan data jenis kelamin tsb. selain itu pada file ‘proses_data.php’ juga perlu dilakukan penyesuaian code untuk insert dan update data ke database.

      kemudian mengenai input data yg terdapat tanda petik selalu mengalami kegagalan/error, hal ini disebabkan karena tanda petik merupakan karakter khusus, dimana saat melakukan penyimpanan data ke database maka karakter-karakter khusus ini yg mesti di-antisipasi. fungsi berikut bisa digunakan untuk menangani hal tersebut.

      <?php 
      function cleanall($data){
          $filter = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
          return $filter;
        }
      ?>
      

      Nantinya, fungsi tersebut dimanfaatkan untuk mem-filter input data sebelum input data tsb disimpan ke database (file proses_data.php).

      <?php 
      $nama=cleanall($_POST['namapelanggan']);
      $alamat=cleanall($_POST['alamat']);
      $nohp=cleanall($_POST['nohp']);
      ?>
      

      untuk lebih jelasnya, saya coba membuat contoh code-nya termasuk di dalamnya mengenai upload image. contoh code tsb bisa di-download di sini. semoga membantu.. :grin:

      dearsa

      8 April 2011 at 15:24

  21. di database sudah sy tambah 1 field. di formpelanggan juga sudah sy tambah dengan combo box. tp pada saat data di edit combo boxnya tidak bisa berubah sesuai dengan data yang ada di database. sebagai contoh di database perempuan yang keluar di formpelanggan kok laki2. sekali lagi mohon pencerahannya. terimakasih

    rara

    13 April 2011 at 08:11

    • oya mas, sebelumnya saya sempat membuat contoh untuk penambahan combobox tsb pada link ini. pada contoh tsb saya juga telah menyertakan file sql untuk databasenya, mungkin perlu diperhatikan lagi field pada database untuk penyimpanan data jenis kelamin. untuk field data jenis kelamin saya membuatnya bertipe enum: `jns_kelamin` enum(‘L’,’P’), jadi data yg nantinya disimpan pada database adalah ‘L’ untuk laki-laki dan ‘P’ untuk perempuan shg pada file formpelanggan.php, untuk input data perlu jg disesuaikan seperti berikut ini.

      <tr><td>Jenis Kelamin</td><td><select id="jnskelamin" name="jnskelamin">
          <option value="piljnskelamin">- pilih jenis kelamin -</option>
          <option value="L">L (laki-laki)</option>
          <option value="P">P (perempuan)</option>
        </td></tr>
      

      ketika submit data dilakukan maka ‘jnskelamin’ dapat berisi value ‘piljnskelamin’ atau ‘L’ atau ‘P’, dimana sebelum di-proses apabila pengguna belum meng-input pilihan data jenis kelamin (dalam hal ini value berisi ‘piljnskelamin’) maka akan ditampilkan peringatan untuk melengkapi data jenis kelamin. semoga membantu.. :grin:

      dearsa

      14 April 2011 at 09:38

  22. Terimakasih banyak sharing nya mas. Tutorialnya dilanjut mas. tambah lagi.

    ismaiil

    16 April 2011 at 09:19

    • iya sama2 mas.. semoga bermanfaat.. :grin:

      dearsa

      20 April 2011 at 16:49

  23. klo menggunakan database oracle gimn caranya, apa saja yang perlu dirubah??

    dwi

    17 April 2011 at 11:46

    • maaf sebelumnya, saya kurang berpengalaman dgn database oracle, mungkin menurut saya untuk menyesuaikannya ada beberapa hal yg perlu dilakukan. pertama bagaimana melakukan koneksi ke database oracle, karena cara koneksi ke db mysql dgn oracle berbeda, mungkin link2 berikut dpt membantu: link 1, link 2, dan link 3. kedua adalah membuat tabel database yg diperlukan termasuk menyesuaikan syntax query sql yg digunakan dlm kode namun saya kira untuk syntax sql tidak terlalu jauh berbeda. selain itu, perlu juga menyesuaikan fungsi2 php yg sebelumnya berdasarkan db mysql ke oracle (PHP : OCI8 – Manual). semoga membantu. :grin:

      dearsa

      20 April 2011 at 18:19

  24. Makasih mas…..mudah2an tambah ilmunya

    dzik

    27 April 2011 at 19:58

    • iya mas, sama2.. semoga bermanfaat.. :grin:

      dearsa

      28 April 2011 at 10:17

  25. tang u bozzzzzzzzzz

    shabran

    13 May 2011 at 06:32

  26. makasih byk mas.. tq bgt y..

    hilman

    17 May 2011 at 02:58

  27. mas.. bagus banget tutorial nya ^_^

    oya mas punya tutorial php dan sql server tidak?

    thx

    myrna

    26 May 2011 at 14:47

    • maaf untuk tutorial php dan sql server saya tidak ada, tetapi menurut saya prinsip awalnya adalah bagaimana mengkoneksikan php dengan sql server (bisa di-search terlebih dahulu tentang topik tersebut). oya, mungkin referensi ini bisa membantu: php manual atau Microsoft Drivers for PHP for SQL Server. :grin:

      dearsa

      27 May 2011 at 13:37

      • terima kasih sebelumnya atas bantuannya ^_^

        sudah bisa mengkoneksikan antarah php dan sql server :)

        sebenarnya sepengetahuan Mas. perbedaan dari segi syntax maupun dari segi yg lainnya antara sql server dan my sql apa yah Mas? soalnya saya baru menggunakan sql server (krn tutuntan pekerjaan.. hehehe)

        myrna

        27 May 2011 at 14:03

      • oya, mungkin klo untuk perbedaan diantara keduanya lebih lengkap bisa dibaca pada referensi berikut ini: Comparison of different SQL implementations, MySQL vs MS SQL Server, SQL Differences Between Microsoft SQL Server and MySQL. semoga membantu. :grin:

        dearsa

        28 May 2011 at 17:32

      • oya Mas jika saya mau memodifikasi artikel mas di atas.

        tahapan2 file yg musti saya pelajari di mulai dari mana mas jika ingin mengedit? thx

        myrna

        27 May 2011 at 14:06

      • apabila ingin memodifikasinya agar dapat berjalan pada mssql, dapat dimulai dari: file config.php yang berisi pengaturan koneksi ke database, file formpelanggan.php yang berisi query ke tabel pelanggan , file page_data.php & pagination_class.php yang berisi query untuk menampilkan data pelanggan dlm bentuk tabel beserta pagination, dan file proses_data.php yang berisi query untuk memproses insert, update dan delete data pelanggan.

        oya, saya sempat jg mencoba untuk melakukan modifikasi tsb. dalam hal ini saya menggunakan extension yg disediakan php agar dapat berhubungan dengan database mssql, yakni: extension=php_mssql.dll. saya mengaktifkannya melalui file php.ini. saya menggunakan MSSQL Express 2005, paket XAMPP 1.7.1 di windows xp sp2. hasil modifikasinya dapat diambil pd link ini. semoga membantu. :grin:

        dearsa

        28 May 2011 at 18:09

  28. Keren Mas ini hampir sama kayak grid :D

    Deny

    27 May 2011 at 08:37

  29. Mas sebelumnya terima kasih banyak atas bantuannya untuk solusi yang telah diberikan. Sangat membantu sekali Mas ^_^ Semoga kebaikan Mas di balas oleh Yang Mahakuasa. Amin :)

    Tetapi setelah saya edit menggunakan Database dari sql server yg saya punya. ada beberapa keanehan Mas. jika dipilih link edit, muncul data di kolom “Update Data Pelanggan” tidak sesuai dengan data yg dipilih pada link edit, kemudian paging nya hanya berubah data saat first dan last saja. Apakah saya boleh meminta data yg tanpa css dan jquery mas? mgkn saya salah memasukkan syntax. krn saya masih krg paham dalam css dan jquery. maaf merepotkan Mas. thx

    myrna

    30 May 2011 at 14:50

    • kira2 apa yang salah yah Mas? saya sudah coba beberapa kali tetapi tetap saja, permasalahan di atas muncul.

      apa krn database saya tidak memiliki id yg sebagai primary key? berpengaruh tidak Mas? jadi id_pelanggan nya saya ganti menjadi branch, dimana branch itu bukan primary key dan datanya berupa tgp1,slo1,bdg1, dan lain2

      myrna

      31 May 2011 at 09:53

      • mungkin untuk permasalahan itu, perlu diperhatikan lagi file page_data.php. ketika melakukan edit data maka yg menjadi acuan adalah id_pelanggan. jika dalam hal ini diganti menjadi branch maka perlu disesuaikan lagi atau mungkin terdapat data branch yang duplikat shg data yg ditampilkan menjadi tidak sesuai. oya, modifikasi yg tanpa menggunakan ajax dpt diambil pada link ini. :grin:

        dearsa

        2 June 2011 at 19:19

  30. […] feed yang ada dalam aplikasi ini dibuat menggunakan model pengelolaan data seperti pada tulisan sebelumnya. Tab-tab RSS feed pada halaman ini akan ditampilkan berdasarkan data status aktif-nya […]

  31. Terima kasih Mas sekali lagi buat bantuannya. sudah bisa mas yg tanpa ajax. ^_^
    tetapi masih ada yg kurang sempurna Mas. saat melakukan pencarian misalkan berdasarkan id_pelanggan, paging untuk halaman 2,3 dan seterusnya malah menampilkan hasil secara keseluruhan atau sama dengan jika menampilkan “semua”.
    knp yah Mas? oy mas, jika saya ingin mengexport hasil pencarian ke excel bagaimana yah, bkn dari data di database, tetapi data dari tabel hasil pencarian. terima kasih

    myrna

    8 June 2011 at 09:58

    • iya, utk pagination-nya masih ada yg salah. maaf saya baru menyadarinya, hal ini karena ketika dilakukan pencarian misal: berdasarkan nama pelanggan yang mengandung huruf ‘n’, awalnya hasil query telah sesuai tetapi tombol pd pagination belum disesuaikan dengan pencarian tersebut. ada perubahan yg saya lakukan pd file page_data.php dan pagination_class.php. perubahan tersebut bisa diambil dari link yg sama.

      untuk meng-export hasil pencarian ke excel, mungkin bisa di-search terlebih dahulu fungsi/contoh kode utk melakukannya. apabila ingin meng-export data sesuai kriteria pencarian saja, manfaatkan ‘query sql’ yg digunakan utk pencarian tsb (bisa dilihat pd file page_data.php).

      dearsa

      11 June 2011 at 08:54

  32. makasih Mas buat tutorialnya yang bagus banget ^_^

    saya sudah bisa menggunakan yg dengan jquery dan ajax :D

    jika ada yg masih kurang sempurna. boleh kan saya Mas lagi? makasih yah Mas..

    myrna

    9 June 2011 at 16:18

  33. Mas mau tanya, jika saya mau menambahkan jenis kelamin (wanita/laki2) dengan menggunakan radio button/checkbox/dropdown untuk penambahan data pelanggan. apa bisa Mas memberi contohnya masing2 mas? makasih

    myrna

    17 June 2011 at 16:25

    • sebenarnya untuk menambahkan data input jenis kelamin menggunakan dropdown, pernah dibahas pada komentar-komentar sebelumnya. untuk radio button penggunaannya hampir sama. perubahan dilakukan pada file “formpelanggan.php”, pastikan telah disediakan field pada database untuk penyimpanan data jenis kelamin, bisa dengan membuatnya bertipe enum(MySQL) : `jns_kelamin` enum(‘L’,’P’). berikut perubahan yg dilakukan.

      – menggunakan dropdown

      <?php if ($action == "add"){?>
        <tr><td>Jenis Kelamin</td><td><select id="jnskelamin" name="jnskelamin">
          <option value="L" selected>L (Laki-laki)</option>
          <option value="P">P (Perempuan)</option>
        </td></tr>
      <?php }
      elseif ($action == "update"){
      ?>
        <tr><td>Jenis Kelamin</td><td><select id="jnskelamin" name="jnskelamin">
        <?php if ($jnskelamin == "L"){ ?>
            <option value="L" selected>L (Laki-laki)</option>
            <option value="P">P (Perempuan)</option>
        <?php }
        elseif ($jnskelamin == "P"){ ?>
            <option value="L">L (Laki-laki)</option>
            <option value="P" selected>P (Perempuan)</option>
        <?php } ?>
        </select></td></tr>
      <?php 
      } ?>
      

      – menggunakan radio button

      <?php
      if ($action == "update"){
        if ($jnskelamin == "L"){ ?> 
            <tr><td>Jenis Kelamin</td><td> : <input type="radio" name="jnskelamin" value="L" checked>L (Laki-laki) 
            <input type="radio" name="jnskelamin" value="P"> P (Perempuan)</td></tr> 
        <?php }
        else{ ?>
            <tr><td>Jenis Kelamin</td><td> : <input type="radio" name="jnskelamin" value="L">L (Laki-laki) 
            <input type="radio" name="jnskelamin" value="P" checked> P (Perempuan)</td></tr>
        <?php }
      }else{ ?>
        <tr><td>Jenis Kelamin</td><td> : <input type="radio" name="jnskelamin" value="L" checked>L (Laki-laki) 
        <input type="radio" name="jnskelamin" value="P"> P (Perempuan)</td></tr>
      <?php } ?>
      

      variabel “$jnskelamin” merupakan variabel penampung data “jenis kelamin” hasil dari query database sebelumnya. selanjutnya, perlu juga dilakukan penyesuaian pada file “proses_data.php” untuk “insert/add” dan “update”. :grin:

      dearsa

      22 June 2011 at 07:42

  34. mas makasih banget tutorialnya

    tapi kok pas tak jalanin dah bisa semua tapi waktu tambah pelanggan kok ada error gini

    Notice: Undefined index: action in C:\xampp\htdocs\ajax-aeds\formpelanggan.php on line 101

    n471bgaara

    21 June 2011 at 03:31

    • Hal ini terjadi karena beberapa hal, yaitu:
      – setting pada file ‘php.ini’ untuk error_reporting = E_ALL & E_NOTICE sedangkan pada tempat saya, sepertinya ketika menginstall xampp (versi yg saya gunakan xampp 1.7.1) secara default menggunakan error_reporting = E_ALL & ~E_NOTICE. Jadi ‘notice’ ditampilkan karena setting untuk error_reporting-nya tersebut.

      – karena hal tersebut saya jadinya tidak memperhatikan jika terjadi kesalahan, yakni ketika melakukan tambah data pelanggan ($action = “add”), ada variabel yg belum di-set dan juga definisikan di awal padahal digunakan dibawahnya. sebenarnya, apabila pada error_reporting notice diabaikan aplikasi tetap bisa berjalan normal. untuk itu source code sudah saya sesuaikan dan dapat diambil pd link yg sama.

      terima kasih, semoga membantu.. :grin:

      dearsa

      21 June 2011 at 23:44

  35. Waw..!!! mantap…!!!
    Menurut saya sih, ini udah ga simple lagi… kompleks tapi sangat efektif, apalagi untuk web based application…

    Nyoba dulu ah…
    Thanks tutorialnya…

    Endi

    23 June 2011 at 13:07

    • saya udah nyobain nih…
      tapi ada beberapa masalah:
      1. Saya tidak bisa melakukan penambahan dan perubahan data. Pada saat saya tekan button tambah atau edit, formnya bisa keluar, tapi pada saat saya menekan button tambah/update pada form tersebut, yang keluar malah alert yang isinya:
      Error tidak diketahui:
      (semua isi file dari page_data.php)
      bahkan datanya pun tidak masuk ke database.
      2. Pada saat saya tekan link delete, terdapat error:
      undefined index: action
      undefined index: idpelanggan (dalam kasus ini)
      tetapi data tersebut berhasil dihapus…
      Mohon pencerahannya, terimakasih

      Endi

      24 June 2011 at 02:42

      • oya mas, permasalahan ini sepertinya mirip dengan permasalahan pd komentar sebelumnya. hal ini terjadi karena setting pd file ‘php.ini’ yg saya gunakan tidak menampilkan ‘notice’ atau pd php.ini: error_reporting = E_ALL & ~E_NOTICE. apabila ‘notice’ diaktifkan dan aplikasi ini dijalankan maka ‘notice’ akan muncul karena ada beberapa variabel yg saya gunakan belum saya set sebelumnya. sebenarnya apabila setting pd php.ini utk ‘notice’ tidak ditampilkan, aplikasi dapat berjalan dgn normal. untuk itu source code sudah saya sesuaikan dan dapat diambil pada link yang sama.

        dearsa

        24 June 2011 at 14:16

  36. Udah saya coba mas… berhasil…
    Makasih ya…
    Maaf kalo pertanyaannya diulang… kurang ngeh soalnya… :D
    baru ngerti begitu liat kodenya…

    Endi

    25 June 2011 at 01:19

    • iya mas sama2, gpp mas.. semoga bermanfaat.. :grin:

      dearsa

      26 June 2011 at 09:20

  37. terima kasih tutorialnya mas. sngat membantu bagi yang mau belajar ajax dari membangun aplikasi sederhana.salam

    anton hilman

    1 July 2011 at 10:18

    • iya mas, sama2. terima kasih. semoga bisa bermanfaat. :grin:

      dearsa

      8 July 2011 at 09:03

  38. mas, saya uda coba code yang diatas tapi swaktu mau nambah pelanggannya ada errornya.., apa karena saya make xampp versi 1.7.4 ato nggak y..??

    errornya ini mas…–> PARSING JSON Request failed

    tolong bgt ya mas.., thank u..:3

    weli

    2 July 2011 at 01:28

    • oh, maaf.., yg punya mas uda bisa.., tpi saya mau ubah databasenya ttp ada error yang sama kya diatas.,
      jadi klo mau ubah databasenya apa2 aj yg hrus diubah ya mas..??
      help me mas.., thank u..:)

      weli

      2 July 2011 at 08:48

      • apabila akan melakukan perubahan database, seperti penambahan field pd tabel ataupun lainnya perlu diperhatikan beberapa file berikut.
        – pelanggan.js : merupakan file berisi code javascript-jquery untuk me-load data awal dari database dan search data dgn mekanisme ajax yg berhubungan dgn file page_data.php
        – page_data.php : merupakan file tempat pemrosesan request ajax untuk search dan penampilan data awal. bagian ini berisi query sql yg bisa disesuaikan
        – formpelanggan.php : merupakan file untuk menampilkan form yg kaitannya dgn input dan update data. bagian ini terdapat query sql yg bisa disesuaikan
        – proses_data.php : merupakan file tempat pemrosesan request ajax untuk insert, update dan delete data. terdapat pula query sql yg bisa disesuaikan

        dearsa

        8 July 2011 at 09:28

  39. Mas.. Jika ingin mengubah ID nya dari P0001 menjadi 0001. Apa sajakah yg musti di ubah pada sintax nya? saya sudah mencoba beberapa kali, tetapi tidak bs.
    Mohon pencerahannya Mas. Thx..

    myrna

    4 July 2011 at 10:29

    • maaf sebelumnya, akhir-akhir ini saya jarang OL. untuk melakukan perubahan ID dari P0001 menjadi 0001 dapat dilakukan perubahan pada function buatID. berikut ini perubahan yg saya lakukan. perubahan ini menghasilkan ID menjadi ‘00001’ karena awalan ‘P’ dihilangkan. Adapun perubahan yg dilakukan dapat diperhatikan pd bagian yg di-highlight.

      //fungsi untuk men-generate ID pelanggan 
      function buatID($tabel){ //parameter input $inisial tidak digunakan lagi, hanya digunakan 1 parameter input yakni nama tabel
      	$qry = mssql_query("select * from $tabel") or die("eksekusi query gagal!"); 
      	$struktur = mssql_query("SELECT column_name,character_maximum_length FROM INFORMATION_SCHEMA.Columns WHERE TABLE_NAME = '$tabel' AND ordinal_position = 1") or die("eksekusi query gagal!");
      	$row = mssql_fetch_array($struktur);
      
      	$field = $row['column_name']; //mendapatkan nama kolom
      	$panjang = $row['character_maximum_length']; //mendapatkan jumlah panjang karakter maks dari kolom tsb.
      	$row = mssql_num_rows($qry);
      
      	//$panjanginisial = strlen($inisial); //panjang karakter inisial tidak digunakan
      	$awal = 1; 
      	//$bnyk = $panjang-$panjanginisial; 
      	$bnyk = $panjang; //panjang karakter yg digunakan sesuai ukuran kolom, misal varchar(5) berarti panjang karakter maks = 5 yg digunakan.
      		
      	if ($row >= 1){ //berarti sudah ada data di tabel database tsb
      	  //untuk mendapatkan ID yg terakhir -- max berarti ID yg paling besar misal: '00005'
      	  $query = mssql_query("select max(substring($field,$awal,$bnyk)) as max from $tabel") or die("eksekusi query gagal!");
      	  $hasil = mssql_fetch_array($query);
      	  $angka = intval($hasil['max']); // diubah ke bentuk integer menjadi '5'
      	}
      	else{ //berarti data tabel masih kosong
      	  $angka = 0;
      	}
      
      	$angka++; //increment +1
      	$tmp= "";
      	//untuk menentukan jumlah '0' yg akan menjadi awalan
      	for ($i=0; $i < ($panjang-strlen($angka)) ; $i++){
      	  $tmp = $tmp."0";
      	}
      	//return hasil generate ID
      	return strval($tmp.$angka);
      }
      

      dearsa

      8 July 2011 at 08:37

      • Gpp Mas..
        makasih Mas. Sudah saya coba barusan dan berhasil. ^_^
        semoga kebaikan Mas dibalas oleh Tuhan. Amin..
        makasih sekali lagi Mas.

        Ditunggu tutorial2 selanjutnya yah Mas.

        myrna

        8 July 2011 at 09:41

  40. mas kalau di mysql kan ada mysql_real_escape_string untuk special karakter ‘ (kutib satu).

    jika di sql server menggunakan apa?

    myrna

    14 July 2011 at 09:44

  41. mas pada saat saya tambah muncul PARSING JSON Request failed , tp pas pertama di coba bs ketambah tp saelanjtnya muncul sperti itu mas …
    mohon bantuan nya mas …
    buat tugas ne massss …..

    dika

    20 July 2011 at 21:28

    • mungkin bisa dianalisa error tsb terlebih dahulu dgn bantuan add-ons firebug..

      dearsa

      20 July 2011 at 23:12

  42. Mas, jika mau ditambahkan autocomplete, di bagian mana saja yg musti di ubah?

    Misalkan ada input text kode barang. jika kita mengisikan kode nya 11, maka akan muncul autocomplete nya. jika mengisikan kode 12, maka muncul autocomplete yg lain.

    myrna

    25 July 2011 at 13:05

  43. test

    ari

    25 July 2011 at 20:04

  44. Mas, bagaimana menambahkan autocomplete pada script mas?

    myrna

    12 September 2011 at 11:07

  45. Maaf mas mau tanya, koq waktu saya import database yang sudah saya modifikasi di tabel login nya dengan menambahkan 1 user lagi untuk data login ( jadi ada 2 user dalam database ) , namun muncul error yg menyatakan table tidak bisa menginput data username ke-2 itu , padahal format dengan username ke-1 sudah sama persis, hanya beda nama, dan password saja.
    Mohon bantuannya

    Robertus Ariandi Setya Putra

    16 September 2011 at 06:30

    • maaf mas bru dijawab pertanyaannya. untuk permasalahan tsb seharusnya bisa mas, mngkn diperhatikan lagi klo field ‘user_name’ adalah ‘primary key’ shg data untuk field tsb harus unik.

      dearsa

      21 October 2011 at 20:28

  46. Tutorial agan mantab banget dah, sangat membantu saya yg masih noobie.. thanks gan. rajin update ya gan ane sering maen kesini dah, Bookmark

    kiki

    16 September 2011 at 15:58

    • iya sama2 kita belajar, sy jg masih nubie.. terima kasih sdh berkunjung..

      dearsa

      21 October 2011 at 20:33

  47. artikelnya sangat menarik mas,

    cuma ada sedikit masalah nie mas, waktu aku tambah atau update sering muncul pesan ini
    “Error.
    Parsing JSON Request failed!”;

    mohon bantuannya, terima kasih

    andri r

    29 September 2011 at 06:44

    • maaf bgt mas baru saya jawab, soalnya lama bgt ga buka nie blog. hehe. :grin: apabila dri contoh source code tsb dimodifikasi, perlu memperhatikan bagian yg melakukan request ajax ke file proses_data.php. misalnya ketika melakukan penambahan data, saat data disimpan maka isi form (form_pelanggan.php) akan diproses pada file proses_data.php dimana respon balasan yg dikirimkan dalam bentuk ‘json’ . Nah dari sini bisa diperhatikan lagi apakah respon balasan tsb bisa diterima/diproses dgn baik pada bagian yg me-request. mas andri jg bisa memanfaatkan addons ‘firebug’ pd firefox untuk mengecek request ajax yg terjadi.

      dearsa

      21 October 2011 at 20:22

  48. mantaappp…
    terimakasih

    ridaadj

    7 October 2011 at 13:32

  49. […] feed yang ada dalam aplikasi ini dibuat menggunakan model pengelolaan data seperti pada tulisan sebelumnya. Tab-tab RSS feed pada halaman ini akan ditampilkan berdasarkan data status aktif-nya (‘Y’ […]

  50. Klo search, setelah di klik hal yang kedua masih jadi tampil semua ya?

    andi

    19 October 2011 at 11:02

    • oya mas, setelah sy cek ternyata benar seperti itu. hal itu karena kesalahan ketik pada file page_data.php bagian function pagination, sperti di bawah ini.

      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);
      		}
        });
      }
      

      yg diketik namapelangan seharusnya namapelanggan. :grin:

      dearsa

      21 October 2011 at 20:04

  51. Mas maas saya bingung nie.. saya merubah tabelnya dengan tabel kelas yang berisi kd_kelas dan nama_kelas..
    setelah melakukan beberapa modifikasi. ada beberapa masalah
    1) – saat diklik tambah, muncul dengan baik
    – hanya saja saat disimpan daanya tidak masuk ke tabelnya tanpa ada pemberitahuan apapun

    2) – edit , saat edit di klik meuncul data dalam tbel dengan baik
    – hanya saja saat updatenya diklik datanya tidak berubah

    3) hapus berjalan dengan baik

    mohon pencerahannya ya mas.. terima kasih benar2 tutorial yang membantu :)

    fahrizalterifahrizal

    23 October 2011 at 09:17

    • sebelumnya dlm melakukan simpan, update maupun hapus digunakan mekanisme ajax. data dari formpelanggan ketika disubmit diproses pd file proses_data.php. bisa diperhatikan lagi modifikasi yg dilakukan pd file2 tsb. untuk membantu menganalisa mekanisme ajax yg terjadi, apabila mas menggunakan firefox atau chrome bisa memanfaatkan addons ‘firebug’. setelah firebug di-install: aktifkan firebug kemudian ‘enabled’ bagian ‘Console’ pstikan ‘Show XMLHttpRequest’ tlh tercentang. setiap mekanisme ajax yg terjadi dpt diperhatikan pd console tsb.

      dearsa

      26 October 2011 at 21:39

      • wah mas @dearsa terima kasih untuk masukannya.. Alhamdulillah sudah bisa ;) … senangnya.. oh iya mas kalau untuk hasil dari proses carinya itu bisa diexport ke excel berdasarkan hasilnya saja gak Mas???

        Saya bingung.. export to excel saya hanya menampilkan semua data di databasenya bukan dari hasil carinya.. terima kasih ya mas @dearsa.. benar2 tutorial yang bermanfaat ^^

        fahrizalteri

        27 October 2011 at 09:21

      • apabila mas ingin menampilkan data berdasarkan hasil carinya saja, itu bisa. menurut saya, perlu sebuah ‘button’ ato mungkin yg sdh mas buat sebelumnya serta sebuah file php (misal exportexcel.php) ato bisa dijadikan satu pd file proses-data.php utk proses export ke excel tsb. nah ketika memilih kriteria pencarian dan button cari diklik (utk search data) dimana hasil ditemukan maka button untuk export tsb akan aktif, ketika diclick (buat code utk menangani event click tsb) selanjutnya akan mengirimkan data kriteria pencarian tadi utk diproses pd file misal exportexcel.php. smoga membantu.. :grin:

        dearsa

        31 October 2011 at 21:31

  52. oh iya untuk carinya juga belum bisa berjalan padahal sudah dirubah berdasarkan kd_kelas dan nama_kelas

    fahrizalterifahrizal

    23 October 2011 at 09:18

    • pencarian data akan diproses pd file proses_data.php dan ditampilkan hasilnya dlm bentuk tabel. perhatikan pula function loadData pd file: pelanggan.js, proses_data.php, dan formpelanggan.php, pastikan input pencarian (data yg dicari) tsb bisa diproses pd file proses_data.php. dlm file tsb terdapat query ke database berdasarkan input pencarian yg diberikan.

      dearsa

      26 October 2011 at 21:59

  53. mas maaf saya bingung.. saya telah merubah tabelnya dan ternyata berhasil

    hanya saja saat melakukan proses tambah saat yang pertama itu sukses,, dan saat penambahan data yang kedua muncul “Parsing JSON Request failed” kenapa ya mas??? apa karena daabasenya atau kenapa???

    tery

    23 October 2011 at 11:26

  54. klo misalny saya tambahin ada tangal gitu, trus cara bikin funsi search dengan ada range tanggalny
    ex:
    ID PELANGGAN | NAMA PELANGGAN | NO HP | TANGGAL DAFTAR

    jadi misalny mau di search tanggal berdasarkan range gmn ya ( tanggal 25-10-2011 sampai dengan 26-10-2011)

    andre

    25 October 2011 at 11:50

    • untuk pencarian berdasarkan range tanggal, mas bisa memodifikasi code utk search yg ada. tambahkan dua input untuk memasukkan tgl awal dan tgl akhir dari pencarian. nah, pemorosesan pencarian data ada pd file page_data.php, pd file tsb, bisa ditambahkan query untuk pencarian dgn kriteria range tanggal, misal:
      select * from pelanggan where tgl_daftar between ‘2011-10-25′ and ‘2011-10-26′. smoga membantu.. :grin:

      dearsa

      31 October 2011 at 21:38

  55. mantap banget ni aplikasi crud data nya mas, , ,

    semoga mas makin kreatif lagi dalam bikin coding dan dishare buat kami semua yang baru-baru belajar dalam pemrograman web

    mas mau nanya, apa keuntungan kalau kita parsing data ke JSon terlebih dahulu daripada data langsung yang dari mysql kita gunakan untuk crud data. terimakasih

    mrrens

    25 October 2011 at 12:19

    • iya mas, kita sama2 belajar. sebenarnya dalam contoh aplikasi crud tsb data dari form ketika submit dikirim melalui mekanisme ajax dgn method HTTP GET ato POST, tergantung mana yg digunakan. sedangkan format json (dataType) digunakan untuk menerima respon balasan berupa status dri proses yg dilakukan pd file proses_data.php. utk lebih lengkap ttg jQuery.ajax() bisa merujuk ke link ini. penggunaan format json utk respon balasan, menurut saya lebih simple.

      dearsa

      26 October 2011 at 22:27

      • iya mas, kan saya ada baca tutorial jadi di tutorial itu data yang dari database mysql di parsing ke Json terlebih dahulu menggunakan php, baru setelah itu di tampilkan datanya, itu menurut mas gimana ya ? apa manfaat nya ?
        terimakasih

        mrrens

        27 October 2011 at 13:03

      • json (JavaScript Object Notation) merupakan format pertukaran data yg digunakan antara client dan server, mirip seperti xml. menurut saya parsing ke json untuk mempermudah pengiriman data hasil query db mysql ke bagian yg meminta seblmnya. mungkin ini jg bisa untuk meng-enkapsulasi proses query databasenya (tdk langsung mengaksesnya). lebih lengkap mengenai json, mungkin mas bisa membaca tulisan pd link ini. smoga membantu.. :grin:

        dearsa

        31 October 2011 at 21:56

  56. mas gimana ya caranya agar data yang di tampilkan di table cuman sebagian terus kita buat link untuk view datanya untuk menampilkan data secara keseluruhan ?

    rens

    26 October 2011 at 09:11

    • utk tampilan data bisa dimodifikasi pd file page_data.php dan pagination_class.php. jumlah data yg mau ditampilkan jg dpt dibatasi melalui query database.

      dearsa

      26 October 2011 at 22:09

  57. mas saya minta tolong bantuanya ya, gini script upload image mas telah saya edit dan saya sesuaikan dengan aplikasi yang sedang saya bangun, ,

    jadi ini adalah tempat menyimpan image tsb ../../imgupload/$namafoto, setelah proses simpan dklik, image berhasil disimpan, tetapi ada pesan kesalahan seperti ini Permintaan URL tidak ditemukan!

    kira2 penyebabnya apa ya mas,

    pada saat saya edit juga image tidak mau tampil mas knp ya ? padahal imageny ada pada folder ../../imgupload/$namafoto

    mrrens

    31 October 2011 at 10:53

    • iya mas saya jg kdng mengalami hal yg sama, biasanya hal ini terjadi karena ada kesalahan di code saat permintaan diproses pd file proses_data.php. kesalahan penulisan lokasi utk folder penyimpanan file upload jg menyebabkan hal tersebut, selain itu bisa jg krn kesalahan pengetikan code, kesalahan query saat save atau update data.
      misal utk folder penyimpanan file upload: “htdocs\webku\modul\pelanggan\imgupload” dan file “proses_data.php” ada di folder “pelanggan” maka:
      $simpan = “imgupload/$namafoto”;
      sedangkan ketika edit, jika lokasi file upload seperti di atas maka: img src-nya
      selain itu pastikan folder imgupload bersifat ‘server writable’.
      mungkin bisa dicek dan dicoba2 lagi mas.. :grin:

      dearsa

      31 October 2011 at 21:12


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: