PHP with CSS based Website Template Framework Origins I've been playing with various web technologies the past few months in an attempt to figure out what kind of site I want to setup. I know what I want to offer on the site and what content I want to provide, but I was not quite sure how to provide it. As a result I sat down and began to experiment with "template" based design patterns with PHP. What I am sharing now is what I have decided I will try to use to setup my site using these ideas as the core architecture. Intentions The intentions of this framework are as follows:

• Be able to customize the site's look with minimal file changes or effects on the files changed themselves. This is attempted to be accomplished through the use of CSS in "default.css" and the PHP in "template.php" files.
• Allow users to customize the presentation color and font style of the site for a more personalized experience when interacting with the site. This is attempted to be accomplished through the "default.css" and the "GetstyleSheet" function.
• Keep content separated from global presentation. I will define presentation in two forms, global and local. Global presentation is the overall look to how content is presented. An example would be the CSS colors associated with the style used and the physical page layout. Local presentation is more content specific in terms of how the specific content is stored and displayed in relation to to global presentation used. Choosing to store data in a database or a flat file, presenting data inside a table or form is "local presentation" in my terms.
• Maintain the flexibility associated with PHP present in the design so there are no limiting factors when using the framework. For example, this framework does not revolve around the use of "scripts" (in an application context, php files are naturally scripts themselves) which would limit how you could use PHP or HTML in the framework.

Non-Intentions Here are a few things that I do not intend to accomplishwith this framework or thread:

• To separate PHP from HTML. The purpose of this framework is not to separate the two but to keep them together. This leads into the next point.
• To make the site designing easier. The purpose of this framework is to make the site design more efficient and manageable. If you do not know PHP well then this framework would not aid you much over doing things another way using only HTML.
• To show that language X is better than language Y. The design decision to use PHP stems from my personal preference, web server constraints, and past knowledge of the language. If I knew another language Z well, then this system would have been done in that language instead. That is not to say these ideas could not be implemented in other languages, for it can.
• To take credit or claim ownership of the idea. Is this done already? Probably, but this is my representation of the idea using PHP. There are probably a lot of improvements that could be made as well, this is just a simple framework pushing an idea.
• To show something new or revolutionary. As with the last point, the goal is just to share perspectives, not innovate at this point.

Architecture The way the framework works is as follows: There are two common files that define the global presentation for the web site: "default.css" and "template.php". "template.php" maps out a simple web site using CSS. It is a fluid, 3 column, layout with a header and footer, nothing special. What makes it different from a regular layout is rather than define the content inside the html itself, a php function is dedicated for echoing the data in the proper place. For example, rather than have something like:

<title>Page Title</title>

the "template.php" file implements it as:

<title><?php GetPageTitle(); ?></title>

As a result, the "template.php" file servers as a template for any page that includes it. Each content page that includes it, in this example "index.php", would simply define the PHP functions that are called by "template.php". As a result, a lot of pages can be made that contain content and local presentation code while all global presentation code is kept in "template.php" and "default.css". What results is a framework that setups up a site to use one common theme or style while having the content separated. If the site design needs to change, only two files have to be updated to reflect a new site design, barring any additional changes made for support display files. If content or functionality needs to change, only the content pages themselves need to be changed with the site design and style remain unchanged. Selling Points The biggest question to answer now is "Why". Without getting into a long rambling rant, I will just bring up some points worth considering:

• This framework is a bare-bones framework. You will have to do a lot of work to make your site what you want it to be. This means the only limitations you have are up to you. By following the framework, you will be able to more efficiently manage your site when it comes to content and presentation.
• Using a framework like this, you can rapidly setup a new site by designing once and then plugging in the content. You will not have to modify template files with content and then be out of luck if you need to change the overall look for the site.
• At the end of each content page, it includes the default template, template.php. Likewise with the CSS file, you could customize pages to include a different template as needed so you can switch between different site templates per page as needed. If one page needs a three column layout and another page needs a one column, you could implement that.
• The 3 column layout with header and footer template is just to show the concept. You could easily add more "modules" if you need them to define the content of. if you follow the code and comments, it should be pretty self explanatory.
• The parts of your site that the contents stay the same or change very little can be combined into one file and included with the content pages to further make file changes limited and increase maintenance efficiency. (*)

(*) I.e. each page should not actually implement GetstyleSheet, GetPageTitle, GetHeader, or GetFooter for exmaple. If you defined those once in a "common.php" file and included that in each of the content files, you are keeping the content pages only contain the content that is relevant to the page. For the same of this thread, I threw all the code together into one file to show the concept. Making it more optimized for your needs is up to you though. Code Since I am actually working on my site right now, I do not have a static location for the code, so I will use PasteBin for now. default.css template.php index.php Preview This is just what you will see if you upload the page to your webserver currently. It is not much to look at, but if you copy and rename "index.php" to each of your content pages and filled in the pages, you can start to get the idea of what you can do with the framework. That's about it. This post was just to share some thoughts and designs, not to say it's better or worse than what's already out there. Hope someone can find it useful or offer some improvements/suggestions on the idea. [smile]

Well, you've certainly taken a unique approach to your framework. I'm not really going to comment on how you've done it, but here's what I'm doing for the site I'm working on:

To separate business logic from presentation I'm using the MVC pattern as implemented for the web. Basically, the models reflects a talble object in the database (say a user, or a static page in a CMS) or an environment data entity (like a user session). The view files are HTML templates with PHP calls to the model. The controller is just a class of methods that modifies the model and reflects those changes in the view.

For the view itself, I realized PHP was a perfectly fine language to use (as you've mentioned, you want to separate logic from presentation, not PHP from HTML , and that's the right thing to do). There's an excellent article here on how to do this. The technique described here is great for smaller applications. However, because I'm working on a large site, I'll be rewriting the templating system to make magic get calls to the model to fetch variable values should they exist.

Lastly, the models all extend an Active Record implementation, which thanks to Olu's suggestions, I will be phasing out of most of its duties. I've found that ORM doesn't really work all to well in PHP.

Maybe i missed something, but... you need Smarty

I've been working with it for about 2 years and really like it. I've organized my site on two levels: Smarty templates and decent use of CSS. So, you've got the actual webpage itself:

foo.php

This gives you the options to assign information to the template and to choose which template to use. So if you want the 1-column layout in some cases but the 2-column in others, you just assign a different template

foo.tpl

Then foo.tpl includes

global.css

(or whatever). If you markup your HTML in the templates with CSS-friendly design, you can use the CSS to not only decorate the page, but rearrange page elements with smart positioning by including a different CSS file. This lets you serve the exact same page with different looks, just in case you need that.

So i use different templates for radical layout changes and the CSS files for more minor user-specified changes.

You can break it down even further by creating sub-templates with Smarty. So your login box can be it's own template, your header it's own, your footer it's own, etc.

Works great.

Of course if you were just trying to create your own template system for fun, disregard everything i just said :-)

Quote:Original post by Drew_Benton
I've been playing with various web technologies the past few months in an attempt to figure out what kind of site I want to setup. I know what I want to offer on the site and what content I want to provide, but I was not quite sure how to provide it. As a result I sat down and began to experiment with "template" based design patterns with PHP. What I am sharing now is what I have decided I will try to use to setup my site using these ideas as the core architecture.

To get this straight: will you only use it for your personal website only, or do you intent to use this framework more frequently, say for paying customers?

Quote:Allow users to customize the presentation color and font style of the site for a more personalized experience when interacting with the site. This is attempted to be accomplished through the "default.css" and the "GetstyleSheet" function.

What kind of website are we talking about. I can see how MySpace users want to customize their personal profile (with horrific results), but who wants to change the color or font on an average website. GameDev supports multiple styles and it only takes a minute to switch from one to another, but I wouldn't want to go through the tedious process of changing fonts, background images or the color of the scrollbars just to get that "personalized experience".

Quote:Keep content separated from global presentation. I will define presentation in two forms, global and local. Global presentation is the overall look to how content is presented. An example would be the CSS colors associated with the style used and the physical page layout. Local presentation is more content specific in terms of how the specific content is stored and displayed in relation to to global presentation used. Choosing to store data in a database or a flat file, presenting data inside a table or form is "local presentation" in my terms.

What you seem to be describing is the cascading nature of CSS, and the way new style definitions can override the existing one.

Quote:Maintain the flexibility associated with PHP present in the design so there are no limiting factors when using the framework. For example, this framework does not revolve around the use of "scripts" (in an application context, php files are naturally scripts themselves) which would limit how you could use PHP or HTML in the framework.

I have trouble understanding what you're trying to get at here. In any good framework, design is separated from code: PHP would be responsible for communicating with the database or file system, and delivering content to the representation layer; CSS, XSL etc. would be responsible for the layout and design of the website.

Quote:To make the site designing easier. The purpose of this framework is to make the site design more efficient and manageable. If you do not know PHP well then this framework would not aid you much over doing things another way using only HTML.

Again, I'm not sure who your audience is. But in my experience, designers tend to be good at designing using tools like DreamWeaver and are hopefully familiar with CSS. Programmers are good using scripting language or T-SQL to program functionality. Unfortunately, it's very rare that both those talents are found in one and the same individual.

Quote:Is this done already?

To death. That doesn't mean your idea is bad, but I've seen these template based systems come and go, and most professionals end up choosing a common out of the box CMS, because inventing yet another system cost a lot of time (not just the initial development, but especially the redesign/extensions to accommodate new requirement put forth by clients), increases the risk of failure, and the investment will never be repaid. It has become a commodity, rather than a technology to set you apart as a developer/company.

Quote:There are two common files that define the global presentation for the web site: "default.css" and "template.php". "template.php" maps out a simple web site using CSS. It is a fluid, 3 column, layout with a header and footer, nothing special. What makes it different from a regular layout is rather than define the content inside the html itself, a php function is dedicated for echoing the data in the proper place. For example, rather than have something like:

<title>Page Title</title>

the "template.php" file implements it as:

<title><?php GetPageTitle(); ?></title>

As a result, the "template.php" file servers as a template for any page that includes it. Each content page that includes it, in this example "index.php", would simply define the PHP functions that are called by "template.php". As a result, a lot of pages can be made that contain content and local presentation code while all global presentation code is kept in "template.php" and "default.css".

Sure, but it's more interesting what GetPageTitle does. What if I want the title to be dynamic, representing the page's actual content? What if want more complex components? For instance a poll that can submit a user's choice and display results, an advertisement based on user preferences or location or a paged list of items that can be browsed and sorted? These are the kind of problems that creep up in any dynamic system.

Quote:What results is a framework that setups up a site to use one common theme or style while having the content separated. If the site design needs to change, only two files have to be updated to reflect a new site design, barring any additional changes made for support display files. If content or functionality needs to change, only the content pages themselves need to be changed with the site design and style remain unchanged.

Many websites have more than one layout. GameDev's home page is totally different from a forum thread, article or user's control panel. However, they have certain things in common. What you'll need to be thinking about is how to take advantage of their common functionality and style, while keeping it flexible enough to allow alternate designs.

Quote:This framework is a bare-bones framework. You will have to do a lot of work to make your site what you want it to be. This means the only limitations you have are up to you. By following the framework, you will be able to more efficiently manage your site when it comes to content and presentation.

But you still have to design it, and then try to fit in a framework, which still sounds like a lot of work to me. The ability to, once the website is 'live', quickly change a font style isn't really a real world problem. It doesn't happen that often, and it's easily done in CSS.

Quote:Using a framework like this, you can rapidly setup a new site by designing once and then plugging in the content. You will not have to modify template files with content and then be out of luck if you need to change the overall look for the site.

Changing the overall look of a website doesn't happen on a regular basis. And if you do, you don't design within a CMS, but in graphical program.

Quote:At the end of each content page, it includes the default template, template.php. Likewise with the CSS file, you could customize pages to include a different template as needed so you can switch between different site templates per page as needed. If one page needs a three column layout and another page needs a one column, you could implement that.

The 3 column layout with header and footer template is just to show the concept. You could easily add more "modules" if you need them to define the content of. if you follow the code and comments, it should be pretty self explanatory.

So you can have more layouts, ignore the comment I made somewhere else in this post then. [wink] It sounds like .NET's MasterPages concept then.

Quote:That's about it. This post was just to share some thoughts and designs, not to say it's better or worse than what's already out there. Hope someone can find it useful or offer some improvements/suggestions on the idea. [smile]

I realize by know I may have been a bit harsh. But I have seen so many systems like this before, all started with good intentions, but resulting in yet another content management framework. But please don't take my criticism as an attempt to stop you from developing your ideas. [smile]