Hit counter

[tehgreatmg]

I need help with writing a hit counter in javascript. I am new to weboage design so I really dont know how to go about doing this.

[~s.o.s~]

Read this.

[MattEvans]

...if you want to write a hitcounter that records hits from any and all users; you cannot use Javascript - it can't write data to anywhere except cookies, which are unique to each user's browser.

so, you'll have to use some serverside application/script/method to record data permanantly at your server.

PHP: http://www.developingwebs.net/phpclass/hitcounter.php

Perl/SHTML:http://www.akamarketing.com/simple-hit-counter-with-perl.html

C++: http://www.daniweb.com/code/snippet596.html

ASB (with VBScript): http://www.webwizguide.com/asp/tutorials/hit_counter_tutorial.asp

etc..

The key is, these are programs that run at the server, Javascript in a browser is a client program. Javscript when used as an ASP scripting language is serverside, but the details of making a hitcounter using that would be more of an ASP question than a Javscript question.

You can use AJAX browser Javascript to talk to server programs, but the server program has to be there to record permanent non user-bound data, and infact, any kind of permanent data that you yourself can read..

[tehgreatmg]

Thanks MattEvans, I was afraid you couldnt do this through javascript, I will give the info you gave me a shot.

[tehgreatmg]

OK I looked at what you posted and just got confused. I understand how those work, the main thing I still can not grasp is how to actually call the script from the html code. Can I write either a c++ or vbscript that can be called from the html code source?

[MattEvans]

Well. there are a few methods for getting script output 'into' HTML. But, you have to understand; HTML is not a programming language, it's a document markup language.

One way to get script output into HTML is to generate HTML entirely programmatically. That is, 'print' HTML code directly to a users browser, and the parts that are 'dynamic' can just be printed in with the rest of the HTML. That principle is used quite heavily in languages like PHP; you can write pure HTML, and write blocks of PHP code directly inside the HTML code using 'special markers' to determine the start and end of the PHP. The page is prepared when the user requests it, and sent back different each time. ASP uses the same principle ( embeded code in HTML ). Perl and C++ do the opposite; you output HTML by literally printing it "to the user's browser" as a string.

You can also use something called SHTML ( server-parsed HTML ), it's a very basic system; you write special comments in your HTML code like this: <!--#directive parameter="value"-->, the server looks for those comments, and replaces them by performing the provided directive; an example is: <!--#include virtual="path_to_script"--> : the server will read that when an HTML page is requested; look for the script at "path_to_script" on the server itself, execute it, and place the reply from the script in the data that is sent back to the browser. You need to save the files that do such includes as 'file.shtml' instead of 'file.html', and you need to check whether your server supports it before you rely on it for something..

http://httpd.apache.org/docs/1.3/howto/ssi.html

Both of these methods are very similar, and can actually be used together, i.e. you can write blocks of Perl code that print out 'special' elements ( like a little <div> element containing the number of hits on your page for example =P ) save it somewhere on the server, and then embed the output of that script on every page that's requested using an SHTML include directive. Running the script (by including it) is what increments the counter, so, everytime a page is requested, the counter can be updated.

Both of these methods rely totally on preparation at the server. You have to regenerate the page everytime it's requested. That can affect caching optimizations.. i.e. you CANNOT cache pages that are really dynamic, meaning they have to be downloaded direct from your server everytime they are viewed.

The only method that isn't entirely server-generated is to write a script on the server that does the 'work' and then use a method called AJAX (A)syncronous (J)avascript (A)nd (X)ML to download data from the server and display it within a page when the page has already been downloaded. Erm. I would say, if you want to do that; write the working script on the server and use SHTML to include it first; because it'll teach you the basics, and AJAX is pretty easy if you know Javascript/XML basics already.

http://en.wikipedia.org/wiki/Common_Gateway_Interface

[tehgreatmg]

I am still lost. What I have is this in my html code

<script language="JavaScript" src="counter.php" type="text/JavaScript"></script>

and this php script

<?php
session_start ();

// get current hit
$opFile = fopen ("counter.txt", "r");
$handle = fread ($opFile, filesize ("counter.txt"));
fclose ($opFile);

// if new session
if (!isset ($_SESSION['hit'])){

// set session
$_SESSION['hit'] = TRUE;

// add the hit
$handle = $handle + 1;

// print javascript
echo 'document.write("'.$handle.' Hits");';

// put new hit to db
$opFile = fopen ("counter.txt", "w");
fwrite ($opFile, $handle);
fclose ($opFile);

// else
}else{

// print only
echo 'document.write("'.$handle.' Hits");';
}
?>

and then a file named counter.txt with only the value 0 in it. All three files are in my C:\inetpub\wwwroot folder

And when I open the webpage the number in counter.txt does not change and no counter is displayed on the page.

[MattEvans]

First, the files need to be on and accessed via a HTTP server (with PHP installed), not just in a local folder...

If they are; what happens when you just access 'http://yourdomain.tld/counter.php"?

You should also add this line to the php file, put it right at the top after the <?php tag:

header("Content-Type: text/javascript");

Some browsers will complain if you ommit that.

[tehgreatmg]

When I access http://localhost/counter.php I get this:

