The top of the page is one of the more complex sections for a PHP template system to handle. The top of a web page contains the document type declaration (DTD) along with links to the CSS and any JavaScript that will be used on the page. The top of the page also contains the title and other meta information about the page.

Aside from the information in the <head> section of a page, the top of the page that you're using in this example also contains the menu shown here, with the links to other pages on the site.


The class that you will create in this exercise has four methods for the top of the page, including both the <head> section and the menu. However, when using the class, you don't want to have to call (or remember to call) all the various methods in the correct order to create the top section of the page.

All you care about is that you create a top section of the page. Therefore, there's only one public method, called getTop. The getTop method is responsible for gathering all the bits to make the entire top of the page.

  1. Open classPage.php if it isn't already open.

  2. Within classPage, just below the public $titleExtra = ""; line, enter the following code:

        public function getTop() {
            $output = "";
            $output .= $this->_getDocType();
            $output .= $this->_getHtmlOpen();
            $output .= $this->_getHead();
            $output .= file_get_contents("pageTop.txt");
            return $output;
        } //end function getTop()
  3. Save classPage.php.

    The getTop() method creates a variable for the output. This gives flexibility to add to or remove from the variable as you need to. The method calls three additional methods, grabs some plain HTML from a file called pageTop.txt, and returns the output.

  4. Within classPage.php (open it if it isn't already), below the getTop() method's closing brace, enter the following code:

protected function _getDocType($doctype = "html5") {
    if ($doctype == "html5") {
        $dtd = "<!DOCTYPE html>";
        return $dtd . "\n";
protected function _getHtmlOpen($lang = "en-us") {
    if ($lang == "en-us") {
        $htmlopen = "<html lang=\"en\">";
    return $htmlopen . "\n";
protected function _getHead() {
    $output = "";
    $output .= file_get_contents("pageHead.txt");
    if ($this->titleExtra != "") {
        $title = $this->titleExtra . "|" . $this->title;
    } else {
        $title = $this->title;
    $output .= "<title>" . $title . "</title>";
    $output .= "</head>";
    return $output;
} //end function _getHead()

The three methods that you add in Step 4 are responsible for building the <head> section of the page. The first method, _getDocType, returns the DTD, which for your case will be HTML5, but could be any other valid document type.

DTDs tell the browser what type of document to expect and what rules that document will honor. This helps the browser to make decisions about how to display the document.

The next method called is _getHtmlOpen(), which creates the <html> element of the page and sets the language. Like other methods, the language can be customized here if need be.

The final method called is the _getHead() method. This method incorporates another file, called pageHead.txt. The pageHead.txt file includes links to CSS and JavaScript. Remember that $type property that's set in the Page class?

Here's one place where you might use it. If you have a special page type that requires additional CSS or JavaScript, you could add a conditional statement here like, "If type is special, then use pageSpecialHead.txt."

The _getHead() method is also where the title of the page is set; if the $titleExtra property is set, then it gets used here too.

Now you have the capability to build the top of the page, or close to it, anyway, because you still need the code for those two text files, pageHead.txt and pageTop.txt. You create those using the following steps.

  1. Create a new empty file in your text editor.

  2. Inside of the file, enter the following markup:

    <link rel="stylesheet" href="style.css" type="text/css" />
  3. Save the file as pageHead.txt in your document root and resist the temptation to close that <head> element!

The <head> element is opened in this file (though it could also be opened inside of the _getHead() method). However, because you need to add other elements, like the title, to the <head> section, don't close the <head> element in this file. Instead, leave that for the _getHead() method to do. This gives you the greatest flexibility for changes and additions later.

Now create the pageTop.txt file that creates the menu structure that you see in the earlier figure and is incorporated from the pageTop() method.

  1. Create a new empty file in your text editor.

  2. Inside of the file, add the following markup:

    <div id="menu">
    <li><a href="home.php">Home</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact Me</a></li>
    </div> <!-- end menu →
  3. Save the file as pageTop.txt in your document root.