CRUD using coldfusion and dhtmlx

Pagi semua, sambil nunggu final liga champions gw pengen nulis lagi yang ada di otak, sebelum lupa.

kali ini topik yang mau gw bicarakan mengenai DHTMLX, sbenernya apa sih DHTMLX? kalo ada yg belum tau, bisa langsung cekidot ke websitenya, disini

kali ini  akan menggunakan 2 fitur dari DHTMLX, yaitu grid dan windows. kita akan membuat CRUD standard menggunakan coldfusion dan DHTMLX.

pertama tama kita siapkan dulu databasenya,  :

Field Jenis Penyortiran
id int(11)
name varchar(100)
address varchar(100)
sex varchar(100)

kemudian kita buat file index.cfm dan tuliskan source code dibawah ini :


<html>
<head>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxgrid_dhx_skyblue.css">

<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="codebaseForm/skins/dhtmlxform_dhx_skyblue.css">

<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxgrid.js"></script>
<script src="codebase/dhtmlxgridcell.js"></script>
<script src="dhtmlxWindows/codebase/dhtmlxcontainer.js" ></script>
<script src="dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script>
//function for delete data
function deleteData(){
 var selId = mygrid.getSelectedId()
 if (selId == null)
 {
 alert ("No Data Selected");
 return false;
 }

var x = confirm("Are you sure to delete?");
 if(x){
 location.href= 'delete.cfm?id='+selId
 }
 else
 {
 return false;
 }
 }

//function for edit data
var dhxWins,
win;
function doOnLoad() {

 //get Id Column
 var selId = mygrid.getSelectedId();
 if(selId == null)
 {
 alert ("No Data Selected");
 return false;
 }

 //Push it to array
 var arr = Array();
 mygrid.forEachCell(selId,function(c){
 arr.push(c.getValue());
 });
 //add to form
 document.getElementById("id").value = arr[0];
 document.getElementById("name").value = arr[1];
 document.getElementById("address").value = arr[2];
 document.getElementById("sex").value = arr[3];

 var selId = mygrid.getSelectedId();
 dhxWins = new dhtmlXWindows();
 dhxWins.setImagePath("dhtmlxDataProcessor/codebase/imgs/");
 dhxWins.enableAutoViewport(false);
 dhxWins.attachViewportTo("winVP");
 win = dhxWins.createWindow("win", 20, 30, 500, 200);
 win.setText("Add Data");
 win.attachObject('objEdit');

 win.button("close").attachEvent("onClick", function() {
 location.reload("index.cfm");
 });
}

//function for add data
var dhxWinsEdit,
winEdit;
function doOnLoadEdit() {
 var selId = mygrid.getSelectedId();
 dhxWinsEdit = new dhtmlXWindows();
 dhxWinsEdit.setImagePath("dhtmlxDataProcessor/codebase/imgs/");
 dhxWinsEdit.enableAutoViewport(false);
 dhxWinsEdit.attachViewportTo("winVP");
 winEdit = dhxWinsEdit.createWindow("winEdit", 20, 30, 500, 200);
 winEdit.setText("Add Data");
 winEdit.attachObject('obj');
}
</script>

</head>
<body >

&nbsp;

<!--Begin Main Form Area-->
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;">
<div id="gridbox" style="width:900px;height:270px;overflow:hidden"></div>

<!--button add data-->
<input type="button" value="Add" onClick="doOnLoadEdit();">
<!--button Update data-->
<button onClick="doOnLoad()">Update</button>
<!--button Delete Data data-->
<input type="button" name="some_name" value="Delete" onClick="deleteData()">
<!--End Main Form Area-->
</div>

<!--Begin Main Form Add-->
<div id="obj" style="font-family: Tahoma; font-size: 10px; height: 100%; overflow: auto; display:none">
<script>
function validasiAdd(){
 var name_1=document.getElementById('name_1').value;
 var address_1=document.getElementById('address_1').value;
 var sex1=document.getElementById('sex1').value;
 if (name_1=="" || address_1=="" || sex1 ==""){
 alert("Tolong Lengkapi Inputan");
 return false;
 }
 return true;
}
</script>
<form method="post" action="query1.cfm?act=add" onSubmit="return validasiAdd()">
<table>
 <tr>
 <td>Name:</td>
 <td><input type="text" name="name" id="name_1"></td>
 </tr>
 <tr>
 <td>address :</td>
 <td><input type="text" name="address" id="address_1"></td>
 </tr>
 <tr>
 <td>sex :</td>
 <td>
 <select name="sex" id="sex1">
 <option value="P">P</option>
 <option value="L">L</option>
 </select>
 </td>
 </tr>
 <tr>
 <td colspan="2"><input type="submit" value="Save" name="submitForm" >
 <input type="button" value="close" onClick="closeWindowAdd();">
 <script>function closeWindowAdd()
 {
 location.href="index.cfm";
 }
 </script>
 </td>
 </tr>
</table>
</form>
</div>
<!--End Main Form Add-->

