martin kruliš 19. 2. 2015 by martin kruliš (v1.0)1
TRANSCRIPT
![Page 1: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/1.jpg)
by Martin Kruliš (v1.0) 1
Programming ModernWeb Applications
Martin Kruliš
19. 2. 2015
![Page 2: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/2.jpg)
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
![Page 3: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/3.jpg)
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
![Page 4: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/4.jpg)
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
![Page 5: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/5.jpg)
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
![Page 6: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/6.jpg)
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, …
![Page 7: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/7.jpg)
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
![Page 8: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/8.jpg)
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
![Page 9: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/9.jpg)
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
![Page 10: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/10.jpg)
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
![Page 11: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/11.jpg)
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()
![Page 12: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/12.jpg)
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
![Page 13: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/13.jpg)
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
![Page 14: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/14.jpg)
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
![Page 15: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/15.jpg)
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
![Page 16: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/16.jpg)
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!!!
![Page 17: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/17.jpg)
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
![Page 18: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/18.jpg)
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
![Page 19: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/19.jpg)
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
![Page 20: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/20.jpg)
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
![Page 21: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/21.jpg)
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
![Page 22: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/22.jpg)
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
![Page 23: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/23.jpg)
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
![Page 24: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/24.jpg)
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
![Page 25: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/25.jpg)
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
![Page 26: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/26.jpg)
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
![Page 27: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/27.jpg)
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
![Page 28: Martin Kruliš 19. 2. 2015 by Martin Kruliš (v1.0)1](https://reader034.vdocuments.us/reader034/viewer/2022042821/56649ddb5503460f94ad2bfe/html5/thumbnails/28.jpg)
by Martin Kruliš (v1.0) 2819. 2. 2015
Discussion