SCHWITTHAL Alexandre

Rapport de stage

BTS Services Informatiques aux Organisations Spécialité SLAM

Du 15/01/18 au 23/02/18

Tuteur en entreprise : Charles Colson Tuteur académique : Marianne Delio

Établissement de formation : Lycée Robert Schuman Établissement d’accueil : Centrale des Artisans Coiffeurs

Remerciements à,

Charles Colson, mon maître de stage ainsi que chef de projet du service web de la centrale des artisans coiffeurs

Loïc Winkel, Développeur web, chargé de la gestion « technique » de mes tâches durant toute la durée de mon stage.

2

SOMMAIRE

I. Introduction ............................................................................................................................................... 4

II. Présentation de l’entreprise ............................................................................................................... 5 A. L’entreprise ............................................................................................................................................ 5 B. Le service web ....................................................................................................................................... 6

III. Description des tâches ..................................................................................................................... 7 A. Création d’un formulaire d’inscription .......................................................................................... 8 B. Utilisation de la base de données .................................................................................................... 9 C. Apprentissage et utilisation de JQuery .......................................................................................... 10 D. Génération d’un PDF via les données du formulaire .................................................................. 14 E. Envoi du PDF par e-mail, via l’API Sendinblue ............................................................................ 17 F. Création du formulaire des commerciaux (VRP) ......................................................................... 18

IV. Conclusion .............................................................................................................................................. 23

3

I. Introduction

Ce rapport fait suite à un stage de 6 semaine réalisé au sein de la centrale des artisans coiffeurs (CAC) situés à Scy-Chazelles dans le cadre du stage de ma deuxième année de BTS SIO au lycée Robert Schuman.

Ce stage, contrairement à celui de première année, devait obligatoirement se réaliser dans le milieu de la spécialisation de l’étudiant (ici, le développement). L’intérêt était, bien entendu, de côtoyer des professionnels de façon à apprendre à leurs côtés par le biais, notamment, d’observations et de participations quant à la réalisation de tâches relatives à la profession concernée. L’objectif était ainsi, pour les étudiants, de pouvoir mettre en pratique les acquis théoriques réalisé au cours des deux années de BTS dans des situations réels et concrètes ; que ce soit au niveau des compétences pur comme les divers langages de programmations (PHP etc) mais aussi vis-à-vis de l’organisation (méthode de projet, déploiement, versioning etc).

Le développement ci-dessous a pour objectif principal de présenter la Centrales des artisans coiffeurs et notamment le rôle, objectifs et enjeux du service web de la CAC. Ainsi que mon rôle durant mon stage au sein de la centrale des artisans coiffeurs. Une description précise et agrémentée d’exemples au sujet des tâches accomplies au cours de ce stage est également présente.

4

II. Présentation de l’entreprise

A. L’Entreprise

La CAC, acronyme de Centrales des Artisans Coiffeurs, est une entreprise. Elle est au service

des artisans coiffeurs pour le développement et la croissance d’une profession, la coiffure.

Bien plus qu’un distributeur, créée en 1908, la Centrale des Artisans Coiffeurs est partenaire

de la profession depuis plusieurs générations. Aujourd’hui, c’est le partenaire du

développement commercial de nombreux salons.

CAC et ses filiales comptent aujourd’hui plus de 20 000 clients coiffeurs indépendants en

France, au Luxembourg et en Belgique, soit autant de sociétaires qui bénéficient de tous les

avantages de la coopérative, une forme sociale juridique qui garantit une totale indépendance

vis-a-vis tout actionnaire institutionnel.

La CAC dispose de 32 magasins, de plus de 250 employés, 5000m² d’entrepôt, 11 500 clients

sociétaires, 150 fournisseurs et 12 500 références produits. Ce qui lui permet de couvrir un

large panel d’activités toutes lié à la coiffure.

La Centrale des Artisans Coiffeurs dispose donc de nombreux métiers, elle est ainsi

distributrice, que ce soit pour des professionnels ou des particuliers, disposant de site internet

respectif pour chacun d’eux (jesuiscoiffeur.com et coiffea.com).

Elle propose aussi des formations et stages dédiés au professionnel de la coiffure, un service

nommé Cyléa formations, disposant de son propre site internet : cyleaformations.com, qui

réalise plus de 50 formations dans le domaine de la coiffure. La CAC réalise aussi des

agencements et « relooking » de salon de coiffure (www.mobilier2coiffure.com) effectuant

plus de 100 rénovations par an.

Elle gère aussi un réseau de coiffeurs indépendants, le réseau moove (reseaumoove.com),

d’un service de création de site internet (sitecloud.fr) ou encore un service d’assurance pour

salon de coiffure (pactassurances.com).

5

Photo des stocks des nombreux produits de la centrale des artisans coiffeurs

B. Le service web Le service web, composé de trois développeurs et d’un chef de projet, s’occupe de tous les sites web présenté ci-dessus. Sont rôles est primordial, car certains sites, notamment ceux d’e-commerce, forme une part importante des ventes de la Centrale des Artisans Coiffeurs.

Concernant les technologies utilisées au sein du service web, elles sont variées et correspondent à des besoins spécifiques. Par exemple, pour faciliter la mise en place ainsi que la maintenance de ces deux sites d’e-commerce : jesuiscoiffeur et coiffea, le service web utilise un outil spécialement conçu pour l’e-commerce : Prestashop, il s’agit d’une application web permettant de gérer efficacement certaines fonctionnalités essentielles à tout site d’e-commerce comme la gestion du catalogue, la mise en avant de produit etc.

Concernant les langages, tous les sites utilisent la combinaison de PHP/MySQL pour le back-end, il s’agit d’une des combinaisons des plus classiques, mais toujours très efficace !

Pour le front, les technologies sont un peu plus diversifiées, Ainsi, la majorité des sites utilises Bootstrap, l’un des « framework » CSS le plus populaire, permettant de réaliser des mises en pages de façon simple et efficace. Ensuite, l’indispensable Javascript pour tout ce qui est interaction en front ainsi que Jquery, une bibliothèque Javascript permettant de réaliser une action javascript nécessitant une dizaine de lignes en une seule !

L’utilisation de l’AJAX est aussi omniprésente, notamment car il permet par exemple d’afficher dynamiquement des données sans forcément avoir besoin de recharger la page, ce qui apporte un confort ainsi qu’un gain de fluidité et d’optimisation non-négligeable.

Enfin, le versioning, outil indispensable au développement, est gérer via Git, grâce à l’application web Gitlab combiné au logiciel Sourcetree.

Concernant l’organisation du service en lui-même, le service utilise la méthode SCRUM, un schéma d’organisation qui à prouver son efficacité.

6

Tableau de SCRUM du service web

III. Description des tâches

Comme décrit ci-dessus, la Centrales des artisans coiffeurs dispose d’un service web, que j’ai intégré durant mes six semaines de stage.

Tout au long de cette expérience de six semaines, j’ai eu l’occasion d’observer et de participer à la réalisation de plusieurs tâches en utilisant des technologies nombreuses et variées dans le développement web. Et ce, dans un environnement propice à l’apprentissage de ces diverses technologies. De plus, j’ai reçu un très bon accueil et j’ai entretenu d’excellentes relations avec tout le personnel du service web, que ce soit mon maitre de stage ou encore les autres développeurs.

Au cours de ce stage, j’ai eu la chance d’être rapidement responsabilisé par les personnes avec qui j’ai travaillé. Cela m’a permis de me sentir à l’aise tout en m’offrant la possibilité de participer aux différentes missions qu’ont dû réaliser mes collègues durant ma période de présence au sein de leur service.

Mon but était ainsi de réaliser plusieurs tâches concernant le site internet de Cyléa Formations, un service de la centrale des artisans coiffeurs proposant des stages de coiffures à travers toute la France pour les professionnels du milieu de la coiffure.

Page d’accueil du site internet de Cyléa Formations

7

A. Création d’un formulaire d’inscription

Après avoir mis en place mon environnement de travail et récupérer le code source de Cyléa Formations via la technologie Git, à travers 2 logiciels utilisés en interne pour l’utilisation de git : l’application web gitlab et l’application logiciel sourceTree. L’on m’a alors expliqué ma première mission pour ce stage, il s’agissait de réaliser le formulaire d’inscription des différents stages de coiffure présent sur le site de Cyléa. Car avant la mise en place du formulaire, les inscriptions passaient par un contact directement par e-mail à Cyléa, leurs faisans perdre énormément de temps. De plus, avec cette méthode, il était très difficile d’uniformiser les données des clients et la saisie en base de données était alors effectuée de façon manuelle. Ainsi, l’utilité d’un formulaire permettrait de récupérer toutes les données voulues et nécessaire à l’inscription à un stage. J’ai tout d’abord dû définir avec mon maitre de stage les différents champs du formulaire ainsi que leurs contraintes, s’il était obligatoire ou non, si la syntaxe devait être particulière etc. J’ai ainsi été confronté à une première difficulté vis-à-vis de nos projets réalisés en classe, car nos projets réalisés en classe n’exigeaient pas la rigueur requise pour un projet réel qui sera utilisé dans une situation professionnelle, le but d’un projet scolaire étant d’apprendre et de comprendre. Par exemple pour un projet scolaire, avoir « 123 » comme prénom pour un client n’est pas réellement dramatique, car les données ne seront pas utilisées à des fins autres qu’éducatif. Tandis que dans un projet professionnel, la gestion et manipulation des données doit être vérifier et ne doit pas contenir une seule erreur de saisie, et les données envoyés doivent bel et bien correspondre à ce qui est attendu. J’ai ainsi pu découvrir et comprendre l’utilisation des expressions régulières, aussi appelée Regex (abréviation de « Regular expression »). Outil crée justement pour la vérification de données, les Regex sont utilisables dans PHP via deux fonctions natives : preg_match et preg_grep, la première pour un élément unique, l’autre pour un tableau

Dans cet extrait de code par exemple, le but étant de vérifier un code postal, ainsi il ne doit contenir que des chiffres compris entre 0 et 9 et il doit forcément y en avoir 5, pas plus, pas moins.

8

J’ai ainsi dû effectuer de nombreuses vérifications au fil du temps, car je n’avais pas forcément les réflexes de penser à chaque éventualité pour chaque situation, l’exemple qui me vient à l’esprit est par exemple la gestion des prénoms, j’avais de base autorisé uniquement les lettres entre A et Z, majuscule et minuscule, puis je me suis rendu compte en effectuant des divers test plus tard que je n’avais pas pris en compte les caractères spéciaux pouvant ce trouver dans un prénom (le ï de Loïc par exemple) ! Concernant le design, le site utilisant Bootstrap ainsi que des pages de CSS déjà créer par d’autres développeurs en interne, je n’ai pas eu énormément à innover, j’ai néanmoins appris et compris la redoutable efficacité de Bootstrap, qui grâce à ça gestion à l’aide de grille, permet un placement et un design très rapide de chaque élément HTML ! J’ai ainsi dû assurer la création, mais aussi l’évolution du formulaire au fil des versions, car certains champs ont été sujet à changement durant ma période de stage, des modifications qui posèrent certains problèmes notamment concernant la base de données …

B. Utilisation de la base de données

Après avoir créé le formulaire, je devais ensuite ajouter les données du formulaire dans la base de données de Cyléa, dans une nouvelle table que j’ai dû moi-même créer. Je n’ai pas eu de réelle difficulté au début, car pour chaque inscription, il n’y avait qu’une et une seule valeur par champs, je n’ai ainsi rajouté qu’une seule table, contenant toutes les valeurs pour chaque itération (la clé primaire étant un numéro unique). Néanmoins, avec l’évolution du formulaire ci-dessus, je dus faire certaines modifications, en effet au début le formulaire comprenait un gérant de salon ainsi qu’un seul et unique stagiaire, mais au fur et à mesure de l’évolution de mon stage, un gérant pouvait choisir d’inscrire 1 ou plusieurs stagiaires !

Utilisation des « tableaux » en input, représenter par des « [] » à la fin du name

Permettant ainsi de stocker plusieurs valeurs (ici, le nom du stagiaire) dans le même name. Indispensable dans notre cas, car l’on ne connaît pas à l’avance le nombre de stagiaires

Cette problématique entraîna plusieurs modifications en base de données, j’ai alors crée une seconde table, correspondant elle aux stagiaires (disposant alors d’une clé étrangère, relative au numéro d’inscription du gérant).

9

Représentation simplifiée du MCD, sans les tables déjà existantes

C. Apprentissage et utilisation de JQuery Lors de la création du formulaire, sur la deuxième version, qui permettait l’ajout d’un ou plusieurs stagiaires, devait ainsi être géré pour ajouter/supprimer des champs, l’on m’a ainsi guidé vers JQuery, une des bibliothèques javascript les plus populaires à travers le monde, et notamment dans le service web de la centrale des artisans coiffeurs. N’ayant que très peu de connaissance en Javascript, et n’ayant jamais touché à du JQuery, j’ai ainsi pu découvrir l’intérêt et l’efficacité de ce langage couplé à cette bibliothèque. Ainsi, l’un des développeurs du service web de la CAC m’apprit les fondamentaux du JQuery, que j’ai approfondi en effectuant des recherches sur internet ou via des tutoriels tels que ceux disponible sur le site d’OpenClassRoom afin de répondre à mes besoins pour ce projet. J’ai ainsi dû comprendre le fonctionnement du Document Object Model, abrégé par DOM, qui est d’ailleurs bien plus simple d’utilisation via JQuery qu’en Javascript pur, en effet, le JQuery permet de faire en une ligne une action nécessitant 10 lignes de code en javascript !

10

Utilisation d’une boucle, pour l’insertion de chaque stagiaire en base de données.

Concrètement, le but était ainsi de pouvoir ajouter ou supprimer dynamiquement un stagiaire lors du remplissage du formulaire via un bouton « Ajouter un stagiaire » :

Partie du formulaire correspondant à l’ajout d’un stagiaire

De plus, le clic sur ajouter un stagiaire n’est pas infini, il est par défaut limité à 6 par inscription (nombre imposé par Cyléa Formations), mais le nombre de places restantes existant en base de données, s’il ne reste que 2 places, alors l’on ne peut pas ajouter plus de 2 stagiaires. Enfin, s’il n’y a qu’une seule ligne de stagiaire, l’icône de la poubelle disparaît/n’apparaît pas, car il y a forcément au moins 1 stagiaire par inscription.

NB : la validation « officielle » des inscriptions aux stages étant validées manuellement par Cyléa formations, je ne change pas le nombre de places restantes dans la base de données à la validation du formulaire.

11

Partie du formulaire correspondant à l’ajout d’un stagiaire après avoir cliqué sur ajouter un stagiaire Le clic sur l’icône de la poubelle sur l’élément correspondant

Concernant le code, voici le code réalisé pour le bouton ajouter :

Le but, ici étant d’ajouter une ligne (et de les vider de leurs contenus) si certaines conditions sont remplies.

12

Lors d’un clic sur ajouter un stagiaire, si le nombre de place restante est égal au nombre de stagiaire déjà présent, alors aucune ligne ne s’ajoute et un message d’erreur apparaît

Cette tâche m’a ainsi permis d’apprendre les fondamentaux en JQuery. Par la suite, durant les quelques moments de temps libre que j’avais à ma disposition, j’ai choisi d’approfondir mon apprentissage de JQuery en Réalisant plusieurs tutoriels d’OpenClassRoom, car il s’agit d’une technologie n’étant malheureusement pas présente dans notre cursus de BTS, mais qui me semble très importante voir capital pour n’importe quel développeur dans le domaine du web ! Pour conclure avec la création du formulaire, voici son rendu final :

13

D. Génération d’un PDF via les données du formulaire

Ma deuxième tâche, en continuité avec la première, consista en la génération d’un PDF depuis les données fournis via le formulaire, le but étant d’avoir un récapitulatif des informations envoyées depuis ce même formulaire. Il existe de nombreuses bibliothèques pour la génération de PDF. L’on m’a alors indiqué d’utiliser la bibliothèque html2pdf, ayant déjà été utilisé précédemment par le service web, j’ai ainsi commencé à réaliser le PDF, en apprenant à utiliser html2pdf. Néanmoins, au fur et à mesure de ma progression dans la création du PDF, j’ai réalisé que html2pdf avait de grand problème de performance, si bien qu’il fallait plus de 30 secondes à la validation du formulaire pour générer le PDF, ce qui n’est évidemment pas acceptable niveau performance professionnellement parlant. J’ai ainsi dû repartir de 0, en essayant de m’orienter à travers les diverses bibliothèques existantes disposant de la fonctionnalité dont j’avais besoin afin de réaliser ma tâche, la recherche fût assez longue, car j’ai testé de nombreuses bibliothèques, mais beaucoup disposait de problème au niveau de la mise en pages ou encore de performance. Néanmoins, j’ai finalement trouvé une bibliothèque correspondant aux exigences requises, autant aux niveaux des performances qu’au niveau du design, il s’agit de FPDF couplé à FPDI. FPDI permet d’importer un PDF déjà existant et de l’utiliser directement dans FPDF. Le gain de performance est ainsi considérable, car seules les données du formulaire sont générées dans le PDF, et non le PDF tout entier ! De plus, cela permet d’avoir un PDF bien plus esthétique et modulable, car l’on peut directement l’éditer ou le créer sur des logiciels spécialisés dans la création de PDF, comme Photoshop par exemple. J’ai alors appris à me servir de FPDF, notamment en utilisant la documentation présente directement sur le site internet de FPDF.

14

Exemple d’utilisation, ici pour placer et écrire le numéro du client

Concernant la récupération des données, j’ai choisi de prendre les données depuis la base de données (transmis dans la base, par le formulaire) et non directement via les données du formulaire, pour des soucis d’uniformité. Ainsi, si une erreur survient lors de l’enregistrement en base de données, alors le PDF n’est pas généré. Cela permet ainsi de garder une cohérence entre la base de données et le PDF.

Récupération des données de la base, afin d’être utilisé dans le PDF

Récupération des données relatifs aux stagiaires, afin d’être utilisé dans le PDF

Ainsi, chaque donnée est écrite directement par-dessus le PDF, certaines données, sont écrit d’une façon précise, par exemple pour le nom du gérant ci-dessous, l’on vérifie les caractères à l’aide de l’utf8_decode (même si, normalement, la base de données devrait déjà gérer l’utf8, il est toujours mieux d’avoir trop de vérification que pas assez !) afin d’éviter que certains caractères comme les « é » ne passe pas, puis l’on passe tous les caractères en majuscule à l’aide de strtoupper.

Le but de la génération de ce PDF, est, une fois l’inscription effectué, de l’envoyer directement par e-mail à Cyléa et au gérant (à l’adresse e-mail saisie dans le formulaire).

15

Rendu final du PDF

16

E. Envoi du PDF par e-mail, via l’API Sendinblue

Comme expliqué précédemment, le but étant de réaliser l’envoi par e-mail du PDF, à Cyléa et au gérant, l’on m’a indiqué d’utiliser Sendinblue, étant déjà utilisé dans le service web, son principal intérêt et d’avoir des templates d’e-mail pré-fait, facilement modulable. Je n’ai ainsi eu qu’à comprendre son utilisation, grâce à la documentation fournie, notamment pour l’ajout d’une pièce jointe (le PDF).

Intégralité du code concernant l’envoi du PDF par email, puis sa suppression après avoir été envoyé.

17

F. Création du formulaire des commerciaux (VRP)

