Hey Technoz, In this tutorials we are going to learn how to calculate page visit counter and Image Hit Counter by using PHP and MySQLi. This Visit Counter will have great impact on the websites. It enables you to see how popular your site. If visitors can see that your site is popular with others, it may encourage them to spend more time exploring the content.
Creating database
A database need to be create to store the information about page visit counter and image hit counter
So lets create the database by using following queries. The following SQL creates counter table which consist of id, visiters and imghit columns.
CREATE TABLE `counter` ( `visiters` int(255) NOT NULL, `imghit` int(255) NOT NULL, `id` int(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Dumping data for table ‘counter’
Note : It is important to set all values of the fields equal to zero. Why? Because to start counter value from zero.
Now lets do this task by using following query.
INSERT INTO `counter` (`visiters`, `imghit`, `id`) VALUES (0, 0, 0); COMMIT;
First, to make it convenient, we will create a new PHP file for database configuration named dbconfig.php that holds all configured parameters:
<?php
$con = mysqli_connect("localhost","root","","technopoints");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
Code of Visit Counter
The following code index.php is used to build user interface of Visit Counter and Image hit Counter. Also it consists of script to increment and store the Visit counter value. If visitor hit the image it redirects to the imgcounter.php .
<!DOCTYPE html>
<html lang="en">
<?php
include 'dbconfig.php';
$qry1 = "SELECT * FROM `counter` WHERE `id` = 0";
$result1=mysqli_query($con,$qry1);
$row1 = mysqli_fetch_array($result1, MYSQLI_ASSOC);
$count = $row1['visiters'];
$count = $count + 1 ;
$qry2 = "UPDATE `counter` SET `visiters`='$count' WHERE `id`=0";
$result2=mysqli_query($con,$qry2);
?>
<head>
<style>
body {
background: #4e397a;
color: #fff;
font-size: 22px;
}
span {
display: inline-block;
padding: 6px 6px 4px;
border-radius: 3px;
background: #b09dc4;
margin-right: -2px;
}
.center {
text-align: center;
width: 50%;
margin: 20px auto;
}
.message {
color: #ccc6e3;
font-family: Verdana;
font-size: 12px;
}
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<script></script><center>
<?php
$numlength = strlen((string)$count); ?>
Visit Counter<?php $count;
$stri = (string)$count;
?>
<div class="center">
<?php $i=1; for($i;$i<=$numlength;$i++) { ?> <span><?php echo $stri[$i-1];?></span> <?php } ?>
</div>
<div class="center message">
This Counter Shows Page Visit Counter
</div>
Image Hit Counter
<br><br>
<a href="imgcounter.php"><img src="img.jpg" class="img1" alt="Paris" style="width:30%;"></a>
<br>
Views: <?php echo $row1['imghit']; ?>
<div class="center message">
This Counter Shows Image Hit Counter
</div>
<br><br>
</center>
</body>
</html>
The glimpse of the above code is shown in the following snapshot.
Code of Image Hit Counter
This code imgcounter.php is ignited by index.php . The job of this code is to increment the Image hit counter and redirect visitor to the index.php page. These process runs behind in visitor’s eyesight.
<?php include 'dbconfig.php';
$qry1 = "SELECT `imghit` FROM `counter` WHERE `id` = 0";
$result1=mysqli_query($con,$qry1);
$row1 = mysqli_fetch_array($result1, MYSQLI_ASSOC);
$count = $row1['imghit'];
$count = $count + 1 ;
$qry2 = "UPDATE `counter` SET `imghit`='$count' WHERE `id`=0";
$result2=mysqli_query($con,$qry2);
header('Location:index.php');
?>
The glimpse of the above code is shown in following snapshot
In this tutorial we have learn to create visit counter and image hit counter and in upcoming tutorials we will learn to create unique visit counter. So make sure you have connected with us via Subscribe button.
If you have any doubts regarding to this tutorial feel free to ask in the comment section below.
To catch even more knowledgeable and easy understandable tutorials please subscribe to get email notification.