Ask About PHP

PHP and jQuery: Submit a form without refreshing the page

Eldee — Wed, 09 Jun 2010 06:55:39 +0000

Lately, I’ve been chancing on quite a number of posts at various places asking about how to perform a web action without the webpage reloading/refreshing? For example, dynamically updating a list on a page without a reload or submitting a form to PHP without leaving the webpage the form sits on.

I guess this is as good a time to start branching into some posts on PHP and Javascript, or more specifically, jQuery.

To be honest, I’ve never been partial to using Javascript (ie client-side programming) in my web applications, prefering instead to rely on server-side processing for all my programming needs. I guess this has to do with my frustrations of Javascript incompatibility between different browsers back in the day. However, with a javascript library (or framework) like jQuery, I’m starting to use more client-side actions to complement all the server-side PHP stuff. Here’s 6 reasons why you should use JavaScript Libraries & Frameworks.

You can download my example source code if it helps you understand how the whole thing works.

Download:

And here’s a demo of what we’re trying to do.

The traditional way of doing form submissions
Back in the “old” days, in order to perform a form submission, you need to do something like this.

When you click the “Submit” button on form.php, the web server knows to send the name and email values using the POST method to the php script called process.php. The web server will load process.php page and the PHP script will start to read in the form values posted from form.php, maybe perform some validation to check that the information received is correct, then perhaps do something with the form values such as storing it in a database or sending it via email and output a “thank you” message.

What if something goes wrong, for example, the person submitting the form wrote in a badly-formed email address, the validation at process.php will throw a nicely worded error message and stop running the rest of the script. The person then would need to go back to the form to correct the email address and he would submit the form again.

This might have been an OK way of doing things 10 years ago, but in this era of Facebook and Twitter, that’s a pretty antiquated and tedious method.

The jQuery way of doing form submissions
Here’s the jQuery way, which is made possible by something called AJAX (which stands for Asynchronous JavaScript and XML). AJAX is bascially the technology that makes it possible to exchange data with a server, and update parts of a web page – without reloading the whole page. jQuery includes the necessary functions to implement AJAX into your web application.

The diagram looks quite similar to the “old” way of doing things, except that process.php is now represented by a ‘circle’. This is because process.php is now hidden for lack of a better word. In the traditional method, when you click the submit, your browser will load process.php and it will jump from form.php to process.php.

With the jQuery/AJAX way, process.php becomes a background process which the web server will call on, and when you click on the “Submit” button, form.php pushes the data to process.php, but your browser will remain showing form.php. Once the process.php has done what it needs to, it will return to form.php some output to be displayed.

Here’s the source code for form.php

 


	JQuery Form Example 
	
	
	
	


  

    Name  
      
	


    Email

and the source code for process.php

1
2
3


	print "Form submitted successfully: 
Your name is ".$_POST['name']." and your email is ".$_POST['email']."
";
?>

Here’s what’s happening
I included jQuery’s form validation because it provides a more real world example. Usually, most sites will perform processes like form validation at the client-side before the form is submitted. It’s just more intuitive and a much better user experience. In fact if you can offload as much workload as you can to the browser, it will greatly reduce the hit on your server.

So here’s a quick high-level walk through what’s happening on the jQuery part.

I call the validate method (make sure you have included the jquery validate plugin – see form.php Line 6) on my form #myform, and proceed to define what to validate. In this case, we’re checking that the name field is ‘required’, and we’re checking the email field is not only ‘required’, but must be an email format. I also define the custom error message I want to display if the validation fails.

Lastly, the submitHandler is what gets processed if the validation is successful. In this case, I’m doing an ajax post method, sending my form data to process.php, and get back any results as HTML data which will be displayed into #results.

Over at process.php, I’m simply printing out the data received to show you the information was sent and returned.

That’s basically it. If you want to know more, do check out the jQuery website to get more details on how to do AJAX and Validation.

Feel free to comment your thoughts or suggestions.

Google Analytics officially uses the Asynchronous Tracking tag

webmaster — Thu, 20 May 2010 09:31:58 +0000

Google Analytics tagging is now officially changed to the what Google calls Asynchronous Tracking, which came out of beta last week. The new tracking tag is the default and recommended code to use, and shows up in your Google Analytics’ admin interface.

So what’s the big deal about this?
Sometime back in December 2009, Google released the Asynchronous Tracking code snippet as an alternative method to tag website to collect website statistics. The new tracking offers some benefits over the previous tracking tags, but the most important one is speed.

Google obviously knows that their previous tracking code slowed things down, since it downloads a fairly large Javascript library file, and while it’s downloading, nothing else can happen on the page. This is the reason why Google recommends you put the code at the bottom of your webpage.

In most cases, this is not a problem, but you can’t start tracking until the whole javascript has been loaded, and the user might have navigated away before this happens (rarely, but it does happen). Also, it does become a headache if we want to track things that happens before the bottom of the page gets loaded, e.g. a call to fire an event and so on.

With the new Asynchronous Tracking, your browser will continue to render the page while the GA javascript loads in the background. Any tracking calls it encounters before the full file has been loaded is pushed into a queue, and executed once the complete javascript file has been loaded.

How to start using Asynchronous Tracking tag
If you’ve installed the previous tagging, there’s nothing new to changing over to the Asynchronous Tracking code. Just go into your Google Analytics admin interface and grab the new code and replace your old code with it.

Of course, if you don’t use the plain vanilla code snippet and have added various other API calls, you need to refer to the documentation at Google on the equivalent syntax. Google has some good migration examples to get your started.

Should I make the switch?
The folks over at Position2 did a pretty good experiment to study the effect of using the asynchronous code vs the old code on page load time. So was Google right to claim that the new code speeds things up?

Well, they found that the new code will speed up the page load time if you’ve been putting your code at the top of the page. But if you’ve been putting your code snippet at the bottom of the page, there’s no discernable difference. In fact, the new code clocks a consistent timing no matter where you place it. It was the old code that would slow the page down if it was placed at the top of the page.

It may also be of interest to know that there’s been quite a bit of chatter in the Google Analytics forum about drops in traffic after switching to the new code, and various other issues.

So, like all things tech, do you want to be the 1st generation of people to use something ‘new’? This entirely boils down to your need. Is your analytics number the lifeblood of your business? Is your site slowed down by heavy GA usage?

Since Google has officially recommended everyone to switch to the new asynchronous tracking code, it’s just a matter of time before the old code snippet is phased out. You should switch if the benefits of the new code solves your problems or makes tracking easier for you, but otherwise, wait it out a little bit while Google irons out the kinks in the system.

FYI: I have switched to the new tracking code for testing. Let’s see how it affects my numbers on this site.

PHP Basics: Sorting Arrays

Eldee — Sun, 14 Mar 2010 14:56:44 +0000

Arrays are wonderful things. I can’t imagine using a programming language that does not have support for arrays. For newbies, arrays might be something that’s difficult to understand at first, but once you get used to it, it’s almost impossible to live without. Guaranteed!

If you are not familiar with what arrays are, visit the PHP manual. Alternatively, there’s a introduction to arrays at developer.com.

In this post, I’m not going to cover the same ground but instead touch on sorting of arrays.

PHP provides a number of function which you can use to sort arrays.

Sorting by its values
Sorting an array by its values is probably the most common way of performing a sort, and the most straighfoward. PHP provides the sort() function for doing this.

Example 1:

$nums = array(14, 3.2, -5, 1.3, 0);
sort($nums);
print_r($nums);
 
/* Outputs:
Array 
(
    [0] => -5
    [1] => 0
    [2] => 1.3
    [3] => 3.2
    [4] => 14
)
*/

Example 2:

$movies = array('A Fish Called Wanda', 'The Godfather', 'Finding Nemo', 'Star Wars', 'Grease');
sort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [0] => A Fish Called Wanda
    [1] => Finding Nemo
    [2] => Grease
    [3] => Star Wars
    [4] => The Godfather
)
*/

Example 3:

$movies = array('Comedy'=>'A Fish Called Wanda', 'Drama'=>'The Godfather', 
		'Animation'=>'Finding Nemo', 'Sci-Fi'=>'Star Wars', 'Musical'=>'Grease');
sort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [0] => A Fish Called Wanda
    [1] => Finding Nemo
    [2] => Grease
    [3] => Star Wars
    [4] => The Godfather
)
*/

So, it all looks pretty straightfoward right? The arrays are sorted in ascending order. But what has happened to the keys for the last example for $movies? sort() will reset all the indexes, so you have lost your original keys. To get around this you can use the asort() function instead, which works the same as sort except that it preserves the original key/value mapping.

Example 4:

$movies = array('Comedy'=>'A Fish Called Wanda', 'Drama'=>'The Godfather', 
		'Animation'=>'Finding Nemo', 'Sci-Fi'=>'Star Wars', 'Musical'=>'Grease');
asort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [Comedy] => A Fish Called Wanda
    [Animation] => Finding Nemo
    [Musical] => Grease
    [Sci-Fi] => Star Wars
    [Drama] => The Godfather
)
*/

So how about sorting in descending order? Well, the functions to in this case are rsort() and arsort()

Example 5:

$movies = array('Comedy'=>'A Fish Called Wanda', 'Drama'=>'The Godfather', 
		'Animation'=>'Finding Nemo', 'Sci-Fi'=>'Star Wars', 'Musical'=>'Grease');
arsort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [Drama] => The Godfather
    [Sci-Fi] => Star Wars
    [Musical] => Grease
    [Animation] => Finding Nemo
    [Comedy] => A Fish Called Wanda
)
*/

Sorting by its keys
For associative arrays, it is just as important to be able to sort the array by its keys. The ksort() and krsort() functions does exactly that.

Example 6:

$movies = array('Comedy'=>'A Fish Called Wanda', 'Drama'=>'The Godfather', 
		'Animation'=>'Finding Nemo', 'Sci-Fi'=>'Star Wars', 'Musical'=>'Grease');
ksort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [Animation] => Finding Nemo
    [Comedy] => A Fish Called Wanda
    [Drama] => The Godfather
    [Musical] => Grease
    [Sci-Fi] => Star Wars
)
*/

Example 7:

$movies = array('Comedy'=>'A Fish Called Wanda', 'Drama'=>'The Godfather', 
		'Animation'=>'Finding Nemo', 'Sci-Fi'=>'Star Wars', 'Musical'=>'Grease');
krsort($movies);
print_r($movies);
 
/* Outputs:
Array
(
    [Sci-Fi] => Star Wars
    [Musical] => Grease
    [Drama] => The Godfather
    [Comedy] => A Fish Called Wanda
    [Animation] => Finding Nemo
)
*/

Sorting using custom comparison functions
It is also possible to create your own sort criteria and apply it to an array. Three functions are provided for you to do just that – usort(), uasort() and uksort(). The following example, I’m going to sort my fruits array by arranging the quantity with odd numbers first followed by even numbers, in descending order. I’m going to use uasort() because more often than not, you want to preserve your keys, which usort() will not do.

Example 8:

function oddfirst($i, $j)
{
	$value = 0; # default return value (do nothing)
	if($i % 2) $value--;
	if($j % 2) $value++;	
	if($value == 0) $value = $j < $i;
	return $value;
}
$fruits = array( 'apples' => 37, 'mangoes' => 72, 'oranges' => 92, 'bananas' => 15, 'grapes' => 52, 'kiwis' => 43);
uasort($fruits, 'oddfirst');
print_r($fruits);
 
/* Outputs:
Array
(
    [bananas] => 15
    [apples] => 37
    [kiwis] => 43
    [grapes] => 52
    [mangoes] => 72
    [oranges] => 92
)
*/

So how does this actually works? The uasort() function takes in 2 arguments – the first argument defines the array to be sorted, the second argument states the name of the function to call. In my example, that would be ‘oddfirst’.

This comparison function needs to take in 2 parameters (in my case $i and $j) and return one of three possible values – a negative number, a positive number and zero. In most cases, returning -1, 0, 1, would be sufficient. This number tells uasort() how $i compares with $j as follows.

If a negative number (-1) is returned, then $i is less than $j
If a positive number (1) is returned, then $i is greater than $j
If zero (0) is returned, then $i is equal to $j

For the oddfirst() function, my algorithm goes like this:

If $i is odd, $j is even then return a negative number ($value=-1) because I want $i to be sorted first
If $i is even, $j is odd then return a positive number ($value=1) because I want $j to be sorted first
if both $i and $j are even or both are odd, then $value is zero, and I need to make a further comparison to sort the numbers in ascending order. Hence, $j < $i tests which number is greater and return $value=1 when $i is greater than $j.

Sorting multi-dimensional arrays
So far, we’ve only dealt with single dimensional arrays. What about multi-dimensional arrays? PHP provides only one function to this multiple array sorting – array_multisort(). The function takes in a number of arrays as arguments, each followed optionally by one or more sort flags. Let’s take a look at the following example of movies with genre and global box office revenue, and attempt to sort the movies by revenue.

Example 9:

$moviedata = array(
	array('movie'=>'Home Alone', 'genre'=>'Comedy', 'revenue'=>285),
	array('movie'=>'The Godfather', 'genre'=>'Drama', 'revenue'=>268),
	array('movie'=>'Finding Nemo', 'genre'=>'Animation', 'revenue'=>866),
	array('movie'=>'Star Wars', 'genre'=>'Sci-Fi', 'revenue'=>797),
	array('movie'=>'Grease', 'genre'=>'Musical', 'revenue'=>387),
	array('movie'=>'Ghostbusters', 'genre'=>'Comedy', 'revenue'=>238),
	array('movie'=>'Titanic', 'genre'=>'Drama', 'revenue'=>600)
);
 
$cols = array();
foreach($moviedata as $row) {
	foreach($row as $key => $value) {
		if( !isset($cols[$key]) )
		$cols[$key] = array();
		$cols[$key][] = $value;
	}
}
$data = $cols;
array_multisort($data['revenue'], $data['movie'], $data['genre']);
print_r($data);
 
/* Outputs:
Array
(
    [movie] => Array
        (
            [0] => Ghostbusters
            [1] => The Godfather
            [2] => Home Alone
            [3] => Grease
            [4] => Titanic
            [5] => Star Wars
            [6] => Finding Nemo
        )
 
    [genre] => Array
        (
            [0] => Comedy
            [1] => Drama
            [2] => Comedy
            [3] => Musical
            [4] => Drama
            [5] => Sci-Fi
            [6] => Animation
        )
 
    [revenue] => Array
        (
            [0] => 238
            [1] => 268
            [2] => 285
            [3] => 387
            [4] => 600
            [5] => 797
            [6] => 866
        )
 
)
*/

To be effective, array_multisort() requires that multidimensional arrays be arranged in a columnar fashion, which is done by the foreach block at line 12 in the example. After that, just call array_multisort() to sort the movie data, I define which columns I want to sort first followed by the next and so on.

You may notice that revenue is sorted in ascending order. If you want sort by descending order, just call array_multisort() with sort flags like so:

1	array_multisort($data['revenue'], SORT_DESC, $data['movie'], $data['genre']);

Well, that’s it. I hope this post helps you get started with how to sort arrays. Remember to check out PHP’s page on sorting arrays. Feel free to comment and contribute your tips on sorting arrays.

QGYMRRM2NK7K

Google Analytics Master Class is back in Singapore!

Eldee — Mon, 01 Mar 2010 03:01:04 +0000

Last year, I attended the first ever Google Analytics Master Class held here in Singapore. I had a great time. It was a half day packed with excellent presentations for both existing GA users and new people looking to adopt GA.

Well, come March 9, 2010, its back in Singapore! Not only that, folks in Kuala Lumpur, Malaysia will also get their own Google Analytics Master Class on March 11, 2010

This class is run by the Google Analytics and Website Optimizer team in Southeast Asia which is headed by the Vinoaj Vijeyakumaar, Customer Solutions Engineer, Google Southeast Asia.

Last year, they organized a great set of speakers from Google US and users of Google Analytics. Looking at the list of presentations this year, the one about mobile analytics should be an excellent topic. Getting analytics on mobile users is going to be the big thing in the coming years as more people consume websites and web services via handheld devices.

Another area I’m looking forward to hearing is Google Website Optimiser. I think this is a great tool for any webmaster to have in their arsenal. The presentations “Better Landing Pages with Google Website Optimiser” and “Price Testing with GWO – The Holy Grail of Marketing” should be interesting.

To find out more about this event, read Google Analytics Master Class is back in Singapore! And also visiting Kuala Lumpur this year! and sign up here for the Singapore Master Class.

Last tip for those of you attending for the first time, get there early or you’re going end up standing through the whole session.

Codeigniter: Handling errors

Eldee — Tue, 09 Feb 2010 04:19:53 +0000

As coders, I’m sure we all know the value of good error handling. So I thought a quick post about how Codeigniter deals with those pesky errors would be a good post.

The way I see it, there are 2 types of errors we have to work with. The ones which are displayed out in nice friendly text to your users, and the type which are hidden and shown only to you as the coder to figure out where something has gone wrong. CI provides the means to do both, thankfully.

System/Application Errors
Let’s start with having a look at how CI deals with PHP errors. By default, on a clean install, CI will display ALL php errors of all severity. So if you make a mistake in your PHP coding, you’ll see plenty of these…

CI uses PHP’s error_reporting() function to define the level of error reporting, and you can find this in the main index.php file in the root of your CI install. It’s the first function you see.

Instead of E_ALL, you can change it to any of the predefined error constant that PHP understands to suit your needs. Obviously, once your site goes live, you should change from E_ALL to E_ERROR to show only messages for fatal run time problems. This will hide all php errors except those that will halt your script execution.

So, if the error messages are hidden, how else can we tell if something is not working right? Well, CI can writes out any errors it encounters into its log file. You can configure your CI log file by going to the config.php file in your applications/config directory.

By default, the logs are turned off, so you should turn it on by setting the $config['log_threshold'] variable. Once enabled, the logs will appear in the system/logs folder of your CI install. You can set the location of your log file if you wish to keep your logs elsewhere by defining a path for the $config['log_path'] variable.

You may notice that the $config['log_threshold'] allows a few settings.

1 – ERROR
This will log down all E_ALL level php generated errors, HTML status code errors (like 404s) and any user-defined errors.
2 – DEBUG
In addition to ERROR messages, this will show messages which helps you to debug your CI application.
3 – INFO
This level will show all ERROR & DEBUG messages as well as any user-defined informational messages. CI doesn’t natively generate any INFO messages but you can do so in your application.
4 – All Messages
This will show all log messages. I could not see any difference between this level and level 3 setting. If you do know a difference, post it into the comments.

