Our code for today will make your website URLs clean and attractive. Clean URLs are user and SEO friendly, it does not contain any query string (e.g. param1=something&id=1111) thus giving your users and search engines (like Google) an idea what your link is all about once it was shared or indexed.
Smashing Magazine has this beautiful clean URL. |
We are going to use .htaccess (hypertext access) rewrite rules to achieve these clean URLs. The .htaccess file provide a directory level configuration that is supported by several web servers such as Apache.
Some Examples
Below are other example websites with clean URLs.You know this blog, don't you? :)) |
Chris' blog. |
David's blog. |
Let's Code
- Our .htaccess and PHP files are placed in the "htaccess-clean-urls" folder.
- .htaccess uses regular expressions to identify which PHP file will be loaded on the browser, based on the parameter(s) given.
- We have 4 example codes below.
Example # 1: URL with two parameters: letter and number
This URL:
http://localhost/htaccess-clean-urls/parameter_letter_and_number.php?param=post¶m2=143
Is equivalent to this clean URL:
http://localhost/htaccess-clean-urls/post/143
.htaccess code used:
RewriteRule ^([a-z]+)\/([0-9]+)\/?$ parameter_letter_and_number.php?param=$1¶m2=$2 [NC]
PHP page used: parameter_letter_and_number.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Clean URL with .htaccess by http://codeofaninja.com/</title> </style> </head> <body> <h1>Parameter: Letter and Number ONLY. This is parameter_letter_and_number.php</h1> <?php echo "PARAMETER VALUE 1: " . $_REQUEST['param']; echo "<br />"; echo "PARAMETER VALUE 2: " . $_REQUEST['param2']; ?> </body> </html>Output screenshot:
Example # 2: URL with one parameter: name of the PHP file
This URL:
http://localhost/htaccess-clean-urls/login.php
http://localhost/htaccess-clean-urls/register.php
Is equivalent to this clean URL:
http://localhost/htaccess-clean-urls/login/
http://localhost/htaccess-clean-urls/register/
.htaccess code used:
RewriteRule ^([a-z]+)\/?$ $1.php [NC]
PHP page used:
login.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>login - Clean URL tutorial with .htaccess and PHP by http://codeofaninja.com/</title> </style> </head> <body> <h1>Login. This is login.php</h1> </body> </html>register.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>register - Clean URL with .htaccess and PHP by http://codeofaninja.com/</title> </style> </head> <body> <h1>Register. This is register.php</h1> </body> </html>Output Screenshots:
Example # 3: URL with one parameter: numbers
This URL
http://localhost/htaccess-clean-urls/parameter_number.php?param=5254
Is equivalent to this clean URL:
http://localhost/htaccess-clean-urls/5254/
.htaccess code used:
RewriteRule ^([0-9]+)\/?$ parameter_number.php?param=$1 [NC]
PHP page used: parameter_number.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>parameter is number - Clean URL with .htaccess and PHP by http://codeofaninja.com/</title> </style> </head> <body> <h1>Parameter: Number ONLY. This is parameter_number.php</h1> <?php echo "PARAMETER VALUE: " . $_REQUEST['param']; ?> </body> </html>Output Screenshot:
Example # 4: URL with one parameter: numbers with underscore
This URL:
http://localhost/htaccess-clean-urls/parameter_number_and_underscore.php?param=143_5254
Is equivalent to this clean URL:
http://localhost/htaccess-clean-urls/143_5254/
.htaccess code used:
RewriteRule ^([0-9_]+)\/?$ parameter_number_and_underscore.php?param=$1 [NC]
PHP page used: parameter_number_and_underscore.php
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>parameter is number and underscore- Clean URL with .htaccess and PHP by http://codeofaninja.com/</title> </style> </head> <body> <h1>Parameter: Number and Underscore ONLY. This is parameter_number_and_underscore.php</h1> <?php echo "PARAMETER VALUE: " . $_REQUEST['param']; ?> </body> </html>Output Screenshot:
Complete .htaccess code used:
<IfModule mod_rewrite.c> RewriteEngine on RewriteRule ^([a-z]+)\/([0-9]+)\/?$ parameter_letter_and_number.php?param=$1¶m2=$2 [NC] RewriteRule ^([a-z]+)\/?$ $1.php [NC] RewriteRule ^([0-9]+)\/?$ parameter_number.php?param=$1 [NC] RewriteRule ^([0-9_]+)\/?$ parameter_number_and_underscore.php?param=$1 [NC] </IfModule>More references:
If you want to learn more, here's a mod_rewrite or regex cheat sheet.
An In Depth Guide to mod_rewrite for Apache
Apache mod_rewrite
The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)
website