Chapitre 8. Le web¶

Table des matières¶

1. Le langage HTML

1.1 Création d'une page
1.2 Création d'autres pages
1.3 Les images
1.4 Balises HTML
1.5 Le langage CSS
1.6 Web et programmation

2. Interactions sur le Web

2.1 Repères
2.2 Hypertexte
2.3 Interactions avec HTML et Javascript

3. Requêtes HTTP

3.1 Le principe du client et du serveur
3.2 Les requêtes

4. Formulaires dans une page Web

4.1 Ma première page avec formulaire
4.2 Formulaire avec JavaScript
4.3 Formulaire avec PHP

Remplissez le jupyter notebook suivant en vous aidant de votre livre de Première NSI de Serge BAYS .

Pour répondre, double-cliquez sur Réponse et complétez la zone en-dessous. Puis cliquez sur le bouton Exécuter.

Important : pour fermer votre jupyter notebook, cliquez sur :

Fichier / Créer une nouvelle sauvegarde

puis sur :

Fichier / Fermer et Arrêter

Ecrivez ci-dessous votre prénom et votre nom :

Réponse :

Chapitre 8. Le web¶

1. Le langage HTML ¶

Lisez le paragraphe Le langage HTML p. 58

1) Que signifie HTML ?

Réponse :

2) Que fait le navigateur quand il ouvre une page HTML ?

Réponse :

3) Qu'envoie le serveur au client (c'est à dire votre navigateur) ? et pourquoi ?

Réponse :

4) Que signifie www ?

Réponse :

5) A quoi ressemble le système de lien entre les pages ?

Réponse :

6) Qu'utilise le HTML ?

Réponse :

7) Qu'est-ce qu'un hypertexte ?

Réponse :

8) Le langage HTML est-il comme le langage Python un langage de programmation ?

Réponse :

9) Quels sont les noms de deux logiciels utiles quand on crée une page web (un pour créer un pour visualiser) ?

Réponse :

10) Quelle est l'extension de fichier qui permet de gérer la mise en forme ?

Réponse :

11) Citez des noms de navigateurs web (au moins 4)?

Réponse :

1.1 Création d'une page ¶

Lisez le paragraphe Création d'une page du bas de la p. 58 au milieu de la p. 60

12) Quelle habitude prendre quand on programme en HTML ?

Réponse :

13) Quelles sont les trois balises obligatoires ?

Attention : Pour que vos balises apparaissent dans votre réponse, il faudra passer deux lignes et faire une tabulation (touche Tabulation à gauche du clavier)

Réponse :

<Commencez à saisir vos balises ici...>

Allez sur le site https://codepen.io/pen/ et copiez-collez le code suivant dans la partie html (mettez le navigateur en plein écran pour meilleur un confort de visualisation).
Ce site va vous permettre de voir en temps réel, et sans avoir besoin de plusieurs applications, ce qu’entrainent les modifications apportées.

<html lang="fr">
    <head>
        <title>  Nom prénom </title>
        <meta charset="utf-8"/> 
    </head>

    <body>
    <h1> Nom prénom </h1>
    <h2> mel@monmel.fr <br> </h2>

    <h3> Je me présente... </h3>
    <p>  Je m'appelle ...<br>  J'habite Laval en Mayenne<br> 
    <br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p>.....<br></p>
    <p> Voilà ! </p>
    </body>
</html>

14) Quelle action a la balise <br> ?

Réponse :

15) Insérez un commentaire contenant « Début de la présentation » avant "Je me présente" indiquant que c'est le début de la présentation. Qu'allez vous saisir ?

Réponse :

Vous pouvez modifier les balises dans le code html et regarder ce que cela change au niveau de la présentation. (maximum cinq minutes).

1.2 Création d'autres pages ¶

Lisez le paragraphe Création d'autres pages du bas de la p. 60 au milieu de la p. 63

On va ajouter un lien pour que le visiteur puisse vous envoyer un courrier

16) Modifiez la ligne contenant l'adresse mel en écrivant votre adresse @avesnieres.fr et que celle-ci soit "cliquable". Quel va être le code de la nouvelle ligne ?

Réponse :

On peut, avant la balise </a>, remplacer l'adresse mel (visible sur le site) par du texte comme "Contactez-moi".

17) Ajoutez un lien vers le site du lycée (https://avesnieres.paysdelaloire.e-lyco.fr) en bas de la page avant </body>. Quel va être le code de la ligne ?

Réponse :

18) Ajoutez, avant la balise </body> mais après le lien précédent (pas sur la même ligne) un lien vers le fichier Anaconda3-2019.03-Windows-x86_64.exe qui se trouve à cette adresse http://www.astrovirtuel.fr/nsi/. Quel va être le code de la ligne ?

Réponse :

Ajoutez avant la balise fermante </body> :

<p><h5 id="bas_de_page">Site créé en 2020<br>
    En cours de NSI<br>
    Première</h5></p>

Cette action permet d’ajouter une ancre dans la page, c’est à dire un nom sur lequel on peut pointer (comme un lien externe).

19) Ajoutez, juste après la balise <body> un lien interne à la page qui pointe vers l’ancre bas_de_page.

Qu’allez vous saisir comme code ?

Réponse :

20) Ajoutez un lien interne retour qui pointe vers une ancre se trouvant en haut de la page. Quelles sont les deux lignes que vous allez vous saisir ?

Il va y avoir deux lignes à saisir :

une pour définir l'ancre en haut de la page
une autre pour mettre un lien en bas de la page (juste avant </body>) qui permettra de pointer sur la balise du haut de la page.

Réponse :

1) ligne du haut :

2) ligne du bas :

Testez vos liens

Sur le Raspberry, dans le dossier Documents, créez un dossier "webs" et dans ce dossier, le dossier « minisite ».
Lancez l'éditeur Geany (Cliquer sur la framboise / Programmation / Geany).
Faites fichier - nouveau.
Copiez-collez le code complet se trouvant dans codepen.
Ensuite sauvegardez, sous le nom accueil.html, la page dans le dossier « minisite ».

21) Que remarquez-vous dans cet éditeur une fois la sauvegarde effectuée ?

Réponse :

Avec l'éditeur Geany, créez un fichier ville.html et un fichier passion.html.
Lors de la création choisissez le modèle Nouveau (selon un modèle) « file.html ».
Dans le fichier ville.html, remplacez le titre par défaut 'sans titre' par Ville
Dans le fichier passion.html, remplacez le titre par défaut 'sans titre' par Passion
Sauvegardez les fichiers ville.html et passion.html dans le même dossier que le fichier accueil.html.

22) Que remarquez-vous lors de la création de ces fichiers ?

Réponse :

En utilisant Geany, dans le fichier accueil.html, insérez (par un copier-coller) dans la section <body>, après la ligne contenant l’adresse mel, les lignes ci-dessous qui contiendront vos liens.

<ul>
    <li> Accueil </li>
    <!-- lien vers la page ville.html -->
    <li> Ma ville/mon village </li>
    <!-- lien vers la page passion.html -->
    <li> Ma passion </li>
</ul>

Sur les deux chaînes de caractères 'Ma ville/mon village' et 'Ma passion' mettez les liens vers les fichiers ville.html et passion.html créés précédemment.

Remettez de l’ordre aussi dans l’indentation.

Ajoutez aussi ces lignes dans les deux fichiers ville.html et passion.html juste après la balise <body>.

Attention, il faudra ajouter un lien pour pouvoir revenir à la page d’accueil lorsque l’on clique dessus.
N’oubliez pas de sauvegarder les fichiers après chaque modification importante.

Dans Geany, affichez la page accueil.html.
Cliquez sur l'icône 'Exécuter' (en forme d'avion en papier) dans la barre d'outils de Geany.
Attendez quelques instants que la page accueil.html apparaisse dans un nouvel onglet du navigateur.
Vérifiez que tous les liens fonctionnent.

Remarquez que l'onglet du navigateur porte le titre de la page html courante.

23) Complétez dans la cellule ci-dessous les 3 lignes de liens hypertextes permettant de naviguer entre accueil.html, ville.html, passion.html

Réponse :

    <a href="..."> Accueil </a>

    <a href="..."> Ma ville / mon village </a>

    <a href="..."> Ma passion </a>

Complétez les deux fichiers ville.html et passion.html avec vos informations.
N’est demandée ici que la structure globale (titres, listes, …)

Par exemple dans la section <body> après les 3 lignes de liens, écrivez :

<h1>Ma ville est Entrammes</h1>
<h2>Géographie</h2>
<h2>Histoire</h2>
<h2>Population</h2>
<h2>Liens</h2>


<h1>Ma passion est l'aéromodélisme</h1>
<h2>Les techniques</h2>
<h2>Principales disciplines</h2>
<h2>Principaux records du monde</h2>
<h2>Principales associations</h2>
<h2>Liens</h2>

Les détails (paragraphes, images, icones, ...) seront finalisés plus tard.
Maximum 10 minutes.

1.3 Les images ¶

Lisez le paragraphe Les images du milieu de la p. 63 au bas de la p. 64

Copiez votre photo (ou téléchargez une image de visage sur le web) dans le dossier minisite en la nommant ma_photo.jpeg
Insérez, en utilisant Geany, ma_photo.jpeg dans le fichier accueil.html juste en dessous du nom et du prénom entre deux balises de début de paragraphe <p> et fin de paragraphe </p>.
Rappel : la balise pour insérer une image est <img src="..." alt="ma photo">

24) Quelle ligne de code allez-vous saisir ?

Réponse :

Si l’image est trop grande, ajoutez à la fin de la balise (avant le >) l'attribut : height="100"

Cela fixe à 100 pixels la hauteur de l'image, qui conserve ses proportions.

Remarquez que la valeur de l'attribut height est une chaîne de caractères (et non un entier).
Au lieu de la hauteur, on peut fixer la largeur avec l'attribut width="100"
Attention : si on fixe la hauteur ET la largeur sans respecter les proportions de l'image originale, cela entrainera une déformation.

Ajouter le logo du lycée (le télécharger ici et l'enregistrer dans le dossier minisite sous le nom de lpa-logo.png).
Afficher la légende "Lycée d’Avesnières - LAVAL".

Rappel : Pour insérer une image ET une légende, on utilise la suite de balises :
```
<figure>
        <img src="..." alt="Logo du lycée">
        <figcaption> ... </figcaption>
</figure>
```
Remarque : En anglais 'légende' se dit 'caption'.

25) Quelle balise permet d'insérer une image ET une légende ?

Réponse :

<...>

26) Quelle suite de balises allez-vous utiliser pour insérer le logo ?

Réponse :

<center>
    ...
        ...
        ...
    ...
</center>

Mettez un lien vers le site du lycée (https://avesnieres.paysdelaloire.e-lyco.fr) sur ce logo
Sur la page accueil.html, effacez le lien vers le site se trouvant juste au dessous (c'est à dire le lien pour télécharger Anaconda3 saisi au début du TP)

27) Qu’allez-vous saisir ?

Réponse :

<center>
    <a href="..."><figure>
        <img src="..." alt="Logo du lycée">
        <figcaption> ... </figcaption>
    </figure></a>
</center>

Une fois que les 3 pages accueil.html, ville.html, passion.html ont reçu en bas les lignes pour afficher le logo du lycée, commencez à compléter les pages ville.html et passion.html, en ajoutant une ou des images, du texte, des listes, des liens .. (maximum 30 minutes de travail)

1.4 Balises HTML ¶

Lisez le paragraphe Balises HTML du bas de la p. 64 et p. 65

Se trouvent, dans cette partie, des balises déjà utilisées et d’autres vues plus tard.
On peut trouver sur certains sites comme celui-là https://www.codeshttp.com/toutes-les-balises-html-liste-complete-avec-syntaxe.html la liste des balises.

1.5 Le langage CSS ¶

Lisez le paragraphe Le langage CSS en haut de la p. 66

28) Quel est l’avantage du CSS ?

Réponse :

29) Qui a adopté ce standard ?

Réponse :

1.5.1 Attribut dans une balise ¶

Lisez le paragraphe Attribut dans une balise du milieu de la p. 66 au milieu de la p. 67

30) En utilisant Geany, dans la page accueil.html, mettez la zone contenant "je me présente" en rouge. Quel sera le code de cette ligne ?

Réponse :

31) En haut de la page accueil.html, complétez la balise <h1 id="haut_de_page"> avec un attribut style de façon à mettre le nom et le prénom en vert et en gras. Quel sera le code de cette ligne ?

Réponse :

32) Sur la ligne contenant la phrase "Je me présente", mettez la zone contenant "Je me" en italique (garder la couleur rouge). Utilisez la balise <span>. Que va contenir la nouvelle ligne ?

Réponse :

Le mot anglais span signifie portée. La balise <span> permet de délimiter une petite zone et d'y mettre des attributs qui ont une portée limitée.

1.5.2 Règle CSS dans l'en-tête ¶

Lisez le paragraphe Règle CSS dans l'en-tête du milieu de la p. 67 au milieu de la p. 69

33) Mettez le nom et le prénom en vert et en gras, comme tout à l’heure mais en écrivant une règle CSS dans l'en-tête, après la balise <meta charset="utf-8"/>. Il faudra supprimer l'attribut style mis dans la balise <h1> à la question 31.

Quelles sont les 3 lignes de code qu'il faut saisir entre les balises <meta charset="utf-8"/> et </head> ?

Réponse :

34) On veut que la ligne « Je m'appelle... J'habite ... en Mayenne. » soit en italiques.

On remarquera que cette ligne est une ligne de paragraphe <p>.

Quel ligne de code faut-il ajouter entre les balises <style type="text/css"> et </style> ?

Réponse :

35) Que se passe-t-il pour le texte « Voilà » en bas de la page d'accueil ?
pourquoi ?

Réponse :

Ce problème sera corrigé dans la partie suivante.

Nous venons de voir deux méthodes :
- Insérer un attribut style dans des balises telle que <p>, <h1>, <span> ...
- Ajouter dans l'en-tête de la page html des règles CSS sous la forme d'un bloc <style type="text/css"> ... </style> en précisant dedans les syles que doivent avoir body, p, h1 ...
Mais elles peuvent être empiriques surtout si des styles de même nom apparaissent sur plusieurs pages. Il faudrait, si l’on veut changer le style sur toutes les pages, passer fichier html par fichier html.
Nous allons plutôt nous pencher sur la méthode du fichier CSS externe aux pages accueil.html, ville.html et passion.html.

En résumé : Les règles écrites dans la feuille de style CSS se propagent 'en cascade' :¶

1.5.3 Fichier de style ¶

Lisez le paragraphe Fichier de style du milieu de la p. 69 au milieu de la p. 70

Pour pouvoir voir rapidement l'impact des diverses modifications, retournez sur le site https://codepen.io/pen/
Copiez les deux blocs de codes suivants, un pour le html et un pour le css.

<!-- Henry Laval - Version 2-->


<html lang="fr">
    <head>
        <title>  Henry Laval </title>
        <meta charset="utf-8"/> 
        <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    </head>

    <body>
        <div id="en-tete">
            <h1> Henry Laval </h1>
            <h2> h-laval@monmel.fr <br></h2>
        </div>
        <div id="menu"> 
            <ul>
                <li> Ma ville/mon village </li>
                <li> Ma passion </li>
            </ul>
        </div>
            <!-- Début de la présentation -->
        <div id="presentation">
            <h3> Je me présente... </h3>
            <p> Je m'appelle ...<br>
                        J'habite …. en Mayenne<br>
                <br>
            </p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p>.....<br></p>
            <p> Voilà ! </p>
        </div>  
        <div id="pied">
            <p>
            <a href= "https://avesnieres.paysdelaloire.e-lyco.fr/">Lycée Privé d’Avesnières</a> 
            </p>
        </div>
    </body>
</html>

/* Mon css */

html,
body {  margin : 10px;
        background-color : #F8F8FF;
        font-family : Arial;
     }
h1 {    font-size : 30px;
        text-align : left;
     }
h2 {    font-size : 20px;
        text-align : left;
        color : #003366;
     }
h3 {    font-size : 20px;
        font-style : bold;
        text-align : left;
     }
p {     text-align : justify;
        color : #003366;
     }

img {   width : 250px;}

#en-tete { background-color : #99CCCC;
        padding : 10px 10px 0px 10px;
     }

#menu { float : left;
        background-color : #FFFFFF;
     }

#presentation {
        margin-left : 270px;
        padding : 10px 10px 50px 0;
        color : #003366;
     }

#pied { background-color:#99CCCC;
        text-align:right;
     }

Regardez ce qui se passe dans la fenêtre de visualisation HTML lorsqu'on colle le code de la feuille de style dans le fenêtre CSS.

36) Par quelle balise associe-t-on un fichier CSS dans le fichier html, dans sa partie en-tête, juste après <meta charset="utf-8"/> ?

Réponse :

Sur le site codepen.io, modifiez la feuille de style dans la fenêtre CSS et regardez les effets sur la page HTML Henry Laval - Version 2.
Maintenant, dans Geany, sur la page accueil.html de votre minisite, insérez dans la partie <head> juste au dessous de la ligne <meta charset="utf-8"/> la ligne suivante :

    <link href="style.css" rel="stylesheet" media="all" type="text/css">

Supprimez le bloc de règles CSS interne <style type="text/css"> ... </style> créé tout à l’heure.

Vous devez obtenir dans l'en-tête du fichier accueil.html :

<head>
    <title> Nom Prénom </title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" media="all" type="text/css">
</head>

Avec Geany, créez un nouveau fichier. Copiez dedans les lignes qui sont dans la fenêtre CSS de codepen. Enregistrez ce fichier sous le nom style.css dans le dossier où se trouvent déjà les 3 pages accueil.html, ville.html, passion.html .
Enregistrez ce fichier dans le même dossier les fichiers html créés en début de TP (Documents/webs/minisite).

Pour que les règles écrites dans la feuille externe style.css soient aussi appliquées dans les pages ville et passion, copier le même lien

<link href="style.css" rel="stylesheet" media="all" type="text/css">

dans l'en-tête des deux fichiers ville.html et passion.html, juste après les balises <meta>.
Dans Geany, faites une ou deux modifications dans la feuille de style. Par exemple, modifiez la back-ground color de la partie <body> et la taille des caractères dans les lignes de titre de type <h1>.
N'oubliez pas d'enregistrer à chaque fois les modifications dans style.css pour qu'elles prennent effet.
Vérifier les effets en visualisant vos pages accueil, ville et passion (utiliser l'icône 'Avion en papier' de Geany).

Des réglages plus fins en créant des divisions¶

On veut régler plus finement l'aspect de la page web. Pour cela on va créer des divisions au moyen de divisions de page. Chaque division portera un identifiant (un nom au choix de celui qui écrit la page html). Et cet identifiant sera utilisé dans la feuille externe style.css

Créez d'abord les divisions "en-tete", "menu", "presentation", "pied" dans votre page accueil.html
Dans votre fichier accueil.html ajoutez les divisions avec la balise <div> et les identifiants "en-tete", "menu", "presentation", "pied". Vous pouvez vous aider de l'exemple ci-dessous.
Prenez comme fichier style.css le code que vous avez copié dans la fenêtre CSS de codepen.

<html lang="fr">
<head>
    <title> Henry LAVAL </title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" media="all" type="text/css">
</head>

<body>
    <!-- Début de l'en-tête -->
    <div id="en-tete">
        <a href="#bas_de_page">info site</a>
        <h1 id="haut"> Henry Laval </h1>
        <h2><a href="mailto:hlaval@avesnieres.fr"> h-laval@avesnieres.fr </a><br> </h2>
    </div>

    <!-- Début du menu -->
    <div id="menu">
        <ul>
            <li> Accueil </li>
            <!-- lien vers la page ville.html -->
            <li> Ma ville/mon village </li>
            <!-- lien vers la page passion.html -->
            <li> Ma passion </li>
        </ul>
    </div>   

    <!-- Début de la présentation -->
    <div id="presentation"> 
        <h3> je me présente... </h3>
        <p> Je m’appelle  …. <br>  J'habite Laval en Mayenne<br></p>
        <p><img src="ma_photo.jpeg" alt="Ma photo"><br></p>
        ...
        <p>.....<br></p>
        <p> Voilà ! </p>
    </div>

    <!-- Début du pied de page -->
    <div id="pied">
        <center>
            <figure><a href="...">
                <img src="..." alt="Logo du lycée">
                <figcaption> ... </figcaption>
            </a></figure>
        </center>
        <h5 id="bas_de_page">Site créé en 2020<br>
        En cours de NSI<br>
        Première</h5>
        <a href="#haut">Retour</a>
    </div>
</body>
</html>

Dans les fichiers passion.html et ville.html ajoutez de même les divisions avec la balise <div> et les identifiants "en-tete", "menu", "presentation", "pied". Vous pouvez vous aider de l'exemple ci-dessous.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title> Passion </title>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet" media="all" type="text/css">
</head>

<body>
    <!-- Début de l'en-tête -->
    <div id="en-tete">
        <a href="#bas_de_page">info site</a>
        <h1 id="haut"> Henry Laval </h1>
        <h2><a href="mailto:hlaval@avesnieres.fr"> h-laval@avesnieres.fr </a><br> </h2>
    </div>

    <!-- Début du menu -->
    <div id="menu">
        <ul>
            <li> Accueil </li>
            <!-- lien vers la page ville.html -->
            <li> Ma ville/mon village </li>
            <!-- lien vers la page passion.html -->
            <li> Ma passion </li>
        </ul>
    </div>   

    <!-- Début de la présentation -->
    <div id="presentation"> 
        <h1> Ma passion est ... </h1>
        <h2> Les techniques </h2>
        <p>...</p>
        <h2> Principales disciplines </h2>
        <p>...</p>
        <h2> Principaux records du monde </h2>
        <p>...</p>
        <h2> Liens </h2>
        <p>...</p>
    </div>

    <!-- Début du pied de page -->
    <div id="pied">
        <center>
            <figure><a href="...">
                <img src="..." alt="Logo du lycée">
                <figcaption> ... </figcaption>
            </a></figure>
        </center>
        <h5 id="bas_de_page">Site créé en 2020<br>
        En cours de NSI<br>
        Première</h5>
        <a href="#haut">Retour</a>
    </div>
</body>
</html>

1.5.4 Commandes CSS ¶

Lisez le paragraphe Commandes CSS du milieu de la p. 70 au milieu de la p. 71

Modifiez les pages html en variant les présentations (centrée, alignée, gras italique, taille des textes différentes, couleurs différentes, ….)

Ajoutez aussi un code habillant une image à choisir (voir page 71) dans vos pages ville.html et/ou passion.html.

37) Recopiez ci-dessous le code utilisé (tout le bloc avec l’image et le texte saisi)

Votre code :

38) Par quel attribut peut-on créer un style de paragraphe avec un nouveau nom (pour ne pas appliquer le même style à tous les paragraphes par exemple) ?

Réponse :

39) Ecrivez une des lignes contenant l’attribut class que vous avez saisie dans votre fichier css.

Vos lignes :

Créez au moins un style de paragraphe comme indiqué page 70 par exemple pour que, lorsque la ligne « je m’appelle » est modifiée les autres paragraphes <p> ne le soient pas.

Voici le code pour pouvoir créer des tableaux si vous pensez que pour certaines parties de vos pages cela peut vous aider.

<table border="1" width="100%">
    <tr>
        <td width="50%">Ligne 1, colonne 1</td>
        <td width="50%">Ligne 1, colonne 2</td>
    </tr>
    <tr>
        <td width="50%">Ligne 2, colonne 1</td>
        <td width="50%">Ligne 2, colonne 2</td>
    </tr>
</table>

Prenez 30 minutes maximum pour modifier une des pages de votre minisite.

1.6 Web et programmation ¶

Lisez le paragraphe Web et programmation du milieu de la p. 71 à la p. 73

40) Citez deux langages qui permettent d’interagir avec le contenu d'une page web.

Réponse :

41) Sur quel langage de programmation s’appuie Javascript ?

Réponse :

42) Un fichier qui contient du code php aura quelle extension ?

Réponse :

43) Pourquoi l’utilisateur ne voit pas le code php quand il visualise la page dans un navigateur ?

Réponse :

44) Où doit-on insérer le code script dans une page html ?

Réponse :

Trois types de boites JavaScript

1. Boite javascript de type "alert" pour afficher un message à l'utilisteur

Insérez le code suivant dans le fichier accueil.html (dans la partie vous avez donné en réponse à la question 44).

<script type="text/javascript">
  function bonjour(){
      alert('Bonjour à vous !');
      }   
</script>

45) Que se passe-t-il ?

Réponse :

Dans la balise <h1>, insérez le code suivant après le nom et le prénom.

<button onclick='bonjour()'>click</button>

La balise </h1> se trouvant juste après

46) Que se passe-t-il ?

Réponse :

47) Que se passe-t-il si on clique dessus ?

Réponse :

2. Boite javascript de type "confirm" pour demander une validation (ou non validation) à un utilisateur
3. Boite javascript de type "prompt" pour demander d'entrer une valeur

48) Que va faire ce script si un clic de l'utilisateur sur un bouton dans la page html active la fonction bonjour() ? (répondez avant de l’insérer dans votre page pour vérifier).

function confirmation()  {
    if (confirm('Bonjour, vous me connaissez ? (OK pour oui, Annuler pour non)')){
        /* Si l'utilisateur clique sur 'OK' */
        return true;
    }else{
        /* Si l'utilisateur clique sur 'Annuler' */
    return false;
    }
}

function bonjour()  {
    if (confirmation() == true)  {
        /* Si la fonction confirmation a renvoyé true */
        noma = prompt("Quel est votre prénom ?", "");
        alert("Bonjour " + noma + " !");
    }else{
        /* Si la fonction confirmation a renvoyé false */        
        alert("Bonjour inconnu (e) !");
    }
}

Réponse :

Insérez le code précédent à la bonne place et vérifez la réponse précédente.

2. Interactions sur le Web ¶

Lisez l'introduction p. 219

49) Quel est le nom du premier réseau à transfert de paquets mis au point par une agence du département de la défense américain (opérationnel en 1969 mais dont la première démonstration officielle a eu lieu en 1972) ?

Réponse :

50) En quelle année est né Internet ?

Réponse :

Ne pas confondre :
Internet est le réseau informatique mondial accessible au public
Le World Wide Web (litt. la « toile (d’araignée) mondiale », abrégé www ou le Web) est un système hypertexte public fonctionnant sur Internet. Le Web est une application d’Internet distincte d’autres applications comme le courrier électronique, la messagerie instantanée et le partage de fichiers en pair à pair...

2.1 Repères ¶

Lisez le paragraphe Repères p. 221

51) En quoi le langage PHP est-il intéressant ?

Réponse :

Ce langage sera (un peu) manipulé plus tard dans le TP.

2.2 Hypertexte ¶

Lisez le paragraphe Hypertexte du bas de la p. 221 au milieu de la p. 222

52) Que permet un document hypertexte ?

Réponse :

53) Que Signifie URL ?

Réponse :

54) Que permet une URL ?

Réponse :

55) Quel peut être un des inconvénients d’une hyperlien ?

Réponse :

56) Que signifie http dans une URL ?

Réponse :

Pour les questions 57 à 59 on considère l’URL : http://www.astrovirtuel.fr/nsi/premiere/premiere2019-2020/premiere2019-2020.htm

57) A quoi correspond /nsi/premiere/premiere2019-2020/ ?

Réponse :

58) A quoi correspond www.astrovirtuel.fr ?

Réponse :

59) A quoi correspond .fr?

Réponse :

- Trois possibilités de liens hypertextes, relatifs à la page "trois_possibilites.html"¶

Voici l'exemple de liens écrits dans le fichier trois_possibilites.html situé dans le dossier nsi d'un serveur distant.

nsi contient une arborescence dans laquelle on trouve deux dossiers (directories) et quatre fichiers (files).

Le dossier premiere contient :
- un dossier fils premiere2019_2020
- deux fichiers dans_meme_dossier.html et trois_possibilites.html

Le dossier premiere2019_2020 contient :
- un fichier dans_dossier_fils.html

Le dossier nsi est le dossier parent du dossier premiere et il contient :
- un fichier remonte_dans_parent.html

A la fin du paragraphe, vous allez cliquer sur le lien qui s'y trouve. Votre navigateur demandera alors au serveur distant de lui envoyer la page trois_possibilites.html
Dans la page trois_possibilites.html (qui va devenir la page "actuelle" quand votre navigateur va l'afficher) il y a :
1. Un lien vers le fichier dans_meme_dossier.html situé au même niveau que le fichier trois_possibilites.html dans l'arborescence.
2. Un lien vers le fichier dans_dossier_fils.html situé au niveau immédiatement inférieur dans l'arborescence.
3. Un lien vers le fichier remonte_dans_parents.html situé au niveau immédiatement supérieur.
  - Vous affichez par un clic droit le code source de la page.
  - Observez les différences entre ces trois liens.
  - Vous pouvez aussi observer ce qui apparait dans la barre d'adresses du navigateur.
  - Lien : http://www.astrovirtuel.fr/nsi/premiere/trois_possibilites.html

60) Dans un lien hypertexte, que permettent les « .. » comme dans ../images.index.html ?

Réponse :

61) Existe-t-il d'autres types de documents, en dehors des fichiers html, où on peut trouver des liens hypertextes permettant de se déplacer à l’intérieur du document courant ou vers un autre document ?

Réponse :

62) Remettez dans l’ordre les étapes suivantes :

a) Ce protocole identifie la machine émettrice et la machine réceptrice (grâce aux adresses MAC)
b) Il s'agit d'une requête HTTP envoyée au serveur
c) Le protocole DNS permet d’obtenir l’adresse IP
d) Je clique sur un lien
e) Le serveur envoie le code contenu dans le fichier HTML
f) L’adresse se met dans la barre d’adresse
g) Les paquets envoyés sont gérés par le protocole TCP
h) Le navigateur envoie sa requête à l’adresse IP obtenue
i) A l’arrivée, les paquets sont assemblés
j) Les paquets circulent à l’aide du protocole IP et du protocole Ethernet
k) La page est reconstituée et interprétée par le navigateur.

Réponse :

1 - ...
2 - ...
3 - ...
4 - ...
5 - ...
6 - ...
7 - ...
8 - ...
9 - ...
10 - ...
11 - ...

2.3 Interactions avec HTML et JavaScript ¶

Lisez le paragraphe Interactions avec HTML et JavaScript en bas de la p. 222

Cette partie a déjà été abordée plus haut dans cette séquence. Nous allons préciser certaines choses.

2.3.1 JavaScript ¶

Lisez le paragraphe Javascript du bas de la p. 222 au milieu de la p. 225

63) Que faut-il si l’on veut écrire le code javascript dans le fichier script.js externe au fichier HTML ?

Réponse :

64) Que permet javascript ?

Réponse :

Copiez votre fichier accueil.html en accueil2.html
En utilisant l'éditeur de programmes Geany, copiez le code suivant dans le fichier script.js

function rebours(x){
    while (x>=0){
        alert(x);
        x--
    }
}

Sauvegardez script.js dans le même dossier que le fichier accueil2.html
En utilisant Geany, supprimez les fonctions javascript qui se trouvent dans l’entête dans le fichier accueil2.html.
Ecrivez à la place une balise

<script langage="JavaScript" src="....."> </script>

Enregistrez le fichier accueil2.html

65) Copiez la ligne finale modifiée dans la cellule ci-dessous :

Réponse :

Insérez dans votre page accueil2.html juste après <body> le code :

<script> rebours(5)</script><br>

Exécutez (en cliquent sur l'icône "Avion en Papier") la page accueil2.html et observez.

66) Que remarquez-vous ?

Réponse :

2.3.2 Evénements ¶

Lisez le paragraphe Evénements du milieu de la p. 225 au milieu de la p. 226

67) Qu’est-ce qu’un événement ?

Réponse :

Dans le fichier accueil2.html supprimez le code :
```
<script> rebours(5) </script>
```

Remplacez <body> par :
```
<body onLoad="rebours(5)">
```

Enregistrez le fichier accueil2.html et exécutez-le.

68) Quelle est la différence entre :

Ecrire `rebours(5)` après la balise <body>, entre <script> et </script>
Ecrire `rebours(5)` dans la balise <body> avec `onLoad="..."` ?

Réponse :

2.3.3 Gestion d'un événement ¶

Lisez le paragraphe Gestion d'un événement du milieu de la p. 226 au haut de la p. 230

Ajoutez les lignes suivantes dans votre fichier script.js, après la fonction rebours(x) :
```
function message(cause){
    alert(cause);
    }
```

Modifiez les deux lignes de votre fichier accueil2.html par :
```
<h1 onClick=message('mon\x20nom')> Henry Laval </h1>      
<h2 onMouseover=message('mon\x20e-mail')> h-laval@monmel.fr </h2>
```
- Remarquez que le caractère espace est remplacé par \x20.
  Il s'agit du code hexadécimal ASCII du caractère espace, précédé du symbole d'échappement \ (un antislash).
  Le symbole d'échappement est nécessaire. Si on l'oublie, on verra s'écrire x20 au lieu d'un espace.
  Le remplacement de l'espace (obtenu d'habitude par la grande touche en bas du clavier) par \x20 permet le fonctionnement correct de la boite alert dans JavaScript.

Testez ces deux nouvelles lignes de code en cliquant sur Henry Laval puis en passant le curseur de la souris sur h-laval@monmel.fr

Le problème avec le code

<h2 onMouseover=message('mon\x20e-mel')> h-laval@monmel.fr </h2>

c'est que toute la ligne contenant h-laval@monmel.fr est sensible au passage du pointeur dessus.

Si on veut limiter la zone sensible uniquement à la chaîne de caractères h-laval@monmel.fr, on utilise une balise <span>...</span> qui permet de délimiter très précisément la zone où l'événement Mouseover peut être déclenché.
Donc on utilisera plutôt le code suivant :
```
<h1 onClick=message('mon\x20nom')>Henry Laval</h1>;       
<h2> <span onMouseover=message('mon\x20e-mail')> h-laval@monmel.fr </span> </h2>
```

Mettez votre adresse mel et vos nom et prénom à la place de h-laval@monmel.fr et Henry Laval.
Testez à nouveau les évènements onClick et onMouseover sur la page accueil2.html.

69) Que se passe-t-il ?

Réponse :

Quelques lignes qui permettent de changer une photo en passant dessus, sans utiliser de script extérieur à la balise <img>¶

Il vous faut pour cela deux photos (de préférence de même taille).
Voici un lien où vous pouvez télécharger deux photos de même taille :

https://picsum.photos/images

(une fois sur ce site, faites un clic droit sur une photo et choisissez "Enregistrer l'image sous..." Recommencez avec une autre photo).
Enregistrez les photos dans votre dossier minisite en les nommant ma_photo1.jpeg et ma_photo2.jpeg
Dans accueil.html, ajoutez cette ligne de code à la fin de votre division "presentation", juste avant la balise de fin de division </div>
```
<img title="Photo" src="ma_photo1.jpeg" onMouseover="this.src='ma_photo2.jpeg'" onMouseout="this.src='ma_photo1.jpeg'" />
```
Exécutez le fichier accueil.html et passez le pointeur de la souris sur la nouvelle photo.

70) Que se passe-t-il ?

Réponse :

Agrémentez votre minisite de fonctions vues précédemment (ou d’autres) - maximum 30 minutes -
Pour une question de cohérence, écrivez toutes vos fonctions Javascript dans le fichier script.js et modifiez éventuellement le contenu de la partie <head> de votre page d'accueil.

2.3.4 Le modèle de document HTML "DOM" ¶

Lisez le paragraphe JavaScript avec HTML DOM du haut de la p. 230 au milieu de la p. 234

71) Que signifie DOM ?

Réponse :

Quand un document html est chargé dans un navigateur web (par exemple, Chromium) il devient un objet document qui possède des propriétés et des méthodes.
Cet objet document contient lui-même des objets éléments qui représentent les éléments html comme par exemple HTML, BODY, P, DIV, A, TABLE, H1 présents dans le document.
Voici le contenu du fichier dom.html donné en haut de la page 232.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
    <title>DOM</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.29" />
    <script language="JavaScript">
    function rechercheH1(){
        var trouve;
        trouve = document.all("titre1");
        if (trouve == titre1){
        alert("Element h1 trouvé");
        }
    }

    function trouveTout(){
        for (i=0; i<document.all.length; i++){
        alert("Element trouvé : " + document.all(i).tagName);
        }
    }
        </script>
</head>

<body onLoad="rechercheH1()">
    <h1 id="titre1">Bienvenue</h1>
    <p> Cliquer sur le bouton pour voir les éléments</p>
    <button onClick="trouveTout()">Cliquer ici</button>
</body>

</html>

Dans Geany, ouvrez un nouveau fichier.
Enregistrez ce fichier (vide pour le moment) dans votre dossier minisite sous le nom dom.html
Copiez - collez le contenu donné ci-dessus dans votre fichier dom.html
Cliquez sur l'icône 'Exécuter' (en forme d'avion en papier)

Que se passe-t-il à l'ouverture du document ?

Comme vous pouvez le voir dans le code, on a placé à l'intérieur de la balise <body> le gestionnaire d'événement onLoad.
Celui-ci est donc activé dès le chargement de la page dans le navigateur en prenant la valeur rechercheH1().
rechercheH1() est une fonction javascript qui a été écrite pour ouvrir une boite d'alerte si l'identifiant "titre1" est trouvé dans l'un des éléments du document.
Comme on a placé à l'intérieur de la balise <h1> l'attribut id="titre1" alors une boite d'alerte avec le message "Elément h1 trouvé" est effectivement affichée.
Enfin, on a écrit une balise <button> avec à l'intérieur le gestionnaire d'événement onClick. Donc un bouton apparait sur la page et si on clique dessus, alors onlick prend la valeur trouveTout().
La fonction trouveTout() contient une boucle for qui affiche une boite d'alerte pour chaque élément du document. Est ainsi affiché successivement le tagName (en anglais, balise se dit tag) de tous les éléments présents dans ce document.

72) Donnez un exemple de ce que permet de faire le Document Object Model.

Réponse :

Dans un navigateur comme Firefox ou Chromium, on peut « voir le découpage » en utilisant la touche F12 ou en faisant un clic droit sur le page web affichée et allant dans "inspector".
Affichez la page dom.html dans le navigateur et par un clic droit, choisissez "Inspecter".
Dans la fenêtre qui s'ouvre à droite, observez les différents éléments du DOM. Pensez à cliquer sur le petites triangles noirs pour développer les branches et découvrir ainsi l'arborescence des éléments.
Faites survoler le pointeur de la souris sur les différents éléments du DOM affichés dans la fenêtre de droite et regardez à quoi ils correspondent sur la page web affichée à gauche.

En résumé : Le Document Object Model est utilisé pour accéder aux objets dans les pages web avec par exemple JavaScript¶

3. Requêtes HTTP ¶

Lisez le paragraphe Requêtes HTTP vers le bas de la p. 234

73) Que se passe-t-il entre un client qui est par exemple un ordinateur personnel et un serveur qui est un gros ordinateur (dans le sens client vers serveur) ?

Réponse :

74) Avec quel protocole se fait la communication entre le client et le serveur ?

Réponse :

3.1 Le principe du client et du serveur ¶

Lisez le paragraphe Le principe du client et du serveur du bas de la p. 234 au haut de la p. 237

Sur votre Raspberry, ouvrez l'éditeur Python Spyder (il se trouve dans le menu Programmation). Comptez environ 10 secondes avant que Spyder commence à apparaitre sur l'écran et deux à trois minutes pour le chargement complet de Spyder. Il faut que l'image de l'araignée disparaisse et que la connexion au noyau se fasse...
Enregistrez le fichier vierge qui s'ouvre au départ dans le dossier Documents/spyder_raspberry en lui donnant le nom de serveur1.py
Copiez-collez dedans le code ci-dessous dans le fichier serveur1.py (fenêtre de gauche).
Cliquez sur le bouton Exécuter (la flèche verte) en haut dans Spyder.
Pour le moment, rien ne se passe dans la console de Spyder. C'est normal. Le serveur est à l'écoute des connexions entrantes venant des postes clients. Le serveur est "hote" des ressources qui sont des fichiers que peuvent lui demander des postes clients.

"""
Programme server1.py en Python sur le serveur

"""
from socket import socket, AF_INET, SOCK_STREAM
s=socket(AF_INET, SOCK_STREAM)
s.bind(("", 13450))  #  Le serveur est à l’écoute sur le port 13450.
s.listen(5)
test = True
while test :
    connexion, adresse = s.accept()
    print("connexion de : ", adresse)
    req = connexion.recv(1024).decode()
    if req!= "":
        print("La requête reçue : ", req)
        connexion.send(b"Donnees bien recues !")
        if req == "Fin" :
            test = False
connexion.close()
s.close()

Assurez-vous que le programme est en cours d'exécution sur le serveur hote (qui est la machine sur laquelle Spyder a été ouvert).
Vous devez voir quelquechose comme :
runfile('/home/jdubois/Documents/spyder_raspberry/serveur1.py', wdir='/home/jdubois/Documents/spyder_raspberry')
en bas de la console de Spyder.
Copiez le code ci-dessous dans la cellule située encore en-dessous dans ce jupyter notebook actuel (qui représente le client) et exécutez-le. Pour voir ce qui se passe, mettez en parallèle sur votre écran les fenêtres du jupyter notebook et de Spyder.

"""
Programme en Python sur le client

"""
from socket import socket,AF_INET,SOCK_STREAM
hote = "localhost"  # ou par exemple hote = "192.168.1.9" qui est l'adresse du serveur.
port = 13450
#-------
sc = socket(AF_INET, SOCK_STREAM)
sc.connect((hote, port))
print("connexion sur le port", port)
sc.send(b"Bonjour, je suis le client Toto")
print(sc.recv(1024).decode())
sc.close()
#-------
sc = socket(AF_INET, SOCK_STREAM)
sc.connect((hote, port))
print("Connexion sur le port", port)
sc.send(b"Fin")
print(sc.recv(1024).decode())
print("Fin")
sc.close()

Vérifiez ce qui est écrit en pages 235-236 en regardant la console dans Spyder.
Ces deux programmes permettent de "voir" simplement comment se passe l’échange d’informations entre un client et un serveur.

En résumé : Une socket - prise de raccordement en anglais - est une interface logicielle entre un Processus d'application - Spyder ou jupyter notebook dans notre exemple - et les protocoles de communication de l'ordinateur.¶

Lorsqu'on programme en Python, il faut d'abord importer la bibliothèque `socket` en écrivant la ligne de code :

from socket import socket, AF_INET, SOCK_STREAM

3.2 Les requêtes ¶

Lisez le paragraphe Les requêtes de la p. 237 au bas de la p. 242

Déjà abordé dans la séquence sur les machines, les systèmes d’exploitation …

75) Que représente le protocole https ?

Réponse :

76) Une requête contenant une adresse web est envoyée avec le protocole DNS. Que permet-elle d'obtenir ?

Réponse :

77) Quels sont les deux types de sites que l’on peut avoir ?

Réponse :

78) Quelle est la différence entre ces deux sites ?

Réponse :

79) Comment un navigateur peut-il gagner du temps pour afficher une page ?

Réponse :

80) Quel est le type de requête envoyée par le client au serveur ?

Réponse :

Dans Spyder (qui représente le serveur), fermez le fichier serveur1.py et ouvrez un nouveau fichier.
Enregistrez ce nouveau fichier dans Documents/spyder_raspberry en le nommant serveur2.py
Copiez dedans et exécutez le programme ci-dessous :

"""
Programme server2.py en Python sur le serveur

"""

from socket import socket,AF_INET,SOCK_STREAM

reponse = b"""HTTP/1.1 200OK
host : mon site local
Content-Type : text/html \n
<!DOCTYPE html PUBLIC>
<html>
<head>
<title> Ma page </title>
</head>
<body>
<h1>Bonjour</h1>
<h2>Le test et concluant !</h2>
</body>
</html>"""

s=socket(AF_INET, SOCK_STREAM)
s.bind(("", 13450))   #  Le serveur est à l’écoute sur le port 13450.

s.listen(5)
while True :
    connexion, adresse = s.accept()
    print("Connexion de : ", adresse)
    req = connexion.recv(1024).decode()
    if req!= "":
        print(req)
        connexion.send(reponse)
    connexion.close()

print("Fin")
s.close()

127.0.0.1

l'hôte local

Ouvrez un nouvel onglet dans le navigateur Chromium du Raspberry et tapez, sans appuyer sur la touche Entrée pour le moment, dans la barre d'adresse du navigateur (qui représente le client) 127.0.0.1:13450 qui est l'adresse IP du localhost suivie du numéro de port 13450 sur lequel l'hôte -ou serveur- écoute les requêtes entrantes.
Affichez en parallèle à la fois le navigateur et Spyder.
Observez la console de Spyder et appuyez sur la touche Entrée pour que le navigateur fasse sa requête au serveur.

81) Regardez dans la console de Spyder. Quel type de requête (GET ou POST) le serveur reçoit-il de la part du client ?

Réponse :

4. Formulaires dans une page Web ¶

4.1 Ma première page avec formulaire ¶

Lisez le paragraphe Formulaires dans une page Web du bas de la p. 242 au bas de la p. 245

82) Qu’est-ce qu’un formulaire « informatique » ?

Réponse :

83) Quelles balises utilise-t-on pour insérer un formulaire dans une page HTML ?

Réponse :

84) Quels sont les deux attributs importants de la balise <form> ? Dans votre réponse, vous préciserez ce que font ces deux attributs.

Réponse :

85) A quoi correspond la méthode method=get dans un formulaire ?

Réponse :

86) A quoi correspond la méthode method=post dans un formulaire ?

Réponse :

87) Quelle balise permet l’interactivité ?

Réponse :

88) Quel est l’attribut important de la balise <input> ?

Réponse :

89) Citez des exemple de mots utilisés pour l'attribut type de la balise <input>. Au total, donnez 7 types différents qui sont donnés dans les exemples de code en haut de la p. 244, p. 246 et dans les explications en bas de la p. 243.

Réponse :

90) Pourquoi, si on veut envoyer un mot de passe (ou tout autre donnée sensible), il ne faut pas utiliser <form method="get"> ? (Remarque la seule façon d'envoyer des données sensibles en toute sécurité est d'utiliser le protocole HTTPS)

Réponse :

Le but de ce qui va suivre va être de créer une quatrième page sur votre minisite.
Cette page sera un formulaire.
Le contenu sera défini plus tard.

Nous allons utiliser le serveur php déjà installé à la séquence précédente. Nous utiliserons l’adresse du localhost 127.0.0.1

Fermez tous les onglets inutiles ouverts dans le navigateur Chromium.
Fermez Geany.
Ouvrez le à nouveau.
Créez avec Geany un nouveau fichier et enregistrez le dans Documents/webs/minisite en lui donnant le nom formulaire.html
Copiez-collez le code ci-dessous dans Geany.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contact</title>
</head>

<body>
    <h1>Contact</h1>
    Voici le code d’un formulaire.
    <form name="form1" id="form1" method="get"  action="http://127.0.0.1:13450"> 
        <div> 
            <label for="nom">Nom :</label> 
            <input type="text" name="visit_nom" id="nom" autofocus/> 
        </div> 
        <div> 
            <label for="mail">e-mail :</label> 
            <input type="email" name="visit_mail" id="mail"/> 
        </div> 
        <p><input type="submit" value="envoyer"></p>
    </form>
</body>
</html>

Cliquez sur le bouton "Exécuter" (forme d'avion en papier).
Observez comment sont affichées à l'écran les trois balises <input type="text">, <input type="email">, <input type="submit">. Notamment, remarquez que <input type="submit"> est un bouton de soumission des données du formulaire.
Avec Geany, ouvrez votre page accueil.html. Dans la division "menu", ajoutez une quatrième balise <li> et écrivez y un lien hypertexte vers votre page formulaire.html.
Cliquez sur le bouton "Exécuter" et testez si le lien vers le formulaire fonctionne.

Ouvrez Spyder. Si des onglets sont ouverts, fermez-les. Ouvrez le fichier serveur1.py>
Exécutez-le (flèche verte dans Spyder)
Mettez en parallèle les fenêtres du formulaire et de Spyder.
Renseignez les champs Nom avec votre nom et e-mail avec votre adresse email.
Regardez la console de Spyder et appuyez sur le bouton 'envoyer'
Observez la ligne de la requête GET...

91) Quelles données envoyées par le client voyez-vous ?

Réponse :

92) Recopiez ci-dessous la ligne de la requête GET qui est arrivée sur le serveur (c'est à dire dans la console de Spyder) :

Réponse :

Ensuite, il faut configurer le site pour que ces données puissent être utilisées.

Nous allons voir dans les deux rubriques suivantes comment les récupérer avec un script JavaScript ou un fichier php.

4.2 Formulaire avec JavaScript ¶

Lisez le paragraphe Formulaire avec JavaScript du bas de la p. 245 au bas de la p. 246

93) Qu’y a-t-il de plus avec un formulaire en JavaScript ?

