Page 1 of 1

Page Header and Footer Functions

Posted: Thu Jul 24, 2008 9:18 am
by imderek
Hi all,

I've created two functions which I include in all my pages. The Header function echos the first portion of my html (including tags: html, head, body, container div, logo img, etc.) and the Footer function closes the open tags. The problem I've run into is that the head tag has relative links to the CSS and JS files, so when I create a page which is in a subdirectory and use the same functions, it obviously cannot locate the CSS or JS.

The reason I don't wish to use absolute linkage is the fact that I'm developing with WAMP on my workstation and the paths vary from when I'm testing it locally and when it is on the web server.

So how do I make the same function work for a page regardless of its directory location without using absolute linkage? Is there some sort of argument I can pass to the function to remedy this?

Many thanks!

Code: Select all

function insertHeader() {
    echo '
    <!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="en">
    <head>
    <title>Executive Search Firm for the Kitchen/Bath and Building Industry | Brooke Chase Associates, Inc.</title>
    <meta name="Copyright" content="All Images, Flash, Copy and Code copyright 2008 Brooke Chase Associates, Inc." />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!-- css -->
    <link href="css/display.css" rel="stylesheet" type="text/css" />
    <!-- jquery -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#form").validate();
    });
    </script>
    </head>
    <body>
    <div id="container">
';
}

Re: Page Header and Footer Functions

Posted: Thu Jul 24, 2008 9:46 am
by pickle
Would semi-absolute paths work? The path to the JS/CSS files should be the same from the document root

For example, if the CSS file is stored at http://www.mydomain.com/styles/blue.css , make your link to this file:

Code: Select all

<link rel = "stylesheet" type = "text/css" href = "/styles/blue.css" />

Re: Page Header and Footer Functions

Posted: Thu Jul 24, 2008 10:07 am
by imderek
pickle wrote:Would semi-absolute paths work? The path to the JS/CSS files should be the same from the document root

For example, if the CSS file is stored at http://www.mydomain.com/styles/blue.css , make your link to this file:

Code: Select all

<link rel = "stylesheet" type = "text/css" href = "/styles/blue.css" />
The trouble with semi-absolute paths is that the number of levels to the document root are different when local and when hosted.

Re: Page Header and Footer Functions

Posted: Thu Jul 24, 2008 10:47 am
by mabwi
Do you have a config file that's included for each page? You could set the base path there - either as a constant or returned in a function - and then you would only have to change it in one place when you move servers.

Re: Page Header and Footer Functions

Posted: Thu Jul 24, 2008 11:03 am
by ghurtado
imderek wrote: The trouble with semi-absolute paths is that the number of levels to the document root are different when local and when hosted.
They are called "root-relative" paths (as opposed to document-relative paths, the kind you had before), and this will only work as long as the path from your document to the root of the webserver are the same.

I have solved this same problem before by using document relative paths, then adding a base tag to the document which gets dynamically populated by php based on the document root. That way you only have one "dynamic" spot to change (in the header) and all your links should work regardless of environment.

Something like:

Code: Select all

 
<base href="<?= getenv("DOCUMENT_ROOT") ?>" />
 

Re: Page Header and Footer Functions

Posted: Thu Jul 24, 2008 2:26 pm
by imderek
ghurtado wrote:
imderek wrote: The trouble with semi-absolute paths is that the number of levels to the document root are different when local and when hosted.
They are called "root-relative" paths (as opposed to document-relative paths, the kind you had before), and this will only work as long as the path from your document to the root of the webserver are the same.

I have solved this same problem before by using document relative paths, then adding a base tag to the document which gets dynamically populated by php based on the document root. That way you only have one "dynamic" spot to change (in the header) and all your links should work regardless of environment.

Something like:

Code: Select all

 
<base href="<?= getenv("DOCUMENT_ROOT") ?>" />
 
Hmm... problem is getenv("DOCUMENT_ROOT") on the webhost returns "/export/home/blah/public_html" which, when applied to the beginning of links, does not appropriately direct them. Did I miss something?

Re: Page Header and Footer Functions

Posted: Fri Jul 25, 2008 8:45 am
by ghurtado
Sorry, my mistake. That environment variable is for filesystem paths, not web paths.

You should probably go with mabwi's suggestion: defining the base tag in your config file.

So my example becomes:

(in your config.php file)

Code: Select all

 
$web_root = dirname($_SERVER["REQUEST_URI"]) . "/";
 
And the base tag:

Code: Select all

 
<base href="<?= $web_root ?>" />