Developing End-to-end Ajax Applications, part 3rd: Integrating, testing, and debugging applications

In the first two parts of this series, you set up a development environment that consists of the LAMP-style runtime and the Eclipse IDE. Defines a fictional banking scenario to demonstrate important Ajax concepts. It then completes part of the scenario, including creating a database, middle-tier PHP logic, and a simple XHTML to provide a single page browser GUI, as well as CSS style code and several XML HTTP Request (XHR) utility functions. In the third (and final) installment of this series, we'll use JavaScript to implement Ajax client logic to complete the rest of the scenario. Also use PHP to build a representational state Transfer (REST) Request allocator to complete customer bank tasks, such as deposits, withdrawals, and stock portfolio value queries. Also use PHP to develop a SOAP (simple Object access Protocol) Web service client that accesses a real third-party (free) Web service. You'll see how to integrate all the components developed in this series (XHTML, CSS, JavaScript, PHP, Web service client, and MySQL). Finally, this article explains the basic approach to using LAMP-style runtime deployment, testing, and debugging scenarios. By then we have completed a more complex end-to-end scenario example that demonstrates the powerful features of Ajax clients, Apache-php-mysql runtimes, and associated Eclipse Ides.

Brief introduction

Before you begin to learn this article, make sure that the bank scene artifact Bank, bank Logic, and bank Portal (developed in part 2nd of this series) remain intact in the Eclipse IDE. These artifacts include SQL scripts that create and populate the database, PHP code that provides database access, and XHTML, CSS, and XHR required for a single page browser application. The code written with these artifacts provides only a subset of the functionality of the banking scenario shown in Figure 1. There is also a lack of components that combine these already developed artifacts. If you preview the XHTML file, you will see that it displays the individual UI screens that are unique to the application in a browser window. It is still necessary to write appropriate client-side JavaScript logic to integrate these UI screens to produce the effect of a single page browser application. In client code, you also need to add the appropriate XHR asynchronous communication logic. The bank teller function cannot be performed without client JavaScript code.

Figure 1. Bank scene

You may notice that all HTML forms that provide a specific bank teller feature send user data to a REST-based middle-tier service. We will implement this service in another PHP module that accepts a bank teller's browsing request, including deposits, withdrawals, and current stock portfolio value queries. The PHP module acts as a request allocator for bank operations, parsing the bank teller's request and invoking the appropriate bank Logic function to handle the request. You'll see how easy it is to write such a REST service in PHP.

After developing the PHP service for the REST request assignment, our focus will be on a. NET-based WEB service that can be accessed over the Internet. This free WEB service provides the current price for a given stock. We will develop a Web service client in the PHP middle tier so that the Web service can be invoked remotely from the PHP-based bank operation request allocator to obtain a stock quote. The bank operation request allocator then invokes the Bank Logic PHP module with the current stock price to calculate the current stock portfolio value of the given account holder. You'll learn about using SOAP to access WEB services, and learn about the two popular data interchange formats of XML and JavaScript Object notation (JSON).