PHP MySQL image hit counter
I am new to PHP and am working on a counter. The counter works fine, but now I want to convert numbers to images.
I created 12 images 0-9, spacer and comma.
I searched high and low to figure out what I need to do to convert the format of numbers to images and had no success. So far all I've found is to do a basic hit counter using only files, PHP / MySQL and how to display an encrypted image using PHP / MySQL.
So, the question is: How do I tell this code to show images instead of each number?
Example of current PHP result: Hit: 2,435
I want my PHP to get the total number of hits (example) and then take and replace 2435 with the following code:
<img src="img/2.png"><img src="img/comma.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png">
Note. I use a lot of notes in the code that I show here. This way, any new coders can more easily understand the displayed scripts. I'll add my final / completed code at the bottom of this post so that everyone can see the final product when they find a solution.
This code is completely fictional as a text hit counter
// Begin open SQL connection to database
$concount = mysqli_connect("site","username","password","database");
// End connection to database
// Begin update number of hits
mysqli_query($concount,"UPDATE counter SET hits = hits + 1");
// End update number of hits
// Begin get number of hits
$hits = ("SELECT SUM(hits) FROM counter");
// End get number of hits
// Begin show number of hits
$result = mysqli_query($concount,$hits);
while($row = mysqli_fetch_array($result)) {
echo "Hits: " . number_format((float)$row['0']) . " ";
}
// End show number of hits
// Begin close SQL connection
mysqli_close($con);
// End close SQL connection
Edit: Below is the final output of my code. Note that the array in this script puts' at the beginning and end of the image array. (See next example)
Array ( [0] => ' [1] => 2 [2] => 4 [3] => 3 [4] => 5 [5] => ' )
So if I didn't want a broken image at the end of the air of my hit counter, I had to use them. I renamed my transparent image which I already planned to use on both ends to .png (see next example)
<img src="img/'.png"><img src="img/2.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png"><img src="img/'.png">
Final code This code is completely fictional as an image counter
// Begin open SQL connection to database
$concount = mysqli_connect("site","username","password","database");
// End connection to database
// Begin update number of hits
mysqli_query($concount,"UPDATE counter SET hits = hits + 1");
// End update number of hits
// Begin get number of hits
$hits = ("SELECT SUM(hits) FROM counter");
// End get number of hits
// Begin assign $hits an id
$result = mysqli_query($concount,$hits);
while($row = mysqli_fetch_array($result)) {
$totalhits=("'" . $row[0] . "'");
}
// End assign $hits an id
// Begin get id for number of hits, split the string into array, and assign id to numbers
$arr = str_split($totalhits);
$numbers = $arr;
foreach ($numbers as $value) {
// End get id for number of hits, split the string into array, and assign id to numbers
// Begin show number of hits as images
echo "<img src=\"img/".$value.".png\">";
}
// End show number of hits as images
// Begin close SQL connection
mysqli_close($con);
// End close SQL connection
Final Notes: I have not tried adding commas to large numbers or removing apostrophes in an array. If I do, I'll go back and edit it.
source to share
You need to split the hit counter into an array with each value containing one digit and then use it to loop to add images.
<?php
$array = str_split($your_hit_variable_from_mysql);
if(!empty($array)){
foreach($array as $single){
echo '<img src="'.$single.'.jpg"'>;
}
}else{
echo '<img src="0.jpg"'>;
}
?>
Make sure you are storing the number in integer format, not a string like 52,200 with a comma.
For more check here.
EDIT: Added exception handling when there is a counter for the image.
source to share
You can use str_split($str)
to convert string to character array. Then you can iterate over them with a simple loop for
or foreach
.
EDIT:
There are several options for rendering images . You can just take html <img src=''>
or CSS tags .
If you are using CSS you can create 1 image containing all the individual images (like spritemap or tilemap). Then use CSS to split it back into separate images. You can accomplish this by providing a generic declaration for a background image, and then let each numeric value define an offset within that image.
.nr1 .nr2 .nr3 {
background: url(sprites.png) no-repeat;
}
.nr1 { background-position: 0 0 ; }
.nr2 { background-position: 0 -21px ; }
.nr3 { background-position: -21px -42px ; }
Finding the exact offset can seem like a cumbersome task. But there are some free online tools that can do this for you. I have personally used this one . You can simply drag and drop individual images onto your web browser and it will create one image and the required CSS.
One of the advantages of using spritemap is that all images are loaded together . If you are using individual images, you may see some flickering while loading images.
source to share