Vauchel-Durel Morgane BTS 1SIO Compte Rendu Semaine 1 : STAGE BTS SIO1 : Au cours de cette première année de BTS SIO, un stage de 5 semaines en entreprise nous a été confié. Actuellement en période de stage du 20 Mai 2019 au 21 Juin 2019, je suis dans l’entreprise Caisse d’épargne Normandie se situant à Bois-Guillaume. 20/05/2019 : Je suis arrivée le Lundi 20 Mai 2019 à 8h15 du matin pour rencontrer l’équipe et découvrir l’agencement de la Caisse d’épargne. Caroline SCHMIED, ma responsable de stage m’a bien accueillie, elle m’a fait visiter les locaux. Pendant une heure dans son bureau, elle m’a présenté le fonctionnement général de la Caisse d’Epargne. Voici le schéma que j’ai créé pour expliquer au mieux. Je vais travailler sur un WorkFlow (c’est un outil qui permet à une population A de parler à une population B selon certains critères de façon informatique). J’ai fait la connaissance de toute l’équipe DDO et je travaille dans le compartiment SI dans le Développement Interne avec Enzo LALLOUETTE (mon tuteur de stage), Hubert LEVASSEUR et John TROSZYNSKI. Ensuite, j’ai eu un point avec Enzo et Lydie LE GALL qui nous demande justement une Application à développer. Aris est un outil national permettant aux agences de suivre des procédures particulières ou des imprimés particuliers. Cependant, les agences n’ont pas encore la possibilité de demander aux gérants des procédures, des renseignements, de poser des questions ou même de faire des remarques comme par exemple que telle procédure n’est plus d’actualité.
25
Embed
Compte Rendu Semaine 1 : STAGE BTS SIO1 : …...Compte Rendu Semaine 1 : STAGE BTS SIO1 : Au cours de cette première année de BTS SIO, un stage de 5 semaines en entreprise nous a
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Vauchel-Durel Morgane BTS 1SIO
Compte Rendu Semaine 1 : STAGE BTS SIO1 :
Au cours de cette première année de BTS SIO, un stage de 5 semaines en entreprise nous a été
confié. Actuellement en période de stage du 20 Mai 2019 au 21 Juin 2019, je suis dans l’entreprise
Caisse d’épargne Normandie se situant à Bois-Guillaume.
20/05/2019 :
Je suis arrivée le Lundi 20 Mai 2019 à 8h15 du matin pour rencontrer l’équipe et découvrir
l’agencement de la Caisse d’épargne. Caroline SCHMIED, ma responsable de stage m’a bien accueillie,
elle m’a fait visiter les locaux. Pendant une heure dans son bureau, elle m’a présenté le
fonctionnement général de la Caisse d’Epargne.
Voici le schéma que j’ai créé pour expliquer au mieux.
Je vais travailler sur un WorkFlow (c’est un outil qui permet à une population A de parler à une
population B selon certains critères de façon informatique).
J’ai fait la connaissance de toute l’équipe DDO et je travaille dans le compartiment SI dans le
Développement Interne avec Enzo LALLOUETTE (mon tuteur de stage), Hubert LEVASSEUR et John
TROSZYNSKI.
Ensuite, j’ai eu un point avec Enzo et Lydie LE GALL qui nous demande justement une Application à
développer. Aris est un outil national permettant aux agences de suivre des procédures particulières
ou des imprimés particuliers. Cependant, les agences n’ont pas encore la possibilité de demander aux
gérants des procédures, des renseignements, de poser des questions ou même de faire des remarques
comme par exemple que telle procédure n’est plus d’actualité.
Le but étant de faire une application où quand :
- On va directement sur l’application, on va cliquer sur une petite tuile de l’accueil, qui envoie
l’utilisateur sur un formulaire vide dont il devra remplir les champs « référence de la
procédure », « nom de la procédure », « est-ce un imprimé ? », et un champ pour le
commentaire à faire sur cette procédure particulière.
- L’utilisateur clique sur un petit bouton à côté de la procédure. Ce bouton renvoie sur le
formulaire avec des champs pré-remplis dont le nom, la référence de la procédure mais
également si c’est un imprimé ou non. L’utilisateur devra alors remplir juste le commentaire.
Dans ces deux cas, des messages d’erreurs apparaîtront si les champs nom, référence et
commentaire ne sont pas remplis.
Ensuite, cette demande sera envoyée au rédacteur ou à plusieurs rédacteurs (en copie) qui
s’occupe de cette procédure/cet imprimé. Si la référence n’est pas trouvée ou qu’il n’y a pas de
rédacteur, le mail sera envoyé d’office à Lydie LE GALL.
Après, il faut réussir à faire l’import des données du tableau excel et que Lydie réussisse à faire des
imports sur cette base de données qui remplacera son document Excel, elle ne veut pas de double
saisie (on ne sait pas encore si ce sera possible). Il faudrait qu’elle puisse également ajouter,
supprimer ou modifier une procédure.
Après le point, voici un mail récapitulatif avec des documents.
Voici un modèle de procédure basique.
Voici le tableau excel avec les procédures d’Aris. (Il y en a 765).
Le diaporama résume ce qu’il y a à réaliser, toutes les fonctionnalités de cette Application.
La caisse d’épargne Normandie applique également les méthodes agiles avec un WhiteBoard
Planner par exemple. Pour me connecter à mon ordinateur, j’ai reçu une carte à puce et j’ai dû l’activer.
Je travaille sur l’environnement test, recette pour effectuer des tests et pouvoir faire une application
correcte sans erreurs. Avant de commencer à travailler, je me suis un peu habituée à l’environnement
de travail, j’ai souvent besoin de Visual Studio avec Entity Framework, de SQL Server Management
Studio.
J’ai dû m’adapter assez rapidement du nouvel environnement de développement, je développe
actuellement en MVC (Modèle Vue Contrôleur), pour m’aider à comprendre j’ai été autonome et j’ai
fait beaucoup de recherche internet et surtout le site OpenClassRoom mais c’est assez complexe
comme nouveau language (malgré que ce soit en C#, c’est assez particulier). J’ai lu le cours de
OpenClassRoom. Voici ce que j’en ai compris :
MVC => Modèle Vue Contrôleur => c’est la séparation de l’affichage des informations, des actions de
l’utilisateur et l’accès aux données.
Modèle :
C’est l’état de l’application, cela permet d’accéder à la base de donnée par un ensemble de classe, on
accède aux classes par des méthodes qui cherche des informations dans la base de donnée.
Vue :
Ce que l’on voit à l’écran dans le navigateur web (HTML + CSS), cela présente sans changer les données
du Modèle. Une vue est une unique page.
Contrôleur :
C’est le lien entre les vues et le modèle. Cela gère les interactions avec l’utilisateur + les traitements
pour une action. Les contrôleurs utilisent les données du modèle, traitent et envoient à la vue pour
afficher. Contrôlent aussi l’action faite via une URL.
La route => url : Controleur/Action/Identifiant
BLL => Business Logic Layer (ici permet les requêtes Insert, Update, Delete).
DAL => Data Access Layer => Met à disposition des méthodes => Ajout, mise à jour, lire, supprimer un
enregistrement.
Metadata relié à PartialClasses.
BAL => couche métier
ORM => entity framework
.edmx => diagramme des classes
En soit, ce cours est plus compréhensif quand on fait les choses.
J’ai d’abord commencé par créer une base de donnée que j’ai nommé Procedure (pour l’instant on n’a
pas encore de nom d’application), j’ai crée une table Request afin d’enregistrer les valeurs du
formulaire rempli par l’utilisateur.
Voici comment je voyais le formulaire au départ (c’est à peu près ça par la suite mais en plus beau), je
l’ai fait vite fait sur Pencil.
Pour la base de donnée Procédure dans ssms (Microsoft SQL Server Management Studio) :
- Une table Request (toujours les noms en anglais) pour la demande des agences.
- La vuePersonnel de l’utilisateur (tout le monde a la même vue du formulaire).
- Dans la base de donnée, rajout de la vuepersonnel qui est déjà prête car il y a déjà une
vuepersonnel. Donc création d’une nouvelle vue, transfert de la vuePersonnel de Cooptation
(une autre application qui m’a permis de comprendre un peu tout ce qui était MVC, je prenais
un peu appuie dessus, c’était comme un modèle).
- Création d’un utilisateur pour la connexion à cette base de donnée (AppProcédure), on a
généré un mot de passe grace à Keepass -> outils -> générer un nouveau mot de passe. On
définit les paramètres du mot de passe (quels caractères + longueur) et on les génère et il y a
une petite liste de mot de passe qui se crée.
- Ensuite, on a donné le mot de passe aux utilisateurs et on a mis des droits publics, et owner
(car c’est sa connexion, il en est propriétaire).
Création d’un modèle avec entity framework en générant la base de donnée procédure. Mise à jour
de entity framework + Dans le DAL (tout ce qui est proche de la base de donnée), clic droit, add -> new
item -> « ProcedureEntities » -> ADO.NET Entity Data Model -> EF Designer from database
(Serveur de test pour avoir le bon environnement de recette et développer dessus en test). J’ai
démarré sous Visual Studio un EmptyProjectMVC (un projet vide) mais qui possède déjà des
répertoires.
Connexion au serveur Microsoft SQL avec le bon nom de la base de donnée « Procedure » et le nom
de l’utilisateur « AppProcedure » et son mot de passe.
Protection des données sensibles + transfert des différentes tables et vues
Ma table « Request » et ma vue « vuePersonnel » apparaît comme un diagramme de classe.
21/05/2019 :
J’ai regardé un peu ce que contenait le EmptyProjectMVC comme répertoire (généré de base et que
j’ai crée ensuite), j’ai déjà un peu expliqué l’architecture du MVC plus haut mais la compréhension se
fera vraiment par la suite.
BLL :
DAL :
WEB :
La couche web comporte :
- App_Start : Bundle + la route, en
l’occurrence ici la route va vers la
méthode Index du Contrôleur Home.
- Content : CSS + Bootstraps (aider à
l’affichier de la vue pour l’utilisateur)
- Controllers : Errors, Home, les
contrôleurs que je ferai avec leurs
méthodes + des instanciations d’objets.
Les méthodes des contrôleurs peuvent
retourner des views.
- Helpers : Fonctions toutes prêtes
permettant moins de code.
- Models : Accès à la BDD par des
méthodes des classes
- Scripts : Tout ce qui est javascript, Jquery
- Views : Affichage sur l’écran de
l’utilisateur
- Layout : début de page (bandeau tout prêt)
Dans le web config pour la connexion de l’utilisateur, rajout d’une ligne, pour la connectionString.
Pour commencer à voir si l’application se démarre, il fallait aller sur Web -> clic droit > set as startup
project pour démarrer le projet car sinon il y avait une erreur.
Ensuite, rajouter le .git + dossier bin du projet pour que cela fonctionne dans EmptyProjectMVC.
Puis on peut faire start et cela montre au moins déjà la première page avec la charte graphique de
base.
Idée de début de formulaire pour la demande :
<form action= "create" method= "get">
<label> Référence de la procédure </label>
<input id="refpro" type="text" />
<label>Nom de la procédure </label>
<input id="nompro" type="text" />
<label> Est-ce un imprimé ? </label>
<select id="imprime">
<option value="O">Oui</option>
<option value="N">Non</option>
</select>
<label> Vous avez une remarque, une question sur cette procédure ? Complétez le champ ci-contre :
</label>
<textarea id="commentaire"> </textarea>
<input type="submit" value="Envoyer la demande" />
</form>
Pour le formulaire, il y a une manière plus rapide de le faire en s’aidant des fonctions avec des helpers.
@{ ViewBag.Title = "Create"; => nom de la vue Layout = "~/Views/Shared/_Layout.cshtml"; } @model DAL.Request => fait appel au model et donc aux données de Request. <h1 class="section-title">Formulaire de la Demande</h1> <div class="panel panel-primary" id="pnlOffer"> <div class="panel-heading panel-actif"> <h2 class="panel-title">Informations sur la Demande</h2> </div> <div class="panel-body"> <div class="row vcenter"> <div class="col-md-2 text-align-right">@Html.LabelFor(x => x.REQ_Reference, new { @class = "required" })</div> <div class="col-md-3"> @Html.TextBoxFor(x => x.REQ_Reference, new { @class = "mw-textbox" }) </div> </div> <div class="row vcenter"> <div class="col-md-2 text-align-right">@Html.LabelFor(x => x.REQ_ProcessName, new { @class = "required" })</div> <div class="col-md-3"> @Html.TextBoxFor(x => x.REQ_ProcessName, new { @class = "mw-textbox" }) </div> </div> <div class="row vcenter"> <div class="col-md-2 text-align-right">@Html.LabelFor(x => x.REQ_Printed, new { @class = "required" })</div> <div class="col-md-3"> @Html.CheckBoxFor(x => x.REQ_Printed, new { @class = "mv-checkbox" }) </div> </div> <div class="row vcenter"> <div class="col-md-2 text-align-right">@Html.LabelFor(x => x.REQ_Comment, new { @class = "required" })</div> <div class="col-md-offset-2 col-md-8"> @Html.TextAreaFor(x => x.REQ_Comment, new { @class = "mw-textarea", style = "width:100%; height:200px;" }) </div> </div> <div class="row"> <div class="col-md-offset-9 col-md-3"> <input type="submit" id="btnValidation" class="btn btn-primary mw-button principal" style="margin-left: 15px;" value="Envoyer la demande" /> </div>
</div> </div> </div>
@Html.TextBoxFor ou autre pour mettre dans un objet, l’attribut de la table qui lui correspondrait +
des classes boostraps et la charte graphique de base.
@model DAL.request => pour avoir les fonctions et mettre dans le modèle de request appartenant à
DAL.
Layout = "~/Views/Shared/_Layout.cshtml"; => pour avoir les mêmes entêtes sur les pages. Dans la vue index.cshtml du répertoire Home dans View => affichage de la page d’accueil avec une petite tuile proposant un formulaire et qui renvoie sur la page du formulaire avec une action du request controller. <div class="menu-Tuile"> @Html.Partial("_Tile", new ViewDataDictionary { { "action", "Index" }, { "controller", "Request" }, { "title", "Proposer une requête" }, {"icon", "fab fa-wpforms"} }) </div>
Fab fa-wpforms => Site font awesome pour avoir une petite icône dans la tuile.
Dans ce formulaire pour obliger les utilisateurs à remplir les cases. Il a fallu mettre des messages d’erreurs si ces champs en particulier n’étaient pas rempli. Pour que required et display fonctionnent j’ai du rajouté la bibliothèque using System.ComponentModel.DataAnnotations. Metadata using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.ComponentModel.DataAnnotations; namespace DAL { class RequestMetadata { [Required(ErrorMessage = "Ce champ est requis")] [Display(Name = "Référence de la procédure")] public string REQ_Reference;
[Required(ErrorMessage = "Ce champ est requis")] [Display(Name = "Nom de la procédure")] public string REQ_ProcessName; [Display(Name = "Est-ce un imprimé ? ")] public bool REQ_Printed; [Required(ErrorMessage = "Ce champ est requis")] [Display(Name = "Vous avez une remarque, une question sur cette procédure ? Complétez le champ ci-contre : ")] public string REQ_Comment; } }
Cela permettait aussi que les labels soient bien reconnus. Required => des messages d’erreurs sont appelés par ValidationMessageFor dans la vue. Display => Mettre des noms pour les labels. PartialClasses using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.ComponentModel.DataAnnotations; namespace DAL { class PartialClasses { [MetadataType(typeof(RequestMetadata))] public partial class Request { } } }
Une classe partielle est une particularité de C #. Il offre une possibilité spéciale d'implémenter la fonctionnalité d'une classe unique dans plusieurs fichiers et tous ces fichiers sont combinés dans un fichier classe unique lors de la compilation de l'application. Une classe partielle est créée à l'aide d'un mot clé partiel. 22/05/2019 :
Request BLL Pour avoir les requêtes de base, (BaseDal<Request> est rattaché à la connectionString faite avant pour faire la connexion à la base de données). + On met dans un objet, une variable les requêtes possible insertion, mise à jour, supprimer par l’id et récupérer l’id (récupération de l’id pour passer en paramètre). Et une fois que le using et fait et fermer, la requête est finie. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using DAL;
using System.Data.Entity; namespace BLL { Public class RequestBLL { public static Request Insert(Request request) { using (var db = new BaseDAL<Request>()) { return db.Insert(request); } } public static Request Update(Request request) { using (var db = new BaseDAL<Request>()) { return db.Update(request); } } public static Request GetRequestById(int requestId) { using (var db = new BaseDAL<Request>()) { return db.GetAllWithDep().Where(e => e.REQ_Id == requestId).FirstOrDefault(); } } public static bool DeleteRequestById(int requestId) { using (var db = new BaseDAL<Request>()) { return db.DeleteById(requestId); } } } }
Pour avoir un accès sur l’id de request, rajout dans la DAL dans BaseDAL. public IQueryable<T> GetAllWithDep() { try { var lstBase = bdd.Set<T>(); DbQuery<T> lst = null; foreach (var p in typeof(T).GetProperties()) { if (bdd.GetType().GetProperty(p.Name) != null) { if (lst == null) lst = lstBase.Include(p.Name); else lst = lst.Include(p.Name); } } if (lst == null) return lstBase.AsQueryable(); else return lst.AsQueryable(); } catch (Exception e) { LogExeption(e, MethodBase.GetCurrentMethod().Name); throw e;
J’ai crée le Contrôleur de Request et des méthodes.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using BLL; using DAL; namespace Web.Controllers { public class RequestController : Controller { // GET: Request public ActionResult Index() { return View(); } public ActionResult Create() { Request request = new Request(); return View(request);
} Clic sur la tuile qui envoie direct sur le formulaire : @Html.Partial("_Tile", new ViewDataDictionary { { "action", "Create" }, { "controller", "Request" }, { "title", "Proposer une requête" }, { "icon", "fab fa-wpforms" } })
- Affichage du formulaire
- Rajout de message d’erreurs lorsqu’il y a un champ non rempli dans la vue Create.
@{ ViewBag.Title = "Proposition d'une demande"; Layout = "~/Views/Shared/_Layout.cshtml"; } @model DAL.Request <div class="zone-travail col-lg-12 col-md-12 col-sm-12 col-offset-200 content-menu"> <section class="inside" id="contentSection"> @using (Html.BeginForm("SendRequest", "Request", FormMethod.Post)) { <h1 class="section-title">Formulaire de la Demande</h1> <div class="panel panel-primary"> <div class="panel-heading panel-actif"> <h2 class="panel-title">Informations sur la Demande</h2> </div> <div class="panel-body"> <div class="alert alert-warning" role="alert"> Merci d'argumenter et d'être le plus précis possible dans votre demande. </div> <div class="row vcenter"> <div class="col-md-3 text-align-right">@Html.LabelFor(x => x.REQ_Reference, new { @class = "required" })</div> <div class="col-md-3"> @Html.TextBoxFor(x => x.REQ_Reference, new { @class = "mw-textbox" }) </div> </div> <div class="row"> <div class="col-md-offset-2 col-md-3"> @Html.ValidationMessageFor(x => x.REQ_Reference) </div> </div> <div class="row vcenter"> <div class="col-md-3 text-align-right">@Html.LabelFor(x => x.REQ_ProcessName, new { @class = "required" })</div> <div class="col-md-3"> @Html.TextBoxFor(x => x.REQ_ProcessName, new { @class = "mw-textbox" }) </div>