This is an old revision of the document!

Web Development Lesson 5 - Layout

Maintaining Consistency with PHP

Objective

In this activity we'll use PHP to separate our pages into pieces - some that change and some that remain consistent between pages - so that we can reuse consistent pieces to facilitate easy changes.

Setup

We'll work on all the files in your root directory, so make sure they're all up to date.

lists.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="lists.js"></script>
</head>
<body>
    <h2>Who Am I?</h2>
      <ol>
        <li>Family Members
          <ul>
            <li>Father</li>
            <li>Mother</li>
            <li>Sister</li>
            <li>Brother</li>
          </ul>
        </li>
        <li>Hobbies
          <ol>
            <li>Music</li>
            <li>Football</li>
            <li>Cycling</li>
          </ol>
        </li>
        <li>Favourite Bands
          <ul>
            <li>Shakira</li>
            <li>Juanes</li>
          </ul>
        </li>
      </ol>

      <h2>Checklist</h2>
      <ul>
        <li><input type="checkbox" name="flour" onchange="toggleCheckbox('flour')">100g flour</li>
        <li><input type="checkbox" name="eggs" onchange="toggleCheckbox('eggs')">2 eggs</li>
        <li><input type="checkbox" name="milk" onchange="toggleCheckbox('milk')">300ml milk</li>
      </ul>

      <h2>Javascript List</h2>
      <ol></ol>
</body>
</html>

tables.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Nationality</th>
            <th>Age</th>
            <th>Position</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>David</td>
            <td>Ospina Ramírez</td>
            <td>Colombia</td>
            <td>33</td>
            <td>Portero</td>
          </tr>
          <tr>
            <td>Carlos Eccehomo</td>
            <td>Cuesta Figueroa</td>
            <td>Colombia</td>
            <td>22</td>
            <td>Defensa</td>
          </tr>
          <tr>
            <td>Juan Guillermo</td>
            <td>Cuadrado Bello</td>
            <td>Colombia</td>
            <td>33</td>
            <td>Centrocampista</td>
          </tr>
          <tr>
            <td>Radamel Falcao</td>
            <td>García Zárate</td>
            <td>Colombia</td>
            <td>35</td>
            <td>Delantero</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

layout.html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>
        <div class="content">Section 1</div>
        <div class="content">Section 2</div>
        <div class="content">Section 3</div>
    </main>
    <footer><h3>Footer</h3></footer>
</body>
</html>

style.css

ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
  top: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 16%;
  left: 0px;
}

main {
  background-color: lightgreen;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  width: 300px;
}

lists.js

players = ['David Ospina Ramirez',
           'Johan Andres Mojica Palacio',
           'Gustavo Leonardo Cuellar Gallego',
           'Duvan Esteban Zapata Banguera'];

window.onload = function () {
    for (i = 0; i < 4; i++) {
        playerList += "<li>" + players[i] + "</li>";
    }
    document.getElementsByTagName('ol')[2].innerHTML = playerList;
}

function toggleCheckbox (item) {
    cb = document.getElementsByName(item)[0];
    if (cb.checked) {
        cb.parentElement.style.color = "gray";
    } else {
        cb.parentElement.style.color = "black";
    }
}

PHP

If you want the ability to personalise your site for your customers, (think Amazon recommending particular items based on what you've bought previously or Facebook showing posts from your friends) then

you'll need code that runs on a server to access a database and provide that data.

Commonly used server side scripts are Node.js, Net.data, Python and PHP. We'll be using PHP, but you're welcome to try others to see if they're better for your needs.
PHP code has many similarity to Javascript, so you won't have to learn everything twice.
To be processed by the server, all PHP code needs to be in a file with the '.php' extension, which can include both HTML and PHP code.
Your server needs a way to differentiate PHP from the rest of your code so it doesn't just send it all to the client. For this, we enclose all PHP code in the following symbols.

<?php
    YOUR CODE GOES HERE
?>

Include

Before we get into the depths of PHP, let's start with something simple, but very powerful in its time-saving capabilities.
Imagine that you have twenty pages (or more) to manage rather than just the three we have in this folder so far. Now imagine that your boss / client has just asked you to change the company phone number, which appears at the bottom of every page. You'd have to make the change twenty times, then check every single page to make sure you'd done it properly. That's how mistakes a made.
Instead, wouldn't it be better to have one place to change that data and every page would refer to that place? PHP allows us to separate our pages into parts and reuse those wherever we want to.
Create a new file called 'layout.php'. This will replace our 'layout.html' file.
Copy everything from <main> to </main> inclusive and paste it into 'layout.php'.

    <main>
        <div class="content">Section 1</div>
        <div class="content">Section 2</div>
        <div class="content">Section 3</div>
    </main>

This page now includes all the unique content of the page, but how do we get the rest?
At the top of this file add the following code.

<?php
    include("header.html");
    include("menu.html");
?>

This will add all the code in the files 'header.html' and 'menu.html'. If we'd added a php file, it would also process the code tagged as PHP code.
Now create a file called 'header.html' and add the code from 'lists.html' between <!DOCTYPE html> and <body> inclusive. We're using 'lists.html' because it is the most comprehensive (it includes the link to 'lists.js').

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="lists.js"></script>
</head>
<body>

Now we'll need to do the same for the the menu and the footer.
Create files called 'menu.html' and 'footer.html'.
Add the following code to 'menu.html'.

<nav>
    <ul>
        <li><a href="lists.php">Lists</a></li>
        <li><a href="tables.php">Tables</a></li>
        <li><a href="layout.php">Layout</a></li>
    </ul>
</nav>

Copy the last three lines of 'layout.html' into 'footer.html'. We're using 'layout.html' because its footer is the most comprehensive.

    <footer>
        <h3>Footer</h3>
    </footer>
</body>
</html>

We haven't included 'footer.html' in our page yet, so let's do that now. Add the following code at the end of 'layout.php'.

<?php
    include("footer.html");
?>

Save all the files.
Can you see what the server will do? It will put all the pieces together (in the order we tell it to) and send them to the client as a single file called 'layout.php'.
Our LiveServer can't process PHP, so we'll need to upload this onto a server to see it working.

Tools: FileZilla

There are many programs you can use to upload your code to a server, but we'll be using FileZilla because it works on every platform.
Launch FileZilla.
Click the down arrow just below the 'Edit' menu in the top left. This opens a list of servers.
Select 'webdev' from the list. This should connect you to the server and will populate the panes on the right-hand side. If this doesn't happen, ask for help.
The top part of the screen is a history of actions taken in FileZilla.
The bottom part is a list of files being transferred (or history if you change tabs).
The part in the middle is split with your local PC on the left and the server ('remote site') on the right.
On the left side, browse to your directory.
On the right side, find your class name and create a directory with your name underneath that. This is where you'll keep your files.
Navigate to that directory.
Now select all the files and the 'project' directory on the left side. Right click and select 'Upload' to copy your files to the server. If you don't see your files appear on the right side, ask for help.
To see your page, switch to your browser and navigate to https://bibliolabs.murraygunn.id.au/YOURCLASS/YOURNAME/layout.php replacing YOURCLASS and YOURNAME with the appropriate directory names, If your page doesn't look right, ask for help.

Next: Exercises

Tech School

Table of Contents

Web Development Lesson 5 - Layout

Maintaining Consistency with PHP

Objective

Setup

PHP

Include

Tools: FileZilla

Tech School

User Tools

Site Tools

Table of Contents

Web Development Lesson 5 - Layout

Maintaining Consistency with PHP

Objective

Setup

PHP

Include

Tools: FileZilla

Page Tools