Easy Clean URLs with Apache’s mod_rewrite

First of all I would like to get the following out of my system:
Tutorials are supposed to be EASY! How on earth do you expect someone who is just learning to understand regular expressions, you jerk!
That felt good. Now lets move on, shall we?

You’ve seen it being used everywhere. What is a “Clean URL” and why is it so important today?

  1. It’s better for Search Engine Optimization (SEO) because it fools the search engine into thinking that the page is actually a folder or a file (depending on how you’ve written it), rather than a long URL with a thousand variables which even a regular person would think twice about crawling.
  2. It demonstrates knowledge on part of the developer. Since this is slowly becoming a standard of sorts, it’s a must-know for developers.
  3. It looks nice and clean :)

Okay, now what do you need to make this work?

  1. An Apache server with mod_rewrite function on. The following technique works ONLY on an Apache server with mod_rewite enabled. That’s right. If you use a Windows server:
    1. You’d better be using some Microsoft Technology like ASP, ASP.NET, etc. or you’re wasting your money!
    2. Here is an article to get clean URLs on the Windows (IIS) server.
  2. The ‘.htaccess’ file

That’s it!

Now, lets start. Assuming you have a web site called http://www.mywebsite.com and you have a page URL that looks like: http://www.mywebsite.com/index.php?page=green

UGLY!

Here is how you achieve clean URLs:

1. Open the .htaccess file on your root folder. If you don’t already have one, make one in Notepad or whatever, but make sure you name it ‘.htaccess’ (so that’s no name with the file extension ‘htaccess’) and upload it to your root folder (this is usually www or public_html)

2. If your .htaccess file already existed and you have some code in it already, do not overwrite it.

3. Take a backup of the .htaccess file (in case something goes wrong) . Paste the following code:

RewriteEngine on
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^([a-z\-]+)$ index.php?page=$1 [L]
</IfModule>

Note: If the line RewriteEngine on already exists in your .htaccess file, don’t paste that again.

Voila! You now have a clean URL. Now if you navigate to http://www.mywebsite.com/green , you get your page!

How does this work? The text following “RewriteRule”  is called a regular expression. It tells Apache to match a condition and if a match is found, redirect (rewrite) internally to a page.

It’s really simple:

^([a-z\-]+)$ : This part is the matching part. This means that lowercase letters a through z and the hyphen (-) are accepted. In our case, “green” falls under this category, so its counted as a “match”

index.php?page=$1 [L] : This is the part that is executed if a match is found. It tells Apache that whatever you found before the “$” is now $1. If you have two conditions, the first one would be $1 and the second $2 and so on. In our case we just matched one, so that’s stored in $1. So now $1 = green. And the page is directed to index.php?page=green .

Sweet! But what’s that [L]? It tells Apache that this is the last statement it needs to execute if a match is found and to stop right there. Just to save on time.

So basically, this entire thing is made up of:

  1. A condition which checks for a set. (Cause)
  2. A result statement which does something when a match is found. (Effect)

For more in-depth reading on this subject, click here. For another simple tutorial, click here.

Problems:

“My page loads with mod_rewrite but my style sheets and/or images don’t work!”

Obviously! Now that your browser believes that http://www.mywebsite.com/green is an actual folder, it tries to link it up from there.

Quite simply, if your code on your page for your style sheet is: <link href=”assets/css/style.css” /> it looks for it under http://www.mywebsite.com/green/assets/css/style.css , which doesn’t exist.

Simple solution:

Right after your <html> tag, insert this: <base href = “http://www.mywebsite.com/&#8221; />

Now you’re telling the browser, “Hey, from now on all links to resources on my page are to start from my base URL, okay?”

So now the browser  loads http://www.mywebsite.com/(the base URL)assets/css/style.css

Problem solved.

“This just doesn’t work!”

Make sure you are running an Apache server with mod_rewrite on. If you’re not sure, contact your web hosting company.

About these ads