Programmation Web Introduction

Technologies de développement Web et

Architectures de déploiement

Par
El hassan Abdelwahed
Département d’Informatique
Faculté des Sciences Semlalia Marrakech
 QCM

Affirmation correcte à propos du Web et Internet ?

A – Internet est une partie du Web

B – Web est une partie de l’Internet
C – Web pour la description du contenu et Internet pour son acheminement
D – Internet pour la sauvegarde du contenu et Web pour sa visualisation
E – Toutes les réponses précédentes

Dans http://www.soc.com/index.html, http désigne :

A – Un document sur le Web

B – Une machine sur Internet
C – Un protocole de communication
D – Toutes les réponses précédentes

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 2

 Difference(s) entre Web et Internet ?

Dans le langage courant, les termes WEB et INTERNET sont souvent utilisés comme des
synonymes. Pourtant, ils ne désignent pas la même chose et ne sont pas interchangeables.

Vint Cerf

Tim Berners-Lee

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 3

 Difference(s) entre Web et Internet ?

L'Internet est un système global de réseaux (publiques ou privées) d’ordinateurs

interconnectés à l'échelle du monde (Réseau Global, WAN). Internet utilise le protocole IP
(Internet Protocol) pour l’acheminement de données de différents formats. Internet a de
multiples usages comme le partage de fichiers, la messagerie instantanée, la téléphonie, l'envoi
de courrier électronique, le téléchargement de fichiers (musique, films) et la navigation sur le
WEB.

Le WEB (World Wide Web ou toile mondiale), est un système d'information, basé sur
INTERNET, qui permet aux utilisateurs de naviguer et d'accéder à des documents (appelés
pages Web) via des liens hypertextes. Le Web est une application répartie qui permet de
publier et consulter des informations via INTERNET. Le Web n'est pas l'Internet mais sa
principale application.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 4

 Difference(s) entre Web et Internet ?

Technologies Internet Technologies WEB

TCP/IP, HTTP, … etc. HTML, CSS, Angular JS, … etc.

Fibre optique, Wifi, … etc. JavaScript, React JS, Node JS, PHP, … etc.
Serveurs, Routeurs, … etc. Réseaux Sociaux, Sites Web, … etc.
LAN, WAN, … etc.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 5

 Composants d’une architecture Internet

Internet Fournisseur d’accès (IAM, … etc.)

Fibre Optique

Entreprise WebMar Modem

Routeur IP : 81.192.32.97
Serveur(s)
FTP, Mail, Web, etc.
Switch
IP : 81.192.32.100
DNS : softmar.co.ma
Firewall (Passerelle)
IP : 81.192.32.98
IP : 192.168.100.1

Switch

Switch Switch

Département A Département B

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 6

 Web & HTM (Hyper Text Markup Language)
Proposé par Tim Berners-Lee (CERN, Centre Européen pour la Recherche Nucléaire) en 1989
HTML est une application du langage SGML (Stantard Generalized Markup Langage)
Les principaux objectifs derrière le développement de HTML:
Spécifier la structure documentaire (marquage) ,
Gestion et partage grande quantité d’information au sein de documents hébergés dans des serveurs
Docuemnts interconnectés par les liens hypertextes

Langage de description de document multimédia sur le Web : textes, images, sons, vidéos, animations, ...etc.

Info.cern.ch est l'adresse du tout premier site et serveur (hébergé sur un ordinateur NeXT du CERN).
La première page web avait pour adresse http://info.cern.ch/hypertext/WWW/TheProject.html.
Le premier serveur web aux États-Unis , 1991 au Centre de l'accélérateur linéaire de Stanford (SLAC), en Californie.
Début 1993, le Centre NCSA de l'université de l'Illinois, mit en service une première version de son navigateur MOSAIC.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 7

 QCM

Pour accéder à une machine à distance via Internet, cette machine

doit avoir ?
A – Une adresse IP privée B – Une adresse IP ouverte
C – Une adresse IP globale D- Une adresse IP publique

Une passerelle connecte les réseaux LAN et WAN d’une entreprise, il

doit posséder ?

A – Deux adresses IP privées

B – Une adresse IP privée et Une adresse IP publiques
C – Deux adresses IP publiques
D- Aucune adresse IP

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 8

 QCM

Une machine ayant une adresse IP privée est :

A – Accessible seulement sur le réseau interne de l’entreprise (LAN)

B – Accessible seulement sur le réseau externe de l’entreprise (WAN)
C – Accessible sur les deux réseaux interne (LAN) et externe (WAN)
D- Aucune des réponses précédentes

Le rôle du Pare-feux (ou firewall) dans une réseau Internet d’une

entreprise:

A – Protéger les réseaux informatiques contre les attaques malveillantes

B – Contrôler les entrées et sorties de données en se basant sur des règles
prédéfinies
C – Les réponses A et B
D- Aucune des réponses précédentes (A, B et C)

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 9

 Evolution des Architectures

Architecture Mainframe

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 10

 Evolution des Architectures

Architecture Client/Serveur - Réseau Local (LAN)

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 11

 Evolution des Architectures

Architecture d’application Web (3 Tiers) - Réseau Global (WAN: Internet)

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 12

 QCM

Une architecture client/serveur est déployée dans un réseau :

A – Local (LAN)
B – Global (WAN)
C- Aucune des réponses précédentes

Une architecture 3 Tiers est déployée dans un réseau :

A – Local (LAN)
B – Global (WAN)
C- Aucune des réponses précédentes

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 13

 Evolution des Architectures: Virtualisation

Infrastructures
Ressources de Stockage et de traitement
( DD, CPU, … etc.)

Externalisation
Plateformes
OS, SGBD, … etc.

