World Wide Web Programming 9 – Making Cleaner code and output
How to make cleaner code? One of the drawbacks of embedding HTML and PHP is that it makes code look a mess If we manage to avoid writing HTML in PHP we can have easier to read code As a drawback, is more complicated to implement…
What are we going to use? Templates!! The idea behind a template is to have pieces of HTML that will be inserted whenever we need them, replacing dome “variables” by whatever we need We will use the class FastTemplate
What do I need?
First download http://cs465.free.fr/files/class.FastTemplate.zip You could download any other template class, though I debugged the code for this one… Unzip it wherever you want (normally in your working folder, inside a folder called for example include/) Open the file and make sure the var $WIN32 equals true if you’re running windows, false if you’re running something else
How to use it? – PHP side First you’ll need to include the class by doing a include(“./include/class.FastTemplate .php”); Then you’ll need to use the proper functions (see later)
How to use it? – HTML side Basically create small parts of HTML that you may want to use Any part that you want to be “dynamic” you create a sort of variables that will be replaced by whatever you want To declare a variable use
• {([A-Z0-9_ ]+)} • Ex: {ITEM_1}
What functions to use?
To create a new template class use: • $tpl = new FastTemplate(“/path/to/templates”); • Use the path where you put your HTML templates
Then assign easier names to the files you’ll use with… • define( array( [key=>value], …)) • Ex: $tpl->define(array(mpage=>”mpage.pl”, mtable=>”mtable.pl”));
Replacing HTML variables
The assign method • assign(key, value) • ex: $tpl->assign(“ELEM”,$elem);
The parse method • • • •
Normal – parse(DESTINATION, Handle) Append – parse(MAIN, “.row”) Example: $tpl->parse(“T_OPTION”,”.motion”); Example2: $tpl->parse(“T_FILE”,”mfile”);
To output the content of a variable, do a FastPrint(HANDLE) • Needed to finish the page output… • Ex: $tpl->FastPrint();
3 files example
{F_OPTION}
{NAME}
How to make cleaner output? The first option would be to use the … to specify sizes, fonts, colors,… You can also use Style Sheets There are many ways to create a style for a page, but we will only look at the basics of creating a .css file and including it in your HTML
The CSS file
It is basically a file that defines categories of input that will have a specific look It is possible to define properties for the whole file, links, headers, or do your own… You will define a set of properties that will be applied to every element or “class” that you created Go to http://www.pageresource.com/dhtml/cssprops.ht m for a full reference of existent attributes The file should always start with
Ex: Making nicer links
A link is created by the A tag, so we will apply the style to the A tag, in its different states: link, visited, hover and active A:link { font-size: 12pt; font-weight: bold; text-decoration: none; color: 000000; } A:visited { font-size: 12pt; font-weight: bold; text-decoration: none; color: 000000;} A:hover { font-size: 12pt; font-weight: bold; text-decoration: none; color: red;} A:active { font-size: 12pt; font-weight: bold; text-decoration: underline; color: 000000;}
Using classes It is also possible to define a specific class that you may want to use throughout your HTML file (or PHP output) To define a class, instead of putting a specific tag just use . Followed by the name Ex: .myclass
Let’s build a style sheet
This style sheet will only define one single class that we’ll be using
How to link the file?
In order to apply your style to the file insert he following line in your … section
Of course, you must replace the content of the href with the path of your style
How do I apply my styles? You defined a style for a specific tag you only need to use that specific tag I you want to use a class you created, just use the DIV tag
…
Some useful programs
If you manage to get it (I mean buy it), you could install Macromedia HomeSite+ which is an excellent tool for html, JavaScript and PHP (a sort of UltraEdit, but specifically designed for web applications) When installing HomeSite+ you get the chance to also install TopStyle which will help making better styles much faster
Home Work 4 Now that you know how to use templates and styles, apply all that you learned to your homework 3a That means
• NO TAGS • NO background properties in the tag • NOT A SINGLE HTML TAG IN YOUR PHP
