Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
1
EIE 4432 Web Systems and Technologies
Lecturer: Dr Bonnie LawRoom: DE 609 Tel: 2766 4746
email: [email protected]
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