IUT A, département Informatique Université de Lille 1
Stage réalisé au CRED de Sherbrooke Du 02 avril 2008 au 26 juin 2008
Soutenance : 26 juin 2008, Sherbrooke
ASP.NET
ou la réalisation d’application web dynamiques
Tuteur IUT : M. Patrick LEBEGUE Tuteur entreprise : M. Silven REHEL Tuteur CEGEP : M. Jocelyn LAPALME
Auteur :Pierre GALERNEAU
Remerciements
Pour débuter ce rapport, je voudrais tout d’abord remercier M. A GRANT de m’avoir accueilli au sein de son entreprise durant ces 11 semaines. Mais également mes tuteurs : M. S. REHEL, responsable informatique de l’entreprise, M. J. LAPALME, professeur d’informatique au CEGEP de Sherbrooke, et M. P. LEBEGUE, responsable des stages à l’étranger à l’IUT de Lille.
De plus, je voudrais remercier toutes les personnes ayant participées de près ou de loin au bon déroulement de mon stage : mes différents collègues ouvriers programmeurs qui m’ont permis, en me faisant partager leur savoir faire, de réaliser les missions que l’on m’a confié dans les meilleures conditions possibles, ainsi que tous les autres qui m’ont fait découvrir leur travail afin de mieux comprendre le fonctionnement général de l’entreprise. Ainsi je remercie, mes collègues programmeurs, M. Alexandre BLOUIN, Mme Nicole TREMBLAY, M. Dany DRAPEAU et Mlle Melyssa ST HILLAIRE, ainsi que mes collègues stagiaires, MM. B. LEPIOUFLE et V. NORMANDEAU-BABIN. De même, je remercie les collègues avec qui j’ai travaillé ponctuellement, notamment Mme J. CAOUETTE, Mme G. BOURASSA, M. C. AHNADI et M. J.F. POMERLEAU.
Je voudrais également remercier les personnes m’ayant permis de trouver ce stage au Canada, notamment le service Relations Internationales de l’IUT de Lille, qui nous a beaucoup aidé dans les démarches à accomplir et le CEGEP de Sherbrooke, notamment Mme S. BREAULT qui nous a accueilli à Sherbrooke et nous a trouvé un appartement. Je voudrais enfin remercier les professeurs de l’IUT qui, grâce à leurs enseignements et leurs réponses à mes questions, m’ont permis de mener à bien ce stage
Enfin, pour conclure ces remerciements, je remercie en général toutes les personnes ayant participées au bon déroulement de mon stage en me dédiant un peu de leur temps afin de me permettre de réaliser mes recherches et mes missions dans les meilleures conditions possibles.
Résumé
Lors de ce stage, j’ai eu à utiliser la plateforme Microsoft .NET, et plus particulièrement, ASP.NET. Il m’a fallu apprendre à utiliser les outils fournis, ainsi que le langage, ce qui s’est fait par étape, au cours de 3 projets principaux. Ces projets successifs m’ont permis d’apprendre les concepts principaux d’ASP.NET, puis de les approfondir tout au long de mon stage. Celui ci m’a permis de découvrir un nouveau langage, un nouvel environnement de développement : Visual Studio.NET, et un nouveau SQBG : SQL Server. Ces nouveautés sont très intéressantes pour moi car elles me permettent d’approfondir et de diversifier ma formation de l’IUT A d’Informatique de Lille, où nous travaillons notamment sous Access et non SQL Server. Enfin, l’apprentissage en semi autodidacte d’ASP.NET est un réel plus car il m’a permis d’améliorer ma capacité de recherche et d’apprentissage personnel, ce qui est intéressant, puisqu’un informaticien est amené à toujours apprendre de nouvelles choses. Je pense qu’il est important d’être capable de le faire par soi même et avec réactivité.
Au cours de ce stage, j’ai toutefois rencontré certaines difficultés, notamment au début, pour prendre en main les concepts d’ASP.NET, qui étaient totalement nouveaux pour moi.
Abstract
My project was to learn ASP.NET and programming on .NET platform. The .NET framework is a Microsoft product and was completely new for me because of my studies in IUT A of Lille. In fact, we worked a lot on Unix system and we used Microsoft only for the database learning, with Access. So, this training period allow me to learn a lot. In fact, I learnt to use a new development environment (Visual Studio.NET) and to use an other data management system. It allows me to diversify my assets and also to increase my autodidact capacity. Indeed, I learnt ASP.NET with the help of my colleagues, but mainly by myself and it was very interesting because I think that it is very important to be able to always learn still if you work in informatics. This training allows me to increase my knowledge and to develop an other part of my competencies so; it was very interesting for these reasons. The only little problem was the lack of time to finish my last project. It will be interesting to finish it, I think that it can learn me a lot of things again about ASP.NET and programming on Microsoft platforms.
Table des matières
Introduction ... 1 1 Présentation de l’entreprise ... 2 1.1 Situation géographique ...2 1.2 Historique ...4 1.2.1 La naissance du CRED ... 4 1.2.2 Le CRED aujourd’hui ... 4 1.3 Organisation de l’entreprise ...4 1.3.1 Structure juridique ... 4 1.3.2 Organisation fonctionnelle ... 4 1.3.3 Organigramme ... 5 1.4 Activité de l’entreprise ...61.5 Le laboratoire d’informatique médicale...7
1.5.1 Organisation ... 7
1.5.2 Moyens et missions ... 7
1.6 Principaux chiffres ...8
1.6.1 De l’entreprise ... 8
1.6.2 Du laboratoire d’informatique médicale plus particulièrement ... 8
2 Les missions confiées et le travail réalisé ... 8
2.1 Microsoft .NET, c’est quoi ? ...8
2.1.1 La plateforme .NET. ... 8
2.1.2 ASP.NET ... 9
2.1.3 ASP.NET vs ASP ... 10
2.2 Familiarisation avec ASP.NET, Visual Studio et SQL Server ... 12
2.2.1 Pourquoi ce projet de familiarisation ? ... 12
2.2.2 Quelles fonctions pour ce site ? ... 12
2.3 GMFObesite, un centre de documentation en ligne ... 13
2.3.1 GMFObesite, c’est quoi ? ... 13
2.3.2 L’architecture du centre de documentation GMFObesite ... 13
2.3.3 Organisation et accès aux données (avant modification)... 14
2.3.4 Réalisation de sous groupes de classement ... 16
2.3.5 Un DropDownList pour modifier le groupe parent... 17
2.3.6 Cohabitation sous groupes / documents ... 18
2.3.7 Afficher le nom du groupe parent à la place de son identifiant ... 18
2.3.8 Correction de bugs... 21
2.4 SQLNM, un travail de traduction ... 21
2.4.1 Introduction ... 21
2.4.2 Le menu ... 21
2.4.3 La page « Gestion des Membres »... 23
2.5 Petits projets supplémentaires ... 24
3.1 Le GridView, présentation ... 25
3.2 La source de données ... 28
3.2.1 La connexion ... 28
3.2.2 Les requêtes ... 30
3.3 Le GridView dans mon travail ... 32
3.3.1 Pierre et Seb au Québec, version 1 ... 32
3.3.2 GMFObesite ... 32
3.3.3 SQLNM ... 33
3.3.4 Pierre et Seb au Québec, version 2 ... 36
Conclusion ... 39
Annexe 1 : PIERCE ... 42
Annexe 2 : Biodiagnostic ... 44
Annexe 3 : ISA ... 45
Annexe 4 : Le Framewor .Net ... 46
Annexe 5 : Première application en ASP.NET, code behind ... 49
Annexe 6 : Pierre et Seb au Québec, affichage de la date ... 52
Annexe 7 : Code des différentes fonctions de Pierre et Seb au Québec ... 54
Annexe 8 : Exemples de stored procedures ... 67
Annexe 9 : Script SQL des tables de GMFObesite ... 69
Annexe 10 : SQLNM, le menu ... 74
Annexe 11 : Champs de colonnes possibles pour un Gridview : ... 79
Glossaire ... 80
Bibliographie ... 83
Webographie ... 83
1
I n t r o d u c t i o n
Dans ce rapport, je vais présenter et développer les aspects principaux de mon stage de fin d’IUT. Celui-ci est très important au niveau de la formation car il permet de valider, le travail de deux années d’IUT.
Lors de ce stage, j’ai eu pour objectif principal de modifier des applications web tout en apprenant un nouveau langage : ASP.NET, et en utilisant des concepts totalement nouveaux pour moi : ceux de la programmation web dynamique. N’ayant jamais fais de programmation web à l’IUT (sauf un peu de HTML / CSS et de servlets), il m’a fallu tout apprendre, surtout au niveau de l’ASP et de la plateforme .NET de Microsoft que je n’avais jamais utilisé auparavant. Pour cela, j’ai réalisé différents projets qui m’ont permis d’apprendre à utiliser ASP.NET de manière douce et progressive, pour m’amener aujourd’hui à un niveau qui me permet de pouvoir développer n’importe quelle application web sur la plateforme .NET, du simple site de particulier au site de commerce ou de bourse en ligne. Pour en arriver là, je suis passé par différentes étapes, et il est intéressant de se demander :
Quelles étapes m’ont permis d’apprendre à connaitre et à utiliser ASP.NET et ses différents contrôles ?
Dès le début de mon stage, j’ai pu commencer à me familiariser avec ASP.NET et les logiciels qui permettent de l’utiliser, notamment Visual Studio.NET et SQL Server (qui n’est pas directement lié à ASP.NET, mais très utilisé). Une fois ces logiciels pris en main, j’ai pu commencer mes projets qui ont été d’une difficulté grandissante pour me permettre de progresser du début à la fin du stage. J’ai de fait commencé par réaliser un site web simple (« Pierre et Seb au Québec »), pour terminer par un projet de traduction d’ASP vers ASP.NET, qui devait confirmer mes acquis. J’ai également pu m’auto évaluer, notamment en établissant dès le départ une sorte de « fil rouge » : l’amélioration constante de mon site personnel en ASP.NET, grâce à ce que j’apprenais au fur et à mesure.
2
1
Prés enta tion de l’entreprise
1.1
Situation géographique
Le centre de Collaboration en Recherche pour l’Efficacité en Diagnostique (CRED*) du CHUS* (Centre Hospitalier Universitaire de Sherbrooke), est situé à Sherbrooke, une ville Québécoise située dans la région de l’Estrie. Sherbrooke est la principale ville d’Estrie. Le CRED possède, par sa situation géographique, une position privilégiée sur le plan des échanges, tant au niveau du Canada qu’avec les États-Unis et le monde.
Sherbrooke par rapport au Canada
De plus, Sherbrooke est réellement un choix d’implantation judicieux pour un laboratoire de recherche en efficacité du diagnostic. En effet, Sherbrooke constitue une ville unique au chapitre du savoir, du savoir-faire et du savoir vivre. On y retrouve un Centre médical universitaire associé à une Faculté de médecine, un Centre de recherche clinique, un Institut de pharmacologie et un Parc Biomédical dans lequel est inclus le CRED. Tout cela est couplé à un double réseau d’études : en français et en anglais (deux universités !), ce qui fournit au CRED d’autant plus de possibilités. De plus, le campus de la faculté de médecine est sur la même zone que le CRED, ce qui permet aux étudiants d’y venir en stage, et au CRED de détecter les éléments prometteurs.
3 Sherbrooke en Amérique du Nord
La proximité des grands centres nord américains tels que Montréal, Québec, ou, moins rapproché, New York, Washington et Toronto, permet au CRED d’avoir une vision internationale et de ne pas simplement se limiter aux acteurs locaux de Sherbrooke tout en bénéficiant des bienfaits d’une zone très dynamique.
Le CRED
Enfin, Sherbrooke est située à 160km de Montréal et à 235km de Québec. De plus, elle est située à 50min de la frontière avec les États-Unis, et à 700km de Toronto et New York.
4
1.2
Historique
1.2.1 La naissance du CRED
Créé en 1994 grâce à un partenariat entre le Centre de recherche clinique du CHUS et Bayer Canada Inc., le CRED, une équipe multidisciplinaire de 18 personnes, entreprend une gamme variée de projets subventionnés par des organismes publics et par des ententes avec l’industrie (privée).
Le Centre œuvre dans le domaine du transfert des technologies de diagnostic entre les modules de recherches et les modules de développement pour que leur exportation en clinique soit la plus efficace possible. Il s’agit également d’un centre de formation de recherche évaluative, en évaluation des technologies et en informatique biomédicale.
Depuis sa création, le CRED a affiché un développement et une progression continuelle de ses activités, en visant constamment un niveau d’excellence élevé. En septembre 1995, il devenait membre du réseau des centres d’excellence grâce à l’appui du réseau de liaison et d’applications de l’information sur la santé (HEALN et RELAIS)
1.2.2 Le CRED aujourd’hui
Le CRED est constitué d’une équipe de 13 personnes dirigée par le Dr Grant. Cette équipe comprend notamment des chercheurs scientifiques, des informaticiens (laboratoire d’informatique médicale), et des agents administratifs. A cette équipe s’ajoutent une dizaine d’étudiants en recherche et en informatique.
1.3
Organisation de l’entreprise
1.3.1 Structure juridique
Le CRED est un centre de recherche et n’a donc pas une structure d’entreprise réelle. Il dépend notamment du CHUS et du centre d’études cliniques de Sherbrooke. Il est lié à Bayer Canada Inc. et travaille, selon les projets, pour différents organismes comme la SQLNM* (Société Québécoise de Lipidologie, de Nutrition et de Métabolisme.) par exemple.
1.3.2 Organisation fonctionnelle
Le CRED est une équipe de recherche multidisciplinaire dans les domaines de biochimie clinique, d’économie, de statistique, d’épidémiologie et de gestion de l’information. Ces disciplines comprennent :
- recherche biochimique et biotechnologique
- formation médicale avec une expertise en recherche clinique - administration des affaires
- économie et statistiques - informatique
5
6
1.4
Activité de l’entreprise
Le CRED s’est fixé pour mission d’être un leader mondial dans le transfert de technologies biomédicales - de la recherche vers la pratique clinique - en répondant aux besoins de l’industrie, des régulateurs et des utilisateurs. Il se fait aussi un devoir d’exceller dans l’application de l’informatique biomédicale qui permettra d’optimiser ce processus.
Le CRED vise notamment plusieurs objectifs :
- développer des procédures d’évaluation innovatrices en vue d’optimiser la performance, l’utilisation et le coût des essais diagnostiques et des équipements ;
- entreprendre des évaluations cliniques multicentriques ;
- établir une expertise dans la réalisation des études cliniques des études de population ;
- être efficace dans la promotion des activités et des résultats ; - être un centre de référence.
Plusieurs programmes sont réalisés par le CRED. Dans le cadre de l’évaluation de la performance des tests diagnostiques et des équipements, plusieurs études multi sites internationales on été entreprises. Dans le domaine de recherche et de développement, l’équipe a accompli plusieurs études cliniques sur des marqueurs biochimiques et hématologiques pour le diagnostic et le suivi des maladies cardiovasculaires et du cancer. Des programmes de recherche exploitent l’informatique pour supporter le processus d’évaluation. En effet, le projet autocontrôle emploie des méthodologies visant l’optimisation de l’utilisation des tests diagnostiques grâce à l’introduction dans la pratique clinique de nouvelles technologies de gestion de l’informatique. De plus, un programme de prototypage informatique en recherche clinique de l’axe informatique du réseau de santé cardiovasculaire du Québec, supporte un réseau électronique entre les cliniques de recherche pour les études d’évaluation de recherche.
Les 4 principaux programmes d’activité du CRED sont: - PIERCE*1
- Biodiagnostic*2
- ISA*3
- DMKT
Ces programmes se situent tous dans le domaine de la santé et plus particulièrement de l’aide au diagnostic.
1 Une présentation du projet PIERCE se trouve en annexe 1. 2 Une présentation du projet Biodiagnostic se trouve en annexe 2. 3 Une présentation du projet ISA se trouve en annexe 3.
7
1.5
Le laboratoire d’informatique médicale
J’ai réalisé mon stage au laboratoire d’informatique médicale du CRED. 1.5.1 Organisation
Ce laboratoire emploie : - 2 programmeurs
- 2 analystes programmeurs - 1 technicien en informatique
En plus des postes titulaires décrits ci dessus, il y avait en même temps que moi deux autres stagiaires : un français, étudiant en statistiques et un Québécois, étudiant en sciences cliniques et informatique médicale.
C’est une équipe jeune et dynamique dans laquelle il a été facile de s’intégrer. En effet, les deux programmeurs ont 21 et 23 ans, les deux autres stagiaires 20 et 22, quand aux autres membres de l’équipe, ils sont également jeunes et dynamiques, ce qui a rendu le travail vraiment enrichissant autant du point de vue relationnel que du point de vue technique.
1.5.2 Moyens et missions
La spécialité du groupe d’informatique médicale de la santé du CRED est le développement d’outils de collaboration pour mettre en réseau différentes équipes de recherche. L’élaboration d’environnement d’apprentissage en ligne, l’application de différentes techniques d’intelligence artificielles pour l’amélioration des diagnostics médicaux ainsi que l’utilisation d’entrepôts de données médicales. Pour arriver à réaliser cela, ils disposent d’un réseau d’environ 20 postes et de 6 serveurs dont deux web qui permettent d’héberger et de tester les applications réalisées ou en cours de réalisation.
Les principaux objectifs du laboratoire d’informatique médicale sont :
- entreprendre la recherche et le développement des méthodologies d’informatique biomédicale afin d’optimiser le processus de transfert de technologies ;
- développer des outils éducationnels pertinents en transfert de technologies et en informatique biomédicale ;
- développer des outils de communication et de présentation par internet afin de supporter le transfert technologique et son environnement de connaissances ainsi que l’éducation.
8
1.6
Principaux chiffres
Dans cette partie, je vais reprendre rapidement les principaux chiffres liés à l’entreprise, notamment l’effectif, les moyens techniques, etc.
1.6.1 De l’entreprise
Le CRED compte un personnel de 13 personnes à l’heure actuelle. Ce personnel est réparti dans les 4 « services » que l’on peut voir dans l’organigramme.
La partie recherche de l’entreprise dispose de laboratoires et d’appareils de mesures, ainsi que d’un réseau informatique d’environ 20 postes, une salle de projection avec ordinateur et projecteur,…
1.6.2 Du laboratoire d’informatique médicale plus particulièrement
Le laboratoire d’informatique médicale est le service dans lequel on trouve le plus d’effectifs. En effet, il compte 4 personnels permanents, auxquels il faut ajouter M. Dany Drapeau, l’administrateur réseau, et régulièrement des étudiants stagiaires, comme moi. Au niveau informatique, ils disposent de :
- 7 postes informatiques fixes - 6 serveurs dont un sur place
Chaque programmeur dispose d’un espace d’environ 120Go sur son ordinateur. De plus, un espace de partage de la même dimension est mis à disposition sur le serveur pour permettre aux gens de mettre à disposition leurs travaux simplement et rapidement.
2
L es mis s ions co nfiées et le tra va il réa lisé
2.1
Microsoft .NET, c’est quoi ?
Il convient de préciser que la plateforme de développement .NET*, et l’ASP.NET*, que je vais présenter ci dessous, sont des technologies Microsoft, et donc seulement utilisables sous Windows (quelle qu’en soit la version).
2.1.1 La plateforme .NET.
Le Framework* .NET repose sur « le haut du système d’exploitation », qui peut être n’importe quelle version de Windows. Cette plateforme consiste en l’agrégation de nombreux composants. Actuellement, la plateforme .NET consiste en :
- 5 langages officiels (C#, Visual Basic.NET, Managed C++, JScript et J#) - de nombreuses classes et librairies
9
- la plateforme .NET fait partie intégrante de Windows Server mais doit être téléchargée et installée pour fonctionner sous Windows XP ou Windows 2000
Le FrameWork Microsoft .NET4
Le CLR exécute le programme sur le serveur local, il crée et active les objets, met en place des contrôles de sécurité... De plus, il dispose d’un système de Garbage collector* qui permet de libérer la mémoire sans que le programmeur n’ai à le faire explicitement dans son code.
2.1.2 ASP.NET
ASP.NET est le nom que Microsoft a donné à la combinaison de ses deux technologies de développement web : les web forms* et les web services*. ASP.NET est destiné à faciliter la création des applications web, surtout si on veut qu’elle soit dynamique, qu’elle utilise des données retirées de bases de données, qu’elle tourne bien et qu’elle fonctionne sur tous les navigateurs web quel que soient leurs spécifications. Si l’on utilise ASP.NET avec Visual Studio .NET*, il est possible d’utiliser un module appelé « Rapid Application Development technique* » qui permet de construire des applications web très simplement et très rapidement. Il suffit de glisser / coller les composants (contrôles) que l’on veut ajouter sur la page et doubler cliquer sur celui que l’on veut modifier pour écrire le code correspondant à l’évènement
10
Comme exemple de la rapidité et de la facilité de prise en main de l’ASP.NET avec Visual Studio, il suffit de prendre l’exemple de la mini application que j’ai réalisé lors de mon premier jour de stage. N’ayant jamais utilisé ni Visual Studio ni ASP.NET, j’avais en tête d’essayer de faire une petite application toute simple pour me familiariser avec les outils. J’ai donc créé une application permettant de choisir une opération entre addition, soustraction, division et multiplication et ensuite d’entrer trois nombres qui seront ajoutés, soustraits, divisés ou multipliés selon le choix. Le résultat s’affichera ensuite en bas de la petite fenêtre, dans un champ réservé. J’ai donc créé une mini calculatrice en seulement quelques clics et quelques lignes de code. L’équivalent de cette mini application en JAVA aurait pris beaucoup plus de temps puisqu’il faut écrire soi même l’IHM, les contrôles,… il faut en fait tout faire soi même alors que avec Visual Studio et ASP.NET une grande partie du travail est faite automatiquement. Le travail du programmeur est surtout de réfléchir à l’architecture de son programme. Il n’a que très peu besoin de s’occuper de l’aspect graphique, en tout cas pour des petites applications telles que celle là.
Ma première application avec ASP.NET5
2.1.3 ASP.NET vs ASP
ASP.NET permet de faciliter aux développeurs la transition entre le développement d’applications Windows et le développement d’applications web en offrant la possibilité de construire des pages composées de contrôles similaires à ceux des interfaces utilisateur Windows. En effet, un contrôle web tel qu’un bouton ou un label* fonctionne de la même manière qu’un composant Windows. Le code peut lui assigner des valeurs et répondre à ses événements. La seule différence est que les contrôles Windows se dessinent à l’écran alors que les contrôles web produisent le code HTML* ou JavaScript* qui permet de les afficher, et envoient ce code au navigateur de l’utilisateur. Voici les principales choses ajoutées à ASP.NET par rapport à ASP :
11
- un code compilé qui tourne plus vite et avec moins d’erreur : beaucoup plus d’erreurs sont vues dès l’étapes de développement / compilation
- La gestion d'erreur d'exécution est sensiblement améliorée, se servant de la manipulation d'exception* en utilisant des blocs try-catch*.
- ASP.NET est multi langage
- Il est possible de cacher des pages ou des parties de pages pour gagner en performance
- ASP.NET permet de mettre le code logique et le code de design dans deux fichiers distincts pour plus de lisibilité. Le code logique est alors placé dans un fichier de code : c’est le code behind.
- Si une application ASP.NET prend trop de mémoire, ASP.NET décharge le domaine accueillant l'application et recharge l'application dans un nouveau domaine.
- Les états de sessions peuvent être stockés dans une base de donnée SQL Server* ou dans un processus séparé. De cette manière, les sessions ne sont pas perdues si le serveur web est redémarré ou si le processus envoyant les pages ASP.NET est redémarré.
- Les web server controls* : ce sont des contrôles induits par ASP.NET pour les web forms. Ces contrôles sont des contrôles de gestion d’état.
Enfin, au chapitre des différences, il faut ajouter que les sites développés avec ASP.NET sont beaucoup plus faciles à développer mais également à maintenir.
Malgré toutes ces nouveautés, ASP.NET n’est pas parfait. En effet, on a deux grosses critiques :
- seule la dernière version de l’interpréteur ASP.NET permet d’interpréter toutes les versions de l’ASP ou de l’ASP.NET
- ASP.NET produit des marqueurs qui valident la norme du W3C* mais, même si ceci augmente l’accessibilité, il est discutable de dire que cela est mieux qu’un code HTML propre couplé à une feuille de style CSS claire. Notamment, plusieurs contrôles utilisent des conventions étonnantes. Par exemple; les contrôles de Login ou les Wizard controls* utilisent des tableaux HTML comme lay-out* par défaut, ce qui est très discutable, et surtout non modifiable par le programmeur.
On peut donc dire, après cette présentation de ASP.NET, que cette technologie est très intéressante au niveau du gain de temps lors du développement d’applications Windows ou web. Cependant, même si elle permet de faire certaines choses très rapidement par rapport à des technologies telles que JAVA*, elle ne permet pas de tout faire, et certains points tels que le dernier abordé ci dessus, sont encore à améliorer.
12
2.2
Familiarisation avec ASP.NET, Visual Studio et SQL Server
2.2.1 Pourquoi ce projet de familiarisation ?
Les langages et logiciels que j’allais avoir à utiliser au cours de mon stage m’étaient tous inconnus avant de travailler ici. En effet, à l’IUT, nous ne travaillons pas du tout sous SQL Server ni sous Visual Studio et nous n’apprenons pas de langages tels que Visual Basic ou ASP.NET. Il a donc fallu que je commence par les apprendre pour pouvoir être productif au moment où je serais intégré dans un projet.
Lors de ma première réunion avec mon tuteur, le jour de mon arrivée, il m’a demandé ce que je savais faire en informatique et ce que je comptais faire en dehors de mon stage. Je lui ai alors parlé de mon projet de réaliser un site web - que je pensais alors réaliser en PHP* - pour permettre à tous les gens qui le souhaitaient de pouvoir suivre mes aventures québécoises. Il m’a alors proposé de réaliser ce site comme premier projet ici, mais en ASP.NET. Ceci m’a permis d’apprendre plusieurs langages d’un coup puisque j’avais déjà commencé la réalisation de mon site en PHP. J’ai donc terminé une première version en PHP, que j’ai ensuite migré en ASP.NET en y ajoutant de nouvelles fonctionnalités.
2.2.2 Quelles fonctions pour ce site ?
J’ai voulu faire un site le plus complet possible. J’ai donc réalisé plusieurs grandes sections dans mon site en ASP.NET :
- la section d’affichage des articles - le livre d’or et son affichage - la galerie photo
- les pages annexes (versions, informations légales,…)
Pour cela, j’ai eu besoin de différentes fonctions, et d’utiliser beaucoup de fonctionnalités de l’ASP.NET.
Tout d’abord, ASP.NET est un langage dynamique, interprété par le serveur, ce qui m’a permis de réaliser des fonctions impossibles à réaliser en HTML pur. L’utilisation d’un langage interprété m’a permis de réaliser les fonctions suivantes :
- affichage de la date en France et au Québec
- une fonction permettant l’affichage du dernier article paru sur la première page du site
- une autre permettant l’affichage de tous les articles (on a une liste de liens dont le texte est une description de l’article. Au clic, l’article s’ouvre dans le bas de la page, sous la liste)
- une fonction permettant l’affichage d’un compteur de visites
- des fonctions permettant l’affichage d’images sous formes de miniatures cliquables (galerie photo)
13
Prenons l’exemple de la fonction d’affichage de la date6. Je voulais afficher une ligne sur ma page d’accueil pour afficher l’heure courante au Québec et l’heure correspondante en France afin de permettre à tous mes visiteurs de se rendre compte précisément de la différence. J’ai donc récupéré l’heure du serveur, que j’ai du modifier, puis l’afficher.
J’ai du la modifier, du fait que le serveur est au format anglais : AM / PM, ce qui ne me permettait pas d’afficher l’heure en France facilement. J’ai donc converti l’heure pour l’avoir au format 24h, il ne me restait alors plus qu’à ajouter 6 à l’heure du serveur pour obtenir l’heure française. Une fois ces 6h ajoutées, il fallait quand même vérifier que l’heure ne dépassait pas 24. En effet, si il est 20h au Québec, il est alors 2h du matin en France. En faisant simplement un +6 sur l’heure serveur, j’obtenais dans cet exemple une heure française égale à 26. Il m’a donc suffit de faire une vérification du type :
Code
Si (heure serveur + 6) >= 24
Heure française = heure serveur + 6 – 24 Fin si
La réalisation de ce site m’a permis de bien prendre en main les outils fournis par ASP.NET et Visual Studio pour pouvoir ensuite intégrer un « vrai » projet.
2.3
GMFObesite, un centre de documentation en ligne
2.3.1 GMFObesite, c’est quoi ?
GMFObesite* est un site web destiné aux professionnels de la santé (principalement) qui regroupe des documents concernant les moyens de lutte contre l’obésité. C’est en fait un centre de documentation en ligne qui regroupe des documents de tous formats, du site web au document power point. Ces documents sont classés par groupes et sont consultables par qui que se soit qui possède un login pour le site. Les utilisateurs du site peuvent aussi bien être des professionnels de la santé que des patients qui luttent actuellement contre l’obésité. En effet, certains documents s’adressent plus particulièrement aux professionnels alors que d’autres s’adressent aux patients.
2.3.2 L’architecture du centre de documentation GMFObesite
GMFObesite est construit sur un principe totalement objet, tout est objet dans l’architecture de ce site. Les objets principaux que l’on va manipuler à la modification du site sont :
- les groupes : sorte de « rayons » permettant de trier et de classer les documents
- les documents (classe permettant leur affichage, sélection, modification de statistiques,…)
6 Le code de la fonction d’affichage de la date est en annexe 6. Les autres fonctions sont visibles en annexe
14
- les statistiques
- les classements (ratings)
Ces 4 objets permettent de gérer un centre de documentation complet, de la section utilisateur à la session administrateur. En effet, les groupes et les documents sont visibles par tous et permettent de rendre la visite du site intéressante et la recherche de documents plus simple. En effet, au départ, les données n’étaient triées que partiellement, ce qui rendait la recherche d’un document particulier très fastidieuse. Quant aux statistiques et aux classements, ils permettent aux administrateurs de savoir quels documents ou groupes sont appréciés, lesquels sont visités le plus souvent, combien de fois a été téléchargé tel document, etc.
2.3.3 Organisation et accès aux données (avant modification) 2.3.3.1 Stockage des données brutes
GMFObesite s’appuie sur une base de données SQL Server, de laquelle on n’extrait les données que grâce à des « stored procedures* », ou « procédures stockées* » en français. Ce sont des procédures SQL*, plus précisément T-SQL* (Transact SQL*). Une des particularités de ces procédures est qu’elles sont stockées directement dans la base de données concernée, on n’a donc plus aucun code SQL à écrire dans les pages de notre site web, ce qui permet de limiter les mélanges de codes et de simplifier la relecture. De fait, pour utiliser une Stored Procedure, il suffit de se connecter à la base de données, d’appeler la procédure stockée adéquate et de lui passer les paramètres dont elle a besoin. L’appel de procédure stockée se passe de la manière suivante :
Code
Dim l_connection As ConnectionDB = New ConnectionDB() Try
Dim l_command As SqlCommand = New SqlCommand("procStoredProcedure", l_connection.getConnexion())
l_command.CommandType = CommandType.StoredProcedure l_command.Parameters.AddWithValue("@Param", parametre) l_connection.connecter()
Dim myReader As SqlDataReader = l_command.ExecuteReader Try
If myReader.Read Then Recuperation des données End If myReader.Close() Finally CType(myReader, IDisposable).Dispose() End Try Catch ex As Exception ConnectionDB.erreur(ex) Finally
15
l_connection.deconnecter() End Try
Return données
L’utilisation de procédures stockées7 permet également de simplifier la création de requêtes SQL complexes. On peut notamment utiliser du code logique en Transact (SQL Procédural) SQL, ce que l’on ne peut pas faire en SQL classique, et c’est très pratique puisque l’on peut de ce fait écrire une seule requête pour différents cas proches.
2.3.3.2 Organisation des données et affichage utilisateur
Au sein de ce centre de documentation, les documents appartiennent forcément à un groupe. La base de données8 des documents contient donc une colonne « groupe ID », qui contient l’identifiant du groupe dans lequel le document se place. Au départ, il existait environ 5 ou 6 groupes, dans lesquels étaient rangés tous les documents selon l’architecture suivante :
Schéma de l'arborescence initiale
Quand je suis arrivé sur ce projet, la possibilité d’affecter un document à un groupe était réalisée, mais, les groupes étant importants, ils contenaient trop de documents, ce qui les rendait illisibles. On ne pouvait en fait pas affecter un groupe à un autre et donc pas faire d’imbrication, ce qui empêchait le découpage en sous groupe des groupes principaux. Il était difficile de trouver le document que l’on cherchait. En effet, on avait au moins une dizaine à une vingtaine de documents par groupes, listés sans aucun classement (sauf l’ordre alphabétique !), ce qui rendait la recherche très fastidieuse. Mon travail a donc été de réaliser la possibilité d’ajouter des sous groupes aux groupes existants afin de pouvoir mieux classer les documents au sein d’un groupe donné. L’objectif était d’arriver à une arborescence multiple, avec un niveau d’imbrication théorique infini. Cette manière de
7 Des exemples de stored Procedures sont visibles en annexe 8. Cette annexe contient une procédure simple
et une plus compliquée.
16
trier les données les rend beaucoup plus facilement accessibles du fait qu’elles sont triées de manière précise. Dans un groupe donné qui n’a pas de sous groupe, il n’y a que quelques documents, ceux qui répondent aux spécificités de chaque groupe de l’imbrication.
2.3.4 Réalisation de sous groupes de classement
Pour donner la possibilité de créer des sous groupes; il m’a fallu réorganiser la base de données, notamment la table des documents et celle des groupes. En effet, un sous groupe est lui même inclus dans un groupe, il a donc un père, c’est un groupe qui a un parent. J’ai donc ajouté une colonne « parent ID » à la base des groupes, et les groupes peuvent dès lors s’imbriquer. Pour un groupe de base n’ayant aucun groupe père, le parent ID est mis à 0. Quand aux groupes imbriqués, ils contiennent simplement l’identifiant du groupe père. Dès lors, les groupes peuvent s’imbriquer les uns dans les autres. Pour cela, il suffit de modifier l’affichage : sur la première page on n’affiche que les groupes qui n’ont aucun parent. Il faut donc créer une requête SQL de la forme
Code
select from group where parent_id = 0
Ensuite, il suffit d’afficher les sous groupes quand on clique sur un groupe parent. On fait simplement exécuter, au clic, une requête qui possède un paramètre : l’identifiant du groupe dans lequel on se trouve (le père), et on sélectionne les groupes dont le parent_id est égal à l’identifiant récupéré. On les affiche ensuite.
L’ajout de cette possibilité est donc assez simple de prime abord. Mais, pour que tout soit fonctionnel, il faut que cette modification de la base de données soit appliquée partout, et surtout, il ne faut absolument pas oublier de modifier en conséquence les panneaux d’administrations destinés à gérer l’ajout ou la suppression de groupes. En effet, une colonne de plus dans la base de données veut dire une ligne de plus dans le panneau d’administration des groupes, sinon, à l’ajout d’un groupe, le parent_id sera mis à sa valeur par défaut (0), et donc cette colonne ne servirait à rien.
Il a donc d’abord fallu que je modifie toutes les procédures stockées de la base de données pour qu’elles prennent en compte l’ajout de la nouvelle colonne et qu’elle ne plantent pas à l’exécution, et surtout, j’ai du ajouter des procédures permettant de sélectionner seulement les groupes enfants d’un groupe donné. Ensuite, j’ai du modifier la section d’administration, ce qui m’a pris le plus de temps. Il a tout d’abord fallu que je comprenne l’utilisation des contrôles ASP.NET tels que le gridview* ou le detailsview*. Ces contrôles permettent l’affichage du contenu d’une base de données de manière formatée et automatique. Une fois ces principes compris, j’ai simplement ajouté une colonne. J’ai simplement affiché le numéro récupéré dans la base de données, et dans le contrôle permettant la saisie de nouveau groupe ou la modification de groupe existant, j’ai ajouté un champ de type Textarea*. Le gros inconvénient de cette méthode est que l’utilisateur ne connaissant pas forcément l’utilité de ce champ peut entrer n’importe quoi, des chiffres ne correspondant à aucun groupe ou des lettres. J’ai donc décidé de modifier ce champ pour le remplacer par un contrôle de type « dropdownlist* », l’équivalent du « ComboBox* » Java contenant seulement les noms des groupes existants
17
susceptibles d’être des pères. J’ai simplement récupéré le nom de tous les groupes et je les ai insérés dans ma DropDownList, chaque champ ayant deux valeurs : la valeur d’affichage (nom du groupe), et la valeur retournée (identifiant du groupe). L’ajout des lignes à la liste se fait de la manière suivante :
Code
Dim l_groupList As GroupList Remplissage de la liste l_groupList Dim i As Integer = 0
Dim ddlgrouplist As New DropDownList While i < l_groupList.Count
Dim listitem As New ListItem(l_groupList.Item(i).name, l_groupList.Item(i).group_ID) ddlgrouplist.Items.Add(listitem) i += 1 End While ddlgrouplist.Items.Add(New ListItem("", "")) Return ddlgrouplist
Le contrôle DropDownList est donc très pratique dans ce cas. Je ne l’ai pas utilisé seulement pour la sélection du groupe parent lors de la création. En effet, quand on veut modifier un groupe, il faut aussi pouvoir modifier son groupe parent.
2.3.5 Un DropDownList pour modifier le groupe parent
. Pour créer un dropDownList servant lors de la modification des groupes, j’ai commencé par récupérer l’identifiant du groupe que l’on voulait modifier. Une fois cet identifiant récupéré, j’ai récupéré le nom correspondant à cet identifiant dans la base de données des groupes grâce à une requête permettant de sélectionner un groupe complet en fonction de son identifiant. Il m’a ensuite simplement fallu récupérer le nom de chaque groupe présent dans la base et de l’ajouter à mon contrôle DropDownList. L’intérêt de récupérer l’identifiant du groupe courant au début est simplement de ne pas afficher ce groupe dans sa propre liste déroulante de groupes parents. Un groupe ne peut en effet pas être son propre père ! Il m’a ensuite fallu ajouter une ligne vide pour permettre à l’utilisateur de laisser un groupe sans père (sinon, tous les groupes seraient imbriqués et il n’y aurait plus de groupes de bases à afficher sur la page d’accueil du centre de documentation !).
A partir de ce moment là, j’avais donc une liste déroulante qui me permettait de choisir le groupe parent de manière visuelle et sans risque d’erreur. On peut ajouter deux valeurs quand on ajoute une ligne à un dropDownList (une valeur d’affichage et une valeur renvoyée), et cela permet d’entrer en valeur d’affichage le titre (nom) du groupe et en seconde valeur son identifiant. Seule la première valeur sera affichée et, quand on choisira un item de la liste, seule la seconde valeur sera renvoyée. Ce qui permet d’utiliser ce contrôle de manière très simple sans avoir à retraiter l’information une fois le groupe parent choisi. De fait, la valeur stockée dans la base de données dans la colonne parent_id sera bien l’identifiant du groupe concerné et non son nom.
18
2.3.6 Cohabitation sous groupes / documents
Un petit problème s’est cependant posé. Nous avons remarqué que si un groupe contenait d’autres groupes, tout fonctionnait s’il n’y avait pas de documents en plus des groupes. Seulement, si le groupe contenait des groupes enfants ET des documents, rien ne s’affichait. Il m’a donc fallu vérifier au départ (avant affichage) que le groupe ne contenait pas de documents. Si il ne contenait que des groupes enfants, on fait alors appel à la fonction d’affichage des groupes enfants seule. Si par contre, il y a des documents, on fait appel à la fonction d’affichage des groupes et à celle d’affichage des documents, ce qui permet de faire cohabiter les groupes et les documents sans problème. De fait, pour ne pas faire de répétition de code, j’ai appelé la fonction d’affichage des groupes enfants dans un bloc try-catch, ce qui me permettait de ne l’exécuter que dans le cas où il y avait des groupes enfants (sinon une exception était lancée). Une fois ce bloc terminé, qu’il y ai eu une exception ou non, on appelle la fonction d’affichage des documents. Si il y en a, il s’affiche, sinon, une exception est lancée à son tour. Le fait de simplement récupérer l’exception sans faire de traitement particulier permet ici de faire cohabiter groupes et documents sur la même page.
A partir de là, mes sous groupes étaient fonctionnels autant en création qu’en modification ou en visualisation simple. J’ai donc eu alors à modifier l’affichage général de la gridview d’affichage. Cette grille permet l’affichage de tous les groupes. Quand on entre dans la section groupe du panneau d’administration, la gridview s’affiche, contenant toutes les informations concernant les groupes. J’avais donc commencé par afficher simplement la valeur de la colonne « parent ID » dans la colonne ajoutée en conséquence. Cependant, nous avons décidé d’afficher plutôt le nom du groupe pour rendre la grille plus lisible. En effet, un identifiant de type numérique n’est pas très lisible et on ne sait pas au premier coup d’œil de quel groupe il s’agit.
2.3.7 Afficher le nom du groupe parent à la place de son identifiant
Cette partie n’a pas été évidente à réaliser. En effet, une gridview affiche les données qu’elle est allée puiser directement dans la table de la base de donnée concernée. Je ne pouvais donc pas modifier mon affichage à la source, en modifiant simplement les données envoyées. En effet, il aurait fallu que je puisse écrire une requête du type :
Code
@ parent_id int, select nom from group
where parent_id = @parent_id
ce qui est impossible puisqu’il n’y a pas d‘étape intermédiaire entre la récupération des données et leur affichage, la récupération est automatique (j’apprendrais plus tard que cette méthode est finalement possible, quand on crée le contrôle GridView avec un objet sélecteur de données particulier). J’ai donc essayé plusieurs méthodes différentes qui se sont toutes révélées infructueuses. Pour commencer, j’ai essayé de parcourir la grille, de
19
récupérer l’identifiant de groupe parent pour chaque groupe et de le convertir en son nom en récupérant le nom du groupe associé à l’identifiant récupéré. Cette méthode fonctionnait, seulement, un contrôle de type gridview est paginé, ce qui permet d’avoir un affichage beaucoup plus clair et de ne pas avoir une page de données d’un nombre incalculable de lignes. La taille d’une page de gridview est de 10 enregistrements (dans notre cas). J’arrivais donc à afficher les bons noms de groupes lorsque j’étais sur la première page de la grille mais, au moment de passer à la seconde, j’avais un problème : les identifiants n’étaient pas lus et donc pas modifiés. En effet, quand on change de page sur un contrôle gridview, la page n’est pas rechargée et donc la fonction de conversion des identifiant parents en leur noms n’est pas ré exécutée. De plus, les noms des groupes situés sur une page autre que la première ne pouvaient pas apparaître du fait que le traitement que j’appliquais à la page se passait une fois la page chargée. C’est à dire que la fonction lisait les données affichées et non pas les données envoyées de la base de données. Je ne pouvais donc appliquer mon traitement qu’aux 10 premiers enregistrements affichés. Un test m’a confirmé que le problème venait réellement de là : j’ai essayé de supprimer la pagination de ma grille, cela rendait la page illisible et trop grande donc ce n’était pas viable mais j’ai vu que, dans ce cas, tous les enregistrement étaient modifiés. J’avais donc un problème; comment modifier les données avant qu’elles ne soient affichées sur la page puisque je ne pouvais pas les récupérer à ce moment là.
J’ai alors eu l’idée d’une technique totalement différente. Je l’ai essayé malgré les nombreux changements qu’elle occasionnait dans tout le site, et elle s’est révélée fonctionnelle ! Pour cela, il m’a fallu commencer par modifier la base de données des groupes. La colonne parent_id a été notamment modifiée. Je l’ai transformée en une colonne ne pouvant contenir que des chaines de caractères et non plus des entiers (l’intérêt d’avoir un entier était inexistant, je n’avais donc aucun problème pour modifier le type de cet identifiant). Je me suis rendu compte de même que le gridview utilisait une fonction spéciale pour se remplir : la fonction getList(), qui elle, sélectionnait tous les groupes et retournait au final une liste de groupes. J’ai alors transformé les groupes au sein de cette fonction. Comme les parent_id étaient des chaines de caractères, je n’avais aucun problème à remplacer à cet endroit, dans la liste temporaire qui sera finalement renvoyée, le nombre (le parent_id) par le nom correspondant. De fait, j’ai parcouru la liste et pour chaque groupe, j’ai récupéré l’identifiant parent, que j’ai remplacé par la chaine correspondant à son nom. Je ne pouvais faire cela que si mon identifiant de groupe était une chaine de caractère. En effet, si il avait été entier, je n’aurais pas pu remplacer le numéro par une chaine dans les groupes contenus dans la liste temporaire.
Voici le code de la fonction getList retournant les groupes modifiés :
Code
Public Shared Function getList() As GroupList Dim tempList As GroupList = Nothing
Dim l_connection As ConnectionDB = New ConnectionDB() Try
Dim l_command As SqlCommand = New SqlCommand("procSelectAllGroup", l_connection.getConnexion())
20
l_connection.connecter()
Dim myReader As SqlDataReader = l_command.ExecuteReader Try
If myReader.HasRows Then tempList = New GroupList While myReader.Read
Dim l_group As Group = fillDataRecord(myReader) If (CType(l_group.Parent_ID, Integer)) = 0 Then l_group.Parent_ID = ""
Else
l_group.Parent_ID = getItem(CType(l_group.Parent_ID, Integer)).name End If tempList.Add(l_group) End While End If myReader.Close() Finally CType(myReader, IDisposable).Dispose() End Try Catch ex As Exception ConnectionDB.erreur(ex) Finally l_connection.deconnecter() End Try Return tempLis End Function
Elle commence par récupérer tous les groupes de la base de données grace à la stored procedure « procSelectAllGroups ». Une fois ces groupes récupérés, il faut les sauvegarder dans une liste. Pour cela, on parcourt le résultat renvoyé par la stored procedure et on ajoute chaque item (groupe) à la liste. C’est à ce moment là qu’intervient la modification. Dans la boucle, avant d’ajouter le groupe courant à la liste, on récupére son identifiant parent. On récupére ensuite le nom du groupe concerné. Si l’identifiant est nul, en change le 0 par une chaine vide et quand l’identifiant parent n’est pas nul, on le remplace par son nom. C’est là que l’on voit le réel intérêt d’avoir une chaine de caractères à la place d’un entier pour l’identifiant du groupe parent. En effet, si l’identifiant parent était un entier dans la base de données, on pourrait récupérer le nom du groupe mais pas le caster en entier (on ne caste pas une chaine en entier !), alors que si l’identifiant est une chaine contenant des chiffres, il suffit de caster cette chaine en entier, de récupérer le groupe concerné, puis son nom et de remplacer les chiffres par le nom dans la chaine de départ. Je n’ai donc plus eu de problème en utilisant cette méthode puisque les données étaient modifiées avant leur affichage.
21
2.3.8 Correction de bugs
Une fois cet affichage fonctionnel, il ne restait plus que la phase de tests à réaliser, et à corriger les bugs trouvés lors de cette phase. Cela nous a pris environ une semaine pour trouver tous les bugs. Nous avons eu un peu de tout : de la section qui ne fonctionnait plus du fait qu’une stored procedure avait été oublié lors des modifications de base de données jusqu’au petit bug de type « j’ai oublié de supprimer un affichage de test ». Les plus gros bugs que j’ai eu à résoudre ont été :
- une statistique qui ne s’affichait pas à cause d’une superposition de code. - des groupes qui avaient disparus : la base de données avait planté et leur
identifiants parents avaient été mis à des valeurs inexistantes, et ils ne s’affichaient donc pas.
- des groupes avec des noms trop proches et donc difficilement différenciables. - les classements ne s’actualisaient que après un rechargement de la page. - nous avons modifié l’endroit d’apparition des grilles de modifications pour
éviter qu’elles ne s’ouvrent en agrandissant la page en largeur.
2.4
SQLNM, un travail de traduction
2.4.1 Introduction
SQLNM est le site de la Société Québécoise de Lipidologie, de Nutrition et de Métabolisme (SQLNM). Il a été développé par le CRED en 2007, et sa particularité au niveau de la conception est qu’il allie des pages ASP et des pages ASP.NET. En effet, toutes les sections du site ne sont pas écrites dans le même langage : la section administrateur, notamment, est en ASP. Le travail qui m’a été confié sur ce site est justement de retranscrire la section d’administration en ASP.NET. Ce n’est pas un travail évident car la section administrateur est assez importante; il y a, rien que pour les 3 premières pages, plus de 1500 lignes de code ASP. C’est d’autant plus ardu que je ne connaissais pas bien l’ASP et qu’il fallait donc que je fasse des recherches à longueur de temps pour comprendre précisément l’utilisation de tel ou tel élément ASP pour savoir avec quel élément ou contrôle ASP.NET je pouvais le remplacer.
2.4.2 Le menu
La première tâche que j’ai eu à réaliser dans la migration de cette section d’administration de ASP vers ASP.NET était de recréer le menu de navigation. En effet, rien n’était réutilisable du fait que le code était très mélangé. Je veux dire par là que, en ASP, le code logique et le code web, type HTML, sont mélangés. On a des sections de code de type :
22 Code
Code HTML <% code VB %> code HTML
Or, du code de ce type n’est pas compatible avec l’ASP.NET si on veut rendre le code compréhensible et lisible. De plus, en ASP.NET, qui est un langage objet, il est un peu bête d’utiliser du HTML alors que des objets ASP permettent de faire des choses identiques beaucoup plus rapidement et facilement.
Pour faire le menu9, j’ai donc pris le code HTML contenu dans les pages ASP, je l’ai traduit et adapté à mes besoins dans la page ASPX. J’ai ensuite ajouté le code interprété dans le code behind* de ma page aspx. Ceci permet d’avoir un code beaucoup plus clair.
Rendu du menu en ASP.NET :
Rendu de la section Gestion Membres de SQLNM
Une fois le menu recréé, ce qui a déjà été long, j’ai commencé à modifier les pages cibles des liens du menu. Pour cela, j’ai du approfondir la compréhension de chaque objet ASP que je rencontrais. En effet, il faut comprendre exactement ce que fait chaque objet pour pouvoir le remplacer par quelque chose d’équivalent en ASP.NET. A certains moments,
23
c’est assez simple parce qu’il existe des objets identiques. Par exemple un lien HTML (<a href="Adresse ou URL"> .. </a>) est remplaçable très simplement en ASP.NET par l’objet linkButton*, qui est exactement sa traduction. Cet objet fait la même chose qu’un lien et il permet en plus d’associer des méthodes de contrôle au clic sur le lien concerné, on n’est pas obligé d’utiliser le lien comme redirection, il peut par exemple simplement servir à afficher un composant dans la page. C’est donc très facile dans le cas d’un lien de remplacer le HTML par de l’ASP.NET. Cependant, ce n’est pas aussi facile pour tous les objets. Certains objets n’ont pas d’équivalent si simple. Il est notamment beaucoup plus compliqué de traduire une boucle d’affichage de contenu d’une base de données. ASP.NET propose des objets permettant de faire cela simplement (GridView, DetailsView,…), mais ils sont assez difficiles à prendre en main seul, il faut donc un peu de temps pour y arriver.
Le plus gros problème engendré par une « traduction » ASP / ASP.NET est que le code ASP.NET est plus volumineux (ce n’est pas vrai pour tout). Par exemple un menu constitué simplement de un 3 liens en HTML prendra en ASP.NET 4 fois plus de lignes environ. En effet, en HTML on a simplement les trois liens, donc trois lignes alors qu’en ASP.NET on aura les trois objets ASP de type linkButton, plus les trois méthodes onclick, une pour chaque objet. Si on se contente d’une redirection dans la méthode onclick on aura alors 3x3 lignes plus les trois déclarations d’objet, soit 12 lignes au lieu de trois. C’est donc un inconvénient notable. Ce n’est pas difficile à mettre en place, simplement on perd du temps, notamment quand le menu est volumineux comme dans mon cas : 79 liens, soit environ 240 lignes rien que pour les méthodes de redirection, plus les 79 de déclaration, plus les quelques lignes permettant la récupération d’arguments de sessions et celles permettant la vérification que le membre est effectivement connecté. Cela donne un total d’environ 350 lignes, pour simplement un menu !
2.4.3 La page « Gestion des Membres »
Cette page contient différentes sections et méthodes qui seront appelées selon le lien du menu sur lequel on aura cliqué. Notamment, on peut faire un tri entre les membres. On peut afficher tous les membres sans aucun tri, ce qui fait un peu « ramer » le site puisque la base de données contient environ 500 enregistrements donc l’affichage prend du temps. On peut également trier pour afficher seulement les membres qui sont étudiants, afficher les membres qui sont « en approbation »,… Cette partie affichage est assez simple, c’est simplement une méthode qui exécute une requête de sélection. Cette requête est une storedProcedure et elle contient un paramètre qui permet de trier les champs de la base et d’en sélectionner certains par rapport à d’autres.
Au niveau de l’affichage, il faut pouvoir ajouter une checkBox devant chaque enregistrement affiché et un bouton dont le texte est « modifier cette fiche ». Les checkBox permettent de sélectionner une ligne pour la supprimer (grave à un bouton « supprimer les enregistrements sélectionnés »). J’ai mis en place deux nouveaux boutons pour la améliorer la facilité d’utilisation de cette section. Ces deux boutons sont :
- un bouton « désélectionner tout » qui permet d’annuler toute sélection et de revenir à l’état initial de la grille (non sélectionnée)
24
- un bouton « sélectionner tout » qui fait l’inverse : il sélectionne tous les enregistrements
J’ai mis en place ces deux nouveaux boutons parce que, dans le cas ou un administrateur voulait vider sa base de données, si il devait sélectionner plus de 500 champs à la main, il ne s’en sortirait jamais alors qu’avec ce bouton, la sélection est effective en quelques secondes. De même, le bouton de désélection permet de simplifier la vie de l’utilisateur. Une fois ces petits extras ajoutés, il a fallu que je m’occupe de la mise en place des boutons de suppression. Il fallait que quelque chose se passe effectivement quand on cliquait sur le bouton « supprimer la sélection ». J’ai commencé à entreprendre cette tache mais, n’ai pas pu la terminer car je n’ai commencé ce projet que trois semaines avant la fin du stage. Le fait de devoir apprendre une grande partie de l’ASP et d’apprendre à mettre en place un élément GridView m’ont fait perdre un temps précieux dans l’optique de terminer ce projet.
2.5
Petits projets supplémentaires
J’ai participé à des tests sur les logiciels PIERCE et Vision C+* du CRED. Pour plus d’information sur ces plateformes, se référer à la section 1. Le but de ces tests était de trouver les bugs, quels qu’ils soient. De plus, j’ai eu pour mission de mettre à jour certains sites dépendants du CRED tels que le site du CRED10 lui-même sur lequel j’ai modifié la section de présentation de l’équipe. Cette version du site est en ASP, non pas en ASP.NET et cela m’a donc permis de me rendre effectivement compte des différences entre ces deux technologies. De fait, ASP n’est pas du tout aussi puissant que ASP.NET surtout au niveau de la structuration (objet). J’ai également mis à jour le site RSCV dont le CRED est le développeur. Ce site est une sorte de portail permettant de voir ce qui a été réalisé (notamment des écrits) et à quel moment pour chaque groupe de chercheurs. Ce site peut être mis à jour directement en ligne du fait qu’il contient une section administrateur dans laquelle est intégré un éditeur de texte. Cet éditeur permet la modification instantanée des données en ligne, sans avoir besoin de repasser par le FTP*. Ceci est très intéressant car très rapide. Il suffit de cliquer sur éditer et notre page s’affiche en deux formats : texte et graphique. Cela permet de modifier très rapidement et de voir le résultat des modifications instantanément. Une fois que nos modifications sont validées, il n’y a plus rien à faire, tout est déjà en ligne.
25
3
Fo cus sur l’utilisa tio n du co ntrôle GridView
e t d e s e s d é r i v e s
3.1
Le GridView, présentation
La classe GridView est une classe du Framework .NET qui permet l’affichage de données extraites d’une base de données, de manière formatée. Cette classe est nouvelle dans le Framework .NET, version 2.0, c’est une extension de l’ancienne classe DataGrid*. Le GridView fait partie de l’espace de nom System.Web.UI.WebControls. Un « espace de nom* » dans le Framework .NET est l’équivalent en JAVA, d’un package.
Ce contrôle se déclare de la manière suivante :*
Code
<asp:GridView ID="GridView1" Runat="server">
Dans de nombreuses situations, un GridView peut permettre de débloquer la situation du programmeur, et également de lui simplifier la vie. En effet, une fois que le contrôle est maitrisé, il est assez simple à utiliser et il permet de faire des choses que l’on ne pourrait pas faire simplement sans. Notamment, il permet l’affichage des données extraites d’une base de données en quelques lignes. Cet affichage est propre, formaté et paginé, ce qui donne un rendu très intéressant, mais très difficile à mettre en place sans l’utilisation de ce contrôle. De plus, on peut lui ajouter des éléments de modification, de mise à jour, de suppression de données, etc, ce qui permet de pouvoir manipuler et modifier les données extraites de la base simplement, sans passer par des intermédiaires compliqués. Une seule requête SQL sera en effet exécutée pour l’affichage des données. Il suffit de les afficher, si on veut les modifier, il suffira de récupérer les valeurs affichées, alors que si on ne pouvait s’en servir que comme affichage, il faudrait exécuter plusieurs requêtes de sélection, ce qui rendrait le travail du programmeur compliqué et répétitif. Ce contrôle permet donc de simplifier aussi bien le simple affichage que la modification de données, et il permet également d’éviter les répétitions de code inutiles quand on veut par exemple passer d’un affichage à une édition/suppression de données. Pour résumer, le contrôle GridView est utilisé pour afficher les valeurs d'une source de données dans une table. Chaque colonne représente un champ tandis que chaque ligne représente un enregistrement. Le contrôle GridView prend en charge les fonctionnalités suivantes :
26 • Liaison aux contrôles de source de données, telle que SqlDataSource*. (voir plus
bas)
• Fonctionnalités intégrées de tri.
• Fonctionnalités intégrées de mise à jour et de suppression. • Fonctionnalités intégrées de pagination.
• Fonctionnalités intégrées de sélection de ligne.
• Accès par programme au modèle objet GridView pour définir des propriétés de
manière dynamique, gérer les événements, etc.
• Plusieurs champs clés.
• Plusieurs champs de données pour les colonnes de lien hypertexte. • Apparence personnalisable via des thèmes et des styles.
GridView simple (affichage seulement)
Les possibilités associées au GridView ne s’arrêtent pas là. En effet, on peut mettre plus ou moins ce que l’on veut dans les champs de données qui le composent. Par défaut, la propriété AutoGenerateColumns du GridView a la valeur « true », ce qui crée un objet AutoGeneratedField pour chaque champ dans la source de données. Chaque champ est ensuite rendu sous forme de colonne dans le contrôle GridView dans l'ordre dans lequel chaque champ s'affiche dans la source de données Si on ne veut pas que tous les champs soient des champs auto générés, on peut contrôler les colonnes qui doivent apparaître dans le contrôle GridView en définissant la propriété AutoGenerateColumns avec la valeur « false » et en définissant notre propre collection de champs de colonnes.
27
Différents types de champs de colonnes11 déterminent le comportement des colonnes dans le contrôle.
On peut par exemple mettre un champ simple qui affichera simplement la valeur récupérée dans la base, mais on peut également mettre des champs plus complexes de type bouton, checkbox, etc. Ceci est très intéressant, surtout du point de vue de la modification des données. En effet, si notre contrôle nous sert simplement à afficher, il n’est pas utile d’utiliser ces propriétés là. Cependant, si on veut pouvoir modifier un champ, il peut être intéressant de ne pas simplement afficher un champ de saisie de texte. Notamment, cette particularité est intéressante dans les cas suivants :
- La valeur à modifier est de type booléen, une case à cocher est préférable car elle ne permet d’entrer que « true » ou « false » selon qu’elle est cochée ou non ;
- Si un champ ne doit contenir que certaines valeurs, dans un intervalle, il peut être utile de mettre en place un champ de type DropDownList, pour empêcher l’utilisateur d’entrer une valeur non conforme.
GridView avec CheckBox de sélection
Exemple de déclaration d’un GridView, tiré du site GMFObesite :
28 Code
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="False" DataKeyNames="group_ID"
DataSourceID="odsGroup"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
OnRowDeleted="GridView1_RowDeleted" Width="700px" OnLoad="Page_Load"> <Columns>
<asp:BoundField DataField="group_ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="group_ID"/>
<asp:BoundField DataField="name" HeaderText="Nom" SortExpression="name" />
<asp:BoundField DataField="description" HeaderText="Description" SortExpression="description" />
<asp:BoundField DataField="parent_id" HeaderText="Groupe Père" SortExpression="t_group.parent_id" /> <asp:CommandField ShowSelectButton="True" /> <asp:CommandField ShowDeleteButton="True" /> </Columns> </asp:GridView>
Maintenant que l’on comprend l’intérêt de ce contrôle, il reste à savoir comment le mettre en place au sein de notre page ASP.NET.
3.2
La source de données
Il y a différentes manières de rendre fonctionnel un contrôle gridview. En effet, il est possible de le mettre en place dynamiquement ou de le fixer dans le code graphique de la page. Cependant, ceci n’est qu’un détail, il est plus intéressant de se pencher sur la mise en place du contrôle permettant d’envoyer les données à afficher au GridView : le DataSource*. La source de données la plus couramment utilisée est le SqlDataSource, mais il en existe d’autres telles que l’ObjectDataSource, etc. Je vais ici parler du SqlDataSource car c’est la source de données que j’ai utilisé et que, de toute façon, les différences ne sont que minimes entre SqlDataSource et ObjectDataSource*, leur rôle étant le même, on choisi simplement d’utiliser l’un ou l’autre selon nos préférences et nos connaissances. Le contrôle de source de données que l’on va choisir va nous permettre de nous connecter à la base de données, d’en extraire les données voulues, et de les afficher dans le GridView associé par l’intermédiaire d’un envoi.
3.2.1 La connexion
Pour se connecter à une base de données, il faut affecter une chaîne de connexion valide à la propriété ConnectionString* du SqlDataSource. Celui ci peut prendre en
