CM 5 - Dev WEB

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

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

## 2022-2023

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

---
layout: false

# Formulaire
## Définition
Un formulaire correspond à la même chose qu’en marketing classique, mais en version numérique et non papier.

## À quoi ça sert ?
- Interagir avec un utilisateur
- Collecter les informations entrées par un utilisateur
- Traiter des informations d'une page à une autre

## Comment ?
- En javascript
- ou en PHP

---
# Aujourd'hui
## Version PIOU PIOU
On va utiliser le JAVASCRIPT
<iframe width="560" height="315" src="https://www.youtube.com/embed/nXse9LPx6AQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---
# Un formulaire
## Exemple
<img src="img/formulaire-ex.png" width="400" />

.under[Mais comment coder ça ?]
---
# Step by step
## 1. Identifier les élèments html
<img src="img/formulaire-explication.png" width="700" />

---
# Step by step
## 2. Quels sont les élèments qui appartiennent au formulaire ?

---
# Step by step
## 3. On va coder !
<img src="https://c.tenor.com/IVCnKbtTeRQAAAAC/programming-computer.gif" width="400" />

---
# Step by step
## Le début
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
    </head>
    <body>
      <h1>Formulaire d'inscription CY-Music </h1>

<p> Écoutez les titres de votre choix, sans aucune publicité, et téléchargez
      vos favoris pour les écouter hors connexion. Profitez du son Haute
      Fidélité sur tous vos appareils. Profitez-en sur : Sonos, Sony,
       Devialet, Harman Kardon, Denon, Bang & Olufsen, Cabasse et plus </p>
    </body>
</html>
```
## L'exemple
<a href="exemples/part1.html" target="_blank"> ici </a>

---
# Step by step
## Le début
<center>
<video src="videos/video1.mp4" width="600" 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>

---
# Step by step
## Délimiter le formulaire
<img src="img/formulaire-elt.png" width="400" />

---
# Step by step
## Délimiter le formulaire
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
    </head>
    <body>
      <h1>Formulaire d'inscription CY-Music </h1>

<form>
       </form>
    </body>
</html>
```
## L'exemple
<a href="exemples/part2.html" target="_blank"> ici </a>

---
# Step by step
## Identifier le formulaire
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
    </head>
    <body>
      <h1>Formulaire d'inscription CY-Music </h1>

<form id="monForm" name="monForm">
       </form>
    </body>
</html>
```
## L'exemple
<a href="exemples/part3.html" target="_blank"> ici </a>

---
# Step by step
## Identifier le formulaire
<center>
<video src="videos/video2.mp4" width="600" 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>

---
# Step by step
## Ajouter les élèments aux formulaires
<img src="img/formulaire-explication.png" width="500" />
## Les Labels
- on regarde la doc <a href="https://www.w3schools.com/tags/tag_label.asp" target="_blank">ici</a>
- on le code

---
# Step by step
## Les labels
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
    </head>
    <body>
      <h1>Formulaire d'inscription CY-Music </h1>
      ...
       <form id="monForm" name="monForm">
        <label>Nom</label>
        <label>Prénom</label>
        <label>Email</label>
        <label>Mot de passe</label>
        <label>Identité</label>
        <label>Souhaitez vous recevoir des offres par mails ? </label>
       </form>
    </body>
</html>
```
## L'exemple
<a href="exemples/part4.html" target="_blank"> ici </a>

---
# Step by step
## Ajouter les élèments aux formulaires
<center>
<video src="videos/video3.mp4" width="600" 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>

---
# Step by step
## Comment aller à la ligne entre chaque label ?
Avec du css
## Comment ajouter du CSS ?
<img src="https://c.tenor.com/a_r4GmijSuMAAAAC/angry-little-girl-annoyed.gif" width="250" />

---
# Step by step
## On oublie pas la petite ligne
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">c
        <title>Inscription CY-Music</title>
        <link rel="stylesheet" href="nomFeuilleDeStyle.css">
    </head>
    <body>
    ...
    </body>
</html>
```

```css
label{
    display : block;
}

```
## L'exemple
<a href="exemples/part5.html" target="_blank"> ici </a>

---
# Step by step
## VAR
<center>
<video src="videos/video4.mp4" width="600" 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>

---
## Ajouter les élèments aux formulaires
<img src="img/formulaire-explication.png" width="500" />
## Les inputs type text
- on regarde la doc <a href="https://www.w3schools.com/tags/att_input_type_text.asp" target="_blank">ici</a>
- on le code

---
# Step by step
## Les inputs
```html
<form id="monForm" name="monForm">
    <label>Nom</label> <input type="text" id="nom" name="nom">
    <label>Prénom</label> <input type="text" id="prenom" name="prenom">
    <label>Email</label> <input type="text" id="email" name="email">

