IFT1148 Introduction Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver 2011 1 / 17
HTML Le HTML (ou XHTML) est un langage de balisage permettant de décrire des pages Web. Exemple <html> <head> <title>ma page</title> </head> <body> Bonjour tout le monde! </body> </html> 2 / 17
Fureteurs Un fureteur (ou navigateur Web) est un logiciel qui permet de consulter des pages Web (ex : Firefox, Explorer, Chrome, Safari). Lorsqu une page Web est accédée sur un fureteur, celui-ci communique avec le serveur pour obtenir son code et l affiche ensuite à l écran. 3 / 17
Développement de pages Web Le développement de pages Web en HTML (XHTML) peut être fait avec deux types de logiciels : Éditeur de texte (ex : Notepad, Emacs, vi). Éditeur HTML avec interface graphique ; dit «WYSIWYG» (ex : Expression Web, Dreamweaver, FrontPage). 4 / 17
Développement : éditeurs de texte Avantages : Souvent plus rapide lorsque l utilisateur est expérimenté. Permet d éviter du code superflu. Plus flexible. Parfois plus simple d obtenir une page compatible avec un certain fureteur. Désavantages : Plus lent lorsque l utilisateur est débutant. Parfois laborieux pour certaines tâches complexes. 5 / 17
Développement : éditeurs HTML Avantages : Plus rapide lorsque l utilisateur est débutant. Permet souvent de générer du code complexe aisément. Désavantages : Souvent plus lent lorsque l utilisateur est expérimenté. Moins flexible. 6 / 17
Pages Web statiques Une page Web statique est composée d un fichier HTML (fichier «.html») et son contenu ne change jamais. Lorsqu une telle page Web est accédée dans un fureteur, les opérations suivantes sont exécutées : 1 Le fureteur envoie une requête au serveur. 2 Le serveur envoie le code de la page demandée au fureteur. 3 Le fureteur transforme le code et affiche la page à l écran. 7 / 17
Pages Web dynamiques Exemple Une page Web dynamique est une page dont le contenu est modifié en fonction de certains facteurs. Il y a deux types de pages dynamiques : celles utilisant la programmation côté client ou côté serveur. Quelques exemples de pages dynamiques : Un moteur de recherche utilise de la programmation côté serveur. Une page Web permettant de convertir des mesures du système métrique au système impérial utilise typiquement de la programmation côté client. 8 / 17
Pages Web dynamiques Les scripts écrits en programmation côté client sont exécutés par le fureteur (ex : JavaScript) ; la page Web n a donc pas à être rafraîchie. Les scripts écrits en programmation côté serveur sont exécutés par le serveur (ex : ASP.NET, PHP, JSP) ; la page Web doit donc être rafraîchie. Il existe des façons de combiner ces deux paradigmes (ex : AJAX). 9 / 17
Pages Web dynamiques de type «côté serveur» Lorsqu une telle page Web est accédée dans un fureteur, les opérations suivantes sont exécutées : 1 Le fureteur envoie une requête au serveur. 2 Le serveur remarque que la page est dynamique et exécute le code source qui lui est associé. 3 La page générée est envoyée au fureteur par le serveur. 4 La page est affichée à l écran. 10 / 17
ASP.NET ASP.NET est un ensemble de technologies permettant de développer des sites Web dynamiques. Il permet d utiliser plusieurs langages de programmation (ex : C#, VB.NET). Il existe depuis janvier 2002 et est le successeur d ASP. Sa plus récente version (avril 2010) est ASP.NET 4.0. 11 / 17
ASP.NET Une page ASP.NET est (normalement) constituée d un fichier «.aspx»et d un fichier de code (ex : «.cs», «.vb»). Le premier fichier contient l information à propos du contenu de la page comme dans un fichier HTML. Le second contient le code source associé à la page Web. 12 / 17
ASP.NET : exemple simple Considérons la page ASP.NET suivante contenant un champ de saisie, un bouton et une étiquette. Lorsque l utilisateur entre son nom et appuie sur le bouton, son nom est affiché. Exemple 13 / 17
ASP.NET : exemple simple Après avoir appuyé sur le bouton, nous obtenons le résultat suivant. Exemple 14 / 17
ASP.NET : exemple simple Le fichier «.aspx» associé à cette page est le suivant : Exemple <html xmlns= http://www.w3.org/1999/xhtml > <head runat= server > <title>exemple</title> </head> <body> <form id= Formulaire runat= server > <asp:textbox ID= Entree runat= server /> <asp:button ID= Bouton runat= server onclick= Bouton_Click Text= Afficher /> Mon nom est: <asp:label ID= Nom runat= server /> </form> </body> </html> 15 / 17
ASP.NET : exemple simple Le fichier «.cs» associé à cette page est le suivant : Exemple public partial class _Exemple : System.Web.UI.Page { protected void Bouton_Click(object sender, EventArgs e) { Nom.Text = Entree.Text; } } 16 / 17
ASP.NET : exemple simple Lorsque l usager appuie sur le bouton, les opérations suivantes sont exécutées : 1 Une requête est envoyée au serveur. 2 Le serveur exécute le code C#. 3 Une page HTML est générée à partir du fichier «.aspx». 4 La page est envoyée au fureteur. 17 / 17