Cara Membuat Crud Di PHP Dengan AJAX

kemarin saya sudah membahas tentang Cara Membuat Crud Di PHP sekarang saya akan membahas cara crud di PHP dengan menggunakan AJAX, istilah dari AJAX sendiri yaitu singkatan dari Asynchronous JavaScript dan XML, dengan metode AJAX kita akan membuat request ke server secara asynchronous atau tanpa melakukan refresh halaman. jadi semua proses akan berjalan di balakang atau lebih sering dikenal dengan server-side. Agar lebih mudah kita menggunakan plugin dari jQuery silakan download disini atau bisa juga menyalin kode berikut.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Untuk response dari servernya sendiri saya menggunakan format JSON, jika anda masih bingung atau bertanya-tanya apa itu format JSON saya sarankan untuk membaca artikel Pengertian JSON, Cara Menggunakan JSON Di Javascript dan Cara Menggunakan JSON Di PHP
pertama yang saya lakukaan adalah menentukan file dan fungsinya terlebih dahulu, di pembahasan ini saya membuat 3 file dengan nama dan fungsi sebagai berikut :
1. koneksi.php mengkoneksikan ke database agar data yang di input bisa masuk ke database
2. index.php menampilkan semua data yang telah di input, menampilkan form input dan edit, selain itu juga menampilkan view dari suatu data
3. aksi.php ini adalah file inti karena di dalamnya terdapat proses dari tambah, edit dan hapus

1. Pertama anda harus membuat database terlebih daluhu, jika sudah, buat table users di dalam database yang anda buat silahkan salin kode berikut

DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(25) DEFAULT NULL,
  `alamat` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

2. Buat folder project di htdocs dengan nama bebas terserah ada, misalnya saya membuat folder dengan nama crud-ajax, seletah itu buat file dengan nama koneksi.php kemudian salin kode berikut

<?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  $db = 'belajar_crud';

  $conn = mysql_connect($host, $user, $pass);
  mysql_select_db($db, $conn);

Keterangan :
- Ganti isi dari $user, $pass dan $db sesuai dengan username, password dan database anda.
3. Buat file dengan nama index.php dan simpan file di dalam folder project yang tadi di buat, kemudian salin kode berikut.

<?php
 // memanggil koneksi
 require_once __DIR__.'/koneksi.php';

 $sql = 'SELECT * FROM users';
 $rs = mysql_query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD DI PHP DENGAN AJAX</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
