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

Présentation au sujet: "Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia"— Transcription de la présentation:

1 http://www.ent-montecristo.org/paul-antoine2.bisgambiglia Web Dynamique PHP – AJAX Master 1 informatique 2009 – 2010 P.-A. Bisgambiglia bisgambiglia@univ-corse.frbisgambiglia@univ-corse.fr S2M1 Web Dynamique

2 AJAX2bisgambiglia@univ-corse.fr Maîtrise des technologies liées au WEB HTML XML CSS JavaScript PHP AJaX Création de pages WEB dynamiques Objectifs

3 AJAX3bisgambiglia@univ-corse.fr 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

4 AJAX4bisgambiglia@univ-corse.fr Sommaire

5 AJAX5bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

6 AJAX6bisgambiglia@univ-corse.fr 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

7 AJAX7bisgambiglia@univ-corse.fr 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

8 AJAX8bisgambiglia@univ-corse.fr Introduction Statistiques – Monde

9 AJAX9bisgambiglia@univ-corse.fr Introduction Statistiques – Monde

10 AJAX10bisgambiglia@univ-corse.fr Introduction Statistiques – Monde

11 AJAX11bisgambiglia@univ-corse.fr Introduction Statistiques - France

12 AJAX12bisgambiglia@univ-corse.fr Introduction Statistiques - France

13 AJAX13bisgambiglia@univ-corse.fr Introduction Statistiques

14 AJAX14bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

15 AJAX15bisgambiglia@univ-corse.fr Principes d’Internet Le réseau Internet met en contact les utilisateurs par le biais de leur matériel informatique respectif.

16 AJAX16bisgambiglia@univ-corse.fr 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

17 AJAX17bisgambiglia@univ-corse.fr 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

18 AJAX18bisgambiglia@univ-corse.fr 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

19 AJAX19bisgambiglia@univ-corse.fr Principes d’Internet

20 AJAX20bisgambiglia@univ-corse.fr 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

21 AJAX21bisgambiglia@univ-corse.fr Principes d’Internet Une URL est une chaîne de caractères utilisée pour adresser les ressources dans le Web Exemple : http://www.example.com/chemin/page.html?q=req http : protocole www.example.com : 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

22 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. AJAX22bisgambiglia@univ-corse.fr 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.

23 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 AJAX23bisgambiglia@univ-corse.fr Ordre d'exécution

24 AJAX24bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion

25 AJAX25bisgambiglia@univ-corse.fr Les langages du web Le web fonctionne sur le protocole HTTP Plusieurs langages sont utilisés pour amener des pages personnelles aux utilisateurs

26 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. AJAX26bisgambiglia@univ-corse.fr

27 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 AJAX27bisgambiglia@univ-corse.fr Définition

28 AJAX28bisgambiglia@univ-corse.fr 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

29 AJAX29bisgambiglia@univ-corse.fr Les langages du web HTML : Hypertext Markup Language 1993 : HTML 1.0 : langage de présentation de contenu 1995 - 1996 : HTML 2.0 1997 : HTML 3.2. et 4.0 2000 : 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

30 AJAX30bisgambiglia@univ-corse.fr Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Mon premier document HTML Bonjour tout le monde ! HTML

31 AJAX31bisgambiglia@univ-corse.fr Les langages du web HTML

32 AJAX32bisgambiglia@univ-corse.fr 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

33 AJAX33bisgambiglia@univ-corse.fr 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

34 AJAX34bisgambiglia@univ-corse.fr Les langages du web XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Mon premier document HTML Bonjour tout le monde ! Bienvenue sur mon site !

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

36 AJAX36bisgambiglia@univ-corse.fr 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

37 AJAX37bisgambiglia@univ-corse.fr 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

38 AJAX38bisgambiglia@univ-corse.fr 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

39 AJAX39bisgambiglia@univ-corse.fr 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

40 AJAX40bisgambiglia@univ-corse.fr 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

41 AJAX41bisgambiglia@univ-corse.fr 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

42 AJAX42bisgambiglia@univ-corse.fr 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

43 AJAX43bisgambiglia@univ-corse.fr 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

44 AJAX44bisgambiglia@univ-corse.fr 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

45 AJAX45bisgambiglia@univ-corse.fr 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

46 AJAX46bisgambiglia@univ-corse.fr 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, email) 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

47 AJAX47bisgambiglia@univ-corse.fr 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

48 AJAX48bisgambiglia@univ-corse.fr 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

49 AJAX49bisgambiglia@univ-corse.fr Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> p { color : red; } span { color : blue; } Mon premier document HTML Bonjour tout le monde ! CSS

50 AJAX50bisgambiglia@univ-corse.fr Les langages du web CSS

51 AJAX51bisgambiglia@univ-corse.fr Les langages du web CSS

52 AJAX52bisgambiglia@univ-corse.fr 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

53 AJAX53bisgambiglia@univ-corse.fr 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

54 AJAX54bisgambiglia@univ-corse.fr 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

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

56 Les langages du web A vous : Réaliser votre fichier de mise en page CSS à partir des sites suivants : http://www.csszengarden.com/tr/francais/ http://slaout.linux62.org/html_css/css.html AJAX56bisgambiglia@univ-corse.fr CSS

57 AJAX57bisgambiglia@univ-corse.fr 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

58 AJAX58bisgambiglia@univ-corse.fr 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

59 AJAX59bisgambiglia@univ-corse.fr 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

60 AJAX60bisgambiglia@univ-corse.fr 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

61 AJAX61bisgambiglia@univ-corse.fr Les langages du web PHP

62 AJAX62bisgambiglia@univ-corse.fr Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Mon premier document PHP <?php $pseudo = "Robert"; echo " Bienvenue ".$pseudo." ; ?> PHP

63 AJAX63bisgambiglia@univ-corse.fr Les langages du web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Mon premier document PHP Bienvenue Robert PHP

64 AJAX64bisgambiglia@univ-corse.fr 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

65 AJAX65bisgambiglia@univ-corse.fr 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

66 AJAX66bisgambiglia@univ-corse.fr Sommaire 1. Introduction 2. Les principes d’Internet 3. Les langages du web 4. Le web 2.0 5. JavaScript 6. PHP 7. XML 8. Ajax 9. Conclusion