Cours développement informatique programmation et déploiement de sites web dynamiques – Cours et formation gratuit

(1)

Programmation et déploiement

de sites web dynamiques

(2)

Objectif du module

 Acquérir les connaissances et les techniques nécessaires pour le développement d’applications web dynamiques

(3)

Plan



Introduction à ASP.Net



Développer des composants serveur



Développer des applications XML



Développer un service web



Déployer une application web



Programmer avec AJAX

(4)

Introduction à ASP.Net

 Un Framework est un espace de travail modulaire où l’on trouve des bibliothèques et des conventions / règles de développement qui vont permettre un développement normalisé d’une application

 Il permet ainsi un développement plus rapide, plus performant et facile à maintenir

 Dans le cas du Framework .NET, le code est compilé en langage MSIL (langage intermédiaire avec le langage machine)

 Tout langage qui se compile en MSIL peut être utilisé pour faire du .NET

Généralités

(5)

Introduction à ASP.Net

 L’ASP.NET permet de créer des sites Web dynamiques : ainsi chaque page peut être unique et afficher des informations spécifiques à l’utilisateur

 L’ASP.NET permet la séparation des couches : la méthode des couches est très employée en entreprise pour permettre une meilleure organisation du code

 Elle consiste à isoler dans des dossiers / fichiers les couches, on appelle cela l’architecture n-tiers

Généralités

(6)

Introduction à ASP.Net

 L’organisation la plus utilisée est l’architecture 3-tiers: on trouve une partie d’accès aux données, la partie métier applicative (des fonctions et des classes) et la partie interface

Généralités

Présentation

Application

Données

(7)

Introduction à ASP.Net

 Serveur web : Configuration IIS (Internet Informations Services )

 Framework .NET : installé avec VisualStudio

 Un EDI : VisualStudio .Net, pas nécessaire mais pratique (code dans un bloc note peut faire l’affaire)

 L'explorateur de solution

 Les propriétés

 La page de code : deux boutons "design" et "source "

 La boite à outils

Environnement de développement

(8)

Plan



Introduction à ASP.Net



Développer des composants serveur



Développer des applications XML



Développer un service web



Déployer une application web



Programmer avec AJAX

(9)

Développer des composants serveur

 Une page asp.NET possède une extension .aspx, et possède la forme générale suivante:

Structure générale d’une page asp.NET

<head>

<script language= "cs" runat= "server">

</script>

<script language= "javascript">

</script>

</head>

<body>

<table>

…

</table>

<asp :Label [Propriétés]></asp :Label>

<% =fct()%>

</body>

(10)

Développer des composants serveur

 On peut séparer cette « page-type » en trois parties:

 La première partie fait apparaître les scripts

 La deuxième, permet de montrer que le code html est identique au code html d’une page web statique

 Et la dernière montre des balises spéciales :

<asp :…> et <% … %>

Il s’agit en fait de, respectivement, la balise d’ouverture pour un WebForm asp.NET et d’une balise de fonction

 Remarque: Il n’est possible d’avoir dans une page asp.NET qu’un seul langage utilisant la technologie .NET

(11)

Développer des composants serveur

 Entre les balises <body> et </body>, nous allons trouver les balises suivantes :

<form runat= "server "> et </form> qui signifient que nous utilisons un formulaire qui doit être traité par le serveur

 Effectivement, le client ne doit recevoir que du code html, le seul code compris par tous les navigateurs

 Les balises <asp : > seront donc traitées au niveau du serveur avant l’envoi de la page html

(12)

Développer des composants serveur

 Un WebForm est un contrôle qui se trouve du côté serveur et qui est donc manipulé par les scripts de traitement

 Il n’est pas visible du côté du client puisque la page que celui-ci reçoit ne contient que du html

 Pour insérer un WebForm asp.NET, nous utiliserons

 Soit <asp : … />

 Soit <asp :Type [Propriétés]> … </asp :Type>

 Tous les webforms ont des propriétés qui sont plus ou moins identiques

Syntaxe d’un WebForm asp.NET

(13)

Développer des composants serveur

 Il est possible d’appeler du code directement dans une page web

 Ainsi on peut trouver au sein d’une page web ceci

 Ce qui donnera l’affichage de la date et heure du système

<body>

<form runat="server ">

…

<h2> Date du jour : <%

=DateTime.Now.ToString() %> </h2>

…

</form>

</body>

(14)

Développer des composants serveur

 Ou même appeler des fonctions personnelles

<script language= "cs" runat= "server">

String Demain() { DateTime Jour;

Jour = (DateTime.Now).AddDays(1);

return Jour.ToString();

}

</script>

</head>

<body>

Date du jour : <% =DateTime.Now.ToString() %><br/>

Date de demain : <% =Demain() %>

</form>

</body>

(15)

Développer des composants serveur

 On aurait pu écrire le code directement :

</head>

<body>

…

Date du jour : <% =DateTime.Now.ToString() %><br/>

Date de demain :

<% DateTime Jour;

Jour = (DateTime.Now).AddDays(1);

Response.Write(Jour);

%>

… </form>

</body>

(16)

Développer des composants serveur

 En essayant maintenant d’insérer des contrôles (Label, Button, TextBox, …) on se retrouve avec la syntaxe suivante:

 Pour un TextBox par exemple:

<asp :Type [Propriétés]> … </asp :Type>

<asp:TextBox ID="TextBox1" runat="server"

Width="186px"></asp:TextBox>

(17)

Développer des composants serveur

 En utilisant des contrôles (Label) dans l’exemple précédent:

<asp:Label ID="Label1" runat="server" Text="Date du jour : "></asp:Label> <% =DateTime.Now.ToString() %>

<br />

<asp:Label ID="Label2" runat="server" Text="Date de demain : "></asp:Label>

<% DateTime Jour;

Jour = (DateTime.Now).AddDays(1);

Response.Write(Jour); %>

</form>

(18)

Développer des composants serveur

 En regardant attentivement, on se rend compte que la page envoyée (au client) ne contient que des balises html

 Cependant, on remarque un champ caché appelé __VIEWSTATE

 Ce champ représente sous une forme codée l'état du formulaire envoyé au client (état de tous ses composants)

 Comme __VIEWSTATE fait partie du formulaire, sa valeur sera postée avec le reste au serveur, ce qui permettra de savoir quel composant a changé d’état et donc déclencher l’événement correspondant

<input type="hidden" name="__VIEWSTATE"

id="__VIEWSTATE"

value="/wEPDwUKMTM4NzQ1NDc0NmRk6GCgObTCVKw FWOp55aCHpN0+FhKOkFi6kX7nPUAleLY=" />

</div>

<span id="Label2">Date de demain : </span> 13/08/2011 14:11:51

</form>

(19)

Développer des composants serveur

 Nous connaissons déjà des évènements liés à une action comme "click", répondant à une action sur la souris

 ASP.NET possède le même genre d'évènements mais, certains sont assez particuliers et très importants pour le déroulement et le contrôle de ce genre d'application

 Application

 Session

 PostBack

Évènements particuliers

(20)

Développer des composants serveur

 Application et Session sont des notions très importantes en ASP.NET : Elles jouent en effet un rôle très actif au niveau de la vie d'un site et, notamment, au niveau de la pérennité des données véhiculées dans le site lui-même

(21)

Développer des composants serveur

 Il y aura un seul objet "Application"

commun à tous les utilisateurs du site mais trois objets "Session" correspondant chacun à un utilisateur

Evénement Description

Application_Star

t Exécuté lors du premier appel à une page du site depuis le démarrage de IIS

Application_End

Appelé lorsque l'application se termine, cela ne signifie pas que IIS s'arrête mais est d'office appelé si, pour une raison quelconque, IIS est arrêté

Session_Start Appelé lors de chaque nouvelle session d'un navigateur client

Session_End Fin de session : lors d'un timeout ou lors d'une destruction explicite (Session.Abandon()) via un lien "Log Out" par exemple

(22)

Développer des composants serveur

 PostBack : génère un appel au serveur

 IsPostBack est une propriété booléenne de la page (read-only) qui permet justement d'effectuer ce genre de test

 AutoPostBack est une propriété des contrôles qui active le déclenchement d'un aller-retour sur le serveur (prend la valeur true ou false)

(23)

Développer des composants serveur

 Lorsqu’un utilisateur sera logué sur notre application, il devra être connu sur toutes les pages qu’il visitera

 Il existe plusieurs solutions pour arriver à cet objectif:

 Passage d’arguments à une url

 Les variables de session

 Les variables d’application

Les variables de session et d’application

(24)

Développer des composants serveur

 Passage d’arguments à une url

 Il s’agit d’appeler la page cible en lui passant des paramètres et leurs valeurs correspondantes

Pour rediriger le navigateur vers une page web

Pour récupérer la valeur du paramètre envoyé

 Il est quand même inconcevable de passer à chaque page le login et le mot de passe

 Nous allons donc améliorer ces pages afin d’en faire quelque chose de plus sécurisé et facilement utilisable

Response.Redirect("Page2.aspx?

n="+TextBox1.Text);

Request.Params["n"]

OuRequest.QueryString[" n "];

(25)

Développer des composants serveur

 Les variables de sessions

 Les variables de session sont stockées en mémoire sur le serveur et sont accessibles par toutes les pages web associées à cette session

 Il peut y avoir autant de variables de session que l’on désire, cependant en augmentant le nombre de variables utilisées, ce sont souvent les performances qui sont en chute libre : il faut donc trouver le juste milieu entre performances et facilité

 Les informations utilisées de manière répétée, si elles n’ont pas un trop haut coût en mémoire, peuvent donc être stockées dans ce type de variables (par exemple : le UserName d’un utilisateur)

(26)

Développer des composants serveur

 Les variables de sessions

 Ces variables sont accessibles du début à la fin de la session d’un navigateur

 Comme pour le passage d’arguments dans l’url, les variables de session ne doivent pas être déclarées

 Afin de ne pas surcharger le serveur et sa mémoire, nous considérons que si la variable de session est initialisée, c’est que l’utilisateur est bien logué

Session["user"]= TextBox1.Text

Label1.Text="L’utilisateur connecté est" + Session["user"].ToString()

(27)

Développer des composants serveur

 Les variables d’application

 Les variables de session ne peuvent être accédées que pour une session, on peut cependant imaginer vouloir partager des informations entre les différents navigateurs clients (trouver la liste des utilisateurs connectés)

 La syntaxe et l’utilisation des variables d’application sont les mêmes que pour les variables de sessions si ce n’est que ces variables sont accessibles par toutes les sessions, il est donc possible de les faire communiquer

 Un exemple simple et fréquent que l’on trouve au travers du net est le nombre d’utilisateurs connectés et identifiés

(28)

Développer des composants serveur

 Les variables d’application

 Dans la partie qui valide la connexion, il faut rajouter le code suivant:

 La variable Application["NbUsers"] peut être donc utilisée là où il le faut

Application.Lock();

if (Application["NbUsers"]==null) Application["NbUsers"] = 1;

else

Application["NbUsers"] =

(int)Application["NbUsers"] + 1;

Application.UnLock();

(29)

Développer des composants serveur

 Nouveau concept introduit par Microsoft avec ASP.NET, représente l'état de l'ensemble des contrôles d'une page

 Les informations sont sauvées sous forme d'un flux sérialisé dans la page HTML et le champ caché _VIEWSTATE permet le transit de ces informations entre le client et le serveur

 Il peut être désactivé au niveau d'un contrôle, au niveau d'une page ou au niveau d'une application en plaçant la propriété EnabledViewState à False

Les ViewStates

(30)

Développer des composants serveur

 Le plus intéressant est que le programmeur peut y ajouter ses propres informations sous forme d'objets indexés par une clé de type String

 Pour sauvegarder et lire une information, voici comment utiliser le ViewState, par exemple pour modifier un argument dans une requête de sélection:

Les ViewStates

void ConstruireRequete() {

String tri = (String)(ViewState["tri"]);

String rq = "SELECT * FROM UneTable ORDER BY

" + tri;

}

(31)

Développer des composants serveur

Les ViewStates

protected void Page_Load(object sender, EventArgs e) {

if (! IsPostBack) {

ViewState["tri"] = "nom";

ConstruireRequete();

} }

protected void cmdVille_Click(object sender, EventArgs e)

{

ViewState["tri"] = "ville";

ConstruireRequete();

}

(32)

Développer des composants serveur

 Les cookies permettent aux applications Web de stocker des informations spécifiques à l'utilisateur

 Par exemple, lorsqu'un utilisateur demande une page de votre site, si votre application envoie, en plus de la page, un cookie contenant la date et l'heure, le navigateur de l'utilisateur récupérera la page plus le cookie, qu'il stockera dans un dossier du disque dur local

 Ultérieurement, si l'utilisateur demande à nouveau une page de votre site, le navigateur recherchera sur le disque dur local un cookie associé à l'URL saisie

Les cookies

(33)

Développer des composants serveur

 Si le cookie existe, le navigateur l'enverra à votre site en même temps que la demande de page

 Votre application pourra alors déterminer la date et l'heure auxquelles l'utilisateur a visité le site pour la dernière fois

 Vous pourrez éventuellement utiliser cette information pour afficher un message sur l'écran de l'utilisateur ou vérifier une date d'expiration

 Les navigateurs limitent le nombre de cookies que votre site peut stocker sur l'ordinateur de l'utilisateur

Les cookies

(34)

Développer des composants serveur

 En plus d'utiliser des contrôles serveur Web dans vos pages Web ASP.NET, vous pouvez créer vos propres contrôles personnalisés et réutilisables

 Des contrôles utilisateur (UserControl) : des conteneurs dans lesquels vous pouvez placer des balises et des contrôles serveur Web. Vous pouvez ensuite traiter le contrôle utilisateur comme une unité et lui assigner des propriétés et des méthodes.

 Des contrôles personnalisés (CustomControl) : classes que vous écrivez et qui dérivent de Control ou de WebControl

Contrôles utilisateur

(35)

Développer des composants serveur

 Un contrôle utilisateur porte l’extension

« .ascx »

 Il s’agit d’une mini page (.aspx) qui peut s'inclure dans une page et qui ne comporte aucune des balises suivantes :

<html><body><form>

 Un contrôle utilisateur a pour directive <

%@ Control > au lieu de la directive <%@

Page >

 Les contrôles utilisateur ne peuvent pas s'exécuter comme des fichiers autonomes, il faut plutôt les ajouter à des pages ASP.NET, comme pour n'importe quel contrôle

(36)

Développer des composants serveur

 Pour utiliser un contrôle utilisateur dans sa page, il faut utiliser la directive @Register pour faire connaitre le contrôle utilisateur à la page

<%@ Register Src="~/monUserControl.ascx"

TagName="MonUserControl" TagPrefix="UC"

%>

 L’attribut Src définit le chemin d'accès virtuel au fichier contrôle utilisateur que vous incluez

 L’attribut TagName associe un nom au contrôle utilisateur

 L’attribut TagPrefix associe un préfixe au contrôle utilisateur. Le TagName et le TagPrefix seront inclus dans la balise d'ouverture de l'élément du UserContrôl

(37)

Développer des composants serveur

 Pour l'insérer alors dans sa page (dans un emplacement précis) on utilisera la combinaison TagPrefix:TagName

<UC:MonUserControl runat="server" />

 Dans le corps de la page Web, déclarez l'élément contrôle utilisateur à l'intérieur de l'élément form

 L'exemple suivant montre un contrôle utilisateur dans lequel les utilisateurs peuvent cliquer à leur guise sur deux boutons pour naviguer dans une série de choix (de couleurs) au sein d'une zone de texte

(38)

Développer des composants serveur

protected string[] colors = { "Red", "Green", "Blue", "Yellow",

"Black" };

protected int indiceCouleur = 0;

protected void afficheCouleur() {

TextBox1.Text = colors[indiceCouleur];

}

afficheCouleur();

}

(39)

Développer des composants serveur

protected void Button1_Click(object sender, EventArgs e) {

if (indiceCouleur == 4) indiceCouleur = -1;

indiceCouleur++;

afficheCouleur();

}

if (indiceCouleur == 0) indiceCouleur = 5;

indiceCouleur--;

afficheCouleur();

}

(40)

Développer des composants serveur

 Le code ne marche pas convenablement

 Il faut rajouter un élément qui inspecte l’état de la variable « indiceCouleur » depuis et vers le serveur (ViewState)

<asp:Label ID="Label1" runat="server" Text="Liste des couleurs"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"

ReadOnly="True"></asp:TextBox>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click"

Text="^" />

<asp:Button ID="Button2" runat="server" onclick="Button2_Click"

Text="v" />

(41)

Développer des composants serveur

protected string[] colors = { "Red", "Green", "Blue", "Yellow",

"Black" };

protected int indiceCouleur = 0;

protected void afficheCouleur() {

Label2.Text = indiceCouleur.ToString();

TextBox1.Text = colors[indiceCouleur];

ViewState["num"] = indiceCouleur;

}

if(IsPostBack)

indiceCouleur = (int)ViewState["num"];

else

ViewState["num"] = indiceCouleur;

afficheCouleur();

}

(42)

Développer des composants serveur

if (indiceCouleur == 4) indiceCouleur = -1;

indiceCouleur++;

afficheCouleur();

}

if (indiceCouleur == 0) indiceCouleur = 5;

indiceCouleur--;

afficheCouleur();

}

(43)

Développer des composants serveur

 Créer une page de connexion (login+mot de passe)

 Une connexion réussie vous mène vers une page où vous indiquez le nom de l’utilisateur logué (variable de session), et le nombre d’utilisateurs connectés (variable d’application).

 La page doit contenir également un UserControl qui permet de faire des calculs de base.

TP1:

(44)

Développer des composants serveur

TP1: