How To Create Your Own Stats Program (JavaScript, AJAX, PHP)

Home » How To Make A Stat » How To Create Your Own Stats Program (JavaScript, AJAX, PHP)

Maybe your like

When creating a website, one main goal is to attract visitors. Traffic generation is a necessity for monetary purposes, showing off your work, or just expressing your thoughts. There are many ways to create traffic for your website. Search engines, social bookmarking, and word of mouth are just a few examples. But how do you know whether this traffic is genuine? How do you know if your visitors are coming back for a second time?

How To Create Your Own Stats Program (JavaScript, AJAX, PHP) Image-1
Image by d3images on Freepik

These questions have raised the concept of web statistics. Often times, webmasters use certain programs, such as Google Analytics or Awstats, to complete this job for them. These programs obtain a wide variety of information about visitors to a site. They find page views, visits, unique visitors, browsers, IP addresses, and much more. But how exactly is this accomplished? Follow along as we present a tutorial on how to create your own web statistics program using PHP, JavaScript, AJAX, and SQLite.

View Demo of your Own Stats Program

To begin, let’s start with some simple HTML markup that will act as the page we are tracking:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Web Statistics</title> </head> <body> <h2 id="complete"></h2> </body> </html>

The h2#complete element will be filled dynamically with JavaScript once the page view has successfully been tracked by our web statistics. To initiate this tracking, we can use jQuery and an AJAX request:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type='text/javascript'> $(function() { // Set the data text var dataText = 'page=<?php echo $_SERVER['REQUEST_URI']; ?>&referrer=<?php echo $_SERVER['HTTP_REFERER']; ?>'; // Create the AJAX request $.ajax({ type: "POST", // Using the POST method url: "/process.php", // The file to call data: dataText, // Our data to pass success: function() { // What to do on success $('#complete').html( 'Your page view has been added to the statistics!' ); } }); }); </script>

Consider the above code step by step:

  • When the DOM is ready, we first set our dataText. This text is in query string format and will be sent as data to process.php, which will track this page view.
  • We then create an AJAX request that uses the POST method to send form data.
  • Our form data (dataText) is then sent to process.php in the root of our server.
  • Once this request is completed, the h2#complete element is filled with a successful notice

Our next job is to write process.php. Its main goal is to obtain information about the web statistics and store it in a database. Since our database has not yet been made, we must create a simple file, install.php, which will do this for us:

How To Create Your Own Stats Program (JavaScript, AJAX, PHP) Image-2
Image by rawpixel.com on Freepik
<?php # Open the database $handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'stats.db', 0666, $sqliteError ) or die( $sqliteError ); # Set the command to create a table $sqlCreateTable = "CREATE TABLE stats(page text UNIQUE, ip text, views UNSIGNED int DEFAULT 0, referrer text DEFAULT '')"; # Execute it sqlite_exec( $handle, $sqlCreateTable ); # Print that we are done echo 'Finished!'; ?>

This code is mostly straightforward. It opens up a database (stats.db) in the root of the server and creates a database for it. The string inside $sqlCreateTable is a SQLite command that makes our statistics table. This table contains four colums: Page, IP Address, Views, and Referrer:

  • Page is a String that contains the page being viewed as a relative link (i.e. /index.php).
  • IP Address is also a String that contains a list of IP Addresses that visited this page. It is in the format of numVisits1(IP Address1) numVisits2(IP Address2) numVisits3(IP Address3) etc. For example, if we obtained 10 visits from 74.35.286.15 and 5 visits from 86.31.23.78 (hypothetical ip addresses), this String would be "10(74.25.286.15) 5(86.31.23.78)".
  • Views is an integer containing the number of times the page has been viewed.
  • Referrer is a String in the same format as IP Address. It contains all referrers to this page and how many referrals have been made.

And now onto process.php:

# Connect to the database $handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError ); # Use the same-origin policy to prevent cross-site scripting (XSS) attacks # Remember to replace http://yourcompanydomain.com/ with your actual domain if( strpos( $_SERVER['HTTP_REFERER'], 'http://yourcompanydomain.com/' ) !== 0 ) { die( "Do not call this script manually or from an external source." ); } # Obtain the necessary information, strip HTML tags, and escape the string for backup proetection $page = sqlite_escape_string( strip_tags( $_POST['page'] ) ); $referrer = sqlite_escape_string( strip_tags( $_POST['referrer'] ) ); $ip = sqlite_escape_string( strip_tags( $_SERVER['REMOTE_ADDR'] ) ); # Query the database so we can update old information $sqlGet = 'SELECT * FROM stats WHERE page = \''.$page.'\''; $result = sqlite_query( $handle, $sqlGet );

This first snippet connects to our stats database and gets the information we need for the current visit. It also queries the database and obtains any information previously stored. We use this information to create an updated table.

The next job is to find old information:

How To Create Your Own Stats Program (JavaScript, AJAX, PHP) Image-3
Image by Freepik
# Set up a few variables to hold old information $views = 0; $ips = ''; $referrers = ''; # Check if old information exists if( $result && ( $info = sqlite_fetch_array( $result ) ) ) { # Get this information $views = $info['views']; $ips = $info['ip'].' '; if( $info['referrer'] ) $referrers = $info['referrer'].' '; # Set a flag to state that old information was found $flag = true; }

The above code finds all previous information in our table. This is vital, as we need to update the number of views (increase it by one), IP addresses, and referrers.

# Create arrays for all referrers and ip addresses $ref_num = array(); $ip_num = array(); # Find each referrer $values = split( ' ', $referrers ); # Set a regular expression string to parse the referrer $regex = '%(\d+)\((.*?)\)%'; # Loop through each referrer foreach( $values as $value ) { # Find the number of referrals and the URL of the referrer preg_match( $regex, $value, $matches ); # If the two exist if( $matches[1] && $matches[2] ) # Set the corresponding value in the array ( referrer link -> number of referrals ) $ref_num[$matches[2]] = intval( $matches[1] ); } # If there is a referrer on this visit if( $referrer ) # Add it to the array $ref_num[$referrer]++; # Get the IPs $values = split( ' ', $ips ); # Repeat the same process as above foreach( $values as $value ) { # Find the information preg_match( $regex, $value, $matches ); # Make sure it exists if( $matches[1] && $matches[2] ) # Add it to the array $ip_num[$matches[2]] = intval( $matches[1] ); } # Update the array with the current IP. $ip_num[$ip]++;

The above two loops are very similar. They take in the information from the database and parse it with regular expressions. Once this information is parsed, it is stored in an array. Each array is then updated with the information from the current visit. This information can then be used to create the final String:

# Reset the $ips string $ips = ''; # Loop through all the information foreach( $ip_num as $key => $val ) { # Append it to the string (separated by a space) $ips .= $val.'('.$key.') '; } # Trim the String $ips = trim( $ips ); # Reset the $referrers string $referrers = ''; # Loop through all the information foreach( $ref_num as $key => $val ) { # Append it $referrers .= $val.'('.$key.') '; } # Trim the string $referrers = trim( $referrers );

The final strings are now created. IPs and Referrers are in the form: “numVisits1(IP/Referrer1) numVisits2(IP/Referrer2) etc.” For example, the following could be the referrer String:

5(https://www.noupe.com) 10(http://css-tricks.com)

It means that 5 referrals came from https://www.noupe.com and 10 came from http://css-tricks.com. This format saves space and is easy to parse as web statistics.

Now for the final few lines:

# Update the number of views $views++; # If we did obtain information from the database # (the database already contains some information about this page) if( $flag ) # Update it $sqlCmd = 'UPDATE stats SET ip=\''.$ips.'\', views=\''.$views.'\', referrer=\''.$referrers.'\' WHERE page=\''.$page.'\''; # Otherwise else # Insert a new value into it $sqlCmd = 'INSERT INTO stats(page, ip, views, referrer) VALUES (\''.$page.'\', \''.$ips.'\',\''.$views.'\',\''.$referrers.'\')'; # Execute the commands sqlite_exec( $handle, $sqlCmd );

That’s all there is to it for process.php. As a review, it finds the IP Address and Referrer of the visitor, uses the values to create two Strings, increases the number of views of the page by one, and places all of these values into the database.

There is now only one task left. We have to display the web statistics. Let’s call the following file display.php:

How To Create Your Own Stats Program (JavaScript, AJAX, PHP) Image-4
Image by dashu83 on Freepik
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Web Statistics Display</title> </head> <body> <?php # Open up the database $handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError ); # Get all the statistics $sqlGet = 'SELECT * FROM stats'; $result = sqlite_query( $handle, $sqlGet ); # Create an unordered list echo "<ul>\n"; # If there are results if( $result ) { $page_views = 0; $unique_visitors = 0; # Fetch them while( ($info = sqlite_fetch_array( $result ) ) ) { # Get the page, views, IPs, and referrers $page = $info['page']; $views = $info['views']; $ips = $info['ip']; $referrers = $info['referrer']; # Print out a list element with the $page/$views information if( $views == 1 ) echo "\t<li>\n\t\t<p>$page was viewed $views time:</p>\n"; else echo "\t<li>\n\t\t<p>$page was viewed $views times:</p>\n"; # Update the number of page views $page_views += $views; # Parse the data of IPs and Referrers using process.php's code preg_match_all( '%(\d+)\((.*?)\)%', $ips, $matches ); # Find the size of the data $size = count( $matches[1] ); # Create a sub list echo "\t\t<ul>\n"; # Loop through all the IPs for( $i = 0; $i < $size; $i++ ) { # Find the number of visits $num = $matches[1][$i]; # Find the IP address $ip = $matches[2][$i]; # Print the info in a list element if( $num == 1 ) echo "\t\t\t<li>$num time by $ip</li>\n"; else echo "\t\t\t<li>$num times by $ip</li>\n"; # Update the number of unique visitors $unique_visitors++; } # Repeat the whole process for referrers preg_match_all( '%(\d+)\((.*?)\)%', $referrers, $matches ); $size = count( $matches[1] ); # Loop through each one for( $i = 0; $i < $size; $i++ ) { $num = $matches[1][$i]; $referrer = $matches[2][$i]; # Print out the info if( $num == 1 ) echo "\t\t\t<li>$num referral by $referrer</li>\n"; else echo "\t\t\t<li>$num referrals by $referrer</li>\n"; } # End the sub-list echo "\t\t</ul>\n"; # End the list element echo "\t</li>\n"; } echo "\t<li>Total unique visitors: $unique_visitors</li>\n"; echo "\t<li>Total page views: $page_views</li>\n"; } # End the unordered list echo "</ul>\n"; # Close the database sqlite_close($handle); ?> </body> </html>

It may seem daunting, but it is very similar to process.php. It parses the page, views, ip addresses, and referrers from the database. It then continues to output these in an unordered list format.

The final output is as follows:

Final Web Statistics

View Demo of your Own Stats Program

Thank you for reading and good luck!

Tag » How To Make A Stat