Fiche de présentation d'une situation professionnelle.. p1. Charte graphique de campustech p Contexte du projet.. p4

Transcription

1

2 Sommaire Fiche de présentation d'une situation professionnelle.. p1 Charte graphique de campustech p2 1. CONTEXTE.. p3 1.1 Contexte du projet.. p4 1.2 Cahier des charges.. p4 2. ENVRIONNEMENT DE TRAVAIL.. p5 2.1 Logiciel de développement retenu. p5 2.2 Persistances des données.. p5 2.3 Programmation orientée objet.. p6 2.4 Structure MVC p8 2.5 Langages de programmation utilisée. P9 2.6 Serveur http retenu p9 2.7 Libraires externes utilisées p10 3. REPRÉSENTATIONS p Organigramme de fonctionnement. P Schéma conceptuel des données.. p Schéma relationnel des données.. p Procédure de gestion des erreurs de code. P Procédure de gestion des erreurs sur le site. p16

3 4. MODULE DE CONNEXION.. p Connexion d un utilisateur. P Vérification des données. P17 5. EXPLICATIONS. p Espace élève.. p Visualisation des cours par l étudiant. P Gestion des filtres de l affichage des dernières notes p Schématisation au niveau de la base de données. P Espace professeur.. p Création d une évaluation.. p Ajout de note.. p Ajout d un cours p Supprimer un cours. p28

4 NATURE DE L ACTIVITÉ Objectif Création d un site WEB disposant de deux parties sécurisées: 1. Partie élève Visualisation des dernières notes. Accès aux ressources de cours. 2. Partie professeur Saisie de note Mise en ligne de cours CONDITIONS DE REALISATION Logiciels / Applications Durée 2, 5 mois (apprentissage du langage + développement du site web) Modalité En autonomie PINCIPALES COMPÉTENCES MISE EN OEUVRE A1.1.1, Analyse du cahier des charges d'un service à produire. A4.1.1, Proposition d'une solution applicative. A4.1.2, Conception ou adaptation de l'interface utilisateur d'une solution applicative. A4.1.3, Conception ou adaptation d'une base de données. KEVIN 1

5 Charte graphique de campustech KEVIN 2

6 1. CONTEXTE 1.1 Contexte du projet CampusTech, une des 10 meilleures universités privée Toulousaine dans le domaine de l informatique, propose à ces élèves des formations hautement diplômante et reconnues par l état. Chaque année, c est 20 classes différentes qui se renouvellent et en moyenne un taux de réussite égal à 98%. L université, n envisage pas de s étendre à d autres ville et préfère se concentré sur son seul campus : Toulouse. Sa présence sur Internet est réalisée grâce à son site web qui permet d afficher les actualités pour ses élèves, et les modalités d inscriptions pour la réalisation des dossiers de candidatures. Fondée depuis 35 ans, l université recherche à se modernisé pour se rapprocher des nouvelles technologies et d améliorer l interaction entre les professeurs et leurs élèves. Le premier changement sera la création d un nouveau site internet qui permettra aux élèves d accéder à leurs dernières notes ainsi qu aux cours de leurs matières comme décrit dans le cahier des charges. En effet, actuellement, ce système n existe pas du tout. Le seul moyen pour les élèves de retrouvé des notes, c est de demander à leurs professeurs. Suite à un appel d offre, le candidat reconnu est l entreprise «dev-land», spécialiste dans le développement de site web. Dev-Land, société crée en 1995, s est spécialisée dans l univers de la programmation. Les besoins de l université CampusTech, sont en parfaite adéquation avec ce que propose la société devland. Le développement orienté WEB est leur principale activité. Néanmoins comptant 10 développeurs et 2 chefs de projets, la société est aussi présente dans le marché de la création logiciel et d application IOS et Android. CampusTech, après avoir accepté le premier appel d offre venant de la société de développement, met à disposition un cahier des charges. Pour l élaboration de ce projet, la société Dev-Land met à dispositions son programmeur Pech Kevin. Il sera tenu de réaliser l ensemble du site Internet étape par étape en respectant le cahier des charges ci-dessous. KEVIN 3

