Mimic Oracle’s LOV Feature for Web Application Part 2: Add Database Support

On my previous tutorial, you have seen how to create a Lookup Grid. That’s just basic, without database support.
In this tutorial, I’ll enhance the script with database and search support. What you’ll need first is obviously a database server. If you don’t have the tutorial file, please download it from my previous tutorial. Next think to do is, create a file which contain database information. Let’s call it db_conn.php.

<?php
$conn = mysql_connect('localhost', 'db_username', 'db_password');
mysql_select_db('database_name');
?>

With database information obtained, now we’ll move to lov.php file. Open it and include db_conn.php.

include('db_conn.php');

Next, delete all <row></row> xml data. Add this code right after header("Content-Type: text/xml");.

$x = isset($_GET['query']) ? $_GET['query'] : '';
$addSQL = "";
if(!empty($x)){
	$addSQL = "WHERE name LIKE '%".mysql_escape_string($x)."%'";
}
$sql = "SELECT * FROM friends $addSQL";
$rs = mysql_query($sql, $conn);

On place where <row></row> was, add this code:

<?php
	$select = 'selected="1"';
	while(false !== ($r = mysql_fetch_array($rs))){
		echo '
	<row id="'.$r&#91;'id'&#93;.'" '.$select.'>
      <cell>'.$r['id'].'</cell>
      <cell>'.$r['name'].'</cell>
      <cell>'.$r['city'].'</cell>
      <cell>'.$r['phone'].'</cell>
      <cell>'.$r['email'].'</cell>
    </row>
		';
		$select = "";
	}
?>

Now the XML generator part is ready, now we’ll head to HTML part.
Please add this code right before <div id="gridbox" height="100%"></div>

<div id="searchbox">
	Search&nbsp;<input type="text" id="searchText" value="">&nbsp;
	<input type="button" onclick="doLimit(document.getElementById('searchText').value)" value="Search">
</div>

And this javascript function inside HTML HEAD tag.

<script language="javascript" type="text/javascript">
	var mygrid = null;
	function doLimit(txt){
		mygrid.clearAll();
		mygrid.loadXML("lov.php?reqType=getXML&query="+txt);
	}
</script>

That’s it, save your lov.php file and run it to test. You can also try in online here
and download the example file here. Any question you might have, you can write in here in comment form below.
I’ll try to answer when I have time.

Share

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