And I'm gonna teach something relevant, something
Modern -- the Internet!
HTTP - HTML
We will not see deep details of the protocol today
A request is made of:
Example:
I want to GET the list of the animal of a zoo at zoo.com/animals
The verb of the request is: GET
The location of the resource is zoo.com/animals
There is no data to sent to zoo.com -> no payload
The headers are not important here
GET zoo.com/animals
Example:
I want to POST a new record in the register of the animal of a zoo at zoo.com/animals
The verb of the request is: POST
The location of the resource is zoo.com/animals
We send the data payload describing the animal zoo.com -> we send a payload as a JSON (it is an example there is other data formats !)
The content of the payload is a JSON: the 'application/json' value is associated to the 'content-type' key in the headers.
POST zoo.com/animals
HTTP verbs as of HTTP 1.1 (always capitalized):
Out of scope today: HEAD, OPTIONS, CONNECT, TRACE, PATCH
NB: the url can be more complex: if I want a monkey named King, it might look like
zoo.com/animals/monkeys/King
HTTP servers answer with data. Each response has a status code. The main are:
Code | Message | Description |
---|---|---|
200 | OK | Success |
201 | Created | A document was created |
401 | Unauthorized | Authentication is necessary |
403 | Forbidden | The user does not have the rights to perform this action |
404 | Not found | |
500 | Server error | An internal error occured in the server |
HTML (1991) is a language used to represent information.
HTML documents are called Web pages
HTML is a markup language that defines a tree structure.
<html>
<head>
<title>My HTML page</title>
</head>
<body>
<h1>I am a big title</h1>
<!--This is a comment. Comments are not displayed in the browser-->
<p>
I am a paragraph.
<a href="http://google.fr">I am a link to google inside a paragraph</a>
</p>
<a href="pages/page2.html">I am a link to another page of the site</a>
</body>
</html>
<aNameHere> is a tag
</aNameHere> is a closing tag
ALL TAGS MUST BE CLOSED.
Links trigger GET request on the target URL. If the URL is on the same site, the name of the resource is enough.
Tags can have attributes:
<p class="some-class" id="unique-id"></p>
The 'id' and 'class' tags are used for applying styles, but it is not the topic today. Please note that the content of the 'id' tag must be unique within the web page.
Where PHP, CGI, Java and JavaScript changed the game
Another class will be dedicated to JavaScript (JS)
REST and AJAX
Principles:
CRUD is the acronym of the 4 basic action anyone would want to operate on a resource, each of them is linked to a HTTP verb:
We want to build a REST api giving access to a picture storing service.
There is 3 resources types here:
User
Picture
Comment
On each resource type, we want to be able to operate CRUD operations.
Operation | Verb | URI | description |
---|---|---|---|
Read (all) | GET | /users | Return the list of the users |
Create | POST | /users | Create a new user |
Read | GET | /users/id | Return only one user from its unique id |
Update | PUT | /users/id | Update the user whose id is given in the the URI |
Destroy | DELETE | /users/id | Delete the user whose id is given in the URI |
Each user will be given a unique id by the server.
Operation | Verb | URI | description |
---|---|---|---|
Read (all) | GET | /users/id/pictures | Return the list of the pictures of the user whose id is given |
Create | POST | /users/id/pictures | Create a new picture for the user whose id is given |
Read | GET | /users/id/pictures/pid | Return the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
Update | PUT | /users/id/pictures/pid | Update the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
Destroy | DELETE | /users/id/pictures/pid | Delete the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
Each picture will be given a unique id by the server.
Operation | Verb | URI | description |
---|---|---|---|
Read (all) | GET | /users/id/pictures/pid/comments | See previous |
Create | POST | /users/id/pictures/pid/comments | See previous |
Read | GET | /users/id/pictures/pid/comments/cid | See previous |
Update | PUT | /users/id/pictures/pid/comments/cid | See previous |
Destroy | DELETE | /users/id/pictures/pid/comments/cid | See previous |
Each comment will be given a unique id by the server.
Any questions ?
3 tiers model
Client (here Chrome)
Server (here Django)
Database (here MySQL)
Django, Ruby on Rails, ...
To build a web framework, you just need to be able to understand HTTP and to answer with text content over a TCP connection !
SPA - Websockets
Example: Gmail or Twitter.
Example: http://socket.io/demos/weplay/
Node.js - Electron - Cordova
React - Server-side rendering
Mobile users are doomed here.