👥Step 1: Build web pages with PHP
Home || News || Stories || Installer ||
Step 1: Establish Work Area
Create Private and Public Folder
Private Folder.
1. Shared Folder
*staff_footer.php
*staff_header.php
2. Function.php
3. initialize.php
Public Folder.
1. image folder
*index.php
2. staff folder
*index.php
1. subjects folder
* index.php
3. stylesheet
*staff.css
Index.php under the public folder
<html lang="en">
<head>
<title> RMT TECH </title>
</head>
<body>
<h1> RMT TECH: COMING SOON</h1>
</body>
</html>
Index.php under the staff folder
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH </title>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
</body>
</html>
Import CSS
html {
height: 100%;
width: 100%;
}
body {
height: 980px;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 980px;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0055DD;
color: white;
}
header h1 {
margin: 0;
padding: 5px;
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
navigation {
width: 980px;
margin: 0;
padding: 0;
text-align: center;
}
navigation ul {
width: 980px;
list-style: none;
padding: 0;
margin: 0;
}
navigation ul li {
display: inline;
margin-right: 1em;
}
#content {
width: 920px;
min-height: 500px;
padding: 0 30px;
}
footer {
width: 940px;
height: 20px;
margin: 0 0 10px 0;
padding: 10px 20px;
background: #0055DD;
color: white;
}
/* Actions */
.actions {
margin-bottom: 1em;
}
/* Lists */
table {
border-collapse: collapse;
vertical-align: top;
}
table.list {
width: 100%;
}
table.list tr td {
border: 1px solid #999999;
}
table.list tr th {
border: 1px solid #0055DD;
background: #0055DD;
color: white;
text-align: left;
}
/* Forms */
dl {
clear: both;
overflow: hidden;
margin: 0.5em 0;
}
dt {
float: left;
font-weight: bold;
width: 125px;
}
dd {
float: left;
margin-left: 1em;
}
#operations {
clear: both;
margin: 1em 0 1em 75px;
}
/* Errors */
.errors {
display: inline-block;
border: 2px solid red;
color: red;
padding: 1em;
margin-bottom: 1em;
}
.errors ul {
margin-bottom: 0;
padding-left: 1em;
}
Index.php under the staff folder
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH </title>
<!-- Add this one -->
<link rel="stylesheet" media="all" href="../stylesheets/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
<!-- Add this one -->
<div id="content">
</div>
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
</body>
</html>
WATCH THE VIDEO TO UNDERSTAND WHAT IS REQUIRE AND INCLUDE
Create functions.php and initialize.php in the shared folder under the private folder
Initialize.php
<?php
require_once('function.php');
?>
Index.php under staff folder
<!-- add this -->
<?php require_once('../../private/initialize.php'); ?>
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH </title>
<link rel="stylesheet" media="all" href="../stylesheets/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
<div id="content">
</div>
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
</body>
</html>
Cut the code in Index.php under the staff folder
<?php require_once('../../private/initialize.php'); ?>
<!-- cut this -->
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH </title>
<link rel="stylesheet" media="all" href="../stylesheets/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
<!-- end of cutting -->
<div id="content">
</div>
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
</body>
</html>
Create staff_header.php under the shared folder of the private folder
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH </title>
<link rel="stylesheet" media="all" href="../stylesheets/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
Cut the code in Index.php under the staff folder
<!-- cut this -->
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
<!--end of cutting -->
Create staff_footer.php under the shared folder of the private folder
<footer>
© <?php echo date('Y'); ?> RMT TECH
</footer>
Index.php under staff folder
<?php require_once('../../private/initialize.php'); ?>
<?php include('../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Index.php under staff folder
<?php require_once('../../private/initialize.php'); ?>
<!-- add this -->
<?php $page_title = 'Staff Menu'; ?>
<?php include('../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Staff_header.php under the shared folder of private folder
<!-- add this condition -->
<?php
if(!isset($page_title)) {$page_title = 'Staff Area';}
?>
<!doctype html>
<html lang="en">
<head>
<!-- add this variable page title -->
<title> RMT TECH - <?php echo $page_title; ?> </title>
<link rel="stylesheet" media="all" href="../stylesheets/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<li><a href="index.php">Menu</a></li>
</lu>
</navigation>
Copy the code in index.php under staff folder
<?php require_once('../../private/initialize.php'); ?>
<!-- add this -->
<?php $page_title = 'Staff Menu'; ?>
<?php include('../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Go to index.php under subjects ( error )
<?php require_once('../../private/initialize.php'); ?>
<!-- add this -->
<?php $page_title = 'Subjects'; ?>
<?php include('../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Fix it
<!-- add additional ../ -->
<?php require_once('../../../private/initialize.php'); ?>
<?php $page_title = 'Subjects'; ?>
<!-- add additional ../ -->
<?php include('../../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<!-- add additional ../ -->
<?php include('../../../private/shared/staff_footer.php'); ?>
</body>
</html>
Initialize.php under private folder
<?php
// add this one
// Assign file paths to PHP constants
// __FILE__ returns the current path to this file
// dirname() returns the path to the parent directory
define("PRIVATE_PATH", dirname(__FILE__));
define("PROJECT_PATH", dirname(PRIVATE_PATH));
define("PUBLIC_PATH", PROJECT_PATH . '/public');
define("SHARED_PATH", PRIVATE_PATH . '/shared');
require_once('functions.php');
?>
Staffindex.php under staff folder
http://localhost/php/public/staff/staffindex.php
<?php require_once('../../private/initialize.php'); ?>
<?php $page_title = 'Staff Menu'; ?>
<!-- you can use this -->
<?php include(SHARED_PATH . '/staff_header.php'); ?>
<!-- or this -->
<?php include('../../private/shared/staff_header.php'); ?>
<div id="content">
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Staffindex.php under staff folder ( nothing shows up )
<?php require_once('../../private/initialize.php'); ?>
<?php $page_title = 'Staff Menu'; ?>
<?php include(SHARED_PATH . '/staff_header.php'); ?>
<div id="content">
<!-- add this one -->
<div id="main-menu">
<h2>Main Menu</h2>
<a href="/subjects/subjectindex.php">Subjects</a>
</div>
<!-- end this one -->
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Fix
<?php require_once('../../private/initialize.php'); ?>
<?php $page_title = 'Staff Menu'; ?>
<?php include(SHARED_PATH . '/staff_header.php'); ?>
<div id="content">
<div id="main-menu">
<h2>Main Menu</h2>
<!-- remove forward slash to url "relative url -->
<a href="subjects/subjectindex.php">Subjects</a>
</div>
</div>
<?php include('../../private/shared/staff_footer.php'); ?>
</body>
</html>
Staff_header.php under a shared folder ( not working properly )
if(!isset($page_title)) {$page_title = 'Staff Area';}
?>
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH - <?php echo $page_title; ?> </title>
<link rel="stylesheet" media="all" href="../stylesheet/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<!-- change the code to php -->
<li><a href="<?php echo 'staffindex.php'; ?>">Menu</a></li>
</lu>
</navigation>
Initialize.php under private folder
<?php
define("PRIVATE_PATH", dirname(__FILE__));
define("PROJECT_PATH", dirname(PRIVATE_PATH));
define("PUBLIC_PATH", PROJECT_PATH . '/public');
define("SHARED_PATH", PRIVATE_PATH . '/shared');
// add this
$public_end = strpos($_SERVER['SCRIPT_NAME'], '/public') + 7;
$doc_root = substr($_SERVER['SCRIPT_NAME'], 0, $public_end);
define("WWW_ROOT", $doc_root);
require_once('functions.php');
?>
Staff_header.php under shared folder of private folder
<?php
if(!isset($page_title)) {$page_title = 'Staff Area';}
?>
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH - <?php echo $page_title; ?> </title>
<link rel="stylesheet" media="all" href="../stylesheet/staff.css"/>
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<!-- add final code./ -->
<li><a href="<?php echo WWW_ROOT . '/staff/index.php'; ?>">Menu</a></li>
</lu>
</navigation>
Function.php under private folder
<?php
function url_for($script_path) {
// add the leading '/' if not present
if($script_path[0] != '/') {
$script_path = "/" . $script_path;
}
return WWW_ROOT . $script_path;
}
?>
Staff_header.php under shared folder of private folder
<?php
if(!isset($page_title)) {$page_title = 'Staff Area';}
?>
<!doctype html>
<html lang="en">
<head>
<title> RMT TECH - <?php echo $page_title; ?> </title>
<!-- change the code to php -->
<link rel="stylesheet" media="all" href="<?php echo url_for('/stylesheet/staff.css'); ?>" />
</head>
<body>
<header>
<h1> RMT TECH Staff Area </h1>
</header>
<navigation>
<ul>
<!-- change the code to url for -->
<li><a href="<?php echo url_for (('/staff/index.php')); ?>">Menu</a></li>
</lu>
</navigation>
1 Welcome
2. Establish your work area
3. Include and require files
4. make a page assets reusable
5. Links and URL's
Mga Komento
Mag-post ng isang Komento