Mimic Oracle’s LOV Feature for Web Application

Pertama-tama saya mau minta maaf dulu, karena mulai posting ini saya akan semakin banyak memberikan content dalam bahasa Inggris. Saya ingin meningkatkan jumlah pembaca dari luar negeri.

For those of you who happen to develop an oracle application using oracle form, you’ll probably know that it has feature called LOV. This feature will show up a popup window that has a list of value for related field that is shown in grid form. I find this very useful and I miss this feature when I develop an intra net application.

In this post, I try to introduce a solution that mimic Oracle’s LOV. First, we need a javascript library called dHtmlXgrid. After that, we need to create a html form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LOV Test</title>
<script language="javascript">
	function callLOV(){
		var url = "lov.php";
		var opt = "width=690,height=180,left=100,top=100,scrollbars=yes,resize=no,menubar=no,toolbar=no,directories=no";
		window.open(url, "lov", opt);
	}
	function fillForm(arr){
		document.getElementById('txtNIM').value = arr[0];
		document.getElementById('txtName').value = arr[1];
		document.getElementById('txtCity').value = arr[2];
		document.getElementById('txtPhone').value = arr[3];
		document.getElementById('txtEmail').value = arr[4];
	}
	function kc(e) {
		var k;
		if (e.charCode) {
			k = e.charCode;
		} else
			if (e.keyCode) {
				k = e.keyCode;
			}
		return k;
	}
</script>
<style type="text/css">
	img { border: none;}
</style>
</head>

<body>
<table width="35%" border="0">
  <tr>
    <td><form id="form1" name="form1" method="post" action="">
<fieldset>
      <legend>Friend List</legend>
      <table width="100%" border="0">
        <tr>
          <td width="23%">NIM</td>
          <td width="77%"><input name="txtNIM" type="text" id="txtNIM" />
		  <a
		  	onClick="callLOV()"
			onKeyPress="if(kc(event) == 13){ callLOV(); }"
			href="javascript:void(0);"
			>
            <img src="dhtmlxgrid/popup.gif" name="imgPopup" width="12" height="15" id="imgPopup" /></a></td>
        </tr>
        <tr>
          <td>Name</td>
          <td><input name="txtName" type="text" id="txtName" /></td>
        </tr>
        <tr>
          <td>City</td>
          <td><input name="txtCity" type="text" id="txtCity" /></td>
        </tr>
        <tr>
          <td>Phone</td>
          <td><input name="txtPhone" type="text" id="txtPhone" /></td>
        </tr>
        <tr>
          <td>E-mail</td>
          <td><input name="txtEmail" type="text" id="txtEmail" /></td>
        </tr>
      </table>
      </fieldset>
</form>
    </td>
  </tr>
</table>
</body>
</html>

This should look like this: You click on popup image and it will launch LOV page.

Ok, form is ready, now move to LOV page. For this, we’ll create another file. Let’s call it lov.php. Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>LOV Friend</title>
	<script src="dhtmlxgrid/dhtmlXGrid.js"></script>
	<script src="dhtmlxgrid/dhtmlXCommon.js"></script>
	<script src="dhtmlxgrid/dhtmlXGridCell.js"></script>
	<link rel="stylesheet" type="text/css" href="dhtmlxgrid/grid.css">
  </head>
  <body>
<div id="gridbox" height="100%"></div>
<script language="javascript" type="text/javascript">
	function doOnEnter(rowId,cellInd){
            var caller = window.opener;
            arrData = new Array();
            arrData[0] = this.cells(rowId, 0).getValue();
            arrData[1] = this.cells(rowId, 1).getValue();
            arrData[2] = this.cells(rowId, 2).getValue();
            arrData[3] = this.cells(rowId, 3).getValue();
            arrData[4] = this.cells(rowId, 4).getValue();
            caller.fillForm(arrData);
            window.close();
	}
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("dhtmlxgrid/grid/");
	mygrid.setHeader("ID, NAME, CITY, PHONE, E-MAIL");
	mygrid.setInitWidths("90,230,110,90,150");
	mygrid.setColAlign("center,left,right,right,right");
	mygrid.setColTypes("ro,ro,ro,ro,ro");
	mygrid.setColSorting("str,str,int,int,int");
	mygrid.setOnEnterPressedHandler(doOnEnter);
	mygrid.init();
	mygrid.loadXML("datasource.xml");
</script>
  </body>
</html>

A little explanation from the above code:

<div id="gridbox" height="100%"></div>

is your grid place-holder that is used in the following code

mygrid = new dhtmlXGridObject('gridbox');

The other code is explained in dHtmlXgrid’s documentation, you should see it. One other thing that is need an explanation is this snippet

caller.fillForm(arrData);

This one is the key to connect LOV with our form, which will call fillForm function in html form’s page.

Now, this tutorial is complete, you can test it here. Follow this link to download the source file. Any question, just throw it below in comment form.

Share

Fungsi PostgreSQL yang sama dengan NVL milik Oracle

Bagi anda yang sering berkutat dengan Oracle, pasti sering membutuhkan fungsi NVL dalam operasi query. NVL sangat berguna untuk operasi view data. Sayangnya fungsi ini tidak ada di PostgreSQL (atau saya yang tidak tahu?). Setelah berpusing-pusing ria dengan manual PostgreSQL, akhirnya saya menemukan satu fungsi yang memiliki perilaku sama. Yaitu fungsi COALESCE.
Deskripsi dari manual adalah sebagai berikut :

The COALESCE function returns the first of its arguments that is not null. Null is returned only if all arguments are null. It is often used to substitute a default value for null values when data is retrieved for display, for example:

SELECT COALESCE(description, short_description, '(none)') ...

Like a CASE expression, COALESCE will not evaluate arguments that are not needed to determine the result; that is, arguments to the right of the first non-null argument are not evaluated. This SQL-standard function provides capabilities similar to NVL and IFNULL, which are used in some other database systems.

Share

Oracle and Date field problem

Kemarin aku ngerjain proyek. Nah, disalah satu modul ada yang berhubungan dengan tanggal. Karena terbiasa dengan mysql maka aku langsung HAJAR aja dengan query :

INSERT INTO tbl_data(id, tanggal) VALUES(1, '03-feb-2005')

. Execute program dan muncullah pesan cinta dari oracle. Error codenya : ORA-01858. Oke, beberapa hari yang lalu aku bikin query yang serupa (walau tak sama) dan sukses.

Oke lah, kita googling sebentar. Ternyata kesalahannya karena setiap query tanggal di oracle harus menggunakan fungsi TO_DATE().

Share