R209

Initiation au Développement Web

R&T 1

Plan

Introduction
Architecture Client/Serveur
Fonctions et procédures
Tableaux associatifs
Formulaires
API
Sécurité

Introduction

Objectifs du module
Rappels de web statique
Rappels d’algorithmique
Cas d’utilisation

Bases

Algorithmes
Types de données
Structures de contrôle
Interactions utilisateur

Structure pages web
html/xml
Balises et DTD
Définitions de style

Objectif : Réaliser des applications web

Ajouter des interactions utilisateurs : Statique → Dynamique
Architecture du web : Client/Serveur
Nouvelles notions algorithmique (Fonctions, Tableaux associatifs)
Nouvelles balises web (formulaires)
Utiliser des informations externes (API)
Notions de base de sécurité (mots de passe, injections SQL, https)

À définir

Internet & Web
Architecture
Protocole (HTTP, HTTPS, TCP, IP)
Requête
Asynchronie
Cryptographie symétrique ; asymétrique ; Hash

Ou pas

PWA, SPA, Ajax

Démo

Cas d’utilisation

Site de partage de vidéos (vimeo ou youtube)
1. Adaptation à l’utilisateur
2. Interactions utilisateur
Forum
1. Identification
2. Base de données (posts)
3. Pagination
Webmail (à la etumail ou zimbra)
- Application complète : Identification, BdD, Pagination, Adaptation, Interactions

Client et Serveur

Notions de client et de serveur
Requête http
Technologies côté client
Technologies côté serveur

Modèle Client/Serveur

1 serveur ; clients multiples

Chaque client envoie une requête au serveur

Le serveur traite les requêtes et envoie le résultat au client

Exemples : Restaurant, serveur X et fenêtres, BdD, IMAP/POP…

Client/Serveur (dessin)

Proxy et Reverse Proxy

Architecture n-tiers (3 niveaux)

Requête http

$ netcat cygne.hainry.fr 80
GET /cours/index.html HTTP/1.1

<html>
<head>...
...

URL : http://cygne.hainry.fr:80/cours/index.html

Protocole	http
FQDN serveur	cygne.hainry.fr
Port	80 (standard)
Chemin	/cours/index.html

Requête http

$ netcat example.org 80
GET / HTTP/1.1

<!doctype html>
<html>
...

URL : http://example.org/

Protocole	http
FQDN serveur	cygne.hainry.fr
Chemin	/

Codes HTTP

Code	Catégorie	Signification
200	Succès	OK
301	Redirection	Moved Permanently
302	Redirection	Found
400	Erreur	Bad Request
402	Erreur	Payment Required
403	Erreur	Forbidden
404	Erreur	Not Found
500	Pb serveur	Internal Server Error
504	Pb serveur	Gateway Timeout
509	Pb serveur	Bandwidth Limit Exceeded

Référence

Requête http

Inconvénients côté client ou côté serveur

Côté serveur	Côté client
Nécessité d’avoir un serveur	Compatibilité navigateur
Charge de travail pour le serveur	Utilisateur choisit ce qu’il exécute
Latence
Clients malveillants ⇒ Sécurisation

Exécution côté client ou côté serveur

Côté client ou côté serveur ?

Menu survolé par la souris
Identification par mot de passe
Ajout de message sur forum
Jeu vidéo
High Scores

Cas d’utilisation, Forum, Vidéos, Webmail ?

Technologies côté serveur

A priori, le serveur peut exécuter n’importe quel langage de programmation

Les serveurs httpd (apache, nginx, IIS, …) préfèrent certains langages (php, perl, python, …)

Les hébergeurs acceptent certains langages

Technologies côté serveur

OVH Gandi Ikoula Heroku

Technologies côté client

Quels langages sont compris par les navigateurs ?

Flash
NaCl
Javascript

Javascript

Langage multi-paradigme (impératif, fonctionnel, objet)
Langage interprété
Typage implicite
Un seul type numérique (pas entiers, réels, seulement double)
Syntaxe à la Java

for (var i = 0 ; i < 17 ; i = i+1) {
     alert(i)
}

Fonctions et procédures

Nouvelle notion algorithmique

Procédures
Fonctions
Appelés/Appelant
Portée des variables
Passage par valeur/copie/référence

Factorisation de code

Suites d’instructions utilisées en plusieurs endroits de l’algorithme
Regrouper ce code en sous-programmes remplissant chacun une tâche simple
Division logique de l’algorithme en composants
Principe du “diviser pour mieux régner”

Procédures

Procédure : sous-programme simple réutilisable.
Procédure a un nom, un rôle, des déclarations.

Définir une procédure :

static void p () {
    // Role: faire des choses
    // Variables : x, y, z : entiers
    Instructions
}

Utilisation (appel) : p().
procédure ≈ instruction.

Exemple de procédure

public class Main {
    public static void effaceTerminal() {
        System.out.print("\033[H\033[2J");
        System.out.flush();
    }

    public static void quitter() {
        System.out.println("Voulez-vous quitter ?");
        Scanner sc = new Scanner(System.in);
        String reponse = sc.nextLine();
        if (reponse.toLowerCase().compareTo("o") == 0) {
            effaceTerminal();
            System.exit(0);
        }
    }

    public static void main(String[] args) {
        effaceTerminal();
        quitter();
        while (true) {
            quitter();
        }
    }
}

Fonctions

Intérêt limité des procédures :

pas d’entrées/sorties ;
ne peut donc faire qu’une seule chose.

Fonctions = procédures + Entrées et Sorties

