Rapport de Stage Dates Du Stage (Proposition de Modèle de Rapport)

RAPPORT DE STAGE
Dates du stage
(Proposition de modèle de rapport)
IMSET Rapport de Stage de 1ère année Design Glass Sural
SOMMAIRE
Table des matières

TAPEZ LE TITRE DU CHAPITRE (NIVEAU 1) ............................................................................................................................
TAPEZ LE TITRE DU CHAPITRE (NIVEAU 2) ........................................................................................................................................ 2
Tapez le titre du chapitre (niveau 3) ........................................................................................................................................... 3
TAPEZ LE TITRE DU CHAPITRE (NIVEAU 1) .......................................................................................................................... 4

TAPEZ LE TITRE DU CHAPITRE (NIVEAU 2) ........................................................................................................................................ 5
Tapez le titre du chapitre (niveau 3) ........................................................................................................................................... 6
Aymen Ben Saad 2/40

Remerciements
Je tiens à exprimer ma profonde gratitude envers toutes les personnes qui ont contribué de
manière significative à la réussite de mon stage chez Design Glass Sural , une étape
incontournable de ma formation à l'Institut Maghrébin des Sciences Économiques et de
Technologie.
Tout d'abord, je tiens à remercier l'ensemble de l'équipe pédagogique de l'Institut

Maghrébin des Sciences Économiques et de Technologie , qui m'a offert une formation
complète et m'a préparé de manière adéquate pour affronter le monde professionnel. Leur
dévouement et leur expertise ont été les piliers de ma réussite académique et ont jeté les
bases solides de ma carrière.
Je souhaite également exprimer ma gratitude envers les responsables et collaborateurs de

Design Glass Sural, qui m'ont chaleureusement accueilli au sein de leur équipe. Leur
encadrement attentif et leur volonté de partager leurs connaissances ont grandement enrichi
mon expérience de stage. J'ai eu la chance de travailler aux côtés de professionnels
passionnés et compétents, ce qui a grandement contribué à ma croissance personnelle et
professionnelle.
Enfin, je n'oublie pas de remercier ma famille et mes amis pour leur soutien indéfectible
tout au long de cette aventure. Leur encouragement a été une source d'inspiration constante.
Ce stage a été une expérience formatrice et enrichissante, et je suis reconnaissant envers

chacune des personnes qui a contribué à en faire un succès. Ces connaissances acquises et
ces relations établies resteront des atouts précieux dans ma carrière future.
Merci sincèrement à tous.
Aymen Ben Saad 3/40

INTRODUCTION
Pendant ma formation à l'Institut Maghrébin des Sciences Économiques et de Technologie,

orientée vers l'obtention du Brevet de Technicien Professionnel en informatique de gestion,
j'ai eu l'opportunité enrichissante d'effectuer un stage chez Design Glass Sural. Ce rapport
dévoile en détail mon expérience en mettant en exergue les enseignements et compétences
acquises, se focalisant spécifiquement sur le développement web frontend.
Ce stage chez Design Glass Sural a constitué une étape cruciale dans mon parcours,
consolidant mes compétences techniques dans le domaine du développement web frontend
et approfondissant ma compréhension des exigences professionnelles. En progressant au
sein de l'entreprise, j'ai développé une connaissance approfondie des réalités
opérationnelles propres à ce secteur. Cette expérience s'est avérée déterminante dans ma
transition vers le monde professionnel, facilitant l'acquisition de compétences pratiques et
l'établissement de liens concrets avec le domaine du développement web.
Le présent rapport offre une perspective détaillée sur l'organisation de l'entreprise, ses
services, et se concentre sur une analyse approfondie de mes contributions dans le domaine
du développement web frontend. Mon objectif est de partager des connaissances et des
observations spécifiques à cette spécialisation, contribuant ainsi de manière significative à
l'enrichissement de ma formation dans le domaine du développement web.
Aymen Ben Saad 4/40

PRÉSENTATION DE LA SOCIÉTÉ
Raison sociale : Design Glass Sura
Statut juridique : Société par actions simplifiée (SAS)
• 1.1 Sociétés apparentées
Maison mère : Quartier Al-Intilaka, Avenue Al-Saghir, Findouli, Tunis, Tunisie
Filiales : Aucune
1.2 Activités
Design Glass Sural est une entreprise de taille moyenne spécialisée dans la vente et la
réparation de produits en verre. Elle propose une large gamme de produits, notamment des
vitres, des miroirs, des portes en verre, des tables en verre, etc. L'entreprise fournit
également des services de réparation de verre, tels que le remplacement de vitres brisées,
la réparation de miroirs fissurés, etc.
• 1.3 Marché et chiffre d'affaires
Le chiffre d'affaires de Design Glass Sural est d'environ 3 millions de dinars tunisiens par
an. L'entreprise exporte environ 20 % de sa production. Les principaux clients de
l'entreprise sont des particuliers, des entreprises et des administrations publiques.
• 1.5 Organisation
Aymen Ben Saad 5/40

L'organigramme
Figure 1.1 l'organigramme de l’entreprise
Aymen Ben Saad 6/40

Problématique
Mon stage chez Design Glass Sural a été une opportunité unique pour appliquer mes
connaissances en développement front-end. Il m'a permis de saisir les défis concrets liés à
la création d'un site web visant à renforcer la présence en ligne de l'entreprise. Le projet
consistait à concevoir un site au-delà d'une simple vitrine, intégrant des fonctionnalités de
présentation de produits, tout en fournissant des informations essentielles sur l'entreprise,
ses contacts et sa localisation.
Contexte et Enjeux
La visibilité en ligne est désormais cruciale pour toutes les entreprises, indépendamment
de leur taille ou de leur secteur d'activité. La création d'un site web efficace ne se limite
plus à une simple présence en ligne ; elle implique la fourniture d'une expérience utilisateur
optimale tout en atteignant les objectifs commerciaux de l'entreprise.
Problématique Centrale
Comment maximiser la visibilité en ligne de Design Glass Sural tout en offrant une
expérience utilisateur captivante ? Comment trouver l'équilibre entre une présentation
complète de l'entreprise, la promotion des produits et la facilité d'utilisation pour les
visiteurs ?
Axes de Réflexion
Expérience Utilisateur (UX) : Comment concevoir une interface conviviale et intuitive

garantissant une expérience utilisateur positive, tout en permettant aux visiteurs de trouver
rapidement les informations recherchées ?
Contenu Informatif et Promotionnel : Comment présenter de manière attrayante les

produits de Design Glass Sural tout en fournissant des informations complètes sur
l'entreprise, ses valeurs et ses spécificités ?
Aymen Ben Saad 7/40
Solution propose
La résolution de ces problématiques constitue un défi stimulant qui nécessitera une analyse
approfondie, une compréhension fine des besoins de l'entreprise et une adaptation
constante aux évolutions du marché numérique. Ce rapport de stage explorera ces
différentes facettes, proposera des solutions concrètes et évaluera l'impact de ces efforts
sur la visibilité en ligne et les performances commerciales de design Glass Sural.
Aymen Ben Saad 8/40

3 Architecture Environnementale
Dans le cadre de mon stage, l'architecture environnementale mise en place pour le

développement du projet a été soigneusement planifiée afin d'assurer une cohérence, une
stabilité et une efficacité optimales. Les éléments matériels, logiciels, et le matériel utilisés
sont cruciaux pour garantir le bon fonctionnement du projet tout au long de son cycle de
vie.
3.1. Environnement Matériel
Ordinateur Principal:
Marque: Lenovo V15
Processeur : AMD 3020e with Radeon Graphics 1.20 GHz
Mémoire RAM installée : 8,00 Go
Type du système : Système d’exploitation 64 bits, processeur x64
3.2. Environnement Logiciel
Système d'Exploitation : Windows 11
Environnement de Développement Intégré (IDE):
Visual Studio Code
Figure 1.2 Logo Visual Studio Code
Aymen Ben Saad 9/40

Visual Studio Code, développé par Microsoft, se positionne comme un éditeur de code
extensible offrant une polyvalence d'utilisation sur les systèmes d'exploitation Windows,
Linux et macOS. Ses fonctionnalités étendues englobent le débogage, la mise en évidence
de la syntaxe, la complétion intelligente du code (IntelliSense), l'utilisation de snippets, la
refactorisation du code, ainsi que l'intégration native avec Git.
L'interface flexible de Visual Studio Code permet aux utilisateurs de personnaliser divers
aspects tels que le thème, les raccourcis clavier, les préférences, et offre la possibilité
d'installer des extensions pour enrichir davantage ses fonctionnalités.
Langages de Programmation:
HTML
Figure 1.3 HTML 5
HTML5 (HyperText Markup Language 5) représente la dernière évolution majeure du

HTML, un format de données essentiellement conçu pour la représentation des pages web.
Cette révision significative a été officiellement finalisée le 28 octobre 2014. HTML5
introduit deux syntaxes, à savoir HTML5 et XHTML5, définies dans un modèle abstrait
en termes de Document Object Model (DOM).
Aymen Ben Saad 10/40

CSS
Figure 1.4 CSS 3
Les feuilles de style en cascade, communément désignées par l'acronyme CSS (Cascading
Style Sheets), représentent un langage informatique dédié à la définition de la présentation
des documents HTML et XML. Ces normes, qui établissent les règles de CSS, sont publiées
par le World Wide Web Consortium (W3C), organisme de référence dans le domaine des
standards du web. Apparu au cours du milieu des années 1990, CSS s'est rapidement imposé
comme un outil incontournable dans la conception de sites web, bénéficiant d'une large
adoption par les navigateurs web dès les années 2000.
JavaScript
Figure 1.5 JavaScript
JavaScript se distingue comme un langage de programmation de scripts essentiellement

déployé dans le contexte des pages web interactives, devenant ainsi une composante
fondamentale des applications web. En association avec les langages HTML et CSS,
JavaScript constitue l'épine dorsale des outils privilégiés par les développeurs web. Son
adoption est omniprésente, avec une grande majorité des sites web qui l'intègrent,
démontrant ainsi son rôle central dans l'écosystème du développement web.
Frameworks et Bibliothèques:
BootStrap
Figure 1.5
Bootstrap
Bootstrap, un framework CSS gratuit et open-source, est spécifiquement conçu pour le

développement web front-end, mettant l'accent sur la réactivité et la priorité mobile. Il
propose des modèles de conception basés sur HTML, CSS et, en option, JavaScript,
couvrant une gamme étendue d'éléments d'interface tels que la typographie, les
formulaires, les boutons, la navigation, et bien d'autres.

Chapitre II :
Etude Préalable et specification des besoins

Introduction
Il est indispensable avant de se lancer dans la réalisation de tout projet, de bien étudier et
analyser des projets similaires pour profiter des avantages et éviter les malveillances dans
le présent projet
Pour cela j’ai choisis deux sites très fameux dans la vente en ligne en Tunisie le premier
est https://www.saint-gobain-glass.fr/fr et le deuxième est https://www.glass-decor.be/ .
1. Analyse du https://www.saint-gobain-glass.fr/fr
Figure : site saint-gobain glass
Avantages :
• Élégance visuelle : Le design en verre peut apporter une esthétique élégante et moderne
au site.
• Transparence et clarté : Utiliser des éléments de design en verre peut renforcer la

sensation de transparence et de clarté.
• Potentiel créatif : Offre des possibilités créatives uniques en jouant avec la lumière, les
reflets et la texture.
Inconvinent :
• Complexité de conception : La mise en œuvre réussie de designs en verre peut

nécessiter des compétences avancées en conception et en développement.
• Temps de chargement : Des éléments graphiques complexes en verre peuvent ralentir

le temps de chargement du site, ce qui peut affecter l'expérience utilisateur.
• Compatibilité avec les appareils : Certains effets de verre peuvent ne pas être
parfaitement rendus sur tous les appareils, ce qui peut compromettre la cohérence
visuelle du site.
• Accessibilité : Certains effets visuels en verre peuvent rendre le site moins accessible
pour les utilisateurs ayant des besoins spécifiques, nécessitant une attention particulière
pour garantir une accessibilité optimal
Analyse site https://www.glass-decor.be/

Figure : site glass décor
Avantage :
• Portfolio et Galerie : Il est important que ce site présente une section de portfolio ou de
galerie pour mettre en valeur les réalisations en verre. Cela peut donner aux visiteurs
une idée de la qualité de son travail.
• Appels à l'action (CTA) : Il guide les visiteurs vers des actions spécifiques, comme la
prise de contact.
Inconvinent :
• Surchargé d'Effets Animés : Trop d'effets animés ou de transitions complexes peuvent

distraire les visiteurs, rendant la navigation moins intuitive et déroutante.
Les besoin fonctionel

Les besoins fonctionnels de notre site web de design en verre peuvent varier en fonction des
objectifs spécifiques de notre entreprise et des attentes de nos utilisateurs. Cependant, voici
quelques besoins fonctionnels généraux qui pourraient être pertinents pour notre site de
design en verre :
1. Portfolio Visuel :Intégrer une section de portfolio qui met en valeur nos créations en verre
avec des images de haute qualité.
2. Galerie de Produits :une galerie bien organisée présentant nos articles
3. Formulaire de Demande de Devis : Intégrer un formulaire de demande de devis en ligne

pour permettre aux visiteurs intéressés d'obtenir des informations sur le coût de nos services
ou produits.
4. Page "À Propos" : Fournir une section qui raconte l'histoire de notre entreprise, met en
avant notre expertise dans le design en verre.
5. Contact Facile : Inclure des informations de contact claires, telles qu'une adresse e-mail,
un numéro de téléphone et éventuellement un formulaire de contact, pour que les visiteurs
puissent facilement nous joinder
6. Espace Client ou Compte Utilisateur : Si pertinent, inclure un espace réservé aux clients
où ils peuvent suivre leurs commandes, visualiser des projets en cours ou passer des
commandes personnalisées.
7. Réseaux Sociaux : Intégrer des liens vers nos profils sur les réseaux sociaux pour favoriser
la visibilité et permettre aux utilisateurs de partager vos créations.
Besoin non fonctionel :
Voici quelques besoins non fonctionnels qui pourraient être pertinents pour notre site web de
design en verre :
Performance :
Temps de chargement : Assurer des temps de chargement rapides pour améliorer l'expérience
utilisateur.
Évolutivité : Garantir que le site peut gérer une augmentation du nombre de visiteurs et de
données.
Sécurité :
Protection des données : Mettre en place des mesures de sécurité robustes pour protéger les
informations sensibles des utilisateurs.
Certificat SSL : Utiliser un certificat SSL pour garantir la sécurité des transactions et la
confidentialité des données.
Fiabilité :
Disponibilité : S'assurer que le site est disponible et opérationnel la plupart du temps.
Sauvegarde des données : Mettre en place des processus réguliers de sauvegarde des données
pour éviter toute perte en cas de problème.
Convivialité :

Accessibilité : S'assurer que le site est accessible à tous, y compris aux personnes ayant des
besoins spécifiques.
Interface utilisateur intuitive : Concevoir une interface conviviale pour faciliter la navigation
des utilisateurs.
Évolutivité :
Architecture extensible : Concevoir une architecture qui permet des mises à jour et des ajouts
faciles de fonctionnalités.
Maintenance :
Facilité de maintenance : Concevoir le site de manière à ce qu'il soit facile à entretenir et à

mettre à jour.
Documentation : Fournir une documentation claire pour faciliter la maintenance future.
Conclusion :
Ce chapitre a analysé deux sites web de design en verre pour identifier les besoins essentiels.
Nous avons défini des besoins fonctionnels comme la présentation de portfolios et des
formulaires de contact, ainsi que des besoins non fonctionnels. Ce travail constitue une base
solide pour la conception future du site. La prochaine étape sera de créer une architecture de
site web et de commencer le développement en tenant compte de ces besoins

Chapiter conception

Introduction
Le rôle essentiel dans le développement du site web front-end pour la société Design Glass
Sural est joué par la phase de conception. En décrivant l'architecture générale que nous
suivrons tout au long de la réalisation, c'est à ce stade que nous établirons une vision
globale du projet. Ensuite, nous passerons en revue minutieusement notre choix conceptuel
grâce à une variété de diagrammes.
I. Conception Générale
1. Cycle de vie :
1.1 Définition
Depuis la conception jusqu'à la mise en œuvre, le cycle de vie d'une application englobe
toutes ses étapes. L'objectif fondamental de cette initiative consiste à établir des jalons
partiels qui permettent la validation du développement logiciel ainsi que l'examen attentif
du processus mis en œuvre. La nécessité de découper vient du besoin d'identifier au plus
vite les erreurs et donc diminuer le coût qu'elles entraînent lorsqu'on ne s'en occupe que
tardivement.
1.Le déroulement des actions dans un cycle de vie
Le cycle de vie adopté pour la réalisation du site web e-commercial pour Design Glass
Sural comprend généralement les activités suivantes :
- Spécification des besoins : La définition de la finalité du projet ainsi que son intégration
dans une stratégie globale sont des éléments clés à considérer.
- Conception générale : On est en train de préparer l'architecture globale du logiciel.

- Conception détaillée : Une définition claire et complète de chaque segment du logiciel

est fournie.
- Développement : En utilisant un langage informatique, les fonctionnalités spécifiées dans

la phase conceptuelle sont traduites.
- Tests unitaires : Selon les normes définies dans la conception, une vérification
individuelle de chaque sous-ensemble du logiciel est effectuée.
- Intégration : Plusieurs tests systèmes sont mis en place afin de garantir que le logiciel
répond précisément aux besoins énoncés dans le cahier des charges. Dans cette optique, un
manuel d'utilisation complet est également préparé pour guider les utilisateurs.
- Validation : Une étape primordiale consiste à vérifier que le site répond aux critères
définis lors de sa conception initiale dans le cadre du cycle de vie.
1.Des illustrations concrètes des différents modèles de cycles de vie sont données ci-
dessous.
a. Cascade modèle de cycle de vie.

Figure 9: Modèle de cycle de vie en cascade
Dans ce modèle, le principe est simple : Des documents ou des logiciels spécifiques sont
produits à chaque phase, qui prend fin à une date précise. On évalue si les résultats sont
conformes aux normes en analysant attentivement les interactions entre étapes. Seulement
ensuite, on passe à la phase suivante. Même si le modèle original ne permettait pas cela, une
fonctionnalité de retour en arrière a été ajoutée pour tenir compte du fait qu'une étape peut
remettre en question plus d'une autre étapes antérieure dans les faits.
b. L'approche du modèle de cycle de vie en V.

Figure 10: Modèle de cycle de vie en V
Un moyen efficace pour résoudre la problématique d'adaptabilité du modèle linéaire, c'est

l'utilisation du cycle de vie selon le schéma en forme de V. Tardivement, en cas d'anomalie,
il permet l'élimination du retour aux étapes précédentes. Les avantages de ce modèle
incluent la qualité de mise en œuvre des tests, sa validation dans l'industrie, la
normalisation (ISO-12207, MILSTD-498, etc.), et la réalisation simultanée de deux types
de tâches : Pour prendre l'étape suivante, il faut une préparation verticale. En revanche,
pour vérifier les tâches actuelles, il faut une préparation horizontale.
Ses inconvénients
- La validation finale par le client très tardive augmente les risques de dépassement de
délai et donc l’augmentation du coût.
- Phases séquentielles.
- Rigidité face à une évolution du besoin.

Figure 11: Modèle de cycle de vie en Spirale
Le modèle en spirale (spiral modèle) est un modèle de cycle de vie qui reprend les
différentes étapes du cycle en V. Par l'implémentation de versions successives, le cycle
recommence en proposant un produit de plus en plus complet. Il met cependant plus
l'accent sur la gestion des risques que le cycle en V.
1 .4 Notre choix :
Afin de concevoir et développer notre application, nous avons opté pour le modèle de
cycle de vie en V. Ce choix reviens au fait que ce cycle est le plus efficace avec son principe
de travail qui nécessite la vérification de chaque étape et la possibilité de corriger les fautes
avant de se lancer vers l’étape suivante.
2. Méthodologie de conception
Pour faciliter notre tâche nous avons recours langage de modélisation unifié (UML :
Unified Modelling Language) c’est une notation qui permet de modéliser un problème de
façon standard. Ce langage est né de la fusion de plusieurs méthodes existantes auparavant,
et il est devenu une référence en terme de modélisation objet, à un tel point que sa
connaissance devienne indispensable pour un développeur.

