To all CSS + PHP gurus:

I am not very familiar with css and html (Dreamweaver MX 2004) etc. and have trouble figuring out how to load different content on a link event into the main page which would be index.html - without using frames.

Say the mouse clicks on a link (i.e About us) I would like the requested content to be displayed in the middle section of the index.html page.

My main objective is to not having reload every page because the header and footer are going to be the same.

The page I am working on is here: www.bionicmedia.us

I hope that there is a somewhat easy solution to this, since I am really a beginner in scripting but am eager to learn the tricks of the trade.

Step by step guide very appreciated.

I would love to sleep again and solve this problem :O

Thanks in advance for your help!

Here is a very general idea of how you can do it.


Since your footer and header are the same, and content in the middle, you can do this:


With PHP, have everything loaded from an index.php file.

If you have static pages ready for your content, do this in that index.php file:

Define a path where you'll keep all your content/template files and your header and footer. For example:


Use the following line to get information from your URL:


The variable $fileContent will contain whatever is in your URL after the index.php... for example..


$fileContent will equal 'aboutus'.

Next you can simply do a PHP include to display your header, $fileContent file, and footer, like this:


If you have links on your header file (Like the left side) they just point to different content pages to be loaded with URL like:


Basically, this is how my own content management system works. Its simple and effective. Check out the website in my signature. I hope this helps.

Hi Jason,

-first thank you very much for your detailed description.
That sounds exactly like what I am looking for.

Since php is still a huge question mark for me I was wondering how to change my index.html to index.php while keeping all my html code-or do I misunderstand something here?

Would you possibly have an example of how the php file would look like?

I really apprciate it!
Thank you,
dada78

I knew this was what you were looking for!

Actually, I see one error to what I have above - when you're doing the includes, $fileTemplate should be $fileContent. Also, you need some crucial code in there to check if there is anything after your web address...if not it loads a "default.html" page, which is basically your default web page that someone goes to when they surf to your website address.

You can copy and paste everything into an index.php file as follows:


Here's a suggestion for breaking up your HTML into footer and Header files:

When you break up your HTML file, then exact one you have, if you're using a WYSIWYG editor, put a word in the content area that says "CONTENT" or if you know where your content will be, type the word "CONTENT" there, then preview it. If its showing up in the content area, then you know you can pin point where content begins or ends.

Next...

Copy and paste all of your HTML code BEFORE.. the word "CONTENT" into a header.html file. This is your header file... simple.

Copy and paste everything after the word "CONTENT" into a footer.html file. This is your footer file.

Vioala! You're all set!

Plus, the method I gave you for getting the information for setting up your URL, is search engine friendly. I use it, and have no problems getting my pages indexed with Google.

HOpe this helps.

Hi Jason,

thank you for your help! I know you must think I am completely inept, but in your code:

<?
DEFINE (TEMPLATE_PATH,"./www/templates/");

what exactly does the variable template stand for? Also do I have to exchange www for my domain name?

I am sorry that I am such a pain, but php is still very new to me.

I have designed my page using just CSS and XHTML.
You suggested to define the area where the content should be loaded with the word CONTENT. Do I need to just write into the div the word content?

Thank you!
Dada78

Hi there, that TEMPLATE_PATH variable is a defined variable that is constant. It can't be changed by any part of a PHP script. The www you see in there, is merely the directory where you keep your HTML pages on your server - that's all. It could be called something like, "publid_html/webpages", for example.

Don't worry thought, TEMPLATE_PATH may be changed to be something else, that makes better sense for you, such as WEBPAGES_PATH... or XHTML_PAGES_PATH, just be sure to change it whereever else it needs to be changed in the code I provided.



To use this code I provided, take the main webpage you've already created...
So lets say your page looks something like the following, for example:

Now this is for a VERY simple webpage.. in fact, where you have Left Column in the HTML code above, you might have a TABLE with menu items right there.... then a table that contains your content, in the middle column... and finally a seperate table in the left column that has a table in it with news and ads, for example..... I'm sure your webpage is probably laid out with lots of code... the key thing is to determine where to split it up into two seperate files, so that your new content can be in a different file that gets "sandwiched " between them when you do the display...

So looking above... where would I split up the code between to create a header.html and footer. html file? I believe it would be the HTML code before and after where the middle column will contain content.

My header.html file will contain this:


My footer.html file will contain this:



So when you run the PHP script, it will first display the header.html code, then do your changing content (depending on where the visitor wanted to go), and then finally display the footer.html file. It puts it together for you.

If you need a better explanation, let me know, and I'll try in a different way.

Hope this helps.

Jason

P.S.

I suggested putting the word "CONTENT" into your page, only to help you see where you need to do the division of your code - only as a guide, to be taken out when you're done.

Hi Dada78,

I looked at the source of your webpage. I can see that it its probably confusing for someone just beginning. Your webpage, is perfect for my suggestion though.

I suggest you do this:

In your XHTML code, take everything before <div id="flower-image_"> and put it into your header.html file.

Take everything after where it says "present yourself to the world", then a couple closing paragraph codes and finally a </DIV> which means to close the DIV (this complete div has an ID of text where all your text should be) and put that code into the footer.html file.

Finally, take everything starting from <div id="flower-image_"> and ending with "<p>+ Present yourself to the world +<br /></p></div>" and put this into your default.html file.

Store these files in a directory, make sure that TEMPLATE_PATH or WEBPAGE_PATH (if you renamed it) is set to point at those files, in the directory you make... then rename your index.html to index.backup and use the index.php file I gave you the code for. And you'll be off to a good start to the next steps!

Hope this helps.

Jason

I made one mistake in my code above:

Where it says:


You need to add the following:

Hello Jason!

I have to thank you very much for all your efforts. I will take your advice and study it so that I will be able to apply it to my website.

Have a good day.

Dada78

The best way to study it is to try it out.... perhaps use a simpler template at first as a test, and work your way up to what you have now.

Hope it works out.