1 / 60

Introduction to Web Architecture

Introduction to Web Architecture. A Brief Overview. Topics. Basic Web Architecture HTML URI HTTP CGI Cookie Database-driven Website Architecture AJAX Web Services XML JSON. The World Wide Web. The World Wide Web.

eytan
Download Presentation

Introduction to Web Architecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web Architecture A Brief Overview

  2. Topics • Basic Web Architecture • HTML • URI • HTTP • CGI • Cookie • Database-driven Website Architecture • AJAX • Web Services • XML • JSON

  3. The World Wide Web

  4. The World Wide Web • In 1989, Tim Berners-Lee suggested a way to let all users [primarily scientists], browse each others’ papers on the Internet. • He developed HTML, URLs, and HTTP.

  5. Basic Web Architecture

  6. Basic Web Architecture • The web is a two-tiered architecture. • A web browser displays information content, • and a web server that transfers information to the client.

  7. Web Browser • The primary purpose of a web browser is to retrieve information resources for the end-user. • A web browser is an application for retrieving, presenting, and navigating information resources.

  8. Web Server • The term web server or webserver can mean one of two things: • A computer program • That accepts HTTP requests and return HTTP responses with optional data content. • A standalone computer • Whose sole purpose to run a computer program as described above.

  9. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  10. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  11. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  12. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  13. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  14. Some Interesting Statistics(Source: Netcraft January 2013 Web Server Survey)

  15. Some Interesting Statistics(Source: StatCounter Global Stats, Top 5 Browsers June 2012 – June 2013)

  16. URI Universal Resource Identifier

  17. URI • A URL is a type of URI that's used to describe the location of a specific document. • A URL doesn't define the type of content to be found (texts, images, movies, etc.); it only says where and how to find it.  • URLs are location dependent • A URL contains four distinct parts, namely: • the protocol type • the machine name • the directory path • file name. • There are several kinds of URLs: • FTP URLs • HTTP URLs.

  18. URI More Information: http://www.htmlquick.com/reference/uri-url.html

  19. HTTP HyperText Transfer Protocol

  20. HTTP • HTTP is a request/response standard of a client and a server. • Typically, a HTTP client (e.g. Firefox) initiates a request. • Resources to be accessed by HTTP are identified using Uniform Resource Identifiers (URIs).

  21. Request message • The Hyper Text Transfer Protocol (HTTP) is the client-server network protocol that has been in use by the World-Wide Web since 1990. • Whenever you surf the web, your browser will be sending HTTP request messages for HTML pages, images, scripts and styles sheets. • Web servers handle these requests by returning response messages that contain the requested resource. More Info: http://www.httpwatch.com/httpgallery/introduction/

  22. Request methods • HTTP defines eight methods (sometimes referred to as "verbs") indicating the desired action to be performed on the identified resource. • HEAD • GET • POST • PUT • DELETE • TRACE • OPTIONS • CONNECT

  23. HTTP methods • The most common methods that are used by a client in an HTTP request are as follows:-1) GET:- Used when the client is requesting a resource on the Web server.2) HEAD:- Used when the client is requesting some information about a resource but not requesting the resource itself.3) POST:- Used when the client is sending information or data to the server—for example, filling out an online form (i.e. Sends a large amount of complex data to the Web Server).4) PUT:- Used when the client is sending a replacement document or uploading a new document to the Web server under the request URL.5) DELETE:- Used when the client is trying to delete a document from the Web server, identified by the request URL.6) TRACE:- Used when the client is asking the available proxies or intermediate servers changing the request to announce themselves.7) OPTIONS:- Used when the client wants to determine other available methods to retrieve or process a document on the Web server. 8) CONNECT:- Used when the client wants to establish a transparent connection to a remote host, usually to facilitate SSL-encrypted communication (HTTPS) through an HTTP proxy.

  24. HTTP 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 (possibly) on the server.

  25. 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

  26. 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. • Solution: • Cookies • Sessions • Hidden variables (when the current page is a form) • URL encoded parameters (such as /index.php?session_id=some_unique_session_code)

  27. Cookies tracking cookie, browser cookie, or HTTP cookie

  28. Cookie • Cookie is a small piece of text stored on a user's computer by a web browser. • A cookie consists of one or more name-value pairs containing portions of information such as user preferences. • A cookie can be used for: • authenticating, • session tracking, and • remembering specific information about users.

  29. Cookie Expiration • Cookies expire, and are therefore are not sent by the browser to the serverin the following scenarios: • At the end of the user session if the cookie is not persistent • An expiration date has been specified, and has passed • The expiration date of the cookie is changed to a date in the past • The browser deletes the cookie by user request

  30. Sample HTTP Request and Response • Client request • Server response

  31. Languages of the Internet

  32. Hyper Text Markup Language HTML

  33. Hyper Text Markup Langauge • Document layout language (not a programming language) • Defines structure and appearance of Web pages

  34. Hyper Text Markup Langauge • HTML is a language for describing web pages. • HTML is a markuplanguage • A markup language is a set of markup tags • The tags describe document content • HTML documents containHTML tags and plain text • HTML documents are also called web pages Source: http://www.w3schools.com/html/html_intro.asp

  35. HTML TAGs • HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags Source: http://www.w3schools.com/html/html_intro.asp

  36. HTML ELEMENTS • A HTML Element: • Everything between the start and end tag including the tags • Example: • <p> This is a Paragraph of text </p> Source: http://www.w3schools.com/html/html_intro.asp

  37. HTML & Web Browsers • Web Browsers Read HTML documents and display them as webpages • The browser Reads the HTML TAGS but does not display them • The web browser uses the HTML TAGS to determine how to display / present the webpage.

  38. Sample HTML Webpage http://sheldonbrown.com/web_sample1.html

  39. Hypertext PreProcessor(PHP) • PHP • Is a server side langauge • Is a widely-used, open source scripting language • Scripts are executed on the server • Is free to download and use • PHP • Runs on different platforms (Windows, Linux, Unix, Mac OS X, etc.) • Is compatible with almost all servers used today (Apache, IIS, etc.) • Has support for a wide range of databases

  40. Structured Query Language(SQL) • SQL • lets you access and manipulate databases • is an ANSI (American National Standards Institute) standard • can execute queries against a database • can retrieve data from a database • can insert records in a database • can update records in a database

  41. SQL • Can delete records from a database • Can create new databases • Can create new tables in a database • Can create stored procedures in a database • Can create views in a database • Can set permissions on tables, procedures, and views

  42. Java Script • An increasingly common way to provide dynamic feedback for Web users is to include scripts or programs that run on the user's machine rather than the Web server. • These programs can be • Javaapplets • Java scripts OR • ActiveX controls. • These technologies are known collectively as client-side solutions

  43. JavaScript • JavaScript is the scripting language of the Web. • All modern HTML pages use JavaScript to: • add functionality • validate input • communicate with web servers, and much more.

  44. AJAX Asynchronous JavaScript and XML

  45. AJAX • AJAX = Asynchronous JavaScript and XML. • AJAX is not a new programming language, but a new way of using existing standards. • AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page • Ajax is a method of using Javascript, DHTML and the XMLHttpRequest object to perform a GET or POST and return a result without reloading the HTML page. 

  46. XML eXtensible Markup Language

  47. What is XML ? • XML • stands for EXtensibleMarkupLanguage • is a markup language much like HTML • designed to carry data, not to display data • tags are not predefined, you must define your own tags • is designed to be self-descriptive • is a W3C (World Wide Web Consortium) Recommendation

  48. 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>

  49. JSON JavaScript Object Notation

  50. 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).

More Related