Kalian yang sudah lama berkecimpung dalam dunia programing akan sangat Familiar dengan CURD atau singkatan dari Create Update Read Delete, ya teknik ini sangat membantu sekali dalam mempercepat loading page karena tidak perlu refresh halaman. Pada artikel ini kita akan membuat Ajax CURD dengan memanfaatkan Framework jquery, CURD yang akan kita buat akan dibuat sedikit berbeda untuk menghemat bandwith yang keluar paling tidak. 

Ok langsung saja kita coba buat :

1. Buat database terlebih dahulu (saya menggunakan sqlite pada artikel ini)

CREATE TABLE "tb_member" (
    "MB_ID" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL , 
    "MB_NAME" VARCHAR(75) NOT NULL , 
    "MB_EMAIL" VARCHAR(100) NOT NULL , 
    "MB_SEX" CHAR(1) NOT NULL  DEFAULT 1, 
    "MB_ADDRESS" VARCHAR(120)
)

2. Buat file dengan nama index.html untuk load awal ajax curd yang akan kita buat

<html> 
    <head> 
        <title>Grid CURD</title> 
        <link href="asset/style.css" rel="stylesheet" type="text/css"/> 
        <script type="text/javascript" src="asset/jquery-1.7.2.min.js"></script>  // jquery framework
        <script type="text/javascript" src="asset/ajaxcurd.js"></script>  //javascript yang kita buat
    </head> 
    <body> 
        <a href="#" id="tambah">Tambah</a> 
        <form action="" method="post" id="frm_input" class="frm_input">  // Form input data
            <table id="tb_form" class="tb_form"> 
                <tr> 
                    <td>Name</td> 
                    <td>:</td> 
                    <td><input type="text" name="name" id="name" class="text_input" /></td> 
                </tr> 
                <tr> 
                    <td>Email</td> 
                    <td>:</td> 
                    <td><input type="text" name="email" id="email" class="text_input" /></td> 
                </tr> 
                <tr> 
                    <td>Gender</td> 
                    <td>:</td> 
                    <td><input type="radio" name="gender" id="gender" value="1" checked="checked" /> Man <input type="radio" name="gender" id="gender" value="2" /> Women</td> 
                </tr> 
                <tr> 
                    <td>Address</td> 
                    <td>:</td> 
                    <td><textarea name="address" id="address" class="textarea"></textarea></td> 
                </tr> 
                <tr> 
                    <td colspan="4"> 
                        <input type="submit" name="submit" id="submit" value="Submit" /> 
                        <input type="reset" name="reset" id="reset" value="Cancel" /> 
                        <input type="hidden" name="ids" id="ids" value="" /> 
                    </td> 
                </tr> 
            </table> 
        </form> 
        <table id="tb_grid" class="grid">  // Grid data
        </table> 
    </body> 
</html>

3. Buat folder baru beri nama asset dan buat juga file style.css didalam folder tersebut

body{font:normal 12px Arial, Helvetica, Sans serif;}
.grid{width:600px;background-color:#CCC;font-size:12px;}
.tleft{text-align:left;}
.tright{text-align:right;}
.tcenter{text-align:center;}
.todd{background-color:#FFF;}
.todd td, .tevent td{padding:2px;}
.tevent{background-color:#F5F5F5;}

/* Form */
.frm_input{display:none;}
.tb_form{width:600px;background-color:#F5F5F5;font-size:12px;padding:5px;}
.tb_form .text_input{width:300px;}
.tb_form .textarea{width:300px;height:40px;}

/* Global */
.w150{width:150px;}
.w200{width:200px;}
.w60{width:60px;}

4. Masih didalam folder  asset buat file ajaxcurd.js

/**
 *
 * Website: www.iso.web.id
 * Author : Airlangga bayu seto
 * Email  : [email protected]
 *
 * */


function list_data(){ // fungsi yg pertama kali di panggil saat halaman diakases
    $.ajax({
         url        : "proses.php" // proses data
        ,type       : "get"
        ,dataType   : "json"
        ,success    : function(data){
            if(data.list.length > 0){
                var kelas;
                var kelamin;

                var rows = "<tr>\ // Header grid data
                                <th class=\"w150\">Name</th> \
                                <th class=\"w200\">Email</th> \
                                <th class=\"w60\">Gender</th> \
                                <th class=\"w200\">Address</th> \
                                <th class=\"w60\"></th> \
                            </tr>";
                $.each(data.list, function(k,v){ // Loop sebagai data dari json
                    kelas   = (v.ID % 2)?"tevent":"todd"; // class untuk merubah warna baris grid
                    kelamin = (v.GENDER == "1")?"laki - laki":"Perempuan"; // event untuk menentukan jenis kelamin
                    rows +="<tr class=\""+ kelas +"\" id=\"t"+ v.ID +"\"> \ // data yang akan di tampilkan
                                <td>"+ v.NAME +"</td> \
                                <td>"+ v.EMAIL +"</td> \
                                <td>"+ kelamin +"</td> \
                                <td>"+ v.ADDRESS +"</td> \
                                <td class=\"tcenter\"><a href=\"#\" id=\"edit\" key=\""+ v.ID +"\">edit</a> <a href=\"#\" id=\"del\" key=\""+ v.ID +"\">del</a></td> \
                            </tr>";
                });

                $("#tb_grid").html(rows); // tampilkan data
            }else{
                alert("No data Fount."); // bila data tidak ditemukan
            }
        }
        ,error      : function(){
            alert("Error load ajax page."); //bila error memuat proses data
        }
    });
}
function clearData(){ // fungsi untuk mengosongkan field
    $("input[type=text]").val("");
    $("textarea").val("");
}
function showForm(){ // fungsi untuk menampilkan form
    $("#tambah").hide();
    $("#frm_input").slideDown();
}
function hideForm(){ // fungsi untuk menghilangkan form
    $("#tambah").show();
    $("#frm_input").slideUp();
    clearData();
}
function showValue(arr){ // tampilkan data di field
    var gender = (arr[2] == "laki - laki")?"1":"2";
    $("#name").val([arr[0]]);
    $("#email").val([arr[1]]);
    $("#gender").val([gender]);
    $("#address").val([arr[3]]);
}

$(document).ready(function(){
    list_data();

    $("#frm_input").submit(function(){ // ketika tombol submit ditekan
        var name      = $("#name").val();
        var email     = $("#email").val();
        var sex       = $("#gender").val();
        var addr      = $("#address").val();
        var id        = $("#ids").val();

        var inputData = ({name:name,email:email,sex:sex,addr:addr,id:id}); // data yang akan di kirim

        $.ajax({
             url        : "proses.php?s=input" // proses input data
            ,dataType   : "json"
            ,type       : "post"
            ,data       : inputData
            ,success    : function(data){
                if(data.valid == true){
                    alert(data.message); // tampilkan pesan
                    clearData(); // kosongkan field yang sudah diisi
                    list_data(); // memanggil list data (refresh grid)
                }else{
                    alert(data.message); // tampilkan pesan
                }
            }
            ,error      : function(){
                alert("Error load ajax page.");  // pesan error ajax
            }
        });

        return false;
    });

    $("#tambah").click(function(){ // tampilkan form input 
        showForm();
    });

    $("#reset").click(function(){ // hilangkan form input
        hideForm();
    });

    $(document).on("click", "#edit",function(){ //ketika tekan link edit
        var key = $(this).attr("key");
        var arr = new Array();
        $("#t"+key+" td").each(function(k){
            arr[k] =$(this).text();
        });
        $("#ids").val([key]);
        showForm();
        showValue(arr);
    });

    $(document).on("click", "#del",function(){ //ketika tekan link delete
        var key = $(this).attr("key");
        $("#t"+key).slideUp();

        $.ajax({
             url        : "proses.php?s=delete" // proses delete
            ,dataType   : "json"
            ,type       : "post"
            ,data       : ({id:key})
            ,success    : function(data){
                if(data.valid == true){
                    alert(data.message);
                }else{
                    alert(data.message);
                }
            }
            ,error      : function(){
                alert("Error load ajax page.");
            }
        });

        hideForm();
    });
});

5. Buat file untuk memproses data

<?php
    /**
     *
     * Website: www.iso.web.id
     * Author : Airlangga bayu seto
     * Email  : [email protected]
     *
     * */

    /* koneksi ke database */
    $dbname = "ajaxcurd.sqlite"; // database sqlite
    try { // coba terkoneksi
        $db = new PDO("sqlite:$dbname"); 
    }
    catch(PDOException $e){
        $error = $e->getMessage(); // gagal koneksi tampilkan error
        die( "<br><br>Gagal koneksi !!! $error");
    }
    /*end*/

    $get  =  strip_tags($_GET['s']); // query string s
    switch($get){
        case "delete": // delete data
            $id     = (int)$_POST['id'];

            if(!empty($id)){
                $result = $db->query("DELETE FROM tb_member WHERE `MB_ID`   = '$id'");

                if($result){
                    $msg = array("message"  => "Berhasil delete data", "valid"    => true);
                }else{
                    $msg = array("message"  => "Gagal delete data", "valid"    => false);
                }
            }else{
                $msg = array("message"  => "Tidak data yang akan dihapus.", "valid"    => false);
            }
        break;
        case "input": // input / edit data
            $id     = (int)$_POST['id'];
            $name   = strip_tags($_POST['name']);
            $email  = strip_tags($_POST['email']);
            $sex    = (int)$_POST['sex'];
            $addr   = strip_tags($_POST['addr']);

            if(!empty($name)){
                if(!empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL)){
                    if(empty($id)){
                        $result = $db->exec("INSERT INTO tb_member (`MB_NAME`,`MB_EMAIL`,`MB_SEX`,`MB_ADDRESS`) VALUES ('$name','$email','$sex','$addr')");
                    }else{
                        $result = $db->query("UPDATE tb_member SET
                             `MB_NAME`  = '$name'
                            ,`MB_EMAIL` = '$email'
                            ,`MB_SEX`   = '$sex'
                            ,`MB_ADDRESS`  = '$addr'
                            WHERE `MB_ID`   = '$id'");
                    }

                    if($result){
                        $msg = array("message"  => "Berhasil input data", "valid"    => true);
                    }else{
                        $msg = array("message"  => "Gagal input data", "valid"    => false);
                    }
                }else{
                    $msg = array("message"  => "Email tidak boleh kosong/tidak valid", "valid"    => false);
                }
            }else{
                $msg = array("message"  => "Nama tidak boleh kosong", "valid"    => false);
            }

            echo json_encode($msg);
        break;
        case "delete";

        break;
        default : // list data ditampilkan
            $result = $db->query("SELECT MB_ID AS ID, MB_NAME AS NAME, MB_EMAIL AS EMAIL, MB_ADDRESS AS ADDRESS, MB_SEX AS GENDER FROM tb_member ORDER BY MB_ID DESC");
            foreach($result as $row){
                $val[]  = $row;
            }

            $data['list'] = (!empty($val))?$val:array();

            echo json_encode($data);
        break;
    }
?>

Simple bukan kalian hanya perlu 1 file untuk Proses semua yang akan dikerjakan, Ajax membantu kita untuk background proses untuk memanggil event pada file php yang kita buat tadi.

 

Catatan :

  1. Saya menggunakan sqlite sebagai databasenya.

 

DEMO 

Semoga bermanfaat