Réponse :

Voici le code de la page 246 avec une petite modification au niveau de la fonction envoi. Remplacez le code du fichier formulaire.html par celui-ci :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Formulaire avec javascript</title>
    <script langage="JavaScript">

    function envoi(){
      if(confirm("confirmation de l'envoi ?")){
      alert("bien envoyé "+formulaire.nom.value);
      return true;
      }
      else{
      return false;
      }
    }

    function validation(){
      if (formulaire.nom.value == ""){
        alert("champ obligatoire");
        formulaire.nom.focus();
        return false;
      }
    }

    function nouveau(){
      formulaire.nom.focus();
    }
    </script>
</head>

<body>
    <h1>Contact</h1>
    <form name="formulaire" method="post" action="http://127.0.0.1:13450" onSubmit="return envoi()">
        <p>Un formulaire avec Javascript</p>
        <p>
        <label for="nom">Nom</Label>
        <input type="text" name="visit_nom" id="nom" autofocus/>
        <input type="submit" value="Envoyer" onClick="return validation()">
        <input type="reset" value="Annuler" onClick="return nouveau()">
        </p>
    </form>
</body>
</html>

94) Que se passe-t-il quand vous exécuter ce formulaire ? (Deux "réactions" possibles)

Réponse 1 :

Réponse 2 :

Remarquez dans la console de Spyder que le serveur a reçu une requête POST (et non plus GET) quand l'utilisateur du poste client renseigne son nom, puis clique sur "Envoi" , puis confirme, puis clique sur OK.¶

4.3 Formulaire avec PHP ¶

Prérequis : un serveur http et un serveur php doivent avoir été installés sur l'ordinateur local. Voir la procédure pour un Raspberry.

Lisez le paragraphe Formulaire avec PHP du bas de la p. 246 à la p. 249

95) Comment reconnaît-on le code php ?

Réponse :

Créez une page formulaire_page_reponse.html (à enregistrer sur le bureau) et copiez le code suivant :

 <!DOCTYPE html>
<html>
    <head>
        <title>  Formulaire </title>
        <meta charset="utf-8">  
    </head>

    <body>
        <p> Petit formulaire pour vous visiteur de cette page </p>
        <form method="get"  action="page_rep1.php"> 

            <p> 
        <label for="nom">Nom</label> 
          <input type="text" name="utilisateur" id="nom" autofocus/> 
            </p> 
            <p> 
        <label for="mail">e-mail</label> 
          <input type="email" name="adresse" id="mail"/> 
            </p> 
            <p> 
        <label for="passe">Mot de passe</label> 
          <input type="password" name="mdp" id="passe" required/> 
            </p> 

            <input type="submit" value="Envoyer"/>

        </form>
    </body>
</html>

Créer une page page_rep1.php (à enregistrer sur le bureau) et copier le code suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>  Formulaire </title>
        <meta charset="utf-8">    
    </head>


</head>

<body>
<div>
<?php $ip=$_SERVER['REMOTE_ADDR'];
echo 'Votre adresse IP : '.$ip; ?>

<!-- En php, une variable est précédée du caractère $ -->
<h2>Réponses du serveur</h2>

<?php if (isset($_GET['utilisateur']) AND isset($_GET['adresse']) AND isset($_GET['mdp'])) 
    {
        $rep1=$_GET['utilisateur']; $rep2=$_GET['adresse']; $rep3=$_GET['mdp']; ?>

<p><?php echo $rep1.'votre email est '.$rep2;?> </p>
<p><?php echo 'et votre mot de passe est '.$rep3;?></p>

<?php }

else {echo 'il y a un problème !';?>
            <script langage= "JavaScript">
                  alert("il y a un problème ? ");
            </script>

<?php }?>

</div>
</body>
</html>

Ouvrez le fichier formulaire_page_reponse.html en double cliquant dessus

96) Que se passe-t-il quand le formulaire est validé ?

Réponse :

En fait votre serveur ne « voit pas » ce fichier, dans le sens qu’il ne sait pas qu’il doit interpreter le code php.
Copiez les deux fichiers dans le dossier /var/www/html/minisite et double cliquer sur le fichier formulaire_page_reponse.html

97) Que se passe-t-il maintenant ?

Réponse :

Le chemin d'accès au fichier ne prend pas en compte le serveur.

Saisissez dans la barre d'adresse du navigateur

localhost/minisite/formulaire_page_reponse.html

98) Que se passe-t-il maintenant ?

Réponse :

Terminer le minisite (accueil, ma passion, ma ville, formulaire(s))

Chapitre 8. Le web¶

Table des matières¶

Chapitre 8. Le web¶

1. Le langage HTML ¶

1.1 Création d'une page ¶

Attention : Pour que vos balises apparaissent dans votre réponse, il faudra passer deux lignes et faire une tabulation (touche Tabulation à gauche du clavier)

1.2 Création d'autres pages ¶

1.3 Les images ¶

1.4 Balises HTML ¶

1.5 Le langage CSS ¶

1.5.1 Attribut dans une balise ¶

1.5.2 Règle CSS dans l'en-tête ¶

En résumé : Les règles écrites dans la feuille de style CSS se propagent 'en cascade' :¶

1.5.3 Fichier de style ¶

Des réglages plus fins en créant des divisions¶

1.5.4 Commandes CSS ¶

1.6 Web et programmation ¶

Trois types de boites JavaScript

2. Interactions sur le Web ¶

2.1 Repères ¶

2.2 Hypertexte ¶

- Trois possibilités de liens hypertextes, relatifs à la page "trois_possibilites.html"¶

2.3 Interactions avec HTML et JavaScript ¶

2.3.1 JavaScript ¶

2.3.2 Evénements ¶

2.3.3 Gestion d'un événement ¶

Quelques lignes qui permettent de changer une photo en passant dessus, sans utiliser de script extérieur à la balise <img>¶

2.3.4 Le modèle de document HTML "DOM" ¶

Que se passe-t-il à l'ouverture du document ?

En résumé : Le Document Object Model est utilisé pour accéder aux objets dans les pages web avec par exemple JavaScript¶

3. Requêtes HTTP ¶

3.1 Le principe du client et du serveur ¶

En résumé : Une socket - prise de raccordement en anglais - est une interface logicielle entre un Processus d'application - Spyder ou jupyter notebook dans notre exemple - et les protocoles de communication de l'ordinateur.¶

Lorsqu'on programme en Python, il faut d'abord importer la bibliothèque socket en écrivant la ligne de code :

3.2 Les requêtes ¶

4. Formulaires dans une page Web ¶

4.1 Ma première page avec formulaire ¶

4.2 Formulaire avec JavaScript ¶

Remarquez dans la console de Spyder que le serveur a reçu une requête POST (et non plus GET) quand l'utilisateur du poste client renseigne son nom, puis clique sur "Envoi" , puis confirme, puis clique sur OK.¶

4.3 Formulaire avec PHP ¶

Lorsqu'on programme en Python, il faut d'abord importer la bibliothèque `socket` en écrivant la ligne de code :