Website contains common elements such as header,navigation bar and footer. How should i re-write html pages so that static HTML elements common to my pages are sourced from the same PHP scripts? Can show me some examples?
Example of my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title>Home</title>
</head>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
</body>
</html>
Call this header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title>Home</title>
</head>
Call this footer.php
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
In your PHP pages:
<?php include_once 'header.php'; ?>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<?php include_once 'footer.php'; ?>
</body>
</html>
You can define an index.php file and include different parts different files like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title><?php include 'title.php'; ?></title>
</head>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<section id="content">
<?php include 'content.php'; ?>
</section>
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
</body>
</html>
Related
If you're not logged in and don't have the id, the header should include "Inloggen" en "Aanmelden", if one is logged in and has the id, it should show "Uitloggen" which means "Logout". I'm echoing the HTML code, but I also want to run a PHP if else statement in the HTML code.
Header.php:
<?php
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])){
<li>Inloggen </li>
<li>Aanmelden </li>
}
else{
<li>Uitloggen </li>
?>
</nav>
</div>
</header>
<div class="container">';
?>
Insert this code in your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])): ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php else:?>
<li>Uitloggen </li>
<?php endif;?>
</nav>
</div>
</header>
<div class="container">'
Try this :
<?php if (!isset($_SESSION['id'])){ ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php }else{ ?>
<li>Uitloggen </li>
<?php } ?>
I am new to laravel framework, want to use laravel layout master pages, and used to include child pages in master page. here is my header and footer page and app.blade.php is my master page, where i am using #yield to show data. but it did not work for me. my output is showing blank.
app.blade.php (Layout master page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div>
#yield('header')
</div>
<div class="content">
#section('content')
<h1> Body </h1>
#endsection
</div>
<div>
#yield('footer')
</div>
</div>
</body>
</html>
Header.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.header
{
height:100px;
width:100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="header">
#section('header')
<center> Layout Header Master page </center>
#show
</div>
</body>
</html>
footer.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.footer
{
height:100px;
width:100%;
background-color: aquamarine;
padding-top: 50px ;
}
</style>
</head>
<body>
<div class="footer">
#section('footer')
<center> Layout Footer Master page </center>
#show
</div>
</body>
</html>
web.php (Route)
Route::get('/masterpage','studentcontroller#viewmasterpage')->name('masterpage');
studentcontroller.php
public function viewmasterpage()
{
return view('layouts/app');
}
Problems:
There are some problems in your blades.
Every opening #section Tag needs a closing #endsection Tag.
The section Tags should everything that you want to display in between.
You don't need to add the whole <html> etc. you can simply add the necessary code
I think the content should be a yield because you might want to insert the content of other pages there..
I also think you are confusing #includeand #yield
If you want to outsource your header and footer you can simply #include('yourFolder/footer') and it inserts the code
Solution:
Change the #yield to #include
Change the #section to #yield('content')
Examples:
File named: header.blade.php
<div class="header">
<center> Layout Header Master page </center>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
#include('header')
<div class="content">
#yield('content')
</div>
#include('footer')
</div>
</body>
</html>
afterwards you can create a new view: example.blade.php
#extends('layout.app')
#section('content')
//put your content here
#endsection
You are misunderstanding the #extends, #yield and #section directives.
#extends uses another blade file, and fills in the #yield directives with the #sections it defines.
Say you have app.blade.php
<html>
<body>
#yield('header')
#yield('content')
#yield('footer')
</body>
</html>
You could then have say landing.blade.php
#extends('app')
#section('header')
<header>I am the header for the landing page!</header>
#endsection
#section('content')
<div>I am the content for the landing page!</div>
#endsection
#section('footer')
<header>I am the footer for the landing page!</footer>
#endsection
header.blade.php (Just use the code remove others)
#section('header')
<center> Layout Header Master page </center>
#endsection
footer.blade.php (Just use the code remove others)
#section('footer')
<center> Layout Footer Master page </center>
#endsection
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div class="header">
#include('header')
</div>
<div class="content">
#yield('content')
</div>
<div class="footer">
#include('footer')
</div>
</div>
</body>
</html>
studentcontroller.php
public function viewmasterpage()
{
return view('layouts.app');
}
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 3 years ago.
I've been working on an e-commerce app and I took out all the HTML in my index page and created a function called component() like this:
function component($productName,$productPrice,$productImage){
$element = "
<div class=\"col-md-3 col-sm-6 my-3 my-md-0\">
<form action=\"index.php\" method=\"POST\">
<div class=\"card shadow\">
<div>
<img src=\"$productImage\" alt=\"image1\" class=\"img-fluid card-img-top\">
</div>
<div class=\"card-body\">
<h5 class=\"card-title text-sm-center\">$productName</h5>
<h6 class=\"text-sm-center\">
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"far fa-star\"></i>
</h6>
<p class=\"card-text text-sm-center\">
Some Quick example text to build on the card
</p>
<h5 class=\"text-sm-center\">
<small><s class=\"text-secondary\">$519</s></small>
<span class=\"price\">$productPrice</span>
</h5>
<button class=\"btn btn-warning\" type=\"submit\" name=\"add\">Add to Cart<i class=\"fas fa-shopping-cart\"></i></button>
</div>
</div>
</form>
</div>
";
echo $element;
}
?>
Now, im trying to access the HTML content of component in my index.php like this:
<?php require "component.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart</title>
<link rel="stylesheet" href="./dist/css/all.min.css">
<link rel="stylesheet" href="./dist/css/style.css">
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!--<link rel="stylesheet" href="./dist/css/fa.5.11.2.css">-->
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<?php
component(productName:"Product 1", productPrice:599, productImage:"./upload/product1.png" );
?>
</div>
</div>
<script src=".dist/js/jquery.min.js"></script>
<script src=".dist/js/popper.min.js"></script>
<script src=".dist/js/bootstrap.min.js"></script>
</body>
</html>
And I am getting this error:
Error Message : Parse error: syntax error, unexpected ':', expecting ',' or ')' in C:\xampp\htdocs\shopping\index.php on line 24
Please, I need help to proceed.
Thanks
Use below mentioned HTML.
<?php require "component.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart</title>
<link rel="stylesheet" href="./dist/css/all.min.css">
<link rel="stylesheet" href="./dist/css/style.css">
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!--<link rel="stylesheet" href="./dist/css/fa.5.11.2.css">-->
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<?php
component("Product 1", 599,"./upload/product1.png" );
?>
</div>
</div>
<script src=".dist/js/jquery.min.js"></script>
<script src=".dist/js/popper.min.js"></script>
<script src=".dist/js/bootstrap.min.js"></script>
</body>
</html>
You need to change just below mentioned calling function.
component("Product 1", 599,"./upload/product1.png" );
I'm working on a project for school. And the deadline is tomorrow.
I want to change the body tag and add a background image on the products page when url is:
index.php?category=nieuwBinnen&product=Belair+X ch
How can I simply achieve this. I tried the if isset method but ended without success.
You can see the website on: http://alisgfx.com/lomo/
I appreciate any help.
Ali
index.php
# geef de HTML code voor het openen van de pagina weer
htmlOpenen('Titel van de website');
# toon de header
toonHeader();
include 'menu.php';
?>
<?php
if (isset($_GET['category']) && isset($_GET['product']) && isset($$_GET['category'])){ //display product if provided
$category = $$_GET['category'];
$product = $_GET['product'];
$error_msg = 1; //sets a basic error catcher in case product does not exist
foreach ($category as $item) {
if ($item['naam'] == $product) {
echo '
<section>
<article class="product">
<h2 class="item_name">'.$item['naam'].'</h2>
<div id="image">'.$item['foto'].'</div>
<p>'.$item['video'].'</p>
<p>
'.$item['fotos'].'
</p>
</article>
';
echo '
<article class="product simpleCart_shelfItem">
<div id="slider3">
<ul class="pager">
<li>Info</li>
<li>Reviews</li>
<li>Extra\'s</li>
</ul>
<div class="viewport">
<ul class="overview">
<li class="page"><p> '.$item['info'].' <hr />'.$item['prijs'].'Beschikbaarheid: '.$item['beschik'].' <br /><br />Aantal: <input type="text" value="1" class="item_Quantity"></p></li>
<li class="page"><p>'.$item['reviews'].'</p></li>
<li class="page"><p>'.$item['extras'].'</p></li>
</ul>
</div>
</div>
<h2 class="item_name hide"> '.$item['naam'].' </h2>
<p class="hide">'.$item['thumb'].'</p>
<a class="item_add" href="javascript:;"> Plaats product <br />in je winkelmandje </a>
</article>
';
echo '
<article class="product box-shadow">
<p>Met deze camera<br /> kun je zulke foto\'s<br /> maken</p>
<div id="slider4">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
'.$item['upload'].'
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
<!-- <form action="" method="post">
<input type="file" name="bestand"><br>
<input type="submit" name="submit" value="Upload foto">
</form> -->
<a class="upload" href="upload">Upload je<br /> eigen foto\'s</a>
</article>
<article class="product">
<p>filmrolletje</p>
</article>
</section>
';
// echo $item['prijs']."<br/>";
// echo $item['product']."<br/>";
// echo $item['info']."<br/>";
$error_msg = 0;
}
}
if ($error_msg){ //basic error message in case product does not exist
echo 'The selected product no longer exists';
}
}
else{ //displays all product if specific product not given
?>
<!-- producten carousel -->
<section class="carousel">
<div class="banner"><img src="img/nieuw.jpg"></div>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php
foreach($nieuwBinnen as $new) {
echo '
<li>
<a href="index.php?category=nieuwBinnen&product='.urlencode($new['naam']).'">
<p>'.$new['product'].'</p>
<h2>'.$new['naam'].'</h2>
</a>
</li>
';
}
?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</section>
<!-- producten carousel -->
<section class="carousel">
<div class="banner"><img src="img/best.jpg"></div>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php
foreach($bestSellers as $best) {
echo '
<li>
<a href="index.php?category=bestSellers&product='.urlencode($best['naam']).'">
<p>'.$best['product'].'</p>
<h2>'.$best['naam'].'</h2>
</a>
</li>
';
}
?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</section>
<?php
}
include 'footer.php';
?>
inc.template.inc.php
<?php
# Public: Echo de HTML code voor het openen van de pagina
#
# $titel - Een tekst die tussen de <title> en </title> tags wordt geplaatst
#
# Examples:
#
# htmlOpenen('pagina titel');
# # => geeft onderstaande html weer
function htmlOpenen($titel){
# Geef de HTML openen code weer
echo '<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lomography</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<section id="container" class="clearfix">
';
}
function htmlOpenenCart($titel){
# Geef de HTML openen code weer
echo '<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lomography</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-cart.css">
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<section id="container" class="clearfix">
';
}
function toonHeader() {
echo '
<header>
<a id="logo" href="index.php"><img src="img/logo.png" alt="Lomography Shop"></a>
<nav id="mainNavigation">
<ul>
<li>inloggen</li>
<li>registreren</li>
<li>over ons</li>
</ul>
</nav>
<div class="cartInfo"><span class="simpleCart_quantity"></span> items</div>
<div id="cartPopover">
<div id="triangle">▲</div>
<div class="simpleCart_items"></div>
<div id="cartData" class="clearfix">
<div class="left"><strong>Items: </strong><span class="simpleCart_quantity"></span></div>
<div class="right"><strong>Total: </strong><span class="simpleCart_total"></span></div>
</div>
<div id="popoverButtons" class="clearfix">
View
<!-- Checkout -->
</div>
</div><!--End #cartPopover-->
<div id="zoeken">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>
</header>
';
}
?>
You could set it dynamically by using JavaScript / JQuery.
Could try something like:
$targetpage = $_SERVER['SERVER_NAME'].'/index.php?category=nieuwBinnen&product=Belair+X'
if (!$targetpage) {
echo background 1;
}else{
echo background 2;
}
$ class='no-bgimage'; if (isset($_GET['product']) {
$class='bgimage';
}
then in your body
<body class="<?php echo $class ?>">
then in you css
.bgimage {
background-image: url('page/to/your/image');
}
my code for the php page displaying the divs
<?php
session_start();
require_once("classlib/mainspace.php");
if (isset($_SESSION['username'])==FALSE) {
header("location:login.php");
}
$user = new User($_SESSION['username']);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>SimpleTask - Home</title>
</head>
<body>
<div id="main">
<div id="menu">
<div id="items">
<ul>
<li>home</li>
<li>•</li>
<li>my projects</li>
<li>•</li>
<li>my comments</li>
</ul>
</div>
<div id="user">
<p>Welcome, <?php echo $user->GetRealName(); ?><br/>edit profile • logout</p>
</div>
</div>
<div id="content">
<h1>HOME</h1>
</div>
<div id="footer">
<p>footer text goes here here here here</p>
</div>
</div>
</body>
</html>
and you can find my CSS here http://tasker.efficaxdevelopment.com/style/style.css
and to view the live page go here http://tasker.efficaxdevelopment.com/login.php
username:admin
password:password
Add:
h1,p {
margin:0;
}
Those elements and a few others have margins and paddings by default.