Using Object Oriented Programming to Build a Web Page

I. Intro
1. The Overall Idea of the Tutorial
2. What is Object Oriented Programming
3. How can it help you
4. Basics of classes
II. The Page Class
1. Code
2. Explanation
III. The Page
1. Code
2. Explanation
IV. Extending
1. Code
2. Explanation
3. How it can reduce hassle and code



I. Intro
1. The Overall Idea of the Tutorial

This tutorial will demonstrate the basics of Object Oriented Programming. It will also put the ideas to practical use in creating and extending a page object.

To see the actual finished product, click here: My Example

2. What is Object Oriented Programming?

Object Oriented Programming, or OOP, is making a class and using a class in creating different PHP applications. The class acts as a basic outline containing variables and functions. Creating an instance of the class allows you to access the variables and functions and use the class.

3. How can it help you

OOP is very useful in all sorts of applications. It can be used as a general outline of a page, as it is in this tutorial, it�s used in the very popular Invision Power Board forums, and it can be used as a shopping cart mechanism. The versatility of the classes relies in the fact that it can be extended, allowing a class to be modified for different needs. This use will be better explained later on.

4. Basics of classes

The basics of classes are very easy and straightforward. To declare a class, the very simple declaration is called.




Within the brackets are all the variables and functions to be used. So just to create a few easy variables and functions:




As one can see, functions, well, function in basically the same way as declaring a function outside of a class. To declare variables in a class, �var� must precede it. To access a variable within a class is very simple. $this is used to signify that the code is talking about �this� class. So to access �$var1� inside the class, the simple code $this->var1 would be used. Note that the dollar sign ($) is not needed before var1, only this.

Now to access variables outside of a class is a different matter. To access a class, you must first instantiate it into a variable. In easy language, you�re basically copying the class and all of its components into a variable. So to do this, we�d take our simpleClass and add some stuff to make it a bit more complex.



Here, the code defines a class and makes a function and variable within the class. At the moment, $var1 is just �Hello world,� and the function takes one argument and echoes it. Outside the class, simpleClass is instantiated to a variable named $object. Next it accesses the variable in the class by writing: $object->var1. Then we define it was �Hello User� instead. Next the function in the class is accessed by doing $object->simpleFunction($object->var1). This is done by doing basically the same thing as accessing a variable except with the function name and then accessing the variable as the argument for the function. The final output to the screen will be �Hello User.�

II. The Page Class
1. Code
Here is the basic code before it�s broken down and explained:



Save this as class.php

2. Explanation
This is a huge jump into the code, but if you can get through the basics, it�s pretty easy. The first thing I did was to declare the class and make a few variables: One for the title, one for the navigation, and one for the general content. Next I create the function �Display� which will allow me to display the whole page with one easy function. I also use a bunch of other functions in the general Display function which I will get to in a second.

The first function used is DisplayTitle(). This one does as it says, it displays the title. It�s a very simple function, all it does is use the HTML code for the title and accesses the title variable. This is so that if one wants to change the title variable within the page it�ll affect the title as well.
The next function declared is DisplayStyle(). This is a very simple function that just displays the cascading style sheet. Notice that I go out of PHP to do the styles because it�s not necessary to echo it all out and everything, it�s so much simpler to do it this way.
The third function is DisplayHeader(). This function will display all of the html design above the navigation. This is because the navigation will be more complicated and dynamic than static HTML. So the HTML needs to end above the navigation.
After this is DisplayButtons(). This is another simple function. I use a foreach loop to use the buttons array and make the navigation for the page.
The next function is the cool one, DisplayContent(). First it�ll end the navigation div with

. Then to demonstrate the extensibility of the class, we make the form with two numbers to choose from in this form.
The very last function is DisplayFooter(). This one ends the content area and the whole layout.

III. The Page
1. Code



Save this code as page.php

2. Explanation

This is a very simple PHP page. I start by requiring the class into this page with require_once(). I use require_once to make sure that the class isn�t declared twice. After that I instantiate the WebPage class into the variable $page. Then I just execute the function Display() to display the whole page. That�s the reason Display was made. Instead of having to write the code in the whole Display function right here, I could just use the simple function.

Congratulations! You just made your first web page using Object Oriented Programming!

V. Extending The Code
1. Code



Save this code as page1.php

2. Explanation

The point of this is show how Object Oriented Programming can really help.

Now recall in the original class the form pointed to page1.php, right? Well here it is.

I required the class again into this page to get the basic groundwork of it. Then I created a new class (ThisPage) which extends the WebPage class. Basically this means that it has all the same functions but I can add to them or overwrite them. So what I decided to do was to overwrite the content function and process the two numbers inputted on the previous page. It�s a very simple operation; all it is is to create the sum of the two numbers and output that to the user. Also I added another site to the buttons array and it showed up. I added the google search engine as a link. I did it the same way as when overwriting the functions, same concept at least. It�s declared the same as in the first class, and it�ll still work.

3. How it can reduce hassle and code

By extending classes, one doesn�t need to rewrite pages over and over again and again. Just write a single page class and extend it over and over to create your different pages without the needless writing and rewriting of every page you have, modifying countless things.

Plus there�s readability and maintainability with classes. Much more organized. Instead of random functions lying about, functions are associated with classes, as are variables, allowing one to see the functions and their purposes a bit more.