Setup

To start, let's create a new document in Photoshop, 1024px (width) by 700px (height).

Guides

Now, lets set up predefined areas (for areas like the header, and content) using guides. We will be creating four guides for now.

• First Guide: Horizontal, position: 160px
• Second Guide: Horizontal, position: 620px
• Third Guide: Vertical, position: 62px
• Fourth Guide: Vertical, position: 962px

You should now have something that resembles the following (ignore the fact that there's the BG coloured in there, that wasn't supposed to be there just yet):

Background

"Web 2.0" seems to be all about gradients, so choose a foreground and background colour. I used foreground: #6d6657 and background: #302a1d. Use the gradient tool, then click at the top of the document, and drag down to the first horizontal guide (160px down). You should have something like the following:

Content Area

Choose the rounded rectangle tool, and set a corner radius of 10px. Now make sure that your window is expanded a little more than the actual document size so that you can begin to draw your content area just outside the top of the document. Start about 15px above the document, and at the first vertical guide (62px in). Drag out a rounded rectangle down to the bottom horizontal guide, and aligned with the right hand vertical guide (962px in). You should see the following:

Now, add the following layer style to the rounded rectangle:

Header

Now lets set up the header. Create a new layer and use the Rectangular Marquee Tool and draw from the top left of the document all the way to the right, and down to the first horizontal guide. Fill with a colour of your choice. If you're following this guide, I used #918977. Change the blend mode to 'Darker Color' and add a drop shadow using the following settings:

Now grab a decent pattern, there are some nice ones at SquidFingers. Choose one, open it in photoshop and define it as a pattern (steps 1 & 2 only). IMPORTANT: Remember the width of the image. Mine is 34px. Once you have your pattern defined, bring up the main layout document we're working on and Ctrl+Click on the image part of the header layer in the layers panel. This should have selected the header section. Create a new layer above and choose Edit > Fill. Select your newly defined pattern, and fill this header area.

Now, set the Blending Mode to Luminosity, and press Q to enter Quick Mask mode. In Quick Mask mode, with the new layer selected (with the nice pattern on it) - choose the Gradient tool.

Drag a gradient from the top of the screen, down to the first horizontal guide (160px down). You'll have a red gradient, don't worry about that - we're in Quick Mask mode and it's supposed to do that. Now press Q to exit the Quick Mask mode, then press delete. Your pattern should now fade out as it gets closer to the bottom of the header section:

Saving your Slices

That's your layout basically done (without any content / images). Now to save the slices for our XHTML layout. Create two new horizontal guides, the first one set with a position of 170px, and the second with a position of 610px. Now, use the slice tool, and create a slice from the top left, across the entire width, and down to the first new horizontal guide (170px down). Create a second slice starting from the left and down at 170px, drag it all the way to the right and down to the second new horizontal guide. Create a third slice with the remaining space. You should have the following:

Now choose 'File > Save for Web & Devices' and save the images. This process will create a folder in your directory you chose to save them in. Within this folder will be your three sliced images. Browse to that folder, and delete the middle image. We don't need this. Name the header slice 'header' and the footer image 'footer'. Move both the header and footer images to your web image directory.

Now, back in photoshop, using the Rectangular Marquee tool select from the top left, all the way to the bottom and go in the number of pixels that match the width of your pattern you used earlier from the left edge of the document. Goto Edit > Copy Merged, then click File > New Document and make sure the dimensions are <width of pattern>px by 700px. Paste in the copied image, then File > Save for Web & Devices. Save this image as 'main_bg'. This is your main background image. Now, choose the Single Row Marquee Tool, and click once in the middle section of your main document (anywhere that the second slice contains). Do the same as before with the vertical slice… copy merged, open a new document, paste it in and save for web as 'content_bg'.

You should now have 4 main images:

• header
• footer
• main_bg
• content_bg

Creating the XHTML / CSS

Firstly, lets set up our directory structure. We will be needing the following:

• index.html
• design.css
• folder for images

We will be wanting a final directory structure that resembles the following:

+-my layout/
  |
  +-img/
  | |
  | +- content_bg.png
  | +- footer.png
  | +- header.png
  | +- main_bg.png
  |
  +- design.css
  +- index.html

Navigate to your root folder for this tutorial (where the files are going to be saved). Create a new folder called img and copy your images into it.

Now create the XHTML document (index.html). Let's use the following Dreamweaver default as a nice structure to work from:

Add the following div tags between the BODY tags:

Now it's time for the CSS. Create the new CSS file (design.css) and add the following CSS code:

Now, attach the stylesheet to your XHTML document using:

anywhere between the HEAD tags.

Voila! We're done!

Extras

Play around with this simple layout design, create new images, change colours and edit the CSS. Take a look at my final design.

I changed the header image to include a logo and some links, and also added some images to the footer. It seems to be the web2.0 style that you incorporate faint logos at the bottom of your layout.

Make sure you have a .htaccess and .htpasswd file in the directory you want to secure, then add the entries once you've generated your password.

The code to generate an MD5 hash using PHP is simple:

Creating custom documents gives your site a more professional look, as not only are you providing a 'net' to catch unsuspecting visitors when they follow a bad link and such like, but they also allow you to customise the style of the page so you can maintain your basic site design by adding HTML.

Control Access

Being able to control access to certain areas of your server can be very useful. The following example demonstrates how to only allow access from those connecting from a 192.168.0 LAN IP pool. This could be easily modified to only allow access from a single remote IP address or addresses.

Hide and Deny Files

Hiding and denying access to files is crucial to servers that have sensitive data held within files that may be accessible via the website(s) on it. The following example demonstrates how to prevent acces to any files ending with .log - and is case insensitive (i.e. .LoG / .lOG / .loG).

Basic Rewriting

I have written a mod_rewrite tutorial, but this is worth a mention as a top 10 tip for .htaccess files as it's becoming more and more commonly used these days - primarily for SEO purposes.

This example will redirect a request for http://edrackham.com/page_one.htm to http://edrackham.com/page_one.php. The r=301 tells apache to send a proper HTTP Permanently Moved redirection (301), which will update the address bar in the browser window to show 'page_one.php'. Without this, you'd still see 'page_one.htm' even though you're seeing a PHP page. This helps SEO, as spiders and search engines will update their listings to reflect the PHP versions.

Shorter URLs

Shorter URLs are beneficial, as visitors that persist in typing full URLs won't have to type as much, and they're more memorable. Do they benefit SEO, even though the full URL contains the same keywords? I don't know, maybe someone can tell me.

This example will rewrite a page requested as http://edrackham.com/files/code/apache.zip to http://edrackham.com/download.php?type=code&file=apache.

Prevent Hotlinking

Preventing hotlinking can reduce bandwidth, by disallowing other websites from displaying images hosted on your server. The following rule basically says that if the referer is NOT edrackham.com, run the following rule. The rule (on the next line) says that if the request is for a .gif, .jpg or.png then redirect the visitor to http://edrackham.com/img/hotlink_f_o.png. I'll leave you to work out what the 'f_o' stands for.

Hiding Page Extension

Similar to the mod_rewrite code above, this will redirect a request for product-3.html to products.php?id=3. As we're not using r=301, the requested page will remain in the browser's address bar.

Ban Selected User Agents

In my opinion, it'd be ace to block all requests from a Microsoft user agent, but alas, that wouldn't be too cool as some people are still hell-bent on using a non-standards compliant browser. Having said that, Microsoft is making their new IE8 release standards compliant by default.

The following provides some examples for blocking requests to your server from certain user agents.

Making Other Filetypes Executable

Ever wanted to make your site look like it runs off a new language such as .w00t files? Well you can with .htaccess! Adding this neat one-liner, you can request .w00t files, which will be served and interpreted as .php type files.

Force Media Downloads

Sometimes, when clicking on media files, the browser wants to play or stream it directly from itself. Using the following rules, media files (.avi/.mpg/.wmv/.mp3 in this example) will provide a download dialog box instead.

Require SSL

Sometimes you will require an SSL connection. This following snippet will do just that!

Sources:
http://corz.org/serv/tricks/htaccess.php
http://roshanbh.com.np/2008/02/hide-php-url-rewriting-htaccess.html
http://expressproducts.net/htaccess.htm
http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/#usa4
http://phpsecurity.wordpress.com/2007/12/22/htaccess-tips-and-tricks/

Replace:

• <COLUMN> with the name of the column(s) you wish to retrieve
• <TABLE> with the name of the table you wish to retrieve the data from

I've tested this with a table with over 660,000 records, and got a response in 0.0200 seconds, whereas with ORDER BY RAND() i got a response in 2.1599 seconds.

Total Number of Rows:

Old Method:

New Method:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Don your glad rags and party hats, it's time to celebrate! Microsoft have announced that their new interoperable release of Internet Explorer (IE8) will be standards compliant by default.

Their explaination for change still hints at their stubborness though: "While we do not believe any current legal requirements would dictate which rendering mode a browser must use, this step clearly removes this question as a potential legal and regulatory issue.".

So what does this mean for us as designers?

Don't misconceive me - I'm not primarily a designer, but I do design all sites I build …in pure CSS. This change will mean that we should know that our designs will render the same in all mainstream browsers such as FireFox, Opera, Safari and of course IE8 (provided we use valid CSS1, 2 or 3 [when fully supported] code). The days of running both FireFox and IE6/7, uploading your new CSS file and hitting F5 to find that the bug you just fixed in IE6/7 has now broken something else layout-wise should now be gone.

IE8 will support standards compliant mode as default, but will be backward compatible with our already 'IE Bug-Fixed' CSS files. So, to save us backtracking to make our previously written CSS files - which have no doubt taken us hours upon hours to write thanks to IE7- rendering modes - we can insert a meta tag into IE8 to set it to "Quirks Mode" for this exact purpose.

A final note

All in all, I don't have much confidence in Microsoft and the web. This confidence decreases even more after hearing any one of Steve Ballmer's semitars, especially the one about Microsoft winning the web. In my opinion, they never will, but this is a fantastic step in the right direction which leads me to say two things; Well done Microsoft, and two, Let's get used to the days of IE7-.

I really hope these guys make it. They deserve it.

This post assumes you know how to create and use a connection to a MySQL database in PHP and have a table named 'quotes' as shown below. In this post, I will aim to teach you how to use PHP to pull random quotes from a MYSQL table of quotes. This can be easily extended to pull a random banner as will be explained at the end of the post.

Let's firstly assume we have a MySQL table similar to the following:

+----+------------------------------------------------+
| id | quote                                          |
+----+------------------------------------------------+
| 1  | I know Karate... and many other Chinese words! |
+----+------------------------------------------------+
| 2  | w00t this is geeky                             |
+----+------------------------------------------------+
| 3  | You're CLINICALLY MENTAL!                      |
+----+------------------------------------------------+

Now, in your PHP code, we need to:

1. Build a suitable MySQL query to obtain a random result from the 'quotes' table.
2. Store the result of the query to be used in the HTML somewhere.
3. Output the result in the HTML somewhere.

So, for step one we'd use something like the following:

There, the variable '$sQuoteOfTheDay' now has the value of our randomly pulled quote. Let's just analyse each line of the code above to see what it does.

This line stores the MySQL query we're going to use against the database. It says, in laymans terms, "Select just one random value of the quote field from the table named quotes". All this line does though is store the query into the variable '$sSQLQuery'.

This line runs the MySQL query, storing the result of running the query in the variable '$aResult'. It's important that we store the result of the mysql_query in a variable, as the result of running a successful MySQL query using PHP's function 'mysql_query' doesn’t return a nicely formatted array that we can necessarily use.

This is probably the hardest line for me to explain. Firstly, many of you may have seen a similar line like this used in a 'while' loop. However, our MySQL query used the 'LIMIT 1' string, so we know we’re only going to get ONE result, hence no need for a loop. The function 'mysql_fetch_assoc' takes one parameter: the result of the successful 'mysql_query' which as we know is '$aResult'. My biggest tip here is to use the 'assoc' method wherever possible, as it creates the array in such a way that we can reference each element by the column name, not a number. This is particularly useful if you ever update the MySQL table to have more columns.

Anyway, this line basically says 'Fill the variable '$aRow' with the CURRENT row of the returned query'. We know that the CURRENT row of the returned query is the ONLY row, hence (again) the lack of a loop. As the result of our query would return something like:

+-----------------------------------------------+
| quote                                         |
+-----------------------------------------------+
| You're CLINICALLY MENTAL!                     |
+-----------------------------------------------+

Our variable (or array) would literally look something like:

Which leads us on to our last line:

Which just assigns the value of '$aRow['quote']' to the variable '$sQuoteOfTheDay'. In other words, '$sQuoteOfTheDay' now has the value of a random quote pulled from the database of quotes.

To use this in an HTML page, we would simply just use this (AFTER the above code has grabbed the random quote from the DB for us):

Which will output the quote of the day somewhere in the HTML code.

As I said at the beginning, this can be extended easily to pull an image for a banner by simply changing the quotes table to store image paths such as 'images/my_image.png' which can then be pulled in the same way, and then output similar to the following:

Obviously we changed the variable name here to $sImageOfTheDay just to keep things constant.

Hope this has helped someone!

Brief overview…

Ok so you’re actually reading this brief overview? You must be serious…

PHP classes can be used to group together a set of ‘like’ functions used within a bigger application. Their main advantage is the fact that you can edit the particular class function, or functions and make a site-wide change. Classes also help give you a more structured approach to programming, and those that like to hack with some GPL released web applications will have a much better understanding of the workings of them.

This may not be the best example of explaining why to use classes in PHP, but it’s an example of how to use them.

Let’s start by creating a new file called time.php. Within this file, let’s add some code:

This will simply assign the current date and time to the variable $sTime and then print the string 'The time is' with the variable value at the end (e.g. The time is: 09-02-2007 21:42:28)

How would we do this, using a class? Well there's many ways, however I would recommend using the class file to generate the time, then use the acutal 'action page' (time.php) to output the time. Let's create our class file!

Get in class!

Create a new file (keep it in the same directory for this tutorial). Let’s call it class.Time.php. Add the following code:

Lets do this line by line… The first line, class Time {,declares the class as open (exactly the same as a function in PHP, but without the brackets in this case). The next line declares a new function. The difference here is that it exists ONLY within the scope of the class (e.g. it's built WITHIN the class). We then generate the time as we did before, assigning it to the variable $sTime and then return the value of this variable. The function then closes, followed by the class closure (the squiggly brackets '}'). Note that our class needs to also be wrapped in php tags ().

Now open the original file, time.php, and change the code to match the following:

Now, the first line here includes the time class file (include ('class.Time.php');). We must include all the class files we wish to take advantage of, otherwise how the hell would PHP know about these files?

The next line, $oTime = new Time, creates the class object and stores it in the variable $oTime. Notice, to store the class in an object variable, we use VARIABLE = NEW CLASSNAME. VARIABLE can be anything, then there must be an equals sign '='. NEW must use 'new' or '&new', and the CLASSNAME must match the name of the class. In this case, the name of the class is Time (case sensitive - as PHP is throughout). The class name is 'Time' because we created the class using class Time {.

If we had used class HelloWorld {, as you can guess, the class name would be 'HelloWorld'.

Anyway… now we've created our class, we have also included it within the page we want to make use of it. Not only that, we have ALSO initalised our class by defining it in an object variable - $oTime.

So, the next line:

This simply assings the variable $sTime with the result of the function GenerateCurrentTime() within the Time class. How does it do this? Simple… We want to use the function GenerateCurrentTime() within the class $oTime so we simply us:

This tells PHP exactly what we want to do. The '->' explains to PHP that the prefix (in this case $oTime, which we know holds the class object) is the parent of the latter (again, in this case the latter is GenerateCurrentTime()). So it basically means, run GenerateCurrentTime() within the $oTime class. Thus assigning whatever is returned by the function GenerateCurrentTime() to the variable $sTime.

The last line does what we did from scratch… print out the results with the prefixed string 'The time is'.

In the next installment, we will discuss what $this-> means, and how it can be immensly beneficial to you to use classes!