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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
> 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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 tag">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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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 | Page ICTWEB502_LG_V1 TAFEnow
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: