mod_rewrite messing up Header/Stylesheets

**DoubleDee** · Aug 10, 2011 18:55

I am making an attempt at my first mod_rewrite and having troubles.

It works, BUT it also ignores (?) my Header, Footer and Stylesheets.

Here is my code...

.htaccess

Code:

#PRETTY:		articles/postage-meters-can-save-you-money
#UGLY:			article.php?title=postage-meters-can-save-you-money

RewriteRule articles/([a-zA-Z0-9_-]+)$ article.php?title=$1

Here is part of my article.php file...

Code HTML4Strict:

<body>
	<div id="wrapper" class="clearfix">
		<div id="inner">
			<!-- Include BODY HEADER -->
				<?php	require_once(ROOT . 'components/body_header.inc.php');	?>
 
			<!-- MIDDLE COLUMN -->
			<div id="middle_2col">
				<div class="box_Content">
 
					<!-- ARTICLE -->
					<div id="article">

And here is my config.inc.php file...

PHP Code:


<?php

    define('ENVIRONMENT', 'development');

//    define('ENVIRONMENT', 'production');





    // File Root

    define('ROOT', ENVIRONMENT === 'development'

                    ? '/Users/user1/Documents/DEV/++htdocs/01_MyProject/'

                    : '/var/www/vhosts/MyWebsite.com/httpdocs/');



    // Web Server Root

    define('WEB_ROOT', ENVIRONMENT === 'development'

                    ? 'http://localhost/01_MyProject/'

                    : 'http://www.MyWebsite.com/');



    // Secure Web Server Root

    define('SECURE_WEB_ROOT', ENVIRONMENT === 'development'

                    ? 'http://localhost/01_MyProject/'

                    : 'https://www.MyWebsite.com/');

?>

What did I do wrong?

Debbie

**Dan Grossman** · Aug 10, 2011 23:05

The rewrite rule wouldn't affect any of that code. What's the problem you're having?

