Iso Web Id Tutorial Komputer
Related Articles
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
