Twitter Bootstrap is the very popular CSS template framework best for modern responsive web design. Bootstrap provides various templates of website design materials including table list, form, content grid, button, graph, model, and so on. In this tutorial, we will take a feature of bootstrap to customize for more user-friendly. Bootstrap only provides the template of table design with static data. With this template, we will make it more flexible with PHP and Ajax. Let’s see how to make it works.

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!

As most of us have experienced with Facebook, a today-very-popular social network in the world, uses the very user-friendly and most practical features for their social network web system. This tutorial will take a feature, load more data on scroll, which allow users to be able to see more data by just scrolling down. Most of web systems use this feature to display the huge data content or data list with the specific amount of data per scrolling. Doing this will help their website system load data smoothly avoiding of load all data at the first page load.

The common and necessary function that we usually see on almost websites is about searching suggestion. Auto suggestion is very useful and convenient for the users when they are trying to find something in a website by just typing some keywords in the searching box normally placed right in the website header block. Then, the suggested keywords are listed down as the drop down list right below the searching box helping users to use the right keyword to get the desired result. There are some options that we can show the drop down data list by showing the recent keywords, popular keywords, recommended keywords, sorted keywords, etc. Actually, there are many libraries or free script that can be implemented to our website. However, having our own functions is the most preferable way of being the challenging web developer. Therefore, in this tutorial, we show the auto suggested data by recent keywords (order by datetime).

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.