How Do You Create a Reusable Easily Maintainable Web Template From Scratch?

accelerator · Apr 3, 2016

Hi Guys

This is a coding question to go along with my other post. I just want comments on the type of coding techniques to use. You need to create a reusable, easily maintainable web template from scratch. So, what techniques do you employ? It's a general question, looking forward to the answers.

Thanks

spiderspider · Apr 3, 2016

accelerator said:
So, what techniques do you employ?

Freelancer, People Per Hour, Elance, Odesk etc etc

Skinner · Apr 3, 2016

I would probably agree with SS above, perhaps would be easier to have a few people do the "grunt" work, then you stylise it. Perhaps @gregfindley for a design, some of his stuff is nice and clean, and then the code done by ^^ and then you can tinker and learn their system and extend it.

Otherwise the learning curve, from includes to full template will be akin to a brick wall with a 2 degree lean.

The option to still use includes still exists, if you make your "template" and then just use module includes to fill in the blanks. Put as much static / layout in header and footer, then use includes for unique blocks, to keep your index.php and other pages clean.

You could further this, by putting a switch in, called by index.php?about then use mod_rewrite to rewrite index.php?about to about.php, so it were all contained in a simple single file.

Not truly a template system, but an easy step. Anything else, and your asking for a world of pain and just need to dig deep.

header.inc.php

PHP:

<html><head><title><?=$title;?></title></head><body>

index.php

PHP:

<? 
//pull from database 
$title = $page['title']; // you could put $page['title'] direct into the header.inc.php.
//$page is also the array returned from the above database call.

include('./header.inc.php');
page layout
include('./footer.inc.php');
?>

footer.inc.php

PHP:

<div><?=$boiler;?></body></html>

The above were typed on the fly so maybe some typos

p.s. Maybe ask RobM if you can buy one of his old systems, maybe not wanting to sell his current work but maybe he has an old site/domain he'll sell you

stellar73 · Apr 4, 2016

I use Desktop Server (WordPress local development which you install on your PC). Have the premium version which I believe cost me around £80 for the year though I've since realised I could probably accomplish most of what I need to with the free version as there are workarounds - there is an excellent course on how to use it on Udemy (search for "desktopserver" all one word).....you can teach yourself how to use it in a couple of hours.....Essentially I use it to create blueprints which I can deploy to a live server in a matter of minutes - A "blueprint" would be a theme I've already set up with all the plugins I need already activated, any code snippets added, dummy content added, css tweaked, permalinks and admin / editor user accounts set up correctly etc....

monaghan · Apr 4, 2016

If you use an existing template system (Smarty, Twig are just a few) you can code your layouts and then write yourself a data wrapper to pull the desired data to make up the page content from databases / API calls / local files. You can then apply a little business logic to the main wrapper to collect a series of templates (header / footer / menu / body structure / optional sidebars / adverts and so on) together to make the desired page output based on the page requested and / or data collected.

As to how to do this or which is best library, then the answer is along the lines of how long is a piece of string.

If you want something completely bespoke and lean then writing the individual functions yourself is the only route, if you are happy to have some redundant code, then just write your own logic around 3rd party libraries. If you are not a proficient coder, then possibly the popular 3rd party libraries even with the additional unused functionality may be more efficient than your own code.

What is the motivation for this? If it is educational, then you can learn a lot by starting from scratch, take a look for tutorials on MVC. If it is to save time / resource, then in my opinion, you could spend tens of hours reinventing the wheel when there are shed loads of systems you could just theme.

accelerator · Apr 5, 2016

Thanks for your detailed reply Monaghan. The motivation is educational, plus if I could work it all out then it would be pretty handy for maintaining large sites.

I guess I was after a quick answer on the "how" it is done, and your answer is a good explanation. It was the "how" the structural page elements were made into a template that I wasn't sure of, but your answer makes sense.

tifosi · Apr 5, 2016

Depends on what or if there's a platform for them to be used on. A WordPress template has a particular structure and set of base files depending on whether it's a page, post, or archive etc. The template is then broken down into header, footer, functions, content...

A template for a MVC framework such as codeigniter would be handled differently as the main grunt work is in the framework and the templates are more views - displays of content.

A standalone template built around html/css/js and a dev language such as PHP/MySQL would be somewhere in between.

For PHP there's a range of templating constructs such as smarty, though I don't use them. PHP is a templating language in itself using the alternate syntax. No need for overhead.

No simple answer to this. Context based really.

S

monaghan · Apr 5, 2016

accelerator said:
I guess I was after a quick answer on the "how" it is done, and your answer is a good explanation. It was the "how" the structural page elements were made into a template that I wasn't sure of, but your answer makes sense.

The "how" depends on how you want to do it

Simplest way to do it is to pull data from the desired datasource, assuming you have this in an array called $data, then build a simple bit of HTML such as

Code:

<head>
<-- All your CSS / JS includes here -->
<title><php echo $data['page_title']</php></title>
</head>
<body>
<h1><php echo $data['heading']</php></h1>
<p><php echo $data['page_body']</php></p>
</body>

You can then expand this by including common sections of the page from different files using

Code:

<php> include "header.html" </php>
<php> include "page_menu.html" </php>
<php> include "footer.html" </php>

By wrapping these in some logic such as

Code:

<php> if ($data['is_frontpage'] == 'no')
{
include "sub_menu.html";
}
</php>
<php> if ($data['requires_advert'] == 'yes')
{
include "adwords.html";
}
</php>