Home

How to Write a PHP Page to Read from the Table for Your HTML5 and CSS3 Site

|
Updated:  
2016-03-26 13:12:59
|
HTML5 and CSS3 All-in-One For Dummies
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 earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].