Après avoir réalisé le premier formulaire, son PDF et son envoi par e-mail, j’ai eu une seconde tâche, celle de faire un deuxième formulaire ayant le même principe, mais étant réservé aux commerciaux. Le but étant que cette fois-ci, ce n’est plus le gérant qui remplit l’inscription, mais le commercial, via une application web, sur une tablette. J’ai donc refait et surtout repensé le formulaire, notamment car certaines contraintes se sont ajoutées, que ce soit au niveau du design (puisque, conçu pour tablette) mais aussi au niveau de la structure.

Formulaire « complet » à l’arriver sur la page.

Sur le premier formulaire, l’on sélectionnait le stage directement depuis une liste déjà existante. Ici, il faut saisir le numéro de stage avant de pouvoir accéder au reste du formulaire. Afin de vérifier si le numéro de stage est valide, et de proposer dynamiquement des numéros de stage existant lors de la saisie, j’ai choisi d’utiliser de l’AJAX (abréviation d’ « asynchronous JavaScript and XML »). L’AJAX est une technologie permettant de résoudre de nombreux problèmes ! Il permet notamment de « dialoguer » entre le navigateur et le serveur. Ici, à chaque fois que l’on saisit un nombre (ou l’on n’en supprime un), l’AJAX envoie une requête au serveur pour afficher des données directement depuis la base de données, et ceux, dynamiquement !

18

L’AJAX effectue et affiche une recherche de numéro de stage à partir des chiffres saisis, ici « 15 », le serveur récupère ainsi chaque stage

contenant 15 dans son numéro, Si pour un stage donné, le nombre de places restantes est nul, alors il est impossible de sélectionner le stage (ici le stage n° 7154)

Concernant le code réalisé afin d’afficher se rendu, voici tout d’abord la partie présente dans le fichier PHP du formulaire :

19

Puis la page appeler lors du traitement AJAX (ici, ajax_search_stages.php) :

Plusieurs données sont ainsi transmises, mais pas forcément afficher (comme le nombre de places restantes et le prix par défaut du stage). Le formulaire disposait d’autre contrainte, en effet, la structure du site étant différents (car le formulaire se trouve sur le site de jesuiscoiffeur, mais est toujours pour Cyléa) dans sa globalité, ici le numéro du client ainsi que certaines de ces données sont déjà connu et présente dans la base de données de jesuiscoiffeur !

20

Néanmoins, certaines de ces données n’étant pas forcément correct ou d’actualité, il a fallu les réafficher dans le formulaire (pré-complété par les données existantes) afin de les enregistrer dans la base de données de Cyléa, de les ajouter au PDF, puis d’envoyer le PDF par mail ! De plus, une seconde contrainte c’est ajouté par la suite : séparez le formulaire en deux parties. En effet, le formulaire est prévu pour être rempli par le VRP, puis signé par le gérant/client. Il était ainsi plus « propre » de faire une validation pour le VRP, puis d’afficher une page récapitulative avec une signature électronique à la fin.

Néanmoins, l’ajout en base de données ne doit être fait que lors de la validation par le client, et non à la validation de « l’étape 1 » du formulaire !

21

Première partie du formulaire

Le code reste néanmoins très similaire à celui du premier formulaire, que ce soit le PHP, l’ajout en base de données, ou encore le javascript/JQuery. Il en est de même pour la génération du PDF et l’envoi de l’e-mail.

22

Deuxième partie du formulaire

IV. Conclusion

Pour conclure, je pense avoir appris énormément au cours de ce stage, qui fût ma deuxième expérience professionnelle, ce stage m’a permis d’apprendre et de comprendre le fonctionnement d’un service de développement, participer concrètement à ses enjeux aux travers de mes diverses missions. J’ai pu mettre en pratique et ainsi renforcer certaines connaissances acquises durant mon cursus scolaire (PHP/SQL), mais aussi en apprendre de nouvelles (JQuery/Bootstrap) ! Cette expérience fut pour moi très enrichissante, autant sur le plan des connaissances qu’humainement, je remercie ainsi tout le personnel de la Centrale des artisans coiffeurs pour m’avoir accueilli durant ces 6 semaines.

23