In addition CI’s natively generated messages, you can define your own messages by calling the log_message() function. You can call this anywhere in your code, and you can set what level of messaging (error, debug, or info) you want logged. (See CI’s guide on how to use the log_message() function.)

Displaying Errors
Next, let’s look at what options are available if you want to display error messages to your user. CI provides 2 functions for this purpose – show_error() and show_404(). (See CI’s guide on how to use the show_error() and show_404() functions.)

1
2
3

if (SHOW_ERROR==true) {
	show_error('This is where your error message will appear surrounded by this default template.');
}

When you call show_error(), you will generate page that looks like this. The layout can changed by modifying this file application/errors/error_general.php)

show_404() works in a similar way, except it will display the application/errors/error_404.php layout and will throw a HTTP status code of 404.

Both of these functions are breakpoints and will stop the execution of your script, so any functions that follows these will not be processed.

That’s it. Feel free to comment.

Pentaho: A beginner’s perspective

Eldee — Thu, 07 Jan 2010 09:28:23 +0000

For the last 6 months, I’ve been buried deep in the world of Business Intelligence (or BI for short) and the mind-numbing field that is Data Warehousing and Data Mining. Given that I’m not really a database person, and I only use MySQL with my PHP development, this was a whole new experience for me.

I’m writing this post because when I first laid my eyes on Pentaho, I was confused as hell. What I didn’t know was that Pentaho is not a single product, but a collection of open-source tools that have been meshed together to form a suite for BI. All the documentation and writeup at the website on the different aspects of Pentaho just didn’t gel together, leading to a very steep learning curve.

Hence, I’m just going to briefly cover the various aspects that makes up Pentaho, so that if you are just starting to use Pentaho, this would hopefully give you a good overview.

Pentaho is available in two flavors, a paid commerical version and an open-source community version. Obviously, if you opt for the paid version, you get all the expert help and support so things should be straightforward. But, if you are unfornate enough like myself to be stuck with the community version, you have to try to make sense of everything on your own.

If you visit the Pentaho Community version’s homepage, you should see there are essentially five projects that makes up the Pentaho Platform.

What’s confusing is that the community version website shows one naming scheme which is slightly different from what folders in SourceForge presents, or the link points you to an older version. All this confusion is really a sign of the work in progress by the Pentaho team to try to integrate the tools into a cohesive suite.

The best representation of Pentaho is to look at how the files at SourceForge is organized.

Data Integration (PDI)
In the world of Data Warehousing, there’s a process called ETL which stands for Extraction, Transformation and Loading. This is really the process of compiling data from various sources, cleaning it up and stuffing it into the Data Warehouse (which is just another database system).

The Pentaho Data Integration (PDI) tool (which is listed as Kettle project at the community version website), primarily contains the Spoon application, that provides a graphical model-driven approach to ETL. You would use it to craft your own ETL using the library of transformation processes.

Here’s an example of a simple process to load records from one MySQL table into another.

In my case, although I was quite impressed by how the tool works, I still ended up creating my own ETL process using cron and command-line PHP. It was really a time issue that led me to use PHP for the ETL process. I just didn’t have the time to learn how the 100+ transformation work and master it for the project.

Report Designer (PRD)
The Pentho Report Designer (PRD) is front-end application for building and publishing reports to the Pentaho platform. It publishes in a new file format .prpt which the Pentaho server recognizes and knows how to intepret it to display.

The tool works very much like other WYSIWYG-based reporting tools like Microsoft Access reporting or Crystal Reports. You define your database connection using JDBC/JDNI, and drag reporting elements like text field etc onto the report, and tie them to the corresponding database field.

Business Intelligence Server
This is the core of Pentaho. It is made up of 3 parts – the core platform itself, the BI components and the presentation layer.

The core platform is where all the low-level functions occurs, such as database connection management, solution repository, user authentication, task scheduling, logging etc.

The BI component part is where the various BI engines are plugged into, such as the reporting engine, the OLAP engine, the ETL engine and the Data Mining engine. This is where all the churning of the data occurs and spits it out to presentation layer.

The presentation layer is where the Pentaho users will interact with platform, to view reports, dashboard, perform analysis etc.

Design Studio
The Pentaho Design Studio (PDS) is essentially an Eclipse IDE with a Pentaho plugin that is used to create and maintain action sequences that work within the Pentaho platform. Action sequences is a predefined set of actions which can be triggered by a user’s action, a schedule or any other action sequence. Action sequence can be as simple as “display the report” to as complex “find all overdue orders and send out a reminder email”.

Mondrian or Pentaho Analysis Service (PAS)
PAS or Mondrian provides OLAP capabilities to the Pentaho platform. When we talk about BI and Data Warehousing, the most common term you hear is ’slice-and-dice’, well, this is essentially what OLAP enables you to do within Pentaho. By representing your data in a multi-dimensional cube, you can easily drill-down, drill-up, slice or dice the cube to gain insights.

Once you have defined your cube, you can publish it Pentaho server, and it will be available under the ‘New Analysis View’ option.

I know this post doesn’t cover much in detail and I’ve skipped a few components like Pentaho Metadata and Weka. What I’ve listed is really what I’ve used. Nonetheless, I hope this overview of Pentaho will be useful and helpful to someone at least. Feel free to comment (or correct anything I might have gotten wrong).

Lastly, Pentaho is by no means the only open-source BI tool available, here’s a list of other BI tools.

If you would like to get yourself a book, I would recommend Pentaho Solutions by Roland Bouman and Jos van Dongen. It would get you started in the right direction.

Site Update: 2 years old!

Eldee — Sun, 29 Nov 2009 03:36:09 +0000

Come December 4th, this site will be 2 years old! How time flies. To mark this occasion, I’ve revamped the look of the site, and will continue to tweak various things in the days ahead.

Looking back, the site got off on a slow start, as I forgot to turn off the privacy settings in Wordpress and was wondering why there were still no traffic after 3 months. Once that problem was fixed, the Google-love came rushing in!

So far, I’ve had a real blast running this blog about PHP. Like all things in IT, you can never finish learning, and the same goes for PHP. I’ve used PHP on and off for my work in the last 10 years, and there are still things about PHP that I have to catch up on, and some old PHP habits to unlearn. Either way, it’s been a great experience.

5 most visited posts to date
To date, these are my 5 most visited posts.

I’m most surprised to see that traffic keeps coming for the post about alphanumeric checking.

Top search engine
Google is the top traffic contributor to this site (no surprise there), but I am getting almost ALL my search traffic from Google, with Yahoo followed by Bing, in the very distant 2nd and 3rd position. Not sure if this a good thing….

Top 3 browsers

Mozilla Firefox
Internet Explorer
Google Chrome

Almost 70% of you guys are using Firefox. Firefox used to be my default browser, but not so anymore. Since version 3.5, I’ve had problems with Firefox and memory problems. I’ve switched to Chrome and liking it a lot more. Firefox is still great for the plug-ins I need, but Chrome is now my default browser. Chrome is just blazingly fast.

Coming up…
Being a technical guy, I’m not really a good writer, so crafting these posts is a lot of hard work for me. Nevertheless, I will try to push out at least one post per month. I’m also planning to branch into topics about Pentaho, since that’s what I’m spending most of my work time on these days. I’m quite sure there are some insights that I’ve learnt that might be useful for someone out there.

Thank you all!
Lastly, I just want to thank you all for your support and the wonderful comments to my posts. Keep them coming!

Codeigniter: Intergrating OpenFlashCharts

Eldee — Fri, 06 Nov 2009 05:12:34 +0000

Yes I know, it has been some time since I last posted anything on the site. Things have just been crazy at work, trying to get up to speed on using Pentaho for a major project. In fact, I might start posting some Pentaho related topics in the future. There’s definitely a need for more help and guides on using Pentaho for beginners.

Anyway, one of the things on the project was to pull data from Pentaho and display it inside OpenFlashCharts on a CI platform. If you don’t know what OpenFlashCharts is, go visit the website. It’s a pretty awesome kit.

There’s been quite a bit of chatter on the net about integrating CI with OpenFlashCharts, but ever since version 2 came out there have been more questions about how to do it.

In the new version of OpenFlashCharts, it uses the JSON format to describe what type of chart to render in the flash object. OFC comes with a bunch of libraries (in various programming languages) which will generate the JSON format for the flash object. For PHP, the kit comes with the generic PHP version and a PHP5 version.

Somebody by the name of Thomas did managed to stitch OpenFlashCharts 2 with CI and he posted it up on the CI wiki. So kudos to Thomas (whoever you are) for making my life easier. If you like you can download his library and give it a spin.

For Thomas, he used the PHP5 libraries of OpenFlashCharts, which unfortunately is a bit incomplete. I wasn’t able to generate more advance graphs such as Hollow Areas, Dotted lines etc. The flash object gave me an ‘infinity’ error. After some investigation, I found that the OFC PHP5 libraries are not generating the same JSON as the generic PHP version. Taking a page out of his book, I modified his library to work with the generic PHP version instead.

One advantage of doing this is that suddenly, you can apply all the tutorial codes on the OFC website because they were written for the generic PHP library and not the PHP5 version.

Download:

So, download the zip file and extract the files to the relevant folders of your CI install. The assets folder should go to wherever you put your stuff like images and javascript files. Just make sure you change the view to reflect the correct path. I put my assets in the root of my webserver folder, and I access my CI through http://dev.ci/.

When I run the http://dev.ci/charts, I would get this graph with 3 data lines.

So how does it all work?
The OFC library, php-ofc-library and the OpenFlashChartLib.php can now be accessed by calling the load library call.

$this->load->library('OpenFlashChartLib', NULL, 'OFCL');

If you look inside the view folder for chart_view.php, you can see where the OFC flash object is getting its JSON feed from, http://dev.ci/charts/get_data.

Inside get_data() function of the charts controller, it’s basically the same code as the tutorial at http://teethgrinder.co.uk/open-flash-chart-2/data-lines-2.php

The difference here is that instead of calling the

$chart = new open_flash_chart();

I’m now doing

$chart = $this->OFCL->create('open_flash_chart');

to perform the same instantiation but through the OpenFlashChartLib (OFCL) library.

So, just change all the object instantiation call accordingly, and the graph should show up nice and neat.

Here’s Dilbert to close out…

Codeigniter: Setting up multiple sites on one install

Eldee — Wed, 19 Aug 2009 08:19:40 +0000

It’s been awhile since I last posted about Codeigniter. In this post, I’m going to walkthrough how I setup a CI install that can support multiple sites. This is by no means the only way to do it, but it’s what works for me.

CI’s default folder structure is really geared towards one site domain, and having both the application folder and the system folder visible to the browser is not exactly a secure approach.

By configuring your install to support multiple sites, not only do you make the updating of the CI core easier, but also make the CI install more secure as a whole. So without delay, let’s get started…

In this walkthrough, I’m setting up my multiple CI sites on my local XAMPP install, which is on my M:\ drive. Your Apache setup might be different, so do take note of my settings and adjust according to your own web server environment.

I’m planning to setup two sites just for illustration – http://dev.ci/ and http://live.ci/.

Codeigniter default folder structure
When you first unzip the downloaded CI file, you would get something like this:

You would have set your Apache’s configuration to point to your CI folder (which is M:\xampplite\CodeIgniter_1.7.1 for me) as the document root. Once you hit the site in your browser, you would get the standard welcome page.

If you have setup the default CI before, you may know that within the system folder are a bunch of core folders which you don’t normally need to touch and the application folder which will house all your codes for your site. You may also have noticed the index.php file in the root of the CI directory, which you didn’t really need to touch before but will become crucial in setting up multiple sites.

Adjusting the application folders
First thing I do is to move the application folder out of the system folder to the same level as the system folder.

Since I’m setting up to run two distinct sites sharing the same CI core, I will make another copy of the application folder and rename both folders to reflect the different sites.

Create the web root folders
Next, we would need two folders which will be the website’s root folders. This is how I setup mine.

Make copies of the index.php file located in the CI’s root folder (ie M:\xampplite\CodeIgniter_1.7.1) into each of the htdocs folder. In this case, I would have one index.php in each of my htdocs_ci_dev and htdocs_ci_live folders.

Open index.php file for each site and edit the following lines.

At Line 26:
	$system_folder = "system";
Change to 
	$system_folder = "../system";
 
At Line 43:
	$application_folder = "application";
Change to 
	$application_folder = "../app_ci_dev"; (for the htdocs_ci_dev)
or 
	$application_folder = "../app_ci_live"; (for the htdocs_ci_live)

Configure Apache virtual hosts
Once that’s done, the last thing to do is to setup the Apache virtual host configuration of my XAMPP install.

My Apache virtual host configuration looks like this:

Don’t forget to edit your local hosts file so that your system recognizes the dev.ci and live.ci domains.

Once you fire up your Apache web server, you should be able to load either site accordingly (*fingers crossed*)

Renaming the system folder
If you want to go further you can rename the system folder to reflect the different CI versions. This way, when a new version of the CI core is released, you can configure your sites easily by just changing $system_folder parameter in the index.php file (Line 26) for each site.

Conclusion
I think you will agree that with this setup, you can easily expand the CI install to more sites. There is also no doubt that this is more secure than the default CI setup, as the only folders which are exposed to the browser are the htdocs folders – all the application and system folders are no longer accessible through the web server.

Of course, this is not the only way you can configure CI for multiple sites/applications, check out some of these alternatives:
- CodeIgniter Wiki – Multiple Applications
- Michael Wales – CodeIgniter Advent: Day 1
- Multiple codeigniter sites, using symlinks

Please feel free to give your thoughts and feedback. Thanks!

WebPageTest: The little known but great webpage benchmarking tool.

