Most of the programmers might have encountered a design break issue while using mod rewrite rule in htaccess to override websites dynamic url with SEO friendly URLs
SEO friendly URLs
Search Engine Friendly URLs are purely structural URLs that do not contain a query string and instead contain only the path of the resource.
A dynamic url may look like:
http://www.awebsite.com/index.php?act=search&key=vacancies
this url may not look so pretty
You can rewrite this to a SEO friendly URL like this
http://www.awebsite.com/search/vacancies
Even though the webpage is called as http://www.awebsite.com/search/vacancies in background server is accessing the actual url of the webpage ie, http://www.awebsite.com/index.php?act=search&key=vacancies
This is done by using mod_rewrite rule in htaccess file.
Apaches mod_rewrite rule is a really sophisticated module which provides a powerful way to do URL manipulations. With it you can do nearly all types of URL manipulations you ever dreamed about.
in the .htaccess file add this
RewriteEngine On
RewriteBase /
RewriteRule ^search/([a-z0-9\-_]+)(/)?$ index.php?act=search&key=$1 [L]
ErrorDocument 404 http://www.awebsite.com/index.html
RewriteBase /
RewriteRule ^search/([a-z0-9\-_]+)(/)?$ index.php?act=search&key=$1 [L]
ErrorDocument 404 http://www.awebsite.com/index.html
Mod rewrite - design breaks - JS and CSS Includes fails
If you are including JS and CSS file in your web pages using the relative paths like
<head>
<title> PHP techi </title>
<link rel=stylesheet type="text/css" href="include/style.css">
<script language="JavaScript" src="include/scr.js"></script>
</head>
then there is a chance like, you will see you web design break or your JS functions do not work.
this is because when you used the url rewriting the absolute url to the style.css and scr.js files (shown above) becomes :
http://www.awebsite.com/search/includes/style.css
http://www.awebsite.com/search/includes/scr.js
but it is invalid. The valid path for this files are :
http://www.awebsite.com/includes/style.css
http://www.awebsite.com/includes/scr.js
and this is the reason for your design break and JS scrpt failing.
Solution to the problem
Add a BASE tag inside the head tag just before calling all the including files.
The <base> tag specifies the base URL/target for all relative URLs in a document.
The <base> tag goes inside the <head> element.
it looks like the one below:
<head>
<title> PHP techi </title>
<base href="http://www.awebsite.com/" />
<link rel=stylesheet type="text/css" href="include/style.css">
<script language="JavaScript" src="include/scr.js"></script>
</head>
Mod rewrite - Query string checking
Usage of BASE tag
Apache Mod rewrite rule
Apache Mod rewrite Guide
It helped a lot ! Thanks
ReplyDelete