Introduction to Web Architecture SE2840 Web Application Design Jay - - PowerPoint PPT Presentation

Introduction to Web Architecture

SE2840 Web Application Design Jay Urbain, PhD Credits: See last slide for references

3

Contact info

• Jay Urbain, PhD
• email: urbain@msoe.edu
• Office hours: http://jayurbain.com/msoe
• Course home: http://jayurbain.com/msoe/se2840
• Course outline: http://jayurbain.com/msoe/se2840/outline.html
• Office: L-345
• Cell: 414-745-5102

Things we’ll cover in this course:

• Basic WWW architecture: ReST, MVC (server-side, client-side)
• HTML5 and CSS for web page content and appearance
• Client-side JavaScript for validating forms and modifying

content/appearance of web pages

• Ajax for efficient client-server interactions
• jQuery for efficient DOM queries
• Bootstrap for styling and cross-platform support
• Data driven web applications – JavaScript|Python|Java
• Modern JS framworks – Mongo, Express, Angular, NodeJS

(MEAN)

• Web services
• Highly interactive single page apps (Angular)
• Security, privacy and confidentiality in website design

4

Prerequisites:

Core programming skills: data structures, threading, IPC – This is all material you should have from CS2852 and CS2911

5

6

Labs

• Web page design using standard HTML/CSS
• Client-side scripting using Javascript/Ajax
• DOM Scripting and Event Handling using JS and Bootstrap
• Web services client with Bootstrap, jQuery, d3.js
• Dynamic data driven web apps
• Model-View-Controller application
• End-to-end web-services application
• NodeJS (JS) based web server
• Angular dash board

7

Grading (Course Policies)

• Reference syllabus in course outline.

Outline

• Basic Web Architecture
• HTML
• URI
• HTTP
• Web Architecture Extension
• Cookies
• Database-driven Website Architecture
• AJAX
• Web Services
• XML, JSON
• NodeJS
• Angular

The World Wide Web

• In 1989, Tim Berners-Lee suggested

a way to let all users, but particularly scientists, browse each

• thers papers on the Internet.
• Developed HTML, URLs, and HTTP.

Basic Web Architecture

• The traditional web is a client-server/two-tiered architecture:

– A web browser requests information content, – a web server transfers information to the client, – and the web browser displays the transferred information.

Web Browser

• An application for retrieving, presenting, and traversing

information resources.

– The primary purpose is to bring information resources to the user. – http://gs.statcounter.com/browser-market-share - October, 2017

Web Browser

• An application for retrieving, presenting, and traversing

information resources.

– The primary purpose is to bring information resources to the user.

Mobile Phone OS

Mobile Market Share

Web Server

• The term web server can mean a couple of things:

– A computer program that accepts HTTP requests and returns HTTP responses with optional data content. – A computer that runs a computer program as described above.

HTML - HyperText Markup Language

• HTML is the main markup

language for creating web pages and other information that can be displayed in a web browser.

• Derived from SGML (Standard

Generalized Markup Language)

• Document layout language

(not a programming language).

• Defines structure and content
• f Web pages.

Show example

HTML - HyperText Markup Language

• HTML consists of several key components, including

elements (and their attributes), character-based data types, character references, and entity references.

• Another important component is the document type

declaration, which triggers standards mode rendering.

1) Experiment with HTML: http://www.w3schools.com/html/defaul t.asp 2) Save your HTML in a file with an ‘html’ extension. 3) Double-click your file to open in a browser.

URI - Universal Resource Identifier

• URI is a string of characters used to identify a Web resource.
• Enables interaction with a resource over a network (e.g., the

WWW) using specific protocols.

• URIs can be classified as locators (URLs), as names (URNs), or

both.

• A uniform resource name (URN) functions like a person's name.

I.e., the URN defines an item's identity.

– E.g. The ISBN system for uniquely identifying books: ISBN 0-486-27557-4

• A uniform resource locator (URL) resembles that person's street

address., and provides a method for finding it.

– E.g., file:///home/username/books/

URI Venn Diagram

URI Reference

• URL’s and URN’s are complementary: Identifying the

electronic book saved on a local hard disk.

• URI Reference:

http://example.org/absolute/URI/with/absolute/path/to/resource.txt

• Contains four distinct parts: the protocol, the machine name,

the directory path, and the file name.

– There are several kinds of schemes: file URLs, FTP URLs, and HTTP URLs.

HTTP - HyperText Transfer Protocol

• Application protocol for distributed, collaborative,

hypermedia information systems.

• Represented as structured text.
• Foundation of data communication for the Web.
• Stateless, request/response client-server protocol.

i.e., HTTP client initiates a request.

• Resources to be accessed by HTTP are identified using

Uniform Resource Identifiers (URIs).

Request methods

• HTTP defines eight methods indicating the desired action to be

performed on the identified resource. BOLDed methods are supported by most web sites. – HEAD – same as GET without message body – GET – requests specified resource – POST – requests the server accept the entity enclosed in the request. – PUT – requests the entity enclosed in the request be stored. – DELETE – delete the specified resource – TRACE – echoes back the received request to see if changes were made by intermediate servers. – OPTIONS – returns the HTTP methods that the server supports for the given URL. – CONNECT – converts request connection to TCP/IP tunnel, usually to support SSL-encryption for VPN.

Safe methods

• HEAD, GET, OPTIONS and TRACE are defined as safe (no side

effects).

• POST, PUT and DELETE are intended for actions which may

cause side effects either on the server. Note: not always implemented this way!

Status Codes

• The first line of the HTTP response is called the status line.
• The way the user agent handles the response primarily

depends on the code and secondarily on the response headers. – Success: 2xx – Redirection: 3xx – Client-Side Error: 4xx – Server-Side Error: 5xx

HTTP session state

• HTTP is a stateless protocol.
• Hosts do not need to retain information about users

between requests.

• Statelessness is a scalability property.
• For example, when a host needs to customize the content of

a website for a user, the following methods can be used:

• Solution:

– Cookies (client side key-value) – Sessions (server-side, persists during user’s interaction) – Hidden variables (form variable) – URL encoded parameters (such as

/index.php?session_id=some_unique_session_code)

Sample HTTP Request and Response

• Client request
• Server response

HTTP Request and Response with Telnet

$ telnet www.jayurbain.com 80 Trying 50.63.39.1... Connected to jayurbain.com. Escape character is '^]'. GET /msoe/index.html HTTP/2.0 HOST: www.jayurbain.com <line feed> Demo, also show OPTIONS, HEAD Students: Enable and run Telnet On Windows, you should be able to skip the ‘HOST: www.jayurbain.com ‘ line.

HTTP OPTIONS

dhcp-155-92-67-24:~ jayurbain$ telnet www.jayurbain.com 80 Trying 50.63.39.1... Connected to jayurbain.com. Escape character is '^]'. OPTIONS / HTTP/2.0 host: www.jayurbain.com HTTP/1.1 200 OK Date: Wed, 19 Jul 2017 19:13:59 GMT Server: Apache Allow: OPTIONS,GET,HEAD,POST Content-Length: 0 Content-Type: text/html Connection closed by foreign host.

HTTP HEAD

HTTP POST

POST /path/script.cgi HTTP/1.0 From: frog@jmarshall.com User-Agent: HTTPTool/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 32 home=Cosby&favorite+flavor=flies

Install Telnet on Windows

Telnet is a protocol that enables you to connect to remote computers and local computers

• ver a TCP/IP network, over TCP port 23. By default, Telnet is disabled in recent Windows

environments. To enable Telnet command line utilities:

• Click Start > Control Panel.
• Click Programs and Features.
• Click Turn Windows features on or off.
• In the Windows Features dialog box, check the Telnet Client check box.
• Click OK. The system installs the appropriate files. This will take a few seconds to a

minute. To open a Telnet session:

• Click Start.
• Enter cmd in the Search field in the Start menu. A command prompt is displayed.
• Type telnet and press ENTER. The Telnet> prompt is displayed.
• Enter: set term vt100

Skip – optional later

JavaScript

• Scripting language designed for creating dynamic, interactive

Web applications that link together objects and resources on both clients and servers.

• Example usages:

– Getting your Web page to respond or react directly to user interaction with form elements and hypertext links. – Preprocessing data on the client before submission to a server. – Changing content and styles. – Ajax requests (asynchronous messages to server) – Web page interactivity with HTML5 + CSS + JavaScript. – Server-side web applications, e.g., NodeJS.

Cookie

• Cookie is a small piece of text stored on a user's computer by a web

browser.

• Consists of one or more name-value pairs containing bits of information

such as user preferences.

• A cookie can be used for:

– authenticating, – session tracking, and – remembering specific information about users.

Chrome – C:\Users\{username}\AppData\Local\Google... Data\ ~/Library/Application Support/Google/Chrome/Default/Cookies (SQLite) Firefox – ~/Library/Application Support/Firefox/Profiles/ and in this there are files called cookies.sqlite (cookies) and places.sqlite(browsing history).

Setting A Cookie

Cookie Expiration

• Cookies expire, therefore they are not sent by the browser to

the server, under any of these conditions:

• 1. At the end of the user session if the cookie is not

persistent