$f : \left\{\begin{array}{rcl}\mathbb{R} \times \mathbb{N} & \to & \mathbb{R}\\ (x, n) & \mapsto & x^n \end{array}\right.$
Entrées : $x$ et $n$ (réel et entier)
Sortie valant $x^n$ (réel)
Appel : $f(\pi, 2)$

Fonctions : définition

Une fonction se comporte exactement comme un algorithme :

Entête contenant
- son nom
- son rôle
- ses entrées
- ses sorties
- ses déclarations
et un corps contenant les statements définissant le corps de la fonction.

Fonctions : syntaxe

Fonction nommée f prenant deux arguments

static type f(type1 a1, type2 a2) {
    // role : ...
    // entrees : a1 : type1, a2 : type2
    // sorties : s : type
    // declarations : ...
    type s;
    Instructions
    return s;
}

Utilisation de cette fonction :

v = f(1, 2);
v = f(x, y);
System.out.println(f(3*7-1, y));

fonction ≈ expression.

static double puissance (double x, int n)
    // entrées : x : réel, n : entier
    // sortie : y : réel
    double y = 1;
    for (int i=0; i < n; ++i) {
        y = y*x
    }
    return y;
end

public static void main(String[] args) {
    double x = 1.4;
    double carre = puissance(x, 2);
    double cube = puissance(x, 3);
    System.out.println(carre);
    System.out.println(cube);
    System.out.println(puissance(x, 4));
    System.out.println(puissance(math.pi, 7));
}

Appelé, appelant

Appel de fonction ⇒ changement de contexte.

carre = puissance(x, 2) appelle la fonction puissance.
puissance : fonction appelée.

La fonction appelée est exécutée avec ses propres données et arguments.
La fonction appelante ne connaît de la fonction exécutée que ce qu’elle retourne.

Portée des variables

Une fonction a ses propres déclarations.

Ses variables n’existent que pendant son exécution.
Ses variables peuvent masquer des variables de la fonction appelante.

Contexte ou environnement d’exécution : l’ensemble des variables connues à l’intérieur de la fonction (les déclarations, entrées et sorties)

Note : variables n’existant que dans le corps d’une boucle

Procédures (le retour)

Une procédure est en fait une fonction sans sortie (sans return).

Une procédure peut avoir des arguments.
Une procédure est en réalité une instruction.
System.out.println("Bonjour")
Thread.sleep(1000)
main

Fonctions (récapitulons)

Une fonction est en réalité une expression.
Sa valeur et son type sont la valeur et le type de la variable de sortie.
return doit renvoyer une expression du bon type.
Exemple : scanner.nextInt(), random.nextInt(32)

Arbre d’évaluation

Quelle est la nature de puissance(2+3, 7) + puissance(2*3, 5) + puissance(puissance(2, 3), 3) ?
Réaliser son arbre d’évaluation.

Passage de paramètres

Dans la définition d’une fonction, les arguments sont dénommés des paramètres formels.
Lors de l’appel de la fonction, elle est appelée avec des paramètres effectifs : les valeurs sur lesquelles la fonction travaillera.
Les paramètres formels peuvent “cacher” une variable de l’algorithme.
Lors de l’exécution de la fonction, les paramètres formels sont remplacés par la valeur du paramètre effectif sur lequel la fonction est appelée.

static int f(int x, int y) {
    int z = x + 1;
    x = z + y - 1;
    return z;
}

public static void main(String[] args) {
    int x = 1;
    int z = 2;
    int v = f(5, 7);
    v = f(7, x);
}

Java Tutor

Passage par valeur, copie, référence

Transmission des paramètres :

Par valeur (ou par copie)
- paramètre transmis sous forme de copie
- pas de modification de l’original
- utilisé pour les types simples
Par référence
- paramètre transmis sous forme de pointeur (adresse mémoire)
- modifications possibles (effets de bord).
- utilisé pour les types complexes (tableaux…)

Tableaux associatifs

Nouvelle notion algorithmique

Dictionnaires ou tableaux associatifs
Utilisation
Limitations
Exemples

Tableaux associatifs

Tableaux indexés par des chaînes

Tableaux classiques : $\mathbb{N} \to \mathbb{T}$
Comment stocker des notes ?

notes = {
    "robert": 15,
    "roger" : 17.5,
    "roland": 0
}

robert, roger, roland sont les clefs de notes
15, 17.5, 0 sont les valeurs

Tableaux associatifs

Les tableaux associatifs sont aussi appelés dictionnaires
Ils associent des valeurs (définitions) à des clefs.

Map<String, String> dico = new HashMap<>();
dico.put("r107", "Bases de la programmation");
dico.put("r108", "Bases des systèmes d'exploitation");
dico.put("r109", "Introduction aux technologie Web");

Les valeurs peuvent être de n’importe quel type (y compris tableaux ou tableaux associatifs) !

Tableaux associatifs (Syntaxe Javascript)

notes = {} // Création
notes["raoul"] = 21 // Ajout
notes["raoul"] = 20 // Modification
alert( notes["raoul"] ) # Accès

Parcours

for (k in notes) {
    print(k + " contient " + notes[k])
}

Limitations

Seules des chaînes peuvent être clefs
Différences notes["raoul"] et notes[raoul]
Pas d’ordre sur les clefs

classement = { "Paris Saint-Germain FC": { "position": 1, "playedGames": 25, "won": 18, "draw": 5, "lost": 2, "points": 59, "goalsFor": 53, "goalsAgainst": 22 },
  "Olympique de Marseille": { "position": 2, "playedGames": 25, "won": 13, "draw": 7, "lost": 5, "points": 46, "goalsFor": 38, "goalsAgainst": 23 },
  "OGC Nice": { "position": 3, "playedGames": 25, "won": 14, "draw": 4, "lost": 7, "points": 45, "goalsFor": 37, "goalsAgainst": 21 },
  "RC Strasbourg Alsace": { "position": 4, "playedGames": 25, "won": 12, "draw": 6, "lost": 7, "points": 42, "goalsFor": 48, "goalsAgainst": 31 },
  "Stade Rennais FC 1901": { "position": 5, "playedGames": 25, "won": 12, "draw": 4, "lost": 9, "points": 40, "goalsFor": 47, "goalsAgainst": 23 },
  "AS Monaco FC": { "position": 6, "playedGames": 25, "won": 10, "draw": 8, "lost": 7, "points": 38, "goalsFor": 38, "goalsAgainst": 27 }, "FC Nantes": { "position": 7, "playedGames": 25, "won": 11, "draw": 5, "lost": 9, "points": 38, "goalsFor": 34, "goalsAgainst": 29 }, "Olympique Lyonnais": { "position": 8, "playedGames": 25, "won": 10, "draw": 9, "lost": 6, "points": 38, "goalsFor": 34, "goalsAgainst": 31 }, "Montpellier HSC": { "position": 9, "playedGames": 25, "won": 11, "draw": 4, "lost": 10, "points": 37, "goalsFor": 39, "goalsAgainst": 34 }, "Racing Club de Lens": { "position": 10, "playedGames": 25, "won": 10, "draw": 7, "lost": 8, "points": 37, "goalsFor": 40, "goalsAgainst": 36 }, "Lille OSC": { "position": 11, "playedGames": 25, "won": 9, "draw": 9, "lost": 7, "points": 36, "goalsFor": 32, "goalsAgainst": 35 }, "Stade Brestois 29": { "position": 12, "playedGames": 25, "won": 8, "draw": 8, "lost": 9, "points": 32, "goalsFor": 34, "goalsAgainst": 37 }, "Angers SCO": { "position": 13, "playedGames": 25, "won": 7, "draw": 8, "lost": 10, "points": 29, "goalsFor": 30, "goalsAgainst": 36 }, "Stade de Reims": { "position": 14, "playedGames": 25, "won": 6, "draw": 10, "lost": 9, "points": 28, "goalsFor": 28, "goalsAgainst": 29 }, "Clermont Foot 63": { "position": 15, "playedGames": 25, "won": 7, "draw": 6, "lost": 12, "points": 27, "goalsFor": 26, "goalsAgainst": 41 }, "AS Saint-Étienne": { "position": 16, "playedGames": 25, "won": 5, "draw": 7, "lost": 13, "points": 22, "goalsFor": 26, "goalsAgainst": 47 }, "ES Troyes AC": { "position": 17, "playedGames": 25, "won": 5, "draw": 6, "lost": 14, "points": 21, "goalsFor": 22, "goalsAgainst": 40 }, "FC Lorient": { "position": 18, "playedGames": 25, "won": 4, "draw": 9, "lost": 12, "points": 21, "goalsFor": 20, "goalsAgainst": 39 }, "FC Metz": { "position": 19, "playedGames": 25, "won": 4, "draw": 9, "lost": 12, "points": 21, "goalsFor": 25, "goalsAgainst": 45 }, "FC Girondins de Bordeaux": { "position": 20, "playedGames": 25, "won": 4, "draw": 9, "lost": 12, "points": 21, "goalsFor": 37, "goalsAgainst": 62 } }

// Affichage du classement de 1 à 20
for (i=1; i<=20; ++i) {
    for (equipe in classements) {
        if (classement[equipe]["position"] == i) {
            print(str(i) + ": " + equipe)
}}}

// Mise à jour après la victoire de Rennes contre Montpellier :
classement["Stade Rennais FC 1901"]["won"]++
classement["Stade Rennais FC 1901"]["playedGames"]++
classement["Stade Rennais FC 1901"]["goalsFor"] += 4
classement["Stade Rennais FC 1901"]["goalsAgainst"] += 2
classement["Montpellier HSC"]["lost"]++
classement["Montpellier HSC"]["playedGames"]++
classement["Montpellier HSC"]["goalsFor"] += 2
classement["Montpellier HSC"]["goalsAgainst"] += 4

https://regadata.com/

{"ranking":[
    {"rank":1,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#59a94e","color_2":"#000000","color_3":"#efcb89","sail":"FRA 53","sail_ref":"FRA53","lat_dec":40.61,"lon_dec":-15.8,"lat_dms":"40°36.20'N","lon_dms":"15°47.49'W","one_hour_heading":248,"one_hour_speed":12.7,"one_hour_vmg":7.5,"one_hour_distance":6.3,"last_report_heading":262,"last_report_speed":10.1,"last_report_vmg":3.9,"last_report_distance":30.2,"last_day_heading":245,"last_day_speed":11.6,"last_day_vmg":8.4,"last_day_distance":277.6,"dtf":23686.5,"dtl":0,"slug":"2020-11-11--130000","sailor":"Maxime Sorel","boat":"V And B Mayenne","is_foiler":0,"is_first_timer":1},
    {"rank":2,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#123355","color_2":"#11a0ba","color_3":"#ee4f22","sail":"FRA 09","sail_ref":"FRA09","lat_dec":40.81,"lon_dec":-16.17,"lat_dms":"40°48.25'N","lon_dms":"16°09.73'W","one_hour_heading":254,"one_hour_speed":9.1,"one_hour_vmg":4.5,"one_hour_distance":4.6,"last_report_heading":245,"last_report_speed":11.8,"last_report_vmg":7.5,"last_report_distance":35.5,"last_day_heading":248,"last_day_speed":11.8,"last_day_vmg":8.1,"last_day_distance":283,"dtf":23694.2,"dtl":7.7,"slug":"2020-11-11--130000","sailor":"Benjamin Dutreux","boat":"OMIA - Water Family","is_foiler":0,"is_first_timer":1},
    {"rank":3,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ffffff","color_2":"#515254","color_3":"#ffffff","sail":"FRA 01","sail_ref":"FRA01","lat_dec":40.86,"lon_dec":-16.22,"lat_dms":"40°50.97'N","lon_dms":"16°13.28'W","one_hour_heading":240,"one_hour_speed":11.4,"one_hour_vmg":7.8,"one_hour_distance":5.7,"last_report_heading":244,"last_report_speed":10.5,"last_report_vmg":6.8,"last_report_distance":31.5,"last_day_heading":247,"last_day_speed":11.7,"last_day_vmg":8.2,"last_day_distance":280.7,"dtf":23696.2,"dtl":9.8,"slug":"2020-11-11--130000","sailor":"Jean Le Cam","boat":"Yes we Cam !","is_foiler":0,"is_first_timer":0},
    {"rank":4,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#e0fb41","color_2":"#289f3d","color_3":"#ffffff","sail":"FRA 79","sail_ref":"FRA79","lat_dec":41.19,"lon_dec":-18.17,"lat_dms":"41°11.37'N","lon_dms":"18°10.11'W","one_hour_heading":229,"one_hour_speed":7.4,"one_hour_vmg":5.8,"one_hour_distance":3.7,"last_report_heading":227,"last_report_speed":11.8,"last_report_vmg":9.6,"last_report_distance":35.3,"last_day_heading":238,"last_day_speed":11.9,"last_day_vmg":9,"last_day_distance":285.2,"dtf":23698.2,"dtl":11.7,"slug":"2020-11-11--130000","sailor":"Charlie Dalin","boat":"APIVIA","is_foiler":1,"is_first_timer":1},
    {"rank":5,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#43a5d6","color_2":"#ffffff","color_3":"#1a5a7d","sail":"FRA 59","sail_ref":"FRA59","lat_dec":41.37,"lon_dec":-19.42,"lat_dms":"41°21.65'N","lon_dms":"19°24.89'W","one_hour_heading":231,"one_hour_speed":8,"one_hour_vmg":5.9,"one_hour_distance":4,"last_report_heading":221,"last_report_speed":9.1,"last_report_vmg":7.7,"last_report_distance":27.3,"last_day_heading":231,"last_day_speed":13.2,"last_day_vmg":10.8,"last_day_distance":317.4,"dtf":23699.2,"dtl":12.7,"slug":"2020-11-11--130000","sailor":"Thomas Ruyant","boat":"LinkedOut","is_foiler":1,"is_first_timer":0},
    {"rank":6,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#005c79","color_2":"#4d6054","color_3":"#4d6054","sail":"FRA 6","sail_ref":"FRA6","lat_dec":41.04,"lon_dec":-17.01,"lat_dms":"41°02.08'N","lon_dms":"17°00.44'W","one_hour_heading":227,"one_hour_speed":8.9,"one_hour_vmg":7.3,"one_hour_distance":4.4,"last_report_heading":248,"last_report_speed":11.1,"last_report_vmg":6.5,"last_report_distance":33.4,"last_day_heading":250,"last_day_speed":12.9,"last_day_vmg":8.4,"last_day_distance":309,"dtf":23699.2,"dtl":12.8,"slug":"2020-11-11--130000","sailor":"Nicolas Troussel","boat":"CORUM L'Épargne","is_foiler":1,"is_first_timer":1},
    {"rank":7,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#000000","color_2":"#000000","color_3":"#ff1659","sail":"GBR 99","sail_ref":"GBR99","lat_dec":41.26,"lon_dec":-18.3,"lat_dms":"41°14.81'N","lon_dms":"18°17.51'W","one_hour_heading":228,"one_hour_speed":8.9,"one_hour_vmg":7,"one_hour_distance":4.4,"last_report_heading":224,"last_report_speed":11.8,"last_report_vmg":9.9,"last_report_distance":35.5,"last_day_heading":233,"last_day_speed":12.7,"last_day_vmg":10.3,"last_day_distance":304,"dtf":23700.6,"dtl":14.1,"slug":"2020-11-11--130000","sailor":"Alex Thomson","boat":"HUGO BOSS","is_foiler":1,"is_first_timer":0},
    {"rank":8,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#e18230","color_2":"#000000","color_3":"#ffffff","sail":"FRA 85","sail_ref":"FRA85","lat_dec":41.28,"lon_dec":-18.14,"lat_dms":"41°16.51'N","lon_dms":"18°07.91'W","one_hour_heading":229,"one_hour_speed":9.4,"one_hour_vmg":7.3,"one_hour_distance":4.7,"last_report_heading":222,"last_report_speed":12.2,"last_report_vmg":10.5,"last_report_distance":36.6,"last_day_heading":241,"last_day_speed":12.2,"last_day_vmg":9,"last_day_distance":294,"dtf":23703.5,"dtl":17,"slug":"2020-11-11--130000","sailor":"Kevin Escoffier","boat":"PRB","is_foiler":1,"is_first_timer":1},
    {"rank":9,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ee2e24","color_2":"#84bc4e","color_3":"#000000","sail":"FRA 17","sail_ref":"FRA17","lat_dec":40.88,"lon_dec":-15.56,"lat_dms":"40°52.65'N","lon_dms":"15°32.84'W","one_hour_heading":251,"one_hour_speed":6.4,"one_hour_vmg":3.5,"one_hour_distance":3.2,"last_report_heading":246,"last_report_speed":9.7,"last_report_vmg":6.1,"last_report_distance":29.1,"last_day_heading":243,"last_day_speed":12,"last_day_vmg":9.1,"last_day_distance":288.6,"dtf":23705.1,"dtl":18.7,"slug":"2020-11-11--130000","sailor":"Yannick Bestaven","boat":"Maître Coq IV","is_foiler":1,"is_first_timer":0},
    {"rank":10,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#cd3a4a","color_2":"#6c6d70","color_3":"#ffffff","sail":"FRA 1000","sail_ref":"FRA1000","lat_dec":41.2,"lon_dec":-16.69,"lat_dms":"41°11.70'N","lon_dms":"16°40.97'W","one_hour_heading":226,"one_hour_speed":12,"one_hour_vmg":10,"one_hour_distance":6,"last_report_heading":232,"last_report_speed":11.5,"last_report_vmg":9,"last_report_distance":34.5,"last_day_heading":250,"last_day_speed":12,"last_day_vmg":7.8,"last_day_distance":288.5,"dtf":23711.8,"dtl":25.3,"slug":"2020-11-11--130000","sailor":"Damien Seguin","boat":"Groupe APICIL","is_foiler":0,"is_first_timer":1},
    {"rank":11,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#6a73c1","color_2":"#e00e1f","color_3":"#ffffff","sail":"FRA 4","sail_ref":"FRA4","lat_dec":41.56,"lon_dec":-19.19,"lat_dms":"41°32.96'N","lon_dms":"19°11.22'W","one_hour_heading":220,"one_hour_speed":7.3,"one_hour_vmg":6.3,"one_hour_distance":3.7,"last_report_heading":221,"last_report_speed":10.3,"last_report_vmg":8.7,"last_report_distance":30.8,"last_day_heading":240,"last_day_speed":13.2,"last_day_vmg":9.7,"last_day_distance":316.4,"dtf":23711.9,"dtl":25.4,"slug":"2020-11-11--130000","sailor":"Sébastien Simon","boat":"ARKEA PAPREC","is_foiler":1,"is_first_timer":1},
    {"rank":12,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#d86732","color_2":"#c1ce30","color_3":"#1f315a","sail":"FRA 49","sail_ref":"FRA49","lat_dec":41.11,"lon_dec":-16.06,"lat_dms":"41°06.28'N","lon_dms":"16°03.19'W","one_hour_heading":241,"one_hour_speed":11.4,"one_hour_vmg":7.7,"one_hour_distance":5.7,"last_report_heading":237,"last_report_speed":9.6,"last_report_vmg":7.1,"last_report_distance":28.7,"last_day_heading":249,"last_day_speed":11.5,"last_day_vmg":7.7,"last_day_distance":275.8,"dtf":23712.9,"dtl":26.4,"slug":"2020-11-11--130000","sailor":"Romain Attanasio","boat":"Pure - Best Western Hotels and Resorts","is_foiler":0,"is_first_timer":0},
    {"rank":13,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#e90017","color_2":"#ff7d87","color_3":"#ffffff","sail":"FRA 109","sail_ref":"FRA109","lat_dec":41.41,"lon_dec":-17.74,"lat_dms":"41°24.45'N","lon_dms":"17°43.85'W","one_hour_heading":224,"one_hour_speed":9,"one_hour_vmg":7.5,"one_hour_distance":4.5,"last_report_heading":225,"last_report_speed":11.2,"last_report_vmg":9.4,"last_report_distance":33.6,"last_day_heading":243,"last_day_speed":12.3,"last_day_vmg":8.9,"last_day_distance":296.4,"dtf":23714.6,"dtl":28.2,"slug":"2020-11-11--130000","sailor":"Samantha Davies","boat":"Initiatives - Coeur","is_foiler":1,"is_first_timer":0},
    {"rank":14,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#f9de51","color_2":"#239d3d","color_3":"#ffffff","sail":"FRA 18","sail_ref":"FRA18","lat_dec":41.6,"lon_dec":-19.17,"lat_dms":"41°35.64'N","lon_dms":"19°09.63'W","one_hour_heading":214,"one_hour_speed":7.3,"one_hour_vmg":6.6,"one_hour_distance":3.6,"last_report_heading":210,"last_report_speed":10.5,"last_report_vmg":9.9,"last_report_distance":31.6,"last_day_heading":231,"last_day_speed":12.9,"last_day_vmg":10.6,"last_day_distance":309.9,"dtf":23714.7,"dtl":28.2,"slug":"2020-11-11--130000","sailor":"Louis Burton","boat":"Bureau Vallée 2","is_foiler":1,"is_first_timer":0},
    {"rank":15,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#1db5d4","color_2":"#ffffff","color_3":"#0083ad","sail":"FRA 92","sail_ref":"FRA92","lat_dec":41.04,"lon_dec":-14.45,"lat_dms":"41°02.09'N","lon_dms":"14°26.77'W","one_hour_heading":254,"one_hour_speed":10.6,"one_hour_vmg":5.6,"one_hour_distance":5.3,"last_report_heading":269,"last_report_speed":9.3,"last_report_vmg":2.8,"last_report_distance":27.8,"last_day_heading":241,"last_day_speed":10.1,"last_day_vmg":7.9,"last_day_distance":242.5,"dtf":23727.2,"dtl":40.8,"slug":"2020-11-11--130000","sailor":"Stéphane Le Diraison","boat":"Time For Oceans","is_foiler":1,"is_first_timer":0},
    {"rank":16,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#6d777d","color_2":"#373737","color_3":"#c62e2e","sail":"MON 10","sail_ref":"MON10","lat_dec":41.81,"lon_dec":-18.55,"lat_dms":"41°48.25'N","lon_dms":"18°32.56'W","one_hour_heading":212,"one_hour_speed":9.7,"one_hour_vmg":9,"one_hour_distance":4.8,"last_report_heading":209,"last_report_speed":11.3,"last_report_vmg":10.7,"last_report_distance":33.8,"last_day_heading":239,"last_day_speed":12.3,"last_day_vmg":9.2,"last_day_distance":294.2,"dtf":23731.6,"dtl":45.1,"slug":"2020-11-11--130000","sailor":"Boris Herrmann","boat":"Seaexplorer - Yacht Club De Monaco","is_foiler":1,"is_first_timer":1},
    {"rank":17,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ffffff","color_2":"#d1d1cd","color_3":"#000000","sail":"ITA 34","sail_ref":"ITA34","lat_dec":41.66,"lon_dec":-17.4,"lat_dms":"41°38.78'N","lon_dms":"17°23.63'W","one_hour_heading":223,"one_hour_speed":11.4,"one_hour_vmg":9.7,"one_hour_distance":5.7,"last_report_heading":219,"last_report_speed":12.1,"last_report_vmg":10.8,"last_report_distance":36.3,"last_day_heading":231,"last_day_speed":11.8,"last_day_vmg":9.9,"last_day_distance":283.1,"dtf":23731.6,"dtl":45.2,"slug":"2020-11-11--130000","sailor":"Giancarlo Pedote","boat":"Prysmian Group","is_foiler":1,"is_first_timer":1},
    {"rank":18,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#489ad1","color_2":"#215ca3","color_3":"#ffffff","sail":"FRA 30","sail_ref":"FRA30","lat_dec":41.7,"lon_dec":-17.64,"lat_dms":"41°41.43'N","lon_dms":"17°38.24'W","one_hour_heading":220,"one_hour_speed":10.9,"one_hour_vmg":9.6,"one_hour_distance":5.5,"last_report_heading":220,"last_report_speed":10.4,"last_report_vmg":9.1,"last_report_distance":31.1,"last_day_heading":238,"last_day_speed":11.8,"last_day_vmg":9,"last_day_distance":282,"dtf":23732.1,"dtl":45.7,"slug":"2020-11-11--130000","sailor":"Clarisse Cremer","boat":"Banque Populaire X","is_foiler":0,"is_first_timer":1},
    {"rank":19,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#4a89c5","color_2":"#f1cb29","color_3":"#31599a","sail":"FRA 71","sail_ref":"FRA71","lat_dec":41.21,"lon_dec":-13.86,"lat_dms":"41°12.50'N","lon_dms":"13°50.85'W","one_hour_heading":333,"one_hour_speed":4.5,"one_hour_vmg":-3.3,"one_hour_distance":2.3,"last_report_heading":268,"last_report_speed":8.4,"last_report_vmg":2.8,"last_report_distance":25.2,"last_day_heading":239,"last_day_speed":9.4,"last_day_vmg":7.6,"last_day_distance":226.1,"dtf":23744.8,"dtl":58.3,"slug":"2020-11-11--130000","sailor":"Manuel Cousin","boat":"Groupe Sétin","is_foiler":0,"is_first_timer":1},
    {"rank":20,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#cd4722","color_2":"#f0daa8","color_3":"#963823","sail":"SUI 7","sail_ref":"SUI7","lat_dec":41.84,"lon_dec":-16.82,"lat_dms":"41°49.90'N","lon_dms":"16°49.08'W","one_hour_heading":227,"one_hour_speed":11.6,"one_hour_vmg":9.5,"one_hour_distance":5.8,"last_report_heading":217,"last_report_speed":12.9,"last_report_vmg":11.8,"last_report_distance":38.7,"last_day_heading":241,"last_day_speed":11.8,"last_day_vmg":8.9,"last_day_distance":284.4,"dtf":23747.8,"dtl":61.3,"slug":"2020-11-11--130000","sailor":"Alan Roura","boat":"La Fabrique","is_foiler":1,"is_first_timer":0},
    {"rank":21,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ffffff","color_2":"#004a8e","color_3":"#1da1cc","sail":"ESP 33","sail_ref":"ESP33","lat_dec":41.57,"lon_dec":-13.91,"lat_dms":"41°34.18'N","lon_dms":"13°53.92'W","one_hour_heading":234,"one_hour_speed":11.3,"one_hour_vmg":9,"one_hour_distance":5.6,"last_report_heading":261,"last_report_speed":9.7,"last_report_vmg":4.3,"last_report_distance":29.2,"last_day_heading":244,"last_day_speed":8.7,"last_day_vmg":6.5,"last_day_distance":207.8,"dtf":23764.9,"dtl":78.5,"slug":"2020-11-11--130000","sailor":"Didac Costa","boat":"One Planet One Ocean","is_foiler":0,"is_first_timer":0},
    {"rank":22,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#b6b8c8","color_2":"#de3534","color_3":"#ffffff","sail":"FRA 27","sail_ref":"FRA27","lat_dec":41.67,"lon_dec":-14.37,"lat_dms":"41°40.26'N","lon_dms":"14°21.62'W","one_hour_heading":228,"one_hour_speed":5.6,"one_hour_vmg":4.8,"one_hour_distance":2.8,"last_report_heading":240,"last_report_speed":7,"last_report_vmg":5.1,"last_report_distance":21,"last_day_heading":233,"last_day_speed":8.3,"last_day_vmg":6.9,"last_day_distance":198.1,"dtf":23765,"dtl":78.6,"slug":"2020-11-11--130000","sailor":"Isabelle Joschke","boat":"MACSF","is_foiler":1,"is_first_timer":1},
    {"rank":23,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#362c2b","color_2":"#c9c9c9","color_3":"#ffffff","sail":"JPN 11","sail_ref":"JPN11","lat_dec":42.23,"lon_dec":-16.09,"lat_dms":"42°12.92'N","lon_dms":"16°05.26'W","one_hour_heading":211,"one_hour_speed":12.7,"one_hour_vmg":12.1,"one_hour_distance":6.4,"last_report_heading":208,"last_report_speed":13.5,"last_report_vmg":13.1,"last_report_distance":40.5,"last_day_heading":231,"last_day_speed":10.3,"last_day_vmg":8.7,"last_day_distance":247,"dtf":23777.4,"dtl":91,"slug":"2020-11-11--130000","sailor":"Kojiro Shiraishi","boat":"DMG MORI Global One","is_foiler":1,"is_first_timer":0},
    {"rank":24,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#9ecf3f","color_2":"#214635","color_3":"ffffff","sail":"FRA 50","sail_ref":"FRA50","lat_dec":42.28,"lon_dec":-15.57,"lat_dms":"42°16.63'N","lon_dms":"15°33.86'W","one_hour_heading":226,"one_hour_speed":10.1,"one_hour_vmg":8.6,"one_hour_distance":5.1,"last_report_heading":224,"last_report_speed":10.3,"last_report_vmg":9,"last_report_distance":30.9,"last_day_heading":244,"last_day_speed":10.1,"last_day_vmg":7.3,"last_day_distance":243.5,"dtf":23786.5,"dtl":100,"slug":"2020-11-11--130000","sailor":"Miranda Merron","boat":"Campagne de France","is_foiler":0,"is_first_timer":1},
    {"rank":25,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#e2c201","color_2":"#ffffff","color_3":"#004485","sail":"FRA 14","sail_ref":"FRA14","lat_dec":42.1,"lon_dec":-14.59,"lat_dms":"42°05.46'N","lon_dms":"14°34.82'W","one_hour_heading":229,"one_hour_speed":10.5,"one_hour_vmg":8.8,"one_hour_distance":5.3,"last_report_heading":221,"last_report_speed":11.5,"last_report_vmg":10.4,"last_report_distance":34.4,"last_day_heading":245,"last_day_speed":11,"last_day_vmg":8.2,"last_day_distance":264.9,"dtf":23786.7,"dtl":100.2,"slug":"2020-11-11--130000","sailor":"Arnaud Boissieres","boat":"La Mie Câline - Artisans Artipôle","is_foiler":1,"is_first_timer":0},
    {"rank":26,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#203163","color_2":"#fad714","color_3":"#ffffff","sail":"FRA 83","sail_ref":"FRA83","lat_dec":41.73,"lon_dec":-12.87,"lat_dms":"41°43.65'N","lon_dms":"12°52.18'W","one_hour_heading":271,"one_hour_speed":11.2,"one_hour_vmg":3.3,"one_hour_distance":5.6,"last_report_heading":263,"last_report_speed":10.9,"last_report_vmg":4.8,"last_report_distance":32.7,"last_day_heading":228,"last_day_speed":7,"last_day_vmg":6.2,"last_day_distance":168.1,"dtf":23787.6,"dtl":101.2,"slug":"2020-11-11--130000","sailor":"Clément Giraud","boat":"Compagnie du lit - Jiliti","is_foiler":0,"is_first_timer":1},
    {"rank":27,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ffffff","color_2":"#df8c32","color_3":"#244070","sail":"FIN 222","sail_ref":"FIN222","lat_dec":42.37,"lon_dec":-15.3,"lat_dms":"42°21.77'N","lon_dms":"15°17.68'W","one_hour_heading":224,"one_hour_speed":10.7,"one_hour_vmg":9.3,"one_hour_distance":5.4,"last_report_heading":224,"last_report_speed":10.3,"last_report_vmg":9,"last_report_distance":30.9,"last_day_heading":251,"last_day_speed":10.4,"last_day_vmg":6.7,"last_day_distance":248.5,"dtf":23794.3,"dtl":107.9,"slug":"2020-11-11--130000","sailor":"Ari Huusela","boat":"Stark","is_foiler":0,"is_first_timer":1},
    {"rank":28,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#c0bfc0","color_2":"#6d80fc","color_3":"#efefef","sail":"GBR 777","sail_ref":"GBR777","lat_dec":42.39,"lon_dec":-14.99,"lat_dms":"42°23.35'N","lon_dms":"14°59.09'W","one_hour_heading":197,"one_hour_speed":12.5,"one_hour_vmg":12.5,"one_hour_distance":6.2,"last_report_heading":195,"last_report_speed":11.3,"last_report_vmg":11.3,"last_report_distance":33.9,"last_day_heading":245,"last_day_speed":9.5,"last_day_vmg":6.8,"last_day_distance":228,"dtf":23799.3,"dtl":112.9,"slug":"2020-11-11--130000","sailor":"Pip Hare","boat":"Medallia","is_foiler":0,"is_first_timer":1},
    {"rank":29,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#000000","color_2":"#cc392a","color_3":"#ffffff","sail":"FRA 8","sail_ref":"FRA8","lat_dec":42.89,"lon_dec":-15.6,"lat_dms":"42°52.75'N","lon_dms":"15°36.14'W","one_hour_heading":36,"one_hour_speed":9.2,"one_hour_vmg":-8.5,"one_hour_distance":4.6,"last_report_heading":43,"last_report_speed":9.6,"last_report_vmg":-8.3,"last_report_distance":28.7,"last_day_heading":256,"last_day_speed":6.1,"last_day_vmg":3.2,"last_day_distance":145.2,"dtf":23821.2,"dtl":134.7,"slug":"2020-11-11--130000","sailor":"Jérémie Beyou","boat":"Charal","is_foiler":1,"is_first_timer":0},
    {"rank":30,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#ffffff","color_2":"#244070","color_3":"#f16625","sail":"FRA 69","sail_ref":"FRA69","lat_dec":42.74,"lon_dec":-13.91,"lat_dms":"42°44.42'N","lon_dms":"13°54.39'W","one_hour_heading":190,"one_hour_speed":9.5,"one_hour_vmg":9.5,"one_hour_distance":4.8,"last_report_heading":197,"last_report_speed":9.6,"last_report_vmg":9.6,"last_report_distance":28.9,"last_day_heading":237,"last_day_speed":8.1,"last_day_vmg":6.6,"last_day_distance":195,"dtf":23832.3,"dtl":145.8,"slug":"2020-11-11--130000","sailor":"Sébastien Destremau","boat":"Merci","is_foiler":0,"is_first_timer":0},
    {"rank":31,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#d42788","color_2":"#000000","color_3":"#ffffff","sail":"FRA 72","sail_ref":"FRA72","lat_dec":43.03,"lon_dec":-14.87,"lat_dms":"43°01.59'N","lon_dms":"14°51.57'W","one_hour_heading":211,"one_hour_speed":9.1,"one_hour_vmg":8.7,"one_hour_distance":4.5,"last_report_heading":208,"last_report_speed":10.4,"last_report_vmg":10.1,"last_report_distance":31.2,"last_day_heading":243,"last_day_speed":8.7,"last_day_vmg":6.4,"last_day_distance":210,"dtf":23837.7,"dtl":151.3,"slug":"2020-11-11--130000","sailor":"Alexia Barrier","boat":"TSE - 4myplanet","is_foiler":0,"is_first_timer":1},
    {"rank":32,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#000000","color_2":"#e6b52f","color_3":"#000000","sail":"FRA 02","sail_ref":"FRA02","lat_dec":43.24,"lon_dec":-15.13,"lat_dms":"43°14.12'N","lon_dms":"15°07.56'W","one_hour_heading":169,"one_hour_speed":12.6,"one_hour_vmg":11.4,"one_hour_distance":6.3,"last_report_heading":170,"last_report_speed":12.1,"last_report_vmg":11.1,"last_report_distance":36.4,"last_day_heading":224,"last_day_speed":4.2,"last_day_vmg":3.7,"last_day_distance":100.5,"dtf":23847,"dtl":160.5,"slug":"2020-11-11--130000","sailor":"Armel Tripon","boat":"L'Occitane en Provence","is_foiler":1,"is_first_timer":1},
    {"rank":33,"date":"2020-11-11 13:00:00.000 +00:00","color_1":"#202020","color_2":"#88b759","color_3":"#515151","sail":"FRA 56","sail_ref":"FRA56","lat_dec":45.04,"lon_dec":-5.46,"lat_dms":"45°02.21'N","lon_dms":"05°27.39'W","one_hour_heading":265,"one_hour_speed":10.8,"one_hour_vmg":9.5,"one_hour_distance":5.4,"last_report_heading":256,"last_report_speed":11,"last_report_vmg":10.6,"last_report_distance":33.1,"last_day_heading":239,"last_day_speed":7.4,"last_day_vmg":7.4,"last_day_distance":176.9,"dtf":24121.6,"dtl":435.1,"slug":"2020-11-11--130000","sailor":"Fabrice Amedeo","boat":"Newrest - Art et Fenetres","is_foiler":1,"is_first_timer":0}],
"prevNext":
  {"first":"2020-11-08--130000","current":"2020-11-11--130000","last":"2021-03-05--080000","previous":"2020-11-11--100000","next":"2020-11-11--160000"}}

Outils

Firefox json viewer

jshon(1)

Formulaires

Nouvelles balises web

Balise <form>
Balise <input>
Balises <select> et <option>
Interaction <script>
Requêtes http : GET et POST

Formulaires

<form>
    <input type="****" name="xxxx" />
</form>

type : text, checkbox, radio, button
name : identifiant de variable

Balises

<form>
   <input type="text" name="ville" /><br />
   <label>
      <input type="checkbox" name="couleurR" value="rouge" />
      Rouge
   </label>
   <label>
      <input type="checkbox" name="couleurG" value="vert" />
      Vert
   </label>
   <br />
   <label>
      <input type="radio" name="booleen" value="vrai" checked="checked" />
      True
   </label>
   <label>
      <input type="radio" name="booleen" value="faux" />
      False
   </label>
   <br />
   <select name="equipe">
    <option value="nancy">AS Nancy Lorraine</option>
    <option value="metz">FC Metz</option>
    <option value="strasbourg">RC Strasbourg</option>
   </select>
   <input type="button" value="aller" onclick="go(this.form)"/>
</form>

Interactions

<form>
...
   <input type="button" value="aller" onclick="go(this.form)"/>
</form>

<script type="text/javascript">
function go(arg) {
    console.log(arg["couleurR"]["checked"]);
    alert(arg["ville"]["value"] + "\nRouge : " +
    arg["couleurR"]["checked"] + "\nVert : " +
    arg["couleurG"]["checked"] + "\nSelect : " +
    arg["equipe"]["value"]);
}
</script>
</body>

Démo

form.html

Interprétation côté client ou côté serveur

Exécution côté client :
- fonction javascript
- pas de nouvelle requête
Exécution côté serveur :
- <form action="fichier.php" method="post">
  
  <input type="submit" .../>
- Méthodes POST et GET

POST vs GET

GET ne doit pas modifier de ressources sur le serveur.

Dans un GET, les paramètres sont passés via url ! http://www.example.com/action.php?login=ehainry&password=Emmanuel

Query String

Notion de session

Une fois identifié, l’utilisateur reste connecté

Session
Cookies
UID
Query String

Remarque : attention aux attributs quand vous partagez une URL

API

Applications Programming Interface
Langage standardisé de transmission de données
Requêtes asynchrones
APIs javascript

API = Application Programming Interface

Réutilisation de fonctions définies dans des bibliothèques externes.
L’API documente l’utilisation des fonctions.

Par exemple http://openweathermap.org/API

Transmission des données

Définition d’un langage de description

XML et schéma (DTD)
JSON (dictionnaires)

Synchronisation

Informations externes ⇒ délai
Attente bloquante ou non ?
Contenu varie après réception (FOIT, FOUC)
Événement et Écouteurs (Events, Handlers)

DOM Scripting

Modification du code html par un script

document.getElementById
document.getElementsByClassName
document.createElement
e.setAttribute
e.appendChild

Différence entre “Page Source” et “Inspecteur”.

Sécurité

Gestion de mots de passe
Données utilisateurs
https

Mots de passe

Vérification côté serveur
Transmission par canal sécurisé
Stockage chiffré et redondant

Problématiques liées aux mots de passe

Fuite de la bdd ⇒ Chiffrement des mdp
Déchiffrement inutile ⇒ Hashage
Rainbow Tables ⇒ Salage
Credential Stuffing ⇒ Restriction IP + Captcha
Réutilisation mdp ⇒ 2FA

Entrées utilisateurs

Données mal formées, utilisateurs malveillants ⇒ protection

Exemple : Injection SQL

Injection SQL

SELECT * FROM Rvente WHERE produit='$search';

search = "'; DROP TABLE RVente; --"

HTTPS

HTTP Secure

Transmission chiffrée
- voisins (wifi) ne voient plus les contenus
- FAI ne voit plus les contenus
- FAI connaît toujours les serveurs contactés
- Possibilité de MitM
Transmission signée
- Le site est le bon

Un peu de crypto

Chiffrement symétrique
- la même clef pour chiffrer et déchiffrer
- Coffre fort
Chiffrement asymétrique
- 1 clef publique et 1 clef privée
- Communication

Chiffrement asymétrique

Chiffrement avec la clef publique
- il faut la clef privée pour déchiffrer
- seul le destinataire peut lire
- message chiffré (crypté)
Chiffrement avec la clef privée
- tout le monde peut déchiffrer
- preuve de qui est l’émetteur
- message signé

Échange de clef

Clef publique chez un hôte de confiance (certificats SSL)
Pb intermédiaire malveillant (ex : Kazakhstan en 2019 , antivirus)
Public Key Pinning (HPKP)
Strict Transport Security (HSTS)

2FA

2FA

Authentification avec un second facteur :

Premier facteur ce que je sais (password)
Second facteur ce que j’ai (smartphone)

Two-Factor Authentification

App lica tion ou Clef p hysique

TOTP

Time-based One-time Password : algorithme standard utilisé par les applications 2FA

Vocabulaire

Architecture client serveur, Proxy, Reverse proxy, HTTP, Port, Requête, Hébergement, Côté client, Côté serveur, Fonction, Procédure, Appel, Arguments, Passage par valeur, par référence, Tableaux associatifs, Dictionnaires, Clefs, Valeurs, JSON, Formulaires, Query String, Session, Cookies, UID, API, Requêtes asynchrones, DOM Scripting, Hashage, Salage, Rainbow tables, 2FA, Injection SQL, MitM, Chiffrement, Signature, Crypto symétrique, asymétrique, Clef publique, Clef secrête, Certificat SSL, HPKP, HSTS, 2FA, TOTP.