Ce Schéma Représente Une Interaction Sur Le Web.complétez-le.

Ce Schéma Représente Une Interaction Sur Le Web.complétez-le.

Les élèves doivent savoir

  • Identifier les différents composants graphiques permettant d’interagir avec une application Web.
  • Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter.
  • Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Spider web.
  • Distinguer ce qui est exécuté sur le client ou sur le serveur et dans quel ordre.
  • Distinguer ce qui est mémorisé dans le client et retransmis au serveur.
  • Reconnaître quand et pourquoi la transmission est chiffrée.
  • Analyser le fonctionnement d’un formulaire simple.
  • Distinguer les transmissions de paramètres par les requêtes POST ou Go.

6.    Modalités de l’interaction entre l’homme et la machine

Rappels HTML+CSS

  • Historique

Le spider web est né à la fin des années 1980, avec les travaux de Tim Berners-Lee et Robert Cailliau, qui créent un système de relation entre documents numériques par liens hypertexte : en cliquant sur un mot clef, le système renvoie sur une définition de ce mot ou sur davantage d’informations à son propos.

L’objectif était de faciliter la recherche dans les publications de recherche au sein du Centre Européen de Recherche Nucléaire (le CERN) à Genève et dans tous les centres de recherches affiliés à travers le monde.

50’équipe de chercheurs met alors au point un langage de description de document (HTML), un protocole de transfert de ces documents (HTTP) sur les réseaux et une façon de retrouver ces documents par une adresse unique (URL). Le tout formant le Earth Wide Web (www). Ils complètent le dispositif avec un logiciel permettant d’accéder aux documents (navigateur web) et un logiciel gérant les serveurs HTTP.

Durant les années 1990, le langage HTML va évoluer rapidement avec la mise en place de nouvelles balises (images, formulaires…) ainsi que l’ajout de la gestion graphique par les feuilles de style (css).

En 1997 apparaît le Document Object Model (DOM) permettant un accès aux éléments d’un document sous forme d’objets, cela permet à des scripts d’accéder au navigateur et d’interagir avec l’utilisateur (par un code JavaScript) par le biais d’évènements. Fin 1997 apparaît le standard HTML 4 qui formalise l’inclusion des styles, scripts, DOM et cadres (frames).

Le HTML parviendra à maturité le 28 octobre 2014 lorsqu’est officialisée la version five du HTML qui prend en compte les nouvelles technologies et ouvre united nations accès au contenu indépendamentt du navigateur. Accessibilité, nouveaux éléments canvas et video, compatibilité XHTML, XML…

  • Structure du HTML

Le HTML est united nations langage constitué de balises qui permettent la mise en page d’un document. Une page HTML est un code source qui sera interprété par le navigateur spider web. C’est un simple texte structuré en arborescence avec deux blocs principaux : en-tête et corps :

Structure d’une folio HTML

Voici un exemple de page web avec des informations sur les éléments que l’on peut retrouver dans la construction :

Les éléments d’une page HTML

On voit que chaque élément du document est encadré par des
balises. La plupart des balises correspondant à la mise en forme du texte se présentent sous forme de couple ouvrant et fermant encadré par les symboles inférieur « < » et supérieur « > ». La balise fermante commence avec une barre oblique : « </balise> ».

Les noms des balises sont standardisés et ne seront reconnues que si elles sont écrites correctement. Il est donc nécessaire de bien les connaître, de faire appel à un site de référence (comme http://41mag.fr/liste-des-balises-html5 ) ou, mieux, d’utiliser united nations éditeur qui reconnaît les balises et aide à leur création, comme PyCharm :

HTML dans PyCharm

PyCharm possède même une vue
Construction
qui permet d’accéder facilement à différents blocs d’une folio web complexe. Des boutons (visibles à droite sur l’image) permettent ensuite de visualiser la folio dans différents navigateurs.

  • Formats des balises HTML

Une balise HTML utilise un mot clef et peut être suivie d’un certain nombre de paramètres permettant de préciser sa fonction ou la façon dont elle s’poster.

Ces paramètres se présentent toujours sous la même forme : un mot clef suivi du signe égal et des paramètres entre guillemets.

Exemple :

        <strong style="color: red;">text</strong>
      

Ici le mot « texte » sera affiché en gras et en rouge.

Il est possible d’ajouter plusieurs paramètres en les séparant par un espace.

Certaines balises, qui ne sont pas destinées à modifier directement united nations texte, n’ont pas de balise fermante, mais se terminent par les symboles « /> ». C’est le cas de la balise « img » qui permet d’afficher une image.

Dans le cas des images, il est of import de choisir des formats qui peuvent être affichés sur tous les navigateurs et plus sûr de se cantonner aux formats jpeg (jpg) et png qui sont les plus universels.

  • Interprétation du HTML

Pourquoi visualiser le code HTML dans plusieurs navigateurs ?

Il faut garder à l’esprit qu’un document HTML est un simple fichier texte qui sera mis en forme par le navigateur au moment de l’affichage sur le concluding du destinataire. Or chaque navigateur web peut définir sa propre façon d’afficher les documents. Malgré la mise au point de la norme HTML v, les éditeurs n’arrivent pas à se mettre vraiment d’accord sur la façon d’afficher les propriétés de certaines balises, particulièrement lorsqu’on fait appel à des styles CSS avancés.

En plus de cela, la fenêtre d’affichage du destinataire peut avoir une taille très variable en fonction du concluding (smartphone, tablette, ordinateur, réfrigérateur, montre…). Une page HTML bien conçu devrait donc pouvoir southward’adapter au format final. On dit alors que la folio est «responsive ».

Cascade créer une page responsive, on va combiner des styles css et parfois du lawmaking en JavaScript. Cela impose un certain nombre de contraintes, mais permet d’élargir la visibilité de la page aux possesseurs de tous types d’appareils.

Il ne faut pas confondre le « responsive » avec « l’accessibilité » qui consiste à bien choisir les couleurs et à indiquer des paramètres « alt » (description alternative) pour rendre une page accessible aux personnes ayant des déficiences visuelles.

La création d’une folio HTML responsive sort du program, mais vous pourrez avoir une idée de ce qu’il faut faire en suivant des indications sur les sites de certains éditeurs de navigateurs, comme Google :

 https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=fr .

  • Un point sur les URL

Lorsqu’on insère des documents externes dans le code HTML, comme des images, des scripts ou des feuilles de styles, il y a deux façons d’écrire les adresses de ces fichiers (URL) : absolues ou relatives.

Une
URL
absolue
commence toujours « http:// » ou « https:// » sur Internet. Elle n’existe que si le fichier auquel vous accédez est bien sur un serveur web (actif et accessible).

Exemple :

« https://www.cours.jlrichter.fr/wp-content/uploads/2020/07/ordinateur-z1.jpeg » renvoie vers une image de ce cours sur mon site Internet. Cette adresse donnera toujours la même prototype et elle sera accessible de partout (à status d’avoir un accès à Internet !).

Une
URL
relative
va indiquer le chemin d’accès au fichier par rapport à la folio HTML qui appelle ce fichier. Si une epitome nommée « image.jpg » est placée dans un dossier « images » situé dans le dossier de votre folio web, vous pourrez appeler cette image avec l’URL « images/prototype.jpg ».

Si vous ne diffusez pas ce dossier « images » avec votre page web, united nations utilisateur ne pourra pas afficher l’epitome correspondante. En revanche, l’intérêt des URL relatives est de pouvoir diffuser tout votre site en une seule archive qui permettra d’afficher le site de north’importe où sans avoir nécessairement de connection à Net.

Attention aux URL qui commencent par « file:// » machine elles sont destinées à retrouver united nations fichier
sur votre propre ordinateur. Du insurrection, il est pratiquement certain que si vous envoyez une page HTML avec une URL de ce genre dans le code, votre destinataire ne sera pas capable de 50’afficher southward’il ne place pas les fichiers sur le même disque et au même endroit que vous. Évitez absolument d’utiliser ce type d’URL ou des logiciels de création HTML qui les créent !!

  • Structure du CSS

Par défaut, les navigateurs utilisent des textes noirs sur fond blanc (éventuellement l’inverse sur les systèmes qui permettent 50’inversion des couleurs) et cela rend une folio web peu bonny.

Afin d’effectuer une mise en page plus agréable, plusieurs solutions ont été utilisées au cours du temps : d’abord des tableaux avec des cases de tailles variables, puis des fenêtres multiples affichées en même temps (les frames), avant que ne s’imposent les Cascading Way Sheets (css).

Un style css peut être créé de plusieurs manières :

  • Directement dans une balise HTML comme paramètre.
  • Dans un en-tête de page web en regroupant tous les styles de pages.
  • Dans un fichier externe qui pourra être utilisé sur plusieurs pages. On appelle alors ce fichier depuis la partie « head » (en-tête) de la folio web.

C’est cette dernière version qu’il faudra privilégier

Il existe ensuite deux manières de donner united nations manner à un élément de folio : modifier toute une famille de balise HTML ou créer des classes de styles.

La modification d’une balise HTML
va se présenter de la façon suivante :

Balise {paramètre1 :valeur ;paramètre2 :valeur}

Il est bien sûr possible de modifier autant de paramètres que fifty’on souhaite (et il y en a beaucoup).

Exemple :

        body {     color: #404040;     font-family unit: 'Roboto Slab', serif;     font-size: 14px;     line-height: 2.three; }
      

Voici le formatage par défaut du texte sur monday site web : https://cours.jlrichter.fr

Vous noterez que les couleurs peuvent être définies par un nom en anglais (red, dark-green, blue…) ou par un lawmaking hexadécimal qui commence par le symbole dièse (hashtag) « # ». La plupart des bons logiciels de traitement d’image permettent de générer ce lawmaking, mais il est aussi possible d’utiliser des sites dédiés aux graphistes pour créer des sets de couleurs qui vont bien ensemble. Par exemple le site : https://coolors.co/

Les classes sont toutefois utilisées le plus souvent, car elles permettent de modifier plusieurs éléments dans une page sans pour autant modifier ‘tous’ les éléments de la page.

Pour créer une classe, il faut la déclarer dans les paramètres d’une balise HTML. Par exemple comme ceci :

        <a class=“lien“>
      

Puis dans le fichier css il faudra y attacher des styles en insérant un point avant le nom de la classe :

        .lien {paramètre1 :valeur ;…}
      

Il est également possible de créer une sorte de classe à usage
unique
avec l’utilisation du paramètre « id ». Le nom de ce paramètre doit alors commencer par united nations symbole dièse dans le code css.

Popular:   Commentaire Britannicus Acte 2 Scène 2

Exemple :

        <p id=“doigt“>texte</p>
      

Code css :

        #doigt {color : black ;}
      

L’id « doigt » ne devra être utilisée
qu’une seule fois
dans la page HTML, mais on pourra fifty’utiliser pour lui attribuer de 50’interactivité en css ou JavaScript (comme les « class », voir plus loin).

Il est possible de s’aider d’un éditeur en ligne pour la mise en forme, car il existe de très nombreux paramètres possibles et il peut être fastidieux de les apprendre (surtout qu’ils évoluent assez rapidement avec de nouvelles possibilités au gré des idées des développeurs de navigateurs web, même si les bases restent les mêmes).

Voici par exemple l’éditeur css en ligne http://selfcss.org/ :


Éléments interactifs

Dès les premières versions du langage HTML, des éléments interactifs ont été introduits afin de rendre les pages web plus attractives et de créer de nouvelles façons d’utiliser le contenu.

Le
bouton, identifié par sa balise <button>label</button> crée un élément dont la forme par défaut dépend du navigateur et qui peut être cliqué. Le « label » du bouton est le texte qui due south’affiche sur celui-ci. Voici un aperçu de l’aspect par défaut d’un bouton pressé par fifty’utilisateur dans différents navigateurs :


À la base, un bouton ne fait rien du tout si on ne lui associe pas des évènements avec du code css ou du JavaScript, ce que nous verrons plus loin (sauf si c’est un bouton de validation de formulaire, voir plus loin).

L’autre grande famille d’éléments interactifs est la famille des formulaires «Input ». Elle est codée avec la commande <input type=“type“> où « blazon » represent à de nombreux éléments : boutons radio, contrôle de choix de appointment, choix de fichier.. (voir une liste complète ici : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input )

Les éléments Input ont été conçus pour faire des
formulaires
(voir aussi plus loin) afin de récupérer des informations à placer dans des fichiers ou des bases de données sur des serveurs, mais il est possible de les utiliser à d’autres fins avec un peu d’imagination.

Les dernières versions de HTML intègrent de nombreux autres éléments interactifs (liste complète sur le site du consortium qui gère la norme HTML : https://dev.w3.org/html5/pf-summary/interactive-elements.html ) comme les menus, les barres d’outils (peu utilisées)…

Le plus utilisé de ces outils modernes est l’élément « div » qui crée un conteneur pour du code HTML. Ce conteneur peut ensuite être placé (et déplacé avec du code en JavaScript) northward’importe où sur la page avec des styles css associés à cet élément. Cela permet de sortir d’une mise en page linéaire cascade offrir autant de souplesse qu’un mag.

Gestion des évènements

Pour interagir de façon efficace avec l’utilisateur, le langage HTML introduit la notion «d’évènements ». Un évènement peut être une action directe de l’utilisateur, comme le fait de déplacer la souris ou de cliquer, ou une action du navigateur (lorsqu’il a fini de charger la page par exemple).

Ces évènements (outcome en anglais) peuvent être utilisés pour introduire united nations changement de mode css ou comme signal d’entrée cascade un script en JavaScript.

Vous pourrez trouver une liste des évènements HTML utilisables sur cette page : https://www.w3schools.com/tags/ref_eventattributes.asp

Voici united nations exemple d’utilisation des évènements avec du code css :

Voici le code de la folio web :

Exemple de lawmaking HTML

On y voit le paragraphe avec l’id « doigt ». Avec une feuille de style css on va pouvoir modifier ce paragraphe lorsque l’utilisateur passe la souris dessus en utilisant les évènements « hover » (survol de la souris) et « focus » (quand il sélectionne à la souris ou avec la touche « tab ») :


Lorsque l’utilisateur va passer la souris au-dessus du ‘faux’ lien (qui ne mène à rien grâce à une ancre locale qui commence par un hachtag « #doigt »), le navigateur va changer le style cascade appliquer celui de 50’évènement hover (ou focus) associé à la balise HTML « a » (ballast : lien).

La diversité des paramètres css associés à la gestion des évènements par HTML permet de faire des animations et de rajouter des éléments intéressants et dynamiques dans une page web sans programmer en JavaScript. Mais ce langage permet d’aller beaucoup plus loin.

7.    Interaction avec fifty’utilisateur dans une page web

Introduction au JavaScript

Le JavaScript est un langage de programmation interprété par le navigateur web. De ce fait il est très dépendant du type de navigateur utilisé et de la puissance de la automobile sur laquelle il fonctionne, même si ce dernier point northward’est plus vraiment un problème depuis les gains de puissance des processeurs (y compris mobiles) de ces dernières années.

Même south’il y a le mot « java » dans le nom de ce langage, il n’a pas yard-chose à voir avec le langage Java. Sa syntaxe est relativement simple et beaucoup d’éléments sont assez proches du Python. Il y a toutefois une différence majeure de syntaxe à laquelle vous devrez être attentif :
chaque teaching se termine par united nations point-virgule « ; » !!

  • Le JavaScript pour quoi faire ?

Le JavaScript a pour but primary de modifier des éléments de la folio HTML et ainsi d’interagir avec la page sur le navigateur du customer. Pour cela il s’appuie sur le Document Object Model (DOM) de HTML : chaque partie du lawmaking HTML est considérée comme united nations « objet » (au sens de programmation) qui possède des attributs modifiables.

Pour accéder à un élément HTML, le plus simple est de rajouter une propriété « id » à une balise. Il sera alors possible d’accéder à cet élément pour le modifier.

Par exemple: pour modifier le contenu d’un paragraphe codé de la façon suivante en HTML : <p id=“paragraphe1“>texte</p>, le lawmaking JavaScript va chercher le paragraphe avec la méthode « getElementById » et en modifier le contenu de la façon suivante :

document.getElementById(“paragraphe1“).innerHTML=“Bonjour“

Comme il est possible de modifier du code HTML, on pourra changer le texte, l’apparence du texte (couleur, taille, emplacement à l’écran), remplacer des images, montrer ou cacher des blocs de textes… Tout cela ouvrant de nombreuses possibilités d’interactions sur une page web.

  • Où placer le lawmaking JavaScript ?

Le code JavaScript peut être placé à plusieurs endroits selon vos besoins et la quantité de lawmaking que fifty’on veut utiliser :

  • Entre les balises <script>code</script>. Il est recommandé de placer les scripts de la page dans la partie « head » (en-tête) du certificate HTML.
    Si vous utilisez des scripts très longs à exécuter et que votre priorité est que fifty’utilisateur voit la page avant tout, il faudra alors placer vos scripts dans un élément « <footer></footer> », en fin de page web, pour ne pas ralentir le chargement de la page (voir exemple plus haut).
  • Dans un fichier externe qui sera appelé par votre document HTML à l’aide de l’didactics <script src=“monscript.js“ defer></script>. « monscript.js » sera un fichier texte contenant votre code et l’attribut « defer » indique au navigateur (récent) de ne pas mettre en break l’affichage du document en attendant de charger et d’analyser le code JavaScript.
    Cette méthode est à privilégier si vous souhaitez facilement réutiliser votre code sur plusieurs pages web.
  • Directement dans un attribut évènement d’une balise HTML (voir plus bas). Cette méthode étant à réserver à des codes très courts que vous due north’allez pas réutiliser par la suite. Vous pouvez la combiner avec la balise « script » en utilisant des fonctions (il n’y a pas de distinction entre fonction et procédures en JavaScript).
  • Quelques éléments de syntaxe JavaScript

Les
commentaires
en JavaScript commencent toujours par « // » en début de ligne.

La
déclaration de variable
ou de constantes en JavaScript se fait avec la commande « var » et les types seront déterminés par l’interpréteur en fonction du contenu (comme en Python par défaut).

Exemple :

        var a=v ;
      

Il est possible de créer des
objets
très simplement avec la commande « var » en indiquant les valeurs des propriétés et les méthodes (fonctions) dans des accolades de la façon suivante :

Exemple :

        var voiture = {type :“compacte“, nbroues :four, demarrer : function(){render “vroom vroom“}, annee :2020}
      

Nous avons ici déclaré l’objet voiture qui possède les propriétés type, nbroues et annee et une méthode, demarrer, qui contient une fonction renvoyant le texte « vroom vroom ». Notez les virgules qui séparent les paramètres de fifty’objet. Cette fonction pourra être appelée de la façon suivante pour changer un paragraphe dont 50’ « id » est « demo » :

        certificate.getElementById(“demo“).innerHTML=voiture.demarrer();
      

Les
tableaux de valeurs
(arrays) seront déclarés indiquant les contenus des cases du tableau entre crochets de la façon suivante :

        var voitures = [“renault“, “citroen“, “peugeot“] ;
      

on pourra alors accéder aux éléments du tableau par leur indice en partant de 0 pour le premier élément. Ici voiture[0] a cascade valeur « renault ».

Les
opérateurs arithmétiques
sont les mêmes qu’en python, y compris avec le symbole modulo « % ». Et vous pourrez effectuer des opérations raccourcies comme en python également : « ten +=1 » identique à « x = x+ane ».

Les
fonctions
seront sans doute plus utilisées qu’en python, car elles simplifient l’arrayal d’une action à un objet HTML : il suffit d’exécuter une fonction pour remplacer une suite d’instructions. La déclaration d’une fonction se présente de la façon suivante :

        office maFonction(paramètre1,paramètre2) {   // code à exécuter    return réponse;// éventuellement retour d’une valeur }
      

On peut donner autant de paramètres que l’on souhaite, voir aucun (mais il faudra tout de même mettre les parenthèses après le nom de fonction). Comme dans united nations programme en Python, ces paramètres sont des variables que l’on transmet à la fonction pour qu’elle les utilise dans ses opérations.
On appelle ensuite la fonction avec son nom suivi des parenthèses, même si elles ne contiennent aucun paramètre !.

Les
conditions
pour les tests ressemblent, elles aussi, au python avec la syntaxe :

        if (condition1) {   // code à exécuter } else if (condition2) {   // code à exécuter } else {   // code à exécuter }
      

« else if » et « else » sont optionnels et les opérateurs de comparaison identiques au python : égalité (==), différence ( !=)…

Popular:   Tableau De Signe D Une Fonction Du Second Degré

Les
boucles bornées
sont en revanche assez différentes puisqu’on va déclarer la valeur de départ du compter, la condition d’arrêt et l’incrémentation du compteur au début de la boucle, de la façon suivante :

        for (i=0 ;i<10 ;i++){ // lawmaking}
      

Les boucles non bornées ont une syntaxe plus proche de python :

        while (condition) { // code}
      
  • Références du langage

L’objectif du cours de NSI n’étant pas de vous former à l’ensemble des possibilités du JavaScript, vous pourrez vous rendre sur le site (anglais) très complet et clair : https://www.w3schools.com/js/default.asp pour des explications exhaustives avec de nombreux exercices sur le JavaScript.

Notez au passage que le JavaScript est devenu tellement populaire qu’il en existe une version qui peut être exécutée sur le serveur web cascade remplacer PHP (que nous verrons plus tard), nommé « node.js ».

  • Un mot sur jQuery

Le code JavaScript étant souvent assez long (et lourd) à écrire, une version simplifiée, nommée « jQuery » rencontre united nations succès croissant (y compris chez Google, Microsoft ou Netflix). C’est une bibliothèque JavaScript qu’il faudra copier auprès de votre page web (à télécharger ici : https://jquery.com/ ), puis charger en premier avant vos autres scripts avec l’didactics de chargement de script vue plus haut (par exemple : <script src= »jquery-three.five.1.min.js »></script>)

Le code jQuery que vous allez utiliser sera ensuite précédé du signe dollar « $ » cascade le distinguer du code JavaScript ‘normal’.

JQuery simplifie ensuite la syntaxe de la façon suivant : par exemple pour modifier le contenu HTML d’un bouton dont l’ « id » est définie à « demo », on utilisera le code :

        $("button.demo").html("Nouveau texte")
      

Au lieu du code JavaScript traditionnel :

        onclick='document.getElementById("demo").innerText="Nouveau texte"'
      

Si cela vous intéresse, vous trouverez une documentation plus complète sur le site x3schools : https://world wide web.w3schools.com/jquery/default.asp, mais gardez à l’esprit qu’il vaut mieux maîtriser les bases de JavaScript pour tirer pleinement profit de jQuery.

Exécuter un script sur un bouton

Voici un exemple du lawmaking le plus simple que l’on puisse faire en JavaScript : une page HTML contenant un bouton dont on va changer le texte. Le choix a été fait de mettre le code directement dans fifty’évènement « onclic » du bouton :

Page HTML avec code JavaScript simple :

        <!DOCTYPE html> <html> <caput>     <meta charset="UTF-8">     <link rel="stylesheet" href="way.css">     <title>test</title> </head> <body> <p>Ceci est united nations test de fonction sur un bouton</p> <button type="button" id="bouton1"     onclick='document.getElementById("bouton1").innerText="bien joué !"'>Cliquez ici</button> </body> </html>
      

La feuille de style css n’est pas jointe ici, mais elle contient simplement des styles cascade améliorer fifty’apparence du texte et du bouton.

En cliquant sur le bouton, le texte de celui-ci va passer de « Cliquez ici » à « bien joué ! ». Notez l’utilisation du code d’identification
unique
du bouton « id » (bouton1) qui aurait pu nous permettre de modifier n’importe quel autre élément de la page possédant cet « id » en cliquant sur ce bouton.

8.    Interaction client-serveur

Rappels sur le protocole HTTP

Lorsqu’une adresse URL est validée par united nations navigateur Net, celui va effectuer une requête HTTP (HyperText Transfer Protocol) cascade demander l’information au serveur. Le HTTP est donc un protocole client-serveur géré par united nations logiciel qui se trouve sur le serveur et que l’on nomme serveur HTTP (le plus célèbre étant « Apache »). Il prend appui sur le protocole TCP (vu en classe de SNT en seconde : https://world wide web.cours.jlrichter.fr/lycee/snt-sciences-numeriques-et-technologie/2snt-a-internet/ ) et utilise le port 80 en version standard et le port 443 en version sécurisée (HTTPS).

Les navigateurs modernes permettent de visualiser le contenu de cette demande afin de lire ce qui a été demandé. Voici par exemple une requête vers le site du lycée :

Exemple de requête GET

Il existe deux principales méthodes de requêtes : « GET » cascade demander une ressource au serveur (page, prototype, feuille de style…) et « POST » pour transmettre des informations qui devront être traitées par le serveur (united nations formulaire de commande par exemple). Cette information apparaît en premier dans la requête.

La méthode de advice est suivie de 50’URL. On voit dans 50’exemple ci-dessus que cette adresse a été traduite en IPv4 par united nations serveur DNS.

L’en-tête indique également la version du protocole HTTP, i.1 ici, ce qui représente la dernière version (en 2019), suivi d’un certain nombre de paramètres :

En-Tête d’une requête Become

Ces en-têtes indiquent plus précisément quel type de document est demandé (ici on s’attend à du texte ou du HTML et ses variantes), si ces informations peuvent être envoyées sous forme compressée (ici en gzip) ou de quelle page vient l’utilisateur (ici on vient du moteur de recherche Qwant).

Afin d’éviter de faire transiter trop d’informations redondantes sur le réseau, un site peut demander au navigateur de conserver en local des informations données par l’utilisateur, par exemple son identification (cascade indiquer qu’il a bien validé sa connexion avec un login et un mot de passe) ou ses préférences de style (si vous offrez le choix du style de votre page avec plusieurs feuilles de fashion)… Celles-ci sont écrites dans united nations fichier texte nommé « Cookie » qui restera stocké en local jusqu’à ce qu’il soit effacé, soit automatiquement, soit sur demande de fifty’utilisateur.

S’il permet de faciliter les échanges, ce cookie peut aussi poser united nations souci de sécurité quand il conserve des données privées d’united nations utilisateur, surtout si celles-ci sont lues par un autre serveur à qui ces données northward’étaient pas destinées !

Exécution de code sur le serveur

Pour le moment nous avons vu les moyens de rendre une page web interactive avec du code JavaScript. Cette interactivité a toutefois ses limites, car elle ne permet de travailler qu’avec des informations contenues dans la page chargée par le navigateur du customer. Si l’on souhaite avoir des fonctionnalités avancées, comme la personnalisation d’une folio en fonction du customer pour de la vente en ligne ou l’accès à des données en fonction d’un contexte, il est possible de mettre en place du lawmaking qui sera exécuté « avant » d’envoyer la folio vers le customer.

Le code sur le serveur fonctionne alors de la façon suivante :

Etapes d’un échange avec serveur web + PHP

Dans l’illustration ci-dessus, on voit que le code côté serveur sera toujours exécuté avant que la page ne soit envoyée au customer. Celui-ci ne verra jamais ce code, contrairement au code client JavaScript qui se trouve dans la page web et qui est lisible. Cette confidentialité peut être intéressante pour certains types de traitements. Le lawmaking serveur peut aussi accéder à l’ensemble des ressources qui se trouvent sur le serveur, en particulier des bases de données.

  • Le langage PHP

L’united nations des langages les plus utilisés pour le code côté serveur est le PHP pour PHP Hypertext Preprocessor (c’est un acronyme récursif). C’est un langage Open up Source qui existe depuis 1994 et dont la syntaxe est proche du C. Le code se trouve dans le code source de la page spider web, comme le JavaScript, mais ne sera visible que si on peut accéder aux fichiers sur le serveur (par exemple avec le protocole FTP si 50’on doit gérer united nations serveur web afar).

Beaucoup de choses sont possibles en PHP sans base de données :

  • La gestion de sessions (pour sécuriser des parties d’united nations site par exemple)
  • La gestion des cookies
  • Fifty’assemblage d’une page à partir ses sous-éléments HTML : en-têtes, menus, pied de page, contenu… sans réécrire ce code pour chaque page…

Mais fifty’interfaçage avec une base de données permet encore beaucoup plus : créer une seule « page » pour le site pour un contenu qui va se trouver dans une base of operations de données et qui sera appelée selon la demande de l’utilisateur : commentaires, achat en ligne, listes d’élèves…

Mais pour accéder aux bases de données il faudra intégrer des requêtes SQL dans le code PHP. Le SQL (Structured Query Language) est un langage qui permet d’interagir avec une base de données pour y stocker ou en extraire des informations. Le SQL sera vu plus en détail en classe de terminale NSI.

Voici un exemple d’utilisation de PHP avec du SQL :


On voit que le code en PHP se trouve entre les balises « < ?php » et « ?> ». Vous pouvez reconnaître la construction de comparaison « if…else » qui est également semblable à ce qu’on peut trouver dans le JavaScript, ainsi que les points virgules en fin de ligne de lawmaking.

Un élément distinctif du PHP est la présence du signe dollar « $ » au début des variables, ainsi que la présence de mots clefs spécifiques pour accéder à certaines fonctions du serveur.

L’exécution d’united nations script en PHP nécessite d’installer united nations serveur web en local pour le développement ! Le serveur le plus simple, et Open Source est Apache. On l’associe au plug-in PHP cascade exécuter des scripts côté serveur et à MySQL pour gérer des bases de données sur le serveur.

Pour développer sous Windows on peut installer WAMP (http://www.wampserver.com/ ) ou EasyPHP (https://www.easyphp.org/)

Gestion des cookies

Comme nous l’avons vu plus haut, les cookies sont des fichiers textes qui sont stockés sur les ordinateurs des clients d’united nations site web. On peut y enregistrer la dernière folio vue par un utilisateur pour y retourner à l’ouverture du site, des identifiants pour faciliter la connexion, le contenu d’un panier d’achat…

Comme les cookies sont de simples fichiers textes non cryptés et que l’on peut y accéder dès lors que fifty’on connaît le nom de ce fichier texte, il faut éviter d’y stocker des données sensibles (mots de passe, informations de payement…), motorcar un autre site web pourrait y accéder (il vaut mieux limiter la lecture des cookies au site, voir plus loin les paramètres « path » et « domain »).

Il est facile de créer un cookie en PHP avec la fonction « setcookie(name, value, elapse, path, domain, secure, httponly) » :

  • name : nom du cookie.
  • value : data que l’on veut stocker dans le cookie.
  • expire : appointment d’expiration d’un cookie au format timestamp UNIX qui indique le nombre de secondes écoulées depuis le 1er
    janvier 1970. Sans cette information, le cookie expire lorsque 50’utilisateur ferme son navigateur (fin de session).
  • path : chemin serveur où le cookie sera disponible. Par défaut sa valeur est « / » et le cookie est accessible depuis fifty’ensemble du serveur spider web.
  • domain : domaine pour lequel le cookie est attainable
  • secure : si la valeur est « true », le cookie north’est accessible qu’en https (voir plus loin).
  • httponly : si la valeur est « truthful », le cookie n’est accessible qu’avec le protocole HTTP (et donc pas depuis le JavaScript par exemple).
Popular:   Comment Appelle-t-on Une Personne Qui Pénètre Illégalement Un Système

L’écriture ou la lecture d’un cookie se fait avant le code HTML. Il faut donc mettre le lawmaking « setcookie() » du PHP avant le code HTML.

Exemple :

Page HTML avec lawmaking serveur PHP

        <?php     $visit = false;     $idrand = random_bytes(12);     if (!isset($_COOKIE['id_utilisateur'])){         $visit=setcookie('id_utilisateur',$idrand,time()+3600);     }   ?> <!DOCTYPE html> <html lang="fr"> <head>     <meta charset="UTF-8">     <championship>Championship</championship> </head> <trunk> <?php if ($visit) {     echo "Bienvenu à notre nouveau visiteur"; } else {     echo "Nous sommes heureux de vous revoir"; } ?> </body> </html>
      

Dans l’exemple ci-dessus, nous commençons par mettre à « false » la valeur d’une variable « $visit » et par créer united nations code d’identification aléatoire avec la fonction « random_bytes » d’une longueur de 12 bit. Nous testons ensuite la présence d’un cookie « id_utilisateur ». Si celui-ci north’existe pas, nous le créons, ce qui mettra la variable « $visit » à false. Si le cookie avait déjà existé, la création aurait échoué et la variable « $visit » aurait été affectée de la valeur « Fake ».

Plus loin dans le code il sera possible de savoir si fifty’utilisateur est nouveau sur la page ($visit vaut alors « True ») ou s’il est déjà venu. Le texte affiché sera modifié en conséquence.

Il est également possible de lire la valeur d’un cookie avec la commande PHP d’accès à la variable « $_COOKIE » (en majuscule) suivie de son nom. Par exemple on pourrait lire la valeur de l’identification utilisateur précédente avec le code PHP :

        repeat “votre lawmaking utilisateur est “ .$_COOKIE[‘id_utilisateur’] ;
      

Si 50’on souhaite modifier la valeur d’un cookie, il faudra à nouveau appeler la fonction « setcookie() ». Pour effacer le cookie il faudra utiliser la même fonction avec une valeur vide : setcookie(‘id_utilisateur’,’’) ;

Chiffrement HTTPS

Le protocole HTTP fait transiter toutes les informations entre le serveur et fifty’utilisateur sous forme de textes lisibles par quiconque peut intercepter les paquets d’informations qui circulent sur le réseau. Cela peut être très dangereux si l’on se connecte avec un mot de passe ou si fifty’on partage des informations sur une card de crédit.

Il est donc conseillé d’utiliser plutôt le protocole HTTPS : HyperText Transport Protocole Secure, qui rajoute au protocole united nations chiffrement des paquets. Le site web sur le serveur doit alors posséder un certificat d’authentification validé par une autorité de certification.

Au moment du dialogue entre un client et un serveur (lorsqu’on cherche à accéder à une page spider web sécurisée dont fifty’adresse URL commence par « https:// »), le client demande d’abord une connexion sécurisée et indique au serveur quelles méthodes de chiffrement il peut utiliser. Le serveur choisit alors 50’une de ces méthodes, présente son certificat qui permet de savoir qu’il est bien le serveur choisi.

Le client va alors vérifier la validité de ce certificat auprès de fifty’autorité de certification et si celui-ci est valide, récupère une clé publique (code chiffré) qui va lui permettre de crypter toutes les informations qu’il va transmettre et que seul le serveur en question sera capable de décrypter avec sa clef privée. Dans le même temps, le navigateur du client va générer une clé permettant de l’authentifier et au serveur de coder les informations cascade son usage unique.

De cette façon, même si quelqu’united nations est capable d’intercepter les paquets entre le client et le serveur, ils sont incompréhensibles sans les clés privées du serveur ou du client pour les décrypter.

9.    Formulaire d’une folio web

Éléments de formulaire web

Dans la partie consacrée au HTML, nous avons vu que nous pouvions introduire de l’interactivité dans une page web en insérant des balises « input » permettant à fifty’utilisateur de saisir des informations, de faire des choix de dates, de transmettre des fichiers…

Ces éléments ont vocation à être utilisés dans des formulaires qui seront traités par le serveur au moyen de code PHP. Pour cela il faudra utiliser la balise « form » qui possède deux attributs qu’il faudra définir :

  • method : qui indique le type de requête que l’on va utiliser (POST ou GET) (voir plus loin)
  • action : qui indique où se trouve le script PHP qui va traiter la requête et renvoyer une réponse à 50’utilisateur.

Exemple :

        <form action="traitement.php" method="mail">…</grade>
      

A l’intérieur de cette balise on pourra placer des éléments de saisie, principalement avec les balises « input » ainsi que du texte de mise en forme. Il ne faudra pas oublier d’inclure un élément de type « submit » pour pouvoir soumettre (et transmettre) le formulaire.

Il est évidemment possible d’aller plus loin en ajoutant du code JavaScript pour, par exemple, contrôler que l’utilisateur n’utilise pas certaines adresses email ou pour faire une pré analyse de ses réponses.

N’oubliez toutefois pas que certaines balises ont des contrôles intégrés qui peuvent vous faire gagner du temps : il existe, par exemple, united nations « input » de type « email » et c’est alors le navigateur qui vérifiera que l’adresse entrée est bien une adresse post valide. Il existe également des types pour les mots de passe, où les caractères seront remplacés par des étoiles, et même un type « subconscious » qui permet de rajouter des valeurs à un formulaire sans que fifty’utilisateur ne puisse les voir (comme un code d’identification de l’utilisateur ou du formulaire par exemple).

Différence entre requêtes POST et Get

Nous venons de voir que deux méthodes de transfert du contenu d’un formulaire sont possibles : Become et POST. La façon dont les informations sont transmises et le type d’information à transmettre sont différents dans les deux cas.

Get

La méthode GET devrait être réservée à
l’extraction d’information depuis un serveur. C’est par exemple la méthode utilisée lorsque vous faites une
recherche
sur un moteur de recherche. Par exemple sur Google, on pourra voir que la méthode utilisée est GET machine le contenu de la requête va être visible dans l’URL :

https://www.google.com/search?q=go

Comme le contenu de la requête est visible dans l’URL, il faut absolument éviter d’utiliser ce blazon de requête cascade transmettre une donnée sensible ! La taille des informations est limitée à la longueur totale d’une adresse (il faut absolument éviter de dépasser 2000 caractères), et c’est bien normal automobile quelques mots clefs devraient suffire à retrouver une information sur un serveur bien indexé.

Post

La méthode POST est à privilégier lorsque l’on souhaite
enregistrer des informations sur un serveur, par exemple pour enrichir une base de donnée. Par défaut, la taille maximale des informations que l’on peut transmettre par POST est de 8 Mo, mais cette taille peut être augmentée dans la configuration du serveur.

De plus, dans ce cas les informations ne sont pas transmises dans l’URL et peuvent facilement être cryptées si l’on utilise le protocole HTTPS.

Exemples d’utilisation de formulaires

  • Écriture du formulaire HTML

Voici united nations exemple d’utilisation des formulaires avec une page web HTML qui contient le formulaire nommé « form.html » et la page qui va traiter le formulaire, nommé « traitement.php ». La feuille de mode pour ces deux pages n’est pas donnée ici, mais elle n’a aucune importance sur le fonctionnement du formulaire.

Page HTML : form.html

        <!DOCTYPE html> <html lang="fr"> <caput>     <meta charset="UTF-eight">     <title>Formulaire</championship>     <link rel="stylesheet" href="styles.css"> </head> <body> <h3>Merci de remplir le formulaire ci-dessous</h3> <class activeness="traitement.php" method="mail service">     <p><characterization for="nom">Nom :</label><input type="text" id="nom" name="nom"></p>     <p><label for="prenom">Prénom :</label><input type="text" id="prenom" proper noun="prenom"></p>     <p><label for="mail">E-mail :</characterization><input type="email" id="mail" proper noun="mail" required="TRUE"></p>     <p><label for="raison">Raison de votre demande :</label>         <select id="raison">             <selection value="signaler">Signaler united nations problème sur le site</option>             <option value="contacter">Contacter 50'auteur du site</pick>             <option value="abonnement">M'abonner à la lettre hebdomadaire</option>             <option value="don">Faire un don à l'auteur du site</selection>         </select></p>     <p><label for="contenu">Précisez votre demande : </label>         <textarea blazon="text" maxlength="500" id="contenu" name="contenu"></textarea></p>     <p><input blazon="submit" value="envoyer"></p> </course> </body> </html>
      

Dans ce formulaire j’utilise les input de type « texte » en leur attribuant une propriété « name » qui pourra être réutilisée lors du traitement par le serveur.

La balise « select » permet de faire une liste déroulante avec plusieurs éléments dont un seul pourra être sélectionné. Cet élément est identifié par sa propriété « value ».

Pour créer une zone plus grande de saisie de texte, pour un mail par exemple, on use ici la balise « textarea ».

Enfin il faut penser à ajouter united nations « input » de blazon « submit » (il est aussi possible de faire cela avec un élément HTML bouton qui sera plus facile à personnaliser avec du CSS : <button course=“submitbtn“ type=“subit“>texte</button>) qui permettra de valider le formulaire cascade en envoyer le contenu au serveur.

Voici fifty’attribute de ce formulaire :

formulaire HTML
  • Traitement par le serveur

Une fois que l’utilisateur aureola cliqué sur le bouton « envoyer », le serveur va se voir demander la folio indiquée dans le paramètre « action » (ici « traitement.php ») et les données envoyées par le formulaire seront stockées dans une variable « $_GET » ou « $_POST » selon le paramètre « method » choisi dans le formulaire (ici nous avions choisi « mail »).

Dans le script PHP qui se trouve dans la page demandée, « traitement.php », nous pouvons effectuer un traitement sur les données transmises. En pratique, ce traitement sera le plus souvent un stockage dans une base de données (que nous verrons en terminale), mais ici on peut se contenter d’afficher les données reçues par le formulaire avec le lawmaking suivant :

Contenu du fichier traitement.php sur le serveur

        <!DOCTYPE html> <html lang="fr"> <head>     <meta charset="UTF-8">     <title>Réponse au formulaire</championship>     <link rel="stylesheet" href="styles.css"> </head> <trunk> <stiff>Votre demande a bien été transmise</strong> <p>Vous nous avez envoyé les informations suivantes :</p> <?php     echo "<p>Nom : ".$_POST["nom"]."</p>";     echo "<p>Prénom : ".$_POST["prenom"]."</p>";     echo "<p>Email : ".$_POST["mail"]."</p>";     echo "<p>Raison de votre demande : ".$_POST["raison"]."</p>";     repeat "<p>Votre texte : ".$_POST["contenu"]."</p>"; ?> </torso> </html>
      

Notez les crochets après « $_POST[“champ“] » car cette variable est une matrice (assortment) qui indexe les informations passées par le formulaire. Il est donc possible d’accéder à chaque valeur par son nom et de s’en servir dans le code PHP, par exemple pour l’afficher comme ici.

Ce Schéma Représente Une Interaction Sur Le Web.complétez-le.

Source: https://www.cours.jlrichter.fr/lycee/1e-nsi/interaction-entre-lhomme-et-la-machine-sur-le-web/

Ce site utilise des cookies pour améliorer la convivialité. Vous acceptez en utilisant le site Web plus loin.

Politique de confidentialité des cookies

Contact Us