Your SlideShare is downloading. ×
0
Server-Side,
                      PHP-Generated AJAX
                             Mike Ho, Quasidea Development

        ...
a bit about me...

                     • Quasidea Development
                     • 10+ years of IT
                    ...
a bit about you...

                     • Developers vs.
                             Others

                     • AJAX...
a bit of history...
                                            Database

                     • PHP 3 and PHP 4
         ...
a bit of history...
                                                 Database

                     • PHP 3 and PHP 4
    ...
a bit of history...
                                                  Database

                     • PHP 3 and PHP 4
   ...
old school examples
                     • 3 Files Required
                       • HTML page
                       • Da...
something with a bit
                                more data...




                 •      Even though this is a more s...
java pseudo script!
              var summary = document.getElementById("summary").value;
              var status = docum...
issues?



                 •      Structure of “three files” completely dependent on structure
                        of...
client-side ajax

                     • Code maintenance:
                             3 languages, 4 tiers

            ...
server-side ajax
                     • PHP generates
                             client JavaScript
                     ...
keep javascript “dum”
                   • JavaScript should do
                             the absolute bare
           ...
the strategy
         • Implement a true MVC
                approach

               • componentize your       <h3>Please...
the strategy
         • Implement a true MVC
                approach
                                         $countrySel...
the strategy
         • Implement a true MVC
                approach
                                         $countrySel...
event-driven in detail
                                           <?php
                                              /* L...
event-driven in detail

         • Use “Form State”                <html><body>



         • Every HTML Control          ...
event-driven in detail
                                           <html><body>

         • Use “Form State”               ...
event-driven in detail
                                             <html><body>

         • Use “Form State”
       <html...
event-driven in detail
                                           <?php
                                              /* L...
the strategy
         • Implement a true MVC
                approach

               • componentize your
                ...
what’s the “secret sauce”
                     <span id="_state">
                       <select id="state" disabled="disa...
event-driven with mayo
                                      <?php

     • Make the form smarter             /* Listing fo...
event-driven with mayo
     • Make the form smarter          <html><body>
                                         <form a...
event-driven with mayo
     •      Make the form smarter         function AjaxCall(methodName) {
                         ...
coding demo




Thursday, October 22, 2009
Thursday, October 22, 2009
so what about this?




                 •      Now, only one file is dependent on structure of the data feed




Thursday...
qcodo
                 • Developed in 2001
                        Open Sourced in 2005
                        MIT Licens...
closing thoughts...


           • Questions?
             • www.qcodo.com
             • mike@quasidea.com



Thursday, O...
Upcoming SlideShare
Loading in...5
×

Server-Side, PHP-Generated AJAX

3,810

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,810
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Server-Side, PHP-Generated AJAX"

  1. 1. Server-Side, PHP-Generated AJAX Mike Ho, Quasidea Development Zend/PHP Conference Thursday, October 22, 2009 Soli Deo Gloria John 3:16 • Romans 12 Thursday, October 22, 2009
  2. 2. a bit about me... • Quasidea Development • 10+ years of IT consulting experience • Lead Developer, Qcodo Development Framework Thursday, October 22, 2009
  3. 3. a bit about you... • Developers vs. Others • AJAX • Frameworks Thursday, October 22, 2009
  4. 4. a bit of history... Database • PHP 3 and PHP 4 PHP Thursday, October 22, 2009
  5. 5. a bit of history... Database • PHP 3 and PHP 4 • PHP 5, ORM and PHP Model / ORM frameworks PHP View / Controller Thursday, October 22, 2009
  6. 6. a bit of history... Database • PHP 3 and PHP 4 • PHP 5, ORM and PHP Model / ORM frameworks • PHP with client-side PHP View / Controller AJAX JavaScript Thursday, October 22, 2009
  7. 7. old school examples • 3 Files Required • HTML page • Data provider (e.g. a PHP webservice that generates XML or JSON) • Client JavaScript (webservice client and a response handler) Thursday, October 22, 2009
  8. 8. something with a bit more data... • Even though this is a more sophisticated page, the three-file minimum stays the same: HTML File, Data WebService and Client JavaScript Thursday, October 22, 2009
  9. 9. java pseudo script! var summary = document.getElementById("summary").value; var status = document.getElementById("status").value; // etc... XmlRpcCall("http://server/get_issues?sm=" + summary + "&st=" + status + etc..., "filterIssuesListCallback"); function filterIssuesListCallback(issueArray) { var issueTable = document.getElementById("table"); issueTable.removeAllRows(); foreach (issueArray as issueObject) { var issueRow = new HtmlTableRow(); issueRow.addTableCell(issueObject.id); issueRow.addTableCell(issueObject.summary); issueRow.addTableCell(issueObject.assignedTo); // etc... issueTable.addRow(issueRow); }; }; Thursday, October 22, 2009
  10. 10. issues? • Structure of “three files” completely dependent on structure of the data feed (e.g. the fields of an Issue object); HTML File, Data WebService and Client JavaScript all need to understand what an “Issue” is • Confusion as to where Business Logic or Security would go Thursday, October 22, 2009
  11. 11. client-side ajax • Code maintenance: 3 languages, 4 tiers • Ripple effect • Security concerns; Business logic stored on the client Thursday, October 22, 2009
  12. 12. server-side ajax • PHP generates client JavaScript (via traditional MVC approach) • Code generation is the key • More secure; Significant ease of maintenance Thursday, October 22, 2009
  13. 13. keep javascript “dum” • JavaScript should do the absolute bare minimum • The ECMA “Standard” • Shout-out to Douglas Crockford Yahoo! Sr. JavaScript Architect • Minimizes security holes and exposure of business logic Thursday, October 22, 2009
  14. 14. the strategy • Implement a true MVC approach • componentize your <h3>Please select a country</h3> <select id="country"> HTML Controls on <option>China</option> <option>Japan</option> the server <option>Taiwan</option> <option>UK</option> <option>USA</option> • utilize event-driven .... </select> methodologies <p>Lorem ipsum dolorem est...</p> • Add some Ajaxifying “Secret Sauce” Thursday, October 22, 2009
  15. 15. the strategy • Implement a true MVC approach $countrySelect = new Select(); $countrySelect->addOption("China"); • componentize your $countrySelect->addOption("Japan"); $countrySelect->addOption("Taiwan"); HTML Controls on $countrySelect->addOption("UK"); the server $countrySelect->addOption("US"); • utilize event-driven <h3>Please select a country</h3> methodologies <?php $countrySelect->render(); ?> <p>Lorem ipsum dolorem est...</p> • Add some Ajaxifying “Secret Sauce” Thursday, October 22, 2009
  16. 16. the strategy • Implement a true MVC approach $countrySelect->addChangeAction("countryChanged"); • componentize your function countryChanged() { HTML Controls on $stateArray = States::LoadArrayForCountry the server ($countrySelect->selectedValue); $stateSelect->removeAllOptions(); foreach ($stateArray as $state) { • utilize event-driven } $stateSelect->addOption($state); methodologies } • Add some Ajaxifying “Secret Sauce” Thursday, October 22, 2009
  17. 17. event-driven in detail <?php /* Listing for address.php */ $form = new Form(); • Use “Form State” if ($form->isNew()) { $countrySelect = new Select($form); • Every HTML Control $countrySelect-> addChangeAction("countryChanged"); is stored in Form State ... $stateSelect = new Select($form); • Form State is $stateSelect->enabled = false; ... serialized, and restored } on submit function countryChanged() {...} include("address.tpl.php"); ?> Thursday, October 22, 2009
  18. 18. event-driven in detail • Use “Form State” <html><body> • Every HTML Control <?php $form->render(); ?> is stored in Form State Country:<br/> <?php $country->render(); ?> • Form State is State:<br/> <?php $state->render(); ?> serialized, and restored </body></html> on submit Thursday, October 22, 2009
  19. 19. event-driven in detail <html><body> • Use “Form State” <form action="address.php"> <input type="hidden" id="formState" value="abcd1234..."/> • Every HTML Control Country:<br/> is stored in Form State <select id="country" onchange="form.submit();"> • Form State is ... </select> serialized, and restored State:<br/> on submit <select id="state">...</select> </body></html> Thursday, October 22, 2009
  20. 20. event-driven in detail <html><body> • Use “Form State” <html><body> <form action="address.php"> <input type="hidden" id="formState" value="abcd1234..."/> • Every HTML Control <?php $form->render(); ?> Country:<br/> is stored in Form State Country:<br/> <?php $country->render(); ?> <select id="country" onchange="form.submit();"> • Form State is ... State:<br/> </select> <?php $state->render(); ?> serialized, and restored State:<br/> </body></html> on submit <select id="state">...</select> </body></html> Thursday, October 22, 2009
  21. 21. event-driven in detail <?php /* Listing for address.php */ $form = new Form(); • Use “Form State” if ($form->isNew()) { $countrySelect = new Select($form); • Every HTML Control $countrySelect-> addChangeAction("countryChanged"); is stored in Form State ... $stateSelect = new Select($form); • Form State is $stateSelect->enabled = false; ... serialized, and restored } on submit function countryChanged() {...} include("address.tpl.php"); ?> Thursday, October 22, 2009
  22. 22. the strategy • Implement a true MVC approach • componentize your HTML Controls • utilize event-driven methodologies • Add some Ajaxifying “Secret Sauce” Thursday, October 22, 2009
  23. 23. what’s the “secret sauce” <span id="_state"> <select id="state" disabled="disabled"> <option>Select One...</option> </select> </span> • HTML wrapper for each Ajaxified DOM element Thursday, October 22, 2009
  24. 24. event-driven with mayo <?php • Make the form smarter /* Listing for address.php */ $form = new Form(); • Form should track if ($form->isNew()) { $countrySelect = new Select($form); which controls have $countrySelect-> addChangeAction("countryChanged"); changed and only return ... the updated HTML for $stateSelect = new Select($form); those controls $stateSelect->enabled = false; ... • Client JavaScript does } include("address.tpl.php"); simple DOM replacements ?> function countryChanged() {...} Thursday, October 22, 2009
  25. 25. event-driven with mayo • Make the form smarter <html><body> <form action="address.php"> • Form should track <input type="hidden" id="formState" value="abcd1234..."/> which controls have <input type="hidden" id="methodName" value=""/> changed and only return Country:<br/> the updated HTML for <select id="country" those controls onchange="AjaxCall('countryChanged');"> ... </select> • Client JavaScript does State:<br/> simple DOM <select id="state">...</select> </body></html> replacements Thursday, October 22, 2009
  26. 26. event-driven with mayo • Make the form smarter function AjaxCall(methodName) { document.getElementById.methodName.value = <updatedControlArray> methodName; • Form should track <updatedControl id="state"> <!CDATA[ XmlRpcCall(document.form.action, "defaultCallback"); which controls have <select id="state"> }; <option>...</option> changed and only return <option>...</option> function defaultCallback(updatedControlArray) { the updated HTML for </select> foreach (updatedControlArray as updatedControl) { var control = document.getElementById("_" + ]]> those controls </updatedControl> updatedControl.id); </updatedControlArray> control.innerHTML = updatedControl.html; }; • Client JavaScript does }; simple DOM replacements Thursday, October 22, 2009
  27. 27. coding demo Thursday, October 22, 2009
  28. 28. Thursday, October 22, 2009
  29. 29. so what about this? • Now, only one file is dependent on structure of the data feed Thursday, October 22, 2009
  30. 30. qcodo • Developed in 2001 Open Sourced in 2005 MIT License • Code Generation ORM Comprehensive MVC Server-Side AJAX • 120,000+ Downloads 1500+ Registered Users Thursday, October 22, 2009
  31. 31. closing thoughts... • Questions? • www.qcodo.com • mike@quasidea.com Thursday, October 22, 2009
  1. A particular slide catching your eye?

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

×