-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathRapport.html
More file actions
532 lines (496 loc) · 27.8 KB
/
Rapport.html
File metadata and controls
532 lines (496 loc) · 27.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rapport de Projet - Gestion des Emplois du Temps</title>
</head>
<style>
body {
background: #E6F4F1;
font-family: Arial, sans-serif;
padding: 10px 10%;
}
header {
text-align: center;
}
h1 {
font-size: 40px;
font-weight: 500;
}
h1,
h2,
h3 {
color: #333;
}
h2 {
font-size: 30px;
text-align: center;
}
footer {
text-align: center;
margin-top: 50px;
color: #999;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
justify-items: center;
}
li {
word-spacing: 3px;
}
.installation li {
margin-top: 20px
}
.text-green {
color: green
}
.manual p,
.manual h3:not(h3.title) {
padding-left: 5%
}
section { border-top: 3px solid silver; margin: 50px 0}
</style>
<body>
<header>
<h1>Rapport de Projet - Gestion des Emplois du Temps</h1>
<h2>GROUPE N°4</h2>
<h3>Membres (participation en %)</h3>
</header>
<div class="container">
<section>
<ol class="section1">
<li>ACOSSINOU Marcel - 8%</li>
<li>AMOKI Léonce - 8%</li>
<li>ASSOGBA Lauriano - 8%</li>
<li>AZONNOUNDO Houéfa - 8%</li>
<li>AZAMMAN Hosnel - 10%</li>
<li>HOUNKPE Carlos - 3%</li>
</ol>
</section>
<section class="section2">
<ol start="7">
<li>KIDJE Elfried Fortunatus - 20%</li>
<li>KPADE Akouavi - 8%</li>
<li>SANNI Adéchinan - 8%</li>
<li>TCHEFFA Pretty - 8%</li>
<li>TOCHOEDO Gbènakpon - 3%</li>
<li>VLAVONOU Lauviah - 8%</li>
</ol>
</section>
</div>
<section>
<h2>Mode de fonctionnement interne du groupe</h2>
<p style="font-size: 24px;">Pour la réalisation de notre projet de gestion des emplois du temps, notre équipe a
adopté une approche
collaborative et divisé les responsabilités entre les membres de la manière suivante:<br>
</p>
<h3> ACOSSINOU Marcel </h3>
<p>
Il a aidé pour l'invitation du logo, la gestion des couleurs, leur valeur, leur
importance ainsi que
l'aspect de l'application bien qu'il ait participé un peu au front-end à travers sa page de connexion et
celle de login.
</p>
<h3> AMOKI Léonce </h3>
<p>
En collaboration avec Hosnel et Fabrice s'est chargé de la gestion des erreurs dans le
front-end.
</p>
<h3> ASSOGBA Lauriano </h3>
<p>
Il était chargé d'organiser et de superviser les
activités du groupe ce qu'il a bien fait depuis le début nous permettant ainsi d'accélérer sans discord.
</p>
<h3> AZONNOUNDO Houéfa </h3>
<p>
Elle était chargé de gérer la partie SQL avec la création des tables pour l'insertion
dans le back-end
mais nous a surtout aider pour le logo de notre application mobile.
</p>
<h3> AZAMMAN Hosnel </h3>
<p>
Son role pincipal était d'aider pour le back-end. Il s'est chargé non seulement
d'aider pour le front-end
mais aussi dans la création des tables et divers attributs de ces dernières. Il est aussi l'auteur du dit
rapport en
collaboration avec ses partenaires.
</p>
<h3> HOUNKPE Carlos </h3>
<p>
Il s'est chargé de la gestion des erreurs dans le front-end.
</p>
<h3> KIDJE Elfried Fortunatus </h3>
<p>
En tant que coordonnateur du groupe, il a assumé avec succès la responsabilité du développement frontend et
backend, tout en gérant efficacement le projet sur GitHub. Son expertise technique, sa capacité de
leadership et son engagement ont été des atouts majeurs pour la réussite de l'équipe et la livraison d'un
projet de qualité. </p>
<h3> KPADE Akouavi </h3>
<p>
Elle s'est occupée de la marquette avec un plus grand soin nous offrant une vue
d'ensemble sur
l'utilité et le mode de fonctionnement de l'application web.
</p>
<h3> SANNI Adéchinan </h3>
<p>
Il s'est non seulement occupé du front-end et du back-end mais il s'est aussi occupé
de gérer les
erreurs des membres du groupe dans les deux cotés en se faisant surtout sentir avec sa page login qui a été
retenue.
</p>
<h3> TCHEFFA Pretty </h3>
<p>
Elle a dirigé le groupe de front-end avec la création des pages web pour le CSS et a
aidé aussi
pour la marquette et le logo.
</p>
<h3> TOCHOEDO Gbènakpon </h3>
<p>
Il s'est chargé lui aussi d'aider pour la correction des erreurs au niveau du
front-end.
</p>
<h3> VLAVONOU Lauviah </h3>
<p>
Elle s'est chargé non seulement de la création des tables, de la base de données et
compatibilité avec
Django mais aussi de sa mise en place du diagramme de flux de données.
</p>
</section>
<section>
<h2>Description de la conception</h2>
<p>
Notre application web de gestion des emplois du temps a été conçue en utilisant une architecture
client-serveur et une approche
de développement basée sur le modèle MVT (Modèle-View-Templates). Voici les principaux composants de notre
conception :
</p>
<h3>Front-end</h3>
<p>
Le front-end de notre application a été développé en utilisant les langages HTML5, CSS3 et JavaScript. Nous
avons suivi les
meilleures pratiques de conception d'interfaces utilisateur pour assurer une expérience conviviale et
intuitive pour les
utilisateurs quelques soit le type de média qu'ils utilisent (Ordinateur, Tablette, Mobile).
</p>
<h3>Back-end</h3>
<p>
Le back-end de notre application a été développé en utilisant le langage de programmation Python, avec un
framework de développement web approprié : Django. La communication avec la base de données est gérée à
l'aide d'un ORM
(Object-Relational Mapping) pour assurer une abstraction efficace de la couche de persistance.
</p>
<h3>Base de données</h3>
<p>
Pour le stockage des données, nous avons utilisé une base de données relationnelle telle que SQLite en
developpement
et MySQL en production. Nous avons conçu un schéma de base de données adapté pour stocker les informations
relatives aux emplois
du temps, aux utilisateurs et à d'autres entités liées. Nous avons pris en compte les contraintes de
performance et de sécurité
lors de la conception de la structure de la base de données.
</p>
<p>
Grâce à cette conception, nous avons pu séparer clairement les responsabilités entre le front-end et le
back-end, facilitant ainsi
le développement, la maintenance et l'évolutivité de l'application. La base de données bien structurée nous
a permis de stocker et
de gérer efficacement les données relatives aux emplois du temps et aux utilisateurs.
</p>
</section>
<section>
<h2>Instructions de déploiement</h2>
<p>
Pour déployer et exécuter notre application de gestion des emplois du temps, suivez les étapes ci-dessous :
</p>
<h3>Installez Django</h3>
<ul class="installation">
<li>
Assurez-vous d'avoir le language Python installé sur votre machine. Vous pouvez télécharger python <a
href="https://www.python.org/downloads/" target="_blank">ici</a>
</li>
<li>
Ouvrez votre terminal et exécutez la commande suivante pour installer Django à l'aide de l'outil de
gestion de packages pip :
<br><br> <span class="text-green">pip install Django</span> <br>
</li>
<li>
Si vous n'avez pas pip installé, utilisez plutôt la commande suivante pour installer Django :
<br><br> <span class="text-green">python -m pip install Django</span> <br>
<br>
Attendez que l'installation se termine. Une fois terminée, vous devriez avoir Django installé sur votre
machine.<br>
</li>
<li> Pour vérifier si Django est installé correctement, exécutez la commande suivante dans votre terminal :
<br><br> <span class="text-green">django-admin --version</span> <br><br>
Cela affichera la version de Django installée
</li>
<li>
Maintenant que vous avez Django installé, vous pouvez continuer à travailler sur le projet d'intégration
IFRI 2022.
</li>
</ul>
<h3>Lancez l'application sur votre machine</h3>
<p>
Pour récuperer et lancer l'application sur votre machine, assurez vous d'abord d'avoir python et django
installé sur votre
machine. Ensuite procéder aux étapes suivantes : <br>
<ul class="installation">
<li><span class="text-green">git clone https://github.com/v1p3r75/PIL1_2223_4.git</span></li>
<li><span class="text-green">cd PIL1_2223_4</span></li>
<li>Utilisation de la Base de Données</li>
<ul class="installation">
<li>Pour la base de données, nous vous proposons deux choix :
<ul class="installation">
<li>Le premier choix est d'utiliser SQLite comme SGBDR : Grâce à sa portabilité, vous pouvez lancer le projet directement sans se soucier des configurations de base de données. Pour l'utiliser, aller dans le fichier <span class="text-green">App/settings.py</span>. Dans la variable DATABASES, commenter la deuxieme partie et décommenter les lignes concernant le SQLite comme suit : <br><br>
<code class="text-green">
DATABASES = {<br>
'default': { <br>
'ENGINE': 'django.db.backends.sqlite3',<br>
'NAME': BASE_DIR / 'db.sqlite3' <br>
}, <br>
#'default': { <br>
# 'ENGINE': 'django.db.backends.mysql', <br>
# 'NAME': 'nom_de_la_bd', <br>
# 'USER': 'utilisateur', <br>
# 'PASSWORD': 'mot_de_passe', <br>
# 'HOST': '127.0.0.1', <br>
# 'PORT': '3306', <br>
# 'OPTIONS': { <br>
# 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'" <br>
# } <br>
#} <br>
} <br>
</code>
</li>
<li>Le deuxieme choix est d'utiliser MySQL comme SGBDR. Si vous préférez utiliser mysql. Il faut alors commenter la partie concernant le SQLite et décommenter la partie mysql toujours dans le fichier <span class="text-green">App/settings.py</span> comme suit : <br> <br>
<code class="text-green">
DATABASES = {<br>
#'default': { <br>
# 'ENGINE': 'django.db.backends.sqlite3',<br>
# 'NAME': BASE_DIR / 'db.sqlite3' <br>
#}, <br>
'default': { <br>
'ENGINE': 'django.db.backends.mysql', <br>
'NAME': 'nom_de_la_bd', <br>
'USER': 'utilisateur', <br>
'PASSWORD': 'mot_de_passe', <br>
'HOST': '127.0.0.1', <br>
'PORT': '3306', <br>
'OPTIONS': { <br>
'init_command': "SET sql_mode='STRICT_TRANS_TABLES'" <br>
} <br>
} <br>
} <br>
</code>
<ul>
<li> Assurez-vous d'avoir une version récente de MySQL <a
href="https://www.mysql.com/fr/downloads/" target="_blank">ici</a> :
</li>
<li>Vous devez d'abord crée une base de données sur mysql avec la commande : <br> <br>
<span class="text-green">CREATE DATABASE nom_de_la_bd;</span>
</li>
<li>Une fois la base de données est crée, vous pouvez importer notre base de données au format sql qui se trouve à la racine du projet : <span class="text-green">pil_database.sql</span>, directement dans la base de données qui vient d'être créer.</li>
<li>Une fois terminer, n'oubliez pas d'ajuster les informations de connection (nom_de_la_bd, utilisateur, mot_de_passe, ...) dans la variable <span class="text-green">DATABASES</span>.</li>
<li> Installer le pilote mysql pour python.
<br><br> <span class="text-green">pip install mysqlclient</span> ou <span class="text-green">python -m pip install mysqlclient</span><br><br>
</li>
</ul>
</li>
</ul>
<li>Quelque soit le SGBDR que vous avez choisi (SQLite / MySQL). Nous avons créer par défaut un utilisateur avec le rôle de collaborateur (administrateur). Ce qui vous permettra de vous connecter et tester l'application en tant que admin. Les informations de connexions : <br><br>
<span class="text-green">Email : </span> admin@test.com <br><br>
<span class="text-green">Mot de passe : </span> admin
</li>
</li>
</ul>
<li> Maintenant nous pouvons lancer l'application avec la commande : <br><br>
<span class="text-green">python manage.py runserver 8000</span>
</li>
<li>
L'application va démarrer sur l'addresse <span class="text-green">http://localhost:8000</span> : copier cet addresse et lancer-le dans le
navigateur. L'application est maintenant lancé ! <br>
</li>
</ul>
<p>
Assurez-vous de suivre toutes les étapes et de configurer correctement votre environnement avant de déployer
l'application. Si
vous rencontrez des problèmes lors du déploiement, consultez notre manuel d'utilisation plus d'explication.
</p>
</section>
<section>
<h2>Structure du project</h2>
<p>
Notre application est structurée de la manière suivante :
</p>
<ul class="installation">
<li>
<span class="text-green">App : </span> <span>C'est l'application principale de notre système.</span>
</li>
<li>
<span class="text-green">Auth : </span> <span>Cette fonctionnalité gère l'authentification des
utilisateurs dans l'application. Elle permet aux utilisateurs de s'inscrire, de se connecter et de
gérer leurs informations d'identification, telles que leur nom d'utilisateur et leur mot de passe.
Elle garantit également la sécurité en vérifiant l'identité des utilisateurs avant de leur accorder
l'accès à certaines parties de l'application.</span>
</li>
<li>
<span class="text-green">TimeTable : </span> <span>Cette fonctionnalité permet de gérer les emplois du
temps dans l'application. Elle permet de créer, afficher et modifier les emplois du temps pour
différentes activités ou événements. Cela peut inclure la planification des cours, des réunions, des
rendez-vous, etc. Les utilisateurs peuvent consulter les emplois du temps pour voir les horaires
prévus et les éventuelles modifications.</span>
</li>
<li>
<span class="text-green">marquettes : </span> <span>Ce dossier est utlisé pendant la phase de dévéloppement pour la proposotion des marquettes.</span>
</li>
<li>
<span class="text-green">media : </span> <span>Ce dossier concerne la gestion des médias dans
l'application. Elle permet de stocker différents types
de médias tels que des images, des vidéos, des documents, etc.</span>
</li>
<li>
<span class="text-green">static : </span> <span>Ce dossier contient les fichiers statiques de notre application : Nos fichiers css, JavaScript, Images, et les librairies externes ...</span>
</li>
<li>
<span class="text-green">templates : </span> <span>Ce dossier permet de gérer les modèles ou
les gabarits dans l'application. Les modèles peuvent être utilisés pour créer rapidement des
documents, des formulaires ou d'autres éléments réutilisables. Les utilisateurs peuvent créer,
modifier, enregistrer et appliquer des modèles pour gagner du temps et garantir une cohérence dans
la création de différents éléments dans l'application.</span>
</li>
</ul>
</section>
<section>
<h2>Base de données de l'application</h2>
<p>
Vous pouvez voir ici le modèle relationnel de données (MCD) de notre base de données :
</p>
<div>
<img src="./database-diagram.png" alt="Database diagram">
</div>
</section>
<section class="manual">
<h2>Manuel d'utilisation pour les utilisateurs</h2>
<p>
Ce manuel d'utilisation fournit des instructions détaillées sur les fonctionnalités spécifiques réservées
aux utilisateurs
de l'application de gestion des emplois du temps.
</p>
<h3 class="title">1. Connexion en tant qu'administrateur</h3>
<p>
Pour accéder aux fonctionnalités administratives telles que le tableau de bord administratif, la gestion des
professeurs,
la gestion des emplois du temps etc..., connectez-vous à l'application en utilisant vos identifiants
d'administrateur
spécifiques ou vos mots de passe administrateurs(mot de passe de connexion propre aux administrateurs).
</p>
<h3>Tableau de bord administratif</h3>
<p>
Une fois connecté en tant qu'administrateur, vous serez redirigé vers le tableau de bord administratif. Ce
dernier
fournit un aperçu des informations importantes pour les administrateurs, telles que le nombre de salles, le
nombre de cours,
le nombre d'étudiants, etc.
</p>
<h3>Gestion des professeurs</h3>
<p>
Dans le menu Professeurs, vous pourrez ajouter de nouveaux professeurs en fournissant les détails requis,
tels que le nom,
l'adresse e-mail, les compétences, etc. Vous aurez également la possibilité de supprimer des professeurs
existants de la base
de données. <br>
</p>
<h3>Gestion des étudiants</h3>
<p>
Dans le menu Etudiants, vous pourrez voir la liste des étudiants de la plateforme. Vous avez même la possibilité de bloquer ou de débloquer le compte d'un étudiant. <br>
</p>
<h3>Gestion des collaborateurs</h3>
<p>Dans la section Collaborateurs, vous pourrez gérer les informations relatives aux différents collaborateurs
travaillant dans votre système. Cela peut inclure les coordonnées, les rôles, les qualifications, etc. Vous
pourrez ajouter de nouveaux collaborateurs en fournissant les détails requis et supprimer ou modifier les
informations des collaborateurs existants si nécessaire. </p>
<h3 class="text-green"><small>NB : Lorsqu'un administrateur (collaborateur) ajoute un professeur ou un autre collaborateur, un mail est directement envoyé à celui-ci pour lui faire savoir que son compte vient d'être créer. Dans ce mail se trouve le mot de passe temporaire de son compte nouvellement crée. Ce qui va lui permettre de se connecter et après changer son mot de passe.</small>
</h3>
<h3>Gestion des emplois du temps</h3>
<p>
Dans la section Emploi du temps, vous pourrez gérer les emplois du temps existants. Vous aurez la
possibilité d'ajouter de
nouveaux emplois du temps en spécifiant les détails tels que le titre, la date, l'heure, les participants,
etc. Vous pourrez
également modifier ou supprimer les emplois du temps existants selon vos besoins.
</p>
<h3 class="text-green"><small>NB : Lors d'un ajout où d'une modification d'emploi du temps, un mail est envoyé aux étudiants et professeurs concernés pour les informer afin qu'ils puissent accéder à la plateforme pour plus d'informations.</small>
<h3>Gestion des cours</h3>
<p>Dans la section Cours, vous pourrez gérer les différents cours proposés. Vous pourrez ajouter de nouveaux
cours en fournissant les détails requis, tels que le titre, la description, la durée, les prérequis, etc. De
plus, vous pourrez modifier ou supprimer les cours existants selon vos besoins.
</p>
<h3>Gestion des niveaux</h3>
<p>La gestion des niveaux vous permettra de définir les différents niveaux d'études ou de compétences
disponibles dans votre système. Vous pourrez créer de nouveaux niveaux en spécifiant un nom, une description
et éventuellement des critères spécifiques pour chaque niveau. Vous aurez également la possibilité de
modifier ou supprimer les niveaux existants.
</p>
<h3>Gestion des salles de cours</h3>
<p>La gestion des salles de cours vous permettra de gérer les différentes salles disponibles pour les cours.
Vous pourrez ajouter de nouvelles salles en spécifiant des informations telles que le nom, la capacité,
l'équipement disponible, etc. De plus, vous aurez la possibilité de modifier ou supprimer les salles de
cours existantes selon vos besoins. </p>
<h3>Consulter votre compte</h3>
<p>
Sur cette page, vous pourrez consulter votre profil et modifier vos informations (photo, nom, prénoms,
téléphone, email, filière, mot de passe, ...).
</p>
<p>
Vous êtes maintenant prêt à utiliser l'application de gestion des emplois du temps en tant
qu'administrateur.
</p>
</section>
<section class="manual">
<h3 class="title">2. Connexion en tant qu'étudiant ou professeur.</h3>
<p>
Pour accéder à l'application en tant qu'utilisateur, utilisez vos identifiants personnels telles que votre
noms, votre adresse
mail, pour créer un compte et vous connecter à l'application.
</p>
<h3>Tableau de bord utilisateur</h3>
<p>
Après vous être connecté, vous serez redirigé vers le tableau de bord où vous aurez à voir le nombre de
cours de la semaine courante, le nombre d'heures, le jour le plus chargé, le jour le moins chargé, ...
</p>
<h3>Consulter l'emploi du temps</h3>
<p>
Sur la page de l'emploi du temps, vous pourrez consulter votre emploi du temps personnel. Il affiche les
cours, les horaires,
les salles et les autres informations pertinentes pour chaque événement.
</p>
<h3>FAQ</h3>
<p>
Sur cette page, Il y'a plusieurs descriptions sur le guide d'utlisation de la plateforme.
</p>
<p>
Vous êtes maintenant prêt à utiliser l'application de gestion des emplois du temps en tant qu'étudiant ou professeur.
</p>
</section>
<section class="manual">
<h3 class="title">3. Pour tous les utilisateurs</h3>
<h3>Demande de réinitialisation de mot de passe</h3>
<p>
Avez-vous oublier votre mot de passe ? Ne vous inquiéter pas. Vous pouvez demander la réinitialisation de votre mot de passe. Il suffit juste de cliquer "Mot de passe oublié" sur la page de connection. Ensuite vous donner l'adresse mail de votre compte, et un code vous serait envoyer dans votre boite mail. Utiliser ce code pour définir un nouveau mot de passe.
</p>
<h3>Consulter votre compte</h3>
<p>
Sur cette page, vous pourrez consulter votre profil et modifier vos informations (photo, nom, prénoms,
téléphone, email, filière, mot de passe, ...).
</p>
<h3>Possibilité d'utiliser la plateforme sous forme de logiciel (pour ceux qui utilisent d'ordinateur) ou sous forme d'application mobile (pour ceux qui utilisent des smartphone mobiles)
</h3>
<p>Pour rendre l'expérience utilisateur de notre plateforme plus parfait et plus accessible que possible, nous avons trouvé pertinent de rendre notre application web installable sous forme d'application ou de logiciels bureau par les utilisateurs de la plateforme.</p>
</section>
<footer style="margin-top: 100px;">
<p>© 2023 - GROUPE 4</p>
</footer>
</body>
</html>