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