Pre-loading technique is very convenient for users when the system needs some times to retrieve data from the server. It makes the user understand that the server is still busy or need some times to get the data. The technique is commonly used with Ajax request dealing with database to load new data and to refresh a specific content or block. In this tutorial, we will share about the pre-loading technique used by Facebook web application. When we talk about Facebook, you will notice about something we usually see when scrolling down the page and when we refresh its page. Its new feed/content loads using a pre-loading technique to inform its users that the feeds or text content is still loading and wait until it finish its loading. Some of you may also think Facebook may use image with GIF type for displaying that animated pre-loader. In fact, that’s not! There is a trick you should know because it’s very nice and easy. Let’s see how to make it works without GIF image!

It is very common to have the list exportable to save the data from the database to local machine. Doing this with online web list data is not that hard. We would like to recommend using phpExcel to get this work done. However, this tutorial not only introduce that library but also introduce how to using that library dynamically meaning that create your own library to work with the existing library. What does using that library dynamically really mean? To answer this question, let’s suppose there are 4 table lists in our website with different data like customerinfo, customerlog, songlist, and newslist. Therefore, using that library dynamically means having a standard php file containing our own library and be able to be used for all data list type by just identifying the list type.

List navigator is the most important and convenient tool for showing the data list view. This will help if there are hundreds or even thousands of data to be display in list. The list navigator helps the users to easily navigate the list rows page by page and also can go to the specific page they want to go. Also, user can customize the number of data to be displayed per page which is very convenient for their laptop, PC, or tablet display.

This tutorial will direct you to create your own data list navigator without refreshing page using Ajax List Navigator.  This will also requires you to understand each part of the scripts to fully implement to your page. Once you understood, you will be able to use this function in every page your wish to have the data list navigator. Please follow the instruction carefully.