Solved

How do i create a script to automatically switch to another web page in the same folder on the web server?

Posted on 2011-02-10
10
390 Views
Last Modified: 2012-05-11
I'm trying to find a way to automatically change to another another web page without adding code to each page.  I would like to have one "master" page or script control what and when each page gets displayed.  The reason i don't want to hard code the pages is because they change frequently and i'm trying to allow the different departments to update the web site files themselves.

The hosting web server is 2008 R2 with PHP 5 installed.

I'm trying to display these web sites on a Samsung 400DXn-2 LCD that has a PC built in running Windows XPe with MagicInfo-i on top of that.

The content starts out as a MS Word document and has been getting saved as a "filename.HTM" file.  The goal was to copy the new htm file to a directory on the web server and have the script automatically pick up on the file changes (adds or deletes) and add it to the page rotation.

I'm able to get this work work with images using PHP from http://panmental.de/public/programming_projects/Slideshow%20script%20in%20PHP/ but am unable to figure this out for HTM or HTML pages.
0
Comment
Question by:timkrampe1
  • 3
  • 2
  • 2
  • +2
10 Comments
 
LVL 28

Expert Comment

by:strickdd
Comment Utility
I believe what you are wanting to do would best be accomplished through iFrames. Simply have your "masterpage" contain the links to all detected documents and load the content in the iFrame when they click the link.
0
 
LVL 1

Author Comment

by:timkrampe1
Comment Utility
Ok, i can get the different pages to change every so many seconds when it is hard coded, but how do you think i should go about querying the folder for the filenames and dumping that into the iframes "masterpage" slideshow?
0
 
LVL 28

Expert Comment

by:strickdd
Comment Utility
If you make an AJAX call to your script that returns a simple string array of the pages to display and update the list rotating the iFrame you should be golden.
0
 
LVL 26

Expert Comment

by:jar3817
Comment Utility
Sounds like you need a content management system. So all pages are in a database and can be updated whenever on the fly.
0
 
LVL 6

Expert Comment

by:hexer4u
Comment Utility
If you want to always go to the newest file, then you need a PHP script that lists all files in a directory (the directory where you save your html or whatever files), and sort them by last modification date (that is filemtime() function in php), descending. You would now have the first entry as the newest one, so you could do whatever you wish with it, like
echo file_get_contents('filename.html');

Open in new window

to show it's contents.
Now, you could have this functionality inside a "loader.php" file, and another "index.php".

In the loader.php you would always print the name of the latest file.

In the index.php file you would have a nice <iframe> inside it that covers the entire page. Then, using Ajax you could call the loader.php file every... 10 seconds, and see if the current src="xxx" attribute of the iframe is the same as the one from the loader.php. If it isn't, you change the src of the iframe with the one from loader.php.

This should be easy enough to implement, but you have to know a bit of Javascript and Ajax (I suggest jQuery for both).
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:timkrampe1
Comment Utility
I'm in agreement that iframes will probably be the way to go for this project because i can load several different content types in the window and use it in both "quality" and "safety" sections that i need to display.  I'm looking into jQuery now.
0
 
LVL 6

Expert Comment

