Ok, so now that we have a page that shows us nothing more than just a “Hello World!” message, let’s start using some of that magical PHP language we’ve all grown into using.
The first step is to separate the header/footer content. In your main root folder, create some other php files. Call them header.php and footer.php.
1 2 3 4 | / |-- footer.php |-- header.php |-- index.php |
In the header, you will cut paste the top part of your document as such:
header.php
1 2 3 4 5 6 7 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Another Hello World website</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> |
Notice how we placed the <body> element inside here. Why not, right? It’s a required element that appears on EVERY SINGLE PAGE! Same with the footer. Include the ending </body> tag since it’s required on EVERY SINGLE PAGE.
footer.php
1 2 | </body> </html> |
Our main page can now contain the content. This is a really small file now. Notice we’re added some cool PHP code to include the header and footer files.
index.php
1 2 3 | <?php require_once('header.php'); ?> <p>Hello World!</p> <?php require_once('footer.php'); ?> |
This way, when you create another page, you don’t have to copy paste the entire header or footer. Why would you want to do it this way? Well, let’s say you have 5 pages to manage. What if you had to change something in the nav bar of the page? Like more links and pages. It’s much easier to edit one page than 5, and more consistent and safe. If you miss one of the links on one of the pages, you could get your end user stuck on a page that goes nowhere. Not cool.
Let’s add another page. Let’s call this one “About us.” Watch how easy it is to duplicate everything we’ve already written by not doing anything.
aboutus.php
1 2 3 | <?php require_once('header.php'); ?> <p>This is the section you write about yourself.</p> <?php require_once('footer.php'); ?> |
“That’s great” you say, “but what about the navigation to this page?” We could simply just place an about link from the index page, but I think a better navigation technique would work to our advantage. Let’s create the NAVBAR!
We could simply create another require_once file, but too many of these babies and our performance would go down easily. Why bother placing one included file after another if nothing else is to come in between? This would be inefficient:
aboutus.php
1 2 3 4 | <?php require_once('header.php'); ?> <?php require_once('navbar.php'); ?> <p>This is the section you write about yourself.</p> <?php require_once('footer.php'); ?> |
Instead, we can place the navbar code INSIDE the header.php file as such:
header.php
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Another Hello World website</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> <!-- NEW CODE --> <ul> <li><a href="/">Home</a></li> <li><a href="/aboutus.php">About Us</a></li> </ul> |
Now, all our pages are accessible from anywhere in the website. When we want to create a new page, including the header will include the navbar as well. Keep in mind that you may have to add another <li> element for your new page. On top of it all, we haven’t added any more require_once calls.
- Note: Whenever you do an
include,require,include_onceorrequire_once, PHP will seek those files on the hard disk of the server in order to find the file and generate the code within that file. As we all know by now that hard drives are the slowest component of any computer. Web servers are no exception. Try to limit the number of requires to a minimum and your code will be fast and happy!
Next step, .htaccess! What is that? Stay tuned!