Monday, November 17, 2008

Having Game Dynamic Tabel Row with Javascript


On a world of web programming, we used to see insert, update, delete process to data in database, and so with select query into a view process using tag table and show the data’s by using script html and view it in a browser.

And now we try to research process of “Add New Row” and “Delete Row” about tag table in web-app by using javascript, why we should use javascript? Cause if we build a web sites or web application using javascript and gain some ability to process add new row or delete row in table tag without refresh, with the result that loading effort need to communicate with server might reducible, if edit process to table tag is done, and all the data’s going insert to database is correct than communication to database server could done by once insert data.

Now start to discuss step by step to get the process done, as a basic foundation we try to build it on php, foreknown this process could written on various web programming which is php, jsp, java or even .Net, but for now we only discuss it on php. Start with a file with any name *.php to shape a first page with a table on it and a link for further action, although action link to add row nor delete row. With this script shown below:




<html>
<head>
<title>Dynamic Table, Add / Delete Row</title>
</head>
<body>
<div class="area">
<div class="toolbar-clean">
<a href="javascript:addNewRow();"><span>New Row</span></a>
<a href="javascript:deleteRow();"><span>Delete Row</span></a>
</div>
<table width="80%" cellpadding="0" cellspacing="0" border="1" id="lineItemTable">
<tr>
<th width="0%"> </th>
<th width="2%" align="center">
<input type="checkbox" name="checkMaster" id="checkMaster" onClick="clickAll();"/>
</th>
<th width="24%">Nomor Induk</th>
<th width="24%">Nama Siswa</th>
<th width="50%">Alamat Lengkap</th>
</tr>
</table>
</div>
</body>
</html>

From script shown above will produce page like shown below:

After got the page like wanted, for the next step is to add javascript code into php file. This addition is to fulfill request link action “New Row” and “Delete Row” process than insert into html script tag, first we going to write function to add new row with function name “addNewRow” with all derivative function like shown below:


function addNewRow() {
var tbl = document.getElementById("lineItemTable");
var row = tbl.insertRow(tbl.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(generateIndex(row.rowIndex));
td1.appendChild(generateCheckBox(row.rowIndex));
td2.appendChild(generateNomorInduk(row.rowIndex));
td3.appendChild(generateNomorRegister(row.rowIndex));
td3.appendChild(generateNamaSiswa(row.rowIndex));
td4.appendChild(generateItemName(row.rowIndex));

row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
}

function generateIndex(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "index[ ]";
idx.id = "index["+index+"]";
idx.value = index;

return idx;
}

function generateCheckBox(index) {
var check = document.createElement("input");
check.type = "checkbox";
check.name = "check[ ]";
check.id = "check["+index+"]";

return check;
}

function generateNomorInduk(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "nomorInduk[ ]";
idx.id = "nomorInduk["+index+"]";
idx.size = "15";

return idx;
}

function generateNomorRegister(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "nomorRegister[ ]";
idx.id = "nomorRegister["+index+"]";

return idx;
}

function generateNamaSiswa(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "namaSiswa[ ]";
idx.id = "namaSiswa["+index+"]";
idx.size = "25";

return idx;
}

function generateItemName(index) {
var itemName = document.createElement("input");
itemName.type = "text";
itemName.name = "alamatSiswa[ ]";
itemName.id = "alamatSiswa["+index+"]";
itemName.size = "40";

return itemName;
}

From sample javascript code like show above, we can figure out process to produce new row which going to be generated, if “New Row” link clicked, generated column composition adapt with header composition, therefore when process been executed than page browser will show like figure below, and new row will continue add to the table if “New Row” link clicked continuously.

After got result like shown above, next step had to continue is adding new function to checked all checkbox in the table, so if we want to checked all the checkbox we don’t need to check one by one at the time, with this function we can check all at a time, this function written like this code below:


function clickAll() {
var checked = false;
if (document.getElementById("checkMaster").checked == true)
checked = true;

var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
node.checked = checked;
}
}

After the code insert into html script tag with new function “clickAll” as a name, then checkbox element placed on header can assume working properly. And if this checkbox clicked then we can see page like shown below. We can see the different between a second figure and third figure where the checkbox element clicked and not clicked.


And final step to insert function “deleteRow” which have a duty to delete row or picked row from table if necessary, this function can also to delete all row in the table with condition if all the checkbox element checked, javascript code written like shown below.



function deleteRow() {
var tbl = document.getElementById("lineItemTable");
var error = false;

if (document.getElementById("checkMaster").checked == false)
error = true;

var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == true) {
error = false;
break;
}
}

if (error == true) {
alert ("Checkbox tidak di cek, proses tidak dapat dilanjutkan");
return;
}

if (document.getElementById("checkMaster").checked == true) {
deleteAll();
document.getElementById("checkMaster").checked = false;
} else {
var table = document.createElement("table");
bufferRow(table);
deleteAll();
reIndex(table);
}
}

function deleteAll() {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length - 1;
for (var idx = rowLen; idx > 0; idx--)
tbl.deleteRow(idx)
}

function bufferRow(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == false) {
var rowNew = table.insertRow(table.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);

rowNew.appendChild(td0);
rowNew.appendChild(td1);
rowNew.appendChild(td2);
rowNew.appendChild(td3);
rowNew.appendChild(td4);
}
}
}

function reIndex(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = table.rows.length;
for (var idx=0;idx < rowLen;idx++) {
var row = table.rows[idx];
var rowTbl = tbl.insertRow(tbl.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);

rowTbl.appendChild(td0);
rowTbl.appendChild(td1);
rowTbl.appendChild(td2);
rowTbl.appendChild(td3);
rowTbl.appendChild(td4);
}
}

As seen on javascript “deleteRow” function, we can figure validate process before delete command executed in line 4th until 22nd to checking neither checkbox element are checked or not, if at least just one checkbox are checked then this process can be executed, but if non of this element are checked then process will stop and continue with alert in browser like shown below:


Perhaps only this knowledge I can share to all reader for this moment, if in this article contain some mistake, please don’t mind to correct me if I done some wrong or give me some advise and comment. To improve knowledge and share it to other.


Read More...

Wednesday, November 5, 2008

ASCII code manipulate with Java Runtime

The idea of this article beginning when the company I worked now need some utility command to build connectivity between the application which is build in java platform connect to hardware. To gain connectivity to hardware tools we need command line in ASCII code as like this “alt+27, alt+112, alt+48, alt+62, alt+76, alt+80, alt+84, alt+49”, if we use this line syntax using command prompt M$ DOS, before the main command first we must write command “echo” + space followed by these ASCII code, after hit the enter button then command running and hopefully the hardware can response to that command line.

By using this ASCII code list as reference, than we get ASCII code that needed to accessing this hardware:



Be sides of ASCII code that often use in daily programming like in table above, there is another ASCII code is rare used in daily programming, this reference table below is shown ASCII code that represent symbol and line character:

After knowing ASCII code for hardware specification, and now time to figure out how to connect ASCII code to command line in Java, that is using Runtime command from “java.lang.Runtime”, with complete command write like this “Runtime.getRuntime().exec(‘this ASCII code written to be execute’);” with return value class Process from “java.lang.Process” than initialize into “p” object, from that object we can got this command “p.waitFor();” with aiming the system will wait until this command to hardware is come to end, as the following source code as an example how to use ASCII code to Runtime command. But don’t forget to write this line “cmd /c” before “echo” syntax if you try to execute it on windows, to call DOS command prompt.

StringBuffer strNew = new StringBuffer();
strNew.append(new Character((char)27));
strNew.append(new Character((char)112));
strNew.append(new Character((char)48));
strNew.append(new Character((char)62));
strNew.append(new Character((char)76));
strNew.append(new Character((char)80));
strNew.append(new Character((char)84));
strNew.append(new Character((char)49));

Process p = Runtime.getRuntime().exec("cmd /c echo "+strNew.toString());
p.waitFor();
Perhaps for this moment this knowledge that I can share to all reader, if in this article contain some mistake, please don’t mind to correct me if I done some wrong or give me some advise and comment.

Read More...

Hello Blogger

Hi..
This is my third blog, but i rather to write this blog in english, with purpose to sharpen my english skill, so if all among the reader find any mistake on my write, feel free to correct me.

Best Regard


Agien
Read More...