II. Conception détaillé
1. Les diagrammes des cas d’utilisation.
1.1 Définition
Les rôles des diagrammes de cas d’utilisation sont de recueillir, d’analyser et d’organiser
les besoins, ainsi que de recenser les grandes fonctionnalités d’un système. Il s’agit donc
de la première étape UML pour la conception d’un système. Un diagramme de cas
d’utilisation capture le comportement d’un système, d’un sous-système, d’une classe ou
d’un composant tel qu’un utilisateur extérieur le voit. Il scinde la fonctionnalité du système
en unités cohérentes, les cas d’utilisation, ayant un sens pour les acteurs. Ainsi ces cas
d’utilisation permettent d’exprimer le besoin des utilisateurs d’un système, ils sont donc
une vision orientée utilisateur de ce besoin au contraire d’une vision informatique.
Il ne faut jamais négliger cette première étape pour produire un site web conforme aux
attentes des utilisateurs ciblés. Pour élaborer les cas d’utilisation, il faut se fonder sur des
entretiens avec les utilisateurs.
1.2 Composition du diagramme de cas
Le diagramme de cas se compose de trois éléments principaux :
Un Acteur : c’est l’idéalisation d’un rôle joué par une personne externe, un processus ou
une chose qui interagit avec un système. Il se représente par un petit bonhomme avec son
nom inscrit dessous.

Un cas d’utilisation : c’est une unité cohérente représentant une fonctionnalité visible de
l’extérieur. Il réalise un service de bout en bout, avec un déclenchement, un déroulement
et une fin, pour l’acteur qui l’initie.
Un cas d’utilisation modélise donc un service rendu par le système, sans imposer le mode
de réalisation de ce service. Il représente par une ellipse contenant le nom du cas (un verbe
à l’infinitif), et optionnellement, au-dessus du nom, un stéréotype.
Les relations : Trois types de relations sont pris en charge par la norme UML et sont
graphiquement représentées par des types particuliers de ces relations. Les relations
indiquent que le cas d'utilisation source présente les mêmes conditions d'exécution que le
cas issu. Une relation simple entre un acteur et une utilisation est un trait simple.
1.3 Les acteurs de notre projet :
Le visiteur : c’est un individu qui est entrain de fouiller sur le net, cherchant un service
ou pour avoir une idée sur les modèles et les prix. Jusqu’au ce stade c’est un utilisateur
inconnu donc il n’est pas encore un client.
Le Client : cette acteur est un visiteur ayant déjà créer un compte sur notre site .
L’administrateur : pour les sites web on l’appelle généralement « le webmaster ».

C’est celui qui assure le dynamisme du site et veille sur les mises à jour des catalogues,
de leurs prix, de leurs disponibilités .

1.4 Diagrammes de cas d’utilisation de notre site web
a. Diagramme de cas d’un visiteur
Figure : cas d’utlisation d’un visiteur
Avant de devenir client, un internaute ne possède que la possibilité de consulter nos

catalogue disponibles et la possibilité de s’inscrire pour devenir client sur notre site
web.
Diagramme de cas d’un client :
Figure : cas d’utilisation d’un client

Dès l'inscription sur notre site, le visiteur devient un membre privilégié “client“, prêt à
débuter un processus personnalisé. Notre équipe dédiée au design de verre est là pour
collaborer avec vous et ajuster chaque pièce selon vos préférences, que ce soit pour votre
maison, votre bureau, ou tout autre espace…
Diagramme de cas du webmaster du site web
Le terme webmaster de site web désigne communément celui qui est chargé d'un site web. Il
gère toute la mise en place technique et Parfois la mission éditoriale, il doit gérer au jour le
jour la technique et mettre à jour le contenu du site web.
Figure : cas d’utilisation de web master

2 Les diagrammes d’activités.
2.1 Définition
C’est un Diagramme associé à un objet particulier ou à un ensemble d'objets, qui illustre les
flux entre les activités et les actions. Il permet de représenter graphiquement le déroulement
d'un cas d'utilisation.
2.2 Composition d’un diagramme d’activités :
Le diagramme d’activité se compose des éléments suivants :
Une activité représente une exécution d'un mécanisme, autrement dit, un déroulement
d'étapes séquentielles.

Une transition qui représente Le passage d'une activité vers une autre. Cette transition peut
être automatique, qui se déclenche par la fin d'une activité, provoquent le début immédiat
d'une autre ou conditionnelle, qui ne se déclenche qu’après la satisfaction de la condition
qu’on appelle aussi garde.
Les gardes qui représentent la condition de passage d’une activité à une autre dans les
transitions conditionnelles ils sont symbolisés par des losanges comme dans la figure
suivante :
Les barres de synchronisation sont des barres représentées par une ligne épaisse, le rôle cette
barre est de synchroniser le départ de plusieurs transitions qui arrivent de déférentes activités,
aboutissant toutes à une activité commune.

Les activités de notre site web :
Consultation :Notre catalogue se présente comme une foire virtuelle mettant en avant nos
créations uniques de verre. Il est essentiel de rendre la consultation accessible à tous les
visiteurs du site sans exception.
Inscription : Après avoir exploré notre catalogue de designs verriers exceptionnels, tout
visiteur désirant concrétiser son projet doit devenir client. Cela s'accomplit par une inscription
simple et rapide.
Authentification : L'étape d'authentification revêt une importance particulière dans notre

plateforme axée sur le design de verre. C'est à travers cette phase que nous identifions le client
en train de personnaliser son projet, finaliser son choix, et attendre avec impatience la
concrétisation de son idée de verre sur mesure.
Les diagrammes d’activité de notre site web
a. Diagramme d’inscription
La phase d'inscription revêt une importance cruciale sur notre site de design de verre.
Elle constitue le passage essentiel pour évoluer d'un simple visiteur qui explore nos
créations verrières et leurs caractéristiques à un client ayant le privilège d'acquérir les
articles personnalisés de son choix.

Figure : : Diagramme d'activité Inscription
-Le visiteur demande l’authentification en cliquant sur l’icon login.
- Le visiteur demande l’inscription en cliquant sur “inscrivez-vous maintenant”.
. - Le formulaire d’inscription s’affiche sur l’écran.
- Le visiteur remplit les champs demandé dans le formulaire.
- Le système vérifie les données entrées.
- Si les données sont acceptées, le système les envoie à la base si non, il revient à l’étape
précédente.
- Le serveur vérifie l’existence du client dans la base.

Diagramme d’authentification
L'authentification est la procédure qui consiste, pour un système informatique, à vérifier

l'identité d'une entité (personne, ordinateur…), afin d'autoriser son accès aux systèmes,
réseaux, applications… Elle permet donc de valider l'authenticité de l'entité en question.
Figure 17: Diagramme d'activité Authentification
-Le client demande l’authentification en cliquant sur l’icon login.
- Le formulaire d’authentification s’affiche sur l’écran.
- Le client entre son nom d’utilisateur et son mot de passe.
- Le système vérifie les coordonnés du client sur la base.
- La conformation du succès ou échec est envoyée au client.

Conclusion :
Nous venons de terminer cette partie de conception, qui consiste à déterminer aussi bien les
méthodes de travail que les chartes graphiques de notre site web avec ses parties statiques et
dynamiques. Dans le chapitre suivant nous allons aborder la dernière partie qui représente la
partie réalisation de notre site web, en se basant sur les mécanismes et les solutions déterminés
dans la phase de conception.

Chapitre V : Réalisation

Démonstrations des interfaces
Notre page d'accueil est plus qu'une vitrine, c'est une porte d'entrée vers un monde où le verre
prend vie, et où votre curiosité est le guide. Bienvenue chez Design Glass Suarl , où chaque
clic révèle une nouvelle dimension de l'art en verre.
Notre site vous invite à un voyage visuel captivant, où chaque élément est soigneusement
conçu pour refléter notre engagement envers l'art du verre. La section Accueil vous ouvre
les portes de notre univers, offrant un aperçu de notre histoire et de notre passion. Plongez
ensuite dans notre galerie en cliquant sur Produits et Services, où chaque pièce est une
œuvre d'art unique, et au cœur de notre page, le bouton Contactez-nous vous invite à
partager vos idées, poser des questions ou discuter de collaborations. Comme suivis :
Figure : Page d’accueil de notre site web
Et pour une expérience personnalisée, connectez-vous en toute sécurité avec l'icône

Connexion, donnant accès à des fonctionnalités exclusives et à des contenus réservés comme
suivis :
Pour l’inscription de notre visiteurs, remplissez le formulaire d'inscription ci-dessous.

Choisissez un Nom d'utilisateur qui vous représente, saisissez votre adresse e-mail pour
rester connecté, puis créez un Mot de passe sécurisé, le formulaire comme suivis :
Figure : Formulaire d’inscription
Puis,Cliquez sur l'icône Connexion pour entrer instantanément dans votre espace
personnalisé. Remplissez simplement votre adresse e-mail et votre mot de passe dans le
formulaire ci-dessous. Une connexion directe pour nos clients fidèles :

