CSS not loading after URL rewriting - php

I am trying to rewrite URL from example.com/test.php?id=hd3j3 to example.com/id/hd3j3.
The problem is rewriting occurs and I am taken to the page but the css and js of the page doesn't load. Where am I going wrong?
.htaccess
RewriteBase /
RewriteEngine On
RewriteRule ^id/([A-Za-z0-9]+)$ test.php?id=$1 [L]

Your rewrite rule looks right for me.
Maybe your css gets loaded from a relative path and not absolute ?
<link href="css/layout.css">
The browser try to load from example.com/id/css/layout.css instead of example.com/css/layout.css

Try to clear the cache and retry ! This usually works.Or set the root path correctly.
If these won't work try this,
If you want to use image tag and show to correctly images, use
" />

Related

Clean URL's using htaccess breaks my css

I'm trying to clean my URL path's so that I don't have any GET parameters and PHP extensions in all of my links. As an example for what I'm trying to achieve:
http://localhost/projectname/?page=dashboard
needs to be:
http://localhost/projectname/dashboard/
And it actually works, I used the following code in my .htaccess:
RewriteEngine on
RewriteCond %{REQUEST_URI} dashboard/
RewriteRule dashboard/ http://localhost/projectname/?page=dashboard
However, the page displays itself without any CSS or Javascript. I tried navigating to my Style.css only to find out that it looks exactly like the webpage itself, instead of showing me my CSS rules.
So what am I doing wrong? Please don't mark my question as a duplicate, I've been looking into similar questions but couldn't solve the problem.
You're changing the relative URI when your URL goes from /projectname/ to /projectname/dashboard/.
When that happens, every relative link on the page will have the wrong base added to it. The browser has no idea that the base is actually /projectname/ when all it sees is the location being at /projectname/dashboard/.
Right now, when your css is linked like:
<link rel="stylesheet" href="Content/style.css">
The browser attempts to resolve it by adding the base from the location, and it'll load:
https://localhost/projectname/dashboard/Content/style.css
which doesn't exist because the "dashboard" isn't actually a folder.
You can either add a base to the actual page by including this in the page header:
<base href="/projectname/" />
Or you can try to un-rewrite the dashboard out of the request (a bit trickier and more error prone) by adding this rule
RewriteCond %{REQUEST_URI} ^/projectname/dashboard/(.*\.css)$
RewriteCond %{DOCUMENT_ROOT}/projectname/%1 -f
RewriteCond ^projectname/dashboard/(.*\.css)$ /projectname/$1 [L]
Note that does this may have an unintended impact on your browser's cache.
Use the absolute path to the CSS.
<link rel="stylesheet" href="http://localhost/projectname/assets/style.css">

Page resources fail to load when removing '/' slash from URL upon .htaccess redirect

I have a simple redirect rule as follows:
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^contact-us\/?.*$ ./contact-us.php [NC,QSA,L]
This rule works fine for the following URL:
http://localhost/folder1/folder2/folder3/contact-us/
The problem is that if I remove the final slash, the page loads properly but the resources (css/js) are not loading
http://localhost/folder1/folder2/folder3/contact-us ----> This fails
It seems it is omitting a folder when trying to load the resources so rather than http://localhost/folder1/folder2/folder3/js/jquery.js, the URL for the JS resource is being set as http://localhost/folder1/folder2/js/jquery.js
Is there a concept missing here with the rules? How to make both URLs work?
This is happening due to your use of relative paths in js/css etc.
To fix, you can add this just below <head> section of your page's HTML:
<base href="/folder1/folder2/folder3/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.

.htacces Appears only html with no CSS or PHP

I've been wondering on the internet on how to work with htacces(really hard to learn it). And when I was lurking in the internet, I found this: http://www.generateit.net/mod-rewrite/
Well, I inserted my url(working on localhost):empresa.com/index.php?p=sub_artigo&id=1&cat=Mercearia
and it gave me this(with all options by default):http://empresa.com/sub_artigo/5/Mercearia.html
And the .htacces code was this:RewriteRule ^([^/]*)/([^/]*)/([^/]*)\.html$ /index.php?p=$1&id=$2&cat=$3 [L]
And when I generate the url in php I do
$response2[nome_sub_artigo]
And then, when I click the button, it appears like, only html.
example: http://s14.postimg.org/wr137fx4x/htacces_error.jpg
Any idea what is happening ?
It looks like you are using relative links for your assets (images, javascript, css).
That means that when you look for css/my_stylesheet.css, from the new url, the browser will request a url like http://empresa.com/sub_artigo/5/css/my_stylesheet.css.
The easiest solution is to always use absolute urls for your assets, like /css/my_stylesheet.css, etc.
Your PHP code is outputting relative paths to the style sheets.
Example:
<link rel="stylesheet" type="text/css" href="styles.css">
Given your example input URL, this causes the browser to look for a stylesheet at the following URL:
http://empresa.com/sub_artigo/5/styles.css
This is because the browser doesn't know that the URL has been rewritten - it believes it is viewing a file in a subdirectory that doesn't really exist.
Instead you should use an absolute path, such as:
<link rel="stylesheet" type="text/css" href="/styles.css">
Notice the leading / on the path? This will tell the browser to look from the root of the domain:
http://empresa.com/styles.css
In this way you can still decouple your HTML from the protocol and domain/port (so you aren't tied to http://empresa.com) but the path will always be the same regardless of the URL that was used to reach the referencing page.
Try this code :
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]*)/([^/]*)/([^/]*)\.html$ /empresa.com/index.php?p=$1&id=$2&cat=$3 [L]

RewriteRule - html broken - Like missing css

I have problem with this rule:
RewriteRule ^([^/]+)/(\d+)$ more.php?books=$1&tags=$2 [L]
After this rule everything works but page is displayed incorrectly. Like missing css.
Thanks in advance
This might happen, when you have a relative URL to your CSS files. If you access the URL /book-name/2 and have a link to css/style.css, for example, the browser will resolve this to /book-name/css/style.css.
Change your CSS links to absolute URLs, like /css/style.css, and you should be fine.

Use mod_rewrite to change directories to variables... does this work?

If I have a link, for example: dashboard/xyz/fff/ and I use modrewrite to change it to dashboard/?loc=xyz&action=fff when the page loads are loc and action available as variables to use?
If so, then here's a specific example I can't seem to get to work. My rule as it sits:
RewriteRule ^getclients/([a-z\-]+)$ /dashboard/?action=getclients&module=$1
And the link that is sending them to that url:
<li>SEO Analysis</li>
I want now to be at .com/dashboard/?action=getclients&module=$1 and use those variables to load the page content that's needed.
However: Now the page redirects to what I believe is the "right page" but the CSS is all broken. I only have plain text. Feel free to suggest another way to achieve the same effect as well perhaps using jQuery and Ajax or something to load up sections of the site.
Thanks!
If you don't want to use absolute paths, you can try rewriting the requests for images, javascript, and css. Maybe something like this:
RewriteCond %{REQUEST_FILENAME} \.(js|css|png|jpe?g|gif)$ [NC]
RewriteRule ^getclients/(.+)$ /dashboard/$1 [L]
Make sure that the file locations are exact, or the server might send the data from the wrong relative directory.
For loading css, images, js files properly from a different relative path you should specify a base URL for all relative URLs on a page like this:
<base href="http://www.example.com/dashboard/" />

Categories