This page describes the way I made the website you're visiting at the moment. I'd like to give you some short introductions into the techniques I used, so you can see behind the curtain.

The thing that makes this website a project itself is that I'm trying to write it 100% XHTML-compliant and with a strict separation of the contents and the design. If you want to check whether my code is valid or not, you can do so by clicking on the W3C button on the bottom of this page. Unfortunately, the design suffers a little bit from this, but I'm working on it.

PHP and MySQL

With the help of object-oriented PHP, MySQL and templates, this website is easily upgradeable: The main page (index.php) creates a new instance of the Layout class, which searches the matching template (layout.tpl) for predefined keywords. The keywords ({{MENU}}, {{NEWS}}, {{CONTENT}}) are then replaced by the corresponding contents.

At first, the menu is generated with the help of the Menu class. This class contains the structure of the menu, stored in a (partly) multidimensional associative array. The key contains the text printed in the menu, while the value contains the id of the content in the database (or an external link or a submenu):

$structure = array(
	"home"=>"home",
	"about me"=>"aboutme",
	"stuff"=>array(
		"brainfuck"=>"brainfuck-tutorial",
		"mail"=>"email-tutorial",
		"nx6310"=>"nx6310",
		"ascii art"=>"ascii",
		"mnaiku"=>"mnaiku",
		"bindshell"=>"bindshell"
		),
	"projects"=>array(
		"diozaka.org"=>"diozaka.org",
		"fnordlicht"=>"fnordlicht",
		"octod"=>"octod",
		"mailcount"=>"mailcount",
		"misc"=>"misc"
		),
	"config"=>"config",
	"contact"=>"contact"
);

Now, the Menu class loads the templates for the whole menu (menu.tpl), a submenu (submenu.tpl) and a single link (link.tpl) and puts the parts together to the menu you can see on the left.

<-- menu.tpl -->
<ul>
{{LINKS}}
</ul>

<-- submenu.tpl -->
<li>{{TITLE}}
<ul>
{{LINKS}}
</ul>
</li>

<-- link.tpl -->
<li><a href="{{DEST}}">{{TEXT}}</a></li>

The news system -- or, to be more precise, the News class -- uses a MySQL database as its back-end and stores the data for each news entry (date, text and the related article) in a simple array that holds them for further processing. At the moment, there are three parts of this website using the News class: the news box you see on the right, the RSS feed and the MicroSummary (pardon?). The fact that the raw news are needed at so many different places requires a robust and adaptable interface to the data, so I followed the KISS principle (keep it simple, stupid!) and decided to do all the context-sensitive processing in a separate step.

The NewsBox class, which is responsible for displaying the news on the right, works quite similar to the Menu class: After fetching the news data, it reads some template files and builds up the widget dynamically by looping through max. 10 news entries. Nothing special here.

The last thing to do is to find out which contents ought to be displayed in the main section of the page. This is done with the ?module= parameter passed to index.php. If no parameter is specified, the user is automagically redirected to index.php?module=home. The Content class (instantiated by the {{CONTENT}} template trigger) then uses this parameter as the key for the MySQL database and fetches the data to display.

You might wonder why I'm using such a complicated way to generate this page, but the answer is easy: As I mentioned before, I'm trying to separate the contents from the design. By using templates and having the data stored in a completely different location, it's much easier to change the look of the page (I just have to edit the templates and the style sheets) without corrupting the displayed data.

mod_rewrite

The problem with this kind of dynamically generated pages is that so called spiders, used by search engines like google.com, are only able to read index.php. When they come across a link to index.php?module=aboutme, they just see index.php.

That's why I used the Apache module mod_rewrite. With the help of the rewrite engine, I wrote a rule to transform modules/aboutme.html to index.php?module=aboutme. Now, I can have links to pseudo-usual .html files that can easily be andexed by spiders.

I just needed to create a file called .htaccess with the following contents in the root directory of this website.

RewriteEngine On
RewriteRule ^modules/([a-zA-Z0-9_.-]+)\.html$ index.php?module=$1 [L]
RewriteBase /

CSS

I'm trying to manage the whole design with separate Cascading Style Sheets (CSS), which makes it possible to have different layouts with different media. Concretely, this means that I have two different style sheets: One for computer screens and one for printing.

In the <head> section of the HTML files, you just need to define links to the different style sheets:

<link rel="stylesheet" href="screen.css" media="screen" type="text/css" />
<link rel="stylesheet" href="print.css" media="print" type="text/css" />

Due to these two different style sheets, I can hide the menu and the logos at the bottom of this page, when this website is printed, for example. Have you tried printing this page? Well, go ahead. ;)

Administration

I really like VIM (Vi Improved), so I looked for a method to use it for editing the content that is stored in the MySQL database. As I don't know any MySQL administration tool with embedded VIM support, I wrote a small tool similar to CVS to edit the pages (webadmin.c).

With this tool, it's possible to checkout the current contents of the database and save every page as a PHP file. These files can be treated like normal PHP files (actually, this is what they are) and changed with your favourite editor. After the changes have been made locally, they can be applied to the database using the commit command. If new files that do not exist in the database are detected, they are marked with a question mark and can be inserted using the add command. To remove a page from the database, I implemented the remove command.

Well, the tool does not do any versioning management (yet?), so the comparison with CVS is not so appropriate, but the idea to have local copies of the data and commit the changes to the database in a separate step is similar to CVS.

Once you've written such a cool tool, you want it to be able to do Everything [tm], so I added a new command: news. When executing this command, the application asks for a title and the related page and inserts a new entry in the news database. That's fancy, isn't it? ;)

Source Code

Not available yet.

Last change: Wed, 03 Oct 2007 23:13:22 +0200

Comments