A blog with some random tech-related thoughts. From web development to some cool gadget reviews. Hope you'll find it interesting to read and to come back.Friendly URLs, the easy way
If you ever wonder how to create those cool links to your pages, here’s a short tutorial…
Those “old” links like http://www.example.com/index.php?p=1&s=2&t=ok are history, the new look-and-feel is http://www.example.com/news/technology/.
There are number of advanteges with using this friendly URLs:
- visitors can easily see where is their current location within your website
- easy to remember direct links to a certain page on your website
- Google “reads” your website more accurate and gives a better search results, so this is also a very good SEO technique (a must-have one actually)
I’ll show you an implementation of friendly URLs using XAMPP (my favorite “PHP server package” that I would recommend). XAMPP is an easy installation package that combines Apache+PHP+MySQL and even some other modules, and it works great.
First step is to check that Apache web server loaded a module that is responsible for handling URL rewrite.
Open the “C:\xampp\apache\conf\httpd.conf” file and search for “mod_rewrite.so” and check that the line is uncommented.
Then you need to create a new directory alias in Apache web server. If you’re using XAMPP the location of configuration file is at the following location: C:\xampp\apache\conf\extra\httpd-xampp.conf
Open that file in your favorite text editor and add something like:
-
Alias /example "C:/xampp/htdocs/www.example.com/"
-
<Directory "C:/xampp/htdocs/www.example.com">
-
Options +FollowSymLinks
-
AllowOverride All
-
Order allow,deny
-
Allow from all
-
</Directory>
where “C:/xampp/htdocs/www.example.com/” is the location to your website files and /example is a directory alias you just created.
Now you need to restart the Apache.
The previous step was needed to setup the usage of .HTACCESS file. Here you can find more information on .HTACCESS file usage, but just for now, as a beginner, all you have to now is that .HTACCESS file is a on-the-fly Apache configuration for your website that is placed at the root of your website.
Next step is to create .HTACCESS file and set it’s “actions”.
In the root folder of your website (”C:/xampp/htdocs/www.example.com/”) create a new text file with .HTACCESS filename and write the following instructions into it:
-
RewriteEngine on
-
RewriteBase /example
-
-
RewriteRule ^news/$ index.php?page=news
Just for testing purposes, create another new text file with INDEX.PHP filename and write the following code into it:
-
<?php
-
?>
Save the file and point your web browser to: http://localhost/example/news/
As a result you should see a “news” text printed out in the web page.
What we actually did is a simple URL rewriting, or you might say a transparent (for visitor) URL redirection from one URL to another. With our .HTACCESS instruction Apache “transformed” typed-in URL into a INDEX.PHP call with one variable sent using GET method (”?page=news”).
That’s it. This is a rather simple example, and if you don’t have many pages you might think of using this method for friendly looking URLs on your website, but on a larger website you might wanna do some more complicated stuff, like this:
-
RewriteEngine on
-
RewriteBase /example
-
-
RewriteRule ^news/(0-9A-Za-z_-]+)$ news.php?topic=$1
The create a new NEWS.PHP file:
-
<?php
-
?>
And point your web browser to http://localhost/example/news/technology/
Then point your web browser to http://localhost/example/news/politics/
The previous example is using some RegExp instructions to make this subsection of a website dynamic. This way you can handle subsections without the need to write one line in .HTACCESS for each of them. But, be very carefull how you handle this dynamic URLs as they are potential security risk!
There is another nice usage of this URL rewriting method - point your old links to a new one. If your don’t want to lose visitors that are coming from Google search results to your old pages that don’t exists anymore, you should point them to a new address, and here is how:
-
RewriteEngine on
-
RewriteBase /example
-
-
RewriteRule ^old-link.html$ new-link.html
July 18, 2008 @ 8:43 am
nice article … very useful and informative
July 21, 2008 @ 6:06 pm
Hey,
I have tried this with my xampp setup. I have created a folder in my htdocs called http://www.example.com, in that folder i have added the two files mentioned, with their exact contents. Then i added the lines you mentioned to httpd-xampp.conf . When i type in my browser: http://localhost/example/news/ i get a object not found page. What am i doing wrong?
greets
July 21, 2008 @ 6:10 pm
Hey i tried everything you said, ceated the exact same situation you describe, a folder named http://www.example.com with the .htacces and index.php file, with their contents mentioned. Then i added the lines you mentioned to httpd-xampp.conf . Now i restart xampp, and in my browser go to http://localhost/example/news/ but now i get a object not found page. What can i be doing wrong?
greetings!
July 22, 2008 @ 9:07 am
Well, I just remembered that I forgot to mention one more thing :) and I’ll make an update to a post…
If you followed all the steps from this article exactly as I described, then you might wanna check that Apache web server loaded a module that is responsible for handling URL rewrite.
Open the “C:\xampp\apache\conf\httpd.conf” file and search for “mod_rewrite.so” and check that the line is uncommented.
Restart Apache after this change and it should be working now.
Let me know if this help you solving the problem and if not please check that made all the steps as I explained and send me more detailes on error if possible…
Regards
July 22, 2008 @ 2:35 pm
Hello,
Thanks for your reply, i indeed already uncommented that line, since i read that elswhere. I retried the whole process, but still a page not found. I Put everything together in 1 screenshot, on the left my 4 files, first the uncommented line, second the added lines, 3rd my .htacces file with your code, and last my index.php. On the right you see the page in dutch stating “Object not found”, “Error 404″. Also i restarted Apache and xampp. Hope we can work this out. :p i am already working with .htacces directly on my webserver, but would like to practice it on my computer offline aswell.
greetings!
July 22, 2008 @ 2:37 pm
Oops, forgot the screenshot, here it is:
http://snuur.nl/uploader/martijn/urlsrwriten_in_xampp.jpg
July 23, 2008 @ 12:24 pm
That is very strange. I just did the whole thing on my computer with copy/paste all the code from the above, and it worked with no problem.
I really can’t think of anything else you could try, but I’ll keep you posted if I remember something…
Regards
July 23, 2008 @ 2:13 pm
Hm, well i’ll try to install the english xampp, maybe that’ll work.
July 23, 2008 @ 2:23 pm
That shouldn’t be the reason not to work, but please let me know if you manage to fix this at your computer…
July 23, 2008 @ 9:13 pm
hmmm, I did, really all there was to it was that i called the .htaccess file .htacces so 1 s short, and i didnt notice it all the time. Got it working now!
however i am having some difficulties. When using a css file witch works fine at this adress:
http://localhost/alsa/?lang=en
When i converted this adress to http://localhost/alsa/en/ my CSS isnt working anymore.
the line to my css file is:
already tried to put a slash in front of stylesheet.css, that didnt work, and the same goes for all my images with relative paths used.
Hope you can help me out.
My htaccess file here is:
RewriteEngine On
RewriteBase /alsa
RewriteRule ^index/(.*)/$ index.php?lang=$1
greetings!
July 24, 2008 @ 1:29 pm
hah, I’m glad you made it, it’s always some minor bug that keeps you awake all night long when trying to solve it :)
yes, CSS, that is something I haven’t mention (but that wasn’t really the issue on this topic)… you’ll have to use FULL URL to locate your CSS and JS files, and everything else you’re including through HTML…
create a config.inc.php file and write “< ?php $url = "http://localhost/example/"; ?>” into it, then, in HTML wherever you’re calling some external source (images also, basicaly everything), place < ?=$url;?> before…
you might also try playing with RegExp rules on rewriting this automatically, but I haven’t got the time to test that case yet…
August 11, 2008 @ 7:46 am
hello buddy
i have followed the steps.
even the line in httpd.con is uncommented
but i am facing error 404 obj not found
i came to know from some friends that i have to make changes in some sys 32 files
coz the the things are working fine on other computer
where the settings are ok
please help me about same..
thanks
August 14, 2008 @ 1:01 pm
Well, I didn’t make any changes to sys32 folder or anything else. I made a clean install of XAMPP, configure Apache for mod_rewrite and did all the steps from above.
Why don’t you ask friends about those sys32 changes?
Whish I could help you more on this…
Regards
August 20, 2008 @ 1:55 am
Hey, that was a nice article, congrats…
It would be nice if you could explain what every line of code does for us less technicaly adept with Apache :)
For example, I’m curious what each of the four lines of code between the directive in the Apache configuration file does…
I know I can find the details on the .HTACCESS file usage on Apache.org but it’s still nice to have it all in one place.
Still, very informative and useful article.
Keep up the good work!
September 29, 2008 @ 7:38 pm
I have an asp site I am rewriting in php. I want discussion.asp?A=51 to go to discussion.php?A=51. I have been looking for a rewrite example, and not found or understood this part exactly. I can not pass the A=51. This is some of what I have tried.
RewriteRule ^discussion.asp(.*)$ /discussion.php?&A=$1/ [L]
RewriteRule ^discussion/(0-9A-Za-z_-]+)$ /discussion.php?A=$1 [L]
RewriteRule ^(.*)discussion/(.*)$ $discussion.php?A=$2
ewriteRule ^discussion/([^/ \.]+)/?$ discussion.php?A=$1 [L]
Thanks for any help!
October 12, 2008 @ 2:37 am
Very good article for seo