d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Need Help With Php
Add Reply New Topic New Poll
Views: 1476Replies: 9Track Topic
Member
Posts: 22,264
Joined: Nov 23 2005
Gold: 117,286.68
#1
Nov 11 2014 05:44pm
I've been given some html files and I need to create dynamic webpage using these intructions:

In this step, you will use the index.html file to create re-usable header and footer elements.

Rename all the html files to .php files

Create two files - header.php, and footer.php.
The header.php will contain the HTML code needed to produce the <head> section, plus the web page header and the navigation menu.
The footer.php will return the HTML code needed to produce the footer(copyright) section of the webpage, plus any closing tags for elements opened (but not closed) in the header.php file.
Use the include statement in the index.php to include both the header and footer php files created.

can someone explain what these mean? ty.
Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
#2
Nov 11 2014 05:56pm
Quote (charlesss @ Nov 11 2014 06:44pm)
I've been given some html files and I need to create dynamic webpage using these intructions:

In this step, you will use the index.html file to create re-usable header and footer elements.

Rename all the html files to .php files

Create two files - header.php, and footer.php.
The header.php will contain the HTML code needed to produce the <head> section, plus the web page header and the navigation menu.
The footer.php will return the HTML code needed to produce the footer(copyright) section of the webpage, plus any closing tags for elements opened (but not closed) in the header.php file.
Use the include statement in the index.php to include both the header and footer php files created.

can someone explain what these mean? ty.


first thing you have to do is create the files. in your terminal, type in:
vi header.php
:wq
vi footer.php
:wq

now that they're created, you have to add the header, web page header, and navigation menu

vi header.php
i
now add your html
:wq

lmk when you get past that and we'll continue.
Member
Posts: 22,264
Joined: Nov 23 2005
Gold: 117,286.68
#3
Nov 11 2014 06:00pm
<!DOCTYPE html>
<html>
<head>
<title>WP Eatery - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Fugaz+One|Muli|Open+Sans:400,700,800' rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header class="clearfix">
<img src="images/header_img.jpg" alt="Dining Room" title="WP Eatery"/>
<div id="title">
<h1>WP Eatery</h1>
<h2>1385 Woodroffe Ave, Ottawa ON</h2>
<h2>Tel: (613)727-4723</h2>
</div>
</header>
<nav>
<div id="menuItems">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div id="content" class="clearfix">
<aside>
<h2>Today's Specials</h2>
<hr>
<img src="images/burger_small.jpg" alt="Burger" title="Monday's Special - Burger">
<h3>The WP Burger</h3>
<p>Freshly made all-beef patty served up with homefries - $14</p>
<hr>
<img src="images/kebobs.jpg" alt="Kebobs" title="WP Kebobs">
<h3>WP Kebobs</h3>
<p>Tender cuts of beef and chicken, served with your choice of side - $17</p>
<hr>
</aside>
<div class="main">
<h1>Welcome</h1>
<img src="images/dining_room.jpg" alt="Dining Room" title="The WP Eatery Dining Room" class="content_pic">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<h2>Book your Christmas Party!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div><!-- End Main -->
</div><!-- End Content -->
<footer>
<p>&copy; 2013 CST8285. All Rights Reserved.</p>
</footer>
</div><!-- End Wrapper -->
</body>
</html>

this is the index.html

So I guess in the header.php I simply paste

<!DOCTYPE html>
<html>
<head>
<title>WP Eatery - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Fugaz+One|Muli|Open+Sans:400,700,800' rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header class="clearfix">
<img src="images/header_img.jpg" alt="Dining Room" title="WP Eatery"/>
<div id="title">
<h1>WP Eatery</h1>
<h2>1385 Woodroffe Ave, Ottawa ON</h2>
<h2>Tel: (613)727-4723</h2>
</div>
</header>
<nav>
<div id="menuItems">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div id="content" class="clearfix">
<aside>
<h2>Today's Specials</h2>
<hr>
<img src="images/burger_small.jpg" alt="Burger" title="Monday's Special - Burger">
<h3>The WP Burger</h3>
<p>Freshly made all-beef patty served up with homefries - $14</p>
<hr>
<img src="images/kebobs.jpg" alt="Kebobs" title="WP Kebobs">
<h3>WP Kebobs</h3>
<p>Tender cuts of beef and chicken, served with your choice of side - $17</p>
<hr>
</aside>
<div class="main">
<h1>Welcome</h1>
<img src="images/dining_room.jpg" alt="Dining Room" title="The WP Eatery Dining Room" class="content_pic">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<h2>Book your Christmas Party!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div><!-- End Main -->
</div><!-- End Content -->

