10 October 2009

Portfolio: Alsafe

Alsafe was the first website I made in my career of web development. This was when I started my career on 12 Oct 2008. It was still procedural code, so nothing out of the ordinary. It has a cart-to-quote system.


08 October 2009

Using output buffering

I prefer to use output buffering. It's useful if you have a page which have a lot of dynamic content that needs to be processed or rendered. It prevents that the page loads in parts. It will allow that the output is sent all at once to the user's browser.

I start and end the buffering at the beginning and end of my layout script.

To start put ob_start() at the beginning. This function will turn output buffering on. While output buffering is active no output is sent from the script (other than headers), instead the output is stored in an internal buffer.

To end put ob_end_flush() at the end of the layout script. This function will send the contents of the topmost output buffer (if any) and turn this output buffer off.

There is also other function regarding output buffering available:

  • ob_get_contents() - Return the contents of the output buffer
  • ob_get_flush() - Flush the output buffer, return it as a string and turn off output buffering
  • ob_flush() - Flush (send) the output buffer
  • ob_end_clean() - Clean (erase) the output buffer and turn off output buffering

You can also gzip the output of the buffer. For that you have to call ob_start('ob_gzhandler'). But that should generate a warning as content is already being gzipped normally. To use this you have to turn off output compression in the php settings. Not recommended.

01 September 2009

jFlot jquery graphing

first screencast, hope it works (doubt it considering the software and mic i used). it's about jFlot, a jquery plugin to render graphs. quite neat (for me at least). video

24 July 2009

Portfolio: Ripsurance website

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.

Zendweaves portfolio ripsurance

Take care
Tjorriemorrie

23 July 2009

Text-decoration for CSS

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.

Zendweaves CSS text-decoration

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

22 July 2009

Here is an example of a Zend Form

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

21 July 2009

Using the CSS text-transform property

CSS has a text-transform property — I believe it's hugely underused.

Zendweaves CSS text-transform

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

20 July 2009

How to use Zend headLink and headScript

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() ?>

Very important!

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

17 July 2009

Portfolio: Aviya website

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.

ZendWeaves Aviya Portfolio

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

16 July 2009

The CSS line-height property and how it works

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:

ZendWeaves CSS Line-Height

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

15 July 2009

Adding a Layout to your Zend Application

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') ?> 




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.phtml

title ?>

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:

ZendWeaves Zend Layout

Take care!

Tjorriemorrie

14 July 2009

The CSS font-variant example

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:

Zendweaves font-variant

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

13 July 2009

The home page of a Zend application

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

10 July 2009

Set CSS font-style to your text

Font-style is basically just the style for making the font italic. There is by default three settings you can use:

  • normal
  • italic
  • oblique
Zendweaves font-style

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

09 July 2009

What is in the application.ini file?

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

08 July 2009

Start using the jQuery UI

JQuery UI

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):

1) Interactions

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

2) Widgets

  • Accordion
  • Datepicker
  • Dialog
  • Progressbar
  • Slider
  • Tabs

3) Effects

  • Effect
  • Show
  • Hide
  • Toggle
  • Color animation
  • Add class
  • Remove class
  • Toggle class
  • Switch class

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

07 July 2009

How to use CSS font-weight

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:

font-weight values displayed

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

06 July 2009

Bootstrapping the Zend Framework

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

03 July 2009

Start your javascript with jQuery's document ready

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

02 July 2009

More on CSS font sizes

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

01 July 2009

Looking at the public/index.php file of Zend

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

30 June 2009

Add the jquery library to your php zend website

Today we are going to look at how to add the jquery library to your website in the Zend Framework.

Firstly you need to download the jquery library here.

At the time of this writing the current release is v1.3.2 and the size is about 55.9KB

Save/move that file to your 'js' folder, .e.g. c:\wamp\www\MyProject\public\js\jquery.1.3.2.min.js

Next step is to add it to your layout. Currently I'm adding my external javascript and stylesheet in my layout page. The common place for this view script is in /MyProject/application/layouts/script/layout.phtml, although I use /MyProject/application/views/layouts/layout.phtml. Whichever you prefer ;)

In the head section of layout.phtml I have this code:

headScript()->prependFile($this->baseUrl() . '/js/jquery-1.3.2.min.js'); ?>
headScript() ?>
I used prependFile instead of appendFile as this is the library and should be loaded first in my opinion.

Now if you save that and preview your page, the source should include something like this:

Now you have the jQuery library attached and ready to use it's commands and associated plugins. More on that in future articles.

Take care!
Tjorriemorrie

29 June 2009

A look at CSS font-families

Font-families are the CSS style that define which font is used on your web pages. Here I quickly look at the fonts which is 'safe' for web development. Fonts are divided into a lot of categories, but for web development there is mainly four categories:
  • sans-serif
  • serif
  • script
  • monospace
For web development, there is mainly 8 safe fonts to use:
  1. Arial (and Arial Black)
  2. Comic Sans MS
  3. Courier New
  4. Georgia
  5. Impact
  6. Times New Roman
  7. Trebuchet MS
  8. Verdana
Now let's catgorise these safe fonts into the categories:
  • sans-serif: Arial (and Arial Black), Impact, Trebuchet MS, Verdana
  • serif: Georgia, Times New Roman
  • script: Comic Sans MS
  • monospace: Courier New
Now to make a family we start by using the most generic font specification. Let's make a sans-serif font-family:
  • Calibri, Verdana, Arial, sans-serif
The font-family is comma separated, meaning if the user doesn't have the left-most font on his computer, the next font in the list will be used. Normally a font-family consists of four fonts. As you can see, I used Calibri as the first choice; it's installed with MS Office 07 and most users will probably have the font installed on their system. If not, it will use Verdana and then Arial, which users will have 99% of the time, otherwise the system can choose any default font it want. And so it's easy to make font-families. Let's make a script one:
  • Lucida Handwriting, Comic Sans MS, script
Last note, remember to try to use sans-serif fonts for body text, as it is by far the easiest to read on a screen. You can be daring with serif, but I don't recommend script fonts. There you go! Tjorriemorrie

26 June 2009

Zend Quickstart Guide

Setting up and using the Zend Framework will definitely be something daunting to the first time user of Zend. And if you moved over from procedural to Object Oriented Programming [OOP] it will also be very confusing. This article covers setting up and running the Quickstart guide from the Zend’s website. Firstly, the Zend Framework is a library you use. Download it here. Secondly, you need to get the quickstart guide as well. That can be downloaded here. Let’s first set up our development environment. What you need to development locally on your machine, is a server, the PHP engine and a database. I’m sure most developers use Apache, MySql and PHP in one package. I use wampserver but there is also a xamp for a Mac. What I like about WampServer is that it installs everything for you and gives a you nice tray icon. Now you need to know where your root folder is. If you installed WampServer it will be c:\wamp\www which is equivalent to http://localhost/ in a browser. PHP files in the root folder will be processed by the server, but files outside of the root folder will not be touched by the server (Apache server using the PHP engine). Now let’s put the framework we downloaded in the root folder, e.g. c:\wamp\www\library\zend\ it should be about 18MB. Then extract the quickstart you downloaded and move that folder to the root as well, e.g. c:\wamp\www\ZendFrameworkQuickstart-20090430. Then open your IDE of choice and add the project directory, i.e. ZendFrameworkQuickstart-20090430, as the project folder. So everything is almost set up, so let’s get started running the application. Open public/index.php and preview the file in your browser. All projects start by running this file. However, you should be getting an Internal Server Error in your browser. That’s because of the .htaccess file in the public folder, which redirects requests. I’ll cover .htaccess in a later post, but for now realize that this rule in the
file: RewriteRule ^.*$ index.php [NC,L]
Makes use of Apache commands/functions. To fix this you need to open your httpd.conf file for Apache. It should be in your Apache folder otherwise search for it. You can open the file the quickest using wampserver’s tray icon and clicking on the filename under the Apache menu. With the file open, you are looking for this line:
LoadModule rewrite_module modules/mod_rewrite.so
There should be an # in front which you need to remove – this will uncomment the line and apache will read and use that command from now on. Restart your server's services. If you refresh the page it will remove the Internal Server Error, however, there should be a new error. The new error should be a PHP warning: Warning: require_once(Zend/Application.php) This is because the index.php file can't find the Zend Framework's library file. If you open the index.php file in the public folder you will see on lines 6-9 the following snippet:
set_include_path(implode(PATH_SEPARATOR, array(
  realpath(dirname(__FILE__) . '/../library'),
  get_include_path(),
)));
What you need to do is change the path to the library, which is one more folder further down. Change it to:
set_include_path(implode(PATH_SEPARATOR, array(
  realpath(dirname(__FILE__) . '/../../library'),
  get_include_path(),
)));
Running that should work. And that's it for this article. I highly recommend reading the quickstart guide on Zend's website. I'll be covering each portion of the set up in detail in future articles.