• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Click here to download the Webinar Slides
 

Click here to download the Webinar Slides

on

  • 1,002 views

 

Statistics

Views

Total Views
1,002
Views on SlideShare
1,001
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Java is 4 Tier now (Servlets, EJBs, Database) -> (Browser, Servlets, EJBs, Database)
  • Ajax has momentum There are other solutions such as Flex & now Silverlight but we like Ajax as it’s most common and an open-standard We have joined the OpenAjax initiative in order to drive more standards around Ajax and push a vendor neutral technology.
  • PHP makes Ajax applications, Web 2.0 applications by allowing to integrate with data sources, Web Services, and other Web 2.0 related technologies
  • Data sources (Db) File formats (JSON, XML (XHTML & Web Services)) Web services + mash-ups Platform bridging Search
  • Lots of PHP/Ajax toolkits (frameworks, RPC bridges, etc…)
  • Some of the characteristics of PHP which make it suitable for Ajax applications
  • process XML input from client; Very easy and natural way to leverage XML & Web Services Enables exposing OO-like models natively (XML, SOAP, Java, …)
  • Example of how natural it is to expose PHP business logic as a service to Ajax applications. Advantage of dynamic language is that developer doesn’t need to care about input/output nor about generating proxy stubs. Used Microsoft as an example as it proves the open-standards model.
  • Sample application which incorporates examples of PHP as server-side for Ajax, Search, Web Services integration Leverages Zend Framework
  • MVC Web Services Search Zend_Json Part of Zend Framework Works both with fast ext/json and pure PHP-based implementation (automatically chooses best) Can decode to PHP array or object Can work with primitive types Zend_Xml2Json Enables XML-to-JSON conversion at the middleware server layer Delivers simplicity to the front-end developer Contributed by IBM Research based on paper on DeveloperWorks: http://www-128.ibm.com/developerworks/xml/library/x-xml2jsonphp/
  • More structure, and as your Ajax application grows and there are more actions coming in from the browser it helps with keeping the application’s code manageable Ease of use, out of the box experience while allowing you to extend it and manually control many on its sub-components. We will focus on the simple and most popular use case.
  • Separating view from controller delivers more structure and delivers the best practice of separating business logic and presentation logic (forces you to think of logical domains instead of getting everything done in one place – validation, fetching data, rendering); shorter blocks of code – forces business logic into model; presentation logic into view; reduces amount of code that needs to be written. Multiple views for same action – Same action handles page request & Ajax request (In request object we have XmlHttpRequest and based on that we can explicitly call the right View).
  • Index – Shows the chat Windows with Messages and User name Log – Shows the log file and provides the search service Service – Used to communicate Web Services to browser
  • This is storage suitable for demoware. One XML file for all messages. The nice thing is that due to following the MVC pattern, making this application scale would only require improving the model and not the view/controller.
  • Periodically adds new message to Lucene index Search is handled in the model, therefore major changes in algorithm are also transparent to app
  • View for result of search. Returns XHTML which will then replace the log pane content
  • PHP data to JSON: Shows how to handle data (from data model) and communicate that via JSON to the client XML to JSON: Shows how to handle data which comes from external XML-based source (typically Web Service) and converts it to JSON automagically. Note: Yahoo!’s content analysis service does know how to return JSON but most Web Services do not. Xml2Json is in Incubator.
  • PHP data to JSON: Shows how to handle data (from data model) and communicate that via JSON to the client XML to JSON: Shows how to handle data which comes from external XML-based source (typically Web Service) and converts it to JSON automagically. Note: Yahoo!’s content analysis service does know how to return JSON but most Web Services do not. Xml2Json is in Incubator.

Click here to download the Webinar Slides Click here to download the Webinar Slides Presentation Transcript

  • Building Rich Internet Applications with PHP and Zend Framework (using AJAX) Stas Malyshev Software Architect, Zend Technologies Contributor, PHP Group Bradford Cottel Chief Evangelist, Zend Technologies IDG: RIAs offer the potential for a fundamental shift in the experience of Internet applications, leading to applications that come closer to delivering on the promise of the Internet.
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
  • Rich Internet Applications
    • Goal: Deliver desktop experience in the browser
    • Advantages of RIAs:
      • Provide desktop-like feeling, including drag & drop, sliders, and UI changes without full page refreshes
      • More responsive
        • Less visible interaction with the server
      • Asynchronous interaction with the server
      • Leverage the deployment advantages of the browser
      • Ajax is a response to the need for a richer and more easily deployable interface in the browser
    • Disadvantages of RIAs:
      • Three tier architecture is significantly more complex
    • Requires in-depth knowledge of an additional language and platform—JavaScript & browser
      • Few established standards
      • Need to deal with cross-browser compatibility
    • Not many tools in existence
    Rich Internet Applications
  • Ajax Momentum John F. Andrews, President, Evans Data Corporation, 2007: Close to half of developers surveyed say they are already working with AJAX or plan to do so in the coming year. Consistent with the increasing adoption of web services we are also seeing the same for AJAX. This framework, now more than ever, is allowing developers the means to make web-based applications function more like desktop ones. Gartner, 2006: Ajax is also rated as high impact and capable of reaching maturity in less than two years. …  High levels of impact and business value can only be achieved when the development process encompasses innovations in usability and reliance on complementary server-side processing (as is done in Google Maps). ” “ “ ” “ ”
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
  • PHP & Web 2.0
  • PHP == Web Integration
  • PHP Ajax Projects Amodules3, AJASON, AjaxAC, Cajax, HTS, jPOP, Stratos Framework, PAJAX, PAJAJ, Flexible Ajax, Tiny Ajax, SimpleJax, phpwebbuilder, SAJAX, sniPEAR
  • PHP and Ajax - Simplicity Embedded HTML < div id = &quot;DataTable&quot; > <?php $page ->DataTable->show(); ?> </ div > JSON $json = Zend_Json::encode( $phpNative ); $phpNative = Zend_Json::decode( $encodedValue );
  • PHP and AJAX - Simplicity
    • AJAX development with XML
    • PHP 5 lets us use a simple intuitive syntax with XML by making it act like a native object
    SimpleXML <?php $clients = simplexml_load_file( 'clients.xml' ); foreach ( $clients as $client ) { print &quot; { $client ->name} is { $client ->desc} &quot; ; } ?>
  • PHP for Microsoft Ajax library < html > < head > < title > Hello, World! </ title > < script type = &quot;text/javascript&quot; src = &quot;../../MicrosoftAjaxLibrary/MicrosoftAjax.js&quot; ></ script > < script type = &quot;text/javascript&quot; src = &quot;HelloService.php/js&quot; ></ script > </ head > < body > Name: < input id = &quot;name&quot; type = &quot;text&quot; /> < input type = &quot;button&quot; value = &quot;Say Hello&quot; onclick = &quot;button_click(); return false;&quot; /> < br /> Response from server: < span id = &quot;response&quot; ></ span > </ body > < script type = &quot;text/javascript&quot; > function button_click() { HelloService.SayHello($get('name').value, function (result) { $get('response').innerHTML = result; }); } </ script > </ html > <?php require_once '../../dist/MSAjaxService.php' ; class HelloService extends MSAjaxService { function SayHello( $name ) { return &quot;Hello, &quot; . $name . &quot;!&quot; ; } } $h = new HelloService(); $h ->ProcessRequest(); ?>
  • Demo – A Chat Sample Application Credits: Stas Malyshev Pádraic Brady Andi Gutmans Sébastien Gruhier – Rich Window prototype script.aculo.us
  • Chat demo application – Chatting
    • Enter ‘Brad’ & ‘Andi’ in two different browser sessions.
    • Chat back & forth between the two of us…
  • Chat demo application – Chat Log
    • Click Chat Log and have all your data appear in another pane, like so:
  • Chat demo application – Chat Log / Analyze
    • Click Analyze & via a Yahoo! REST interface, we analyze words in the log and return links to the ‘interesting’ ones.
  • Chat demo application – Chat Log / Flickr pics
    • Choose Flickr, click on a linked word, and Flickr returns a set of pictures that have that word associated. For instance, one pic Prototype brings up is that of a Tesla.
  • Chat demo application – Chat Log / Flickr pics
    • Another Prototype picture that Flickr displays is the prototype for One Laptop Per Child.
  • Chat demo application – Chat Log / Amazon
    • Choose Amazon & AWS returns matches for the word you click… like Lucene, for instance:
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
    • PHP 5 open-source web framework
    • Object-oriented, unit-tests required, & focused on best practices for modern web apps
    • Follows principle of “extreme simplicity,” making it easy to learn and easy to use for developers
    • Community-based—led by team at Zend
    • Open-source process, hosted at http://framework.zend.com under a business-friendly new BSD license
    • Corporate contributions:
  • Zend Framework Architecture
  • What is the MVC component?
    • The heart of ZF web applications
      • Model : domain-specific data
      • View : renders model (data) to UI PHP-based template engine
      • Controller : processes events, invokes changes in model
    • Simple solution for most apps
      • Sensible defaults are built-in
      • Flexible and extensible
      • Supports advanced applications
    MODEL VIEW CONTROLLER
  • How to use MVC: controllers
    • Controller classes handle groups of request URLs
      • http://zend.com/ controller /action
      • The default controller class is “IndexController”
    • Action methods in each controller class handle individual requests
      • http://zend.com/controller/ action
      • The default action method is “indexAction()”
      • Example with default action & view:
      • http://zend.com  calls the method indexAction() on the IndexController class obj [and w/a blank indexAction() method, the index.phtml view is rendered].
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
  • Chat Application structure / chat / ( index ) / log / service / ( index ) / name / message / ( index ) / log / search / keyword / flickr / amazon IndexController LogController ServiceController
  • Controller Actions
    • Each controller action method is responsible for doing one specific task e.g., IndexController:
      • init() for setup
      • Index is default for UI view
      • Message & Name are the AJAX action callbacks
    • Controller binds model and view together
      • Message & Name don’t get rendered by Zend_View_Renderer, but just return data
  • MVC entry point: index.php
    • <?php
    • // Get previous session data from .xml file
    • $config = new Zend_Config( array (), true );
    • $config ->datafile = './data/chat.xml' ;
    • // Store the config for other parts to use
    • Zend_Registry::set( 'config' , $config );
    • // Setup and run the Front Controller
    • $controller = Zend_Controller_Front::getInstance();
    • $controller ->setControllerDirectory( './application/controllers' );
    • $controller ->throwExceptions( true ); // Exceptions ON for dev mode
    • // Go!
    • $controller ->dispatch();
    • ?>
  • Model
    • class ChatData
    • Encapsulates : Implementation :
    • Session history SimpleXML
    • Search data Zend_Search_Lucene
  • Model: XML handling $this ->_xml = simplexml_load_file( $file ); $newMessage = $this ->_xml->addChild( 'message' ); $newMessage ->addChild( 'author' , $author ); $newMessage ->addChild( 'timestamp' , time()); $newMessage ->addChild( 'text' , $message ); $this ->_xml->asXML( $this ->_filename); $newMessages = $this ->_xml->xpath( &quot;/chat/message[timestamp> $last ]&quot; ); Loading data Adding new message Saving data Checking new messages
  • Model: Search handling Apr 29, 2010 Rich Internet Applications with PHP | Page $index = Zend_Search_Lucene::open( $indexfile ); $messages = $this ->getNewMessages( $since ); foreach ( $messages as $newmsg ) { $doc = new Zend_Search_Lucene_Document(); $doc ->addField(Zend_Search_Lucene_Field::UnIndexed( 'timestamp' , $newmsg [ 'timestamp' ])); $doc ->addField(Zend_Search_Lucene_Field::Text( 'author' , $newmsg [ 'author' ])); $doc ->addField(Zend_Search_Lucene_Field::Text( 'text' , $newmsg [ 'text' ])); $index ->addDocument( $doc ); } Indexing Searching $index = Zend_Search_Lucene::open( $indexfile ); $hits = $index ->find( $query ); return $hits ;
  • View
    • Each action has its own view template
    • Templates rendered automatically
      • Unless requested not to, i.e.
    $this ->_helper-> viewRenderer-> setNoRender( true );
  • View: displaying data <? if (count( $this ->hits)) { ?> < span class = &quot;searchterm&quot; > Looking for ' <? echo $this ->query; ?> ': </ span >< br/ > <? foreach ( $this ->hits as $message ) { ?> [ <? echo date( 'c' , $message ->timestamp) ?> ] < span class = &quot;screenname&quot; > <? echo $message ->author; ?> </ span > : < span class = &quot;msgtext&quot; > <? echo $message ->text; ?> </ span > < br /> <? } // if(count($this->hits)) } else { ?> Nothing found for ' <? echo $this ->query; ?> ', sorry. <? } ?> Display search results
  • AJAX communication - JSON Apr 29, 2010 Rich Internet Applications with PHP | Page // This function returns JSON (not a template), so don ’ t render a template $this ->_helper->viewRenderer->setNoRender( true ); $phpMessageArray = $data ->getNewMessages( $last ); $onlineUsersArray = $data ->getOnlineUsers(); $jsonArray = array ( 'newmessages' => $phpMessageArray , 'onlineusers' => $onlineUsersArray ); $responseJSON = Zend_Json::encode( $jsonArray ); $this ->getResponse()->setHeader( 'Content-Type' , 'text/plain' ); $this ->getResponse()->setBody( $responseJSON ); PHP data to JSON
  • AJAX communication - JSON Apr 29, 2010 Rich Internet Applications with PHP | Page $uri = 'http://search.yahooapis.com' ; $service = '/ContentAnalysisService/V1/termExtraction' ; $request = array ( 'appid' => $this ->yahoo_key, 'context' => $text , 'output' => 'xml' ); $rest = new Zend_Rest_Client(); $rest ->setURI( $uri ); $response = $rest ->restPost( $service , $request ); $this ->getResponse()->setHeader( 'Content-Type' , 'text/plain' ); $this ->getResponse()->setBody( Zend_Json::fromXML( $response ->getBody())); XML to JSON
  • Handling services - Flickr $flickr = new Zend_Service_Flickr( $this ->flickr_key); $flickrSearchptions = array ( 'page' => 1 , 'sort' => 'interestingness-desc' ); $results = $flickr ->tagSearch( $keywords , $flickrSearchptions ); // Collect results into PHP array $phpRes = array (); foreach ( $results as $result ) { $newres = array (); $newres [ 'id' ] = $result ->id; $newres [ 'title' ] = $result ->title; $img = $result ->Small; $newres [ 'src' ] = $img ->uri; $newres [ 'w' ] = $img ->width; $newres [ 'h' ] = $img ->height; $newres [ 'clickUri' ] = @ $result ->Original->clickUri; $phpRes [] = $newres ; } // Send the results out as JSON data $this ->getResponse()->setHeader( 'Content-Type' , 'text/plain' ); $this ->getResponse()->setBody(Zend_Json::encode( $phpRes ));
  • Handling services – Yahoo! through REST API $uri = 'http://search.yahooapis.com' ; $service = '/ContentAnalysisService/V1/termExtraction' ; $request = array ( 'appid' => $this ->yahoo_key, 'context' => $text , 'output' => 'xml' ); $rest = new Zend_Rest_Client(); $rest ->setURI( $uri ); $response = $rest ->restPost( $service , $request ); // Send response converted to JSON $this ->getResponse()->setHeader( 'Content-Type' , 'text/plain' ); $this ->getResponse()->setBody( Zend_Json::fromXML( $response ->getBody()));
  • Overview – Building RIAs with PHP & Zend
    • RIAs: Advantages & Disadvantages
    • Why AJAX with PHP?
    • Demo
    • Why AJAX with PHP on Zend Framework?
    • Code walkthrough
    • What’s next for RIAs with PHP on Zend ?
  • What’s next?
    • AJAX-enabled Form component in Zend Framework
      • Working on requirements and proposal
    • AJAX support in development tools – Eclipse-based
      • JavaScript editing – syntax highlighting, code completion
      • JavaScript debugging
      • Toolkit support (for instance, class browsers)
      • Opens up opportunity for using Flex
    • Significantly grow support for Web Services vendors
    • Important enhancements to our Lucene implementation
      • Range queries, wildcard queries
      • Support for Lucene 2.3 file format (faster, better, backwards compatible, …)
    • Zend Component Model
      • Server - PHP component architecture
      • Client - Ajax Toolkit, Client side messaging, Client-Server connectivity
      • Development tools - Tooling for components
    Apr 29, 2010 Rich Internet Applications with PHP | Page
  • Thanks! Stas Malyshev stas AT zend DOT com Bradford Cottel brad AT zend DOT com