CMS101 - Content Management System Design Basic CMS With PHP Includes

vujsa · August 29, 2005

Overview:

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:

<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

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.}

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:

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.}

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:

<?phpfunction 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", "http://search.yahoo.com/?fr=altavista;); ?><?php echo make_menu("Excite", "http://www1.excite.com/security/0,17167,,00.html;); ?><?php echo make_menu("Google", "https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl;); ?><?php echo make_menu("Lycos", "http://www.lycos.com/;); ?><?php echo make_menu("Yahoo", "http://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:

<?phpfunction 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", "http://search.yahoo.com/?fr=altavista;); ?><?php echo make_menu("Excite", "http://www1.excite.com/security/0,17167,,00.html;); ?><?php echo make_menu("Google", "https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl;); ?><?php echo make_menu("Lycos", "http://www.lycos.com/;); ?><?php echo make_menu("Yahoo", "http://yahoo.com/;); ?><hr><?php echo make_menu("Public Forums", "header"); ?><?php echo make_menu("Xisto", "http://forums.xisto.com/index.php); ?><?php echo make_menu("Xisto", "http://forums.xisto.com/); ?><?php echo make_menu("AntiLost", "http://www.antilost.com/;); ?><hr><?php echo make_menu("Online References", "header"); ?><?php echo make_menu("Dictionary", "http://dictionary.reference.com/;); ?><?php echo make_menu("Thesaurus", "http://www.thesaurus.com/;); ?><?php echo make_menu("Maps", "http://www.mapquest.com/;); ?><?php echo make_menu("Phone", "http://www.att.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.

Edited December 22, 2016 by OpaQue (see edit history)

miCRoSCoPiC^eaRthLinG · August 29, 2005

Simply awesome Where the heck are the rep. points ????

evion · August 29, 2005

Fantastic tutorial. I've added it to my bookmarks. I think maybe I'll try working with php-nuke first for the mean time before moving on the customizing my own php template. All that php is really mind-boggling because I've never seen or done php before. I thought of buying some books but most of them are pretty useless because they explain about the history of php and other stupid stuff. What i need is more of a Glossary list of php, what php can do and is php "dynamic" as in, can it be freely changed by the user or is it limited like HTML?Right now i can understand some parts where you placed the code but all the "$"s and the "&"s and "?"s I'm really blur with because i don't get what they stand for. Do you know of a good refer-to guide that i can find on the net with a Glossary with all these terms? I learned HTML and XHTML that way. It's way much easier than going step-by-step with a book. Or if you don't mind making a small list of these terms for me I'll REALLY REALLY appreciate it. Thanks for the tutorial again. It's worth it for some phpnewbies like me...

vujsa · August 30, 2005

Here are some basics of PHP as requested by techocian.

The PHP opening tag:

<?php

The PHP closing tag:

?>

This tells the server that all information between the opening and closing tags should be handled by the PHP engine.

The alternative PHP opening tag:

<?

The server should automatically recognize that this is a PHP opening tag but the <?php tag is better and will always work correctly.

The & as seen in this tutorial is actually used only for the HTML portion of the script. The & tells the browser that an HTML special character will be used and will end with a semi-colon (;). So   = Non-breaking Space. And &diams; = a diamond Shaped bullet.

The dollar sign ($) is used in PHP to denote a variable. So $var is a variable named "var". Basically, the $ tells the PHP engine that the dollar sign and letters and numbers after it are the variable name. There can not be any spaces in a variable name as a space tells PHP that the name has ended. Additionally, there are other characters that are not allowed but we'll get into that later.

PHP can be used to create pages dynamically but the page will not be dynamic. Basically, PHP is used to create a web page by writing the required HTML for a given situation. For example, you could create a dark web page for night and a light web page for the daytime by using the PHP date and time functions. So the page would be dynamically generated but the output would be static unless a client side script was also written to the page. Meaning that PHP can also output JavaScript with the HTML and the JavaScript can add a dynamic feature to the page.

