Tech School

User Tools

Site Tools

Trace: • php
en:web_development:layout:php

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

  • 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 similarities 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 a '.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 are 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.php");
    include("menu.php");
?>
  • This will add all the code in the files 'header.php' and 'menu.php'.
  • We could have named the files 'header.html' and 'menu.html', but we may want to include PHP code in these files in the future, so it's better to get into the habit of naming all HTML files with the '.php' extension.
  • Now create a file called 'header.php' 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.php' and 'footer.php'.
  • Add the following code to 'menu.php'.
<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.php'. We're using 'layout.html' because its footer is the most comprehensive.
    <footer>
        <h3>Footer</h3>
    </footer>
</body>
</html>
  • We haven't included 'footer.php' in our page yet, so let's do that now. Add the following code at the end of 'layout.php'.
<?php
    include("footer.php");
?>
  • 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.

Title

  • Now let's do the same for 'lists.html' and 'tables.html'.
  • Create a file called 'lists.php' and enter the following code.
<?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");
?>
  • Notice that we've added <main> tags around all the code inside <body> so that it is positioned correctly.
  • Create a file called 'tables.php' and add the following code.
<?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");
?>
  • Again, notice that we've added <main> tags to correctly position the content.
  • Upload both these files to the server and check that they look correct.
  • Also notice the 'title' in the tab, which currently says 'Document'.
  • Now change the title in 'header.php' from 'Document' to 'Tech School' (or whatever else you like).
    <title>Tech School</title>
  • Save and upload 'header.php' and view all pages in your browser.
  • Notice that the title has changed from 'Document' to 'Tech School' in all pages. PHP makes it very easy to change elements in your site in a consistent way.
  • Let's also fix our Heading. In 'header.php' add a proper site title.
    <header>
        <h1>Tech School Web Development Course</h1>
    </header>
  • Save and upload 'header.php' again and check that your changes have applied to all pages.

Next: Exercises

en/web_development/layout/php.txt · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki