I'm working on my first php site, I'm running into an issue I can't see to figure out. I'm trying to have one php page that contains my structure, and others that inject their html inside, while retaining url changes so I can still direct link pages.
So far this is what I'm doing, but it doesn't seem efficient:
index.php
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include("head.php"); ?>
<body>
<div class="container">
<!-- Navigation header -->
<?php include("navigation.php"); ?>
<!-- Main container -->
<div id="MainContainer">
<?php include("home.php"); ?>
</div>
<!-- Footer -->
<?php include("footer.php"); ?>
</div>
</body>
</html>
about.php
<html xmlns="http://www.w3.org/1999/xhtml">
<?php include("head.php"); ?>
<body>
<div class="container">
<!-- Navigation header -->
<?php include("navigation.php"); ?>
<!-- Main container -->
<div id="MainContainer">
About me!
</div>
<!-- Footer -->
<?php include("footer.php"); ?>
</div>
</body>
</html>
This feels totally wrong, if I ever want to change my container class, or change the structure, I now have to do it in two places instead of one.
In ASP.net MVC I would have a Layout_Head.cshtml file that would contain my HTML structure and inside I can render views from different pages, the url changes but the layout is always rendered first and then the controller/actions take care of injecting the html of the needed views.
How do I replicate that in PHP?
Usually people use php includes for templating more like this:
header.php
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
footer.php
</div> <!-- .container -->
</body>
</html>
about.php
<?php include('header.php'); ?>
... content goes here ...
<?php include('footer.php'); ?>
This is so you don't need to continuously repeat the start/end tags on every template you make.
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 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>
I am new to laravel and blade template engine.
Issue: file form.blade.php
#extends('front.header')
#extends('front.footer')
Loads front/footer.blade.php first and then the contents of front/header.blade.php
Please find attached the snap shot of the View Source.
I have checked few answers in stackoverflow they say about the white space.I dont seem to have any.
Regards,
Jignesh
This is how I would recommend structuring your master template.
front._layouts.master:
<!DOCTYPE html>
<html>
<head>
#include('front._layouts.head')
</head>
<body>
<header>
#include('front._layouts.header')
</header>
<main>
#yield('content')
</main>
<footer>
#include('front._layouts.header')
</footer>
#stack('scripts')
</body>
</html>
Notice the #stack() this can come in useful when you're making a robust part of an application. Stacks allow you to push to named stacks on top of each other.
Follow this steps:
step 1:
resources\views create a file like: master.blade.php
step 2:
resources\views create a folder like: layouts
Inside layout folder create your header & footer file
step 3:
inside master.blade.php write how you design your main template like so.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- your common css here -->
#yield('partial-css')
</head>
<body>
#include('layouts.top-header')
<div class="container">
#yield('content') <!-- this is your common body -->
</div> <!-- /container -->
#include('layouts.footer')
<!-- your common js here or you also define inside the footer page -->
#yield('script') <!-- this is your individual script for all page -->
</body>
</html>
Step 4:
Now you use master page for all other pages like so index.blade.php
#extends('master')
#section('content')
<!-- Here is your main body content -->
#endsection
#section('script')
<!-- Here is your individual script content -->
#endsection
Hope you understand now how blade template works!
You cannot #extends from 2 parents. If you want to include another view, you should use #include instead
Like this :
#include('front.header')
Content
#include('front.footer')
The question is simple, but maybe the answer not.
I am wondering how can copy and paste my <footer>CONTENT HERE</footer> created by Bootstrap in all my pages automatically.
Is there some easy way to do that? Because on the Internet I only can read very complex ways.
Thanks
You seem to be confusing how the page gets rendered. CSS is used for styling content which is already there provided by the HTML, so Bootstrap cannot help you here. Bootstarp did not "create" the content of the footer, it jsut gives it some styling.
Depending on the back-end technology you use for generating pages (maybe Jade, EJS, PHP?), you need to do some sort of inclusion of the footer template.
Here is a sample structure of how to include the layout structure in HTML page.
<!DOCTYPE html>
<html>
<head>
<?php include('includes/meta.php'); ?> <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<?php include('includes/page_title.php') ?>
<!-- BOOTSTRAP CORE STYLE -->
<?php include('includes/header_scripts.php'); ?>
</head>
<body>
<?php include('includes/header.php'); ?>
<!-- LOGO HEADER END-->
<?php include('includes/header_menu.php'); ?>
<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">Blank Page</h4>
</div>
</div>
</div>
</div>
<!-- CONTENT-WRAPPER SECTION END-->
<?php include('includes/footer.php'); ?>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<?php include('includes/footer_scripts.php'); ?>
</body>
</html>
footer.php
<footer>CONTENT HERE</footer>
Like this if you put a separate file and call it in all the other pages and it will be created dynamically in all the pages if you edit or change in this file alone.
Like the above way you need to create all the pages and include it into your project file.
Folder Structure
Project Folder
includes(folder)
header.php
footer.php
index.php(file)
You can accomplish this with jquery.
Place this code in index.html
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="footer"></div>
</body>
</html
Here is a stack overflow page that can help you with this
Also if you are using php this will be more simple
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
Just create your footer in footer.php
Here is w3schools post if you want to know more about php and how to include this.
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