Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1.

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


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


Dynamic Pages (with PHP)

19. 2. 2015


Web ServerClient

`

Internet

/var/www/myweb/

mod_php

index.php

HTTP request

HTTP response with contents generated by a

PHP script

Database


Dynamic Pages and AJAX

19. 2. 2015


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


HTML5 Web Applications

19. 2. 2015


Web ServerClient

Internet

HTML documentand scripts

Browser downloads static content (HTML, JS, …)

ajax.php

AJAX, WebSockets, …


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


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


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


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


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()


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


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


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


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


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!!!


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


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


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


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


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


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


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


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


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


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


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

Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1.

Documents

Transcript of Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1.