The Wahyudiharto's Blog

At the end of this year, my M8 a.k.a Method 8 tools has been finally re-evolute. It's an independent custom PHP framework built from scratch based on prior M8 core engine. Some of applications has been made from this previous M8 framework, but few of lacks found during the development phase. Such as it potentially bring  troubles for programmers when they work at the same module, too complicated programming structure, incomplete multi-users connection feature  and some other else minor issues. But at least, it's so reliable for 3.000 - 5.000 users via public internet - even in a small bandwith capacity available from clients.

Now, I've made some modification to it's core, eliminating the lacks covered from prior engine. There's major enhancement inside :

1. Apache virtual directory and .htaccess dependency to support rewrite mod feature
2. Multi-users connection support for database access (database class)
3. Cacheable datasource (database class)
4. More efficient session usage (session class)
5. Enhancement in hi-jack and XSS filtering (secure class)
6. 50% reducing development time by using 2 file only (presentation and controller) instead of 4 in prior engine
7. Integrated HTML 5 usage in UI, increasing client-side validation function (ajax class)
8. AJAX POST generator for better security
9. PDF, CSV, XLS and print preview built-in feature from DataTables
10. Code compressor 
11. 100% refreshment of UI
12. And more!

This latest framework built combined from jQuery and more persistence OOP classes. Just a little different from other framework available on the net :)

Labels: AJAX, PHP, Programming

Couple times ago, some readers of this blog gave me questions by email about is there any better client side text editor or the best slide show picture thumbnails available to put into their web based application? A lots! But just a few which absolutely flexible and more customizable. After researching in a weeks, finally I choose nicEdit for the best text editor and Galleriffic for the best slide show picture thumbnails. Both are jQuery based libraries and I succeeded using it in my latest online project on http://www.picanto-indonesia.com.

nicEdit
So what is so special about it? First, it has modern UI look of text editor similar to any word processor softwares with complete iconic built-in on top of it.


Secondly, this library is easy to use (even for beginner programmer I tough) since all I need is only to copy-paste the code with less modification to fit in the page (for example: the image upload function). The default image upload function in it's code is using imageshack.us server to store the files. Hence, for anyone who desire to move the image destination to their own server, there's available PHP plug-in file to use named as nicUpload.php. Just fill the target owned directory, included it in nicEdit.js and vice versa!


There's about no worry to inject the word we type in the edit box into the database, because we only take a single finalized variable to use. No more any securing function needed for this. And ... it's all free to use :)

Galleriffic
Hundreds of slide show plug-ins available on the net. It offering the same features; showing images with some effects. But a slide show without thumbnails and pagination means useless, after all, it's not a gallery. Based on it's name, Galleriffic offering a luxury features I described before. Although it's designed for flickr.com (CMIIW), it's modifiable to use to any web based software.


A small problem found when I need to fit the image in a specified size. Since flickr has 3 different file sizes (large, medium & small) after a picture uploaded, so I need to modifying and add a line in galleriffic.css file to make it fit in size from 1 image source.


So, problem is now solved. This gallery module look nice to see (even I need an additional blank space in bottom of it to handling a portrait type picture). That's it and ... thanks for reading. Have a good day :)

Labels: AJAX, JavaScript, Web Programming

This is what I called a revolutionary for the web based application to handle RAW printing. Somehow, I found this Java applet named jZebra & it worked successfully as same as 16-bit console printing operation - the objective is prohibiting paper to rolled up one sheet full. Different with other extension “add-on” (eg: php_printer module on PHP) which is executed on server, jZebra operated on client side – since it Java based applet, you know it’ll depends on existing JRE package in each client. But - nevertheless - printing in a small paper (eg: receipt or bill) from web based application is not a problem anymore.

A couple years ago, I was thinking about to create a small win32 application purposed to take job RAW printing on LAN on here and there (with AssignPrn function available on Delphi), it’s done to print locally but unfortunately failed to handle network printing session – especially on non Windows machine (Linux ~ with CrossOver “limitation” capabilities). Anyway, you can read the online documentation of jZebra or try the sample directly provided over Google code page where it published for free.

On current article, I’d like to share about my experiment on exploring jZebra, including a short review and a bit modification of HTML page so that jZebra will have more flexible to use. Before continue reading this & decide to use it, I suggest you to read first of jZebra manual whether it suitable to your need or not.

At first, I try to create an HTML page, embed the applet – minor modification from the example - & store it on local Apache web server. The picture below explains what I’ve done above:



Image above shows jZebra initialization process. Once the applet executed, each & every browser will need a confirmation window to run Java applet. It signed by small loading logo rolling where the embed applet placed on a page.



When printer doesn’t exist, the applet will return fail code says that the printer is not yet ready. I switch back to Printer & Fax Control Panel & found that there’s no printer configured, while I still use FinePrint screen printing application as my default printer on my netbook.



Any printing process regarding to unsuccessful printer communication will raise failed information just like below picture.



For the experiment, I then rename the “FinePrint” printer name to “zebra”



And … voila, the applet status says it ready.



Press print button & below picture display what’s happened on Windows printer status. You can see that the document name is “Java Printing”.



The printer on my experiment particularly used is LX-300 with USB plug cable. At the same time I press the Print button, the print will printing on paper directly & it stop to the end of string. It has exact behavior like DOS printing as I told before.



The above experiment I created from small modification of jZebra example. Note that information status as seen on above picture is based on AJAX, I decide to modified the source & use AJAX rather than manual common button (Detect Printer) for ease-of-use & compact source only. Below source define small part of index.html where I attach JavaScript main function:

...
<script type="text/javascript" src="js/jzebra.js"></script>
<body onLoad="detectPrinter()">
…
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> <td colspan="2" bgcolor="#000000"><span id="printerStatusBar">Loading...</span></td></tr>
<tr> <td width="47%"><form name="form1" method="post" >
String untuk dicetak<br>
<textarea name="struk" cols="50" rows="7" id="struk"></textarea>
<br><input name="button" type=button onClick="printStruk(form1.struk.value)" value="Test Cetak">
<input name="button2" type=button onClick="print64()" value="Test Cetak (Base64)">
<input type="reset" name="Reset" value="Reset"></form></td>
<td width="53%">
<applet name="jZebra" code="jzebra.RawPrintApplet.class" archive="js/jzebra.jar" width="100" height="100">
<param name="printer" value="zebra">
<param name="sleep" value="200"></applet></td></tr></table>
…

While here below is the core of JavaScript function:

function detectPrinter()
{
var applet = document.jZebra;
if (applet != null)
{
applet.findPrinter("zebra");
while (!applet.isDoneFinding())
{
// Wait
}
var ps = applet.getPrintService();
if (ps == null) var info="Printer belum siap";
else var info="Printer \"" + ps.getName() + "\" siap";
}
else
var info="Java Runtime belum siap!";
document.getElementById("printerStatusBar").innerHTML=info;
window.setTimeout('detectPrinter()',5000);
}

function printStruk(str)
{
var applet = document.jZebra;
if (applet != null)
{
// Plain Text
str=returnEnter(str);
applet.append(str);
// Send to the printer
applet.print();
while (!applet.isDonePrinting())
{
// Wait
}
var e = applet.getException();
if (e == null) var info="Printed Successfully";
else var info="Error: " + e.getLocalizedMessage();
}
else
{
var info="Printer belum siap";
}
document.getElementById("printerStatusBar").innerHTML=info;
}

function returnEnter(dataStr)
{
return dataStr.replace(/(\r\n|\r|\n)/g, "\n");
}

From the above picture, the example page now contains a textarea input. This purposed for user to print what they enter on it. So that this prototype will more flexible to use, since each of HTML page only embedding the JavaScript core function when custom specified page need the RAW printing function. Have a good try & share your comment below.

Labels: AJAX, JavaScript, PHP, Printing, Programming, Web Programming

What is AJAX? Well you can see what is it stand for behind the word to the left image shown. But - for those who just heard AJAX acronym - what does it like? What does it purposed to? Many of AJAX online documentation you can pointed to and learned, but anyway, this official wiki page is a good start. As personally for me, AJAX give many useful things in a web programming. Generally, it can eliminated some limitations you will face in a pure HTML page. And somehow, it can make website more attractive & increasing interactivity.

Moreover, this blog article would like describe out about a simple AJAX implementation, especially just for beginner programmer like me ;-). AJAX technology is not a latest one in World Wide Web but it’s almost new to me. I’m not an expert but this is my first experience to AJAX and I’d like to share about it to you. Think about a job but you have to force finished it only with one tool. And this was happened to me when I had to create a web chat module written in PHP.

Basically, a common rule acceptable chat application is that it has capability to refresh the display automatically when everyone leave a message, for example: Yahoo Messenger or IRC. In a regular HTML page (web based application), you can use a META tag but it will refresh the whole page in a specified time. Look at an example below:

<meta equiv="refresh" content="5;URL=chat.php">

The lack is, the message you type in a input box will lost when the time achieved (5 second to get the page refreshed automatically – chat.php). Give it 60 second and you will get an unreliable chat application since there are long duration time to rendering a new screen.

The point is, you will never have a good chat application with above technique. But the mighty AJAX can. How? First of all, take a subject to the database side. This will hold the whole messages from users. Create a table contains 2 row in MySQL just like below script. (database name: chat)

# MySQL-Front Dump 2.5
#
# Host: xxx Database: chat
# --------------------------------------------------------
# Server version 4.1.11

USE chat;

#
# Table structure for table 'chat'
#

DROP TABLE IF EXISTS chat;
CREATE TABLE chat (
pesan text,
time time NOT NULL default '00:00:00'
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

This is a simple table, you can rearrange it to your needs later. Anyway, look at the picture below and this what’s looks like with MySQLFront



Finally, I remade & simplify the chat AJAX script until it contain only 2 files; the chat library (chat.lib.php) & the form page (index.php).



Take a look at complete chat.lib.php class below:

<?php
class chat
{
var $host="your_db_host_server";
var $user="your_db_user";
var $db="chat";
var $pass="your_db_password";

function connect_easy($query)
{
$b = array();
if(!$connect = mysql_connect($this->host,$this->user,$this->pass));
if(!$dbr = mysql_select_db($this->db));
if(!($result = mysql_query($query)));
@$num = mysql_num_rows($result);
@$num2 = mysql_num_fields($result);
for($x=0;$x<$num;$x++)
{
$a = mysql_fetch_array($result);
for($i=0;$i<$num2;$i++)
{
$b[$x][$i] = html_entity_decode($a[$i]);
}
}
return $b;
}

function show($a)
{
if(count($a)>0)
{
$a=array_reverse($a);
if(count($a)<9)
$end=count($a);
else
$end=9;
for($i=0;$i<$end;$i++)
{
echo "<font size=2 color=red>".$a[$i][1]."</font>: ".$a[$i][0]."<br />";
}
}
}
}

All you need to do is change the variable of $host, $user and $pass and make an appropriate with your existing database server. Globally, this class has 2 function; the connection query & retrieval argument. Next, copy below script as form page and rename it as index.php.

<?
session_start();
require_once("chat.lib.php");
$action=$_GET["action"];
switch ($action)
{
case 'refresh' : $refresh = new chat();
$query="select * from chat";
$a=$refresh->connect_easy($query);
$refresh->show($a);
exit;
break;

case 'submit': $submit = new chat();
$query="insert into chat values ('".$_GET["chat"]."',NOW())"; $submit->connect_easy($query);
exit;
break;
}
?>

<html>
<head>
<title>AJAX Chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function ajaxConstructor()
{
var request_;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
request_ = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
request_ = new XMLHttpRequest();
}
return request_;
}

var http = new Array();
var http2 = new Array();

function getRefresh()
{
var curDateTime = new Date();
http[curDateTime] = ajaxConstructor();

http[curDateTime].open('get', 'index.php?action=refresh');

http[curDateTime].onreadystatechange = function()
{
if (http[curDateTime].readyState == 4)
{
if (http[curDateTime].status == 200 || http[curDateTime].status == 304)
{
var response = http[curDateTime].responseText;
document.getElementById('ajax_chat').innerHTML = response;
}
}
}

http[curDateTime].send(null);
}

function getSubmit()
{
var curDateTime = new Date();
http2[curDateTime] = ajaxConstructor();
http2[curDateTime].open('get', 'index.php?action=submit&chat=' + document.ajax.chat.value);
http2[curDateTime].send(null);
}

function kirim()
{
getSubmit();
document.ajax.chat.value=" ";
}

function refreshLayar()
{
getRefresh();
window.setTimeout("refreshLayar()", 2000);
}
</script>
</head>

<body onLoad="refreshLayar()">
<div id="ajax_chat" style="overflow=auto; width: 375px; height: 200px; border: 1px;" align="left"></div><br>
<form action="JavaScript: kirim()" method="get" name="ajax">
<font size="2" face="Trebuchet MS, Verdana, MS Sans Serif">Tulis Pesan: </font>
<input name="chat" type="text">
<input type="button" value="Kirim" onClick="kirim()">
</form>
</body>
</html>

All the both files must stay in the same path of a web server and make sure that you have a valid parameter database connection described earlier in chat.lib.php. Take a test and call the index page from any browser available from client.



That’s it & you’re done. The explanation of index page is very much simple. It contains some of core chat functions in JavaScript; the AJAX constructor, refreshing display, submit message & auto render screen in 2 second!. Got it? Well, class dismissed & hope this lesson benefit to us.

Labels: AJAX, MySQL, PHP