Webdesign, chapter five: PHP part one: replacing navigation frames

This post will just very briefly go over a few very basic functions of PHP, mainly just those we need to have a navigation “frame” on the left without having to put it into every single website we write.

PHP originally stood for Personal Home Page (tools) and is a scripting language (programming language) that i have not seen used anywhere but on websites. It is possible to use PHP on the command line but there are languages better suited for pretty much anything you do that is not web related.

To use PHP you need to have a web server (or web hosting) that can interpret php into html. Luckily nearly all of the web hosters today do that, and you can configure the usual web servers to work with php as well (I’m assuming that there are web servers that can’t do php, but I don’t think they would be very easy to find).

We only really need one line of php to put the navigation into our website, and thus one added line of php into all of our websites to put a navigation into all of them this way.
To add php to your website you need give your file the extension php instead of html and then you have to put your php code into tags like this: <?php <insert random php code here ?>.
The code we need to add to our website is include “<filename>”;.

We’re just going to throw the <?php include “navigation.html”; ?> into the left sidebar of our website and we already have a navigation frame …. given that we actually have a file called navigation.html in the same directory as our website.

The navigation file we’re including looks something like this:

<div class=”sidebar-right”>
<li><a href=”http://xyious.blogspot.com”>Blog home</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-intro.html”>Webdesign Post 1</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-two-css.html”>Webdesign Post 2</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-three-css-syntax.html”>Webdesign Post 3</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-four-css-part-three.html”>Webdesign Post 4</a></li>
<li><a href=”http://xyious.com”>My Website</a></li>

I have changed the CSS a tiny bit to make the colors a bit more friendly and reduce the gap between navigation and content to .5%.

The html code (between the body tags) looks like this (viewable here):
include “navigation.html”;
<div class=”main”>
<h1>Hi There !</h1>
<p>some text</p>

And now you know one way of putting the navigation bar into all of your websites…. There are easier and harder ways to do it, some of which i might actually show you.

Leave a Reply