3 hours of going around in circles later… and still no joy! After checking over my code piece by piece, trying the code out of WordPress, trying the page on another server just in case, and trying every other option I could think of, I finally tried uploading jQuery 1.2.6 from my WordPress 2.7 folder on my computer, and hey presto, it all worked!

It seems that there is a minor change required for thickbox to work with the latest jQuery version. After a bit of searching around I found out that what's needed is on line 79 of the existing thickbox file you need to change the line

Existing Thickbox Code

1. TB_TempArray = $("a[@rel="+imageGroup+"]").get();

to not include the @ sign in it ie.

New Thickbox Code

1. TB_TempArray = $("a[rel="+imageGroup+"]").get();

Such a simple change that caused a few hours of frustration! So hopefully it may be of use to someone else

I've still got a bit of playing to do, but just so you're aware, a few things may change. Hopefully for the better

Any thoughts on the comment form though? I like having it out of the way until it's needed but obviously don't want people to think that the form has gone. Time to have a bit of a think I guess. All opinions/thoughts welcome

With thanks to Sam Hampton-Smith and Marc Grabankski (who is the developer of the UI Datepicker, a fantastic jQuery popup calendar), I managed to get my questions answered, learning plenty in the process! I said I'd write up what I actually did so that it's maybe of use to others (as I couldn't find a complete answer online anywhere).

Resetting Select Lists

My first problem was that I had a main select list and then each option had an ID as the value, for each ID there was a child select list. So you've got parents and their children. However I didn't know how many parents there were, and used PHP to create a long list to reset each child select list. Marc's code was spot on except because of the way I had my code it was failing. See, the first option in the parents select list was blank, and by sending a blank value to the JavaScript function it collapsed as it expected a value other than zero. Once I sussed this I altered Marc's code to cope with this and finally got the following working:

Reset Select List Function

1. $('#parentid option').each(function(i,option) {
2. var child_id = $(option).val();
3. if (child_id != 0) {
4. $('#child'+child_id)[0].selectedIndex = 0;
5. }
6. });

As you can see on line 3 I've got it checking whether the value of the option is empty, and providing it isn't it then runs the all important code. It's such a simple thing, but it took me a couple of hours of finally realising that was the problem!

Removing Records

My other problem was that I had a table of say regions, and within each region a number of postcodes are assigned to it. I wanted to allow them to remove a region but rather than just deleting the region and postcodes, to allow them to select the new region to put the postcodes into. Sounds straightforward enough, except I had an onsubmit(X) attribute in the form tag so that would trigger the function to do the work, the X would be the region to remove. That all worked except once you submitted the form it would do the work but then refresh the page, which meant the message to say 'The record has been removed' wouldn't display. (At this point I'll mention that I know I could have done it with standard HTML and PHP but I wanted to put my new jQuery knowledge to good use and do it how WordPress does theirs!).

Thing is, my code was pretty much fine. To prevent a form from submitting, or a link from actually activating, you use return false;. That was there, so it was a bit confusing (and frustrating) as to why it wasn't working! Eventually I worked out that the event attributes (onsubmit, onchange etc) were the cause of the problem. The function didn't return false, despite being told to. So I had to pull the code into the jQuery document ready function and use a jQuery method to trigger it (submit(), change() etc). Okay, that bit was fine but as I was using the same function for every form (one per record) then I needed to know which record I was trying to remove, and also ensure the function ran on any form (all of which have unique IDs). So I finally came up with the HTML markup of:

Form Markup

1. <form action="#" class="manareas" id="managearea_1" method="post">
2. <label for="area_1">Move postcodes to:</label>
3. <select name="area_1" id="area_1">
4. <option value="">Remove All Postcodes</option>
5. <option value="2">Area 2</option>
6. <option value="3">Area 3</option>
7. etc…
8. </select>

Here the number 1 at the end of the form ID and select ID changes depending on the ID of the area, this will give the form a unique id, same goes for the select list. So, say you've got 10 records, each with their own form similar to the above, each has a record ID in the id. Then when you want to remove a record you select your option from the list and it triggers the remove function in jQuery, however we obviously don't want a function for every record, so by adding the class 'manareas' we can use that to trigger the function and every form has that on it. However, then we need to work out which record we're dealing with, so we get this from the form id, and then we're back on track i.e.

Remove Record Function

1. $("form.manareas").submit(function() {
2. var id = $(this).attr('id');
3. var id = id.split('_');
4. var id = id[1];
5. var newarea = $('#area_' + id).val();
6.  
7. if (newarea != 0) {
8. var conf = confirm("Do you really want to permanently delete this Area?");
9. } else {
10. var conf = confirm("Do you really want to permanently delete this Area and all the Postcodes in it?");
11. }
12.  
13. if (conf) {
14. $.get("/admin/includes/remArea.inc.php", {id: id, na: newarea}, function(data) {
15. if (data) {
16. var cnt = $('tr#row' + newarea + ' td.njb').text();
17. var cnt = (cnt-0) + (data-1);
18. $('tr#row' + newarea + ' td.cnt').text(cnt);
19. $('#message').text('Area removed.').fadeIn();
20. $('#row' + id).fadeOut();
21. } else {
22. $('#message').text('Error removing Area.').fadeIn();
23. }
24. });
25. }
26. return false;
27. });

So to explain the code. First the function is run when a form with a class of mantrades is submitted (line 1). Then we get the value of the id attribute (line 2), and split it (equivalent of PHP explode) using the underscore, to get the record number, which we then use to get the value selected in the form (line 4). Lines 7-11 just put up a confirmation box depending on which option is selected, just in case a clever client selects it and submits the form without thinking! Finally, if the user has confirmed yes to removing the area, the function that was originally written is executed, sending the ID and other information to the PHP script and making any changes, removing the row from the table etc. if successful. Then on line 26 we have the return false which of course stops the form from actually submitting the browser and refreshing the page.

So that's how I solved those two problems. It may not be the cleanest solution (the first is, the second can probably be improved), but it solved my issue which is what I needed

This isn't a 'how do I do this'. What I have already works, but I'm sure it could work a lot more efficiently and a couple of questions linger in my mind as to how or even whether it's possible.

Update: I've got the first issue working thanks to Marc Grabanski (who has an excellent site and is a must read for any jQuery user!)

1. I need to create a function that resets several select lists. However the id of each select list is dynamically generated. What I have is a select list with a list of parents in and each has an ID. Then each parent has a child select list, and the child select list uses the parent ID to make it unique (with me so far?!). At present I use PHP to generate the function by looping through the parent IDs (retrieved from a database), which gives me:

JavaScript function

1. function resetLists() {
2. $('#child1')[0].selectedIndex = 0;
3. $('#child2')[0].selectedIndex = 0;
4. $('#child3')[0].selectedIndex = 0;
5. }

However, I'm sure there must be a way that I can just use jQuery to read through all of the option values of the parent list and get the 1, 2 and 3 from that and do the same above i.e have a function that pretty much says 'get each value from the parent list and for each value set the selectedIndex to 0 for the child + value list. I'm sure it's possible, but how, I don't know (yet).

2. This is one I've not actually got working yet. I'm working on an admin area and I've got the parents listed in a table. Then at the end is the option to remove the parent. However as each parent has one or more children, the children need to be moved to another parent. So when you click 'Remove' it gives a select list of the available parents to move the children to. You can select the new parent and then click Go. However at this point I don't want the form to actually submit and reload the page (which it's currently doing), I want the form to trigger a function which runs the PHP file to move the children, delete the parent and just remove the table row of the parent off the screen.

So far I've got it to run the function, however once the function runs the page refreshes. The only way I've got this function to run is by using the onsubmit attribute in the form tag. Now I know I could change the submit button to a standard button, but surely there's a way to prevent the form form submitting? I've tried putting return false; at the end of the function that's run, but that doesn't seem to work. I've tried putting the function in the action with javascript: at the start of it, but that really didn't work!

Update: Some code may help. This is what I have at present.

Remove Function

1. function exremtrade(id) {
2. var newtrade = $('#trade_' + id).val();
3. $.get("/admin/includes/remTrade.inc.php", {id: id, nt: newtrade}, function(data) {
4. if (data) {
5. $('#message').text('Trade details removed.').fadeIn();
6. $('#row' + id).fadeOut();
7. } else {
8. $('#message').text('Error removing Trade details.').fadeIn();
9. }
10. });
11. return false;
12. }

I've then got a form that has the attribute onsubmit which runs

onsubmit="exremtrade(2)"

Where '2' is the ID of the trade to remove. The new trade ID is in the select list, also in the form. Now if I remove the form and just use a button and the select list, it works. But of course that isn't valid, and ideally the form should be there just in case the user doesn't have JavaScript (plus I'd like to understand why it's not working!). However, with the form in place, and the button as either a button or submit input, the function runs, works as it should, but then the form gets submitted which effectively refreshes the page and loses my update message.

That's my two questions so far. I'm currently reading jQuery in Action thanks to Si's recommendation, which is a great book, I'm just a slow reader! 2 months ago I didn't have a first clue about AJAX, and now I'm quite confident with the basics. My first AJAX enabled site has been live for almost a week and it's not collapsed! I'd just love to be able to improve it further

I'm still on the learning curve, a very steep one at that, and have started at the beginning on Learning jQuery, which has been a good read so far, with clear explanations. I've also implemented a couple of scripts which may be of interest.

The Calendar

I've been working on a form that asks for a date input (amongst a million and one other options!). Initially I gave a drop down but the client came back asking for a popup calendar. As I'd started using Prototype on the site I was working on, I purposely went out and found a calendar that also worked on this. That was fine until the client complained that you could selected a date in the past. As this is for making bookings he wanted it to only accept present and future dates. Of course the PHP checked this, but he didn't want to have to submit the form to be told the date was invalid. That wasn't so hard, except then I was told that some options would also require the earliest date to be 2 days into the future. So I needed not only a calendar that would restrict the date on load, but also dynamically change depending on which options had been selected.

After a chat with a friend he pointed me in the direction of the UI Datepicker, which seemed to do everything I needed and more. It's taken a fair bit of playing and testing to combine the various demos together, but I've finally got it working exactly how I need it. On load it displays the available dates from 'today' onwards. Then on selecting certain options, this changes to perhaps from 'tomorrow' onwards or in two days time onwards. Certainly not standard requirements but definitely handy to have a good calendar that can deal with that.

Tabs

On another site I needed to get a tab system in place to allow more content on a page without overwhelming the visitor with it all on display. I looked at Dom Tabs and at first they seemed to do exactly what I needed, until I had to add in headers around each list item. That stopped everything from working, so a quick search for a new tab system found UI Tabs where you can see some great demos.

I've had a fair few fun and games with these. I originally found version 2 of the tabs, got them all working and then realised that they had come with an old version of jQuery (1.1.3 when 1.2.6 is available) and the next day I discovered the latest version! So I set about trying to get the latest version working but getting a download of the latest version just wasn't as easy or obvious. So today I went through the demo site, visited every page linked to, copied the source and got it working locally and then slowly transferred the content over to the site. Eventually I got it all running off the latest version of jQuery!

Lightbox

Finally, once I finally got the latest version of jQuery running, I could upgrade the lightbox script to prettyPhoto. This was relatively simple to add in, except that the gallery method creates a slot for every image linked, regardless of whether it's already been linked to. In the old lightbox it could detect this. For example, you have 3 images, and they also have a title/name below them. So you can click on the image or the name and get a larger view of the image. With the old lightbox it could detect this and just show you 3 large images in the gallery, but in this new script it shows 6 images, duplicating each one twice. Even if I set the 3 thumbnails to use gallery1 and the 3 titles to gallery2, it seems to note that there's only 3 images in the gallery but still goes by the order on the page in which the links are listed, and not by the gallery name.

Anyhow, small issues which are now irrelevant, as the site owner has changed his mind and picked a whole other lightbox script!

Prototype to jQuery

The main site I've been working on, which currently has both frameworks loading, requires just one other job moving over, which I've yet to learn. This is how to run a PHP file and subsequently write the result from that into a div or paragraph. I think the rest of my JavaScript is standard stuff and doesn't require either framework to run, and simply uses the DOM. So once I can work out this, probably simple, job then I can ditch prototype altogether.

Any other resources of learning for jQuery are welcomed. I may look at books at some point, but considering my ever growing library of unread books, an online resource may be looked at more initially!

My honest answer is no. Going by experience, when a client can update their own site mistakes will creep in. If you use a WYSIWYG online editor such as TinyMCE then you cannot copy and paste from Microsoft Word for example. Word adds additional formatting, unseen to the naked eye, until you paste it into the content box and save it. Kiss goodbye to that valid code. Unfortunately clients understand Word so they want to write everything in Word and cannot understand why they can't just copy and paste from there. I try to tell them that they need to paste it into Notepad first, then copy from there and paste it in, and redo their formatting within the online editor. Naturally some don't appreciate this as they're having to do work twice. MS Word has to be the biggest problem for any CMS and any developer. I've seen what Word code can do to a page, varying font sizes, extra spacing all over the place, it certainly doesn't look good, and that's before you look at the markup. Some additions can go unnoticed until you're called in to fix something and then realise you've got to redo all of the content whilst you're there. My favourite is when you remind the client of your original warning and that they've copied in from Word and they deny it. Hmmm how else did the class of MsoNormal get in there (a typical Word class) or even more strange, the good ol' <o:p> tag?

Some clients do listen though, and they only do their formatting via the online editor. Great you may think, haha think again. Clients like to make things stand out and we can do that tastefully and accessibly, but why ask the developer when they can highlight their title and make it bright red? Then highlight every heading and make it… bright red. Forget accessibility here, let's just make it multicoloured and leave the visitors to play 'find the link'. I purposely hide the underline icon on a WYSIWYG toolbar, else they'd have underlined coloured text and drive the visitors insane whilst trying to click what they think are links!

So colours and formatting are two of the downsides of allowing clients to edit their own content. Then you'll get one who knows a little about SEO, knows that words need to be on the page to be found for them in the search engines, so the next time you view your work of art for your client you'll find a large paragraph of stuffed keywords and brand names throughout it. Of course if you can see it, so can everyone else.

There are plenty more problems caused by clients updating their own sites. Maybe we've given them too much control? Not only do you lose the income from updating the site for them, you also get the blame when they break something. True, a well written contract should cover this but in the past I've not really had the guts to come out and say "Umm it's not my fault, you have to pay me to fix it". I do appreciate it's not necessarily their fault. They treat their website like a Word Document and they don't know how to think like a web developer, but so if it's not their fault, it must be ours for giving them the option to cause havoc on their own site

Find the Missing Files

So what files do you need to cover? Well, ideally if you change your file structure then you'll accommodate every old path/filename, creating a 301 redirect to the new path. However incorrect links, by both yourself on your site and from external links, incorrectly written, can be found by using both your statistics package, to view all the 404 errors, and also Google Site Maps, as this will list all the pages that the spider has tried to visit and found 404s.

301s with htaccess

If you run your site on an Apache server then you will most likely have access to edit your .htaccess file. This is the best method to control the redirection. To create a straightforward 301 redirect from one file to another, simply add the following, changing the old-filename and new-filename to suit what you need. Duplicate this line for every old to new file redirection you need to set up. The path is relative to the root of the site.

Simple 301 Redirect

1. Redirect 301 /old-filename.html /new-filename.html

Okay, so that's for all standard pages, be them html, htm, php or others. But that doesn't work for file paths that include a query string eg. /old-filename.php?id=1234. So the code for this would be

301 Redirect for query string paths

1. Options +FollowSymLinks
2. RewriteEngine On
3. RewriteBase /
4.  
5. RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /old-filename\.php\?id=1234\ HTTP/
6. RewriteRule ^.*$ /new-filename.html? [R=301,L]

The first 3 lines are only needed once at the top of your .htaccess file and are always needed for URL Rewriting (note it's not needed for the basic redirects in the first code block). Lines 5 and 6 then do the following:

1. Check the value of THE_REQUEST (which could be, for example, "GET /old-filename.php?id=1234 HTTP/")
2. Check the pattern of the string is a match
3. If it's a match then create a 301 redirect the URL to /new-filename.html

The optional element in this code is the question mark on line 6 after the new-filename.html. If you have a question mark there then any query string from the old address will not be carried over, if you remove the question mark then it append any query string to the end of the new URL.

Now, you may ask, what happens if you have a lot of old filenames/paths and need to redirect them all to a new file structure, but there's a common theme with them. For example moving a handful of addresses from one directory to another. This can be done using just a couple of lines. For example you want to redirect from /olddir/oldfile.php?p=X to /newdir/newfile.php?p=X

Multiple 301 Redirects

1. RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /olddir/oldfile\.php\?p=([^&]+)\ HTTP/
2. RewriteRule ^.*$ /newdir/newfile.php?p=%1 [R=301,L]

The slight change here to the previous code block is on the request string it determines the value of p in the query string (with could be anything except an ampisand) and whatever it finds it appends to the end of the redirect address, using the %1.

There are other methods of doing this, these are just two of the methods I use, however they should work for you.

301 Redirects with PHP

You may not have htaccess available to you which then limits you to using a server side script to do the same work. This unfortunately means that you need to have a file online for every old file you may have had in the past, and whilst that's tedious it only needs doing once and will hopefully be worthwhile even if you catch just one new customer. So how to do this with PHP? Create a new file and add the following to it:

PHP 301 Redirect Code

1. <?php
2. header("HTTP/1.1 301 Moved Permanently");
3. header("Location:http://www.domain.com/directory/path-to-new-file.php");
4. exit;
5. ?>

Save the file as the old filename and place it on your server in the same place where the old file used to be. This will then return a 301 redirection and redirect all visitors to the old file through to the new one. If your file accepted query strings then for a quick and simple solution you can use the following which will append any query string on to the end of the redirection URL.

PHP 301 Redirect Code with Query String

1. <?php
2. header("HTTP/1.1 301 Moved Permanently");
3. header("Location:http://www.domain.com/directory/path-to-new-file.php?".$_SERVER['QUERY_STRING']);
4. exit;
5. ?>

301 Redirects with ASP

Now my ASP is pretty much non existent so I can't give much help on that. The following will do a basic redirect, and maybe someone a bit more knowledgeable can recreate the above code block in ASP.

ASP 301 Redirect

1. <%
2. response.status = "301 Moved Permanently"
3. response.addheader "Location", "http://www.domain.com/directory/path-to-file.asp"
4. %>

First off, download the contact form, unzip it and open it in your favourite coding editor. The best version of this form requires PHP 4.4+ however I've altered the line that depends on this version so that you can use it down to version 4.0 however foreign characters will not be checked in the name. Both are contained in the download file.

This won't work straight out of the box. You'll need to edit a few lines first plus add in your surrounding HTML markup.

Edit the Basics

To get this up and running with minimal effort you need to do the following (from top down in the file).

1. Edit the $to_email variable to contain your email address. So replace 'you@yourdomain.com' with your own email address, ensuring the double quotes are still kept around the email address.
2. Edit the $redirect variable to contain the address, relative to the root, of your thank you page. So if your thank you page is found at http://www.yourdomain.com/contact/thankyou.html this value will become "contact/thankyou.html".
3. Edit the $subject variable to contain the text you want to appear in your email subject when you receive an email from the form.
4. Locate the line >!– Your Header HTML code or include goes here –< and replace it with your standard site header markup. This could be a PHP include to include the header file, or plain HTML markup.
5. Locate the line >!– Your footer HTML code or include goes here –< and replace it with your standard site footer markup. Again, this can be a PHP include or the plain HTML markup.

This should then leave you with a file that has the following sections:

• PHP Script
• HTML Header markup
• Form in the content area
• HTML Footer markup

At this point you should be able to upload this file to any PHP enabled server, view the file, complete the form and submit it. An email should then come through to your specified email account.

Advanced Options

There's two advanced options in this form. The first is to add additional fields into the form, and they'll still be picked up in the email. To do this, edit the form to include your additional form fields (checkboxes and file uploads are not supported in this form) using the following method (if you're not sure on working with forms, read up on accessible form layouts):

Form Code Excerpt

1. <div>
2. <label for="cftext">Title: </label>
3. <input type="text" name="cftext" id="cftext" size="30" value="<?php get_value('cftext') ?>" />
4. </div>

Where text makes up your input's fieldname. I would recommend keeping 'cf' at the start of all of your fieldnames as this means there is less potential for variables to clash in the PHP and it can help to reduce spam as spammers will often assume your field names are the general ones of 'name', 'email', message' etc. Title is then the value displayed on the page, so the form label.

The second advanced option is to also control your required fields. Near the top of the script there is a line:

PHP Code Excerpt

1. // Specify the required fields
2. $req_fields = array("cfname", "cfemail", "cfmessage");

This array lists the fields that are required to contain content. So if you added 3 extra fields, eg. cfurl, cftelephone and cfaddress and you want to make the telephone and address field required, but not the url field, then you can add these in by adding them to the end of the comma delimited list i.e.

PHP Code Excerpt

1. $req_fields = array("cfname", "cfemail", "cfmessage", "cftelephone", "cfaddress");

This will then check that both the telephone and address fields have content in them, however the URL field can be left blank. Of course it will be wise to add

HTML Code Excerpt

1. <em>Required</em>

After the label title and before the closing label tag, as I've done with the other required fields.

Guarantees

There are none! The form is secure to the best of my abilities. It checks against email header injection, it removes all html tags that may have been entered into the form, it checks the name entered contains just typical characters that a name would contain (including foreign characters)*, it checks your required fields contain content and it will email all details plus the user's given IP address and browser details through to your specified email address. By using less than general field names, spam should be reduced to human spam (I use this method elsewhere and rarely get any spam off my forms that's not human generated).

The form is accessible in that when you click a label title the cursor will be placed in the input box or textarea. It uses the correct markup of a fieldset and legends, and if you choose to extend the form I recommend you continue with these standards. Suggested CSS for the styling of a form and error warning is below.

Suggested CSS Code

1. ul.warning {
2. color: #c00;
3. font-weight: bold;
4. }
5.  
6. fieldset {
7. width: 500px;
8. border:none;
9. border-top: 1px solid #999;
10. padding: 10px;
11. margin-top: 10px;
12. }
13.  
14. legend {
15. font-weight: bold;
16. padding: 0 5px;
17. }
18.  
19. label {
20. width: 125px;
21. float: left;
22. text-align: right;
23. margin-right: 5px;
24. }
25.  
26. form div {
27. clear: both;
28. margin-bottom: 10px;
29. }

So give it a go and let me know what you think. Any problems or comments, post them below and I'll do my best to help out or accommodate you

* Only in the PHP 4.4+ version.

The Rewrite

First off, to explain what mod rewrite is. Commonly used to turn dynamic URLs into static ones, ie. get rid of the question mark and variables. For example, on this site I have a form of mod rewrite running and the URL you'll see for this page is a clean, easy to read URL where as the true one would be /blog/?p=660. Essentially, by using mod rewrite you're masking the true URL with an easier to read one. You do this by creating an internal redirect which means that you tell the server (Apache only) that the clean URL should be loading the dynamic URL, but you're not telling it to actuall redirect to it, just to load the page. Make sense? Yeah I was confused first off too.

A redirect that anyone with an inkling of Apache knowledge with know, can look like

RewriteRule ^blog/about-me/$ /blog/?page_id=3 [R=301,L]

This says, if someone goes to the address /blog/about-me/ then redirect them to /blog/?page_id=3 and make it a 301 redirect so that spiders and bots also realise it's a permanent redirect. That's an external redirect as you are making the browser request the new page (with the R=301 bit) and the address in the URL bar would become the second address. So an internal redirect is virtually the same but without the request so

RewriteRule ^blog/about-me/$ blog/?page_id=3 [L]

This would then do the same, however in the URL bar the first address would be visible. That is the rewrite done. Pretty simple and straightforward. However my question was then, what about the old URLs. Afterall, this is for SEO and the last thing you want is to have the same page served up under two different URLs. This is what has had me going round in circles for the past few days. My first attempt was an external redirect as per the first code, but the opposite (ie. making the dynamic page redirect to the static page). This caused an endless loop and looking around the web a lot of people had the same issue but no one explained in plain english how to solve it.

The Redirect

After reading over various forums I finally came across some code that didn't explain it but after hacking around I managed to get it working. The final code being

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
# Internally rewrite friendly URL requests to script filepath
RewriteRule ^test/$ test.php [L]
#
# Externally redirect client requests for unfriendly URL to friendly URL
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /test\.php\ HTTP/
RewriteRule ^test\.php$ /test/? [R=301,L]

This is a simple version. The actual file is test.php however I want people to use /test/ instead. So after the first 3 lines of code, which are needed only once, you have the internal redirect saying that if the address of /test/ is loaded, run test.php. Then the last 2 lines make the redirect work so that test.php cannot be loaded via the address bar (ie. you cannot go to /test.php as it will redirect to /test/). I had the second line of code, that's pretty obvious, it was the first line, the Rewrite Condition that I couldn't work out!

To explain this line it's easier to first see how the request would look:

GET /test.php HTTP/1.1

So the above is what THE_REQUEST would hold. The next part is a bit of pattern matching. The first bit says that the string should start with a 3-9 character long string of capital letters (GET, POST etc) followed by a space (\ ) then the filename of /test.php and then HTTP/ at the end followed by anything else (note with no $ at the end, there is no end of string determined so anything could follow the HTTP/ ). This line matches that the request was made by test.php and not /test/ so if this condition is met then a 301 redirect is made to send test.php off to /test/.

Of course because of the condition you could change the last line to just be:

RewriteRule ^.*$ /test/? [R=301,L]

However it's handy to know of both options.

Query Strings

Another pointer I had to work out for myself was that on this last line, the new URL can have a question mark at the end of it (/test/?). The difference with this determines whether a query string is appended to the end or not. For example, let's say you actually had the URL of test.php?id=hello and you wanted this to go to a: /test/?id=hello and b: /test/

So first off you need to update the condition to check on it having a query string. If you don't want to be too specific then you can easily do this with the following:

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /test\.php[^/]*\ HTTP/

This means that after test.php there is an option of other characters, other than a forwardslash. This would then make the condition true for test.php or test.php?id=hello. So to get this to redirect to /test/?id=hello you would change the last line to not have a question mark at the end ie.

RewriteRule ^.*$ /test/ [R=301,L]

This would then produce the desired effect and append any query string to the end of the new URL. To do the opposite of this, just add the question mark in, and then any query string would be ignored.

Summary

The above code will actually now allow you to set up mod rewrite however I've just gone over the bits that got me stumped, afterall there's more than enough literature on the subject. The sites that got it through to me were

• Changing Dynamic URLs to Static URLs – Webmaster World
• Mod Rewrite Tips and Tricks – Search Engine Watch
• URL Rewriting – HTMLSource

Plus an understanding of Pattern Matching may be of use too.