“Ajax Download Counter” v1.0 - Step by Step Guide

Ajax Download Counter

Created: 03/20/2013
By: Michael Spyratos
Portfolio: mspyratos.com
View the PDF Guide

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks!

Overview

Inside the Ajax Download Counter folder

1. Inside the Ajax Download Counter folder - top

Inside the plugin’s folder, you will find two main php files.

These two files are what you need for the plugin to work:

counter.php
javascript.php

For a full demo page, check the index.php file inside the demo folder.

Let’s see step-by-step how to implement the Ajax Download Counter to your own page.

1. Our simple index.html download page - top

Let’s first create a simple index.html page, so users can download our file.

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Download Page</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 1
    </head>
    <body>
        <a class="link-to-file" href="demo.zip">Download</a> 2
        <div class="counter"></div> 3
    </body>
    </html>

This is the minimum code needed for our page. We haven’t styled it for simplicity purposes.

Let’s break it down:

1 We add the jQuery library, needed for our plugin to work.
2 This is the link that users will click to download your file. Keep note of its class: link-to-file
3 The container which will display the total downloads. Again, keep note of its class: counter

2. Open the counter.php file - top

Open counter.php with your favorite text editor. You will see this part near the top of the file:

And the whole piece of code that holds your settings:

It is necessary to fill in your credentials under Configure Database Connection section. After filling in your credentials, you should have something like this:

    $host_name = "your-database-host-name";
    $user_name = "your-database-user-name";
    $user_pass = "your-database-user-password";
    $database_name = "your-database-name";

If you don’t have the information needed, please contact your hosting company to provide them to you. That’s all you need to edit from inside of counter.php.

Save and close.

3. Copy counter.php - top

Copy counter.php to the same folder that our simple index.html file exists.

So far we should have something like this:

4. Open the javascript.php file - top

Again, with your favorite text editor, open the javascript.php file. At the very top of the page you will find your settings area:

Comments have been added right below these settings, explaining in detail what you should fill in.

    var path_to_counter : The path to counter.php.
    var file_id : The id of the download file. Must be a unique number for each download file.
    var link_class : The class of the link that users will click to download the file.
    var div_class : The class of the div that will display the total downloads.

If you are following along this guide, you probably don’t have to change anything here. The default settings will do.

So let’s move on to the next step.

5. Copy the contents of javascript.php - top

Now, as you still have the javascript.php file opened, select everything from inside the file.

Copy the selected code and paste it into index.html, right before the </body> tag.

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Download Page</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <a class="link-to-file" href="demo.zip">Download</a>
        <div class="counter"></div>
        
        | PASTE CODE HERE
        
    </body>
    </html>

6. Done! - top

Save and upload your files to the server (ftp). Ajax Download Counter should be working fine.

If not, make sure that you followed all steps and you filled in correctly all the necessary information.

Still having problems?
Check the comments and FAQ sections on the download page or contact me via this contact form
You can also find my contact details on my portfolio website.

Thank you!

Michael Spyratos

Go To Table of Contents