1 / 62

Introduction to Web Architecture

Introduction to Web Architecture. Reuben Chovuchovu. Agenda. Basic Web Architecture HTML/CSS Client-side Scripting (JavaScript) Server-side Scripting (PHP) URI HTTP Web Architecture Extension Cookie Database-driven Website Architecture (MySQL) AJAX Web Services XML JSON.

ivie
Télécharger la présentation

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 Reuben Chovuchovu

  2. Agenda • Basic Web Architecture • HTML/CSS • Client-side Scripting (JavaScript) • Server-side Scripting (PHP) • URI • HTTP • Web Architecture Extension • Cookie • Database-driven Website Architecture (MySQL) • AJAX • Web Services • XML • JSON

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

  4. Basic Web Architecture

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

  6. Web Browser • The primary purpose is to bring information resources to the user. • An application for retrieving, presenting, and traversing information resources.

  7. Web Server • The term web serveror webserver can mean one of two things: • A computer program that accepts HTTP requests and return HTTP responses with optional data content. • A computer that runs a computer program as described above.

  8. HTML HyperText Markup Language

  9. HTML • Document layout language (not a programming language) • Defines structure and appearance of Web pages

  10. CSS

  11. CSS • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. • Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

  12. CSS (continued…) • CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. • CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

  13. URI Universal Resource Identifier

  14. URI • To paraphrase the World Wide Web Consortium, Internet space is inhabited by many points of content. A URI (Uniform Resource Identifier) is the way you identify any of those points of content, whether it be a page of text, a video or sound clip, a still or animated image, or a program. The most common form of URI is the Web page address, which is a particular form or subset of URI called a Uniform Resource Locator (URL). A URI typically describes: • The mechanism used to access the resource • The specific computer that the resource is housed in • The specific name of the resource (a file name) on the computer • For example, this URI:

  15. HTTP HyperText Transfer Protocol

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

  17. Request message • The request message consists of the following: • Request line • Headers (Accept-Language, Accept, ….) • An empty line • An optional message body

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

  19. 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 on the server.

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

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

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

  23. Web Architecture Extension

  24. Web Architecture Extension • CGI extends the architecture to three-tiers by adding a back-end server that provides services to the Web server.

  25. JavaScript

  26. JavaScript • JavaScript is a scripting language designed for creating dynamic, interactiveWeb applications that link together objects and resources on both clients and servers. • 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

  27. Cookie 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 bits of information such as user preferences. • A cookie can be used for: • authenticating, • session tracking, and • remembering specific information about users.

  29. Setting A Cookie

  30. Cookie Expiration • Cookies expire, and are therefore not sent by the browser to the server, under any of these conditions: • 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

  31. Database-driven Website Architecture

  32. Why a database-driven website The Web is a great medium for delivering information. • Databases are the perfect medium for managing information because they have; • Flexibility • Data consistency • Ease of maintenance • Browser independence

  33. Server and Client side processing • Server-side processing • PHP • ASP • ASP.NET • Perl • J2EE • Python, e.g. Django • Ruby, e.g. Ruby on Rails • ColdFusion • Client-side processing • CSS • HTML • JavaScript • Adobe Flex • Microsoft Silverlight

  34. Server-side processing • In server-side processing, the Web server: • Receives the dynamic Web page request • Performs all of the processing necessary to create the dynamic Web page • Sends the finished Web page to the client for display in the client’s browser

  35. Server-side Scripting - PHP • PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. • PHP code is interpreted by a web server with a PHP processor module which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data.

  36. PHP - capabilities • Write dynamically-generated web pages • Offer connectivity to many databases • Connect to remote servers • Send headers • Set cookies • Redirect users • Manage authentication • Send emails • URL encoding • Create images • Integrate with various external libraries

  37. Server-side Scripting - PHP

  38. Server-side Scripting - PHP

  39. PHP applications You can use PHP to write practically any type of Web application or script. Common PHP applications include: • Blogging software such as WordPress. • E-commerce systems like Magento. • Content management systems including Drupal and Joomla. • Forum software such as phpBB

  40. 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. Eg. JavaScript code to validate user input

  41. AJAX Asynchronous JavaScript and XML

  42. Defining Ajax • Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: • XHTML and CSS; • Document Object Model (DOM); • XML and XSLT; • XMLHttpRequest; • JavaScript • JSON

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

  44. Web Services

More Related