1 1

Introduction à la programmation web

Objectifs ●  Comprendre le fonctionnement du World Wide Web ●  Produire des documents web statiques et dynamiques

Manuel ATENCIA ARCAS manuel.atencia-arcas@univ-grenoble-alpes.fr

Ces diapositives ont été faites par : Philippe Genoud, UFR IM2AG, UGA

2

vocabulaire

Internet WWW

Client Web

Serveur web

Pages statiques

HTML Pages Dynamiques

W3C

HTTP

Navigateur Web

Routeur

TCP/IP

Lien hypertexte

Script client

Script serveur

PHP

JavaScript

URL

Nom IP

3

Internet WWW Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web Routeur TCP/IP

Lien hypertexte Script client

Script serveur PHP

JavaScript URL

4

WWW Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web Routeur TCP/IP

Lien hypertexte Script client

Script serveur PHP

JavaScript URL

Internet

5

Internet ●  réseau mondial connectant des ordinateurs

●  En fait un réseau de réseaux d’ordinateurs

Connexions : Câble coaxial, fibre optique, câble téléphonique, liaison sans fils (infrarouge, satellite, micro-ondes)

5

Réseau local – Carte Ethernet (LAN Local Area Network)

Réseau téléphonique

Modem

Réseau sans fil

6

WWW Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web Routeur TCP/IP

Lien hypertexte Script client

Script serveur PHP

JavaScript URL

Internet

7 7

Internet: TCP/IP ● TCP/IP : Transmission Control Protocol – Internet Protocol

●  Le protocole de communication entre les ordinateurs connectés à internet ●  Chaque ordinateur identifié par une adresse unique : Numéro IP (Internet

Protocol) ● adresse de la forme : xxx.xxx.xxx.xxx

– Chaque xxx représente un numéro entre 0 et 255

195.221.225.6

195.221.225.125 191.233.187.79

191.233.212.162

Adresse réséau

Numéro de la machine sur le réseau

8

Internet

WWW Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web

TCP/IP

Lien hypertexte Script client

Script serveur PHP

JavaScript URL W3C

Routeur

9

Internet – TCP/IP - Routeur ● Routeurs :

●  Relais de l’information ● Passerelles :

●  Machines qui interconnectent deux réseaux

195.221.225.6

195.221.225.125 193.48.255.206

193.54.238.59

routeur

routeur

routeur

routeur

routeur

10

Internet – TCP/IP - Routeur

● En cas de rupture d'une connexion . . . ●  . . . le réseau peut modifier l'acheminement (le routage) de l'information

195.221.225.6

195.221.225.125 193.48.255.206 routeur

routeur

routeur

routeur

routeur

● TCP/IP ● Packet Switching

https://www.youtube.com/watch?v=vSlcoQowe9I

11

Nom IP

Domaine inrialpes.fr

195.221.225.6

195.221.225.125 194.199.18.79

194.199.22.162

pcnt104-08.e.imag.fr

kernighan.imag.fr

noisetier.inrialpes.fr

baruntse.inrialpes.fr

Serveur DNS (Domain Name Service)

Assure correspondance entre noms des machines du domaine et

numéros IP

●  Adresse (numéro) IP peu pratique ●  Un nom IP (ou plus) peut être associé à ce numéro :

●  de la forme : nomDeMachine.nomDeDomaine

12

WWW Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web Lien hypertexte

Script client

Script serveur PHP

JavaScript URL

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP

13

WWW : World Wide Web

● The World Wide Web (abbreviated as WWW or W3 and commonly known as the Web) is a system of interlinked hypertext documents accessed via the Internet. (wikipedia) ●  Qu'est ce que l'hypertexte ?

● Définition : document non linéaire constitué de pages permettant de passer de l’une à l’autre par des liens (liens hypertexte)

●  Web = hypertexte + internet

●  Web ≠ Internet qui supporte de nombreux autres services ●  messagerie électronique (ou e-mail) ●  transfert de fichiers : FTP ●  listes de discussion : "news" ●  forum de discussion en ligne : IRC (Internet Relay Chat) ●  connexion sur une machine distante : Telnet, rlogin, ssh (Secure Shell)

