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 845 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

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 845
Sur SlideShare
0
Issues des intégrations
0
Intégrations
19
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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>

    ×