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 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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Ré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 / 71
Vous pouvez aussi lire