symfony & jQuery (PUG)

1,736 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,736
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • qualcuno NON conosce symfony?
  • Qualcuno NON conosce jQuery?
  • symfony & jQuery (PUG)

    1. 1. symfony & jQuery ties and separations Massimiliano Arione April, 26th 2011
    2. 2. About me <ul><ul><li>2001: PHP developer </li></ul></ul><ul><ul><li>2006: GrUSP member </li></ul></ul><ul><ul><li>2009: member of GrUSP steering committee </li></ul></ul><ul><ul><li>2010: PUG Rome president :-) </li></ul></ul>
    3. 3. symfony
    4. 4. jQuery
    5. 5. MVC
    6. 6. CPB
    7. 7. <ul><li>B </li></ul><ul><li>  </li></ul><ul><ul><ul><li>progressive enhancement </li></ul></ul></ul><ul><ul><ul><li>AJAX </li></ul></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 WRONG WAY 1.0 Javascript helper 1.4 sfJqueryPlugin
    12. 12. 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>
    13. 13. IN PRACTICE: LINK <?php echo link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
    14. 14. 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 $li = $(a).parents('li');   var $span = $li.find('span.quantity');   var oldq = parseInt($span.text(), 10 );   var newq = oldq + 1 ;   $span.empty().append(newq);   $(' span#total ').empty();   $(' span#total ').append(result.total); };
    15. 15. <?php // cartIncreaseSuccess.json.php use_helper(' Number ');   $arr = array(   ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo json_encode($arr);
    16. 16. <?php // 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 '); }
    17. 17. IN PRACTICE: FORM $(' div#filters form ').submit(ajaxFilter);
    18. 18. var ajaxFilter = function(e) {   var $form = $(this);   $.ajax({     type:    ' POST ',     url:     $form.attr('action') + ' ?sf_format=json ',     data:    $form.serializeArray(),     success: showProducts   });   return false ; };
    19. 19. Thanks! Massimiliano Arione @ garakkio blog.garak.it github.com/garak/sfjqec

    ×