• 2. An expiration date has been specified, and has passed
• 3. The expiration date of the cookie is changed to a date in

the past

• 4. The browser deletes the cookie by user request

Database-driven Website Architecture

Server-side processing

• In server-side processing, the Web server:

– Receives the Web page request – Performs all of the processing necessary to create a dynamic Web page with data from a program or database – Sends the finished Web page to the client for display in the client’s browser – Show NLP Service: https://cis.ctsi.mcw.edu/nlp/

Client-side processing

• Client-side processing

– Some processing needs to be “executed” by the browser, either to form the request for the dynamic Web page or to create or display the dynamic Web page. E.g. Javascript code to validate user input, dynamic interaction, Ajax. SHOW AJAX APP – e.g., geolocation, hangman http://www.jayurbain.com/msoe/se2840/hangman- jay/hangman.html Available local only: file://localhost/Users/jayurbain/Dropbox/MSOE/www/se 2840/geolocation2016.html

Server and Client side processing

• Server-side processing

– PHP – ASP – ASP.NET – Perl – Java/JEE/JSP/Servlets/JSF – Python, e.g. Django – Ruby, e.g. Ruby on Rails – ColdFusion – JavaScript: NodeJS

ExpressJS – Flask

• Client-side processing

– CSS – HTML – JavaScript – Angular – ReactJS – Bootstrap

AJAX

Asynchronous JavaScript and XML

STOP

Defining Ajax

• Ajax isn’t a technology. It’s

several technologies, coming together in powerful new ways. Ajax incorporates:

– HTML and CSS; – Document Object Model; – XML and XSLT; – XMLHttpRequest; – JavaScript

Jesse James Garrett, essay in february 18, 2005 Ajax: A New Approach to Web Applications

Drawbacks of AJAX

• It breaks browser history engine (Back button).
• No bookmark.
• The same origin policy.
• Ajax opens up another attack vector for malicious code that

web developers might not fully test for.

STOP

Web Services

Web Services

• Web Service is a software system designed to support

machine-to-machine interaction over a network.

• Web services are frequently just Internet Application

Programming Interfaces (API) that can be accessed over a network.

Web Services (cont.)

• Web Services are platform-independent and language-

independent, since they use standard XML languages.

• Most Web Services use HTTP for transmitting messages (such

as the service request and response).

• Style of Use

– RPC – SOAP – REST

XML

eXtensible Markup Language

XML

• XML is a universally agreed markup meta-language primarily

used for information exchange.

• The two primary building blocks of XML are elements and

attributes. – Elements are tags and have values. – Elements are structured as a tree. – Alternatively, elements may have both attributes as well as data – Attributes help you to give more meaning and describe your element more efficiently and clearly.

XML (cont.)

<?xml version=\"1.0\" encoding=\"UTF-8\"?> <person> <id type="integer">1111</id> <last_name>Smith</last_name> <first_name>John</first_name> <address> <city>New York</city> <street>21 2nd Street</street> <postal_code type="integer">10021</postal_code> <state>NY</state> </address> </person>

JSON

JavaScript Object Notation

JSON

• JSON is a lightweight computer

data interchange format.

• JSON is based on a subset of the

JavaScript programming language.

• It is considered to be a language-

independent data format.

• It serves as an alternative to the

use of the XML format.

Douglas Crockford is a senior JavaScript Architect at Yahoo! He is well known for his work in introducing JavaScript Object Notation (JSON).

JSON (cont.)

{ "firstName": "John", "lastName": "Smith", "address": { "street": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ] }

References

• http://www.w3.org/standards/webarch/
• http://www.w3.org/TR/2004/REC-webarch-20041215/
• http://www.wikihow.com/Activate-Telnet-in-Windows-7
• http://gdp.globus.org/gt4-tutorial/multiplehtml/ch01s02.html
• http://www.objs.com/survey/WebArch.htm
• http://en.wikipedia.org/wiki/World_Wide_Web
• http://en.wikipedia.org/wiki/Web_browser
• http://en.wikipedia.org/wiki/Web_services
• http://en.wikipedia.org/wiki/Web_server
• http://www.slideshare.net/warlock/intro-to-web-development
• http://www.slideshare.net/rstein/advanced-web-development
• http://www.slideshare.net/hblowers/intro-to-web-20-277488
• http://www.slideshare.net/cheilmann/the-road-to-professional-web-development
• http://en.wikipedia.org/wiki/Common_Gateway_Interface
• http://www.edwardsamuels.com/ILLUSTRATEDSTORY/isc5.htm
• http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
• http://en.wikipedia.org/wiki/HTTP_cookie
• http://www.adaptivepath.com/ideas/newsletter/archives/111405/index.php