by:hexer4u
Comment Utility
function hints for jQuery (what you'll need):
.ready()
.load()
.ajax()
.attr()

and also take a look at javascript's setInterval() and setTimeout() functions if you don't know them. You'll need these to delay/repeat function calls
0
 
LVL 1

Author Comment

by:timkrampe1
Comment Utility
I've tried my best with jquery and just can't seem to figure it out.  I have almost figured it out in PHP though.  I only have one issue.  I don't know to pass the variable into the iframe source.  Here is the index.php file that has the iframe in it.

<html>
<head>
<script type="text/javascript" src="loader.php"></script>
<script type="text/javascript">

var curpage=0
var pagearray = new Array():

function rotatepages(){
document.getElementById('slideshow').setAttribute('src',pagearray[curpage])
curpage=(curpage<pagearray.length-1)? curpage+1 : 0
}

window.onload=function(){
setInterval("rotatepages()",5000)
}

</script>
</head>

<body>

<iframe id="slideshow" src="start_qa.php" width="100%" height="100%" align="middle"
frameborder="0" scrolling="no">You need a Frames Capable browser to view this content.</iframe>

</body>
</html>

And here is the loader.php file that lists the .htm file names and passes them to the javascript in index.php.

<?php
function returnpages($dirname=".") {
$pattern="(\.htm$)"; //valid web extensions
$files = array();
$curpage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'pagearray['.$curpage.']="'.$file .'";';
$curpage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var pagearray=new Array();'; //Define array in JavaScript
returnpages() //Output the array elements containing the image file names
?>
0
 
LVL 6

Accepted Solution

by:
jjperezaguinaga earned 500 total points
Comment Utility
Greetings timkrampe1,
No need to reinvent the wheel my friend! Or in this case, recode the script. See, I know Jquery can be hard when you are starting, but it’s actually pretty easy after trying it a little bit. Now, as hexer4u said, those magic functions will do your trick. I personally used the load one to help you.

Now, the following script does 2 things: first, let’s you load information from a static file (in this case, file.html); second, through the jquery load fuction, I send parameters to a ajax.php file and get them back, and then write the answer in an iframe -inside the same webpage and with our lovely ajax magic-

Feel free to adapt this script to your needs, as I’m attaching all the files and styles as well.

A preview of what can be achieved.
index.php
<!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" xml:lang="es" lang="es">  
<head>  
<title> Loading the loads</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
		jQuery(document).ready(function($){
				$('#target').click(function() {
					$('#target p').load('file.html');
				});
				
				$('#submit').click(function() {
					var name = $('#name').val();
					$.ajax({
						type: "POST",
						url: "ajax.php",
						data: "name="+name,
						success: function(msg){
						alert( "Loading an iframe Mr. " + msg );
						$('body').append('<iframe src="index.php?name='+name+'" width="100%" height="100%" align="middle" frameborder="0" scrolling="no">You need a Frames Capable browser to view this content.</iframe>');
						}
					});				
				});
		});
		</script>


</head>  
<body> 

<div class="screenSize">
	<div class="center"> 
		<div class="content"> 
		<p> Good day <span> <?php if (isset($_GET['name'])) echo $_GET['name']; else echo 'John!';?> </span> This content is inside a paragraph tag and can be modified in this file.</p>
		</div>
		<div class="content blue" id="target"> 
		<p> Click me! Pretty please? With a cherry on the top? </p>
		</div>
		<div class="content green"> 
		<p> What's your name?</p><br />
		<input type="text" id="name"> 
		<p id="submit"> Click me to submit! </p>
		</div>
	</div>
</div>


</body>
</html>

Open in new window


ajax.php
<?php if (isset($_POST['name'])) {
		echo $_POST['name'];
	  } else {
		echo 'failure :(';
	  } ?>

Open in new window


Hope it helped!

Best regards,
-JJ

ajax.zip
0
 
LVL 6

Expert Comment

by:jjperezaguinaga
Comment Utility
In order to see how I append the new Iframes you will need the style.css, so I recommend to download all the source files contained in the ajax.zip. Here are the styles if you don't want to though:

* {	margin: 0;	padding: 0; }
* body { margin: 0; padding: 0;  background-color: #dfdfdf; font-family: Arial, Helvetica, sans-serif;}

.screenSize {
	width: 100%;
	background-color: black;
}

.center{
	margin: 50px auto;	padding: 0px; height: 100px; width: 1024px; 
	background-color: white; position: absolute; left: 50%; margin-left: -512px;
}

.content {
	width: 29%;
	background-color: red; color: white; float: left; margin: 10px; padding: 10px; float: left; height: 60px;
}

span {font-size: 1.4em; color: black;}
input {width: 50%; float: left;}

.blue{
	background-color: blue;
}

.blue p { cursor: pointer;}

.green {
	background-color: green;
}

iframe {
position: absolute;
margin-top: 150px;
}
#submit { cursor: pointer; float: left; margin-left: 5px;}

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

743 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

12 Experts available now in Live!

Get 1:1 Help Now