</form>
```

## L'exemple
<a href="exemples/part6.html" target="_blank"> ici </a>

---
# Step by step
## La doc
<a href="https://www.w3schools.com/tags/att_input_type.asp" target="_blank"> ici </a>

## Les inputs password

```html
<form id="monForm" name="monForm">
    <label>Mot de passe</label> <input type="password" name="motdepasse" id="motdepasse">
</form>
```

## L'exemple
<a href="exemples/part7.html" target="_blank"> ici </a>

---
# Step by step
## La doc
<a href="https://www.w3schools.com/tags/att_input_type.asp" target="_blank"> ici </a>

## Les inputs radio

```html
<form id="monForm" name="monForm">
    <label>Identité</label>
       <input type="radio" id="identite" name="identite" value="Femme"> Femme
       <input type="radio" id="identite" name="identite" value="Homme"> Homme
       <input type="radio" id="identite" name="identite" value="non-binaire"> non-binaire
 </form>
```

## L'exemple
<a href="exemples/part8.html" target="_blank"> ici </a>

## Attention
- si vous voulez saisir qu'un seul bouton à la fois
- alors il faut lui donner le même nom

---
# Step by step
## La doc
<a href="https://www.w3schools.com/tags/att_input_type.asp" target="_blank"> ici </a>

## Les inputs checkbox

```html
<form id="monForm" name="monForm">
    <label>Souhaitez vous recevoir des offres par mails ?</label>
       <input type="checkbox" id="info" name="info" value="oui">
</form>
```

## L'exemple
<a href="exemples/part9.html" target="_blank"> ici </a>

---
# Le petit dernier
## La doc
<a href="https://www.w3schools.com/tags/att_input_type.asp" target="_blank"> ici </a>

## Le submit
- Pour valider le formulaire
- Il ne peut n'y en avoir qu'un seul de type submit dans un form !
```html
<form id="monForm" name="monForm">
       <input type="submit" id="submit" name="submit" value="Inscription">
</form>
```

## L'exemple
<a href="exemples/part10.html" target="_blank"> ici </a>

---
# Step by step
## VAR
<center>
<video src="videos/video5.mp4" width="600" 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>

---
# Récupérer les infos
## Comment ?
En javascript !
## Où ?
D'une page à une autre

## Le scénario type

## La demo
<a href="exemples/inscription.html" target="_blank"> ici </a>

---
# L'exemple complet
## VAR
<center>
<video src="videos/exempleComplet.mp4" width="600" 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>

#### Comment allons nous faire ?

---
# Récupérer les infos
## Les fichiers
- inscription.html : mon formulaire d'inscription de tout à l'heure
- nomFeuilleDeStyle.css : si besoin une feuille de css
- récuperation.js : un fichier js avec du dom
- validationInscription.html : ma page qui confirme la validation d'un compte

## Un problème !
- inscription.html n'est pas complet !!
- lorsque je clic sur la validation d'inscription il ne se passe rien !!

---
# Les balises form
## L'action
indiquer quelle page doit souvrir après la validation du formulaire
## La méthode
indiquer la méthode d'envoie des données

## Dans notre cas
<img src="img/scenario1.png" width="250" />
#### action
validationInscription.html
#### methode
par URL (méthode GET)

---
# Les balises form
## Dans notre cas
```html
<form id="monForm" name="monForm" action="validationInscription.html" method="GET">
    <label>Nom</label> <input type="text" id="nom" name="nom">
   <label>Prénom</label> <input type="text" id="prenom" name="prenom">
   <label>Email</label> <input type="text" id="email" name="email">
   <label>Mot de passe</label> <input type="password" id="password" name="password">
   <label>Identité</label>
   <input type="radio" id="identite" name="identite" value="Femme">
   <input type="radio" id="identite" name="identite" value="Homme">
   <input type="radio" id="identite" name="identite" value="non-binaire">
   <label>Souhaitez vous recevoir des offres par mails ? </label>
   <input type="checkbox" id="info" name="info" value="oui">
   <input type="submit" id="submit" name="submit" value="Inscription">
</form>
```
## Demo
<a href="exemples/inscription1.html" target="_blank"> ici </a>

---
# Les balises form
## VAR
<center>
<video src="videos/video6.mp4" width="600" 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>

---
# ça marche pô
## Pourquoi ?
Je n'ai pas créé le fichier "validationInscription.html"

## Demo
<a href="exemples/inscription2.html" target="_blank"> ici </a>

---
# ValidationInscription
## VAR
<center>
<video src="videos/video7.mp4" width="600" 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>

---
# ça marche pô
## Pourquoi ?
- Mais si çà marche !
- Les informations du formulaire sont dans l'url

---
# ValidationInscription
## VAR
<center>
<video src="videos/video8.mp4" width="600" 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>

---
# Les balises form
## Comment les afficher dans la page ?
En javascript

---
# Le JS
## Exemple
```javascript
nom = new Array();
valeur = new Array();

/* On enlève le ? */
url = window.location.search.slice(1,window.location.search.length);

