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

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 3

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

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 6

Grading (Course Policies) • Reference syllabus in course outline. 7

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 others 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 of 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. BOLD ed 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 over 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.