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.

Admin Panel or Back-end site is used to manage and monitor the client or front-end side of the web system. Online user system is very useful to monitor the users to know who is being online, what page they are in, how long have they been online, and so on. With this function, the administrators will be able to monitor the activities of their users by just check the use online status. This feature is very important and necessary for advanced web system like Online Trading System, Online Market System, Online Game System, and other online systems. This feature is generally used with Risk Management System of the CRM of the advanced online web system to monitor the users’ activities.

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).