Csy2028 Topic2 PDF
Csy2028 Topic2 PDF
Csy2028 Topic2 PDF
Web Programming
Topic 2
Tom Butler
[email protected]
Exercise 1
●
1) Delete index.php from your public directory
●
2) Download ex1.zip and extract it to the public directory
●
3) Check you can see the test website on https://v.je
●
4) Add a new page to the website:
– File csy2028.html
– Module title: CSY2028 Web Programming
Module description: The aim of this module is to develop the
students' understanding of the concepts and technologies of Web-based
server software applications, as well as expanding the students' skills in
corresponding software development.
Exercise 1
●
Make sure the module is linked from every page
including:
– The navigation bar
– The sidebar on index.html and year 2 module pages
Using PHP to reduce repetition
●
Adding the new page was hard work
●
You have to go through every single HTML file and add
the new link!
Using PHP to reduce repetition
●
PHP can be used to store different parts of the website
in different files for easy reuse
●
For example, the navigation can be stored in its own file
Programmers are lazy
●
If you find yourself doing the same thing over and over
– (such as making the same change in multiple files)
●
There is almost certainly a better approach!
●
PHP can be used to reduce repetition
PHP code
●
You can store both HTML code and PHP code in the
same file
●
Any PHP code must be in PHP tags
●
HTML code can be placed anywhere outside of PHP tags
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<header>
<h1>Heading</h1>
</header>
<div class="content">
<?php
//PHP CODE HERE
?>
</div>
</body>
</html>
Mixing HTML and PHP code
●
You can have as many PHP tags on a page as you like
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<header>
<?php
//PHP CODE HERE
?>
<h1>Heading</h1>
</header>
<div class="content">
<?php
//PHP CODE HERE
?>
</div>
</body>
</html>
Using PHP to reduce repetition
●
It's possible to put the navigation it its own file. Instead
of:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="demo.css" /> </nav>
</head> <main>
<body> <p>Lorem ipsum....</p>
<header> </main>
<h1>Heading</h1>
</header> <div>
<div class="content">
<nav> Right hand side
<ul> </div>
<li> </div>
<a href="#">Link 1</a>
</li> <footer>
<li> © Your Name 2018
<a href="#">Link 2</a> </footer>
</li> </body>
<li> </html>
<a href="#">Link 3</a>
</li>
</ul>
Using PHP to reduce repetition
●
You can store the navigation in nav.php and include it
using PHP's require function
●
Nav.php – index.php <!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<header>
<h1>Heading</h1>
</header>
<ul> <div class="content">
<li> <nav>
<?php
<a href="#">Link 1</a>
</li> require 'nav.php';
<li> ?>
<a href="#">Link 2</a> </nav>
</li> <main>
<li> <p>Lorem ipsum....</p>
</main>
<a href="#">Link 3</a>
</li>
</ul> ….
Using PHP to reduce repetition
●
A lot of the time, the only thing that will differ between
pages is the content in <main>
●
One simple way of handling this is head.php which
includes everything before the content and foot.php
which includes everything after the content:
require
●
You can think of `require` as being a programmed copy/paste. The
contents of the required file fill be copied into the file running the
require line
head.php
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet" <!DOCTYPE html>
href="demo.css" /> <html>
</head> <?php <head>
<body> require 'head.php'; <title>My Web Page!</title>
?> <link rel="stylesheet"
<p>Lorem ipsum.... </p> href="demo.css" />
<?php </head>
require 'foot.php'; <body>
?> <p>Lorem ipsum.... </p>
foot.php
</body>
</html>
</body>
</html>
head.php foot.php index..php
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet"
href="demo.css" />
</head> </main>
<body>
<header> <div> <?php
<h1>Heading</h1> Right hand side require 'head.php';
</header> </div> ?>
<div class="content">
<nav> </div> <p>Lorem ipsum.... </p>
<ul> <?php
<li> <footer> require 'foot.php';
<a href="#">Link 1</a> © Your Name 2015 ?>
</li> </footer>
<li> </body>
<a href="#">Link 2</a>
</li> </html>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</nav>
<main>
<!DOCTYPE html>
<html>
<head>
<title>My Web Page!</title>
<link rel="stylesheet"
href="demo.css" />
</head>
<body> <p>Lorem ipsum.... </p>
<header> </main>
<h1>Heading</h1>
</header> <div>
<div class="content"> Right hand side
<nav> </div>
<ul> </div>
<li>
<a href="#">Link 1</a> <footer>
</li> © Your Name 2015
<li> </footer>
<a href="#">Link 2</a> </body>
</li> </html>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</nav>
<main>
Using PHP to reduce repetition
●
This allows the creation of multiple pages that sit within
the same content
about.php contact.php hobbies.php
<?php
require 'head.php';
<?php <?php ?>
require 'head.php'; require 'head.php'; <p>My hobbies are</p>
?> ?> <ul>
<p>I'm a student at the <p>My email address is:
University of Northampton</p> [email protected]</p> <li>Swimming</li>
<li>Movies</li>
<?php <?php
require 'foot.php'; require 'foot.php'; </ul>
<?php
?> ?> require 'foot.php';
?>
about.php
contact.php
hobbies.php
Exercise 2
●
1) Building on Exercise 3, split index.html up into 3 files
– head.php – Everything up to and including <main>
– foot.php – Everything from </main> to the bottom of the file
– index.php – Everything between <main> and </main>
– Make sure you delete index.html after creating index.php
●
2) Use `require` to include the header/footer on the index.php page
– If you open the page in a browser you should see the full page with the header/footer
included!
– You cannot open the PHP file directly in the browser, you must go through the web server!
●
3) Apply this to each of the module pages
– Note: You will need to give your files a .php extension and update the links!
Excersise 2
●
4) Add a new module:
– Page: csy1026.php
– Title: CSY1026 Databases 1
– Text:
– to understand and apply the principles of database integrity in the
design and practical development of database structures.
– Databases 1 is a hands-on module that applies data modelling
techniques to establish, modify and maintain database integrity and
data structures and associated components such as entities,
relationships and attribute definitions.
Exercise 2
●
** Optional ** The sidebar and the top navigation
contain the same links
●
Use require statements so that the links for each term
are only in a single file
Exercise 2 - Solutions
●
By storing the navigation/header in its own file, adding
a link to the navigation will add a link to every page
●
However, what if you want something unique per file?
For example, the page title shows like this on each
page:
Unique titles
●
It would be better if each page had it's own title:
– Computing at the University of Northampton
– CSY1018
– CSY1026
– etc
●
To do this we can use a variable
Variables
●
Variables can be used to store information that can be
retrieved at a later time during the script
●
Each variable has a name
●
In PHP variables start with the dollar sign ( $ ) and their
name must start with a letter for example:
●
$myVariable or $var
●
$123 is not valid
Variables
●
Variable names can contain numbers but must not start with
them
– $variable1 is valid but $1variable is not
●
Variable names cannot contain spaces, dashes or any other
character that has meaning to the language e.g. {, [, ], “, .,
+
●
Variable names should be descriptive so you shouldn't
usually need anything other than A-Z, 0-9 and the _
character
Variables
●
To declare a variable, assign it a value in quotes (for
strings):
$myVariable = 'my variable value';
●
You can then print its value using the echo command:
$myVariable = 'my variable value';
echo $myVariable;
Variables
●
Variables are shared across files that are included
●
PHP scripts are executed in order
●
As long as you declare a variable before you use it,
you can use it in another file
one.php two.php Output of one.php
<?php <h1>
<?php
$myVariable = 'Hello World!'; echo $myVariable; <h1>Hello World!</h1>
?>
require 'two.php'; </h1>
?>
Variables
●
This will cause an error because two.php is included
before the variable is defined
one.php two.php
<?php
<h1>
require 'two.php'; <?php
echo $myVariable;
$myVariable = 'Hello World!'; ?>
</h1>
?>
Exercise 3
●
1) Amend head.php to use a variable for the page title.
– Hint: You can add a <?php ?> tag inside the <title> tag!
●
2) Use the module code as the title for each page. As
you move between pages you should see a different
title on each page
Head/Foot disadvantages
●
One problem with head.php and foot.php is that it
becomes very difficult to manage
●
You can’t easily see if foot.php closes all the tags that
were opened in head.php
●
A better approach is using a single layout.php that has
a variable for the page’s content
<!DOCTYPE html>
<html>
<head>
<title><?php
echo $title;
?></title>
<link rel="stylesheet"
href="demo.css" />
</head>
<body>
<header>
<h1>Heading</h1>
about.php </header>
<div class="content">
<nav>
…….
<?php </nav>
<main>
$title = 'About me'; <?php
$content = 'I am a student at
The University of Northampton'; echo $content;
require 'layout.php'; ?>
</main>
?>
<div>
Right hand side
</div>
</div>
Exercise 4
●
1) Use a single layout.php in place of head.php and
foot.php
- Each page should only have one require statement
– You will need two variables in the page, one for the title and
one for the content
●
Hint: Variables can store HTML!
Public Directory
●
Any files inside the `public` directory can be accessed
by anyone
●
Try visiting v.je/layout.php
Public directory
●
Users and search engines may find this page.
– It doesn’t look very professional if you have a page with errors
– Error messages can also give attackers clues to how to hack
into your website
●
It’s better to limit users to only be able to access files
you want them to
●
Layout.php cannot work on its own (as it requires another
page to have set the $content and $title variables)
Public Directory
●
You can move files to the directory above the public
directory, the default directory
●
By moving files outside of public they are not available
on the website
●
However, PHP scripts can still reference them
●
The require statement can be amended to look in the
level above
●
By prefixing the filename with “../”, it tells PHP to look
“one level up” for a file called “layout.php”. In this case
it will look for
– websites/default/layout.php instead of
– websites/default/public/layout.php
–
<?php
?>
Exercise 5
●
Move layout.php out of the public directory and amend
your PHP pages to reference it there
●
Make sure that the layout with the error message is no
longer visible on http://v.je/layout.html
Virtual Machine – Advanced uses
●
I’ve set the Virtual Machine up so that it can host multiple websites
●
The website on the URL http://v.je is the default website in the websites/default
directory
●
You can create a directory with any name in the websites folder
●
For example
– week1
●
You must also create a public directory in the new folder
●
Then, week1/public/index.php is visible on the url `http://week1.v.je/index.php`
●
The name of the folder maps to the subdomain
●
You might want to keep the work you do each week, and for assignments separate.
By creating different folders in the websites directory you can do this