Ecole Supérieure de Technologie d’Agadir
Filière: Génie Informatique
RAPPORT DE STAGE
Conception d'un Modèle de Tableau de Bord
Administratif et d'une Page d'Accueil Engageante
Réalisé par :
Mostapha BAYI
Société :
Palace Digital
Encadré par :
Youssef SOUIS
Période de stage :
24 juillet 2023 - 24 août 2023
Année universitaire:
2023 - 2024
Dédicace:
Je souhaite dédier ce modeste travail :
À mes parents.
À ma famille.
À mes amis.
À chacun de mes enseignants qui m'ont transmis leur savoir, je leur exprime ma
sincère reconnaissance.
Au personnel de Palace Digital où j'ai effectué mon stage d’initiation.
Remerciement:
Je tiens à exprimer ma sincère gratitude envers Allah pour m'avoir accordé la patience et la
détermination nécessaires pour accomplir cette tâche.
Je souhaite exprimer mes remerciements les plus chaleureux à mes parents pour leur
soutien inébranlable tout au long de ma vie.
J'adresse mes plus sincères remerciements à Monsieur Youssef Souis, dont les
orientations, les conseils et les efforts déployés ont été d'une valeur inestimable tout au long
de mon stage.
Je tiens à exprimer ma reconnaissance envers tous les membres de l'ESTA pour leurs
efforts.
Enfin, je souhaite exprimer ma profonde gratitude envers toute l'équipe de l'entreprise
Palace Digital pour leur accueil chaleureux et leur contribution inestimable à ce projet.
Liste d’abréviations:
HTML: Hyper Text Markup Language.
CSS: Cascading Style Sheets.
JS: JavaScript.
ESTA: Ecole supérieure de technologie d'Agadir.
Liste des figures:
Figure 1: Organigramme de l’entreprise.........................................................................2
Figure 2: Logo d'HTML....................................................................................................5
Figure 3: Logo de CSS....................................................................................................5
Figure 4: Logo de JS.......................................................................................................6
Figure 5: Logo de [Link]................................................................................................6
Figure 6: Logo de Git.......................................................................................................7
Figure 7: Logo de Github.................................................................................................7
Figure 8: 1ère formulaire de connexion...................................................................... ....8
Figure 9: 2ème formulaire de connexion.........................................................................9
Figure 10: tableau de bord administrateur......................................................................9
Figure 11: Tableau de présence...................................................................................10
Figure 12: Tableau des employés.................................................................................10
Figure 13: Page de modification d'employé..................................................................11
Figure 14: Cases à cocher............................................................................................11
Figure 15: page de facturation......................................................................................12
Figure 16: fenêtre contextuelle......................................................................................12
Figure 17: 1ère onglet, Tableau....................................................................................13
Figure 18: 2ème onglet, Graphique..............................................................................13
Figure 19: section 1 grand écran..................................................................................14
Figure 20: section 1 petit écran moitié 1.......................................................................15
Figure 21: section 1 petit écran moitié 2.......................................................................15
Figure 22: barre de navigation......................................................................................15
Figure 23: section 2 grand écran..................................................................................16
Figure 24: section 2 petit écran moitié 1.......................................................................16
Figure 25: section 2 petit écran moitié 2.......................................................................16
Figure 26: section 3 grand écran..................................................................................17
Figure 27: section 3 petit écran.....................................................................................17
Figure 28: section 4 grand écran..................................................................................18
Figure 29: section 4 petit écran moitié 1.......................................................................18
Figure 30: section 4 petit écran moitié 2.......................................................................18
Figure 31: section 6.......................................................................................................19
Figure 32: section 6 petit écran.....................................................................................19
Figure 33: pied de page................................................................................................20
Figure 34: page demandation de démonstration gratuite.............................................21
Figure 35: page demandation de démonstration gratuite petit écran...........................21
Sommaire:
Dédicace..................................................................................................................................
Remerciement.........................................................................................................................
Liste d’abréviations..................................................................................................................
Liste des figures.......................................................................................................................
Introduction............................................................................................................................1
Chapitre 1: présentation de l’entreprise................................................................................2
1. Presentation de l'entreprise...........................................................................................2
2. Organigramme...............................................................................................................2
3. Fiche technique de l'entreprise......................................................................................3
4. Services.........................................................................................................................4
Chapitre 2: Outils de travail ..................................................................................................5
1. HTML.............................................................................................................................5
2. CSS...............................................................................................................................5
3. JS...................................................................................................................................6
4. [Link]..........................................................................................................................6
5. Git..................................................................................................................................7
6. GitHub............................................................................................................................7
Chapitre 3: Réalisations........................................................................................................8
1. Login..............................................................................................................................8
2. tableau de bord administrateur......................................................................................9
3. Tableaux......................................................................................................................10
4. conceptions de champs de formulaire........................................................................11
5. Page de facturation.....................................................................................................12
6. fenêtre contextuelle.....................................................................................................12
7. Contenu par onglets....................................................................................................13
8. Page de destination.....................................................................................................14
8.1. Section d'en-tête...................................................................................................14
8.2. Section “qui sommes-nous”..................................................................................16
8.3. Section des caractéristiques................................................................................17
8.4. Section “Pourquoi choisir Network HR”................................................................18
8.5. Section partenaires et newsletter.........................................................................19
8.6. Pied de page........................................................................................................20
8.7. Page demandation de démonstration gratuite.....................................................21
Conclusion...........................................................................................................................22
Bibliographie........................................................................................................................23
Introduction:
Motivé par mon intérêt pour la conception de sites web, en particulier la partie "frontend",
j'ai entrepris des recherches pour trouver une opportunité de stage me permettant
d'explorer et de progresser dans ce domaine. J'ai choisi de rejoindre Palace Digital, une
entreprise spécialisée dans la création de présences en ligne pour ses clients.
Pendant mon stage, j'ai principalement travaillé sur la création d'un tableau de bord
administratif, une page d'accueil (landing page) et d'autres éléments tels que la mise en
forme de tableaux HTML, la création de fenêtres contextuelles (popups) et de champs de
saisie. J'ai utilisé les langages HTML, CSS et JavaScript, ce qui m'a plongé dans
l'univers technique du frontend.
Ce rapport commence par une présentation de Palace Digital, puis je décris en détail ma
contribution tout au long de mon stage. En conclusion, je souligne les compétences que
j'ai acquises grâce à cette expérience, qui ont enrichi mon parcours académique et
professionnel.
1
Chapitre 1:
présentation de l’entreprise
1. Presentation de l'entreprise:
Crée en 2020, Palace Digital est une entreprise qui propose une variété de services en
ligne pour aider les entreprises à améliorer leur présence numérique et à atteindre leurs
objectifs commerciaux en ligne. Palace Digital peuvent offrir une gamme de services allant
de la conception de sites Web à la gestion de réseaux sociaux, en passant par la publicité
en ligne et la stratégie de marketing numérique et le graphique design.
2. Organigramme :
Figure 1: Organigramme de l’entreprise
2
3. Fiche technique de l'entreprise:
Nom : Palace Digital.
Forme Juridique : Société à responsabilité limitée.
Date de création : 2020.
Adresse : Rue Marrakech, Taghzout Inezgane N° 6 2eme Etage
Immeuble Yousra, Av. Marrakech, Inezgane 86350.
GSM : +212 644-948637.
Courriel : info@[Link].
Directeur : Youssef SOUIS.
Capital : 100 000,00 DH.
ICE : 002972367000011.
Site web : [Link]
Nombre d’employés : 8.
3
4. Services:
développement full-stack: L'agence fournit des solution de développement web (front-
end et back-end) pour les entreprises cherchant à établir leur présence en ligne ou à
améliorer leurs existants.
WordPress personnalisé: l’agence conçoit des sites Web spéciaux en utilisant
WordPress, adaptés aux besoins du client.
Design: L'agence met l'accent sur la conception esthétique et professionnelle de sites
web, d'applications et d'autres solutions numériques. Leurs conceptions modernes
garantissent une expérience visuelle de haute qualité.
E-Commerce: L'agence offre des solutions pour le commerce en ligne, incluant la
création de boutiques en ligne, des fonctionnalités de panier d'achat et des options de
paiement en ligne.
Solutions efficaces: L'agence se spécialise dans le développement de solutions
numériques efficaces pour gérer des produits ou améliorer leur prestation. Ces solutions
sont conçues pour optimiser les processus de l'entreprise.
4
Chapitre 2:
Outils de travail
1. HTML
Figure 2: Logo d'HTML
Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière
version HTML5, est le langage de balisage conçu pour représenter les pages web.
Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement
une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou
encore d’inclure des ressources multimédias dont des images, des vidéos, et des
programmes informatiques. L'HTML offre également la possibilité de créer des
documents interopérables avec des équipements très variés et conformément aux
exigences de l’accessibilité du web.
2. CSS
Figure 3: Logo de CSS
Les feuilles de style en cascade, généralement appelées CSS (Cascading Style Sheets),
forment un langage informatique qui décrit la présentation des documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception
de sites web et bien pris en charge par les navigateurs web dans les années 2000.
5
3. JS
Figure 4: Logo de JS
JavaScript est un langage de programmation principalement utilisé sur Internet, en
complément de HTML et CSS. Il utilise des scripts pour créer du contenu dynamique. Il
complémente ainsi les deux autres langages de base du Web et peut stocker des valeurs,
faire des opérations ou encore exécuter du code selon certains évènements. C'est un
langage orienté prototype, c'est-à-dire semblable à un langage orienté objet, mais sans
classe.
4. [Link]
Figure 5: Logo de [Link]
[Link] est une bibliothèque JavaScript gratuite et open source pour la visualisation de
données, qui prend en charge huit types de graphiques : barres, lignes, aires, secteurs
(beignet), bulles, radar, polaires et nuages de points. Créée par le développeur Web
londonien Nick Downie en 2013, elle est désormais maintenue par la communauté et
constitue la deuxième bibliothèque de graphiques JavaScript la plus populaire sur GitHub
en termes de nombre d'étoiles après [Link], considérée comme nettement plus facile à
utiliser bien que moins personnalisable que la dernier. [Link] s'affiche dans un canvas
HTML5 et est largement considéré comme l'une des meilleures bibliothèques de
visualisation de données. Il est disponible sous licence MIT.
6
5. Git
Figure 6: Logo de Git
Git est de loin le système de contrôle de version le plus largement utilisé aujourd'hui. Git est
un projet open source avancé, qui est activement maintenu. À l'origine, il a été développé
en 2005 par Linus Torvalds, le créateur bien connu du noyau du système d'exploitation
Linux, j’ai utiliser Git pour le contrôle de version.
6. GitHub
Figure 7: Logo de Github
GitHub est une plateforme et un service basés sur le web qui facilite le développement
collaboratif de logiciels et la gestion de versions. Il permet aux développeurs de stocker,
gérer et suivre les modifications apportées à leur code, ce qui facilite le travail sur des
projets avec d'autres personnes et permet de conserver un historique des révisions du
code. J'ai souvent utilisé GitHub pour héberger les sites web que j'ai créés, me permettant
ainsi de présenter des démonstrations en direct et de les partager avec d'autres membres
de l'équipe.
7
Chapitre 3: Réalisations
Il est important de noter que les sites web ont seulement des maquettes et que je n’ai pas
travailler sur leurs fonctionnalités, parce-que j’ai travaillé seulement sur le frontend avec
HTML, CSS et JS.
1. Login:
La figure 8 est mon design d’une formulaire de connexion qui se distingue par sa simplicité
élégante. Équipé de deux champs de saisie (email et mot de passe), de plus, le bouton de
révélation du mot de passe ajoute une couche de praticité, permettant aux utilisateurs de
visualiser ou masquer leur mot de passe et un button de connection et un lien pour
changer le mot de passe.
Et pour figure 9 c’est un design que l’entreprise m’a donné pour l’implémenter qui contient
de deux champs de saisie (email et mot de passe) et un button de connection.
Figure 8: 1ère formulaire de connexion
8
Figure 9: 2ème formulaire de connexion
2. tableau de bord administrateur:
Cette maquette associe un design moderne et convivial. Elle comprend des tableaux de
produits et d'employés, des graphiques pour visualiser les données, améliorant ainsi
l'expérience numérique de l'administration. De plus, cette maquette intègre une barre de
navigation qui offre des fonctionnalités telles qu'un bouton de mode sombre et de mode
clair, ainsi qu'un bouton de plein écran. En outre, une barre de navigation latérale est
également présente, contenant des liens pour naviguer entre les différentes pages du site
web.
Figure 10: tableau de bord administrateur
9
3. Tableaux:
Ces modèles de tableaux ont été créés pour représenter visuellement le format de suivi de
présence des employés et la liste des membres de l'équipe. Le tableau de suivi de
présence comprend les colonnes de date, heure d'arrivée, heure de départ et total
d'heures. Le tableau de la liste des employés présente les colonnes pour le nom, le poste,
le département et les informations de contact. Ces modèles statiques servent de référence
visuelle pour la création de tableaux similaires.
Figure 11: Tableau de présence
Figure 12: Tableau des employés
10
4. conceptions de champs de formulaire:
J'ai élaboré tous les champs de formulaire en les modernisant avec du CSS pur pour les
rendre plus attrayants et esthétiques. J'ai apporté des modifications aux inputs et aux
éléments connexes pour créer une interface utilisateur élégante et conviviale.
De plus, j'ai mis en place une fonctionnalité de cases à cocher avec un bouton 'Tout
sélectionner' en utilisant JavaScript pour simplifier la sélection de plusieurs cases à
cocher. Cette fonctionnalité améliore considérablement l'expérience de l'utilisateur en
permettant une sélection rapide et pratique des éléments souhaités dans le formulaire.
Figure 13: Page de modification d'employé
Figure 14: Cases à cocher
11
5. Page de facturation:
Ceci est une page de facturation où j'ai créé un modèle convivial pour l'utilisateur, affichant
les informations de manière intuitive. Le but est de simplifier la présentation des détails
financiers et de rendre la navigation plus facile pour les utilisateurs.
Figure 15: page de facturation
6. fenêtre contextuelle:
un modèle de fenêtre contextuelle moderne à l'aide de CSS et JavaScript, elle présente
un design élégant tout en intégrant des champs de saisie.
J'ai également optimisé les interactions en intégrant des transitions et des animations
fluides ce qui améliore l'expérience globale des utilisateur.
Figure 16: fenêtre contextuelle
12
7. Contenu par onglets:
J'ai créé une page avec un contenu organisé par onglets, vous permettant de naviguer
entre deux sections sans changer la page. Cette mise en page permet aux utilisateurs de
passer facilement d'une section à l'autre en utilisant des onglets, offrant ainsi une
expérience de navigation fluide et intuitive.
Figure 17: 1ère onglet, Tableau
Figure 18: 2ème onglet, Graphique
13
8. Page de destination:
J'ai élaboré un modèle de page d'atterrissage en utilisant exclusivement les langages
HTML, CSS, et JavaScript. Ce modèle a été conçu avec soin dans le but d'attirer
l'attention des visiteurs dès le premier regard.
Les animations fluides, ainsi que les éléments déclenchés au défilement, rendus possibles
grâce à JavaScript et à l'API "Intersection Observer" ainsi qu'au CSS, confèrent à ce
modèle une touche professionnelle et dynamique. De plus, je tiens à souligner que ce
modèle est entièrement responsive, assurant ainsi une expérience utilisateur optimale
quel que soit le dispositif utilisé.
L'entreprise m'a fourni le design initial, et j'ai travaillé sur son implémentation et sa mise en
responsive. En plus de ce modèle de page d'atterrissage, j'ai également créé une autre
page de demande de démonstration gratuite.
Veuillez noter que tous les paragraphes actuels ne contiennent que du texte d'exemple et
seront remplacés ultérieurement par les informations réelles dans le futur.
8.1. Section d'en-tête:
J'ai créé une section d'en-tête complète avec une barre de navigation adaptable, des liens
de navigation pour explorer différentes pages, une image centrale captivante pour une
première impression forte, une zone dédiée à une description convaincante, et un bouton
d'action bien placé pour encourager l'interaction des visiteurs.
Figure 19: section 1 grand écran
14
Figure 20: section 1 petit écran Figure 21: section 1 petit écran
moitié 1 moitié 2
Figure 22: barre de navigation
15
8.2. Section “qui sommes-nous”:
J'ai créé un modèle de section “Qui sommes-nous” qui comprend un paragraphe avec un
texte fictif, un bouton “En savoir plus” et une image. Ce design élégant permettra aux
visiteurs du site web de découvrir rapidement et facilement les informations essentielles
concernant l’équipe ou l’entreprise, tout en leur offrant la possibilité d'en apprendre plus en
un simple clic.
Figure 23: section 2 grand écran
Figure 24: section 2 petit écran moitié 1 Figure 25: section 2 petit écran moitié 2
16
8.3. Section des caractéristiques:
J'ai créé une section présentante afin de montrer les fonctionnalités du produit au client, et
un paragraphe descriptif qui permet au client de mieux comprendre les avantages de
produit par rapport à d'autres options disponibles sur le marché. En fournissant des
informations détaillées et convaincantes, cela aide les clients pour prendre une décision
éclairée.
Figure 26: section 3 grand écran
Figure 27: section 3 petit écran
17
8.4. Section “Pourquoi choisir Network HR”:
J'ai créé une section intitulée “Pourquoi choisir Network HR” dans laquelle j'ai élaboré un
modèle permettant à l'entreprise d'expliquer aux clients pourquoi ils devraient opter pour
une collaboration avec elle. Cette section a pour objectif de fournir aux visiteurs une
compréhension approfondie des avantages de l'entreprise, afin qu'ils puissent prendre une
décision éclairée lorsqu'ils envisagent de travailler ensemble.
Figure 28: section 4 grand écran
Figure 29: section 4 petit écran Figure 30: section 4 petit écran
moitié 1 moitié 2
18
8.5. Section partenaires et newsletter:
J'ai élaboré un modèle spécialement conçu pour la section partenaires, permettant à
l’entreprise d'intégrer de manière esthétique et professionnelle les logos de ses précieux
partenaires. De plus, j'ai développé une conception élégante initialement statique pour la
section d'inscription à la newsletter, qui, une fois rendue fonctionnelle, offrira aux visiteurs
une expérience conviviale pour se tenir au courant des dernières actualités, des offres
exclusives et des mises à jour essentielles de l'entreprise.
Figure 31: section 6
Figure 32: section 6 petit écran
19
8.6. Pied de page:
J'ai créé un pied de page, qui est la section située en bas d'une page web et qui contient
des informations importantes telles que les mentions de copyright, les coordonnées de
contact et des options de navigation supplémentaires. Il sert de moyen constant et
accessible pour les utilisateurs d'accéder aux informations essentielles et aux ressources
tout au long des pages du site web.
Figure 33: pied de page
20
8.7. Page demandation de démonstration gratuite:
J'ai mis en place une page où l'utilisateur peut demander une démonstration gratuite pour
découvrir le produit avant de prendre sa décision d'achat. Cette démarche, une fois
fonctionnelle, vise à offrir aux utilisateurs l'opportunité de mieux comprendre les
fonctionnalités et les avantages du produit, ce qui peut les aider à prendre une décision
éclairée.
Figure 34: page demandation de démonstration gratuite
Figure 35: page demandation de
démonstration gratuite petit écran
21
CONCLUSION
Pendant mon stage chez Palace Digital, j'ai eu l'opportunité de travailler sur un projet
ambitieux visant à créer un tableau de bord administratif innovant ainsi qu'une page
d'accueil attrayante.
En l'espace d'un mois, j'ai pu mettre en pratique les connaissances acquises au cours de
ma première année en génie informatique à l'ESTA.
Cette expérience m'a permis de renforcer mes compétences en développement web, en
particulier en ce qui concerne HTML, CSS et JavaScript.
De plus, j'ai exploré les meilleures pratiques en matière de rédaction de code, en veillant à
ce qu'il soit à la fois compréhensible pour les autres membres de l'équipe et facile à mettre
à jour.
Je tiens à exprimer ma sincère gratitude envers le chef de l'entreprise pour son accueil
exceptionnel et son soutien tout au long de mon stage.
Je souhaite également remercier chaleureusement tous les enseignants du département de
génie informatique de l'ESTA pour tout ce qu'ils m'ont enseigné au cours de ma première
année dans l'établissement. Cette expérience a été fondamentale pour mon développement
professionnel et a renforcé ma passion pour le domaine de l'informatique.
22
BIBLIOGRAPHIE
[Link] : site web de Palace Digital.
[Link] : mon profile de GitHub.
[Link] : documentation de [Link].
[Link] : documentation de Git.
[Link] : documentation de l‘API
“intersection observer“.
[Link] : pour les tutoriels (HTML, CSS et JS).
[Link] : pour les définitions.
23