similar effect as iframes but with php

[arielmedel]

I need to be able to change the content of a page without changing the header and the menu. I read that iframes or AJAX are NOT search engine friendly(plus AJAX is pretty difficult).

Can someone give me advise? Any links to tutorials? Please help. Thanks.

[btherl]

Would reloading the entire page, but reading the menu, header etc from a common file be good enough?  That's the sort of thing that php is quite good at, especially using Smarty templates.

[arielmedel]

Well, what I want to do is this:

I have a page for a band, on top there's a mp3 player, below it it's a header and the menu.

If I leave it as common html, when the user clicks on a menu button, and the page for that link starts to load, the song in the mp3 player will stop playing, I want the user to be able to navigate through the site without the music stoping. So I think if the top part of the pages does not reload, then the music will continue to play no matter where on the site the user goes....

[tomfmason]

You could use ajax and that would be fine. Just have a site map for the bots.

[arielmedel]

Tomfmason:

Do you know a good tutorial to do that? Thanks.

[tomfmason]

First, this is not very different from using the get method in php..

here is a simple example of parsing the incomming url(javascript) and then you can act on it based on the input. Later I will give a simple example of a site map. I personaly like to split the url by the ? and then send the url to a php script for processing. Like this.

[code=php:0]
//first we create a standard xmlhttprequest

function createRequestObject() {
    if (window.XMLHttpRequest) { // Mozilla, Safari, Opera...
        var xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType)
xmlhttp.overrideMimeType('text/xml');
    }
else if (window.ActiveXObject) { // IE
        try {
            var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!xmlhttp) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
return xmlhttp;
}

//now we parse the incomming url

function parseUrl() {
     //this will get the url in the address bar.
     var url = window.location.href;
     //now we split the url by the ?
     var parts = url.split("?");
     //now we check to see if the array create is empty and if it is we
     // will return home (or whatever). This means that we do not load process any further.
     if (parts.length == 0) {
         //now we return home
        return 'home';
     } else {
         //now we get the parts of the url after the ?
         var urlString = parts[1];
         return urlString;
     }
}

//now we open the backend processing file and use the get method to get the page
var http = createRequestObject();

function getPage() {
   var urlString = parseUrl();
   if (urlString !== 'home') {
      //now we use the urlString to get the page
      http.open('GET', 'yourscript.php?' + urlString);
      http.send(null);
      http.onreadystatechange = handlePage;
   }
}

//now this will handle the response from the php file.

function handlePage() {
   if (http.readyState == 4) {
       //the response text from the php file
       var response == http.responseText;
       //now we write the response to your div that contains the dynamic content
       document.getElementById('yourDiv').innerHtml = response;
   }
}
[/code]

That was a short and sweet example of parseing a url with javascript and then using ajax to send the results to a php processing file and then acting on the response.

So say you wanted to go to the page about us you would have the following in the address bar.[b]index.html?page=contact[/b]

Now in the php file I would do something like this..

[code]
<?php
session_start();//just incase you need it later
//now we set up a valid array of pages
$valid_pages = array('test', 'anotherpage');
//now we set up a valid array of actions or pages. This is the ?something part the the passed url
$valid_keys = array('page', 'action');
$keys = array_keys($_GET);
//now we use array_values to get the first value of the first part of the array
$vals = array_values($_GET);
if ((!in_array($keys[0], $valid_keys)) || (!in_array($vals[0], $valid_pages))) {
   echo "Invalid Page";
   exit();
}

function getPage($page) {
    switch($page) {
        case "about":
             echo '<b>This is the contact us page</n>';
        break;
        case "anotherpage":
          //your other page goes here
        break;
    }
}

getPage($vals[0]);
?>
[/code]


Now as far as the site maps here is a post at digitalpoint that I think will help you alot http://forums.digitalpoint.com/showthread.php?t=54516


Hope that helps,
Tom

[b]EDIT[/b]

I almost forgot to tell you that will need an onload event in the body of the html.. Like this

[code]<body onload="getPage();">[/code]