Rapport de projet Concepteur Développeur Informatique

Transcription

1 Linda CHIBOUT Rapport de projet Concepteur Développeur Informatique 1

2 Rapport de projet Sommaire Présentation Projet Étude du projet Diagrammes de cas d utilisation Diagrammes d activité Diagramme de classe Schéma de la base de données Maquettage Documentation de l application Scénarios de déploiement. Planning des taches effectuées 2

3 Rapport de projet Présentation J ai effectué mon stage au sein de l équipe du CFD Informatique, avenue Hoche à Paris. Créée en 1998, CFD Informatique est spécialisée dans la conception et la mise en œuvre de systèmes d informations reposant sur les nouvelles technologies. Chaque jour, ils accompagnent leurs clients dans l'alignement de leur système d'informations à la stratégie de l'entreprise : du conseil en amont au transfert de compétences en aval, en passant par la réalisation et l intégration des applications. Projet : Le projet qui m a été confié pour la durée de mon stage consistait à revoir l architecture et l ergonomie d une partie du site d un organisme de formation, il s agit du Next-village ( qui est une plateforme dédié aux stagiaires et aux formateurs. Ce site permet aux stagiaires de consulter les news, leurs notes, ainsi que des annonces de job. Initialement le site était scindé en deux parties. D une part le module next-village comprenant un blog, les résultats des stagiaires et l interface permettant la recherche de stage, et d autre part le module web collab qui permet les partages de fichiers. Étude du projet Tout d abord il a fallu répertorier l ensemble des fonctionnalités déjà existantes en fonction des différents acteurs. Après une étude du site en ligne voici l ensemble des fonctionnalités que j ai observé : Certaine de ces fonctionnalités ont été maintenues et d autres ont été supprimées. 3

4 Les lignes en verts ont été conservées, et les lignes rouges ont été supprimées. Acteurs Stagiaire Admin Stagiaire Admin Stagiaire Admin Stagiaire Admin Stagiaire Admin Stagiaire Admin Stagiaire/Admin Formateur/Admin Stagiaire Stagiaire Admin Rôles Accueil nextvillage Lire les articles Commenter les articles Poster un article FAQ Consulter les questions/réponses Envoyer une question par un formulaire mail. Créer un nouveau thème dans la liste Supprimer un thème Modifier un thème Ajouter une nouvelle question/réponse Supprimer une question/réponse Modifier une question/réponse JOB Se connecter Faire une recherche de stage. Répondre à des annonces. Créer/Modifier/Supprimer un utilisateur Créer/Modifier/Supprimer une annonce d emploie/de stage Créer/Modifier/Supprimer une formation dans la liste Créer/Modifier/Supprimer un type de contrat Reception des messages des stagiaires. Webcolab Se connecter Créer/Modifier/Supprimer un login Planning Consulter les plannings de chaque session en cours Créer/Modifier/Supprimer les plannings des différentes sessions Promotions Consulter les sites des différentes sessions Mise en ligne des sites Mise à jour des sites Résultats Se connecter afin de consulter ses résultats obtenus durant la formation Mettre en ligne des notes de stagiaires. Inscription Connexion à WordPress Demande d'inscription à WordPress Accueil webcolab Consulter les actualités Publication des actualités 4

5 Calendrier Stagiaire consulter les évènements Admin Publication des évènements Supprimer/Modifier un évènement Partage des fichiers Stagiaire télécharger les fichiers en partage. transférer des fichiers pour les mettre en partage Formateur transférer des fichiers pour les mettre en partage Admin transférer des fichiers pour les mettre en partage Supprimer des fichiers Forum Stagiaire Poster un message Répondre aux messages postés Annuaire des contacts Stagiaire/Formateur consulter les coordonnées des contacts Admin Ajouter/Supprimer/Modifier les coordonnées des contacts Membres Stagiaire/Formateur consultation de la listes des stagiaires et du personnelles de nextformation Ajouter/Supprimer/Modifier la listes des stagiaires et du personnelles de Admin nextformation 5

6 Diagrammes de cas d utilisation De là j ai donc pu établir les diagrammes de cas d utilisation pour chaque onglet du site. (Tous les diagrammes ont été réalisés sur ArgoUML) Résultats/Notes Ici 3 acteurs ont été identifiés : Le stagiaire qui peut consulter ses résultats obtenus au cours de sa formation. Les formateurs, qui attribuent les notes aux stagiaires, ont la possibilité de les mettre en ligne et de les consulter. L administrateur peut également y diffuser les résultats d'épreuves remis par les formateurs. News/Accueil Ici 2 acteurs ont été identifiés : Le stagiaire qui peut consulter les news. L administrateur qui a la gestion des news, il peut rédiger et les mettre en ligne. 6

7 Promotions Ici 2 acteurs ont été identifiés : Le stagiaire qui peut consulter. L administrateur qui a la gestion du contenu. Planning Ici 2 acteurs ont été identifiés : Le stagiaire qui peut consulter son planning. L administrateur qui a la gestion de tous les plannings de toutes les sessions en cours. 7

8 Membres Ici 3 acteurs ont été identifiés : Le stagiaire qui peut consulter la liste des coordonnées des membres qui partagent la même session de formation ainsi que les membres de l organisme de formation. Les formateurs qui peuvent consulter la liste des coordonnées de l ensemble des membres de l organisme de formations ainsi que de tous les stagiaires. L administrateur qui a la gestion des informations de tous les membres de l organisme de formation. Contacts Les rôles ici sont les même il n y a que le contenu qui change, l annuaire des contacts répertorie les coordonnées d entreprises partenaires dans le cadre d un contact professionnel. 8

9 Job/Annonces Ici 2 acteurs ont été identifiés : Le stagiaire qui peut consulter l ensemble des annonces qui ont été publiées, il lui est possible d effectuer une recherche multicritère. Lorsqu il consulte une annonce il peut y répondre directement sur la page. L administrateur qui a la gestion des annonces qui lui sont transmises par les sociétés concernées, il les met en ligne, les modifie ou les supprime. L administrateur doit également avoir la possibilité de gérer les intitulés de la recherche multicritère, il peut donc en ajouter, supprimer ou modifier. Enfin il réceptionne les réponses aux annonces des stagiaires afin de proposer leurs candidatures aux sociétés. 9

10 Faq Ici 2 acteurs ont été identifiés : Le stagiaire qui peut consulter les réponses aux questions types que se pose la plupart des stagiaires, les questions sont triées par thème. Si le stagiaire cherche la réponse à une question qui ne figure pas dans la liste il a la possibilité de la poser par le biais d'un formulaire. L administrateur qui a la gestion des questions/réponses, il est chargé de les mettre en ligne, de les supprimer ou de les modifier. Il peut également gérer l ensemble des questions qui ont été posées par les stagiaires en créant de nouvelles questions/réponses. 10

11 Fichiers Ici 3 acteurs ont été identifiés : Le stagiaire qui peut uniquement downloader les fichiers qui sont mis à disposition. Les formateurs qui peuvent downloader et uploader des fichiers, tel que des supports de cours ou exercices, afin de les mettre en ligne pour les stagiaires. L administrateur qui peut également downloader et uploader des fichiers, tel que des fichiers d informations par exemple, et il peut également supprimer tous les fichiers qui ont été uploadé. 11

12 Diagrammes d activité Par la suite il a fallu élaborer les diagrammes d activité afin de décrire l enchainement des actions de certaines opérations. Résultats/Notes Lorsqu un administrateur ou un formateur désire attribuer une note à un stagiaire il effectue une recherche par stagiaire afin de pouvoir consulter les notes et les modifier ou de les supprimer ou seulement en ajouter une nouvelle. 12

13 Job/Annonces (stagiaire) Nous nous plaçons du point de vue du stagiaire. Le système lui propose ou non des résultats en fonction de ses critères de recherche. Libre à lui ensuite de les modifier afin d'affiner cette recherche. Ensuite à la consultation d'une annonce, il peut l'imprimer et / ou y répondre à l'aide d'un formulaire de réponse prévu à cet effet. 13

14 Job/Annonces (administrateur) Ce diagramme représente toutes les actions possibles par l administrateur. 14

15 Fichiers (administrateur) Ce diagramme d activité représente le mode de gestion des fichiers mis en partage. 15

16 Faq (stagiaire) Le stagiaire peut visualiser les questions par thème, par mot-clé ou bien il peut directement poser une question. Faq (Administrateur) 16

17 Diagramme de classe Le diagramme de classe ne représente que les modules Notes, News et Jobs Personnes : Représente tous les utilisateurs potentiels de l application et se décompose en 3 catégories. o Stagiaires : Ils ont des droits de lecture seulement pour les applications concernées. o Formateurs : Ils interagissent avec le module Notes. o Administrateurs : Ils ont tous les droits et ils ont le rôle de gestion de tous les modules. Notes : Chaque note est liée à un stagiaire. Les notes sont attribuées par les formateurs, et les administrateurs ont les droits de gestion sur l ensemble des notes. Promos : Les stagiaires appartiennent à une promo, une promo peut contenir plusieurs stagiaires. De même qu une formation peut contenir plusieurs promos. Jobs : les stagiaires peuvent consulter les annonces, postées par les sociétés qui collaborent avec l organisme de formation du module Jobs et les administrateurs en ont la gestion. 17

18 18