Figure : Formulaire de connexion

https://en.wikipedia.org/wiki/Visual_Studio_Code
https://en.wikipedia.org/wiki/HTML5
https://en.wikipedia.org/wiki/CSS
https://fr.wikipedia.org/wiki/JavaScript
https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
https://fr.w3docs.com/snippets/css
https://www.mozilla.org/fr/
https://getbootstrap.com/
https://www.w3schools.com/

Rapport de Stage Dates Du Stage (Proposition de Modèle de Rapport)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport de Stage Dates Du Stage (Proposition de Modèle de Rapport)

Transféré par

Droits d'auteur :

Formats disponibles

RAPPORT DE STAGE

Table des matières

Tapez le titre du chapitre (niveau 3) ........................................................................................................................................... 3

TAPEZ LE TITRE DU CHAPITRE (NIVEAU 1) .......................................................................................................................... 4

Tapez le titre du chapitre (niveau 3) ........................................................................................................................................... 6

Aymen Ben Saad 2/40

Tout d'abord, je tiens à remercier l'ensemble de l'équipe pédagogique de l'Institut

Je souhaite également exprimer ma gratitude envers les responsables et collaborateurs de

Ce stage a été une expérience formatrice et enrichissante, et je suis reconnaissant envers

Merci sincèrement à tous.

Aymen Ben Saad 3/40

Pendant ma formation à l'Institut Maghrébin des Sciences Économiques et de Technologie,

Aymen Ben Saad 4/40

Raison sociale : Design Glass Sura

Statut juridique : Société par actions simplifiée (SAS)

• 1.1 Sociétés apparentées

Maison mère : Quartier Al-Intilaka, Avenue Al-Saghir, Findouli, Tunis, Tunisie

• 1.3 Marché et chiffre d'affaires

Aymen Ben Saad 5/40

Figure 1.1 l'organigramme de l’entreprise

Aymen Ben Saad 6/40

Expérience Utilisateur (UX) : Comment concevoir une interface conviviale et intuitive

Contenu Informatif et Promotionnel : Comment présenter de manière attrayante les

Aymen Ben Saad 8/40

Dans le cadre de mon stage, l'architecture environnementale mise en place pour le

3.1. Environnement Matériel

Marque: Lenovo V15

Processeur : AMD 3020e with Radeon Graphics 1.20 GHz

Mémoire RAM installée : 8,00 Go

Type du système : Système d’exploitation 64 bits, processeur x64

3.2. Environnement Logiciel

Système d'Exploitation : Windows 11

Environnement de Développement Intégré (IDE):

Visual Studio Code

Figure 1.2 Logo Visual Studio Code

Aymen Ben Saad 9/40

Figure 1.3 HTML 5

HTML5 (HyperText Markup Language 5) représente la dernière évolution majeure du

Aymen Ben Saad 10/40

Figure 1.4 CSS 3

Figure 1.5 JavaScript

JavaScript se distingue comme un langage de programmation de scripts essentiellement

Bootstrap, un framework CSS gratuit et open-source, est spécifiquement conçu pour le

Aymen Ben Saad 12/40

Aymen Ben Saad 13/40

Figure : site saint-gobain glass

• Transparence et clarté : Utiliser des éléments de design en verre peut renforcer la

• Complexité de conception : La mise en œuvre réussie de designs en verre peut

• Temps de chargement : Des éléments graphiques complexes en verre peuvent ralentir

Analyse site https://www.glass-decor.be/

Aymen Ben Saad 15/40

Figure : site glass décor

• Surchargé d'Effets Animés : Trop d'effets animés ou de transitions complexes peuvent

Les besoin fonctionel

Aymen Ben Saad 16/40

2. Galerie de Produits :une galerie bien organisée présentant nos articles

3. Formulaire de Demande de Devis : Intégrer un formulaire de demande de devis en ligne

Besoin non fonctionel :

Disponibilité : S'assurer que le site est disponible et opérationnel la plupart du temps.

Aymen Ben Saad 18/40

Facilité de maintenance : Concevoir le site de manière à ce qu'il soit facile à entretenir et à

Documentation : Fournir une documentation claire pour faciliter la maintenance future.

Aymen Ben Saad 19/40