• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Server-Side, PHP-Generated AJAX
 

Server-Side, PHP-Generated AJAX

on

  • 3,394 views

 

Statistics

Views

Total Views
3,394
Views on SlideShare
3,338
Embed Views
56

Actions

Likes
0
Downloads
17
Comments
0

4 Embeds 56

http://onwebdev.blogspot.com 53
http://www.slideshare.net 1
http://onwebdev.blogspot.fr 1
http://onwebdev.blogspot.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Server-Side, PHP-Generated AJAX Server-Side, PHP-Generated AJAX Presentation Transcript

    • 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
    • a bit about me... • Quasidea Development • 10+ years of IT consulting experience • Lead Developer, Qcodo Development Framework Thursday, October 22, 2009
    • a bit about you... • Developers vs. Others • AJAX • Frameworks Thursday, October 22, 2009
    • a bit of history... Database • PHP 3 and PHP 4 PHP Thursday, October 22, 2009
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • client-side ajax • Code maintenance: 3 languages, 4 tiers • Ripple effect • Security concerns; Business logic stored on the client Thursday, October 22, 2009
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • the strategy • Implement a true MVC approach • componentize your HTML Controls • utilize event-driven methodologies • Add some Ajaxifying “Secret Sauce” Thursday, October 22, 2009
    • 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
    • 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
    • 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
    • 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
    • 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, October 22, 2009
    • 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
    • closing thoughts... • Questions? • www.qcodo.com • mike@quasidea.com Thursday, October 22, 2009