PHP Tutorial

Here is the general layout model for all of the pages of the eCommerce Web site. The Content sections differ from page to page depending on the function of the page. The Header and Menu sections, however, are the same on all pages. They provide a common look and feel to the pages, plus the Menu section provides a common menu of navigation links and other functions that are accessible from all pages.

This site uses Cascading Style Sheet (CSS) features to format the page and control its presentation. We will provide some general guidelines on their use without going into much detail. You are referred to other sources if you wish to attempt formatting beyond what is presented here.



<html>
<head>
  <title>eCommerce Site</title>
  <link href="stylesheetEC.css" rel="stylesheet">
  require("jscript.inc")
</head>
<body>

<div style="position:absolute; top:0px; left:0px; width:780px; 
  background-color:seagreen; color:white; padding:5px">

  require("header.inc")

</div>

<div style="position:absolute; top:75px; left:10px; width:175px">

  require("menu.inc")

</div>

<div style="position:absolute; top:75px; left:200px; width:550px">

  -- main page content --

</div>

</body>
</html>

<div> tags are used to establish the overall layout of a page and use stylesheet specifications to precisely place the divisions on the page. There are three separate divisions containing the header, menu, and content to be displayed on the page. This same layout is used for all pages at the site, the only differences being within the division containing the main content for that page.

The Header and Menu sections are not coded directly on all pages. Rather, the code is contained in the header.inc and menu.inc documents that are imported (included) on all pages when they are accessed by the browser.

Code appearing in external documents is copied into or included in a PHP page by using one of the following statements:
require('FileName')
include('FileName')

Both statements provide the same functionality, however the require() statement returns a fatal error upon failure, whereas the include() statement returns only a warning.

In both constructs, FileName is the name of the file containing the code to be copied into this location in the document. Include files can contain XHTML coding, PHP coding, JavaScript coding, stylesheet specifications, or common text. By using this technique, it is not necessary to duplicate common code on each and every page. The code can be placed in a separate file and then copied into the pages as needed.

This technique only works for .php pages (not .htm pages). It's probably a good idea just to name all your pages with the .php extension, whether they contain scripting or not.

Documents to be included on a page are nothing more than simple text documents containing the code to be inserted. The file name and extension for the document can be of your choosing. The extension ".inc" is used here to identify header.inc and menu.inc documents as files to be included on the page. Names such as header.txt and menu.txt or header.php and menu.php will work as well. We'll take a look at the coding for these documents a bit later. There is one other include file named jscript.inc which is copied into the <head> section of each page. This document contains JavaScript coding to control the behavior of buttons. We'll take a look at this coding when we discuss individual pages.

Once you get your general layout set up properly, then the only coding you'll need to worry about is the actual "content" of the individual pages. Everything else will happen automatically through the INCLUDE files.

As noted above, extensive use is made of stylesheets to control page formatting. For this purpose an external stylesheetEC.css document has been prepared and saved as a standard text document. Each page at the site applies the styles by linking to this document through the <link> tag of the <head> section:

The general stylesheet in use for the eCommerce site is shown below, with other styles applied individually to page elements as needed.


stylesheetEC.css

body
  {margin:0px; background-color:white; font-family:arial; font-size:9pt}
td
  {font-family:arial; font-size:9pt}
th
  {font-family:arial; font-size:9pt; text-align:center;
   background-color:seagreen; color:white}

.head1
  {font-family:times new roman; font-size:18pt; font-weight:bold; 
   color:seagreen}
.head2
  {font-family:times new roman; font-size:16pt; font-weight:bold; 
   color:seagreen}
.head3
  {font-family:times new roman; font-size:14pt; font-weight:bold; 
   color:seagreen}
.head4
  {font-family:times new roman; font-size:12pt; font-weight:bold; 
   color:seagreen}

a:link, a:active, a:visited 
  {text-decoration:none; color:seagreen}
a:hover
  {text-decoration:none; color:darkgreen; background-color:lightgreen}

.buttonS
  {width:35px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}
.buttonM
  {width:70px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}
.buttonL
  {width:100px; text-align:center; font-family:arial; font-size:9pt; 
   background-color:seagreen; color:white}

.textbox
  {font-family:arial; font-size:10pt}
.qtybox
  {font-family:arial; font-size:10pt; text-align:right}

.small
  {font-family:arial; font-size:8pt}