7 Objectif 1.2 Cahier des charges La mise à disposition en ligne d une solution permettant par un accès sécurisé : Une partie élève où il sera possible de visualiser les notes entrées par les professeurs. L élève pourra aussi avoir accès aux différents cours par matières mis en lignes par les professeurs Une partie pour les professeurs leur permettant de saisir les notes de leurs élèves. Et la possibilité de mettre en ligne des documents de cours. Périmètre du projet L accès au site web sera possible pour tout le monde, seules les pages demandant ou affichant des données personnelles devront être sécurisées par un accès via une adresse et un mot de passe. Description fonctionnelle Les parties obtiennent leurs accès automatiquement par après s être inscrit dans notre cursus de formation. Après s être connecté par un module de connexion, la session doit être sauvegardée pendant toute sa navigation sur le site. Dans son espace, l élève pourra avoir accès à ces notes obtenues et pourra affiner ces recherches à l aide de filtre. Il devra aussi être capable d accéder aux différents cours que son professeur met en ligne. Le professeurs, quant à lui, après son authentification aura la possibilité de mettre en ligne des cours via un système d upload et d attribuer/de supprimé des notes à un de ces élèves. Ressources fournie - Fichier comprenant toutes les adresses s et les mots de passe générés automatiquement pour la connexion élèves et professeurs. - Fichier comprenant les différentes classes et les relations professeurs classes ainsi que professeurs - matières - Fichier comprenant les différentes matières et les relations matières classes Budget KEVIN 4

8 Le budget requis sera discuter et les fond seront levées qu après une entente à l amiable entre les deux partie. Il reposera sur le nombre de main d œuvre requis, le nombre d heure totale de travail et le l honoraire du ou des développeurs. Temps Le site doit être mise en ligne et accessible par internet pour la session 2015, en septembre. Des versions non abouties pourront être présentées avant cette date afin de visualiser le travail effectué et le bon respect du cahier des charges. 2. ENVRIONNEMENT DE TRAVAIL 2.1 Logiciel de développement retenu Que ce soit pour la création d un site de A à Z où pour la modification d un script, le choix du logiciel de développement est important. Gain de temps, d ergonomie, cela se traduit par un rendement au travail plus important. Pour la réalisation de ce projet, j ai choisi d utiliser le logiciel «NetBeans». NetBeans est un puissant IDE destiné à simplifier la manipulation de plusieurs langages de programmation. Dans mon contexte et pour mon utilisation en J2E, il va me permettre de naviguer beaucoup plus facilement entre mes classes et mes managers, de me générer mes managers, mes classes en fonction de mon schéma SQL. Il va aussi me permettre de créer un mini serveur WEB Glassfish qui permettra à tout moment de tester le fonctionnement de mon application. Pour finir, NetBeans est totalement gratuit. Il a été pour moi un des meilleurs IDE utilisés et m a permis, une fois pris en main, de créer plus rapidement mes projets. 2.2 Persistances des données La persistance des données et quelque chose de demandé dans la création de site/logiciel. Quand un utilisateur effectué une action qui modifie une donnée, on doit être capable de l enregistrer pour que la donnée puisse être modifiée. Dans ce projet, ce rôle indispensable sera joué par une base de données MySQL à l aide d un pilote JDBC pour établir la communication IDE -> MySQL. La gestion de la persistance est quelques choses de complexe. Cette procédure doit prendre en compte les correspondances en objets et les éléments de la base de données. Ce mécanisme se nomme ORM pour «Object-Relationnal Mapping», pour fonctionné, va avoir besoin d une solution mère qui le dirige : JPA. C est le rôle de JPA «Java Persistance API», qui est une API, de gérer cette relation. Pour pouvoir créer cette persistance, on va ensuite indirectement travailler avec le JPA via des EJB qui contiendront nos méthodes et requêtes pour lire/modifier/supprimer/ajouter des données. KEVIN 5

9 2.3 Programmation orientée objet C est une «manière» de programmation. Cela permet de facilité l interaction avec des attributs à l aide de méthodes. Ces attributs seront stockés dans des classes, qui ces dernières seront instanciées pour être manipulées par notre «manageur de classe». Reprenons le schéma ci-dessus et zoomons sur l interaction entre le ManagerBean et les classes. KEVIN 6

10 Ainsi, en appelant l objet de type <Voitures>, on sera capable par la suite d accéder aux attributs couleur et modèles. Les classes ne font que réunir des attributs. Afin qu ils soient lisibles par leurs manageurs, il va falloir leur ajouter des «getters» et des «setters». KEVIN 7

11 Ainsi, voici un début de code orienté objet. Un objet possède des attributs, qui sont accessible par le manageur en indiquant après avoir écrit les getters et setters. Avant d utiliser une classe, ne pas oublier de l instanciée. 2.4 Structure MVC N importe quel site peut être développé en ajoutant des pavés de code à la suite des anciens pavés. Cependant, il est vraie que au moment de devoir retoucher un script, on va se demander et chercher les lignes de codes à modifiées parmi les pavés et donc perdre du temps. Adopter la structure MVC (Modèle Vus Contrôleur) en programmation c est de séparer son code en plusieurs parties : Les vues, les classes, et ce qui gère les classes. De ces façons, dans les fichiers VUES, on va trouver le strict minimum de code mais surtout essentiellement de la mise en forme. Voici, l arborescence des fichiers choisi pour le projet «CampusTech» : Le dossier «Facade» contient toutes mes méthodes permettent d agir avec la BDD. Et donc d établir une persistance des données. Le dossier «Logic» contient mes ManagersBeans. Le dossier «model» contient mes classes. Le dossier «Web Pages» contient mes vues. KEVIN 8

12 2.5 Langages de programmation et de mise en forme utilisés J2E Xhtml SQL CSS 2.6 Serveur http retenu Le serveur http, indispensable pour tout projet web ou logiciel doit être choisi en tenant compte des différents requièrent du projet : le langage utilisé, la version, le Framework ainsi qu énormément d autre fonctions. Le choix doit se faire selon le cahier des charges proposé. Ce projet utilise le serveur Glassfish. Voici les principales fonctions du serveur utilisées : Les EJB interface pour communiquer avec la base de données à l aide du JDBC. JPA pour la persistance JSF, un Framework MVC, qui aiguiller les requêtes entrantes vers le bon composant et permet de ne plus avoir à écrire nos servlets. Manage Bean pour communiqué avec mes classes (Beans). KEVIN 9

13 2.7 Libraires externes utilisées Afin d améliorer l ergonomie ou la sécurité d un site WEB, on doit faire appel à des librairies. Ce sont des lignes et des lignes de code rédigées par quelqu un d autre qui nous met à disposition des méthodes pour s en servir. Sur NetBeans, les librairies utilisées se trouvent dans les propriétés du projet Pour la réalisation de ce projet, j ai utilisé 2 librairies de fonction : Jsf-api jar & jsf-impl jar : utilisées pour manipuler le Framework JSF (Java Server Faces). Primesfaces : Cette librairie a été utilisée pour plusieurs raison : La mise en place d un calendrier graphique au moment ou un professeur doit créer une évaluation. KEVIN 10

14 Création d un input de type «range» avec deux valeurs permettant de filtrer l affichage de note suivant une note minimale et maximale. Input et CommandButton stylisés. Gestion d erreur en Ajax Affichage des cours disponibles à l aide d un panel en accordéon. Utilisé ce style de mise en forme pour un tableau KEVIN 11

15 KEVIN 11

16 3. REPRESENTATIONS 3.1 Organigramme de fonctionnement Accès page index Connexion espace sécurisé Espace élève Espace professeur Accès page «notes» Accès page Création d une «cours» Accès page évaluation «cours» Visualisation de notes Visualisation de cours Choix d une classe, d une matière et d une évaluation Administration des cours déposés Ajout d un nouveau cours Ajout/Modification/ Suppression de note par élève KEVIN 12

17 Accès page didacticiel Guide d utilisation du site web KEVIN 13

18 3.2 Schéma conceptuel des données 3.3 Schéma relationnel de la base de données users (iduser, , password, nom, prenom, statut) entreprise (identreprise, nomentreprise, cpentreprise, villeentreprise, iduser) Clé étrangère : «iduser» en référence à «iduser» de «users» matieres (idmatière, nommatiere) notes (idnote, note, idmatiere, iduser, idevaluation) Clé étrangère : «idmatiere» en référence à «idmatiere» de «matieres» Clé étrangère : «iduser» en référence à «iduser» de «users» Clé étrangère : «idevaluation» en référence à «idevaluation» de «evaluations» classes (idclasses, nomclasses) evaluations (idevaluation, sujet, dateevaluation, idmatiere, iduser, idclasse) Clé étrangère : «idmatiere» en référence à «idmatiere» de «matieres» Clé étrangère : «iduser» en référence à «iduser» de «users» Clé étrangère : «idclasse» en référence à «idclasse» de «classes» KEVIN 14

19 cours (idcours, nomcours, urlcours, idmatiere, iduser) Clé étrangère : «idmatiere» en référence à «idmatiere» de «matieres» Clé étrangère : «iduser» en référence à «iduser» de «users» 3.4 Procédure de gestion des erreurs de code A moins de s appelle dieux, on ne peut pas faire une application en étant sûr qu elle fonctionne au première essaie. La gestion des erreurs et l explication d une erreur se fait en premier lieu par notre serveur utilisé, ici Glassfish. Les erreurs expliques les méthodes, classes qui contiennent le bug, et parfois les lignes de code d un fichier. Après, le choix de l IDE est aussi important car il est capable de détecté une erreur de la colorée en rouge, où en orange pour un avertissement. Une fois face à un problème, il faut faire preuve d initiative : Si la ligne d erreur est indiqué, alors ne pas chercher ailleurs, et la résoudre. Si le problème est dans le manager, contenant des conditions, utiliser la commande «SystemOutPrint(«test») pour vérifier s le code passe dans les bonnes conditions. Les erreurs de compilations sont aussi beaucoup présentes, et la malheureusement, c est a nous de trouver la panne car Glassfish est souvent «larguer». Premièrement, il faut regarder si le serveur de BDD est en marche. Puis, si l erreur n est pas résolue, utiliser le gestionnaire d erreurs de notre IDE n est pas une mauvaise solution. Cela permet de relancé le serveur WEB dans un premier temps puis d essayer de résoudre l erreur avec des fichiers récents. Si le problème est toujours là, il nous reste plus qu à supprimer les derniers changements dans nos lignes de code et relancer le serveur jusqu à bon compilation. C est pour cette raison qu il faut faire des tests de fonctionnement souvent. Pour les erreurs comprenant un code d erreur mais pas de ligne, il faut effectuer une rapide recherche sur Internet pour vérifier si quelqu un a résolu le même problème. KEVIN 15

20 3.5 Procédure de gestion des erreurs sur le site Sur le site, les erreurs peuvent être affichées selon le bon vouloir du développeur. On parle ici d erreurs contrôlées, pas d erreur de scripts. Elles peuvent s affichées en rouge dans le corps du site web, via une nouvelle fenêtre, grâce à un «div» qui apparait en Ajax etc Pour afficher mes erreurs, j utilise dans mes contrôleurs une variable «erreur» que j affiche dans ma vue tout simplement. Sur le site, j utilise aussi l Ajax pour gérer les erreurs liées à l authentification. 4. MODULE DE CONNEXION 4.1 Connexion d un utilisateur La connexion de l utilisateur se fait en utilisant des sessions. Après toutes les vérifications (vus en dessous), j attribue à une variable session «session » et «sessionid» respectivement l adresse et l id de l utilisateur. Je récupère les données que l utilisateur a entrées dans mon <form> Puis, je «charge» l API, on pourra y accéder avec l objet «context» Les sessions, sont stockées et seront effectives pendant tout le parcours de l utilisateur sur le site web. KEVIN 16

