I've made a new website for myself and everyone that wants to use it — Ripsurance. It is a very cool idea about how you can save money on household insurance. I still need to implement graphs, etc. Currently it's not getting any hits, but I'm not actively improving it at the moment either.
Anyway, I thought the spiral design was cool — especially since I'm not a designer.
Take care
Tjorriemorrie
CSS Text-decoration is not often used in content. My, myself and I do not use it much. At most I'll underline links and such. Never use blink, nuf said.
Here's the spec:
'text-decoration'
Value: none | [ underline || overline || line-through || blink ] |
inherit
Initial: none
Applies to: all elements
Inherited: no (see prose)
Percentages: N/A
Media: visual
Computed value: as specified
This property describes decorations that are added to the text of an element using the
element's color. When specified on an inline element, it affects all the boxes generated
by that element; for all other elements, the decorations are propagated to an anonymous
inline box that wraps all the in-flow inline children of the element, and to any block-
level in-flow descendants. It is not, however, further propagated to floating and
absolutely positioned descendants, nor to the contents of 'inline-table' and 'inline-
block' descendants.
Underlines, overlines, and line-throughs are applied only to text (including white space,
letter spacing, and word spacing): margins, borders, and padding are skipped. If an
element contains no text, user agents must refrain from rendering these text decorations
on the element. For example, images will not be underlined.
The 'text-decoration' property on descendant elements cannot have any effect on the
decoration of the ancestor. In determining the position of and thickness of text
decoration lines, user agents may consider the font sizes of and dominant baselines of
descendants, but must use the same baseline and thickness on each line. Relatively
positioning a descendant moves all text decorations affecting it along with the
descendant's text; it does not affect calculation of the decoration's initial position on
that line.
Values have the following meanings:
none
Produces no text decoration.
underline
Each line of text is underlined.
overline
Each line of text has a line above it.
line-through
Each line of text has a line through the middle.
blink
Text blinks (alternates between visible and invisible)
There's not much more to say. All I can think of is to use line-through instead of the 'del' tag.
Take care
Tjorriemorrie
Let's make a Zend form for our contact page. I will finish the controller and mail functionality in a later post:
application/forms/contact.php
class Form_Contact extends Zend_Form
{
public function init()
{
$hash = new Zend_Form_Element_Hash('hash');
$hash->setSalt('zendweaves');
$name = new Zend_Form_Element_Text('name');
$name->setLabel('Name:')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addValidator('NotEmpty', true)
->addValidator('Alpha', true, true);
$subject = new Zend_Form_Element_Text('subject');
$subject->setLabel('Subject:')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addValidator('NotEmpty', true)
->addValidator('Alnum', true, true);
$email = new Zend_Form_Element_Text('email');
$email->setLabel('Email:')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addValidator('NotEmpty', true)
->addValidator('EmailAddress', true);
$message = new Zend_Form_Element_Textarea('message');
$message->setLabel('Message:')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addValidator('NotEmpty', true);
$submit = new Zend_Form_Element_Submit('submit');
$submit->setLabel('Submit')
->removeDecorator('Label');
$cancel = new Zend_Form_Element_Submit('cancel');
$cancel->setLabel('Cancel')
->removeDecorator('Label');
$this->addElements(array($hash, $name, $email, $subject, $message, $submit, $cancel))
->setName('contactForm')
->setMethod('post')
->setDecorators(array(
array('Description'),
array('FormElements'),
array('HtmlTag', array('tag' => 'dl')),
array('Form')
))
;
}
}
You have to use Form_Zend as that is the namespace Zend uses. And what we have set in our autoloader. It extends Zend_Form (no suprise there). The function starts with init() and must be public.
My form has 7 elements. The hash element is for cross site request forgery (csrf) — I'll cover that in a later article. The rest is your expected elements — I'll also cover the filters and validators in a later article. What we did was to create each element seperately, at the end we added all the elements to the form. There we also set the name (or id) of the form, it's method and decorators. I use the default decorators and just style it appropriately with CSS. The only reason I set the decorators again is to give the form a description which I use for status messages after submits.
Take care
Tjorriemorrie
CSS has a text-transform property — I believe it's hugely underused.
Text-transform will be best used where you wish to capitalize headings. All lowercase for footnotes and such. Capitalize is also useful, but the drawback is that it doesn't lowercase non-first letters.
Here's the spec:
'text-transform'
Value: capitalize | uppercase | lowercase | none | inherit
Initial: none
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
This property controls capitalization effects of an element's text. Values have the following meanings:
capitalize
Puts the first character of each word in uppercase; other characters are unaffected.
uppercase
Puts all characters of each word in uppercase.
lowercase
Puts all characters of each word in lowercase.
none
No capitalization effects.
Take care
Tjorriemorrie
Zend has a very nice feature in that you can add your stylesheets and javascripts to your layout. I normally always load a few of these sheets and scripts for every website. The downside is that the user needs to make a lot more requests to the server, but other than that it really improves coding time and reusability.
Let's look at stylesheets first. Adding javascripts will be the same method. To include a stylesheet in the layout, you would add the following in the head tag:
/application/views/layouts/layout.phtml
headLink()->appendStylesheet($this->baseUrl() . '/css/global.css')
->headLink()->prependStylesheet($this->baseUrl() . '/css/resets.css')
?>
headLink() ?>
That will add the stylesheet to your page. Note how I've used prepend for the rest css file, and append for my global css file — that way my resets will be placed above other appended stylesheets. Normally it loads in the order in which it is added.
That's all well and good, but let's there's another method which I prefer. And that is to load your CSS stylesheets form the bootstrap file. You can in your bootstrap also add the files like so:
/application/Bootstrap.php (function not complete)
function _initView()
{
$view->headLink()->prependStylesheet('css/resets.css')
->headLink()->appendStylesheet('css/global.css')
->headLink()->appendStylesheet('css/forms.css')
->headLink()->appendStylesheet('css/pages.css');
}
Why I prefer this method is because you reduce your layout file. All that is now left in the layout file is:
/application/views/layouts/layout.phtml headLink() ?>
Take a look at the first headLink example at top. Note how I add the CSS stylesheets to the Zend layout with a headLink()->etc for all your stylesheets it will add the current one and echo all the stylesheets that has been added to the headLink before as well. This leads to CSS stylesheets being added multiple times, instead of being linked once. Remember to set your headLink and once all are linked then echo it.
Javascripts works the same way, but it uses headScript instead. I'm just going to give the bootstrap way of how I attach my javascripts. I'm sure you can figure out how to use and implement it yourself.
/application/Bootstrap.php (function not complete)
function _initView()
{
$view->headScript()->prependFile('js/jquery-1.3.2.min.js')
->headScript()->appendFile('js/jquery-ui-1.7.min.js')
->headScript()->appendFile('js/jquery.easing.1.3.js')
->headScript()->appendFile('js/docready.js');
}
As you can see I link my jQuery javscript and just echo it in the layout file like so:
/application/views/layouts/layout.phtml headScript() ?>
My docready is the file I use to start my scripts once the document is loaded, i.e. that file contains the $(function() {}); function and others as well.
Take care!
Tjorriemorrie
I've created a site a year or so back — Aviya. It was my very first site. Since then it has come a long way.
I first made the site with procedural coding, and early this year when I started learning OOP did I move it over to Zend. I'm almost busy everyday updating and tweaking the site.
The site has a contact form. On the backend Aviya can upload poems and blog articles. I also generate my own xml rss feed for people that want to subscribe. I also save the message of the contact us page to a database. I recently also added a albums and tracks database. So the lyrics and album description on the albums page pulls from a database. The navigation uses sprites, and the hovering notes uses jquery which I coded myself. I like the random movements of the notes.
First website for my portfolio, designed and coded by me.
Take care!
Tjorriemorrie
CSS has a line-height property for fonts. I normally use 1.4em for the line-height, as the text sometimes cross at 1em.
Here is a demonstration of the line-height in use:
First obvious think you'll notice is that line-height only works on block elements and not on inline elements. Secondly, you'll notice that as the font size was set at 10px, the last paragraph at 2em, it's height is 20px. Thus, CSS line-height will vertically center the text automatically for you, which is what I prefer over all the hacks people make to vertically center text.
I find CSS line-height very useful and always set it in my sites. Normally I use 1.4 and sometimes 1.2. Where text won't wrap I might use 1em. By the way, the values can't be negative. If you make the value negative it will default to the normal value. From my testing I don't think incorrect line-height elements will default to the inherit value. Here's the spec:
'line-height'
Value: normal | | | | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: refer to the font size of the element itself
Media: visual
Computed value: for and the absolute value; otherwise as specified
On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").
On an inline-level element, 'line-height' specifies the height that is used in the calculation of the line box height (except for inline replaced elements, where the height of the box is given by the 'height' property).
Values for this property have the following meanings:
normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
The specified length is used in the calculation of the line box height. Negative values are illegal.
The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
Take care!
Tjorriemorrie
Using a layout in Zend is called a two step view. That's because it has a view for the layout file and a view for the content specific to the url request. How do we add a layout to our Zend application? Easy. Firstly, we need to add it to our application.ini to ensure that it is loaded by Zend_Application.
/application/configs/application.ini resources.layout.layoutPath = APPLICATION_PATH "/views/layouts" resources.layout.layout = "layout"
This basically sets up the path and filename for the layout file. Note that some people would use APPLICATION_PATH "/layouts/scripts" as the layout's path, but I like it more in my views directory. Personal preference.
Next step is to make the layout file. But first there is something you can do to enhance your layout file. That is to set some default values in the bootstrap file. Let's look at that first.
/application/Bootstrap.php
function _initViewHelpers()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$view->doctype('XHTML1_STRICT');
$view->addHelperPath(APPLICATION_PATH . '/views/helpers', 'Zend_View_Helper');
}
All that you need to be concerned about there is the two settings we give to Zend's view. the ->doctype and ->helperPath. The doctype will be automatically generated by Zend, and the helperPath informs Zend where to look for helpers you are using for Zend's view. But I won't be covering view helpers in this article.
Now we can look at the layout file.
/application/views/layout/layout.phtml doctype() ?>headTitle($this->title) ?> headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8') ?> The header here
layout()->content ?>
The very first line pulls in the doctype declared in the bootstrap file, and the only other thing you should be looking at is the layout()->content ?> which is where the content from the request will be put in. So let's quickly make the content for the home page and then I'll explain some more.
/application/controllers/IndexController.php
class IndexController extends Zend_Controller_Action
{
public function indexAction()
{
$this->view->title = 'The title of the page here';
}
}
All it does is that it assigns a variable called 'title' to the Zend's view with a value which is a string. Next let's look at the view script for this action.
/application/views/index/index.phtmltitle ?>
and other content
Here we use echo out the value of the variable 'title', which we assigned to it in the controller. Viewing our application with a layout the page looks like this:
Take care!
Tjorriemorrie
Font-variant is very rarely used. I have never used it myself. What it does is that it select the small-caps variant of the font specified. In effect it makes everything uppercase but it's at the same height as a normal letter. For example:
I think it's best used as heading in the sidebar, etc. Here's the spec:
Value: normal | small-caps | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual Computed value: as specified Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font. A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS 2.1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.
Take care!
Tjorriemorrie
We are quickly going to look at getting your first page up. If you have set up quickstart guide you will already have your first page correctly set up.
The Zend Framework Quickstart guide really gives an excellent explanation of this:
Model-View-Controller So what exactly is this MVC pattern everyone keeps talking about, and why should you care? MVC is much more than just a three-letter acronym (TLA) that you can whip out anytime you want to sound smart; it has become something of a standard in the design of modern web applications. And for good reason. Most web application code falls under one of the following three categories: presentation, business logic, and data access. The MVC pattern models this separation of concerns well. The end result is that your presentation code can be consolidated in one part of your application with your business logic in another and your data access code in yet another. Many developers have found this well-defined separation indispensable for keeping their code organized, especially when more than one developer is working on the same application.
and for the action controllers:
Your application's action controllers contain your application workflow, and do the work of mapping your requests to the appropriate models and views. An action controller should have one or more methods ending in "Action"; these methods may then be requested via the web. By default, Zend Framework URLs follow the schema /controller/action, where "controller" maps to the action controller name (minus the "Controller" suffix) and "action" maps to an action method (minus the "Action" suffix). Typically, you always need an IndexController, which is a fallback controller and which also serves the home page of the site, and an ErrorController, which is used to indicate things such as HTTP 404 errors (controller or action not found) and HTTP 500 errors (application errors).
The default IndexController is as follows:
// application/controllers/IndexController.php
class IndexController extends Zend_Controller_Action
{
public function init()
{
/* Initialize action controller here */
}
public function indexAction()
{
// action body
}
}
For the view:
Views in Zend Framework are written in plain old PHP. View scripts are placed in application/views/scripts/, where they are further categorized using the controller names. In our case, we have an IndexController and an ErrorController, and thus we have corrsponding index/ and error/ subdirectories within our view scripts directory. Within these subdirectories, you will then find and create view scripts that correspond to each controller action exposed; in the default case, we thus have the view scripts index/index.phtml and error/error.phtml. View scripts may contain any markup you want, and use the closing tag to insert PHP directives.
Take care!
Tjorriemorrie
Font-style is basically just the style for making the font italic. There is by default three settings you can use:
There is not much difference between italic or oblique. Both look the same. I think it's mainly there for classification. Anyway, here's the spec for font-style as by w3c:
'font-style'
Value: normal | italic | oblique | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.
A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.
The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.
Take care
Tjorriemorrie
The application.ini file is like the global variables for a Zend website. It holds the settings your application will use. It is a good practice not to use globals on a website, so instead we use a registry. The purpose of the application.ini file is to save the configuration of your website, e.g. the database parameters.
The advantage of using Zend_Application is that it will automatically load the settings from your application.ini file into the application. There is basically three 'resources' that the application will load, i.e. the layout, db and frontcontroller.
Another advantage of the application.ini file is that you can set the specific settings you want to use for each environment of the application. You can use local mysql settings when you develop locally on your machine, and use the mysql settings for the server's database when it goes into testing or production.
If you want to save the application.ini to your registry, you can do that in the bootstrap file. Here is an example if you want to save the settings to the registry:
public static function _initRegistry()
{
$configuration = new Zend_Config_Ini(APPLICATION_PATH . '/configs/application.ini', APPLICATION_ENV);
$registry = Zend_Registry::getInstance();
$registry->configuration = $configuration;
}Tadaa! Now you can call settings from your registry what you would want to use in your application — and it can be environment specific, e.g. I use different email addresses for the contact form dependant if it's in development or not.
So, we know we can set up a ini file which contains settings, and we can save that into the registry to make it globally available to the application. Now let's look at the application.ini file itself. The file is normally saved under Application/configs/application.ini:
[production] phpSettings.date.timezone = "YourContinent/YourCity" phpSettings.display_startup_errors = 0 phpSettings.display_errors = 0 includePaths.library = APPLICATION_PATH "/library" bootstrap.path = APPLICATION_PATH "/Bootstrap.php" bootstrap.class = "Bootstrap" resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers" resources.layout.layoutPath = APPLICATION_PATH "/views/layouts" resources.layout.layout = "layout" resources.db.adapter = PDO_MYSQL resources.db.params.host = dedicatedDbOnServer.net resources.db.params.username = serverUser resources.db.params.password = serverPwd resources.db.params.dbname = myAppDb emailName = officialName emailAdd = official@address.com [testing : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 [development : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 resources.db.params.host = localhost resources.db.params.username = root resources.db.params.password = root resources.db.params.dbname = localDb emailName = testingName emailAdd = testing@address.com
As you can see, you will display errors while in development and testing, and not in production. You will also use your local mysql while in development. The file also stipulates to use a layout template if you use a 2-step view. Very nice. I like ;)
There are much more you can set in the ini file, but the above is normally enough for me.
Take care!
Tjorriemorrie
I highly recommended everyone using jQuery to use the jQuery UI. You can go to their homepage and download the file here. The current version is 1.7.2 which is the stable version.
I attach that file every time I make a website, even if I don't use the features. Yes, not the best of practices, but I use it almost on every website.
The jQuery UI are divided into 3 parts (mainly):
I will be covering these in more depth in the future, but for now you should really start using it if you don't already. Especially once you get to the themes, you will be impressed.
Take care Tjorriemorrie
Font-weight is what makes text bold. Firstly, let's make it clear that's it's easier to style the elements in the external stylesheet than to do the styling inline. You can use 'b' tag to make elements bold by wrapping it around the text, although it's recommended now to rather use 'strong' tags instead. I don't use any of those two.
Let's quickly look at the standard options. There's normal, bold, bolder, lighter and then values from 100 to 900. Here's an image with those values set:
As you can see, I clearly don't understand what you'll use bolder and lighter for. For that matter, since only normal and bold is left, I also don't understand what the values are worth, since from 600 it's bold and before that it's normal.
I make a class
.bold {font-weight:bold}
in my css file and just add that class to words or tags that I want to make bold. Works best for me.
Take care! Tjorriemorrie
Zend_Application will automatically bootstrap the file, but that doesn't mean we can't go and put in our own little code there.
The bootstrap file is now a class. It extends Zend_Application_Bootstrap_Bootstrap. To run a method within the file upon bootstrap, the function must start with _init, e.g.
function _initViewHelpers()
As Zend_Application will load the settings from the application.ini file itself, the bootstrap can actually be empty when you start your project, although it must still exist.
My bootstrap file contains the following snippet:
protected function _initAutoload()
{
$autoloader = new Zend_Application_Module_Autoloader(array(
'namespace' => '',
'basePath' => APPLICATION_PATH,
));
return $autoloader;
}
function _initViewHelpers()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$view->doctype('XHTML1_STRICT');
$view->addHelperPath(APPLICATION_PATH . '/views/helpers', 'Zend_View_Helper');
}
The autoloader removes the default module, meaning the namespace is removed and my models, etc, don't require a Default_Model_Example but is instead Model_Example.
The viewhelper basically sets the layout and the doctype, as well as the viewhelper path, as that is not picked up by default by Zend_Application.
There is much more you can do in the bootstrap, i.e. some people set their timezone in the bootstrap, but that's all for now.
Take care!
Tjorriemorrie
jQuery has a nice feature. When a browser loads a page, the elements aren't available to the page until it's been loaded by the browser. This means that when you run a javascript script, it won't execute if the element isn't already loaded.
A way to ensure that everything has loaded is to use the onload attribute on the body tag. The problem with this is that it has to wait until it has loaded all the images and everything else as well, which means no script will execute until everything is loaded — which takes too long.
But John Resig has come up with a very nice feature:
$('document').ready(function()
{
// your code here
});
This is an excellent little bugger to use, as it waits until the document elements are loaded, and then executes. It doesn't wait for all the images to load. This means your code will execute much faster!
A short way of coding it is:
$(function() {
// your code here
});
I normally attach a javascript file to my document the same way I attach my jQuery library file, and thus I don't need any script tags in my layout template.
Take care
Tjorriemorrie
Font sizes plays a huge role in every website. Because minimalistic sites are still popular, it shows how typography is more than powerful than you would think.
The most common font sizes being used are: 9, 10, 12, 14, 16, 18, 24, 36. These are normally in pixels. Other formats available are: pt, in, cm, mm, pc, em, ex and %.
But that's not where it ends. You can also use a relative value: 'smaller' or 'larger'. This will make the font about 25% smaller or bigger.
Furthermore, there is still more options for values you can use: xx-small, x-small, small, medium, large, x-large, xx-large.
Take care! Tjorriemorrie
Because Zend uses a htaccess file that redirects requests to the index.php file, it is actually the most important file in your application. Luckily, it's also extremely easy to set up because of Zend_Application.
First thing we tell the index file is where is our library. Yay. That big pile of 17.9MB that you need to upload everytime to each client's server:
set_include_path(implode(PATH_SEPARATOR, array(
realpath(dirname(__FILE__) . '/../../../library'),
get_include_path(),
)));
You can include other directories as well if you want — it's basically a comma-separated list of include paths.
Then we define a constant or two. It's important to define your application path, as zend will then refer to your file and structure relatively to that path:
defined('PUBLIC_PATH')
|| define('PUBLIC_PATH', realpath(dirname(__FILE__)));
defined('APPLICATION_PATH')
|| define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../appcharacter'));
defined('APPLICATION_ENV')
|| define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));
As you can see, I also defined the public path, which makes it easier for me to give the path to the uploads directory when users upload their own files/images. We also define the application environment if it is not already defined. As of Zend v1.8 it is now preferred to define it in the htaccess file.
Now we run Zend_Application:
/** Zend_Application */
require_once 'Zend/Application.php';
// Create application, bootstrap, and run
$application = new Zend_Application(
APPLICATION_ENV,
APPLICATION_PATH . '/configs/application.ini'
);
$application->bootstrap();
$application->run();
You can see that Zend_Application is very handy. You require the file once, then you tell the application in which environment you are and then give it the configuration of your application. Because it has the environment you're working in, it pulls the correct info from the application.ini file.
All you need to do is to bootstrap it and run it. And your application is up and away, hehe. Hope this helps, will cover other features in future articles.
Take care!
Tjorriemorrie