19 Schéma de la base de données Schéma réalisé avec MySQLWorkbench. Étant donné qu il s agit du développement d un site déjà existant, la contrainte est que je devais concevoir un schéma de base de données en tenant compte d une base déjà existante, les tables Stagiaires, Formateurs et Société existaient déjà dans la base de données Nextformation, il a donc fallu en prendre compte. 19

20 Maquettage Comme la demande l exigeait il fallait 2 interfaces différentes : une pour le BackOffice sur un modèle déjà existant et l autre interface pour les stagiaires. Voici une capture du modèle d interface demandée pour le coté administrateur : Les maquettes ont été réalisées avec Pencil Sketching un module de Firefox 20

21 BackOffice La page des news affiche la liste des actualités enregistrées dans la base de données. Afin d afficher les détails il suffit de double-cliquer sur la ligne qui nous intéresse. 21

22 Cette page affiche le détail d une actualité afin de pouvoir la modifier. Et permet également d en ajouter une nouvelle 22

23 Cette page affiche la liste des annonces enregistrées dans la base de données. Il faudra double-cliquer sur une ligne pour en afficher le détail. 23

24 Cette page permet de voir le détail de l annonce sélectionnée. 24

25 D abord l administrateur choisi une promo dans la liste et la liste des stagiaires est mise à jour en fonction de la promo sélectionnées. 25

26 FrontOffice Stagiaire annonces.php Recherche multicritère pour les recherches d annonces. 26

27 annonces_result.php Affichage du résultat correspondant à la recherche de la liste des annonces. 27

28 annonces_detail.php On peut voir le détail des annonces. 28

29 news.php La liste des actualités s affiche en fonction de la promo du stagiaire. 29

30 notes.php Le stagiaire peut voir les notes qui lui ont été attribuées. 30

31 membres.php Chaque stagiaire peut voir la liste des membres de sa promo. 31

32 Contacts.php 32

33 Formateur Les formateurs ont la possibilité de consulter les notes des stagiaires, ils doivent pour cela sélectionner une promotion, ainsi que le nom du stagiaire dans la liste prévue à cet effet. Ils peuvent ensuite supprimer les notes, uniquement celles qu'ils ont attribuées. 33

34 Documentation de l application Guide d installation Introduction : Ce document a été rédigé par Linda CHIBOUT, concepteur développeur informatique. Il explique les étapes d installation de l application. Ce guide contient le dossier contenant les fichiers web et les scripts, il contient également les fichiers.sql nécessaires à la création et modification des bases de données. Éléments requis : Afin d exploiter de l application les matériaux et logiciels suivants seront nécessaires : Un espace de stockage sur un serveur qui prend en charge le langage PHP5. (Apache ou IIS 6 par exemple) Un serveur MySQL pour les bases de données. Application permettant d exécuter des requêtes sur la base MySQL tel que PHPMyAdmin. Étape préliminaire : Il est fortement conseiller de faire des copies de sauvegarde de vos fichiers et de vos données avant de commencer l installation. Il en est de même pour les fichiers de l application ainsi que des fichiers d installation de la base de données. Procédures d installation : Installation des fichiers de l application : Il faut modifier le chemin dans le fichier include\next_global_inc.php remplacez F:\Production\Nextformation\Plateforme stagiaire\site par l adresse absolue du dossier ou se trouve les fichiers de l application. 34

35 Il faut également changer vos paramètre de connexion, pour cela ouvrez le fichier plug_in\next_classeforms\next classebases_description.php, remplacer localhost par l adresse de votre serveur sql, le premier root par votre nom d utilisateur et le second par votre mot de passe du compte utilisateur de la base de données. Transférer le contenu du dossier site sur le serveur. Installation de la base de données : Connectez-vous à votre interface de gestion de base de données afin d importer les scripts de création de la base de données associés à l application. Importez donc le fichier next_village.sql dans un premier temps et exécutez-le. Vous pouvez éventuellement importer des données de test en important le fichier test.sql. Pour le bon fonctionnement de l application, il est nécessaire d importer le fichier meta_data.sql, qui contient l ordre d insertion des enregistrements dans la table meta_data. Vous pouvez à présent tester l application en vous connectant en tant qu administrateur ou stagiaire. Guide utilisateur Description de l application L application est constituée de 2 parties : Le BackOffice, réservé aux administrateurs de l application, qui permet la gestion de données relatives à l application, telle que l insertion de nouveaux enregistrements dans la base de données, à l aide d un menu commun à toutes les pages 35

36 Pour modifier un enregistrement il suffira de double-cliquer sur la ligne à modifier. Dans ce backoffice il y a également une gestion de l interface. Elle permet de gérer les méta_data, qui décrivent les propriétés des éléments utilisés dans toute l application. Le FrontOffice est le site sur lequel le stagiaire a accès. Ce dernier y a uniquement le droit de consultation. 36

