phpmysqlimagehitcounter

PHP MySQL image hit counter


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:&nbsp;" . number_format((float)$row['0']) . "&nbsp;";
}
// 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.


Solution

  • 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.