How do I set a download counter attached to my HTML download button?

Question

I am a novice designer who could just use HTML to develop my own website, where I 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 posted images of 6 issues of my electronic journal and connected the download buttons for each edition so that every time the user clicks the download button, this particular file (.RAR file) will start downloading. As I said, I designed these buttons in simple HTML and CSS.

What I want to have is DOWNLOAD COUNTERS for each issue of the magazine attached to specific DOWNLOAD BUTTONS - which means that you can see on my HTML page the number of downloads that will be recorded below each edition. How to have something like this? Can I have this layout with html?

HTML code for 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 one more doubt: I searched on Google to download counters, and somewhere I read that instead of directly providing the true path of my log file in href, I need to give an alternative path through another php file ie I have this HTML code for download buttons 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 will be very grateful. Thank you Relations

Answer 1

I would go to the jQuery event listener for a download link, and all this was done on the server side via PHP. It may not be reliable, but it does not affect the user.

If you want to do something like this, first you need to group the buttons in a way that is accessible through jQuery; There are other ways to select multiple elements in jQuery, but the easiest way is to make them members of a particular class.

Then you can loop through the class using the .each () function. So, to initialize the page; those. Retrieving all page content you need to scroll through each button and send a request to a PHP script; all that needs to be sent to the PHP script is the upload identifier. This is done in part 1 of the code below.

Part 2 sets up an event listener on boot. Once again, simply placing the event listener on the entire class, we can detect a click on any of them; and then determine which button he came to by contacting him. (Note: for simplicity, make the identifier in the markup the same as the identifier in the database)

Then another mail request to the php script is executed; but provides an additional option - "download". In fact, the value that corresponds to the load does not really matter; because this case is simple enough that the user either downloads it or not. Thus, in the segment of PHP code (further below) we do not even check its 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 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 syntactic sugar to make things pretty easy. In addition, with jQuery - you open the door to many opportunities in the future, if you choose.

On the server side is PHP. All that needs to be done in reality is to check whether the “download” is installed and to respond to the number of downloads. (Obviously, increasing the number with the database if the "download" option is set)

This can 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 will work (obviously with fixes to the database functions) for simple cases, but obviously this is probably the wrong code, as I literally typed it for my lunch! Naturally, this just gives you an idea of ​​a possible solution. (If you decide to do this, I have demonstrated bad practice - mysql operations are best done using mysqli * or PDO functions now)

Check out the PHP My SQL documentation; I hope this points you in the right direction.

Alternatively, since I know that you are not too keen on jQuery (it's great as soon as you do this!) The PHP script that you will use with the jQuery solution can be used on it. Just changing $ _POST [] to $ _GET [] and, as other answers said, using URLs such as "rank.php? Id ="; however, then you need to see how the PHP script transfers the file after completing the database queries.

He also leaves the issue of displaying the boot number; since without AJAX you have to embed some PHP in the embedded HTML code. Hope I edited this to make a little more sense, and gave you an overview of another option! :)

Answer 2

Only with HTML and CSS will it not be possible to track downloads. You will need (ideally) to use a combination of PHP and some type of database to track this. One option is to transfer the file loaded through the PHP file, but if you prefer to avoid this, you can also force the links to run an ajax request, increasing the counter every time the link is clicked.

Answer 3

I would recommend checking the link below:

http://www.kavoir.com/2010/05/simplest-php-hit-counter-or-download-counter-count-the-number-of-times-of-access-visits-or-downloads.html

As noted by @johnmadrak, you cannot display the number of page views, or the file was downloaded without any scripting language on the server side that underlines some kind of database. In some scenarios, you can even place the number of files downloaded using a text document, and then upload the contents via PHP.