Cours 8 - fetch

name: inverse
layout: true
class: center, middle, inverse
---

# Developpement Web - CM 8
## Inès de Courchelle

## 2022-2023

![image](../img/CY-tech.png)

---
layout: false

# Aujourd'hui
## Le plan
1. JSON
2. FETCH

---
# JSON
## À quoi ça ressemble ?
.pull-left[
<center>
<img src="img/JSON1.png" width=250/>
</center>
]
.pull-right[
<center>
<img src="img/JSON2.png" width=250/>
</center>
]

---
# À quoi çà ressemble du JSON ? 2/2
## Principes
- Ordonner ces données dans un tableau
- Délimiter un tableau par des **“{”**
- Délimiter un sous tableau par des **“\[”**

## Pour vérifier votre JSON :

<http://json.parser.online.fr/>

---
# Démonstration
## Exemple

.pull-left[
#### Json
```c
[  {    "nom": "Nobbs",
        "prenom": "Jordan",
        "poste": "milieu",
        "equipe": "Aston Villa"
    },
    {  "nom": "Odegaard",
       "prenom": "Martin",
       "poste": "milieu",
       "equipe": "Arsenal"
    },
    {  "nom": "Martinelli",
       "prenom": "Gabriel",
       "poste": "attaquant",
       "equipe": "Arsenal"
    },
    {  "nom": "Hemp",
       "prenom": "Lauren",
       "poste": "attaquant",
       "equipe": "Man city"
    },
    {  "nom": "Henry",
       "prenom": "Thierry",
       "poste": "attaquant",
       "equipe": "Arsenal"
    },
    {  "nom": "Leon",
       "prenom": "Mapi",
       "poste": "defenseur",
       "equipe": "Barcelone"
    }
]
```
]

.pull-right[
#### csv
```c
nom,prenom,poste,equipe
Nobbs,Jordan,milieu,Aston Villa
Odegaard,Martin,milieu,Arsenal
Martinelli,Gabriel,attaquant,Arsenal
Hemp,Lauren,attaquant,Man city
Henry,Thierry,attaquant,Arsenal
Leon,Mapi,defenseur,Barcelone
```
]

---
# JSON
## Bilan
- organiser ses données
- se n'est pas un langage
- s'est un format de données

---
# Aujourd'hui
## Le plan
1. JSON
2. FETCH

---
# FETCH
## Objectifs
- Effectuer des requêtes HTTP asynchrones vers des ressources distantes, telles que des API Web, des fichiers JSON ou des images.
- Récupérer des données depuis un serveur distant et de les traiter dans une application JavaScript.

## De manière générale
- Simplifier le processus de récupération de données à partir de serveurs distants,
- créer des applications Web dynamiques et interactives qui peuvent interagir avec des API Web et d'autres ressources distantes.

## AVANT
C'était AJAX qui était utilisé avec la méthode XMLHttpRequest (XHR)

---
# Une requête HTTP
## Définition
- HyperText Transfer Protocol
- C'est un message envoyé par un client à un serveur Web afin de récupérer ou manipuler des ressources sur ce serveur. Les ressources peuvent être des pages Web, des images, des fichiers de données ou d'autres types de contenus.

## Composition
- La méthode HTTP (GET, POST) qui spécifie l'action à effectuer sur la ressource.
- L'URL qui identifie la ressource à récupérer ou à manipuler.
- Le corps de la requête, qui peut contenir des données envoyées avec la requête (par exemple, des données de formulaire).

---
# Fetch
## Illustration
#### RAPPEL
<img src="img/client-serveur.png" width=600>

---
# Fetch
## Illustration
#### Passerelle
<img src="img/client-serveur-fetch.png" width=600>

---
# Fetch
## En gros
- c'est du javascript
- permet d'aller chercher des informations côté serveur et de les afficher côté client sans avoir à recharger ou changer de page

---
# Exemple N°1
## Afficher le résultat d'une page php
<img src="img/demo1.png" width=600>

---
# Exemple N°1
## Afficher le résultat d'une page php
<img src="img/demo2.png" width=600>

---
# Exemple N°1
## Afficher le résultat d'une page php
<img src="img/demo3.png" width=600>

---
# Exemple N°1
## Afficher le résultat d'une page php
<img src="img/demo4.png" width=600>

---
# Exemple N°1
## Afficher le résultat d'une page php
<img src="img/demo5.png" width=600>

---
# Exemple N°1
## Le code
#### HTML
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calcul</title>
    </head>
    <body>
		<p id="res"></p>
	    <script type="text/javascript" src="script.js"></script>
	</body>
</html>
```

---
# Exemple N°1
## Le code
#### javascript
```js
fetch('traitement.php', {
		method: 'POST'
	})
	.then(response => response.text())
	.then(result => {
		document.getElementById('res').textContent = result;
	})
    );
```
- **fetch(traitement.php')** permet d'envoyer les données à la page traitement php
- On choisit ensuite la méthode **post**
- **document.getElementById('result').textContent = result;** on récupere le résultat

---
# Exemple N°1
## Le code
#### javascript
```js
fetch('traitement.php', {
		method: 'POST'
	})
	.then(response => response.text())
	.then(result => {
		document.getElementById('res').textContent = result;
	})
);
```
**.then(response => response.text())** :
- Elle sert à transformer la réponse HTTP en texte.
- La réponse HTTP est renvoyée sous forme de flux binaire et non sous forme de texte.
- La méthode **.text()** retourne une nouvelle promesse qui résout avec le contenu de la réponse sous forme de texte.
---
# Exemple N°1
## Le code
#### javascript
```js
fetch('traitement.php', {
		method: 'POST'
	})
	.then(response => response.text())
	.then(result => {
		document.getElementById('res').textContent = result;
	})
);
```

**.then(result => {...})**
- pour manipuler le résultat obtenu (qui est maintenant du texte).
- ICI, cette méthode met à jour l'élément HTML avec l'ID "result" en définissant son contenu texte avec la valeur renvoyée par la promesse.

En résumé, la méthode **.then(response => response.text())** convertit la réponse HTTP en texte, tandis que la méthode **.then(result => {...})** manipule et affiche le résultat obtenu dans l'interface utilisateur de la page web.

---
# Exemple N°1
## Le code
#### PHP
```js
<?php
	$res=400*2;
	echo $res;
?>
```

.underR[Attention] Si vous ne mettez pas le **echo** le résultat ne s'affichera pas !

---
# Exemple N°1
## Démonstration
<center>
<video src="videos/exemple1.mp4" width="700"  controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Exemple N°2
## Envoyer les données d'un formulaire
#### Scénario
1. L'utilisateur saisit deux valeurs dans un formulaire
2. L'utilisateur valide le formulaire
3. Les informations du formulaire sont envoyées par la méthode POST
4. Le serveur réalise le calcul
5. La réponse du serveur (le résultat du calcul) est affichée dans la même page html

#### Toujours pareil
<img src="img/demo1.png" width=200>

---
# Exemple N°2
## Démonstration
<center>
<video src="videos/exemple2.mp4" width="700"  controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Exemple N°2
## HTML
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calcul</title>
    </head>
    <body>
		<form id="calculator">
            <input type="text" name="a" placeholder="Entrez la première valeur">
            <input type="text" name="b" placeholder="Entrez la deuxième valeur">
            <button type="submit">Calculer</button>
        </form>
        <p id="result"></p>
        <script type="text/javascript" src="script.js"></script>

</body>
</html>
```
.underR[ATTENTION] Il n'y a pas de methode et d'action dans le html

---
# Exemple N°2
## javascript
```js
    const form = document.getElementById('calculator');

form.addEventListener('submit', event => {
        event.preventDefault();
        const data = new FormData(event.target);

permet de créer un objet FormData qui contient les données du formulaire soumis par l'utilisateur

---
# Exemple N°2
## javascript
```js
    const form = document.getElementById('calculator');

