Csy2028 Topic2 PDF

CSY2028
Web Programming
Topic 2
Tom Butler
thomas.butler@northampton.ac.uk
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!
●
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>
</head>
<body>
<header>
<?php
//PHP CODE HERE
?>
<h1>Heading</h1>
</header>
<?php
//PHP CODE HERE
?>
</div>
</body>
</html>
●
It's possible to put the navigation it its own file. Instead
of:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="demo.css" /> </nav>
</head> <main>
<body> <p>Lorem ipsum....</p>
<header> </main>
<h1>Heading</h1>
</header> <div>
<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>
</li>
</ul>
●
You can store the navigation in nav.php and include it
using PHP's require function
●
Nav.php – index.php <!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Heading</h1>
</header>
<ul> <div class="content">
<li> <nav>
<?php
</li> require 'nav.php';
<li> ?>
<a href="#">Link 2</a> </nav>
</li> <main>
<li> <p>Lorem ipsum....</p>
</main>
</li>
</ul> ….
●
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>
<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>
<link rel="stylesheet"
href="demo.css" />
</head> </main>
<body>
<header> <div> <?php
<h1>Heading</h1> Right hand side require 'head.php';
</header> </div> ?>
<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>
</li> </html>
<li>
</li>
</ul>
</nav>
<main>
<!DOCTYPE html>
<html>
<head>
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>
</li>
</ul>
</nav>
<main>
●
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> student@northampton.ac.uk</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
index.php csy1018.php csy1026.php
<?php <?php <?php

require 'head.php'; require 'head.php'; require 'head.php';
?> ?> ?>
<h1>Computing at <h1>CSY1018 Internet <h1>CSY1026 Databases 1
University of Northampton</h1> Technology</h1> </h1>
<p>….</p> <p>….</p> <p>….</p>
<?php <?php <?php
require 'foot.php'; require 'foot.php'; require 'foot.php';
?> ?> ?>
Separate files
●
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>
href="demo.css" />
</head>
<body>
<header>
<h1>Heading</h1>
about.php </header>
<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
$title = 'About me';

$content = 'I am a student at
The University of Northampton';
Require '../layout.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

Csy2028 Topic2 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Csy2028 Topic2 PDF

Uploaded by

Copyright:

Available Formats

CSY2028

index.php csy1018.php csy1026.php

<?php <?php <?php

$title = 'About me';

You might also like