Dynamic Websites

Topic 8:
Web Development Tools
© NCC Education Limited
 Title of Topic Topic 1 - 1.2

Scope and Coverage

This topic will cover:

• Using cookies to provide persistent data for PHP
applications;
• Use sessions to provide persistent data for PHP
applications;
• Use Ajax to build a database.
 Title of Topic Topic 1 - 1.3

Learning Outcomes

By the end of this topic students will be able to:

• Understand cookies and sessions and how they
can be used in a website;
• Use AJAX to create a database.
 Title of Topic Topic 1 - 1.4

Introduction

• In this lecture, we will look at how cookies and sessions can

be integrated into a website.
• We are going to expand our Ajax understanding so that we
can profitably use it to create front-ends to our databases.
– We will create an Ajax front-end that allows us to both query and
manipulate a database.
• By the end of this lecture, you will be well placed to script
compelling user interfaces for your users.
 Title of Topic Topic 1 - 1.5

Cookies and Sessions - 1

• Cookies are files that are stored on a user’s

computer that contains certain pieces of
information.
• Sessions fulfil the same role, but most of the
information does not get stored on a user’s
computer.
• Cookies are declared before any HTML in a
script and are available on the next page load
by using the setcookie function.
 Title of Topic Topic 1 - 1.6

Cookie Example
 Title of Topic Topic 1 - 1.7

The Next Page

 Title of Topic Topic 1 - 1.8

Manipulating Cookies

• We can change the value of a cookie by altering

it directly in the $_COOKIE variable:
• $_COOKIE[“texttokeep”] = “Hello World”;
• Cookies can be deleted by setting an expiry
date:
• Setcookie (“texttokeep”, “”, time() – (60*60));
 Title of Topic Topic 1 - 1.9

Sessions - 1

• Sessions fill the same role as cookies.

• They are managed by a pair of cookies – one on the server and one on
the client
• The Client cookie contains a reference to a session stored on the
server.
• The server manages the data for that session.
• To setup a session, we use the session_start function of PHP.
• As with a cookie, this must come before any HTML is sent to the
browser.
<?
Session_start();
?>
 Title of Topic Topic 1 - 1.10

Sessions - 2

• Once you have a session open, you can register

something as being a session variable, like so:
• $_SESSION[“mytext”]=$mytext;
• This makes sure that the mytext variable is
available on any other pages making use of the
session.
• The variables are stored in the $_SESSION
variables in the same way that cookies are.
 Title of Topic Topic 1 - 1.11

Sessions Example
 Title of Topic Topic 1 - 1.12

Session_next_page.php
 Title of Topic Topic 1 - 1.13

Manipulation of Sessions

• Once a session has been created it is easy to

manipulate through $_SESSION variable.
• Session data can be deleted through unset
function:
• Unset($_SESSION[“something_sensitive”]);
• You can destroy a session using
session_destroy.
 Title of Topic Topic 1 - 1.14

A Simple Database

• Now we will create an Ajax front-end to a simple

database.
– It has two tables, ID And Description.
• We need to create this database on our server, which
we’ll do with a dedicated ‘setup.php’ file.
– This creates the table and populates it with some basic test
data.
• With Ajax, we must create pages that can handle our
queries.
– This is done using PHP.
 Title of Topic Topic 1 - 1.15

Setup.php (Abridged)
 Title of Topic Topic 1 - 1.16

An Ajax Frontend

• We can already create an Ajax-front end to this.

– It is just a little limited.
• In an ideal web application, we separate
presentation from content.
– We have not really been doing this so far.
• If it were the case that our PHP scripts were to be
responsible for presentation, then it would be quite
simple to create the front end.
– We just change the URL for our Ajax requests.
 Title of Topic Topic 1 - 1.17

Querying Content - 1
 Title of Topic Topic 1 - 1.18

Querying Content - 2
 Title of Topic Topic 1 - 1.19

Ajax Frontend - 1
 Title of Topic Topic 1 - 1.20

XML Output

• The XML discussion we had in a previous lecture is

the foundation for this.
– We want to output our data as an XML file and have
Ajax format it for us.
• To do this, we need to discuss some new PHP
syntax.
– The creation and manipulation of a DOM file.
• This is done through the DOMDocument class.
 Title of Topic Topic 1 - 1.21

Creating a DOM Tree

• We are going to manually construct this.

– Luckily, the process is not complicated.
• At each step, we create a node.
• We configure that node.
• We append it to a parent node (unless it is the root
note).
• We then output it as the content of our PHP page.
• The important thing is not to lose track of what is
being appended to what.
 Title of Topic Topic 1 - 1.22

Creating a DOM Node

• We need a root node

– This is the one to which all our records in the database
will be appended.
• The syntax for this in PHP is as follows:
– $doc = new DOMDocument();
– $doc->formatOutput = true;
• Then within the loop over our results, we append
the contents of results in turn to our root.
 Title of Topic Topic 1 - 1.23

Iterating Over Results

 Title of Topic Topic 1 - 1.24

Finally

• At the end, we use the saveXML method to output

the contents of our DOM tree.
– This gives us the document out as a simple string which
we can echo in the normal way.
– Echo $doc->saveXML();
• At the end of this, we get an XML document from
our PHP script which we can then interpret and
parse in our Ajax front-end.
– Properly separating presentation from processing.
 Title of Topic Topic 1 - 1.25

Serving an XML Document

• Unless we tell PHP otherwise, it will attempt to

serve this as a standard HTML page.
– We can overrise this by issuing a header directive:
– header(‘Content-Type: text/xml; charset=utf-8’)
• This must come before all other output (including
whitespace).
– When Ajax receives a document with this header
information, the results go into responseXML rather
than responseText.
• And we can then parse it as a DOM document.
 Title of Topic Topic 1 - 1.26

The XML Document We Get

 Title of Topic Topic 1 - 1.27

Back to Ajax

• Our next step is to interpret this XML in Ajax.

– This too involves some XML parsing of the document we
obtain via our Ajax request.
• We use the responseXML property of our
XMLHttpRequest objective for this, rather than
responseText.
• To begin with, we will convert the XML we get into a
table representation within our HTML pages.
– and then look at other ways to spruce up our application.
 Title of Topic Topic 1 - 1.28

Interpreting the DOM Tree

• We do not need to do anything extra to get a DOM tree.

– That is handled for us by Ajax.
• Getting an array that contains all of our things is easy:
– Elements =
XML.documentElement.getElementsbyTagName(“thing”);
• We can iterate over this array to construct our table in Ajax.
– To do that, we need to understand what is in a node.
 Title of Topic Topic 1 - 1.29

Ajax Create Table Function

 Title of Topic Topic 1 - 1.30

Outputting the Table

• The responseXML property contains the formatted

DOM tree.
– We just pass that to our create table function to create
our output.
 Title of Topic Topic 1 - 1.31

Browsing the Database

• We are going to populate a combo box that

contains all the valid user IDs in our database.
– There are other techniques we can use, but this is the
one for us.
• To do this, we need to adjust our PHP page so that
we can query a full table if no parameters are
provided:
 Title of Topic Topic 1 - 1.32

Populating the Combo Box - 1

• We populate the combo box in the same way we

built the table.
– Construct the HTML.
– Place it somewhere on the form.
• Assume that we have a select form element called
data.
– We want to put the options between the opening and
closing tags for that element.
• This is something we can do.
 Title of Topic Topic 1 - 1.33

Populating the Combo Box - 2

 Title of Topic Topic 1 - 1.34

Populating the Combo Box - 3

• We bind this into the load event of out HTML page.

– That goes into onLoad event handler of the <body> tag.
• Next, we need to create a function that lets us
query the database for the description associated
with an ID.
– We will notify our setup Ajax function to do this, to
improve the modularity of our code.
• We bind this function into the onChange event
handler of our Select element.
 Title of Topic Topic 1 - 1.35

Navigating the Database - 1

 Title of Topic Topic 1 - 1.36

Navigating the Database - 2

 Title of Topic Topic 1 - 1.37

Updating the Database

• Updating the database requires both a new

function in our front-end, and a PHP script on the
server.
 Title of Topic Topic 1 - 1.38

Updating the Database - PHP

 Title of Topic Topic 1 - 1.39

The HTML

• The HTML that defines our static code is very

simple, setting up only the containers and the event
handlers:
 Title of Topic Topic 1 - 1.40

The Result

• The result is a simple dynamic application that uses

Ajax to create a seamless user experience.
• An important element of the design here is that we
have progressed from using PHP to handle our
presentation.
– It is now a job for JavaScript and Ajax.
• The main reason for this is to ensure modularity.
– We can easily swap out back-end and front-end
elements if their roles are well defined.
 Title of Topic Topic 1 - 1.41

Conclusion

• At this point, you are capable of creating very

rich and interactive dynamic websites for data
driven applications.
• In the next topic you will look at integrating more
mobile technologies with website design and
how web services can be used to enhance the
website.
 Title of Topic Topic 1 - 1.42

References

• W3.schools.com, 2017. [online] Available at

www.w3schools.com
Topic 8 – Web Development Tools

Any Questions?