I'm trying to create a portfolio website. This is my third attempt, and I've been attempting to use PHP files for the first time. In my previous websites, I would copy large swaths of HTML into each page so that they would be formatted the same. With this website, I'm instead just trying to link to a few PHP files that contain code shared by multiple pages, like the navigation bar for instance.
My issue is this. Say in my index file
mywebsite/index.php
I include this PHP file which contains HTML code for a navigation bar
<?php
echo <<<EOT
<!-- Navigation Bar -->
<div id="nav">
<a class="nav-link" id="index-link" href="">About</a>
<div class="nav-divider"></div>
<a class="nav-link" id="resume-link" href="resume">Resume</a>
<div class="nav-divider"></div>
<a class="nav-link" id="portfolio-link" href="portfolio">Portfolio</a>
<div class="nav-divider"></div>
<a class="nav-link" id="contact-link" href="contact">Contact Me</a>
</div>
EOT;
?>
However, the way the links work, if I wanted to include this same navigation bar in a sub-directory webpage
mywebsite/portfolio/index.php
All of the links would stop working.
I've tried doing absolute paths to the root, but then the webpage's url shows the absolute path as well, including things public_html in the url which looks bad.
I've tried doing paths like "mywebsite.com/..." and "mywebsite/..." but thats just shows up as "mywebsite.com/mywebsite/..." and doesn't actually work. If I try saying "public_html/..." public_html becomes included in the url.
I don't want to create a second PHP file just to have the same code with slightly different href paths. Is there a path I could use for both my main directory and subdirectories that doesn't show up weird in the url? If not, is there a way to use Javascript or Jquery to detect if a file is in a subdirectory, and add "../" to all links inside the included PHP files?
I can't seem to find an answer to this question, maybe I'm not using the right words in my searches? This feels like it would be a common issue.
Related
I have my header file for my website and a bunch of images that are inside the header that I want to link to various pages within the website.
I'm currently referencing the images from within the header file like this:
<header>
<div id="menu">
<div class="table">
<ul id="horizontal-list">
<li> <img src="../home page/home.png" alt="Home Page" width=150 /></li>
<li> <img src="../dashboard page/dashboard.png" alt="User Dashboard" width=150 style="padding-left: 35px;" /></li>
</ul>
</div>
</header>
The problem with this approach, since those file paths are relative, they don't work if I reference the header file from a sub directory that upon traversing those relative file paths, it's unable to find the files located.
Since I have my web pages all inside different directories, using this approach means that while the files in one directory will be able to find the images for the header file perfectly ok, the web pages inside another directory aren't able to find the images.
I tried changing my relative file paths to absolute file paths like so:
change
"../home page/home.php"
"../home page/home.png"
to
"C:/xampp/htdocs/login/website php version/home page/home.php"
"C:/xampp/htdocs/login/website php version/home page/home.png"
but this didn't work either
I am having trouble properly setting up navigation on my website. I am putting the navigation into my header and I want to get all of the links to work no matter what layer in the file structure that the webpage is on.
This is my file structure:
Website (directory)
index.php
resources (directory)
includes (directory)
html_codes.php
Game (directory)
game_info.php
resources
Characters (directory)
characters_info.php
Players (Directory)
players_info.php
Inside the html_codes.php is a function that builds the header for the website. I use this function to create the header at the top of all of my web pages. However the hyperlinks that navigate around the website do not work in any layer except the top-level directory because their relative position has changed.
Is there a way to get the links to work in
./index.php
./game/game_info.php
./game/Characters/characters_info.php
./game/Characters/Players/players_info.php
from the same create_header() function?
My create_header() function:
function create_Header(){
echo '
<div id="top_header">mywebsite.com </div>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Game</li>
<li>Characters</li>
<li>Players</li>
<ul>
</nav>
';
}
*********************************EDIT***************************************
Okay, I used your suggestions and it solved some problems and created others.
First off, turning the paths from relative to absolute worked but it required that I change the path names to
/Website/index.php
/Website/game/game_info.php
/Website/game/Characters/characters_info.php
/Website/game/Characters/Players/players_info.php
which is fine but I don't understand why. I assume it is because the Website directory is a sub-directory for C:\xampp\htdocs\Website.
The other issue is that my include functions don't work with this absolute path.
The relative path for the include inside of game_info.php before was
include("./../includes/html_codes.php");
which did and still does work.
I have tried both
include("/includes/html_codes.php");
include("/testphp/includes/html_codes.php");
and they did not work.
Two things
1. i recommend not making capitalized folder names in your source and in this header. otherwise some browsers may require the capitalization by your users. which isn't really standard.
2. i recommend you use absolute paths (removed .)
function create_Header(){
echo '
<div id="top_header">mywebsite.com </div>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Game</li>
<li>Characters</li>
<li>Players</li>
<ul>
</nav>
';
}
Put a forward slash / in front of your paths to make them absolute.
Go home
This will ensure that you're always starting from the same place (root), and that your links are independant from the hierarchy.
If your website is live, you can use an absolute URL like this one :
Go home
./ is relative to the current directory. There are two ways to solve it. The first one: keep using relative paths, but let them move up as well. So if you are on ./game/Characters/characters_info.php, the directory is ./game/Characters/, and the path to home is ../../index.php.
So you'll need to know not only the depth of the current page, you'll need to get up to a level that is shared between the current page and the target page. After all, both could be two levels deep, but still are in a different directory.
I think a better (at least much easier) way is to use an absolute path. To do that, you can just start with a / to have the absolute path from the domain name.
Optionally, you could configure an 'installation path' or 'base directory' to start each path with. It could default to just '/', but you could set it to another value if the site was entirely in a subdirectory.
So the header would look like:
<div id="top_header">mywebsite.com </div>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Game</li>
<li>Characters</li>
<li>Players</li>
<ul>
</nav>
Or, with a base path variable, you can move the site to another directory, just change the variable, and everything will still work. Very convenient for testing and development. The normal value for this variable can just be ''.
<div id="top_header">mywebsite.com </div>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>Game</li>
<li>Characters</li>
<li>Players</li>
<ul>
</nav>
The header for my website is the same across all of it so instead of rewrite the code and link the style sheets, i've decided to use the <?php include ;?> to put it at the top of every document.
My issue is that the logo that should come with the header isn't displaying.
File Structure
As you can see, the header file is where it is and the logo named "Picture2.png" is in the image folder.
PHP
<?php include('./_/includes/header.php'); ?>
HTML (In header.php)
<nav id="navigation">
<ul id="navList">
<li id="navLogo"><img src="/image/Picture2.png"/>Computing</li>
<li><a class="navItem" href="gallery.php">Gallery</a></li>
<li><a class="navItem" href="topics.php">Core Topics</a></li>
<li><a class="navItem" href="courseview.php">Courses</a></li>
<li><a class="navItem" href="index.php">Home </a></li>
</ul>
</nav>
Part of header that isnt' displaying correctly
NOTE** everything else in the header is correctly displayed, I'm using a local server, should that make a difference
You are using an absolute path for your image.
You should put and use a relative path :
<img src="_/includes/image/Picture2.png"/>
instead of
<img src="/image/Picture2.png"/>
Yep, hes using an absolute path for image, but the project isn't in server root folder then you need's to inform the name of the folder in path...
Use <img src="/finalprojectneat/image/Picture2.png"> then you have your logo display on every page. But is not the most indicated because when you send to production server, you didn't have the "finalprojectneat" folder then you have to remove all paths using "projectneat".
One solution is to define a constant in your "index.php", not necessary in "index.php" but required in root folder of project
define ('_IMAGES_', realpath(dirname(__FILE__) . '/image'));
if you put this constant in another file inside root folder, use "require" to import these constants to your views...
and in your views, use
<?php echo _IMAGES_ . '/Picture2.png'; ?>
Okay so I have my navigation for my entire website in one single file called: navigation-sidebar with the following code right now,
<ul class="sidebar-nav">
<li class="sidebar-brand">Candy Kingdom</li>
</ul>
I then have the actual code for my website pages in the folder called: pages
I am wanting to create a php foreach statement in navigation-sidebar that creates the <li> </li> for each file in the folder pages.
I am not sure how to tell php how to read a directory and create based on that directory. I'm not wanting to type the navigation manually.
Use foreach the glob function:
foreach(glob("pages/*.html") as $page){ // to get all the extentions use "*.*"
print('<li class="sidebar-brand">Candy Kingdom</li>');
}
Im trying to put a link to local html file called Rules.html,
but for some reason I cannot make it work.
Html file is in the same folder as my php file.
Note that Im running my forum on localhost:1337, Should that be somewhere in that line too?
Here is my piece of code:
<li class="copyright">
<a class="rules" href="file:///C:/xampp/htdocs/SMF/smf_2-0-6_install/Themes
/Fresh_v2_RC5/Rules.html">Rules</a>
</li>
I would suggest using relative links. So the link would be
href="theFile.html"
if it's in the same folder as the file you are trying to write the link in.
Use relative path from your root dir. Root dir is a dir where located your html file within this code. For example, if you put this code in html file, located in htdocs dir, so the relative link is:
<li class="copyright">
<a class="rules" href="SMF/smf_2-0-6_install/Themes/Fresh_v2_RC5/Rules.html">Rules</a>
</li>
If it is in the same folder as the file you are calling it from, you can just call it by name, instead of it's complete path.
<li class="copyright">
<a class="rules" href="Rules.html">Rules</a></li>
Also, if you are calling it by it's full path name, you do not want to use file: to open a linked html document. You would call:
edit: (added // in front of localhost.)
<li class="copyright">
<a class="rules" href="//localhost/../Rules.html">Rules</a></li>
And pull it up in your apache server. Using file is like opening the file in your file system, but to view html, use your web server.
As others have said, it's easiest in this case to simply use relative urls.
The way to do this with the code you've provided:
<li class="copyright">
<a class="rules" href="Rules.html">Rules</a>
</li>
Make sure that this Rules.html file is in the same directory (dir) as the file from which you're calling it. If not, you'll need to do some directory traversing to get to it.
Here's a question with some helpful examples.