Absolute URL creation with PHP

christinemarie

Hello,

I've never used PHP before, and was advised that it was the best method for creating an absolute URL in the situation described below.

My navigation is in one div, while all other pages for the site are loaded via ajax into a div below it. If the base url is http://www.mysite.com/index.html, for example. When a visitor clicks Page Two, and pagetwo.html loads into the div below, the address bar still says http://www.mysite.com/index.html. I would like for it to change to http://www.mysite.com/pagetwo.html.

A programmer friend of mine suggested the following:

Make your new page page.php (instead of page.html) and put some scripting in it to tell if it is being accessed directly or via AJAX. If via AJAX, just return what is currently there. If it is directly, then wrap the current content with the header and footer. You could probably do the same thing with javascript.

Can anyone advise me on how this can be done, keeping in mind that I am a full-fledged beginner to PHP. I can provide links/code if necessary.

Thanks in advance,
Christine

Krik

I think I understand what your trying to do. But how you explained you want to go about it seems a bit confusing.

As you are using AJAX I am guess your javascript skills are in good order. But I am wondering why you are using AJAX to load a static HTML pages into your site, as AJAX is more for passing data to server side script and retuning the output. Really its best usage is for web based applications.

I would think you would be ahead to use a PHP include() to include different content pages inside your main page.

So a url like "http://www.mysite.com/index.php?page=pagetwo" could load the contents of pagetwo.php with this

<?php
if (isset($_GET['page'])) {
    include($_GET['page'] . '.php');
}
else {
    include('defaultpage.php');
}
?>

Of course there is a security risk in that usage. So you will want to at least use an array to check the value against to see if the value of $_GET['page'] is a valid page.

<?php
$page_array = array( "pageone" , "pagetwo" );

if (isset($_GET['page'])) {
    $page = $_GET['page'];
}
else {
    $page = 'defaultpage';
}
?>
// you can have some HTML inserted here, or not, depends on your preference
<?php
if (in_array("$page", $page_array)) {
    include($page . '.php');
}
?>

I think you will find that to be much less code that using AJAX and if my perception of your skill in javascript is accurate you will easily understand the php above.

christinemarie

Very helpful thank you!

The reason I'm using AJAX is because I stumbled upon this script:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

It was doing exactly what I needed it to do.

My main interest is for my navigation area to not refresh with the rest of my pages. The other portion of that is how do I maintain my active links using PHP?

I believe what your PHP is saying is that if the navigation of the page appears, load the new page. If it's not there, include it.

I'm doing some tutorials online to help me get a better handle on PHP.

Krik

My main interest is for my navigation area to not refresh with the rest of my pages. The other portion of that is how do I maintain my active links using PHP?

For the navigation issue I guess I should have been more detailed in my explanation.

Think of a page in your site as having 3 areas header, menu (navigation), and body (not the same as <body>), there may be a 4th the footer, which you may or may not have. Now each of those sections may have other sections but that is the simplified breakdown.

In a well designed site each part will be a separate php page and then they are each included in to an index page. And generally (not always) only the contents of the body will be changed. And the method I demonstrated above makes it were you can create differing links that will keep reloading the index page but change the contents of just the body of the page.

On "active links" I guess exactly what you mean by that is a bit unclear. But if you are referring to just knowing which page is currently being displayed it is real easy as the $page variable can be inserted in javascript to check its value and perform some action.

<script>
document.getElementById('<?php echo $page; ?>link').style.color = '#A000A0';
</script>

Hope that helps

christinemarie

Thanks again. This is really starting to make sense now. I am going to try putting together my first php-based site this week.

By active links, yes, I meant making the link a different color so a visitor knows which page he/she is on. Your response was right on the mark.

shawty

I generally find the the Jquery javascript library works fantasticly for things like this. First you should goto http://www.jquery.com/ and download the latest version.

Copy this downloaded file to your web host and rename it jquery.js

Once you've done that, the following structured HTML will load and use Jquery

Copy it to a file on your web host...

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