/* récupérer les différents paramètres séparés par un & */
listParam = url.split("&");
for(i=0;i<listParam.length;i++){
    laListe = listParam[i].split("=");
    nom[i] = laListe[0];
    valeur[i] = laListe[1];
}
console.log(nom+ ' - ' + valeur);
```

#### ATTENTION
Le script de récupération JS est à éxécuter dans la page **validationInscription.html** (la deuxième page)
```html
<script type="text/javascript" src="recuperation.js"></script>
```
---
# Le Js
## Explication Ligne par Ligne
<img src="img/ici.png" width="400" />

```javascript
nom = new Array();
valeur = new Array();
```

---
# Le Js
## Explication Ligne par Ligne
<img src="img/ici.png" width="400" />

```javascript
url = window.location.search.slice(1,window.location.search.length);
```

"nom=Andrews&prenom=Archi&email=toto@cy-tech.fr"

---
# Le Js
## Explication Ligne par Ligne
<img src="img/ici.png" width="400" />

```javascript
listParam = url.split("&");
```

---
# Le Js
## Explication Ligne par Ligne
.pull-left[
<img src="img/expl3.png" width="370" />
]

.pull-right[
```javascript
for(i=0;i<listParam.length;i++){
    laListe = listParam[i].split("=");
    nom[i] = laListe[0];
    valeur[i] = laListe[1];
}
```
]
0

---
# Le Js
## Explication Ligne par Ligne

.pull-left[
<img src="img/expl4.png" width="370" />
]

.pull-right[
```javascript
for(i=0;i<listParam.length;i++){
    laListe = listParam[i].split("=");
    nom[i] = laListe[0];
    valeur[i] = laListe[1];
}
```
]

---
# Le Js
## Explication Ligne par Ligne

.pull-left[
<img src="img/expl5.png" width="370" />
]

.pull-right[
```javascript
for(i=0;i<listParam.length;i++){
    laListe = listParam[i].split("=");
    nom[i] = laListe[0];
    valeur[i] = laListe[1];
}
```
]

---
# Le Js
## La var
<center>
<video src="videos/video9.mp4" width="600" 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>
---
# Demonstration
## Inscription.html
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
        <link rel="stylesheet" href="nomFeuilleDeStyle.css">
    </head>
    <body>
      <h1>Formulaire d'inscription CY-Music </h1>
     <p> Écoutez les titres de votre choix, sans aucune publicité, et téléchargez
      vos favoris pour les écouter hors connexion. Profitez du son Haute
      Fidélité sur tous vos appareils. Profitez-en sur : Sonos, Sony,
       Devialet, Harman Kardon, Denon, Bang & Olufsen, Cabasse et plus </p>
      <form id="monForm" name="monForm" action="validationInscription.html" method="GET">
       <label>Nom</label> <input type="text" id="nom" name="nom">
       <label>Prénom</label> <input type="text" id="prenom" name="prenom">
       <label>Email</label> <input type="text" id="email" name="email">
       <label>Mot de passe</label> <input type="password" id="password" name="password">
       <label>Identité</label>
       Femme<input type="radio" id="identite" name="identite" value="Femme">
       Homme<input type="radio" id="identite" name="identite" value="Homme">
       Non binaire<input type="radio" id="identite" name="identite" value="non-binaire">
       <label>Souhaitez vous recevoir des offres par mails ? </label>
       <input type="checkbox" id="info" name="info" value="oui">
       <input type="submit" id="submit" name="submit" value="Inscription">
       </form>
    </body>
</html>
```
---

# Demonstration
## validationInscription.html
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inscription CY-Music</title>
        <link rel="stylesheet" href="nomFeuilleDeStyle.css">
    </head>
    <body>
        <h1>Validation d'inscription CY-Music </h1>
        <p> Bonjour, <span id="nom"></span> <span id="prenom"></span></p>
        <p> Votre inscription a été prise en compte avec le mail suivant : <span id="mail"></span> </p>
        <script type="text/javascript" src="recuperation.js"></script>
    </body>
</html>
```
.underR[Attention] :
- Il faut lier le js à validationInscription.html
- Il faire le lien à la fin du fichier sinon span ne seront pas détecté dans le fichier JS

---
# Démonstration
## récupération.js
```js
nom = new Array();
valeur = new Array();
/* On enlève le ? */
url = window.location.search.slice(1,window.location.search.length);
/* récupérer les différents paramètres séparés par un & */
listParam = url.split("&");
for(i=0;i<listParam.length;i++){
    laListe = listParam[i].split("=");
    nom[i] = laListe[0];
    valeur[i] = laListe[1];
}

document.getElementById("nom").innerHTML = valeur[0];
document.getElementById("prenom").innerHTML = valeur[1];

```

---
# L'exemple complet
## VAR
<center>
<video src="videos/video10.mp4" width="600" 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>

---
# Le complet !
## Le sénario
<img src="img/scenarComplet.png" width="370" />

## La demo
<a href="exemples/inscription.html" target="_blank"> ici </a>