Services
Application métier, … etc.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 14

 Evolution des Architectures: Cloud

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 15

 Evolution Technologies & Usages du Web

- LAN, WAN: Réseaux d’ordinateurs , Architecture client/serveur, …etc.

- Web 1.0, Web informationnel: Pages (ressources) connectées, Internat, Portails, … etc.

Publication Utilisation

WEB Informationnel

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 16

 Evolution Technologies & Usages du Web

- Web 2.0, Web collaboratif: Utilisateurs connectés, E-service, Réseaux sociaux, … etc.

Publication, Utilisation, Génération

WEB Collaboratif

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 17

 Evolution Technologies & Usages du Web

- Web 3.0, Web sémantique: Ordinateurs connectés, Traitements automatique, … etc.

Machines Intelligentes

WEB Sémantique

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 18

 Evolution Technologies & Usages du Web

- Web 4.0, Web pervasive : Objets connectés , IoT, Cloud, … etc.

Tout est connecté: Utilisateurs, Machines, Objets

WEB Pervasif (Omniprésent)

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 19

 Evolution des Architectures: Cloud & Big Data

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 20

 QCM

Clefs du succès d’un site Web :

A – Visibilité (référencement d’un les moteurs de recherche, …)
B – Audience et amélioration du nombre des visiteurs
C – Aligner les actions des visiteurs sur les objectifs du site
D – Toutes les réponses précédentes

16. Affirmation correcte à propos du Web participatif ?

A – Les internautes peuvent contribuer à l'échange d'informations
B – Les internautes peuvent interagir (partager, échanger, etc.)
C – L'internaute devient, plus actif sur le Web
D – Toutes les réponses précédentes

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 21

 QCM

Web sémantique ?
A – Technologies de description plus riche du contenu Web
B – Troisième version des technologies Web
C – Techniques intelligentes d’échanges des données sur Internet
D- Aucune des réponses précédentes

Web ubiquitaire ?
A – Assure un accès omniprésent aux informations pour les utilisateurs
B – Interaction entre l’humain et les dispositifs digitaux (informatique) est de
plus en plus fluide
C – Les dispositifs digitaux (IoT, la réalité augmentée, …) sont plus intégrés à
notre quotidien
D – Toutes les réponses précédentes

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 22

 Composants d’une application Web
Modèle, Vue et Contrôleur

MVC signifie Modèle-Vue-Contrôleur, qui est un modèle de conception pour les applications
web et mobiles. Dans ce modèle, les données et les algorithmes sont séparés de l'interface
utilisateur.

• Le Modèle représente les données de l'application et les algorithmes utilisés pour les
manipuler.
• La Vue est ce que voit l'utilisateur, c'est-à-dire l'interface utilisateur.
• Le Contrôleur gère les interactions entre la Vue et le Modèle en déterminant comment les
données du Modèle doivent être présentées dans la Vue et comment les actions de
l'utilisateur dans la Vue doivent être traitées.

L'objectif de ce modèle est de rendre le code plus organisé, facile à maintenir et à étendre. Il
sépare également les préoccupations pour une meilleure compréhension et une maintenance
plus facile.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 23

 Composants d’une application Web
Modèle, Vue et Contrôleur

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 24

 Composants d’une application Web
Modèle, Vue et Contrôleur

Back End
Front End
Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 25
 Framework

Définition
Un Framework (cadre de travail) est un ensemble de librairies (bibliothèques logicielles),
d'outils et de conventions qui fournissent une structure (squelette ou canevas), souvent
accompagné d’une documentation sur l’architecture du Framework, pour développer des
applications plus rapidement et de manière plus cohérente.

Objectifs pratiques d’un Framework

• Un Framework fournit des bibliothèques contenants des composants fiables et testés
aidant les développeurs à éviter les erreurs fréquentes et à produire du code plus fiable.
• Un Framework permet d’homogénéiser les pratiques de développement au sein d’une
équipe de projet en proposant des règles de programmation cohérentes et des conventions
prédéfinies (des règles de programmation basées par exemple sur les design patterns)
• L’organisation et la structure du Framework vise la productivité maximale du développeur
• Un Framework propose une méthodologie et une organisation du travail qui permet de
maintenir un code source organisé

Framework: Quelques exemples usuels

• JQuery, React JS, Angular JS, Ember, Vue.js, … etc.
• Laravel, Symphony, Django, Spring, Express JS, Flask, … etc.

Attention: Framework n’est pas un langage de programmation.

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 26
 QCM

Dans une architecture MVC, le backend d’une application est composé

de :
A – M et V B – V et C C – M et C

Un framework :
A- Permet d’homogénéiser les pratiques de développement au sein d’une
équipe de projet
B- Propose des règles de programmation cohérentes et des conventions
prédéfinies
C- Fournit des bibliothèques contenantes des composants fiables et testés
D- Réponses (B, C)
E- Toutes des réponses précédentes (A, B, C)

Laravel est un langage de programmation très utilisé dans le

développement Web :
A – Oui B – Non

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 27

 Exemples de technologies & Langages Web

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 28

 Langages de développement

Top 10 des langages les plus populaires en générale (à gauche) pour le développement de sites
et applications web (à droite) en 2021 selon l'IEEE
Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 29
 QCM

Le Développeur Back-End ?
A – En charge des fonctionnalités d'un site web
B – Ne s'occupe pas de l'aspect ergonomique du site
C – Utilise des langages de programmation (Java, Python, PHP, Ruby, … etc.)
D- Toutes les réponses précédentes

Technologies non utilisées dans la partie Front-End ?

A – HTML, JavaScript, ReactJS, Symfony
B – AngularJS, CSS, Laravel
C – XML, Node JS, .NET
D- Aucune des réponses précédentes

Programmation Web - PHP El Hassan Abdelwahed, FSSM, UCAM 30