Ades Design Blog

PHP and Web Design

Note 1: You don’t have to know PHP programming to do this tutorial.

Note 2: I assume that your server supports files with .php extension. If not, you won’t be able to do this tutorial. For more info on how to install PHP on your PC go to http://www.php.net/

Purpose of this tutorials is to teach you how to design a website that is easily modified or updated. If you have a website with ten pages, updating should not be a problem. But how about if you have more pages..? Here comes the help of PHP. Of course it could be done with other programming languages like .asp, .jsp etc, but personally I prefer PHP. I guess you noticed that from the extension of my pages.

The point I am trying to make is, you can have your menu in one page for example and display it in every page of your website. When you want to change something in the menu, you have to edit only one page, and it automatically changes in other pages. Because you only link from other pages to menu page. Let’s start with the tutorial.

1. Open Notepad and type the following as shown below

Save it as header.php

2. Create new file in your notepad and type the following:

Save it as main.php

3. Create one more new file and type the following

Save it as footer.php

What we have done here is, we created three different .php files namely: header.php, main.php and footer.php. Later we will be linking them together within a page to create one whole page. Basicaly header.php should include all the meta tags and top menu. And main.php should include all the body content. As for the footer.php it will include Copyright notes and other content like bottom menu.

4. Next we link them together. Open another new file in your notepad and type the following. This is how the linking in PHP done.

Save it as index.php. All pages should be in the same folder. Otherwise the linking won’t work. Now access the index.php through your webserver. You should be able to see the following page.

Now change the contents of each page with respective content, I have tried to make it as simple as possible and not to put so much codes inside the html, so that you won’t get confused. Because once you know how it is done, you can replace the contents yourself with complicated codes such as tables, javascript, CSS etc. So if you have 100 pages and you have to change your Top Menu link, you don’t have to go to every page and change it manually, just change it in header.php and it is done! Good Luck!

Comments are currently closed.