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
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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
Hey hey,
Just wondering how much longer before part 4 shows up? =)
Cheers
Good article!
I did notice that in the part about css, it mentioned that the design would not center in IE6. Adding text-align:center to the body tag(and then resetting it to text-align:left in the wrapper of course) solves this problem for IE6.
It would be interesting to hear some news on part four
greate series, although it starts to seem like there wont be any part four
It certainly seems that there won’t be a part four. Maybe we should contact the creator of this tutorial?
I am really looking forward to Part 4 and 5. Maybe together?
Part 4 isn’t coming. Not now. Not ever.
Nice series, I would really like to see part 4
I hope the part 4 and 5 of this wonderfull tutorial comes very soon, because I’m really looking forward to seeing the rest.
Great series. I’m having a difficulty in mounting the example. Where to put the quick template? Or if you have another example of him to step so you can follow it, I will be grateful.
How can I include a php file, or use any php in the main.tpl.php? There is no point in using this if I can’t use PHP, because I need to use if and else, and switches, etc. Also how do I execute SQL queries using this?
I do hope nignog is incorrect with his statement. Stumbled upon this series and it is what aI have been looking for for some time now. Seems other “tutorials” and books utilize pear or another cms framework to handle backend. Prefer ground up approach, helps me understand what is going on.
Thank you for your time writing this and I really hope it continues.
I thought the main function of framework was to dynamically include content (?), will these be focused on in upcoming articles?
Peace.
The next few parts should be submitted to Jeff very soon. I’ve been rewriting them since I wasn’t able to restore them from my laptop which recently decided to break.
This certainly isn’t the end!
When will these be posted? I am loving the tutorials
Cool
How do I use insertRecords()?
It’s a good introduction. I want start to develop a new framework
when will part 3 come?
So will there be a part 4?
Looking forward to see part 4 and 5, keep them coming
it’s nice, great…
Thks
Try YiiFramework or PRADO it’s simple and nice
I was wondering, what IDE do you use?
Hi, I’ve read this tutorial before and I’m really looking forward to Part 4 and 5. Hopefully you post them at the same time
Really hope there will be a next part.
I’m now that far….
Im loving your work.
Thanks for the well rounded tutorials!
I like how you handle templates.
We need more people like you two!
@Peacock Carter; take your time, this tut will be useful for years&&years.
@`any complaints` go write your own plz->thankyou.
can some one tel me when the part 4 is comming
Realy nice work, i’m building a Framework based on this and i’m bloking somewhere that’s way i’m waiting part 4 and 5 hope soon
are there a download link for part 3 ?
no
Is there going to be a Part 4 or 5?
Great one thanks
Hi
first of all, TANK YOU!! this is so great and the first tutorial that i truly understand.
when will the other parts will be available? i need it fast.
Will there be any announcement about the next steps? this one was published a long time ago.
can anybody just inform us if this series will continue or not?
Would be nice if someone could inform about the rest of the series..
Any info on the remaining articles? Thanks.
Is it possible that the remaining articles are only available for Plus members?
When will parts 4 and 5 be available?
good job, i like this…
was very helfull…
Wonderful tutorial! Based on all of the comments posted here you have a lot of fans. Don’t keep us all waiting too long for parts 4 and 5.
Any news on the next part? It’s taking an awful amount of time…
Jeff/Michael,
Any news? I’m dying for it!
It’s just the best tutorial I’ve ever seen.
Please keep the good work for us.
Thank you guys!
Would really love to get part 4!
The previous parts have been a great help though!
Has anybody ever seen a “roll your own php framework” tutorial series finished?
I haven’t
I just read this tutorials and they are good and really want part 4 and so on so will they come or not?
I know there was a year ago but still asking
Michael was kind enough to reply to my e-mail on the matter. He said that they are in progress still but needed to be pushed aside to finish other things (understandable). So those interested still just keep an eye on here for the next release. He hopes to have them out soon.
Still hope this gets finished =) Awesome tuts
Very useful series. Thanks.
When will parts 4 and 5 be available? or Send this parts 4 and 5 be available to email abizach@yahoo.com.
Thanks.
When will part 4 be available?