IBM DB2 Create Read Update Delete (CRUD)

1. Create a database. db2 => create database rec DB20000I The CREATE DATABASE command completed successfully. 2. Connect to the database. db2 => connect to rec Database Connection Information Database server SQL authorization ID Local database alias 3. Create a table. db2 => create table student (rollno varchar(9), varchar(20), branch varchar(10)) DB20000I The SQL command completed successfully. 4. Display the tables. db2 => list tables Table/View ---------STUDENT Schema ------BHUVAN Type ----T Creation time --------------2014-03-11-21.30.48.468002 sname = DB2/NT 9.7.2 = BHUVAN = REC

1 record(s) selected. 5. Display the table structure. db2 => describe table student Data type schema --------SYSIBM SYSIBM SYSIBM Column LengthScale Nulls ----------------9 0 Yes 20 0 Yes 10 0 Yes

Column name ----------ROLLNO SNAME BRANCH

Data type name --------------VARCHAR VARCHAR VARCHAR

3 record(s) selected.

6. Insert rows in the table. db2 => insert DB20000I The db2 => insert DB20000I The db2 => insert DB20000I The into student values('201101001','Arun','CSE') SQL command completed successfully. into student values('201101002','Babu','CSE') SQL command completed successfully. into student values('201101003','Chitra','CSE') SQL command completed successfully.

7. Display the records from the table. db2 => select * from student ROLLNO --------201101001 201101002 201101003 SNAME -------------------Arun Babu Chitra BRANCH ---------CSE CSE CSE

3 record(s) selected.

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

IBM DB2 Worklight Connectivity App to perform CRUD operations

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 Student apps Student common Student.html 13. Remove the text Student from the source 14. Rename page with MainPage 15. Select adapters. 16. Right click and select New Worklight Adpapter. 17. Select the Adapter type as SQL Adapter. 18. Enter the name as Students. 19. Check the Create procedures for offline JSONStore. 20. Click Finish. 21. Open the folder: C:\Program Files\IBM\SQLLIB\java 22. Copy the following two files:

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

db2jcc.jar db2jcc_license_cu.jar 23. Paste into server lib in the project explorer. 24. Open the Student.xml from the Student adapter. 25. Change the following:
<driverClass>com.mysql.jdbc.Driver</driverClass> <url>jdbc:mysql://localhost:3306/mydb</url> <user>myPassword</user> <password>myPassword</password>

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

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

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

30. Change the following code:

var addStatement = WL.Server.createSQLStatement("insert into TABLE1 (COLUMN1, COLUMN2) values (?, ?)"); function addStudent(param1) { return WL.Server.invokeSQLStatement({

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

preparedStatement : addStatement, parameters : [param1] }); }

31. Into:
var addStatement = WL.Server.createSQLStatement("insert into student values (?, ?, ?)"); function addStudent(param1, param2, param3) { return WL.Server.invokeSQLStatement({ preparedStatement : addStatement, parameters : [param1, param2, param3] }); }

32. Change the following code:

var updateStatement = WL.Server.createSQLStatement("update TABLE1 set COLUMN1=?, COLUMN2=?"); function updateStudent(param1) { return WL.Server.invokeSQLStatement({ preparedStatement : updateStatement, parameters : [param1] }); }

33. Into:
var updateStatement = WL.Server.createSQLStatement("update student set sname=?, branch=? where rollno=?"); function updateStudent(param1, param2, param3) { return WL.Server.invokeSQLStatement({ preparedStatement : updateStatement, parameters : [param1, param2, param3] }); }

34. Change the following code:

var deleteStatement = WL.Server.createSQLStatement("delete from TABLE1 where COLUMN1=?"); function deleteStudent(param1) { return WL.Server.invokeSQLStatement({ preparedStatement : deleteStatement, parameters : [param1] }); }

35. Change the following code:

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

var deleteStatement = WL.Server.createSQLStatement("delete from student where rollno=?"); function deleteStudent(param1) { return WL.Server.invokeSQLStatement({ preparedStatement : deleteStatement, parameters : [param1] }); }

36. Select adapters Student 37. Right click Run As Invoke worklight procedure 38. Procedure name addStudent 39. Parameters 201101004, Dhamu, CSE

40. Click Run

Invocation Result of procedure: 'addStudent' from the Worklight Server: { "isSuccessful": true, "updateStatementResult": { "updateCount": 1 } }

41. Select adapters Student 42. Right click Run As Invoke worklight procedure 43. Procedure name getStudents 44. Parameters 201101004 45. Click Run
Invocation Result of procedure: 'getStudents' from the Worklight Server: { "isSuccessful": true, "resultSet": [ { "BRANCH": "CSE", "ROLLNO": "201101004", "SNAME": "Dhamu" } ] }

46. Select adapters Student 47. Right click Run As Invoke worklight procedure

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

48. Procedure name updateStudent 49. Parameters Ezhil, IT, 201101004 50. Click Run
Invocation Result of procedure: 'updateStudent' from the Worklight Server: { "isSuccessful": true, "updateStatementResult": { "updateCount": 1 } }

51. Select adapters Student 52. Right click Run As Invoke worklight procedure 53. Procedure name deleteStudent 54. Parameters 201101004 55. Click Run
Invocation Result of procedure: 'deleteStudent' from the Worklight Server: { "isSuccessful": true, "updateStatementResult": { "updateCount": 1 } }

56. Select the Student.html file from apps Student Common. 57. Double click and open the same. 58. jQuery Mobile Widgets 59. Place Header Student Details 60. Button Add (btnAdd) 61. Button View (btnView) 62. Button Modify (btnModify) 63. Button Delete (btnDelete) 64. Add a Page (rename to AddPage)

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

65. Add a Page (rename to ViewPage) 66. Add a Page (rename to ModifyPage) 67. Add a Page (rename to DeletePage) 68. Select the button Add Edit Navigation Link Inline link target AddPage 69. Select the button View Edit Navigation Link Inline link target ViewPage 70. Select the button Modify Edit Navigation Link Inline link target ModifyPage 71. Select the button Delete Edit Navigation Link Inline link target DeletePage 72. Open Add Page 73. Drag and drop Form into the Content 74. Drag and drop the following into Form a. Header (Student Details Add) b. Text Input (addRollNo) c. Text Input (addSName) d. Text Input (addBranch) e. Button (btnSave) 75. Change the following code:
<a href="#" data-role="button" id="btnSave">Save</a>

76. Into:
<a href="#" data-role="button" id="btnSave" onclick="loadSave()">Save</a>

77. Open Student.js and write the following code:

function loadSave() { var mrollno = document.getElementById('addRollNo').value.toString(); var msname = document.getElementById('addSName').value.toString(); var mbranch = document.getElementById('addBranch').value.toString(); var invocationData = { adapter : 'Student', procedure : 'addStudent', parameters : [mrollno, msname, mbranch] }; WL.Client.invokeProcedure(invocationData,{ onSuccess : loadSaveSuccess, onFailure : loadSaveFailure }); } function loadSaveSuccess(result){

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

WL.Logger.debug("Retrieve success" + JSON.stringify(result)); alert("Details Added Successfully...!"); } function loadSaveFailure(result){ WL.Logger.error("Retrieve failure"); }

78. Open View Page 79. Drag and drop the Form into the Content 80. Drag and drop the following into Form a. Header (Student Details View) b. Text Input (viewRollNo) c. Text Input (viewSName) d. Text Input (viewBranch) e. Button (btnView) 81. Change the following code:
<a href="#" data-role="button" id="btnView">View</a>

82. Into:
<a href="#" data-role="button" id="btnView" onclick="loadView()">View</a>

83. Open Student.js and write the following code:

function loadView() { var mrollno = document.getElementById('viewRollNo').value.toString(); var invocationData = { adapter : 'Student', procedure : 'getStudents', parameters : [mrollno] }; WL.Client.invokeProcedure(invocationData,{ onSuccess : loadViewSuccess, onFailure : loadViewFailure }); } function loadViewSuccess(result){ WL.Logger.debug("Retrieve success" + JSON.stringify(result)); var studentList = result.invocationResult.resultSet; $('#viewSName').val(studentList[0].SNAME); $('#viewBranch').val(studentList[0].BRANCH); alert("Details Viewed Successfully...!"); } function loadViewFailure(result){ WL.Logger.error("Retrieve failure"); }

84. Open Modify Page BHUVANESWARAN B / AP (SS) / CSE / REC - 9

85. Drag and drop the Form into the Content 86. Drag and drop the following into Form a. Header (Student Details Modify) b. Text Input (modifyRollNo) c. Text Input (modifySName) d. Text Input (modifyBranch) e. Button (btnView) f. Button (btnModify) 87. Change the following code:
<a href="#" data-role="button" id="btnView">View</a> <a href="#" data-role="button" id="btnModify">Modify</a>

88. Into:
<a href="#" data-role="button" id="btnView" onclick="loadModifyView()">View</a> <a href="#" data-role="button" id="btnModify" onclick="loadModify()">Modify</a>

89. Open Student.js and write the following code:

function loadModifyView() { var mrollno = document.getElementById('modifyRollNo').value.toString(); var invocationData = { adapter : 'Student', procedure : 'getStudents', parameters : [mrollno] }; WL.Client.invokeProcedure(invocationData,{ onSuccess : loadModifyViewSuccess, onFailure : loadModifyViewFailure }); } function loadModifyViewSuccess(result){ WL.Logger.debug("Retrieve success" + JSON.stringify(result)); var studentList = result.invocationResult.resultSet; $('#modifySName').val(studentList[0].SNAME); $('#modifyBranch').val(studentList[0].BRANCH); alert("Details Viewed Successfully...!"); } function loadModifyViewFailure(result){ WL.Logger.error("Retrieve failure"); } function loadModify() {

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

var mrollno = document.getElementById('modifyRollNo').value.toString(); var msname = document.getElementById('modifySName').value.toString(); var mbranch = document.getElementById('modifyBranch').value.toString(); var invocationData = { adapter : 'Student', procedure : 'updateStudent', parameters : [msname, mbranch, mrollno] }; WL.Client.invokeProcedure(invocationData,{ onSuccess : loadModifySuccess, onFailure : loadModifyFailure }); } function loadModifySuccess(result){ WL.Logger.debug("Retrieve success" + JSON.stringify(result)); alert("Details Modified Successfully...!"); } function loadModifyFailure(result){ WL.Logger.error("Retrieve failure"); }

90. Open Delete Page 91. Drag and drop the Form into the Content 92. Drag and drop the following into Form a. Header (Student Details Delete) b. Text Input (deleteRollNo) c. Button (btnDelete) 93. Change the following code:
<a href="#" data-role="button" id="btnDelete">Delete</a>

94. Into:
<a href="#" data-role="button" id="btnDelete" onclick="loadDelete()">Delete</a>

95. Open Student.js and write the following code:

function loadDelete() { var mrollno = document.getElementById('deleteRollNo').value.toString(); var invocationData = { adapter : 'Student', procedure : 'deleteStudent', parameters : [mrollno] };

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

WL.Client.invokeProcedure(invocationData,{ onSuccess : loadDeleteSuccess, onFailure : loadDeleteFailure }); } function loadDeleteSuccess(result){ WL.Logger.debug("Retrieve success" + JSON.stringify(result)); alert("Details Deleted Successfully...!"); } function loadDeleteFailure(result){ WL.Logger.error("Retrieve failure"); }

96. Add a Worklight Environment. 97. Build All and Deploy. 98. In the Browser Simulator click Show Name List. 99. Perform all the operations. 100. Check the database values after each operation.

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

101.

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