<!--Begin Main Form Update-->
<div id="objEdit" style="font-family: Tahoma; font-size: 10px; height: 100%; overflow: auto; display:none">
<script>
function validasiUpdate(){

 var name=document.getElementById('name').value;
 var address=document.getElementById('address').value;
 var sex=document.getElementById('sex').value;

 if (name=="" || address=="" || sex1 ==""){
 alert("Tolong Lengkapi Inputan");
 return false;
 }

return true;
 }
</script>
<form method="post" action="queryUpdate.cfm" onSubmit="return validasiUpdate()">
<table>
 <tr>
 <td>Name:</td>
 <td><input type="text" name="name" id="name"></td>
 </tr>
 <tr>
 <td>address :</td>
 <td><input type="text" name="address" id="address"></td>
 </tr>
 <tr>
 <td>sex :</td>
 <td>
 <select name="sex" id="sex">
 <option value="P">P</option>
 <option value="L">L</option>
 </select>
 <input type="hidden" name="id" id="id">
 </td>
 </tr>
 <tr>
 <td colspan="2"><input type="submit" value="Save" name="submitForm" >
 <input type="button" value="close" onClick="closeWindow();">
 <script>function closeWindow()
 {
 location.href="index.cfm";
 }
 </script>
 </td>
 </tr>
</table>
</form>
</div>
<!--End Main Form Update-->
 <script>
 //setting datagrid
 mygrid = new dhtmlXGridObject('gridbox');
 mygrid.setImagePath("codebase/imgs/");
 mygrid.setHeader("id Pegawai,Name,Address,Gender");
 mygrid.setInitWidths("150,200,150,200");
 mygrid.setColAlign("left,left,left,right");
 mygrid.setColTypes("txt,txt,txt,txt");
 mygrid.setSkin("dhx_skyblue");
 mygrid.setColSorting("str,str,str");
 mygrid.setEditable(false);
 mygrid.init();
 mygrid.loadXML("xml.cfm");
</script>

</body>
</html>

Pada awal Code kita memasukin semua file DHMTLX yang diperlukan, nanti sesuaikan saja pathnya sesuai aplikasi yg dibuat

ini untuk tambah data kita beri nama query 1.cfm

<cfset act = #url.act#>

<cfif act eq "update">
<cfelseif act eq "add">
<cfquery DATASOURCE= "twTrainning" name="add">
 INSERT INTO dataPersonal
 ([name]
 ,[address]
 ,[sex])
 VALUES
 ('#form.name#','#form.address#','#form.sex#')
</cfquery>

<script>
 location.href= "index.cfm";
 </script>

 </cfif>

Kemudian kita akan buat file cfm yang digunakan untuk mengedit data ke database
ini untuk tambah data kita beri nama query.cfm

<cfquery DATASOURCE= "twTrainning" name="Update">
 UPDATE dataPersonal SET
 name='#form.name#',
 address ='#form.address#',
 sex = '#form.sex#'
 WHERE id ='#form.id#'
 </cfquery>

Pada awal ketika kita akan menampilkan data, kita menggunaka JSON,

bginilah kira kira function yang kita buat untuk menampilkan json


<cffunction name="convertQueryToJSON" access="private" returntype="any" output="true">
 <cfargument name="query" type="query"/>
 <cfset data = StructNew()>
 <cfset data['rows'] = ArrayNew(1)>

 <cfflush>

<CFFLUSH INTERVAL="100">
 <cfloop from="1" to="#query.RecordCount#" index="i" >
 <cfset row_data = StructNew()>
 <cfset row_data['id'] = query['id'][i]>
 <cfset row_data['data'] = ArrayNew(1)>

 <cfloop list="#LCase(ArrayToList(getData.getColumnList()))#" index="j">
 <cfset ArrayAppend(row_data['data'], query[j][i])>
 </cfloop>
 <cfset ArrayAppend(data['rows'], row_data)>
 </cfloop>

 <cfreturn SerializeJSON(data,true)/>
</cffunction>

<cfinclude template="getData.cfm">
 <cfset a = convertQueryToJSON(getData) />
<cfoutput>#a#</cfoutput>

dan yang terakhir, saya akan memasukan query untuk mendapatkan JSON dan delete data

getdata.cfm


<cftimer label="timing execute data" type="comment">
<cfquery DATASOURCE= "twTrainning" name="getData">
 select * from dataPersonal
</cfquery>

</cftimer>

Delete.cfm


<cfquery DATASOURCE= "twTrainning" name="Delete">
 Delete from dataPersonal
 WHERE id ='#url.id#'
 </cfquery>
 <cflocation url="index.cfm">

selesai CRUD yang kita buat menggunakan JSON,DHTMLX grid windows, dan coldfusion

happy programming all 😀

Advertisements

2 Comments

    1. Wah kalo java belum mas, tapi ini simple ko mas. mas coba aja cari membuat json pake java. kemudian jsonnya sesuain dengan kebutuhan DHTMLx nya, insya allah bisa 😀

      keep coding

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s