How to have a download counter attached to my HTML download button?

Question

I am a novice designer who could just use HTML to design my own website where I have uploaded my emagazine files. This is my planned download page on my website: http://www.aamaodisha.org/secdownload.html

As you can see, on this download page, I have placed images of the 6 editions of my e-magazine and have connected download buttons for each edition, so that whenever an user clicks on the download button, that particular file (.RAR file) will start downloading. Like I said, I have designed these buttons in plain HTML and CSS.

What I desire to have is DOWNLOAD COUNTERS for each magazine edition attached to the particualr DOWNLOAD BUTTONS -- meaning like you can see on my HTML page, the number of downloads to be written below each edition. How to have something like that? Can i have that arrangement with html?

The HTML code for the 6 DOWNLOAD BUTTONS:

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>
<div class="button button2">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.8 MB .RAR</p>
</div>
<div class="button button3">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.05 MB .RAR</p>
</div>
<div class="button button4">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">3.8 MB .RAR</p>
</div>
<div class="button button5">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.5 MB .RAR</p>
</div>
<div class="button button6">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">8 MB .RAR</p>
</div>

AND this is the CSS for the buttons:

.button {
  width: 115px;
}

.button1 {
    position:absolute;
    left:430px;
    top:410px;

}    
.button2 {
    position:absolute;
    left:632px;
    top:410px;

}  
.button3 {
    position:absolute;
    left:833px;
    top:410px;

}    
.button4 {
    position:absolute;
    left:430px;
    top:636px;

}    
.button5 {
    position:absolute;
    left:632px;
    top:636px;

}   
.button6 {
    position:absolute;
    left:833px;
    top:636px;

}   
.button a {
  display: block;
  height: 28px;
  width: 115px;

  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 

  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.button p {
  background: #222;
  display: block;
  height: 25px;
  width: 105px;
  margin: -27px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/28px Helvetica, Verdana, sans-serif;
  color: #ffffff;

  /*POSITION*/
  position: absolute;
  z-index: -1;

  /*TRANSITION*/  
  -webkit-transition: margin 0.4s ease;
     -moz-transition: margin 0.4s ease;
       -o-transition: margin 0.4s ease;
      -ms-transition: margin 0.4s ease;
          transition: margin 0.4s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -4px 0 0 5px;
}

.button:hover .top {
  margin: -50px 0 0 5px;
  line-height: 22px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -14px 0 0 5px;
}

.button:active .top {
  margin: -30px 0 0 5px;
}

I have another doubt : I had searched on Google for download counters and somewhere I had read that instead of directly giving the true path of my magazine file in the href, one should give an alternative path through another php file i.e I have at present this HTML code for a download button with Download

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>

Should I have something like <a href="/download.php file=my link">Download</a>?

Please help me implement counters for these download buttons. I shall be highly obliged. Thanks. Regards

Answer 1

I'd go for a jQuery event listener on the download link, and have it all done server side through PHP. It may not be foolproof, but it doesn't impact on the user as much.

If you wanted to do something like this, then you first need to group your buttons in a way that is accessible through jQuery; there are other ways to select multiple elements in jQuery but the easiest is by making them all members of a specific class.

You can then loop through the class using the .each() function. So for initialisation of the page; i.e. getting all the page content working; you need to loop through every button and make a post request to the PHP script; all that needs to be sent to the PHP script is the id of the download. This is done in Part 1 of the code below.

Part 2 is setting up the event listener for when a download occurs. Once again, by just putting an event listener on the whole class we can detect a click on any of them; and then identify which button it came from by accessing it's id. (Note: For simplicity's sake; make the id in the markup the same as the id in the database)

This then makes another post request to the php script; but supplies an additional parameter - "download". In reality, the value that corresponds to download doesn't actually matter; because this case is simple enough that the user is either downloading it or not. So in the PHP segment of the code (later below) we don't even check it's value; we just check that it exists.

$(document).ready(function(){
  /* [[PART 1]]: loop through every element in the .button class*/
  $(".button").each(function (e) {

    /* get it's ID (which is equal to the download id stored in the db */
    var id = e.target.id;

    /* Post the download id to ranking.php; then echo the returned value to an 
    ** element with the id of 'count<num>'; where num is the download id. */
    $.post( 'ranking.php', { 'id' : id }, function(data){
        $('#count' + id).html(data);
    });
  });

  /* Part 2: When button is clicked, post the download data to "ranking.php" */
  $('.button').click(function(event){
      var id = e.target.id; //get the id of the button

      $.post( 'ranking.php', { 'id' : event.target.id, 'download' : 'YES' },  //set 'download'
          function(){ $('#count' + id).html(data) });   //echo new value to html
  });
});

I suggest jQuery as it provides enough syntactical sugar to make things pretty easy. Additionally, by using jQuery - you're opening up the doorway to lots of possibilities in the future if you choose.

Server Side is where the PHP takes over. All this needs to do in reality is to check whether 'download' is set, and echo back the number of downloads. (Obviously incrementing the number with the database if the 'download' parameter is set)

This could be achieved with something like...

<?php
    mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");   

    if(! isset($_POST['id']) {
         //die error!
    }

    /* if $_POST['download'] isn't set, then just get the current download number
       and echo it back to the browser */
    if(! isset($_POST['download'] ){
        $query = sprintf('SELECT * FROM dl_table WHERE id = %d', $_POST['id']);
        mysql_query($query);
    print mysql_result($query, 0, 'download');
        exit; // no need to carry on, our job is done..
    }

    /* if the script reaches here then $_POST['download'] is set, so you need to log a 
    ** new download */
    $query = //generate query to increment the database field
?>

The above example would work (obviously with the database functions corrected) for simple cases, but obviously - this probably isnt valid code as I've literally typed it over my dinner! Naturally, it's just to give you an idea of a possible solution. (If you do decide to do similar, I've demonstrated bad practice - mysql operations should preferably be done with mysqli* functions or PDO now)

Look up the PHP My SQL documentation; hopefully this has pointed you in the right direction.

Now alternatively, as I know you aren't too keen on jQuery (it's great once you get in to it!) the PHP script that you'd use with the jQuery solution can be used on it's own. Simply changing $_POST[] to $_GET[] and, as other answers have said, using URLs like "ranking.php?id="; however then you need to look at getting the PHP script to pass the file on after the database queries have finished.

It also leaves a question as to the displaying of the download number; as without AJAX you will have to embed some PHP in the HTML mark-up inline. I hope I've edited this to make a bit more sense, and given you an overview of the other option! :)