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!

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.

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.