I am creating my first website from scratch and had seen something where you can reduce code by using PHP includes for sections of the site that are to be repeated. So far, I have a head.php (which I added due to my stylesheet.css being linked there and needing access to it on every page), header.php, footer.php, index.php, and other pages with the php extension (about, contact, that bunch).
Everything is appearing where I'd like it to except for one issue: when setting the body background color, everything (all includes: header.php, footer.php) seems to be in the body. I tested this by setting a border around the body, and it confirmed what I thought.
Does anyone have an idea what is going wrong? I am using flexbox in my header, footer, and other bits within the index file, but I don't think that should be affecting anything.
<!DOCTYPE html>
<?php include 'head.php'; ?>
<?php include 'header.php'; ?>
<body id="main-block">
<!-- Button links to Portfolio and Other stuff -->
<div class="flex-container">
<a class="main-button" href="#">Web Work</a>
<a class="main-button" href="#">Other Work</a>
</div>
</body>
<?php include 'footer.php'; ?>
</html>
your body tag is suppose to wrap around your header and footer elements. see below markup
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php include (header);?>
<?php include (footer);?>
</body>
</html>
if u wanna change the background color of your elements just add css
element { background-color:pink }
I admit that I do not really understand your issue. But I'll give you a little snippet to start coding php:
<html>
<head>
<title>Welcome</title>
<style>
<?php include 'stile.php'; ?>
</style>
</head>
<body>
<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>
</body>
</html>
Related
I am currently building up a static website with PHP.
What I want to have is the following:
There is one main.php file that includes all the common parts of the page (header, footer, navigation and so on) and a couple of pages like index.php, team.php, contact.php and so on.
I do want to be able to edit the main.php in that way, that is effects all the pages in my project. I do however want to be able to output some specific content for each single page by writing code directly in the specific file (not main.php but e.g. index.php). So I want to assign each page of the project to use main.php as the core template.
My main.php file which looks so far like this is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Static Site Genarator</title>
</head>
<body>
<div id="navigation">
<?php echo navigation()?>
</div>
<div id="pageWrap">
<header>
Header
</header>
<main id="content">
<?php echo $templateContent; ?>
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>
and a couple of pages like index.php, contact.php and so on.
All of them look like this:
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/essentials/settings.php'; ?>
<h1>
This is the h1 for the index page
</h1>
<?php require($_SERVER['DOCUMENT_ROOT'].'/essentials/exit.php'); ?>
I deliver some settings in my settings.php file and in my exit.php file I have the following code:
<?php
$templateContent = ob_get_contents();
ob_end_clean();
echo $templateContent;
?>
I need to somehow bind all the pages to be the part of main.php at the point where I output the $templateContent variable at
What is the right way for me to achieve this?
I personally would consider using a micro PHP framework like lumen, slim, fat-free-framework for making even the smallest PHP web application.
That said, below is the solution of the approach you took to solve the problem. I will keep the file structure and file naming similar to yours, even though there is a place for improvement here.
Lets consider the following application structure:
essentials/main.php
essentials/navigation.php
essentials/exit.php
essentials/settings.php
index.php
about.php
contact.php
As you can see, I have moved all common files into the essentials folder and left all pages in the root folder
essentials/settings.php
<?php
// start output buffering
ob_start();
essentials/navigation.php
<ul>
<li>index</li>
<li>contact</li>
<li>about us</li>
</ul>
main.php
<?php $templateContent = ob_get_clean(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Static Site Generator</title>
</head>
<body>
<div id="navigation">
<?php include("navigation.php"); ?>
</div>
<div id="pageWrap">
<header>
Header
</header>
<main id="content">
<?= $templateContent; ?>
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>
<?php require_once("exit.php"); ?>
essentials/exit.php
<?php
ob_end_flush();
The actual pages structure index.php, about.php and contact.php look similar:
index.php
<?php require_once("./essentials/settings.php"); ?>
<h1>
This is the h1 for the index page
</h1>
<?php require_once("./essentials/main.php"); ?>
I hope this helps to move your idea forward, but highly encourage you to investigate time and learn a modern approach for PHP application development. Laravel is a great stating point.
Maybe you want something like this?
Structure
index.php
about.php
core\function.php
core\setting.php
templates\header.php
templates\footer.php
templates\menu.php
core\function.php - all function in here
core\setting.php - all setting in here
templates* - html page
index.php
<?php
include_once("core\setting.php");
include_once("core\function.php");
/*
* code php for this file in here
*/
$message = 'index data';
include_once("core\header.php");
include_once("core\menu.php");
echo <<<HTML
<div>show content {$message}</div>
HTML;
include_once("core\footer.php");
?>
It looks like you are looking for template engine.
There are many out there like Twig, Blade, Smarty
Or you can write one alone like it is explained in this excellent post by David Adams
I'm trying to understand the difference between the following. All of the reading I've done says that 'include' should work. I'm wondering 'why' I have to use the 'virtual()' and/or WHAT I'm doing wrong with the 'include'.
<?php virtual('/path'); ?>
and
<?php include'/path'; ?>
I use both in the code below. The 'virtual()' works and is used for header.php. The 'include' (does not work) and is used for footer.php. The code for the entire page is below.
Link to live page
<head>
<title>Untitled Document</title>
<link href="/student_sites/2013/web_40/pages/css_includes/css_includes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><?php virtual('/student_sites/2013/web_40/pages/css_includes/assets/includes/header.php'); ?>
</div>
<div id="content_wrapper">Content for New CONTENT WRAPPER Div Tag Goes Here
<div id="side_bar">Content for New SIDE BAR Div Tag Goes Here</div>
<div id="content">Content for New CONTENT Div Tag Goes Here</div>
</div>
<div id="footer"><?php include '/student_sites/2013/web_40/pages/css_includes/assets/includes/footer.php'; ?></div>
</div>
</body>
</html>
<?php include'/path'; ?>
Doesn't work because of the type of file it's in. This statement must use the 'virtual()' which only works in php files. The 'include' only works in html or shtml files.
<!--#include virtual="/path" -->
for html files and
<?php virtual('/path'); ?>
for php files.
The html code still uses virtual but include as well, so I'm still not sure why it can't use include by itself.
-your 2ed period stutent
The question is fairly simple, yet I've been looking around for an hour and found nothing:
make a page that is exactly the same as the home page, but a specific div has altered content
example index.html:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change">I will change</div>
</body>
</html>
so I want to be able to code a page so that it inherits the entire html from the index page (WITHOUT COPYING THE CODE), but a specific div (here with the id #change) to have different content. How would I go about doing this?
You don't really "inherit" code snippets, but I understand that you're trying to reuse the page content. From your posted code, it's hard to tell exactly how the change differs from the index. Is it just a content change or does the index page not have that div?
You have a couple of options. If just the content of the div is changing, you could use the same php page and then use jquery to change the content of the div, so something like
index.php
<? php include("page.php"); ?>
other page
<? php include("page.php"); ?>
// javascript to modify div
You could break the page into chunks and just include them as needed, so you could have a top.php and a bottom.php, and the index page could do
<? php include("top.php"); ?>
<? php include("bottom.php"); ?>
And then your similar page could do something like
<? php include("top.php"); ?>
// custom stuff here
<? php include("bottom.php"); ?>
If neither of these solutions work you could always use a templating engine to create a page template, though that may be a little much for your situation.
I see you have tagged this question in php So, I will give you answer inclusive of php implementation.
Create 3 pages. index.php about.php and foo.php
The objective is to show some content in index.php but all content in about.php
Call this page foo.php
<html>
<head></head>
<body>
<p> Show this in index.php </p>
<?php if($_SERVER['PHP_SELF'] === 'about.php'): ?>
<p> Show this in about.php </p>
<?php endif; ?>
</body>
</html>
Now, all you have to do is ... include foo.php in both pages.
Make the page you want and you can go about doing this:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<?php
if(basename($_SERVER['PHP_SELF'] == "other-page.php")){ ?>
<div id="change">I will change</div>
<?php }else{ ?>
<div id="change">Original div</div>
<?php } ?>
</body>
</html>
That takes the file name and based on that you can change content (if is only for one page, otherwise write a function/class based on that).
There are many ways to do this. Here are two, each with their own advantages and disadvantages.
Firstly, if you don't want to modify the page at all, you can add a small PHP code segment which will include a page passed in through the GET variable. For example
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change"><?php require($_GET['page']); ?></div>
</body>
</html>
would mean that using the URL mypage.php?page=home.php would automatically include the contents of a file called home.php into that div.
Another way to do it is to divide up that page into 2 sections, and including both of them in any other page you use. For example, splitting the code into 2 seperate files, such as
top.php:
<html>
<head>
<title>title</title>
<style type="text/css">
/* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change">
bottom.php:
</div>
</body>
</html>
then in your PHP file you can use the following
require("top.php);
MY CONTENT HERE
require("bottom.php);
remember that you will need to use echo to output html code on this method if it is within <?php and ?> tags
hope this helps.
You can't do this will plain HTML.
To do it in php, first create template file like so: (template.php)
<html>
<head>
<title>title</title>
<style type="text/css">
* css goes here */
</style>
</head>
<body>
<div id="stay">I wont change</div>
<div id="change"><?=$main_content?></div>
</body>
</html>
Now, let's say you want to make a "contact me" page.
<?php
// in contact.php
$main_content = "Contact me at my#email.com
include "template.php";
?>
This will write the contents of template.php to the page and echo out the value of $main_content inside div#change
Now, this is generally frowned upon because managing your variables becomes difficult as the size of the template increases. To keep things sane, use a templating engine as all of the other answers are suggesting.
I want to use php to create a consistent header and footer across my site using the php incluse tags. When creating the header file, do I need the html and body tags or can I just start with the div id="header"....?
What you should worry about is the final outcome of the markup of the site, after you've included everything.
Example:
header.php
<div id="header"></div>
footer.php
<div id="footer"></div>
index.php
<html>
<head></head>
<body>
<?php include('header.php'); ?>
<div id="content"></div>
<?php include('footer.php'); ?>
</body>
</html>
For correct semantics, include the <html> and <body> tags, making sure to close them in the footer.php file
Yes you should. It's a good idea, though, to use variables within the include to set such things as <title>...
<?php
$pagetitle="My page";
include('header.php');
?>
Content here
<?php include('footer.php'); ?>
where header.php is
<html>
<head>
<title><?php echo $pagetitle; ?></title>
<!-- your meta tags etc -->
</head>
<body>
and footer is
<script>/* your javascript includes */</script>
</body>
</html>
You can have a section of HTML in a file like this.
<footer> This is my global footer! </footer>
Then in PHP you can use include() to include that html file. It will render the contents of the file to the output where you include it.
include 'globalFooter.html';
Do I need the html and body tags or can I just start with the div?
No you do not.
Your question is not completely clear, but you seem to be asking whether you need any special tags in the included file. The short answer is no—the included file is inserted into the including file verbatim, so it would contain whatever tags are required to render the header (or footer) you had in mind.
Whatever you do, the result should be valid HTML.
So if your index.php starts with <?php include "header.php" ?> then your header.php file should start with <!DOCTYPE html><html>... Same goes for the end.
As of right now, the way I use includes is to bring the header, footer, and some content for other pages.
This leads to more includes then I really want, because I need to add more content for the includes.
For example:
<!DOCTYPE html>
<?php include('header.php'); ?>
<body>
<?php include('body-top.php');
custom html
</?php include('footer.php');
</body>
It would be nice if I could add variables to the includes and on the pages I want the includes to show.
I am not good at PHP at all, so is there a better way to use Includes?
This can be easily done:
index.php
$title = 'Hello World!';
include 'content.php';
content.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<body></body>
</html>
The problem with this approach is, you'll soon run into problems keeping track what went where, so using functions as suggested in other answers might be a good idea. However, for small projects it's IMHO good enough.
sounds like a job for Smarty
It looks like this
<?php
require 'Smarty/libs/Smarty.class.php';
$smarty = new Smarty;
$smarty->assign('title','Hello World');
$smarty->assign('hello','Hello World, this is my first Smarty!');
$smarty->display('test.tpl');
?>
test.tpl
<html>
<head>
<title>{$title}</title>
</head>
<body>
{$hello}
</body>
</html>
Or even better way, use some of the PHP MVC frameworks, which will give you even more stuff (not just template system)
Your includes are already very few, no need to optimize them.
Also don't pay attention to people suggesting Smarty or MVC's because that will increase dramatically the number of includes (in exchange for other benefits, of course)-
You can turn your included files into functions. PHP has a neat trick where anything between curly-brackets (i.e. { and }) is only executed when that part of the code is reached. This includes the HTML code outside of your PHP tags.
This could be our 'header.php' file, where we wrap our current code in a function.
<?php function doHeader($title) { ?>
<html>
<head>
<title><?php echo $title; ?></title>
</head>
<?php } ?>
Then we make a tester for it. Whatever our tester/caller chooses to pass as $title shows up in our output.
<?php
// All included here
include_once('header.php');
?><!DOCTYPE html>
<?php doHeader('My page title'); ?>
<body></body>
</html>
This produces the output,
<!DOCTYPE html>
<html>
<head>
<title>My page title</title>
</head>
<body></body>
</html>