Table of Contents

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

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

<?php
    YOUR CODE GOES HERE
?>

Include

    <main>
        <div class="content">Section 1</div>
        <div class="content">Section 2</div>
        <div class="content">Section 3</div>
    </main>
<?php
    include("header.php");
    include("menu.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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="lists.js"></script>
</head>
<body>
<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>
    <footer>
        <h3>Footer</h3>
    </footer>
</body>
</html>
<?php
    include("footer.php");
?>

Tools: FileZilla

Title

<?php
    include("header.php");
    include("menu.php");
?>
    <main>
        <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>
    </main>
<?php
    include("footer.php");
?>
<?php
    include("header.php");
    include("menu.php");
?>
<main>
    <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>
</main>
<?php
    include("footer.php");
?>
    <title>Tech School</title>
    <header>
        <h1>Tech School Web Development Course</h1>
    </header>

Next: Exercises