Escribiendo Aplicaciones Ajax con
              PHP


                  César D. Rodas
                crodas@member.fsf.o...
Quien les habla?
Participante Google Summer of Code 2008
  • Plug-in para WordPress
Quien les habla?
Participante Google Summer of Code 2008
  • Plug-in para WordPress

Ganador del PHP Innovation award 2007
Quien les habla?
Participante Google Summer of Code 2008
  • Plug-in para WordPress

Ganador del PHP Innovation award 2007...
Quien les habla?
Participante Google Summer of Code 2008
  • Plug-in para WordPress

Ganador del PHP Innovation award 2007...
Quien les habla?
       Participante Google Summer of Code 2008
             • Plug-in para WordPress

       Ganador del ...
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Desarrollo de quot;Aplicacionesquot; webs.
Porque utilizar AJAX?
Es la tendencia (web 2.0)
Desarrollo de quot;Aplicacionesquot; webs.
Reducción de ancho de banda.
Porque utilizar AJAX?
       Es la tendencia (web 2.0)
       Desarrollo de quot;Aplicacionesquot; webs.
       Reducción ...
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javas...
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javas...
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javas...
Porqué AJAX es complicado
Doble programación.
  • Servidor (PHP).
  • Cliente (Javascript).

Las implementaciones de Javas...
Porqué AJAX es complicado
       Doble programación.
             • Servidor (PHP).
             • Cliente (Javascript).

...
Algunas soluciones...
Simple librería de Javascript.
Algunas soluciones...
Simple librería de Javascript.
Método de transporte.
  • XML
  • JSON
  • ...
Algunas soluciones...
Simple librería de Javascript.
Método de transporte.
  • XML
  • JSON
  • ...

Buenas librerías y/o ...
Algunas soluciones...
       Simple librería de Javascript.
       Método de transporte.
             • XML
             •...
Comparación de
Librerias/Frameworks
        Nada personal.




                         6
XAjax
<?php
/* RPC */
function myFunction($arg) {
    /* Creando una respuesta */
    $objResponse = new xajaxResponse();
...
XAjax - Desventajas
Utiliza solo XML para el transporte.
XAjax - Desventajas
Utiliza solo XML para el transporte.
Genera mucho código.
XAjax - Desventajas
       Utiliza solo XML para el transporte.
       Genera mucho código.
       API débil.
            ...
SAjax
<?php
function multiply($x, $y) {
      return $x * $y;
}
sajax init();
sajax export(quot;multiplyquot;);
sajax hand...
SAjax - Desventajas
Genera mucho javascript.
SAjax - Desventajas
Genera mucho javascript.
Poca documentacion.
SAjax - Desventajas
Genera mucho javascript.
Poca documentacion.
API débil.
SAjax - Desventajas
Genera mucho javascript.
Poca documentacion.
API débil.
Se necesita escribir código Javascript.
SAjax - Desventajas
       Genera mucho javascript.
       Poca documentacion.
       API débil.
       Se necesita escrib...
Cual sería la solución
      perfecta?
    Lo que todo PHPero necesita...




                                     11
La solución
       La parte importante.
       Abstracción de Javascript.
       Abstracción de los Objetos HTML (DOM API)...
PHPAJAX




          13
PHPAJAX
PHPClasses, Open source (BSD License).
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
Genera có...
PHPAJAX
PHPClasses, Open source (BSD License).
Es la versión (re-escritura) 3.
Extensible.
Método de transporte.
Genera có...
PHPAJAX
       PHPClasses, Open source (BSD License).
       Es la versión (re-escritura) 3.
       Extensible.
       Mét...
PHPAJAX - Un poco de historia
<?php
class chat put extends phpajax {
    var $hotkeys=array(quot;ctrl-mquot;,quot;alt-yquo...
PHPAJAX - Desventajas
API muy débil.
PHPAJAX - Desventajas
API muy débil.
JSON.
PHPAJAX - Desventajas
API muy débil.
JSON.
Prototype.
PHPAJAX - Desventajas
API muy débil.
JSON.
Prototype.
Definir una clase por acción.
PHPAJAX - Desventajas
       API muy débil.
       JSON.
       Prototype.
       Definir una clase por acción.




Cesar ...
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHtt...
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHtt...
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHtt...
PHPAJAX 3
Método de transporte.
  • XML, JSON, ... ?
  • Código Javascript.

Posible método alternativo de AJAX sin XMLHtt...
PHPAJAX 3
       Método de transporte.
             • XML, JSON, ... ?
             • Código Javascript.

       Posible m...
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
      #
      $text = js::GetOb...
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::Get...
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::Get...
PHPAJAX 3 - PHP2JS
<?php
class MyButton extends HtmlButtons {
   #
   function onClick() {
       #
       $text = js::Get...
Theory is good, show me in
           action




                             19
Muchas gracias! Preguntas?
         Cesar Rodas.
         crodas@member.fsf.org
          http://cesarodas.com/


        ...
Resources
PHPAjax
  • http://www.phpajax.org/

XAjax
  • http://www.xajaxproject.org




                                 ...
Powered by...




Cesar D. Rodas, http://cesar.la/ - L EX
                                   AT                     22
Upcoming SlideShare
Loading in …5
×

PHPAJAX

1,679
-1

Published on

Slides of how to create Ajax apps. with the PHPAJAX class.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,679
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

PHPAJAX

  1. 1. Escribiendo Aplicaciones Ajax con PHP César D. Rodas crodas@member.fsf.org http://cesar.la/talks/ Latinoware 2008, Foz do Iguaçu, Brasil 1
  2. 2. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress
  3. 3. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007
  4. 4. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007 Centro Nacional de Computacion
  5. 5. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007 Centro Nacional de Computacion www.CesaRodas.com
  6. 6. Quien les habla? Participante Google Summer of Code 2008 • Plug-in para WordPress Ganador del PHP Innovation award 2007 Centro Nacional de Computacion www.CesaRodas.com Cesar D. Rodas, http://cesar.la/ - L EX AT 2
  7. 7. Porque utilizar AJAX? Es la tendencia (web 2.0)
  8. 8. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs.
  9. 9. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs. Reducción de ancho de banda.
  10. 10. Porque utilizar AJAX? Es la tendencia (web 2.0) Desarrollo de quot;Aplicacionesquot; webs. Reducción de ancho de banda. ... Cesar D. Rodas, http://cesar.la/ - L EX AT 3
  11. 11. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript).
  12. 12. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares.
  13. 13. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas.
  14. 14. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC.
  15. 15. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC. Las librerías Javascript son muy grandes.
  16. 16. Porqué AJAX es complicado Doble programación. • Servidor (PHP). • Cliente (Javascript). Las implementaciones de Javascript no son estándares. Liberías de PHP complicadas o incompletas. • Montón de códigos para cosas sencillas. • Se necesita escribir javascript. • Casi todas las librerías PHP sólo relizan RPC. Las librerías Javascript son muy grandes. Cesar D. Rodas, http://cesar.la/ - L EX AT 4
  17. 17. Algunas soluciones... Simple librería de Javascript.
  18. 18. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ...
  19. 19. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ... Buenas librerías y/o frameworks quot;AJAXquot; en PHP.
  20. 20. Algunas soluciones... Simple librería de Javascript. Método de transporte. • XML • JSON • ... Buenas librerías y/o frameworks quot;AJAXquot; en PHP. Cesar D. Rodas, http://cesar.la/ - L EX AT 5
  21. 21. Comparación de Librerias/Frameworks Nada personal. 6
  22. 22. XAjax <?php /* RPC */ function myFunction($arg) { /* Creando una respuesta */ $objResponse = new xajaxResponse(); $objResponse->assign(quot;SomeElementIdquot;,quot;innerHTMLquot;, $newContent); } $xajax = new xajax(); /* Registrando funcion */ $xajax->registerFunction(quot;myFunctionquot;); /* Procesando */ $xajax->processRequest(); ?> <!--Codigo Javascript--> <?php $xajax->printJavascript(); ?> <!-- el codigo --> <div id=quot;SomeElementIdquot;></div> <button onclick=quot;xajax myFunction('It worked!');quot;></pre> Cesar D. Rodas, http://cesar.la/ - L EX AT 7
  23. 23. XAjax - Desventajas Utiliza solo XML para el transporte.
  24. 24. XAjax - Desventajas Utiliza solo XML para el transporte. Genera mucho código.
  25. 25. XAjax - Desventajas Utiliza solo XML para el transporte. Genera mucho código. API débil. • No hay forma de crear elementos en la repuesta. • Cosas complicadas requieren de escritura de javascript. Cesar D. Rodas, http://cesar.la/ - L EX AT 8
  26. 26. SAjax <?php function multiply($x, $y) { return $x * $y; } sajax init(); sajax export(quot;multiplyquot;); sajax handle client request(); ?> <script> <?php sajax show javascript(); ?> function do multiply cb(z) { document.getElementById(quot;zquot;).value = z; } function do multiply() { x = document.getElementById(quot;xquot;).value; y = document.getElementById(quot;yquot;).value; x multiply(x, y, do multiply cb); } </script> Cesar D. Rodas, http://cesar.la/ - L EX AT 9
  27. 27. SAjax - Desventajas Genera mucho javascript.
  28. 28. SAjax - Desventajas Genera mucho javascript. Poca documentacion.
  29. 29. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil.
  30. 30. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil. Se necesita escribir código Javascript.
  31. 31. SAjax - Desventajas Genera mucho javascript. Poca documentacion. API débil. Se necesita escribir código Javascript. Solo realiza el quot;RPCquot;. Cesar D. Rodas, http://cesar.la/ - L EX AT 10
  32. 32. Cual sería la solución perfecta? Lo que todo PHPero necesita... 11
  33. 33. La solución La parte importante. Abstracción de Javascript. Abstracción de los Objetos HTML (DOM API). Método optimizado de transporte. Cesar D. Rodas, http://cesar.la/ - L EX AT 12
  34. 34. PHPAJAX 13
  35. 35. PHPAJAX PHPClasses, Open source (BSD License).
  36. 36. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3.
  37. 37. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible.
  38. 38. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte.
  39. 39. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP.
  40. 40. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP. Subir (upload) archivos al servidor usando quot;ajaxquot;.
  41. 41. PHPAJAX PHPClasses, Open source (BSD License). Es la versión (re-escritura) 3. Extensible. Método de transporte. Genera código javascript desde el PHP. Subir (upload) archivos al servidor usando quot;ajaxquot;. Cesar D. Rodas, http://cesar.la/ - L EX AT 14
  42. 42. PHPAJAX - Un poco de historia <?php class chat put extends phpajax { var $hotkeys=array(quot;ctrl-mquot;,quot;alt-yquot;); var $inputs=array(quot;textquot;,quot;usr idquot;); function loading() { aprint('loading', 'Sending...'); ashow('loading'); ahide('send'); } function main() { global $mysql; $a = $this->text; aprint('chat-text',quot;me $aquot;,false); aprint('text','');ashow('send'); js(quot;getObject('chat-text').scrollTop = getObject('chat-text').scrollHeight;quot;); } } ?> Cesar D. Rodas, http://cesar.la/ - L EX AT 15
  43. 43. PHPAJAX - Desventajas API muy débil.
  44. 44. PHPAJAX - Desventajas API muy débil. JSON.
  45. 45. PHPAJAX - Desventajas API muy débil. JSON. Prototype.
  46. 46. PHPAJAX - Desventajas API muy débil. JSON. Prototype. Definir una clase por acción.
  47. 47. PHPAJAX - Desventajas API muy débil. JSON. Prototype. Definir una clase por acción. Cesar D. Rodas, http://cesar.la/ - L EX AT 16
  48. 48. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript.
  49. 49. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest().
  50. 50. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP.
  51. 51. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas.
  52. 52. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas. Creacion de elementos HTML en el RPC.
  53. 53. PHPAJAX 3 Método de transporte. • XML, JSON, ... ? • Código Javascript. Posible método alternativo de AJAX sin XMLHttpRequest(). Genera código Javascript a partir de PHP. Funciones comunes para evitar escritura de Javascript. • Filtros. • Operaciones Matematicas. Creacion de elementos HTML en el RPC. quot;Hooksquot; a eventos. Cesar D. Rodas, http://cesar.la/ - L EX AT 17
  54. 54. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I );
  55. 55. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value);
  56. 56. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value); /* filtro */ jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);a
  57. 57. PHPAJAX 3 - PHP2JS <?php class MyButton extends HtmlButtons { # function onClick() { # $text = js::GetObject(quot;algun inputquot;); $numero = js::GetObject(quot;algun numeroquot;I ); js::alert(quot;El valor del input es quot;, $text->value); /* filtro */ jfilt::number($numero->value,quot;Tiene que ser un numeroquot;);a /* matematica, suma */ $numero->value = jnum::add(5,$numero->value); } } ?> Cesar D. Rodas, http://cesar.la/ - L EX AT 18
  58. 58. Theory is good, show me in action 19
  59. 59. Muchas gracias! Preguntas? Cesar Rodas. crodas@member.fsf.org http://cesarodas.com/ Mi blog. http://cesar.la/ 20
  60. 60. Resources PHPAjax • http://www.phpajax.org/ XAjax • http://www.xajaxproject.org 21
  61. 61. Powered by... Cesar D. Rodas, http://cesar.la/ - L EX AT 22
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×