PHP et le web 2.0 Du serveur au client
Qui parle ? <ul><li>Sarah HAIM-LUBCZANSKI </li><ul><li>Secrétaire de l'AFUP :  www.afup.org
Développeuse PHP
Formatrice technos open source web </li><ul><li>PHP/Ajax/Web Standards </li></ul><li>Modératrice sur PHPFrance.com </li></...
De quoi va-t-on parler ? <ul><li>Ajax
PHP dans Ajax </li><ul><li>REST
JSON </li></ul><li>Génération d'images
Salon Solutions Linux </li></ul>
Architecture web : que fait PHP ?
AJAX ? <ul><li>Asynchronous JavaScript And XML
Javascript qui envoie des requêtes HTTP </li><ul><li>GET
POST </li></ul><li>Assimilé aussi parfois aux effets graphiques
Renouveau de javascript </li></ul>
<ul><li>Ajax == plusieurs technos
HTML </li><ul><li>CSS </li></ul><li>Javascript </li><ul><li>Objet XMLHttpRequest </li></ul><li>Un serveur web : LAMP </li>...
objet XHR <ul><li>Objet créé en 1999, pour MSIE
Gère de manière simple </li><ul><li>Envoi
Retour </li><ul><li>Requêtes HTTP </li></ul></ul><li>Différentes manières de faire selon navigateur </li><ul><li>Utilisati...
L'objet XMLHttpRequest : propriétés <ul><li>readyState
status
statusText
responseXML
responseText
onreadystatechange </li></ul>
L'objet XHR : ses méthodes <ul><li>open(method, url, [async], [user], [password])
send([data])
abort()
setRequestHeader(header, valeur)
getAllResponseHeaders()
getResponseHeader(header) </li></ul>
Premier abord : créer  un objet XMLHttpRequest var   xhr = null;  if ( window.XMLHttpRequest )   // Firefox et autres xhr ...
Premier abord d'Ajax Serveur GET ici|ecrire fait envoiReq ecrire fait Client traitement.php
Premier abord d'Ajax HTML Serveur GET ici|ecrire fait envoiReq ecrire fait Client JavaScript ecrire fait traitement.php PHP
Exemple premier abord <ul><li>Dans le PHP : juste un message
Prochain SlideShare
Chargement dans…5
×

Du serveur au client, la place de PHP sur un site web2.0

2 957 vues

Publié le

- Architecture web : que fait PHP ?
- Génération d\'images, problèmes de charge serveur
- Bases de l\'architecture Ajax, introduction à Ajax, JSON

  • Soyez le premier à commenter

Du serveur au client, la place de PHP sur un site web2.0

  1. 1. PHP et le web 2.0 Du serveur au client
  2. 2. Qui parle ? <ul><li>Sarah HAIM-LUBCZANSKI </li><ul><li>Secrétaire de l'AFUP : www.afup.org
  3. 3. Développeuse PHP
  4. 4. Formatrice technos open source web </li><ul><li>PHP/Ajax/Web Standards </li></ul><li>Modératrice sur PHPFrance.com </li></ul></ul>
  5. 5. De quoi va-t-on parler ? <ul><li>Ajax
  6. 6. PHP dans Ajax </li><ul><li>REST
  7. 7. JSON </li></ul><li>Génération d'images
  8. 8. Salon Solutions Linux </li></ul>
  9. 9. Architecture web : que fait PHP ?
  10. 10. AJAX ? <ul><li>Asynchronous JavaScript And XML
  11. 11. Javascript qui envoie des requêtes HTTP </li><ul><li>GET
  12. 12. POST </li></ul><li>Assimilé aussi parfois aux effets graphiques
  13. 13. Renouveau de javascript </li></ul>
  14. 14. <ul><li>Ajax == plusieurs technos
  15. 15. HTML </li><ul><li>CSS </li></ul><li>Javascript </li><ul><li>Objet XMLHttpRequest </li></ul><li>Un serveur web : LAMP </li></ul>
  16. 16. objet XHR <ul><li>Objet créé en 1999, pour MSIE
  17. 17. Gère de manière simple </li><ul><li>Envoi
  18. 18. Retour </li><ul><li>Requêtes HTTP </li></ul></ul><li>Différentes manières de faire selon navigateur </li><ul><li>Utilisation de frameworks </li></ul></ul>
  19. 19. L'objet XMLHttpRequest : propriétés <ul><li>readyState
  20. 20. status
  21. 21. statusText
  22. 22. responseXML
  23. 23. responseText
  24. 24. onreadystatechange </li></ul>
  25. 25. L'objet XHR : ses méthodes <ul><li>open(method, url, [async], [user], [password])
  26. 26. send([data])
  27. 27. abort()
  28. 28. setRequestHeader(header, valeur)
  29. 29. getAllResponseHeaders()
  30. 30. getResponseHeader(header) </li></ul>
  31. 31. Premier abord : créer un objet XMLHttpRequest var xhr = null; if ( window.XMLHttpRequest ) // Firefox et autres xhr = new XMLHttpRequest(); else if ( window.ActiveXObject ) { // Internet Explorer xhr = new ActiveXObject( &quot;Msxml2.XMLHTTP&quot; ); } else { // XMLHttpRequest non supporté par le navigateur alert( &quot;Votre navigateur ne supporte pas les objets XMLHTTPRequest...&quot; ); xhr = false; }
  32. 32. Premier abord d'Ajax Serveur GET ici|ecrire fait envoiReq ecrire fait Client traitement.php
  33. 33. Premier abord d'Ajax HTML Serveur GET ici|ecrire fait envoiReq ecrire fait Client JavaScript ecrire fait traitement.php PHP
  34. 34. Exemple premier abord <ul><li>Dans le PHP : juste un message
  35. 35. En Javascript </li><ul><li>on tape en GET sur le fichier
  36. 36. Affichage géré en fonction du retour </li></ul><li>Utilisation CSS sur le HTML
  37. 37. Avec un framework (prototype) </li><ul><li>Simplification du travail du dév </li></ul></ul>
  38. 38. Le MVC dans une application Ajax <ul><li>Dans le Design Pattern MVC d'un site web classique
  39. 39. Modèle : BDD
  40. 40. Vue : HTML généré (+CSS)
  41. 41. Contrôleur : langage serveur (PHP) </li></ul><ul><li>Avec Ajax
  42. 42. Modèle : objets Javascript
  43. 43. Vue : sortie navigateur
  44. 44. Contrôleur : traitement des événements par Javascript </li></ul>
  45. 45. MVC Ajax : scalabilité <ul><li>L'idée principale à retenir est que la vue doit exclure la logique métier </li></ul>Navigateur Javascript code Objets Javascript Navigateur Moteur de templates Code PHP SGBD Serveur
  46. 46. 1. Le navigateur héberge une application, pas un contenu <ul><li>HTTP est un protocole déconnecté </li><ul><li>Système des sesssions serveur pour pallier à ce manque </li></ul><li>HTML servi en même temps que le contenu
  47. 47. On pourrait : </li><ul><li>servir l'application entière
  48. 48. ne transférer que le contenu </li><ul><li>Allègement des flux </li></ul></ul></ul>
  49. 49. 2. L'application fournit des données, pas du contenu <ul><li>Exemple du panier d'achat
  50. 50. Sans Ajax </li><ul><li>Retour de tout le contenu : panier + reste du document
  51. 51. A cause des requêtes synchrones </li></ul><li>Avec Ajax </li><ul><li>Requêtes asynchrones
  52. 52. Indisponibilité d'un produit
  53. 53. Calculs du montant </li></ul></ul>
  54. 54. 3. Interaction fluide avec l'utilisateur <ul><li>En mode classique, les fonctionnalités Javascript durent le même temps que la page elle-même.
  55. 55. Et si...le temps d'attente lié au mode synchrone était utilisé par le visiteur </li><ul><li>Reste dans la métaphore créée par l'application/site web </li></ul></ul>
  56. 56. 4. Ajax : vraie programmation <ul><li>Javascript connu des développeurs
  57. 57. Nouvelle couche de code
  58. 58. Plus de Javascript </li><ul><li>Besoin de structure pour ce code </li></ul></ul>
  59. 59. Formats de réponse Ajax <ul><ul><li>Texte
  60. 60. XML (arbre DOM)
  61. 61. Cet arbre se trouve dans la propriété responseXML de l'objet XHR </li><ul><li>Exemple : messagerie interne </li></ul><li>JSON </li></ul></ul>
  62. 62. JSON ? <ul><li>JavaScript Object Notation
  63. 63. JSON [jason] format de données </li><ul><li>Représentation données complexes
  64. 64. Objets
  65. 65. Tableaux </li></ul><li>Structure permettant de remonter un objet javascript </li><ul><li>besoin d'une bibliothèque en javascript </li></ul></ul>
  66. 66. JSON format de données var garage = { nom : &quot;mon garage&quot;, vehicule : [ { matricule :&quot;1234 QG 75&quot;, marque :&quot;Citroen AX&quot;, dateMiseEnCirculation : new Date(2005,05,04), propretaire: [ {nom : &quot;sarah&quot;, age : 20 } ] }, { matricule :&quot;9874 AB 75&quot;, marque :&quot;Audi A3&quot;, dateMiseEnCirculation: new Date(2007,05,04) } ] }
  67. 67. Librairie JSON en PHP <ul><li>www.php.net/json
  68. 68. >= PHP 5.2.0 : extension JSON dispo
  69. 69. Deux fonctions </li><ul><li>json_encode()
  70. 70. json_decode() </li></ul></ul>
  71. 71. JSON en Javascript <ul><li>www.json.org
  72. 72. Utilisation possible dans les principaux framework javascript: </li><ul><li>Prototype
  73. 73. Mootools
  74. 74. jQuery </li></ul></ul>
  75. 75. Ajax et Prototype <ul><li>Plusieurs objets: </li><ul><li>Ajax.Request </li><ul><li>description JSON des paramètres de requête
  76. 76. Pour envoyer des requêtes </li></ul><li>Ajax.Updater()
  77. 77. Ajax.PeriodicalUpdate() </li><ul><li>pour répéter une action </li></ul></ul></ul>Référence livre Page 264
  78. 78. PHP et Ajax <ul><li>PHP en module Apache : couplé au serveur web
  79. 79. PHP propose gestion requêtes HTTP </li><ul><li>Streams </li></ul><li>PHP 5 : objet </li><ul><li>Javascript : full-object </li><ul><li>Langage à prototypes </li></ul></ul></ul>
  80. 80. REST ? <ul><li>Architecture d'information basée sur URI </li><ul><li>URL éternelle </li></ul><li>Chaque donnée possède une URL unique </li><ul><li>Namespace XML
  81. 81. Possible utilisation autre format de données </li></ul></ul>
  82. 82. REST et PHP <ul><li>PHP gère GET et POST </li><ul><li>Streams </li></ul><li>XML en PHP </li><ul><li>SimpleXML
  83. 83. API DOM </li></ul></ul>
  84. 84. Client REST en PHP <?php // Une fonction qui fait appel à la fonction double du serveur. function double( $value ) { $url = &quot;http://server/rest.php?function=double&arg=&quot; ; $url .= $value ; $xml = simplexml_load_file( $url ); return $xml ->value; } // Utilisation de notre fonction double (affiche 14). echo double( 7 );
  85. 85. Serveur REST avec PHP // Une fonction que l'on veut mettre à disposition via le serveur REST function double( $value ) { return 2 * $value ; } // On fait appel à la fonction demandée en argument $value = @call_user_func( $_GET [ 'function' ], $_GET [ 'arg' ]); // On spécifie au client qu'il s'agit d'un flux XML header( 'Content-type: text/xml; charset=UTF-8' ); // On envoie soit la réponse, soit un message d'erreur if ( $value !== null) { echo &quot;<response><value> $value </value></response>&quot; ; } else { echo &quot;<response><error>Requête invalide</error></response>&quot; ; }
  86. 86. Génération d'images en PHP <ul><li>Fonctions natives </li><ul><li>GD : www.php.net/gd
  87. 87. ImageMagick
  88. 88. EXIF </li></ul><li>Charge serveur importante </li><ul><li>Cache </li></ul><li>Avec Ajax </li><ul><li>accroissement du problème </li></ul></ul>
  89. 89. Librairies intéresssantes <ul><li>Artichow
  90. 90. JPGraph
  91. 91. Open Flash Chart </li></ul>
  92. 92. PHP, technologie adaptée au web <ul><li>Histoire
  93. 93. Outils
  94. 94. Performance
  95. 95. Modèle opensource </li></ul>
  96. 96. Questions ? <ul><li>Contact </li><ul><li>http://formatrice.wordpress.com
  97. 97. [email_address] nce.com </li></ul></ul>

×