Using a base href that will work locally and on server - php

Following on from a question I asked yesterday that I ended up finding a solution for, I've now run into another problem that I've been trying to solve with no luck.
I'm testing php files with XAMPP and in order to allow stylesheets in header.php to work everywhere, I used the following line in the header.php file.
<base href="http://localhost/folder-name-here/">
It works while I'm testing locally, however, I'm working on a site cleanup for someone else as practice (I'm a beginner) and I've already assumed that this won't work if the site is pushed to the server - the person I'm working with has also asked why I don't use something relative to the root.
I've seen various suggestions online, like using:
<base href="~/>
or
<base href="/">
but unfortunately, none of these are working.
Not sure of what else I could try at this point. Any ideas?

Instead of the base tag i would use $_SERVER['HTTP_HOST'], this returns the base url from your site (localhost) or when it is online the website (example.com).
I picked the link from your previous post and modified it.
<link rel="stylesheet" type="text/css" href="<?php echo $_SERVER['HTTP_HOST']; ?>/assets/sf.css"/>
Ofcourse if this is not working as you like you could also create a php variable for it that you modify
<?php
$baseUrl = 'localhost/folder';
$baseUrl = $_SERVER['HTTP_HOST'].'folder';
?>
<link rel="stylesheet" type="text/css" href="<?php echo baseUrl; ?>/assets/sf.css"/>
this way it is easy to adjust all the links at once when you deploy to a webserver
edit:
for when discussion chat room closes this was the solution that kinda worked,
<link rel="stylesheet" type="text/css" href="//<?php echo $_SERVER['HTTP_HOST']; ?>/kinderwunschpraxis_site/assets/sf.css"/>

Related

Php - CSS elements wont load

I am new to this board and since I sadly couldn't find the answer while searching for it, I thought I should post it here :P
Enough from me, I've got the following problem:
I made a website (for practice) and tried to make a guestbook in it.
Worked out pretty well so far, yet I have one big problem. As soon as I try to get from one .php page to another .php page and include a HTML page on there, it wont load the CSS elements anymore.
When going from a .html page to a .php page and including a HTML page, it works perfectly fine.
I've also checked if the path are correct, and if this bug appears on more than just that one .php page, and yea, it made always problems in that scenario.
Here are the include and stylesheet I am using (I hope that's all you need as information)
include('gaestebuchAfterLogin.html');
<link rel="stylesheet" href="../../css/style.css" type="text/css">
Edit:
here is some more code:
<?php
session_start();
?>
<?php
if(isset($_SESSION["login"]))
{
include('gaestebuchAfterLogin.html');
}
else
{
include('gaestebuchFail.html');
}
?>
<?php
session_start();
?>
^ one PHP Element
<?php
if(!isset($_SESSION["username"]))
{
echo "Bitte erst einloggen";
exit;
}
?>
^ the second PHP Element (for example)
well, as said, the include works perfectly fine, when i haven't been on a .php page before. But if i have been on a php page before, it wont work anymore
Edit2:
sorry for posting in answers and thanks for the quick responses :P
Anyways, tried to use the absolute path now, did not work out, too
try and use absolute paths instead, change:
<link rel="stylesheet" href="../../css/style.css" type="text/css">
into:
<link rel="stylesheet" href="/css/style.css" type="text/css">
This:
<link rel="stylesheet" href="../css/style.css" type="text/css">
Or create a path variable from root using $_SERVER to get your url.
Define it and then include your php in the page.
$app_url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/';
define("APP_URL",$app_url);
and then
<link rel="stylesheet" href="<?php echo APP_URL?>css/style.css" type="text/css">

Logic for calling the stylesheet

I am baffled by this and I am hoping someone can indicate at a highlevel where my thinking is faulty.
I have a simple PHP programme
- index.php includes a file /common/header.php
- header.php links to the stylesheet.
Issue 1 which I think has baffled other people but I have not seen a reply that answers the question directly.
If I put the style sheet in the root folder (in the same place as index.php), then I can link to the file without a path
<link rel="stylesheet" type="text/css" href= "style.css" />
The point is that the style sheet is relative to index.php NOT the the header.php when it is included in index.php. Is this correct?
Issue 2 is really odd. When i put the file in a folder I can link to it as
<link rel="stylesheet" type="text/css" href= "/common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "common/style.css" />
or
<link rel="stylesheet" type="text/css" href= "styles/style.css" />
and so on.
BUT, this fails if I name the folder css. Anyone?
There is one other point which might be relevant. I am using WAMP and this website is set up with a virtual host.
That is, I have the host set up in the hosts file in Windows/System 32 and in the Apache httpd.vhosts.conf file.
That means that the index.php file is in the root directory and /common/style.css is functionally equivalent to common/style.css.
Any tips for understanding this would be much appreciated. thanks.
First of all, a relative link to a path in html is completely different from one that is in PHP.
in PHP your document root might be /var/www/example/ while in html this could be http://www.example.com/
the client browser that reads the HTML as no idea of where your html is echo'd location wise other then the entry script (in this case : http://www.example.com/index.php)
So if i just refer to
<link rel="stylesheet" type="text/css" href= "/css/style.css" />
and put the stylesheet in /var/www/example/css/style.css then it doens't matter what the location of header.php is and where it is echo'ed, as long as it is in relation the to entry script (index.php in this case)
Issue 1:
Your problem is not one of PHP, but rather of HTML. CSS is applied by the browser after it has received the HTML source. So when your index.php is the script that outputs the content, all resources your reference in your html will be relative to the path this file is in.
Issue 2:
the difference between
<link rel="stylesheet" type="text/css" href= "/common/style.css" /> and <link rel="stylesheet" type="text/css" href= "common/style.css" /> is that version 1 will only work as long as /common resides in the root of your web server. It's an absolute path (starting with /) while version 2 is relative and would also work if your file was /xyz/common/style.css.
I have no idea why this should not work with the name css though. You should probably retry this.
Thanks everyone. That was fast.
To sum up the include problem which I suspect many people have. The path to the stylesheet must be relative to index.php not header.php.
The other problem I have solved. Some files were inadvertently copied into C:/wamp/www, i.e., the normal root. I cleaned all those out and the odd problem of refusing to play with a folder call /css went away. So this is a two fold problem beginning with 1. mess and 2. being something to do with the virtual host not working properly. At least the fog has lifted. Thank you all.
And for DarkMukke, "Anyone?" is phatic. It is a social nicety most likely used by newbies to convey respect when they realise the problem is as much to do with their own fog as anything technical. Or in geek-speak, the newbie is tipping their hat to anyone who will give them 5 mintues to set them straight.
Thanks everyone.

Add domain URL to href and src relative paths

I'm using a MVC model and I can invoke webpages with URLs like http://mywebsite.com/product/productid.html. My folder structure is the following:
views - the views folder
js - the javascript and jquery folder
css - the stylesheets folder
images - the images folder
In views folder are contained web pages used to show data to the users. They can include scripts, images and stylesheets. The following snippet is incorrect
<link rel="stylesheet" href="css/style.css" media="all" type='text/css' />
since the webpage is called with the URL above, and css can't be found with a relative path. To solve the problem, I have defined a DOMAIN variable in PHP and changed the code into
<link rel="stylesheet" href="<?php echo DOMAIN;?>css/style.css" media="all" type='text/css' />
This works, but forces me to add the <?php echo DOMAIN;?> snippet to each href and src attribute on each page. Is it possible to automate it? I've tought to use the :before selector but I don't have idea how to use it in this case.
Any ideas? Thanks in advance.
:before only applies to CSS, so that's not of use here.
There's really no way to do automatically add it in PHP that wouldn't be cpu-intensive, and/or require a significantly more complex setup than it sounds like you have right now. Using find-and-replace in your code editor is the best option.
Using <?= DOMAIN; ?> instead would be shorter, BTW. (See this question for more info)

Stylesheet not loading. URL duplicating on click

I have a big prob. We have a site that was working just fine but I was doing some fine tuning and somewhere along the line i messed things up. possibly in the .htaccess file.
My problem is that my css style sheet doesn't load nor do my images. ahh! They are all there.
I emptied my .htaccess file and deleted my robots.txt just to eliminate any blocking but that didn't fix it.
I validated my css file with The W3C CSS Validation Service and it said:
file not found: http://easybuildingproducts.ca/www.easybuildingproducts.ca/style.css
I feel like it has something to do with the fact that the URL is duplicated. It does that now when i click a link to any of my pages. It should be either or not both those links together. Is it possible a google cached my .htaccess or robots.txt when there was a potential redirect error? Is there a loop happening somewhere?
I was in the midst of making a custom 404 error page when this all went down.
www.easybuildingproducts.ca
Easy fix
<link href="www.easybuildingproducts.castyles/inside.css" rel="stylesheet" type="text/css">
That needs to be either one of the following
<link href="/styles/inside.css" rel="stylesheet" type="text/css">
or
<link href="http://www.easybuildingproducts.ca/styles/inside.css" rel="stylesheet" type="text/css">
I looked at the actual website source to find this example. there are quite a lot like it
Change the href to "/style.css" instead of writing your full domain out. Do the same kind of thing for all other resources that failed to load, too.
This will fix your problem, and it will also make your markup compatible if you decide to migrate to a different dsomain name in the future.
Your resources aren't being loaded (css, js, jquery, etc). Take a look at the screenshot taken from my Chrome Dev Tools > Sources tab:
This is because of your resources' file paths. It is definitely not a good idea to reference all of your resources with "www." in the file path.
Change
<link href="www.easybuildingproducts.castyle.css" rel="stylesheet" type="text/css" />
into
<link href="/castyle.css" rel="stylesheet" type="text/css" />

PHP Page-Specific Scripts and Styles Not Recognized

I have a site built with PHP includes. For scripts and styles that are used on only one page, I call them with a variable. So the header include contains this line:
<?php echo $additional; ?>
And a particular page that requires additional scripts and styles contains these lines:
<?php $additional = '<link href="/assets/style_tabbedpanels_calendar.css" rel="stylesheet" type="text/css" /><link href="/assets/style_calendar.css" rel="stylesheet" type="text/css" /><script src="/assets/script_tabbedpanels_t-l.js" type="text/javascript"></script><script src="/assets/script_calendar.js" type="text/javascript"></script><script src="/assets/script_yahoo-dom-event.js" type="text/javascript"></script>'; ?>
I didn't break each style and script onto a new line because I found that causes problems. Generally, this has worked fine, but the calendar and yahoo-dom-event scripts that I just added aren't running at all. I know this because everything works if I put them directly in the header include.
So I was wondering if I'm doing something wrong when defining the additional variable on the individual pages?
Thank you.
The problem seemed to be the order of the scripts. When I moved the yahoo one in front of the others, it started working.

Categories