Left Quote    Black holes are where God divided by zero.
- Steven Wright    
Right Quote
[login] | [Register]

Site Design Made Simple

by: Superterran
Page: 1 of 4
(View All)


Most sites are done with tables in html. Most newbies (and vets) make the interface and then modify that interface per page, making many html files with mostly identical code. This has many obvious problems, like if you want to update a link, you have to go threw every page and modify it accordingly. Or if you want to add content, you have to remove text, add text, upload, see if it works, modify it again, so on and so on. Annoying. If you want to redo the interface, you have to port old content over to new content. Now, this makes html coding tedious and brain numbingly annoying. The answer that most people come up with to fix it is to quit on their site. But, there's hope. The smart and experienced coders out there who want all pages to have the same interface do something different.

PHP is a fairly simple coding language that has many uses. In this tutorial I am going to teach you how to build a simple interface by using PHP to assemble many html files in to one interface.

What is the up side to this type of site design? Well, if I want to update a link in my navigation menu, instead of going threw all the files and updating it manually, which is tedious and hard, I can open one file, update that file and it's done. This method of design will split the code in to manageable sections, which are called upon in a php file. This allows for you to be able to modify one file, and have the effects be instantly visible to every file that utilizes that file for a function, such as a navigation bar and it's links. It makes things simpler and gives the developer more time to focus on content instead of the site actually working.

*Please note that the server you're using MUST support PHP or this will not work.

How This Works

How this will work is we will build the basic interface template. Lets make a simple table so I can show you how this will work


this puts all the sections that make the interface in separate files. To assemble the interface, we will use some basic php. This will put the file above back together.

Put this text in a html or php file, such as 'assemble.php'

the ' <? And ?> tells the server to run php code. The include function tells the server to add the code in that file to the code in the file its running (in our case assemble.php). This way the files are easily manageable.

If you run that script, you will see that it looks just like the same as the original html file did. Pretty nifty eh?

You can take this farther though. If you want to add extra content, then all you need to do is make another page (for example like home.php or something) and place the body of the page in there. Like your welcoming message, what ever news items you want, stuff like that. Then, all you have to do is replace the body.php inside the include tag with home.php. And then save that version of assemble.php to something else. This makes site management a lot easier.

I'm going to take this one step further for you, then your on your own. You don't want all your pages to have the same title do you? If not, I recommend you doing this. At the top of the assemble.php include this within the <?. = "whatever I want the page title to be";

and save it. open the header.php and modify it to mirror this

see the echo tag up there? This is what's going to happen. The is a variable. This variable gets passed to the header.php where it gets caught by the echo statement and placed in to the code.

Ok, so we have the page working. I'm going to throw out one little tip for you since you are new to this kind of page rendering. If you're like me, your side bar has a lot of content, and you don't want your entire side bar on all the pages of your site. So, what I do is I split the code up from the side bar in to other php files, and use the php include function to build the side bar that I want for whatever section of the site I am working on. This way you can have customized sidebar content to complement your page.

Using these simple concepts will vastly increase your productivity, decrease your coding errors and preserve your sanity as a html coder.


Now, you can take this site and expand it to be almost a full-blown content management system. My site for example (hate to plug but I think it's a necessary evil) has basically taken the above concept and expanded it to a full-blown site rendering system using basic PHP and html.

I hope this helps somebody out, I had to figure it out myself then people said 'well no duh Superterran! That's how everybody does it!' when I would try and brag about. Well, that's a lie. Only matured and experienced coders do it like that, or closely related.

If you liked this tutorial, check out my site, and look at the volumes of tutorials there.


1  |  2  |  3  |  4  |  
Next »


  Subject: "some php syntax" Date: Jul 13 2008 at 10:59 pm    

Hello, my dogstar profile is now the viospace I'm glad to say.

Some comments on the coding.

 Supert erran said...
< i><?.= "whatever I want the page title to be";

I believe that it is a bit easier to call a variable. I think that what you have here is some type of short cut that I've seen somewhere but can't find the source.

In the assemble.php file I'll define a variable:

$title = "whatever I want the page title to be";

In the header.php file I'll keep a similar structure:

<TITLE> <? Echo("$ti tle"); ?> </TITLE>< /div>

dogstar I want a sandwich
You Must be logged in or a member to comment.

Tutorial Stats

Tutorial Stats

2 Total Comments
4 Rating of 5 (6 Votes)


Tutorial Options

· Login to Rate This Article
· Login to Post a Comment
· Read more by this author
Digg This Article! Bookmark This Article Reddit: Bookmark This Article BlinkList: Blink This Article! YahooMyWeb BlogMarks: Add This Mark! Furl: Save This Article Spurl: Mark This Article



· HTML Tutorial
· New windows without using the target attribute
Your Article Here

"" Copyright © 2002-2019; All rights lefted, all lefts righted.
Privacy Policy  |  Internet Rank