Lab 06: Introduction to PHP¶

Pre-requisite: Install Herd and PHP

If you have not yet set up Herd and PHP in your machine, refer here for instructions. This lab activity assumes that you have PHP already available in your machine. If you happen to use a different application to host a virtual PHP server in your machine, or are able to access a working PHP server on a LAMP/LEMP stack, that will work as well. Ensure that you make the necessary measures to be able to follow through the next few lab activities going forward.

The past few labs were spent on learning how to develop the frontend of a website/web application. With PHP, we can develop a backend for such websites/web applications - one of the most common processes carried out by the backend is processing information from a web form, which may or may not involve storing or retrieving such information in a database. Not focusing on the database part for now, running PHP scripts require a specific environment for it to run.. that's why often times, you'll require additional programs or applications in your machine if you want to develop anything involving PHP.

There will be two lab activities, one of which will extend from Lab 02. These lab activities will get you up to speed with the PHP syntax and various program control structures. The one involving progress from Lab 02 will give a glimpse into how PHP can be used to make a web form actually useful.

Getting Started¶

The structure of a PHP block is like as follows:

<?php
  echo "<h1>It works!</h1>";
?>

Activity 01: Introducing PHP into HTML¶

Starting Code

index.php
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My PHP Page</title>

    <style>
      table,
      th,
      td {
        border: 1px solid black;
      }

      table {
        border-collapse: collapse;
      }

      th,
      td {
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Class</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
</html>

You should see this output:

Lab 06 HTML Layout

Note that the table as shown here does not have any other rows displayed aside from the header row.

Task 1: Populating the Table with PHP Data¶

We will now have PHP utilize the array values as stored in the following PHP code block to populate the table. Place the following PHP block on top of index.php:

<?php
  $students = ["Mamat", "Minah", "Joyah", "Adam"];
  $ids = ["101A", "102B", "103C", "201F"];
?>

Add the following code block in between the <tbody></tbody> tags:

<?php
  for ($i = 0; $i < sizeof($students); $i++) {
    ?>
    <tr>
      <th><?= $i + 1; ?></th>
      <td><?= $students[$i]; ?></td>
      <td><?= $ids[$i]; ?></td>
    </tr>
    <?php
  }
?>

The code block that's provided here makes use of a for loop to iterate over the elements in the array. The for loop as shown here makes it so that a new <tr> row element along with its <th> and <td> elements are created during each iteration. Since there are 4 items in the array, the for loop ends up creating 4 rows of data.

The highlighted lines show that a PHP block can be prematurely broken to encapsulate HTML code as part of your program control structure's block. This will apply for all loop structures and conditional statements.

You may also notice that in between lines 5 to 7, they make use of special expression tags <?= ... ?> that are purposed to print out the values of expressions and/or PHP variables. Let's see this in action again.

Task 2: Create New HTML Element in PHP¶

Create an empty <h1></h1> tag before the table in your HTML, and add the following variable in the top PHP block:

<?php
  $heading = "My First PHP Page";
  $students = ["Mamat", "Minah", "Joyah", "Adam"];
  $ids = ["101A", "102B", "103C", "201F"];
?>

Hence or otherwise, add the value of $heading in the newly-created <h1></h1> element. You should now see something like as follows:

Populated Table

Hint

<h1><?= $heading; ?></h1>

Task 3: Implementing a Simple "Forbidden Page"¶

With PHP, you can also create different views with conditional statements. Add one more PHP variable in the top PHP block:

<?php
  $forbidden = true;
  $heading = "My First PHP Page";
  $students = ["Mamat", "Minah", "Joyah", "Adam"];
  $ids = ["101A", "102B", "103C", "201F"];
?>

Modify the webpage so that the heading and table only appear if $forbidden is false. Otherwise, the webpage should display this message in a single (and separate) <h1> element:

Error 403 Page

Forbidden Access Page

You may be familiar with the Error 404 page (page not found). This is an example of an Error 403 page, which is shown when a user does not have access to a page. Error 403 and 404 are among several HTTP response codes; check here for more details.

Solution

<?php if (!$forbidden) { ?>
  <h1><?= $heading; ?></h1>
  <table>
    <thead>
      <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Class</th>
      </tr>
    </thead>
    <tbody>
      <?php
      for ($i = 0; $i < sizeof($students); $i++) {
      ?>
      <tr>
        <th><?= $i + 1; ?></th>
        <td><?= $students[$i]; ?></td>
        <td><?= $ids[$i]; ?></td>
      </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
<?php } else { ?>
  <h1>You are unauthorized to view the data on this page.</h1>
<?php } ?>

Alternatively, this if-else structure can be presented this way:

<?php if (!$forbidden): ?>
  <h1><?= $heading; ?></h1>
  <table>
    <thead>
      <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Class</th>
      </tr>
    </thead>
    <tbody>
      <?php
      for ($i = 0; $i < sizeof($students); $i++) {
      ?>
      <tr>
        <th><?= $i + 1; ?></th>
        <td><?= $students[$i]; ?></td>
        <td><?= $ids[$i]; ?></td>
      </tr>
      <?php
      }
      ?>
    </tbody>
  </table>
<?php else: ?>
  <h1>You are unauthorized to view the data on this page.</h1>
<?php endif; ?>

We will use program control structures more extensively in the next practical exercise. By now, hopefully you understand how to leverage PHP to prepare different views based on conditions.

Activity 02: Student Record Form (Part 2)¶

Complete Lab 02 First

This lab activity continues off from where we left off after Lab 02. To follow along properly, ensure that you have completed that activity first before proceeding.

This activity will focus mainly on being able to retrieve information from the form. We will create a new PHP file that will summarize the information captured from this form here.

Some JavaScript First¶

Another Look at The Web Form¶

Retrieving and Displaying Data in the Acknowledgment Page¶

This second lab activity has shown you how information can be retrieved from one web form and passed on to another PHP script, be it for preprocessing or for data collection and storage. The next lab activity will be solely focused on creating a simpler web form from scratch, but with more moving parts in the PHP side of things.