Book Review of Professional Codeigniter - Wrox Publishing

Author: Thomas Myer
First Published: 2008
Pages: 314
Purchased From: amazon.co.uk
ISBN: 978-0470282458
Skill Level: Intermediate to Advanced
Categories: PHP, PHP Frameworks, Programming, Technical

Reason for purchasing book:
I had been playing around with my own MVC design pattern in PHP for a while and decided that it was time to learn a framework. After looking at the various ones out there, I decided that codeigniter would be the [first] one for me. I chose 'Professional Codeigniter' as the title suggests (and having bought other Wrox Books) that it is aimed at people who have moved past being a 'Beginner'.

Initial Thoughts
The book starts off with a little introduction about the author and many of the other things that you would normally find at the beginning of a book.

He also explains in detail why he started using the framework in the first place. This was very much welcomed as you can see that Thomas Myer was indeed a programmer who had a real need for using the framework, rather than just being another author who saw an opportunity to make some money from creating a book.

Structure
One of the stand out features of this book is the way the order of each section is delivered to you. First we have an introduction to the world of MVC and why it is such a great design pattern. For those who have never used the MVC, this section is a great introduction, is written well and will bring many a coder up to speed in a short amount of time. This is mainly achieved by looking at older coding styles and how they lack structure of a real design pattern. He also looks at other PHP frameworks so that you understand how each one works and why Codeigniter is such a good choice. We then get on to the main part of the site and how to build a website (specifically an ecommerce website) using Codeigniter and it does this very well, taking you from the early stages right of concept creation and customer meetings right through to the delivery.

Technical Considerations
Part of modern web design and development now focuses on an Agile Methodology, whereby software is created in small manageable sections using teams. This section is also explained very well, so if this concept is something that is new to you or you need certain points clarifying.

Something else I should point out is that this book really could be split in to three separate sections. From chapters 1-4 you are giving a great deal information on how to use Codeigniter to create a website and how to get it working. Chapters 5-8 are more along the lines of adding the ecommerce sections and finally chapters 9 and 10 on how to secure and launch the site. For me the stand out chapter was chapter 3 and in its own right would serve as a great reference.

I do have slight problem with this book and that is the lack of content on Codeigniter's form validation. When you create a website, especially an e-commerce website, you create many, many forms. These forms, especially when dealing with commerce is extremely important and the data that you collect has to be absolutely spot on. I understand that the scenarios in the book may have not required the use of the Form Validation class to be used to the level, but I do feel these methods should have been addressed.

He does use the form validator but not to the extent that uses the rules and data filters. Instead I found myself turning to the web and using online guides to help me with this. One thing I add though, is that like many open source frameworks, Codeigniter moves at a very swift pace and the libraries that are available now may be very different to the ones that were used when the book was written, so for that reason I will give the author the benefit of the doubt.

Final Thoughts

Overall, a fantastic book. You will not be disappointed with this title and you will definitely be able to use Codeigniter fluently by the time you have finished with it. Like I mentioned the only problem is the lack of depth in the form validation class, but these pages will fill in any gaps:

http://codeigniter.com/user_guide/libraries/form_validation.html
http://www.packtpub.com/article/form-validation-with-codeigniter-1.7

Score: 4.5 out of 5 - Highly Recommeded

Essential Techniques For E-shot creation for designers and developers

For all you web developers out there, E-shot design may seem like a little bit of a hindrance. It's not what you describe as a fundamental skill to master, but it's something that many of us have to do time and again when you work with, or for a design agency. This is primarily down to you having to turn back time when it comes to your web design skills.

I drew up this set of guidelines as I was commissioned to draw up a fully functional e-shot for a company that specialises in website design Bury called Fluid Digital before they took on their own professional developers. Fluid Digital provide some great e-shot services including design, production and delivery, so be sure to look them up.

Modern positioning and styling techniques center around the following structure:

element/CSS reference model which keeps content and layout separate, for example:

<div id="myElement">My Content</div>

With an accompanying reference in your CSS stylesheet:

#myElement {
display: block;
float: left;
}

That is fine for modern browsers, but when you start creating E-shots, you cannot use this method. No, you have to go 'old-school' and I do mean old school- no element backgrounds, minimal style sheet settings (when you can use them, they have to appear inline with the element). The main reason for going 'old-skool' is because you have to accommodate a number of email clients that all have their own way of doing things. Unfortunately the two most dominant email clients - Microsoft Outlook 2007 and Microsoft Outlook 2010, also have the most restrictions. Microsoft Outlook 2003 is a little more leniant as it used the IE engine to render HTML rather than Microsoft Word.

Designing your eshots can be tricky and I hope to take you through the majority of sticky points in the points below:

Section Layout

Like I mentioned above, you cannot use element/CSS to design your pages. In the case of e-shots, you need to go back to the ways of old and use tables to design your layout. In modern web design, when you go to lay out an element like a <div> you would simple add a background, define the width and how the element is positioned in using CSS. Let's compare the two methods.

The HTML/CSS way

#wrapper {
width:655px;
margin: 0 auto;
}

#column1 {
background-image: url('url/reference');
width: 459px;
float: left;
}

#column2 {
background-image: url('url/reference');
width: 196px;
float: left;
}

#footer {
clear:both;
}

Used in a page, they would look like this:

<div id="wrapper">
<div id="column1">Left Hand Side</div>
<div id="column2">Right Hand Side</div>
<div id="footer"></div>
</div>

With an e-shot, you do not have these CSS luxuries as the elements (usually div elements) do not display well in email clients. The background would not show as background-urls are forbidden, the float would not even work properly in a number of clients, though the width probably would.

Positioning

We use a basic table structure:

<table width="655" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="459">Left Hand Side</td>
<td valign="top" width="196">Right Hand Side</td>
</tr>
</table>



With this you get the two column layout, each cell side by side. Notice the width is contained as an attribute of the table, as is the alignment. There is no need for a clearing div as table cells in the same row inherit the height from their tallest sibling. I have also added the valign="top" attribute as content in cells can be a little bit erratic, this just makes sure that all content positions itself in a uniform manner. This is the basic idea behind positioning elements and content in your eshot. You can use all the normal table goodies of colspan as well as using nested tables to create subsections.

Using Background Images

You can't use them if you want your e-shot to pass muster with all email clients, as background-urls are forbidden. But you do have a couple of options. You can either use an image to encompass all your information, but you then run the risk of your emails being spammed out due to an adverse ratio of text:images or you can use the method I have laid out below which allows you to put image into a table that will encompass your text. As you know the amount of content that will be going in your cell this method would work:



Things you can and can't do:

• font-styling(CSS) is fairly safe and you can perform add most attributes like margin and padding, font-weight etc.
• Ideally, you want your container element to be no larger than 655px wide
• Keep the number of links contained in the email to a reasonable amount to avoid Spamming Issues
• CSS styles can be kept in the head, but may cause some problems, it is preferable to keep all CSS inline. One option is to design the Eshot with the styles in your <head> section and then use something like this to convert them to inline styles
• <td>table cells - use valign="top" applied as an attribute to the cell instead of using vertical-align in your CSS.

Here are some tips which could help:

• Basically, when you're building an eshot you are not building a modern web page, you're building a web page like you would have done in 1996!
• If you feel like you certain clients are not important when your perform your validation then you can always choose to ignore them. I always validate against all versions of Outlook - But like I mentioned above, you allow it to pass the Outlook test then it should be fine in all other clients.
• Always include a link to a web page that has the e-shot saved
• Always include an un-subscribe link
• If you can, include a link back to your website, as you never who is looking at the eshot
• Remember to keep your overall width to 655px as this width is the most compatible size with the most amount of clients.

My top CSS tips

In CSS there is usually more than way to skin a cat. Some people use certain methods, some use others. If you a way of styling that works, whose to say it is wrong. Do not let people tell you are doing it wrong.

I originally created this page as my top 10 tips but still continues top grow on a weekly basis. This post is not a tutorial page, more of a reference for those CSS coders who may be between the beginner and intermediate stage.

Add some consistency

Reset all your core elements to use the same set of basic rules, as some elements show different amounts of padding/margin by default in different browsers, i.e.

div, p, ul, li {margin: 0, padding: 0;}

Types of element

The main two types of styling elements are block level elements and inline elements. The main difference between a block element and inline elements are that block level elements will take up all the space within their parent element until instructed otherwise through CSS. And remember you can change the display type using your CSS.

The big difference between padding and margin

Remember that when dealing with elements. Margin is outside the element and padding is inside the element.

Use single Lines in your style sheet

Write your CSS in single lines, it may look prettier when you write your code, but when you have 300 hundred defintions, it can be extremely infuriating to scroll through your page with all those code blocks.

Browser specific CSS

You can override styles for different browsers by browser and version, check here for a really good list that gives you code examples for numerous

Overriding styles

Make use of !important when you are struggling with you need to override a style, here is an example:

color: #FF0000 !important;

Important Shorthand techniques

Use shorthand techniques when you can. For example, let's take a look at margin (you can substitute padding here if you want to):

Margin-top: 10px;
Margin-right: 5px;
Margin-bottom: 15px
Margin-left: 4px;

Can be written like this:

Margin: 10px 5px 15px 4px;
Top, right, bottom, left

You may also use another shorthand technique for margin/padding when the top/bottom and left/right use the same values:

Margin: 10px 5px;

Or if you want to apply the same value to each side you can use:

Margin: 10px;

The need for negativity

Using negative margins can in some cases be beneficial when you want to position an element just once when you don't want to change the larger majority of elements.

Generic classes

If you think that you will be adding similar styles to a number of different spans, like color. Create a generic class that adds those colours, i.e. if you know that you will be using multiple validation areas then this may be beneficial

Using multiple classes

You can only assign one ID per element however you can apply multiple classes to an element and is suprisingly easy to do, you just separate the class names using a space. Combining classes can save you repeating definitions and save you time in the long run, for example:

<div id="elementID" class="class1 class 2 class3 class4">My Element</div>

Bullet Points Images

If you want to use an image on a bullet point, you have more control over the image if you do the following. Set the list-style-type to none an add a background-image attribute. The main reason being that you have more control over the background than the normal bullet image as you can use background-position to make sure it looks perfect.

Install the Firebug Add-on for Firefox

This will save you a tonne of time as you can (amongst other things) edit your CSS/HTML on the fly which you allows you to test and try your changes before applying them to your style sheet. There are developer tools for Chrome and IE, but in my opinion neither of them come anywhere near as close to Firebug!