Insert, Update dan Delete dengan PHP dan AJAX

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Seperti yang telah kita sama-sama ketahui, dengan teknologi ajax memungkinkan kita untuk melakukan pemrosesan data pada halaman website tanpa perlu reload halaman. ini tentu sangat menguntungkan kita karena aplikasi yang kita bangun tidak bergantung sepenuhnya pada server maka proses loading halaman pun akan menjadi semakin ringan. :)

Berikut saya sharing bagaimana membuat proses insert, update dan delete data pada database dengan menggunakan AJAX yang disandingkan dengan server side scripting yaitu PHP yang saya ambil dari ebook tutorial PHP Ajax JQuery milik mas desrizal (coding wear).

1. Pertama-tama kita perlu membuat sebuah database yang memiliki minimal sebuah tabel. adapun contoh tabel yang yang ada didatabase saya seperti gambar berikut

Insert, Update dan Delete dengan PHP dan Ajax

2. Kedua, disini kita membutuhkan JQuery agar ajax bisa berjalan dengan baik, silahkan download disini. simpan didalam folder projek anda

3. Ketiga, Membuat sebuah halaman input yang akan kita gunakan untuk melakukan proses input update dan delete seperti berikut ini. Simpan dengan nama index.html didalam folder projek anda
<html> 
<head><title>Ajax CRUD</title> 
</head> 
  <body> 
   Nomor Induk Karyawan : <select id="nik"></select> 
  <br> 
  <!-- Link Tambah Data -->
  <a id="formtambah" style="cursor:pointer;color:red"><u>Tambah Data Karyawan</u></a> 
  <!-- Field NIK -->
  <p style="display:none" id="formnik">NIK :<br><input type="text" id="nik2"></p> 
  <p> Nama :<br> <input type="text" id="nama">
  <p> Email :<br> <input type="text" id="email">
  <p> Alamat :<br><input type="text" id="alamat" size="30"><p> 
  
  <button id="ttambah">Simpan</button> 
  <button id="tupdate">Update</button> 
  <button id="tdelete">Delete</button> 
  
  <br>
  <!-- Status Proses -->
  <span id="status"></span> 
  </body> 
</html>
4. Berikutnya adalah membuat file proses.js yang akan melakukan pemrosesan data pada database dengan contoh script seperti berikut ini. Simpan didalam folder projek anda.
var nik; 
var nik; 
var nama; 
var email; 
var alamat; 
var datanya; 
$(document).ready(function(){ 
    //meloading option NIK dari database 
    $("#nik").load("proses.php","op=ambiloption"); 
     
    //jika ada event onchange ambil data dari database 
    $("#nik").change(function(){ 
        //ambil nilai nik dari form 
        nik = $("#nik").val(); 
         
        //lakukan pengiriman dan pengambilan data 
        $.ajax({ 
        url: "proses.php", 
        data: "op=ambildata&nik="+nik, 
        cache: false, 
        success: function(msg){ 
            //karna di server pembatas setiap data adalah | 
            //maka kita split dan akan membentuk array 
            data = msg.split("|"); 
             
            //masukkan ke masing-masing textfield
   $("#nama").val(data[0]); 
            $("#email").val(data[1]); 
            $("#alamat").val(data[2]); 
        } 
        }); 
    }); 
     
 
    //jika tombol update diclick 
    $("#tupdate").click(function(){ 
        //ambil nilai-nilai dari masing-masing input 
        nik = $("#nik").val(); 
        if(nik=="Pilih NIK"){ 
            alert("Pilih dulu NIK"); 
            exit(); 
        } 
        nama = $("#nama").val(); 
        email = $("#email").val(); 
        alamat = $("#alamat").val(); 
        datanya = "&nik="+nik+"&nama="+nama+"&email="+email; 
        datanya = datanya+"&alamat="+alamat; 
        $.ajax({ 
        url: "proses.php", 
        data: "op=update"+datanya, 
        cache: false, 
        success: function(msg){ 
            if(msg=="sukses"){ 
                $("#status").html("Update Berhasil..."); 
            }else{ 
                $("#status").html("ERROR.."); 
            } 
        } 
        }); 
    }); 
     
    //jika tombol Delete diklik 
    $("#tdelete").click(function(){ 
        nik = $("#nik").val(); 
        if(nik=="Pilih NIK"){ 
            alert("Pilih dulu NIK"); 
            exit(); 
        } 
        $.ajax({ 
        url: "proses.php", 
        data: "op=delete&nik="+nik, 
        cache: false, 
  success: function(msg){ 
            if(msg=="sukses"){ 
                $("#status").html("Delete Berhasil..."); 
            }else{ 
                $("#status").html("ERROR.."); 
            } 
            $("#nama").val(""); 
            $("#email").val(""); 
            $("#alamat").val(""); 
            $("#loading").hide(); 
            $("#nik").load("proses.php","op=ambiloption"); 
        } 
        }); 
    }); 
     
    //jika link Tambah Data Karyawan diklik 
    $("#formtambah").click(function(){ 
        $("#formnik").show(); 
        $("#nik2").val(""); 
        $("#nama").val(""); 
        $("#email").val(""); 
        $("#alamat").val(""); 
    }); 
     
    //jika tombol Simpan diklik 
    $("#ttambah").click(function(){ 
        //ambil nilai-nilai dari masing-masing input 
        nik = $("#nik2").val(); 
        if(nik==""){ 
            alert("NIK belum diisi\nKlik Tambah Data Karyawan"); 
            exit(); 
        } 
        nama = $("#nama").val(); 
        email = $("#email").val(); 
        alamat = $("#alamat").val(); 
        datanya = "&nik="+nik+"&nama="+nama+"&email="+email; 
        datanya = datanya+"&alamat="+alamat; 
        $.ajax({ 
        url: "proses.php", 
        data: "op=tambah"+datanya, 
        cache: false, 
        success: function(msg){ 
            if(msg=="sukses"){ 
                $("#status").html("Berhasil ditambah..."); 
            }else{ 
                $("#status").html("ERROR.."); 
            } 
            $("#loading").hide(); 
            $("#nik").load("proses.php","op=ambiloption"); 
            $("#formnik").hide(); 
            $("#nik2").val(""); 
        }
  }); 
    }); 
}); 
5. Agar Script proses.js yang telah kita buat sebelumnya dapat berkomunikasi dengan database kita perlu membuat sebuah script php dimana nantinya script inilah yang akan berkomunikasi dengan script proses.js tersebut. adapun contoh script proses.php adalah sebagai berikut. simpan didalam folder projek anda
<?php 
mysql_connect("localhost","root","root"); 
mysql_select_db("ajax"); 
 
$op = $_GET['op']; 
 
if($op == "ambiloption"){ 
    $option = mysql_query("SELECT nik FROM datakaryawan"); 
    echo "<option>Pilih NIK</option>\n"; 
    while($op = mysql_fetch_array($option)){ 
        echo "<option>".$op['nik']."</option>\n"; 
    } 
 
}else if($op == "ambildata"){ 
    $nik = $_GET['nik']; 
    $data = mysql_query("SELECT * FROM datakaryawan WHERE nik='$nik'"); 
    $d = mysql_fetch_array($data); 
    echo $d['nama']."|".$d['email']."|".$d['alamat']; 
 }else if($op == "update"){ 
    $nik = $_GET['nik']; 
    $nama = htmlspecialchars($_GET['nama']); 
    $email = htmlspecialchars($_GET['email']); 
    $alamat = htmlspecialchars($_GET['alamat']); 
    $update = mysql_query("UPDATE datakaryawan 
        SET nama='$nama', 
        email='$email', 
        alamat='$alamat' 
        WHERE nik='$nik'"); 
    if($update){ 
        echo "sukses"; 
    }else{ 
        echo "error"; 
    } 
 
}else if($op == "delete"){ 
    $nik = $_GET['nik']; 
    $del = mysql_query("DELETE FROM datakaryawan WHERE nik='$nik'"); 
    if($del){ 
        echo "sukses"; 
    }else{ 
        echo "error"; 
    } 
}else if($op == "tambah"){ 
    $nik = $_GET['nik']; 
    $nama = htmlspecialchars($_GET['nama']); 
    $email = htmlspecialchars($_GET['email']); 
    $alamat = htmlspecialchars($_GET['alamat']); 
    $tambah = mysql_query("INSERT INTO datakaryawan 
        VALUES('$nik','$nama','$email','$alamat')"); 
    if($tambah){ 
        echo "sukses"; 
    }else{ 
        echo "ERROR"; 
    } 
}
?>
6. Langkah terakhir adalah menyisipkan file proses.js dan jquery.js yang telah didownload pada step 2 kedalam file index.html seperti berikut
<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="proses.js"></script>
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.