form.addEventListener('submit', event => {
        event.preventDefault();
        const data = new FormData(event.target);

fetch('traitement.php', {
            method: 'POST',
            body: data
        })
        .then(response => response.text())
        .then(result => {
            document.getElementById('result').textContent = result;
        })
        .catch(error => {
            console.error(error);
        });
    });
```
- **textContent** est une propriété en JavaScript qui permet de définir ou de récupérer le contenu textuel d'un élément HTML.
- **document.getElementById('result').textContent** permet de modifier le contenu textuel de l'élément HTML avec l'ID "result". La variable result contient le texte renvoyé par le serveur dans la réponse de la requête fetch.

---
# Exemple N°2
## javascript
```js
    const form = document.getElementById('calculator');

form.addEventListener('submit', event => {
        event.preventDefault();
        const data = new FormData(event.target);

**form.addEventListener('submit', event =>{**
- ajouter un écouteur d'événements "submit" à l'élément HTML de formulaire représenté par la variable "form".
- ICI, permet d'ajouter une fonction (ou un objet implémentant une fonction) en tant que gestionnaire d'événements pour l'événement spécifié (dans ce cas, "submit").

---
# Exemple N°2
## javascript
```js
    const form = document.getElementById('calculator');

form.addEventListener('submit', event => {
        event.preventDefault();
        const data = new FormData(event.target);

- L'écouteur est déclenché chaque fois que l'événement spécifié est activé sur l'élément écouté (dans ce cas, lorsque le formulaire est soumis).
- La fonction fléchée (event => {...}) est appelée lorsque l'événement "submit" est déclenché.
-  la méthode .then() est appelée sur l'objet retourné par la méthode fetch() pour gérer la réponse HTTP asynchrone qui sera renvoyée par le serveur.

---
# Exemple N°2
## PHP
```php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $a = $_POST['a'];
    $b = $_POST['b'];
    $result = $a + $b;
    echo $result;
}
?>
```
## Remarque
Le SI permet de verifier la méthode POST ($_SERVER['REQUEST_METHOD'] === 'POST') avant d'effectuer le calcul. Cela permet de s'assurer que le fichier n'est pas appelé directement depuis l'URL du navigateur.

---
# Exemple N°3
## Avec du JSON
#### Objectifs
- convertir les informations du formulaire en JSON
- envoyer le JSON au serveur
- decoder le JSON côté serveur
- réaliser la multiplication
- afficher le résultat

---
# Exemple N°3
## HTML
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calcul</title>
    </head>
    <body>
		<form id="calculator">
            <input type="text" name="a" placeholder="Entrez la première valeur">
            <input type="text" name="b" placeholder="Entrez la deuxième valeur">
            <button type="submit">Calculer</button>
        </form>
        <p id="result"></p>
   	    <script type="text/javascript" src="script.js"></script>

</body>
</html>
```
---
# Exemple N°3
## Javascript
```c
            const form = document.getElementById('calculator');

form.addEventListener('submit', event => {
                event.preventDefault();
                const data = new FormData(event.target);

const formDataJson = {};
					for (let [key, value] of data.entries()) {
						formDataJson[key] = value;
					}

fetch('traitement.php', {
                    method: 'POST',
                    body: JSON.stringify(formDataJson),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.text())
                .then(result => {
                    document.getElementById('result').textContent = result;
                })
                .catch(error => {
                    console.error(error);
                });
            });
```

---
# Exemple N°3
## PHP
```php
<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);
    $a = $data['a'];
    $b = $data['b'];
    $result = $a + $b;
    echo $result;
}

?>
```

- **$data = json_decode(file_get_contents('php://input'), true);** permet de récupérer les données envoyées dans la requête HTTP POST et de les stocker dans la variable $data.
-  **file_get_contents('php://input')** permet de lire le contenu brut de la requête POST, qui peut être une chaîne de caractères encodée en JSON.
- **json_decode()** transforme cette chaîne de caractères JSON en un tableau PHP associatif grâce au deuxième paramètre qui est true.

---
# Exemple N°3
## Démonstration
<center>
<video src="videos/exemple3.mp4" width="700"  controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>