How to Connect the Top, Bottom, and Middle of a PHP Template

When you are building a PHP template system, you start with the top of the page, and then create the bottom of the page. Weirdly enough, you leave the middle to the end. Here's how you bring it all together.

The final classPage.php file should look like this:

<?php
 
class Page
{
 
    public $type = "default";
    public $title = "My Web Site";
    public $titleExtra = "";
 
    public function getTop() {
        $output = "";
        $output .= $this->_getDocType();
        $output .= $this->_getHtmlOpen();
        $output .= $this->_getHead();
        $output .= file_get_contents("pageTop.txt");
        return $output;
    } //end function getTop()
 
    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()
 
    public function getBottom() {
        return file_get_contents("pageBottom.txt");
    } //end function getBottom()
 
}  //end class Page
 
?>

You're ready to create a page with your new templating system. Follow these steps:

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

  2. Inside of the file, enter the following code and HTML:

    <?php
     
    require_once("classPage.php");
     
    $page = new Page();
     
    print $page->getTop();
     
    print <<<EOF
     
    <div id="mainContent">
     
    <p>This is where content would go, should there be any.</p>
     
    </div> <!-- end main content →
     
    EOF;
     
    print $page->getBottom();
     
     
    ?>
  3. Save the file as home.php in your document root.

This file instantiates a new instance of the Page class and then calls the getTop() method. With that done, the page being built will have everything it needs right up to the main content area. The main content area is provided in this file and is denoted with the print <<<EOF heredoc statement.

This type of statement tells PHP to just simply output whatever follows right up until it sees the closing EOF, which appears on its own line, left-justified.

Finally, the getBottom() method is called to round out the page.

It's time to view the page. Open your web browser and point to http://localhost/home.php. When viewed in a web browser, the page looks like this:

image0.jpg

You can tidy up this page with a bit of CSS. Here are the steps:

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

  2. Place the following CSS in the file:

    #menu {
        height: 20%;
        border: 2px solid black;
    }
     
    #menu ul {
        text-align: center;
    }
     
    #menu ul li {
        display: inline;
        list-style-type: none;
        padding-right: 10px;
    }
     
    body {
        font-family: arial, helvetica;
     
    }
     
    #footer {
        text-align: center;
        margin-top: 150px;
        padding: 20px;
        height: 15%;
        border: 1px solid black;
    }
  3. Save the file as style.css in your document root.

  4. Reload the home.php page in your browser.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.