Vous êtes sur la page 1sur 19

< Atelier 1 />

Dmarrer une application web

Microsoft France

Tutorial Dcouverte de ASP.NET 2.0

Microsoft

Dmarrer une application web Atelier 1

Sommaire
1

INTRODUCTION......................................................................................................................................................3
1.1
1.2

CONTEXTE FONCTIONNEL.....................................................................................................................................3
CONTEXTE TECHNIQUE.........................................................................................................................................3

CRER UNE PREMIRE APPLICATION WEB.................................................................................................4

CRER UNE PREMIRE PAGE WEB..................................................................................................................6

DCOUVRIR VISUAL WEB DEVELOPER EXPRESS EDITION....................................................................9

EXCUTER LAPPLICATION WEB...................................................................................................................14

RENDEZ-VOUS DANS LE PROCHAIN ATELIER........................................................................................19

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 2 sur 19

Microsoft

Dmarrer une application web Atelier 1

1 Introduction
Cet atelier sinscrit dans le cadre du tutorial de dcouverte de ASP.NET 2.0 dont lobjectif est la construction
dune application web pas pas.
Les exercices de latelier 1 se proposent de vous prsenter les toutes premires tapes de cration dune
application web avec ASP.NET 2.0 et de vous familiariser avec loutil de dveloppement Visual Web
Developer Express Edition.

1.1 Contexte fonctionnel


Rappel du contexte fonctionnel du Tutorial de dcouverte de ASP.NET 2.0
Lobjectif du tutorial est de construire pas pas un site web de petites annonces (type bonnes affaires)
proposant des services de :
dpt dune annonce en ligne.
consultation de toutes les annonces publies.
gestion du compte des utilisateurs du site qui souhaitent slectionner des annonces et
revenir rgulirement sur la consultation de leur slection.
Ladresse de ce site fictif serait http://www.affairessansrisque.fr .
Contexte fonctionnel de latelier 1 dans le cadre du Tutorial
Latelier dcrit les toutes premires tapes de la cration du site intitul AffairesSansRisque : cration de
lapplication web, cration dune premire page daccueil Default.aspx affichant un message de bienvenue
sur le site et excution de celle-ci.

Vous trouverez galement dans ces exercices une prsentation de loutil de dveloppement Visual Web
Developer Express Edition, tout particulirement cible sur quelques nouveauts sympathiques de cette
version de loutil par rapport la prcdente.

1.2 Contexte technique


A la fin de cet atelier, vous saurez comment :

Crer un nouveau projet de dveloppement dapplication web.


Crer une page web daccueil du site.
Utiliser loutil de dveloppement, et identifier quelques unes des nouveauts trs
intressantes de la nouvelle version Visual Web Developer Express Edition.
Excuter lapplication pour en tester le fonctionnement.

La solution de cet atelier est disponible dans le rpertoire ..\Atelier 1\Solution.

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 3 sur 19

Microsoft

Dmarrer une application web Atelier 1

2 Crer une premire application web


Dans cet exercice, vous allez apprendre :
-

Crer une application web avec Visual Web Developer Express Edition.

Objectif
Lobjectif de cet exercice est de crer un projet vierge avec Visual Web Developer Express Edition pour votre
application web.
Contexte fonctionnel
Lapplication sappelle AffairesSansRisque.
Droulement de lexercice :
1. Lancez Visual Web Developer Express Edition.
2. Crez un nouveau projet de type Web :
Cliquez le menu Fichier > Nouveau Site Web
Slectionnez le modle de projet web Site Web vide.

Remarquez le modle Starter kit de site Web personnel qui est un exemple dapplication complet et
facilement extensible de site personnel. Pour en savoir plus et dcouvrir dautres Starter kit existants, la
communaut ASP.NET vous invite vous rendre sur http://beta.asp.net/default.aspx?tabindex=4&tabid=41.

Dans la liste Emplacement, slectionnez Systme de fichiers.

Visual Web Developer Express Edition offre la possibilit de crer une application web sur la base
dun simple rpertoire de fichiers de votre ordinateur. Il nest pas question de dvelopper sans serveur web,
mais il se trouve que Visual Web Developer Express Edition contient son propre serveur web ASP.NET
intgr ce qui permet de se passer de Internet Information Server pour dvelopper et tester son application !
Autres alternatives :
Vous pouvez choisir dutiliser IIS (localement sans les extensions FrontPage) en slectionnant HTTP ou de
travailler sur un serveur distance (via HTTP ou mme un serveur FTP).

Automne 2005

Slectionnez le chemin du rpertoire et donnez un nom au site : AffairesSansRisque.

Tutorial Dcouverte de ASP.NET 2.0

Page 4 sur 19

Microsoft

Dmarrer une application web Atelier 1

Dans la liste Langage, slectionnez votre langage de prdilection.

Si vous ne savez pas quel langage choisir, vous pouvez consulter le livre blanc Diffrences entre
Visual Basic.NET et Visual C#.NET sur le site Aide et Support de Microsoft France.

Cliquez sur OK. Le contenu de lExplorateur de solutions pointe sur votre rpertoire de
travail et est vide.

Pour ajouter un lment existant dans votre application, par exemple une image ou une page web
existante, il suffit de copier le fichier correspondant dans le rpertoire de lapplication AffairesSansRisque
depuis lExplorateur de Windows. Pour le voir apparatre dans votre projet il faut cliquer sur licne
Actualiser
de lExplorateur de Solutions de Visual Web Developer. Vous pouvez aussi faire un
copier/dplacer du fichier directement dans lExplorateur de solutions de Visual Web Developer.
Un fichier de solution dextension .sln est constitu par Visual Web Developer dans le rpertoire
C:\ Documents and Settings \ <Propritaire> \ Mes documents \ Visual Studio 2005 \ Projects \
AffairesSansRisque.

Note :

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 5 sur 19

Microsoft

Dmarrer une application web Atelier 1

3 Crer une premire page web


Dans cet exercice, vous allez apprendre :
-

Crer une page web.


Analyser la structure dune page web.

Objectif
Lobjectif de cet exercice est de crer une premire page web dans lapplication web cre prcdemment.
Contexte fonctionnel
Le site doit avoir une page daccueil qui sera charge par dfaut. Elle sappelle Default.aspx. Pour linstant
elle est vierge.
Droulement de lexercice :
1. Crez la page Default.aspx depuis lExplorateur de solutions :
Faites un clic droit sur le projet > Ajouter un nouvel lment.

Slectionnez le modle Formulaire Web.


Laissez le nom par dfaut : Default.aspx.
Choisissez votre langage de prdilection.

Chaque page de votre application web peut tre dveloppe dans un langage diffrent ! Trs utile
pour dvelopper plusieurs lorsquon a des langages de prdilection diffrents ou pour rcuprer une page
existante crite dans un autre langage ...
Cochez Placer le code dans un fichier distinct. Puis cliquez Ajouter.

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 6 sur 19

Microsoft

Dmarrer une application web Atelier 1

Que signifie loption placer le code dans un fichier distinct ?


Avec ASP.NET, vous pouvez dcider de lorganisation du code de la page par rapport la description du
contenu de la page. Il existe deux procds :
- Le principe du code-behind (option placer le code dans un fichier distinct ) consiste sparer le
code fonctionnel de la reprsentation graphique de la page web en les plaant dans deux fichiers
distincts. Le principal intrt de ce procd rside dans lamlioration de la lisibilit et de la maintenance
du code (pour viter le code spaghettis o les balises html et votre code server sont mlangs).
- Le code inline, au contraire, mlange les deux parties au sein dun unique fichier (le code est dans des
balises <script runat= server >). Ce procd est totalement quivalent au prcdent en terme de
rapidit dexcution des pages (notamment), mais cela ne donne pas franchement la mme chose en
terme de lisibilit du code
2. Observez la page Default.aspx gnre :

Langage de votre choix

Remarquez la balise < !DOCTYPE> qui apparat. Vous constatez que le runtime ASP.NET 2.0 gnre
un flux qui respecte la norme XHTML 1.1 (plus propre, compatibilit totale avec les navigateurs etc)

Basculer en mode Design, avec longlet au bas gauche de la page, pour voir la
reprsentation graphique de la page avec lditeur WYSIWYG de Visual Web Developer. La
page est vierge pour linstant.

Revenir en mode Source.


La directive @Page fait rfrence un autre fichier, celui contenant le code behind :
Default.aspx.cs (C#) ou Default.aspx.vb (VB.NET). Elle indique galement le nom de la
classe en code-behind : _Default.

3. Ouvrez le fichier Default.aspx.cs :


Pour afficher le fichier de code, faites un clic droit sur la page > Afficher le code ou cliquez
sur le fichier dans lExplorateur de solutions.

Lextension du
fichier (.cs ou .vb)
dpend du
langage choisi.

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 7 sur 19

Microsoft

Dmarrer une application web Atelier 1

Code VB.NET :

Observez la dfinition de la classe _Default :


Code C# :

Il faut savoir que :


La classe de votre page sappuie directement sur le Framework .NET 2.0 en hritant du comportement
de base des pages web dfini dans la classe System.Web.UI.Page.
- Le mot cl partial signifie que la classe est dclare dans plusieurs fichiers :
1. celui-l mme dans lequel vous vous trouvez, Default.aspx.cs (ou.vb) et o vous allez
programmer les lments de code de votre page (rponse aux vnements par exemple),
2. mais galement le fichier de prsentation de la page, Default.aspx, qui contient notamment
les IDs des contrles serveur que vous allez dessiner sur la page web.
Cest lensemble de ces fichiers qui constituera la page web complte excute par le runtime ASP.NET pour
rpondre la requte. Cest ce principe des classes partielles qui garantit que vous pourrez invoquer les IDs
de vos contrles serveur dfinis dans la page de prsentation depuis la page de code-behind, sans avoir
les redfinir. Rsultat : votre code est spar de la prsentation de la page, propre, lisible et donc plus facile
maintenir !
-

Note :

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 8 sur 19

Microsoft

Dmarrer une application web Atelier 1

4 Dcouvrir Visual Web Developer Express Edition


Dans cet exercice, vous allez apprendre :
-

Dessiner des contrles sur la page web.


Utiliser lditeur de source HTML de VWD.
Utiliser le mini navigateur HTML de VWD.
Utiliser la fonctionnalit IntelliSense de VWD.

Objectif
Lobjectif de cet exercice est de parcourir quelques unes des nouvelles fonctionnalits de Visual Web
Developer Express Edition en matire de construction de cration de contenu dans une page web. En
finalit, vous allez dessiner un contrle serveur de type Label sur la page default.aspx pour afficher un
message de bienvenue.
Contexte fonctionnel
Lide dans cet exercice, est avant toute chose dutiliser lditeur de pages de VWD. Pour cela, on imagine
simplement que la page Default.aspx de votre application contient un message de bienvenue sur le site.

Votre page aura cet


aperu en mode Design
pour linstant.

Droulement de lexercice :
1. Ouvrez la page Default.aspx dans le concepteur de vue en mode Design :

Depuis lExplorateur de solutions, cliquez sur licne Concepteur de vue

.
Concepteur
de vue.

La page est peut-tre dj


ouverte.
Reprez
longlet
associ dans la zone centrale.

Affiche
le code.

2. Dessiner un contrle Label sur la page :


Passez en mode Design en cliquant sur longlet Design en bas gauche.

Automne 2005

Depuis la bote outils, faites un glisser dplacer dun contrle Label de la catgorie
Standard sur la page.
Tutorial Dcouverte de ASP.NET 2.0

Page 9 sur 19

Microsoft

Dmarrer une application web Atelier 1

Notez que les contrles sont organiss dans la bote outils par thme. Les diffrentes rubriques font
directement rfrence aux nouveaux services de ASP.NET 2.0, tels que le service de navigation (avec les
contrles de menu), le service de connexion (avec les contrles de scurit)etc. Vous dcouvrirez tous
ces services dans les ateliers suivants.

Basculer lditeur en mode Source.


Refaites un glisser dplacer dun contrle label en dessous du premier. Vous constatez que
le glisser dplacer des contrles est donc disponible dans les deux modes de lditeur.

Si lon regarde dun peu plus prt le source de la page, vous constatez que les balises de contrles
server commence par <asp : suivi du nom du contrle. En effet, le source html que vous voyez ici nest
pas tout fait le flux final que vous obtiendrez dans le navigateur. Chacun des contrles server va devoir
donner sa reprsentation html au runtime ASP.NET de faon construire la page dfinitive de rponse
renvoye au navigateur client. Cest dailleurs pour cela quon les appelle des contrles server car ils
sont instancis en mmoire au moment du traitement de la page ct serveur puis meurent juste aprs
avoir donn leur rendu en html.
Schmatiquement, cela revient :
1. Requte page.aspx
Serveur
web

Navigateur
client
5. Rponse en html 1.1

2. Instanciation de la classe de la page et


de tous les contrles server.
3. Excution des traitements (qui
manipulent les contrles)
4. Chaque contrle donne sa
reprsentation en html pour le flux de
rponse.

3. Notez la synchronisation du curseur entre les deux modes :


En mode Source, positionnez le curseur nimporte o dans la description du premier
contrle label puis basculer en mode Design. Le contrle slectionn sur la page est celui
sur lequel vous aviez positionn votre curseur.
Idem, en mode Design, slectionnez par exemple le second contrle label puis basculer en
mode Source. Le curseur est directement positionn sur la balise du second label et les
balises de dbut et de fin du contrle apparaissent en gras.

Notez galement que le format de votre html est prserv lorsque vous basculez dun mode lautre.
Lorsque vous passez une balise de fin la ligne avec un retour chariot, elle y est encore aprs un aller
retour en mode Design .
Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 10 sur 19

Microsoft

Dmarrer une application web Atelier 1

4. Utilisez le mini navigateur html :


En mode Source, remarquez le navigateur html dans la barre de navigation au bas de la
page.
Cliquez par exemple <form#form1> pour slectionnez en un seul clic lensemble de la
balise form. Vous pouvez ainsi remonter de droite gauche toutes les balises jusqu la
balise <html> qui encapsule lensemble du contenu.
Notez
que
les
balises peuvent tre
regroupes sur une
ligne avec le + et
pour plus de lisibilit.

En mode Design, le navigateur html dans la barre de navigation permet de retrouver la


correspondance entre le positionnement de votre curseur dans la page et la balise html qui
englobe la zone de la page que vous pointez.
Cliquez par exemple le premier label et notez lenchanement des balises englobantes de la
balise <asp :label> correspondante.

Curseur sur le
premier label.

Balises englobantes
correspondantes.

5. Utilisez la fonctionnalit IntelliSense qui est maintenant disponible partout (pas seulement dans la
fentre de code-behind) :
En mode Source, supposons que vous voulez ajouter un attribut bgcolor la balise
<body> : positionnez le curseur droite de la lettre y et cliquez la barre despace du clavier
pour crire le nom de lattribut. LIntelliSense se dclenche et vous propose une liste
dattributs pour la balise.
Tapez bg. LIntelliSense se positionne directement sur le premier attribut commenant par
ces lettres. Avec la touche Tab du clavier (ou la barre despace ou directement en tapant =),
lIntelliSense rcupre lintgralit de lattribut pour vous.

Automne 2005

Tapez =. LIntelliSense vous propose alors toutes les variables associes lattribut.

Tutorial Dcouverte de ASP.NET 2.0

Page 11 sur 19

Microsoft

Dmarrer une application web Atelier 1

Pour fonctionner, lIntelliSense se base sur un schma HTML associ au type de navigateur ou au
standard html attendu par le poste client. Le schma lui permet de vous proposer les attributs et variables
supports par le navigateur et de vous aider en soulignant les lments qui posent problme lorsque vous
faites une erreur (ou pour vous suggrer un commentaire).

Changez le schma de validation utilis par dfaut par lditeur bas sur Internet Explorer
6.0. Dans la barre doutils Modification de la source HTML, slectionnez dans la liste
droulante Schma cible valider le schma de navigateur bas sur lHTML 4.01.

Barre doutils
Modification
de la source
HTML

Attention, la validation de lhtml par rapport au schma nest propose par VWD qu titre indicatif
uniquement.

Dclenchez lIntelliSense sur la balise <body> comme prcdemment et observez que


lIntelliSense propose beaucoup moins dattributs et notamment que bgcolor nest plus
disponible. Le schma est videmment moins fourni pour cette version de la norme de
lhtml. Lditeur sadapte votre cible de navigateur !
Rebasculer le schma sur Internet Explorer 6.0 comme initialement.
LIntelliSense est galement disponible au niveau du code inline que vous pourriez ajouter
la page dans des balises <script runat= server > : Saisissez la balise <script> suivante :

Code VB.NET

Code C#

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 12 sur 19

Microsoft

Dmarrer une application web Atelier 1

Vous constatez que vous avez accs notamment directement aux IDs des contrles server de votre
page, savoir les deux contrles Label1 et Label2. A noter que lIntelliSense est videmment disponible
aussi dans le fichier de code-behind, Default.aspx.vb (ou .cs).
Vous pouvez utiliser la barre despace pour retrouver plus facilement les IDs de vos contrles ou
nimporte quel autre lment : il suffit de saisir les premires lettres du mot ; ds que vous tapez la barre
despace, lIntelliSense vous suggre tous les mots commenant par ces mmes lettres. Cest trs utile
lorsquon a oubli le nom exact des contrles ou notamment en C# o la casse des noms est importante !
Tapez la puis barre despace

puis directement un . , puis la proprit

Enfin, lIntelliSense est mme au rendez-vous dans un fichier de configuration (ou un fichier XML
contenant un schma), dans une feuille de style et lorsque vous vous battez avec les attributs lintrieur de
lattribut style des balises html ! Avec a on ne pourra plus jamais vous dire que vous ntes pas productif

6. Supprimer le second contrle Label de la page. Ne gardez que Label1 qui nous servira afficher un
message de bienvenue.
7. Supprimer la balise de script galement.
8. Sauvegardez tout.

Note :

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 13 sur 19

Microsoft

Dmarrer une application web Atelier 1

5 Excuter lapplication web


Dans cet exercice, vous allez apprendre :
-

Excuter lapplication web.


Rpondre un vnement.
Mettre en uvre la fonctionnalit de compilation dynamique.
Utiliser le serveur web intgr Visual Web Developer Express Edition.

Objectif
Lobjectif de cet exercice est de comprendre comment lancer lexcution de lapplication AffairesSansRisque
et comment fonctionne la compilation.
Contexte fonctionnel
Nous allons afficher un message de bienvenue par lintermdiaire du contrle server de type Label dessin
prcdemment sur la page Default.aspx.

Droulement de lexercice :
1. Lancez lexcution de lapplication :
Menu Dboguer > Excutez sans dbogage (ou Ctrl+F5)

Pour lancer lapplication au besoin en mode dbogage (menu Dboguer > Dmarrer le dbogage
ou F5) vous tes invit activer le dbogage par lintermdiaire du fichier de configuration de lapplication.
Rpondez alors oui au message suivant :

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 14 sur 19

Microsoft

Dmarrer une application web Atelier 1

Le fichier de configuration est gnr pour vous et ajout votre projet :

Une fois la page Default.aspx charge dans IE, vous remarquez que :
dans la coin bas gauche de Visual Web Developer, il est indiqu dbut de la gnration puis la
gnration a russi . Il y a donc bien eu une phase de COMPILATION de votre projet.

dans la zone de notification de la barre de tches de Windows XP, vous constatez que Visual Web
Developer a lanc une instance de son serveur web intgr pour vous permettre de tester lapplication.

On voit ici le port utilis pour couter la requte


et la transmettre au runtime ASP.NET.

Attention : ce mini serveur web local comporte quelques limitations et nest propos que pour vous
donner les moyens de dvelopper et tester vos applications sans IIS dans un premier temps. Par exemple, il
ne supporte pas la mtabase, il na pas la capacit denvoyer des emails ou il utilise lidentit de lutilisateur
connect au lieu du compte ASPNET(IIS5) ou NETWORK SERVICE(IIS6) pour sexcuter.

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 15 sur 19

Microsoft

Dmarrer une application web Atelier 1

Autre ide intressante : grce VWD et ce mini serveur, vous pouvez donc ouvrir nimporte quelle
page aspx (rcupre dun endroit quelconque) depuis lexplorateur Windows et lexcuter seule pour la
tester. En dautres termes, vous ntes pas obligs de compiler tout votre projet pour excuter et tester le
comportement dune page particulire
2. Trs important pour pouvoir observer la compilation dynamique dans la suite de lexercice : ne
fermez pas IE et garder la fentre ainsi affiche.
3. Vous allez maintenant rpondre lvnement de chargement de la page en mmoire de faon
afficher un message de bienvenue :
Afficher la page Default.aspx en mode Design et double cliquez nimporte o sur la page
pour faire apparatre la fentre de code behind et gnrer automatiquement la signature de
la procdure de rponse lvnement de chargement de la page (cest lvnement
associ par dfaut au double clic sur la page).
Code VB.NET

Code C#

Saisissez le code daffichage du message dans le contrle label :

Code VB.NET
Label1.Text = "Bienvenue sur le N1 des sites de bonnes affaires sans risque sur Internet"
Code C#
Label1.Text = "Bienvenue sur le N1 des sites de bonnes affaires sans risque sur Internet";
4. Sauvegardez la page.
5. Basculer sur Internet Explorer encore ouvert sur la page Default.aspx.
6. Cliquez sur Actualiser

Automne 2005

dans la Bote outils de IE pour redemander la page au serveur web.

Tutorial Dcouverte de ASP.NET 2.0

Page 16 sur 19

Microsoft

Dmarrer une application web Atelier 1

Vous constatez que le message saffiche. Pourtant vous navez pas compil votre code ni mme utiliser
Visual Web Developer pour lancer lexcution de la page. Cest magique ! Il se trouve que le serveur web
intgr Visual Web Developer a constat que vous aviez sauv la page et en a donc dduit quil fallait
redemander une compilation de celle-ci avant de la r-excuter. Cest le principe dit de la compilation
dynamique.
Evidemment en cas derreur de compilation, vous rcuprez un message directement dans IE du type :

Il manque
le t de
Text ici.

7. Dans IE, faites un clic droit sur la page > Afficher la source pour afficher le source HTML de la
page de rponse ainsi obtenue. Vous constatez que ASP.NET 2.0 a gnr de lHTML conforme la
norme XHTML 1.1.

Toutes les balises sont fermes proprement (y


compris <input> par exemple)

Les valeurs des attributs sont entre guillemets.


Les balises sont en minuscules.

Note :

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 17 sur 19

Microsoft

Automne 2005

Dmarrer une application web Atelier 1

Tutorial Dcouverte de ASP.NET 2.0

Page 18 sur 19

Requte
dinterrogati
on
type
Microsoft
XPath.

Dmarrer une application web Atelier 1

6 Rendez-vous dans le prochain atelier


Dans latelier 2, Travailler la prsentation graphique, vous allez commencer crer des pages de contenu
dans votre application web.
Lobjectif est dapprendre mettre en place la charte graphique du site, travailler la mise en page des
pages de contenu du site et utiliser les nouveaux contrles graphiques avancs de ASP.NET 2.0.

Automne 2005

Tutorial Dcouverte de ASP.NET 2.0

Page 19 sur 19

Vous aimerez peut-être aussi