Advertisement

Create a PHP5 Framework - Part 3

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

Now that we've got a basic framework (see part 1 and part 2 of this series), we can start thinking about integrating designs with our PHP framework. For now, we'll concentrate on the front-end design, including how we can make it easy to 'skin' our new framework.

How everything fits together

So far, we have our core files, in a logical structure and a core set of objects which are accessed by our registry. One of these objects is our template handler, which lets us easily build and generate HTML output. The output is built from a series of files including images, css and templates which make up 'the skin'.

Step 1: what's needed for our framework's front end design

Generic front-end designs for the template can be difficult to think through properly. It's useful if the design's basic HTML template contains everything that any website you're likely to create using the framework. The bare minimum I consider is:

  • A primary content area, which we'll call
    #content

    .

  • A column or two for content which isn't as important as that in
    #content

    .

  • Some tabular data.
  • Unordered and ordered lists (definition lists too, if you're likely to use them).
  • Images. I find it useful to include a separate styling for photographs, which I identify with the class 'photo' in HTML; for example <img class="photo" src="images/photo.jpg" alt="Photograph" />.
  • A form for data capture.

The <head>

We'll start with creating a basic XHTML structure for our pages. We'll start with the section first:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>

You can change the doctype to match, or even have provision to be able to define it within the settings for each website you create with your framework, and it would also be useful to be able to change the

lang

. It'd be useful to have the stylesheet also defined as a setting, which we'll cover in future tutorials.

Additionally, the meta description and meta key attributes can be hard-coded in to each website's skin that you create, but it's wise to give each page a different description and set of keywords to prevent pages appearing in Google's supplementary index.

The {pagetitle} placeholder will be used to insert the title of the current page in to the template.

The <body>

We can now move on to the body of our template XHTML file for a generic front-end design for our framework. We'll keep the layout simple for now, assuming that most websites we'll be creating with the framework will use the traditional header, content, column and footer scheme.

<div id="wrapper">
<div id="header">

</div>
<div id="content">

</div><!--/content-->
<div id="column">

</div><!--/column-->

<div id="footer">

</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

Step 2: basic content

As promised, we'll fill in some basic content so we can style that we have at least most of the tags that are likely to occur in a page ready-styled:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "skins/fmwk/style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>
<div id="content">
<h1>{pagetitle}</h1>
<img class="photo" src="photo.jpg" alt="Photo test" />
<p>
Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed consequat, enim tristique euismod volutpat, <em>tellus magna aliquet risus</em>, id aliquet eros metus at purus. 
</p>
<h2>Secondary heading</h2>
<p>
Aliquam dictum, nibh eget <a href="#" title="Test link">ullamcorper condimentum</a>, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis.
</p>
<h3>Tertiary heading</h3>
<table>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
<tr>
<th>Heading</th>
<td>Data</td>
</tr>
</table>
<p>
<img src="image.jpg" alt="Generic image" />
Cras a eros eget lorem fermentum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing malesuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Maecenas adipiscing adipiscing risus.
</p>
</div><!--/content-->
<div id="column">

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

</div><!--/column-->

<div id="footer">
<p>
&copy; Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

The content is now ready for some simple styling.

Step 3: basic styling

We'll start by resetting the margin and padding of elements in our XHTML document with CSS:

body, * {
margin: 0;
padding 0;
}

We'll take some time to assign style to the body element and ensure that links within the document are appropriately highlighted:

body {
background: #FFF;
color: #000;
font-family: "helvetica", "arial", "verdana", sans-serif;
font-size: 62.5%;
}

a, a:active, a:link  {
color: #1A64AC;
text-decoration: underline;	
}

a:visited {
color: #0D2F4F;
}

Next, we'll go about centering our design in the #wrapper div, and assigning a faint border to each of the divs so that we'll be able to see them as we style.

#wrapper {
margin: 0 auto;
width: 950px;	
}
<br />
#wrapper, #header, #content, #column, #footer {
border: 1px #DDD solid;
}

Whilst the above CSS won't centre this design in Internet Explorer 6, the CSS has been kept basic to enable maximum flexibility. With a little more CSS, we nearly have a complete skeleton design for our framework's front-end - all that remains is a little simple positioning:

#column, #content {
float: left;
font-size: 125%;
padding: 5px;
}

#column {
width: 200px;
}

#content {
margin-left 5px;
width: 	725px;
}

#header, #footer {
clear: both;
}

All that's left to style for us now are images:

#column img, #content img {
border: 2px #DDD solid;
float: left;
margin: 0 5px 0 10px;
}
img.photo {
background: #DDD;
float: right !important;
padding: 25px 2px;
}

What we're left with at this stage is a simple website layout which we can use as the basis of the front-end of our PHP framework:

Of course, for extra flexibility, it may become useful to allow 2 columns of content by default, which can be done with the addition of a little more XHTML and CSS. If you're unfamiliar with how to do that, try Blue Robot's Layour Reservoir.

Step 4: templates from XHTML

The next step is transferring the XHTML, CSS and images in to a skin suitable for our PHP framework. To do this, we need to split the XHTML in to three templates: header, main and footer. Because of the way the template system is structured, a page can be generated from any number of templates, however at least a header, footer and main template are recommended this means, generally speaking, we should only really need to copy-and-alter the main template file if we were to create a new page which had a slightly different structure.

Header template for the PHP framework (skins/default/templates/header.tpl.php)

The header template for the PHP framework should contain the section of our XHTML, as well as the

section of the :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{pagetitle}</title>
<meta name="description" content="{metadesc}" />
<meta name="keywords" content="{metakey}" />
<style type="text/css" title="Default page style" media="screen"><!--@import "style.css";--></style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="#" title="Website name">Website name</a></h2>
</div>

Main template for the PHP framework (skins/default/templates/main.tpl.php)

The main template should include the divs which will contain both the primary content, and any content in columns. Rather than copy the dummy text we used to style elements such as paragraphs, ordered lists and tables, we can now insert placeholders for this content, which will be updated depending on where the content is.

The placeholder content is:

  • {pagetitle} the title of the page.
  • {maincontent} the main content of the page.
  • {btitle} and {bcontent} heading and content for blocks of content. This is enclosed within a rcolumn loop so several blocks can be placed in the column.
<div id="content">
<h1>{pagetitle}</h1>
{maincontent}
</div><!--/content-->

<div id="column">
<!-- START rcolumn -->
<h2>{btitle}</h2>
{bcontent}
<!-- END rcolumn -->
</div><!--/column-->

Footer template for the PHP framework (skins/default/templates/footer.tpl.php)

Lastly, the remaining XHTML goes in the footer file, which closes the XHTML document and the body section. We typically use this to include a copyright notice and a 'web design by' link on our websites.

<div id="footer">
<p>
© Website name, 2008.
</p>
</div><!--/footer-->

</div><!--/wrapper-->
</body>
</html>

Apologies for the break from PHP in our series, but it is important to construct the relevant templates in skin format for our framework and the applications that utilise it. Part 4 in this PHP5 framework development series will cover basic security considerations and a basic authentication handler, before we move onto creating our Content Management model, and looking into how models fit together in Part 5. Also coming up in the series: Sending emails, extending our framework and logging a stream of user events in an innovative way.

Advertisement