If you are starting web design, chances are you are learning about it through books, tutorials and other “on your own” sources. The web has millions of articles written on how to design a website. The best way, however is to read my blog post first
I assume you know a little bit about css and html and know how to launch a simple static website with four or five pages. A four page website generally consists of a homepage, contact page, about page, and maybe a services page. Generally with a full static sites you would create a homepage, and one sub-page for all other pages. If your site starts to grow in pages and links, managing your static site may become time consuming and complicated. You could move your site to a full content management platform, or you can dynamic elements to your static site by applying a little bit of PHP code to spruce up your site and learn a little bit of PHP in the process.
Face it folks, grasping PHP is not easy if you have no idea how programming works. I, for example, always got confused with the “echo ‘hello world’ ” examples because I did not find them practical in web design. Another words, when I started on my design project I had no idea how to use and apply “echo hello world” statements or similar, in a practical web design job. So in this tutorial I will give you simple practical code to get you jump started with your PHP learning process. The code examples, I will show you, are useful in everyday web design, and not only useful but even necessary.
Lets get our fingers wet.
When you design your homepage, your homepage will consist of header, body, and footer. Lets call our homepage index.php (from now on save all your web-page files with.php extension). Your header and footer should not be part of the pages, but rather be included in the pages, this is important because if you make any changes to your header, say update the links, the change will be reflected on all pages without you having to go to each page to make the header changes. So what you will do is create two separate files for header and footer: header.php and .footer.php. Then using PHP we can include both header and footer files into our index.php file by using the following php code. <?php include ’header.php’;?> and <?php include ’footer.php’;?> .
Lets look at the static page and see how we can break it down into three files.
Here is a typical static page consisting of header, footer and body
First we need to cut part of the html code and paste it into our header.php file. The header will include our DOCTYPE and <head> information along with our top menu links.
Now we need to cut part of the html code and paste it in our footer.php file.
What ever is left from our static page will be saved as index.php. Then what you will do is replace the header and footer html code with php. When the php gets executed it will grab all the html code from header.php and footer.php and place it into index.php.
If your css menu uses “active” pseudoclass for CSS menu links to allow a specific menu link to be highlited when a specific page is showing, then with include header.php it is not possible unless we add additional code to our pages. With a static site that was easy to do since all pages contained its own copy of the menu, but now the same menu is included in all our pages.
Here is how we can fix this problem.
First we need to add a global identifier to our index.php file and all our subpages such as contact, about, and services page. The global identifier will be unique to each page and has to sit at the top of the pages. In the example below we are looking at our index.php file to which we added $current_page=”home” identifier. In your subpages you would replace “home” with other unique names such as “about” …etc.
Now, we can look at our top menu link that are located in our header.php file. To our menu links we will add some php if statement. In plain language it is saying that if your the current page you are looking at is identified as “home” then make the Home link active.
Notice: In this case .active_page class identifies the active CSS menu link. Your class maybe named differently. Secondly, make sure that the php code goes inside your <li > bracket not after it.
By using this example you have learned to make your pages more dynamic using simple php statements. I hope that this was helpful for you to get your feet wet with PHP.