PHP MySQL image hit counter

Question

I'm new to PHP and have been working on a hit counter. The hit counter works great but now I want to convert the numbers into images.

I have created 12 images 0-9, a spacer, and a comma image.

I have searched high and low for a hint of what I need to do to convert the number format into images and have had no success. So far all I have found is how to make a basic hit counter using files only, PHP/MySQL, and how to display an encrypted image using PHP/MySQL.

So the question is: How do I tell the given code to show images in place 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 the 2,435 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 lots of notes in the code I show here. This way any new coders can more easily understand the scripts being displayed. I will add my final/completed code at the bottom of this post so everyone can see the final product when I have found a solution.

---

This code is fully 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 result of my code. Note that the array in this script puts a ' at the beginning and end of the image array. (See following example)

Array ( [0] => ' [1] => 2 [2] => 4 [3] => 3 [4] => 5 [5] => ' )

So unless I wanted a broken image on ether end of my hit counter I had to utilize them. I renamed my transparent image that I had already planed on using on both ends to '.png (See following 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 fully fictional as a image 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 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 a comma to larger numbers or removing the apostrophe on the array yet. If I do I'll come back and edit this.

Answer 1

You can use str_split($str) to convert a string to an array of characters. Next you can iterate them with a simple for or foreach loop.

EDIT:

There are several options on how to visualize the images. You could just take html <img src=''> tags or CSS.

If you use CSS, then you can create 1 image which contains all individual images (i.e. a spritemap or tilemap). Then use CSS to split it up again in single images. You can accomplish this by defining a general declaration for the background image, and then let each numeric value define an offset inside 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 ; }

The task of finding the exact offset may seem time-consuming. But there are several free online tools that can do this for you. I personally used this one a lot. You can just drag the individual images to your webbrowser, and it will create a single image and the necessary CSS.

One of the advantages of using a spritemap, is that all images are loaded together. If you use individual images you can see some kind of flickering while the images are loading.

Answer 2

You need to split the hit counter into array with each value containing single digit, and then use for loop to append 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"'>;
}
?>

Ensure you are storing number in integer format , not string like 52,200 with comma.

For more check Here.

EDIT: Added exception handling when there is counter 0 for image.