I have a form handler which is written in PHP and resides in a different directory than the html files. When the handler runs, it needs to include one of the html files. The html files have relative hrefs in them, which break because the page was served from the PHP directory, not the html directory.
For example, index.html contains
<link rel="stylesheet" type="text/css" href="css/site_global.css?4013920463"/>
These links are produced by Adobe Muse and expect that "css" is a subdirectory under the location of the html files and that the page was served from the html directory. Again, since I'm serving the page from the PHP directory, the relative links break.
Short of putting in absolute paths for the hrefs, is there any other technique I should consider? I really don't want to put in absolute paths because they will break for other reasons.
Ideally, I'd like to use some sort of method that allows me to set the "working path" in the browser - so that I can tell it to fetch hrefs from the right place.
Relative paths in a browser are computed based on the current page path (see here). If you are looking at http://foo.bar/one/page.html , the site_global.css path will be http://foo.bar/one/css/site_global.css .
If I understood your question, you can use the element to set a base URL for all the relative links in the page.
See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
try $_SERVER['DOCUMENT_ROOT'], gives the path to your base directory with current working dir
or
try echo realpath(dirname(FILE));
Related
I have made my first website and I have a simple contact form that runs a php scripts to send the details inputted in the form to my email. I initially had all the files in the root directory but I am trying to tidy it up so I now have,
all html files in the root directory, I then have folders for php, css, assets, js.
I know that to link to these I need to just do something like,
<link rel="stylesheet" href="css/contactus.css"/>
I believe this tells the html to look in the root directory, then in css folder and for the file contactus.css.
This seems to work for all the css files but not for the php file ( I get a 404 error). I know this file is correct as when all the files where in the root folder it worked fine.
I currently have,
<form action="php/contactform.php" method="post">
I believe my issue is that when using href it will automatically start in the root folder but as I am not using href in this case it is not starting in the root folder. So I just need to find out what I use to link to a different folder to that of the html file (If I put the php file back in the root folder it works fine.
DIR structure
The action and href attributes work exactly same. The final url depends on how you've written the url in these parameters and what is your current url.
Let's say the current url is http://localhost/my-project/html/my-form.html
If your url in action looks like php/contactform.php this is called path relative url. To get final url the browser will append relative url after last / in current url resulting in http://localhost/my-project/html/php/contactform.php.
You can use .. in the relative url if you want to reference directory higher in the structure. Url ../php/contactform.php will result in http://localhost/my-project/php/contactform.php
If your url in action looks like this /php/contactform.php it is root relative url. The main difference is the starting /. In this case the browser will put your url right after the domain name resulting in http://localhost/php/conactform.php.
Based on your screenshot both /php/contactform.php and php/contactform.php should work fine because the url of the html file should be http://your-domain.example/DJ_contactme.html so both urls should result in http://your-domain.example/php/contactform.php
If you are using mod_userdir your url probably looks like http://your-domain.example/~dannyjeb/DJ_contactme.html in that case the php/contactform.php should work as it would result in http://your-domain.example/~dannyjeb/php/contactform.php
From DJ_Contactme.html you target css file like this:
<link rel="stylesheet" href="./css/contactus.css"/>
I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?
./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.
Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.
Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.
I am trying to make a template for my website.
Basically taking out all the common stuff out using php's include function.
I have made a navigationbar.php and samplepage.php.
navigationbar has all the links to stylesheets etc.
When they are in the same folder and I include navigationbar.php in samplepage it works just fine.
However when i move samplepage.php to a subdirectory (leaving navigationbar.php in the same folder) and
link navigationbar.php with the menu doesn't come formatted.
it seems samplepage is getting contents from navigationbar.php but navigationbar is not linking to the css files.
Can anyone tell what I'm doing wrong here?
i'm using xampp and have tried with both relative and absolute paths- (include '../navigation.php' and 'localhost/folder/navigation.php')
Make the paths of your css files absolute (i.e. start with / and specify the full path). This will allow them to work correctly from any path.
When including a file in PHP, the url's are relative to the file you are including into. Not to the file you are including.
So you need to change your paths 'navigationbar.php'
Try using something along the lines of this to link to your header/footer files:
include($_SERVER['DOCUMENT_ROOT'].'/path_to/header.php');
and then appropriately link to your .js/.css files within header.
Where your PHP files are has no direct influence. You have to make sure that the resulting HTML has the correct paths to all CSS/JS/img files etc. You may want to post your file structure here and show the code that calls the relevant CSS files.
Wondering if there is a way to use paths relative to the template storage location in the Twig templating engine.
The scenario is as follows:
I have a Typo3 website where my application resides in fileadmin/myApplication. I am using Twig as a template engine to render multilingual content that is loaded dynamically from JSON files. Some of my template files contain paths to images that, given the nature of Typo3, need to have a src-path of fileadmin/myApplication/img/...
Now, if I want to test a new version of my application, I want to be able to create a directory fileadmin/myApplication2.0 without having to change the paths to my images inside the template files.
There are templating engines (e.g. raintpl, see this link) that translate relative paths to server file paths. Is there an easy way of achieving the same effect in Twig?
e.g.
templates/template.html
img/logo.png
outputs
<img src="fileadmin/myApplication2.0/img/logo.png">
This is how rain.tpl does it:
WYSIWYG - Path replace
This cool feature allows designers to create templates as regular HTML with images and styles with relative paths, RainTPL replaces automatically these paths with the correct server paths.
Absolute paths and paths ending with # will be not changed.
<link href="style.css" type="text/css" rel="stylesheet">
<img src="img/logo.gif">
Output html:
<link href="tpl/style.css" type="text/css" rel="stylesheet">
<img src="tpl/img/logo.gif">
Note: if you set raintpl::$base_url, RainTPL will replace the path with raintpl::$base_url.
The path in the src attribute is a relative URL, not a relative file path to the file system on your server, how you organize your files inside your directories.
The relative URL will be resolved to the base URL of the document the template will be part of / present in. So you can use relative URLs, but you need to know to what they relate to to have them properly working.
In your case a quick solution might be to use
<img src="/img/logo.png">
If your website resides in the web-root.
Another way is to have a template function that takes care to build the (relative) URL according to the requested URL path. Another approach is to hard-encode a <base> href Docs in the overall template.
Another alternative is that you get the output of the rendered templates, parse the links and make them suit.
But the important part is that you need to know about the requested URL path in specific and how your template (blocks) are being used.
With absolute path as Joseph said:
<img src="/img/logo.png">
you can see the images only if your website is on a root url as
http://localhost/
it won't work on
http://localhost/myApp/
so in this case you'll need to create an host for it
http://myApp/
A template is WYSIWYG when you can see how it looks in your browser or in your html editor, so basically any templates that use relative paths.
RainTPL had the awesome idea to replace automatically the relative paths of the templates with the correct server path (relative or absolute), so you can see immediately how your template looks.
Another very good way to use WYSIWYG templates is the <base href="http://localhost/myApp/"> tag, which enables you to use relative paths. Only problem is the cross browsing and the Javascript because is not very clear if works the same in all of them.
<img src="{{ asset('img/my_image.gif') }}" alt="something" />
The asset path will resolve to the /web directory. In my example the full project path for the image would be:
Project/web/img/my_image.gif
You'll need to be using the .twig extension to use this method.
I haven't found a clear answer to this question (but have determined the HTML tag is more trouble than it's worth.)
When you're working with multiple directories on a website, how do you make sure relative links to the rest of your site work as you change your current directory? I don't want my link to "/index.php" to actually link to "/support/index.php" when I go to the support directory.
We're using PHP, so I could use output buffering to change links, but I want to see if others have any good ideas. Could also implement it through Smarty in one way or another. I haven't built a website from scratch that has used multiple directories simply because I don't know of an easy way to deal with this, but the problem shouldn't be too difficult.
(Running on IIS, but obviously it would be better to let it work on any server.)
you could declare a base_url variable, or declare a constant containing your base url
e.g.
DEFINE('BASE_URL', 'http://example.com/');
when using links
e.g.
Home
You already have everything you need
how do you make sure relative links to the rest of your site work as you change your current directory?
we're using absolute links for that
I don't want my link to "/index.php" to actually link to "/support/index.php" when I go to the support directory.
Lucky you, it will never happen
/index.php is absolute path and will never point anywhere beside /index.php.
/ is not just for decoration. It the meaning of slash at the beginning of the path is "root directory". So, /index.php means index.php placed in the root directory.
/support/index.php means index.php placed in the support directory which is placed in the root
easy-peasy. just always use absolute path (not URL which is senseless)
I store a “base” URI in two locations: (i) on the PHP/Zend Framework server, my configuration.xml file holds conventional values such as URIs; (ii) on the client side a more shallow, hidden <form/> holds other (less security compromising) values such as a base URI.
The form, by the way, looks something like this:
<form id="AppSettings" action="#">
<input type="hidden" id="MyBaseUri" value="http://superuser.com"/>
</form>
Add <base href="http://www.domain.com/"> to your <head> tag. This will make all relative links start from the directory given as href. Then use relative links like support/index.php not beginning with/ (i.e. not /support/index.php)
Note: Make the <base> tag the first tag in your <head> section, as all links after that will be interpreted from that base dir. (e.g. <link href="relative/path"> will already use the base dir if it is defined above.
Advantage: you can move your whole page to a subdirectory like http://www.domain.com/page and only have to change the <base> tag. If you use links like /support/index.php they will always start from the root directory (i.e. http://www.domain.com/)
Dynamic base dir for url rewrites:
<?php
if (preg_match("/https/i",$_SERVER["SERVER_PROTOCOL"]))
$protocol = "https";
else
$protocol = "http";
echo '<base href="'.$protocol.'://'.$_SERVER["HTTP_HOST"].dirname($_SERVER["SCRIPT_NAME"]).'/">';
?>