Eldee — Fri, 31 Jul 2009 15:43:19 +0000

When it comes to testing how fast a webpage loads, many of us are familiar with Firebug/Yslow tool (installable as a Firefox browser plug-in). Firebug/Yslow is a fantastic plug-in for Firefox, it gives a wealth of information about any webpage as your browser renders it. This is a must have for any webmaster’s toolbox. Unfortunately, using Firebug/Yslow is very ad-hoc, which is great for troubleshooting, but tedious when you want to export data or take more than 1 snapshot.

After some searching I came across another tool – webpagetest.org. This site tests your url and presents its findings and recommendations on optimizating your webpage, with some nice Firebug/Yslow-like waterfall diagram and charts. Check out the results for this site as tested from Dulles, Virginia in the US. Good stuff right?

What’s really great about this is that Pat Meenan, the man behind this tool, has generously made available for download a desktop/browser version and a hosted version. The desktop version is not much different from the Firebug/Yslow tool, but the hosted version is what I found most useful and will cover in this article.

With the hosted version, I can setup my own webpagetest.org site within my organisation’s network and open it up to my co-workers to use. Any test results can be shared by easily posting a link, or browsed from the Test History tab. The package itself contains the website which is written in PHP and a tester program. With the PHP source code, I can easily shape the tool to our requirements.

Setting up your own hosted WebPageTest
If you haven’t already done so, go download a copy. With it, you can choose to deploy it in a single machine configuration or you can opt to split the website away from the tester. This will allow you to setup a one website with multiple testers configuration.

The tester program requires the IE browser, hence will only work on a Windows platform. It tests by firing up the browser and recording the data as the page renders. The website however, being PHP can function within either Linux or Windows platform, but requires Apache 2.2+ with PHP 5 installed and mod_rewrite enabled.

Single machine configuration
The easiest way to get started is to drop the contents of the package into the C:\ drive.

Configure your Apache to point the document root to C:/Web Site/content folder. If you, like me, had problems loading the site, make sure you check that the Apache modules – mod_rewrite, mod_expires and mod_headers have been enabled.

Once you have the site setup, the next thing to do is to prepare the tester program, called urlblast.exe. Open the C:\Web Site\urlblast.ini config file and look for the following:

If your site is NOT running on http://localhost/ or http://127.0.0.1/, then you need to change the highlighted line to your site’s URL.

Once that’s done, save your the ini file and execute the urlblast.exe program. The first time this program starts, it may open a hard disk defrag window. Just let it run until its done. Once the defrag is done and your urlblast program window is sitting idling, you can go to your site and post an URL to test under the “New Test” tab.

If all goes well, your IE should fire up by itself and load the page that you want to test, and then close itself. By default (assuming you didn’t change any test parameters), this will happen twice as the program tests for “First View” loading followed by “Repeat View” loading.

If you opt to change the default folder location from C:\Web Site to something else, you just need to update your apache conf file and change the settings within locations.ini in the content/settings/ folder to reflect the new location.

Multiple machines configuration
In many cases, a single machine setup is good enough. But, if you have different locations within your network you want to test from, or you want to test different connection speed from the same location, you would need to setup multiple testers.

Assuming a setup like above, with one machine running the WebPageTest website, accessed through http://webpagetest/ and two machines as testers, Test1 and Test2. It is important that the website be setup so that it can be accessed from another machine. The 2 tester units needs to be able to see the website. In this case, a ‘webpagetest‘ local domain name was setup. Alternatively, you should be able to access the site through the website’s IP address.

First, create two new folders inside content/work/jobs folder called Test1 and Test2 to reflect the 2 tester location. This is where the jobs are queued for each tester.

Next, open the locations.ini file in the content/settings/ folder and add 2 new tester locations. Notice that the localDir parameter is set to the respective job folder.

You should be able to see these new location reflected in the website.

What’s left is to setup the 2 tester units. Copy the pagetest.dll, urlblast.exe, urlblast.ini and the log folder to a folder (assuming its C:\Web Site) on each tester machines.

Open the urlblast.ini for each tester and modify the Url Files Url and Location parameter. If you have changed the “Location Key”, make sure it matches the key specified in the location.ini on the website machine. For tester 1 location, it should be like so. Make the change to the tester 2 ini file also.

To start, just activate the urlblast.exe program on each tester machine, then go to the website and specify a url to test and choose either tester locations. If everything is ok, IE on the designated tester should fire up and start loading the webpage you want to test.

That’s it. Once I got this setup, the tool has been a great help to my team as we troubleshoot and improve our page loading time. I hope it will be for you too.

Check out this great video tutorial from Artz as he guides you through how to interpret the graphs and charts. Also, do visit Pat’s blog for tips and insights on webpage optimization.