1
RAPPORT DE STAGE Du 20 décembre 2019 au 17 janvier 2020
(6 semaines)
Avenir Bureautique 3 Rue Aristide Berges, 21800 Sennecey-lès-Dijon
Maître de stage : M. Jocelyn Rabahi
Yanis VUILLECARD
Issu de la formation Webforce3 – session de septembre
2019
2
Table des matières
1. Introduction ................................................................................................................... 3
2. Présentation de l’entreprise d’accueil............................................................................. 4
3. Présentation du projet ................................................................................................... 4
A. Présentation et contexte ........................................................................................ 4
B. Objectifs ................................................................................................................. 5
C. Ressources apportées ............................................................................................. 5
4. Spécifications fonctionnelles .......................................................................................... 6
A. Fonctionnalités côté Utilisateur .............................................................................. 6
B. Fonctionnalités côté Administrateur ....................................................................... 8
5. Spécifications techniques ............................................................................................... 9
A. Choix technologiques.............................................................................................. 9
a) Front-Office ........................................................................................................ 9
b) Back-Office ....................................................................................................... 10
B. Domaine et hébergement ..................................................................................... 10
C. Accessibilité .......................................................................................................... 11
D. Maintenance et évolution ..................................................................................... 11
6. Réalisation ................................................................................................................... 12
A. Définition des objectifs du projet .......................................................................... 12
B. Découper le projet et définir la liste des tâches..................................................... 12
C. Développement des différentes pages et fonctionnalités ...................................... 13
a) L’interface d’administration .............................................................................. 13
b) La gestion des utilisateurs ................................................................................. 15
c) Mes commandes .............................................................................................. 17
d) Les offres .......................................................................................................... 18
e) Fichier .htaccess et robots.txt ........................................................................... 19
7. Améliorations éventuelles ............................................................................................ 20
8. Conclusion.................................................................................................................... 21
9. Annexes ....................................................................................................................... 22
3
1. Introduction
Ayant toujours été attiré par le domaine du numérique, je me suis inscrit
en tant qu’étudiant à l’Université de Bourgogne. Mon but était d’obtenir une
licence STS (Sciences, Techniques et Santé) Spécialité Informatique. J’ai
néanmoins quitté la faculté après deux années car je n’appréciais ni le cursus
proposé, ni les méthodes de travail que je trouve trop théorique.
N’étant désormais plus étudiant, je me suis inscrit à la mission locale de
Fontaine d’Ouche pour rechercher une formation. Souhaitant poursuivre dans
l’informatique et plus particulièrement la programmation, on me proposa la
formation Webforce3. Il était judicieux de faire une formation dans le
développement web car je ne disposais que des bases de la programmation.
C’est dans ce but que je me suis inscrit à Webforce3, une formation qualifiante,
d’une durée de 4 mois, et qui forme au métier de développeur / intégrateur
web.
Afin de compléter cette formation, 6 semaines de stage en entreprise sont
prévues. La société Arius recherchait des stagiaires pour la réalisation d’un
catalogue vidéo pour leurs clients. Je me donc suis proposé car ce stage me
permettrait de mettre en pratique mes connaissances pour la réalisation d’un
véritable projet web.
C’est ainsi que dans ce dossier, je vais tout d’abord vous présenter
l'entreprise dans laquelle j’ai effectué mon stage, puis, je vais vous présenter le
projet en lui-même sur lequel j’ai été amené à travailler. Ensuite, je vous
exposerai les spécifications fonctionnelles et techniques. Puis, je vous
expliquerai tout le processus de réalisation du projet, et enfin je vous
présenterai mon bilan du stage.
4
2. Présentation de l’entreprise
d’accueil
Arius est une marque française de dispositif d’affichage numérique
interactif proposant ses solutions aux entreprises pour leur communication.
L’entreprise propose de nombreux produits tels que : écran interactif HD, totem
d’affichage, kiosk d’accueil, table tactile et enfin le Glacis.
3. Présentation du projet
Le produit phare de la société Arius est le Glacis, un revêtement nano
technologique qui métamorphose n’importe quelle surface vitrée en un
écran haute résolution, permettant de diffuser des contenus numériques de
façon moderne et dynamique.
A. Présentation et contexte
Le Glacis est populaire grâce à ses technologies, néanmoins un
manque de contenu se fait sentir après l’installation de ce dernier.
En effet, bien qu'Arius propose un accès à du contenu multimédia
à afficher, celui-ci est standard et non-personnalisable pour les besoins de
chaque client.
5
B. Objectifs
La société Arius m’a donné pour mission de réaliser un site internet sous
forme de catalogue de vidéo et d’application. Ce site aura pour objectifs :
− Être accessible uniquement par les clients Arius
− Intégrer une interface d’administration
− Posséder une charte graphique cohérente
− Permettre l’envoie de fichiers
− Gérer les exceptions (mot de passe oublié, type de fichiers, contraintes de
relation...)
C. Ressources apportées
Les seules ressources apportées par Arius pour ce projet, sont les
maquettes réalisées par le maître du stage (Voir Annexe 2 à 5), et
également les fichiers requis, tel que les logos Arius haute résolution et
certaines miniatures.
Je dispose également de l’aide de mon maître de stage, qui nous a
aidé notamment pour le front car il avait réalisé une partie du code. Il est
aussi toujours disponible pour répondre à nos questions et nous donner
des suggestions.
6
4. Spécifications fonctionnelles
Les personnes utilisant ce service sont divisées en deux catégories : les
utilisateurs et les administrateurs. La hiérarchie des rôles fait que les
administrateurs sont aussi des utilisateurs.
A. Fonctionnalités côté Utilisateur
Connexion : L’utilisateur devra tout d’abord se connecter au site
avec ses identifiants personnels. Une fois connecté, il pourra consulter le
catalogue.
Commander : Un catalogue s’affiche avec une douzaine de vidéo
ou d’application sous forme de carte. L’utilisateur n’aura plus qu’à cliquer
sur un article qui lui convient, ouvrant ainsi la page de la dîtes vidéo avec
un formulaire de commande situé en-dessous. Cependant, il ne peut
commander une vidéo que s’il possède suffisamment de token.
Consulter : L’utilisateur peut consulter les commandes réalisées
depuis la page “Mes commandes”. Il y trouvera deux tableaux contenant
les commandes en cours et celles terminées avec toutes les infos relatives
relatifs et même accéder aux articles commandés.
7
Compte : Si l’utilisateur souhaite modifier ses informations, il
pourra le faire via une page “Mon Compte”. Il y trouvera un formulaire lui
permettant de changer son nom d’utilisateur et son adresse email à
condition d’entrer son mot de passe actuel.
Mot de passe : L'utilisateur sera dans la possibilité de modifier son
mot de passe. Cette action est possible depuis la page “Mot de passe”. Il
devra entrer son mot de passe actuel et confirmer le nouveau mot de
passe.
Mot de passe oublié : Si l’utilisateur ne peut se connecter, il peut
demander à changer son mot de passe depuis la page de connexion. En
entrant son nom d’utilisateur ou son adresse email, celui-ci recevra un
email avec un lien unique vers la réinitialisation de son mot de passe.
Cette action est cependant contrôlée. En effet, l’utilisateur ne peut
effectuer cette action que toutes les heures, prévenant ainsi le spam.
Rang : L’utilisateur peut consulter la page “offre”, celle-ci possède
tous les rangs et leurs informations telle que le prix et le nombre de token.
Bien que l’utilisateur ne puisse modifier lui-même son rang, il peut notifier
l’administrateur de son souhait en cliquant sur l’un des rangs. Cela
enverra un email à l’administrateur contenant toutes les informations
qu’il a besoin.
8
B. Fonctionnalités côté Administrateur
Hérédité : Grâce à la hiérarchie des rôles, l’administrateur peut faire
absolument toutes les actions des utilisateurs.
Interface administrateur : L'administrateur, de fait de son statut
particulier, peut accéder à une interface administrateur exclusif. Il y accède
depuis la route ‘’/admin’’, celle-ci est contrôlé et renvoie vers une page 403
pour un utilisateur non-administrateur.
C.R.U.D : la gestion des entités est assurée par l’administrateur, celui-
ci peut créer de nouvelles entités ou supprimer celle existante, accéder et
modifier leurs informations. L’administrateur n’a néanmoins pas le contrôle
sur certaines informations (mot de passe, compteur automatique…)
Commande : La gestion des commandes est primordiale pour
l’administrateur, c’est l’objectif principale du site : Les clients d’Arius doivent
pouvoir consulter puis commander des articles. Ces commandes sont ensuite
gérées par l’administrateur, celui-ci accède aux informations et fichiers
uploadés par les utilisateurs pour effectuer la dîtes commandes. Une fois la
commande terminée, il doit pouvoir changer son statut.
9
5. Spécifications techniques
A. Choix technologiques
a) Front-Office
Design : Mon collègue à réaliser le Front-Office selon les maquettes
réalisées par le maître de stage. Pour cela il a utilisé plusieurs Framework
dont Bootstrap : le plus célèbre Framework Front-Office qui permet de
simplifier le design grâce notamment à son système de grille. Néanmoins,
l’effet visuel de Bootstrap est assez lassant, c’est pourquoi il l’a complété
avec un Framework : MD-Bootstrap qui propose un visuel ‘’Material Design’’
plus sobre et épuré, plus respectueux de la charte graphique.
10
Animation : L’ajout d’animation permet de rendre l’expérience
utilisateur plus agréable en rendant les éléments de la page plus
dynamiques. Mon collègue a opté pour une librairie Javascript d’animation :
le plugin Aos qui permet l’apparition des articles avec une animation ‘’Slide-
Up’’. Pour ma part, j’ai utilisé Magnific Pop-Up qui permet l’affichage de
modal responsive.
b) Back-Office
Le projet a été réalisé sur le Framework PHP Symfony. Il était judicieux
de développer sur ce Framework car Symfony fournit des fonctionnalités
modulables et adaptables qui permettent de faciliter et d’accélérer le
développement d'un site web. La meilleure démonstration de ce constat est
l’utilisation de bundles : des ‘’plugins’’ ajoutant de nouvelles fonctionnalités
au projet, ce qui représente un gain de temps considérable qui peut être
redistribuer ailleurs.
Pour des soucis de compatiblité avec
les bundles utilisés, nous avons utilisé la
version 4.3.10 de Symfony.
B. Domaine et hébergement
Le site internet Myarius est hébergé sur le compte OVH du maître de
stage. Le nom de domaine http://www.myarius.com est réservé et le site est
actuellement accessible au client d’Arius. Il ne dispose pas de certificat SSL pour
le moment.
11
C. Accessibilité
Pour commencer, le site internet Myarius ne sera pas responsive. En effet,
les clients du Glacis ont tous accès à des fournitures bureautiques tel que
l’ordinateur. De plus, réaliser une interface d’administration responsive est un
processus qui est assez complexe et mérite du temps de développement. Mais
ceci fera éventuellement partie des améliorations à prévoir.
D. Maintenance et évolution
Le site internet Myarius, une fois hébergé sur un serveur, pourra être
maintenue et améliorée, par le maître de stage pour le front et par un autre
développeur Symfony ou même PHP pour la partie back. Il pourra aussi mettre
à jour le projet (bundles inclus), d’autant que la version 4.3 de Symfony sera
prochainement obsolète car celle-ci ne recevra plus ni les corrections de bugs,
ni les patchs de sécurité.
12
6. Réalisation
A. Définition des objectifs du projet
Tout d’abord, il est essentiel de clarifier les objectifs du projet (les priorités
et les objectifs secondaires), et ce que l’on attend de nous (livrables, temps,
délais…). Vous pouvez voir la liste des objectifs dans la partie II. Présentation du
projet, 2)
Objectifs. Ces objectifs ont été établis lors du premier jour de stage avec
Jocelyn RABAHI, Assistant Marketing chez ARIUS TOUCH et actuellement notre
maître de stage. Pour ce projet, il y a une contrainte de 6 semaines, durée totale
du stage.
B. Découper le projet et définir la liste des tâches
Nous sommes deux sur le projet, il est donc essentiel de se répartir les
tâches : Vincent s’occupera du Front-Office et je réaliserai le Back-Office. Il est
également judicieux de travailler avec l’appui d’un logiciel de gestion de versions
car cela comporte de nombreux avantages :
- Retrouver les modifications apportées au projet en tout temps,
pratique en cas de bug lors d’ajout de fonctionnalité.
- Pouvoir fusionner nos branches pour bénéficier des changements
apportés par les collaborateurs.
- Garder une sauvegarde fonctionnelle du projet en cas de pépin.
- Pouvoir accéder au code depuis le repository, permettant le
télétravail.
J’utilise aussi personnellement PHP Storm, un éditeur de code pour PHP, HTML,
CSS et JavaScript.
13
Voici les taches à réaliser pour le Back-Office :
- Intégrer une interface d’administration
- Mettre en place la gestion des utilisateurs
- Gérer la connexion / déconnexion
- Restreindre l’accès à certaines parties du site
- Permettre l’envoie et le téléchargement de fichiers
- Sécuriser l’envoie des fichiers
C. Développement des différentes pages et fonctionnalités
a) L’interface d’administration
Le développement d’une interface d’administration simple, complète et
fonctionnelle prend un temps considérable, que je souhaite optimiser au mieux.
Heureusement, la particularité de Symfony est de pouvoir intégrer facilement
des bundles, j’ai donc intégré le bundle EasyAdmin au projet. Il est judicieux
d’utiliser ce bundle en particulier pour plusieurs raisons :
- Temps d’apprentissage minime : j’ai déjà utilisé ce bundle dans mon
précédent projet et est donc déjà les habitudes de développement.
- Communauté active : ce bundle d’une grosse communauté et donc
d’un gros suivi. Documentation, tutoriels et aides sont disponibles en
nombres sur le web, facilitant le développement.
- Personnalisable : on peut personnaliser l’interface utilisateur avec
notre propre fichier CSS mais aussi réécrire les fonctions existantes et
en rajouter de nouvelle.
14
A cette étape, nous avons une interface d’administration basique
permettant un C.R.U.D complet mais ne prenant pas en compte les exceptions
et non personnalisée.
Il est maintenant temps de personnaliser l’interface d’administration,
voici les différentes fonctionnalités à intégrer afin d’arriver au résultat voulu par
le client :
- Changer la couleur du fond en blanc
- Afficher le logo Arius en tant que lien cliquable redirigeant vers la page
d’accueil de l’interface
- Ajouter le logo Arius en favicon
- Positionner les liens vers le site web
- Rendre possible la suppression de plusieurs entités
- Permettre le téléchargement en fichier .zip des logos des commandes
- Les fichiers envoyés seront sauvegardés dans un dossier
préalablement créé
- La suppression d’une entité entrainera la suppression du dossier et de
ses fichiers relatifs
15
- Afficher les informations détaillées de chaque entité
- Filtres dynamiques d’entité
- Choisir si une entité est affichée
- Choisir si un article est commandable
- Choisir si un utilisateur est autorisé à se connecter
- Gérer les exceptions (nom et caractères réservés des dossiers par
exemple)
- Ajout des notifications de réussites, d’échec ou d’exception à chaque
action
- Ajout d’une notification des nouvelles commandes d’aujourd’hui
- Et bien d’autres tâches plus secondaires …
Après ajout de toutes les fonctionnalités, l’interface d’administration
devient finalement conforme à la demande du client : design simple et épuré
(Voir annexe 11), fonctionnalités avancées disponibles et notifications après
chaque action.
b) La gestion des utilisateurs
Le développement d’une gestion des utilisateurs simple, complète et
fonctionnelle prend un temps considérable, que je souhaite optimiser au mieux.
Heureusement, la particularité de Symfony est de pouvoir intégrer facilement
des bundles, j’ai donc intégré le bundle FOSUserBundle au projet. Il est judicieux
d’utiliser ce bundle en particulier pour plusieurs raisons :
- Temps d’apprentissage minime : j’ai déjà utilisé ce bundle dans mon
précédent projet et est donc déjà les habitudes de développement.
- Communauté active : ce bundle d’une grosse communauté et donc
d’un gros suivi. Documentation, tutoriels et aides sont disponibles en
nombres sur le web, facilitant le développement.
- Personnalisable : on peut réécrire les fonctions existantes et en
rajouter de nouvelle.
16
- Fonctionnalité avancé disponibles : Réinitialisation de mot de passe à
partir d’un lien unique provisoire par exemple
A cette étape, nous avons une gestion d’utilisateur basique permettant la
création, la modification et la suppression d’utilisateur, mais ces utilisateurs
nécessitent de posséder d’autres propriétés pour les besoins du projet.
Il est maintenant temps de personnaliser la gestion d’utilisateur, voici les
différentes fonctionnalités à intégrer afin d’arriver au résultat voulu par le
client :
- Permettre à un utilisateur de se connecter (Voir annexe 6)
- Permettre à un utilisateur de se déconnecter
- Désactiver l’inscription pour les visiteurs
- Gestion des utilisateurs depuis l’interface d’administration
- Génération d’un mot de passe aléatoire lors de la création d’un
utilisateur
- Désactiver la suppression de compte de l’utilisateur
- Restreindre les informations pouvant être modifier par l’utilisateur
(Voir annexe 13)
- Permettre à l’utilisateur de réinitialiser son mot de passe de manière
sécurisé (Voir annexe 7)
- Permettre à l’utilisateur de changer son mot de passe (Voir annexe 14)
- Définir le niveau de privilèges des utilisateurs : administrateur ou
utilisateur
- Interdire l’accès à l’interface d’administration aux utilisateurs non-
administrateur (Voir annexe 16)
- Interdire l’accès au site pour les visiteurs
- Gérer les exceptions (erreur 404 : voir annexe 17)
Après ajout de toutes les fonctionnalités, la gestion des utilisateurs est
désormais conforme à l’attente du client, les utilisateurs peuvent dorénavant
accéder à un panel d’options pour gérer leurs comptes et l’administrateur peut
gérer chaque utilisateur de manière simple et complète.
17
c) Mes commandes
Description de la page
Un utilisateur, une fois connecté, peut naviguer sur le site, et, s’il le souhaite et
si ses token sont suffisants, peut commander un article. L’utilisateur peut
ensuite visiter la page ‘’mes commandes’’, celle-ci offre la possibilité à
l’utilisateur d’avoir un historique de ses commandes sous formes de deux
tableaux distincts : les commandes en cours et les commandes terminées.
(Voir Annexe 12)
Explication technique
J’ai réalisé l’intégralité de cette page en trois parties :
- D’abord, j’ai étendu cette page à la page de base, récupérant ainsi le
style et donc la charte graphique du site, mais aussi les différents
scripts javascript utilisés.
- Ensuite, je réalise une requête vers la base de données : je récupère
toutes les commandes de l’utilisateur connecté.
- Enfin, si l’utilisateur possède des commandes alors celles en cours sont
affichées dans un tableau ‘’Commandes en cours’’, les autres sont
affichées dans un tableau ‘’Commandes terminées’’.
- Sinon, un simple texte indiquant qu’aucune commande n’a été
enregistré par l’utilisateur est affiché.
18
d) Les offres
Description de la page
Un utilisateur connecté à la possibilité de consulter les offres disponibles, c’est-
à-dire que l’administrateur à décider d’afficher sur une page dédiée. Cette
page affiche les informations principales des rangs que l’utilisateur peut
accéder, en plus de son propre rang. Si l’utilisateur souhaite de changer de
rang, il peut cliquer sur le bouton ‘’choisir’’ qui s’affiche lors du survol du
curseur sur ce rang. Un email est alors envoyé à l’administrateur pour le
notifier avec comme informations : l’utilisateur, son rang actuel et le rang
souhaité. (Voir Annexe 15)
Explication technique
J’ai réalisé l’intégralité de cette page en trois parties :
- D’abord, j’ai étendu cette page à la page de base, récupérant ainsi le
style et donc la charte graphique du site, mais aussi les différents
scripts javascript utilisés.
- Ensuite, je réalise une requête vers la base de données : je récupère
tous les rangs ‘’affichables’’ que j’affiche sous forme de cartes
interactifs.
- Enfin, j’ai réalisé une Template d’email qui contiendra les
informations de l’utilisateur et du rang sélectionné, Template qui sera
envoyé en email à l’administrateur.
19
e) Fichier .htaccess et robots.txt
Description de la page
Lors de la mise en ligne du projet, le chemin devant être spécifié pour arriver à
la page d’accueil du site était incorrecte : http://myarius.com/public .
La page http://myarius.com renvoyait sur l’explorateur de fichier, qui affichait
tous les fichiers du projet Symfony : ce problème représente un risque de
sécurité majeur car il permet à n’importe qui d’accéder au code source du
projet, en plus de ne pas correspondre au souhait du client.
Le client souhaitait que http://myarius.com soit la page d’accueil et que le site
web ne soit pas indexé par les robots des différents moteurs de recherche.
Explication technique
Pour réaliser cette demande, j’ai ajouté deux fichiers à la racine du projet :
- Le premier fichier est .htaccess, celui-ci permet la redirection de
http://myarius.com vers http://myarius.com/public tout en
conservant la même url.
- Le second fichier est robots.txt, celui permet de spécifier si les robots
des moteurs de recherche sont autorisés à visiter et indexer les
différentes pages du site web. Par défaut, tous les robots y sont
autorisés, ce qui ne correspond pas aux attentes du client. J’ai donc
spécifié dans ce fichier qu’aucun robot n’était autorisés à accéder à la
page d’accueil, et donc à toutes les autres pages du site.
- Enfin, j’ai ajouté la balise <meta name="robots" content="noindex,
nofollow"> dans la Template source, celle-ci sera alors présente dans
toutes les pages pour qu’elles ne soient pas indexées.
20
7. Améliorations éventuelles
Comme dans la majorité des projets, il est possible d’effectuer des
améliorations. Cette étape se fera lorsque le site web sera en ligne
officiellement. Ainsi, on pourra tester cet outil dans les conditions réelles. En
effet, à l’heure où je rédige ce document, le site web n’a pas encore été testé.
Cependant, je peux d’ores et déjà vous présenter une liste
d’améliorations :
- Rendre le site web responsive (qui s’adapte à tous types d’écrans)
- Possibilité de recherche/tri avancée dans les catalogues (en fonction
de la date, du nombre de vues/commandes, article non-commandé…)
qui pourrai s’avérer utile quand il y aura un grand nombre d’articles.
- Instaurer un système anti-spam pour les formulaires et l’envoie
d’email (nombre d’essai, limite de temps…)
- Permettre à l’utilisateur de consulter tous les logos de ses
commandes envoyés dans une galerie, et de pouvoir les télécharger
dans un fichier .zip comme pour l’administrateur.
Bien entendu, ces différents points ne constituent pas la liste officielle
des améliorations qui seront prévues. En effet, il faudra que celles-ci soient
approuvées par la direction, tout en prenant en compte du temps de
développement nécessaire à la réalisation de celles-ci.
21
8. Conclusion
Ce stage de 6 semaines m’a permis de réaliser plusieurs conclusions.
Tous d’abord, ma vitesse de développement ainsi que mes méthodes de
recherches sont les deux compétences qui ont le plus évoluer. En effet, à mon
retour de formation, j’ai constaté que je pouvais réaliser des programmes
complexes bien plus efficacement qu’auparavant, et que mon temps de
recherches était dorénavant bien plus réduit.
Le stage est une très bonne mise en pratique des connaissances
accumulées. Participer à un réel projet complet, de sa conception à sa mise en
ligne se montre très gratifiant. Malgré la durée du stage qui est assez courte
pour un projet tel qu’un site web complet, j’ai pu atteindre la majorité des
objectifs du cahier des charges, bien que j’aurais aimé peaufiner certains
détails. Le fait de rechercher, d’essayer, de corriger et d’améliorer du code à
temps plein est ce qui m’a fait énormément progresser.
Cependant, la formation Webforce3 à laquelle j’ai participé, avait pour
objectif d’introduire aux bases de la programmation web qui doivent être
perpétuellement approfondies. Durant ce stage, j’ai commis plusieurs
d’erreurs qui auraient pu être évité et qui aurait permis de faire gagner du
temps. Elles sont pour la plupart dû au manque d’expérience. Mais c’est
également le principe de la programmation informatique : on apprend de ses
erreurs.
Dans le futur, je souhaiterai continuer dans le domaine du
développement web et logiciel. Mes compétences acquises au cours de cette
formation me permettront de faciliter l’apprentissage et la compréhension de
nouveaux langages informatiques : Java, C, C++, Python.
22
9. Annexes
23
Annexe 1
Modèle Conceptuel des données du projet Arius (MCD)
24
Annexe 2
Maquette de la page d’accueil
25
Annexe 3
Maquette de la page ‘’Espace Vidéo’’
26
Annexe 4
Maquette de la page d’une vidéo
27
Annexe 5
Maquette de la page ‘’Offres’’
28
Annexe 6
Page de connexion
29
Annexe 7
Page ‘’Mot de passe oublié’’ ou ‘’Première connexion’’
30
Annexe 8
Page d’Accueil
31
Annexe 9
Page de catalogue d’application
32
Annexe 10
Page de Commande d’un Article
33
Annexe 11
Interface d’Administration
34
Annexe 12
Page ‘’Mes commandes’’
35
Annexe 13
Page ‘’Mon compte’’
36
Annexe 14
Page ‘’Modifier le mot de passe’’
37
Annexe 15
Page ‘’Offres’’
38
Annexe 16
Page 403
39
Annexe 17
Page 404
