Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

symfony & jQuery (phpDay)

2,030 views

Published on

Published in: Technology
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ★★★ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

symfony & jQuery (phpDay)

  1. 1. symfony & jQuery ties and separations Massimiliano Arione May, 14th 2011
  2. 2. About me <ul><ul><li>2001 PHP </li></ul></ul><ul><ul><li>2004 PEAR </li></ul></ul><ul><ul><li>2007 symfony </li></ul></ul><ul><ul><li>2009 agile </li></ul></ul>
  3. 3. symfony
  4. 4. jQuery
  5. 5. MVC
  6. 6. CPB
  7. 7. B ehavior <ul><ul><li>progressive enhancement </li></ul></ul><ul><ul><li>AJAX </li></ul></ul>
  8. 8. PROGRESSIVE ENHANCEMENT: THE WRONG WAY <ul><li>sfFormExtraPlugin : </li></ul><ul><ul><li>sfWidgetFormJQueryDate </li></ul></ul><ul><ul><li>sfWidgetFormJQueryAutocompleter </li></ul></ul><ul><ul><li>sfWidgetFormTextareaTinyMCE </li></ul></ul>
  9. 9. PROGRESSIVE   ENHACEMENT: THE GOOD WAY Just use plain Javascript!
  10. 10. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
  11. 11. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
  12. 12. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
  13. 13. AJAX: THE 4 STEPS <ul><ul><li>Javascript catches an interaction with user, or with other browser events </li></ul></ul><ul><ul><li>an XMLHttpRequest object send a request to server, without breaking the flow </li></ul></ul><ul><ul><li>an XML (or other format) is returned by server </li></ul></ul><ul><ul><li>Javascript decodes data from file and interacts with page </li></ul></ul>
  14. 14. AJAX: THE WRONG WAY sf 1.0: Javascript helper sf 1.4: sfJqueryPlugin <?php echo link_to_remote ('...'); echo jq_link_to_remote ('...');
  15. 15. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
  16. 16. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
  17. 17. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
  18. 18. AJAX: THE GOOD WAY <ul><ul><li>code as if Javascript wouldn't exist </li></ul></ul><ul><ul><li>write your jQuery functions in the big $().ready() function </li></ul></ul><ul><ul><li>do little adaptions to your controller </li></ul></ul><ul><ul><li>write another view (tipically a JSON one) </li></ul></ul>
  19. 19. IN PRACTICE: LINK <?php // in the view echo link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
  20. 20. var ajaxIncrease = function (e) {   $.ajax({     url:     this.href + ' ?sf_format=json ',     success: function (r) { increase(r, e.target); }   });   return false ; }; var increase = function (result, a) {   var $span = $(a).parents(' li ').find(' span.qty ');   var newqty = parseInt($span.text(), 10 ) + 1 ;   $span.empty().append(newqty);   $(' span#total ').empty();   $(' span#total ').append(result.total); };
  21. 21. <?php // in the view // cartIncreaseSuccess.json.php use_helper(' Number ');   $arr = array(   ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo json_encode($arr);
  22. 22. <?php // in the controller // actions.class.php public function executeCartIncrease(sfWebRequest $request) {   $this->product = $this->getRoute()->getProduct();   $this->getUser()->cartIncrease($this->product);   // was $this->redirect('@homepage');     $this->redirectUnless($request->isXmlHttpRequest(), ' @homepage '); }
  23. 23. IN PRACTICE: FORM $(' div#filters form ').submit(ajaxFilter);
  24. 24. var ajaxFilter = function(e) {   var $form = $(this);   $.ajax({     type: ' POST ',     url:  $form.attr(' action ') + ' ?sf_format=json ',     data: $form.serializeArray(),     success: showProducts   });   return false ; };
  25. 25. Thanks! Massimiliano Arione @ garakkio blog.garak.it github.com/garak/sfjqec joind.in/talk/view/3034

×