and in the footer.php I paste the other half?

This post was edited by charlesss on Nov 11 2014 06:10pm
Member
Posts: 32,925
Joined: Jul 23 2006
Gold: 3,804.50
#4
Nov 11 2014 06:29pm
think about it. the header/footer are something you can put on multiple pages. do you want all that on multiple pages?
Member
Posts: 22,264
Joined: Nov 23 2005
Gold: 117,286.68
#5
Nov 11 2014 06:52pm
So my header.php should be:

<!DOCTYPE html>
<html>
<head>
<title>WP Eatery - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Fugaz+One|Muli|Open+Sans:400,700,800' rel='stylesheet' type='text/css' />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header class="clearfix">
<img src="images/header_img.jpg" alt="Dining Room" title="WP Eatery"/>
<div id="title">
<h1>WP Eatery</h1>
<h2>1385 Woodroffe Ave, Ottawa ON</h2>
<h2>Tel: (613)727-4723</h2>
</div>
</header>
<nav>
<div id="menuItems">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</aside>
<div class="main">

</div><!-- End Main -->
</div><!-- End Content -->
Member
Posts: 29,723
Joined: Jun 11 2007
Gold: 279.52
#6
Nov 12 2014 01:41am
id prolly end the header at the </nav>

put into a file called header.php and to include it:

Code

<?php include('header.php'); ?>


this is prolly your footer:

<footer>
<p>&copy; 2013 CST8285. All Rights Reserved.</p>
</footer>
</div><!-- End Wrapper -->
</body>
</html>


and do the same fore header, but obviously name it footer.php


very simple.
Member
Posts: 1,555
Joined: Apr 28 2005
Gold: 55.00
#7
Nov 13 2014 04:43am
header should be all code before the </head> tag and footer should be your footer code, your index.php page would start with something like so:

Code

<?php
require_once("header.php");
?>
{{everything from <body> until </div> before the <footer> tag}}
<?php
require_once("footer.php");
?>

inside your footer.php page you would copy everything from <footer> until </html>

When you change anything in index.php in the html you would be able to always reuse header.php and footer.php without having to rewrite everything.
Member
Posts: 6,742
Joined: Mar 23 2008
Gold: 45.00
#8
Nov 21 2014 03:47pm
Change the file extension of your header and footer files to .php. You are not required to use PHP on a .php page, it will just have the capability to with that file extension.

When you need that head and footer displayed, include it - http://php.net/manual/en/function.include.php

It's wise to create a primary page that you will call on all pages. Blah.php could include your header and footer, additional functions you want on all your pages, etc, then you simply include Blah.php rather than multiple.

e/ Just noticed the post date. I suck.

This post was edited by Blizane on Nov 21 2014 03:56pm
Member
Posts: 5,167
Joined: Nov 23 2006
Gold: 11.01
#9
Feb 17 2015 07:00pm
You would do something like:

Code

<!Doctype HTML>
<html>
<header>
<?php require_once("header.php"); ?> //Don't have to put it in a <header> but you can or you can even have <header> tags in your header.php file if you want.
</header>
<body>
//Body elements etc etc
</body>
<?php required_once("footer.php"); ?>

</html>



Then you create a header.php file and put all of the header you want in there such as nav bars/banner/etc. Same with the footer for copyright info etc. Then you just require_once on your pages to call the header/footer.

Don't forget you'll have to turn your index.html into index.php since you're using php tags.
Member
Posts: 13,425
Joined: Sep 29 2007
Gold: 0.00
Warn: 20%
#10
Feb 18 2015 12:15am
Quote (HoneyBadger @ Feb 17 2015 09:00pm)
You would do something like:

Code
<!Doctype HTML>
<html>
<header>
<?php require_once("header.php"); ?> //Don't have to put it in a <header> but you can or you can even have <header> tags in your header.php file if you want.
</header>
<body>
//Body elements etc etc
</body>
<?php required_once("footer.php"); ?>

</html>


Then you create a header.php file and put all of the header you want in there such as nav bars/banner/etc. Same with the footer for copyright info etc. Then you just require_once on your pages to call the header/footer.

Don't forget you'll have to turn your index.html into index.php since you're using php tags.


Great necro.
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll

© 2003-2026 d2jsp  Contact