08: Writing a Basic Dynamic Website (Part 1)

Learning Target

• Use PHP to create a basic dynamic page
• Use PHP includes for organization

Resources

We will be using a number of PHP concepts in this assignment.
You aren't expected to become a fluent PHP programmer in this course.
However, you should have basic familiarity with these topics and know how to find resources to help you.

• •  W3Schools PHP Tutorial
    
    • PHP Core Topics:
      • Intro
      • Syntax
      • Comments
      • Variables
      • Echo / Print
    • Other PHP Topics
      • If Statements
      • Includes
      • $_GET Superglobal

Instructions

Part 0: Before You Start

You should already have:

• • Ubuntu 22.04 installed on the Raspberry Pi
  • Nginx installed and running
  • A custom Nginx site config working
  • A basic HTML site already showing in the browser
  • PHP and MySQL installed

Part 1: Move Your Existing HTML Site

Step 1:
SSH into your Raspberry Pi

Step 2:
Go to your web root folder (the one your Nginx site uses):

cd /var/www/yoursite

Step 3:
Create a new subfolder named static

mkdir static

Step 4:
Move your existing HTML site files into static
Common examples (use what you actually have):

If your site is mostly HTML files and images (e.g. html, jpg, png): 

mv *.html static/
mv *.jpg static/
mv *.png static/

If you also have folders within your static site (e.g. images):

mv images static/

Step 5:
Confirm the files moved

ls
ls static

Step 6:
Visit your site at its new location to make sure it still works:

http://IP_ADDRESS/static/

This address should no longer work since the root folder should have no contents:

http://IP_ADDRESS/

Common Pitfalls

• • Running mv commands from the wrong folder (you move the wrong files)
  • Accidentally moving files you still need (double-check with ls first)
  • If you get: “cannot stat ‘*.html’” it usually means there are no .html files in that folder (maybe your files are in a different directory or named differently)

Part 2: Create the New PHP Site Folder Structure

You will build the PHP site in the main folder (NOT inside the new static folder).
To keep your PHP site organized and easier to understand, we will create some folders inside your website root.

Step 1:
In your web root folder (e.g. /var/www/mysite), create folders for PHP includes and pages:

mkdir includes 
mkdir pages

Check the contents of the folder:

ls

You should now see these folders listed:

• • /includes
  • /pages
  • /static (your old HTML site)

Common Pitfalls

• • Accidentally creating includes/pages inside the static folder
  • Misspelling folder names (includes vs include)

Step 2: 
Create the default index.php file for your new site:

nano index.php

If the file already exists, nano will just open it.

Step 3:
Paste the following starter page code:

<?php

// Decide which page to show
$page = $_GET["page"] ?? "home";

// Only allow specific pages to be requested
$allowed_pages = ["home", "about", "contact"];

// If the page is not in the list of allowed pages, go to the home page
if (!in_array($page, $allowed_pages))
{
  $page = "home";
}

// Write something to the page
echo "You are viewing the " . $page . " page.";
echo "<br>";
echo "Today's date is " . date("Y-m-d") . ".";

// It is not necessary to manually close the PHP tag. It will do that for us when the page is complete.

Part 3: Update Your Nginx Site Config

Important:

• • Nginx will not automatically load index.php
  • It also will not automatically forward pages to PHP for processing

Step 1:
Open your site config file (your filename may differ)

sudo nano /etc/nginx/sites-available/yoursite

Step 2:
Make sure your index line includes index.php as the FIRST item:

index index.php index.html index.htm;

You may need to reorder these.

Step 3:
Double-check that PHP processing is enabled in your config
You should see a block similar to this.

location ~ .php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/phpX.X-fpm.sock;
}

Step 4:
Save and exit nano

Step 5:
Test the Nginx config

sudo nginx -t

If successful, you should see:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Step 6:
Reload Nginx

sudo systemctl reload nginx

Step 7:
Visit your site and make sure the page displays:

