George Edwards

At the moment I’m aware some of the styles are slightly off what they are intended to be on this site. As far as I know, the image border problem affects IE and Firefox users. It seems to be ok with Safari.

Over the next few days I will look at solving the problem.

I use a nifty piece of software on my Mac called XAMPP, which flawlessly installs an entire PHP and MySQL (along with other features) development environment.

Of course, Mac OS comes bundled with Apache and there’s a lot of info on the Internet to help you configure the factory installed Apache with PHP and MySQL. That said, it’s much easier just to get a whole package that does it for you.

Not convinced? Take a look. You can even get it for Windows, although from experience I find WAMP does the job perfectly.

The most alluring feature of Apache is the ability to configure multiple hosts on one single machine. Professional web hosting companies use the same technique I will demonstrate here in order to host several websites on one physical node, whilst maintaining individuality for the hosted sites. It’s a little thing called “virtual hosts” and it’s something I couldn’t live without.

Let me give you a small example. I currently have four virtual hosts configured on my MacBook. This means that when I open my browser and navigate to “http://ge”, I’m forwarded to a local copy of this site for development purposes. I also have another - “http://xampp” which is a site for accessing the XAMPP administration page and a further two. You see the point. Whilst all DNS names point back to localhost, Apache sends each one to a seperate virtual directory containing a different site.

Configuring hosts
Before doing anything, you need to set up your hosts file. On a Mac, it’s easy to find, in /etc/hosts. I won’t cover doing that here, there are plenty of sites around the Internet to help you. If you’re a grizzled networking veteran you’ll know that hosts is a local file used for DNS resolution.

Specifying the virtual hosts
The thing I noticed with XAMPP is that the build of Apache it installs doesn’t like the standard virtual hosts configuration you specify with WAMP and other builds. In fact, it took me a good few days to find the technique in order to actually get it up and running properly. You should know where your virtual hosts are specified. In the standard httpd.conf file, Apache includes a file seperately for easy management of virtual hosts. You’ll need to un-comment this line:

# Virtual hosts
Include /Applications/xampp/etc/extra/httpd-vhosts.conf

On boot-up, XAMPP now knows to look in the extra directory for a file called httpd-vhosts.conf. Sure enough, with the original name of “vhosts”, this is where you specify your virtual hosts configuration.

This is the bit I found tough - the syntax to use. Luckily for you, all you have to do is copy what I write and fill in the blanks with your bits:

Quite obviously, you’ll see you will need to create a site directory within the htdocs directory to hold your site. Next, you should have noticed the ServerName and ServerAlias conditions. This bit - specified as “ge” for the purpose of this guide - should be the name of your local server that you’ve already configured to point back to 127.0.0.1 in your hosts file.

There isn’t much else to write on this topic. Obviously, it goes without mention, before expecting any changes to take effect you’ll need to restart your XAMPP installation.

If you have any problems, leave me a comment and I can help you out. Good luck and happy developing!

First of all, let me start by confessing that I’m not an expert in .htaccess modification. This is something I’ve learnt and I will guarantee that there will thousands of developers who know this topic like the back of their hand. Therefore this little tutorial is for those guys who may have been searching for simply ages for an answer that doesn’t seem to be out there. So please, if you’re an experienced programmer, please do me the liberty of leaving out all the usual flaming stuff that can be found on the likes of YouTube. Instead, please take the liberty of contacting me directly. With that said, let’s move on.

Well finally after a good few days searching solid for how to do it, I’ve done it. What am I talking about? Well, what seems like a basic PHP design tactic these days is tidying up your user’s address bar by using mod_rewrite on Apache. Not only that, but it also makes site design, as well as link management and organisation much, much easier.

I’ll give you an example, if you don’t know what I’m on about. Have you ever been to a site and noticed that in the address bar you see a link that resembles http://acmeinc.com/products or http://someblog.com/archives? The main thing to notice here is that usually people are used to http://acmeinc.com/products.html or http://someblog.com/archives.php - however this isn’t happening in this mod_rewrite technique. It looks much tidier, and makes maintaining the site a lot easier.

What’s going on under the bonnet?

First I need to explain exactly what is happening behind the scenes for those who don’t know. Apache, the server technology of a site, is receiving requests for web addresses, as you’d expect. If a user navigates to http://someblog.com, Apache will automatically look for the default page (usually something along the lines of index.html index.php), and dish it back out to the user. Let’s take a practical example. Consider Facebook - which dishes you out http://www.facebook.com/home.php. All good, but it’s ugly (at least by modern web standards).

Now with this little technique which you’re about to learn, things change. Mod_rewrite modifies the requests by “rewriting” the request that Apache receives from a user’s browser. The mod_rewrite rule I use appends “index.php” to a request if what’s requested isn’t found. Now you know what’s happening behind the scenes, let’s move onto how you can apply this to the structure of the site.



Applying this to a site

Ok, so what we discussed above seems very pointless at first, and usually people struggle to think how they can apply this to benefit their site. However, Wordpress is a good example of how people use it to help them. The technique I use is organising pages into folders that resemble what you would usually use as page names. Considering my site, I have several main sections. Let’s take my portfolio as an example. Usually, you may decide to use “portfolio.php”, and include this in your navigation however in my case things aren’t working this way. I actually have a folder called portfolio in the root of my server, and within that folder, an “index.php” file containing all the juicy content you would originally expect in the “portfolio.php” file.

Can you seen what happens here? So all my links will point simply to “/portfolio” (yes really, view my source) instead of “/portfolio.php”, which means Apache will get a request for http://www.george-edwards.co.uk/portfolio and deal with it by appending “index.php” onto the end.

You should now start to see things taking shape. This theory doesn’t work too greatly with a WordPress driven site (I find the file structure of WordPress pretty messy), but if you use it for developing your own site, you’re going to have a very tidy looking site structure which makes development in a text editor surprisingly simple.

Here’s an example. Consider you’re making a simple site for “Apache Software Ltd.”. Apache (like the name?) may want a typical four page setup - Products, Contact, About and News. Nothing unusual here. But let’s think about the directory structure (click the picture and look at our example in motion):

Here you can see it in action. Your navigation would be very simple in this case. You may use a PHP include to grab navigation elements from the header.php file in the include folder. But the case remains the same - your links would all be along the line of “/products”, “/contact”, “/about” and “/news”. The same effect happens in the address bar. Your user would be looking at “http://apachesoftware.com/products” and they would never see the ugly “index.php” on the end. Imagine just how simple it is to manage, having everything in folders like that!

Modifying .htaccess to add the rewrite rule

One thing is left. We need to re-do the htaccess file. Simply add the following to the end of the file and restart your Apache service:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

Enjoy. Any thoughts? Let me know via the comment feature.