|
|
Frequently people ask about Content Management Systems here and are looking for advice regarding which CMS would work best for them. Often, the user requesting the help doesn't realize that they can design their own CMS that will provide them with the results they are looking for without needing to install a bulky program. This usually stems from the relatively few features that users want from their CMS. Many users just want an easy way to manage their website and edit their content.
In this tutorial we'll discuss a very simple way to create a template driven CMS. While the system will require a new template for each page in the website. The method describe here will utillize the PHP include function. The include function has a very simple syntax to it and is shown as follows:
CODE
<?php include("fileurl/filename.ext"); ?>
The file url can be a URL or file path depending on you needs. Purpose:
The purpose of this particular script is to aid the webmaster in maintaining the content and features of his website. The two most prominient benefits of this script is shown in advertising management and menu updates.
It seems that the one guarentee about being a webmaster is that your work is never done. As soon as you get the site working the way you want it, you find a new feature that you want to add and then every page needs to be edited to reflect the new feature. For example, lets say you just wanted to add a small glossary of technical terms used on your site. Then you need to add the link to the glossary on all of the pages. Just adding that one link to your menu could take several hours if your website has many pages. Another frequent problem is adding a new banner to your website for advertising income. The banner or banners would need to be added to every page. More than likely, you've decided to change from static banner advertising to dynamic banner advertising and you need to replace the old banner coded with new codes generated by your ad server. Again, the code is very small and can be copied and pasted into the files but if you have several files to edit the time needed could be better spent finding someone that wants to advertise on your site.
If your pages are template driven, not only will you be able to make your website uniform in appearence, but the different modules that every page shares can be edited quickly and effect the entire website. This way if you had a menufile that every page used, then editing the menu file would update the menu on every page in the website.
Technical:
The first thing we'll need is a master template to use for the entire website. I tend to use table based templates because they are easy to use and I don't care about whether or not the code will validate as long as it appears correctly on the most popular web browsers. I like the banner at the top and menu on the left style for my webpages so that is what I'll use as an example here.
You'll name the template file the name that you will link to. For example, the first page to start with is the index.
index.php
CODE
<html>
<head>
<title>My CMS</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" style="font-family: verdana;">
<table width="100%">
<tr>
<td colspan="2" bgcolor=silver>
<?php include("header.php"); ?> <!-- Used for Banner Advertising etc... -->
</td>
</tr>
<tr>
<td width="150" bgcolor=red valign="top">
<?php include("menu.php"); ?> <!-- Used for The Main Menu... -->
</td>
<td bgcolor=navy>
<?php include("main.php"); ?> <!-- Could be left out and actual content inserted instead. -->
</td>
</tr>
<tr>
<td colspan="2" bgcolor=purple>
<?php include("footer.php"); ?> <!-- Banner Ads, Copyright Info., etc... -->
</td>
</tr>
</table>
</body>
</html>
<head>
<title>My CMS</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" style="font-family: verdana;">
<table width="100%">
<tr>
<td colspan="2" bgcolor=silver>
<?php include("header.php"); ?> <!-- Used for Banner Advertising etc... -->
</td>
</tr>
<tr>
<td width="150" bgcolor=red valign="top">
<?php include("menu.php"); ?> <!-- Used for The Main Menu... -->
</td>
<td bgcolor=navy>
<?php include("main.php"); ?> <!-- Could be left out and actual content inserted instead. -->
</td>
</tr>
<tr>
<td colspan="2" bgcolor=purple>
<?php include("footer.php"); ?> <!-- Banner Ads, Copyright Info., etc... -->
</td>
</tr>
</table>
</body>
</html>
header.php
CODE
<center>
[tab][/tab]<a href="http://www.AstaHost.com" style="border-width: 2px; border-color: teal; font-size: 18pt; font-color: #FF0000;">Advertise Here!</a>
</center>
[tab][/tab]<a href="http://www.AstaHost.com" style="border-width: 2px; border-color: teal; font-size: 18pt; font-color: #FF0000;">Advertise Here!</a>
</center>
menu.php - Here is the real time saver!
CODE
<span style="font-color: lime;">Search Engines</span><br>
<a href="http://www.altavista.com" style="font-size: 8pt;"> ♦ Alta Vista</a><br>
<a href="http://www.excite.com" style="font-size: 8pt;"> ♦ Excite</a><br>
<a href="http://www.google.com" style="font-size: 8pt;"> ♦ Google</a><br>
<a href="http://www.lycos.com" style="font-size: 8pt;"> ♦ Lycos</a><br>
<a href="http://www.yahoo.com" style="font-size: 8pt;"> ♦ Yahoo</a><br>
<a href="http://www.altavista.com" style="font-size: 8pt;"> ♦ Alta Vista</a><br>
<a href="http://www.excite.com" style="font-size: 8pt;"> ♦ Excite</a><br>
<a href="http://www.google.com" style="font-size: 8pt;"> ♦ Google</a><br>
<a href="http://www.lycos.com" style="font-size: 8pt;"> ♦ Lycos</a><br>
<a href="http://www.yahoo.com" style="font-size: 8pt;"> ♦ Yahoo</a><br>
main.php
CODE
<p>
[tab][/tab] Enter your main content here. You can simple leave the include statement out of the template and enter the content for the page directly into the index.php.
Hope this proves usefull to everyone.
[tab][/tab] Enter your main content here. You can simple leave the include statement out of the template and enter the content for the page directly into the index.php.
Hope this proves usefull to everyone.
footer.php
CODE
<center>
[tab][/tab]© 2005 Acme Web Design Inc. - All Right Reserved.<br>
</center>
[tab][/tab]© 2005 Acme Web Design Inc. - All Right Reserved.<br>
</center>
Okay, that's it. You have a very basic CMS that you can use to build on and pull your website together into a coherent information resort.
Add Ons:
Lets add a little automation to the creation of those web pages. Specifically, we'll make the menu.php file even easier to edit in the future.
For an overview of the process I use for PHP driven HTML creation, read this article: Rapid HTML Code Generation Using Simple PHP. I'll spell it all out here as well, but the above link will give a more simplified expaination of the process.
This menu creation process is more advanced than the one shown above but is still only one step further in complexity. What I mean to say is that eventually, the process shown here when added to a few more complex processes, will result in a fully database driven menu creation process. In this step, we will learn to write a function that will handle each menu item, including the menu header, and output a suitable link for the menu.
Here is what we want to create:
CODE
<span style="font-color: lime;">Search Engines</span><br>
<a href="http://www.altavista.com" style="font-size: 8pt;"> ♦ Alta Vista</a><br>
<a href="http://www.excite.com" style="font-size: 8pt;"> ♦ Excite</a><br>
<a href="http://www.google.com" style="font-size: 8pt;"> ♦ Google</a><br>
<a href="http://www.lycos.com" style="font-size: 8pt;"> ♦ Lycos</a><br>
<a href="http://www.yahoo.com" style="font-size: 8pt;"> ♦ Yahoo</a><br>
<a href="http://www.altavista.com" style="font-size: 8pt;"> ♦ Alta Vista</a><br>
<a href="http://www.excite.com" style="font-size: 8pt;"> ♦ Excite</a><br>
<a href="http://www.google.com" style="font-size: 8pt;"> ♦ Google</a><br>
<a href="http://www.lycos.com" style="font-size: 8pt;"> ♦ Lycos</a><br>
<a href="http://www.yahoo.com" style="font-size: 8pt;"> ♦ Yahoo</a><br>
Now to figure out how to write the function, first you'll need to identify what is the same in all of the items which will be controlled by the function and what is different which is controlled by the function call.Now the thing that is different in each menu item is the name and link information so those will be the arguments pass to the function in the function call. Like this:
CODE
make_menu("Google", "www.google.com");
So now that we have the call, we can start on the function:
CODE
function make_menu($name, $url) { // Name and declare the function and assign variables to the arguments passed by the call.
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>\n"; // Assign a variable to hold your output until returned to the main script.
return $link; // Return the output data held in the variable $link to the place in the main script where it was called from.
}
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>\n"; // Assign a variable to hold your output until returned to the main script.
return $link; // Return the output data held in the variable $link to the place in the main script where it was called from.
}
Okay, there is our function that takes simple information and creates the menu link.
But wait a minute, the function was supposed to handle the menu header as well. We could write a new function just for the menu headers but instead we'll modify our existing function to handle the headers. First lets look at the function call:
CODE
make_menu("Google", "www.google.com");
We have the name and url but the header won't have a url so that will be our trigger for the function. So if we want to call for a menu header, here is what we do:
CODE
make_menu("Search Engines", "header");
That will tell the function that we want a menu header entitled "Search Engines" to be generated.
Our original function will need to check if the output should be a link or menu header with an IF statement:
CODE
function make_menu($name, $url) { // Name and declare the function and assign variables to the arguments passed by the call.
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>"; // Assign a variable to hold your menu header until returned to the main script.
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>\n"; // Assign a variable to hold your menu link until returned to the main script.
}
return $link; // Return the output data held in the variable $link to the place in the main script where it was called from.
}
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>"; // Assign a variable to hold your menu header until returned to the main script.
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>\n"; // Assign a variable to hold your menu link until returned to the main script.
}
return $link; // Return the output data held in the variable $link to the place in the main script where it was called from.
}
Now we have a function that will check and see if a header or link will be generated and output the required HTML. Now how do we use the call properlly? Any place you want to have a menu item or title shown, just drop in the function call with the correct arguments. As shown in our new menu.php file:
CODE
<?php
function make_menu($name, $url) {
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>";
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>";
}
return $link;
}
?>
<?php echo make_menu("Search Engine", "header"); ?>
<?php echo make_menu("Alta Vista", "www.altavista.com"); ?>
<?php echo make_menu("Excite", "www.excite.com"); ?>
<?php echo make_menu("Google", "www.google.com"); ?>
<?php echo make_menu("Lycos", "www.lycos.com"); ?>
<?php echo make_menu("Yahoo", "www.yahoo.com"); ?>
function make_menu($name, $url) {
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>";
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>";
}
return $link;
}
?>
<?php echo make_menu("Search Engine", "header"); ?>
<?php echo make_menu("Alta Vista", "www.altavista.com"); ?>
<?php echo make_menu("Excite", "www.excite.com"); ?>
<?php echo make_menu("Google", "www.google.com"); ?>
<?php echo make_menu("Lycos", "www.lycos.com"); ?>
<?php echo make_menu("Yahoo", "www.yahoo.com"); ?>
And there we go, all done. While it seems to be more work than you would normally do, it will eventually save a lot of time in editing and reading. Imagine that your menu is rather large like this version of menu.php:
CODE
<?php
function make_menu($name, $url) {
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>";
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>";
}
return $link;
}
?>
<?php echo make_menu("Search Engine", "header"); ?>
<?php echo make_menu("Alta Vista", "www.altavista.com"); ?>
<?php echo make_menu("Excite", "www.excite.com"); ?>
<?php echo make_menu("Google", "www.google.com"); ?>
<?php echo make_menu("Lycos", "www.lycos.com"); ?>
<?php echo make_menu("Yahoo", "www.yahoo.com"); ?>
<hr>
<?php echo make_menu("Public Forums", "header"); ?>
<?php echo make_menu("AstaHost", "www.astahost.com/index.php"); ?>
<?php echo make_menu("Trap17", "www.trap17.com"); ?>
<?php echo make_menu("AntiLost", "www.antilost.com"); ?>
<hr>
<?php echo make_menu("Online References", "header"); ?>
<?php echo make_menu("Dictionary", "www.dictionary.com"); ?>
<?php echo make_menu("Thesaurus", "www.thesaurus.com"); ?>
<?php echo make_menu("Maps", "www.mapquest.com"); ?>
<?php echo make_menu("Phone", "www.sbc.com"); ?>
<hr>
function make_menu($name, $url) {
if ($url == "header") {
$link = "<span style=\"font-color: lime;\">" . $name . "</span><br>";
}
else {
$link = "<a href=\"http://" . $url . "\" style=\"font-size: 8pt;\"> ♦ " . $name . "</a><br>";
}
return $link;
}
?>
<?php echo make_menu("Search Engine", "header"); ?>
<?php echo make_menu("Alta Vista", "www.altavista.com"); ?>
<?php echo make_menu("Excite", "www.excite.com"); ?>
<?php echo make_menu("Google", "www.google.com"); ?>
<?php echo make_menu("Lycos", "www.lycos.com"); ?>
<?php echo make_menu("Yahoo", "www.yahoo.com"); ?>
<hr>
<?php echo make_menu("Public Forums", "header"); ?>
<?php echo make_menu("AstaHost", "www.astahost.com/index.php"); ?>
<?php echo make_menu("Trap17", "www.trap17.com"); ?>
<?php echo make_menu("AntiLost", "www.antilost.com"); ?>
<hr>
<?php echo make_menu("Online References", "header"); ?>
<?php echo make_menu("Dictionary", "www.dictionary.com"); ?>
<?php echo make_menu("Thesaurus", "www.thesaurus.com"); ?>
<?php echo make_menu("Maps", "www.mapquest.com"); ?>
<?php echo make_menu("Phone", "www.sbc.com"); ?>
<hr>
Now that is much easier to manage than an HTML encoded menu that would take more lines to write and if you want to change the bullet used before the link, then with this system, you only need to change the one bullet in the function instead of every menu item. Major time saver especially if the new bullet doesn't look good and you need to try several others before get the right one.
Now looking at the newest version of the menu.php file, you can start to see the beginnings of a simplified database. I'll post more information about converting this function to use an array then a flat file database. In the end, I hope to show how to build the menu from an SQL database table.
Additionally, I'll try to add information that will add more options to your starter template set and more management tools. Also, I'll show how use a single template for the entire website instead of the same template for each page. This will really get your website working for you instead of you working for your website.
Hope everyone gets some use from this.
Happy Programming
vujsa
Notice from vujsa:
Edited a few minor PHP errors to be correct. I never tested the scripts prior to posting the tutorial. Only three bugs fixed. Next time I won't just do the programming in my head.