37 Documentation de développement et technique du FrontOffice Description de l application L application a été développée à l aide des langages HTML, CSS, JavaScript, PHP et MySQL, la programmation est plutôt orientée objet. Description des classes Tout d abord il y a la classe de connexion qui permet de se connecter à la base de données : Classe Bdd qui se trouve dans le fichier next_village\include\classes\classe_bdd.php. Cette classe contient les méthodes suivantes: bdd_connecter_base($bdd) ; qui permet de se connecter à la base de données $bdd. bdd_execsql($requete), qui permet d exécuter les requêtes (la requête est passée sous la forme de chaine de caractères. En cas d erreur sql elle affiche la requête dans le code source de la page bdd_lire_ligne(), retourne un tableau qui contient la ligne courante du résultat de la requête et déplace le pointeur de données interne d'un cran. Bdd_fermer(), ferme la connexion a la bdd. Ensuite il y a la classe qui réunie les caractéristiques du stagiaire qui se connecte : Classe Stagiaire qui se trouve dans le fichier next_village\include\classes\classe_stagiaire.php. Cette classe contient les méthodes suivantes : Se_connecter($login,$pass), qui vérifie l existance du couple (login,pass) dans la bbd. Affiche_notes($id,$orderby='',$order='ASC'), qui retourne les notes correspondant à l id du stagiaire sous forme d un tableau bidimensionnel. Et stocke la requête générée dans l attribut $requet_notes. Affiche_news($id_promo,$orderby='',$order='ASC'), qui retourne les news, dont l id_promo est égal à celui passé en paramètre, sous forme d un tableau bidimensionnel. Et stocke la requête générée dans l attribut $requet_news. 37

38 Affiche_annonces($poste='',$contrat='',$localisations='',$an nee_debut='',$mois_debut='',$jours_debut='',$delai_parutio n='',$orderby='',$order='asc'), qui retourne le résultat de la recherche multicritère, correspondant aux valeurs récupérées par le formulaire, le résultat est renvoyé, sous forme d un tableau bidimensionnel. Et stocke la requête générée dans l attribut $requet_jobs. Affiche_annonce_un($id_jobs,$orderby='',$order='ASC'), qui retourne l enregistrement, correspondant à l id de l annonce passé en paramètre, sous forme d un tableau. Affiche_membres($id_promo,$orderby='',$order='ASC'), qui retourne la liste des stagiaires, dont l id correspond à l id passé en paramètre, sous forme d un tableau bidimensionnel. Et stocke la requête générée par la méthode dans l attribut $requet_membres. Quand un stagiaire se connecte, un objet de la classe Stagiaire est instancié et les identifiant du stagiaire sont stockés dans les attribues de cet objet : (id, nom, prenom, id_promo, nom_promo, nom_formation), durant toute sa session, cet objet sera stocké en variable de session. Description de l interface Toutes les pages du site ont la même structure html : Donc toutes les parties récurrentes dans l ensemble du site ont été extériorisées et placer dans un dossier interface. 38

39 Voici le corps des pages web qui constitue le site, c est le contenu de <div id= col1 > qui change en fonction de la page. 39

40 Voici l arborescence des fichiers du site cote FrontOffice. 40

41 Scénarios de déploiement. 1) Mr Arnaud Dancla (Directeur technique) sera chargé de tester l application sur un serveur d essaie sur lequel l application a été développé, et d évaluer les éventuelles modifications nécessaires ou bien de valider le produit. 2) Mr Dominic Lourenco (Développeur et Technicien Informatique) sera chargé de l installation de la base de données. 3) Mr Arnaud Dancla sera en charge de la mise en ligne du produit final. Planning des taches effectuées Durant le premier jour j ai eu un entretien avec Mr Arnaud Dancla, afin qu il m expose son besoin, j ai donc commencé par naviguer dans le site déjà en ligne afin de comprendre le concept, et j ai rédigé le tableau de la page 4. Ensuite une semaine fus nécessaire à la conception des diagrammes de cas d utilisations et des diagrammes d activité. De la j ai réalisé le diagramme de classe et le schéma de la base de données. Il a fallu une semaine par la suite pour réaliser les maquettes Et enfin il a fallu 3 semaines pour développer l application. Outils utilisés dans le cadre du projet : Excel, pour le tableau. ArgoUML 0.28, pour les diagrammes. MySQL_Workbench , pour le schéma de la bdd. Pencil 1.0.5, pour les maquettes écrans. NetBeans IDE 6.5 pour le développement. PHPMyAdmin pour la gestion de la bdd. Firebug 1.4.2, pour les tests. 41