14 14

Serveur web

Client web

Butineur

HTML

HTML HTML

HTML

HTML HTML

HTML

http://java.sun.com/jdk1.3/demo/applets/Clock/example1.html

1. Demande de chargement d ’une page web

Example1.html

3. Chargement de la page html

HTML

4. Affichage

2. Recherche locale du document

client et serveur Web

15

= Client Web Serveur web

Pages statiques

HTML Pages Dynamiques

W3C HTTP

Navigateur Web Lien hypertexte

Script client

Script serveur PHP

JavaScript URL

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

16

HTML ● Web = ensemble de pages hypertextes ● HTML : HyperText Markup Language

Descrip(on  textuelle  Balises  =  structure  +  direc(ves  de  présenta(on  Contenu  =  textuel  +  mul(média  Liens  :  un  document  peut  faire  référence  à  d'autres  documents    

fichier source HTML

17

Client Web Serveur web

Pages statiques Pages Dynamiques

W3C HTTP

Navigateur Web Lien hypertexte

Script client

Script serveur PHP

JavaScript URL

HTML

HTML

HTML HTML

HTML Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

18

HTTP

● HTTP HyperText Transfert Protocol ●  Protocole utilisé pour chaque transaction web ●  Fourni aux ordinateurs un moyen standardisé pour communiquer entre eux

● Spécifie : – Comment les clients demandent les données – Comment les serveurs répondent à ces requêtes

● Navigateur Web : client HTTP qui se charge de l'affichage d'un document HTML ●  FireFox, Google Chrome, Safari, IE, Opera…

● Serveur Web : serveur HTTP qui transmet aux clients web les documents

demandés ●  Apache, Microsoft IIS, Tomcat, Jetty……

19 19

Serveur http

Client http

Butineur

HTML

HTML HTML

HTML

HTML HTML

HTML

http://java.sun.com/jdk1.3/demo/applets/Clock/example1.html

1. Demande de chargement d ’une page web

Example1.html

3. Chargement de la page html <HTML> <HEAD> <TITLE>A Clock (1.1)</TITLE> </HEAD> <BODY> <h1>A Clock (1.1)</h1> <hr> <applet code="Clock2.class" width=170 height=150> <param bgcolor="C0C0C0"> </applet> .... </BODY>

HTML

4. Affichage

2. Recherche locale du document

Quelques requêtes HTTP : GET, HEAD, POST, …

navigateur et serveur Web

20

URL ● URL = Uniform Resource Locator ● Localisation d'un document :

●  par le nom du protocole permettant d’y accéder, ●  le nom de la machine, ●  le chemin pour accéder au document (répertoires), ●  nom du document.

21

Pages statiques Pages Dynamiques

W3C Script client

Script serveur PHP

JavaScript W3C

HTML

HTML

HTML HTML

HTML

Client Web

Client Web

Client Web

Serveur Web

Serveur Web

Serveur Web

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

HTTP

Lien hypertexte

URL

22

Pages statiques

● Pages statiques ●  Documents HTML sous la forme de fichiers ●  Transmis tels quels par le serveur HTTP

● Pages dynamiques ●  Documents HTML construits dynamiquement (à la volée) par le

serveur

Serveur http

Client http

Requête HTTP GET url

Résultat de la requête

...

Exemple1 …..

HTML HTML HTML HTML

HTML HTML

HTML

HTML

Système de fichiers :

documents html

23

Pages Dynamiques

W3C Script client

Script serveur PHP

JavaScript W3C

HTML

HTML

HTML HTML

HTML

Client Web

Client Web

Client Web

Serveur Web

Serveur Web

Serveur Web

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

HTTP

Lien hypertexte

URL Page statique

Page statique

24

Pages dynamiques

● Pages dynamiques ●  Documents HTML construits dynamiquement (à la volée) par le

serveur (HTML dynamique)

CGI

Client http

SERVEUR HTTP

Requête HTTP Info utilisateur :

Mots clés, langue, pays, etc ...

Résultat de la requête

<html> bla bla bla </html

Programme(script CGI) :

Ex : moteur de recherche

Demande de recherche

Page résult

at

Serveur http

HTML HTML HTML HTML

HTML HTML

HTML

HTML

Système de fichiers :

documents html

1 - Envoi d'une requête ayant une URL spéciale. 2 - Réception de la requête sur le serveur. 3 - Exécution du programme désigné par l'url (sur le serveur) 4 - Construction d'une page HTML résultat (sur le serveur) => web « dynamique » 5 - Envoi de la page HTML vers le client

25

W3C Script client

Script serveur PHP

JavaScript W3C

HTML

HTML

HTML HTML

HTML

Client Web

Client Web

Client Web

Serveur Web

Serveur Web

Serveur Web

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

HTTP

Lien hypertexte

URL Page statique

Page statique

Page dynamique

26

Script Serveur

● Script serveur ●  Programme s'exécutant du côté serveur HTTP ●  Construit à la volée la partie dynamique d'un document HTML

● Exemples de langages et de technologies de script côté serveur : ●  PHP: Hypertext Preprocessor ●  Python, Django ●  Server-side JavaScript, Node.js ●  ASP (Active Server Pages), ASP.NET ●  Java, JSP (JavaServer Pages) ●  Ruby, Ruby on Rails

27

W3C

JavaScript

HTML

HTML

HTML HTML

HTML

Client Web

Client Web

Client Web

Serveur Web

Serveur Web

Serveur Web

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

HTTP

Lien hypertexte

URL Page statique

Page statique

Page dynamique Script serveur

Ex: PHP

Script client

28

Script Client ● Script client

●  Programme s'exécutant du côté client HTTP (dans le navigateur) ●  Transmis avec le document HTML lors d'une requête HTTP

● Exemple de technologies client: ●  JavaScript ●  Flash – Action Script (Adobe)

1 requête http

HTML/hhtp

2

Client Serveur

+ javascript

29

Script Client

Interaction de l'utilisateur

Client

3

Serveur

Certaines requêtes de l'utilisateur sont traitées

localement par le navigateur grâce à la couche d'intelligence qui accompagne la présentation

● Une partie de l'intelligence fonctionnelle de l'application est déportée vers le navigateur

4

30

Script Client

requête http

8

Interaction de l'utilisateur

Client

5

Serveur

D'autres requêtes peuvent nécessiter des échanges avec le serveur (AJAX)

Requête transmise au serveur et la main est rendue à l'utilisateur en attendant le retour des données

7 Le serveur génère une réponse

6

HTML javascript

<valid> true </valid>

XML

communication asynchrone

9

Mise à jour de la description de la page (Arbre DOM)

31

W3C

HTML

HTML

HTML HTML

HTML

Client Web

Client Web

Client Web

Serveur Web

Serveur Web

Serveur Web

Routeur

Routeur

Routeur

Routeur

Internet TCP/IP WWW

HTTP

Lien hypertexte

URL Page statique

Page statique

Page dynamique Script serveur

Ex: PHP

Script clent Ex : javascript

32

W3C

● W3C : World Wide Web Consortium ● organisme de standardisation à but non-lucratif, ●  fondé en octobre 1994 ● consortium chargé de promouvoir la compatibilité des

technologies du World Wide Web telles que ●  HTML, XHTML, ●  XML, ●  RDF, ●  CSS, ●  PNG, SVG ●  SOAP…

●  standards indispensables au bon fonctionnement du Web

33

Plan du Cours

●  Introduction aux technologies du Web. ● Structuration des documents Web : le langage (X)HTML. ● Présentation des documents Web : les feuilles de style CSS. ● Mime, HTTP, Serveur Apache. ● Scripts serveurs.

●  Introduction à PHP : variables, fonctions, tableaux. ●  Les formulaires. ●  Les fichiers. ●  Cookies et sessions.

34

Info du Cours

●  cours : le jeudi (toutes les deux semaines) ●  CM : salle B202, bât. Michel Dubois ●  TP (deux groupes) : salles B1 et B2, bât. Michel Dubois

● horaires de permanence : sur RDV par e-mail (bureau C9, bât. BSHM) ●  support du cours :

http://miashs-www.u-ga.fr/~atenciam/IPW ● evaluation du cours : 100% CC