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

  • 2,478 views
Uploaded on

- Architecture web : que fait PHP ? …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,478
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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