Ajax (Asynchronous JavaScript + XML) is rapidly becoming a fashionable technology that can be used for Web applications running in browsers. ProgramProvides software features with desktop quality. Open source software (such as Linux-Apache-mysql-PHP, namely lamp) and Java 2 platform based on open standards, Enterprise Edition middleware (such as IBM WebSphere Application Server community Edition) it provides excellent support for developing and deploying Ajax web applications. This three-part series discusses how to use open source middleware to develop end-to-end Ajax applications. This is the first article in this series. Article. If you are a newbie in web development, you can read and understand what is written in XHTML, CSS, JavaScript, PHP, and SQL. CodeThis document is suitable for you. After reading this article, you will have a good understanding of the basic concepts of Ajax and the functions that AJAX may play in three-tier Web application scenarios.
Ajax is part of Web 2.0 technology and has recently received great attention from architects, developers, product managers, and Web application users. Ajax programming is composed of proven technologies, such as XHTML, JavaScript, CSS, and xml http Request (xhr ). Popular service access and data exchange technologies, such as representational state transfer (rest) and JavaScript Object Notation (JSON), are also very suitable for Ajax technology. These proven technologies on the client can be combined with open source technologies such as PHP, Python, and Ruby to extend ajax to the application development field in the middle layer. On this combination, you can also use the open source database MySQL to create a data layer.
Other technologies that match the Ajax programming technology include eclipse-based development tools that are open source and can be downloaded and used for free. All the clients, middle layers, and data layer technologies mentioned above are combined to form a powerful web application development technology combination. But how can we develop and deploy end-to-end Ajax applications? This three-part article series will help you answer this question by studying an end-to-end development scenario.
Typical enterprise-level Web applications need to deal with many factors to ensure high robustness. To learn the core features of the selected open source software, we do not consider security, scalability, availability, and other key enterprise-level features. You should learn these features from other materials. All the discussions in this article are only applicable to the Ajax applications described in our scenario. Specifically, this series details how to create a MySQL database, design and develop the middle layer/database logic in the PHP runtime environment, and then create a real single-page Ajax client interface using JavaScript. This series contains sample code, describes the steps required to develop and test Ajax applications in eclipse, and explains how to develop and test Ajax applications in Firefox (client), Zend PHP (middle layer), and MySQL (data layer). This end-to-end application involves the comprehensive application of XHTML, CSS, JavaScript, xhr, Dom, rest, soap, JSON, XML, PHP, MySQL, and eclipse, it involves many built-in features of the open source platform mentioned above. In short, this series describes how to properly isolate application layers to form clean and elegant web applications.
Introduction
As the title points out, this three-part series will detail some core functions of developing end-to-end Ajax applications. These features include specific technologies in the following three application layers:
The client contains technologies such as XHTML, CSS, JavaScript, and xml http Request (xhr. In addition to the several middle-layer open source technology mentioned above, this series also uses PHP, because PHP is very simple and widely used at present. Use the MySQL database in the data layer. In addition, this series uses popular web service technologies such as rest, soap, JSON, and XML. We will use all these technologies in one scenario.
To develop end-to-end Ajax applications, follow the steps in the following sections to install and configure the runtime environment and development environment. Then, instead of providing the Hello world application as usual, we analyze a complicated banking scenario. This scenario explains how to use all the technologies mentioned above in a fictitious banking environment, it involves the back-end databases of banks, browser-based bank customer portals, and a real third-party financial web service.
Required software packages
To develop and deploy banking scenarios that span all three application layers, you need to select Software for the following components in these layers:
There are many open source software that can meet the needs of each layer. The following software is used in this series:
Web Browser:Mozilla Firefox 2.0.0.4 or later. Firefox has many advantages, including availability, online security, and customization through a large number of extended applications. You also need to use firebug, which is a browser application debugger extension of Firefox.
Database Server:MySQL 5.0.41 or later. MySQL adopts the Client/Server mode and embedded mode. It is completely written in C and C ++. It has two versions: Enterprise Server and Community Server. The Community Server is free and sufficient to meet the needs of the banking scenario in this article.
Web Server:Apache Web Server 2.2.2. Apache allows flexible configuration and can be expanded using third-party modules.
Intermediate layer server:Zend core 2.0.1 or later. This free open source server supports PHP 5. It gets powerfulCommunityYes. It includes an Apache web server and supports databases such as MySQL, IBM DB2, and Oracle. Zend core for IBM is specially tuned for IBM DB2. Figure 1 shows the overview of Zend core.
Integrated Development (Environment ):Eclipse PDT 0.7 RC3 or later. PDT is a PHP development tools framework for the eclipse platform. It contains all development components required for developing PHP applications. PHP debugging is also supported in this IDE. Zend, IBM, and other companies donate it to the open source code campaign. At the time of writing this article, it just appeared and is suitable for developing the intermediate layer logic of our banking scenario.
Client ide:Aptana web ide 0.2.8.14433 or later. This is a free open-source cross-platform JavaScript-centered development environment that can be used to develop Ajax browser applications. It provides encoding support for Javascript, HTML, and CSS. It supports JavaScript debugging and has built-in support for several Ajax frameworks. In addition, it is based on Eclipse.
Install and set up these open source software packages according to the steps in the following sections to establish an environment for developing and deploying end-to-end Ajax applications. (Note: All installation and Development instructions in this article are for the Microsoft Windows operating system .)
Figure 1. Zend core Overview
Install Mozilla Firefox
Follow these steps to install Mozilla Firefox:
Install MySQL
Follow these steps to install the MySQL database server:
Install Apache Web server and Zend core PHP server
Zend Technologies Ltd provides Zend core for free. It contains the Apache Web server. Follow these steps to install the Apache web server and Zend core PHP server.
To download Zend core for free, you must register it on the Zend web site. If you have not yet registered, visit the Zend core URL in the references and register it.
Figure 2. Zend core configuration screen
Install eclipse's php development tool (PDT)
At the time of writing this article, PDT is only a candidate plug-in. It is not a fully released eclipse Platform Plug-in. Perform the following steps to install and configure eclipse PDT. (PDT can be obtained from both eclipse and Zend web sites. The Zend web site provides the same version as the eclipse web site, but adds the Zend PHP debugging tool .)
Listing 1. Content of the php. ini file
; Remember to merge the first two lines below the [Zend] section; To appear in one line .; otherwise, eclipse PDT (PhP Development Tool) will not work properly .; if needed, modify it with the correct Zend debugger directory name; as in your eclipse installation. [Zend] extension_dir = c: \ eclipse \ plugins \ Org. zend. PHP. debug. debugger. win32.x86 _ 0.1.7 \ resources \ PhP5 export de_path = ". "extension = php_mysqli.dll zend_extension_ts =. \ zenddebugger. DLL zend_debugger.allow_tunnel = 127.0.0.1/32 zend_debugger.allow_hosts = 127.0.0.1/32 zend_debugger.expose_remotely = always |
Figure 3. Eclipse PDT Configuration
Install Aptana web ide
To install Aptana web IDE, you only need to add a plug-in to the eclipse PDT installed earlier. When writing this article, the Aptana web ide version is 0.2.8.14433. Follow these steps to install the latest version of Aptana web ide required for Ajax development:
If all operations are normal so far, you have already set up a complete Eclipse IDE, which can be used to develop, test, and debug the artifacts of the banking scenario application, for example, XHTML, JavaScript, xhr, PHP, and MySQL code. You can also configure Eclipse IDE to use the Zend core PHP server. The efficient combination of eclipse and Zend core can meet all Ajax development and deployment requirements. Now, let's consider a complicated scenario. We will develop and deploy this scenario in this powerful environment.
Ajax and PHP-based scenarios
Figure 4 describes a complex scenario that provides some banking-related functions in an Ajax-PHP environment. This scenario introduces some technical components and divides them into the following layers based on the traditional architecture:
On the client side, browser-based controls are used in this scenario. These controls are enabled through single-page XHTML user interface elements and xhr and JSON. In the middle layer, it uses PHP technology, such as simplexml, services_json, HTTP request processing program, and PHP soap client. On the data layer, it uses SQL and ODBC.
You can also divide the scenario based on the technical components of the application:
We can see that this scenario meets the basic and important factors of the Ajax environment. Among the many technical solutions, we will select a special implementation method to help you get as much gains as possible from this scenario. The overall design goal is not to complicate the scenario, so unnecessary flashy screens are not provided on the client. I hope that you can more easily understand the details involved in developing and deploying various scenario artifacts in Eclipse IDE (PDT and Aptana) and Zend core. In addition, this scenario also uses a PHP Web service client to access a. Net-based Real Web Service residing on the Internet to demonstrate interoperability. To focus on the core features of the selected open source software, this scenario does not consider security, scalability, and availability features-You should learn these features from other sources.
Figure 4. Banking scenarios
Scenario details
When reading the following sections, refer to figure 4 to understand the details of the scenario. This scenario mainly implements several common bank cashier functions in the Ajax and PHP environments. This section describes the modules that constitute this scenario.
Bank data (MySQL)-Data
Bank Customer information is stored in a database table. I will create this table in the MySQL database. It is a compact but powerful community edition server. For this series of scenarios, all customer data will be simultaneously filled in the database table. After that, you can use the ODBC driver provided by Zend core to obtain and update the stored customer data. The type of database access (such as reading or writing) is determined based on the nature of the bank cashier's function.
Banking logic function (PHP Code)-Model
Now, consider the core banking logic required to provide the bank cashier function. In this scenario, the following bank cashier functions must be supported:
Because these four functions require access to the database, you must create a PHP file to provide the required database functions. It isolates the database functions from the logic of other middle layers. By providing core bank cashier functions in this way, all callers of these functions can be provided with database results packaged in a consistent manner. A PHP associated array is used to pass the results of the core banking logic.
Bank portal user interface (Ajax)-View
Now, we want to provide a bank cashier with a user interface to execute four core functions. You can access the core banking logic encapsulated in PHP code through the fat client or thin client. This scenario is used to develop a single-page Ajax browser user interface for bank cashier.
When using PHP on the middle layer, a common practice is to use PHP code to output the necessary XHTML, CSS, and JavaScript. In this scenario, we do not need PHP code to output any client user interface code. This means that all code associated with the bank portal is provided only when the client starts. We will use XHTML and CSS to write all user interface elements and JavaScript to write client logic. These artifacts (XHTML, CSS, and JavaScript) generate all user interface elements to meet the needs of the Bank portal in the banking scenario. This means that the Apache Web Server only needs to pass the client User Interface content to the browser once. This one-time code transfer process occurs when a bank cashier accesses the URL of this application. After that, the Bank portal client only communicates with the server to exchange data, rather than to obtain the XHTML, CSS, JavaScript, and other content.
This abandons the traditionalClick and waitIn the traditional example, for each user operation, the browser will communicate with the intermediate layer server to download the content. One of the outstanding features of a single-page Ajax application is that it downloads the content once at startup and does not need to retrieve the page from the server. After the startup, the single-page Ajax client application communicates with the logic of the intermediate layer server, only for the unique data exchange of the application. Therefore, the middle layer logic is more compact. It only focuses on the business logic and does not have to bear the responsibility for passing content to the browser. This method can better isolate the application layer and generate a clean and elegant web application design.
Bank actions module (PHP Code)-Controller
After discussing the browser user interface, we should consider how to perform the bank operations selected by the bank cashier through the network. In this scenario, the Bank Action Command selected by the cashier and the required input data are sent to a PHP code module, which serves as a browser and (described in the previous section) proxy/intermediary between core banking logic in the PHP module. The bank actions PHP module supports calling the service functions in the middle layer in the rest style. The bank actions PHP module receives the bank teller Action Command and calls the bank logic PHP module to obtain the required results. Call the appropriate banking logic to access the database and obtain results. After the bank logic module returns the result, the Bank actions module sends the result to the browser in JSON format. In short, the Bank actions PHP module is the Scheduler for bank cashier requests, which calls the appropriate bank logic function to process these requests.
XML Web Service client (soap access to. Net services from PhP) -- helper
In addition to acting as a proxy/intermediary, the Bank actions PHP module is also used as a PHP Web Service soap client, which can obtain the value of the current stock in the portfolio of specific customers. This helps you learn how to use PHP to generate Web service clients. In this scenario, the Bank actions PHP module calls the soap xml Web Service for a real remote Web Service Running on the Internet. This Web Service is a. Net-based Web Service, which allows you to understand the interoperability features of PHP. You will also learn how to use PHP simplexml API for XML parsing.
Now, you should have a clear understanding of the high-level design objectives of this scenario. This overview should be sufficient to help you develop, test, integrate, and deploy core modules in banking scenarios.
Main scenario tasks
In part 2 and Part 2 of this article series, we will execute the following tasks to complete this scenario and make it runable, it also explains how to develop it in Eclipse IDE and the underlying technology for deploying it in Zend core:
Conclusion
Simple and low-cost Web platforms have become popular among users around the world. In particular, the open source eclipse tool and Zend core provide a great deal of functionality, allowing organizations to consider migrating from a proprietary platform like the. NET environment to an open source platform. For these customers, the software provides an excellent zero-cost development and deployment environment that can coexist with existing proprietary infrastructure. In part 1 of this series, you will experience real and interesting Ajax-php development. Before learning Part 1, familiarize yourself with the features of eclipse PDT, Aptana plug-ins, and Zend core runtime.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
