Basic PHP Crash Course (part 5)

This post is part 5 of the Basic PHP Crash Course. If you have never red before this Crash Course, you should read part 1, part 2, part 3 and part 4 first. In this post, we will discuss about our site design or template. For a website it will has header, sidebar, content and footer. So we need to add some html code to our index.php. Following code is our index.php.

<?php session_start(); ?>
<html>
<head>
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title>Pizza Shop: Home</title>
</head>
<body>
 <div id="wrapper">
 <div id="header">
  <h1>Pizza Shop</h1>
 </div><!--end of header -->

 <div id="sidebar">
  <h2>Sidebar</h2>
 </div><!--end of sidebar -->

 <div id="content">
 <?php 
  if($_SESSION['error'] != '')
  {
   echo $_SESSION['error']; 
   $_SESSION['error']='';
  }
 ?>
 <h3>Pizza Shop Order Form</h3>
 <form class="order" action="process.php" method="post">
  <p>
  <label for="cus_name">Customer Name:</label>
  <input type="text" name="cus_name" />
  </p>
  <p>
  <label for="address">Shipping Address:</label>
  <input type="text" name="address" />
  </p>
  <p>
  <label for="quantity">Pizza Quantity:</label>
  <input type="text" name="quantity" />
  </p>
  <p>
  <input type="submit" name="submit" value="Submit Order" />
  </p>
 </form>
 </div><!--end of content -->

 <div id="footer">
  Pizza Shop &copy; 2011
 </div><!--end of footer -->

 </div><!--end of wrapper -->
</body>
</html>

I also create a css file named styles.css like following.

body{
 margin:0px;
 padding:0px;
}
#wrapper{
 width:960px;
 margin:0 auto;
 background-color:#FFC;
}
#header{
 height:90px;
 background-color: #FC0;
}
#header h1{
 color:#FFF;
 padding:10px 0px 0px 10px;
}
#content{
 padding:20px;
 float:left;
}
.order label{
 width:150px;
 float:left;
}
#sidebar{
 width:250px;
 height:300px;
 background-color: #C00;
 float:left;
}
#footer{
 clear:both;
 height:40px;
 background-color:#FC0;
 text-align:center;
}

Now if you run our site, you will see like below.

We have a problem. For our process.php we also need to add the html code that added to our index.php. You can add the needed code to that page. But if you have many files, you need to add every page and if you want to change some code, you will change many files. PHP has a very useful statement include() to solve this problem. It will include and evaluate the specific file. Before we use the include() statement, we will separate the duplicated coed as the separated file. Type the following code and save as header.php.

<?php session_start(); ?>
<html>
<head>
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title>Pizza Shop: Home</title>
</head>
<body>
 <div id="wrapper">

 <div id="header">
  <h1>Pizza Shop</h1>
 </div><!--end of header -->

Type the following code and save as sidebar.php.

<div id="sidebar">
 <h2>Sidebar</h2>
</div><!--end of sidebar -->

Type the following code and save as footer.php.

<div id="footer">
 Pizza Shop &copy; 2011
</div><!--end of footer -->

</div><!--end of wrapper -->
</body>
</html>

Now our index.php will be like below by using include() statement.

<?php
 include('header.php');
 include('sidebar.php');
?>
<div id="content">
<?php 
 if($_SESSION['error'] != '')
 {
  echo $_SESSION['error']; 
  $_SESSION['error']='';
 }
?>
<h3>Pizza Shop Order Form</h3>
<form class="order" action="process.php" method="post">
 <p>
 <label for="cus_name">Customer Name:</label>
 <input type="text" name="cus_name" />
 </p>
 <p>
 <label for="address">Shipping Address:</label>
 <input type="text" name="address" />
 </p>
 <p>
 <label for="quantity">Pizza Quantity:</label>
 <input type="text" name="quantity" />
 </p>
 <p>
 <input type="submit" name="submit" value="Submit Order" />
 </p>
</form>
</div><!--end of content -->
<?php
 include('footer.php');
?>

Our process.php file will be like below.

<?php
 include('header.php');
 include('sidebar.php');
?>
<div id="content">
<?php
 if(isset($_POST['submit']))
 {
  if( $_POST['cus_name'] != '' && $_POST['quantity'] != '' && $_POST['address'] !='' )
  {
   $cus_name = $_POST['cus_name'];
   $quantity = $_POST['quantity'];
   $address = $_POST['address'];
?>
<p>Thank <?php echo $cus_name; ?> !</p>
<p>You order <?php echo $quantity; ?> pizza.</p>
<?php
$total = $quantity * 10;
?>
<p>It will cost you <?php echo $total; ?> $.</p>
<p>We will send withing 2 hours to <?php echo $address; ?>.</p>
<?php
  }
  else
  {
   $_SESSION['error'] = "You need to fill all data";
   header("location: index.php");
  }
?>
<?php } ?>
</div><!--end of content -->
<?php
 include('footer.php');
?>

Our template system is almost finished. Let's think about our page title. It is not flexible. I want to change my title when the page change. To do so we need to create a variable and set our title to this variable before loading the header.php. And then we can use this variable in our header.php. Below is our index.php.

<?php
 $title = "Pizza Shop: Home";
 include('header.php');
 include('sidebar.php');
?>
...

Our process.php file will be like below.

<?php
 $title = "Pizza Shop: Order Process";
 include('header.php');
 include('sidebar.php');
?>
...

Our header.php will be like below.

<?php session_start(); ?>
<html>
<head>
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title><?php echo $title; ?></title>
</head>
<body>
 <div id="wrapper">

 <div id="header">
  <h1>Pizza Shop</h1>
 </div><!--end of header -->

TutsforWeb

Pages

Basic PHP Crash Course (part 5)

3 comments: