Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia S2M1 Web Dynamique

Maîtrise des technologies liées au WEB HTML XML CSS JavaScript PHP AJaX Création de pages WEB dynamiques Objectifs

12 heures de cours Rappels (HTML, CSS, JavaScript, PHP) Bases d’Ajax Fonctionnement Exercices 12 de TD Exercices pratiques Réalisation de pages web dynamiques Planning

Sommaire

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

Introduction La Programmation web peut prendre différentes formes : de la simple page statique à la page dynamique avec connexion à une base de données. Nous allons tracer ici un bref aperçu de différentes technologies possibles dans la programmation côté client ou côté serveur. Html – xHtml – dHtml CSS XML JavaScript PHP Programmation web

Introduction 1967 : Arpanet : réseau militaire américain robuste aux pannes 1973 : Apparition du TCP/IP 1983 : Internet : Interconnexion d’Arpanet et d’autres réseaux 1989 : HTML a été inventé pour le World Wide Web, afin de pouvoir écrire des documents hypertextes liant les différentes ressources d'Internet Historique

Introduction Statistiques – Monde

Introduction Statistiques – Monde

Introduction Statistiques – Monde

Introduction Statistiques - France

Introduction Statistiques - France

Introduction Statistiques

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

Principes d’Internet Le réseau Internet met en contact les utilisateurs par le biais de leur matériel informatique respectif.

Principes d’Internet Hôte-réseau : liaison physique et de données. Internet : interconnexion des réseaux / routage. Transport : conversation. Application : Telnet, TFTP, SMTP, HTTP. Modèle TCP-IP

Principes d’Internet HTTP : web NNTP : newsgroup POP / SMTP : mail FTP : transfert de fichiers DNS : correspondance entre noms et adresses IP SSH : connexion à distance sécurisée Les couches applicatives

Principes d’Internet Système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un navigateur, des pages mises en ligne dans des sites. L'image de ‘toile’ vient des hyperliens qui lient les pages Web entre elles. Communication entre un serveur (HTTP) et un client (navigateur) Le Web Le Web

Principes d’Internet

Principes d’Internet Trame HTTP Méthodes : GET / POST HTTP 1.0 ou 1.1 Ligne de commande (Commande, URL, Version de protocole) En-tête de requête [Ligne vide] Corps de requête HTTP

Principes d’Internet Une URL est une chaîne de caractères utilisée pour adresser les ressources dans le Web Exemple : http : protocole : hôte /chemin/ : chemin absolu sur le service page.html : nom de la page Web q=req : chaine de requête, transmise à la page URL

Principes d’Internet Le visiteur envoie une requête au serveur (l'url de la barre d'adresse). Le serveur lit le fichier index.html stocké sur son disque dur et l'envoie directement tel quel au visiteur. Le navigateur reçoit alors le fichier HTML, interprète le code HTML et javascript qu'il contient et l'affiche à l'écran. La communication entre un visiteur et le serveur La communication entre un visiteur et le serveur Dans le cas d'une page PHP ou ASP. Le visiteur envoie une requête au serveur. Le serveur ouvre le fichier index.php, exécute le code. Le résultat de ce script est un fichier contenant du code HTML et javascript qui est ensuite renvoyé au navigateur du visiteur.

Principes d’Internet Il faut bien comprendre que la page PHP ou ASP contient un script PHP ou ASP qui est d'abord lu et exécuté par le serveur. Le résultat du script est ensuite envoyé au navigateur. Le javascript contenu dans le résultat est interprété après le code PHP ou ASP. L'objectif du PHP (ou de l'ASP) est bien de générer du code HTML (+ éventuellement du javascript) que le navigateur du visiteur pourra lire, interpréter et afficher. Cela signifie : En javascript, on ne peut pas appeler de fonctions ou de variables PHP. En PHP, on ne peut pas utiliser de fonctions ou de variables javascript. Le code PHP n'est plus visible sur la page générée Ordre d'exécution

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

Les langages du web Le web fonctionne sur le protocole HTTP Plusieurs langages sont utilisés pour amener des pages personnelles aux utilisateurs

Les langages du web Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc... Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.

Les langages du web DOM : (Document Object Model - Modèle objet du document) décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents, et ainsi de le modifier de façon dynamique Définition

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET 3. Python 4. Ruby

Les langages du web HTML : Hypertext Markup Language 1993 : HTML 1.0 : langage de présentation de contenu : HTML : HTML 3.2. et : XHTML 1.0 : langage de contenu (sémantique). Successeur d'HTML, XHTML se fonde XML, plus récente, mais plus exigeante que SGML sur laquelle repose HTML. HTML

Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Mon premier document HTML Bonjour tout le monde ! HTML

Les langages du web HTML

Les langages du web Structure arborescente (type XML) Balise de plus haut niveau : Puis deux parties et Balises de contenu : h1, h2, h3, p, a, div, span, ul, li, dd, dt, form, input, …. HTML

Les langages du web eXtensible HyperText Markup Language : Langage informatique basé sur XML, qui décrit les différents éléments d’un texte à l’aide de balises, en vue de sa publication sur le Web. Le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML. XHTML

Les langages du web XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Mon premier document HTML Bonjour tout le monde ! Bienvenue sur mon site !

Les langages du web 2 – 3 balises à essayer : mettre en gras mettre en italique x n = x n x n-2 citation Le XHTML est le langage qui permet de créer un site web. XHTML

Les langages du web DHTML - Dynamic HyperText Markup Language : Ce n'est pas à proprement parler un langage. Il désigne des pages Web dynamiques qui résultent de la combinaison de feuilles de styles (CSS), de scripts (JavaScript) et d'objets (DOM). CSS : Cascading Style Sheets : Feuilles de style pour documents HTML ou XML. Elles font actuellement l'objet de deux recommandations, CSS1 et CSS2, du W3C. DHTML

Les langages du web Comment ça marche : En HTML, tous les éléments de la page sont considérés comme des objets de type différent. Les images, les liens, les formulaires, les champs de formulaires, etc sont des objets que le javascript peut déjà manipuler. Le DHTML introduit la notion de calque ou couche ou layer. Ces calques sont à la base du DHTML car ils vont pouvoir être manipulés : déplacés, cachés, modifiés, redessinés... Un calque est défini par le couple de balises et DHTML

Les langages du web Un calque doit posséder : un identifiant, pour le repérer un style d'affichage, pour indiquer sa position, sa taille, sa couleur, etc... un contenu, qui sera affiché L'identifiant est enregistré grâce à l'attribut id. Sur une page, l'identifiant de tous les calques (et de tous les autres objets) doit être unique, pour éviter les ambigüités. Une erreur ne surviendra pas forcément en cas de doublons, mais le fonctionnement normal risque d'être perturbé. Le style est enregistré grâce à l'attribut style. C'est une chaîne de caractères au format css. Le contenu est du code HTML (texte, tableaux, images...) placé entre les balises Le code suivant place le tableau sur fond jaune contenant le texte Ceci est un calque dans un calque dont le coin supérieur gauche est à 200 pixels du haut de la page et à 100 pixels du bord gauche. Ceci est un calque DHTML

Les langages du web Le calque peut être accédé par javascript grâce à la fonction document.getElementById qui retourne l'objet calque. Manipulation de visibilité et de position Cette ligne montre le calque identifié comme moncalque document.getElementById("moncalque").style.visibility="visible"; Cette ligne cache le calque identifié comme moncalque document.getElementById("moncalque").style.visibility="hidden"; Pour déplacer le calque, utilisez les propiétés top et left document.getElementById("moncalque").style.left=500; document.getElementById("moncalque").style.top=parseInt(document.getElementById("monc alque").style.top)+10; Pour modifier la taille du calque, utilisez : document.getElementById("moncalque").style.width=parseInt(document.getElementById("mo ncalque").style.width)-20; DHTML

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET 3. Python 4. Ruby

Les langages du web 1995 : invention du JavaScript Langage de script exécuté dans le navigateur (client) et permettant un dynamisme des pages Il est encapsulé dans la page HTML (ou dans un fichier lié) pour être exécuté sur le client. Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript : dans le corps de la page, en entête de page, dans un événement d'un objet de la page. JavaScript

Les langages du web window.onload= setTimeout( function() { alert( 'chargement de la page terminé il y a une seconde et demi' ) }, 1500 ); Une page HTML tout simple Exemple : JavaScript

Les langages du web Normalisé par l’ECMA : normalisation trop faible (champ très réduit) Complété par les navigateurs (Netscape et IE, puis Firefox) W3C : normalisation DOM pour la manipulation des arbres (type document HTML) : 3 niveaux, interprétation large JavaScript

Les langages du web DOM (document Object Model) est une norme du W3C indépendante de toute plate-forme et de tout langage de programmation. Il permet de donner une représentation structurelle au document dont les composants sont différentiables et accessibles dynamiquement par des programmes et des scripts. Selon DOM, un document peut être vu comme une arborescence avec une imbrication hiérarchique de ses composants. Chaque conteneur, image et référence reste accessible à l'issue de son chargement. Pour JavaScript, DOM garantit l'accès aux composants individuels d'une page Web. JavaScript [+d’info] DOM

Les langages du web Avantages : Plus grande convivialité coté client Inconvénients : Compatibilité entre les navigateurs Problème de sécurité Désactivation du JavaScript (~10% des navigateurs0) Les limites sont nombreuses et réelles. Heureusement, d'autres technologies existent. JavaScript : Avantages et Inconvénients

Les langages du web Le language JavaScript est parfaitement adapté pour des traitements sur le poste du navigateur. Voici quelques exemples de cas où JavaScript est efficace (voire irremplaçable) : Vérification de saisie dans des formulaires (Adresse, ) Calculs simples suite à des saisies de formulaire (Tarifs, calculatrice) Moteur de recherche (base de recherche définie par le webmaster) Gestion des dates et des heures (Date du jour, Date de mise à jour, Calendriers) Gestion des cookies (Sauvegarde d'information : nombre de visites, caddie virtuel) Gestion de la navigation (Menus dynamique, popup) Animations graphiques (Dynamic HTML, MouseOver, bannières rotatives, jeux)... Ce que permet JavaScript

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET 3. Python 4. Ruby

Les langages du web CSS : Cascading Style Sheets 1996 : CSS 1.0, actuellement la seule implémentée Langage de présentation d’un document HTML ou XHTML Issu de la séparation entre le contenu et la présentation Il est encapsulé dans la page HTML (ou dans un fichier lié) pour être interprété par le client. CSS

Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " p { color : red; } span { color : blue; } Mon premier document HTML Bonjour tout le monde ! CSS

Les langages du web CSS

Les langages du web CSS

Les langages du web Sélecteur d'attributs h1.nouvcouleur {color:red} Application: Hello #nouvcouleur {color:red} Application: Sélecteur universel Noté * il permet de sélectionner tous les éléments. Sélecteur générationnels Lien de parenté: li a {....} CSS

Les langages du web Police de texte Fontsize (taille) Fontfamily (famille de police) Fontweight (niveau de gras) Fontstyle (style de police) Verticalalign (alignement vertical) text align (alignement horizontal) Texttransform (changement de casse) Textdecoration (soulignement par exemple) CSS

Les langages du web Couleur et arrière plan color (couleur de text) Backgroundcolor (couleur de l'arrière plan) backgroundimage (image d'arrière plan) backgroundrepeat (répétition d'un motif en arrière plan) backgroundposition (position de départ de l'image d'arrière plan) backgroundattachment (ancrage de l'image d'arrière plan) CSS

Les langages du web Propriétés d'un bloc de texte padding (spécifiées en pixels ou en pourcentage), margin, border. CSS

Les langages du web A vous : Réaliser votre fichier de mise en page CSS à partir des sites suivants : CSS

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET 3. Python 4. Ruby

Les langages du web Il existe d’autre langages interprétés sur le clients (et insérés dans une page HTML) : Les applets Java Les animations flash Les ActiveX (uniquement sous IE) Autres langages coté client

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET 3. Python 4. Ruby

Les langages du web PHP : PHP Hypertext Preprocessor 1994 : création par Rasmus Lerdorf Langage interprété sur un serveur HTTP (Apache ou IIS) Produit en sortie un flux HTML envoyé au client. PHP

Les langages du web PHP

Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Mon premier document PHP <?php $pseudo = "Robert"; echo " Bienvenue ".$pseudo." ; ?> PHP

Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Mon premier document PHP Bienvenue Robert PHP

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 1. Coté client (navigateur) 1. Html 2. JavaScript 3. CSS 4. Flash 2. Coté serveur 1. PHP 2. ASP.NET – Python - Ruby

Les langages du web.NET : alternative de Microsoft à PHP et Java Java (JEE (ex J2EE), JSP) Python (Zope) Ruby (Ruby on Rails) Tous ces langages génèrent des pages HTML envoyées au client (navigateur) Autres langages coté serveur

Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion