Comprendre l’environnement Web Du site statique au site dynamique WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor D. Kockler – Formateur TIC Décembre 2006 1 1

Comprendre l’environnement Web Du site statique au site dynamique WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor Stage Aide Négociée : TIC 1301-A7 D. Kockler – Formateur TIC Décembre 2006 2 2

Fonctionnement d’un site statique http://www.ac-creteil.fr @ IP : 87.7.246.165 Requête HTTP Internet Internaute F. A. I Page HTML Navigation sur la toile (le Web) : Serveur Hébergeur 1 – Connexion Internet : Attribution adresse IP par FAI – Accès au Web 2 - Lancement du navigateur : Internet Explorer (Microsoft) / Firefox (Mozilla) WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor 3 – Appel de la page web : Page de démarrage (Paramètre du navigateur) – Lien 4 – Recherche de la page : index.html (si @serveur - ex : http://www.ac-creteil.fr/index.html) 5 – Envoi de la page : Code HTML + composants de la page (images / sons / vidéos / etc…) 6 – Interprétation par le navigateur : Affichage de la page Web D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 3 3

Fonctionnement d’un site statique Requête HTTP Internaute F. A. I. Page HTML Serveur Hébergeur Webmestre F. A. I. WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor Téléchargement sur le Serveur (Publier) : 1 - Lancement d’un client FTP : FileZilla (Mozilla) 2 – Connexions : FAI (Identification) - Serveur (Identification) 3 – Transfert des fichiers : Pages Web (Code HTML + composants de la page) D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 4 4

Fonctionnement d’un site statique Requête HTTP Internaute F. A. I. Page HTML Serveur Hébergeur Webmestre F. A. I. WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor Création de pages Web (Editer) : 1 – Lancement d’un éditeur HTML : Dreamweaver – NVU (WYSIWYG) Rédacteur 2 – Editer la page Web : Texte – Images – Sons – Liens hypertextes 3 – Transfert des pages au Webmestre : D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 5 5

Fonctionnement d’un site statique Requête HTTP Internaute F. A. I. Page HTML Serveur Hébergeur Webmestre F. A. I. WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor Rédacteur D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 6 6

Fonctionnement d’un site interactif : Langage de programmation Requête HTTP Internaute F. A. I Page HTML avec code JS Serveur Hébergeur Script coté internaute : (Javascript) WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor 1 – Appel de la page web : Requête HTTP 2 – Recherche de la page : Page HTML avec script Javascrip inclus 3 – Envoi de la page : Page HTML avec code JS + composants (images – sons – vidéos – etc…) 4 – Interprétation par le navigateur : Affichage de la page web 5 – Exécution du script : par exemple : Date du jour – Contrôle validité @ mel – etc… D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 7 7

Fonctionnement d’un site interactif : Langage de programmation Requête HTTP Internaute F. A. I Page HTML Serveur Hébergeur Script coté Internaute : (Javascript) Script coté serveur : (PHP) WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor 1 – Appel de la page web : Requête HTTP 2 – Recherche de la page : Page PHP 3 – Exécution du script : Mot de passe – Compteur - Formulaire – Livre d’or ==> Page Web 4 – Envoi de la page : Page HTML + composants (images – sons – vidéos – etc …) 5 – Interprétation par le navigateur : Affichage de la page Web D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 8 8

Fonctionnement d’un site interactif : Langage de programmation Requête HTTP Internaute F. A. I Page HTML Serveur Hébergeur Script coté Internaute : (Javascript) Script coté serveur : (PHP) WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 9 9

Principe d’une page dynamique Arborescence du site Base de données WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor Rédacteur Catalogue statique : Une page spécifique pour chaque produit Catalogue dynamique : Construction de la page en fonction du contexte (Identifiant du produit) D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 10 10

Fonctionnement d’un site dynamique : PHP + Base de données Requête HTTP Internaute F. A. I Page HTML Serveur Hébergeur Script coté serveur : (PHP) WWW : World Wide Web – Toile RTC : Réseau Téléphonique Commuté ADSL : Asynchron Digital Sub HTTP : Hyper Text Transfert Protocol HTML : HyperText Markup Langage PHP : Personal Home Page Tools => Hypertext PreProcessor 1 – Appel de la page web : Requête HTTP 2 – Recherche de la page : Page PHP 3 – Exécution du script : Construction Page Web 4 – Envoi de la page : Page HTML + composants (images – sons – vidéos – etc …) 5 – Interprétation par le navigateur : Affichage de la page Web D. Kockler – Formateur TIC Stage Site WEB : Décembre 2006 11 11