Of course, PHP doesn't create or write anything that you don't program it to do. So what ever HTML, DHTML, XHTML, JavaScript, SHTML you want to output, you'll need to provide PHP the code to use.

For more information about PHP, you'll have to bookmark the source:

http://php.net/

This is the main support page for PHP and is about as good as it gets. I have yet to find a better site for information which is too bad because the PHP manual is less than user friendly. You'll have to know what you want before you can get information about it. ?????

I suggest finding a basic PHP script and trying to figure it out. When you can't figure something out, then search for that item on the site. The more familiar you get with PHP the more help that the manual will be.

One of the reasons I wrote this tutorial was to provide a very basic PHP web page for new PHP users to start from. The script should give enough of an overview of basic PHP that users can build from there.

Hope this clears things up a bit.

vujsa

evion · September 5, 2005

Thanks alot Vujsa! Sorry i haven't replied earlier but I've been comparing your tutorial with random scripts from the original php-nuke module and block codes. There is the similarity but of course like you said, it is very basic. Now that you have told me about the few basic tags, i've come to notice the few HTML scripts embedded in many of the php scripts i've seen. It reminds me of Visual Basic at some points.Your word is true when you said php.net is non-user-friendly at all. I can't find a single "tutorial" made for newbies. It looks more like a referring to guide that php users use when they forget something. Thanks again for the help.

vujsa · September 6, 2005

I edited the first post due to a couple of errors in the scrips for the menu.php.

Here are the corrections:

The second menu.php:

Missing closing double quote on line 8.

Forgot the echo command in the function call:

Read -

<?php make_menu("Alta Vista", "http://search.yahoo.com/?fr=altavista;); ?>

Should read -

<?php echo make_menu("Alta Vista", "http://search.yahoo.com/?fr=altavista;); ?>

The last menu.php:

Missing closing double quote on line 8.

Forgot the echo command in the function call:

Read -

<?php make_menu("Alta Vista", "http://search.yahoo.com/?fr=altavista;); ?>

Should read -

<?php echo make_menu("Alta Vista", "http://search.yahoo.com/?fr=altavista;); ?>

In the menu.php link builder that read:

$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.

Should read:

$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.

Removed incorrect escape characters in the variable definition of $link.

If you want to avoid editing all of the missing echo commands in the function calls used, then you can replace the return command in the function with the echo command like this:

Change - return $link; to echo $link;

The echo command needs to be either in the function or the call.

Sorry about the errors.

vujsa

vujsa · September 6, 2005

Sorry i haven't replied earlier but I've been comparing your tutorial with random scripts from the original php-nuke module and block codes. There is the similarity but of course like you said, it is very basic. Now that you have told me about the few basic tags, i've come to notice the few HTML scripts embedded in many of the php scripts i've seen. It reminds me of Visual Basic at some points.

<{POST_SNAPBACK}>

No problem, glad that you are learning from this. Like you said, there is a lot of HTML embedded in the PHP scripts. This is because web browser can only display text, HTML, and visual media. The visual media can be simple images or complex flash media. When using PHP for internet use, the PHP manipulates the required HTML for the desired effect. If the HTML is not used, then the output will be displayed as simple text.

Your word is true when you said php.net is non-user-friendly at all. I can't find a single "tutorial" made for newbies. It looks more like a referring to guide that php users use when they forget something. Thanks again for the help.

<{POST_SNAPBACK}>

Keep in mind that the reference was written by the developers so they already knew the information. The guide in no way should be considered a user guide but instead as you suggested, a reference for PHP programmers. Kind of like a PHP dictionary. Even the user posted examples and discussions are hard to follow.

I'm getting ready to write a follow up tutorial and was wondering in you would be more inteested in more advanced menu building or should I cover something like a banner rotation script for the header.php file?

Now that we have an ugly but working model, we can add to it and get more advanced. So what do you want to learn about.

vujsa

evion · September 8, 2005

I think you should go more into theme construction. I know in your mind you would be - "Hey! We haven't even covered the full basics and you want design already??" Well actually i was thinking more of structure. Where this and that goes and whether iframes are suitable for the content. Advanced Menu building? What does that refer to? As in more different "Modules & Blocks" as refered to in php-nuke or menu complexity as in doing something like spacewaste's website's menus? (Which is very user-friendly and much like MSN's user home utility) You'd definitely not be going into THAT yet...after discussing bone we go after organs and muscles not skin. I think i would be able to manage banner rotation with use of Javascript or am i restricted of the use of Javascript in php files? All this astounds me to what I've already learnt because I've never seen so much to do in coding before since i took the class on Visual Basic awhile back. I'm scouting around the net for some user-friendly reference guides i can use for tag definitions. Might take awhile to learn but I'll go through it! My exams are not around yet anyway.

evion · September 8, 2005

Alright sorry for wasting another post but now that I've really started to compare and identify the various functions and tags, I've come to realise many foreign symbols that gives no meaning to my brain. I'm going to use the codes you use as examples.

Firstly,

$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.

the code $link = "<a href=\"http:\/\/". What is the multiple \/\/ used for? Is it to indicate a variable being input later during the call? I'm pretty sure it is.

Secondly, style=\"font-size: 8pt;\". Notice that it is different from HTML coding by the way you start with a "\" before the " and end the "\" before the " again. What does it do?

Again another clip from your tutorial:

$link = "<a href=\"http://" . $url . "\"

Alright maybe i did it too short but i just want to get straight to the point. What is the periods beside $url for? and how you ended with "\" again puzzles me.

Lastly the most simplest of all but i have no idea to

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.}

Look at if ($url == "header") { What is it with the "==" sign? What is the double equal sign used to indicate? Also, if you don't mind explaining, the part about: $link = "<span style=\"font-color: lime;\">" because i can't seem to find this variable ($link) in the call. Is it another representation of the $url?

Again, i would like to thank you for your efforts in helping me out. This must be the last straw for you already, looking at such a complete newbie. (Look at your title and compare it to me!) Because i cannot edit my posts I had to make a new one about these questions i had, and only a human can answer them (not google!).

vujsa · September 8, 2005

Okay, last things first and first things when I get a chance.

PHP operators are mostly the same as operators used by other languages and most are mathamatical in nature.

I'll give a few here and provide a link to the rest.

Basic Math:

+ addition 1 + 1 = 2

- subtraction 3 - 2 = 1

* multiply 2 * 3 = 6

/ divide 6 / 3 = 2

% modulus (remander of division) 9 % 4 = 1 or 9 % 3 = 0 or 10 % 7 = 3

Assignment: This sets the value of the variable on the left side.

= equal $this = 1

+= Add To $this += 2 (this would add 2 to the value of $this) or ($this = $this + 2)

-+ Subtract From $this -= 3 (this would subtract 3 to the value of $this) or ($this = $this - 3)

Comparison: Compares the values or variables on either side of the operator.

== Equal To $x == 2 (Is $x Equal To 2)

!= Not Equal To $w != 5 (Is $w Not Equal To 5)

> Greater Than $r > $t (Is $r Greater Than $t)

< Less Than $c < 7 (Is $c Less Than 7)

>= Greater Than Or Equal To $e >= 100 (Is $e Greater Than Or Equal To 100)

<= Less Than Or Equal To $p <= 1 (Is $p Less Than Or Equal To 1)

Here is the link to all PHP operators as explained in the PHP manual. This part is fairly straight forward so you'll be able to understand I think.

http://php.net/manual/en/language.operators.php

I suggest reading that entire chapter about Language Reference.

I wouldn't worry too much about understanding all of the information but this will give you some reference to draw from. A lot of the stuff in that chapter will make sense now that you are starting to learn. If you have questions about your reading assignment, then you can get help here.

One last thing about some of the symbols you have seen.

The escape key (\) - This tells PHP to treat the next character as a literal character and not an operator. This will be better explained in the PHP manual link above.

Additionally, in PHP (//) is used to comment a line of code. After you finish a line of code, you can comment as to what it is etc...

Like this:

$a = 201; // Assign 201 as the value of the variable $a

Also, this can be used to escape an entire line of code:.

// $a = "This is the new value of the variable";

Php would overlook this line as a result. I use it to help identify errors in my code by "hiding" code line by line.

Now that I explained that, the \/\/ was the escaping of the slashes in the "http://forums.xisto.com/;. At the time I wasn't thinking clearly and escaped the slashes because I was worried about the comment code being the same characters but forgot that the comment code isn't recognized inside of double quotes. That was the reason for the change in the orriginal code.

For more information about commenting, Here is another tutorial of mine.

Good Comments Make Good Scripts.

java script:

There is no limitation on JavaScript in PHP but you have to be sure to escape some of your code so that PHP doesn't mistake the JavaScript as it's own. Php can build JavaScript just like it build HTML, XHTML, or even XML. Just remember, PHP acts as the brain that arranges the HTML or JavaScript tocreate a web page that is viewable with a browser.

Banner rotation is better with PHP because PHP can control which banneer to show when and where based on global values whereas JavaScript relies on local values. This will become more evident as you learn more PHP.

Okay, I'll go into template use and design on my next post. Right now it is getting a little late and I need to give some thought about my next post.

vujsa

minnieadkins · January 27, 2006

I know i'm reviving a dead post here, and sorry, but I looked around and found nothing past this point. I did pretty much the same thing, but just included a standard include file, and created functions to display each blocks of html code.This just keeps it simple for me by instead of having a directory full of .inc, .php, or .html files, I can just open that single file to edit the header, footer, and menu. Obviously the content pages displayed in my #MAIN div are seperate .inc files. I was wondering about more of the CSS aspect of it, and ideas on design. I've read many tutorials and examples on css, but when trying to design a menu using a list object, internet explorer just gave me way too many problems. Eventually I used a free css approach for the menu. Anyway, what I was wondering is where do you go from here? I guess more of a template (style) approach for each of the sections. Should they displayed in a table as the example above, or is CSS more effective? Again, sorry to revive this post but I'm very interested in this thread.

vujsa · January 29, 2006

Thank you for your interest in this subject. I am always willing to discuss most aspects of website design. I consider CMS and template use to be the backbone of a good website. I originally started this tutorial as a beginners guide to the PHP used to start a simple template based website. The next step I would have gone into was the use of some type of database to generate various parts of the website. A database table or file would be the best way to store the information needed to build a more advanced, easy to edit menu.It would seem that there is more of a desire to discuss layout and design when using a template system so I'll try to help with that. [/hr]I really think anyone intersted in website layout and design should read many sources before deciding on their website's look. Having said that, here are my thoughts.I like keeping the most used links in a tool bar near the top of the page but keep other useful links in a menu on the left side of the page. Neither navigation aid should detract attention from the main content of the page. The tools should look good and be easy to find as long as they match the rest of the website.Various modules can be used throughout the website but some modules need not be on every page. For example, you don't need a latest news module shown on the news page of your website. The log in module doesn't need to be on the log in page. The simplae search module doesn't need to be on the advanced search page.These are the kinds of things that stick out in your visitors minds as being redundant or even confusing. These are also common sense things that we tend to overlook because we are so busy looking at our new layout and not reading our own content. [/hr]People always want to know how they should output their HTML. Should we use CSS only and get the validation or should tables be used. That question is nearly impossible to answer. Since not all of the web browser designers choose to follow the so called industry standards for web page validation and they can't seem to make all of the browsers display the same web page in the same way, it isn't really easy to figure out how to code your pages.I use tables! I like tables and I don't care about validation. I do my best to make my pages look the same in every web browser. CSS has such varying support among the browsers, I have a lot of trouble getting it to work properly in all browsers. Best case senerio is that things look a little different but the general feel of the website is intact. The worst case senerio is that I need multiple CSS files, each dealing with a different browser. I use CSS to control my tables and I usually add variables to the tables to allow for dynamic variations on the fly. For example, I sometimes like to eliminate the right column of my website if I feel that the content needs more room. If I wrap a forum system in my website I can make the template provide a wider area for the bulletin boards.Remember, you can always use CSS inside of your table cells and then just use the table to keep things lined up corectly. I alway design my templates to be variable width.. This way the page uses all of the space on the monitor's screen. I never understood leaving 150 pixel margins on either side of a website. I figure at the very least, stick an ad their to maybe generate some income.As far as placement of modules and design tips, you really need to consider more than what works for me. I'm not a very good designer. I focus more on the scripting aspect of web design. You personal preference will be the most important factor in deciding what your page will look like in the end. Hopefully, if you write a good enough CMS sytem, you'll be able to try various layouts with little effort. Afterall, that is the whole point isn't it, being able to manage your content easily. I will, when I get a chance, go into more advances scripting for a simple CMS or template based system.If you have more specific questions related to this topic, please feel free to post them. The design and content is such a broad aspect of the system I can't really get into everything in a signle topic. I don't know if I answered any of the questions but I will try my best to answer any of the follow up questions.vujsa

minnieadkins · January 29, 2006

Thank you, it was a very interesting read. Let's start off with a header. I'm not that great at photoshoping much of anything, but I have a basic understanding of how to use a graphics editor. What should the header consist of? For me, it's something that basically describes what the page is going to be about, and some flashy graphics or colors to signify that this is the beginning of the page (top). The graphics should be kept to a minimum size however, and I've noticed a lot of graphics have pieces now days. I think there's two reasons for this. This allows the user to actually see something being produced to the page while the content is loading, which makes them more interested. Secondly it allows your images to be less likely to be stolen or used without your permission.Color choice for a header is something that stands out and has a little stronger than the colors used in the rest of your document. I'm just curious on how you would handle colors. Would you use flashy colors or keep it simple with like no more than 3-5 colors. I am focused on the design aspect, as I have been scripting a lot lately. I starting to feel comfortable with basic scripts, but there's always something out there that confuses me, that's just programming for you. I just wanted to be able to produce a simple website, and make it look nice, hence css. I'm not good @ all with design, so by using a CMS I figured I could control the design and make it a simple yet elegant site without too much effort.As for the footer I was thinking just a horizontal rule or something, then small text signifying the data, and if technical issues contact the webmaster.I dont' know what type of menu I would prefer. The site I'm going to be working on only has a few links and isn't filled with a lot of content. I think that single menu would be sufficient, although if I had more than an admin login in it to add content, I would definately take into consideration of having a hozitonal menu, and a veritcal menu. I think I like the horizontal menu, but it seems harder to implement. I was looking into a drop-down menu, and finally got a vertical menu to work in ie6 and firefox (and i think ie5). I worked with it for hours then followed a tutorial. I understand about 40% of what I did. IE6 presents a lot of errors with CSS, so I see your viewpoint with tables. I would like your thoughts on the header, footer, and menu creation and what types of colors to use. Simple or flashy?

vujsa · January 30, 2006

Well, I'm not real good with the design aspect of web developement either but here is template I am currently developing for Mambo / Joomla.

http://forums.xisto.com/no_longer_exists/

It still needs a lot of work but the basics are already there.

I think you can get more design tips in the website design forums.

vujsa

GodDog · March 20, 2006

This Content Management is very useful and i like how it is im going to customize and study off these scripts that you have provided

Sign In

CMS101 - Content Management System Design Basic CMS With PHP Includes

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information