http://IP_ADDRESS/

Common Pitfalls

• • Wrong web root in the config (you edit files in /var/www/yoursite but Nginx points somewhere else)
  • Wrong PHP-FPM socket path (php8.1-fpm is common on Ubuntu 22.04, but you must match the version that is installed)
  • Restarting Nginx without testing first (always run nginx -t)
  • Editing the wrong config file

Part 4: Create a Site Header

Step 1:
Create the header that will be used in all pages. Put it in the includes folder:

nano includes/header.php

Here is an example header. Notice that it does NOT close the <body> tag. 
This is intentional. The body will be closed in the shared footer.

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>My First PHP Site</title> 
  </head> 
  <body> 
    <h1>My First PHP Site</h1> 
    <p> 
      <a href="index.php?page=home">Home</a> | 
      <a href="index.php?page=about">About Us</a> | 
      <a href="index.php?page=contact">Contact</a> | 
      <a href="static/">Old Static Site</a> 
    </p> 
    <hr>

You should customize the title and heading of your site.

Common Pitfalls

• • Forgetting to save (CTRL+O, Enter) before exiting (CTRL+X)
  • Closing the <body> or <html> tags in the header

Part 5: Create a Site Footer

Step 1: 
Create the footer that will be used at the end of all pages. Put it in the includes folder:

nano includes/footer.php

Paste:

    <hr> 
    <p>
      Server time: <?php echo date("Y-m-d H:i:s"); ?>
    </p> 
  </body> 
</html>

You should add some additional details specific to you and your partner here (e.g. a link to send an email to your school email address).

Common Pitfalls

• • Forgetting to save (CTRL+O, Enter) before exiting (CTRL+X)
  • Even small typos inside PHP tags can break the page

Part 6: Create Page Content Files

Step 1:
Create the contents for the home page in the "pages" directory:

nano pages/home.php

Write something like this:

    <h2>Home</h2> 
    <p>Welcome to my first PHP website.</p> 
    <p>This site uses one main file (index.php) to display different pages.</p>

Add some more personalized and interesting content to your page.

Step 2:
Create the contents for the about page in the pages directory: 

nano pages/about.php

Write some information about your website and who is creating it...you!

Step 3:
Create pages/contact.php

nano pages/contact.php

Paste:

    <h2>Contact</h2> 
    <form method="POST" action="#"> 
      <p> Your Name:<br> 
        <input type="text" name="name"> 
      </p> 
      <p> 
        Message:<br> 
        <textarea name="message" rows="4" cols="40"></textarea> 
      </p> 
      <p> 
        <button type="submit">Send</button> 
      </p> 
    </form>

Note: This form does not work yet. We will connect it to a database in a future assignment.

Common Pitfalls

• • Putting the file in the wrong folder (pages vs includes vs static)
  • Forgetting closing tags in HTML

Part 7: Building a Full Page

Step 1: 
Open your index.php page

Step 2:
Replace the contents of the page with the pieces of code shown below.

First, decide which page content should be shown:

<?php

// Decide which page to show
$page = $_GET["page"] ?? "home";

// Only allow specific pages
$allowed_pages = ["home", "about", "contact"];

// If the page is not allowed, go to the home page
if (!in_array($page, $allowed_pages))
{
 $page = "home";
}

Next, include the proper parts of the page from our include files:

// Load the shared header
include __DIR__ . "/includes/header.php";

// Load the requested page content
include __DIR__ . "/pages/" . $page . ".php";

// Load the shared footer
include __DIR__ . "/includes/footer.php";
?>

What this file does

1. 1. Reads the page value from the URL query
      Example:

index.php?page=about

If no query is provided, then we just use the home page.

1. 1. Checks that the requested page is allowed.

   2. Loads three pieces of the website in order:

• • • header.php (top of the page)
    • the requested page content (home.php, about.php, or contact.php)
    • footer.php (bottom of the page)