Home / Pemprograman / Simple jquery Ajax CURD

Simple jquery Ajax CURD

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  : qu4ck@iso.web.id
 *
 * */

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

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Multi php.ini pada webserver

PHP ya,  mungkin saat ini pemrograman web yang paling banyak digunakan, mungkin karena mudah cara …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

− 3 = 4