Conception et réalisation du Cahier de Texte Electronique du lycée Blanchet. Benjamin KUSNIEREK

Transcription

1 Conception et réalisation du Cahier de Texte Electronique du lycée Blanchet Benjamin KUSNIEREK 15 juin - 30 septembre 2007

2

3 Table des matières Introduction 1 1 Présentation du stage Présentation de l entreprise Objectifs du stage Environnement de travail L application Objectifs de l application : le cahier des charges Principes généraux de l application Accès à l application L interface Technologies utilisées Zend Framework Ajax et jquery Organisation générale Déroulement du stage Répartition des tâches Mise en oeuvre du projet Conception de l application Implémentation Installation de l application Formation des utilisateurs Bilan et perspectives Apport technique Apport humain Perspectives Conclusion 17 Annexes 18 Interface du logiciel 18 1

4 Exemple d implémentation 19

5 Remerciements Je tiens à remercier notre tuteur, M. Amos NGOUPAYOU, pour nous avoir proposé ce stage et pour son accueil au sein de son établissement. Je souhaite remercier aussi M. Blanchet, propriétaire du gîte Le Colibri, pour son accueil, son dévouement et ses arbres fruitiers.

6 Introduction Dans le cadre de ma deuxième année d école d ingénieur IMAC, j ai effectué un stage de douze semaines au lycée professionnel privé de Blanchet, à Basse-Terre. Ce stage avait pour but la conception et la réalisation d une application web permettant aux professeurs d effectuer des saisies de leurs cours en ligne. Ces saisies devaient alors être accessibles par les élèves, les parents d élèves et les inspecteurs. Chaque lycée se doit de remplir un document papier (le cahier de texte) dans lequel chaque professeur y inscrit le déroulement de ses cours. Le but de l application est de mettre en ligne ce cahier de texte afin d en faciliter la rédaction et la consultation. Après une première période de compréhension et de définition du projet avec le tuteur, il a fallut définir les outils à utiliser dans le développement de l application. Par la suite, une partie importante du développement a été effectuée en télé-travail et donc sans réelle intervention du tuteur de stage. Le dernier mois du stage a permis de finaliser l application avec le tuteur, de l installer sur le serveur de l école et d effectuer une formation auprès des différents usagers. 1

7 Chapitre 1 Présentation du stage 1.1 Présentation de l entreprise Le lycée professionnel privé de Blanchet est situé dans la commune de Gourbeyre, en Basse-Terre, chef lieu du département de la Guadeloupe. C est un établissement d enseignement catholique créé en octobre 1949 sous l appellation Ecole Technique Saint-Jean BOSCO par les Autorités religieuses dans le but de permettre à des jeunes de la BASSE TERRE de disposer d une structure de formation technique industrielle équivalente à celle de Pointe-à- Pitre. Les spécialités enseignées à cette époque étaient les suivantes : ajustage, monteur Electricien, mécanique auto, menuiserie. Il est dirigé depuis septembre 1997 par M. Amos NGOUPAYOU qui a mis en place des formations adaptées aux besoin des entreprises et du bassin d emploi telles que les métiers de la mer et de l aéronautique. Le lycée compte actuellement 730 élèves et 80 professeurs. 1.2 Objectifs du stage L objectif du stage était de développer une plate-forme de gestion des relations pédagogiques entre les professeurs et le chef d établissement d une part et entre les professeurs, les inspecteurs, less élèves et les famills d autre part. Il s agit en fait de reprendre le principe du Cahier de texte, document papier obligatoire pour tout établissement et qui permet de suivre le déroulement des cours dispensés par les professeurs aux élèves. C est le seul document contractuel reconnu et exigé par l administration et les services académiques. Ce document permet aux inspecteurs de 2

8 contrôler le travail des enseignants et est consultables par les élèves et leurs parents. 1.3 Environnement de travail J ai effectué ce stage avec Nicolas Rondaud, élève dans la même promotion que moi. Ce stage était tuteuré par M. Amos NGOU- PAYOU, chef d établissement du lycée. Après deux réunions afin de déterminer les différentes fonctionnalités à déveloper, nous avons travaillé en télé-travail durant 10 semaines, M. NGOUPAYOU résidant en Guadeloupe. Nous avons effectué la dernière partie du stage (5 semaines) au lycée afin d avoir un contact plus direct avec notre tuteur et pour pouvoir présenter et expliquer le logiciel aux professeurs. Sur un plan plus technique, le lycée Blanchet a une politique d ouverture aux technologies informatiques : il dispose d un site Internet hébergé sur un serveur dédié ainsi que différents logiciels de gestion tel que Charlemagne permettant de mettre à disposition des parents les informations de vie scolaire. Le lycée recherchait donc une application innovante (le cahier de texte électronique n a jamais été développé) et s intégrant à l environnement informatique déjà présent. 3

9 Chapitre 2 L application 2.1 Objectifs de l application : le cahier des charges Principes généraux de l application Un cahier des charges nous a été remis au début du projet, spécifiant globalement les différentes fonctionnalités devant être présentes sur l application. Nous devions créer un logiciel en ligne s interfasant avec les logiciels de gstion déjà existant tels Charlemagne (gestion des classes du lycée) ou EDT (gestion des emplois du temps). Celà était nécessaire pour la récupération des données de ces deux logiciels. La plate-forme devait être consultable et modifiable en fonction de droits définis par l administrateur. Nous devons donc retrouver un accès administrateur (accès complet), un accès professeur permettant la saisie de séances de cours et la consultation de celles-ci, un accès élèves et parents d élèves permettant de consulter les activités pédégagiques des élèves et enfin un accès pour les inspecteurs permettant de consulter les différentes saisies des professeurs. La plate-forme devait permettre de saisir et d accéder aux différentes ressources pédagogiques à savoir les programmes officiels de chaque classe pour chaque matière, le découpage des enseignements en référentiels. Le lycée étant un lycée professionnel, ces ressources doivent renseigner à la fois sur les enseignement généraux et donc dépendants des niveaux de cours mais aussi sur les enseignements techniques spécifiques aux classes du lycée. 4

10 Les professeurs doivent utiliser l application pour effectuer une saisie quotidienne de la progression pédagogique pour chacune de ses classes ou groupes de classes en fonction des activités réalisées par les élèves et de l évolutions de l enseignant dans la discipline. Associés à celà, différents documents doivent pouvoir être mis en ligne tels des supports de cours, des sujets de devoirs et corrections etc Accès à l application Comme nous l avons vu précédamment, l application doit comporter différents types d accès. L accès administrateur doit permettre la création des différents utilisateurs, des services d enseignements et des programmes. Pour chacune des informations présentes dans la base de données (nous les détaillerons lors de la présentation du modèle conceptuel de données du site), l administrateur doit pouvoir initialiser les données via un fichier texte, les afficher sous forme de listes, en ajouter, en supprimer et les éditer. La partie la plus importante et dont dépend le reste de l application est la création des services d enseignements qui permet d associer un professeur à une matière, une classe et un groupe. Une fois les paramètres du cahier de textes effectuées, l application doit permettre à chaque enseignant qui s identifie d accéder à son environnement de saisie et de modifications de données pédagogiques. En sélectionnant une matière qu il enseigne et une classe il doit pouvoir effectuer la saisie de ses séances de cours avec la possibilité de toutes les consulter, les modifier ainsi que les dupliquer. Un contrôle des différents champs de saisie doit être effectuer afin de formaliser au maximum les saisies. D autre part, l enseignant doit pouvoir accéder aux différents documents pédagogiques en rapport avec sa matière et sa classe. Enfin, une partie de consultation accessible par les enseignants, les élèves et les parents d élèves doit être présente sur le site. Un professeur accédera à toutes les données saisies sur le site. Les élèves et leurs parents pourront consulter les saisies des professeurs de l élève pour sa classe ainsi que les documents pédagogiques. Enfin, les inspecteurs pourront consulter les saisies des enseignants qu il doivent contrôler. Ces consultations doivent se faire selon différentes recherches assemblées. 5