<html>

  <head>
    <title>Index page 1</title>
    <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

  /* Jquery uses a slightly strange syntax, but once you learn it */
  /* it shortens what you have to type considerably               */

  /* this function is called when the document has finished loading and is ready to proceed */
 	$(document).ready(function()
	{

	  /* This function is called when the link with ID="link1" is clicked on */
	  $('#link1').click(function()
	  {
	    /* The div tag with ID="newcontent" is loaded via ajax with the new page */
	    /* nothing else is reloaded...... only the central div                   */
	    $('#newcontent').load('page1.php');

	    /* swap the link colors */
	    $('#link1').addClass('select');
	    $('#link2').removeClass('select');

	    /* Change the title */
	    document.title = "PHP Page 1";

	    /* the following line stops the A link from actually executing and doing a page reload */
	    event.preventDefault();
	  });

	  /* This function is called when the link with ID="link2" is clicked on */
	  $('#link2').click(function()
	  {
	    /* The div tag with ID="newcontent" is loaded via ajax with the new page */
	    /* nothing else is reloaded...... only the central div                   */
	    $('#newcontent').load('page2.php');

	    /* swap the link colors */
	    $('#link1').removeClass('select');
	    $('#link2').addClass('select');

	    /* Change the title */
	    document.title = "PHP Page 2";

	    /* the following line stops the A link from actually executing and doing a page reload */
	    event.preventDefault();
	  });

    /* when this page first loads, we load page1.php into the center content and display it as the default page */
    /* and set some defaults                                                                                    */
	  $('#newcontent').load('page1.php');
    $('#link1').addClass('select');
    document.title = "PHP Page 1";

  });

</script>

<style>

  /* CSS styles to set the colours, heights and widths of the various divs */
  #header
  {
    background-color: #EEEEEE;
    width: 100%;
    height: 60px;
  }

  #links
  {
    background-color: silver;
    width: 100%;
    height: 25px;
  }

  #newcontent
  {
    background-color: white;
    width: 100%;
    height: 200px;
  }

  #footer
  {
    background-color: silver;
    width: 100%;
    height: 25px;
  }

  /* normal colour of links */
  a.noselect
  {
    color: blue;
  }

  /* selected colour of links */
  a.select
  {
    color: red;
  }

</style>
  </head>

  <body>
    <div ID="header"><h1>Page header logo and text will go here</h1></div>

<div ID="links">&nbsp;&nbsp;
  <a href="#" ID="link1" title="Click here to load page 1" class="noselect">[Page 1]</a> | 
  <a href="#" ID="link2" title="Click here to load page 2" class="noselect">[Page 2]</a>
</div>

<div ID="newcontent">
  <p>New content will be loaded here....</p>
</div>

<div ID="footer">This is where the page footer will go</div>
  </body>

</html>

The file looks more complicated than it actually is, so don't be scared. Iv'e commented the important bits, and if you've been dealing with divs & styles & such like then the rest should be plain sailing.

the following 2 PHP files should also be put in the same folder as jquery, and test.html on your web host

page1.php

<h1>This is page 1</h1>

<p>It's a PHP file thats called using AJAX by Jquery, and loaded into a static HTML template containing a central DIV</p>

<?php

  print "<p>Just to prove that it is indeed PHP, this line is generated using a PHP print statement</p>";

?>

page2.php

<h1>This is page 2</h1>

<p>It's a PHP file thats called using AJAX by Jquery, and loaded into a static HTML template containing a central DIV</p>

<?php

  print "<p>Just to prove that it is indeed PHP, Below you can see coloured text..</p>";
  print "<hr/>";

  $br = rand(0,255);
  $bg = rand(0,255);
  $bb = rand(0,255);
  $background = sprintf("#%2X%2X%2X",$br,$bg,$bb);

  $fr = rand(0,255);
  $fg = rand(0,255);
  $fb = rand(0,255);
  $foreground = sprintf("#%2X%2X%2X",$fr,$fg,$fb);

  print "<p style='background-color: " . $background . "; color: " . $foreground . ";'>This is text with a random background and forground colour...</p>";

?>

In reality you can use any files you want, they don't have to be PHP, but since this is a PHP forum then i guess they should be ;-)

Also there are probably slightly better ways of doing some of the stuff (Switching the styles for example) but i deliberately tried to keep things simple.

You can find a wealth of tutorials and other info at the jquery website. I use jquery now for ALL my ajax/dom/js requirements in all my php projects.

Cheers

Shawty

christinemarie

Thank you for your help! I received support on this already, and was able to build the site in php with absolute URLs in place.