Logiciels et technologies de dveloppement des sites support pour les affaires lectroniques

1. Catgories de logiciels de cration de pages/sites Web 2. Cration de sites Web avec Expression Web 2/3/4
Linterface EW Oprations niveau de site Web

Ouvrir un site existant Crer un site nouveau Oprations sur les pages statiques et les modles Web dynamiques Oprations sur les feuilles de style en cascade Oprations sur les pages matre et les pages dynamiques

Oprations niveau de page Web

2. Operations sur les pages matre et les pages dynamiques

Antrieurement on a prsent la cration ou personnalisation de pages statiques (*.htm), usuellement bases sur des modles Web dynamiques (master.dwt). Les pages statiques sont caractrises par le fait que leur contenu est transmis intgralement au navigateur des que leur adresse est tape. Comme diffrence essentielle, les pages dynamiques sont prpares sur demande, en joignant: un contenu partag, qui est une page matre (*.master); un contenu particulier qui est une page de contenu (*.aspx). Pour grer ces pages, EW utilise la technologie ASP.NET. Le principe des pages matres est semblable celui des modles Web dynamique: une page modle contient des lments communs, tandis que certaines zones sont dclares modifiables. Toutefois, en pratique, le contenu du modle Web dynamique est copi lintrieur de chacune des pages lies. Un changement au modle est transfr dans les pages lies quil faut ensuite publier. Par contre, une modification dans une page matre nentraine que la republication de celle-ci, car cest au moment o le visiteur demande ladresse de la page de contenu que celle-ci est fusionne avec la page matre.

Pour mieux utiliser ASP.NET, EW propose la section correspondante dans le volet Bote outils, contenant chacun des contrles que nous pouvons utiliser dans les pages Web, diviss en sept groupes: Standard: contrles ASP.NET standard comme les boutons radio, les contrles dimage, les espaces rservs et les autres contrles couramment ajouts aux pages Web. Donnes: contrles permettant de se connecter aisment aux sources de donnes et dinsrer des donnes dans une page Web que les contrles peuvent rcuprer partir de la source de donnes. Validation: contrles conus pour raliser des oprations de validation sur les formulaires ASP.NET. Navigation: contrles conus pour crer des systmes de navigation sans avoir crire de code. Connexion: contrles conus pour implmenter linterface utilisateur pour les systmes dauthentification dans un site ASP.NET. Composant WebPart: contrles pour crer des sites permettant aux utilisateurs finaux de modifier le contenu, lapparence et le comportement des pages Web directement depuis un navigateur. AJAX (Asynchronous JavaScript + XML): contrles pour les mises jour asynchrones partielles de page permettant dviter leffet de ractualisation complte de la page.

Un problme important pour les pages dynamiques est la vrification de leur manire de fonctionner pendant le processus de dveloppement du site. Gnralement, le concepteur peut choisir entre trois manires de travail: utiliser le serveur de dveloppement ASP.NET, install avec Expression Web; utiliser un serveur Web sur lordinateur local et afficher les pages en les parcourant avec cette installation; publier les pages du site sur un serveur Web externe pour pouvoir les observer. La premire des solutions est utilisable pour le site orient disc (local), tandis que les deux autres peuvent tre utiliss sur un site orient serveur, donc aprs sa publication. Antrieurement nous avons prsent des lments spcifiques au premires deux manires de travail: comment installer le serveur de dveloppement ASP.NET associ a EW; comment publier le site sur un serveur Web local, dont ladresse est localhost. On considre dans ce contexte seulement ces deux approches.

Pour utiliser la technologie ASP.NET, le serveur Web doit supporter ASP.NET 2.0 (ou ultrieur). En vue de tester les pages Web localement, pour les sites orients disc, nous devons avoir install auparavant Microsoft.NET Framework 2.0 (ou ultrieur), tel que suggr sur le site de tlchargement de Microsoft pour le logiciel Expression Web. En cas de doute, on peut vrifier sa prsence. Ainsi, sous Windows XP, on peut utiliser le menu Dmarrer| Panneau de configuration| Ajouter ou supprimer des programmes (Start| Control Pannel|Add or Remove Programs). La liste des logiciels installs devrait comprendre Microsoft.NET Framework 2.0. Dans le cas de Windows Vista, Microsoft.NET Framework 3.0 est dj install. Ensuite, pour que laperu dans un navigateur affiche correctement les pages fusionnes, il faut ouvrir le menu Site | Paramtres du site et dans longlet Aperu, activer loption Aperu laide de lURL du site Web et cocher Utiliser le serveur de dveloppement Microsoft Expression, soit Uniquement pour les pages Web PHP et

ASP.NET (cest--dire les pages dynamiques), soit Pour toutes les pages Web:

Les tapes principales raliser pour prparer les pages ASP.NET sont:
1. Crer une page matre: a. Comme page nouvelle b. A partir du modle Web dynamique 2. Ajouter les lments communes et une feuille de style; 3. Dfinir les espaces rservs de contenu ASP.NET; 4. Crer une nouvelle page au format ASPX; 5. Lier cette page de contenu avec la page matre; 6. Ajouter le contenu spcifique la page.

1.a. Crer une page matre comme page nouvelle

La page matre dfinit la structure, lapparence et le contenu rpter dans les pages de contenu lies. Pour crer une telle page on utilise la commande Fichier| Nouveau| Page:

Dans le panneau de gauche il faut choisir entre Gnral ou ASP.NET et puis, dans le panneau de droite, Page matre. Dans la zone Options, on doit slectionner un langage de programmation (C# ou VB), lequel serra le langage de script utilis dans les pages dynamiques. Ensuite il faut enregistrer la page matre, en utilisant le menu Fichier | Enregistrer sous, dont la fentre de dialogue est:

Pour le site Lessive Services on choisi lessive comme Nom de fichier et Page matre comme Type de fichier.

En cliquant sur Enregistrer, le fichier lessive.master est enregistr dans la structure du site et la page est affiche dans la fentre ddition, dans le mode Cration, de la manire suivante:

Il est remarquer que , dans sa forme implicite, cette page matre contient seulement une zone de formulaire (form), dont la structure interne doit tre construite par la suite, en dfinissant les zones de contenu. Pour bien comprendre les pas de ce processus, il est recommand danalyser en parallle les zones de la page et le code associ . A ce but on peut passer au mode Fractionn, pour avoir dans une partie de la fentre ddition la forme visuelle de la page et dans lautre le code correspondant.

Premirement, on constate que le code commence par une commande DOCTYPE, suivie dune identification @Master, qui spcifie le langage de script (VB dans ce cas):

Par la suite, le code contient les balises <html>, <head> et <body>, lesquelles sont ensuite rptes dans chacune des pages lies. La balise <head> prsente un attribut runat="server", prcisant que les commandes seront excutes sur le serveur. De plus, deux balises (appeles ici des contrles) indiquent les zones de contenu modifiables dj dfinies: <asp:ContentPlaceHolder> Celle place dans len-tte permet dinsrer des styles et des proprits de la page de contenu, tandis que la deuxime encadre une section modifiable dans la page.

Deuximement, il est remarquer la possibilit dutiliser le Slecteur de balise rapide, lequel permet didentifier le code associ une zone de la page; dans lexemple ci-dessus, cest le cas de la deuxime zone de contenu modifiable. Troisimement, une page matre peut contenir plusieurs zones de contenu, cest--dire des espaces rservs modifiables dans chacune des pages de contenus lies. Avant dajouter de nouvelles zones de contenu, il faut dfinir la disposition gnrale dans la page matre et y placer les lments communs. Pour ajouter une zone de contenu, il faut ouvrir la page dans le mode Cration, slectionner le paragraphe ou le bloc voulu et choisir Grer les zones de contenu de Microsoft ASP.NET de son menu contextuel:

La commande affiche la bote de dialogue suivante:

Si cest le cas, on peut demander la cration dune nouvelle zone de contenu, dont le nom va tre saisie dans la rubrique Nom de la zone. A remarquer la liste des autres zones de la page, prsente sous Autres zones sur cette page. En cliquant sur Ajouter, la nouvelle zone est ajoute la page matre. Dautre part, en choisissant une zone de cette liste, on peut la Supprimer avec le bouton correspondant. Quant au cas du site Lessive Services, pour linstant on considre la forme implicite de la page matre lessive.master, avec une seule zone de contenu dfinie.

1.b. Crer une page matre partir du modle Web dynamique

En vue dassurer aux pages dynamiques une structure similaire avec celle des pages statiques, une alternative profitable et de construire leur page matre (lessive.master) en se basant sur le modle Web dynamique (master.dwt). En vue dutiliser le serveur de dveloppement ASP.NET de EW, il faut crer la page matre sur la version locale du site. Si, par exemple, antrieurement, on a ralis des personnalisations du fichier master.dwt sur la version publie du site il faut premirement raliser une publication inverse: site distant vers site local. Avec le site local ouvert, dans le mode Site Web distant, il faut cliquer sur le bouton de radio Distant local, et puis sur le bouton de commande Publier le site Web:

Aprs cette (ventuelle) mise jour du site local, pour crer la page matre dans la manire propose, il faut raliser les pas suivants: Ouvrir le fichier master.dwt dans le mode Fractionn:

Cliquer sur la flche <body> du slecteur de balise rapide et choisir Slectionner le contenu de la balise:

Comme effet, le code de la balise <body> et mis en surbrillance. Du menu contextuel de ce bloc de code choisir Copier:

Dans la continuation du processus de cration de la page matre on retrouve les pas de cration proprement-dite de la page matre: Dans la bote de dialogue ouverte par la commande Fichier| Nouveau| Page:

Cliquer sur ASP.NET dans le volet de gauche; Cliquer sur Page matre dans le volet central; Slectionner loption VB dans la liste droulante Langages de programmation. Cliquer sur OK.

Comme rsultat, EW cre un nouveau fichier sans-titre-1.master, ayant pour linstant exactement la mme forme que celle obtenue dans la premire variante de cration de la page matre:

Dans le volet Cration (moiti inferieure de la fentre ddition), cliquer sur ContentPlaceHolder1, puis dans la barre du slecteur de balise rapide sur

<asp:contentplaceh#ContentPlaceH..>:

Comme rsultat, le code correspondant et mis en surbrillance.

Dans le volet Code (moiti suprieure de la fentre ddition), cliquer du bouton droit sur le code en surbrillance, choisir Coller dans le menu contextuel, pour coller le code en provenance du modle Web dynamique:

Si on passe dans le mode Cration, pour voir les consquences, on constate une prsentation diffrente du contenu de la page:

2. Ajouter les lments communes et une feuille de style

En utilisant comme point de dpart le fichier master.dwt, quelques unes des lments communes de toutes les pages se retrouvent dj dans la page matre en train dtre construite. Pour obtenir une prsentation adquate de la page matre lcran, il faut choisir une feuille de style diffrente, dans les pas suivants: Utiliser la commande Format| Styles CSS| Grer les liens des feuilles de style, qui affiche la bote de dialogue Lier les feuilles de style:

Dans la bote de dialogue Lier les feuilles de style, cliquer sur Ajouter, en vue dajouter une feuille de style diffrente la Page active.

Comme effet, lcran est affiche la bote de dialogue Slectionner une feuille de style:

Dans la bote de dialogue affiche, slectionner une autre feuille de style que la feuille de style styles/style1.css, qui tait attache au modle Web dynamique dorigine. Ainsi, on recommande de slectionner style2.css comme feuille de style. Cliquer sur OK dans cette bote de dialogue , et ensuite cliquer sur OK dans bote de dialogue Lier la feuille de style.

Comme effet, on remarque laffichage dans une forme pareille avec celle des autres pages du site, mais, aussi, que limage du logo en haut de notre modle ( en tant qulment commun) ne saffiche pas:

Utiliser le contrle ASP.NET Image pour insrer le logo. Il est remarquer que, lorsquon utilise des images dans le code HTML dune page matre ASP.NET, il faut utiliser le contrle ASP.NET Image , disponible dans le volet Bote outil, ainsi que ASP.NET peut grer correctement le chemin vers limage, quel que soit le niveau de dossier de la page de contenu laquelle la page matre est attache. A ce but, dans le mode Cration il faut cliquer sur limage pour la slectionner, cliquer sur la flche de la balise <img> dans le slecteur de balise rapide et puis choisir Slectionner la balise:

Dans le volet Bote outils, drouler la section Contrles ASP.NET, puis section Standard et ici, double-cliquer sur le contrle Image pour remplacer limage dorigine par ce contrle ASP.NET:

Alors que le contrle ASP.NET Image nouvellement insr est encore slectionn, on peut cliquer sur ImageUrl dans le groupe Apparence du volet Proprits de la balise, puis cliquer sur le bouton Parcourir () qui apparat droite, lequel affiche la bote de dialogue:

Aprs le choix du fichier images/LogoLS.bmp, qui est le logo antrieurement cr pour la petite entreprise Lessive Services, on peut dfinir un texte alternatif cette image. A ce but, dans le groupe Apparence du volet Proprits de la balise, on recommande de taper le texte Logo Entreprise lintrieur du champ AlternateText:

Pour enregistrer la page matre, on utilise la commande File|Enregistrer sous, qui ouvert la bote de dialogue Enregistrer sous. On doit enregistrer la page matre dans le dossier racine du site; pour garder comme alternative la page matre que nous avons cr antrieurement (lessive.master ), on va enregistrer avec un nom diffrent la nouvelle page. Ainsi, on utilise le nom lessive-dwt.master, pour suggrer que cette nouvelle page matre a t construite partir du modle dynamique master.dwt. On remarque, par consquent, la prsence de ces deux variantes de page matre dans la structure du site:

3. Dfinir les espaces rservs de contenu ASP.NET

Le contenu qui se trouve dans les espaces rservs de la page matre est crit dans les pages auxquelles ces espaces sont attachs. Le contenu peut tre remplac dans la page de contenu. Par exemple, si nous avons une zone de barre latrale contenue dans un espace rserv, on peut y insrer du texte informatif qui reste appropri pour n'importe quelle page du site, comme des directives dusage, des offres spciales ou des annonces. Ensuite, le texte par dfaut peut tre remplac dans chaque page ou conserv en ltat. Pour dfinir un espace rserv, dans le mode Cration, on peut cliquer sur la zone modifiable qui contient Gros titre 2 (Headline 2) et puis cliquer sur <DWT:editable> dans le slecteur de balise rapide. Ensuite, il faut doublecliquer sur ContentPlaceHolder dans le volet Bote outils, pour remplacer la zone modifiable du modle Web dynamique par un espace rserv de contenu ASP.NET. Lespace rserv ainsi obtenu est ContentPlaceHolder1. On peut rpter la procdure pour dfinir un espace rserv lequel remplace la zone modifiable Gros titre 3 (Headline 3) de droite, en obtenant un espace rserv ContentPlaceHolder2. On arrive de cette manire la forme suivante de la page matre:

En vue de donner des renseignements supplmentaires sur le contenu qui va tre insr dans les espaces rservs, on peut procder de la manire suivante: Dans le mode Cration, cliquer sur ContentPlaceHolder1 gauche, taper Zone principale de contenu, appuyer sur Enter pour insrer un nouveau paragraphe et taper Insrez le contenu ici. Cliquer sur ContentPlaceHolder2 droite, taper Zone latrale de contenu, appuyer sur Enter pour insrer un nouveau paragraphe et taper Insrez le contenu ici:

4.-5. Crer une nouvelle page au format ASPX et lier cette page de contenu avec la page matre
Aprs que des pages matre ont t ainsi conues, adaptes et enregistres, on peut crer des pages de contenu lesquelles seront lies lune ou lautre des pages matre existantes. Pour crer une page de contenu (*.aspx), il faut utiliser la commande Fichier|Nouveau| Crer partir de la page matre qui ouvert une bote de dialogue en vue de nous permettre de slectionner la page matre utiliser:

Dans notre cas, aprs un clic sur Parcourir, on peut choisir comme page matre lessive.master ou lessive-dwt.master, que nous avons cr antrieurement. Comme un premier exemple, considrons une page .aspx, base sur la page matre lessive-dwt.master. Comme suite au choix de la page matre, EW2 nous propose une page sans_titre_1.aspx base sur ce modle:

Le processus de cration doit continuer avec lajout du contenu spcifique la page, qui sera diffrent chaque visite de la page, en tant que rsultat de laccs aux sources de donnes dynamiques, dont la mise jour est toujours possible.

6. Ajouter le contenu spcifique la page

On peut ajouter un contenu dynamique en se connectant avec diffrentes sources de donnes et en affichant leurs contenu dans des contrles de donnes, offerts par la technologie ASP.NET. Auparavant, il tait assez complexe de rcuprer des informations partir dune base de donnes et de les afficher dans une page Web. ASP.NET utilise des fournisseurs et permet de traiter les donnes sur leur forme native, ainsi quil nest plus ncessaire de programmer du code pour afficher des donnes provenant de diffrentes sources. ASP.NET peut oprer avec des sources de donnes telles que: base de donnes Access; base de donnes SQL Server; fichiers XML; fichiers Excel; bases de donnes Oracle, DB2 et MySQL. Les pas parcourir sont : i. cration des sources de donnes; ii. utilisation des contrles de donnes ASP.NET. Ces pas seront considrs, dans cet ordre, pour les bases de donnes Access et les fichiers XML.

6.1. Bases de donnes Access comme source de contenu pour les pages ASP.NET
On analyse les deux pas identifis dans la succession suivante: i. Cration de la base de donnes Access. ii. Utilisation des contrles de donnes ASP.NET.

i. Cration de la base de donnes Access

Access est un systme de gestion de bases de donnes relationnelles de Microsoft, fournie comme composante de la suite de bureautique Microsoft Office, dont les versions les plus utilises sont Access 2003 et Access 2007. En accord avec le modle relationnel de donnes, une telle base est construite comme un ensemble de tables (relations), avec des relations entre elles par lintermdiaire des champs de donnes jouant le rle de cls, ou: Toute table doit avoir une cl primaire (primary key), dont le rle et didentifier uniquement chaque enregistrement (tuple); Toute table peut avoir une ou plusieurs cls externes (foreign key), en relation avec les cls primaires dautres tables. Dpendant du numros denregistrements mis en relation, on fait la distinction entre relations 1 1 ou 1 m.

Pour le cas de lentreprise Lessive Services, on considre la base de donnes Services.mdb, construite en Access 2003, dont les tables et leurs relations (Relationships) sont:

Les tables et leurs champs de donnes (attributs) sont: Employe table des employes: EmpID identificateur de lemploye (cl primaire); Nom nom et prnom de lemploye. Client table des clients: ClientID - identificateur du client (cl primaire); Nom nom et prnom du client; Adresse adresse du client.

des tables correspondantes; Quantite nombre des units; Date date de ralisation du service. Pour toute table on peut utiliser une feuille de donnes (datasheet) pour raliser les oprations lmentaires sur ces enregistrements: lajout de nouveaux enregistrements; effacement des enregistrements; modification des enregistrements.

Service table des services: ServiceID identificateur du service (cl primaire); Denomination dnomination du service; Tarif tarif unitaire du service; ServiceFourni table des services fournis aux clients: ID identificateur du service (cl primaire); EmpID, ClientID, ServiceID cls externes, en relation avec les cls primaires

La feuille de donnes offre, aussi, les outils pour se dplacer dun enregistrement lautre dans le jeu denregistrements de la table. La capture dcran suivante montre la feuille de donnes ouverte pour la table Service, avec lensemble denregistrements actuel quelle contient:

Les en-ttes des colonnes de la feuille sont aussi actifs, en offrant des menus contextuels pour des oprations usuelles: tri croissant(Sort A to Z) ou dcroissant (Sort Z to A), recherche (Find), insertion (Insert Column), effacement (Delete Column), etc. Grce aux relations entre les tables, les feuilles de donnes sont enchanes, ainsi que pour un enregistrement on peut ouvrir la feuille de la table avec laquelle elle se trouve en relation, en cliquant le signe +, gauche de cette enregistrement.

Outre la cration simple de nouveaux enregistrements, SGBDR Access offre la possibilit de crer des requtes (query), cest--dire retrouver des ensembles de donnes de plusieurs tables, partir des relations qui existent entre elles. Par exemple, pour dterminer le volume dactivit de chacun des employes, on peut concevoir une requte ServiceEmployees, en se basant sur les relations qui existent entre les tables Employe, Service et ServiceFourni:

En double cliquant sur le nom de la requte, elle est excute et le rsultat obtenu dans un certain moment pourrait tre:

De la mme manire on peut crer, par exemple, une requte VolumeServices, partir des tables Service et ServiceFourni. Outre leur utilisation directe, dans lenvironnement propre au SGBDR Access, les tables et les requtes sont accessibles aussi aux pages Web dynamiques, par lintermdiaire des contrles de donnes ASP.NET, condition que la base de donnes laquelle elles appartiennent soit une source de donnes valide. Usuellement, elle doit tre prsente sur une machine accessible aux navigateurs Web, tenir compte du contexte de publication du site: mme ordinateur, serveur de lintranet, serveur dun ISP dans lenvironnement Internet.

La plus simple solution est dincorporer la base de donnes mme dans la structure de dossiers du site. Dans le cas de Lessive Services, on peut tout simplement copier-coller la base de donnes dans le dossier racine du site:

Mme si elle est enregistre dans ce contexte nouveau, la base de donnes reste accessible lAccess, mais il faut parcourir certaines pas pour laccder aussi par lintermdiaire des contrles de donnes ASP.NET.

ii. Utilisation des contrles de donnes ASP.NET

En vue de raliser laccs au contenu de la base de donnes Services.mdb, via des contrles ASP.NET, on considre nouveau la page sans_titre_1.aspx, dont la cration nous avons commenc antrieurement:

Il faut cliquer sur ContentPlaceHolder1, et puis sur le petit bouton en forme de flche dans son coin suprieur droit. Dans le menu qui apparat, il faut choisir Crer un contenu personnalis.

On se propose de crer deux pages dynamiques, dont la zone principale va avoir un contenu en provenance de Services.mdb: a. ListeServices.aspx, dont le contenu est une liste de services disponibles, avec leurs tarifs actuels (table Service de Services.mdb), b. VolumeServices.aspx, dont le contenu est une situation du volume dactivit par services (requte VolumeServices de Services.mdb). a. Pour crer la page ListeServices.aspx, on doit faire plusieurs pas, dont les premiers sont les suivants: 1. Cliquer dans ContentPlaceHolder1, en supprimant tout le texte existant de la zone et en le remplaant par Listes des services:; 2. Appuyer sur Entre (Enter), pour crer un nouveau paragraphe; 3. Drouler la section Contrles ASP.NET et puis la section Donnes; 4. Double-cliquer sur GridView, pour insrer un contrle ASP.NET GridView dans la zone principale. Aprs ces premiers quatre pas, nous sommes dans la situation suivante:

5. Dans le menu Choisir la source de donnes de la fentre Taches GridView, choisir Nouvelle source de donnes. Comme rsultat, est affiche la fentre de dialogue de lAssistant Configuration de source de donnes, dont la forme initiale est la suivante:

6. Cliquer sur Base de donnes Access, et puis sur OK dans lassistant. 7. Dans la bote de dialogue Configurer la source de donnes, cliquer sur Parcourir, cliqeur sur la base donnes Services.accdb la racine du site et cliquer sur Ouvrir. En vue daccder cette bote il faut premirement enregistrer la page, que nous appellerons VolumeServices.aspx. Comme suite ces oprations, on est arriv dans la situation suivante:

8. Cliquer sur Suivant, en arrivant dans la partie de lassistant qui nous aide slectionner les donnes que nous souhaitons afficher. On arrive dans un cran ou on doit choisir, dans notre cas, loption Spcifier les colonnes dune table ou dune vue, ou vue correspond au concept de requte, dans la terminologie dAccess. Pour la zone de contenu principale, conformment aux intentions mentionnes, il faut choisir la table Service:

On arrive dans la situation suivante:

On a choisi les colonnes Denomination et Tarif, parce que lattribut ServiceID na pas aucune signification pour un visiteur du site. Il est remarquer, dans lencadrement Instruction SELECT, la phrase du langage dinterrogation des bases de donnes relationnelles, SQL (Structured Query Language) qui corresponde aux champs de la requte choisis comme source de donnes pour le contrle ASP.NET GridView.

9. Cliquer sur Suivant, qui affiche la fentre pour le dernier pas du processus. Ainsi, en cliquant sur le bouton Tester la requte, le rsultat est affiche dans lencadrement suprieur de la fentre, en prouvant que la requte fonctionne:

10. Cliquer sur Terminer, pour refermer lAssistant Configuration de source de donnes.

Comme rsultat de ce processus, nous avons maintenant un contrle GridView dans la zone principale de notre page dynamique VolumeServices.aspx:

La fentre Tches GridView est affiche nouveau:

En cliquant sur Format automatique , la fentre de dialogue ouverte nous permet de choisir un schma de format:

Pour observer la page et sa grille dans un navigateur, il faut cliquer sur Enregistrer et puis sur Fichier|Afficher dans le navigateur pour avoir laperu de la page ainsi obtenue. En utilisant Internet Explorer 9.0, cet aperu est:

Dans la zone latrale, identifie par PlaceContentHolder2, on peut introduire, par exemple, un texte explicatif pour la liste affiche dans la zone principale:

b. En rptant les mmes pas, on peut crer la page dynamique VolumeServices.aspx, en utilisant aussi, dans sa zone principale, un contrle ASP.NET GridView, dont la source de donnes est, cette fois, la requte VolumeServices de la base de donnes Services.mdb. Cette page peut avoir, par exemple, la forme suivante:

6.2. Fichiers XML comme source de contenu pour les pages ASP.NET i. Cration des fichiers XML
Lutilisation des fichiers XML (*.xml) en tant que sources de contenu pour les pages Web dynamiques est lune des solution les plus actuelles. Cest cause du fait que le langage XML (Extensible Markup Language) est un langage de dfinition de donnes particulirement bien adapt pour le Web. Il permet de dcrire les donnes afin de les manipuler et de les changer indpendamment des logiciels ou des quipements. A loccasion de la prsentation du langage XML (voir chap.2), nous avons identifi deux catgories de fichiers (documents) XML: document valide, quand il possde une DTD (Document Type Definition), cest--dire une grammaire avec les rgles de syntaxe respecter; document bien form, lorsqu'il respecte seulement les rgles gnrales de la grammaire XML (balises fermes, correctement imbriques). Par la suite, on considre seulement le deuxime cas, qui est adquat pour les ensembles de donnes dont la structure nest pas trs complexe. Ainsi, pour le cas de la petite entreprise Lessive Services, on peut se proposer de crer un document XML avec les donnes des employes, pour lequel il faut dfinir la structure arborescente du document (larbre XML).

On peut designer comme Employes la racine de cet arbre, ce qui correspond lensemble de donnes crer. Ensuite, on peut considrer que les attributs dun employ sont runis dans une composante de cet arbre (ce qui correspond un enregistrement de la table Employe de la base de donnes Services.mdb). Par exemple, considrons que lon se propose enregistrer pour chaque employ des attributs tels que: nom , prnom , sexe , dpartement , fonction . De cette manire, lensemble de donnes des employes peut tre dcrit, en tant que document bien form, comme un arbre XML dont la structure est: <employees> <employees> <employe> <nom>.</nom> <prenom>.</prenom> <employe> <sexe></sexe> <departement></departement> <fonction></fonction> <nom> <prenom> <sexe> <dept> <fonct> </employe> . </employees>

En gnral, on peut faire la diffrence entre plusieurs mthodes de cration dun fichier XML: saisie directe, en utilisant un diteur de texte, tels que Notepad; fonctions adquates des outils de dveloppement de sites Web, tels que Expression Web; export de donnes enregistres dans des bases de donnes relationnelles telles que Microsoft Access en tant que fichiers XML; enregistrement de fichiers de donnes crs avec dautres logiciels Office, tels que Word ou Excel, en tant que fichiers XML, etc. Par la suite on considre la deuxime et la troisime des solutions identifies, en considrant comme point de dpart lexemple de la petite entreprise Lessive Services, avec ses donnes sur les Employees. En les analysant, il faut tenir compte du fait quun systme XML peut tre forme de trois fichiers: les donnes (*.xml); le schma (*.xsd), contenant un schma de dclarations, cest--dire des rgles afin de mieux contrler la structure des donnes, comme leur ordre et le type de donnes (nombre, texte); le format (*.xsl), requis pour mettre en forme les donnes XML. Il utilise le langage XSLT (Extensible Stylesheet Language Transformations), afin de dfinir le format et lapparence de donnes.

a. Crer des fichiers XML en Expression Web

Pour crer un fichier XML, on utilise la commande Fichier|Nouveau|Page. Dans sa fentre de dialogue, sur longlet Page, il faut slectionner Gnral et puis XML:

En cliquant sur OK, est ouverte une page sans-titre-1.xml, laquelle peut tre enregistre en tant que employees.xml, dans notre cas:

Le nouveau fichier contient, pour linstant, une seule ligne de code:

Elle indique la version du langage (1.0) et le codage utilis(par dfaut, UTF-8).

Par la suite, on peut commencer saisir du code XML, en respectant la structure de larbre propos antrieurement. On arrive, dans un certain moment de cration du contenu de ce fichier, dans une situation telle que:

Pour vrifier si le code XML est correctement dfini, il faut choisir loption Vrifier la forme du code XML du menu contextuel de la page de code, affich aprs un clic droit lintrieur de cette page:

Comme rsultat, EW2 affiche une bote de message, avec le rsultat de cette vrification. On remarque, dans notre cas, le fait que le document XML est bien form, cest--dire, il vrifie les rgles gnrales de XML. Pour les cas derreur, le message va indiquer la ligne o une certaine erreur a t identifie.

Par exemple, considrons la situation suivante:

Dans ce cas, la vrification du code produit le message derreur suivant:

Pour corriger, il faut cliquer sur Atteindre lerreur, et puis vrifier les balises douverture et de fermeture dans le bloc de code mal form. Le processus se droule pour toutes les erreurs, jusqu obtenir le message: Le document apparat bien imbriqu et bien form.

b. Export de donnes des bases de donnes Microsoft Access en tant que fichiers XML
Dans ce cas, les donnes du fichiers XML ont comme source des tables ou des requtes (vues) appartenant une base de donnes Access. Pour le cas de lentreprise Lessive Services, on considre la base de donnes Services.mdb, dont les tables et requtes ont t utilises antrieurement comme source de donnes des pages ASP.NET. Cette fois, on va exporter les donnes en tant que fichiers XML, qui leur tour, deviendront des sources de donnes pour des pages dynamiques ASP.NET. Supposons, par exemple, que lon se propose de crer une alternative la page ListeServices.aspx, dont le contenu tait fournie par la table Service de la base de donnes Services.mdb. A ce but, aprs louverture de la base de donnes Services.mdb avec Access 2003, il faut slectionner la table Service, dont le menu contextuel, activ par clic droit, offre une commande Export. Par lintermdiaire de cette fonction on peut exporter les donnes de la table vers diffrentes destinations, telles que dautre base de donnes relationnelles (dBase, Paradox, base de donnes ODBC), tableurs (Excel, Lotus 1-2-3), mais, aussi, en tant que fichiers XML. Dans le dernier cas, dune manire automatique sont gnrs tous les trois types de fichiers du systme XML: donnes (.xml), schma (.xsd) et format (.xsl).

La capture suivante montre la table slectionne et son menu contextuel:

La commande Export affiche la bote dialogue suivante:

Aprs le choix de la destination, du type de fichier (XML) et de la saisie du nom (service), en cliquant sur Export, est affiche la bote de dialogue, avec les cases--cocher pour les types de fichiers crer par cet export:

En cliquant sur OK, la procdure dexport va produire la destination choisie, les fichiers: service.xml, service.xsd, service.xsl. En vue de les faire accessibles aux pages ASP.NET du site, on peut transfrer ces fichiers par des oprations copier-coller dans le dossier racine du site LessiveServices, ouvert en EW:

ii. Utilisation des contrles ASP.NET pour afficher du contenu XML

Expression Web offre des outils pour rcuprer facilement les donnes XML et les afficher dans une page ASP.NET sous forme de vue de donnes (DataView), cest--dire avec une prsentation entirement personnalisable, en utilisant le contrle ASP.NET Xml, de la catgorie Standard:

Comme exemples de pages avec un contenu XML, on se propose crer: a.Employes.aspx, dont le contenu est une liste des employes, en provenance du fichier employes.xml, cr avec EW; b. ListeServices-xml.aspx, dont le contenu est une liste des services obtenue par lexport de la table Service en tant que fichier service.xml.

a. Pour crer la page Employes.aspx, de la mme manire que pour les pages dynamiques avec du contenu en provenance dune base de donnes Access, il faut utiliser la commande Fichier|Nouveau|Page. Dans la fentre ouverte par cette commande, de longlet Page il faut choisir Gnral, ensuite ASPX, Crer partir dune page matre et VB comme Langage de programmation:

Aprs la slection de la page matre (par exemple, lessive-dwt.master), en cliquant sur OK, une nouvelle page sans_titre_1.aspx est ouverte.

Pour intgrer des donnes XML dans la page .aspx, il faut instancier dans la zone choisie un contrle Xml. La plus simple solution est de glisser un fichier .xml, dans cette zone. Dans notre cas, par exemple, lintrieur de la zone principale de contenu de la nouvelle page, partir du volet Liste de dossiers ou Bibliothque de sources de donnes, on peut glisser le fichier antrieurement cr, Employees.xml, lemplacement voulu :

A ce but, dans le menu du coin suprieur droit de la zone principale de contenu il faut choisir Crer un contenu personnalis:

On doit simplement remplacer le contenu actuel de la zone par un texte tel que Liste des employes , et puis glisser le fichier XML dans le paragraphe ddi au contenu. Comme rsultat, les donnes sont insres dans un contrle ASP.NET de type Xml, sous la forme dun tableau simple.

En mode Cration, la page est:

Si on passe dans le mode Fractionn, on constate que le code associ au contrle Xml est:

<asp:xml id="Xml1" runat="server" documentSource="employees.xml" transformSource="../../../../xAdmni/Local Settings/Temporary Internet Files/WebTempDir/employees.xsl" />

Il est remarquer que, dune manire implicite, EW a cr un fichier employees.xsl, avec la mise en forme de la vue de donnes. On remarque la prsence de ce fichier dans la fentre Enregistrer les fichiers incorpors, ouverte par la commande Enregistrer du menu contextuel de longlet de la page employees.aspx:

En cliquant sur OK, le fichier Employees.xsl est enregistr dans le dossier racine du site, o antrieurement nous avons enregistr le fichier avec les donnes en XML, dont le nom est employees.xml.

Laperu dans le navigateur IE 9.0 montre la forme actuelle du contenu de cette page dynamique:

Pour finir la cration de la page, on peut introduire un texte explicatif comme contenu de la zone latrale.

A ce but, il faut premirement activer la commande Crer un contenu personnalis de cette zone latrale:

Laperu de la page Employees.aspx ainsi personnalise est:

Pour la part des oprations supplmentaires de la vue de donnes, on bnficie dun menu associ len-tte du contrle Xml.

Ainsi, de la mme manire que pour le contrle GridView utilis antrieurement, on dispose pour le contrle Xml dun menu Tches Data View:

La commande Modifier les colonnes offre une bote de dialogue via laquelle on peut dcider quelles colonnes retenir dans la vue de donnes ou mme de crer de colonnes dont le contenu est obtenu par des formules de calcul appliques aux autres donnes:

La commande Modifier la disposition offre une bote de dialogue Proprits de la vue de donnes, plusieurs onglets, via lesquelles on peut faire des choix de type Gnral, Disposition, Source XSLT, Traitement XSLT. Il est mentionner que longlet Source XSLT, propose dune manire implicite le fichier Employees.xsl en tant que source XSLT de formatage de la vue. Longlet Disposition, propose plusieurs styles daffichage pour le contenu de la vue de donnes, entre lesquels on peut choisir:

Tenir compte du contenu de la vue, on peut considrer le style Tableau lmentaire comme adquat pour laffichage. Comme suite aux choix et personnalisation faites, laperu de la page dynamique Employees.aspx est devenu:

b. Pour crer la page ListeServices-xml.aspx, dont le contenu est le fichier service.xml, on doit procder dune manire pareille celle utilise pour la page Employees.aspx. Ainsi, aprs le choix dun modle de page matre, qui este le mme lessive-dwt.master, on arrive dans la situation suivante:

Cette fois, on va crer la vue de donnes par lintermdiaire de la commande Vue de donnes|Insrer une vue de donnes qui affiche le volet de tches Bibliothque de sources de donnes, pour choisir un fichier XML (Service.xml, dans ce cas):

Par la suite, la procdure est similaire celle utilise antrieurement pour la page Employees.aspx, en arrivant une forme de la page ListeServicesxml.aspx, dont laperu est:

Nimporte quelle soit la manire de les crer et quelle est la source de leur
contenu, il faut assurer la prsence des pages dynamiques dans la structure de navigation du site.

Insertion de nouvelles pages dans la structure de navigation

Nimporte quelle soit leur type, dynamique ou statique, toute page nouvelle doit tre insre dans la structure de navigation, ainsi que les visiteurs puissent laccder. On peut faire la diffrence entre deux niveau de visibilit des pages nouvelles: a. pages globales, dont la visibilit doit tre assure partir de toute autre page du site; b. pages particulires, dont lintrt est local, cest--dire la visibilit est limite a quelques pages en particulier une seule. Pour les pages globales, la solution la plus simple est: la personnalisation adquate des zones de navigation (barre de liens et/ou pied de page) du modle de pages dynamique (*.dwt), dans le cas des pages statiques ; la personnalisation de la page matre (*.master) pour les pages dynamiques, si on considre cette opration une ncessit. Pour les pages locales, la plus simple solution et dassurer la possibilite de les accder par des hyperliens (hyperlink). Par la suite, on considre les deux situations dans le cas du site de la petite entreprise Lessive Services.

a.Solutions de navigation vers les pages globales

Dans le cas du site Lessive Services, on va considrer comme globales les pages dynamiques ListeServices.aspx et VolumeServices.aspx. On se propose dassurer leur insertion dans la strucutre de navigation, par lintermdiaire de la liste de liens du pied de page, lequel se retrouve dans le modle des pages dynamique (master.dwt) et, aussi, dans la page matre (lessive-dwt.master), conue partir de mme modle. A ce but, il faut ouvrir le fichier master.dwt dans la fentre ddition de EW2:

On recommande dutiliser le mode Fractionn, ainsi que les modifications soit visibles dans le mme temps dans le code et le design. Par exemple, supposons que la page ListeServices.aspx sera accde par un lien immdiatement aprs celle vers le Plan du site. Avec le pointeur de la souris dans cette position on peut utiliser la commande Insertion | Lien hypertexte:

Dans la fentre de dialogue ouverte par la commande, il faut saisir le texte du lien et choisir la page qui sera associe au lien:

En cliquant sur OK le lien est insre, et il nous reste dintervenir dans le code pour insrer un caractre | comme sparateur, en vue de garder la mme apparence de la liste des liens du pied de page. De la mme manire, ou en crivant directement le code dans la moiti suprieure de la fentre ddition, dans une position de notre choix, on peut crer aussi le lien vers la page VolumeServices.aspx. Comme suite, le modle de pages dynamique est devenu:

En cliquant dans son onglet sur Enregistrer, le fichier master.dwt est enregistre avec son nouveau contenu. Comme pour toute modification du modle, EW2 nous demande de raliser la mise jour des pages statiques attaches ce modle.

Par consquent, les deux pages dynamiques dont les liens ont t insre dans le pied de page du modle, deviendront accessibles de toute page statique. Par exemple, la page Accueil a laperu suivant:

Le lien Liste services, par exemple, assure laccs la page ListeServices.aspx, dont le contenu est:

On remarque le fait que le pied de page reste le mme, cest--dire dans notre cas on considre comme ncessaire seulement laccs des pages dynamiques partir des pages statiques. Si cest le cas, on peut raliser des liens entre les pages dynamiques en les considrant comme locales, pas globales.

b. Solutions de navigation vers les pages particulires On peut assurer laccs aux pages particulires (ou dintrt local), par des hyperliens crer dans les zones de contenu dune page vers une autre. De cette manire on peut rsoudre, par exemple, les liens dune page dynamique lautre, si cest le cas. Par exemple, dans le site Lessive Services, on peut assurer de cette manire un accs la page VolumeServices.aspx, partir dun lien insre dans la zone latrale de contenu de la page ListeServices.aspx:

Aprs cette mis jour, laperu de la page ListeServices.aspx est devenu:

Par lintermdiaire du lien dont le texte associ est volume dactivit , on peut accder la page VolumeServices.aspx, considre comme page particulire dans ce contexte.