1

EIE 4432 Web Systems and Technologies

Lecturer: Dr Bonnie LawRoom: DE 609 Tel: 2766 4746

email: ennflaw@polyu.edu.hk

http://www.eie.polyu.edu.hk/~nflaw/teaching.html

2

Web Systems & Technologies Not a course on web page design A course about

how information is accessed and delivered through web

Underlining infrastructure Enabling techniques & technologies

For Internet and web database applications Lecture focused on concepts, may not

directly help with coding

3

Learning Objectives

students should be able to Understand the enabling technologies for

building Internet and Web database applications

Understand the different components for developing client/server applications

Apply the techniques and features of the client/server development languages to construct a database application based on Internet

Develop the web database applications through programming exercises

4

EIE4432

Demonstrate knowledge of the client/server architecture Three-tier web architecture

Develop Client side web programs using

JavaScript/DHTML Server side web programs using PHP Web applications using AJAX techniques

Design and implement databases MySQL

5

Learning Lecture/Tutorials

wed: 08:30 – 11:20

Laboratory

Programming exercises

Mon: (14:30-18:20) CF105

At least 3 hrs practise References

Books

Internet resources

I hear and I forgetI see and I rememberI do and I understand

-- Confucius

Homework

Programming exercises

6

Topics Covered Client/server model

Two-tier / three-tier models Client side programming

HTML, XHTML, JavaScript, Java Applets Server side programming

PHP, ASP, JSP, … Database design and implementations

Access, MySQL Database driven applications

Up to date web content / Personalized web content DHTML + PHP AJAX technologies

Data Analysis Concepts, web data mining

7

Work Load Requires systematic, well organized,

continuous work Programming

Learned by hands-on work Have to practice!

Work load can be heavy if left until the last minute

8

Assessment

CRA (Criteria referencing assessment) NO CURVE FITTING Individual Subject Outcomes

Demonstrate knowledge of the client/server architecture Three-tier web architecture

Develop Client side web programs using JavaScript/DHTML Server side web programs using PHP

Develop Web database applications Access/MySQL, AJAX

Demonstrate knowledge of data analysis

9

Assessment

Examination: 40% Continuous Assessment: 60%

Tests: 2: (60%) (Programming tests) 14 Oct: client-side & server-side techniques 11 Nov: client + server + DB

Quiz (10%) 30 Sept: Simple quiz about client-side techniques

Mini-project (30%) A group of 5 Students

Phase 1: project proposal: due on 2 Oct 2019 Phase 2: project report and presentation: 30 mins video: all

members need to explain the findings verbally (29 Nov 2019)

Let me know in advance if you cannot attend the test

10

Today’s discussion Internet and Web-wide web Architecture Web development Overview of web technologies

11

Terminologies Internet:

Network of networks Infrastructure: connects millions of computers globally via a

variety of languages called protocols A network infrastructure: a computer can communicate with

any other computer as long as both are connected to the Internet

Web: World wide web: way of accessing information over the

medium of the Internet Uses HTTP protocol to transmit data

Uses browsers to access web pages Uses the Web to share information The web is just one of the ways that info can be disseminated

over the Internet

12

Layering of Protocols

Application Layer:

Network Layer:

Transport Layer:

Link Layer:

DNS Finger FTP

UDP TCP

IP

ATM Ethernet GSM

HTTP SMTP

13

Protocol Suite for InternetApplication Layer: handles details of specific application

Implemented as part of the Web browser/server

Network Layer: handles delivery of individual packets of dataImplemented in routers/end hosts

Transport Layer: coordinates the communication between hostsImplemented in the OS

Link Layer: handles hardware details of interfacing with physical communication medium, e.g., Ethernet, ATM, etc.

14

Overall Picture

HTTP

TCP

IP

EthernetInterface

HTTP

TCP

IP

SONETInterface

Web Client Web Server

IP

EthernetInterface

SONETInterface

Router

HTTP Message

