SlideShare une entreprise Scribd logo
1  sur  17
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
Exemple 1 : Page Web statique sans BDD
Exemple 2 : Page Web dynamique avec
BDD
Exemple 3 : Page Web statique vs. Page
Web dynamique
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é
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
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
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
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
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.
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.
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.
Modèle en V
Notion d’un Systèmed’information
8
Dr. M.OUADOUD
Présentation de 2TUP
Contraintes
fonctionnelle
Contraintes
techniques
• Pourquoi 2TUP ?
Présentation de 2TUP
Axe
fonctionne
l
Axe
technique
La réalisation
du système
consiste à
fusionner les
résultats des
deux branches
Présentation de 2TUP
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é

Contenu connexe

Similaire à Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx

2.2 cycles de vie
2.2 cycles de vie2.2 cycles de vie
2.2 cycles de vieHarun Mouad
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationStéphane Traumat
 
Introduction au Génie Logiciel
Introduction au Génie LogicielIntroduction au Génie Logiciel
Introduction au Génie Logicielguest0032c8
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphonyTonySARR1
 
Analyse des besoins et gestion des projets besoin.pdf
Analyse des besoins et gestion des projets besoin.pdfAnalyse des besoins et gestion des projets besoin.pdf
Analyse des besoins et gestion des projets besoin.pdfJordaniMike
 
coursABGP-miage-1112-4p1.pdf
coursABGP-miage-1112-4p1.pdfcoursABGP-miage-1112-4p1.pdf
coursABGP-miage-1112-4p1.pdfHervKoya
 
Une application sans framework en 2019
Une application sans framework en 2019Une application sans framework en 2019
Une application sans framework en 2019Rodrigue Villetard
 
Article de référence de Winston Royce
Article de référence de Winston RoyceArticle de référence de Winston Royce
Article de référence de Winston RoyceFabrice Aimetti
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciellauraty3204
 
UML Part1-Introduction Mansouri
UML Part1-Introduction MansouriUML Part1-Introduction Mansouri
UML Part1-Introduction MansouriMansouri Khalifa
 
Soubki projet
Soubki projetSoubki projet
Soubki projets1kor
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieMohammed Amine Mostefai
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Anne-Marie Pinna-Dery
 
PRESENTTION_DU_PROJET_DE_SUPER_021337.docx
PRESENTTION_DU_PROJET_DE_SUPER_021337.docxPRESENTTION_DU_PROJET_DE_SUPER_021337.docx
PRESENTTION_DU_PROJET_DE_SUPER_021337.docxAlbanHenovi
 
2.presentation merise
2.presentation merise2.presentation merise
2.presentation meriseshaheenyaar
 
Chp2 - Cahier des Charges
Chp2 - Cahier des ChargesChp2 - Cahier des Charges
Chp2 - Cahier des ChargesLilia Sfaxi
 
Resume theorique-m106-partie1-1401-620cd8a160396 (1)
Resume theorique-m106-partie1-1401-620cd8a160396 (1)Resume theorique-m106-partie1-1401-620cd8a160396 (1)
Resume theorique-m106-partie1-1401-620cd8a160396 (1)MounirAlaoui4
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learningEl Aber Haythem
 

Similaire à Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx (20)

2.2 cycles de vie
2.2 cycles de vie2.2 cycles de vie
2.2 cycles de vie
 
3 prototypage
3 prototypage3 prototypage
3 prototypage
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Introduction au Génie Logiciel
Introduction au Génie LogicielIntroduction au Génie Logiciel
Introduction au Génie Logiciel
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphony
 
Analyse des besoins et gestion des projets besoin.pdf
Analyse des besoins et gestion des projets besoin.pdfAnalyse des besoins et gestion des projets besoin.pdf
Analyse des besoins et gestion des projets besoin.pdf
 
coursABGP-miage-1112-4p1.pdf
coursABGP-miage-1112-4p1.pdfcoursABGP-miage-1112-4p1.pdf
coursABGP-miage-1112-4p1.pdf
 
Une application sans framework en 2019
Une application sans framework en 2019Une application sans framework en 2019
Une application sans framework en 2019
 
Article de référence de Winston Royce
Article de référence de Winston RoyceArticle de référence de Winston Royce
Article de référence de Winston Royce
 
2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel2-Cours de Géniel Logiciel
2-Cours de Géniel Logiciel
 
UML Part1-Introduction Mansouri
UML Part1-Introduction MansouriUML Part1-Introduction Mansouri
UML Part1-Introduction Mansouri
 
Soubki projet
Soubki projetSoubki projet
Soubki projet
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vie
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Lecon 1.1
Lecon 1.1Lecon 1.1
Lecon 1.1
 
PRESENTTION_DU_PROJET_DE_SUPER_021337.docx
PRESENTTION_DU_PROJET_DE_SUPER_021337.docxPRESENTTION_DU_PROJET_DE_SUPER_021337.docx
PRESENTTION_DU_PROJET_DE_SUPER_021337.docx
 
2.presentation merise
2.presentation merise2.presentation merise
2.presentation merise
 
Chp2 - Cahier des Charges
Chp2 - Cahier des ChargesChp2 - Cahier des Charges
Chp2 - Cahier des Charges
 
Resume theorique-m106-partie1-1401-620cd8a160396 (1)
Resume theorique-m106-partie1-1401-620cd8a160396 (1)Resume theorique-m106-partie1-1401-620cd8a160396 (1)
Resume theorique-m106-partie1-1401-620cd8a160396 (1)
 
Plateforme d’e learning
Plateforme d’e learningPlateforme d’e learning
Plateforme d’e learning
 

Chapitre 1 - Introcution & cycles de développement - Etudiant.pptx

  • 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
  • 15. Présentation de 2TUP Axe fonctionne l Axe technique La réalisation du système consiste à fusionner les résultats des deux branches
  • 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é