Building a Page Counter (Image) Using JScript.Net: ASP Alliance


Building a Page Counter (Image) Using JScript.Net

page

by Devarticles.com
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 28296/ 54

Introduction

The Microsoft .NET Framework offers dozens of built-in objects and classes. In this article we will take a look at a small application running on ASP.NET that creates a graphical counter for your web page.

To understand this article, you are required to have some previous knowledge of JScript.NET, ASP.NET, and, of course, HTML. To try the examples shown in this article for yourself, you will need the .NET Framework and IIS 5 or higher installed on Windows NT/2000/XP server

How Should the Counter Work?

A counter should count the number of users visiting a web page. If a user opens a specific page, the counter should increase, create a new image, and save the number of visitors in a file. The number should only increase if the visitor is new. If you increment the number of visitors every time the counter is displayed, then obviously you do not get the correct numbers of unique visitors, and will then get the number of page views instead.

So, we only need to increment the counter if we’re dealing with a new visitor. We can do this with a cookie, using standard browser functions. With a cookie, we can send the browser a flag that the current user has already visited our web page. If the user comes back within 120 seconds then we will ignore this cookie and increment the counter.

Let's start with our JScript.Net code...

The JScript.Net Code, Part 1

First off, we need to create the functions which will read and save the counter (increase counter before if new visitor). Copy the following code into a new text file and save the file as counter.aspx:

[code="JScript"]

<%@ Page Language="JScript"%>
<%@ Import Namespace="System.IO" %>

<% var FilePath:String = Server.MapPath("\\") + "counter.txt";

function getCounter():String
{
var SR:StreamReader = File.OpenText(FilePath,FileMode.Open);
var Counter:String = SR.ReadLine().ToString();
SR.Close();

var Cookie:HttpCookie;
Cookie = Request.Cookies("OldVisitor");

if(Cookie==null)
{
var CounterInt:int = Convert.ToInt32(Counter);
CounterInt++;
Counter = Convert.ToString(CounterInt);

var FS:FileStream = new FileStream(FilePath, FileMode.Open, FileAccess.Write);
var Text:StreamWriter = new StreamWriter(FS);
Text.WriteLine(Counter);
Text.Close();
FS.Close();

Cookie = new HttpCookie("OldVisitor","true");
Cookie.Expires = DateTime.Now.AddSeconds(120);
Response.AppendCookie(Cookie);
}

return Counter;
}

Response.Write(getCounter());
%>
End Sub

[/code]

You should now place the counter.aspx in your root folder (i.e. c:\InetPub\wwwroot) on your Internet Information Server. Also, create a file called counter.txt and set the read/write security options to full access for the user your are running under IIS. Open the counter.txt file, write a number (i.e. 999) and save the file.

When you now open the URL http://localhost/counter.aspx in your browser, you will see a text counter. The counter has already add one count to the number you put in counter.txt.

The JScript.Net Code, Part 2

Now we want to replace the text counter with an image that we will create on the fly. Add the following code to counter.aspx before the "Response.Write(getCounter());" line:

[code="JScript"]

function drawCounter()
{
var height:int=20;
var width:int=60;

var bmp:Bitmap = new Bitmap(width, height);
var img:Graphics = Graphics.FromImage(bmp);

var white:SolidBrush = new SolidBrush(Color.White);
var black:SolidBrush = new SolidBrush(Color.Black);

var CurrentCounter:String = getCounter();

var CounterFont:Font = new Font("Arial", 8, FontStyle.Bold);
var Text:SizeF = img.MeasureString(CurrentCounter,CounterFont);

img.FillRectangle(black, 0, 0, width, height);
img.DrawString(CurrentCounter, CounterFont, white ,(bmp.Width)-((Text.Width)+5),3);

bmp.Save(Response.OutputStream, ImageFormat.Jpeg);

img.Dispose();
bmp.Dispose();
}

[/code]

The JScript.Net Code, Part 3

Also, add the following namespaces to the namespace declarations at the beginning of the file:

[code="JScript"]

<%@ Import namespace="System.Drawing" %>
<%@ Import namespace="System.Drawing.Imaging" %>
<%@ Import namespace="System.Drawing.Drawing2D" %>

[/code]

And finally, replace "Response.Write(getCounter());" with "drawCounter();". Go back to your browser and refresh the page. You will see a graphical counter that increments when any new visitor comes to the page.

Conclusion

In this article we've taken a look at some JScript.Net code to create a graphical counter using ASP.Net's built-in image manipulation and creation tools. Download the support code using the link below if you’d like to implement this counter on your web site.

This article was contributed by the team at http://www.devarticles.com. devArticles provides ASP, PHP and .NET articles, tutorials, reviews, interviews and FREE eBooks. If you're after some serious programming tutorials then...

Product Spotlight