De Brito Cyril Réalisation du site de Komet - Cyril De Brito
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Réalisation du
site de Komet
De Brito Cyril
Formation : Développeur(se) Logiciel
LDNR _ 2017 - 2018
Réalisation du site de Komet by Koncept
Table des matières
Glossaire technique ....................................................................... 4
Projet summary : English version .................................................. 6
Context ................................................................................................................................................................ 6
Applicant ............................................................................................................................................................. 6
Existing ................................................................................................................................................................ 6
The need ............................................................................................................................................................. 6
Résumé du projet : version Française ............................................ 7
Contexte .............................................................................................................................................................. 7
Demandeur.......................................................................................................................................................... 7
Existant ................................................................................................................................................................ 7
Le besoin ............................................................................................................................................................. 7
Kick off (lancement) ...................................................................... 8
Réalisation du site web pour Komet by Koncept. ................................................................................................. 8
Liste des compétences du référentiel couvert ................................ 9
CCP1 : Développer une application client-serveur................................................................................................ 9
CCP2 : Développer une application web .............................................................................................................. 9
Cahier Des Charges ou expression des besoins ............................ 10
Contexte ............................................................................................................................................................ 10
Description des fonctionnalités.......................................................................................................................... 10
Coté vitrine : .........................................................................................................................................................11
Coté administration : ............................................................................................................................................11
Expressions Fonctionnelles ................................................................................................................................ 12
Cas d’utilisation ....................................................................................................................................................12
Description générale du site ................................................................................................................................20
Données ............................................................................................................................................................ 26
Coté vitrine : .........................................................................................................................................................26
Coté connexion : ...................................................................................................................................................26
Coté administration : ............................................................................................................................................26
MCD :.....................................................................................................................................................................26
MLD : .....................................................................................................................................................................27
Spécifications Techniques ............................................................ 28
Historique du document .................................................................................................................................... 28
Définition du cahier des spécifications techniques............................................................................................. 28
Présentation générale ....................................................................................................................................... 28
Spécifications logicielles :................................................................................................................................... 29
Général ..................................................................................................................................................................29
Le front-end : ........................................................................................................................................................29
Les outils de développements .............................................................................................................................29
Le back-end ...........................................................................................................................................................30
Les outils de développements .............................................................................................................................31
Les outils graphiques ............................................................................................................................................32
Bibliothèques : ......................................................................................................................................................32
Normes de sécurité : ............................................................................................................................................32
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 2 / 71
Réalisation du site de Komet by Koncept
Réalisation ................................................................................... 34
Contraintes techniques ...................................................................................................................................... 34
Spécifications de données (MERISE) : ................................................................................................................ 35
MCD (modèle conceptuel de données) : ............................................................................................................35
MLD (modèle logique de données) : ...................................................................................................................35
Conception de la Base De Donnée ..................................................................................................................... 36
CRUD .....................................................................................................................................................................36
Requêtes SQL ........................................................................................................................................................46
SQL Injection & security .......................................................................................................................................46
Interfaces / flux :................................................................................................................................................ 48
Diagramme de classes : ........................................................................................................................................48
Diagramme d’états / transitions : ........................................................................................................................49
Diagramme de séquence : ...................................................................................................................................50
Procédure de mise en production ...................................................................................................................... 51
Diagramme de déploiement : ..............................................................................................................................51
Architecture matérielle ...................................................................................................................................... 51
Navigateurs : .........................................................................................................................................................51
Etat de l’art .................................................................................. 52
Gestion de projet et méthode agile ................................................................................................................... 52
Description de l’existant .................................................................................................................................... 54
Cahier de recette ............................................................................................................................................... 54
Sources ........................................................................................ 55
Conclusion ................................................................................... 56
Remerciements ............................................................................ 57
Annexes ....................................................................................... 58
Quelques rendus du site à l’état actuel .............................................................................................................. 58
Une présentation de PostgreSQL 10 .................................................................................................................. 64
Une présentation de Visual Studio Code ............................................................................................................ 65
La partie JAVA (Back) ............................................................................................................................................65
La partie TypeScript - Angular (Front) .................................................................................................................67
Formats lisibles .................................................................................................................................................. 69
Une présentation de Git (CLI)............................................................................................................................. 71
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 3 / 71
Réalisation du site de Komet by Koncept
Glossaire technique
Agile
Les méthodes de développement agile visent la satisfaction réelle des besoins
d’informatisation du client. Elles l’impliquent pendant tout le développement et
permettent une grande réactivité à ses demandes.
API
Ensemble de bibliothèques et de fonctions dédiées pour accéder à une fonctionnalité.
Exemple pour Spring Security, API de sécurité qui apporte des interfaces et des
méthodes pour gérer la sécurité dans une application JAVA.
Design pattern
Les patrons servent à documenter des bonnes pratiques basées sur l'expérience. Ils
proposent des solutions à des problèmes qui peuvent être difficilement résolus par un
seul composant : la description de la plupart des patrons implique plusieurs rôles qui
peuvent être joués par plusieurs composants d'un logiciel
Framework
Appelé en français cadre d’applications ou cadre de travail, c’est un ensemble de classes
d’objet, utilisables pour créer des applications informatiques. Le Framework fournit au
développeur des objets d’interface (bouton, menu, fenêtres, boîtes de dialogue), des
objets de service (collections, conteneurs) et des objets de persistance (accès aux
fichiers et aux bases de données) prêts à l’emploi. Le développeur peut donc s’appuyer
sur ces classes et se concentrer sur les aspects métier de son application. Il impose une
manière de coder.
MERISE
Merise est une méthode qui permet de traduire un modèle en une base de données. Cela
permet de mieux structurer notre base de données avant de la créer.
Objet
Le développement objet est basé sur l’identification, la modélisation, puis la
programmation de composants (classes). Considérés comme des boîtes noires, on ne
peut utiliser ces composants qu’à travers leur interface publique. Cette interface est
constituée de propriétés (caractéristique visible de l’objet), de méthodes (ce que l’on
peut demander de faire à un objet) et de messages émis par l’objet (auxquels on peut
réagir par l’exécution d’une procédure). Les concepts objet sont présents à tous les
niveaux des architectures des applications informatiques.
ORM
Un ORM est une classe (ou un ensemble de classes) visant à ce que l’utilisateur puisse
manipuler ses tables de données comme si c’étaient des objets.
SQL
Structured Query Language. Langage de requêtes, basé sur l’algèbre relationnelle, utilisé
pour manipuler les données dans une base de données relationnelle.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 4 / 71
Réalisation du site de Komet by Koncept
Trigger
Appelés en français déclencheurs, les triggers sont des ordres de déclenchement
d'opérations consécutifs à un événement survenant sur une table. L’intérêt des triggers
est de pouvoir associer l’exécution d’une fonction en réponse à un événement, tel que la
création ou la suppression d’un item, qui survient dans une table d’une base de données
relationnelle. Ils sont utilisés pour assurer la cohérence des données dans la base, en
matérialisant des contraintes qui doivent porter sur plusieurs tables.
UML
Unified Modeling Language. Formalisme basé sur les concepts de développement objet,
qui permet de modéliser graphiquement une application informatique à toutes les étapes
de son développement. Ce formalisme est utilisé dans les méthodes de développement
agiles comme eXtreme Programming.
W3C
World Wide Web Consortium. Le W3C est une organisation internationale dont les
membres, des éditeurs de logiciels, des constructeurs, des développeurs et des
utilisateurs, s’entendent pour faire la promotion de technologies destinées à tirer le
meilleur du Web. Les avis et recommandations du W3C tiennent souvent lieu de normes.
WCAG
Web Content Accessibility Guidelines. Recueil de préconisations pour rendre le Web
accessible aux handicapés, aveugles, mal voyants, sourds, déficients cognitifs ou
moteurs.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 5 / 71
Réalisation du site de Komet by Koncept
Projet summary : English version
Context
In the context authorized by the Occitanie region, I wished to reconvert to work as a
software developer. I turned to LDNR (La Distance Nous Rapproche) which is a training
organization specialized in teaching computer skills (distance or classroom training).
Following the training, an internship is necessary to validate the training.
I did this internship in the company Komet by Koncept to design and develop their
website.
Applicant
Koncept is a company created in 2014. It's a business services company. It works in
collaboration with companies such as Airbus, Sopra, etc. to offer software development
services. It is a small IT services company that wants to stay that way. The company is
involved in management information technology projects in the Toulouse region.
In 2017 Komet is born. To enable large-scale communication and to position Komet
correctly on the market, a website must be created. She works on the development
professions in NET and JAVA. With an excellent knowledge of the Toulouse market and
solid partnerships with its clients, it offers motivating and interesting assignments.
Komet by Koncept's state of mind is based on respect, tolerance, commitment,
operational follow-up, professional development and technical and personal development
oriented training. Every month there is a lunch with all employees, every quarter a
festive evening and every year a cohesion weekend to strengthen team spirit.
Existing
Koncept at his own website : http://www.koncept-is.fr/
About fifty employees.
Head office: 17, rue Hermès. 31520 / Ramonville Saint-Agne.
Phone number: 05 61 75 71 16.
The need
The new website must be different from the first. The first is mainly designed to recruit
employees, while the second is designed to attract the company's future customers. He
needs to be more professional. The main requests are: a window-type homepage with
the possibility to log in to manage the site. An administration page for content
management. Setting up a database for the content. A graphic charter different from the
first site.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 6 / 71
Réalisation du site de Komet by Koncept
Résumé du projet : version Française
Contexte
Dans le cadre autorisé par la région Occitanie, j’ai souhaité me reconvertir pour exercer
le métier de développeur logiciel. Je me suis tourné vers l’organisme LDNR (La Distance
Nous Rapproche) qui est un organisme de formation spécialisé dans l’enseignement des
métiers de l’informatique (formations à distance ou en salle). A la suite de la formation,
un stage en entreprise est nécessaire pour valider la formation.
J’ai réalisé ce stage dans l’entreprise Komet by Koncept afin de concevoir et développer
leur site internet.
Demandeur
Koncept est une entreprise créée en 2014. C’est une société de service aux entreprises.
Elle travaille en collaboration avec des entreprises comme Airbus, Sopra, etc. pour
proposer des services de développement logiciels. Elle est une petite société de services
en informatique qui souhaite le rester. L’entreprise intervient sur des projets
d’informatique de gestion dans la région toulousaine.
En 2017 l’entreprise Komet voit le jour. Pour permettre une communication à grande
échelle ainsi que pour positionner correctement Komet sur le marché, un site internet
doit être réalisé. Elle travaille sur les métiers du développement en .NET et JAVA. Forte
d’une excellente connaissance du marché toulousain et de partenariats solides avec ses
clients, elle propose des missions motivantes et intéressantes.
L’état d’esprit de Komet by Koncept se veut basé sur le respect, la tolérance,
l’engagement, le suivi opérationnel, l’évolution professionnelle et des formations
orientées techniques et développement personnel.
Existant
Koncept à son propre site internet : http://www.koncept-is.fr/
Une cinquantaine d’employés.
Un siège social : 17, rue Hermès. 31520 / Ramonville Saint-Agne.
Un numéro de téléphone : 05 61 75 71 16
Le besoin
Le nouveau site internet doit se différencier du premier. Le premier étant principalement
fait pour le recrutement des collaborateurs, le deuxième doit quant à lui permettre de
séduire les futurs clients de l’entreprise. Il se doit d’être plus professionnel. Les
principales demandes sont : une page d’accueil type vitrine avec possibilité de s’identifier
pour gérer le site. Une page d’administration pour la gestion du contenu. La mise en
place d’une base de données pour le contenu. Une charte graphique différente du
premier site.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 7 / 71
Réalisation du site de Komet by Koncept
Kick off (lancement)
Réalisation du site web pour Komet by Koncept.
Nous avons commencé par une réunion où le chef de projet nous a présenté les besoins.
Il nous a ensuite présenté la méthode utilisée : AGILE, ainsi que la nouvelle technologie
Angular, qui est une surcouche du langage JavaScript.
Nous avons eu à disposition un ordinateur portable ainsi qu’une station de travail
comprenant un écran déporté, un clavier, une souris. Cet ordinateur est chiffré par
BitLocker.
Un serveur à été mis à notre disposition, il intègre notre espace personnel par
identification, la base de données ainsi que l’outil de développement GIT.
Nous avons bien évidement eu en notre possession le document de formalisation du
besoin qui a été rédigé par l’entreprise. Ce document nous a permis de produire le cahier
des charges détaillé. Il a été validé et nous avons commencé la rédaction des
spécifications techniques et des procédures de mise en production.
Avant de commencer le développement du site internet nous avons appris le langage
Angular en utilisant des cours en ligne et des formations internes avec un intervenant de
la société.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 8 / 71
Réalisation du site de Komet by Koncept
Liste des compétences du référentiel couvert
CCP1 : Développer une application client-serveur
- 1) Maquetter une application : couvert*
- 2) Concevoir une base de données : couvert*
- 3) Mettre en place une base de données : couvert*
- 4) Développer une interface utilisateur : couvert*
- 5) Développer des composants d'accès aux données : couvert*
CCP2 : Développer une application web
- 6) Développer des pages web en lien avec une base de données : couvert*
- 7) Mettre en œuvre une solution de gestion de contenu : couvert*
- 8) Développer une application simple de mobilité numérique : couvert*
- 9) Utiliser l’anglais dans son activité professionnelle en informatique : couvert*
*Liste des compétences couvertes ou non couvertes du référentiel.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 9 / 71
Réalisation du site de Komet by Koncept
Cahier Des Charges ou expression des besoins
Contexte
L’entreprise Komet by Koncept ne possède pas de site internet. Elle est donc « invisible »
sur internet. Seule l’entreprise Koncept possède son propre site. Les futurs collaborateurs
ainsi que les clients potentiels ne peuvent donc pas trouver Komet s’ils font une
recherche sur le web.
Description des fonctionnalités
Diagramme de cas d’utilisation :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 10 / 71Réalisation du site de Komet by Koncept
Coté vitrine :
Un menu avec les options suivantes :
Un bouton « Contact » qui est une ancre interne envoyant en bas du site au niveau du
formulaire de contact
Un bouton « Recrutement » qui renvoie vers le site de Koncept
Un bouton « Connexion » qui redirige vers le formulaire de connexion à l’interface
d’administration. Lorsque l’utilisateur est déjà authentifié, le bouton « Connexion »
devient « Administration » et redirige directement sur la page d’administration.
Un ensemble de bloc les uns à la suite des autres pouvant contenir du texte ou une
image.
Une barre de navigation latérale qui permettra de positionner la page au niveau d’un bloc
en particulier. Cette barre restera accessible à l’utilisateur quelle que soit sa position
dans le site.
Un bloc positionné en bas de page avec un formulaire de contact, un plan d’accès aux
locaux de la société, les coordonnées et informations légales, et le logo de la société
renvoyant en haut de la page.
Coté administration :
Un formulaire de connexion comportant un champ « Login » et « Mot de passe »
permettant l’accès à l’interface d’administration. La transmission des données devra
utiliser le protocole HTTPS, et faire l’objet d’un chiffrement coté serveur.
L’interface d’administration comportera un lien pour retourner à l’accueil du site, et un
autre lien pour se déconnecter de l’interface. Elle permettra aussi de gérer tout le
contenu du site, qui apparaitra sur la forme d’une liste de blocs dans un tableau avec les
informations concernant ces blocs et les options de modification possibles.
Une option pour ajouter un nouveau bloc.
Une option pour modifier un bloc existant.
Une option pour supprimer un bloc existant.
La possibilité de changer l’ordre d’affichage des blocs.
La possibilité de rendre un bloc visible ou invisible.
Dans le cas d’un bloc image on offre la possibilité de charger une image.
Dans le cas d’un bloc d’information, on offre différentes options de mise en forme de
texte.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 11 / 71Réalisation du site de Komet by Koncept
Expressions Fonctionnelles
Cas d’utilisation
Visualiser le site internet :
Les visiteurs pourront consulter les informations données sur le site s’ils ont accès à
internet.
La page d’accueil est la première page du site.
En En-tête se trouve le menu :
- Contact
- Recrutement
- Connexion
Ainsi que le logo suivi d’une courte description.
Le corps présente des photos ainsi que du texte. Tout en bas de ce corps il y a un plan
pour localiser l’entreprise ainsi qu’un formulaire de contact.
Le bas de page contient le logo de Komet ainsi que les informations sur l’entreprise.
UC n°1
Nom : Visualiser le site web
Acteur(s) : Visiteurs, administrateurs
Description : La consultation des informations données sur le site doit être possible
pour un visiteur et un administrateur
Précondition(s) :
Démarrage : l’utilisateur a demandé la page principale du site
Scénario nominal
1. Le système affiche la page contenant les informations du site à destination du
visiteur
Scénario(s) alternatif(s)
1a. L’utilisateur décide de quitter la page contenant les informations du site à
destination du visiteur
Exception(s)
Fin : Scénario nominal à l’étape 1 sur décision de l’utilisateur
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 12 / 71Réalisation du site de Komet by Koncept
Envoyer un message :
Les visiteurs auront la possibilité d’envoyer un message avec comme information :
- Le nom de l’entreprise
- Le nom et prénom
- Le mail
- Le message
Ils cliqueront ensuite sur le bouton d’envoi pour envoyer le message.
Si une erreur a été faite lors de la saisie des informations, un message d’erreur apparait.
Erreurs possible :
- Oublier de remplir un champ
- Le mail est d’une forme non valide
- L’envoi a échoué
UC n°2
Nom : Envoi un message
Acteur(s) : Visiteur
Description : l’utilisateur souhaite envoyer un message à la société
Précondition(s) :
Démarrage : L’utilisateur est sur la page d’accueil du site
Scénario nominal
1. L’utilisateur remplit les champs
2. L’utilisateur clique sur [Envoyer]
Exception(s)
2a. Les champs nécessaires n’ont pas été remplis
2b. Les champs nécessaires sont incorrects.
2c. L’envoi a échoué
Fin : Scénario nominal à l’étape 2
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 13 / 71Réalisation du site de Komet by Koncept
L’authentification :
Le visiteur qui souhaite s’authentifier et devenir le super-user, doit cliquer sur l’onglet
[Connexion].
La page de connexion s’ouvre et il doit rentrer les informations nécessaires, à savoir :
- Le login
- Le mot de passe
Il doit ensuite cliquer sur le bouton d’envoi pour finaliser son authentification.
S’il le souhaite, il peut cliquer sur un bouton pour supprimer les champs ou revenir sur la
page d’accueil.
Si une erreur a été faite lors de la saisie des informations, un message d’erreur apparait.
Erreurs possible :
- Le login ou le mot de passe n’est pas le bon
- L’envoi a échoué
UC n°3
Nom : Authentification
Acteur(s) : Administrateurs
Description : Lors de l’accès à l’interface d’administration, l’utilisateur doit
s’authentifier
Précondition(s) : L’utilisateur doit être crée dans la base de données et connaitre ses
identifiants
Démarrage : L’utilisateur est sur la page principale du site ou la partie recrutement et
clique sur le bouton [Connexion]
Scénario nominal
1. Le système affiche le formulaire d’authentification
2. L’utilisateur remplit le formulaire avec l’ensemble des informations nécessaires
à son authentification
3. Le système vérifie les informations saisies par l’utilisateur et l’envoie vers la
page d’administration
Scénario(s) alternatif(s)
1a. L’utilisateur décide de quitter l’interface d’authentification et de revenir sur la page
d’accueil ou de recrutement en cliquant sur le bouton [Retour]
Exception(s)
3a. L’utilisateur n’a pas saisi les bons identifiants
3b. Le système renvoie un message d’erreur et signale à l’utilisateur de recommencer
3c. L’utilisateur n’existe pas dans la base de données
Fin : Scénario nominal à l’étape 3, Scénario alternatif à l’étape 1a, sur
décision de l’utilisateur
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 14 / 71Réalisation du site de Komet by Koncept
Accéder à l’interface d’administration :
Une fois authentifiée, le super-user accède à la page d’administration.
Cette page est directement ouverte une fois l’utilisateur authentifié en tant que super-
user. Il peut de nouveau y accéder grâce au bouton d’administration dans le menu de la
page d’accueil si celui-ci ne s’est pas déconnecté.
Pour se déconnecter, à partir de cette page, il doit cliquer sur le bouton de déconnexion.
Cette interface permet de consulter l’ensemble des données présentes sur la base de
données et de les gérer.
Il peut grâce aux boutons présents :
- Revenir au site
- Se déconnecter
- Ajouter un bloc
Les informations de la base de données sont :
- Le nom du bloc
- Le contenu
- La date de la dernière modification
- Le type (texte ou image)
- La position de l’affichage sur la page
- L’action possible (modifier, supprimer)
- La visibilité sur la page sous forme de checkbox
UC n°4
Nom : Accéder à l’interface d’administration
Acteur(s) : Administrateurs
Description : l’utilisateur souhaite accéder à l’interface d’administration du site
Précondition(s) : Etre authentifié en tant qu’administrateur
Démarrage : L’utilisateur a validé son authentification et clique sur [Administration]
Scénario nominal
1. Affiche l’interface d’administration
Scénario(s) alternatif(s)
1a. L’utilisateur décide de quitter l’interface d’administration et de revenir sur la page
d’accueil en cliquant sur le bouton de [Déconnexion]
1b. L’utilisateur décide de quitter l’interface d’administration et de revenir sur la page
d’accueil en cliquant sur le bouton [Accueil] (sans déconnexion)
Fin : Scénario nominal à l’étape 3, Scénario alternatif à l’étape 1a, sur
décision de l’utilisateur
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 15 / 71Réalisation du site de Komet by Koncept
Ajouter un nouveau bloc :
Sur l’interface administrateur, le super-user a la possibilité d’ajouter un bloc.
Il peut donc :
- Ecrire le titre
- Ecrire le contenu
- Modifier la police, le style
- Sélectionner le type
Il clique ensuite sur le bouton d’envoi pour envoyer le contenu ou sur le bouton
d’annulation pour revenir sur la page d’administration.
Si une erreur a été faite lors de la saisie des informations, un message d’erreur apparait.
Erreurs possibles :
- Oublier de remplir un champ
- L’image n’a pas pu être chargée
- L’enregistrement a échoué
UC n°5
Nom : Ajouter un nouveau bloc
Acteur(s) : Administrateurs
Description : l’utilisateur souhaite ajouter un nouveau bloc au site
Précondition(s) : Etre sur la page d’administration
Démarrage : L’utilisateur est sur la page d’administration et clique sur [Ajouter un
bloc]
Scénario nominal
1. Affiche l’interface d’ajout de bloc
2. L’utilisateur remplit les informations nécessaires
3. L’utilisateur valide en appuyant sur le bouton [Enregistrer]
4. L’utilisateur annule l’ajout du bloc en appuyant sur le bouton [Annuler]
Scénario(s) alternatif(s)
2a. L’utilisateur choisit un bloc de type « information »
2b. L’utilisateur choisit un bloc de type « image »
2c. L’utilisateur choisit un bloc de type « recrutement »
Exception(s)
2a. L’utilisateur n’a pas rentré les informations nécessaires
2b. L’image n’a pas pu être chargée
3c. L’enregistrement a échoué
Fin : Scénario nominal à l’étape 4
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 16 / 71Réalisation du site de Komet by Koncept
Modifier un bloc:
Sur l’interface administrateur, le super-user a la possibilité de modifier un bloc.
Il pourra donc :
- Modifier le titre
- Modifier le contenu
- Modifier la police, le style
- Changer le type.
Il clique ensuite sur le bouton d’envoi pour envoyer le contenu ou sur le bouton
d’annulation pour revenir sur la page d’administration.
Si une erreur a été faite lors de la saisie des informations, un message d’erreur apparait.
Erreurs possibles :
- Oublier de remplir un champ
- L’image n’a pas pu être chargée
- L’enregistrement a échoué
UC n°6
Nom : Modifier un bloc
Acteur(s) : Administrateurs
Description : l’utilisateur souhaite modifier un bloc
Précondition(s) : Etre sur la page d’administration
Démarrage : L’utilisateur est sur la page d’administration et clique sur [modifier] à la
ligne désirée
Scénario nominal
1. Affiche l’interface de modification de bloc
2. L’utilisateur remplit les informations nécessaires
3. L’utilisateur valide en appuyant sur le bouton [Enregistrer]
4. L’utilisateur annule la modification du bloc en cliquant sur [Annuler]
Scénario(s) alternatif(s)
2a. L’utilisateur choisit un bloc de type « information »
2b. L’utilisateur choisit un bloc de type « image »
2c. L’utilisateur choisit un bloc de type « recrutement »
Exception(s)
2a. L’utilisateur n’a pas rentré les informations nécessaires
2b. L’image n’a pas pu être chargée
3c. L’enregistrement a échoué
Fin : Scénario nominal à l’étape 4
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 17 / 71Réalisation du site de Komet by Koncept
Supprimer un bloc:
Sur l’interface administrateur, le super-user a la possibilité de supprimer un bloc.
Il peut donc :
Cliquer sur le lien de suppression du bloc pour le supprimer.
Erreurs possibles :
- La suppression a échoué
UC n°7
Nom : Supprimer un bloc
Acteur(s) : Administrateurs
Description : l’utilisateur souhaite supprimer un bloc
Précondition(s) : Etre sur la page d’administration
Démarrage : L’utilisateur est sur la page d’administration et clique sur [supprimer] à la
ligne désirée
Scénario nominal
1. Supprime le bloc
Exception(s)
1a. La suppression a échoué
Fin : Scénario nominal à l’étape 1
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 18 / 71Réalisation du site de Komet by Koncept
Déplacer un bloc:
Sur l’interface administrateur, le super-user a la possibilité de déplacer un bloc.
Il peut donc :
- Cliquer sur les flèches de navigation.
Erreurs possibles :
- La modification a échoué
UC n°8
Nom : Déplacer un bloc
Acteur(s) : Administrateurs
Description : l’utilisateur souhaite déplacer un bloc
Précondition(s) : Etre sur la page d’administration
Démarrage : L’utilisateur est sur la page d’administration et clique sur les « flèches de
déplacement » à la ligne désirée
Scénario nominal
1. L’utilisateur clique sur la flèche
Exception(s)
1a. La modification a échoué
Fin : Scénario nominal à l’étape 1
Postconditions :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 19 / 71Réalisation du site de Komet by Koncept
Description générale du site
La partie visiteur :
La partie visiteur se découpe en plusieurs zones
Zone 1 : Le header
Il est composé :
D’un menu à 3 entrées, « Contact » qui est une ancre interne, renvoie sur le bas de la
page vers les informations de contact et le formulaire de message. « Recrutement »
renvoie vers le site de Koncept. « Connexion » permet d’accéder à la page de connexion
pour entrer dans le panneau d’administration. Lorsque l’utilisateur est déjà connecté, le
bouton « Connexion » devient « Administration », et il redirige vers l’interface
d’administration
Le titre du site, qui est le nom de la société (« Komet »)
Zone 2 : le contrôleur de navigation
Placé sur la gauche, il reste à la même position, même si l’utilisateur monte ou
descend dans la page. Il permet de naviguer rapidement d’un élément à un
autre. (Header, les différents blocs d’information, Footer)
Zone 3 : Les blocs
Les blocs de type « image » contiendront une image étalée sur toute la largeur de la
page. Les blocs de type texte contiendront des informations textuelles sauvegardées
dans la base de données
Zone 4 : Le pied de page
Contiendra plusieurs éléments :
- Une partie « Open street map » afin de localiser les locaux de la société
- Les informations de contact (adresse, numéro de téléphone, email)
- Un formulaire d’envoi de message (à l’adresse : A définir)
- Le logo de la société qui renvoie en haut de la page
- Les informations légales (Siret, capital, etc…)
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 20 / 71Réalisation du site de Komet by Koncept
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 21 / 71Réalisation du site de Komet by Koncept
La partie connexion :
Comporte une interface de connexion où l’utilisateur entre son « login » et son « mot de
passe » afin d’accéder à la page d’administration du site. A cet effet, l’interface dispose
d’un champ de saisie pour le login, un champ de saisie pour le mot de passe, un bouton
pour effacer les champs, un bouton pour revenir à l’accueil du site, et un bouton pour
valider la connexion. En cas d’erreur sur les données saisies ou si les champs ne sont pas
remplis, un message apparait afin d’expliquer à l’utilisateur, les raisons de l’erreur.
Lorsque l’utilisateur est correctement identifié, on le redirige vers la page
d’administration et on crée la session.
La partie administration :
La page d’administration comporte plusieurs parties :
Affiche la liste des blocs déjà présents sous forme d’un tableau comportant, le nom du
bloc, une partie de son contenu, la date de dernière modification (ou de création), le
type, la position, les actions (modifier et supprimer), une checkbox qui dit si le bloc est
visible ou pas sur le site.
Ajouter un bloc : permet de créer un nouveau bloc image ou texte. Le choix se fait via
une combobox dont le contenu est chargé à partir de la table « t_block_type ».
Dans le cas d’un bloc texte on peut définir son nom et son contenu grâce à des champs
de saisie. Une barre d’outils permet la mise en forme du texte (couleur, police etc…)
Dans le cas d’une image on peut ajouter un titre, puis soit écrire le lien vers une image,
soit charger une image en appuyant sur un bouton qui ouvre une option « d’upload »
d’image.
Dans les deux cas un bouton permet de valider, un autre d’annuler et revenir à la page
d’administration. Lorsque l’on valide, le bloc est sauvegardé dans la base de données.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 22 / 71Réalisation du site de Komet by Koncept
Modifier un bloc : On ouvre l’interface de modification en préchargeant les informations
du bloc dans les champs correspondants. Comme pour l’ajout on modifie les champs
désirés puis lors de l’appui sur le bouton de validation, on effectue la modification dans la
base de données.
Supprimer un bloc : lorsque l’on clique sur le bouton supprimer, le bloc correspondant est
effacé de la base de données.
Déplacer un bloc : Lorsque l’on clique sur les flèches haut ou bas dans le tableau, cela
permet de déplacer les blocs. Changer leur position dans la partie administration
changera aussi leur position sur le site. Lorsqu’un bloc change de position, les blocs
autour de lui doivent changer en conséquence.
Rendre visible/invisible : cocher ou décocher la checkbox dans le tableau permet de
rendre visible ou non un bloc sur le site sans le faire disparaitre de la base de données.
Déconnexion : En cliquant sur le bouton de déconnection, on redirige l’utilisateur sur la
page d’accueil du site et on invalide la session.
Page d’administration
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 23 / 71Réalisation du site de Komet by Koncept
Ajouter un bloc
Modifier un bloc texte
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 24 / 71Réalisation du site de Komet by Koncept
Modifier un bloc image
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 25 / 71Réalisation du site de Komet by Koncept
Données
Coté vitrine :
Les blocs d’informations contiendront le texte défini par la société Komet à destination de
ses clients.
Pour le formulaire de contact, les utilisateurs devront saisir le nom de leur entreprise,
leur nom et prénom, leur adresse mail, et leur message.
Dans le pied de page, les informations données seront l’adresse, le capital et le type de
société (SASU), le numéro RCS.
Coté connexion :
L’utilisateur devra saisir un login et un mot de passe pour se connecter à l’interface
d’administration.
Coté administration :
Pour un bloc d’informations les données saisies pour l’utilisateur sont : le titre du bloc, le
contenu du bloc. La date de création ou de dernière modification est récupéré par le
système.
Pour un bloc d’images on peut saisir l’adresse vers une image.
On peut définir la position d’un bloc dans le flux d’informations (le bloc numéro 1 sera
positionné en haut, le bloc 2 en dessous du 1 etc…).
On peut définir si un bloc est visible ou invisible dans le flux d’informations.
MCD :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 26 / 71Réalisation du site de Komet by Koncept
MLD :
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 27 / 71Réalisation du site de Komet by Koncept
Spécifications Techniques
Historique du document
Version Nature des Rédacteur Date
changements
1.0 Version initiale Rucar Aurélien & De 04/06/2018
Brito Cyril
1.1 Changement de Rucar Aurélien & De 18/06/2018
technologie Brito Cyril
Client/Serveur
1.2 Insertion de la De Brito Cyril 28/06/2018
partie Recrutement
Définition du cahier des spécifications techniques
Le cahier des spécifications techniques est un outil de travail qui sert de base à
l’élaboration du site. Il concerne l’organisation des contenus, le mode de navigation à
l’intérieur du site et les fonctionnalités.
Présentation générale
Dans le cadre du développement de son activité, la société Komet, créée en 2018
souhaite mettre en ligne un site web ayant pour cible sa clientèle actuelle et future.
L’objectif étant de trancher avec l’image « fun » et « décalée » déjà mise en avant par le
site de Koncept, et de s’orienter vers une image plus sobre, mettant en avant le sérieux
et le savoir-faire de la société.
De type institutionnel, le site devra comporter une partie vitrine qui affichera les
informations à destination des clients et une partie administration, qui servira à un
« super utilisateur » à modifier les informations contenues de la vitrine.
La partie administration devra comporter une interface de connexion, une interface pour
l’ajout, la modification et la suppression des informations de la vitrine.
Toutes les informations de connexion stockées dans la base de données, ainsi que les
informations envoyées dans les requêtes, doivent faire l’objet d’un chiffrement.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 28 / 71Réalisation du site de Komet by Koncept
Spécifications logicielles :
Général
Le versionning est assuré par un dépôt Git sur le serveur de l’entreprise. Base de
données PostgreSQL de dev et finale sur le serveur de l’entreprise. Serveur Tomcat.
Le front-end :
Développé avec le Framework Angular et l’IDE Visual studio code.
Structure des répertoires et fichiers :
Components :
Accueil : Gère la page d’accueil du site
Admin : Gère l’interface d’administration
Block : Gère l’affichage des blocs
Connexion : Gère l’interface de connexion à la partie administration
Contact : Gère le formulaire de contact
Menu : Gère le menu en haut de la page d’accueil
Services :
Authentification : Gère la transmission des données d’authentification
Block : Gère la récupération des données des blocs
Global : Gère le chemin d’accès au back-end
Guard : Permet la sécurisation des routes vers les partis concernant l’administration
Règles de nommage :
Les components et services doivent être créés avec Angular-CLI qui gèrera le nommage.
Le nom du fichier doit désigner l’élément qu’il va gérer (exemple : « contact » pour le
formulaire de contact). En cas d’expression composé, utiliser la règle du « lower
camelcase » (ex : formulaireContact)
Les outils de développements
Angular
Présentation
Angular est une plateforme de développement gérée par Google, qui permet de créer des
applications web dynamiques et immersives. Aujourd’hui, nous en sommes à Angular 6.x
(maintenant appelé simplement “Angular”).
TypeScript
Présentation
TypeScript est un sur-ensemble (un “superset”) de JavaScript qui est justement
transcompilé (transcompilation : "traduction" d'un langage de programmation vers un
autre - différent de la compilation, qui transforme généralement le code vers un format
exécutable) en JavaScript pour être compréhensible par les navigateurs.
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 29 / 71Réalisation du site de Komet by Koncept
CSS3
Présentation
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage
qui permet de gérer la présentation d'une page Web. Le langage CSS est une
recommandation du World Wide Web Consortium (W3C), au même titre
que HTML ou XML.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents
HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices de
caractères, les couleurs, les marges et espacements, les bordures, les images de fond,
etc.
Bootstrap
Présentation
Bootstrap fournit une feuille de style CSS qui contient des définitions de base pour tous
les composants HTML, ce qui permet de disposer d'une apparence uniforme pour les
textes, tableaux et les éléments de formulaires. Il fournit également nombre d'éléments
graphiques au format standardisé : boutons, libellés, icônes, miniatures, barres de
progression…
Le back-end
Développé en JavaEE avec le Framework Spring et l’architecture Rest (Representational
State Transfer), Maven pour l’organisation du projet et Hibernate pour le lien avec la base
de données.
Structure des répertoires et fichiers :
Le source package
fr.kometis.website :
Point de démarrage du programme
fr.kometis.website.DAO : (Exemple)
BlockRepository
BlockTypeRepository
UserRepository
fr.kometid.website.controllers : (Exemple)
AccueilCtrl
ConnexionStrl
fr.kometis.website.models (Exemple)
BlockModel
BlockTypeModel
UserModel
fr.kometis.website.services (Exemple)
BlockService
BlockServiceImpl
UserService
UserServiceImpl
De Brito Cyril - Formation LDNR [ 2017 / 2018 ]
Entreprise Koncept - 17 rue Hermès, 31520 Ramonville Saint Agne 30 / 71Vous pouvez aussi lire
