Geronimo89.dk

A blog about me, my doings and everything I think deserves attention.

First website and navigation with PHP

This little tutorial will teach you how to build a website with multiple pages with PHP. When I started trying to make websites, I used frames/iframes which are BAD and not valid html code. So we now we want to use the PHP function include(), which gives us the ability to display other documents inside another.

So let’s start out with a standard xhtml document called index.php:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Navigation with PHP</title>
</head>
<body>
</body>
</html>

Before the doctype we now insert a list of our files. Let’s say we have files called “news.php” “home.php” and “about.php”.

<?php
$section = array();
$section['home'] = “home.php”;
$section['news'] = “news.php”;
$section['about'] = “about.php”;?>

Now this “list” actually puts all these as entries into an array in PHP. We’ll need that later. Now we head down to the <body> tag and insert some php code here. What we’ve done until now is only creating a list with the files we may want to show inside our website. So if we want to display our content, we should add the next part where you want the content to appear.

<div id=”content”><?php
if (isset($_GET['section'], $section[$_GET['section']])) {
include $section[$_GET['section']];
} else {
include $section['home'];
}?>
</div>

Now our website has the ability to include the listed files and make them appear as a part of the site. I’ve already created a <div> around it, you don’t have to do that. The last thing to do is to add the navigation with the links that tells the PHP script which file to load. If there are no or no valid options given, it does include $section['home'];. This first of all makes the script include home.php when only index.php is opened and makes the site safer, because no not listed files can be included like /etc/passwd. icon wink First website and navigation with PHP

<ul>
<li><a href=”index.php?section=home”>Home</a></li>
<li><a href=”index.php?section=news”>News</a></li>
<li><a href=”index.php?section=about”>About</a></li>
</ul>

I’ve already put the links in a list, you don’t have to do that, but it looks nicer. The part between the <a> and </a> is the essential one. Through opening index.php?section=news you tell the index.php to include the file saved with the array entry news.

That’s basically it. You’ve learned how to avoid frames and create a website with multiple pages!

Give me the first comment

CSS box, with graphic borders

box marked 295x300 CSS box, with graphic borders

First of all, we need a graphic as a basis how our css box is going to look. I’ve just chosen a box with a dropshadow. Now we use the help lines in GIMP or Photoshop to divide it into 3 pieces and save these parts into new files. 1: top.png, 2: middle.png, 3: bottom.png. Now we got our 3 different graphics, we can start the CSS work. First of all we need a basic html file.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Our nice CSS box</title></head>
<body>
</body>
</html>

To this we start adding a div container for the box, right below the body tag. In the box, I added a heading <h1> and a placeholder div for the bottom graphic.

<div class=”box”><h1>heading</h1>
<p>Yourcontent
</p>
<div class=”bottom”></div>
</div>

Now we can start defining the css attributes of the different html objects. You can link an external css file, or just paste the css into the html file. For this simple project I will just insert the css directly into the head of the html file. Generally you should use external css files to keep everything tidy and clear.

So, here’s the code I use in the head tag:

<style type=”text/css”>
h1 {
background-image: url(top.png);
background-repeat: no-repeat;
height: 44px;
width: 266px;
font-family: Verdana;
font-size: 12px;
margin:0px;
padding: 0px;
}

.box p {
background-image: url(middle.png);
background-repeat: repeat-y;
min-height: 400px;
margin: 0px;
padding: 16px;
font-family: Verdana;
font-size: 10px;
max-width: 250px;
}

.box {
margin: 0px;
padding-top: 44px;
}

.bottom {
height: 39px;
width: 266px;
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: bottom;
}
</style>

If I skip some of the css code explanation here, just try it out yourself or look it up in a css reference. Noteable css code: We use padding:0; and margin:0; to force the elements to be without spacings inside and outside them. Another thing is, that we control the background image very explicit. We define exactly if and how it’s going to be repeated. In box p {} we add padding: 16px; because we need some spacing because of the graphic. As we can see below, we can’t use the full area of the graphic, because we don’t want text on the drop-shadow.

middle marked CSS box, with graphic borders
A thing you can do for optimization is, that you scale your middle.png to 1px height. It will probably look the same, but increase the loading speed of your website a little bit. By the way, Internet Explorer 6 doesn’t support transparent pngs so you should maybe add a Firefox/Opera/whateverbrowser link to your website.

Give me the first comment

M’era Luna

blog us 300x270 M’era LunaThe M’era Luna was pretty great icon smile M’era Luna . After Wacken in 2006 it was my second festival and I went with my wonderful girlfriend Julia, the other Julia and Tom. I know, I look like I’ve been run over by a truck and not only on this picture, but whatever! The best concerts for me were ASP an Saltatio Mortis. Zeit.de has also offered a nice photo gallery with costumes the M’era Luna was full of, so you may want to have a look at their gallery.

2 comments already