ICTWEB502

Create dynamic web pages

Learner Guide
© Copyright, 2015 by North Coast TAFEnow

Date last saved: 9 September 2015 by Amanda Walker Version: 1.0 # of Pages = 39

Tersem Rugbir – Content writer and course adviser

TAFEnow Resource Development Team – Instructional and graphic

design

Copyright of this material is reserved to the Crown in the right of the State of New South Wales.

Reproduction or transmittal in whole, or in part, other than in accordance with the provisions of the Copyright Act, is
prohibited without written authority of North Coast TAFEnow.

Disclaimer: In compiling the information contained within, and accessed through, this document ("Information") DET
has used its best endeavours to ensure that the Information is correct and current at the time of publication but takes no
responsibility for any error, omission or defect therein. To the extent permitted by law, DET and its employees, agents
and consultants exclude all liability for any loss or damage (including indirect, special or consequential loss or damage)
arising from the use of, or reliance on, the Information whether or not caused by any negligent act or omission. If any
law prohibits the exclusion of such liability, DET limits its liability to the extent permitted by law, to the re-supply of
the Information.

Third party sites/links disclaimer: This document may contain website contains links to third party sites. DET is not
responsible for the condition or the content of those sites as they are not under DET's control. The link(s) are provided
solely for your convenience and do not indicate, expressly or impliedly, any endorsement of the site(s) or the products
or services provided there. You access those sites and use their products and services solely at your own risk.
Contents
Getting Started.........................................................................................................................................i

About this unit........................................................................................................................................i

Elements and performance criteria.........................................................................................................i

Icon Legends.........................................................................................................................................ii

Topic 1 – Identify client and server-side dynamic content..................................................................3

Review Technical Requirements...........................................................................................................3

Setting Up a Development Server.........................................................................................................7

Client-Side Dynamic Content.............................................................................................................10

Server-side Dynamic Content.............................................................................................................11

Select Appropriate Languages and Technology..................................................................................15

Sample Answers..................................................................................................................................18

Topic 2 – Create dynamic content.......................................................................................................20

Create pages using appropriate languages...........................................................................................20

Topic 3 - Test dynamic pages...............................................................................................................33

Getting Started
About this unit
This unit describes the performance outcomes, skills and knowledge required to produce both
server and client-side content.

Welcome to ICTWEB502 Create Dynamic Web Pages. This unit supports the creation of
dynamic web pages that include both client and server-side dynamic content with efficient and
effective code to meet technical requirements. The characteristic feature of dynamic website is
the compartmentalization of the content and design. Its ‘dynamism’ lies in its vibrancy and
interactivity, both in the client-side scripting and server-side scripting. In this unit, you will
follow the development of a web application that allows users to view and update a product
catalogue with a login facility. This unit assumes that you have some foundation of creating a
simple markup language and control structures as well as exposure to using some JavaScript.

The materials in this unit are to be used as a guide to your study. To get the most out of this
guide, make use of other resources such as the Internet or fellow students to further your
understanding. The internet is a fantastic resource to assist your learning.

Elements and performance criteria

Elements define the essential outcomes of a unit of competency. The Performance Criteria
specify the level of performance required to demonstrate achievement of the Element. They are
also called Essential Outcomes.

Follow this link to find the essential outcomes needed to demonstrate competency in this Unit:
http://training.gov.au/Training/Details/ICTWEB502

i|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Icon Legends
Learning Activities
Learning activities are the tasks and exercises that assist you in gaining a clear
understanding of the content in this workbook. It is important for you to
undertake these activities, as they will enhance your learning.

Activities can be used to prepare you for assessments. Refer to the

assessments before you commence so that you are aware which activities will
assist you in completing your assessments.

Readings (Required and suggested)

The required reading is referred to throughout this Learner Guide. You will
need the required text for readings and activities.

The suggested reading is quoted in the Learner Guide, however you do not need
a copy of this text to complete the learning. The suggested reading provides
supplementary information that may assist you in completing the unit.

Reference
A reference will refer you to a piece of information that will assist you with
understanding the information in the Learner Guide or required text.
References may be in the required text, another textbook on the internet.

ii | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Topic 1 – Identify client and server-
side dynamic content
Review Technical Requirements
Introduction

These notes will serve as an introduction to the concepts. You are encouraged to do further
research to fully understand the concepts. Further resources can be found at the end of the
notes.

Before you start your design you need to:

> Identify the goals of your website

> Identify your target audience

3|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
> Create a list of content that will achieve your goals and be of interest to your audience

It is important that you know the network context within which you will be developing the
application. Tech Reader architecture suggests that the web application would be ideal and that
it will be installed in-house, an important security consideration.

You will need to employ the three layer application architecture (based on client-server
architecture) to allow separation between user interface, programming logic and database
operations. These separations should be observed as far as it is practical given the technology that
you are working with.

Dynamic Web Page

A dynamic web page is a web page that provides custom content for the user based on the
results of a search or some other request. The ‘dynamic’ term is used when referring to
interactive Web Pages created for each user. There are two main ways to customise Web Pages
and make them more interactive. The two are often used together because they do very different
things.

A script is a set of instructions. For Web Pages, they are instructions either to the Web Browser
(client side scripting) or to the server (server side scripting). Scripts provide change to a Web
Page. When you visit a web page, sometimes you’ll notice that there are changes each time you
visit it (or during a visit). They probably use scripting.

Client-side scripting is generally referring to the class of computer programs on the web that are
executed client-side, by the user’s web browser instead of on the web server. JavaScript is the
main client-side scripting language for the Web. Client-side scripts are interpreted by the browser.
The process with client-side scripting is:

1 The user requests a Web Page from the server

2 The server finds the page and send it to the user

3 The page displayed on the browser with any scripts running during or after display

4|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Client-side scripts are often embedded within an HTML or XHTML document but they may
also be contained in a separate file, which is referenced by the document(s) that use it. Client-
side scripts may also contain instructions for the browser to follow in response to certain user
actions, (e.g., clicking a button). Often, these instructions can be followed without further
communication with the server.

In summary, client-side scripting is used to make Web Pages change after they arrive at the
browser. These scripts rely on the user’s computer. For the Tech Reader scenario, you will need
to create the Web-based forms and have JavaScript perform the validation processes which can
include selecting and manipulating the HTML elements.

Server-side scripting is generally referring to the class of computer programs on the web that
are executed server-side, by changing the web content on various web pages. Server responses
may be determined by various conditions one of which can be data in the posted HTML form,
the type of browser being used, or a database or server state. PHP is one main technology for
server-side scripting.

The server sends pages to the user/ client on request. The process is:

1 The user requests a web Page from the server

2 The script in the page is interpreted by the server creating or changing the page content to
suit the user and the occasion and/ or passing data around

3 The page in its final form is sent to the user and then cannot be changed using server-side
scripting

The use of HTML forms allows data to be sent to the server and processed. The results may
come back as second Web Page. Server-side scripting tends to be used for allowing users to
have individual accounts and providing data from databases. It allows a level of privacy,
personalization and provision of information that is very powerful. E-commerce sites all rely
heavily on server-side scripting.

5|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
In summary, server-side handles logging in, personal information and preferences and provides
the specific data which the user wants (and allows new data to be stored). For the Tech Reader
scenario, you will need to use PHP to interact with the database and MySQL as the relational
database.

MySQL is a relational database management system (RDBMS) that runs as a server providing
multi-user access to a number of databases. It is a popular choice of database for use in web
applications.

Below is a summarized diagram of how client-side and server-side scripting works:

Source: http://www.bogotobogo.com/php/php1.php

Web Site Organisation

When you have a list of the content you would like to include on your site you can then:

> Divide this list into pages

> Draw a chart (site map) of links between pages

> Decide on the folder structure of your website (root folder & image folder)

6|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
To complete this unit you will need the following:

> A server environment such as Apache.

> A server side scripting language such as PHP.

> A client side scripting language such as JavaScript.

> Web page development software such as Dreamweaver, Expression Web or other HTML
editor.

> At least 2 different browsers for testing the web pages.

There are some notes below to help you to prepare the technical environment for your web page
but this is optional so long as you’re able to upload your web pages and it dynamically uses
functions which are required by Tech Reader and is able to be tested through http://localhost, the
local IP address and/ or the full URL.

You may request hosting services from TAFE. Just send an email to your facilitator.

Setting Up a Development Server

If you wish to develop Internet applications but don’t have your own development server, you
will need to upload every modification you make to a server somewhere else on the Web before
you can test it.

Another advantage of a development server is that you don’t have to worry about embarrassing
errors or security problems while you’re writing and testing, whereas you need to be aware of
what people may see or do with your application when it’s on a public website. It’s best to iron
everything out while you’re still on a home or small office system, presumably protected by
firewalls and other safeguards.

7|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
What is a WAMP, MAMP or LAMP?

WAMP, MAMP and LAMP are abbreviations for “Windows, Apache, MySQL, and PHP,”
“MAC, Apache, MySQL, and PHP” and “Linux, Apache, MySQL, and PHP.” These
abbreviations describe a fully functioning setup used for developing dynamic Internet Web
Pages.

WAMPs, MAMPs, and LAMPs come in the form of a package that binds the bundled programs
together so that you don’t have to install and set them up separately. This means you can simply
download and install a single program, and follow a few easy prompts, to get your web
development server up and running in the fastest time with minimal hassle.

During installation, several default settings are created for you. The security configurations of
such an installation will not be as tight as on a production Web Server, because it is optimised
for local use.

An example will be to install WAMP. For easy installation and setup of a WAMP server, visit
http://easyphp.org. To test the installation, try and display the default web page which will have
been saved in the server’s root folder. You may enter either http://127.0.0.1/home or
http://localhost/home into the address bar of your browser. If all is well, you will see the
default EasyPHP home screen.

The next step to make your development server fully functional is to create a folder on your hard
disk called c:\web and use it as the directory.

If you encounter difficulties, refer to the FAQ. You may also install the alternatives of WAMP:

> XAMPP: http://www.apachefriends.org/en/xampp.html

> WAMPServer: http://wampserver.com/en/

> If you’re using MAC OS, download MAMP: http://mamp.info/en/download.com

> If you’re using LAMP on Linux, download XAMPP for

Linux: http://www.apachefriends.org/en/xampp-linux.html

8|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Using FTP

To transfer files to and from your Web Server, you will need an FTP program. You can use
FileZilla, FireFTP, or Classic FTP for MAC.

Using a Program Editor

Although plain text editor works for editing HTML, PHP and JavaScript, there are some
dedicated program editors such as Editra (for MAC and PC), Notepad ++ and so on.

Using an IDE (Integrated Development Environment)

They offer many additional features such as in-editor debugging and program testing and so on.
Some examples include phpDesigner IDE. You may also use Dreamweaver (click here to access
the Dreamweaver CS6 tutorial).

Apache

> A well-known HTTP Server; also known as a client-server system - includes Web
Browsers, FTP clients and server + the DNS

> Part of its feature is to supports plug-in modules for extensibility i.e. Server-side
programming language to authenticate schemes with language interfaces such as PHP

> Allows virtual hosting, DBMS-based authentication databases & content negotiation

> Supports password authentication and digital certificate authentication

> Has a built-in search engine & an HTML authorizing tools and supports FTP.

9|P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Client-Side Dynamic Content
Dynamic HTML (DHTML) uses HTML, CSS and scripts (commonly Javascript) to provide
interactive features on your web pages. The following sections will discuss the dynamic features
of JavaScript in some detail, but before you can use these more advanced features it is important
to ensure you understand the basics of the language such as:

> How to declare variables

> How to assign values to variables

> How to use constants

> How to declare and call functions

> How to write JavaScript expressions

> How to use operators and the maths functions

> How to use string functions

> How to use conditional and loop statements

You will then be able to build on this basic knowledge to create dynamic web applications. Before
you move on further, you should do the tutorials at http://www.w3schools.com/js/default.asp

You will also need to familiarise yourself with HTML 5. You should do the tutorials at
http://www.w3schools.com/html/html5_intro.asp. Pay special attention to the semantic and form
elements.

For Tech Reader, DHTML will be built namely for the validation checks of the form for
registration and products ordered. JavaScript will do the following when user submits a form:

> Make sure all the required fields have something in them (no empty fields)

> Email field have a valid email address, as well as the other field data to match the data
types

> Give the user the correct message depending on the error they have made i.e. Enter your
first name or Enter a valid email address

10 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
What you’ll need to remember is that, you will use HTML DOM so that JavaScript can access all
the elements of an HTML document. To learn more about this, refer to
http://www.w3schools.com/js/js_htmldom.asp

LEARNING ACTIVITIES ACTIVITY 1

Let’s look at the simple example of using Functions and Dot Notation for revision. User will need to
Click on the ‘Open Popup Window’ link to open the popup first and then click the ‘Close the Popup
window’ link to close the popup. Using the window.close method, you will use the reference to a
window to close. For example:

popup_window = window.open(“”);

.....

Popup_window.close();

Server-side Dynamic Content

PHP (Hypertext Preprocessor)

Basically, web client are designed to display pages that they received as reply to request. The
server is enhanced using modules to support script languages such as PHP. One of PHPs main
focus is on server-side scripting. You can access the PHP program output with a web browser,
viewing the PHP page through the server. So with PHP, it’s a simple matter to embed dynamic
activity in web pages. Using PHP, you have unlimited control over your web server. Whether you
need to modify HTML on the fly, process a credit card, add user details to a database, or fetch
information from a third party website, you can do it all from within the same PHP files in which
the HTML itself resides.

11 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
The following sections will discuss the dynamic features of PHP in some detail, but before you
can use these more advanced features it is important to ensure you understand the basics of the
language by going through them at http://www.w3schools.com/php/default.asp. Pay special
attention to PHP arrays, functions and objects.

LEARNING ACTIVITIES ACTIVITY 2

We will look at a simple example of Customer Contact Application’s PHP processing script. This
script is going to process data submitted to it when the Add new Contact form submit button is clicked.
Save the input form as add_contact.htm.

Remember to add this code:

<body>

<form name=”addcontact” method=”post” action=”add_contact.php”>

Next, create the php file.

12 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Save this as add_contact.php.

Note the following:

1 All PHP code goes within the <?php ?> tags. Any PHP code in a web page is:

> first executed and replaced with HTML before the web page is sent to the

> browser.

2 Notice that HTML code can be embedded in PHP strings.

3 echo is a built in function that prints out what's passed to the function as its

> first parameter.

4 $_POST contains an associative array of all the data that was submitted from

> the form. To access a form's control value simply type in $_POST["control

> name"] where "control name" is replaced by the actual name of the control.

Now load add_contact.htm and fill in the form such as below and submit:

13 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
What is the result?

MySQL

PHP is often coupled with MySQL, a relational database server that can store the information
and variables the PHP files may use. Together they can create everything from the simplest web
site to a full blown business web site, an interactive web forum, or even an online role playing
game.

Information stored in a MySQL database hosted on a web server can be accessed from anywhere
in the world. Some examples that can utilise MySQL are a web message board or a customer’s
shipping status.

PHP and MySQL complement each other. PHP can collect data and MySQL can in turn store
the information. PHP can create a shopping cart for your web store, but MySQL can then keep
the data in a format PHP can use to create receipts on demand, show current order status, or even
suggest other related products.

14 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Select Appropriate Languages and Technology
Before embarking on the languages and technology, you need to be certain that you understand
control structures. Expressions and control flow in PHP is important and forms the most
fundamental part of any programming language.

This unit is developed with the understanding that you have used control structures such as
sequence, selection and iteration.

> "Sequence" refers to an ordered execution of statements.

> In "selection" one of a number of statements is executed depending on the state of the
program. This is usually expressed with keywords such as ‘if..then..else..endif’, ‘switch’,
or ‘case’.

> In "repetition" a statement is executed until the program reaches a certain state, or
operations have been applied to every element of a collection. This is usually expressed
with keywords such as ‘while’, ‘repeat’, ‘for’ or ‘do..until’.

You may refer to this as when used in PHP codes:

http://www.php.net/manual/en/language.control-structures.php

Learning PHP, MySQL and JavaScript explains each technology separately. Now you will
combine them, and consider using valuable programming concepts, including objects,
XHTML and so on to create your dynamic webpage. This may include the following:

1 Create web pages with PHP and MySQL by integrating forms and other HTML features

2 Use JavaScript, form functions and event handling to access the DOM (Document Object
Model)

3 Upload and manipulate data and images, validate user input

Interacting with MySQL makes PHP a far more powerful tool. We will go through some of the
most common ways PHP interacts with MySQL. To follow along with what we are doing, you
will need to create a database table by executing this command:

15 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
This will create a table for us to work with, that has friends' names, favourite colours, favourite
foods, and pets.

The first thing we need to do in our PHP file is connect to the database. We do that using this code:

<?php
// Connects to your Database mysql_connect("your.hostaddress.com",
"username", "password") or die(mysql_error());
mysql_select_db("Database_Name") or die(mysql_error());
?>

You will replace server, username, password, and Database_Name with the information relevant
to your site. mysql_error() function is used to test the connection:
http://www.w3schools.com/php/func_mysql_error.asp.

Save this and include file to be included in the subsequent PHP files.

Next we will retrieve the information from the database table we created called "friends"

// Collects data from "friends" table

$data = mysql_query("SELECT * FROM
friends") or die(mysql_error());

16 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
And we will then temporarily put this information into an array to use:

// puts the "friends" info into the $info array

$info = mysql_fetch_array( $data );

Now let's print out the data to see if it worked:

// Print out the contents of the entry Print

"<b>Name:</b> ".$info['name'] . " ";
Print "<b>Pet:</b> ".$info['pet'] . " <br>";

However this will only give us the first entry in our database. In order to retrieve all the
information, we need to make this a loop. Here is an example:

while($info = mysql_fetch_array( $data ))

{
Print "<b>Name:</b> ".$info['name'] . " ";
Print "<b>Pet:</b> ".$info['pet'] . " <br>";
}

LEARNING ACTIVITIES ACTIVITY 3

Now you will need to put all those ideas together to create a nicely formatted table.

17 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Sample Answers
Activity 1

18 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Activity 2

Activity 3

19 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Topic 2 – Create dynamic content
Create pages using appropriate languages
Now that you have the architecture to develop and know how the application should be developed,
you may proceed to develop the website.

20 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Database

This is a sample definition of the table in the database that will store the login and information.
All tables come with a primary key which will uniquely identify each record. To find out more,
visit:

> http://www.w3schools.com/sql/sql_create_db.asp

> http://www.w3schools.com/sql/sql_create_table.asp

21 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
HTML5
HTML5 is the new standard of HTML. Below is a simple HTML5 document:

You may use the HTML 5 skeleton code. Try some sample codes now from an HTML tutorial:
http://www.w3schools.com/html/default.asp

Please note that if you’re going to use HTML5, you need to check your browsers for features
supported. You may use: The HTML5 test site for this.

22 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Terms and Concepts

Components

HTML 5 incorporates HTML + CSS + JS. From the JS perspective, it uses Web Storage, Web
SQL Database, Application Cache and so on. This new HTML standard has new elements, new
attributes, Full CSS3 Support, Video and Audio, 2D/ 3D Graphics, etc. HTML 5 was designed
with better error handling, reduce need for external plugins (i.e. Flash), more markup, being
device independent etc. in mind.

Browser Support

HTML 5 is not yet an official standard therefore no browsers have full HTML 5 support.
However, all major browsers (Safari, Chrome, Firefox, Opera, IE) continue to add new HTML
5 features to the latest versions. You can read more from: http://html5doctor.com/how-to-get-
html5-working-in-ie-and-firefox-2/

Features

HTML 5 has new elements support better handling of today’s Internet use by providing better
structure, better form handling, drawing, and media content. The elements categories are
semantic/ structural, media (new), canvas (new), new form elements. Go to
http://www.w3schools.com/html/html5_form_elements.asp and explore the new Form Elements.

23 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Client-side scripting with JavaScript

LEARNING ACTIVITIES ACTIVITY 4

Example: consider designing your Registration form as part of Client-side Validation process practice.

Designing your form:

With the basic knowledge you have of HTML and CSS, how you design your form plays a role in
how easy you will be able to identify your form elements. We are going to design a simple user
registration form in XHTML. See screen sample below:

For this form, we are using the

<form action="" method="POST" onsubmit="return validate(this);"> element to call the return

validate() JavaScript function.

24 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
In this example, class="required text"/> has been included for the fields. This means that strings,
integers and dates have to be in the correct format in order for it to be correctly stored in the
database.

With the basic form done, now you may add some css on it.

Next is to ensure that the data entered by the user is exactly what is expected. This is the primary
reason for form validation. The advantage seen here is that users will have instant feedback
concerning their input and will not crash the server-side software if validated. Our checks will
cover the following:

> Blank fields – check for blanks

> Type of data entered – Integer or letter or both (alphanumeric)

> Format of data entered – e.g. email address

To check for blanks, a function needs to be created which will go through all the fields in the
form to see if they contain any values, and show appropriate error message:

Let’s call this function checkblanks(pform1). pform 1is the parameter which is used as a DOM
element to access other elements in the form. Here is an example of how to use it:

function checkblanks(pform1)
{
if(pform1.username.value=="")
{
alert("Please enter a user name")
pform1.username.focus()
return false
}

Notice what this piece of code does – checks the value property of username and if it is blank, it
provides an alert to the user and gives the username object the focus again.

An equivalent of this code can be found in JavaScript form validation:

http://www.w3schools.com/js/js_form_validation.asp

Return false is a way to tell the event to not actually fire. This is an example of what is termed
as event handlers. So, if we had an onsubmit event, return false will mean that the form is not
submitted.

25 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
You can do the same for the password, name and email elements. The example above accesses
the form elements by name but you can also access the elements on the form by referring to their
IDs.

We will now consider the data type validation.

This piece of code will also check that the correct number of characters is included so we will
consider a function to check passwords. Our password should be minimum six characters and
maximum eight characters:

function checkpassword(pform1)
{
var str=pform1.password.value;

//check required fields

//password should be minimum 6 chars but not greater than 8

if ((str.length < 6) || (str.length > 8))

{
alert("Invalid password length.")
pform1.password.focus()
return false
}
}

Notice that the function above first captures the submitted password and stores it in a variable
called “srt”? Then it counts the number of characters (using the length()function) in the
password to see if the set restrictions are met.

To ensure that the password is not a number, you may use the isNAN() function. NAN stands
for Not a Number. The example:

if(!isNaN(str))
{
alert="this is not a number";
pform1.password.focus()
return false
}

Email address verification can be done by using regular expressions. To validate an email address
authors simple look for the ‘@’ sign and a dot(.) in a text to make a valid email address. You may
consider the example for http://www.w3schools.com/js/js_form_validation.asp.

26 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
Now, try sending an email to this address: testing.email@myAddress. This will validate true if
the above validation logic is used. However, you can remedy this issue using regular expressions
pattern matching capabilities.

function checkemail(pform1)
{
var email = pform1.email.value;

var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA- Z]

{2,4}$/;

if(!(validemail.test(email)))
{
alert("Invalid email address")
pform1.email.focus()
return false
}

So what did we do here? First of all, we captured the value for email that was sent from the
form: var email = pform1.email.value;

Then we declare a validemail pattern for the email address:

var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;

To understand the regular expression we will divide it into smaller parts, so that it makes sense:

> /^[a-zA-Z0-9._-]+: means that the email address must begin with alpha-numeric
characters (both lowercase and uppercase characters are allowed). It may have periods,
underscores and hyphens.

> @: there must be a '@' symbol after initial characters.

> [a-zA-Z0-9.-]+: after the '@' sign there must be some alpha-numeric characters. It can also
contain period ('.') and hyphens('-').

> .: after the second group of characters there must be a period ('.'). This is to separate
domain and subdomain names.

> [a-zA-Z]{2,4}$/: lastly, the email address must end with two to four alphabets. Having a-z
and A-Z means that both lowercase and uppercase letters are allowed while {2,4} indicates
the minimum and maximum number of characters. This will allow domain names with 2, 3
and 4 characters e.g.; au, org, com, net, wxyz).

27 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Now that you have some basic understanding of regular expressions, let's continue with the
code.

We now need to compare the submitted email address against the "validemail" pattern that we
defined earlier:

if(validemail.test(email)){

The "test()" property tries to match the submitted email against the pattern that we submitted.
We simply notify the user if the test fails:

}
else
{
err.message="Invalid email";
err.field=pform1.email;
}

For further understanding and application, please read http://www.w3schools.com/jsref/jsref_obj_regexp.asp

and conduct further research.

For your assignment, it will be sufficient just doing a separate validation code for JavaScript and
PHP. Just note that PHP validation is most important because JavaScript is frontend code,
therefore can be modified or simply disabled by the user.

You can’t use PHP tags in JavaScript. You can only generate either whole JavaScript code or
only some data for it using PHP. The next level will be to learn AJAX.

Database-driven Website: Use PHP and MySQL

As you’ve done some work in creating simple php files, we will now incorporate more functionality
to meet the requirements of Tech Reader.

For example, you could tell PHP to look in the database for a list of books that you would like to
appear on your Web site. Before this, create your products table using PHP and MySQL.

28 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
In this example, the books would be stored entirely in the database. The advantage of this would
be twofold. First, instead of having to write an HTML file for each of your books, you could
write a single PHP file designed to fetch any book out of the database and display it. Second, to
add a book to your Website would just be a matter of adding the book to the database. The PHP
code would take care of the rest by automatically displaying the new book along with the rest
when it fetched the list of books from the database.

Let’s run with this example as we look at how data is stored in a database.

LEARNING ACTIVITIES ACTIVITY 5

Now that you can connect to your database, remember to close your connection after all the processes
have been done.

Create Tables: in this example, we will print a line to indicate a table has been created.

<?php
// Connects to your Database
mysql_connect("your.hostaddress.com", "username", "password") or die(mysql_error());
mysql_select_db("Database_Name") or die(mysql_error());
mysql_query("CREATE TABLE tablename ( name
VARCHAR(30), age INT, car VARCHAR(30))");
Print "Your table has been created";
?>

You will need to save the data on the Product form (s) you’ve created. You will need to take note of the
following database functions which can be used in the script.

mysql_connect - we have had a look at this previously.

mysql_select_db

An example of how to collect data to post to MYSQL database:

<?
$name=$_POST['name'];

29 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
 $email=$_POST['email'];
$location=$_POST['location'];
mysql_connect("your.hostaddress.com", "username", "password") or die(mysql_error());
mysql_select_db("Database_Name") or die(mysql_error());
mysql_query("INSERT INTO `data` VALUES ('$name', '$email', '$location')");
Print "Your information has been successfully added to the database.";
?>

It is time to offer some validation to check if the data entered has duplicates. If there exist any data, provide
message to say so.

Remember, it will be good to make Product Name Column a UNIQUE INDEX.

Let’s say you wish to check for Product Name if it exists, you may use the WHERE clause to get only
rows with the product name. This is just a sample code:

"SELECT * FROM product_list WHERE pname='".$server-

>real_escape_string($pname)."'"

Then check if the query results in selecting any rows (either 0 or 1 row) with

MySQLi_Result::num_rows

function createProduct($pname,$pdesc) {
$server->connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
$result = $server->query("SELECT * FROM products WHERE pname='".$server-
>real_escape_string($pname)."'");
if ($result->num_rows() === 0) {
if ($server->query("INSERT INTO products (pname) VALUES ('".$server-
>real_escape_string($uname)."'")) {
echo "Product added Successfully";
} else {
echo "Error while adding Product!";
}
} else {
echo "Product already exists!";
}
}

You want to consider validation for all fields on the form. Try this
http://www.w3resource.com/php/form/php-form-validation.php

Now that you can save data to your database, you will need to retrieve data from the database

30 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
table.

mysql_query – will retrieve the information from the database table. E.g. for table products:

Temporarily put this information into an array to use:

mysql_fetch_array – will return a row from a recordset as an associative array and/or a numeric array.
This function gets a row from the mysql_query() function and returns an array on success, or FALSE on
failure or when there are no more rows.

Retrieve all the information by putting it all together using a nicely formatted table.

31 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
Topic 3 - Test dynamic pages

Having completed the website, testing the prototype is the next stage for the web pages. A
website that contains dynamic content can be difficult to test.

This is an important process as all the functionality of the prototype will be identified here. You
will use this outcome as part of your buy-off process with the stakeholders and as basis for the
new website development.

33 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w
There is the common Code Validation:

> HTML – checking the background coding of the design against the (X)HTML Standard
(DOCTYPE declaration) the web pages are using. It also needs to meet standards
compliant coding with cross browser compatibility issues addressed (IE, Chrome, Opera,
Firefox and Safari).

> Use : http://validator.w3.org/#validate_by_upload

> CSS – coding is checked for errors. The code validators check that the web page style
sheet coding is in compliance with CSS standards set by the W3C.

> Alt Attribute – ensure that image has an alt attribute.

JavaScript Code Quality Tool: http://www.jslint.com/ and http://www.javascriptlint.com/

Website Navigation

Link checking

Waiting for an object – check whether a page is fully loaded to make sure that all the needed
objects exist.

LEARNING ACTIVITIES ACTIVITY 6

> Use : http://validator.w3.org/#validate_by_upload

> Use: http://jigsaw.w3.org/css-validator/validator.html#validate-by-upload

> Use: http://www.javascriptlint.com/online_lint.php

1 Test prototype website in two different browsers

2 Show two errors and how you managed to resolve them.

34 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E n o w
 REFERENCE REFERENCE 1

Other Resources

Web Resources

WAMP Installation

PHP, MySQL and JavaScript

Books

Learning PHP, MySQL, and JavaScript : A Step-by-Step Guide to Creating Dynamic Websites.
Author: Robin Nixon, Publisher: O'Reilly Media.

ISBN 10: 0596157134

35 | P a g e
I C T W E B 5 0 2 _ L G_
V 1
T A F E no w