BOINA NDAY Kotou BTS SIO 1
Page 1 sur 25
RAPPORT DE STAGE
LYCEE NELSON MANDELA
Période : 7 juin 2021 au 7 juillet 2021 (4 semaines)
Tuteur : Willy ALAMELOU
Fonction : DDFPT (Directeur Délégué aux Formations Professionnelles et Technologique)
Professeur référent : Stéphane BARET
Page 2 sur 25
Sommaire :
I. Présentation de l’organisme ... 3
II. Présentation des projets ... 5
III. Réalisation des projets ... 7
a. Première semaine ... 7
b. Deuxième semaine ... 14
c. Troisième semaine ... 18
d. Quatrième semaine ... 21
e. Trois derniers jours ... 23
IV. Conclusion ... 25
Page 3 sur 25
I. Présentation de l’organisme
Le lycée Nelson Mandela situé à Bras-Fusil, est un lycée polyvalent (qui regroupe plusieurs enseignements) qui a ouvert ses portes durant la période 2001-2002.
En effet, le lycée propose plusieurs formations, une section d’enseignement professionnel et une section d’enseignement technologique allant de la seconde, jusqu’au postbac.
Dès la seconde, les étudiants peuvent préparer un CAP Vente ou un BAC Pro GA (Gestion Administration) ou ARCU (Accueil-Relation Clients et Usagers).
En première, les étudiants ont le choix de poursuivre entre quatre BAC Technologique STMG :
Ressources Humaines et Communication ; Marketing ; Gestion de Finance ; Système d’Information de Gestion.
Après avoir réussi l’examen du BAC, les étudiants ont encore la possibilité de continuer vers une formation supérieure sur deux années : le BTS Gestion de la PME ; le BTS SAM ; le BTS MUC ; le BTS CG ou encore le BTS SIO.
Le lycée possède quatre salles dédiées uniquement au BTS SIO. Les salles sont équipées de matériels informatiques (ordinateurs, projecteurs, un réseau dédié, un serveur de stockage, imprimantes, etc…).
Page 4 sur 25
Organigramme simplifiée du lycée :
Le lycée possède aussi son propre site Web : lycee-mandela.fr
Proviseur
M. SAUNIER
Proviseur adjointe
Mme. ALCINOÜS
Chef de travaux (DDFPT)
M. ALAMELOUTuteur de stage
Enseingnants
Professeur principal
M. BARET
Gestionnaire
Mme. SERYPage 5 sur 25
II. Présentation des projets
Durant ce stage, notre tuteur de stage avait quelques projets d’applications Web à faire.
Le premier projet est de créer une application de recherche de stage, à partir d’une base de données d’entreprise ayant déjà acceptées des stagiaires auparavant. Sur cette application nous devons pouvoir faire des recherches à partir du nom de l’entreprise, ou de la filière qu’accepte une entreprise. Cette application doit aussi être capable d’importer, à partir d’un fichier contenant toutes les informations utiles concernant les entreprises, dans une base de données dédiée.
Le deuxième projet consiste en la création d’un calendrier répertoriant
différents événements d’une année scolaire. Cette application doit permettre de créer, modifier, supprimer un événement ; afficher la durée des événements sur le calendrier ; sélectionner la période de l’année scolaire (ex : 2019-2020) ; imprimer le calendrier en format PDF ; une section de recherche pour les événements.
Et enfin le troisième projet est une application Web, permettant de générer un livret scolaire au format PDF. Cette application doit permettre de saisir les informations liées à l’étudiant via son bulletin de première et deuxième année de formation ; pouvoir le modifier si besoin ; afficher un graphique pour voir l’évolution de l’étudiant au cours des deux ans. Le livret scolaire est utilisé lorsque l’étudiant n’as pas la moyenne aux examens, et permet alors d’évaluer si l’élève mérite ou non d’avoir son examen. Il doit alors recenser toutes les informations utiles à la délibération.
Pour la réalisation des trois projets, les langages de programmation utilisées sont PHP, HTML / CSS et JavaScript.
Lors du stage, on était à deux sur les projets, on a dû se partager les missions pour être efficace et organisé.
Pour le suivi des projets, on a utilisé l’outil de Microsoft : Project 2019. Avec le quel on peut créer un diagramme de Gantt, gérer les ressources, etc…
Page 6 sur 25
Projet n°1 :
Projet n°2 :
Projet n°3 :
Pour ce rapport, le détail de ce qui a été fait se fera de façon hebdomadaire, c’est-à-dire, tout le travail effectué chaque semaine jusqu’au dernier jour.
Page 7 sur 25
III. Réalisation des projets a. Première semaine
La première semaine, on a commencé par préparer l’environnement de travail, en installant une machine virtuelle Linux. En occurrence ici, un Ubuntu Server qui servira de serveur Web.
Sur ce serveur il a fallu installer un service Web LAMP (Linux, Apache, MySQL, PHP), qui servira à héberger les applications Web.
Comme le serveur ne possède pas d’interface graphique, pour naviguer facilement sur le serveur, on a aussi installé un serveur FTP, qui permettra de transférer des fichiers à distance sur le serveur.
Pour les configurations du système d’exploitation, on peut aussi utiliser PuTTY, qui permet d’accéder à la ligne de commande à distance.
Page 8 sur 25
Une fois l’environnement de travail prêt, on a commencé à travailler sur le projet 1.
Le projet répertorie une liste d’entreprises ayant déjà accepté des stagiaires auparavant. Pour le stockage de ces entreprises on a utilisé une base de données MySQL, permettant de créer des bases de données relationnelles.
Schéma relationnel :
La table « entreprise » contient toutes les informations essentielles sur les entreprises.
Et la table « utilisateur » servira plus tard pour un système d’authentification.
Avec ce schéma, on a pu créer un script permettant de créer la base de données en SQL :
Page 9 sur 25
Une fois la base de données créée, il faut insérer la liste des entreprises.
Pour cela on a un fichier CSV, qui contient toutes les informations relatives à l’entreprise.
Extrait du fichier :
Le fichier CSV contient les informations séparées tous par un « point-virgule ».
En PHP il est possible de traiter ce genre de fichier en prenant que les
informations voulues (on veut récupérer : le nom de l’entreprise, la filière des stagiaire, le nombre de stagiaires de l’année en cours/ de l’année précédente, l’adresse, le code postal, la ville, le pays, le téléphone fixe, le téléphone
Page 10 sur 25
portable, numéro Fax, l’email de l’entreprise, le nom/prénom du responsable, sa fonction, son numéro et son email).
La méthode pour récupérer ses informations est la suivante :
Ouvrir le fichier -> Récupérer les colonnes souhaitées -> Stocker dans une liste.
En PHP :
Une fois qu’on a les informations souhaitées, il faut insérer dans la base de données. Pour accéder à la base de données, on a besoin des informations nécessaires à l’accès (l’adresse IP du serveur, identifiant, mot de passe et le nom de la base).
Page 11 sur 25
Ces informations peuvent être stockées dans un fichier séparé et pourra être utilisée n’importe où dans un autre fichier (include PHP).
Maintenant qu’on a accès à la base de données, on peut commencer à insérer, grâce à une requête INSERT en SQL :
On peut maintenant insérer les entreprises, à partir d’un fichier CSV.
Interface de l’insertion faite sous HTML :
Page 12 sur 25
Une fois l’insertion fini, on affiche la liste de toutes les entreprises sur une nouvelle page :
On peut aussi filtrer les recherches avec le formulaire en haut à droite.
Durant cette semaine, on a aussi pu commencer le deuxième projet (calendrier scolaire).
On a créé le modèle relationnel suivant :
La table « période » permettra de stocker toutes les périodes (ex : 2020-2021).
La table « évènement » permettra de stocker tous les évènements avec leurs dates de début/fin, une description, sa catégorie et sa période.
La table « catégorie » permettra de stocker les différentes catégories d’évènements (ex : Administratif).
Page 13 sur 25
Une fois le modèle relationnel fini, on a pu créer le script de création de cette base de données :
Ensuite, on a créé l’interface permettant d’insérer les évènements :
Page 14 sur 25
Résumé de la première semaine :
- Installation, paramétrage d’un serveur Web - Création de bases de données
- Traitement d’un fichier CSV
- Se connecter à une base de données à partir d’une page PHP - Insertion dans une base de données
- Insertion à partir d’un formulaire
b. Deuxième semaine
Pour la deuxième semaine, on a continué à travailler sur le projet de calendrier scolaire. Notamment en ajoutant la possibilité de modifier, supprimer un
évènement.
Exemple :
Page 15 sur 25
Une fois le système d’ajout, modification, suppression d’évènements terminé.
On a travaillé sur le calendrier pour afficher les différents évènements en fonction de la période :
On a aussi un menu avec plusieurs options permettant de faciliter les recherches :
On a commencé aussi à implémenter une fonction permettant d’imprimer le calendrier en PDF.
L’impression se fait avec l’aide du navigateur :
Page 16 sur 25
Note : Les lignes du tableau ne s’affichent pas sur cette interface à cause d’un problème de rendu. Mais une fois imprimé, les lignes seront bien visibles.
Et enfin, sur le projet 1 (recherche de stage), on a ajouté un système permettant de s’authentifier :
Cela permettra de restreindre l’accès à l’interface d’importation de nouvelles entreprises, qui est réservé que à « l’administrateur » (les étudiants ne doivent pas y avoir accès).
Page 17 sur 25
Les difficultés rencontrées durant cette semaine :
• Lors de la conception du calendrier, il a fallu gérer les années bissextiles.
En effet, les années bissextiles possèdent un jour de plus (366 jours, au lieu de 365 jours habituels) dans le mois de février. Le mois de février possède alors 4 ou 5 semaines en fonction de l’année, cela posait alors problème au moment de l’ajout d’évènement sur le calendrier.
Pour résoudre ce problème, il existe une série de calcul permettant de déterminer si, l’année de l’évènement est bissextile ou non :
Nor : année normale Bis : année bissextile
Source : lien
• Lors de l’impression du calendrier, les couleurs ne s’affichaient pas. Ce problème est lié au CSS qui ne prend pas en compte les couleurs lors de l’impression.
Pour résoudre ce problème il faut forcer le rendu des couleurs lors de l’impression :
Ajouter sur le fichier CSS la ligne : « color-adjust : exact ; »
Page 18 sur 25
Résumé de la deuxième semaine :
- Requêtes SQL : Insert, Delete, Update
- Manipulation d’une base de données sur une page PHP - Système d’authentification en PHP
- Impression d’une page HTLM en PDF
c. Troisième semaine
Pour la troisième semaine, on a finalisé le système d’impression en PDF du calendrier. Et le projet 2 était alors bien fonctionnel. On a tout de même continué à travailler dessus, pour améliorer, ajouter de nouvelles
fonctionnalités.
Les nouvelles fonctionnalités ajoutées :
- Afficher les évènements sur le calendrier en blocs de couleur - Catégoriser les évènements
- Ajouter une description à un évènement
Pour catégoriser les évènements, on utilise la table « Catégorie » créée
précédemment. Cette table possède une clé primaire qui est associé à la table
« Evènement » en tant que clé étrangère, ce qui permet de lier un évènement à une catégorie.
L’ajout de catégorie se fait aussi sur une interface :
Page 19 sur 25
Les catégories peuvent évidemment être modifier, supprimer.
Note : Une catégorie peut être supprimer seulement si celui-ci n’est pas affecté à un évènement. Pour la supprimer, il faudra d’abord vérifier qu’aucun
évènement est associé à cette catégorie.
Pour la description de l’évènement, on a une colonne « description » de type TEXT, permettant d’insérer une grande quantité de caractères. Et celui-ci sera affiché sur le calendrier :
Le projet 2 est désormais totalement terminé.
Sur cette troisième semaine, on a pu commencer le projet 3 (livret scolaire).
On a alors commencé par modéliser un modèle relationnel pour le stockage des informations :
La table « étudiant » permettra de stocker tous les étudiants.
La table « diplôme » permettra de stocker tous les diplômes.
La table « matière » permettra de stocker les différentes matières.
Page 20 sur 25
La table « enseignement » permettra de faire la liaison entre une matière et un diplôme (une matière peut exister dans plusieurs diplômes).
La table « note » permettra de stocker les notes d’une matière d’un étudiant pour un diplôme.
Note : Ce modèle est la version finale, il a existé plusieurs modèles avant d’arriver à ce résultat.
Après avoir fini le modèle relationnel, on a fait retranscrit le livret scolaire vide en HTML, pour pouvoir le remplir par la suite :
Résultat :
Note : Ceci est la première partie du livret. La deuxième partie contient un graphique.
Résumé de la troisième semaine : - Création d’un modèle relationnel
- Manipulation d’une base de données SQL - Création du livret sous HTML
Page 21 sur 25
d. Quatrième semaine
Pour la quatrième semaine, on a commencé à remplir le livret à partir de la base de données. Pour cela on a créé plusieurs formulaires pour ajouter un étudiant, des matières, des diplômes et les notes.
Note : Pour l’instant, on ajoute tous ces informations à la main. L’évolution serait de récupérer ces informations directement sur une base de données existants.
Formulaire étudiant :
Formulaire matière :
Formulaire diplôme :
Page 22 sur 25
Formulaire note :
Note : L’ajout des notes se fait en fonction du diplôme, et donc des matières enseignées dans ce diplôme.
Après avoir ajouté quelques informations, il faut afficher ces informations sur le livret. Pour cela il faut aussi un formulaire pour sélectionner l’étudiant voulu et le diplôme :
Ensuite il faut un système pour pouvoir imprimer le livret, le système est le même que celui du projet 2 (calendrier scolaire).
En fin de semaine, on a aussi commencé à rédiger les documents techniques et documents d’utilisation des projets 1 et 2.
Page 23 sur 25
Résumé de la quatrième semaine : - Formulaire d’insertion SQL
- Manipulation d’une base de données SQL
- Rédaction de document technique et utilisation
e. Trois derniers jours
Durant les trois derniers jours, on a continué à travailler sur le troisième projet, notamment en ajoutant la deuxième partie du livret (le graphique).
Pour le graphique on a utilisé une librairie PHP : jpgraph, qui permet de faire plusieurs types de graphiques.
Voici un exemple de graphique qu’on a pu faire :
Ce n’est pas exactement le graphique voulu pour le livret scolaire, mais pour faire le graphique, on avait besoin de plus d’informations qu’on n’avait pas (moyenne de la classe des différentes matières). Ici nous avons juste un graphique avec les moyennes de 1ere et 2eme année du diplôme.
Ce troisième projet n’a pu être abouti, car on arrivait à la fin du stage.
Page 24 sur 25
La dernière chose qu’on a pu ajouter, est sur le premier projet. On ajouté la possibilité d’imprimer la liste d’entreprises recherchées et sa fiche
d’informations.
Résumé de ces trois derniers jours : - Création d’un graphique en PHP
- Utilisation d’une librairie externe en PHP - Impression d’une page HTML en PDF
Page 25 sur 25
IV. Conclusion
Pour résumer ses quatre semaines de stage, je peux dire que cela a été très enrichissant malgré le fait qu’on n’ait pas eu le temps de finaliser le dernier projet.
En effet, à travers les différents projets sur lesquels nous avions travaillé, j’ai pu apprendre davantage sur les langages de programmation, tels que HTLM/CSS, JavaScript, PHP, MySQL (principalement du PHP). J’ai pu aussi mettre en
pratique mes connaissances acquises lors de ma première année de formation.
Ce qui m’a le plus plu par-dessus tout durant ce stage, est le fait d’avoir à chercher les solutions soi-même. Je trouve que cette méthode permet davantage de développer ses connaissances.
Le seul regret que j’ai, est de ne pas avoir pu effectuer le stage dans une entreprise, j’aurais pu grâce à cela découvrir le monde du travail. Cette
expérience d’avoir fait le stage dans un lycée reste toutefois aussi convenable.
