Cours Tech Web - v2

COURS
TECHNOLOGIES WEB
Chapitre 1 : Généralités sur les technologies Web
1. Historique
L’internet tel que nous le connaissons à l'heure actuelle est radicalement différent de ce qu'il
était au début. Si aujourd'hui on peut discuter avec un(e) ami(e) sur Facebook, regarder une vidéo
sur Youtube ou trouver un endroit sur Google Maps ; dans la toute première version du web avec
le HTML 1.0 ; il n'était même pas possible d'afficher des images ! Depuis, le Web a évolué
rapidement et plusieurs phases se sont succédées avant d’obtenir les applications en ligne comme
celles que l’on utilise aujourd’hui.
Les technologies web sont un ensemble de protocoles et spécifications qui composent et

sont utilisés par le World Wide Web (généralement abrégé Web ou www) et ses normes.
Le web a été créé en 1989 comme application de partage d'informations puis est devenu une
plate-forme à part entière sur laquelle sont développées régulièrement des nouvelles technologies.
2. Description du fonctionnement
Le Web permet le partage d'informations disséminées à travers le monde et leur échange en

utilisant le protocole HTTP. La forme conventionnelle des informations échangées sont des
documents au format HTML.
HTTP (abrégé de HyperText Transfer Protocol) est le protocole sous-jacent du web. Cette
convention définit comment les messages sont formatés et transmis et comment le serveur HTTP
ainsi que le navigateur web doivent réagir aux messages.
La convention prévoit par exemple la transmission d´URL entre le navigateur et le serveur

