Solved

Record page Hits to Spry Tabbed Panels

Posted on 2007-11-20
5
423 Views
Last Modified: 2013-12-13
Since redeveloping a site with Spry Tabbed Panels to replace separate pages, the record of page views has dropped by two-thirds since the page is referenced by $_SERVER["SCRIPT_NAME"]. Is there a way, Javascript or PHP, to record when a Panel tab is hit?
0
Comment
Question by:air4casts
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:simonkin
ID: 20318832
Hi,

If you post your script I may be able to post a solution which uses AJAX (triggered by a javascript onClick event on the tab) to update your database with the page views.
0
 

Author Comment

by:air4casts
ID: 20329057
Thank you for your reply; a stripped down page is attached.
 <?php 

$site="int_tab";

$page=$_SERVER["SCRIPT_NAME"];  

$ip = getenv('REMOTE_ADDR');

$datein=date('Y-m-d H:i:s');

$daydate=date ('Y-m-d');

$referer=getenv('HTTP_REFERER');

$browser=getenv('HTTP_USER_AGENT');
 
 

require_once('Connections/conn_333mysql.php');

mysql_select_db($database_conn_333mysql, $conn_333mysql);

   $sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";
 

 mysql_query($sql_login,$conn_333mysql) or die(mysql_error());
 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

</head>
 

<body>

<table width="600" border="0">

  <tr>

    <td><div id="TabbedPanels1" class="TabbedPanels">

      <ul class="TabbedPanelsTabGroup">

        <li class="TabbedPanelsTab" tabindex="0">First</li>

        <li class="TabbedPanelsTab" tabindex="0">Second</li>

        <li class="TabbedPanelsTab" tabindex="0">Third</li>

        <li class="TabbedPanelsTab" tabindex="0">Fourth</li>

      </ul>

      <div class="TabbedPanelsContentGroup">

        <div class="TabbedPanelsContent">Content 1</div>

        <div class="TabbedPanelsContent">Content 2</div>

        <div class="TabbedPanelsContent">Content 3</div>

        <div class="TabbedPanelsContent">Content 4</div>

      </div>

    </div></td>

  </tr>
 

</table>

<script type="text/javascript">

<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

//-->

</script>

</body>

</html>

Open in new window

0
 
LVL 4

Accepted Solution

by:
simonkin earned 500 total points
ID: 20329474
Hi,

First of all, this is an AJAX script which uses both PHP and Javascript.

I've added a javascript function "recordVisit(id)" to the top of the page. You should save this as a seperate javascript file and call it from there.

I've also modified the tabs to wrap each tab name in a span which allows us to attach a javascript onclick function.

Example...

li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('First');">First</span></li>

Just replace the "First" in "recordVisit('First')" with the actual name of the tab that you want to log a visit for.

There is also an extra php script attached which the AJAX sends the parameters off to. This script actually updates the database and returns a status message to AJAX. If you like you can rename / store this to what you like, although if you do, make sure that all paths are correct.

Basically if you upload this script and the php script as is, you will see results.

The first file in the code snippet below is your file with the AJAX attached. The bottom file is the php file which you should save as "recordVisit.php" in the same directory as the page.

I've tried to explain this as best as I can, hope I didn't confuse you!
<?php 

$site="int_tab";

$page=$_SERVER["SCRIPT_NAME"];  

$ip = getenv('REMOTE_ADDR');

$datein=date('Y-m-d H:i:s');

$daydate=date ('Y-m-d');

$referer=getenv('HTTP_REFERER');

$browser=getenv('HTTP_USER_AGENT');

 

 

/*require_once('Connections/conn_333mysql.php');

mysql_select_db($database_conn_333mysql, $conn_333mysql);

   $sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";

 

 mysql_query($sql_login,$conn_333mysql) or die(mysql_error());*/

 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

<script type="text/javascript">

// You should save this javascript function as a file and call it as above, if you do make sure the path to recordVisit.php is set properly relative to the script.

function recordVisit(id){	

	var ajaxRequest;  // The variable that makes Ajax possible!

	

	try{

		// Opera 8.0+, Firefox, Safari

		ajaxRequest = new XMLHttpRequest();

	} catch (e){

		// Internet Explorer Browsers

		try{

			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try{

				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (e){

				// Something went wrong

				alert("Your browser broke!");

				return false;

			}

		}

	}

	// Create a function that will receive data sent from the server

	ajaxRequest.onreadystatechange = function(){

		if(ajaxRequest.readyState == 4){

			// Comment out the following line if you don't want to see the javascript alert

			alert(ajaxRequest.responseText);

		}

	}

	

	// Which tab are we recording?

	var page = document.getElementById(id).innerHTML;

	

	// Hack to make sure we can re-use the AJAX request on the page

	var dynamic = "&dynamic=" + Math.floor(Math.random()*99999999999999999);

	var queryString = "?page=" + page;

	

	// Send the AJAX request off to the php loggin page...

	ajaxRequest.open("GET", "recordVisit.php" + queryString + dynamic, true);

	ajaxRequest.send(null); 

}

</script>

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<table width="600" border="0">

  <tr>

    <td><div id="TabbedPanels1" class="TabbedPanels">

      <ul class="TabbedPanelsTabGroup">

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('First');">First</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Second');">Second</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Third');">Third</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Fourth');">Fourth</span></li>

      </ul>

      <div class="TabbedPanelsContentGroup">

        <div class="TabbedPanelsContent">Content 1</div>

        <div class="TabbedPanelsContent">Content 2</div>

        <div class="TabbedPanelsContent">Content 3</div>

        <div class="TabbedPanelsContent">Content 4</div>

      </div>

    </div></td>

  </tr>

 

</table>

<script type="text/javascript">

<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

//-->

</script>

</body>

</html>
 
 

.....

.....
 
 

<?php
 

	// Define the variables

	$site="int_tab";

	$page=$_GET["page"];;  

	$ip = getenv('REMOTE_ADDR');

	$datein=date('Y-m-d H:i:s');

	$daydate=date ('Y-m-d');

	$referer=getenv('HTTP_REFERER');

	$browser=getenv('HTTP_USER_AGENT');
 

	// Load the database connection routine

	require_once('Connections/conn_333mysql.php');

	

	// Perform the query

	mysql_select_db($database_conn_333mysql, $conn_333mysql);

	$sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";

 

 	mysql_query($sql_login,$conn_333mysql) or die(mysql_error());
 

	// This is just for testing purposes, you can remove the following if you like.

	// It gives the content for the javascript alert box

	$return = "Page = $page \r\n";

	$return .= "IP = $ip \r\n";

	$return .= "Date In = $datein \r\n";

	$return .= "Day Date = $daydate \r\n";

	$return .= "Referrer = $referer \r\n";

	$return .= "Browser = $browser \r\n";
 

	// This is the result of the AJAX request

	echo $return;
 

?>

Open in new window

0
 

Author Comment

by:air4casts
ID: 20330339
Quite brilliant! Thanks very much
0
 
LVL 4

Expert Comment

by:simonkin
ID: 20334499
Hi,

Glad to have helped.

Now where are my points?!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now