• http://www.techneurons.com/career/
  • experienced programming consultants for hire !!!

    Contact Now

    ASP.NET Articles

    KB: Display a custom graphic visitor counter on your ASP.NET website

    WEDNESDAY, FEBRUARY 10, 2010

    This article explains how to add a graphic visitor counter to your website by adding a simple ASPX webpage with few lines of programming. You'll no more be required to add a third party free graphic counter utilities for your ASP.NET web site.

    There are many visitor counters available as free utilities on internet, which requires you to paste a small code snippet on your website. This will display a dynamically render a counter image on your site page, and on clicking them it will take you to the counters website. You'll probably be required to display a tiny link to their website from your web page. All these are bearable, or infact even you can turn off all these extras and have the counter image alone displayed on the page, but the time it takes to load the image would sometimes be more annoying.

    Let us create a simple odometer styles visit counter here using System.Net.Drawing classes.

    First you need to count the number of unique visits to the website. The browser sends request to the server everytime you open a page on your website or make a postback action. If you count every request, you cannot arrive at the correct number of unique visitors on the website.

    You cannot consider counting sessions here - because a session would be having a shorter life time to keep your site secure. Whenever session starts, if you count your unique visitor, you'll end up in a bigger count. This will not help you know how many visitors have come across your website, but instead will show how intense your users are using your website.

    The best way to track your visitors is to use a cookie, which holds a unique ID in its value and having a sliding expiration upto 3-6 hours.

        Const VISITOR_COOKIE As String = "WEBVISITOR"
    
    
        Public Function GetCounter() As Integer
            Dim newVisitorId As String
            If Request.Cookies(VISITOR_COOKIE) Is Nothing Then
                newVisitorId = Guid.NewGuid.ToString
                'Execute the SQL command to increment the counter value in the Database table
                DB.ExecuteCommand("UPDATE webcounter SET VisitorCounter = VisitorCounter + 1")
            Else
                newVisitorId = Request.Cookies(VISITOR_COOKIE).Values("Id")
            End If
    
            Dim ckVisitor As New HttpCookie(VISITOR_COOKIE)
            newVisitorId = newVisitorId
            ckVisitor.Values.Add("Id", newVisitorId)
            ckVisitor.Expires = Now.AddHours(6)
            Response.Cookies.Add(ckVisitor)
            
            'Execute the SQL command to retrieve the current value of the counter from your Database table
            Dim counter As Integer = DB.ExecuteCommand("SELECT VisitorCounter FROM webcounter")
            Return counter
        End Function
    

    The above code will increment your visit count, whenever there is no cookie by name "WEBVISITOR" along with the request to the website. The cookie used here is set to expire after 6 hours, which makes it invalid for any visit to the website after 6 continuous hours of inactivity to your website from any visitor's browser. Sliding Expiration, which means that the validity of the cookie is extended on every visit, and the ultimate expiry time of the cookie is calculated from the last visit done to the website.

    Let us now make the page which will work as the image provider for your graphic visitor counter.

    Step 1: You need to create a new ASPX page for this purpose. Let us name this ASPX page as VisitCounter.aspx

    In the code view (VisitCounter.aspx.vb), paste the above code blocks to get the counter's current value.

    The following namespaces need to be imported:

    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    Imports System.Drawing.Imaging

    In the Page Load event, you can have the code as follows:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Response.Clear()
            Response.Cache.SetNoStore()
            Response.ContentType = "image/jpeg"
            Dim length As Integer = 6
            Dim fontSize As Integer = 16
            Dim letterWidth As Integer = 15
            Dim letterHeight As Integer = 18
            Dim letterOffsetX As Integer = 2
            Dim backgroundColor As Color = Color.Black
    
            Dim number As Integer = GetCounter()
            Dim sNum As String = number.ToString.PadLeft(length, "0")
         
            Dim bmp As New Bitmap(letterWidth * length + 2, letterHeight + 2)
    
            Dim gr As Graphics = Graphics.FromImage(bmp)
            gr.CompositingQuality = CompositingQuality.HighQuality
            gr.PixelOffsetMode = PixelOffsetMode.HighQuality
            gr.InterpolationMode = InterpolationMode.HighQualityBicubic
            gr.SmoothingMode = SmoothingMode.HighQuality
         
            Dim bgBrush As New SolidBrush(backgroundColor)
            gr.FillRegion(bgBrush, New Region(New Rectangle(0, 0, bmp.Width, bmp.Height)))
            Dim font As New Font("Arial", fontSize, FontStyle.Bold, GraphicsUnit.Pixel)
    
            For i As Integer = 0 To length - 1
                gr.DrawRectangle(Pens.LightGray, New Rectangle(i * letterWidth + 1, 1, letterWidth, letterHeight))
                gr.DrawString(sNum.Chars(i).ToString, font, Brushes.White, i * letterWidth + letterOffsetX, 1)
            Next
         
            gr.DrawRectangle(Pens.Gray, New Rectangle(0, 0, letterWidth * length + 2, letterHeight + 2))
    
            bmp.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg)
            Response.End()
        End Sub

    Explanation:


    The Response buffer is cleared fully, and the new content is set with content type "image/jpeg"

            Response.Clear()
            Response.Cache.SetNoStore()
            Response.ContentType = "image/jpeg"
    

    The code block below set the various parameters of the visitor counter - length of counter value, font size, width and height of each letter block, X-Offset of letter within each block, as well as the background color. There are other parameters like border color, etc. which you can change on the rendering code below.

    
            Dim length As Integer = 6
            Dim fontSize As Integer = 16
            Dim letterWidth As Integer = 15
            Dim letterHeight As Integer = 18
            Dim letterOffsetX As Integer = 2
            Dim backgroundColor As Color = Color.Black

    Initialize the graphic object, and set it's properties. I have set the properties to render a high quality image.

            Dim bmp As New Bitmap(letterWidth * length + 2, letterHeight + 2)
            Dim gr As Graphics = Graphics.FromImage(bmp)
            gr.CompositingQuality = CompositingQuality.HighQuality
            gr.PixelOffsetMode = PixelOffsetMode.HighQuality
            gr.InterpolationMode = InterpolationMode.HighQualityBicubic
            gr.SmoothingMode = SmoothingMode.HighQuality

    Fill the graphic object with a solid color, which you have chosen as the background color, and draw each character in the Counter Value string padded with zeros on left to make the required length. For each number, I have drawn a border also by using DrawRectangle. Draw an overall border also.

            Dim bgBrush As New SolidBrush(backgroundColor)
            gr.FillRegion(bgBrush, New Region(New Rectangle(0, 0, bmp.Width, bmp.Height)))
            Dim font As New Font("Arial", fontSize, FontStyle.Bold, GraphicsUnit.Pixel)
    
            For i As Integer = 0 To length - 1
                gr.DrawRectangle(Pens.LightGray, New Rectangle(i * letterWidth + 1, 1, letterWidth, letterHeight))
                gr.DrawString(sNum.Chars(i).ToString, font, Brushes.White, i * letterWidth + letterOffsetX, 1)
            Next
    
            gr.DrawRectangle(Pens.Gray, New Rectangle(0, 0, letterWidth * length + 2, letterHeight + 2))

    Finally, save the graphic to Response.OutputStream in JPEG format (you have used Content-Type as image/jpeg), and close the Response Stream using Response.End

            bmp.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg)
            Response.End()
    

    The rendering logic used above is just a sample, and you can use your programming and creativity to create different styles of counters.

    Step 2: Display the Visitor Counter on a webpage.

    Displaying the custom visitor counter on any page of your site is quite a simple job. You just need to add an IMG tag with SRC property set to locate the VisitCounter.aspx. For safety of maintaining relative URLs, you can always use asp:Image control using the following syntax:

            <asp:Image runat="server" id="visitCounter" ImageUrl="~/VisitCounter.aspx" />
    

    Download the source code for this article here.

    ConsultSarath - We provide end to end outsourcing solutions for .net programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for php programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India. ConsultSarath - We provide end to end outsourcing solutions for python programming requirements- you can hire programmer for hourly rates, for monthly commitments, for short term projects, for long term projects, Contact to know our hourly rates for programmer in India.

    Other Popular Articles
    We are experts in Cloud Computing Technologies. We can assist you to build high scalable business applications using Amazon Web Services (Amazon EC2, Amazon S3, Amazon SES, SNS, CloudFront), Windows Azure Platforms - Windows Azure and SQL Server Azure, Google App Engine using Python and Django Framework. We are Expert Programming Consultants available at affordable rates per hour. We work on several technologies - .NET, Python, Google App Engine, PHP, Windows Azure, Amazon Web Services ...