HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

The advantage of using a data-based approach for your HTML5 and CSS3 site is scalability. If you decide to make a change in the template, you have to change hundreds of pages. If you use data, you can write one PHP program that can produce any page in the system. All this page needs is a page-number parameter.

Using that information, it can query the system, extract all the information needed for the current page, and then display the page. Here’s the (simplified) PHP code for such a system:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>CS Basic CMS</title>
 <link rel = "stylesheet"
   type = "text/css"
   href = "csStd.css" />
 </head>
<?php
//get pageID from request if possible
$pageID = filter_input(INPUT_POST, "pageID");
if ($pageID == "){
 $pageID = 1;
} // end if
try {
 //connect to database
 $con= new PDO('mysql:host=host;dbname=dbName', "user", "pwd");
 $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 //read current page information from the db
 $stmt = $con->prepare("SELECT * FROM pageView WHERE PageID = ?");
 $stmt->execute(array($pageID));
 $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
 //make page variables based on the current record
 foreach ($result as $row){
 if ($row["block"] == "head"){
  $head = $row["title"];
 } else if ($row["block"] == "menu"){
  $menu = $row["content"];
 } else if ($row["block"] == "content1"){
  $c1Title = $row["title"];
  $c1Text = $row["content"];
 } else if ($row["block"] == "content2"){
  $c2Title = $row["title"];
  $c2Text = $row["content"];
 } else if ($row["block"] == "footer"){
  $footer = $row["content"];
 } // end if
 } // end foreach
} catch(PDOException $e) {
 echo 'ERROR: ' . $e->getMessage();
} // end try
?>
 <body>
 <div id = "all">
  <!-- This div centers a fixed-width layout →
  <div id = "heading">
  <h1>
   <?php print $head; ?>
  </h1>
  </div><!-- end heading div →
  <div id = "menu">
  <?php print $menu; ?>
  </div> <!-- end menu div →
  <div class = "content">
  <h2>
   <?php print $c1Title; ?>
  </h2>
  <div>
   <?php print $c1Text; ?>
  </div>
  </div> <!-- end content div →
  <div class = "content">
  <h2>
   <?php print $c2Title; ?>
  </h2>
  <div>
   <?php print $c2Text; ?>
  </div>
  </div> <!-- end content div →
  <div id = "footer">
  <?php print $footer; ?>
  </div> <!-- end footer div →
 </div> <!-- end all div →
 </body>
</html>

Here’s the cool thing about dbCMS. This page is all you need! You won’t have to copy it ever. The same PHP script is used to generate every page in the system. If you want to change the style or layout, you do it in this one script, and it works automatically in all the pages. This is exactly how CMS systems work their magic!

Looking at all the code at one time may seem intimidating, but it’s quite easy when you break it down, as explained in these steps:

  1. Pull the pageID number from the request.

    If possible, extract the pageID number from the GET request. If the user has sent a particular page request, it has a value. If there’s no value, get page number 1:

    //get pageID from request if possible
    //note this is a GET request, for flexibility
    $pageID = filter_input(INPUT_GET, "pageID");
    if ($pageID == "){
     $pageID = 1;
    } // end if

    The menu links will all call the same program, but with a different pageID:

      <ul>
       <li><a href = "dbCMS.php?pageID=1">one</a></li>
       <li><a href = "dbCMS.php?pageID=2">two</a></li>
       <li><a href = "dbCMS.php?pageID=1">three</a></li>
        </ul>
  2. Query pageView to get all the data for this page.

    The pageView view was designed to give you everything you need to build a page with one query.

  3. Make a data connection.

    Build a standard PDO connection to the database. Don't forget to set up an exception handler and the appropriate error constants.

     try {
     //connect to database
     $con= new PDO('mysql:host=localhost;dbname=haio', "haio", "haio");
     $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     // OTHER CODE WILL GO HERE
    } catch(PDOException $e) {
     echo 'ERROR: ' . $e->getMessage();
    } // end try
  4. Form and execute the query.

    Use the prepared statement mechanism to build a statement that will return all records for the current page. Execute the statement and fetch all the results in a variable called $results.

     //read current page information from the db
     $stmt = $con->prepare("SELECT * FROM pageView WHERE PageID = ?");
     $stmt->execute(array($pageID));
     $result = $stmt->fetchAll(PDO::FETCH_ASSOC);<Warning>

    Don't simply interpolate the $pageID variable into the SQL query. Doing so would open yourself up to SQL injection attacks. Use the prepare-execute mechanism to prevent this type of attack.

  5. Use the entry to populate page variables.

    Each entry contains two fields: block and content. The block field determines the type of content, and the content field shows what content is there. Use this data to populate the variables used to build the page:

     //make page variables based on the current record
     foreach ($result as $row){
     if ($row["block"] == "head"){
      $head = $row["title"];
     } else if ($row["block"] == "menu"){
      $menu = $row["content"];
     } else if ($row["block"] == "content1"){
      $c1Title = $row["title"];
      $c1Text = $row["content"];
     } else if ($row["block"] == "content2"){
      $c2Title = $row["title"];
      $c2Text = $row["content"];
     } else if ($row["block"] == "footer"){
      $footer = $row["content"];
     } // end if
     } // end foreach
  6. Write out the page.

    Go back to HTML and generate the page, skipping into PHP to print the necessary variables.

     <body>
     <div id = "all">
      <!-- This div centers a fixed-width layout →
      <div id = "heading">
      <h1>
       <?php print $head; ?>
      </h1>
      </div><!-- end heading div →
      <div id = "menu">
      <?php print $menu; ?>
      </div> <!-- end menu div →
      <div class = "content">
      <h2>
       <?php print $c1Title; ?>
      </h2>
      <div>
       <?php print $c1Text; ?>
      </div>
      </div> <!-- end content div →
      <div class = "content">
      <h2>
       <?php print $c2Title; ?>
      </h2>
      <div>
       <?php print $c2Text; ?>
      </div>
      </div> <!-- end content div →
      <div id = "footer">
      <?php print $footer; ?>
      </div> <!-- end footer div →
     </div> <!-- end all div →
     </body>

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: