JavaScript - Simple Visitor Page Count

Submitted by: 
Language: 
Visitors have accessed this post 267 times.

In this tutorial we will create a Simple Visitor Page Count using JavaScript. This code can trace the total visitor that visited your page based on the IP. The code itself use cookie to store a counter that increment every time the visitor visit your page. Feel free to modify and apply it in your system, this is a user-friendly kind of program

We will be using JavaScript as a server-side scripting language because It gives a greater control of your web page and extend its capability in a modern way approach. It is written in HTML or as an external sourcing to add some necessary features in your website.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. </head>
  7. <nav class="navbar navbar-default">
  8. <div class="container-fluid">
  9. <a class="navbar-brand">Sourcecodester</a>
  10. </div>
  11. </nav>
  12. <div class="col-md-3"></div>
  13. <div class="col-md-6 well">
  14. <h3 class="text-primary">JavaScript - Simple Visitor Page Count</h3>
  15. <hr style="border-top:1px dotted #ccc;"/>
  16. <div id="result"></div>
  17. </div>
  18. <script src="js/script.js"></script>
  19. </body>
  20. </html>

Creating the Script

This code contains the script of the application. This code will count the times that the visitor visited a page. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.

  1. expiration = new Date;
  2. expiration.setMonth(expiration.getMonth()+6)
  3. counter = eval(cookieVal("total_visited"))
  4. counter++
  5. document.cookie = "total_visited="+counter+";expires=" + expiration.toGMTString()
  6.  
  7.  
  8. function cookieVal(cookieName) {
  9. thisCookie = document.cookie.split("; ")
  10. for (i=0; i<thisCookie.length; i++){
  11. if (cookieName == thisCookie[i].split("=")[0]){
  12. return thisCookie[i].split("=")[1]
  13. }
  14. }
  15. return 0;
  16. }
  17.  
  18. document.getElementById('result').innerHTML = "<center><h3>You visited this page <label style='font-size:40px;' class='text-info'>"+counter+"</label> times.</h3></center>";

There you have it we successfully created a Simple Visitor Page Count using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.