Embed Size (px)
Citation preview
Mémoire de projet de fin d’études Création de pages web pour les branches de la faculté de génie Présenté par: Ola SALMAN Surveillé par: Dr.Abed Ellatif SAMHAT
Promotion 2012-2013 Université Libanaise-Faculté de génie Branche 3
2 | P a g e
Remerciements Je veux exprimer par ces quelques lignes de remerciements mes gratitudes envers tous ceux en qui, par leur présence, leur soutien, leur disponibilité et leurs conseils j’ai trouvé courage afin d’accomplir ce projet.
Je tiens encore à exprimer ma profonde gratitude et mes sincères remerciements à Dr. SAMHAT qui m’a fait l'honneur de diriger ce travail et ses précieux conseils furent d'un apport considérable. Aussi je tiens à lui reconnaître le temps précieux qu'il m’a consacré.
Aussi que les membres de jury trouvent ici mes remerciements les plus vifs pour avoir accepté d'honorer par leur jugement mon travail.
Enfin, je ne peux achever ce projet sans exprimer mes gratitudes à tous les enseignants de la faculté de génie-Branche 3, et en particulier le doyen Dr.YOUNES et le directeur Dr.HAMDAN, pour leur dévouement et leur assistance tout au long de mes études.
3 | P a g e
résumé Ce mémoire présente le fruit d’un travail de quatre mois portant sur le design et la création d’un modèle de page web pour les branches de la faculté de génie. Ce travail qui a permis l’acquisition d’une expérience importante dans le monde web. Le cahier de charges, qui est essentiel dans un tel genre de projets, est déterminé tout d’abord pour pouvoir préciser les besoins et les outils requis pour créer les pages web pour les trois branches dans le site présent de la faculté de génie. Plusieurs langages et technologies sont utilisées afin de construire une page web interactive et dynamique (c. à. d. le contenu n’est pas statique, il est tiré d’une base de données). Ainsi la dynamicité des pages nécessite le développement d’un système de gestion de la base de données qui doit être toujours mise à jour. Dans ce rapport, on a détaillé les étapes de construction de la base de données, des pages web, ainsi que du système de gestion. On a pu à la fin du projet de créer des pages respectant le contexte général du site présent mais qui présente une nouveauté dans l’exposition et l’affichage des informations ainsi qu’il y’a des nouvelles fonctionnalités ajoutées et dont l’étudiant en a besoin.
4 | P a g e
Table de matières INTRODUCTION GéNéRALE ...................................................................................................................... 7
Chapitre 1: PRéSENTATION DU PROJET ............................................................................................. 9
1. Introduction ...................................................................................................................................... 9
2. L’état actuel ...................................................................................................................................... 9
3. Le Cahier de charges ....................................................................................................................... 11
3.1 Cahier de charges fonctionnel ...................................................................................................... 11
3.2 Plan ................................................................................................................................................ 13
4. Conclusion ....................................................................................................................................... 13
Chapitre 2:Les Technologies de réalisation .......................................................................... 14
1. Introduction .................................................................................................................................... 14
2. Introduction au World Wide Web .................................................................................................. 14
3. Des pages statiques vers les pages dynamique .............................................................................. 15
3.1 Qu'est-ce qu'une page dynamique ............................................................................................... 16
3.2 Le fonctionnement des pages dynamiques .................................................................................. 16
3.3 Le Back Office ................................................................................................................................ 17
4. .NET ................................................................................................................................................. 18
5. C’est Quoi .Net Framework? ........................................................................................................... 19
5.1 ASP.NET ......................................................................................................................................... 20
5.2 Dynamicité et Base de données(ADO.NET) .................................................................................. 21
6. CSS ................................................................................................................................................... 22
7. JavaScript ........................................................................................................................................ 22
8. Conclusion ....................................................................................................................................... 23
Chapitre 3:Les outils de travail ................................................................................................. 24
1. Introduction .................................................................................................................................... 24
2. Asp.Net avec VB dans Visual Studio 2010 ....................................................................................... 24
3. Les caractéristiques et le fonctionnement de la page ASP.Net ...................................................... 24
4. Les éléments d’un projet Web Avec Asp.Net ................................................................................. 26
4.1 Les Pages Web Forms.................................................................................................................... 26
4.2 La Page Maître .............................................................................................................................. 27
5 | P a g e
4.3 Les Contrôles ................................................................................................................................. 27
4.3.1 Contrôles utilisateur ............................................................................................................... 27
4.3.2 Contrôles serveur ................................................................................................................... 28
4.4 Les fichiers essentiels .................................................................................................................... 28
4.4.1 Web.config ............................................................................................................................. 28
4.4.2 Fichier .css (feuille de style) ................................................................................................... 29
4.4.3 App-code ................................................................................................................................ 29
4.4.4 Fichier .js ................................................................................................................................ 29
5. SQL Server 2008 .............................................................................................................................. 29
6. Conclusion ....................................................................................................................................... 30
Chapitre 4:les étapes de réalisation ....................................................................................... 31
1. Introduction .................................................................................................................................... 31
2. Construction de la base de données ............................................................................................... 32
3. Définition des classes ...................................................................................................................... 35
4. Construction des pages ................................................................................................................... 36
4.1 Page Maître .................................................................................................................................. 36
4.2 Les Pages Web............................................................................................................................... 37
4.2.1 “Home” .................................................................................................................................. 39
4.2.2 “News” ................................................................................................................................... 40
4.2.3 “Academic Staff” .................................................................................................................... 41
4.2.4 “Administratif Staff” ............................................................................................................... 42
4.2.5 “Academic Schedules” ........................................................................................................... 43
4.2.6 “Ressources” .......................................................................................................................... 44
4.2.7 “Library” ................................................................................................................................. 44
4.2.8 “Our Graduates” .................................................................................................................... 45
4.3 Les Pages de gestion ..................................................................................................................... 46
4.3.1 La page “Insert” ...................................................................................................................... 46
4.3.2 La page “show” ...................................................................................................................... 46
4.3.3 La page “Update” ................................................................................................................... 47
4.4.4 La page “Delete” .................................................................................................................... 47
5. Conclusion ....................................................................................................................................... 47
6 | P a g e
Conclusion générale ......................................................................................................................... 48
Bibliographie ....................................................................................................................................... 49
7 | P a g e
INTRODUCTION GéNéRALE
Au cours de ces dernières années, les nouvelles technologies de l'information et de la communication ont connu un bouleversement marqué par l'apparition de l'Internet et par sa croissance exponentielle.
Ces années ont aussi été marquées par l'entrée en scène de World Wide Web (WWW), l'une des applications qui a popularisé Internet, et qui a fait exploser le nombre de ses utilisateurs. Par conséquent, le web suscite l'intérêt de la majorité des organisations qui se doivent enrichir leur présentation via des sites web.
Ainsi les universités prennent plus place dans l'espace numérique de jour en jour. Cette vision d'instauration ne se limite pas à l'utilisation des outils informatiques et la mise à disponibilité des praticiens, les nouvelles technologies de communication et d'information mais actuellement, les universités profitent du web pour se créer une identité propre. Ainsi dans un souci continu d'améliorer les méthodologies d'enseignement en favorisant l'accès aux nouvelles technologies de communication et d'information, Notre Faculté a mis en place un site web qui sert comme moyen de communication et qui offre aux étudiants et personnels de la faculté, la possibilité d'accéder à distance à une base de données, de partager avec les enseignants des documents et de profiter de plusieurs autres services. Mais ce site est en cours du développement et il y’a encore quelques fonctionnalités et quelques rubriques inactives. Le but de notre projet est de participer au développement de ce site en reconstruisant les pages web des trois branches. Dans ce mémoire, nous présentons la méthodologie de travail avec ce genre de projet. Et nous décrivons les étapes de réalisation ainsi que les résultats qu’on a obtenus. Dans le premier chapitre, le projet et les besoins sont présentés .Passant de l’état actuel du site, on va définir ce qu’on appelle cahier de charges. Le deuxième chapitre contient une vue conceptuelle des technologies qui assurent le développement web. Dans le troisième chapitre, les techniques des outils qu’on a besoin dans la réalisation de notre projet sont examinées. Dans le quatrième chapitre, on va détailler les étapes qu’on a parcourues pour réaliser notre but.
8 | P a g e
liste des figures: Figure 1:état actuel du site ................................................................................................................................ 9
Figure 2: Contenu de la page “Branche I” ....................................................................................................... 10
Figure 3: Contenu de la page “Branch II” ....................................................................................................... 10
Figure 4: Contenu de la page “Branch III” ...................................................................................................... 11
Figure 5: Plan du projet ................................................................................................................................... 13
Figure 6: la requête d’une page statique ........................................................................................................ 15
Figure 7: la requête d’une page dynamique .................................................................................................. 17
Figure 8: Gestion des pages dynamiques. ...................................................................................................... 18
Figure 9: Fonctionnement du CLI.................................................................................................................... 19
Figure 10: Piles de composants du .Net Framework .................................................................................... 20
Figure 11: Exécution d'une page ASP.net ....................................................................................................... 25
Figure 12: Création d’un site Web .................................................................................................................... 31
Figure 13: Choix du type du site Web ............................................................................................................. 31
Figure 14: Création de la base de données. ................................................................................................... 32
Figure 15: La base de données lufe_ola .......................................................................................................... 34
Figure 16: Les procédures stockées ............................................................................................................... 35
Figure 17: Les classes ....................................................................................................................................... 35
Figure 18: La page maître ................................................................................................................................ 36
Figure 19: La page de base ............................................................................................................................... 37
Figure 20: La forme générale des pages......................................................................................................... 38
Figure 21: Page “Home” ................................................................................................................................... 39
Figure 22: Page “News” .................................................................................................................................... 41
Figure 23: Page “Academic Staff” .................................................................................................................... 42
Figure 24: Page “Administratif Staff” ............................................................................................................. 43
Figure 25: Page “Academic Schedules” .......................................................................................................... 43
Figure 26: Page “Ressources” .......................................................................................................................... 44
Figure 27: Page “Library”................................................................................................................................. 45
Figure 28: Page “Our Graduates” .................................................................................................................... 45
9 | P a g e
Chapitre 1: PRéSENTATION DU PROJET
1. Introduction
L’encyclopédie en ligne Wikipédia définit la gestion de projet comme « une démarche visant à structurer, assurer et optimiser le bon déroulement d’un projet, l’objectif étant d’obtenir un résultat de qualité pour le moindre coût et dans le meilleur délai possible ». Le projet de création de site Internet n’échappe pas aux règles de la gestion de projet. En effet construire ou faire construire un site Internet est avant tout un projet qui doit être écrit, planifié et surtout évalué. Il s’agit de se fixer des objectifs, trouver des acteurs, répartir des tâches, définir des étapes et aussi des échéances. Lorsque l’on souhaite créer un site Internet, la première des choses est de définir son projet. La perception d’un projet est essentielle pour sa réussite. En effet de nombreux projets web échouent à cause d’un mauvais cadrage ou d’une mauvaise définition du projet. Il est donc important de définir la dimension d’un projet avant son lancement.
2. L’état actuel Le site actuel présente une rubrique sous le nom de “Faculty”.Sous cette rubrique, il y’a trois
sous-rubriques: “Branch I’’, “Branch II’’, “Branch III’’.
Figure 1:état actuel du site
Ces sous-rubriques sont des ”hyperlinks” à trois pages web qui présentent les branches ou plus exactement l’équipe académique de chaque branche.
10 | P a g e
Branch I
Figure 2: Contenu de la page “Branche I”
Branch II
Figure 3: Contenu de la page “Branch II”
11 | P a g e
Branch III
Figure 4: Contenu de la page “Branch III”
3. Le Cahier de charges Au début de ce projet, on a fait une réunion avec le doyen pour savoir les besoins et les
résultats qu’il attend à la fin du travail.
Et s’appuyant sur cette réunion, on a rédigé un cahier de charges qui se compose de deux
parties:
Un cahier de charges fonctionnel qui reprend tous les besoins exprimés ainsi que toutes les futures fonctionnalités.
Le plan qui comporte les pages qu’elles vont être construites.
3.1 Cahier de charges fonctionnel
Ce tableau présente les besoins et les fonctionnalités qui répondent à ces besoins.
12 | P a g e
Besoins Fonctionnalités
Avoir une espace de communication entre le
corps administratif et les étudiants.
Créer une page d’infos et des
annonces.
Faire l’implémentation d’un
calendrier sur lequel sont marqués
les évènements (début d’un semestre,
examen partiel, examen final..)
Créer un moteur de recherche pour
chercher les horaires des cours et des
examens.
Avoir une espace qui présente les
ressources de chaque branche.
Créer une page qui présente les labos.
Créer une page qui présente la
librairie.
Avoir une espace qui présente les diplômés. Créer une page qui présente les
photos de promotions passantes.
Avoir une espace qui présente le corps
administratif et académique.
Créer une page détaillant le corps
administratif.
Créer une page détaillant le corps
académique.
Mise à jour des informations Créer des pages pour la gestion des
informations dans la base de
données.
Donner la permission pour les
responsables pour qu’ils auront accès à
aux informations.
Donner la possibilité de télécharger
les horaires de la part des responsables.
Conserver le même contexte du site présent Utiliser le même menu et la même
page maître.
Respecter les styles prédéfinis
13 | P a g e
3.2 Plan
Figure 5: Plan du projet
4. Conclusion Dans ce chapitre, le cahier de charges est défini. On a défini les besoins et les fonctionnalités qu’il faut les implémenter pour répondre à ces besoins. Dans ce qui suit, nous détaillons les outils utilisés et les étapes de réalisation de ce projet.
14 | P a g e
Chapitre 2:Les Technologies de réalisation
1. Introduction
Après la conception Web, vient la réalisation qui est l'étape de concrétisation technique du projet client. C'est la phase de développement pur, celle où il faut produire le code nécessaire aux besoins du site. C'est à ce moment que les maquettes graphiques sont transformées en pages HTML.
Dans ce chapitre, on découvre ce nouveau monde, le monde Web. C’est quoi Web? C’est quoi une page Web dynamique? Quelles sont les technologies utilisées pour la réalisation
d’une page Web dynamique?
2. Introduction au World Wide Web Le web, C'est le service de consultation de documents sur Internet, le plus connu, le plus récent et aujourd'hui le plus utilisé. C'est le service d'Internet qui a contribué le plus à sa popularité. Le web a été inventé plusieurs années après Internet, mais c'est lui qui a contribué à l'explosion de l'utilisation d'Internet par le grand public, grâce à sa facilité d'emploi. Depuis, le Web est fréquemment confondu avec Internet alors qu'il n'est en réalité qu'un de ses services.
Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des documents (appelés «pages web») grâce à un logiciel appelé. Une page web est ainsi un simple fichier texte écrit dans un langage de description (appelé HTML), permettant de décrire la mise en page du document et d'inclure des éléments graphiques ou bien des liens vers d'autres documents à l'aide de balises.
Au-delà des liens reliant des documents formatés, le web prend tout son sens avec le protocole HTTP permettant de lier des documents hébergés par des ordinateurs distants (appelés serveurs web, par opposition au client que représente le navigateur). Sur Internet les documents sont ainsi repérés par une adresse unique, appelée URL, permettant de localiser une ressource sur n'importe quel serveur du réseau internet.
Qu'est-ce qu'un site web ?
Un site web est un ensemble de fichiers HTML stockés sur un ordinateur connecté en permanence à internet et hébergeant les pages web (serveur web).
15 | P a g e
Un site web est habituellement architecturé autour d'une page centrale, appelée «page d'accueil» et proposant des liens vers un ensemble d'autres pages hébergées sur le même serveur, et parfois des liens dits «externes», c'est-à-dire de pages hébergées par un autre serveur.
3. Des pages statiques vers les pages dynamique
L'explosion de l'Internet, vers 1995, a vu la multiplication des sites dits "cartes de visite". Ces sites se contentaient pour la plupart de transposer au mieux sur le web les présentations classiques, sur papier, de l'entreprise.
Ce type de site, construit directement en langage html, a pour défaut majeur de n'offrir qu'une et une seule présentation, sans aucune possibilité de personnalisation et avec une interactivité limitée au strict minimum. Cette limitation est due à la nature même du html, langage de description des données dans lequel le contenu et sa présentation sont indissociables. C'est pour cela que ces pages sont dites statiques (voir Figure 6). Si l'on veut modifier le design d'un site ainsi réalisé, il faudra changer une à une toutes les pages qui le composent, avec un éditeur html.
Si cette technique peut suffire pour des sites web de petite taille, au contenu permanent ou rarement mis à jour, elle est par contre très peu adaptée pour des sites dont les informations font l'objet de modifications fréquentes ou qui font appel à des processus complexes, comme un catalogue de produits, un journal d'information ou, de manière générale toute application e-business.
Figure 6: la requête d’une page statique
16 | P a g e
3.1 Qu'est-ce qu'une page dynamique
Le principe d'un page dynamique est d'être construit à la demande (à la volée) par le serveur (côté serveur), en fonction de critères spécifiques. La présentation et le contenu affichés peuvent ainsi être personnalisés de manière interactive, en fonction des produits, des internautes, des langues, etc.
On reconnaît facilement un page dynamique grâce à l'URL qui s'affiche dans le navigateur web de l'utilisateur:
page statique: http://www.monsite.com/accueil.htm: affiche la page accueil.htm, stockée telle quelle sur le serveur,
page dynamique: http://www.monsite.com/accueil.aspx?langue=fr: affiche la page accueil.aspx en demandant au serveur d'afficher le contenu de cette page en français.
Alors que les pages statiques font appel au html, langage de description de données, les pages dynamiques sont mises en œuvre grâce à un langage de programmation. Grâce à lui, on pourra disposer d'instructions conditionnelles, de boucles et de fonctions de traitement complexes. Le langage de programmation variera en fonction de la technologie retenue (PHP, ASP, Java, etc.).
Le langage de programmation ne remplace pas le html, mais il en produit. En effet, actuellement, les navigateurs (browser) ne reconnaissent que ce standard pour afficher des pages web.
3.2 Le fonctionnement des pages dynamiques
Pour bien comprendre l'intervention de la programmation, il faut rappeler rapidement le principe de fonctionnement d'un serveur web. Lorsque l'internaute tape l'adresse d'un site dans son browser, celui-ci envoie une requête au serveur qui héberge ce site (voir Figure 7). Le serveur transmet alors la page demandée au browser qui l'affiche.
C'est l'architecture client/serveur : le client, c'est l'ordinateur et le browser de l'internaute, et le serveur … c'est le serveur web.
Le serveur web est un ensemble ordinateur/logiciel paramétré pour pouvoir traiter certains types de pages et notamment celles qui contiennent des instructions de programmation. Il reconnaît ces pages grâce à l'URL qu'il reçoit, effectue les traitements demandés et transmet le résultat au format html au browser de l'internaute.
Cette manière de faire offre deux avantages majeurs:
Tous les traitements sont exécutés sur le serveur, côté serveur, de manière totalement transparente pour l'internaute. Le résultat envoyé étant du html standard, on évite tout problème d'incompatibilité avec le browser, comme c'est
17 | P a g e
parfois le cas avec des programmes exécutés côté client (avec le langage javascript par exemple).
Chaque nouvelle requête reconstruit systématiquement la page demandée, ce qui veut dire que l'information transmise est à jour.
Un site dynamique est plus exigeant pour un serveur Web qu'un site statique. En effet, alors que pour un site statique le serveur se contente d'afficher les pages, pour un site dynamique, il doit effectuer différents traitements et accès à des bases de données. Ces opérations pèsent sur la performance du serveur. Toutefois, l'évolution incessante de la puissance des ordinateurs et des logiciels rend cette problématique finalement sans objet, sauf pour des sites de très grand volume.
Figure 7: la requête d’une page dynamique
3.3 Le Back Office
Un site dynamique est "automatiquement" double: une partie publique vue par les internautes et une zone d'administration privée protégée par mots de passe et gérée par un web master comme le montre la Figure 8.
18 | P a g e
Figure 8: Gestion des pages dynamiques.
4. .NET Si l'on reprend la brève histoire du développement web, on pourrait identifier 3 étapes:
Les sites statiques, développés essentiellement grâce à des outils de mise en page finalement assez proches d'un traitement de texte évolué (comme Dreamweaver ou Frontpage). Beaucoup de métiers liés à la publication classique (le monde de la pré-presse par exemple), se sont diversifiés en mettant en œuvre des sites web.
Les sites dynamiques, développés sur base des technologies de script côté serveur
(ASP, PHP, CFM, JSP, etc). Ces technologies ont été mises au point par des éditeurs connus (Microsoft, Sun) ou issus du monde de l'OpenSource (PHP) pour permettre la mise en œuvre rapide de sites permettant de se connecter à une base de données ou d'offrir de l'interactivité au visiteur.
Les sites dynamiques développés sur base de plate-formes professionnelles proposées par de grands acteurs informatiques (IBM, Microsoft, Oracle, Sun, etc). On peut considérer qu'il s'agit là d'une sorte de réappropriation du Web par les grands acteurs informatiques classiques.
Ce très rapide résumé montre que l'informatique est revenue en force avec la nécessité pour l'entreprise d'intégrer l'e-business au sein de son activité globale, plutôt de le
19 | P a g e
laisser vivre de manière autonome et un peu anarchique à côté de ses activités traditionnelles. Cette nécessité d'intégration et de professionalisme se concrétise à l'apparition de plate-formes intégrées de développement dont deux des plus connues sont:
.NET de Microsoft J2EE de Sun
Dans ce projet, on a travaillé dans l’environnement Microsoft et avec les technologies fournies par son platforme Microsoft .Net.
5. C’est Quoi .Net Framework? En résumé .Net Framework fait une partie du platforme Microsoft.Net et .Net Framework + Système d’exploitation Windows = platforme Microsoft.Net
.NET Framework est un environnement de développement et d’exécution qui permet à différents langages de programmation et de librairies de travailler ensemble en toute transparence (seamlessly) pour créer des applications windows plus facile à développer, gérer, déployer et intégrer avec d’autres systèmes en réseaux . Un kit de composant qui a pour but de faciliter le développement des applications windows, web et mobile.
Figure 9: Fonctionnement du CLI
20 | P a g e
Le framework .NET s'appuie sur la norme Common Language Infrastructure (CLI) qui est
indépendante du langage de programmation utilisé (voir Figure 9). Ainsi tous les langages
compatibles respectant la norme CLI ont accès à toutes les bibliothèques installées dans
l'environnement d'exécution. La pile de composants de la Figure 10 nous montre
l’évolution du .Net Framework et les composants qui sont ajoutés à chaque version.
Figure 10: Piles de composants du .Net Framework
5.1 ASP.NET
ASP.NET est un ensemble de technologies de programmation web créé par Microsoft ASP.NET fait partie de la plateforme Microsoft .NET et est le successeur de la technologie Active Server Pages (ASP).
ASP.net est tout simplement la version .NET de l'ASP. Auparavant les pages ASP étaient des pages HTML comportant du code logique écrit dans une version simplifiée de Visual Basic.
21 | P a g e
Désormais les pages ASPx (.net) sont écrites de manière complètement différente puisqu'elles s'appuient sur le Framework .NET et la CLR.
Tous les langages supportés par .NET peuvent servir à l'écriture de pages ASPx.
Les anciennes pages ASP peuvent continuer d'exister et cohabiter avec les pages ASPX, mais elles ne bénéficient pas des avancées de .NET. Outre les langages disponibles, la plus grosse différence vient du fait que les pages ASP.net sont compilées et sont donc sous contrôle de la CLR (surveillance de code, gestion des ressources, ...) La compilation a lieu lors de la première requête vers la page, d'abord en code MSIL, puis en code machine. Une fois compilées, elles sont mises en cache dans la mémoire du serveur .NET. ce qui garantit de très bonnes performances.
Les pages ASPx bénéficient également de toutes les possibilités offertes par les classes de base
du framework .NET, et aussi de la possibilité d'être déboguée (exécution pas à pas), de faire des
traces, de gérer les exceptions etc ...
5.2 Dynamicité et Base de données(ADO.NET)
L'accès aux bases de données est l'une des fonctions essentielles des pages dynamiques. Comment publier une base de données sur le web? Quels sont les différents types d'accès? Quels sont les grands standards? Pour des applications web et e-business, les bases de données sont très rapidement devenues indispensables. Il est difficilement imaginable aujourd'hui de réaliser un site web d'envergure sans intégrer les capacités de stockage et de manipulation des bases de données. Ainsi, l'une des fonctions essentielles des pages dynamiques est de permettre l'accès aux bases de données afin de publier leur contenu sur le web. L'émergence des sites dynamiques a d'ailleurs fortement relancé le marché des bases de données.
ADO.Net est la nouvelle bibliothèque logicielle d’accès aux données fournie en standard dans le Framework .Net. C’est un ensemble de classes, de structures, de types gérant l’accès à des sources de données. La connexion à une source de données s’effectue par le biais d’un fournisseur géré comme OLE DB.
Il y a en fait deux moyens différents d’accéder aux données. Ils ont tous les deux des qualités et des défauts.
Le premier est l’accès grâce à un datareader. Cet accès est très rapide mais il ne peut que lire les données. La connexion à la base est toujours activée.
Le deuxième est l’accès grâce à un dataAdapter qui charge un dataset. Cet accès est plus lent que le premier mais permet d’ajouter, de modifier, de supprimer et de lire
22 | P a g e
les données. Il permet aussi de travailler en mode déconnecté de la base donc laisse l’accès pour d’autres applications plus rapidement.
Il faut noter qu’ASP.Net 4 offre un ensemble de contrôles “Data” qui facilitent l’accès à la
base de données. Ces contrôles peuvent être configurés directement pour afficher des
informations stockées sans avoir recours à la programmation.
6. CSS
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui permet de gérer la présentation d'une page Web. Le langage CSS est une recommandation du World Wide Web Consortium (W3C), au même titre que HTML ou XML.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices de caractères, les couleurs, les marges et espacements, les bordures, les images de fond, etc.
Le but de CSS est séparer la structure d'un document HTML et sa présentation. En effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les différentes parties d'un document) et la présentation. Mais cela pose quelques problèmes. Avec le couple HTML/CSS, on peut créer des pages web où la structure du document se trouve dans le fichier HTML tandis que la présentation se situe dans un fichier CSS.
Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d'un site internet. Cela facilite ainsi la modification de la présentation d'un site entier. CSS permet aussi de définir des règles différentes pour chaque support d'affichage (un navigateur classique, une télévision, un support mobile, un lecteur braille...). CSS permet aussi d'améliorer l'accessibilité des documents web.
De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. En effet, HTML permet une gestion assez sommaire du style des documents.
7. JavaScript Les technologies XHTML/CSS sont au cœur des documents hypertextes publiés via HTTP sur le web. La séparation forme/contenu peut être stricte et l'usage tend à généraliser l'accessibilité par le respect des spécifications XHTML 1.1 et CSS 2 issues du W3C. La conception de documents interactifs doit aussi intégrer une couche de programmation absente des technologies précédentes. Le langage JavaScript offre cette possibilité. Le JavaScript est souvent utilisé comme un langage de script côté client. Cela signifie que le code JavaScript est écrit dans une page XHTML. Quand un navigateur fait une requête sur
23 | P a g e
une page XHTML avec du JavaScript, le script est envoyé au navigateur qui interprète le code à la différence d'un code PHP, par ex, qui est interprété par le serveur. Le script se situant dans une page XHTML signifie qu'il peut être vu et copié par celui qui consulte la page. Ceci est peut être un souci du point de vue de la sécurité mais permet de comprendre le code d'autrui et de le réutiliser. Attention: JavaScript n'est pas Java... Bien que les noms soient très semblables, le Javascript est principalement un langage de script à utiliser dans des pages XHTML, alors que Java est un vrai langage de programmation qui fait des choses tout à fait différentes de JavaScript. Le JavaScript a été développé par Netscape pour le côté client (dans le navigateur) et pour les scripts côté serveur. À l'origine le langage s’appelait Live Script, mais alors qu'il était sur le point de devenir connu Java était devenu immensément populaire. Au dernier moment Netscape a changé le nom de son langage de Script en "JavaScript". Ceci a été fait purement pour des raisons commerciales. JavaScript comme Java descendent du C et du C++. Tous les deux sont orientés objet (bien que ce soit moins important pour le JavaScript que pour beaucoup d'autres langages) et ils partagent une syntaxe similaire.
8. Conclusion Dans ce chapitre, on a présenté les technologies qu’on a utilisées pour construire nos pages Web. On a vu que la construction d’une page web dynamique nécessite l’intervention des technologies côté serveur permettant la gestion, la mise en jour et la requête d’une base de données qui présente le banque d’informations pour ce type de pages. Ces technologies permettent aussi la transformation de la page constituée par plusieurs langages en une page html pour qu’elle puisse être publiée par le navigateur.
Dans ce qui suit, nous présentons en détails les étapes de réalisation.
24 | P a g e
Chapitre 3:Les outils de travail
1. Introduction
Dans ce chapitre, on va introduire avec plus de détails les outils qu’on a utilisés, les fichiers et la manière d’implémentation de toute fonctionnalité voulue. Une vue plus proche sur les applications web avec ASP.NET et les facilités qu’elle fournit. Passant des idées conceptuelles, dans ce chapitre, une explication plus technique. Ainsi, Il est important de mentionner que Visual Studio et SQL server font partie de la platforme Microsoft .NET qu’on a mentionnée dans le chapitre précédent.
2. Asp.Net avec VB dans Visual Studio 2010
Visual Studio est un ensemble complet d'outils de développement permettant de générer des applications Web ASP.NET. Visual Basic est l’une des langages qui utilise cet environnement de développement intégré (IDE), qui permet le partage d'outils et facilite la création de solutions à plusieurs langages. Par ailleurs, ce langage utilise les fonctionnalités du .NET Framework, qui fournit un accès à des technologies clés simplifiant le développement d'applications Web ASP.
3. Les caractéristiques et le fonctionnement de la page
ASP.Net
Les pages ASPx peuvent être divisées en deux parties: d'une part le fichier qui contient le code HTML (présentation) et d'autre part un fichier qui contient le code logique écrit dans le langage de son choix (.aspx.cs pour C#, .aspx.vb pour VB.net, ...). Ce code logique peut faire appel aussi bien à des classes de base qu'à n'importe quelle classe développée avec la plate-forme .NET. Un site Web écrit en ASPx peut donc être considéré comme une véritable application. L'autre nouveauté est l'intégration des contrôles côté serveur (capable de déclencher des événements sur le serveur). On peut ainsi bénéficier de composants comme les TreeView, ListBox, Calendar, DataGrid etc... Ces composants étaient auparavant réservés aux applications "classiques" développées en VB ou VC++. Le code HMTL pour afficher ces contrôles dans le navigateur du client est généré automatiquement par le framework en fonction du navigateur. Il assure ainsi la compatibilité et le fonctionnement de ces contrôles
25 | P a g e
avec tous les navigateurs compatible HTML 3.2 (Internet Explorer 5 et + / DHTML, Netscape Navigator / Javascript, ...).
Ces contrôles sont intégrés dans ce qu'on appelle des Web Forms et il en existe 45. Ils sont déclarés soit sous forme de balises HMTL, soit sous la forme de balises XML avec l'attribut runat=server.
Exemples :
<input type="text" id="text2" runat="server" /> <asp:calendar id="monCal" runat="server" />
Les pages ASPx bénéficient également d'ADO.net : la couche de liaison de données du Framework. Cela lui permet d'accéder aux données de manière très simple et très rapide. Il est possible de lire et mettre à jour une base de données mais aussi d'en charger une partie en mémoire et d'en faire des mises à jour en direct sur la page. Les données rapatriées sont toujours au format XML et peuvent être lues soit en XML soit dans un recordset.
Les pages ASPx sont considérées comme des objets et à ce titre elles ont des méthodes (validate(), Load(), render()) et des propriétés ( ID, isPostBack, errorpage). Une exécution d’une page ASP.net est montre dans la Figure 11.
Figure 11: Exécution d'une page ASP.net
26 | P a g e
4. Les éléments d’un projet Web Avec Asp.Net
4.1 Les Pages Web Forms
Les pages Web Forms permettent de créer des pages web programmables qui constitueront l'interface utilisateur d’une application web. Une page Web Forms affiche dans n'importe quel navigateur ou périphérique client les informations destinées à l'utilisateur. Elle implémente la logique de l'application en utilisant le code serveur. La sortie des pages Web Forms peut contenir presque tous les types de langages compatibles HTTP, notamment HTML, XML, WML et ECMAScript (JScript, JavaScript).
Composants des Web Forms
Dans les pages Web Forms, la programmation de l'interface utilisateur présente deux aspects : le composant visuel et la logique. L'élément visuel est désigné par le terme page Web Forms. Une page est un fichier contenant du HTML statique, des contrôles serveur ASP.NET, ou une association des deux. Une page Web Forms sert de conteneur pour le texte statique et les contrôles. Le concepteur Web Forms Visual Studio utilisé avec les contrôles serveur ASP.NET permet de concevoir le formulaire. Le code crée et son interaction avec le formulaire constituent la logique des pages Web Forms. La logique de programmation réside dans un fichier distinct de celui de l'interface utilisateur. Il s'agit du fichier « code-behind » dont l'extension est « .aspx.vb » ou « .aspx.cs ». La logique écrite dans le fichier code-behind peut être écrite dans Visual Basic ou Visual C#.
Structure des fichiers Web Forms
Les fichiers de classe code-behind de toutes les pages Web Forms d'un projet sont compilés dans le projet fichier de la bibliothèque de liaisons dynamiques (.dll). Le fichier de page .aspx est également compilé, mais différemment. Lorsqu'un utilisateur recherche la page .aspx pour la première fois, ASP.NET génère automatiquement un fichier de classe .NET qui représente la page et le compile dans un deuxième fichier .dll. La classe générée pour la page .aspx hérite de la classe code-behind qui a été compilée dans le fichier .dll du projet.
27 | P a g e
Lorsqu'un utilisateur demande l'URL de la page Web, les fichiers .dll s'exécutent sur le serveur et produisent de façon dynamique la sortie HTML de votre page
4.2 La Page Maître
Les pages maîtres se composent réellement de deux parties, la page maître elle-même et une ou plusieurs pages de contenu. Une page maître est un fichier ASP.NET possédant l'extension .master avec une disposition prédéfinie pouvant inclure du texte statique, des éléments HTML et des contrôles serveur. La page maître est identifiée par une directive @ Master spéciale qui remplace la directive@ Page utilisée pour les pages .aspx ordinaires.
Espaces réservés de contenu remplaçables
Outre le texte statique et les contrôles qui apparaissent sur toutes les pages, la page maître inclut également un ou plusieurs contrôles ContentPlaceHolder. Ces contrôles réservés définissent des régions où le contenu remplaçable apparaîtra. Ensuite, le contenu remplaçable est défini dans les pages de contenu.
4.3 Les Contrôles
On distingue deux genres des contrôles:
4.3.1 Contrôles utilisateur
Un contrôle Web ASP.NET ressemble à une page ASP.NET complète (fichier .aspx), avec à la fois une page d'interface utilisateur et du code. Un contrôle utilisateur se crée de façon très semblable à une page ASP.NET. On lui ajoute par la suite le balisage et les contrôles enfants nécessaires. Tout comme une page, un contrôle utilisateur peut inclure du code servant à manipuler son contenu, et notamment à effectuer des tâches telles que des liaisons de données. Un contrôle utilisateur présente les différences suivantes par rapport à une page Web ASP.NET :
L'extension du nom de fichier du contrôle utilisateur est .ascx. Au lieu d'une directive @ Page, le contrôle utilisateur contient une
directive @ Control qui définit la configuration et d'autres propriétés. Les contrôles utilisateur ne peuvent pas s'exécuter comme des fichiers autonomes.
On doit au lieu de cela les ajouter à des pages ASP.NET, comme on le ferait pour n'importe quel contrôle.
28 | P a g e
Le contrôle utilisateur ne contient pas d'élément html body ou form. Ces éléments doivent se trouver dans la page d'hébergement.
On peut utiliser sur un contrôle utilisateur les mêmes éléments HTML (sauf les éléments html, body ou form) et les mêmes contrôles Web que dans une page Web ASP.NET.
4.3.2 Contrôles serveur
Les contrôles serveur Web ASP.NET sont des objets sur des pages Web ASP.NET qui s'exécutent lorsque la page est demandée et qui restituent le balisage dans le navigateur. De nombreux contrôles serveur Web sont semblables à des éléments HTML familiers, tels que les boutons et les zones de texte. D'autres contrôles ont un comportement complexe ; c'est le cas notamment des contrôles ”Calendar ” et des contrôles qui permettent la connexion à des sources de données et d'afficher des données.
4.4 Les fichiers essentiels
4.4.1 Web.config
Les données de configuration ASP.NET sont stockées dans des fichiers texte XML tous nommés Web.config. Ces fichiers permettent de modifier facilement des données de configuration avant, pendant ou après le déploiement des applications sur le serveur.
Les fichiers de configuration ASP.NET conservent les paramètres de configuration de l'application séparés du code de l'application. La séparation des données de configuration du code simplifie l'association de paramètres aux applications, la modification éventuelle de paramètres après le déploiement d'une application et l'extension du schéma de configuration.
On a utilisé essentiellement ce fichier pour stocker la chaîne de connexion à la base de données SQL. Une fois cette chaîne est configurée dans web.config, on peut utiliser son nom partout sans être obligé de la définir de nouveau.
La configuration d’une connexion à une base de données sera faite en définissant les attributs suivants :
name c’est le nom utilisé pour référencer la chaîne de connexion. connectionString c’est la chaîne de connexion requise par la base de données à
laquelle on se connecte, en définissant le pilote, le nom de serveur et les informations d'authentification appropriées.
29 | P a g e
providerName c’est la valeur « System.Data.SqlClient» qui spécifie qu'ASP.NET doit utiliser le fournisseur System.Data.SqlClient ADO.NET pour établir une connexion avec cette chaîne de connexion.
4.4.2 Fichier .css (feuille de style)
Les feuilles de style permettent de spécifier des styles de mise en forme pour les éléments HTML. Une fois une feuille est liée à une page, les éléments de cette page prennent la forme définie dans cette feuille de style. Généralement, dans un projet web les feuilles de style seront liées à la page Maître. Ainsi toute page associée à cette page maître hérite les mêmes définitions des formes.
4.4.3 App-code
Ce type de fichiers est utilisé pour le stockage du code source pour qu'il soit compilé automatiquement au moment d'exécution. L'assembly résultant est accessible à tout autre code de l'application Web. C’est le fichier dans lequel on crée nos classes. Ces classes une fois définies, on peut utiliser leurs méthodes dans toutes les pages de notre projet. Et c’est l’avantage la plus importante que nous offre la révolution du langage orientée objet.
4.4.4 Fichier .js
Ce fichier va contenir les fonctions, définitions et tous les éléments javascript nécessaires au fichier HTML auquel ce fichier est rattaché. Il faut alors inclure le fichier .js comme suit: <script language="javascript" src="chemin/fichier.js"> </script> Soit dans la page elle même ou dans l’entête de la page maître ou bien à l’aide du contrôle
serveur <ScriptManager>
5. SQL Server 2008 Dans ce projet, on s’est servi de cette technologie, qui fait partie de la platforme .Net, pour créer notre base de données formée des tables et des procédures stockées:
Une table est constituée de lignes et de colonnes. Chaque colonne correspond à un champ de données. Chaque ligne correspond à un enregistrement. Tous les enregistrements possèdent donc les mêmes champs.
30 | P a g e
Une procédure stockée est une suite d'instructions qui vont avoir des effets sur la base de données ou qui renvoient une ou plusieurs valeurs.
Les procédures stockées sous SQL Server peuvent prendre en paramètre et/ou retourner des entiers, des chaînes de caractère, des dates, des curseurs, des tables, des tables virtuelles et tout autre type défini dans SQL Server par défaut ou par les utilisateurs.
6. Conclusion Dans ce chapitre, on a vu plus techniquement les outils utilisés dans la réalisation de notre projet. Dans ce qui suit, nous présentons les aspects pratiques et comment on a travaillé? Et quelles sont les étapes de réalisation effectives?
31 | P a g e
Chapitre 4:les étapes de réalisation
1. Introduction La réalisation du projet concerne la création des pages web et des éléments graphiques. La création des pages web consiste à créer des fichiers en utilisant les différents langages de développement : Html, Vb, Asp, Javascript. Après avoir installé le serveur SQL 2008, visual studio 2010 et le .Net Framework 4:
Il faut déclencher un nouveau site web à l’aide de visual studio 2010:
Figure 12: Création d’un site Web
Ensuite, on choisit içi le langage qu’on va utiliser Visual Basic:
Figure 13: Choix du type du site Web
Il faut aussi créer la base de données dans le serveur SQL 2008:
32 | P a g e
Figure 14: Création de la base de données.
Dans ce chapitre, les étapes de construction seront expliquées avec détails et des figures qui montrent clairement le travail.
2. Construction de la base de données Notre base de données est constituée de cinq tables :
Une table pour les infos CREATE TABLE [dbo].[News](
/*les colonnes et leurs types
[Id] [int] IDENTITY(1,1) NOT NULL,
[Details] [text] NULL,
[Title] [nvarchar](150) NOT NULL,
[Date] [datetime] NOT NULL,
[CategoryId] [int] NULL,
[EditorId] [int] NULL,
[Viewed] [int] NULL,
[Show] [bit] NOT NULL,
[Path] [nvarchar](500) NULL,
[Description] [nvarchar](1000) NULL,
[Language] [nchar](10) NULL,
[path1] [nvarchar](500) NULL,
[BranchId] [int] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
33 | P a g e
Une table pour les horaires CREATE TABLE [dbo].[AcademicSchedules](
/*les colonnes avec leurs types
[Id] [int] IDENTITY(1,1) NOT NULL,
[BranchId] [int] NOT NULL,
[CategoryId] [int] NOT NULL,/* ce champ prend 3 valeurs( 1 pour le
programme de cours [DepartmentName] [nvarchar](50) NOT NULL,
[Major] [nvarchar](50) NOT NULL,
[SemesterId] [int] NOT NULL,
[AcademicYear] [int] NOT NULL,
[FileName] [nvarchar](max) NOT NULL,
/* le clé primaire permettant de n’avoir pas deux enregistrements avec les
mêmes valeurs des colonnes qui le constitue CONSTRAINT [PK_BranchIdMajorSemester] PRIMARY KEY NONCLUSTERED
(
[BranchId] ASC,
[Major] ASC,
[SemesterId] ASC,
[CategoryId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
Une table pour les photos des diplômés
CREATE TABLE [dbo].[GraduatesPhotos](
/*les colonnes avec leurs types
[Id] [int] IDENTITY(1,1) NOT NULL,
[Year] [int] NOT NULL,
[Title] [nvarchar](50) NOT NULL,
[path] [nvarchar](max) NOT NULL,
[BranchId] [int] NOT NULL,
/* le clé primaire permettant de n’avoir pas deux enregistrements avec les
mêmes valeurs des colonnes qui le constitue CONSTRAINT [PK_YearBranchID] PRIMARY KEY NONCLUSTERED
(
[Year] ASC,
[BranchId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO Une table pour les labos
CREATE TABLE [dbo].[Labs](
/*les colonnes avec leurs types
[Id] [int] IDENTITY(1,1) NOT NULL,
[LabId] [int] NOT NULL,
[LabName] [nvarchar](50) NOT NULL,
[BranchId] [int] NOT NULL,
34 | P a g e
[DepartmentName] [nvarchar](50) NOT NULL,
[RoomId] [int] NOT NULL,
[AssistantFirstName] [nvarchar](50) NOT NULL,
[AssistantName] [nvarchar](50) NOT NULL,
[Description] [text] NULL,
[PhotoPath] [nvarchar](max) NOT NULL,
[FilePath] [nvarchar](max) NOT NULL,
/* le clé primaire permettant de n’avoir pas deux enregistrements avec les
mêmes valeurs des colonnes qui le constitue CONSTRAINT [PK_LabIdBranchIdDepartment] PRIMARY KEY NONCLUSTERED
(
[LabId] ASC,
[BranchId] ASC,
[DepartmentName] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
Une table pour le calendrier
CREATE TABLE [dbo].[AcademicCalendar](
/*les colonnes avec leurs types
[Id] [int] IDENTITY(1,1) NOT NULL,
[Date] [date] NOT NULL,
[Event] [text] NOT NULL,
[BranchId] [int] NOT NULL,
[CategoryId] [int] NOT NULL/* ce champs prend les valeurs(1 pour le
début d’un semestre,2 pour les examens, 3 ailleurs)
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
Figure 15: La base de données lufe_ola
Ajouter à cela les programmes “Stored Procedures”. Ce sont des procédures qu’on les appelle dans nos pages web pour faire des requêtes de la base de données,
modifier/supprimer, ou insérer des nouvelles enregistrements dans les tables.
35 | P a g e
Figure 16: Les procédures stockées
3. Définition des classes Pour chaque table, on construit une classe qui sera composée des méthodes qui peuvent être utilisées directement toutefois qu’une instance de ce classe est initialisée. Ces classes sont définies dans un fichier nommé “App-Code”. Chaque classe sera constituée des quatre méthodes essentielles :
“Select” : pour faire une requête. “Insert” : pour faire l’insertion d’un enregistrement . “Update ”: pour la mise à jour des enregistrements. “Delete” : pour supprimer un enregistrement.
Figure 17: Les classes
36 | P a g e
4. Construction des pages Une fois les classes sont définies et la base de données est construite, on commence donc par la construction des pages.
4.1 Page Maître
Dans notre cas, on crée deux pages Maîtres:
Une page Maître qui sera associée aux pages où une session utilisateur n’est pas ouverte
Une autre page Maître qui sera associée aux pages où une session utilisateur sera ouverte.
La différence entre ces deux pages dérive seulement de la zone “LoginContent”. On a deux styles définies pour cette dans les feuilles Css “logincontent” et “logoutcontent” . En plus dans le code Behind du contrôle utilisateur “uclogin”, un test sera fait pour savoir s’il
y’a une session ouverte avec un utilisateur ou non, ainsi le contenu du contrôle sera définie selon
le résultat de ce test.
Figure 18: La page maître
Noter que les formes des différents éléments sont prédéfinies dans les feuilles Css du site présent.
37 | P a g e
Après la construction de la page Maître, on crée les contrôles utilisateur:
“LoginUserControl” : Ce contrôle présente une forme pour le “Login” ou “Logout” si une session est déjà ouverte ou non.
“MenuUserControl” : Ce contrôle présente toutes les rubriques et sous-rubriques du site. “FooterUserControl” : Ce contrôle présente le plan du site.
Après l’insertion de ces contrôles dans une page, elle apparaît comme suit:
Figure 19: La page de base
4.2 Les Pages Web
Après avoir construire les pages Maîtres, on commence à construire les pages de contenu Partant d’une page d’accueil, on a sept pages héritant la même page maître. Mais, un problème se pose: Une fois on est dans une page, comment on peut passer à une autre page sans
être obligé de savoir les Url de toutes les pages.
Pour résoudre ce problème, il faut toujours trouver une simple méthode de navigation entre les
pages. Pour cela, on a construit un sous menu formé des hyperliens aux pages construites.
Dans chaque page, ce sous menu qui a la forme et la position définies dans la feuille des styles, va apparaître à gauche permettant le passage à une autre page juste en cliquant son
nom.
38 | P a g e
Il faut noter encore que toutes les pages dans leur “code Behind” ont cette méthode: Protected Sub Page_PreInit(sender As Object, e As System.EventArgs) Handles Me.PreInit If Session("user") Is Nothing Then Me.MasterPageFile = "~/olabranchespr/MasterPageBranchs.master" Else Me.MasterPageFile = "~/olabranchespr/MasterPageBranchsLogout.master" End If End Sub
Cela signifie que quand une session n’est pas ouverte par un des utilisateurs, la page est associée à la page maître “MasterPageBranchs”.
Dans le cas contraire, la page sera associée à la page maître “MasterPageBranchsLogout”.
Figure 20: La forme générale des pages
39 | P a g e
4.2.1 “Home”
Cette page est la page d’accueil. Elle est constituée comme suit:
Dans la partie gauche:
Le sous menu.
Ensuite, un calendrier servant à afficher d’une manière vive les évènements dans la
table “AcademicCalendar” de la base de données.
Les jours du mois affiché présentant des évènements dans la table seront colorés
en rose.
Si leurs évènements sont des examens ou le début d’un semestre ces jours seront
selectables et à la clique on sera dans la page “Academic Schedules” qui nous
permet de chercher les programmes des cours et des examens.
Dans la partie droite:
Un “slider” qui affiche des photos de chaque branche d’une manière attractive et
vivante.
À la suite, une introduction sur chaque branche.
Enfin, on a trois infos qui seront tirées dynamiquement de la table “News” de la
base de données.
Figure 21: Page “Home”
40 | P a g e
4.2.2 “News”
Cette page comme son nom l’indique, c’est une page d’infos. Ces infos seront tirées dynamiquement de la base de données à l’aide du contrôle serveur “Gridview” qui permet la configuration d’une SQL Data Source dans la page ASPx.
La mise en page est comme suit:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
Une liste d’infos formée à l’aide d’une “Gridview” caractérisée par un
“ItemTemplate” composé par:
Un hyperlien: à l’aide de ce contrôle serveur qui prend comme le titre de l’info recordé dans la table news. Ainsi, en cliquant sur ce titre on sera dirigé à une page “NewsDetails”. Dans la requête de cette page, sera envoyé l’”Id” de cet info permettant de l’afficher seul en détails dans une nouvelle page.
Un bouton image: Ce contrôle serveur sera chargé par une image de
l’info dont la location est registrée dans la table “News” et en cliquant sur
cette image on sera encore dirigé à la même page “NewsDetails”
mentionnée au dessus. Une étiquette: La description de l’info sera affichée par ce contrôle.
Cette liste sera générée dynamiquement. Selon le nombre d’enregistrements dans la table. Mais on limite par dix le nombre des infos qui seront affichées dans cette page. À l’aide de la propriété <PagerSettings> du “Gridview” On peut réserver plusieurs pages et passer d’une page à l’autre par des boutons “prev” et “suiv”.
41 | P a g e
Figure 22: Page “News”
4.2.3 “Academic Staff”
Cette page représente l’équipe académique, elle est construite comme suit:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
Les noms des enseignants sont représentés d’une manière moderne à l’aide d’un contrôle de la librairie “AjaxControlToolkit”. Ce contrôle utilise l’effet d’accordion verticalement pour l’affichage. On a trois types d’enseignants:
Les enseignants permanents. Les enseignants contractuels à plein temps. Les enseignants vacataires.
Les noms seront regroupés dans une table qui sera affichée quand on clique sur
le titre qui le représente. Ainsi chaque nom est un hyperlien à une page spéciale
pour chaque enseignant.
42 | P a g e
Figure 23: Page “Academic Staff”
4.2.4 “Administratif Staff”
Cette page affiche d’une manière vive et moderne les informations relatives au cadre administratif de chaque branche
On a utilisé l’effet accordion, mais cette fois verticalement et horizontalement à l’aide des “javascripts”. Cette page est construite comme suit:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
On a cinq colonnes pour:
Le département électrique. Le département civil. Le département mécanique. Le tronc commun.
Et chaque colonne est formée de:
Une image.
Une ligne représentant les informations (nom, mail, téléphone..)
personnelles du directeur.
Une ligne représentant les informations (nom, mail, téléphone..)
personnelles du secrétaire.
Une ligne représentant les informations relatives aux employés.
43 | P a g e
Figure 24: Page “Administratif Staff”
4.2.5 “Academic Schedules”
Cette page donne la possibilité aux étudiants de voir les programmes des cours et des examens. Elle est construite comme suit:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
Cinq étiquettes et cinq “DropDownlist” pour:
La catégorie. Le nom du département. L’année académique. Le semestre. La spécialité.
Un bouton: Ce contrôle serveur, une fois cliquée cause un “postback “ de la page
permettant l’envoi des informations au serveur. Ces informations sont passées aux
méthodes de la classe “page” qui par leur rôle font appel aux méthodes définies
dans la classe “AcademicSchedules” permettant ainsi la requête du programme
voulu de la base de données.
Figure 25: Page “Academic Schedules”
44 | P a g e
4.2.6 “Ressources”
Cette page a pour but d’exposer les laboratoires de chaque branche. Elle est construite comme suit:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
Un “slider” avec quatre panneaux. Chaque panneau représente les laboratoires d’un département à l’aide d’un “repeater”: un contrôle qui permet, en configurant une “SQL Data Source”, d’afficher selon un modèle défini par <ItemTemplate> (une propriété du “repeater”) des informations de la base de données. Ce “slider” utilise des “javascripts” pour la transition d’une manière flexible d’un panneau à un autre.
Figure 26: Page “Ressources”
4.2.7 “Library”
Cette page a pour but de présenter la librairie et il’ y a possibilité de la développer dans le futur. Mais maintenant, elle est formée comme suit :
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
Un “slider” affichant des photos de la librairie. À la suite, un texte descriptif de la librairie.
45 | P a g e
Figure 27: Page “Library”
4.2.8 “Our Graduates”
Cette page est juste une galerie de photos, mais d’une manière attractive et moderne. Elle est constituée de la manière suivante:
Dans la partie gauche:
Le sous menu.
Dans la partie droite:
On a utilisé, une nouvelle façon pour présenter les photos. Une vague de photos. Cette vague est remplie dynamiquement car chaque photo est un contrôle utilisateur qui peut être implémenté et rempli par une fonction dans le “code behind”. Chaque photo a un titre et une location dans la base de données. En plus, en cliquant sur l’une des petites photos elle s’agrandit et on peut avec un “scroller” de passer par toutes les photos. Tout cela est fait à l’aide des fonctions “javascripts” côté client.
Figure 28: Page “Our Graduates”
46 | P a g e
4.3 Les Pages de gestion
Ayant fini les pages qui seront vues par le public, c’est le temps de construire les pages de gestion. La base de données doit être toujours mise en jour. Pour cela, il est nécessaire de faire des interfaces graphiques facilitant l’accès à cette base et de donner des gens particuliers le droit d’insérer, de modifier/supprimer ou mettre à jour les informations dans la base de données. Pour chaque table construite, on a quatre pages de gestion:
Une page pour l’insertion des données dans la table. Une page pour la modification des enregistrements dans la table. Une page pour supprimer un enregistrement de la table. Une page pour afficher le contenu de la table.
Vu qu’on a quatre pages pour quatre tables, c’est à dire seize pages. On ne va pas les détailler toutes. On va se contenter de présenter le concept de construction de ces pages.
4.3.1 La page “Insert”
Cette page sera construite de sorte à permettre aux responsables, ayant le droit d’accès, d’insérer des informations dans les tables. Donc cette page va être formée des contrôles. Une fois les choix sont connus, on utilise des “DropDownList” qui sont remplies dynamiquement de la base de données ou statiquement. Mais, s’il ya des informations comme un titre, un nom, une description.. qui vont être insérer, on utilise des “TextBox”. Enfin, un bouton ”Insert” et une étiquette “Result”. En cliquant le bouton, la méthode qui gère cet évènement va appeler la méthode “insert” définie dans chaque classe. Mais, il faut savoir qu’il faut prendre conscience et prévoir des erreurs dans les informations insérées donc une sorte de validation des informations doit être assurée dans le code. Pour cela, toute fois qu’un enregistrement est présent déjà dans la table ou les informations d’un enregistrement sont incomplètes, un message convenable doit être affichée par l’étiquette “result”.
4.3.2 La page “show”
Cette page est formée essentiellement d’un “Gridview” qui, par une configuration d’une SQL Data Source, affiche les enregistrements d’une table. On ajoute deux colonnes à celles présentes dans la table de données: une pour un hyperlien qui nous dirige vers la page “Update” et une autre pour un hyperlien vers la page “Delete”. Ainsi, ces deux colonnes se basent sur l’envoi, dans les requêtes des pages, du numéro “Id” de la ligne dans la table
47 | P a g e
4.3.3 La page “Update”
La composition de cette page est assimilable à celle de la page “Insert” avec une différence que la requête de cette page contenant l’”Id” de la ligne qu’on veut la modifier nous permet de la chercher et d’afficher les anciennes informations. Donc, au lieu de remplir toutes les informations de nouveau, on change seulement les informations qui ont été modifiées. Enfin, un bouton “Update” et une étiquette “Result” ayant les mêmes rôles que dans la page “Insert”. Sauf que la méthode qui gère l’évènement de la clique appelle la méthode “Update” de la classe correspondante.
4.4.4 La page “Delete”
Cette page a pour but de confirmer cette action. Elle est formée de deux boutons: “Yes” ou “No”. Si on clique “Yes”, l’enregistrement dont le numéro est envoyé dans la requête de la page sera supprimé en appelant la méthode “Delete” de la classe correspondante. Et si on clique “No”, on sera redirigé vers la page “Show”.
5. Conclusion
Dans ce chapitre, on a vu les étapes de réalisation en détails. Vu le volume énorme du code, on ne peut pas l’inclure dans le rapport. Il nous suffit de présenter la démarche détaillée du
travail.
Ce chapitre a montré la diversité des langages et des techniques utilisées dans une simple page web et combien il est nécessaire d’avoir idée de toutes les types de fichiers, des propriétés des pages et des contrôles, de la langage SQL, de la programmation en VB, des technologies côté client (css, javascript..) pour pouvoir présenter les informations d’une manière attractive et vivante.
48 | P a g e
Conclusion générale On retiendra de ce projet qu’une étude de faisabilité est indispensable avant le développement d’un site Internet. En effet, la création d’un site Internet n’est pas une activité à prendre à la légère, elle mérite d’être suivie et encadrée. Les quatre mois passés à travailler, m’ont permis de réaliser que le projet d’un site Internet est la somme de plusieurs actions (ou étapes) planifiées et dépendantes les unes des autres. Toutes les étapes de ce projet m’ont permis d’enrichir mon expérience. On retiendra également qu’un projet de site Internet demande une bonne organisation et une cohérence entre les différents acteurs du projet. Les étapes du projet sont presque toutes dépendantes les unes des autres. Avant de passer à l’étape suivante, il faut, avant tout, valider l’étape précédente. Ce qui consomme du temps pour un projet est de revenir sur une étape après validation. Il est donc important de faire valider chaque étape du projet lors des séances de travail et en présence de tous les membres du groupe de travail. Toutefois cela ne doit pas empêcher les acteurs du projet de faire preuve d’ouverture d’esprit. Pour la conduite d’un projet web, comme pour tous les autres projets, on est souvent obligé de faire des changements de dernière minute. La modification des choix initiaux peut intervenir à n’importe quel moment du projet et peut influencer les délais. Pour conclure, il est important de préciser que la méthode proposée dans ce mémoire est le fruit d’une expérience durant laquelle j’ai moi-même eu l’occasion d’apprendre énormément. Le but est de partager cette expérience en espérant qu’elle pourra inspirer les personnes qui souhaitent s’informer sur la conception de sites Internet.
49 | P a g e
Bibliographie
[1] Site: http://www-igm.univ-mlv.fr/~dr/XPOSE2002/Tedeschi/ [2] Site: http://asp.developpez.com/cours/ [3] Site: Wikipédia(l’encyclopédie en ligne): http://www.wikipedia.org/ [4] Site: MSDN: http://msdn.microsoft.com/fr-FR/ [5] Livre: .NET par Dick Lantin-édition © Groupe Eyrolles, 2003 [6] Livre: Premiers pas en CSS et HTML Guide pour les débutants. F. DRAILLARD,
Eyrolles, 2006. [7] Livre: JavaScript by Example, Ellie Quigley, Prentice Hall, 2003. [8] Livre: Professional ADO.NET 2, Wiley Publishing, Inc, 2006.
