Website development with PHP

We use PHP in the majority of our web development projects. It is open source, allows the quick development of complex websites and is very flexible. One of the simplest improvements PHP offers over sticking to basic HTML is the use of include files. These are files containing code which is repeated throughout the site. It may be the header, footer, navigation or a particular 'widget' which appears in several parts of the website. If the site is built in HTML then the code for this section would need to be repeated every time it appears, leading to major headaches if anything needs to be changed - if an extra link needs adding to the navigation for example. Building in PHP and using include files means that the code only needs to be written once, it can then be 'included' in every page it is required with a single line like:



<? include_once "include/navigation.php" ?>




Thus saving time, minimising code replication and making future updates much easier to handle.

Subversion add multiple files

One of the reasons we started this blog was to record any tricks we find that help us with our web development work. We recently took on a project which involves working with subversion and found the following very helpful for adding multiple files to the repository. Simply get into your terminal as usual and enter the following command:

svn add `svn status | grep "^?" | awk '{print $2 }'`

This basically runs the status command to find all files with a '?' status (meaning they have not been added to the repository) and inserts that filename after the add command, so its essentially the same as typing

svn add file1 file2 ...

PHP and Javascript cookies

If you want to store data on your website visitors computers then you'll need to use cookies. They are a very useful way of improving the user friendliness of your sites by, for example, keeping your users logged in over multiple sessions on the same PC, or recording which language, text size or colour options they prefer to view your site in.

Cookies can be accessed in several ways by all sorts of different coding languages, but as we do alot of work with PHP and javascript we will show how we access and manipulate cookies with those languages.

PHP:
There is an inbuilt function in PHP called setcookie() which can be used for all your cookie related fun in PHP. Its full details can be found here: http://php.net/manual/en/function.setcookie.php but we have given you the basics below:

setcookie("cookie name", "cookie value", "expiry time (secs)", "path", "domain");

In essence all you need to do to store a cookie of 'language'='eng' for 1 month which is valid across your entire domain is to put the following code somewhere on your php page:
setcookie("language", "eng", time()+(3600*24*30), "/");

It should go above any html output as there can be header issues, but apart from that it really is that simple! To retrieve your cookie value in PHP use the $_COOKIE array.


Javascript:

We have created some javascript functions to simplify the process of cookie manipulation in javascript. These are provided below for your use.

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i <>
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

JQuery scripts

We have used a variety of JQuery scripts when building websites, some we wrote ourselves and some are third party scripts adapted to our requirements. A few of our favourites are below:

1. FullCalendar -Surprisingly enough this is a calendar script. It gives you monthly, weekly and daily views, it is easy to add events to and even allows you to drag events around to different dates/times. We have recently used it for Wisdom Hospice.

2. Popup script - One of those popups which appears in the centre of the window and makes the rest of the content darker and unselectable until you clear the popup. You know what I mean, don't pretend you don't. This sort of popup is used in a variety of situations including questionnaires, signup forms etc. We used it recently on Next Holiday.

3. jCarousel - There are alot of slideshow/gallery JQuery scripts around. Some only allow you to slide images while some let you put divs in with text, links etc. This is one of our favourites as it is very simple to implement and is completely customisable, we used it for Wisdom Hospice.

4. Instant File Upload - Our content management system allows site owners to control their websites content including images. We have recently implemented this file upload script to upload an image without submitting a form and crucially without refreshing the page. This means that the site admin can see their changes in real time on the web page itself before committing to them. The script itself required quite alot of changes by our dedicated technical team (ie me) to achieve the desired effect but we are very happy with the results and believe it greatly enhances the experience of using our content management system.

5. Image Tagger - Similar to facebooks image tagging system, we have modified this script to allow website members to tag other members who appear in a photo. This is used in our recently completed Parker Pens website and forms part of our 'social networking website' package.

IE css hacks

Pretty much anyone who's ever made a website will have experienced the frustration of cross browser compatibility. It turns a simple static website build into a nightmare of testing, updating, googling and swearing for hours on end (the most popular 2-word phrase in the SiS office is probably "f*cking IE!"). The reason for focusing on Internet Explorer is that other browsers at least make an attempt to comply with the W3C guidelines for HTML and css coding, microsoft more or less chose to make up their own rules as they went along.

Below are a few tricks to help you solve that painful problem which forced you to google your way here in a fit of swearing..

1. Make all divs equal.
Different browsers apply different defaults to divs and other tags. A quick and easy fix is simply to force your own defaults by putting the following in your stylesheet.

div, img, table, tr, td, ul, li, p, h1, h2, h3, h4{
padding:0;
margin:0;
border:0;
}

2. Use Internet Explorer specific stylesheets
Putting the following code between the head tags will cause the stylesheet to be used by IE only.

<!--[if IE]>
<link rel="stylesheet" href="css/ie_hacks.css" type="text/css" >
<![endif]-->

3. Track down the divvy div.
Quite often you'll find a div has been forced out of position because it won't fit where you put it or because another div has shoved it out of the way. An easy way to find the cuprit is to add a border to your divs - make each one a different colour so you can tell which is which and that troublesome div will make itself known.

More tips coming soon...

Extendable backgrounds in HTML

The first of our HTML basics guides offers a simple method of creating websites with backgrounds that grow to fit any amount of content automatically. View our extendable background demo to see it in action. The demo also features a simple piece of javascript so you can easily see the background extend.

Stage 1: The image

Create a background for your website as you would normally. Our demonstration has a logo set in at the top as well as a graphic which needs to stay at the bottom of the page, and nice soft gradients and curves in between. Slice the image into 3 pieces: top, middle and bottom. The middle section should be no more than 1 or 2 pixels in height, this will be the part of the background that is repeated as much as required. Put the 3 images in your images folder.

Stage 2: The HTML

The code below is simplified for the purposes of this guide, our demo has extra divs for placing navigation, footers etc and we also used a partially transparent png for our content divs background to give a faded effect to the main background image.

<div id='site'>

<!-- The div for the top part of the background !-->

<div id='bg_top'>

</div>

<div id='main'>

<!-- Main site content goes here !-->

</div>

<!-- display bottom of background !-->

<div id='bg_bottom'>

</div>

<!-- Close site div !-->

</div>


Stage 3: The CSS

/* Puts the site in the middle of the page */
body{
text-align:center;
}

/* Ensures divs are shown same in all browsers */
div{
margin:0;
padding:0;
}

/* set middle background image as background, repeat vertically
* Make site appear in centre of page
* Z index ensures content in this div will show on top of other divs
**/
#site{
background-image:url(../images/bg_mid.jpg);
background-repeat:repeat-y;
text-align:left;
margin:auto;
width:800px;
z-index:3;
}

/** main content div, can be reposition to correct place on page **/
#main{
margin-top:-50px;
}

/** Display top part of background **/
#bg_top{
position:relative;
background-image:url(../images/bg_top.jpg);
background-repeat:no-repeat;
height:196px;
width:800px;
z-index:-1;
}

/** Display bottom part of background, top margin should be set to remove large space at bottom of page
* z-index is set so background does not cover up content
**/

#bg_bottom{
position:relative;
background-image:url(../images/bg_bottom.jpg);
background-repeat:no-repeat;
width:800px;
height:400px;
margin-top:-300px;
z-index:-1;
}

Conclusions

Blogger really isnt very good if you want to display html code in your blog! You need to convert the html entities (<, > and so on) first otherwise it just treats them as html. There are also all sorts of problems with sizing text, but enough about blogger! There are alternatives to the method described above, for example you could use a larger repeating image as the background and place your top logo and bottom graphic in separate divs over the top (using transparency in the images so that the background can be seen through them.

We will continue adding guides as and when we can, they will cover all aspects of web development from design to coding, databases to SEO and they will all be solutions to problems which we have discovered and used ourselves in our web work.

Some useful web development resources

As a professional website design/development agency we have found all of the following resources extremely useful:

1. The PHP manual - The majority of our programming work is in PHP, although we also use Java and ASP for certain projects, the online PHP manual is incredibly handy for looking up PHP functions, checking syntax etc.
2. DHTML Calendar - A fantastic little javascript calendar, free to use (although they have now developed a funky new version which isnt). Its very easy to add to any website, we have used it on various bookings websites and pretty much anywhere a user may be required to enter a date.
3. JonDesigns SmoothGallery - This is a great looking gallery which allows you to easily set up a slideshow with nice transition effects on any webpage. We normally combine it with our CMS to allow website owners to update their galleries.
4. Lightbox Gallery - This is an alternative gallery better suited to some projects than the smoothgallery above. There are lots of different lightbox scripts but all have similar functionality and we have found this one easy to implement in a range of websites.
   
5. InnovaStudio WYSIWYG - The best value WYSIWYG editor we have found. We combine it with our content management system to give website owners full content control over their websites.
   

A brief history of Search Engine Optimisation

Search Engine Optimisation (SEO) is a constantly changing field of website development. As google, msn (Bing), Yahoo and all the rest develop ever more complex algorithms for ranking websites so the SEO professionals (and amateurs) must adapt their techniques to keep their websites at the top. It used to be the case when the first search engines became commonplace that some well chosen meta tags - titles, keywords and descriptions - could see you ranking well and pulling in thousands of visitors. At around this time the first 'black-hat' search engine optimisers realised that if they stuffed their meta tags with 'Britney Spears' and 'porn' they could pull in all those sex obsessed teenagers, although quite what they expected to achieve with this is anyones guess.

Thus began the great SEO arms race, as the search engine coders improved and developed their algorithms to prevent these black hat optimisers from getting their sites unfairly high in the rankings. Techniques such as keyword stuffing, hidden text, and now backlink spamming gradually became obsolete and 'cheating' SEO became less and less attractive. Meanwhile proper search engine optimisation (White-hat) continued to work wonders for genuinely useful, interesting or individual websites. These started with the meta tags and moved on to checking that the website content contained good, relevant key phrases, to encouraging backlinks via links pages, writing and commenting on external blogs and forums and submitting sites to relevant 'proper' web directories.

Now, in 2010, the biggest factor in ensuring a website performs in search engines appears to be down to its appearance on social networking sites. This means sites like facebook, twitter, del.icio.us, squidoo, myspace and hundreds of others where normal internet users can post links and content are more important than any amount of keyword generators or directory submitters. Which means that finally the power is moving to the people rather than the specialists. Whether this is a good thing remains to be seen, after all just because something is popular it doesnt make it good (George W Bush anyone?).

However these latest changes don't mean the death of either ethical or non ethical search engine optimisation, the 'black-hatters' will happily create hundreds of fake accounts on all sorts of social networking sites, forums, blogs etc and spam them all with links in the hope that some will stick. Meanwhile the good guys will look around for related blogs/forums to make useful posts on which include a link back to their site and encourage others to link to their site by making it genuinely informative.