11 2.1.3 L interface L interface du logiciel doit être avant tout intuitive et permettre une utilisation simple de l application. Il faut en effet donner envie aux professeurs de saisir régulièrement en facilitant celle-ci. La saisie du cahier de texte est en effet quelquechose de lourd et fastidieux pour un enseignant. Il faut donc penser à lui faciliter la tâche au maximum si l on veut que le logiciel soit tenu à jour constamment. L interface devait bien évidemment être compatible avec tous les naviguateurs internet et toutes les configurations d ordinateurs possibles. 2.2 Technologies utilisées Suite à l étude du cahier des charges, nous avons du déterminer qu elles technologies utiliser pour développer l application. Nous n avions pas réellement de contrainte hormis utiliser des technologies compatibles avec le serveur d hébergement. Nous avons choisis assez rapidement de développer l application en php, langage courament utilisé pour le développement web. Nous avons choisit d utiliser la dernière version de php (php 5) dans sa version orientée objet. Après une étude plus approfondie du projet il nous a semblé utile d utiliser un framework. Notre choix s est porté sur Zend Framework. Pour l interface, nous avons choisit d utiliser la technologie Ajax afin de créer un site ressemblant au maximum à un logiciel normal. Parmis les nombreuses librairies Ajax existantes, nous avons utilisé JQuery qui est sans doute la plus complète et évolutive Zend Framework Zend Framework est développé par Zend, éditeur connu pour son moteur de langage de script PHP et pour sa participation dans le développement de la technologie PHP. Zend Framework est une bibliothèque de classes open source (licence New BSD) qui permettent de mettre rapidement sur pied un site ou toute sorte d application Web, en s appuyant sur la version 5 de PHP. Mis au point avec l aide de plus de 250 contributeurs, dont des poids lourds de l informatique comme Google et IBM, Zend Framework ne manque pas d atouts. Il supporte le conceptmvc (mo- 6

12 dèle vue contrôleur) qui permet de modéliser les processus métiers indépendamment de l interface utilisateur. Zend Framework offre un support très large de bases de données (MySQL, DB2, Oracle, SQL Server, SQLite, etc.) via une interface orientée objet. Nous avons choisit d utilisr MySQL. Afin de faciliter son adoption, Zend Framework est fourni avec une documentation régulièrement mise à jour, dont la majeure partie est d ores et déjà traduite en français (la documentation originale est en anglais) Ajax et jquery AJAX, ou Asynchronous Javascript And XML (XML et Javascript asynchrones), est un acronyme désignant une solution informatique libre pour le développement d applications Web. AJAX n est pas une technologie en elle-même, mais un terme qui évoque l utilisation conjointe d un ensemble de technologies libres couramment utilisées sur le Web : HTML, CSS, DOM, Javascript,... Les applications utilisant les techniques AJAX, peuvent envoyer des requêtes au serveur HTTP pour récupérer uniquement les données nécessaires en utilisant la requête HTTP XMLHttpReques ; ces requêtes sont dites asynchrones. Pour faciliter l utilisation de ces technologies, de nombreux frameworks ont été mis en place. Il s agit en général d un ensemble de bibliothèques javascript permettant de réaliser les traitements asynchrones et d offrir une ergonomie avancée grâce à une palette d objets graphiques aboutis. Pour ce projet, nous avons déci dé d utiliser le framework jquery. 2.3 Organisation générale Déroulement du stage L application devait être fonctionnelle pour la rentrée scolaire Nous avons tâcher d effectuer toute la partie conception de l application ainsi que l architecture globale avant notre arrivée au lycée. Nous avions en effet prévu que le dernier mois de stage serait reservé aux critiques et interrogrations des différents utilisateurs. 7

13 2.3.2 Répartition des tâches Etant deux personnes à travaillre sur ceprojet, nous avons du nous répartir les tâches à réaliser. Il ne sert en effet à rien que chacun travaille sur la conception de la bdd, l apprentissage de l environement de développement ou sur la mise en place globale de l architecture du site. Pour la phase de conception, j ai notamment travaillé sur la conception de la base de données, Nicolas se chargeant de bien assimiler le fonctionnement de Zend et de créer l architecture de l application. Pour le développement pur, j ai réalisé l interface du site puis nous nous sommes répartis les différents modules à réaliser. Nicolas a, sur la fin du stage effectué la mise en ligen de l application et donc la configuration du serveur dédié. 2.4 Mise en oeuvre du projet Conception de l application Arborescence de l application Fig. 2.1 Arborescence de l application L application est découpée comme sur le schéma ci-dessus. Le framework se situe dans le dossier library, le dossier public contient les fichiers téléchargeables, les images et scripts css et javascript. Le dossier application contient notre code, séparé selon le schéma MVC. Chaque entitée de la base 8

14 de donnée possède un fichier ou dossier qui lui correspond dans le MVC La base de données Pour développer une application telle que celle-ci, la phase de conception de la base de données est sans doute la plus important et la plus délicate. Elle a imposé une parfaite connaissance du fonctionnement du cahier de texte afin d avoir très rapidement une vue globale du fonctionnement de l application. Idéalement, la modélisation de la base de données doit être intégralement terminée avant le codage de l application. Les modifications sont en effet délicates à apporter par la suite. En pratique, celà n est pas vraiment possible du fait que l application change constamment, soit à cause de nouvelles demandes du tuteur, soit afin d améliorer ou corriger certaines fonctionnalités. La figure suivante présente le modèle logique de données de l application finale. 9

15 Fig. 2.2 Modèle logique de données de l application 10

16 Dans la construction de la base de données, l entité centrale est l enseignant. Le contenu de l application vient en effet en grande partie des professeurs. Nous sommess donc partie de là pour concevoir la base de données. Chaque enseignant appartient à un (ou parfois deux) département d enseignement en fonction des matières qu il enseigne. La table enseigne permet de gérer les différents enseignements d un professeur. Elle permet de regrouper les entités matiere, classe, groupe avec un enseignant. Il s agit de la relation centrale de l application, une grande partie du site en découlant pour la saisie et la consultation. Plusieures informations sont disponibles à propos des classes. On retrouve des informations sur les stages, les référentiels et les niveaux associés à la classe. Les référentiels correspondent aux programmes officiels pour l enseignement technique et donc spécifique au lycée Blanchet, les niveaux correspondant aux programmes généraux communs à tous les lycées. Pour chacun de ces programmes, différents documents sont mis à la disposition des professeurs et des élèves (tables referentieldocuments et progression ). Pour chaque enseignement, nous allons retrouver plusieures séances de cours, qui sont les saisies des professeurs. C est la table qui contiendra le plus de données consultables. Pour chacune des séances de cours, nous pourrons retrouver différents documents (table seancedocument ). Nous retrouvons une table afin de stocker les élèves et les inspecteurs, ls élèves étant reliés aux classes. Pour les inspecteurs, nous retrouvons une table inspecte qui permet d enregistrer quels professeurs seront évalués par quels inspecteurs. Nous avons décidé d ajouter une plate forme d échanges de message, typiquement comme une messagerie. Les messages seront stockés dans les tables message, envoiemessage et receptionmessage. Enfin, nous retrouvons des tables pour la gestion des connections à l application, ainsi que pour l initialisation de celle-ci. 11

17 L interface Pour réaliser un logiciel de ce type, l interface et l ergonomie sont primordiaux. Nous avons tâcher de réaliser quelquechose d intuitif et d agréable à utiliser. Nous avons constamment cherché à proposer différentes solutions à l utilisateur pour accéder aux données du site. Celà permet à chacun de s y retrouver en fonction de sa manière d aborder le logiciel. Nous avons par ailleur mis en place différents outils afin de faciliter l utilisation du logiciel : une iconographique homogène pour représenter les actions possibles, des tris de tableaux à la volée, des contrôles de formulaires, des aides pour chacune des actions possibles etc. L annexe I présente quelques captures écrans de l interface du logiciel Implémentation Notre application est entièrement basée sur le framework Zend auquel nous avons ajouté quelques fonctionnalités comme le chargement multiple de fichiers par exemples. Chaque entité de la base de données dispose d une classe de controle (controler) implémentant toutes les fonctions d administration et d affichage. C est méthode utilises le fichier model de l entité qui lui se charge d effectuer les requêtes à la base de données. Enfin, chacune des fonctionnalités dispose d un ficher de vue gérant tous les affichages. L annexe II présente un exemple d implémentation. 2.5 Installation de l application L installation du serveur a nécessité l administration dun serveur dédié en SSH. Il a fallut effectuer des mises à jour du serveur Apache et de la base MySQL, le tout installé sur une Red Hat. Nous avons également créé des allias de redirection pour permettre l accès à l application via des fichiers.htaccess et l utilisation de l url rewritting. 12

18 2.6 Formation des utilisateurs Nous avons présenté l application à l ensemble de l équipe pédagogique lors de la réunion de pré-rentrée. Chaque professeur a été invité a nous poser des questions sur le logiciel et a exprimé ses idées sur des améliorations possibles. Nous leurs avons d autre part appris à utiliser l application. 13

19 Chapitre 3 Bilan et perspectives Au terme de ce stage, nous pouvons dire que les objectifs sont atteints. L application est fonctionnelle et répond pleinement aux attentes de notre tuteur. Les premiers jours d utilisation de l application par les enseignants ont permis d apporter les derniers correctifs et d obtenir une application facilitant le travail de tout le monde au sein de l établissement. 3.1 Apport technique Au terme de ce stage, nous pouvons dire que les objectifs ont été atteints. L application répond parfaitement au cahier des charges avec des fonctionnalités supplémentaires telles que la messagerie intégrée. La création de l application a permis l apprentissage d un nouvel environnement de travailler et donc une nouvelle façon de développer avec l utilisation de Zend Framework. Il m apparait suite à ce stage indispensable d utiliser ce genre de technologies pour développer une application web fonctionnelle et évolutive. Une fois l environnement maitrisé, le gain de temps dans le développement est très important du fait de l utilisation d une organisation précise (Model View Controler dans notre cas). Techniquement, notre plus gros problème lors du développement de l application se prénomme Internet Explorer. Son nom respect des normes fixées par le W3C fût flagrant tout au long du stage, notamment en ce qui concerne son interprétation des scripts javascripts et donc de toute notre naviguation Ajax. Une partie trop importante du stage a consisté a réécrire la plupart de nos codes javascript pour les faire fonctionner sous Internet Explorer. Si on 14

20 ajoute à cela une interprétation parfois douteuse du code CSS, nous pouvons clairement concidéré Internet Explorer comme un frein au bon développement d une application web. Un dernier point technique est l obligation de prendre très rapidement en compte le serveur sur lequel sera installé l application. Il faut en effet rapidement vérifier que les technologies utilisées sont fonctionnelles sur le serveur avant le développement. 3.2 Apport humain Le bilan humain de ce stage est très interressant. Une partie du stage s est déroulé en télé-travail, ce qui n est pas forcément évident à gérer, notamment en terme de communication avec notre tuteur. Celui-ci vivant en Guadeloupe, le décalage horaire n a pas non plus facilité la chose. Le point positif reste que cela force à être autonome et à prendre des décisions, le tuteur n étant pas souvent disponible. La partie du stage en Guadeloupe a nécessité une adaptation aussi bien temporelle (décalage horaire, journée de travail en continu) que climatique (températures élevées). Mais le dépaysement reste quelquechose de très agréable et fera de ce stage une très bonne expérience. 3.3 Perspectives Aucune autre application de Cahier de Texte électronique n ayant été réalisée, notre tuteur envisage de la vendre à d autres établissements pour la rentrée prochaine. Il nous contacterai alors pour effectuer les adaptations en fonction de l établissement et l installation. Des adaptations seraient notamment nécessaires pour un établissement d enseignement général qui ne dispose pas de la notion de référentiel. D un point de vue plus personnel, ce stage a permis de confirmer que mon avenir professionnel ne se situé pas dans le développement web. La phase de conception d un tel projet est interressante. Elle nécessite un apprentissage du milieux professionnel pour lequel on travaille (dans le cas présent, comprendre le fonctionnement d un établissement scolaire afin de répondre au mieux aux attentes des usagers), un apprentissage de nouvells méthodes 15

