Dynamic Web Site Basics in PHP
January 20th, 2009 | Published in Tutorials, Web Design | 2 Comments
This tutorial covers some of the basics of creating dynamic websites via PHP and HTML. Creating websites via PHP is not only a great way to design efficiently, but it makes 100% sense if you ever plan on updating your website (or if you have to hand it off to another design firm). Simply put, dynamic websites are scalable, usable, and efficient.
Basic Structure
All dynamic websites should follow a basic structure. The more detailed you get and the more parts you add to this structure, the more control you have over your final product. With that said, your website’s pages should follow this basic structure:
Say we are making our home page called “index.php.” In this example, File 1 (as noted in the graphic above) would represent “index.php” - in other words, it would be our shell page that will contain the other parts of the page. File 2 above represents our header which would contain the most common elements that are needed on the top of every page, most notably, everything within the <head> and </head> tags. The black section named content represents the content native only to that file, meaning it would be page content that only applies to that one page and would not be used in other pages (note: content is not being brought in dynamically, it is actually a part of File 1). Finally, File 3 represents the common footer content we want to bring in dynamically in every page from an external file.
The Advantage of This Structure
So why use the above structure? Imagine you have made a website with 25 static web pages, all of which contain your website’s navigation, included scripts, styles, as well as a footer with navigation, privacy links, copyrights, etc. In one month you find yourself needing to add a new section to the site. Without the use of dynamic PHP integration, you are forced to edit each single file, that is 25 files. Had you put the header and footer in separate files and included them dynamically, you would only need to edit two page.
How We Do It
When starting from scratch, your best bet is to develop one complete page in the text-editor of your choosing. When you have settled on a complete design that you are happy with, you can begin the process of breaking that page up. We will continue to use our example above and break away two files from within our index.php file (File 1).
File 2 (Header.php)
Begin by cutting out all content from <html> until the last element prior to your </head> tag (we’ll explain why later). Copy that content, open a new blank file, and paste those contents in that file. Ensure you have zero formatting or extraneous code in that page other than the copied contents. Save this file as header.php.
File 3 (Footer.php)
Our external footer file, which you should name footer.php will contain all information that you want at the bottom of every page. As done above, copy the desired code and paste in a blank file. Be sure to keep the final </body> and </html> tags within the index.php (File 1) file (again, we’ll explain why later).
Final Pages
Now that you have separated the files, you should have three pages that look like this:
Details
As stated above, we were careful to leave a few select snippets of code in our first index.php file. We did this to ensure ourselves some flexibility in the future - afterall, that is what this whole process is about. By keeping the </head> tag outside of the header.php file, we have given ourselves the ability to selectively include javascripts or styles within the head of the page on individual pages. Why is this useful? Say you have a “gallery” page, and on that page you have some type of fancy image gallery using a library like Jquery. Due to the size of the Jquery file we may not want to include it on every page, especially since only one page needs it (including it affects load time). Now, on our gallery page, we can simply include the <script type="text/javascript" src="jquery.js"></script> directly on our root page before the </head> code.
The same thought process goes into the footer and leaving the </body> and </html> lines of code in the source file. This now gives you options to independently include unique content in select files under, or within, that footer.
The PHP
You are just about done and on your way to a dynamic, PHP driven website. With the files properly separated, all that is left to do is to include the “pieces” in the root file (File 1 - index.php) via a simple PHP script for each file. Each PHP snippet will contain two items - a variable and a require call in between <?php and ?> which tell the web browser the code should be rendered server-side in PHP. For both header.php, and footer.php, the code should look like the following:
<?php$head = $_SERVER['DOCUMENT_ROOT'] . ‘/path-to-file/header.php‘;
require $head;
?>
Explanation
In order to tell our server where the file is we need to grab, we must first define a variable (an identifier that contains information) with the correct location of that file. The $_SERVER['DOCUMENT_ROOT'] code tells our server to grab the root path of our server (this often looks like /c3/w/_public/www/ or some other obscure path) and then append it to the relative location of the file (the folder you have the header.php file contained in). Finally, the line require $head; tells the server that variable is required to run the page (as opposed to calls like include).
Simply copy the same script and change the ending file name to footer.php and change the variable to something differnt (i.e. $footer) and you should have a finished page that looks something similar to:
Conclusion
Bare in mind that the above tutorial is conceptual and definitely does not reflect the extent of which PHP can be used to create a dynamic website. However, by understanding these basic principles, you can now begin to explore PHP more to learn how you can create a dynamic and scalable website, and in the very least you will have yourself a simple website that can be updated in a fraction of the time.
Update: Learn how to create Dynamic Titles with PHP following this tutorial.
February 22nd, 2009at 4:51 pm(#)
I did as you said and it did a fatal error, so i used the same code as my header.php that i already have the it worked, but the footer is all the way at the top!!
February 23rd, 2009at 10:32 pm(#)
Hi comealive,
Can you please provide the code you are using here? Please truncate any unnecessary code out of it and we’ll see if we can’t help your issue!
Best of luck,
The Wythagy Team