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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Niklas November 24th
Wonderful! This will be a good read! Thank you!
( )chris simpson November 24th
cool.
( )insicdesigns November 24th
I really dont expect that you guys had to continue this series. thanks for posting.
( )Shane November 24th
Nice work. Just one small thing – there are some s that have crept into those early CSS file snippets in the article.
( )Shane November 24th
sorry for repeat comment. line breaks have crept into early CSS snippets.
( )Michael Peacock November 24th
I just thought I’d point out, that although it says by me, this one was by my business partner. I’ll be sending Jeff the next few of these tutorials tomorrow, so you guys don’t get another delay.
( )Yosy November 24th
Thanks
( )But this is a secure way to this like
{title}
??
because if someone write {title} for the title input that can be non secure,Am I right?
Richard, Peacock Carter November 24th
@insicdesigns we got a little busy, next tutorial should be out sooner than this one was – sorry for the delay!
@Shane thanks for pointing the line breaks out, will as Jeffrey to remove them.
( )Josh November 24th
Thanks for these great tutorials
( )Michael Peacock November 24th
@Yosy, that will only happen if the tags are classed as postparsetags (which we didn’t add in part 2, and if we had, this sort of content wouldnt be added as a PPT) AND if you don’t cleanup user input.
( )David Knight November 24th
That was one long break in between these articles. @Yosy, clean your user input
Can’t wait for the next one! Good job.
( )MightyUhu November 24th
Very Nice to see this series continue.
But to be hones i was a little disappointed after reading because all that has been done was some templating and not so much behind-the-scenes.
However looking forward to follow-ups
( )tom November 24th
i love the tuts on these pages but when i print them to use them later i am always missing code. is there anyway you could use wraparound as appose to the scroll bars when displaying code?
( )Dan November 24th
Great stuff. More…. more…
( )Anand Kumar November 24th
it was a really nice tutorial for the programmer like me .
( )Thanks
Miles Johnson November 24th
I dont think this should be part 3 at all. It has nothing to do with the framework, it has to do with markup and the template files. Wheres the actual php?
And also using placeholders like {var} is bad because it doubles the processing and load time.
( )Rydgel November 24th
It’s a very interessant tutorial.
( )Josh November 24th
I really enjoy these articles! I can’t wait til the next one comes out! Thanks for all your hard work to help teach this stuff!!!
( )James November 24th
Must agree with miles, this isn’t part 3, doesn’t have anything with the framework.
( )Lamin November 24th
Where’s the PHP?
( )Joe Bennett November 24th
Learn to read huh? It says in the description.
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’ in to our new framework.
( )Michael Peacock November 24th
@Miles, we went through the use of {var}’s in part 2, it isn’t really appropriate to change this now. While using PHP variables directly in templates can be more appropriate in some instances, many popular, commercial applications do use curly braces. As I’ve said numerous times in the comments, this is a series to create a framework, showing some ways to go about doing it – I’d strongly recommend everyone using it customises it to their preference, some users will add Smarty, others will leave it as it is, others will do other things with it.
@Joe, thanks for pointing that out!
I did say at the end of part 2, that we would look at design next, because while it isn’t PHP or technical, it is very important. Once the framework is built, you need to know how to use it from two angles – 1. from a code perspective, how to plug in features and build applications with it and 2. how to generate the front-end design (otherwise you have PHP which does nothing).
Part 4 will be back to PHP though
( )Jarryd November 24th
Nice to see this tutorial being continued. Been wanting to know how to do this properly for a while now, so cheers!
( )kaqfa November 24th
Hurray, Finnally after long time waiting this tutorial finally continued.
Excelent job guys….
( )Ajith Ekanayake November 24th
I was expecting more than this in part 3. Especially the Controllers and Models. Very short compared to previous ..
( )weblizzer November 24th
thanks, for this tutorial, i’ll be keeping to your next tutorials, hopefully you can do more….
( )Miles Johnson November 24th
@Michael Peacock – Perhaps it should be more like, part 2.5 :p
( )Ignas November 25th
I like this series, I’m waiting and waiting for the new parts of this
thanks mate!
( )sami November 25th
very nice series …
( )Piccolo Principe November 25th
IMHO you’re not writing a framework, you’re writing a cms..
( )T Pham November 25th
great! thank you very much for the tut. i like the series…
( )i’m so happy, thank again.
Pablo MOrales November 26th
I do not understand how a post that bad, can have as many good reviews
( )Legion Dave November 27th
I don’t understand why anyone would want to create their own framework except as a learning exercise. Zend, CI, Cake, Symphony, the list of existing PHP frameworks that are better designed and better supported is endless.
( )Ben July 30th
“those who understand how will always have a job, those who understand why will always be their boss”
( )Jesse Lesperance November 12th
Zend is a very heavy framework, CI is a horrible framework due to it staying compatible with PHP 4, Symphony has just never been a good framework, ever and Cake is good for small projects but nothing more.
There are 2 reasons to write your own framework, 1) to learn, though this is not one of the better examples of a good framework and to have a very light weight solution for your own small projects
( )kareem November 30th
this is wonderful topic …. i will put acopy of this topic on
( )my site here
http://www.as7ap4you.com
Lilspen December 1st
@Legion Dave:
I believe the point is for people to learn more about PHP.
If they know how to make their own, then they can fix/adapt/expand/etc. another framework of their choice.
Isn’t that what tutorials like this are for?
Or, it could be that people like having something they can call their own (I know I do).
Don’t you like the satisfaction of having a system/module/whatever that you built yourself, rather than being one of the people that is using the same thing everyone else is using?
As for this tut, I don’t need to learn HTML now, so I skipped through this part.
) was nice to read through (I wouldn’t do templates with such simple curly brackets though).
( )Although the previous 1 (Part 2, I got bored reading the first one.
p@trick December 3rd
great tut but is there no source or demo for this part?
( )praveen December 4th
Nice post,i should definitely check this out
( )Totti December 6th
So where is Part 4?
( )I read that the parts will come weekly but now there are 2 weeks since part 3 is released.
I can’t wait to read the Next Parts.
Eneza December 8th
Wow, Great Thanks for sharing every bits of codes in the series!
( )harleyflh75 December 9th
TROJAN ALERT.
( )the website that kareem says he will put a copy of on his site has a trojan virus. be aware.
j-nny December 15th
please when 4th part will be published?
( )D G December 15th
Any update on when Part 4 will be out?
( )Lilspen December 16th
Part 4 will be out on the day they decide, and have time, to release it.
Now that you know when it will be out, you can stop asking.
( )razz (from czech republic) December 31st
Very nice article, thanks. I’m OOP beginner and this really help me.
( )John January 15th
Hey guys, any news on Part 4 and the rest of the series? Its been short of two months since the last installment….
( )Milner08 January 18th
Any news on part 4?
( )Ben Nolan January 22nd
Hey is part 4 coming soon? o_0? cheers
( )dev January 23rd
I really like these tutorials, great work on ‘em! I’m really looking forward to seeing the rest.
( )Richard January 25th
Part 4 should be up soon; seems to have been lost in the system over Christmas!
( )Wayne Shears February 5th
Any update on when part 4 is coming yet?
( )Regenuluz February 6th
Hey hey,
Just wondering how much longer before part 4 shows up? =)
Cheers
( )Andrew February 7th
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.
Marc February 10th
It would be interesting to hear some news on part four
( )Anki February 10th
greate series, although it starts to seem like there wont be any part four
( )Alex February 12th
It certainly seems that there won’t be a part four. Maybe we should contact the creator of this tutorial?
( )B-Dock February 12th
I am really looking forward to Part 4 and 5. Maybe together?
( )nignog February 17th
Part 4 isn’t coming. Not now. Not ever.
( )Alassea February 18th
Nice series, I would really like to see part 4
( )phpProgrammer_class February 24th
I hope the part 4 and 5 of this wonderfull tutorial comes very soon, because I’m really looking forward to seeing the rest.
( )Gilciel February 26th
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.
( )KP February 27th
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?
( )kgray March 1st
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.
( )Anton Agestam March 3rd
I thought the main function of framework was to dynamically include content (?), will these be focused on in upcoming articles?
Peace.
( )Michael March 4th
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!
( )Nathan Payne July 11th
When will these be posted? I am loving the tutorials
( )KP March 6th
Cool
How do I use insertRecords()?
( )Raul Dolores March 10th
It’s a good introduction. I want start to develop a new framework
( )me March 11th
when will part 3 come?
( )Mighty Uhu March 12th
So will there be a part 4?
( )Angel March 15th
Looking forward to see part 4 and 5, keep them coming
( )joex March 19th
it’s nice, great…
( )Thks
koko adi March 22nd
Try YiiFramework or PRADO it’s simple and nice
( )Chris March 26th
I was wondering, what IDE do you use?
( )Nikko April 7th
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
( )Jelle April 7th
Really hope there will be a next part.
( )I’m now that far….
J April 7th
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.
( )kanzari April 14th
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
kanzari April 14th
are there a download link for part 3 ?
( )Alen April 20th
no
( )B-Dock May 2nd
Is there going to be a Part 4 or 5?
( )CgBaran Tuts May 5th
Great one thanks
( )Ron May 18th
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.
( )ron May 27th
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?
( )G May 28th
Would be nice if someone could inform about the rest of the series..
( )brian June 1st
Any info on the remaining articles? Thanks.
( )Jelle June 15th
Is it possible that the remaining articles are only available for Plus members?
( )Ionut Popa June 22nd
When will parts 4 and 5 be available?
( )leirags June 23rd
good job, i like this…
was very helfull…
( )Jules Manson July 8th
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.
( )Christian July 12th
Any news on the next part? It’s taking an awful amount of time…
( )Diogo October 1st
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!
( )Ross October 9th
Would really love to get part 4!
The previous parts have been a great help though!
( )djheru October 22nd
Has anybody ever seen a “roll your own php framework” tutorial series finished?
I haven’t
( )