So I've recently discovered how to use php includes to include a footer and header in each of my files to avoid copy pasting all the header/footer code to each file. But let's say I have a footer.php, header.php, home.php, and about.php
Do I have my title, opening html/body tag, etc. in the header.php or home.php and about.php.
//header.php
<html>
<head>
links to header.css
links to home.css
links to about.css
</head>
<body>
//home.php
<?php include("header.php"); ?> //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
</body>
</html>
What Should I do to fix this? One way I thought of is to remove the beginning part(html,head,title) of the header.php file and move it home.css and about.css so they each have their own css links.
You're on the right track. Break out the stylesheets as well as the javascripts into other php files and include them as well. So all pages have the following structure.
home.php
<?php $this_page = "home.php";
include "template.php";
For other pages, just replace the $this_page variable. The structure common to all pages is actually the template.
template.php
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- CSS-->
<?php include "stylesheets.php" ?>
</head>
<body>
<!-- common header -->
<?php include "header.php" ?>
<section>
<!-- PAGE CONTENT HERE determined by $this_page value -->
<!-- 'content_home.php', 'content_about.php'... have the content-->
<?php include "content_$this_page" ?>
</section>
<!-- common footer -->
<?php include "footer.php" ?>
<!-- link javascript files -->
<?php include "scripts.php" ?>
</body>
</html>
The only thing that changes from one page to the next is the value of $this_page. It's what determines which content gets loaded in the template above, and it also determines which CSS and JS files to include.
stylesheets.php
<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live
//Link each page to its CSS file
$styles = [
'home.php' => 'home.css',
'about.php' => 'about.css',
'contact.php' => 'contact.css',
];
?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>
The same approach can be used with the javascript you link to in scripts.php. Now that your HTML is into discrete modules, it is easy to edit a part of your site without worrying about another part breaking. In particular I recommend never to open a tag in one php file and close it in another because that would be a nightmare to debug, maintain and modify as your site gets bigger.
About paths:
Remember that when the browser sees the page, in place of include "stylesheets.php" and include "scripts.php", it will see the echoed contents of that file exactly as they are. So in those files you want your path to be either:
absolute paths from your domain root (simplest)
relative paths from the location of the top-level php file (eg home.php)
just the file name, if it is located in PHP's include PATH (places where PHP looks for content by default before throwing an error)
For header and nav you have to create a seperate file like nav.php which will contain only the nav and your site header not <head></head> and include it after your header.php. LIKE
//Home.php
<?php
include("header.php"); this will contain your head part mostly your .css and .js files
include("nav.php"); This will only contain header and nav
// home.php code goes here
?>
Also use below code will automatically get path to your root.
<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>
Then Add your files like this
<link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">
the bottom line is your code being accessible & easy to maintain, I would have a head.php, header.php & footer.php file. In the head.php you may want to include your config.php if you are connecting to a database & also have all the <html><head><title><link><script> tags you will include in every page then on your index.php or home.php
include('head.php');
include('header.php');
etc etc
Related
my problem is that i have a navbar and need to put i on each page.
So Home, Profile, Search, Add have the same navbar fixed in bottom.
Now i want to save the links to the page in a diffrent file.
So something like:
<div class="botnav">
<a class="active" href="links.php?$homelink">Home</a>
Profile
Search
Add
</div>
is this even possbile with GET or POST?
Thank you
I think you need to create a page with your code:
header.php
<div class="botnav">
<a class="active" href="links.php?$homelink">Home</a>
Profile
Search
Add
</div>
In each page you can call that with
<?php include ('header.php'); ?>
The way I include a nav menu to be used on different pages is with PHP's include statement include().
<?php include("path_to_header"); ?>
What I recommend is to create a few extra files: path.php and header.php to hold your nav menu.
The path.php file should be located in the root of your project so that __FILE__ provides the actual root project path.
<?php
define("ROOT_PATH", realpath(dirname(__FILE__)));
?>
Next, handle the header being in a separate file header.php for reference.
<div class="botnav">
<a class="active" href="links.php?$homelink">Home</a>
Profile
Search
Add
</div>
Then in each of your pages include() the path.php file and also the header.php with another include statement where ever you choose.
<?php include("path.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>El test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Include header file where you need -->
<?php include(ROOT_PATH . "/header.php"; ?>
</body>
</html>
I created a index.php file that's uses <?php require("sidebar.html"); ?> to include a sidebar; the HTML element of the sidebar shows, however the css styling isn't showing. I've search Google and tried different method but it's not showing, any help would be highly appreciated.
The sidebar.html is located in HTML/ folder. And index.php is located in root/ folder
The css styling for the sidebar is being reference within the sidebar.html file
My css file is located in CSS/ folder
new to web development; Trying to make a sidebar that I can call on every page instead of hard-coding it to every page.
When you include an HTML file into a PHP script, path to all the related files (i.e. files that are referenced in the HTML document) must be relative to the PHP script in which you have included the HTML.
Have a look at the file structure below:
Home
index.php
Includes
Assets
style.css
action.js
header.html
The Assets directory contains CSS and JS files which are included in header.html. Now, if header.html has to be included in index.php that is inside the Home directory, the src/href attributes need to point to the path of css/js files relative to index.php.
Something like this:
<link rel="stylesheet" href="../Includes/Assets/style.css" />
Happy coding :)
Prepare a BASE URL at the top of the page like below (based on your project directory location).
Try
$baseURL = "http://".$_SERVER['SERVER_NAME'];
or
$baseURL = "http://".$_SERVER['SERVER_NAME']."/your_project_dir/";
Use HTML base tag in your <head> tag before your<link> tags like
<html>
<head>
<title>Project Title</title>
<base href="<?php echo $baseURL;">
<link href="your_css_file.css" type="text/css">
</head>
<body>
page content
</body>
</html>
Cross check your "your_css_file.css" location (like css/your_css_file.css or styles/your_css_file.css ...)
Try to add
<style>
...
</style>
In the first and end of your css require file, the css will read as internal stylesheet. And change the extension .css to
.php
I have my index.php call to insert a html section during the page load:
index.php:
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- navigation -->
<?php include 'navigation.html'; ?>
</body>
</html>
navigation.html:
<div>
<p class="paragraph-inline">Welcome to the amazing navigation system!</p>
</div>
Ok, it's an simple example, the jist of the matter is that at the moment the navigation.html is rendered entirely before being inserted into the page. This means the css is not being called and can only be called if I include the css within the html blob.
I would prefer not to include css into every blob (footer, header, etc...)
So how can I force the site to load the html and apply the styles afterwards? I only want one css link at the top of the main page.
Your navigation should be .php as well. I'm not sure if there are options as far as syntax, but I write it like this <?php include("whatever-partial.php"); ?> This has never been an issue for me. I usually make a head.php with the boring stuff, and then include that in the header.php - and then an index.php - which pulls in header.php and footer.php for example. The server reads all that php - and spits out an html page that is served to your browser and applies the styles. It's not dynamic.
Make sure your include is a php file - then it will be inserted into the page before the browser gets ahold of the page and renders the css. Should be simple as that.
So I'm dividing my index.php page into three sections: top, middle, bottom. The middle section will have different html php inlude pages and therefore will require different style sheets. Do I link the specific stylesheets in the individual php include pages, or in the index page? Because in the index page, the different style sheets don't seem to take effect, why is that?
Say your about page has a custom css file it needs you could do something like this:
about.php
<?
$css = array('path_to_css_file', 'path_to_another_css_file');
require_once('header.php'); // aka the top
?>
[about page content goes here]
<?
require_once('footer.php'); // aka the bottom
?>
The in your header.php file you could do this:
header.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main_style_sheet.css" />
<?
if (isset($css) && is_array($css))
foreach ($css as $path)
printf('<link rel="stylesheet" type="text/css" href="%s" />', $path);
?>
</head>
<body>
This way you only load what you need for the given page.
I have menu.php, and in the <head> section of menu.php, I have menu.css as a link rel tag of course, both of which work perfectly fine.
Since menu.php is a 'menu', I've required it on pages that need a 'menu' in order to navigate around the website. However, whenever I require menu.php on a page that has its own CSS stylesheet, menu.php inherits the <body> font-size of the other stylesheet.
Here is what I'm trying to say: So if I require menu.php on profile.php, menu.php elements will become the size of profile.css, instead of what they really ought to be(menu.css). How can I fix the following problem? Currently, I am requiring menu.php BEFORE the <html> tag.
Should I put this within <head>? Somewhere else?
Thank you.
Some of the code from menu.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
</body>
</html>
I've put my PHP code before the <html> tag in the file above.
The below code comes from main.php:
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
If I understand you correctly, you include a complete html page generated by menu.php before the html in main.php. That would get you 2 <html> sections, 2 <body> sections, etc. in one document. That should lead to lots of trouble.
You should include your menu in for example a div inside the main page like (just an example):
main.php:
<body>
<div id="nav">
<?php require 'menu.php'; ?>
</div>
...
</body>
and put all menu styles in the main style-sheet, pre-fixed with #nav. Or as a separate style-sheet, but still pre-fixed with #nav (every style) so that they overwrite the main document's styles.
Could you paste the content of your menu.php? Because if there are and section there...you're doing it wrong, because in that way you're going to have two head and two body parts. Think for require in php as copy and paste.
Your options:
Migrate to some template system(as Smarty for example).
If there should be menu.php on each page, why not putting this css as static file in the header
Paste some code, so we could help you easier ;)