Creating responsive progress bar using PHP, Bootstrap, jQuery and AJAX

In this blog post, I will demonstrate making a responsive progress bar using PHP, Bootstrap, jQuery and AJAX.
Recommended directory and file structure for this tutorial

  • /progressbar
    • /server
      • server.php
      • progress.txt
    • /public
      • client.js
    • index.html

Steps for creating a progress bar

1. Create a directory in your /var/www/html directory

Name this directory of your choice. For this tutorial we will be using ‘progressbar’ name for this directory. This directory will hold the sub directories and files required for our demo.

2. Create /progressbar/server directory

This directory will contain the files which are not public and are used on the server.

3. Create /progressbar/server/server.php file.

Open up progressbar directory and create a server.php file there. This file is reponsible for sending JSON response to the AJAX requests sent from the client.

4. Create /progressbar/server/progress.txt file

This file will hold the ‘actual data’ that will be read by the server.php file and sent to client.js file. In our example this data will be the percentage of progress complete.

5. Create /progressbar/public directory

This directory will contain the files which are public and are accessible from the client’s browser.

6. Create /progressbar/public/client.js file

This file will be included in the HTML page rendered on the client’s browser.

This file is responsible for sending AJAX requests to the server and using the data sent from the server to show on the web browser.

7. Create /progressbar/index.html file

This is the web page that will show the progress bar on client’s browser.

Source code

Download the source code from this link.

server.php

server

client.js

client

index.html

index

progress.txt

Write any percentage as you wish in this file. Example: ‘10%’ (without quotes).

How to run this tutorial

 1. Open up your browser and go to http://localhost/progressbar/index.html

2. You should see the progress bar having width equal to the progress.txt file’s content.

3. Now, open the progress.txt file in your text editor, write percentage of your choice, and save it.

4. As soon as you saved the file, the changes will be reflected in the progress bar on the index.html (without refreshing the page).

5. That’s it ! You have just created a responsive progress bar.

How this code works

I have added comments at appropriate places in the code to make it easy to understand.

However, I would like to share the reason why I have not included a code to automatically update the progress.txt file. The reason is to demonstrate that in this example the client and server are exchanging requests an responses only when needed and not on some predefined time interval.

After analyzing the code you must have noticed:

The AJAX request is sent only in following scenarios:
The page is loaded for the first time. (timestamp parameter is set to null).
When a response is received from the server. (timestamp parameter is set to the timestamp sent by server, which then become older timestamp for the server).

The server reads the progress.txt file and responds only in following situations:
It receives the first request from client (timestamp parameter is set to null).
When the progress.txt file is saved (the new timestamp is greater than the older timestamp).

This is very important from perspective of developing a efficient web application. As you can see that the AJAX requests and JSON responses are made only when required and not on a predefined time interval. This helps in reducing the unnecessary load on the network.

Of-course you can automate the update of progress.txt file depending on your needs and using the file handling concepts of PHP.

If this tutorial helped you then don’t forget to share this with your friends. Sharing is caring. 🙂

Don’t hesitate to leave your comments and share your views about this tutorial.

3 thoughts on “Creating responsive progress bar using PHP, Bootstrap, jQuery and AJAX

  1. Excellent stuff! Thank you! I’m having trouble understanding how to performing an action after the script reaches 100%? I would like to redirect to another url. Would you mind pointing me in the right direction? Once again – thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *