When your page performs long tasks it's very important to let the visitor know something takes a little longer than expected and patience is required. Many of them will tend to reload or even close the page thinking it's buggy or blocked. To avoid that and ensure they get the message you can use a progress bar as an indicator.

This can be easily done using javascript and may look like a silly post to you but it's actually harder than you think to represent a running task with a progress bar. You have a lot of examples on the internet but when you try to chain a real script running a real task with the actual progress bar it gets complicated.

Normally, in PHP, whatever you echo will be sent to the browser only when the script finishes it's job and not progressive. Let's consider the following loop as an example:

for ( $i = 0; $i < 10; $i++ )
{
	echo $i . "<br>";
	sleep(1);
}

Running this code will keep your browser busy for 10 seconds without echoing anything. So how are we supposed to display a progress of a task if the content is made available only when the script finishes?

First, let's create the code for our progress bar. We'll use pure css to display it. No background images or flash funky things, just 2 divs and some css code. One div will serve as the wrapper and will have a border to represent the progress container. The other div, placed inside the first will serve as the progress metter and will have a different background color.

<div class="progress_wrapper">
	<div class="progress" style="width:0px;"></div>
</div>

CSS code:

.progress_wrapper {width:300px;border:1px solid #ccc;position:absolute;top:200px;left:50%;margin-left:-150px}
.progress {height:20px;background-color:#000}

It's very important to make our wrapper div positioned absolute. If you're having problems keeping it at a very specific place on your page you can place the code inside another element with a relative position. This way you will change the top, left coordinates to that element instead of the page body.

As you can see, I used 50% as the distance from the left coordinate to the start of the progress bar. Adding a 'margin-left' of minus half of the element's length will center it.

You're probably wondering why I'm using the absolute positioning. Well, what if I tell you that PHP can be tweaked to send content to the browser even if it's job didn't finished yet? With this possibility in mind, we can send multiple instances of the same code and, having an absolute position, place them on top of each other. Basically, the current progress bar will be under the next and so on until it reaches an end.

We will have to use 'ob_start' to turn on output buffering before the loop, 'ob_flush' and 'flush' to send the content to the browser after each iteration:

ob_start ();
for ( $i = 0; $i < 10; $i++ )
{
	echo $i . "<br>";
	ob_flush();
	flush();
	sleep(1);
}

Having this working as needed, it's time to prepare our content and place it inside the loop to actually display a working progress bar:

ob_start ();

$width = 0;		//	the starting width
$percentage = 0;	//	the starting percentage
$total_iterations = 10;	//	the number of iterations to perform
$width_per_iteration = 300 / $total_iterations; // how many pixels should the progress div be increased per each iteration

for ( $i = 0; $i <= $total_iterations; $i++ )
{
	echo '<div class="progress_wrapper"><div class="progress" style="width:' . $width_per_iteration . 'px;"></div></div>';
	$width += $width_per_iteration;
	ob_flush();
	flush();
	sleep(1);
}

Following the same criteria it's easy to add an indicator to show the percentage done, a background image to pretty up the bar a little bit and many other things.

Here's a demo of the script running and also a download link.

Read more ...

We just released a small module (Speedy - done in a few hours thanks to Webber and it's flexibility) which is supposed to make your pages way faster by reducing the number of HTTP requests a browser has to satisfy when loading a page.

Basically, the module will capture the main content being sent to the browser by Webber and modify it by combining all the javascript and css files into one file, all the css files into one file as well and send those 2 to the browser instead of the original ones. For example, if you have 6 js files loaded in your page and 3 stylesheets, speedy will capture them before the page being rendered in the browser and create only 2 files. This way you cut down the number of requests from 9 to 2. It also adds far future expires headers to instruct the browser to cache them for a better and faster browsing experience.

The module is very easy to install. At the activation point, it gives you the option (also editable from the module admin interface after activating) to specify how exactly should speedy change your content. You can chose to minify and/or gzip your page or javascript and css files and you can also specify if the files should contain far future expires headers which will make them cacheable by the browser which is a very good thing since it really makes your website fast.

In my humble opinion, there's always room for web page optimisation or performance tuning. The advantage is huge since you and your team can keep and maintain a very well structured set of files and not worry about numbers since speedy will reduce them without modifying any of them. Speedy creates it's own file stored in a local temp folder and uses those files instead of the original ones.

For those of you with a codeigniter background I will continue this post with a small tutorial on implementing PHPspeedy (what our module uses) into your websites without having to use this module or even Webber at all.

I usually keep a folder inside my codeigniter projects named "scripts" where I place anything that can't be called a library or helper. Assuming you have already downloaded PHPSpeedy and placed it in your folder of choice we will continue by creating a hook (that's right, enable them from your config.php file) which will add a "display_override" action in order to capture the content before it's being sent to the browser since PHPspeedy needs to manipulate it and make it's own version.

For Webber, we modified the 'Hooks' library to permit us to load hooks directly from a given module but, for this tutorial to achieve it's goal, you will have to create a new PHP file (name it whatever you like) and place it inside 'system/application/hooks' folder. This will be the hook file to capture the content and run speedy. As per instructions, the new file must contain a class and at least one method to be called by the hooks library that Codeigniter triggers at every load.

class Speedy {

	function optimize ()
	{
		$this->CI =& get_instance ();
		//	catch the output and store it inside a variable
		$output = $this->CI->output->get_output ();
		//	load PHPspeedy
		require ( '/path/to/speedy/php_speedy.php' );
		//	send the new content
		$compressor->finish ( $output );
	}

}

With the hook saved and ready to function we only need to save our new hook to the hooks.php config file (system/application/config) and "the THANG" should be running:

$hook['display_override'] = array
(
	'class'			=> 'Speedy',		//	the name of the PHP class
	'function'		=> 'optimize',		//	the function/method to execute
	'filename'		=> 'speedy.php',	//	or however you used to name it :)
	'filepath'		=> 'hooks'		//	the path to your hook file
);

Read more ...

Hello everyone! As you can see, we like keeping you posted with nothing but good news. We released the blog module this week.

The Blog module is a powerful PHP application which can be used widely from a simple blog to a full CMS with advanced features like code snippets, smarty tags online template editor and many other things. Our site is 100% built with the blog module and, as you can see, we managed to put together a quite complex design (featured on most of the CSS galleries) so I guess we can call it a CMS as well. Read more ...

Happy to announce that we released a new module today: user notes. This tiny module was done in a Saturday and it's more like an example highlighting some of the few features of Webber but also the simplicity in creating new modules. We will keep releasing such plugins and modules to make everyone familiar with the code standards. Not to mention that we're working on another 7 modules :) "The user notes module is a very simple notes manager which allows you to save your important notes easily. User notes is an organizational module developed to assist your members in organizing their notes or study materials." You can check it out at the following link: http://www.drsoft.com/p/User_notes-57.html Read more ...