document.write("1 Hits");PHP Warning:  session_start() [<a href='function.session-start'>function.session-start</a>]: open(C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\sess_ql1eb53bk1s8ohkja7ivd6tb13, O_RDWR) failed: Permission denied (13) in C:\Inetpub\wwwroot\counter.php on line 3
PHP Warning:  fopen(counter.txt) [<a href='function.fopen'>function.fopen</a>]: failed to open stream: Permission denied in C:\Inetpub\wwwroot\counter.php on line 23
PHP Warning:  fwrite(): supplied argument is not a valid stream resource in C:\Inetpub\wwwroot\counter.php on line 24
PHP Warning:  fclose(): supplied argument is not a valid stream resource in C:\Inetpub\wwwroot\counter.php on line 25
PHP Warning:  Unknown: open(C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\sess_ql1eb53bk1s8ohkja7ivd6tb13, O_RDWR) failed: Permission denied (13) in Unknown on line 0
PHP Warning:  Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session) in Unknown on line 0

It looks to me that it will just not let me open the file due to permissions.

[MidiMagic]

Did you save a zero count file to get it started?

You can't open the file for read until it exists.

[digital-ether]

When I access http://localhost/counter.php I get this:

document.write("1 Hits");PHP Warning:  session_start() [<a href='function.session-start'>function.session-start</a>]: open(C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\sess_ql1eb53bk1s8ohkja7ivd6tb13, O_RDWR) failed: Permission denied (13) in C:\Inetpub\wwwroot\counter.php on line 3
PHP Warning:  fopen(counter.txt) [<a href='function.fopen'>function.fopen</a>]: failed to open stream: Permission denied in C:\Inetpub\wwwroot\counter.php on line 23
PHP Warning:  fwrite(): supplied argument is not a valid stream resource in C:\Inetpub\wwwroot\counter.php on line 24
PHP Warning:  fclose(): supplied argument is not a valid stream resource in C:\Inetpub\wwwroot\counter.php on line 25
PHP Warning:  Unknown: open(C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\sess_ql1eb53bk1s8ohkja7ivd6tb13, O_RDWR) failed: Permission denied (13) in Unknown on line 0
PHP Warning:  Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session) in Unknown on line 0

It looks to me that it will just not let me open the file due to permissions.

Your PHP is set to write session data to the disk. It looks like the directory where session are saved (C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\) is unwritable for PHP.

Your file C:\Inetpub\wwwroot\counter.txt is unreadable for PHP.

You have to make sure both of these are writable.

PS: why do you want to use session? does your hit counter only increment for new session?

Having the counter in a JS file does nothing but add another HTTP Request for that JS file.
You can just as well include the file counter.php in your PHP file that writes the page.

include('counter.php');

would be teh same as:

<script src="counter.php"></script>

in your case because counter.php is run once per load of the page.
Only using <script> will cause a new HTTP Request.

if you use a php include() then the part:

// print only
echo 'document.write("'.$handle.' Hits");';

would be:

echo $handle.' Hits';

[MattEvans]

To digital-ether:

It only makes sense to use this approach ( php in js ) from a caching perspective... assuming text/html requests aren't updated frequently; they can have long cache times; an XKB + header text/html response from php or otherwise that's never going to change can be cached on user's PCs and in interim public caches along the way. Every time the cached page is viewed in a browser only the javascript has to be requested again, the response from which is only ever going to be about 30 bytes + header ( assuming 1-byte character encoding.. )

Result is, the first time a page is requested through some network, 2 requests are sent, and the 1KB page and 30 byte js file have to be downloaded. Assuming the time a PHP parser at the server takes to read and process a long file and a short file is the same ( which isn't true, but may aswell be compared to transmit time differences ) it would be better to have a single response : there's less bytes to transfer, since '1 hits' is less bytes than 'document.write('1 hits');', and since the page doesn't need a '<script src=', and since there's only one HTTP header required for the response... There's not much in it, but if the page is dynamic anyway, there would be no point NOT including the hit counter output in the generated page directly.

But if the page in question ISN't dynamic; the second third fourth and etc time the page might be pulled from a cache, and only the 30 byte js is downloaded... = less drain on the server, and less time to download the whole thing.

To tehgreatmg:

Try taking out the session part temporarily:

<?php

// get current hit
$opFile = fopen ("counter.txt", "r");
$handle = fread ($opFile, filesize ("counter.txt"));
fclose ($opFile);

// add the hit
$handle = $handle + 1;

// print javascript
echo 'document.write("'.$handle.' Hits");';

// put new hit to db
$opFile = fopen ("counter.txt", "w");
fwrite ($opFile, $handle);
fclose ($opFile);

?>

Certainly make sure that a counter.txt file exists in the same folder as the counter.php file. If that works, then look into the permissions on that C:\DOCUME~1\c9972442\LOCALS~1\Temp\php\session\ folder.. I don't know anything about Windows as a server OS, but try this if you're using IIS: http://www.peterguy.com/php/install_IIS6.html.. link explains how ( and why ) to set some neccessary permissions and how to configure PHP.

Do you manage your own public HTTP server, or do you just use the PC/localhost to test things? If you rent hosting somewhere, it's their responsibility to configure PHP/etc. So such things are usually working.

[digital-ether]

Thanks MattEvans:

Ah.. I see my mistake. Yes, you need the counter included as a JS File if your HTML page will be cached.

For OP:

I would recommend sending some headers to prevent caching of counter.php.

in counter.php:

<?php

// no cache headers
header('Expires	Mon, 26 Jul 1997 05:00:00 GMT');
header('Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
header('Pragma	no-cache');
// etc. etc.

// rest of your code...
session_start ();

// .. and the rest... etc. etc.