PROGRAMMATION WEB

(PWEB)
Information du cours
• Crédits : 5
• Coefficient : 3
• Mode d’évaluation :
Contrôle continu (40%), Examen (60%)

Plan du cours
• Chapitre I : Introduction au Web
• Chapitre II : Langage HTML 5
• Chapitre III : Les feuilles de style CSS
• Chapitre IV : Le langage JavaScript
• Chapitre V : Le Langage PHP 7
• Chapitre VI : AJAX
• Chapitre VII : Déploiement d'un Site/Application Web
• Chapitre VIII : Utilisation des Framework

2
CHAPITRE I :
INTRODUCTION AU WEB
 RESEAU
Le réseau est un système permettant de relier deux ou plusieurs machines entre elles. Un réseau est
caractérisé par un aspect physique, constitué d'un ensemble de câbles véhiculant des signaux électriques, et
un aspect logique qui définit des règles de communication (des protocoles),

4
 INTERNET
Internet, parfois appelé simplement le net, est un système mondial de réseaux informatiques et de dispositifs
électroniques interconnectés qui communiquent entre eux à l'aide d'un ensemble de protocoles établis.

5
 SERVICES D’INTERNET
• Navigation Web (World Wide Web)
Exemples : Accéder à des sites comme Amazon, des blogs, ou des plateformes d’actualités.
• Messagerie Électronique (Email)
Exemples : Gmail, Outlook, Yahoo Mail.
• Messagerie Instantanée et Chat
Exemples : WhatsApp, Skype, Facebook Messenger, Telegram.
• Réseaux Sociaux
Exemples : Facebook, Instagram, Twitter, LinkedIn.
• Services de Streaming
Exemples : YouTube, Netflix, Spotify, Apple Music.
• Commerce en Ligne (E-commerce)
Exemples : Amazon, eBay, Etsy, Alibaba.
• Stockage en Ligne (Cloud Storage)
Exemples : Google Drive, Dropbox, OneDrive, iCloud.
• Services de Cartographie et de Navigation
6
Exemples : Google Maps, Waze, Apple Maps.
 WORLD WIDE WEB
Le World Wide Web (WWW) est apparu en 1991. Il a été créé par Tim Berners-Lee et ses évolutions sont
maintenant gérées par le W3C. C'est un système hypertexte public fonctionnant sur Internet et permettant de
consulter, avec un navigateur, des pages mises en ligne sur des sites. L'image de la toile provient des hyperliens qui
lient les pages Web entre elles. Il peut être vu comme un énorme système distribué composé de millions de clients
et de serveurs permettant d'accéder à des documents liés. Les serveurs gèrent des collections de documents,
tandis que les clients fournissent aux utilisateurs une interface facile à utiliser pour présenter et accéder à ces
7
documents.
DIFFÉRENCE ENTRE INTERNET ET LE WEB
Internet est un réseau global d’ordinateurs, tandis que le Web est une application qui utilise ce réseau pour
fonctionner. En d’autres termes, Internet est l’infrastructure sur laquelle repose le Web.

8
DIFFÉRENCE ENTRE INTERNET ET LE WEB

Internet World Wide Web

Infrastructure mondiale de réseaux interconnectés. Service accessible via Internet

Comprend de nombreux services comme l'email, le Centré sur la navigation sur des pages web via des
FTP, etc. navigateurs.
Utilise des protocoles comme TCP/IP pour la Utilise des protocoles comme HTTP/HTTPS pour
communication des données. accéder aux pages web.
Peut exister sans le Web (par exemple, envoyer un
Nécessite Internet pour fonctionner.
email)

9
ÉVOLUTION DU WEB

1990-2000 2000-2010 2010-2020 2020-Futur

10
 DÉFINITION D’UN SITE WEB
C’est un ensemble de pages web et de ressources reliées par des hyperliens, défini et accessible par une
adresse web depuis un navigateur Internet. Les pages sont reliées entre elles par des liens. Ces liens
permettent de naviguer sur le site et de passer d’une page à l’autre.

11
ARCHITECTURE D'UN
SITE WEB
Client/Serveur : Le modèle client-serveur
est au cœur de la programmation web. Le
client (navigateur) fait une demande au
serveur, qui traite cette demande et
renvoie une réponse.

12
 TYPES D'ARCHITECTURE
CLIENT-SERVEUR
• Architecture à un niveau : C'est un
environnement client-serveur où chaque
programme connecté est susceptible de jouer
tour à tour le rôle de client et celui de serveur..
• Architecture à 2 niveaux : c’est un
environnement client-serveur où le client
demande une ressource au serveur qui la fournit
à partir de ses propres ressources.
• Architecture à trois niveaux : ajoute un niveau
supplémentaire à l'architecture à 2 niveaux,
permettant de spécialiser les serveurs dans une
tâche précise, ce qui donne un avantage de
flexibilité, de sécurité et de performance
• Architecture N-niveaux : elle ajoute encore des
niveaux supplémentaires à l'architecture à 3
niveaux, permettant de spécialiser les serveurs
davantage. 13
COMPOSANTES ESSENTIELLES
1. Serveurs web : Il s'agit d'ordinateurs puissants qui stockent les fichiers des sites web et les transmettent
aux utilisateurs lorsqu'ils en font la demande. Les serveurs sont souvent situés dans des centres de
données et sont conçus pour traiter simultanément de nombreuses requêtes.
2. Navigateurs web : Il s'agit d'applications logicielles (comme Chrome, Firefox, Safari et Edge) que l'on utilise
pour accéder aux sites web. Les navigateurs interprètent et restituent le contenu reçu des serveurs web.
3. Noms de domaine : Il s'agit d'adresses lisibles par l'homme qui remplacent les adresses IP complexes et
facilitent l'accès des utilisateurs aux sites web. Par exemple, « www.google.com » est un nom de domaine.
4. DNS (Domain Name System) : Les serveurs DNS traduisent les noms de domaine en adresses IP. Lorsque
vous tapez une URL dans votre navigateur, les serveurs DNS la résolvent en l'adresse IP appropriée pour
localiser le serveur web.
5. HTTP (HyperText Transfer Protocol) : Le protocole de communication qui permet au client et au serveur
d'échanger des informations via des requêtes et des réponses.

14
COMMENT FONCTIONNE UN SITE WEB
(ARCHITECTURE CLIENT/SERVEUR)
• Que se passe-t-il dans les coulisses lorsque vous tapez une URL dans votre navigateur et que vous appuyez sur Entrée ?
1. Saisie d'une URL : Tout commence lorsque vous tapez une URL (Uniform Resource Locator) dans la barre d'adresse de
votre navigateur web ou que vous cliquez sur un lien hypertexte. Prenons « www.google.com » comme exemple d'URL.
2. Résolution DNS : Une fois que vous avez appuyé sur Entrée, votre navigateur envoie une requête DNS pour traduire le
nom de domaine (google.com) en adresse IP. Les serveurs DNS du monde entier collaborent pour fournir cette
traduction, ce qui permet à votre navigateur de localiser l'adresse IP du serveur web.
3. Établissement d'une connexion : Maintenant qu'il dispose de l'adresse IP, votre navigateur établit une connexion avec le
serveur web qui héberge le site demandé. Il le fait à l'aide du protocole HTTP (Hypertext Transfer Protocol) ou de son
équivalent sécurisé, HTTPS, si le site utilise le cryptage.
4. Demande de page web : Une fois connecté, votre navigateur envoie une requête HTTP au serveur web, en spécifiant la
ressource souhaitée (par exemple, la page d'accueil, une image ou une page spécifique).
5. Traitement de la requête : Le serveur Web reçoit la demande et recherche la ressource demandée dans son système de
fichiers. Cela peut impliquer l'exécution de scripts côté serveur (par exemple, PHP, Python ou Ruby) pour générer un
contenu dynamique basé sur la requête.

15
COMMENT FONCTIONNE UN SITE WEB
(ARCHITECTURE CLIENT/SERVEUR)
6. Envoi de la réponse : le serveur Web renvoie une réponse HTTP à votre navigateur. Cette réponse comprend le contenu
demandé, les codes d'état (succès ou erreur) et des métadonnées supplémentaires.
7. Rendu de la page : Votre navigateur web reçoit la réponse, interprète les fichiers HTML, CSS et JavaScript et rend la
page Web. Il combine ces technologies pour créer les éléments visuels et interactifs que vous voyez sur votre écran.
8. Demandes supplémentaires : Les pages Web comprennent souvent des ressources telles que des images, des feuilles
de style et des scripts hébergés sur différents serveurs ou domaines. Votre navigateur envoie des demandes
supplémentaires pour ces ressources afin de rendre la page complète.
9. Affichage de la page Web : Enfin, votre navigateur affiche la page Web, en combinant le texte, les images et les
éléments interactifs pour créer l'expérience de l'utilisateur. Vous pouvez maintenant interagir avec le site Web, cliquer
sur des liens et explorer son contenu.

16
COMMENT FONCTIONNE UN SITE WEB
(ARCHITECTURE CLIENT/SERVEUR)

17
 DÉFINITION DE LA PROGRAMMATION WEB
La programmation Web désigne l'ensemble des techniques et des outils utilisés pour créer des sites Internet et
des applications accessibles via un navigateur Web. Elle se divise en deux grandes catégories :
Front-end : Ce qui est visible par l'utilisateur, l'interface du site.
Back-end : La partie invisible, qui gère la logique, le traitement des données et la communication avec les
bases de données.
18
 Développement Front-end Développement Back-end
LES LANGAGES DE Le développement front-end concerne Le développement back-end est responsable de
l’aspect visuel du site web et son la gestion de la logique serveur et de la
PROGRAMMATION WEB interaction avec l'utilisateur : communication avec les bases de données :
• HTML (HyperText Markup • PHP, Python, Node.js (JavaScript côté
Language) : Le langage de balisage serveur), Ruby, Java ou C# sont des langages
Pour créer des sites Web, standard utilisé pour créer la souvent utilisés.
nous utilisons différents structure des pages Web.
• Bases de données : MySQL, PostgreSQL,
langages de développement, • CSS (Cascading Style Sheets) : Le MongoDB, etc. sont utilisées pour stocker et
chacun ayant une utilité langage utilisé pour définir le style gérer les données côté serveur.
spécifique. (mise en forme, couleurs,
disposition, etc.) des pages Web.
• JavaScript : Un langage de
programmation utilisé pour rendre
les pages interactives, gérer des
événements utilisateur, manipuler le
DOM (Document Object Model),
etc.

19
OUTILS ET TECHNOLOGIES DE
DÉVELOPPEMENT
• IDE et éditeurs de code : il s’agit d’un outil permettant d’écrire
son code, par exemple, Visual Studio Code, Sublime Text,
WebStorm
• Les bibliothèques : ce sont des morceaux de code écrits par
d'autres développeurs qui sont réutilisables pour gagner du
temps. Par exemple JQuery pour le langage JavaScript.
• Les frameworks : il s’agit de bibliothèques beaucoup plus
élaborées, qui permettent de structurer l’entièreté de son code,
comme un kit de construction ! Par exemple, Angular pour
JavaScript.

20
ÉLÉMENTS À PRENDRE EN COMPTE LORS DE LA CONCEPTION ET
DU DÉVELOPPEMENT D'UN SITE WEB
1. L’objectifs du site pour orienter le design, la navigation, et la fonctionnalité.
2. Identifier le public cible afin d’adapter l’interface utilisateur, la langue, la complexité, et la navigation.
3. Expérience utilisateur (UX pour User Experience) qui fait référence à l'ensemble des émotions, attitudes et perceptions
qu'un utilisateur éprouve lorsqu'il interagit avec un produit
4. Design et esthétique
5. Performance du site
6. Sécurité
7. Test et validation
8. Maintenance continue
9. Législation et conformité
10. Sélection du domaine et de l'hôte
11. Créer un site web responsive qui s'adapte automatiquement à la petite taille des smartphones.

21
MÉTIERS DU WEB

Le domaine du Web regroupe une large variété de métiers, chacun jouant un rôle spécifique dans la création, la gestion, la
maintenance et l'optimisation des sites Web et des applications Web. Nous citons quelques-uns :
• Développeur Web : ils utilisent les langages de programmation, pour coder le site ou l’application.
- Développeur front-end
- Développeur back-end
- Développeur full-stack
• Webdesigner : responsable de la conception graphique d'un site Web.
• Administrateur système Web : responsable de l'infrastructure technique d'un site Web.
• Testeur / Qualité Assurance (QA) : chargé de vérifier que le site Web fonctionne correctement, de repérer les bugs et de
s'assurer que les exigences techniques et fonctionnelles sont respectées.
• Développeur mobile : il développe des applications Android ou iOS.

22
POURQUOI APPRENDRE LE DÉVELOPPEMENT WEB

Les CMS (Content Management Systems) comme WordPress, Joomla ou Shopify simplifient grandement la création de sites
Web et permettent à des utilisateurs sans compétences techniques poussées de concevoir et gérer des sites rapidement.
Cependant, plusieurs raisons font qu'apprendre le développement Web reste pertinent, même avec la popularité des CMS.

• Flexibilité et personnalisation
• Performance et optimisation
• Sécurité
• Création d’applications web complexes
• Meilleure gestion des erreurs et des bugs
• Indépendance et autonomie

23