Progress bar using HTML, CSS, PHP and MYSQL

Hi friends, this tutorial is for dynamic progress bar with the help of html, css, php and mysql.

Actually I had a problem to make a progress bar with percentage by comparing database (filled and unfilled data).

This code for all who have the similar problem.








index.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dbname";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}


$sql1 = "SELECT * FROM table1, table2 WHERE table1.user_id = table2.user_id and table2.user_id = 103";
$result1 = mysqli_query($conn, $sql1);

while($row = mysqli_fetch_row($result1)){
    $empty_count = 0;
    $count = count($row);
    for($i = 0; $i < $count; $i++)
        if($row[$i] === '' || $row[$i] === 'NULL')
            $empty_count++;
        $percent = (int)(100*(1-$empty_count/($count-1)));
}

?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="myProgress" style="width: 100%;background-color: #ddd;">
<div id="myBar" style="width: <?php echo $percent.'%'; ?>;height: 30px;background-color: #4CAF50;text-align: center;line-height: 30px;color: white;">
<?php echo $percent.'%'; ?>
</div>
</div>
</body>
</html>

Description : -

First we need to create database name as dbname and create two table table1 and table2.

Then create a file name index.php and copy this code and paste there and save it.

This code calculate the percentage of the filled fields as compare to total fields.

There is a html code which shows the progress bar with the percentage coming from the database.


Comments