HTTP. C'est un des principaux standards du web, le second étant le HTML qui concerne la
manière dont les documents sont codés et affichés3.
3. Protocole HTTP
Un serveur web supporte le protocole HTTP (HyperText Transfer Protocol: Protocole de

transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers
hypertextes entre deux ordinateurs.
HTTP est un protocole textuel, sans état :
• Textuel : toutes les commandes qui sont échangées sont du texte pouvant être lu par un
humain.
• Sans état : ni le serveur, ni le client ne se souviennent des communications précédentes.

Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un
mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser
un serveur d'applications).
HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent.
Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et
de leurs réponses.
Le principe est le suivant :

• Le client envoie une requête au serveur (c'est à dire demande au serveur une action),
• Le serveur envoie une réponse.
4. Le Client Web
Les clients sont principalement les navigateurs web qui permettent de présenter les documents
et applications web à l'utilisateur.
Il existe de nombreux navigateurs, dont les plus utilisés sont Mozilla firefox, Google
Chrome, Internet Explorer ou encore Opera.
Ces navigateurs implémentent tout ou parties de normes définies principalement par le W3C
(World Wide Consortium) :
- HTML (HyperText Markup Language)
Pour la représentation sémantique des documents, un langage à balise dans lequel des
portions du document sont délimitées entre des balises comme <body> pour le marqueur de
début ou </body> pour marquer le corps du document ou <p> pour marquer le début d'un
paragraphe.
HTML, outre les dispositions graphiques, disposent de balises permettant de définir

des formulaires web avec un ensemble de Widgets utilisé en conjonction avec la méthode
POST ou la méthode GET du protocole HTTP.
- CSS (Cascading Style Sheet)
Les styles CSS, pour feuilles de style en cascade, permettent de définir l’aspect d'une page
et de ses éléments par un ensemble de propriétés (position, taille, couleurs, bordures, polices,
visibilité…), en fonction de certains paramètres comme la taille ou la nature du support associé,
ou de l'état de ces éléments, si la souris est positionnée sur un élément il est par exemple
possible de changer son aspect.
- DOM (Document Object Model)

En interne ces documents HTML sont traduits par le navigateur en un arbre DOM dans
lequel les nœuds représentent les balises ou leurs attributs et les styles CSS qui leur sont
associés.
- Javascript (ou ECMAScript)
Le langage de programmation implémenté pour les aspects dynamiques d'une page ou

d'une application Web. Dans un document HTML, il est possible de définir
des fonctions associé aux évènements DOM, et ainsi de modifier l’apparence de l'interface,
d'ajouter de nouveaux éléments à la page, de valider les données de formulaires, de faire des
requêtes asynchrone à d'autres serveurs grâce aux technologies AJAX, ou encore de dessiner
sur un canevas HTML.
- Greffons
Les navigateurs Web incluent des possibilités d'extensions sous la forme de greffon leur
permettant notamment d'afficher des documents de types différents de ceux prévus par les
standards du web ; par exemple les documents pdf, notamment avec le populaire plug-in inclus
dans Acrobat Reader
5. Le serveur Web
Le web est utilisé comme une plate-forme technique pour permettre la manipulation
d'applications hébergées sur des serveurs web
Dans de telles applications, les programmes ainsi que les données résident sur un serveur
web - contrairement aux applications classiques qui résident sur l'ordinateur de l'utilisateur
Pour les développeurs, la mise à disposition d'une application hébergée sur un serveur web est
beaucoup moins coûteuse que le fait de graver un CD et de l'envoyer en grande distribution.
Chapitre 2 : HTML5
1. Le Web parle HTML
HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera
ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir
sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.
• HTML est un langage universel qui s'adapte à toutes les plateformes que ce soit Windows,
Macintosh, Unix, OS/2...
• Ses instructions seront différenciées de votre texte par les signes < et > par exemple. Ces
"instructions" s'appellent des tags ou des balises.
Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :
• Qu’une balise marque une action pour le browser (ce qu'il doit faire...).
• Que les attributs précisent les modalités de cette action (comment il doit le faire...)
2. Les outils de développement
Vous avez besoin :
• D’un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows
ou tout autre équivalent dans votre système d'exploitation (VS code)
• D’un navigateur comme Google Chrome
Télécharger VS Code sur https://code.visualstudio.com/download et l’installer, puis installer

l’extension « Live Server »
• Structure de base d’un document HTML

• La déclaration <!DOCTYPE html> définit que ce document est un document HTML5
• L'élément <html> est l'élément racine d'une page HTML.
• L'élément <head> contient des informations méta sur la page HTML.
• L'élément <title> spécifie un titre pour la page HTML (qui s'affiche dans la barre de titre du
navigateur ou dans l'onglet de la page).
• L'élément <body> définit le corps du document et sert de conteneur pour tous les contenus
visibles, tels que les titres, les paragraphes, les images, les hyperliens, les tableaux, les
listes, etc.
• L'élément <h1> définit un grand titre
• L'élément <p> définit un paragraphe
Vous trouverez ci-dessous une visualisation de la structure d'une page HTML :
3. Les différents HTML

3.1. Titres HTML
• Les titres HTML sont définis à l'aide des balises <h1> à <h6>.
• <h1> définit la rubrique la plus importante. <h6> définit l'intitulé le moins important :
3.2. Paragraphes HTML
• Les paragraphes HTML sont définis à l'aide de la balise <p> :

• La destination du lien est spécifiée dans l'attribut href.
3.3. Images HTML
• Les images HTML sont définies à l'aide de la balise <img>.

• Le fichier source (src), le texte alternatif (alt), la largeur et la hauteur sont fournis comme
attributs :
3.4. Styles HTML
• L'attribut HTML style est utilisé pour ajouter des styles à un élément, tels que la couleur, la
police, la taille, etc.
• Le style d'un élément HTML peut être défini à l'aide de l'attribut style.
• Exemple de couleur de fond :
• Utilisez l'attribut style pour donner du style aux éléments HTML.

• Utilisez background-color pour la couleur d'arrière-plan
• Utilisez color pour les couleurs de texte
• Utilisez font-family pour les polices de texte
• Use font-size pour les tailles de texte
• Utilisez text-align pour l'alignement du texte
3.5. Commentaires HTML
• Vous pouvez ajouter des commentaires à votre source HTML en utilisant la syntaxe suivante :
• Remarquez qu'il y a un point d'exclamation (!) dans la balise de début, mais pas dans la balise
de fin.
3.6. Liens HTML - L'attribut target

• On trouve des liens dans presque toutes les pages Web. Les liens permettent aux utilisateurs
de cliquer pour se déplacer d'une page à l'autre.
• Lorsque vous déplacez la souris sur un lien, la flèche de la souris se transforme en une petite
main.
• L'attribut le plus important de l'élément <a> est l'attribut href, qui indique la destination du lien.
• Par défaut, la page liée s'affiche dans la fenêtre actuelle du navigateur. Pour changer cela, vous
devez spécifier une autre cible pour le lien.
• L'attribut cible indique où ouvrir le document lié.
L'attribut cible peut avoir l'une des valeurs suivantes :

• _self - Valeur par défaut. Ouvre le document dans la même fenêtre/onglet que celle/celui qui
a été cliqué(e).
• _blank - Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
• _parent - Ouvre le document dans le cadre parent.
• _top - Ouvre le document dans le corps complet de la fenêtre
3.7. Tableaux HTML
• Cellules du tableau
Chaque cellule du tableau est définie par une balise <td> et </td>.
• Chaque ligne du tableau commence par une balise <tr> et se termine par une balise </tr>.
• En-têtes de tableau
Parfois, vous souhaitez que vos cellules soient des cellules d'en-tête de tableau. Dans ce cas,
utilisez la balise <th> au lieu de la balise <td> :
3.8. Les listes HTML
Les listes HTML permettent aux développeurs web de regrouper un ensemble d'éléments
connexes dans des listes.
• Liste HTML non ordonnée
Une liste non ordonnée commence par la <ul> balise. Chaque élément de la liste commence par
la balise <li>.
• Liste HTML ordonnée

Une liste ordonnée commence par la <ol>balise. Chaque élément de la liste commence par la
balise <li>.
3.9. L'élément <div>
• L'élément <div> est souvent utilisé comme conteneur pour d'autres éléments HTML.
• L'élément <div> n'a pas d'attributs obligatoires, mais style, class et id sont communs.
• Utilisé avec le CSS, l'élément <div> peut être utilisé pour donner du style à des blocs de
contenu :
3.10. Utilisation de l'attribut class

• L'attribut HTML class est utilisé pour spécifier une classe pour un élément HTML.
• Plusieurs éléments HTML peuvent partager la même classe.
• L'attribut class est souvent utilisé pour pointer vers un nom de classe dans une feuille de style.
• Dans l'exemple suivant, nous avons trois éléments <div> avec un attribut class ayant la valeur
"city".
• Les trois éléments <div> seront stylisés de la même manière selon la définition du style .city
dans la section head :
3.11. Attribut HTML id
• L'attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.
• Vous ne pouvez pas avoir plus d'un élément avec le même id dans un document HTML.
• L'attribut id est utilisé pour pointer vers une déclaration de style spécifique dans une feuille de
style.
• Il est également utilisé par JavaScript pour accéder et manipuler l'élément avec l'id spécifique.
Exercice
Réalisez la figure ci-après en utilisant l’attribut class en premier temps, puis l’attribut id
3.12. Formulaires HTML
Un formulaire HTML est utilisé pour recueillir les données de l'utilisateur. Le plus souvent, ces
données sont envoyées à un serveur pour être traitées.
L'élément <form>
L'élément HTML <form> est utilisé pour créer un formulaire HTML pour la saisie par
l'utilisateur :
• L'élément <form> est un conteneur pour différents types d'éléments de saisie, tels que : les
champs de texte, les cases à cocher, les boutons radio, les boutons d'envoi, etc.
L'élément <input>
• L'élément HTML <input> est l'élément de formulaire le plus utilisé.
Un élément <input> peut être affiché de plusieurs façons, en fonction de l'attribut type.
Champs de texte
• Le champ <input type="text"> définit un champ de saisie d'une seule ligne pour la saisie de
texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
• L'élément <label> est utile pour les utilisateurs de lecteurs d'écran, car ces derniers liront à
haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément de saisie.
• L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément <input> pour les lier
ensemble.
Boutons radio
• L'option <input type="radio"> définit un bouton radio.
• Les boutons radio permettent à l'utilisateur de sélectionner UN choix parmi un nombre limité
d'options.
Checkboxes
• Le <input type="checkbox"> définit une case à cocher.

• Les Checkboxes permettent à un utilisateur de sélectionner ZERO ou PLUS d'options parmi un
nombre limité de choix.
Le button Submit
• Le <input type="submit"> définit un bouton permettant de soumettre les données du
formulaire à un form-handler.
• Le form-handler est spécifié dans l'attribut action du formulaire.
• Notez que chaque champ de saisie doit avoir un attribut name pour être soumis.
• Si l'attribut name est omis, la valeur du champ de saisie ne sera pas envoyée du tout.
Chapitre 3 : CSS3 et le Responsive Web design
1. Qu'est-ce que le CSS ?
CSS est le langage que nous utilisons pour donner du style à une page Web.
• CSS signifie "feuilles de style en cascade" (Cascading Style Sheets)

• CSS décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur
d'autres supports.
• Les CSS permettent d'économiser beaucoup de travail. Il peut contrôler la mise en page de
plusieurs pages Web en même temps.
• Les feuilles de style externes sont stockées dans des fichiers CSS
2. Syntaxe du CSS
• Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration.
• Le sélecteur pointe vers l'élément HTML que vous voulez styliser.
• Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.
• Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.
Exemple
Dans cet exemple, tous les éléments <p> seront alignés au centre, avec une couleur de texte
rouge :
• p est un sélecteur en CSS (il pointe vers l'élément HTML que vous voulez styliser : <p>).
• color est une propriété, et le rouge est la valeur de la propriété
• text-align est une propriété, et center est la valeur de la propriété.
3. Sélecteur CSS id
• Le sélecteur id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
• Pour sélectionner un élément avec un id spécifique, écrivez un caractère dièse (#), suivi de l'id
de l'élément.
Exemple
La règle CSS ci-dessous sera appliquée à l'élément HTML avec id="para1" :
4. Sélecteur de classes CSS
• Le sélecteur de classe sélectionne les éléments HTML ayant un attribut de classe spécifique.
• Pour sélectionner des éléments ayant une classe spécifique, écrivez un point (.), suivi du nom
de la classe.
Exemple
Dans cet exemple, tous les éléments HTML avec class="center" seront rouges et alignés au centre
:
5. Le sélecteur universel CSS
• Le sélecteur universel (*) sélectionne tous les éléments HTML de la page.
Exemple
La règle CSS ci-dessous affectera chaque élément HTML de la page :
6. Le sélecteur de groupe CSS
• Le sélecteur de regroupement sélectionne tous les éléments HTML ayant les mêmes définitions
de style.
Exemple
Dans cet exemple, nous avons regroupé les sélecteurs :
7. Le module de positionnement CSS Grid
Le module de mise en page CSS Grid offre un système de mise en page basé sur une grille, avec
des lignes et des colonnes, ce qui facilite la conception de pages Web.
7.1. Elements d’un Grid
Une grille de mise en page se compose d'un élément parent, avec un ou plusieurs éléments
enfants.
7.2. Propriété d’affichage
Un élément HTML devient un conteneur de grille lorsque sa propriété display est définie sur grid
ou inline-grid.
7.3. Grid Columns
Les lignes verticales des éléments de la grille sont appelées colonnes.
7.4. Grid Rows

Les lignes horizontales des éléments de la grille sont appelées rangées.
7.5. Grid Gaps

• Les espaces entre chaque colonne/rangée sont appelés gaps.
• La propriété gap définit l'écart entre les colonnes et les lignes:
• Placez un élément de la grille à la ligne de colonne 1, et laissez-le se terminer à la ligne de colonne 3 :

• Placez un élément de la grille à la ligne 1, et laissez-le se terminer à la ligne 3 :
Exercice
1. Réalisez les figures suivantes en utilisant le CSS Grid
2. Implémentez et expliquez le module de positionnement FlexBox avec un exemple
concret.
8. Le Responsive design
La conception Web réactive consiste à créer des pages Web qui s'affichent bien sur tous les
appareils.
Un site web réactif s'adapte automatiquement aux différentes tailles d'écran et aux fenêtres
d'affichage.
8.1. Configuration du Viewport
Pour créer un site web réactif, ajoutez la balise <meta> suivante à toutes vos pages web :
Sans la balise meta viewport : Avec la balise meta viewport :
• Images responsives
Si la propriété CSS width est définie sur 100 %, l'image sera réactive et s'adaptera à la hauteur et
à la profondeur :
Si la propriété max-width est définie sur 100 %, l'image sera réduite si nécessaire, mais ne sera
jamais agrandie pour dépasser sa taille d'origine :
• Taille du texte responsives

La taille du texte peut être définie à l'aide d'une unité "vw", c'est-à-dire la "largeur de la fenêtre
d'affichage", de cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
8.2. Les media Queries

Avec les media Queries, vous pouvez définir des styles complètement différents pour différentes
tailles de navigateur.
Exemple
Chapitre 4 : Javascript
1. C’est quoi le Javascript ?
• JavaScript est un langage de programmation à utiliser dans les pages HTML

• Inventé en 1995 chez Netscape Corporation (LiveScript)
• JavaScript n'a rien à voir avec Java
• Les programmes JavaScript sont exécutés par un interpréteur intégré dans le navigateur web
de l'utilisateur et également sur le serveur Web.
• Tous les navigateurs modernes sont équipés d'un moteur javascript moteur
2. Utilisation du Javascript
Méthode de base pour exécuter un programme javascript.
• Inclure dans un fichier HTML, entre les balises <script> </script>
<script>
alert("Bonjour le monde") ;
</script>
• Javascript dans <head> ou <body>
2.1. Javascript dans la balise <head>

2.2. Javascript dans la balise <body>
2.3. Javascript dans un fichier externe
Nous créons le fichier myScript.js

• Les scripts externes sont pratiques lorsque le même code est utilisé dans de nombreuses
pages web différentes.
• Pour utiliser un script externe, placez le nom du fichier de script dans l'attribut src (source)
d'une balise <script> :
Avantages du JavaScript externe
• Il sépare le HTML et le code

• Il rend le HTML et le JavaScript plus faciles à lire et à maintenir.
• Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages
•
2.4. Affichage de données en JavaScript
• Utilisation de innerHTML
o Pour accéder a un élément HTML, le JavaScript utilise la méthode
document.getElementById(id)
o L'attribut id définit l'élément HTML.
• En utilisant console.log()
À des fins de débogage, vous pouvez appeler la méthode console.log() dans le navigateur
pour afficher les données.
2.5. La syntaxe JavaScript
La syntaxe JavaScript est l'ensemble des règles, comment les programmes JavaScript sont
construits :
2.5.1. Déclaration et affectation d’une variable
2.5.2. Les opérations arithmétiques
JavaScript utilise des opérateurs arithmétiques ( + - * / ) pour calculer des valeurs

2.5.3. Les commentaires
Le code après les doubles slashs // ou entre /* et */ est traité comme un commentaire.
2.5.4. Les variables en JavaScript
Les variables doivent (devraient) être déclarées avec le mot-clé var, let ou const.
3. Si vous voulez une règle générale : déclarez toujours les variables avec const.
4. Si vous pensez que la valeur de la variable peut changer, utilisez let
2.5.5. Opérateurs d'assignation JavaScript
Un exemple produisant le resultat « Hello World » dans la variable text

2.5.6. Types de données JavaScript
Exercice
Quels sont les types de variables utilisées au niveau des commentaires, donnez une description:
2.5.7. Les fonctions JavaScript
• La syntaxe d’une fonction JavaScript est la suivante :
Exemple
Calcule le produit de deux nombres, et renvoie le résultat :
• Quel est le résultat final de x ?
Exercice
Ecrire une fonction qui prend une température en degré Celsius et le convertit en Fahrenheit.
Le résultat doit être affiché sous forme d’alerte.
2.5.7. Tableaux JavaScript
• Un tableau peut contenir plusieurs valeurs sous un seul nom, et vous pouvez accéder aux
valeurs en vous référant à un numéro d'index.
• Vous accédez à un élément du tableau en vous référant à son numéro d'index :

Les methodes des tableaux
• La méthode JavaScript toString() convertit un tableau en une chaîne de valeurs de tableau

(séparées par des virgules).
Ajout et suppression des éléments
• La méthode pop() supprime le dernier élément d'un tableau :

• La méthode push() ajoute un nouvel élément à un tableau (à la fin) :
• Modifier un élément du tableau se fait à l’aide de son indexe
Exercice
Décrire et expliquer à l’aide d’un exemple, l’utilisation des méthodes suivantes :
Map, filter, reduce.
2.5.8. Les Objets JavaScript
Dans la vie réelle, une voiture est un Objet et une voiture a des propriétés telles que le poids,
la couleur etc.
• Les objets sont également des variables mais les objets contiennent plusieurs valeurs
• Exemple d’un objet personne
• Pour accéder aux propriétés des objets, il existe deux façons :

nomObjet.nomDeLaProprietee
let firstName = person.firstName
ou
nomObjet["nomDeLaProprietee"]
let firstName = person["firstName"]
• Les objets peuvent aussi avoir des méthodes.
• Les méthodes sont des actions qui peuvent être exécutées sur des objets.
• Pour accéder à la méthode, nous utilisons la syntaxe suivante :

nomObjet.nomMethode()
2.5.9. Les évènements JavaScript
• Les événements HTML sont des "choses" qui arrivent aux éléments HTML.
• Lorsque JavaScript est utilisé dans les pages HTML, il peut "réagir" à ces
événements.
• Voici quelques exemples d'événements HTML :
o Le chargement d'une page web HTML est terminé
o Un champ de saisie HTML a été modifié
o Un bouton HTML a été cliqué
• La syntaxe est la suivante :
Exemple
• Événements HTML courants
Événement Description
onchange Un élément HTML a été modifié
onclick L'utilisateur clique sur un élément HTML
onmouseover L'utilisateur déplace la souris sur un élément
HTML
onmouseout L'utilisateur éloigne la souris d'un élément
HTML.
onkeydown L'utilisateur appuie sur une touche du clavier
onload Le navigateur a fini de charger la page
Chapitre 5 : Patterns et technologies du Web 2.0
1. Architectures orientées services
L'architecture orientée services (ou SOA, Service-Oriented Architecture) est un modèle de

conception qui rend des composants logiciels réutilisables, grâce à des interfaces de services qui
utilisent un langage commun pour communiquer via un réseau.
• Un service est une unité autonome de fonctionnalité logicielle, ou d'un ensemble de

fonctionnalités, conçue pour réaliser une tâche précise comme récupérer des informations ou
exécuter une opération
• Vous pouvez y accéder à distance, et interagir avec lui ou le mettre à jour de manière
indépendante.
• En d'autres termes, l'architecture SOA permet à des composants logiciels déployés et gérés
séparément de communiquer et de fonctionner ensemble sous la forme d'applications logicielles
communes à différents systèmes.
• Le dépôt de services web (Web service repository) : Il s'agit d'une bibliothèque de services
web conçue pour répondre à des demandes d'informations externes. L'information fournie est
généralement un petit élément, comme un numéro, un mot, quelques variables, etc
• Le contrôleur de services web (Web service controller) : Ce module communique les
informations contenues dans le dépôt de services web aux demandeurs de services. Lorsqu'un
demandeur de service externe appelle une certaine fonction du dépôt de services web, le
contrôleur de services web interprète la demande et recherche la fonction dans le dépôt de
services web. Il exécute ensuite cette fonction et renvoie une valeur au demandeur.
• Le serveur de base de données (Database Server) : Ce serveur contient les tables, les index
et les données gérés par l'application. Les recherches et les opérations
d'insertion/suppression/mise à jour sont exécutées ici.
• Les demandeurs de services (Service Requester) : Il s'agit d'applications externes qui

demandent des services au dépôt de services web par l'intermédiaire d'Internet, comme une
organisation demandant des informations sur les vols à une compagnie aérienne, ou une autre
entreprise demandant à un transporteur la localisation d'un colis à un moment donné.
1.1. Les avantages par rapport aux approches conventionnelles
• Mise sur le marché accélérée et plus grande flexibilité : le caractère réutilisable des
services facilite et accélère le regroupement des applications. Les développeurs ne doivent
plus repartir de zéro à chaque fois, comme c'est le cas pour les applications monolithiques.
• Utilisation de l'infrastructure existante sur les nouveaux marchés : grâce à l'architecture
SOA, les développeurs peuvent plus facilement étendre et mettre à l'échelle les
fonctionnalités d'une plateforme ou d'un environnement.
• Coûts réduits grâce à une meilleure agilité et à un développement plus efficace
• Maintenance facilitée : les services étant autonomes et indépendants, ils peuvent être
modifiés et mis à jour autant que nécessaire, sans affecter les autres services.
• Évolutivité : comme l'architecture SOA s'adapte à plusieurs services, plateformes et

langages de programmation, l'évolutivité est considérablement accrue.
• Fiabilité améliorée : il est plus facile de déboguer des petits services plutôt qu'un long code,
ce qui permet de créer des applications plus fiables.
• Grande disponibilité : les fonctions de l'architecture SOA sont à la portée de tous.
1.2. Les API et les Web services (NodeJS)
Une API (application programming interface ou « interface de programmation d'application

») est une interface logicielle qui permet de « connecter » un logiciel ou un service à un autre
logiciel ou service afin d'échanger des données et des fonctionnalités.
• Une API REST (REpresentational State Transfer) est une interface de programmation
d'applications qui adhère aux contraintes du style architectural REST et permet l'interaction avec
des services web RESTful. Les réseaux interconnectés constituent le web.
•
• Un service web est un ensemble de protocoles et de normes ouverts utilisés pour échanger des
données entre des applications client-serveur. Les services web qui suivent l'architecture REST
sont connus sous le nom de services web RESTful.
• Les applications logicielles écrites dans divers langages de programmation et fonctionnant sur
diverses plates-formes peuvent utiliser les services web pour échanger des données sur des
réseaux informatiques tels que l'internet, d'une manière similaire à la communication
interprocessus sur un seul ordinateur.
2. Les Web services avec NodeJS (Express)
2.1. Mise en place d’un serveur Web
Avant de commencer, installer NodeJS : https://nodejs.org/en/download/
Créer un serveur pour écouter les requêtes http
Le serveur HTTP est au cœur de votre service Web. L'exemple de code figurant dans ce guide
gère les requêtes HTTP à l'aide du framework Express.js
• Créez un dossier nommé my-nodejs-service pour votre service Node.js

• Accédez au dossier de votre terminal et créez un fichier package.json en exécutant npm init.
• Exécutez la commande suivante afin d'ajouter Express comme dépendance :
• Vérifiez qu'Express apparaît dans le champ dependencies du fichier package.json. Exemple :

• Ajoutez un script start au fichier package.json
• Créez un fichier nommé server.js dans le même dossier et ajoutez le code suivant :
• Il s'agit d'un serveur Web très basique qui répond à toutes les requêtes GET envoyées au
chemin racine ('/') avec le texte "Hello from App Engine!"
• Notez que si process.env.PORT n'est pas défini, le port 8080 est utilisé par défaut.
• Cela est nécessaire pour tester l'application localement, car la variable
d'environnement process.env.PORT n'est pas définie pendant les exécutions locales.
Les requêtes et réponses sur ExpressJS

• Une application Express utilise une fonction de rappel dont les paramètres sont des objets de
demande et de réponse.
• Objet de requête (req) - L'objet de requête représente la requête HTTP et possède des
propriétés pour la chaîne de requête, les paramètres, le corps, les en-têtes HTTP, etc.
• Objet de réponse - L'objet de réponse représente la réponse HTTP qu'une application Express
envoie lorsqu'elle reçoit une demande HTTP.
Vous pouvez imprimer les objets req et res qui fournissent de nombreuses informations relatives
aux requêtes et réponses HTTP, notamment les cookies, les sessions, les URL, etc.
Execution
Pour exécuter le serveur localement :
1. Exécutez npm start dans votre terminal. Cela exécutera le fichier server.js.
2. Dans votre navigateur Web, accédez à l'URL http://localhost:8080.
Maintenant que vous avez créé un serveur Web Node.js simple, qui écoute le port approprié, vous
pouvez ensuite spécifier un environnement d'exécution dans un fichier app.yaml et vous êtes prêt
à déployer votre service sur App Engine de Google Cloud.
2.2. Routage des requêtes

Dans l’exemple précédant le serveur n’utilise qu’une seule méthode (GET) pour récupérer les
informations mais dans des applications réelles les web services implémentent un système de
routage pour permettre au client d’accéder a une ressource spécifique.
Le routage consiste donc à déterminer comment une application répond à une demande du
client vers un point de terminaison particulier, qui est une URI (ou un chemin) et une méthode de
demande HTTP spécifique (GET, POST, PUT, etc.).
Exemples
Exercice
Créer un web service qui permet de lister, créer, supprimer et modifier les utilisateurs. Vous
pouvez notamment utiliser une base de données MongoDB ou simplement simuler en utilisant
un fichier JSON, POSTMAN peut être utiliser pour le test de votre Web service.
3. Les bases de données

Avec notre amour et notre dépendance à l'égard des technologies de l'information, nous, les
humains, avons accumulé un grand nombre de données. Il est donc logique de disposer d'un
endroit où loger certaines d'entre elles. C'est là qu'interviennent les bases de données Web.
Conçue pour contenir une grande collection d'informations organisées auxquelles peuvent
accéder plusieurs utilisateurs avec une vitesse optimale et des frais de traitement minimes, nous
savons déjà qu'une base de données est un moyen pratique de stocker des informations. Mais
qu'est-ce exactement qu'une base de données Web ?
A web database is essentially a database that can be accessed from a local network or the
internet instead of one that has its data stored on a desktop or its attached storage.
3.1. MongoDB
MongoDB est une base de données documentaire. Elle stocke les données dans un type de
format JSON appelé BSON.
Les enregistrements d'une base de données MongoDB sont appelés des documents, et les
valeurs des champs peuvent inclure des nombres, des chaînes de caractères, des booléens,
des tableaux ou même des documents imbriqués.
Elle peut être installée localement ou hébergée dans le cloud
SQL et bases de données documentaires

• Les bases de données SQL sont considérées comme des bases de données relationnelles
• Ils stockent des données connexes dans des tables distinctes. Lorsque les données sont
nécessaires, elles sont interrogées à partir de plusieurs tables pour les réunir.
• MongoDB est une base de données documentaire, souvent appelée base de données non
relationnelle.
• Cela ne signifie pas que les données relationnelles ne peuvent pas être stockées dans des
bases de données documentaires. Cela signifie que les données relationnelles sont
stockées différemment.
• Au lieu de disposer de plusieurs tableaux, vous pouvez simplement regrouper toutes vos
données connexes. Cela rend la lecture de vos données très rapide.
3.2. Installation
Localement
https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/
En utilisant MongoDB Atlas

https://www.w3schools.com/mongodb/mongodb_get_started.php
3.3. Nodejs et MongoDB
1. Dans un dossier vide, exécutez la commande suivante :
Cette commande vous demandera divers détails, tels que le nom de votre projet, l'auteur, le
dépôt, etc. Elle générera ensuite un fichier package.json dans ce dossier.
2. Nous devons maintenant installer quelques dépendances.
Ici,
• Mongoose pour gérer les données dans MongoDB en utilisant diverses requêtes.
• Nodemon pour redémarrer notre serveur à chaque fois que nous sauvegardons notre fichier.
• Dotenv pour gérer un fichier .env.
3. Une fois leur installation terminée, créez un fichier nommé index.js. Ce sera le point d'entrée
de notre application. Le contenu sera le suivant :
’
• Maintenant, le serveur est réglé sur le port 3000. Écrivons le script pour démarrer notre serveur.
• Nous avons également ajouté le fichier app.use. A l'intérieur de celle-ci, nous avons un extrait
de code qui nous permet d'accepter les données au format JSON.
4. Dans le fichier package.json, ajoutez un script qui dit ce qui suit :
• Tapez npm start dans le terminal

5. Comment configurer la base de données MongoDB ?
• Rendez-vous sur le site https://account.mongodb.com/account/login et créez votre compte, ou

connectez-vous si vous en avez déjà un.
• Après s'être connecté, nous devons créer une base de données.
• Dans la page d'accueil du cluster, cliquez sur le bouton de connexion.
• La fenêtre suivante apparaitra

• Cliquez sur MongoDB Compass, et il vous renverra la chaîne suivante. Aussi, téléchargez et
installez MongoDB Compass.
• Ajoutez à cette chaîne votre nom d'utilisateur et votre mot de passe que vous avez déjà utilisés.
La chaîne de connexion finale ressemblera à ceci :
• Maintenant, dans MongoDB Compass, ajoutez également cette chaîne.
Ensuite, cliquez sur Connecter.
• Maintenant, importons le contenu de notre fichier .env dans le fichier script, index.js.
• Maintenant, nous devons envoyer un message de réussite ou d'erreur selon que notre
connexion à la base de données est réussie ou non.
Le code complet est :

Cours Tech Web - v2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Tech Web - v2

Transféré par

Droits d'auteur :

Formats disponibles

COURS

Les technologies web sont un ensemble de protocoles et spécifications qui composent et

Le Web permet le partage d'informations disséminées à travers le monde et leur échange en

La convention prévoit par exemple la transmission d´URL entre le navigateur et le serveur

Un serveur web supporte le protocole HTTP (HyperText Transfer Protocol: Protocole de

HTTP est un protocole textuel, sans état :

• Sans état : ni le serveur, ni le client ne se souviennent des communications précédentes.

Le principe est le suivant :

- HTML (HyperText Markup Language)

HTML, outre les dispositions graphiques, disposent de balises permettant de définir

- CSS (Cascading Style Sheet)

- DOM (Document Object Model)

- Javascript (ou ECMAScript)

Le langage de programmation implémenté pour les aspects dynamiques d'une page ou

2. Les outils de développement

Vous avez besoin :

Télécharger VS Code sur https://code.visualstudio.com/download et l’installer, puis installer

• Structure de base d’un document HTML

Vous trouverez ci-dessous une visualisation de la structure d'une page HTML :

3. Les différents HTML

3.2. Paragraphes HTML

• Les paragraphes HTML sont définis à l'aide de la balise <p> :

3.3. Images HTML

• Les images HTML sont définies à l'aide de la balise <img>.

• Utilisez l'attribut style pour donner du style aux éléments HTML.

3.5. Commentaires HTML

3.6. Liens HTML - L'attribut target

L'attribut cible peut avoir l'une des valeurs suivantes :

• Liste HTML ordonnée

3.10. Utilisation de l'attribut class

3.11. Attribut HTML id

• Le <input type="checkbox"> définit une case à cocher.

• CSS signifie "feuilles de style en cascade" (Cascading Style Sheets)

4. Sélecteur de classes CSS

6. Le sélecteur de groupe CSS

7. Le module de positionnement CSS Grid

7.1. Elements d’un Grid

7.3. Grid Columns

Les lignes verticales des éléments de la grille sont appelées colonnes.

7.4. Grid Rows

7.5. Grid Gaps

• Placez un élément de la grille à la ligne de colonne 1, et laissez-le se terminer à la ligne de colonne 3 :

8.1. Configuration du Viewport

• Taille du texte responsives

8.2. Les media Queries

• JavaScript est un langage de programmation à utiliser dans les pages HTML

Méthode de base pour exécuter un programme javascript.

• Inclure dans un fichier HTML, entre les balises <script> </script>

2.1. Javascript dans la balise <head>

2.3. Javascript dans un fichier externe

Nous créons le fichier myScript.js

Avantages du JavaScript externe

• Il sépare le HTML et le code

2.5.1. Déclaration et affectation d’une variable

2.5.2. Les opérations arithmétiques

JavaScript utilise des opérateurs arithmétiques ( + - * / ) pour calculer des valeurs

2.5.4. Les variables en JavaScript

Un exemple produisant le resultat « Hello World » dans la variable text

• La syntaxe d’une fonction JavaScript est la suivante :

2.5.7. Tableaux JavaScript

• Vous accédez à un élément du tableau en vous référant à son numéro d'index :

• La méthode JavaScript toString() convertit un tableau en une chaîne de valeurs de tableau

Ajout et suppression des éléments