21 4.2 Vérification des données Pour vérifier si l on doit donner ou non des sessions lors d une demande, il va falloir agir par étape : 1 : On récupère nos champs dans une variable 2 : On vérifie si ces variables ne sont pas vides avec la méthode «isempty()». 3 : Avec une requête SQL, on regarde si l utilisateur avec cet et ce mot de passe existe Dans notre BeansManager : KEVIN 17

22 Puis dans notre façade : Notre classe contient des named query, ce sont des requêtes nommées qui peuvent-être appelées par notre façade. En bref, on remplit un tableau avec les résultats (1 maximum puisque une adresse peut être attribué à un seul utilisateur sinon on return «null» KEVIN 18

23 5. EXPLICATIONS 5.1 Espace élève Visualisation des cours par l étudiant Un élève doit pouvoir avoir accès à tous les cours de ses matières. Pour l affichage, j ai choisis d utiliser la librairie de fonction offert par «PrimeFaces» Rappel : Affichage sur le site web : Utilisation dans ma vue : L utilisation est très simple : Dans mon Manager, j ai 2 tableaux : une liste de matières qui est affichée par la ligne «<p :tab > Et un second qui comporte les cours et prendra en paramètre l id de la matière actuelle dans la boucle. Ainsi, je peux afficher les cours par catégories. KEVIN 19

24 Base de données Ma table «cours» comporte un champ «urlcours» où seront stockés les liens des cours tout simplement. Au clic de mon image de téléchargement du cours, il suffit juste d appelé le lien du cours Gestion des filtres de l affichage des dernières notes Dans l espace élève, on peut avoir accès à nos dernières notes données par les professeurs. Affichage : KEVIN 20

25 Pour l affichage de cette page, j utilise 4 différentes fonctions de la librairie Primesfaces : Le champ input de type «select» : En premier lieu, l utilisation de la propriété «onchange=submit()», qui est une action en JavaScript permet l exécution du formulaire dès qu on choisis une nouvelle matière, je trouve ça beaucoup plus pratique. Ce code, demande un tableau de données qui sera exploiter avec la variable «item». Notons aussi que pour que ça marche, la liste doit être de type< «classeexistante» > sinon il ne serait pas possible de lire le tableau proprement. L input de type range Encore une fonctionnalité intéressante qui va permettre à l élève de filtrer l affichage de ses notes par une note minimale et maximale. L utilisation du slider demande de lire la documentation liée. On peut le configurer très facilement avec les propriétés «minvalue» et «maxvalue». On récupère les deux valeurs choisies par l utilisateur dans notre beans grâce aux deux inputhidden à la fin. Le CommandButton Le bouton de validation du formulaire est beaucoup plus «classe» que celui d origine. Il va me permettre aussi d utiliser la propriété «ajax» est donc ne pas recharger la page lors de l envoie du formulaire. KEVIN 21

26 Le tableau de données Ici, encore une fois, niveau esthétique, il n a rien n a envié au tableau html de base. Le tableau requiert une liste où arraylist de données qu il va exploiter comme vu précédemment. En plus de ça, il va permettre d afficher une erreur personnalisée si le tableau de donnée est vide. Pour afficher la date qui est de type «date», je vais avoir besoin de la formatée. «madate.date» retourne le jour du mois «madate.month» retourne le mois de l année «madate.year» retourne le nombre d années écoulées depuis l année C est pour cela que je dois rajouter Schématisation au niveau de la base de données KEVIN 22

27 5.2 Espace professeur Création d une évaluation Avant de pouvoir attribuer une note à un élève, il faut créer une évaluation. Cette évaluation, va dépendre d une matière, d un utilisateur (iduser = professeur), et d une classe. De plus, l évaluation doit avoir une id, un sujet, et une date de création. Les listes déroulantes, comme l on a vu précédemment, requiert un tableau pour se remplir. Ma vue est constituée de tous ces éléments et de condition pour savoir si le professeur à rempli ce qui devait être remplis précédemment, ainsi, au moment de l affichage de cette page, il voit juste la liste déroulante «choisissez la classe», une fois choisie, la page s actualise et une condition est remplie, et donc il peut sélectionné la matière (qui sera en relation avec la classe choisie ) KEVIN 23

28 Passons à l explication du calendrier : Son utilisation est très simple. Par contre il faut se rendre sur la documentation pour pouvoir exploiter la date choisie. En effet, d une part il va falloir trouver comment on récupère la date choisie, et d autres part il va être nécessaire de formater la date pour qu elle puisse être ajoutée dans notre base de donnée (dateevaluation de type DATE). Si l on affiche «choixdateevaluation», c est une date en anglais qui en ressort. En plus de ça, j ai pu constater qu il fallait rajouter 1 mois, autrement dit, le mois de janvier serait égale à «0». Ainsi, je peux ajouter une nouvelle entrée dans ma base de données Ajout de note Une fois l évaluation crée, on va pouvoir attribuer une note à un élève. Cette note sera en fonction d une évaluation, d un iduser (élève) et demandera comme renseignements une id et une note. KEVIN 24

29 Comme pour la création d évaluation, dans ma vues, j utilise des conditions qui sont respectées quand le professeur renseigne le champ précédant. Voici les étapes liées à la saisie d une note : On choisit une classe (parmi celles du professeur) On choisit la matière (selon la classe et le professeur) Puis le professeur à la liste des évaluations qu il a créé. Et pour finir, on affiche à l aide d un tableau la liste des élève (selon la classe). Maintenant, j affiche dans une colonne la note actuelle de l élève s il y a (recherche dans la table «note» selon un «iduser». Analysons le tableau de plus près : Voici comment je gère l ajout/l édition/la suppression de note : Je lis une ArrayList «listeuserselonevaluation» et je l affiche. Pour la colonne note, pour chaque lignes, je créer un nouveau formulaire avec un input texte pour la saisie de la note, un input du type «hidden» qui comprend l id de l utilisateur et un CommandButton qui m envoie vers mon managebean pour traiter mes informations. Puis au moment du traitement, je récupère la valeur du champ caché, puis : Si l élève à déjà un note, alors je la modifie S il n en a pas, j ajoute une ligne dans ma table «notes» Si l utilisateur ne remplis aucune note et valide le formulaire, alors la note de l élève est supprimée KEVIN 25

30 5.2.3 Ajout d un cours Par l ajout d un cours par un professeur je donne deux possibilités : Ajouter un lien externe Uploader un fichier PDF Voici notre vue : Le professeur est alors inviter à saisir le nom du cours, choisir une de ses matière. Ensuite, s il indique un lien vers une page/pdf, alors le système d upload ne sera pas pris en compte. En revanche, s il reste le champ vide, il sera obligé d uploader un fichier. Regardons de plus près le système d upload de fichier. Étant donné la taille du code à copier, je vais simplement expliquer les éléments nécessaires pour le fonctionnement du service. Quand le programme détecte un fichier dans la zone d upload, il ajoute ce fichier dans un type de variable «Part». Il faut cependant importer cette bibliothèque de fonction : Ainsi, on va pouvoir manipuler ce fichier dans notre managebean pour retirer ces informations KEVIN 26

31 Pour pouvoir stocker le fichier, je vais avoir besoin d un nom : Il va aussi falloir indiquer un lien où il sera uploadé Pour information, les cours sont stockés selon cette architecture : Ainsi, pour définir le lien on il sera enregistrer, il va falloir récupérer le nom de la matière choisie. Une fois qu on l a, on peut définir le lien. Dans mon environnement de test, le lien sera Ainsi, dans mon script, je vais alors pouvoir stocker ce fichier dans le bon endroit selon la matière. KEVIN 27

32 Voici le bout de script permettant l upload avec les commentaires liés : Supprimer un cours La suppression du cours se passe par une page différente, premièrement, je rempli une ArrayList de données (les cours par le professeur connecté) puis je l affiche dans un tableau. Chaque ligne du tableau comporte le nom du cours, un CommandButton, et un champ texte caché qui sera rempli par l id du cours. Au moment de l appuie sur le bouton le paramètre de l id du cours est envoyé, et donc on peut faire une requête SQL pour supprimer un cours. KEVIN 28