Pages

Tuesday, May 12, 2015

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 :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.
1
2
3
4
5
6
7
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.
1
2
3
4
5
6
7
8
9
<?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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**********************************/
/* 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
$(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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<?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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?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.

Sumber  :  https://dearsa.wordpress.com

, ,
Next
Prev Post
Previous
Next Post
Tiketpesawat

About Tiketpesawat

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

2 comments:
Write comments
  1. BloggerSeptember 15, 2016 at 11:47 PM

    Are you trying to earn cash from your visitors with popunder advertisments?
    In case you do, have you considered using PopCash?

    ReplyDelete
  2. Blog27999March 14, 2020 at 4:11 PM

    Okay...

    What I'm going to tell you may sound a little weird, maybe even a little "out there..."

    HOW would you like it if you could simply push "PLAY" and listen to a short, "magical tone"...

    And miraculously attract MORE MONEY into your life?

    And I'm really talking about hundreds... even thousands of dollars!!

    Sound too EASY? Think it couldn't possibly be REAL?

    Well, Let me tell you the news..

    Many times the greatest blessings in life are also the SIMPLEST!!

    Honestly, I will PROVE it to you by allowing you to PLAY a real-life "miracle money-magnet tone" I developed...

    And TOTALLY FOR FREE

    You simply hit "PLAY" and watch as your abundance angels fly into your life. starting so fast, you will be surprised.

    CLICK here to enjoy the mysterious "Miracle Wealth Building Sound Frequency" - as my gift to you!!

    ReplyDelete

Subscribe to Newsletter

Popular Posts

© Copyright 2015 VISIT TUTORIAL . Designed by Bloggertheme9. Powered by Blogger.