Programming Modern Web Applications Martin Kruli by Martin
Programming Modern Web Applications Martin Kruliš by Martin Kruliš (v 1. 0) 19. 2. 2015 1
Web Applications Architecture • • HTML (text) Pictures CSS Embedded Objects (Flash) Scripting (Java. Script) XMLHttp. Request (AJAX, AJAJ) HTML 5 … Server Client • Static Content • Dynamic Content, Scripting (PHP) • AJAX, AJAJ • Caching, HPC, Cloud Solutions • Web. Sockets Integration • Node. JS • … Internet • • HTTP(S) Long-held HTTP (Comet) Web. Sockets Web. RTC by Martin Kruliš (v 1. 0) Database 19. 2. 2015 2
Web Applications Evolution � Static Pages HTTP request /var/www/myweb/ ` Internet Client Web Server HTTP response with the contents of index. html file index. html by Martin Kruliš (v 1. 0) 19. 2. 2015 3
Web Applications Evolution � Dynamic Pages (with PHP) HTTP request /var/www/myweb/ ` mod_php Internet Client Web Server index. php HTTP response with contents generated by a PHP script Database by Martin Kruliš (v 1. 0) 19. 2. 2015 4
Web Applications Evolution � Dynamic Pages and AJAX Internet mod_php Client HTML document and scripts Browser initiated request(s) Web Server PHP generated contents, CSS, Java. Script, … index. php Database AJAX (script initiated) queries ajax. php by Martin Kruliš (v 1. 0) 19. 2. 2015 5
Web Applications Evolution � HTML 5 Web Applications Internet Client Browser downloads static content (HTML, JS, …) Web Server AJAX, Web. Sockets, … HTML document and scripts ajax. php by Martin Kruliš (v 1. 0) 19. 2. 2015 6
Revising HTTP � An application protocol built on top of TCP ◦ Top level communication between web browser and web server ◦ Request – response structure ◦ Data goes in both directions �Client can send data (files, …) to the server � Text-based format of messages ◦ Headers are in structured text, content may be encoded differently � Currently in version 1. 1 by Martin Kruliš (v 1. 0) 19. 2. 2015 7
Revising HTTP � HTTP Request Types ◦ GET (a request for the contents of a page) �Request has only header �No body (i. e. , no data to send) �Header specifies what the client wants �Some parameters may be encoded in URL �? name 1=value 1&name 2=value 2 … �HTTP wrapper decodes them to the $_GET array �$_GET['name 1'] = 'value 1’; … �Method must be nullipotent �It must not modify the server state by Martin Kruliš (v 1. 0) 19. 2. 2015 8
Revising HTTP � HTTP Request Types ◦ POST (sending data, performing an action, …) �Request contains header and body �Body contains the data being send to a server �Serialized HTML form (decoded to $_POST) �Several types of encoding �A file being uploaded �Parameters are in $_FILES, file is saved in tmp. directory �It is expected that the server modifies something �Save/update the data, … �Browser asks for explicit confirmation of any re-send �The request may also have parameters encoded in URL by Martin Kruliš (v 1. 0) 19. 2. 2015 9
Encoding � URL Encoding ◦ MIME application/x-www-form-urlencoded ◦ Control characters (? , &, =, …) must be encoded �Standard urlencode() function ◦ Encoding arrays: ? Arr[3]=a&Arr[]=b&Arr[]=c& decodes to $_GET['Arr'] = array(3=>'a', 'b', 'c'); � POST Data Encoding ◦ Value of enctype attribute of the form element �application/x-www-form-urlencoded �multipart/form-data �text/plain by Martin Kruliš (v 1. 0) 19. 2. 2015 10
HTTP Request Information � Decoded ◦ ◦ ◦ ◦ ◦ to the $_SERVER array REQUEST_METHOD – used method (“GET”or “POST”) SERVER_PROTOCOL – protocol version (“HTTP/1. 1”) REQUEST_URI – request part of URL (“/index. php”) REMOTE_ADDR – clients IP address HTTP_ACCEPT – MIME types that the client accepts HTTP_ACCEPT_LANGUAGE – desired translation HTTP_ACCEPT_ENCODING – desired encodings HTTP_ACCEPT_CHARSET – desired charsets … and some more info about the server and the client’s browser php_info() by Martin Kruliš (v 1. 0) 19. 2. 2015 11
Response Headers � Modifying Response Headers ◦ Most of them are set automatically ◦ Manual modifying/adding by header() function �header('Content-Type: application/pdf'); ◦ Specific modifications of headers (setcookie()) ◦ headers_list() returns currently set headers � Sending Response Headers ◦ As soon as an output is send from PHP �Even if its just a whitespace �Can be prevented by output buffering (set in php. ini) ◦ headers_sent() tests whether they have been sent by Martin Kruliš (v 1. 0) 19. 2. 2015 12
Response Headers � Examples ◦ Changing response code header('HTTP/1. 0 404 Not Found'); ◦ Setting proper content type (encoding, …) header('Content-Type: text/html; charset=utf-8'); ◦ Controlling browser caching mechanism header('Expires: Tue, 01 Jan 2000 00: 00 GMT'); header('Last-Modified: '. gmdate('D, d M Y H: i: s') . ' GMT'); header('Cache-Control: no-cache, must-revalidate'); header('Pragma: no-cache'); Example 1 by Martin Kruliš (v 1. 0) 19. 2. 2015 13
Chunked Transfers � Normal Transfers ◦ The whole response (e. g. , HTML file) is available ◦ Content-Length can be set exactly � Dynamic Web Pages ◦ The content is generated (it takes a while) ◦ We can cache the content and send it all at the end or chunked transfer can be used �No Content-Length and Transfer-Encoding: chunked ◦ Body is sent as unspecified number of chunks �Chunks may carry additional headers by Martin Kruliš (v 1. 0) 19. 2. 2015 14
Redirect � Redirect Mechanism in HTTP ◦ 3 xx response code � 301 Moved Permanently � 302 Found (originally named Moved Temporarily) � 303 See Other ◦ Additional header 'Location' has the new URL ◦ Browser must try to load the new URL ◦ Loops in redirections are detected � Creating Redirect in PHP ◦ header("Location: my-new-url"); ◦ Automatically changes the response code (to 302) by Martin Kruliš (v 1. 0) 19. 2. 2015 15
Redirect after POST � Problem with POST Request (a submitted form) Refresh Client (Browser) add/change something script Again!!! Web Server Response (a HTML page) by Martin Kruliš (v 1. 0) 19. 2. 2015 16
Redirect after POST � Redirect (303 See Other) after POST Request add/change something Redirect (new URL) Client (Browser) Refresh Redirects to a new URL (without updating history) GET (new URL) Web Server read-only HTML Page Example 2 by Martin Kruliš (v 1. 0) 19. 2. 2015 17
Uploading Files � Uploading Files via HTTP The form has to use multipart/form-data encoding ◦ In form as <input type="file". . . /> ◦ Uploaded file … �Is stored in temp directory under generated name �Related information is stored in $_FILES[name] �Name corresponds to the name of the form element �Related information has the following attributes �'name' – original file name (sent from web client) �'type' – MIME type �'size' – size of the file in bytes �'tmp_name' – path to the file in temp directory �'error' – error code (e. g. , UPLOAD_ERR_OK) by Martin Kruliš (v 1. 0) 19. 2. 2015 18
Uploading Files � File Temporary Storage ◦ Existence of the file is guaranteed only till the PHP script terminates �is_uploaded_file() – verification �move_uploaded_file() – a safe way to move files � Maximal Upload Size ◦ Determined by configuration parameters (php. ini) �upload_max_filesize – limit for each file �post_max_size – limit for POSTed data size �max_execution_time, max_input_time Example 3 by Martin Kruliš (v 1. 0) 19. 2. 2015 19
Dealing with Statelessness � HTTP Is Stateless ◦ Applications require state (logged in user, contents of a shopping cart, currently selected page, …) Temporary Server Side Client Side Sessions Passing on parameters in URL JS, web storage Persistent Database, Files, … Cookies by Martin Kruliš (v 1. 0) 19. 2. 2015 20
Passing on the Parameters � Parameters holding the state … ◦ are serialized to every URL (links, redirects, …), ◦ or to (hidden) items of every HTML form � Advantages ◦ A concept which is easy to grasp and to implement ◦ Parameters in URL can be saved in bookmarks � Disadvantages ◦ The size of the document grows with the parameters ◦ Difficult to maintain the code ◦ The user can trivially modify the parameters in the address bar of the browser by Martin Kruliš (v 1. 0) 19. 2. 2015 21
Cookies � Cookies in Web Browser ◦ Data stored as key-value pair (of strings) ◦ Cookies are re-sent with every request �Included in HTTP headers ◦ The browser may have cookies disabled ◦ Cookies have additional information �Their origin (URL) and expiration time � Cookies in PHP ◦ Cookies sent by browser are in $_COOKIE ◦ Cookies are set/modified/removed by setcookie() �The information is sent in HTTP response headers by Martin Kruliš (v 1. 0) 19. 2. 2015 22
Cookies � Issues ◦ A call to setcookie() does not modify $_COOKIE ◦ Headers must not have been sent yet � Advantages ◦ Easy to use ◦ The only way how to track user sessions when browser window gets closed � Disadvantages ◦ Cookies are sent to server with every request ◦ Data must be serialized into a string Example 4 by Martin Kruliš (v 1. 0) 19. 2. 2015 23
Sessions � PHP Session API ◦ A managed data-locker at the server side �Data are transparently (de)serialized to/from a file ◦ A session is identified by its ID �The ID must be kept on the client side (e. g. , in cookie) �Anyone who has the ID can access the session! � Advantages ◦ Minimizes data transfers (only the ID is transferred) � Disadvantages ◦ More delicate security issues by Martin Kruliš (v 1. 0) 19. 2. 2015 24
Session API � Opening Session ◦ Simple call to session_start() method ◦ Checks $_COOKIE and $_GET arrays for PHPSESSID variable which should have the ID ◦ If the variable is missing, new session is started �And a cookie with the new ID is set (if php. ini says so) � Accessing Session Data ◦ In the $_SESSION global array ◦ It can be read and written (incl. unset() on items) by Martin Kruliš (v 1. 0) 19. 2. 2015 25
Session API � Removing the Session ◦ session_unset() – clears the session (keeps the ID) ◦ session_destroy() – invalidates the session ID � Others ◦ session_name() – gets/sets name of the variable for the session ID (PHPSESSID by default) ◦ session_id() – get/sets current session ID ◦ session_regenerate_id() – generate a new ID ◦ session_cache_expire(time) – sets time (in minutes) after which the session expires if not used Example 5 by Martin Kruliš (v 1. 0) 19. 2. 2015 26
What Future Holds � SPDY (“speedy”) Protocol ◦ Networking protocol developed at Google ◦ Works as a layer between HTTP and TCP (TLS in fact) ◦ The main objective is efficiency �Introduces compression, multiplexing, … �Server is allowed to push contents ahead � HTTP/2 ◦ New proposed version of HTTP based on SPDY ◦ Integrates SPDY features directly into HTTP and advances some of them (e. g. , multiplexing) by Martin Kruliš (v 1. 0) 19. 2. 2015 27
Discussion by Martin Kruliš (v 1. 0) 19. 2. 2015 28
- Slides: 28