Apache #2: Pretty URLs and .htaccess mod_rewrite

How do I get Pretty URLs?

Ever seen professional sites with tidy urls, like www.example.com/products/small-dinosaur? Well, this is likely due to an Apache rewrite, which 'prettifies' the url - the underlying url is probably something like: www.example.com/products.php?id=small-dinosaur

What are .htaccess Files?

You should avoid using .htaccess files completely if you have access to httpd main server config file.[from the official Apache site]

If you have access to the httpd.conf file in Apache's conf directory (well, it's there in the XAMPP version, yours may be elsewhere), you can do your stuff there. However, many people get a bit twitchy with changing the main config file - if you're prone to a bit of twitchiness, make a backup copy first. If you're looking for this file on your shared hosting site, then you'll probably be disappointed.
Anyway... so what's the problem with .htaccess? Well nothing really, it's just a little bit slower than httpd.
In order to create a .htaccess file, you just need a text editor - remember to save it with a blank filename and the htaccess extension. Alternatively, save as htaccess.txt and then rename the file.
Hold on... I haven't mentioned what these .htaccess files are yet, have I? OK, the good people of Wikipedia have an entry, but in general, .htaccess files are used to:

• rewrite urls
• serve error responses, like 404 or 301
• authenticate or block users
• control caching

We'll just be looking at the first use in this post. Let's kick off and have a look at a few examples. BTW - there are some really nice rewrite generators out there - my favourite at the moment is GenerateIt.

Examples

Say we want to convert:

http://www.example.com/product.php?id=7&name=teddy_bear into:

http://www.example.com/products/7/teddy_bear

We'd need the following code in the .htaccess file:

Options +FollowSymlinks
RewriteEngine On
RewriteRule ^products/([^/]*)/([^/]*)$ /product.php?id=$1&name=$2 [L]

Here's another:

http://www.example.com/index.php?page=toys&category=dolls into:

http://www.example.com/toys/dolls/

Here's the code:

Options +FollowSymlinks
RewriteEngine On
RewriteRule ^([^/]*)/([^/]*)/$ /index.php?page=$1&category=$2 [L]

Where do I put the File?

.htaccess files are active in the directory into which they're placed and all underlying subdirectories, so if you have site-wide directives, you can place the file in your public root.

Further Resources

• Corz: http://corz.org/serv/tricks/htaccess2.php
• Apache: http://httpd.apache.org/docs/2.0/misc/rewriteguide.html
• Apache: http://httpd.apache.org/docs/current/mod/mod_rewrite.html
• Smashing Magazine: http://coding.smashingmagazine.com/2011/11/02/introduction-to-url-rewriting/
• Cheatography: http://www.cheatography.com/davechild/cheat-sheets/mod-rewrite/

Apache #1: Set up Virtual Hosts on Windows

For Windows

In order to set up your PC to work with multiple local sites, you need to find two files:

• C:\Windows\System32\drivers\etc\hosts
• C:\xampp\apache\conf\extra\httpd-vhosts.conf

Note that the second file may be in a different location, depending on how and where Apache is installed. The above shows the location when XAMPP installed to root.

hosts file

You'll notice that this file does not have an extension. It may contain the following when you open it up for the first time:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
 
# localhost name resolution is handled within DNS itself.
 127.0.0.1       localhost
 ::1             localhost

Now add the server name of your choice. I usually keep this simple, adding a '.local' so that I can recognise it easily as a local server in the address bar. For example a site called 'example.com' could have a local server name of 'example.local', but there is no need too keep these similar, you could call the server name something like 'myamazingsite.local' if you really wanted to. So, in order to add server names, you can do something like this:

# localhost name resolution is handled within DNS itself.
127.0.0.1       localhost
::1             localhost
# Add virtuals below

    127.0.0.1  diafol.local
    127.0.0.1  chemistry.local

httpd-vhosts.conf

OK, that the first bit done. Now we add an entry to the vhosts file. When you first open the file, it may look like this:

# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any VirtualHost> block.
#
##<VirtualHost *:80>
  ##ServerAdmin postmaster@dummy-host.localhost
  ##DocumentRoot "C:/xampp/htdocs/dummy-host.localhost"
  ##ServerName dummy-host.localhost
  ##ServerAlias www.dummy-host.localhost
  ##ErrorLog "logs/dummy-host.localhost-error.log"
  ##CustomLog "logs/dummy-host.localhost-access.log" combined
##</VirtualHost>

##<VirtualHost *:80>
  ##ServerAdmin postmaster@dummy-host2.localhost
  ##DocumentRoot "C:/xampp/htdocs/dummy-host2.localhost"
  ##ServerName dummy-host2.localhost
  ##ServerAlias www.dummy-host2.localhost
  ##ErrorLog "logs/dummy-host2.localhost-error.log"
  ##CustomLog "logs/dummy-host2.localhost-access.log" combined
##</VirtualHost>

In order to add the two sites from the hosts files, simple append something like the following to the end of the file:

NameVirtualHost *:80
<VirtualHost *:80>
  DocumentRoot "C:\xampp\htdocs"
  ServerName localhost
</VirtualHost>
<VirtualHost *:80>
  DocumentRoot "C:\xampp\htdocs\diafol"
  ServerName diafol.local
  <Directory "C:\xampp\htdocs\diafol">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>
<VirtualHost *:80>
  DocumentRoot "C:\xampp\htdocs\chemistry_advanced"
  ServerName chemistry.local
  <Directory "C:\xampp\htdocs\chemistry_advanced">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

Remember to restart Apache!