TCP segment

IP packet

IP packet

15

Request-Response (HTTP)

Client (browser)

Web Server

URL

user

Request string

Response string

information

16

Request-Response (HTTP)

Domain name conversion Domain names: alphanumeric labels IP: numbers

17 18

Example - HTTP

19

Example - TCP

[SYN]: request the server to have a connection [SYN, ACK]: server tells the client that the connection is ok

[ACK]: client to server: acknowledge that [SYN, ACK] is received.20

Request-Response (HTTP) http://www.eie.polyu.edu.hk/~nflaw/index.html Request (from client to server)

GET /~nflaw/index.html HTTP/1.1Host: www.eie.polyu.edu.hk

Response (from server to client) HTTP/1.1 200 OK

Server: Apache/1.3.20 Content-type: text/html Content-length: 88Last-modified: Fri, 1 Feb 2002 03:40:03 GMT <html><head> <title>Test Page</title></head> <body> <h1>It Worked!</h1> </body></html>

HTTP/1.1 404 Not Found Server: Apache/1.3.20

21

HTTP Request

GET /index.html HTTP/1.1Host: www.example.comUser-Agent: Mozilla/5.0Accept: text/html, */*Accept-Language: en-usAccept-Charset: ISO-8859-1,utf-8

blank line

GET /index.html HTTP/1.1Host: www.example.comUser-Agent: Mozilla/5.0Accept: text/html, */*Accept-Language: en-usAccept-Charset: ISO-8859-1,utf-8

blank line

URL Protocol VersionMethod

Headers

Body(optional)

22

HTTP Response

HTTP/1.1 200 OKDate: Thu, 24 Jul 2008 17:36:27 GMTServer: Apache-Coyote/1.1Content-Type: text/html;charset=UTF-8Content-Length: 1846blank line<!DOCTYPE html ><html ... >...</html>

HTTP/1.1 200 OKDate: Thu, 24 Jul 2008 17:36:27 GMTServer: Apache-Coyote/1.1Content-Type: text/html;charset=UTF-8Content-Length: 1846blank line<!DOCTYPE html ><html ... >...</html>

Status Status MessageVersion

Headers

Body

23

Two-tier Model (client-server model) Client tier:

Web browser software processes and displays HTML resources, issues HTTP requests and processes HTTP responses

Server tier: accept HTTP requests, process them, and

return the HTTP responses to the client

24

Web Applications Multi-tier model Three tier architectures

Middle tier Contains most of the

application logic and communicates data between the other tiers

Client tier Web browser software that

interacts with the applications

Database tier Consist of the database

management system that manages the database containing the data users create, delete, modify and query

Internet

25

Client Tier Traditional web delivery: disseminate information

Static web page: means all HTML documents stored in files, and in server

Dynamic/interactive: “programs” to be run

Either on the client’s computer (client-side processing) or at server (middle tier, server-side processing)

DHTML: client side processing “Dynamic HTML is a term used by some vendors to

describe the combination of HTML, style sheets and scripts that allows documents to be animated.” HTML: content Cascading Style Sheet (CSS): style and layout JavaScript language: control HTML elements through DOM

(document object model)26

Middle Tier The majority of the application logic

Processes input from the user Check username/password Retrieves user specific information from db Stores user specific information to db

Adds state management to the HTTP protocol Integrates the web with the database management system

Web server: Parse the HTTP request message Associate the requested URL with the appropriate script Pass data to and from the script

Scripting engine: Process input from the server Generate content in HTML format Send back to the server

27

Client:UI

Middle Get all books with keyword “web programming”

DBQuery

Format the output, i.e., data returned from the DB

28

Examples of Client-side Techniques

JavaScript Netscape + Sun Microsystems Interpreted scripting language

Script embedded inside the HTML Interpreted

Entire web page is downloaded to the browser When the code is executed, it is interpreted one line at

a time With the use of DOM (Document object model), can

manipulate all elements in the HTML document

29

Examples of Client-side Techniques

Flash Macromedia Requires browser plug-in (flash player) Good graphics quality + small file size ActionScript:

A scripting language used in Flash enables user interaction

30

Examples of Client-side Techniques

Java Applet Totally different from JavaScript Java application run on web browser Platform independent

Compile to generate byte code Interpret the byte code by the browser

Slow to load

31

Client-side Processing Execute code on client Advantages:

No network delay Workload distributed to the client

Disadvantages: Security problem

Download Java applet Run ActiveX controls

ActiveX control: essentially a windows program

32

Examples of Server-side Techniques

Common gateway interface (CGI) Standard for starting programs running on the web server An interface between web server and external programs

Set of rules that define how web server communicates with other software

Defines how the other software talks back to the web server Can be written in any language

PERL

33

Examples of Server-side Techniques

Common gateway interface (CGI) Overhead: starting external programs for each request Better to integrate requests directly into the server

ASP Microsoft, IIS (Internet Information server) Embedded in HTML

PHP Open-source Support for large number of dbs Optimized to run with Linux/Apache/MySQL combinations

34

Examples of Server-side Techniques Servlet

Sun Microsystems Compiled Java class Servlets receive requests and return responses Servlets executed on the server system under the

control of the web server Faster than CGI, have direct access to Java APIs

JSP Embedded onto HTML Server does not execute JSP, but transforms JSP to

servlet first, and then execute

35

Client:UI

Middle Get all books with keyword “web programming”

DBQuery

Format the output, i.e., data returned from the DBPHP

HTML, JavaScript, CSS,XML

SQL

Access/MySQL36

Overview

Web 1.0 HTML, website Web as a static source of information: “read”

Web 2.0 Second generation web E.g., Blogs, www.php.net, … User-oriented Web as a platform: “write” & “contribute”

38

Web 2.0

Synchronous(A)synchronous(A)synchronous requests

39

Client-server Traditional ways of design:

Server: much more complex than client Current trend:

Client: very complicated: JavaScript: execute client-side code DOM: allows JavaScript to interact with the page’s

HTML add/remove tags, change their styles etc AJAX: asynchronous HTTP requests: partial data update Web workers: multi-threading support Web sockets: full-duplex client-server communication

over TCP Multimedia support: <video>, web cams Geolocation: browser can determine the location <canvas> and WebGL: bitmap manipulation and interactive

2D/3D graphics

Web 3.0 Next paradigm shift of the Internet taking

the best of web 2.0, including rich internet applications and social media, and brining them to mobile devices, digital signage.

Information is searched for, filtered, personalized and delivered to end users based on preferences, bio-feedback and location

“semantic web”, “internet of things”, “smart home applications connected to wireless network”

“artificial intelligence” all info is categorized and stored in

such a way that a computer can understand (as well as human) Make searching more relevant to user

47

Topics Covered Client side programming

Self-learning: HTML and basic JavaScript Dynamic HTML:

CSS (Cascading style sheets): define how to display HTML elements

JavaScript: add interactivity to HTML pages, React to events

Server side programming PHP: programming the behavior of the server: Create

customized content Database design and implementations

Relational model, MySQL

48

Topics Covered Database driven applications

Up to date web content Personalized web content

DHTML + PHP AJAX technologies: XML:

HTML: was designed to display data and focus on how data looks

XML: was designed to describe data and focus on what the data is

Data Analysis Introduction to data mining Concepts of data analysis Web data mining

49

Academic Integrity Plagiarism:

copying the work of another person (either intentionally or unintentionally) without proper acknowledgement

Cheating: Copying answers from another student during

tests/examinations Using unpermitted materials or aids during

tests/examinations False documents: Student discipline committee:

A lower grade or fail A lower degree classification Suspension expulsion

50

Summary Overview of web technology

Architecture Client, server, database tiers

Client vs server scripting technologies Asynchronous framework