|
Author: roddefig
Get rid of Frames, with PHP and Tables
By Roddefig
Copyright Notice
You are free to distribute this tutorial as long as
you give credit to me. This tutorial was originally created for and
posted on the 1337net
Technologies website.
Introduction
This tutorial describes how I converted my site
(1337net Technologies) to tables and gives you a step by step
instructions on how to do the same to yours.
When I first created this site it was a simple site,
no frames or anything. Later on, when I learned of frames, I thought
this would be a wonderful idea, and immediately moved to them
(documented in the News
area). After reading a few documents on why not to use frames
the site came to be what it is currently. This tutorial will teach
you, with the use of PHP, to create a website with tables that looks
just like it was created with frames, but with much more flexibility
and control.
Just say NO...to Frames
Frames are bad. They create a segmented website that
often doesn't look at all that great. When frames first came out
they were a hit, but with scripted programming languages and other
advances in web tech they are no longer essential, and they look
rather old fashioned. Do you really think highly of a site that uses
frames? I don't. Scripting languages make it much easier to create a
nice looking website without the interruption of frames.
Reasons not to use Frames
- You're not on Google - Search engines find it hard to navigate
through your site, often making them reject your website.
- Lack of Logic - frames are totally against the logical
structure of an HTML document, because in frames, a document alone
does not make a page. A frameset has no logical relationship in
its document structure because all frames are separate pages.
- Support - Not all browsers support frames, which often leads
them to be stuck with the content in the noframes tag
- Navigation - The web address never changes in the address bar,
which confuses some people which navigate with it
Still need more Reasons?
Okay, I'm convinced, now what do I do?
Don't worry, there is hope for your site. And this
hope lies in PHP. What you are going to do is to move your website
to tables. You can keep it looking exactly the same as it did when
you used frames. You must have 3 things to proceed.
- Patience - It isn't going to work the first time, so there's
going to be some troubleshooting.
- PHP - You must know basic PHP, how to make functions, and
display text, very simple stuff.
- HTML - I assume you know HTML, especially a lot about tables,
since you'll have to use most of the table attributes to format
your site to make it look nice.
Replace Frames with PHP Tables - Creating the PHP script -
index.php
Author: roddefig
How it all Works
First start off the PHP script with the appropriate
headers. Alright, let me explain how this all is going to work.
Let's say you have 2 pages, the index page and a page of tutorials.
You also have a navigation bar of some kind. Now, if we did this
without PHP, for each page we would have to create a table with 2
cells, one containing the nav bar and the other containing the
actual page. With PHP though, we can make a function that will
display the nav bar code, and then, depending on a variable, display
the appropriate page. But, we are going to make things even simpler,
by displaying the html, body, and header tags before and after the
document, so you won't have to put those tags in your pages anymore!
Alright, now let's get started.
Creating the PHP script - index.php
First off, let's create 2 HTML files, header.html and
footer.html. In the header.html file let's have the html tag, the
header tag, the title tag, and the body tag. (If you want a
different title depending on which page you're on you'll have to
generate this code yourself, but don't worry, it's no big deal). In
the footer.html file let's have the /body tag and the /html tag.
Navigation will be controlled by a variable, for
example $location. The contents of the variable will determine what
site the user goes to. PHP, reads the content of the variable, and,
according to a switch, displays the appropriate page. First off,
when we make the script, let's make sure the variable is not empty
(such as when the user first access the website). We also need to
move the variable from the get array (not necessary on all sites) To
do this use the following code.
The if statement determines if the variable is empty
and, if it is, loads it with the string "index", which will navigate
the user to the index page.
Now we need to call the navigation function (we'll
make it next). Do this using the following code.
Now, let's make the function. I'll call mine
changelocation($location). To do this use the following code.
Now, we need to display the header file. To do this we
will use the include function. This will display the contents of the
file specified directly to the browser, without PHP's intervention.
To do this use the following code (assuming the file is in the same
directory as this script).
Next, we create the table. Use the function echo to
display the HTML code for your table. An example is below.
Let me explain the attributes above. Cols="2" makes 2
columns in the table. Border="0" makes it so there is no border
(unless you want one of those nasty looking borders). Cellpadding
makes sure the text doesn't go out all the way to the edge of the
table. The align="center" makes sure the table is centered and
width="100%" makes sure the table takes up the whole screen.
Now we'll display our navbar in the first cell. First
let's echo the code to make a new row for our page to go into.
Now we create a cell for our navbar.
The width attribute makes sure the cell is 224 pixels
wide, to make sure my navigation bar displays correctly. The bgcolor
attribute makes the navbar is set in a cell of a nice blue color.
The valign="top" attribute makes sure the contents of the cell (my
navbar) are displayed at the top of the screen (if this option is
not set the navbar will be in the center of the page).
Now we display the navbar code...
Now we close this cell
Now we create a cell for the actual page.
Next we create a switch that will display the page
according to the contents of the $location variable.
Notice I use actualindex.html instead of index.html.
This is because we need to create an index.html document to redirect
users to the index.php script. The switch displays the page index if
the $location variable contains 'index' or the page tutorials (the
address is written out since it is located in a different directory)
if the $location variable contains 'tutorials'.
Now we want to echo the closing tags for the cell,
row, and table.
All that's left now is to close the html document. We
do this by including our footer.html file.
Make sure you close off your function by adding a '}'
after the include statement and you're finished! (Don't forget to
add the '?>' tag).
In the end, your script should look something like
this...
Replace Frames with PHP Tables - Cleaning Things Up - Final
Steps
Author: roddefig
The Final Steps
Now this is all great you might say, but how do we
change the contents of the variable? To choose which site a user
sees just use the following links.
- To make a user go to the index use:
http://www.whatever.com/index.php?location=index
- To view the tutorials page use:
http://www.whatever.com/index.php?location=tutorials
- Make sure to replace the appropriate parts of the link :P
Load the index.php script up to your website and
create a small index.html file. This will contain a meta refresh
that will redirect users to the index.php script. Visit the Refresh
Tag Generator to generate a custom refresh tag for your
site.
Now comes the tedious part. You'll want to go to all
of your pages and remove the html, body, head, and title tags
because those are now taken care of by your new script.
That's the end of the tutorial. I hope I got you away
from awful frames :D. With this script you can easily make changes
to your website without actually going through and modifying each
page.
You can distribute this tutorial anywhere, as long as
you give credit to me. This tutorial was created for the 1337net Technologies website
and originally posted there. This tutorial was written by Roddefig.
| 
