Web Pages in Classes

One of the more difficult styles of programming for me that most PHP programmers use is mixing in HTML and PHP. It certainly gets the job done, and for most that’s all that counts. However, with certain types of projects, mixing HTML is difficult to maintain and re-use. So, I thought that a good starting point for making a CMS is using a HEREDOC string inside a class. Once the basic structure is in place, data could be updated using external data without having to change the basic structure of a Web page or re-writing the HTML. Figure 1 shows the final results of an HTML page created with a PHP class. The “external data” at this point is “stored” in a class method. The page is very simple based on a typical Web page with headers, body text and captioned images. Figure 1 shows the results:

Figure 1: Page with data added

To get an idea of how to use this, and see it live on a Web page use these buttons to play it and download the files:

(Depending on what you’re using to view this page, the two images are going to be more or less distanced from one another in the browser. You can jiggle the CSS to make any adjustments you want, but I just re-sized the browser. Likewise, the two header fonts may need some adjustment as well since I downloaded two non-standard art deco fonts.)

HEREDOC: A Web Page in a String in a Class

The first thing I did was to use PHP’s HEREDOC syntax. (You can find out about using HEREDOC in the manual.) I’ve come to reference HEREDOC in all caps since after the <<< operator the HEREDOC name is in all caps. Essentially, this approach places the entire Web page in a string. You have to be careful when using HEREDOC to place the closing HEREDOC name on the far left of the script with nothing more than a semi-colon after it.

You may be thinking that such an approach is very limiting because the entire Web page is contained within a single string. However, the Web page in the HEREDOC string is actually a template for what you may want to add. Just like using an external link to get your CSS, all of the content for the page is from external sources. In this initial example, the “external” source is simple a private method (getContent()) within the DocHere class as can be seen in the following listing:

image2>

  CMSTEMPLATE;echo$this->document;}   privatefunction getContent(){$this->css="heredoc.css";$this->title="Here's Doc!";$this->header1="The Main Section";$this->header2="This is a Section Header";$this->body1="

Here is whatever has to be said, thought, discussed or just chatter."; $this->body1 .= " You can tell the reader as much or as little as you like.

";$this->image1="images/rose.png";$this->caption1="
Lady with flowers and the moon.
";$this->image2="images/poland.png";$this->caption2="
I really want to visit Poland.
";   }}?>

$this->caption1

$this->caption2

//DocHere.php class DocHere { private $document; private $css; private $title; private $header1; private $header2; private $header3; private $body1; private $image1; private $image2; private $caption1; private $caption2;   function __construct() { $this->getContent(); $this->document = << css> $this->header1 $this->header2 $this->body1 image1>

In looking at the class, think of it in three parts:

1. Set of variables declared for use in the Web page
2. The HEREDOC string containing the Web page template
3. Content for the page

By placing all of the variables in a private visibility, you can quickly and easily encapsulate data that actually goes into the Web page. The variables provide a clear outline of what is available to change in the page. Keeping in mind that his is a Web page to be updated with external data, the private visibility helps to limit what kind of external data gets to be on the page. (It must be assigned to a private variable through some kind of public access.)

The HEREDOC string just makes it easy to drop in a Web page without a lot of string concatenation. In fact, you can create and test a standard HTML page and copy and paste it into the HEREDOC variable ($document.) Just remember to replace the content with the set of private variables.

Finally, the getContent() method is just a place-holder for whatever kind of data resource you want to use. As we develop this into a useful CMS application, we will want to keep in mind the decomposition process where we keep all of the parts separate and simple.

Finishing Touches

Before finishing up this first part, take a look at an external data source used in the program: the CSS file.

@charset "UTF-8";
/* heredoc.css */
/* CSS Document */
/*468966,FFF0A5,FFB03B,B64926,8E2800 */
body {
        background-color: #FFF0A5;
        color: #8E2800;
        font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
        font-family: "Raconteur NF", futura, fantasy;
        background-color: #468966;
        color: #FFB03B;
        text-align: center;
}
h2 {
        font-family: NITECLUB, fantasy;
        color: #468966;
}
.pixcaption {
        font-style: italic;
        font-size: 11px;
        color: #B64926;
}
.doRight {
        float: right;
        padding-left: 10px;
}
.doLeft {
        float: left;
        padding-right: 10px;
}

As noted, the CSS style sheet is simple, and you may want to make adjustments to your own taste or requirements in an external style sheet. If you use jQuery tools in your HTML pages, you will find that they can fit in the current format quite easily.

A little trigger script launches the DocHere object (class):

//calldoc.php
include_once('DocHere.php');
$worker = new DocHere();
?>

The external trigger script is a temporary stand-in for a Client class to be developed later for making specific requests. Be sure to place the calldoc.php file in the same directory as the DocHere.php file.

External Data Options

In developing a CMS, even a simple one such as the one in this series of posts, you need to begin thinking about how data are to be updated. In the next installment in this series, we’ll try out some externally supplied data and start thinking about what kind of design pattern would help to maintain a Web site through a PHP CMS.

Copyright © 2013 William Sanders. All Rights Reserved.