Downloaded 20 times
Uploaded byMassimiliano Arione
symfony & jQuery (phpDay)
This document discusses best practices for integrating symfony and jQuery, specifically regarding progressive enhancement, AJAX, and real-world examples. It recommends taking a progressive enhancement approach, coding first as if JavaScript doesn't exist, then adding JavaScript/jQuery features. For AJAX, it recommends letting JavaScript handle user interactions and making requests without breaking page flow, returning data in XML or JSON format. Examples provided demonstrate updating a shopping cart quantity and submitting a filter form via AJAX calls to JSON views in Symfony.
More Related Content
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
symfony & jQuery (phpDay)
- 1. symfony & jQueryties and separations Massimiliano Arione May, 14th 2011
- 2. About me 2001PHP 2004 PEAR 2007 symfony 2009 agile
- 3.
- 4.
- 5.
- 6.
- 7. B ehavior progressiveenhancement AJAX
- 8. PROGRESSIVE ENHANCEMENT: THEWRONG WAY sfFormExtraPlugin : sfWidgetFormJQueryDate sfWidgetFormJQueryAutocompleter sfWidgetFormTextareaTinyMCE
- 9. PROGRESSIVE ENHACEMENT:THE GOOD WAY Just use plain Javascript!
- 10. AJAX: THE 4STEPS Javascript catches an interaction with user, or with other browser events an XMLHttpRequest object send a request to server, without breaking the flow an XML (or other format) is returned by server Javascript decodes data from file and interacts with page
- 11. AJAX: THE 4STEPS Javascript catches an interaction with user, or with other browser events an XMLHttpRequest object send a request to server, without breaking the flow an XML (or other format) is returned by server Javascript decodes data from file and interacts with page
- 12. AJAX: THE 4STEPS Javascript catches an interaction with user, or with other browser events an XMLHttpRequest object send a request to server, without breaking the flow an XML (or other format) is returned by server Javascript decodes data from file and interacts with page
- 13. AJAX: THE 4STEPS Javascript catches an interaction with user, or with other browser events an XMLHttpRequest object send a request to server, without breaking the flow an XML (or other format) is returned by server Javascript decodes data from file and interacts with page
- 14. AJAX: THE WRONGWAY sf 1.0: Javascript helper sf 1.4: sfJqueryPlugin <?php echo link_to_remote ('...'); echo jq_link_to_remote ('...');
- 15. AJAX: THE GOODWAY code as if Javascript wouldn't exist write your jQuery functions in the big $().ready() function do little adaptions to your controller write another view (tipically a JSON one)
- 16. AJAX: THE GOODWAY code as if Javascript wouldn't exist write your jQuery functions in the big $().ready() function do little adaptions to your controller write another view (tipically a JSON one)
- 17. AJAX: THE GOODWAY code as if Javascript wouldn't exist write your jQuery functions in the big $().ready() function do little adaptions to your controller write another view (tipically a JSON one)
- 18. AJAX: THE GOODWAY code as if Javascript wouldn't exist write your jQuery functions in the big $().ready() function do little adaptions to your controller write another view (tipically a JSON one)
- 19. IN PRACTICE: LINK<?php // in the view echo link_to (' + ', ' cart_increase ', $item) $(' div#cart a.increase ').click(ajaxIncrease);
- 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. <?php // inthe view // cartIncreaseSuccess.json.php use_helper(' Number '); $arr = array( ' total ' => format_currency($sf_user->getCartTotal(), ' EUR '), ); echo json_encode($arr);
- 22. <?php // inthe 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. IN PRACTICE: FORM$(' div#filters form ').submit(ajaxFilter);
- 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. Thanks! Massimiliano Arione@ garakkio blog.garak.it github.com/garak/sfjqec joind.in/talk/view/3034
Editor's Notes
- #3 a brief history of my develeper evolution, with some stages: first a plain procedural PHP developer, then some objects with PEAR, then full OOP with symfony, last (but not least) agile methods.
- #4 is there anyone that DOES NOT know symfony? Well, symfony is a full-stack MVC framework written in PHP. This talk uses symfony for PHP code, but the core issue is not strictly related to symfony (so, you can just apply what we'll see to any framework, or generally to any PHP code)
- #5 is there anyone that DOES NOT know jQuery? Weel, jQuery is a Javascript library.
- #6 Here is a schema of MVC pattern, with separation between the three layes: Model, View, Controller
- #7 Here is instead the separation concerning web pages: Conten, Presentation, Behavior
- #8 What is behavior? It's mainly two things: progressive enhancement, and AJAX
- #9 So, the progressive enhancement has been wrongly implemented in the past, with symfony. Those widgets, from sfFormExtraPlugin, do it the wrong way, by mixing php and javascript
- #10 the right way is dead simple: just use plain javascript. Attach &quot;ready&quot; event and enhance.
- #11 Here come the most interesting part: the famous AJAX. Let's see what AJAX is, in 4 simple steps.
- #15 Like for behavior, also AJAX has been implemented in wrong ways in the past, with symfony. Helpers to do AJAX calls: again, this leads to php/js mixing (and to disregard separation between C and B)
- #16 We can implement correctly AJAX in 4 steps.
- #20 A practical example: a simple e-commerce site, with a link in the cart, to increase a quantity of an item in the cart itself.
- #21 These two functions deals with AJAX request and with DOM manipulation after succeeded AJAX call.
- #22 The added view is simply a JSON file, with needed data
- #23 The only modify needed in the controller is not redirecting when request is coming from AJAX
- #24 A similar approach is applied to forms
- #25 This is just like the link example seen above, just with different point of tie (the form's &quot;action&quot; instead of link's &quot;href&quot;)
- #26 That's it! You can find a complete symfony project on a github repository