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>
© 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;
}
#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
<!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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Michael Peacock
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is one of the best series of tutorials I have read ever. It is very unfortunate for us all that the author never continued on with parts 4 and 5. It looks like the author has been busy with other things including a series of books.
Yes, its so bad the user never continued, i love this tutorial, very good one and was so excited about! but i understand, he must be so busy.
You write very best, but when the same will be continued?
Thanks a lot i’ve learned a lot from your tutorials. Keep going.. This is the best tutorial on creating Framework with PHP :)
Fantastic tutorial not only to build your own framework, but also to understand how other frameworks work.
Please keep going with parts 4 and 5 please!!
Please continue with further parts. this has been very useful.
Fantastic overview! Please keep up writing next parts of this series!
Thanks for 3 parts, i wish you could finish last 2 parts as well. anyway good tutorials :)
yes! Plzzz Tutorial 4 and 5 =D
This is rediculous. ANOTHER series on tuts+ that has not been finished. Every single series I keep track of stops dead of the last part or the last few parts.
That is SO annoying. This series is/was really good and I would love to keep reading about the authors views on software development, but I can’t.
Shame, a real shame.
Wasn’t our fault. The author went awol.
What other series wasn’t completed??
Hello, Thank you for tutorial
I use your framework to build web app project,
my project has 48 classes connected to database, and all classes include in all pages, is it a problem or not?
this question because My web site is very slow for loading up
Please help me
thank you so much
Sorry guys but how do you call each template (header, content, footer) from the index? I mean I get on part 2 of the tutorial how you call the “main.tpl.php” template but not sure how to include those other templates on one.
Thanks!
very good.
Please continue to write down!
thanks.