21 de développement, chose toujours interressante ainsi qu une vision globale rapide de l application finale afin de créer une base de données optimisée. J ai trouvé la phase de développement pur beaucoup plus rébarbative et répétitive, les moments de réflexion servant en général à pallier des bugs venant du système internet et non de l application à proprement dit. Je ne regrette donc en rien de ne pas avoir choisis l option Web pour ma troisième année d école IMAC. 16

22 Conclusion Ce stage a été une bonne mise en pratique de l apprentissage IMAC au niveau de la conduite d un projet. Même si tout projet demande une adaptation (typiquement, se former à une technologies), les bases de travil restent les mêmes. Réaliser un site Internet, ce n est pas seulement programmer, mais c est aussi comprendre les attentes du demandeur, dialoguer avec lui pour réaliser un support utile et durable. Les personnes utilisant l application sont pleinement satisfaites de la qualité du site aussi bien au niveau des fonctionnalités imposées que des différentes améliorations que nous avons proposés. L expérience fut donc enrichissante. 17

23 Annexes Interface du logiciel Fig. 3.1 Administration du cahier de texte 18

24 Fig. 3.2 Espace enseignant Fig. 3.3 Consultation du cahier de texte Exemple d implémentation Controleur enseignant 1 class EnseignantController extends Zend_Controller_Action 2 { 3 function init () 4 { 5 $this -> initview (); 6 Zend_Loader :: loadclass ( Enseignant ); 19

25 7 $this - > enseignant = new Enseignant (); 8 $this ->view -> baseurl = $this -> _request -> getbaseurl (); 9 $this ->view -> user = Zend_Auth :: getinstance () -> getidentity (); 10 $this - > controllername = $this - > getrequest () -> getcontrollername (); 11 $this - > actionname = $this - > getrequest () -> getactionname (); 12 } 13 function listaction () 14 { 15 $this ->view -> title = " Liste des enseignants "; 16 $this ->view -> enseignants = $this -> enseignant - > enseignantjoinuserjoindepartement (); 17 $this -> render (); 18 } 19 } Modèle liste des enseignants 1 class Enseignant extends Zend_Db_Table 2 { 3 public function enseignantjoinuserjoindepartement () { 4 $select = $this -> getadapter () - > select (); 5 $select - > distinct () 6 -> from ( array ( e => enseignant ),array ( idenseignant => id, nom, prenom, mail, civilite, id_user, dernieresaisie ) ) 7 -> join ( array ( u => user ), u.id = e. id_user, array ( u.id, u. identifiant, u.mdp )) 8 -> join ( array ( d => departement ), d. code = e. code_departement, array ( d.code, departement => d. intitule, d.code )); 9 return $select -> query () -> fetchall (); 10 } 11 } 20

26 Vue liste des enseignants 1 <table > 2 <? php foreach ( $this - > enseignants as $enseignant ) :?> 3 <tr onmouseover =" this. classname = trover " onmouseout =" this. classname = trout " class =" trout "> 4 <td > <? php echo $this -> escape ( $enseignant [ civilite ]) ;? > </td > 5 <td > <? php echo $this -> escape ( $enseignant [ nom ]) ;? > </td > 6 <td > <? php echo $this -> escape ( $enseignant [ prenom ]) ;? > </td > <? php } >? 9 </ table > 21

27 Bibliographie [1] http ://framework.zend.com/ [2] http ://jquery.com/ 22