IBM DB2 Worklight Connectivity App to display the Details from an existing table

1. Open Eclipse 2. Select the Workspace. 3. Select File New Worklight Project 4. Enter the project name as Student. 5. Select the Project template as Hybrid Application. 6. Click Next. 7. Enter the Application Name as Student. 8. Select Add jQuery Mobile. 9. Select the location of the jQuery (jquery.mobile-1.3.0 folder) files. 10. Select css, images and jss folder. 11. Click Finish. 12. Select adapters. 13. Right click and select New Worklight Adpapter. 14. Select the Adapter type as SQL Adapter. 15. Enter the name as Students. 16. Check the Create procedures for offline JSONStore. 17. Click Finish. 18. Open the folder: C:\Program Files\IBM\SQLLIB\java 19. Copy the following two files: db2jcc.jar db2jcc_license_cu.jar 20. Paste into server lib in the project explorer.

BHUVANESWARAN B / AP (SS) / CSE / REC - 10

21. Open the Student.xml from the Student adapter. 22. Change the following:
<driverClass>com.mysql.jdbc.Driver</driverClass> <url>jdbc:mysql://localhost:3306/mydb</url> <user>myPassword</user> <password>myPassword</password>

23. Into:
<driverClass>com.ibm.db2.jcc.DB2Driver</driverClass> <url>jdbc:db2://localhost:50000/rec</url> <user>bhuvan</user> <password>gates</password>

24. Open the Student-impl.js from the Student adapter. 25. Change the following code:
var selectStatement = WL.Server.createSQLStatement("select COLUMN1, COLUMN2 from TABLE1"); function getStudents() { return WL.Server.invokeSQLStatement({ preparedStatement : selectStatement, parameters : [] }); }

26. Into:
var selectStatement = WL.Server.createSQLStatement("select * from student"); function getStudents() { return WL.Server.invokeSQLStatement({ preparedStatement : selectStatement, parameters : [] }); }

27. Select the Student adapter. 28. Right click and choose Run As Invoke Worklight Procedure. 29. Select the procedure name as getStudents and click Run. 30. It will open a browser containing all the records from the table. 31. Select the Student.html file from apps Student Common. 32. Double click and open the same.

BHUVANESWARAN B / AP (SS) / CSE / REC - 11

33. Select Source and remove the text Student. <!--application UI goes here--> Student 34. Switch to Design view. 35. Drag and drop a Header and change it as Rajalakshmi Engg. College by double clicking it. 36. Drag and drop a Button into the widget and change it as Show Name List. 37. Add the following code in the head section.
<script> function loadSQLRecords(){ var invocationData = { adapter : 'Student', procedure : 'getStudents', parameters : [] }; WL.Client.invokeProcedure(invocationData,{ onSuccess : loadSQLQueerySuccess, onFailure : loadSQLQueeryFailure }); } function loadSQLQueerySuccess(result){ WL.Logger.debug("Retrieve success" + JSON.stringify(result)); displayFeeds(result.invocationResult.resultSet); } function loadSQLQueeryFailure(result){ WL.Logger.error("Retrieve failure"); } function displayFeeds(items){ var ul = $('#itemsList'); for (var i = 0; i < items.length; i++) { var li = $('<li/>').html(items[i].ROLLNO); li.append($('<li/>').html(items[i].SNAME)); li.append($('<li/>').html(items[i].BRANCH)); li.append($('<hr>')); ul.append(li); } } </script>

38. Add the following code: <ul data-role="listview" id="itemsList" data-inset="true"> </ul> <!--application UI goes here-->

BHUVANESWARAN B / AP (SS) / CSE / REC - 12

39. Change the Button element as below: <a href="#" data-role="button" id="button" onclick = "loadSQLRecords()">Show Name List</a> 40. Add a Worklight Environment. 41. Build All and Deploy. 42. In the Browser Simulator click Show Name List.

BHUVANESWARAN B / AP (SS) / CSE / REC - 13