HOME
stuff you never thought you wanted to know.

 

 
How to create a maintainable webpage with php,the concept of separation of concern and modularization of content parts.

Create a maintainable webpage with php!
- the concept of separation of concern, modularization of content parts and use of templates to enhance ease of maintainability.

Written by Jon Berg <jon.berg|a|turtlemeat.com>

Introduction
A webpage normally consists of a menu that you can use to navigate the site, some text and pictures, maybe some advertising and maybe a footer. Normally when most people create webpages, they create the complete page as one document. The menu, text, the logo, footer and everything inside one html document. This is a good way to do it for a few pages, but it is not optimal if you expect to update it frequently and add new things or make changes.

Modularization of content parts
This means that you split up your document, example the menu is one component, the advertising is another component. With a component it is essentially a html-file. You place the html that makes up the menu in one file, the html that displays the advertising in another file and so on.

You will then create a template html-file that you will use as a base for every page of content. In this template file you will use import statement that will pull the content of your logo-component, your menu-component, your advertising component, your footer text into it and other components you may have.

This is makes the whole process of maintaining a website a lot easier. You will only have to change the one file example the menu-file, and the menu will change on all your webpages. Instead of going through all pages and updating the menu.

In practice, not difficult
PHP is a fully fledged programming language, so you may first be turned off by having to use it if you are not a programmer. To do the things above you only have to write <? php include"yourfilename.html"; ?> on the place where you want to import a component (textfile) into your document. So you have a a normal html-document and you name it myfile.php instead of myfile.html and you insert <? php include"yourfilename.html"; ?> . The content of "yourfilename.html" will be printed on the place where you write <? php include"yourfilename.html"; ?>, the statement will not be shown. That's all the "programming" you have to do.

This technique is also supported by most server side programming languages like ASP or SSI.
The ASP code to do the same is: <!--#include file="includefile.asp"--> .
The SSI code to do it is: <!--#include virtual="/footer.html" --> .

I have seen the light with PHP so I do promote PHP. It is free, it runs on Linux and Apache.

Example
This page you are reading now is in fact made with this technique. Another page. And most webpages I make I do it this way. It is a very good way of making websites (banging myself on the chest).

My template for this page looks like this:
<?php include 'head.php'; ?>
<title> write title here </title>
--write text content here--
<?php include 'foot.php'; ?>

The interesting thing with foot.php is that it includes another file categories.php that display all the links. So you can include things in the included files. The head.php contains the logo and text colors, though I should use CSS to control colors.

When I have copied my template, I write the content into the file. Then I add a link to the new page in categories.php. Then I upload the two files. EASY! Then the new file is linked from all the other old documents.

What I would have had to do if I had everything the menu, the logo etc. in one file, I would have had to go through them all and update the new link. Boring and time consuming.

A good way of starting is to actually design the page as one document, and then cut out the parts and put them in components / files. Most html editors support editing parts of html. You can then edit only the part.

Benefits
When doing it like explained in this document, you speed up the time to add or change things. If I want a new logo on this page, I edit my logo.php in my html-editor and upload it. And BANG! all pages have a new logo.

Benefits of using a template is that you can get new pages up quickly. Your pages will also automatically look the same. When editing many files individually errors can happen that will make things different, example on extra line here and some text gets a different position.

When your website becomes big and consists of many html documents it gets very hard to manually update all of them. Modularization will help you!



Linux
Setup Software Raid 1 with LVM
Setup Linux with Desktop

Google
Manage your website ads with DFP
Google AdSense for Domains - not so great
Let Google Handle Email for your Domain Name
Page Rank banned by Google
Google's highest ranked web pages
SEO intelligent spam causes irrelevant search results
Google Sandbox
Google ranking factors
How to not give out page rank in web page links

Web Server Programming
Simple Java web server
Simple Python web server
Configuring Apache webserver with .htaccess file

Windows
Turn off the loginscreen in XP, after installing .NET .

Turn off xp login screen unread mail count
What is .NET

Web (webmastering)
Introduction to Cascading style sheets (CSS)
The value of Alexa traffic rank
HTML META tag, not a search engine optimization tool
Create a maintainable webpage with modularization
The www prefix in your domain name
What is RSS and cool things RSS can be used for
MySql backup and restore with phpMyAdmin

Mix Computer related text
Doing business (making money) with Information Technology
Business with Computer Science
Research in Computer Science
Current and future possibilities of Medical Informatics
Tasks that make sense to have automated
Programming handheld mobile devices (overview)
Security tips for the web surfer
Price and Capacity in computer hardware
Java RMI Tutorial.

Microsoft Word
Page numbering in Word
Numbering headers or outlines in Word
Create a List of Figures
Turn off the default collapsing menus in Word




Turtlmeat.com 2004-2011 ©