๐Ÿ’พ Archived View for m0yng.uk โ€บ 2020 โ€บ 10 โ€บ A-simple-hit-counter captured on 2024-08-18 at 17:22:34. Gemini links have been rewritten to link to archived content

View Raw

More Information

โฌ…๏ธ Previous capture (2024-08-18)

โžก๏ธ Next capture (2024-08-31)

-=-=-=-=-=-=-

A simple hit counter - M0YNG.uk

Created 2020-10-01

Tagged

I don't have any analytics on this site, but it would still be nice to know if anyone is looking... and something reminded me of the hit counters we used to have back on the old web.

They were almost always a graphic which showed a number that increased every time that image was loaded, I don't think I ever made one so I'm not sure how exactly they worked.

I wondered if I could combine a bit of PHP, with a JSON file, some SVG, and good old HTTP headers to make a very simple page counter that would just work, and automatically handle new pages being added to the site.

Well, it seems that yes, I can.

Requirements / Limitations

The code

The PHP

This is the code that does all the work, I'm sure it could be better!

<?php
// tell the browser to expect an svg
header('Content-Type: image/svg+xml');
// set some default text
$thisCount = 'ERROR!';
// if we have a referer
if (isset($_SERVER['HTTP_REFERER'])) {
    // and it is OUR website
    if (strpos($_SERVER['HTTP_REFERER'], 'm0yng.uk') > 0) {
        // strip out index.html so it is counted the same as /
        if (substr($_SERVER['HTTP_REFERER'], -10) === 'index.html') {
            $_SERVER['HTTP_REFERER'] = substr($_SERVER['HTTP_REFERER'], 0, strlen($_SERVER['HTTP_REFERER']) - 10);
        }
        // remove any trailing /s
        $_SERVER['HTTP_REFERER'] = rtrim($_SERVER['HTTP_REFERER'], '/');
// sanitize the string
        $pageHash = filter_var($_SERVER['HTTP_REFERER'], FILTER_SANITIZE_STRING);
        // load the json file of counts
        $counterData = json_decode(file_get_contents("counterData.json"), true);
        // if it already exists
        if (isset($counterData[$pageHash])) {
            // add one to it
            $counterData[$pageHash]++;
        } else {
            // otherwise, start counting at one
            $counterData[$pageHash] = 1;
        }
        // cast that number to a string for later use
        $thisCount = (string) $counterData[$pageHash];
        // save the counting
        file_put_contents("counterData.json", json_encode($counterData));
    }
}
// below we have the SVG ... and inject our count with left padded zeros into the text area using php
?>

<svg height="15px" width="50px" fill="#c9cacc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 32 32"><text x="-34px" y="28px" font-family="monospace" font-size="32px"><?php echo str_pad($thisCount, 5, '0', STR_PAD_LEFT); ?></text></svg>

The HTML

To use the counter simply use an `<img>` tag like so

<img src="/counter.php" alt="page hit counter"/>

The JSON

It ends up looking a bit like this, which means I can grab the file and read it myself if I want, without having to visit every page to see a number.

{
  "https:\/\/m0yng.uk": 3,
  "https:\/\/m0yng.uk\/2020\/08\/The-Portable-Web": 2
}

Improvements?

It would be great to embed the SVG itself into the page, this would allow it to inherit font colours, etc. and be accessible as text to accessibility technology.

However, I'm not sure how to do that, whilst keeping it very simple to use.

-+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-

๐Ÿ–ค Black Lives Matter

๐Ÿ’™๐Ÿค๐Ÿ’œ Trans Rights are Human Rights

โค๏ธ๐Ÿงก๐Ÿ’›๐Ÿ’š๐Ÿ’™๐Ÿ’œ Love is Love

Copyright ยฉ 2024 Christopher M0YNG - It is forbidden to use any part of this site for crypto/NFT/AI related projects.

Code snippets are licenced under the Hippocratic License 3.0 (or later.)

Page generated 2024-07-12 by Complex 19