Freelancer's Playground! Learn Programming, The Freelancer's Way

16Mar/095

Cara Bodoh Mengakali Akses Website Yang Di Blok

Disclaimer: Apa yang saya tuliskan disini ditujukan untuk sistem operasi linux dengan distro ubuntu. Jangan tanya cara implementasinya di Windows.

Tip kali ini, kita akan menggunakan dua jalur koneksi internet. Pertama, menggunakan koneksi asli (biasanya sih koneksi kantor ;)) ) yang memblok suatu situs. Kedua, koneksi backup untuk mem-bypass blok suatu situs. Saya sendiri untuk koneksi backup menggunakan telkomsel flash *BE, Kawos!*, karena koneksi kantor lebih cepat ;)).

Filed under: Tutorial Continue reading
6Mar/091

How To Create MySQL Database on Ubuntu

So, you have choose to live with ubuntu. That's great! But you came from windows world where there's so many mysql frontend application in which you are able to create table easily. That's OK, we also have many mysql front-end applications in linux.

Filed under: Tutorial Continue reading
28Feb/091

Dynamic DNS Using No-IP

I got a case where I need to access my laptop at home. I did have a xmpp client active at home that act as chatbot where I can chat with and give it specific command for me to get whatever report I want from my laptop. But, this chatbot is limited in term of funcionality. So, I needed another solution for another problem where my chatbot can't handle it.

Here come the DDNS part. This time, we will use No-IP as our DNS provider. So, how do we use the solution? first, you have to register to the site, activate your account email and login.

Filed under: Tutorial Continue reading
27Feb/094

WordPress Plugin : Flexible Comment Moderation – A Step by Step Guide

This tutorial will explain how to create a plugin that will add new functionality to wordpress add page/post form. The plugin will add another level of comment moderation by allowing author to specifically always moderate/approve comment on certain page/post.

21Sep/081

Gambas GridView Pagination Tutorial

So, you have a bunch of data to display and it take quite a while to show it?. There is a concept called pagination to show several data at a time. In this post, I'll show you how to create a paginated GridView in gambas. This could be useful on product page or any page that will list a bunch of record.

Right now I'm not ready to prepare the step-by-step tutorial. So, I'll just give the gambas source file for you to read and learn from it. You can point any question or though to me using comment form below.


Filed under: Tutorial 1 Comment
8Jun/080

Meningkatkan Accessibility / Usability dengan Compiz

I Like The Way Compiz Improve Usability

Kalimat diatas ini sudah beberapa hari bertengger di status YM saya. Ya, ternyata compiz memang menawarkan accessibility/usability yang lebih baik. Ambil contoh plugin Move Window. Selama ini, kalau kita ingin memindah window, biasanya selalu melakukan dengan men-drag titlebar. Kalau plugin ini aktif, cukup tekan ALT+Button1[1] dimana saja pada window yang ingin di pindah. Jadi, tidak harus taruh mouse ke titlebar terlebih dahulu. Plugin berikutnya adalah Enhanced Zoom Desktop.

Filed under: Tutorial Continue reading
9May/081

Output Buffering Untuk Template

Ceritanya saya dikasih script sama client. Script tersebut punya header.php dan footer.php sebagai include untuk, well, template. Nah, oleh client saya, saya disuruh untuk mengimplementasikan template HTML yang dia buat. Lebih jauh, dia juga minta supaya ada interface admin untuk mengubah template tersebut kalau suatu saat sudah bosan. Hmm... buat interface admin sih mudah, yang jadi masalah, file header.php itu meng-include beberapa file berupa menu.php yang isinya berupa file PHP untuk meng-generate menu secara dinamis. Dari sini saya memakai solusi output buffering seperti pada posting sebelumnya tentang logging file transaksi. Potongan scriptnya seperti berikut:

//ini function:
function getHTMLFromInclude($thefile)
{
	ob_start();
	include($thefile);
	$stream = ob_get_contents();
	ob_end_clean();
	return $stream;
}
//ini penggunaannya:
include('template_handler.php');
/*isinya template_handler.php gak usah dijelaskan ya, cuman beberapa baris code deklarasi untuk template saja kok*/

$arrTemplate['{TOPMENU}'] = getHTMLFromInclude('menu.php');
$arrTemplate['{SIDEMENU}'] = getHTMLFromInclude('menuleft.php');

$stream = stripslashes(file_get_contents('templates/t.fp.header.php'));
//ini bagian parsing template tag
foreach($arrTemplate as $template => $value)
{
	$stream = str_replace($template, $value, $stream);
}
echo $stream;

Nah, sekarang di interface admin untuk template, tinggal taruh tag {TOPMENU} sesuai kebutuhan saja, tanpa harus repot-repot dengan include untuk menu.php.

Filed under: Tutorial 1 Comment
20Feb/0812

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['id'].'" '.$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.

Filed under: Tutorial 12 Comments
4Jan/085

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.

Filed under: Tutorial 5 Comments
29May/073

Dynamic DNS using DynDNS

One day I'm looking at my DSL modem's feature. There I see a DDNS tab, I don't know what DDNS mean until I open it. So, DDNS means Dynamic DNS. At this point I still don't know what is ddns used for. But there's a link to dyndns.org. and a form with username, password and domain in use. Still don't know what the use of it, I open dyndns website and register a free account. Looking for dynamic dns section, add a new host and add this information to my modem's setting (hostname, username, email, and password). save it and open the domain I add from browser. Waw, I'm surprised that I can access my modem's administration page from internet. Now I wonder, can I make my laptop's http service accesible internet?.

Looking around dyndns website and I found a download page. I download an update client for windows, because right now I'm using it. There's client app for linux and mac too. After download and install it, I set the same information i put into my modem's config and do an update IP. after it's done I surf my laptop using hostname I registered earlier. I can see my server's welcome page. I didn't satisfy with the result, so I contact some online friend to open the hostname from their browser and they did see the same welcome page. Hmm, so this is the use of dynamic dns. I think this is what my friend abud need.

Filed under: Tutorial 3 Comments