1. This document provides instructions for creating a sample application that allows users to search for cities by country from a database. It includes steps for connecting to an Oracle database, creating tables, building out the application logic in AnyPoint Studio using Java beans and Mule flows to retrieve and return city data in JSON format. 2. Key components that are configured include an HTTP listener, Oracle database connector, parsing an HTML template, mapping JSON to Java objects, querying the database table, and returning the results in JSON through a GET request. 3. The application allows a user to select a country which will trigger a database query to return the corresponding cities from the CITY table, and display them on the HTML page using data

1. CITYSEARCH
SAMPLE OF CONFIGURATION FLOW USING A DB CONNECTOR AND
BUILD APPLICATION WITH ANYPOINTSTUDIO.
CREATE BY GIUSEPPE FIORE
MULESOFT TRAINING

2. Through this example you will be ablo to:
1) Connect your application with database oracle
2) Create Table oracle
3) Custom Java Class for get value from JSON Object
4) Configure the component AnyPointStudio
1) Run Application with AnyPointStudio
CREATE BY GIUSEPPE FIORE

3. Application Search City
Our application will be able to provide the list of city (stored on database
oracle) choosing a country from web application.
Example:
DB
CREATE BY GIUSEPPE FIORE

4. Create Table Oracle
CREATE TABLE CITY
(
CODE VARCHAR2(254 BYTE),
CITY VARCHAR2(254 BYTE),
COUNTRY VARCHAR2(254 BYTE)
);
Insert into CITY (CODE, CITY, COUNTRY) Values ('NAP', 'NAPOLI', 'ITALY');
Insert into CITY (CODE, CITY, COUNTRY) Values ('ROM', 'ROMA', 'ITALY');
Insert into CITY (CODE, CITY, COUNTRY) Values ('FIR', 'FIRENZE', 'ITALY');
Insert into CITY (CODE, CITY, COUNTRY) Values ('NY', 'NEW YORK', 'USA');
Insert into CITY (CODE, CITY, COUNTRY) Values ('WAS', 'WASHINGTON', 'USA');
Insert into CITY (CODE, CITY, COUNTRY) Values ('BS', 'BOSTON', 'USA');
CREATE BY GIUSEPPE FIORE

5. Create Template HTML
https://drive.google.com/folderview?id=0BwcFnStGY0u4U095b0hIU2Q0UE0&usp=sharing
The template HTML use JSON object
to send result, throught ajax call, at
flow mulesoft:
Preview
You can get the template HTML here:
ajaxRequest.open("POST", "/citysearch", true);
ajaxRequest.setRequestHeader("Content-type",
"application/json");
ajaxRequest.send(formData);
var jsonObject = {"destination" :
destinationMenu.options[destinationMenu.selectedIndex].value};
var formData = JSON.stringify(jsonObject);
CREATE BY GIUSEPPE FIORE

6. Create Java Bean
https://drive.google.com/folderview?id=0BwcFnStGY0u4U095b0hIU2Q0UE0&usp=sharing
You can get the Java Bean here:
Create the following java bean:
 CityRequest.java: The java bean will store the value present into JSON object.
 City.java: The java bean will store the record extract on database.
jsonObject = {"destination": ITALY}
CityRequest
• Destination = «ITALY»
HASHMAP
{CODE=NAP, COUNTRY=ITALY, CITY=NAPOLI}
{CODE=ROM, COUNTRY=ITALY, CITY=ROMA}
{CODE=FIR, COUNTRY=ITALY, CITY=FIRENZE}
CREATE BY GIUSEPPE FIORE

7. Package Explorer
Copy the beans and the template HTML like show in the following image:
CREATE BY GIUSEPPE FIORE

8. Create a new project
Copy the beans and the template HTML like show in the follow
Create a new project «searchcity»
CREATE BY GIUSEPPE FIORE

9. Global Element: HTTP Listener
Creating the listener and specify the url of configuration for start ours application:
 Host: localhost (127.0.0.1)
 Port: 8081
CREATE BY GIUSEPPE FIORE

10. Global Element: Oracle Configuration
Creating the oracle configuration and specify the parameters of configuration for connect your application to database
oracle:
 Host: localhost (127.0.0.1)
 Port: 1521
 Instance: city
 User: city
 Password: city
CREATE BY GIUSEPPE FIORE

11. Flow getTemplate: 1 - HTTP Element
Start the flow getTemplate insert the first element HTTP like show in the following image:
CREATE BY GIUSEPPE FIORE
 Connector Configuration: Set the connector configuration like show in the slide 9
 Path: Use the string «citysearch»
 Allowed Methods: GET

12. Flow getTemplate: 2 - Parse Template Element
Continue the flow getTemplate insert the Parse Template like show in the following image:
CREATE BY GIUSEPPE FIORE
 Display Name: Parse template
 Location: Insert your path. You should search the file CityFinder.html into folder src/main/resources
 Allowed Methods: GET

13. Flow getTemplate: 3 - Final
CREATE BY GIUSEPPE FIORE

14. Flow getResult: 1 - HTTP Element
CREATE BY GIUSEPPE FIORE
Start the flow getResult insert the first element HTTP like show in the following image:
 Connector Configuration: Set the connector configuration like show in the slide 9
 Path: Use the string «citysearch»
 Allowed Methods: GET

15. Flow getResult: 2 – JSON to Object
CREATE BY GIUSEPPE FIORE
Continue the flow getResult insert the new element «JSON To Object» like show in the following image:
 Return Class: Configure the class «CityRequest»

16. Flow getResult: 3 – Set Variable
CREATE BY GIUSEPPE FIORE
Continue the flow getResult insert the new element «Set Variabile» like show in the following image:

17. Flow getResult: 4 – DATABASE
CREATE BY GIUSEPPE FIORE
Continue the flow getResult insert the new element «DATABASE» like show in the following image:

18. Flow getResult: 5 – EXPRESSION
CREATE BY GIUSEPPE FIORE
Continue the flow getResult insert the new element «Expression» like show in the following image:

19. Flow getResult: 6 – LIST<MAP> To Pojo
CREATE BY GIUSEPPE FIORE
Continue the flow getResult insert the new element «LIST<MAP> To Pojo» like show in the following image:

20. Flow getResult: 7 – Object To JSON
CREATE BY GIUSEPPE FIORE
Start the flow getResult insert the new element «Object To JSON» like show in the following image:

21. Flow getResult: 8 – Logger
CREATE BY GIUSEPPE FIORE
Finish the flow getResult insert the new element «Logger» like show in the following image:

22. Run Application
CREATE BY GIUSEPPE FIORE
Click onRun
If status is «Deployed» then you can ready to test your
application!