Creating the Templates


The application in this chapter will use a new template design. This template makes extensive use of Cascading Style Sheets (CSS), creating a clean look without the need for images. It has tested well on all current browsers and will appear as unformatted text on browsers that don't support CSS 2 (including text browsers like Lynx). The intended layout for this site (Figure 13.1) is derived from one freely provided by BlueRobot (www.bluerobot.com), a good, albeit outdated, source for basic CSS templates.

Figure 13.1. The basic appearance of this Web application.


To begin, I'll write two template files: header.html and footer.html. As in the Chapter 9, "Cookies and Sessions," examples, the footer file will display certain links depending upon whether or not the user is logged in, determined by checking for the existence of a session variable. Further, the header file will begin sessions and output buffering, while the footer file will end output buffering. (See Chapter 11, "Extended Topics," for more information on output control.)

To make header.html

1.

Create a new document in your text editor (Script 13.1).

 <?php # Script 13.1 - header.html 

Script 13.1. The header file begins the HTML, starts the session, and turns on output buffering.


2.

Begin output buffering and start a session.

 ob_start(); session_start(); 

I'll be using output buffering for this application, so that I need not worry about error messages when I use HTTP headers, redirect the user, or send cookies. Every page will make use of sessions as well (it's safe to place the session_start() call after ob_start(), since nothing has been sent to the Web browser yet).

Since every public page will use both of these techniques, placing these lines in the header.html file saves me the hassle of placing them in every single page (and makes it easier to edit later, if necessary).

3.

Check for a $page_title variable and close the PHP section.

 if (!isset($page_title)) {    $page_title = 'User Registration      System; } ?> 

As in the other times I've used a template system, the page's titlewhich appears at the top of the browser windowwill be set on a page-by-page basis. This conditional checks if the $page_title variable has a value and, if it doesn't, sets it to a default string. This is a nice, but optional, check to include in the header.

4.

Create the HTML head.

 <!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-transitional.dtd> <html xmlns="http://www.w3.org/1999/  xhtml xml:lang="en" lang="en"> <head>   <meta http-equiv="content-type"    content="text/html; charset=    iso-8859-1 />   <title><?php echo $page_title;     ?></title> <style type="text/css" media=  "screen>@import "./includes/  layout.css;</style> </head> 

The PHP $page_title variable is printed out between the title tags here. Then, the CSS document is included. It will be called layout.css and stored in a directory called includes. You can download the file from the book's Web site (on the Scripts page).

5.

Begin the HTML body.

 <body> <div >User Registration  </div> <div > 

The body creates the banner across the top of the page and then starts the content part of the Web page (up until Page Caption in Figure 13.1).

6.

Save the file as header.html.

To make footer.html

1.

Create a new document in your text editor (Script 13.2).

 </div> <div > <a href="index.php">Home</a><br /> 

Script 13.2. The footer file concludes the HTML, displaying links based upon the user status (logged in or not), and flushes the output to the Web browser.


2.

Use PHP to dynamically display the appropriate links.

 <?php # Script 13.2 - footer.html if (isset($_SESSION['user_id']) AND  (substr($_SERVER['PHP_SELF], -10)  != 'logout.php)) {   echo '<a href="logout.php">Logout    </a><br /> <a href="change_password.php">Change  Password</a><br /> '; } else {   echo '<a href="register.php">    Register</a><br /> <a href="login.php">Login</a><br /> <a href="forgot_password.php">  Forgot Password</a><br /> '; } ?> 

If the user is logged in (which means that $_SESSION['user_id'] is set and this isn't the logout page), the user will see links to log out and to change their password. Otherwise, the user will see links to log in and reset a forgotten password.

3.

Complete the HTML.

 <a href="#">Some Page</a><br /> <a href="#">Another Page</a><br /> </div> </body> </html> 

I've included two dummy links for other pages to be added.

4.

Flush the buffer to the Web browser.

 <?php ob_end_flush(); ?> 

The footer file will send the accumulated buffer to the Web browser, completing the output buffering begun in the header script.

5.

Save the file as footer.html and upload, along with header.html and layout.css (from the book's supporting Web site), to your Web server, placing all three in the includes directory (Figure 13.2).

Figure 13.2. The directory structure of the site on the Web server, assuming html is the document root (where www.address.com points).




    PHP and MySQL for Dynamic Web Sites. Visual QuickPro Guide
    PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (2nd Edition)
    ISBN: 0321336577
    EAN: 2147483647
    Year: 2005
    Pages: 166
    Authors: Larry Ullman

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net