Webdesign 102
Paths And Defining a Site Root
This is the number two in a series of duh- moments in article form..
A question that plagued me for ages was how to define all the paths in my php/html/css/js files to work with a relative root. Short of generating every script using php I never really found a usable answer. I would have loved to go for absolute addresses instead using the shortcut '/' which takes you down to the root on unix or linux based systems, but doing so on my commercially hosted site brought me all the way down to their actual filesystem root, which resulted in a PHP safety-meausure terminating the entire script.
Now why did this happen if my ftp client told me '/' was the directory my stuff was hosted in?
The answer, it turns out, is very simple: A server is just a computer, and php is a program, running on that computer. So when php asks for '/' it gets what any other program running on that computer gets: the absolute file system root (comparable to C:\ on a windows system). However, if a web page requests a file something very different happens. Like any other file request over the HTTP protocol a file request from a web page is sent to the web server, more specifically, to the server program running on some distant pc. This means requests from web pages (for images, css files or others) are treated in whatever mini file system the server sets up. On a system running Apache this means that a request for '/' will only go as deep as the folder specified by Apache as the 'Document Root'.
This is good news. Why? Because it means you can use relative paths in your html files when you're sure the stuff you're linking to will be in the same folder, or one folder down etc, while you can use absolute paths (starting with '/') to refer to anything you know to be in a fixed location, like '/scripts/fonts.css' or '/photos/angry_beaver.jpg'.
For css files you have to take into account one more detail: url's specified in css files are interpreted relative to the css file, not the html file including them. While this seems a little awkard upon reading, it works great in practice because it means you can include a css file from anywhere on your site and any relative url's used in that file will still be valid!
This means that you only ever need to use a site root in your php files, where it can be solved neatly and controlled.
Summing up:
- PHP: has direct access to the file system, '/' is the absolute root of the filesystem.
- Hrefs & images: work via HTTP requests, '/' is the Document Root, relative paths are interpreted relative to the HTML file.
- CSS url's: work via HTTP requests, '/' is the Document Root, relative paths are interpreted relative to the CSS file.
It's that simple.
Jul 17th, 2008
Comments
michael wrote:
And then there's the BASE path...
http://www.w3.org/TR/html401/struct/links.html#h-12.4
Jun 22nd, 2010
If you wish to add code to your comment you can use code tags, like this: <code class="php">yourCodeHere</code>.
Quite a large number of languages are supported, although I can't guarantee it'll be pretty. Inside the code tags you can use any characters except for the string "</code>".