NUMERIQUE ET SCIENCES INFORMATIQUES

Niveau : 1ère générale, enseignement de spécialité NSI

D
É
C
O
N
N
E
C
T
É

Sommaire

Notion de client et de serveur

Complexité d'un algMéthode GET

Requêtes html vers un moteur de recherche

Installation d'un serveur sur votre ordinateur

Coté serveur : traitement du formulaire en php

Exercices

Méthode POST

Projet Escape Game

Chapitre 5 : Les formulaires sur le Web

1 - Notion de client et de serveur

Vidéo d'introduction :

Source : https://youtu.be/msB9AvJ4bTM

Lors de la navigation sur Internet, notre ordinateur personnel tient très souvent le rôle du client qui demande des ressources à un serveur (images, vidéos, programme, informations ...).

serveur

Photo d'un serveur rackable

Lorsqu'on veut faire une recherche sur un moteur de recherche internet, on tape l'adresse du moteur dans la barre de navigation ex: https://www.qwant.com.

Qwant

On entre des mots clés dans un champ, puis en général on valide en cliquant sur un bouton, une icône ou la touche Entrée du clavier.

Ci-dessus, quand le client clique sur la loupe, il envoie au serveur l'adresse suivante : https://www.qwant.com/?q=nsi lavoisier&t=web :

Le serveur va interpréter le code envoyé par le client comme étant une requête (querry en anglais) recherchant les mots clés : nsi lavoisier sur le web, puis va générer le code html où figurent les résultats. Ces résultats sont stockés dans une base de données uniquement accessible par le serveur.

Lorsqu'on se trouve chez soit derrière une box, le client interroge le serveur DNS (la box) et renvoie l'adresse ip du site Internet. Soit cette adresse se trouve dans le réseau local, soit elle se trouve ailleurs. Le serveur DNS voit qu'il s'agit d'une adresse externe et devient le client et va questionner un ou plusieurs serveurs de votre fournisseur d'accès (ISP : Internet Service Provider) qui vont interroger un serveur qui gère les adresses terminant par .com, .fr, .org ... . Ce dernier va interroger autre serveur répertoriant tous les noms de domaine (qwant, google, free ...) et puis un autre qui va nous renvoyer l'adresse ip de l'hébergeur du site. On dénombre environ 50 serveurs "TOP Level" dans le monde.

Ouvrir la commande cmd et tapez la commande tracert phassenforder.free.fr

tracert

Route empruntée pour atteindre le serveur hébergeant le site internet :

Schéma route

Serveurs

Photo d'une ferme de données (ou Data center)

2- Méthode GET :

2.1 - Requêtes html vers un moteur de recherche

Le lien https://www.qwant.com/?q=nsi lavoisier&t=web, est obtenu avec la méthode GET.

Avec un formulaire nous allons ajouter dans une page html un formulaire de recherche sur qwant. Copiez coller ce code dans une page recherche.html

<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Recherche Qwant</title> </head> <body> <form action="https://qwant.com" method="get"> <label>Rechercher sur Qwant</label> : <input type="text" name="q" /> <input type="submit" value="Envoyer" /> </form> </body> </html>

formulaire

Les données du formulaire seront encodées dans une URL. Celle-ci est composée du nom de la page ou du script à charger avec les données de formulaire empaquetée dans une chaîne. L'action sur le bouton envoyer, forme la chaine https://qwant.com?q=nsi+lavoisier

Les données sont séparées de l'adresse de la page par ? et entre elles par le code &.

Dans la balise <form> relever l'attribut qui permet de définir l'URL https://qwant.com ?
Dans la balise <form> relever l'attribut qui permet de créer le point d'interrogation ?
Dans la balise <input> relever l'attribut qui permet de créer l'élément q= :
Dans la balise <input> relever l'attribut qui permet de récupérer le contenu du formulaire nsi+lavoisierprovient de la ligne de code :

Modifier le code de votre page en ajouter une autre forme permettant de faire une recherche avec le moteur de recherche ecosia.org et youtube :

Formulaire

La méthode get est limitée à 2000 caractères. Faire la même recherche sur google.fr par exemple ...

Collez votre code ci-dessous :

2.2- Installation d'un serveur sur votre ordinateur

télécharger le logiciel suivant : UwAmp

Décompressez-le dans U:\ sur les ordinateurs du lycée sinon dans C:\ sur vos ordinateurs portables

telecharge

S'assurer que le répertoire UwAmp se trouve bien à la racine lecteure réseau U: et que le fichier UwAmp.exe soit placé dans le répertoire U:\UwAmp

dossiers uwamp

Exécuter UwAmp.exe et autorisez à communiquer sur les réseaux privés si la fenêtre apparait

Si tout va bien vous devriez voir cette fenêtre :

Uwamp

Choisir la version php-7.0.3, changer la configuration du serveur apache pour accélérer les accès au serveur comme suit :

Cliquez sur l'icône de configuration d'Apache

phpMyAdmin

Ajoutez les lignes suivantes :

AcceptFilter http none
AcceptFilter https none
EnableSendfile off
EnableMMAP off

puis enregistrez

phpMyAdmin

Cliquez sur le bouton "Navigateur www" pour vérifier le fonctionnement de votre serveur Apache

serveur

2.3 - Coté serveur : traitement du formulaire en php

Le serveur est maintenant opérationnel, on peut s'ocupper du code php côté serveur qui va nous permettre d'afficher le résultat des requêtes demandées.

Dans le répertoire u:\UwAmp\www

www

créer un dossier serveur

seveur

Exemple simple : afficher l'heure

<?php date_default_timezone_set("Europe/Paris"); $heure = date("H:i:s"); echo '<h1>Bienvenue sur mon site</h1> <p>Il est '.$heure.'</p>'; ?>

Copier coller ce code dans le Bloc-note (changer le type de fichier *.*) ou dans Notepad++ ou Sublime Text au choix.

np++

Eenregistrez ce code dans le dossier ci-dessous que vous nommerez serveur.php

REMARQUE : Ce fichier serveur.php ne peut pas être ouvert depuis l'explarateur de fichier windows.

serveur

Dans un navigateur coller l'URL suivante : http://localhost/serveur/serveur.php ou <MonAdresseIP>/serveur/serveur.php

serveur php

Vous remarquerez qu'en rafraichissant la page, l'heure évolue, nous pouvons donc dire qu'il s'agit d'une page web , contrairement aux pages html qui sont .

Quelle instruction en langage php permet de générer le code html de la page à afficher ?

Les variables doivent être précédées du signe

Remarques :

En examinant le code de la page, (clic droit de la souris - Code source de la page), côté client ne voit que le code html généré par le seveur depuis le fichier php.
Le code php permet de récupérer les données, inscrites dans les formulaires, envoyées par la méthode get

2.4 - Exercices :

Créer 1 fichier html contenant le formulaire et un fichier php qui récupère les données inscrites dans le formulaire

fichier index.html

<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Mon serveur</title> </head> <body> <form action="serveur.php" method="get"> <label>Entre ton prénom</label> : <input type="text" name="prenom" /> <input type="submit" value="Envoyer" /> </form> </body> </html>

fichier serveur.php

<?php $var_prenom=$_GET['prenom']; echo '<p>Bonjour '.$var_prenom.' comment vas tu ? </p>'; ?>

Testez :

pre

resultat

Ajouter un champ permettant de saisir votre nom et modifier le code php pour afficher votre identifiant formé de la première lettre du prénom suivi du nom

Résultats :

Coller ci-dessous votre code index.html

Coller ci-dessous votre code serveur.php

Ajouter un champ mot de passe dans le formulaire en indiquant le type="password" à la place du type texte

mdp

mdp2

L'inconvenant de la méthode GET c'est que les paramètres transmis se voient en clair dans l'URL. Cette méthode ne permet pas de transmettre le mot de passe au serveur de manière sécurisée.

3 - Méthode POST

Pour y remédier il faut utiliser la méthode POST.

Remplacer les GET par des POST et vérifier que les paramètres ont disparu de l'URL.

post

Modifier le code php afin d'indiquer la validité d'un mot de passe déterminé dans le code php.

Utiliser les structures if et else :

Résulats :

mdp

Coller ci-dessous votre code index.html

Coller ci-dessous votre code serveur.php

Créer un fichier index.php qui rassemble le code des deux fichiers index.html et serveur.php.

dans la balise form, changer l'attribut action pour appeler le fichier index.php

Si $_POST n'est pas vide alors on affiche les messages concernant la validité du mot de passe

si $_POST['nom'] est vide ou $_POST['prenom'] est vide ou $_POST['mdp'] est vide alors on affiche "veuillez remplir tous les champs" on peut replacer les valeurs saisies dans les balises input

Enfin si le mot de passe est valide, effectuer une redirection vers votre site internet byetHost : header('Location: http://www.votresite.com/pageprotegee.php');

Coller ci-dessous votre code index.php

Le code php ne pouvant être accessible aux clients, ceux-ci ne peuvent pas récupérer le mot de passe, contrairement au code javascript.

Pour augmenter la sécurité on peut transmettre le mot de passe après l'avoir crypté. Il existe plusieurs méthodes de cryptages dont les plus courantes sont MD5 et SHA1 et comparer l'identifiant et son mot de passe crypté enregistré dans une base de données. Mais tout cela sera approfondi en classe de terminale.

4 - Projet Escape Game

Le projet consiste à réaliser un "Escape Game" codé en html, css et php et de mettre en œuvre les méthodes GET ou POST pour répondre aux énigmes

La première page du jeu est visible en cliquant sur ce lien

Contenu du fichier index.php

<?php session_start(); // empèche de sortir du manoir une fois entré if (isset ($_SESSION['level']) and ($_SESSION['level'])>1 and !isset($_GET['carte'])){ echo "<script>document.location.href='page".$_SESSION['level'].".php';</script>"; } /* Le variable $_SESSION permet de mémoriser des données lors des changement de pages. Elle est formée d'une clé et une valeur, c'est un dictionnaire. C'est une variable globale en quelques sortes. Chaque page doir commencer par session_start() avant tout. */ if (isset($_GET['code1'])){ $code1=$_GET['code1']; if ($code1 =='139'){ $_SESSION['level']=2; //si code a été trouvé la mission du niveau 1 est terminée } } ?> <!DOCTYPE html> <html lang="fr"> <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/jquery.rwdImageMaps.js"></script> <title>Escape Game NSI</title> </head> <body>  <div id="img_fond">  <img src="images1/img1-1.jpg" class="static" alt="Manoir" usemap="#map-1" >  <img src="images1/fenetre.gif" id="fenetre" style="position: absolute; top: 26%; left: 63%; width: 6.5%; height: auto;" alt="fenêtre" usemap="#map-2" > </div> <map name="map-1">  <area class="aire" shape="rect" coords="944, 613, 1013, 685" <?php //si le code est valide, le lien change pour entrer dans le manoir en cliquant sur la porte if (isset($_SESSION['level'])){ echo 'href="page2.php"'; } else{ echo 'href = "#"'; } ?> data-reveal-id="myModal00" alt="porte" onclick = "affiche(0);">  <area class="aire" shape="rect" coords="617, 207, 1017, 258" href="#" data-reveal-id="myModal01" alt="cheminees" onclick = "affiche(1);">  <area shape="rect" coords="1433, 853, 1919, 979" href="#" data-reveal-id="myModal02" alt="épave" onclick = "affiche(2);"> </map> <map name="map-2">  <area shape="rect" coords="22, 30, 96, 120" href="#" data-reveal-id="myModal03" alt="épave" onclick = "affiche(3);"> </map>  <div id="myModal00" class="modal myModal" data-reveal>  <span class="close" onclick = "cacher('mcode');fermer(0);">×</span>  <div class="modal-content center"> <p><img src="images1/img1-2.jpg" class="img" width="70%"></p> </div>  <div class="caption"> <p id="mcode" hidden>Ce n'est pas le bon code, essaye encore !</p> <form action="index.php" method="get"> <p class="message"> <label>Entrer le code : </label><input name='code1'> <input type="submit" value="Entrer"> </p> </form> <p>La porte est vérrouillée par un cadenas à chiffres à 3 chiffres !</p> </div> </div>  <div id="myModal01" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(1);">× </span>  <div class="modal-content center"> <p><img src = "images1/img1-3.jpg" class="img" width="100%"></p> </div>  <div class="caption"> <p>Ce sont des cheminées, curieusement elles n'ont pas la même hauteur ...</p>  <p> <button id="btn1" onclick="voir('ind1');cacher('btn1');">Voir l'indice n°1</button> </p> <div id="ind1" hidden> <p>Tu connais certainenment le code binaire : <br><code>- état haut = 1, <br>- état bas = 0.</code></p> <p><button id="btn2" onclick="voir('ind2');cacher('btn2');">Voir l'indice n°2</button></p> </div> <div id="ind2" hidden> <p>Voici la méthode qui permet de convertir un octet binaire en un nombre décimal :</p> <table width="50%"><tr><th>Poids</th><th>128</th><th> 64</th><th> 32</th><th> 16</th><th> 8 </th><th> 4 </th><th> 2 </th><th> 1 </th></tr> <tr><th>binaire</th><td>0</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td></tr> </table> <p>On additionne les poids dont les bits sont à 1 : </p> <p><code>dans cet exemple : 64 + 31 + 1 = 97</code> </div> </div> </div>  <div id="myModal02" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(2);">× </span>  <div class="modal-content center"> <p><img id="epave1" src = "images1/img1-4.jpg" class="img" width="50%"></p> </div>  <div class="caption"> <p>Il n'y a rien d'intéressant dans cette épave !</p> <div id="epave2"> <p>Ormis une carte magnétique abandonnée sur le tableau de bord.</p>  <p><button onclick="window.location.href='index.php?carte=1';">Je la mets dans ma poche</button> <button onclick="alert('dommage elle aurait pu être utile !'); fermer(2)">Je la laisse dans l'épave</button></p> </div> </div> </div>  <div id="myModal03" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(3);">× </span>  <div class="modal-content center"> <p><img src = "images1/fenetre3.gif" class="img" width="30%"></p> </div>  <div class="caption"> <p>Il semblerait que quelqu'un ou quelque chose te fasse signe.</p> </div> </div>  <div id="myModal04" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(4);">× </span>  <div class="modal-content center"> <p><img src = "images1/femme.jpg" class="img" width="50%"></p> </div>  <div class="caption"> <p>Salut à toi pauvre fou qui est venu jusqu'ici.</p> <p>En 2051 un virus a contaminé la planète entière, <br>tu es notre dernier espoir pour retrouver l'antidote <br>cachée dans ce manoir.</p> <p>Au moment où tu y entreras, tu n'auras qu'une heure <br>pour effectuer ta mission, sinon tu resteras enfermé <br>à tout jamais.</p> <p>Alors ne perd pas de temps !</p> <p><button onclick="fermer(4);">Commencer</button></p> <p style="font-size:12px;">Crédit photo : <a href="https://fallout.fandom.com/wiki/Riverside_Manor#Gallery" target="blank">Fallout wiki</a></p> </div> </div>  <div id="myModal05" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(5);">× </span>  <div class="modal-content center"> <p><img src = "images1/femme.jpg" class="img" width="50%"></p> </div>  <div class="caption"> <p>Bien joué ! tu as ouvert le cadena.</p> <p>Tu peux désormais entrer dans le manoir. <p>As-tu noté et pris tous les indices ? car lorsque <br>tu seras entré(e) la porte se refermera derière toi ! <p>Ne perd pas de temps tu ne disposes que d'une heure <br>pour trouver l'antidote !</p> <p><button onclick="fermer(5)">Commencer</button></p> </div> </div> <script src="js/index.js"></script> </body> <?php // Affiche l'introduction uniquement au premier affichage de la page. if (!isset($_SESSION['level']) and !isset($_SESSION['start'])){ echo "<script>affiche(4);</script>"; $_SESSION['start']=true; } //vérifie le code entré if (isset($_GET['code1'])){ $code1=$_GET['code1']; if ($code1 =='139'){ echo "<script>fermer(0);affiche(5);</script>"; } else { echo "<script>affiche(0);voir('mcode');</script>"; } } if (isset($_GET['carte']) and ($_GET['carte'])==1){ echo $_GET['carte']; $_SESSION['mcard']=true; // cacher l'image de la carte, le texte et son formulaire echo "<script>cacher('epave1');cacher('epave2');</script>"; } ?> </html>

Contenu du fichier style.css

/* Feuille de style de l'escape game */ body{ background-color:black; margin: 0; color:white; } table{ margin-left: auto; margin-right: auto; } th{ background-color: lightgray; border-style: solid; border-color: lightgray; color: black; } td{ text-align: center; color: white; background-color: darkgoldenrod; width: 10%; } a { color: aquamarine; } #img_fond { /* The box that will responsively resize */ position: relative; } #img_fond img { display: block; } #img_fond .static { /* The static image helps responsively resizing the bounding box correctly */ width: 100%; height: auto; } .message{ text-align:center; color:white; } .fleche_pre{ position: fixed; top: 5px; left: 15px; width: 5%; } .cr{ background-color: #202020; opacity:0.75; font-family: monospace; font-weight: bold; font-size: x-large; padding: 10px; color: white; position: absolute; top: 0px; right: 0px; border-radius: 0px 0px 10px 10px; } #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ .caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal-content, .caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .center{ text-align:center; } img[usemap] { border: none; height: auto; width: 100%; } .images { margin: 0 auto; width: 100%; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } }

Contenu du fichier script.js

// Récupère la liste de toutes les fenêtes modal var modal = document.getElementsByClassName("myModal"); function affiche(indexe){ //si on appuie sur une aire afficher la fenêtre modale modal[indexe].style.display = "block"; document.getElementById('fenetre').style.display='none' } function fermer(indexe){ // si on appuie sur (x), fermer la fenêtre modal modal[indexe].style.display = "none"; document.getElementById('fenetre').style.display='inline' } function voir(id){ document.getElementById(id).style.display='inline'; } function cacher(id){ document.getElementById(id).style.display='none'; } // * Adapte la taille des images en fonction de la taille de l'écran (responsive) // utilise jQuerry https://github.com/stowball/jQuery-rwdImageMaps $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); $('area').on('focus', function(e) { $('.selection p').html($(this).attr('class')); }); $(document).on('click', function(e) { if ( $(e.target).closest('area').length === 0 ) { $('.selection p').html('click a brick'); } }); });

Arborescence des dossiers et fichiers:

nsi.spe-lavoisier.fr/
|   index.php
|   page2.php
|
+---css
|       style.css
|
+---images1
|       femme.jpg
|       fenetre3.gif
|       img1-1.jpg
|       img1-2.jpg
|       img1-3.jpg
|       img1-4.jpg
|
+---images2
|       img2-1.jpg
|       prec.png
|
\---js
        index.js
        jquery.rwdImageMaps.js

Chaque nouvelle page sera nommée page?.php et un dossier images? ou le ? sera un nombre attribué par le professeur.

Votre mission consistera à construire une page du site avec une ou plusieurs énigmes à résoudre puis d'appeler la page suivante.

Contenu du fichier page?.php à compléter et adapter :

<?php session_start(); date_default_timezone_set("Europe/Paris"); // Interdit l'affichage de la page si le niveau précédant n'est pas terminé if (!isset($_SESSION['level']) or $_SESSION['level']<2){ echo "<script>alert('Niveau inaccessible !'); document.location.href='index.php'; </script>"; exit(); } // Si on rafraichi la page le temps de fin n'est pas modifié if (!isset($_SESSION['fin']) or isset($_GET['time'])){ // Calcule l'heure de fin : +1h $heure = time()+3600; $_SESSION['fin']=$heure; } else{ $heure=$_SESSION['fin']; } ?> <!DOCTYPE html> <html lang="fr"> <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/jquery.rwdImageMaps.js"></script> <script>var tps_fin="<?php echo $heure; ?>"; </script> <title>Escape Game NSI</title> </head> <body>  <div id="img_fond">  <img src="images2/img2-1.jpg" alt="Hall d'entré du manoir" class="static" usemap="#map-1" />  <a href="index.php" title="Impossible de sortir du manoir"> <img src="images2/prec.png" alt="page précédente" class="fleche_pre" /> </a>  <span id="form1" class="cr"> </span> </div>  <map name="map-1">  <area class="aire" shape="rect" coords="0, 0, 500, 500" echo href = "#" data-reveal-id="myModal00" alt="Nom de l'objet" onclick = "affiche(0);" />  </map>  <div id="myModal00" class="modal myModal" data-reveal>  <span class="close" onclick = "fermer(0);">×</span>  <div class="modal-content center"> <p><img src="images1/?.jpg" class="img" width="70%"></p> </div>  <div class="caption"> <form action="" method=""> <p class="message"> <label>votre message : </label><input name='requete'> <input type="submit" value="Entrer"> </p> </form> <p>Votre message</p>  <p id='msg0' hidden>Mon message caché</p> </div> </div>   <div id="myModal01" class="modal myModal" data-reveal>  <div class="modal-content center"> <p><img src="images1/femme.jpg" class="img" width="50%"></p> </div>  <div class="caption"> <h3 id='msg1'>Trop tard ! tu as perdu !</h3> </div> </div> <script src="js/index.js"></script> <script> //Mise à jour de l'affichage du temps toutes les secondes function afficheTemps(){ var d=new Date(); reste=tps_fin-d.getTime()/1000 document.getElementById('form1').innerHTML=String(parseInt((reste)/60))+":"+("0"+String(parseInt((reste)%60))).slice(-2); if (reste>0){ compte=setTimeout('afficheTemps()',1000); } else{ // Temps écoulé, afficher fenêtre myModal01 affiche(1); } } afficheTemps(); </script> </body> <?php // Traitement de la méthode GET if (isset($_GET['requete'])){ $donnee=$_GET['requete']; if ($donnee ==''){ echo "<script>voir('msg0');</script>"; // affiche le paragraphe caché } else { echo "<script></script>"; } } ?> </html>

Galerie des pièces du manoir :

1 / 32