body { font-family: verdana; font-size: 13px; }
input, textarea, button { padding: 5px; }
button { cursor: pointer; }
.container { margin: auto; width: 800px; }
.container .content-form { display: none; }
.container .content-view { display: none; }
.container .table thead tr th { padding: 7px 10px; background-color: #EBEBEB; }
.container .table tbody tr td { padding: 7px 10px; border-bottom: 1px solid #DDDDDD; }
.close-form { float: right; margin-right: 5px; cursor: pointer; }
</style>
</head>
<body>
<div class="container">
 <h2>CRUD DI PHP DENGAN AJAX</h2>
 <hr />

 <!-- FORM UNTUK INPUT ATAU MENAMPILKAN HASIL EDIT -->
 <div class="content-form">
 <hr />
 <span class="title">FORM ENTRI</span>
 <span class="close-form">X</span>
 <hr />
 <form method="POST" class="form" action="index.php">
  <table>
   <tbody>
   <tr>
   <td width="100">Nama</td>
   <td>: <input type="text" name="nama" id="nama" /></td>
   </tr>
   <tr>
   <td>Alamat</td>
   <td>: <textarea name="alamat" id="alamat"></textarea></td>
   </tr>
   <tr>
   <td colspan="2"><button type="submit" id="button">TAMBAH</button></td>
   </tr>
   </tbody>
  </table>
 </form>
 <hr />
 </div>
 <!-- /FORM UNTUK INPUT ATAU MENAMPILKAN HASIL EDIT -->


 <!-- MENAMPILKAN VIEW -->
 <div class="content-view">
 <hr />
 <span class="title">VIEW</span>
 <span class="close-form">X</span>
 <hr />
 <table>
  <tbody>
  <tr>
   <td width="100">Nama</td>
   <td>: <span class="result-nama"></span></td>
  </tr>
  <tr>
   <td>Alamat</td>
   <td>: <span class="result-alamat"></span></td>
  </tr>
  </tbody>
 </table>
 <hr />
 </div>
 <!-- /MENAMPILKAN VIEW -->

 <a href="#" class="control" data-set="tambah" data-url="aksi.php?set=tambah">Tambah data</a>
 <table class="table" width="100%">
  <thead>
  <tr>
  <th width="50">NO</th>
  <th width="170">NAMA</th>
  <th width="300">ALAMAT</th>
  <th width="160">AKSI</th>
  </tr>
  </thead>
  <tbody>
  <?php
   $i = 1;
   if(mysql_num_rows($rs) > 0){
   while($row = mysql_fetch_array($rs)){
    $id = $row['id'];
    $nama = $row['nama'];
    $alamat = $row['alamat'];
  ?>
  <tr>
  <td align="center"><?php echo $i; ?></td>
  <td><?php echo $nama; ?></td>
  <td><?php echo $alamat; ?></td>
  <td align="center">
  <a href="#" class="control" data-set="lihat" data-nama="<?php echo $nama; ?>" data-alamat="<?php echo $alamat; ?>">lihat</a> | 
  <a href="#" class="control" data-set="edit" data-nama="<?php echo $nama; ?>" data-alamat="<?php echo $alamat; ?>" data-url="aksi.php?set=edit&id=<?php echo $id; ?>">edit</a> | 
  <a href="aksi.php?set=hapus&id=<?php echo $id; ?>" class="hapus">hapus</a>
  </td>
  </tr>
  <?php $i++; }}else{ ?>
  <tr>
  <td colspan="4" align="center">BELUM ADA DATA</td>
  </tr>
  <?php } ?>
  </tbody>
 </table>
</div>
<script type="text/javascript">
$(function(){
 $('.control').on('click', function(){
  // mengambil isi element data-set dari class control untuk mengetahui proses yang akan di lakukan
  $set = $(this).attr('data-set');

  // jika isi set adalah tambah atau edit maka yang di animasi adalam form
  if($set == 'tambah' || $set == 'edit'){
   // mengambil isi element data-url dari class control
   $url = $(this).attr('data-url');

   // buat motion buka tutup
   $('.content-form, .content-view').slideUp('fast');
   setTimeout(function(){ $('.content-form').slideDown('slow') }, 500);

   // ganti isi attribute action pada class form dengan url hasil dari element data-url pada class control
   $('.form').attr('action', $url);

  // tapi jika isi set adalah lihat maka yang di animasi adalah view
  }else if($set == 'lihat'){
   $('.content-form, .content-view').slideUp('fast');
   setTimeout(function(){ $('.content-view').slideDown('slow') }, 500);
  }

  if($set == 'tambah'){
   // kosongkan input, dan textarea
   $('#nama, #alamat').val('');

   // rubah text button pada class form dengan tulisan TAMBAH DATA, dan rubah judul form pada class title
   $('.content-form .title').html('FORM ENTRI');
   $('.form #button').html('TAMBAH DATA');

  }else if($set == 'edit'){
   // ambil isi attribute data-nama dan data-alamat pada class control
   $nama = $(this).attr('data-nama');
   $alamat = $(this).attr('data-alamat');

   // kemudian masukan kedalam input, dan textarea
   $('#nama').val($nama);
   $('#alamat').val($alamat);

   // rubah text button pada class form dengan tulisan SIMPAN, dan rubah judul form pada class title
   $('.content-form .title').html('FORM EDIT');
   $('.form #button').html('SIMPAN');

  }else if($set == 'lihat'){
   // ambil isi attribute data-nama dan data-alamat pada class control
   $nama = $(this).attr('data-nama');
   $alamat = $(this).attr('data-alamat');

   // kemudian tempelkan di class result-nama dan result-alamat;
   $('.content-view .result-nama').html($nama);
   $('.content-view .result-alamat').html($alamat);
  }
 });

 // menutup form atau view
 $('.close-form').on('click', function(){
  $('.content-form, .content-view').slideUp('fast');
 });

 $('.form').on('submit', function(e){
  // ambil semua data yang ada di form dengan serialize()
  $data = $(this).serialize();

  // ambil url yang sudah di rubah pada attribute action
  $url = $(this).attr('action');

  // gunakan ajax untuk mengirim data
  // disini saya manggunakan JSON untuk mendapatkan response nya
  $.ajax({
   'type': 'POST',
   'dataType': 'JSON',
   'data': $data,
   'url': $url,
   'beforeSend': function(){
    // proses sebelum mengirim data
   },
   'success': function(response){
    // proses saat data berhasil di kirim
    if(response.error == false){
     alert(response.pesan);
    }

    // segerkan halaman
    window.location = 'index.php';
   }
  });

  // tahan form agar tidak berpindah halaman
  e.preventDefault();
 });

 $('.hapus').on('click', function(e){
  // ambil isi attribute href pada class hapus
  $url = $(this).attr('href');

  if(confirm('Yakin akan di hapus ? ')){
   $.ajax({
    'type': 'GET',
    'dataType': 'JSON',
    'url': $url,
    'beforeSend': function(){
     // proses sebelum mengirim data
    },
    'success': function(response){
     // proses saat data berhasil di kirim
     if(response.error == false){
      alert(response.pesan);
     }

     // segerkan halaman
     window.location = 'index.php';
    }
   });

   return false;
  }

  e.preventDefault();
 })
});
</script>
</body>
</html>

4. kemudian yang terakhir buat file dengan nama aksi.php, lalu simpan file tersebut di dalam project yang tadi anda buat, silahkan salin kode berikut

<?php
 // memanggil koneksi
 require_once __DIR__.'/koneksi.php';

 // menentukan apakah proses berupa tamnbah, edit atau hapus
 $set = $_GET['set'];

  // proses tambah
 if($set == 'tambah'){
  $nama = $_POST['nama'];
  $alamat = $_POST['alamat'];

  $sql = 'INSERT INTO users SET';
  $sql .= ' nama="'.$nama.'",';
  $sql .= ' alamat="'.$alamat.'"';
  $rs = mysql_query($sql);

  $user_id = mysql_insert_id();

  // untuk response ya saya menggunakan array agar bisa menjadi JSON
  $response = array(
   'error'=>false,
   'pesan'=>'Data berhasil di tambahkan'
  );

  // rubah bentuk array ke format JSON
  echo json_encode($response);

 // proses edit
 }elseif($set == 'edit'){
  $user_id = intval($_GET['id']);
  $nama = $_POST['nama'];
  $alamat = $_POST['alamat'];

  $sql = 'UPDATE users SET';
  $sql .= ' nama="'.$nama.'",';
  $sql .= ' alamat="'.$alamat.'"';
  $sql .= ' WHERE id='.$user_id;
  mysql_query($sql);

  // untuk response ya saya menggunakan array agar bisa menjadi JSON
  $response = array(
   'error'=>false,
   'pesan'=>'Data berhasil di rubah'
  );

  // rubah bentuk array ke format JSON
  echo json_encode($response);

 // proses hapus
 }elseif($set == 'hapus'){
  $user_id = intval($_GET['id']);

  $sql = 'DELETE FROM users';
  $sql .= ' WHERE id='.$user_id;
  mysql_query($sql);

  // untuk response ya saya menggunakan array agar bisa menjadi JSON
  $response = array(
   'error'=>false,
   'pesan'=>'Data berhasil di hapus'
  );

  // rubah bentuk array ke format JSON
  echo json_encode($response);
 }

Keterangan lebih rinci :
baris 119
class control dengan method click, class control sendiri ada pada baris ke 80, 104 dan 105.
setiap class control memiliki attribute data-set yang berbeda, karena setiap control mempunyai fungsi masing-masing
data-set="tambah" menampilkan form dan mengganti isi attribute action form dengan url yang ada di attribute data-url lihat gambar di bawah ini, dan lihat baris ke 133

Cara Membuat Crud Di PHP Dengan AJAX (data created)

ketika button tambah data diklik maka akan mengirimkan data ke server dengan metode server-side lihat gambar berikut

Cara Membuat Crud Di PHP Dengan AJAX (json created)

pada gambar di atas bahwa server telah meresponse data yang dikirim dengan format JSON : {"error":false, "pesan":"Data berhasil di tambahkan"} ketika reponse diterima maka akan muncul pesan di browser, lihat gambar dibawah ini

Cara Membuat Crud Di PHP Dengan AJAX (data created alert)

lalu data-set="edit" yaitu menampilkan form dan mengganti isi attribute action form dengan url yang ada di attribute data-url lihat gambar di bawah ini, dan lihat baris ke 133

Cara Membuat Crud Di PHP Dengan AJAX (data updated)

ketika button simpan diklik maka akan mengirimkan data ke server dengan metode yang sama seperti yang atas yaitu dengan server-side lihat gambar berikut

Cara Membuat Crud Di PHP Dengan AJAX (json updated)

pada gambar di atas bahwa server telah meresponse data yang dikirim dengan format JSON : {"error":false, "pesan":"Data berhasil di rubah"} ketika reponse diterima maka akan muncul pesan di browser, lihat gambar dibawah ini

Cara Membuat Crud Di PHP Dengan AJAX (data updated alert)

kemudian selanjutnya yaitu data-set="lihat" yaitu menampilkan menampilkan data dengan objek yang di pilih, lihat baris ke 136
dan yang terakhir yaitu class="hapus" lihat beris ke 106, class hapus tidak mempunyai data-set, sekarang lihat baris ke 209, disitu class hapus mempunyai method klik, ketika diklik maka akan menampilkan pesan konfirmasi apakah data yakin akan di hapus atau tidak, lihat gambar berikut.

Cara Membuat Crud Di PHP Dengan AJAX (data delete alart)

pada gambar diatas terdapat pilihan OK atau Calcel jika anda pilih Cancel maka proses eksekusi hapus di batalkan sedangkan jika kalau anda pilih OK maka anda akan mendapatkan response dari server dengan format JSON : {"error":false, "pesan":"Data berhasil di hapus"}, lihat gambar di bawah