Post on 25-Dec-2015
by Martin Kruliš (v1.0) 1
Programming ModernWeb Applications
Martin Kruliš
19. 2. 2015
by Martin Kruliš (v1.0) 219. 2. 2015
Web Applications Architecture
Internet
ClientServer
• HTML (text)• Pictures• CSS• Embedded
Objects (Flash)• Scripting
(JavaScript)• XMLHttpReques
t (AJAX, AJAJ)• HTML5• …
• Static Content• Dynamic
Content, Scripting (PHP)
• AJAX, AJAJ• Caching, HPC,
Cloud Solutions• WebSockets
Integration• NodeJS• …
• HTTP(S)• Long-held HTTP (Comet)• WebSockets• WebRTC
Database
by Martin Kruliš (v1.0) 3
Static Pages
19. 2. 2015
Web Applications Evolution
Web ServerClient
Internet
index.html
/var/www/myweb/
`
HTTP request
HTTP response with the contents of index.html file
by Martin Kruliš (v1.0) 4
Dynamic Pages (with PHP)
19. 2. 2015
Web Applications Evolution
Web ServerClient
`
Internet
/var/www/myweb/
mod_php
index.php
HTTP request
HTTP response with contents generated by a
PHP script
Database
by Martin Kruliš (v1.0) 5
Dynamic Pages and AJAX
19. 2. 2015
Web Applications Evolution
Web ServerClient
Internet
mod_php
index.php
HTML documentand scripts
Browser initiated request(s)
ajax.php
PHP generated contents, CSS, JavaScript, …
AJAX (script initiated) queries
Database
by Martin Kruliš (v1.0) 6
HTML5 Web Applications
19. 2. 2015
Web Applications Evolution
Web ServerClient
Internet
HTML documentand scripts
Browser downloads static content (HTML, JS, …)
ajax.php
AJAX, WebSockets, …
by Martin Kruliš (v1.0) 7
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
19. 2. 2015
Revising HTTP
by Martin Kruliš (v1.0) 8
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 ?name1=value1&name2=value2 … HTTP wrapper decodes them to the $_GET array
$_GET['name1'] = 'value1’; … Method must be nullipotent
It must not modify the server state
19. 2. 2015
Revising HTTP
by Martin Kruliš (v1.0) 9
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
19. 2. 2015
Revising HTTP
by Martin Kruliš (v1.0) 10
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
19. 2. 2015
Encoding
by Martin Kruliš (v1.0) 11
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
19. 2. 2015
HTTP Request Information
php_info()
by Martin Kruliš (v1.0) 12
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
19. 2. 2015
Response Headers
by Martin Kruliš (v1.0) 13
Examples◦ Changing response codeheader('HTTP/1.0 404 Not Found');
◦ Setting proper content type (encoding, …)header('Content-Type: text/html; charset=utf-8');
◦ Controlling browser caching mechanismheader('Expires: Tue, 01 Jan 2000 00: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');
19. 2. 2015
Response Headers
Example 1
by Martin Kruliš (v1.0) 14
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
19. 2. 2015
Chunked Transfers
by Martin Kruliš (v1.0) 15
Redirect Mechanism in HTTP◦ 3xx 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)
19. 2. 2015
Redirect
by Martin Kruliš (v1.0) 16
Problem with POST
19. 2. 2015
Redirect after POST
Client(Browser) Web Server
POST Request(a submitted form)
Response(a HTML page)
script
add/changesomething
Refresh
Again!!!
by Martin Kruliš (v1.0) 17
Redirect (303 See Other) after POST
19. 2. 2015
Redirect after POST
Client(Browser) Web Server
POST Request
Redirect (new URL)
add/changesomething
Refresh
GET (new URL)
HTML Pageread-only
Redirects to a new URL(without updating history)
Example 2
by Martin Kruliš (v1.0) 18
Uploading Files via HTTP◦ 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)
19. 2. 2015
Uploading Files The form has to use multipart/form-data
encoding
by Martin Kruliš (v1.0) 19
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
19. 2. 2015
Uploading Files
Example 3
by Martin Kruliš (v1.0) 20
Cookies
HTTP Is Stateless◦ Applications require state (logged in user,
contents of a shopping cart, currently selected page, …)
19. 2. 2015
Dealing with Statelessness
Passing onparameters in URL
Sessions
Database, Files, …
Server Side Client Side
Temporary
Persistent
JS, web storage
by Martin Kruliš (v1.0) 21
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
19. 2. 2015
Passing on the Parameters
by Martin Kruliš (v1.0) 22
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
19. 2. 2015
Cookies
by Martin Kruliš (v1.0) 23
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
19. 2. 2015
Cookies
Example 4
by Martin Kruliš (v1.0) 24
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
19. 2. 2015
Sessions
by Martin Kruliš (v1.0) 25
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)
19. 2. 2015
Session API
by Martin Kruliš (v1.0) 26
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
19. 2. 2015
Session API
Example 5
by Martin Kruliš (v1.0) 27
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)
19. 2. 2015
What Future Holds
by Martin Kruliš (v1.0) 2819. 2. 2015
Discussion