1.
CHAPITRE 1
Les Étapes de Réalisation d’un
Site Web
Module : CREATION DES PAGES ET DES SITES WEB
International Private School of Technology of Fez 2021-2022
Dr. Mohammed OUADOUD
1

2.
Exemple 1 : Page Web statique sans BDD

3.
Exemple 2 : Page Web dynamique avec
BDD

4.
Exemple 3 : Page Web statique vs. Page
Web dynamique

5.
Base de données (BD ou BDD)
 Collection de données apparentées
 Une données est un « fait » qui peut être
enregistré et qui a un sens implicite
Exemples :
 Nom, num. de téléphone, adresses des personnes
 Films, programmes, horaires dans un cinéma…
 CD, DVD, livres… de la FNAC avec leurs pris, leur quantité en stock…
 Etudiants, enseignants, cours… dans une université

6.
Système de Gestion de Bases de Données
 Construire une BD =
 Organiser les informations
Stocker l’information sur
un médium de stockage qui
est contrôlé par le SGBD
 Manipuler une BD =
 L’interroger pour retrouver des données spécifiques
 La modifier pour refléter des changements du monde réel
 Produire des rapports (états) à partir des données

7.
Dr. M. OUADOUD
7
Le Software: Langages
Il y a plusieurs générations de langages de
programmation :
• Des langages de 1ère génération, s’adressaient aux
ordinateurs en langage binaire
• Des langages de 2ème génération, comme exemple le
langage assembleur qui s’adresse au microprocesseur
• Des langages de 3ème génération, ce sont des langages
procéduraux (Cobol, Pascal, langage C…), ou encore
orienté objet. Exemple : JAVA, C++
• Des langages de 4ème génération, Souvent associée à
des bases de données, en intégrant la gestion de
l’interface utilisateur et en proposant un langage moins
technique. Exemple : .Net, WebDev

8.
Compréhension
du problème
Programmation
Mise au point
Modèle des premières informatisations
Notion d’un Systèmed’information
Dr. M.OUADOUD
4

9.
Modèle des premières informatisations
Notion d’un Systèmed’information
Dr. M.OUADOUD
4
Ce modèle utilise donc trois étapes :
• Une brève étape de compréhension du problème du
système
• Une étape de programmation
• Une étape de mise au point en collaboration avec
l'utilisateur final
Mais ce modèle présente plusieurs problèmes
• Économise des étapes de modélisation et de conception

10.
Modèle en cascade
Notion d’un Systèmed’information
5
Dr. M.OUADOUD
• Avantages : Le planning est établi à l’avance et le maître d’ouvrage ou le chef de projet
sait précisément ce qui va lui être livré et quand il pourra en prendre livraison
• Inconvénients : le principal inconvénient est la très faible tolérance à l’erreur (les erreurs
sont détectées tardivement) qui induit automatiquement un coût important en cas
d’erreurs.

11.
Modèle en spirale
Notion d’un Systèmed’information
6
Dr. M.OUADOUD
 Avantages : Le but premier de ce modèle
étant la gestion des risques. Ce modèle est
très adaptatif : si chaque prototype apporte
des fonctionnalités indépendantes, il est
possible de changer l’ordre de livraison des
versions.
 Inconvénients : le principal défaut du cycle en
spirale c’est qu’il n’est adapté qu’aux projets
suffisamment gros, inutile de prévoir la
livraison de 5 ou 6 prototypes pour un site
vitrine sous WordPress. De plus l’évaluation
des risques en elle-même et la stricte
application du cycle de développement peut
engendrer plus de coûts que la réalisation du
logiciel. Enfin, ce type de cycle de
développement est complexe, entre les étapes
prévues en théorie et celles mises en pratique
il y a une grande différence.

12.
Modèle itératif
Notion d’un Systèmed’information
7
Dr. M.OUADOUD
• Avantages du modèle itératif : Ce type de cycle
de développement est le plus souple de tous
ceux présentés ici : chaque itération permet de
s’adapter à ce qui a été appris dans les itérations
précédentes et le projet fini peut varier du
besoin qui a été exprimé à l’origine. Comme
dans le cycle en spirale, la mise à disposition de
livrables à chaque cycle permet un apprentissage
de l’utilisateur final en douceur.
• Inconvénients du modèle itératif : le plus gros
piège de ce modèle de développement c’est la
confiance qui amène bien souvent à négliger les
test d’intégration. Ainsi les développeurs livrent
une nouvelle fonctionnalité sans se rendre
compte qu’ils ont cassé une chose qui
fonctionnait dans les cycles précédents. Il faut
donc que le chef de projet soit particulièrement
vigilant lors de la phase de tests.

13.
Modèle en V
Notion d’un Systèmed’information
8
Dr. M.OUADOUD

14.
Présentation de 2TUP
Contraintes
fonctionnelle
Contraintes
techniques
• Pourquoi 2TUP ?

15.
Présentation de 2TUP
Axe
fonctionne
l
Axe
technique
La réalisation
du système
consiste à
fusionner les
résultats des
deux branches

16.
Présentation de 2TUP

17.
Présentation de 2TUP
Du coté de la branche fonctionnelle :
• Capture des besoins fonctionnels : elle aboutit à un modèle des besoins focalisé sur le métier des
utilisateurs. Elle minimise le risque de produire un système inadéquat avec les besoins des
utilisateurs. De cette capture, la MOE consolide les spécifications et en vérifie la cohérence et
l’exhaustivité.
• Analyse : étude des spécifications afin de savoir ce que le système va réellement réaliser en termes
de métier. Découpage en composants.
Du coté de la branche technique :
• Capture des besoins techniques : recensement des outils, des matériels et des technologies à utiliser ;
des contraintes (temps de réponse maximal, contraintes d’intégration avec l’existant) -> tout cela va
aboutir à une première conception de l’architecture technique
• Conception générique : Découpage en composants nécessaires à la construction de l’architecture
technique. Il est généralement conseillé de réaliser un prototype pour assurer la validité de
l’architecture.
• Cette étape permet de minimiser l’incapacité de l’architecture technique à répondre aux contraintes
opérationnelles
Enfin, la branche du milieu :
• Conception préliminaire : étape délicate durant laquelle on intègre le modèle d’analyse dans
l’architecture technique. Le but ici est de savoir dans quel composant technique on met nos
fonctionnalités issues de l’analyse.
• Conception détaillée : conception de chaque fonctionnalité
• Etape de codage : phase de programmation de ces fonctionnalités, avec des tests au fur et à mesure
• Etape de recette : phase de validation des fonctions du système développé