IFT1148 Introduction

Dimension: px

Commencer à balayer dès la page:

Download "IFT1148 Introduction"

Alfred Coutu
il y a 8 ans
Total affichages :

1 IFT1148 Introduction Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver / 17

2 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

3 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

Lorsqu une page Web est accédée sur un fureteur, celui-ci communique

4 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

5 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

Parfois plus simple d obtenir une page compatible avec un certain fureteur.

6 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

7 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

Lorsqu une telle page Web est accédée dans un fureteur, les opérations suivantes sont exécutées : 1

8 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

Quelques exemples de pages dynamiques : Un moteur de recherche utilise de la programmation côté serveur.

9 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

Les scripts écrits en programmation côté serveur sont exécutés par le serveur (ex : ASP.

10 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

2 Le serveur remarque que la page est dynamique et exécute le code source qui lui est associé.

11 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 / 17

12 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

Le premier fichier contient l information à propos du contenu de la

13 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

14 ASP.NET : exemple simple Après avoir appuyé sur le bouton, nous obtenons le résultat suivant. Exemple 14 / 17

15 ASP.NET : exemple simple Le fichier «.aspx» associé à cette page est le suivant : Exemple <html xmlns= > <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

org/1999/xhtml > <head runat= server > <title>exemple</title> </head> <body> <form id= Formulaire runat=

16 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

$Page { protected void Bouton_Click(object sender,$

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

serveur. 2 Le serveur exécute le code C#.

Documents pareils

< Atelier 1 /> Démarrer une application web

MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE