Sunday, December 12, 2010

Compile PHP script into bytecodes with bcompiler

PHP is the most popular scripting language for the web that is running on the server side. It borrows syntax and style from C but is simplified to work like Javascript.

The nature of scripting language is to expose the source code that make it easy to run cross platform. However, in commercial project, you may want to protect your precious software libraries or the whole project from exposing the source code. You can do it with "bcompiler", a PECL module, that will compile PHP source code into binary bytecodes.

It is easy to install using PECL package management software as follows.

pecl install bcompiler-0.9.3

After installation, it is necessary to add a line into php.ini to make it dynamically load bcompiler module on demand.

extension=bcompiler.so

Let us start with a simple program written to run as a standalone program.

File: lib.inc -- define constants named VERSION and NEWLINE
<? // lib.inc
define("VERSION", "0.1");
define("NEWLINE", "\n");
?>

File: test.php -- display with constants defined in lib.inc  
<? // test.php
require("lib.inc");
echo "Version: ".VERSION.NEWLINE;
echo "Hello World !".NEWLINE;
?>

With "php test.php" command, you should see these on screen.
Version: 0.1
Hello World !

That mean our script is working properly.

To compile the source code, we need to write another script that read a source file and write out a binary bytecodes file.

File: compile.php -- compile the code, write out binary bytecode
<? // compile.php
$f = fopen('test-o.php', 'w');
bcompiler_write_header($f);
bcompiler_write_file($f, 'test.php');
bcompiler_write_footer($f);
fclose($f);
?>

Running "php compile.php" will generate "test-o.php" file as a result. This "test-o.php" will work like original "test.php". However file size of the bytecodes seem to be much bigger than the original source code but it can improve performance by about 30% (as stated in the manual).

Not only the main ".php" code can be compiled but also the "lib.inc" library code.

Thursday, December 9, 2010

Make dynamic html elements live in jQuery!

With jQuery, you can easily add dynamic html elements anywhere you want on the page. The problem is that the newly added elements will not binded to pre-defined events.


This problem can be fixed by using "live". It allows you to define an event handler that will work with all matched elements either now or future.


Let us start with an example. I will create a div as a container and begin with a button that will let us create a dynamic "button" element inside the container. The newly created button will also binded to the same event that create more button inside the container when clicked.


Here is the code:
--
<html>
<head>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script>
$(function(){
   $('input:button').live('click', function(){
      $('<input type="button" value="also add a button">').appendTo($('#container'));
   });
});
</script>
</head>
<body>
<div id='container' style='border:solid black 2px; padding: 5px'>
</div>
<input type='button' value='add a button'>
</body>
</html>
--

If necessary, there is "die" that let you unbind the "live" events.


See jQuery API: live and jQuery API: die for more information.

Wednesday, December 8, 2010

Google map integration website

For a business website, map is surely necessary. With Google Map, you can easily integrate a map to your website.

Today, I am going to show you how do it with jQuery and Google Map API. See PantipShop's contact page  for an example.



First, you need to know latitude and longitude of your location by using a GPS locator. You can also get the values from Google Map by right-clicking at the location you want to get the values and choose "What's here".

Then let us start with html code.

1) In the <head> section, load Google Map API in the language you preferred (en = English, th = Thai, etc. )

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>

2) follow by a jQuery script that will setup/ initialize the map


<script type='text/javascript'>
$(function() {
   // define latitude and longitude
   var myLatlng = new google.maps.LatLng(13.732251,100.522158);


   // define zoom value and type of map
   var myOptions = {
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.HYBRID
   }


   // make a new map in an element with "map_canvas" id
   var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);


   // mark my location
   var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'My company'
   });


   // click at the marker will pan the map the that location

   google.maps.event.addListener(marker, 'click', function() {
      map.panTo(marker.getPosition());
   });


   // double click at the marker will adjust the zoom value, also pan to that location
   google.maps.event.addListener(marker, 'dblclick', function() {
      map.setZoom(18);
      map.panTo(marker.getPosition());
   })

});
</script>


3) in <body> section, where you want to show a map, put an empty <div> with id "map_canvas" as initialized in the script above.

<div id='map_canvas'></div>

4) That is it !

For advance usages, see Google Map API.

Tuesday, December 7, 2010

Easy table beautifier by jQuery UI CSS framework

jQuery is simple and powerful. When combine with jQuery UI and its CSS framework and ready made theme, we can get good looking UIs without any experiences in graphic design.


Today, I am going to show the easy way to make your plain and boring table look great just like one of jQuery UI widget.
Before

Sample code: test.html
--
<html>
<head>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<link href='css/ui/redmond/jquery-ui.css' type='text/css' rel='stylesheet' />
<script>
$(function(){
$('table').addClass('ui-widget-content').find('td').css({padding: '2px'});
$('tr:has(td):odd').addClass('ui-state-default');
$('tr:has(td):even').addClass('ui-state-focus');
$('tr:has(th)').addClass('ui-widget-header');
});
</script>
</head>
<body>
<table>
<tr><th>#</th><th>Name</th><th>Age</th></tr>
<tr><td>1</td><td>Mr. AAAAAA</td><td>25</td></tr>
<tr><td>2</td><td>Mr. BBBBBB</td><td>18</td></tr>
<tr><td>3</td><td>Mr. CCCCCC</td><td>27</td></tr>
<tr><td>4</td><td>Mr. DDDDDD</td><td>24</td></tr>
<tr><td>5</td><td>Mr. EEEEEE</td><td>35</td></tr>
<tr><td>6</td><td>Mr. FFFFFF</td><td>32</td></tr>
</table>
</body>
</html>

--
After

First we add class 'ui-widget-content' to a <table>. Alternatively, we add padding:2px to all <td> too. We separated table row into 2 kinds. First is a header row, rows with <th> inside and content row, rows with <td> inside.


For header rows with <th> inside, as jQuery selector "tr:has(th)", we apply "ui-widget-header" class to them. For content rows, to make odd and event rows look different, we apply different class to them identified by jQuery selector ":odd or :even".


That is it ! It is easy right ? I can surely make it look a bit better, with round corners and so on but this is enough to give you a picture of what you can do with jQuery CSS framework.

Monday, December 6, 2010

Unique website with favicon

Modern web designer surely need to add a lot of multimedia to the website to make it eye catching. Favicon is a little piece of graphic, that make your site unique, in the title of the browser, bookmarks or as a short-cut icon to your website creating by Google chrome.


It is 16x16 or 32x32 pixel square icon first introduced in IE4. However, IE only support favicon in ico (microsoft icon) format unlike other browsers that support favicon in png, gif and jpeg formats as well. For more specification and info, see wikipedia.

If you doesn't have tool to make your favicon in ico format, you can try favicon.cc. A website that let you draw your favicon.


It allows you to import your design from gif,png,.. and make ico file for the best browser compatibility. It also supports animated favicon that may not work in all browsers. Try it ! It is free and fun.

Sunday, December 5, 2010

Debug web app with google chrome

With the arrival of Google Chrome, web browsing becomes faster, web application gets accelerated with its fast javascript engine.


Not only the speed, Google Chrome also comes with the Developer Tools. It's a tools that web developer should not miss.



It allows you to inspect the elements (as html/ css/ properties and so on) displaying on the screen in real time. You can also track used resources, scripts, loading time, cookies and much more.




Thank you to Google Chrome's Developer Tools, web optimization is much easier. Web development is much more comfortable.

Saturday, December 4, 2010

About jQuery UI Widgets

I have been working with a project based on jQuery and jQuery UI for a while. The new widgets, recently added to jQuery UI are autocomplete and buttons (also buttonsets), proved to be very useful and fill the gap.

autocomplete
button and buttonset
However, they are not features rich like other widgets in jQuery UI. I sometime need to hack things around to make it do a bit complicated tasks but in general, they are working good and look pretty with support for jQuery CSS Framework.

I would be happy to see Menu and Layout widgets add to jQuery UI soon. For the menu, I have tried the candidated Menu widget. Although it's still in the lab, not ready for production but it works and look very pretty.

Fg.Menu - the candidated Menu Widget for jQuery UI
However, it doesn't support standalone vertical menu yet so I modified Superfish to make its looks and feel like one of jQuery UI widget. You can see my on-going online shopping project for an idea (PantipShopGedthawha and CShopOnline)

I am also using jQuery.UI.Layout in one of my web app project. I don't think it is an official Layout widget for jQuery UI but it works just fine. If you need to make a web app that look a bit like native application, it's worth to try.