User Tools

Site Tools


en:web_development:layout:php

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:web_development:layout:php [2021/12/13 05:38]
mag
en:web_development:layout:php [2023/08/16 09:33] (current)
Line 233: Line 233:
  
 ==== PHP ==== ==== 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  +  * 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.
-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.   * 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. +  * 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 the '.php' extension, which can include both HTML and PHP code.+  * To be processed by the server, all PHP code needs to be in a file with '.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.   * 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.
 <code><?php <code><?php
Line 245: Line 244:
 ==== Include ==== ==== Include ====
   * Before we get into the depths of PHP, let's start with something simple, but very powerful in its time-saving capabilities.   * 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 made.+  * 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.   * 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.   * Create a new file called 'layout.php'. This will replace our 'layout.html' file.
Line 257: Line 256:
   * At the top of this file add the following code.   * At the top of this file add the following code.
 <code><?php <code><?php
-    include("header.html"); +    include("header.php"); 
-    include("menu.html");+    include("menu.php");
 ?></code> ?></code>
-  * This will add all the code in the files 'header.html' and 'menu.html'If we'd added a php fileit would also process the code tagged as PHP code. +  * This will add all the code in the files 'header.php' and 'menu.php'
-  * Now create a file called 'header.html' and add the code from 'lists.html' between <html><!DOCTYPE html></html> and <html><body></html> inclusive. We're using 'lists.html' because it is the most comprehensive (it includes the link to 'lists.js').+  * 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 <html><!DOCTYPE html></html> and <html><body></html> inclusive. We're using 'lists.html' because it is the most comprehensive (it includes the link to 'lists.js').
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <html lang="en"> <html lang="en">
Line 274: Line 274:
 <body></code> <body></code>
   * Now we'll need to do the same for the the menu and the footer.   * Now we'll need to do the same for the the menu and the footer.
-  * Create files called 'menu.html' and 'footer.html'. +  * Create files called 'menu.php' and 'footer.php'. 
-  * Add the following code to 'menu.html'.+  * Add the following code to 'menu.php'.
 <code><nav> <code><nav>
     <ul>     <ul>
Line 283: Line 283:
     </ul>     </ul>
 </nav></code> </nav></code>
-  * Copy the last three lines of 'layout.html' into 'footer.html'. We're using 'layout.html' because its footer is the most comprehensive.+  * Copy the last three lines of 'layout.html' into 'footer.php'. We're using 'layout.html' because its footer is the most comprehensive.
 <code>    <footer> <code>    <footer>
         <h3>Footer</h3>         <h3>Footer</h3>
Line 289: Line 289:
 </body> </body>
 </html></code> </html></code>
-  * 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'.+  * 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'.
 <code><?php <code><?php
-    include("footer.html");+    include("footer.php");
 ?></code> ?></code>
   * Save all the files.   * Save all the files.
Line 310: Line 310:
   * 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.   * 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.   * 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.
 +<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");
 +?></code>
 +  * Notice that we've added <html><main></html> tags around all the code inside <html><body></html> so that it is positioned correctly.
 +  * Create a file called 'tables.php' and add the following code.
 +<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");
 +?></code>
 +  * Again, notice that we've added <html><main></html> 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).
 +<code>    <title>Tech School</title></code>
 +  * 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.
 +<code>    <header>
 +        <h1>Tech School Web Development Course</h1>
 +    </header></code>
 +  * Save and upload 'header.php' again and check that your changes have applied to all pages.
  
 [[en:web_development:layout:exercises|Next: Exercises]] [[en:web_development:layout:exercises|Next: Exercises]]
en/web_development/layout/php.1639402734.txt.gz · Last modified: 2023/08/16 09:33 (external edit)