DRBMK/ISTA OUEDZEM
2022-2023
EXAMEN BLANC
FILIERE : DEVOWFS 201 EPREUVE : SYNTHESE DUREE : 5H NOTE : 140points
Partie 1 : Théorie 60points
Préparer un projet web 40points
1. (4points)
Vous êtes chargé de concevoir un système de réservation en ligne pour une compagnie
aérienne. Le système doit permettre aux utilisateurs de rechercher des vols, réserver des
billets et gérer leurs réservations. Identifiez les acteurs et les cas d'utilisation pertinents, puis
représentez-les sous la forme d'un diagramme de cas d'utilisation UML.
2. (4points)
Vous êtes chargé de concevoir un système de gestion de bibliothèque en ligne. Le système
doit permettre aux utilisateurs de rechercher des livres, emprunter des livres, rendre des
livres et gérer leur compte. Identifiez les acteurs et les cas d'utilisation pertinents, puis
représentez-les sous la forme d'un diagramme de cas d'utilisation UML.
3. (4points)
Une classe appelée "Personne". La classe "Personne" possède deux attributs : "nom" de type string et
"âge" de type int. La classe "Personne" possède également deux méthodes publiques :
"sePresenter()" et "calculerAge()". La méthode "sePresenter()" permet à une instance de "Personne"
de se présenter en affichant son nom. La méthode "calculerAge()" permet de calculer l'âge de la
personne. Présenter la classe Personne.
4. (12points)
Vous êtes chargé de concevoir un système de gestion de flotte de véhicules. Le système doit
permettre de gérer différents types de véhicules tels que des voitures et des motos. Chaque véhicule
possède un numéro de série, une marque et un modèle. Les voitures ont également un nombre de
portes et une puissance spécifiques, tandis que les motos ont une cylindrée et un type particuliers.
Les véhicules doivent pouvoir être démarrés et arrêtés. Les voitures doivent pouvoir ouvrir et fermer
leur toit, tandis que les motos doivent pouvoir effectuer un wheeling.
Identifiez les classes, les attributs et les méthodes appropriés, puis représentez-les sous la forme d'un
diagramme de classes UML.
5. (16points)
On souhaite modéliser le processus de réservation d'une chambre d'hôtel en utilisant un diagramme
de séquence. L'interaction se déroule entre un client et le système de réservation de l'hôtel. Voici les
étapes :
1. Le client entre dans l'hôtel et se rend au bureau de la réception.
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
2. Le client demande une réservation pour une chambre spécifique et fournit ses
informations personnelles (nom, dates de séjour, etc.).
3. Le réceptionniste vérifie la disponibilité de la chambre demandée.
4. Si la chambre est disponible, le réceptionniste enregistre la réservation et attribue
un numéro de réservation unique.
5. Le réceptionniste confirme la réservation au client et lui fournit le numéro de
réservation.
6. Le client effectue le paiement pour la réservation.
7. Le réceptionniste confirme le paiement et génère un reçu.
8. Le client reçoit le reçu et quitte la réception
Approche Agile : 10points
Exercice 2 : 10points
1. Qu'est-ce que l'approche agile ?
2. Quels sont les principes fondamentaux de l'approche agile
3. Quelles sont les méthodologies agiles les plus populaires
4. Comment fonctionne la méthodologie Scrum ?
5. Quelles sont les avantages de l'approche agile ?
NOSQL <<mongodb>>
Exercice 3 : 24points
Une collection de documents représentant des produits dans une base de données e-commerce.
Chaque document contient des informations sur un produit, telles que son nom, sa catégorie et son
prix. Voici un exemple de quelques documents dans la collection :
"nom": "iPhone 12",
"catégorie": "Téléphones",
"prix": 1099
"nom": "Samsung Galaxy S21",
"catégorie": "Téléphones",
"prix": 999
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
"nom": "Sony PlayStation 5",
"catégorie": "Jeux vidéo",
"prix": 499
1. Récupérer tous les produits dont le prix est supérieur à 500
2. La requête pour récupérer tous les produits de la catégorie "Téléphones" dont le prix
est inférieur à 1000.
3. Récupérer tous les produits dont le nom contient le mot "Samsung"
4. Récupérer tous les produits dans l'ordre croissant de leur prix
5. Récupérer le nombre total de produits dans la collection
6. Pour accélérer les recherches dans une base de données NoSQL, telle que MongoDB,
quel moyen utiliser ?
Exercice 4 : 24points
Dans une base de données MongoDB contenant une collection appelée "utilisateurs". Chaque
document dans cette collection représente un utilisateur et a les champs suivants : "nom" (nom de
l'utilisateur), "age" (âge de l'utilisateur) et "ville" (ville de résidence de l'utilisateur).
Votre tâche consiste à écrire un script Python qui effectue les opérations suivantes :
1. Se connecter à la base de données MongoDB.
2. Insérer 3 nouveaux utilisateurs dans la collection "utilisateurs" avec des informations
de votre choix.
3. Afficher tous les utilisateurs de la collection.
4. Mettre à jour l'âge d'un utilisateur spécifique.
5. Supprimer un utilisateur spécifique.
6. Afficher à nouveau tous les utilisateurs mis à jour.
MYSQL
Exercice 5 :16points
On souhaite développer une application qui permet de gérer les journées d'information
et de présentation au profit des élèves des Ecoles :
L'analyse et la conception a permis l'élaboration du schéma relationnel suivant :
Delegation(CodeDeleg, Intitule,Adresse)
Etablissement (NumEtab, NomEtab , Ville,#CodeDeleg)
Orienteur (Matricule, Nom, Prenom, #NumEtab, nombreEvenements, Login)
Ecole (Numcole, NomEcole, Adresse , Ville)
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
Events (#Matricule,#NumEcole, DateEvent,Days)
NB : Les clés primaires sont soulignées et en gras et les clés étrangères sont préfixé par #.
1- Proposer un modèle conceptuel de données (MCD) correspondant au schéma
relationnel ci-dessus.
2- Ecrire le code permettant la création de la table Events (on suppose que les autres
tables sont déjà créées) et sachant que :
- DateEvent est un champ obligatoire.
- Days prend par défaut la valeur 1
3- Ecrire une requête permettant d'ajouter la contrainte suivante à la table
Etablissement (on suppose que la table est déjà créée).
Le champ ville doit accepter uniquement les valeurs suivantes : ouedzem,
khouribga ou BeniMelllal.
4- Ecrire la procédure OrienteurVille(), qui admet en paramètre le nom de la ville et
qui affiche les informations de l’Orienteur (Nom et Prénom de l’Orienteur et le
Nom de son Etablissement).
Exercice 6 : 8points
Donner les commandes npm pour :
a) Vérifier Si Node.Js est Correctement Installé.
b) Installer Create React App
c) Créer un nouveau projet React
d) Démarrer le serveur de développement
Partie 2 : Pratique 80points
PRATIQUE : Front-End 40points
Création d'une galerie d'images avec React
Objectif : L'objectif est de créer une galerie d'images à l'aide de React. L'application devrait afficher
une liste d'images et permettre aux utilisateurs de les agrandir en cliquant dessus.
Instructions :
a) Initialisation du projet :
Utilisez Create React App (CRA) pour créer un nouveau projet React appelé "image-
gallery".
Accédez au répertoire du projet et lancez l'application pour vous assurer que tout
fonctionne correctement.
b) Mise en place de la structure de l'application :
Créez un composant principal appelé ImageGallery qui sera responsable de
l'affichage global de la galerie d'images.
À l'intérieur de ImageGallery, créez un composant appelé ImageItem qui
représentera chaque image de la galerie.
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
Dans ImageItem, affichez l'image à l'aide de la balise <img> en utilisant une URL ou
un chemin d'accès local.
c) Affichage de la galerie d'images :
Créez un tableau d'objets qui contiendra les informations sur les images, telles que
l'URL ou le chemin d'accès et une description.
Dans ImageGallery, itérez sur le tableau d'objets et affichez chaque image en utilisant
le composant ImageItem.
Affichez la description de chaque image en dessous de celle-ci.
d) Fonctionnalité d'agrandissement des images :
Ajoutez un état dans ImageGallery pour suivre l'image actuellement agrandie.
Lorsque l'utilisateur clique sur une image, mettez à jour l'état pour afficher l'image
agrandie.
Affichez l'image agrandie dans un composant modal ou dans une nouvelle
page/route.
Fonctionnalités supplémentaires :
Ajoutez des fonctionnalités de pagination pour afficher un nombre limité d'images
par page.
Ajoutez des fonctionnalités de tri ou de filtrage pour permettre aux utilisateurs de
trier ou de filtrer les images en fonction de critères spécifiques, tels que la date, la
catégorie, etc.
Implémentez une fonctionnalité de téléchargement pour permettre aux utilisateurs
d'ajouter de nouvelles images à la galerie.
Conseils :
Utilisez les concepts de gestion des états (state) et de gestion des événements (event
handling) de React pour mettre en œuvre les fonctionnalités requises.
Utilisez des props pour passer les informations des images aux composants enfants.
Divisez votre application en composants réutilisables et veillez à bien organiser votre
code.
Expérimentez avec le CSS pour rendre votre galerie d'images attrayante.
PRATIQUE : back-End 40points
On veut créer une application de gestion des tâches en utilisant le framework Laravel dans le modèle
MVC (Modèle-Vue-Contrôleur). L'application devrait permettre aux utilisateurs de créer de nouvelles
tâches, de les marquer comme terminées et de les supprimer de la liste des tâches.
Instructions :
a) Configuration initiale :
Installez Laravel sur votre machine en suivant la documentation officielle.
Créez un nouveau projet Laravel appelé "task-manager".
b) Mise en place du modèle :
Créez une migration pour la table "tasks" contenant les colonnes nécessaires, telles
que "title", "description", "completed", etc.
Exécutez la migration pour créer la table dans la base de données.
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
Créez un modèle "Task" correspondant à la table "tasks" en utilisant la commande
artisan make:model.
Définissez les relations éventuelles avec d'autres modèles si nécessaire.
c) Mise en place des contrôleurs :
Créez un contrôleur "TaskController" en utilisant la commande artisan
make:controller.
Implémentez les méthodes nécessaires pour gérer les fonctionnalités CRUD (Create,
Read, Update, Delete) des tâches.
Dans chaque méthode, utilisez le modèle "Task" pour effectuer les opérations
correspondantes sur la base de données.
d) Mise en place des routes :
Définissez les routes dans le fichier "routes/web.php" pour les différentes actions
liées aux tâches, telles que l'affichage de la liste des tâches, la création d'une nouvelle
tâche, la mise à jour d'une tâche existante, et la suppression d'une tâche.
Associez les routes aux méthodes correspondantes du contrôleur "TaskController".
e) Mise en place des vues :
Créez les vues nécessaires pour afficher l'interface utilisateur de l'application.
Utilisez les balises Blade de Laravel pour afficher les données provenant du
contrôleur.
Créez un formulaire pour la création d'une nouvelle tâche et liez-le à la route
correspondante.
Affichez la liste des tâches existantes avec les boutons permettant de les marquer
comme terminées ou de les supprimer.
Autres :
Ajoutez une pagination à la liste des tâches pour afficher un nombre limité de tâches
par page.
Implémentez une fonctionnalité de filtrage pour afficher uniquement les tâches
terminées ou non terminées.
Ajoutez des fonctionnalités d'authentification pour permettre aux utilisateurs de se
connecter et de gérer leurs propres tâches.
Conseils :
Familiarisez-vous avec la documentation officielle de Laravel pour utiliser
efficacement les fonctionnalités du framework.
Utilisez les migrations pour gérer la structure de la base de données et les modèles
pour interagir avec les données.
Utilisez les contrôleurs pour gérer la logique de l'application et les routes pour définir
les points d'entrée
Proposé par : SAMIR ISMAILI –ISTA OUEDZEM- JUIN 2023