If your stylesheet isn't loading, it's probably because you used a relative path, and now the browser is requesting it relative to the articles/ directory of your URL where the "ugly" URL used to be in the root of the domain. Change to using a root-relative URL (/stylesheet.css) or absolute URL (http://www.example.com/stylesheet.css) in the <link> tag.

**dklynn** · Aug 11, 2011 05:25

DD,

What you did wrong is to change directory levels via mod_rewrite. It's not wrong, just the effect caused by not letting the browser know it's in a different directory level than it requested. As I discuss in my tutorial Article, you have two options: Use absolute links or use the HTML <base> command (example provided in the article - look for topic "Relative Links Are Missing!").

Regards,

DK

**DoubleDee** · Aug 11, 2011 09:53

Originally Posted by dklynn

DD,

What you did wrong is to change directory levels via mod_rewrite. It's not wrong, just the effect caused by not letting the browser know it's in a different directory level than it requested. As I discuss in my tutorial Article, you have two options: Use absolute links or use the HTML <base> command (example provided in the article - look for topic "Relative Links Are Missing!").

Regards,

DK

But if you look in the code I posted above, you'll see I was using an absolute path.

Code:

<!-- Include BODY HEADER -->
 <?php   require_once(ROOT . 'components/body_header.inc.php'); ?>

I'm not sure what the mod_rewrite did to this statement above, but it shouldn't have changed my constant ROOT, right?

I've been stuck on this all week and am soooo frustrated (and behind schedule)?!

Thanks,

Debbie

P.S. Dan, my page runs but I just get an HTML page with no Styles of (Styled) Header and Footer.

**Dan Grossman** · Aug 11, 2011 10:17

Debbie,

That PHP code is still working exactly the same as it did before the rewrite rule.

The problem is with your HTML, not your PHP code.

View the source of your page in your browser, the contents of body_header.inc.php are there.

You have, in that header file, a <link> tag pointing to your stylesheet.

That <link> tag's href is not an absolute path/URL.

It no longer points to the right location because your URL now reflects a directory named /articles/ and your stylesheet is not in the same location *relative to that*.

So while none of your code changed, your stylesheet URL became incorrect because of your new URL scheme. That's what you need to fix.

If it says something like

Code:

<link rel="stylesheet" href="styles.css" />

the browser is going to request http://www.yoursite.com/articles/styles.css, which isn't where the stylesheet is.

If it says something like

Code:

<link rel="stylesheet" href="css/styles.css" />

the browser is going to request http://www.yoursite.com/articles/css/styles.css, which isn't where the stylesheet is.

You need to change the path to be root-relative

Code:

<link rel="stylesheet" href="/styles.css" />

or a full absolute URL

Code:

<link rel="stylesheet" href="http://www.example.com/styles.css" />

which will point to http://www.yoursite.com/styles.css no matter what the current page URL is.

**DoubleDee** · Aug 11, 2011 11:05

Dan,

Okay, at least I think we identified the correct problem!

Now I'm equally frustrated that I can't get this working because now I have a dumb PHP issue?!

I am trying this as it has served me well in other contexts...

Code:

<?php
	echo '<link type="text/css" rel="stylesheet" href="' 
	. ROOT 
	. 'css/dropdown.css" />';
?>

Where...

Code:

<?php
	define('ENVIRONMENT', 'development');
//	define('ENVIRONMENT', 'production');


	// File Root
	define('ROOT', ENVIRONMENT === 'development'
					? '/Users/user1/Documents/DEV/++htdocs/01_MyProject/'
					: '/var/www/vhosts/MyWebsite.com/httpdocs/');

	// Web Server Root
	define('WEB_ROOT', ENVIRONMENT === 'development'
					? 'http://localhost/01_MyProject/'
					: 'http://www.MyWebsite.com/');

	// Secure Web Server Root
	define('SECURE_WEB_ROOT', ENVIRONMENT === 'development'
					? 'http://localhost/01_MyProject/'
					: 'https://www.MyWebsite.com/');
?>

So what is wrong with my syntax, because I am getting:

Notice: Use of undefined constant ROOT - assumed 'ROOT'

Debbie

**DoubleDee** · Aug 11, 2011 11:07

Originally Posted by Dan Grossman

Debbie,

That PHP code is still working exactly the same as it did before the rewrite rule.

The problem is with your HTML, not your PHP code.

If it says something like

Code:

<link rel="stylesheet" href="styles.css" />

the browser is going to request http://www.yoursite.com/articles/styles.css, which isn't where the stylesheet is.

Is there some way to actually see this wrong path so I could have problem-solved this myself?

Debbie

**Dan Grossman** · Aug 11, 2011 12:29

Not sure what's wrong with your define statements (is that code before the code where you try to use the constants?).

But you would want to use WEB_ROOT or SECURE_WEB_ROOT in your <link> tag, not ROOT, because it's a URL, not a filesystem path.

Originally Posted by DoubleDee

Is there some way to actually see this wrong path so I could have problem-solved this myself?

If you want to see the browser make the request, you can do so with the Firebug plugin for Firefox, or the Developer Tools in Chrome.

**DoubleDee** · Aug 11, 2011 12:35

Originally Posted by Dan Grossman

Not sure what's wrong with your define statements (is that code before the code where you try to use the constants?).

But you would want to use WEB_ROOT or SECURE_WEB_ROOT in your <link> tag, not ROOT, because it's a URL, not a filesystem path.

If you want to see the browser make the request, you can do so with the Firebug plugin for Firefox, or the Developer Tools in Chrome.

I tried this in my <head> section.

Is the issue we are trying to fix also affecting my "config/config.inc.php" file as well?

Debbie

**DoubleDee** · Aug 11, 2011 12:40

Originally Posted by Dan Grossman

Not sure what's wrong with your define statements (is that code before the code where you try to use the constants?).

Here is my <head> section...

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<!-- HTML Metadata -->
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description"
				content="">
	<meta name="keywords"
				content="">
 
	<!-- Page Stylesheets -->
	<link type="text/css" rel="stylesheet" href="css/main.css" />
 
<!-- NEW -->
	<?php echo '<link type="text/css" rel="stylesheet" href="' . WEB_ROOT . 'css/dropdown.css" />'; ?>
 
	<link type="text/css" rel="stylesheet" href="css/components.css" />
	<link type="text/css" rel="stylesheet" href="css/listing.css" />
</head>

Is the issue we are trying to fix also affecting my "config/config.inc.php" file as well?

Debbie

**Dan Grossman** · Aug 11, 2011 13:35

Originally Posted by DoubleDee

Is the issue we are trying to fix also affecting my "config/config.inc.php" file as well?

No. The rewrite rule does not change how any of your code works.

Originally Posted by DoubleDee

Here is my <head> section...

Are you including config.inc.php before this header file? The code you pasted does not answer the question.

I would forego the constants altogether and just use paths relative to the root of the domain.

Code:

    <link type="text/css" rel="stylesheet" href="/css/main.css" />
    <link type="text/css" rel="stylesheet" href="/css/dropdown.css" />
    <link type="text/css" rel="stylesheet" href="/css/components.css" />
    <link type="text/css" rel="stylesheet" href="/css/listing.css" />

Those <link>s will point to the same URLs no matter what the URL of the current page. You won't need to define separate constants for http/https either.

The difference is the slash at the beginning of each URL. You can do the same with image tags and script tags.

**DoubleDee** · Aug 11, 2011 13:39

Originally Posted by Dan Grossman

Are you including config.inc.php before this header file? The code you pasted does not answer that question.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head></head>
 
<body>
	<!-- Access Constants -->
	<?php	require_once('config/config.inc.php');	?>

Debbie

**Dan Grossman** · Aug 11, 2011 13:42

Originally Posted by DoubleDee

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head></head>
 
<body>
	<!-- Access Constants -->
	<?php	require_once('config/config.inc.php');	?>

Debbie

I don't understand how this is related to the code before, which also had <head> tags. Where is this from? Is it before or after you include the header file? If you have this, then include the header file, the HTML for your page would not be valid... it'd have two <head> sections and two <html> tags, one set inside the <body> of the page.

**dklynn** · Aug 11, 2011 16:45

OMG!

First, DD, without an R=301 flag in your redirection, you HAVE changed the perceived directory level to articles/, NOT your DocumentRoot!

Second, you are NOT using absolute links for your css (as Dan has told you) because all you need is

Code:

<link rel="stylesheet" href="/styles.css" />

Same treatment required for images, js, etc. BECAUSE the browser is requesting them from the articles/ directory, not from your DocumentRoot (which the http protocol accesses).

Regards,

DK

**DoubleDee** · Aug 11, 2011 21:22

Originally Posted by Dan Grossman

I don't understand how this is related to the code before, which also had <head> tags. Where is this from? Is it before or after you include the header file? If you have this, then include the header file, the HTML for your page would not be valid... it'd have two <head> sections and two <html> tags, one set inside the <body> of the page.

That was my way of saying I was being dumb and had my config file AFTER my <head> tags which have the problematic <link> in them.

Debbie

**DoubleDee** · Aug 11, 2011 21:36

Originally Posted by dklynn

OMG!

First, DD, without an R=301 flag in your redirection, you HAVE changed the perceived directory level to articles/, NOT your DocumentRoot!

That would explain A LOT of the problems I have been having!!

So what is the exact syntax??

Current mod_rewrite

Code:

#PRETTY:		articles/postage-meters-can-save-you-money
#UGLY:			article.php?title=postage-meters-can-save-you-money

RewriteRule articles/([a-zA-Z0-9_-]+)$ article.php?title=$1

Possible new mod_rewrite???

Code:

#PRETTY:		articles/postage-meters-can-save-you-money
#UGLY:			article.php?title=postage-meters-can-save-you-money

RewriteRule articles/([a-zA-Z0-9_-]+)$ article.php?title=$1 [R=301]

Second, you are NOT using absolute links for your css (as Dan has told you) because all you need is

Code:

<link rel="stylesheet" href="/styles.css" />

Same treatment required for images, js, etc. BECAUSE the browser is requesting them from the articles/ directory, not from your DocumentRoot (which the http protocol accesses).

Regards,

DK

Well, I *thought* I fixed things - even with my retarded articles/ issue by doing this...

article.php

Code:

<!-- Page Stylesheets -->
<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT; ?>css/main.css" />
<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT; ?>css/dropdown.css" />
<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT; ?>css/components.css" />
<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT; ?>css/article.css" />

config.inc.php

Code:

<?php
	define('ENVIRONMENT', 'development');
//	define('ENVIRONMENT', 'production');

	// Web Server Root
	define('WEB_ROOT', ENVIRONMENT === 'development'
					? 'http://localhost/01_MyProject/'
					: 'http://www.MySite.com/');
?>

However I have discovered that the images in my articles are now not working because they have paths like:

h t t p: //localhost/01_MyProject/articles/%3C?php%20echo%20ROOT;%20?%3Eimages/some_image.jpg

So even with my WEB_ROOT, things won't work.

If you can clarify that R=301, maybe I can get my images working too?!

Thanks,

Debbie

**Dan Grossman** · Aug 11, 2011 21:57

He was just repeating what has already been said about why you had a problem. You do not want to change your rules. Adding [R=301] would turn the rewrite into a redirect and change the URL in the address bar from the "pretty URL" bad to the "ugly URL".

**DoubleDee** · Aug 11, 2011 22:11

Originally Posted by Dan Grossman

He was just repeating what has already been said about why you had a problem. You do not want to change your rules. Adding [R=301] would turn the rewrite into a redirect and change the URL in the address bar from the "pretty URL" bad to the "ugly URL".

But DKLynn said,

OMG!

First, DD, without an R=301 flag in your redirection, you HAVE changed the perceived directory level to articles/, NOT your DocumentRoot!

And I discovered after supper that was part of my problem.

So how do I get my mod_rewrite to "point" to the WEB ROOT (instead of "articles/")?

I was able to fix the style sheet issue by doing...

Code:

	<!-- Page Stylesheets -->
	<link type="text/css" rel="stylesheet" href="<?php echo WEB_ROOT; ?>css/main.css" />

And I am trying to do this with the images in my articles, but so far the images aren't working. (I think this is because I had nested php code but now I have another issue of phpMyAdmin not accepting single quotes which is a another major issue I have to resolve before I can try my new image code.

If I could have my mod_rewrite go from "pretty" to "ugly" URL and also point to my Web Root it would make life easier...

Hope you are following me?!

BTW, the reason I do NOT want to use relative links like I believe you suggested is because I am going between NetBeans which has a diffferent file structure than my Web Host. That is the whole reason I created the config file I posted above... Because I was having hellish problems with having thing either broken in development or production and being tired of having to change code between the two?!

Debbie

**ralph.m** · Aug 11, 2011 22:17

Originally Posted by DoubleDee

the reason I do NOT want to use relative links like I believe you suggested is because I am going between NetBeans which has a diffferent file structure than my Web Host.

As an aside, you can set up a virtual server environment quite easily on your PC so that file paths are the same in both places. I just use MAMP with some simple settings on Mac, and there are PC equivalents, such as WAMP and XAMPP. It's been a huge relief.

**Dan Grossman** · Aug 11, 2011 22:19

Originally Posted by DoubleDee

But DKLynn said,
... So how do I get my mod_rewrite to "point" to the WEB ROOT (instead of "articles/")?

Yes, DK sometimes repeats things with CAPS and exclamations, but he didn't say anything new. Relative URLs are resolved to absolute URLs by the browser relative to the URL of the current page. The browser doesn't know a rewrite happened in the first place, it only knows the URL of the current page and the URLs of the stylesheets you told it to load.

If you want your pretty URLs then you have to adjust. You can't change the rewrite rule to change that while keeping the new URLs. If you give up, you're always free to go back to the ugly URLs.

I can't fathom why your stylesheet URLs are coming out as you pasted... that's what you'd get if you wrote something like <?php echo urlencode("<?php echo WEB_ROOT; ?>"); ?>... but I'm sure you didn't write that. It's difficult to provide advice when looking at disjoint, partial snippets of out-of-context code and without knowing anything about the environment. Start doing some basic debugging, like <?php echo WEB_ROOT; ?> alone in the same file, fix whatever's wrong so that you get that to print what you want it to print, then combine it with the rest of the HTML to print out the stylesheet URLs.

**DoubleDee** · Aug 11, 2011 22:28

Originally Posted by ralph.m

As an aside, you can set up a virtual server environment quite easily on your PC so that file paths are the same in both places. I just use MAMP with some simple settings on Mac, and there are PC equivalents, such as WAMP and XAMPP. It's been a huge relief.

I'm using MAMP on my MacBook.

So how do I do that? (Although I've already structured all of my other code to work with my config file - which works quite nicely!)

Debbie

**DoubleDee** · Aug 11, 2011 22:37

Originally Posted by Dan Grossman

I can't fathom why your stylesheet URLs are coming out as you pasted...

Huh?

I re-coded them that way!

By doing so, I ensure that they are absolute paths pointing back to the Web Root.

That's pretty straight-forward...

My problem now is between phpMyAdmin being a pain with single quotes and wanting to do this...

Current Code

Code:

<img src="images/some_image.jpg" width="150"
	 alt="Picture"
	 title="Picture" />
	<p>This is my article following here...</p>

I am now trying to store that in a "MediumText" field in MySQL.

I attempt to print it by using echo.

I would like to add a reference to my Web Root like this...

Proposed New Code

Code:

<?php echo '<img src="' . WEB_ROOT . 'images/some_image.jpg" width="150"
		 alt="Picture"
		 title="Picture" />
		<p>This is my article following here...</p>';

...but I seem to be having problems getting the syntax to work with my phpMyAdmin issue?!

Debbie

**Dan Grossman** · Aug 11, 2011 22:41

So that's how you did it... don't put PHP code into your database. There's no phpMyAdmin issue. When you pull it back out and echo it, it's just text, the code you put in there isn't executed.

What you should do is set up your environment locally so that your site is at its own hostname, http://yoursite.local or something, rather than a subdirectory, and change your images/scripts/stylesheets to `/images/some_image.jpg` root-relative URLs, instead of these constants.

It'll save you so much hassle. All 3 people that have participated in this thread have said so already.

Don't want to stop using the config file of constants because you already put effort into it? You already hinted at that sentiment. It's a sunk cost. It's not relevant to what you should do going forward.

Time to sleep here, I'll be back tomorrow.

**DoubleDee** · Aug 12, 2011 06:57

Originally Posted by Dan Grossman

So that's how you did it... don't put PHP code into your database. There's no phpMyAdmin issue. When you pull it back out and echo it, it's just text, the code you put in there isn't executed.

I had some semi-enlightenment last night on the way back home. (Will revisit this part of this thread when I'm out of class.)

What you should do is set up your environment locally so that your site is at its own hostname, http://yoursite.local or something, rather than a subdirectory, and change your images/scripts/stylesheets to `/images/some_image.jpg` root-relative URLs, instead of these constants.

It'll save you so much hassle. All 3 people that have participated in this thread have said so already.

Don't want to stop using the config file of constants because you already put effort into it? You already hinted at that sentiment. It's a sunk cost. It's not relevant to what you should do going forward.

Time to sleep here, I'll be back tomorrow.

Okay. Fair enough. I have been wrong in my approach.

I *did* ask Ralph above how he did what you and he are recommending in MAMP for OS X.

I'll try to research this myself too, but since it seems that all of you "got the memo" - and I didn't - then I'd prefer just have you tell me the *correct* way to do things. (Obviously when left to my own devices, I blow things up?!)

Thanks for the help so far everyone!

Debbie