PHP development master and content pages interaction
From w3cyberlearnings
Objective
In this tutorial, you will learn how to use master and child pages to develop your dynamic web site.
Master page
- Master page uses by all the child pages.
What do you place on the master page
- Master page contains all the common navigation bar, logo, and links that share by all of your child pages.
- Usually, you included the javascript, jquery, and css files on your master page.
- Master page is like a container or a box.
what is a child page
- A child page uses the master page as a container, and a child page hold its own character.
- One child page can be used for display products, another child page can be used for delete product.
- A child page will has its own contents and functions.
- When a child page runs it will call the master page.
- Javascrip, css, page content, page structure, and navigation bar defined in the master page can be used by the child page
- All the content in the child page will be loaded and placed in the master page when the child page is executed.
can a child page contain its own css, javascript or other functions
- A child page can have its own javascript, css, jquery, graphics, navigation bar, or menu bar.
- When you define the css or feel and look within the child page, the feel and look will render within the child only.
- It will not render to another child page, because the content define within child page will be used by child page only.
- However, everything defines in the parents will be shared by all child pages.
Simple PHP page (mypage.php)
This page is just display "hello world!" when you executed it. Nothing special about this page.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My simple page</title> </head> <body> <?php echo "hello world!"; ?> </body> </html>
Simple Master page (mymaster.php)
- Here we define a very simple master page that we are going to use for demonstration purpose only.
- This page is very simple, we do not include any special navigation, javascript, or css file.
- Please note that this is a master page that going to be used by a child page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My web site</title>
</head>
<body>
<h3>This is Master Page</h3>
<?php
echo $mycontent;
?>
</body>
</html>
master page area use as a box for the child page
Here is the container that will be used to place the child page content. The $mycontent is the variable used for replace the content from the child page.
<?php echo $mycontent; ?>
my first child page (ch123.php)
This is the child page.
<?php
ob_start();
// child page content start from here
echo "This is w3cyberlearnings <br/>";
// this variable declared on the master page
// it is used to replace everything between the ob_start() and ob_end_clean()
$mycontent = ob_get_contents();
ob_end_clean();
// master page file
include("mymaster.php");
?>
Display Result
The This is Master Page is from the master page, and This is w3cyberlearnings is from the child page content.
This is Master Page This is w3cyberlearnings
detail explanation for ch123.page child page
Within the child page, you have to place the child page content between
<?php
ob_start();
/*
Child page content has to place HERE!!!
*/
$mycontent = ob_get_contents();
ob_end_clean();
include("mymaster.php");
?>
my second child page (ch222.php)
This second child page share the same master page as the first page.
<?php
ob_start();
$myname ="Bob";
$myage = 30;
echo "Hello ". $myname . " you are ". $myage;
$mycontent = ob_get_contents();
ob_end_clean();
include("mymaster.php");
?>
Display Result
This is Master Page Hello Bob you are 30
child contain HTML script
- Place HTML script on the child page.
- You can place whatever on the child page: javascript, HTML script, CSS, or PHP.
<?php
ob_start();
?>
<ul>
<li>learning pHP</li>
<li>Learning HTML </li>
<li>Learning database</li>
</ul>
<?php
$mycontent = ob_get_contents();
ob_end_clean();
include("mymaster.php");
?>
Display Result
This is Master Page learning pHP Learning HTML Learning database
define css stylesheet within the child page (child200.php)
<?php
ob_start();
?>
<style>
ul {
background-color: blue;
color:white;
}
</style>
<ul>
<li>learning pHP</li>
<li>Learning HTML </li>
<li>Learning database</li>
</ul>
<?php
$mycontent = ob_get_contents();
ob_end_clean();
include("mymaster.php");
?>
When you call the child pages, you will see there are a few link on the top of the page the navigation bar, and the footer on the bottom of the page.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My web site</title> </head> <body> <h3>Welcome</h3> <a href="#">Main Menu</a> | <a href="#">Register</a> | <a href="#">List Product</a> <?php echo $mycontent; ?> <b> Footer: Copyright @2011 by w3cyberlearning. </b> </body> </html>
Summary
- You learn how to develop the dynamic web using master and child page.
- Master page is like a box or a container.
- Master page has all the common features shared by the child pages.
- Child page can define its own CSS, Javascript and page contents
