contexte
Les Brevets de Technicien Supérieur (BTS) offre l’opportunité de réaliser plusieurs stage afin de mettre en pratique les différentes compétences abordées dans l’environnement d’une organisation (entreprise, mairie, association…).
Ma première année de BTS SIO m’a amené a réalisé un stage de développement.
Ce stage a été décroché à l’issu d’un stage dating dans lequel j’ai su mettre en avant les compétences que recherchait mon tuteur de stage.
J’ai choisi de réaliser un stage de développement alors que je savais déjà que j’allais m’orienter vers l’option SISR (réseau). Dans le cadre où le BTS me le permet, j’ai souhaité réalisé un stage en développement afin de profiter d’une expérience professionnelle dans un autre domaine que ma spécialité. Étant titulaire d’un bac pro SN, j’avais beaucoup d’avance sur le programme en réseau et plusieurs expériences professionnelles.
Ainsi, je me suis retrouvé avec ma camarade de classe: BEUCHER Lucile à réaliser différentes tâches qui nous ont été confiés.
Je me remercie encore vivement Mr. Hardy et toute l’équipe des Jardins de Maryline de nous avoir permis de réaliser cette expérience professionnelle qui nous a grandement apporté à tous les 3.
Force de proposition
Divers projets avaient déjà été réalisés par de précédents stagiaires. Ces projets sont hébergés en local via WAMP (solution d’hébergement tout en un) et accessible via un nom d’hôte défini sur le serveur DNS local. Le port d’accès au serveur a été modifié dans une optique de sécurisation.
Liste des projets:
- Registre des employés
- Gestion de Stagiaires
- Gestion de matériel informatique
- Envoi de mail publicitaires aux clients
A notre arrivée, les projets étaient tous indépendants avec un répertoire spécifique et les utilisateurs y accédaient via des liens sur le bureau / en favoris sur les navigateurs web sans possibilité de changer de projet sur la même page web.
Rapidement, il nous a paru évident qu’il fallait uniformiser tout cela pour plusieurs raisons:
- Homogénéisation des styles
- Ressources partagées (un seul identifiant/mot de passe permet l’accès ou non aux ressources)
- Navigation plus simple entre les différents projets
- Maintenance facilitée (Modifier un élément sera ainsi valable pour tout le site)
- Code déprécié à actualiser
- Documentation des projets à effectuer et centraliser l’accès
Après concertation avec ma collègue nous avons exposé ces différents points au tuteur qui a accepté de réuniformiser tous ces projets au sein d’un seul et unique site avec des ressources partagées (styles, utilisateurs, documentation, etc..)
Planification et Répartition des tâches
Travailler en mode projet de manière efficace requiet une certaine rigueur.
Ainsi, nous avons dans un premier temps estimé la durée de réalisation de la tâche.
Nous nous sommes mis d’accord sur la direction que devait prendre le projet: nom des fichiers, mode de fonctionnement, arborescence, etc…
Ensuite, nous avons réparti les tâches de la sorte:
- Clément
- Création du hub, des styles, de l’arborescence
- Intégration des projets matériel et stagiaires
- Documentation des projets intégrés
- Lucile
- Intégration des projets employés et mail
- Documentation des projets intégrés
Lucile a moins de tâche que moi car elle devait également s’occuper de certaines tâches sur le site publique de l’entreprise.
Chaque jour nous réalisions des dayli-meeting entre stagiaires afin de faire le point sur notre avancement. En fonction des disponibilités de notre tuteur, nous faisions également des réunions pour faire part de l’avancée du projet.
Nous n’hésitions par à consulter l’autre en cas de besoin et pour donner son avis, étant à quelques mètres seulement l’un de l’autre. Cette disposition facilite le travail en équipe.
Réalisation du projet
Arborescence
Comme l’on peut le voir, les ressources sont partagées et déportées dans un seul et même dossier « assets ». Un dossier backup contenant les projets dans l’état où nous sommes arrivés est présent au cas où.
La documentation est dans le dossier assets et dispose de sous dossiers pour bien différencier les deux types de documentation.
Le dossier modèles était présent dans chaque projet avec des modèles leur étant propre. Nous avons centraliser ce dossier au cas où un projet souhaite à accéder au modèle d’un autre. Exemple : une page sur employé qui met en lien employé/stagiaire.
Nous avons défini une politique de nommage de documents à appliquer à chaque nouveau document:
- noms des documents/fichiers en anglais
- pas de caractères spéciaux, tout en minuscule séparé avec des « _ » ou : NomDeDocument.php
Cette politique vise à limiter les erreurs de code qui peuvent subvenir et lorsque tous les documents respecteront la norme, il sera plus aisé de diagnostiquer un problème: impossible que cela vienne d’un caractère spécial.
Cette norme facilite la lecture des noms des documents et impose une langue unique dans l’objectif de ne pas avoir de « franglais ».
Base de de données utilisateurs
Une base de données utilisateurs a été crée afin de centraliser les informations de connexions qui définissent les droits d’accès aux projets.
Pour ce qui est des droits, nous avons créée un champ dans la base de donnée par projet en spécifiant si l’utilisateur X a les droits: Aucun, Lecture, Écriture.
Désormais, une seule connexion suffit pour accéder à l’ensemble des ressources. Un mot de passe changé pour un utilisateur sera donc effectif pour tous les projets.
Création du hub
Les technologies à notre dispositions sont les suivantes:
- HTML (balisage, structure de la page)
- CSS (style de la page, mise en forme)
- PHP (pages dynamiques côté serveur)
- MYSQL (base de données)
A notre arrivée, elles étaient déjà utilisées et mises en places (serveur Wamp). Nous avons donc grandement réutilisé le précédent code en l’actualisant, le documentant.
La page de hub a pour objectif de lister tous les projets. Le style n’est pas la préocupation majeure, c’est l’aspect fonctionnel qui doit primer.
La page est gérée dynamiquement et séparée en plusieurs parties/document.
Les sessions PHP stockent des variables telles que l’utilisateur connecté et ses droits d’accès.
Page type:
- Définition des variables php
- Documents ressources de la page définis dans <head>: head.php
- documents spécifiques à la pages
- Partie de la page en haut <header>: header.php
- Liste des projets
- Liste de connexion/déconnexion
- Contenu spécifique de la page <middle>
Le code de <header> et <head> est commun à toutes les pages mais génère du code HTML différent en fonction des variables définies sur la page tandis que le contendu dans <middle> est spécifique à la page / au projet.
Exemple pour la page d’accueil en php:
<?php
session_start();
require_once('assets/php/functions.php');
$pathassetsweb="http://serveur:8080/assets/";
$page_data =
[
'title' => 'Serveur Laval',
'home' => 'n',
'pathassets' => './assets/',
'id' => 'home',
'url' => get_url(),
];
require_once($page_data['pathassets'] . "php/connect.php");
?>
<html>
<head>
<?php require($page_data['pathassets'] . 'php/head.php'); //récupération du fichier pour le head ?>
</head>
<body>
<header>
<?php require($page_data['pathassets'] . 'php/header.php'); //récupération du fichier pour le header?>
</header>
<?php
if (SessionOuverte() === false) {
require($page_data['pathassets'] . "php/login_page.php");
}
else
{ ?>
<div id="middle">
<div><h1 style="text-align: center">Serveur de Gestion Les Jardins de Maryline</h1></div>
<div class='home_list_container'>
<?php
$countbis = 0;
foreach($projets as $element) {
$pathassetsimg = $pathassetsweb . "/images/" . $projets[$countbis]['picture'];
$pathlink = $projets[$countbis]['link'];
$title = $projets[$countbis]['title'];
echo"<div class='home_list'>
<div class='home_list_title'>
<a href=\"" . $pathlink . "\" class=\"menu_icon\">
<div><img src='$pathassetsimg'></div>
<h1>$title</h1>
</a>
</div>";
switch($title) { //permet de spécifier manuellement quelle liste afficher en fonction du titre du projet
case 'Stagiaires': include($page_data['pathassets'] . 'php/listing_trainee.php'); break;
case 'Materiel': include($page_data['pathassets'] . 'php/listing_gestinfo.php'); break;
case 'Employés': include($page_data['pathassets'] . 'php/listing_employee.php'); break;
case 'Aide': include($page_data['pathassets'] . 'php/listing_aide.php'); break;
default: echo"<div style='display: flex;align-items: center;'><p style='margin-right: 10px;'>Pas de sous menu disponible</p></div>"; break;
}
echo "</div>";
$countbis += 1;
}
?>
</div>
</div>
<?php }
?>
</body>
</html>
Intégration de projet
Une fois le hub produit, il ne reste plus qu’à transférer les fichiers dans la nouvelle arborescence.
Attention, il faut garder en esprit ceci:
- adapter le style autant que possible
- vérifier les liens (préférer les relatifs aux absolus)
- tester toutes les fonctionnalités dans tous les contextes: tests de non régression
Documentation
Comme l’infrastructure précédente n’intégrait qu’une maigre documentation (commentaires éventuels), nous avons décidé de documenter la nouvelle solution que nous avons produite.
De plus, chaque projet que nous avons ré-intégré doit être au mieux documenter avec notre compréhension de ceux-ci.
Nous avons alors réalisé deux types de documentation:
- documentation fonctionnelle (pour l’utilisateur final)
- documentation technique (pour la maintenance, les développeurs)
Un article détaillé viendra expliquer la solution de documentation que j’ai réalisé.