Lance WSAD Manual

  • 363 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A COMPLETE PROGRAM USING IBM WEBSPHERE STUDIO APPLICATION DEVELOPER V5 Version 1b.1 April 2, 2004 IDS 517 University of Illinois at Chicago ©2004 Gary Lance
  • 2. NOTE: The images in this report may differ from your images, as these images are taken from WSAD 5.1. But, they contain the same information as in WSAD 5.0. Also, when arranged in rows and columns, the images read from left to right, and then down. NOTE: It is very important to save resources, such as memory. Throughout this document, in the process of creation of entities, views will open. For example, when you create an SQL statement, a window with many views will open. When you are done with this view, it may not be needed. Close the unneeded windows by clicking the “X” at the view’s upper right corner. By closing these unneeded windows, you will make more memory available on you pc. I. CREATE A TABLE USING WSAD, THEN EXPORT IT TO THE DATABASE. A. CREATE WEB AND ENTERPRISE APPLICATION PROJECTS 1. Open WSAD, and go to the Web Perspective. 2. Create a new Web Project “PracticeWebProject”. 3. Create a new EAR “PracticeEAR”. IDS 517 Page 2 of 43
  • 3. Figure 1. Create a New Web Project Figure 2. Put Web Project into PracticeEAR Figure 3. Web Project Features Figure 4. Web Project and EAR in Hierarchy B. DATABASE SETUP – UPDATING PERSISTENT DATABASE FROM LOCAL WSAD DATABASE 1. Get a connection to the database. 2. Import it into your project. 3. Create your tables, 4. Update the persistent database on the DB Server. This will update the tables on the database. NOTE: For now, we will assume that all you have to do is “reconnect” to get a connection to the database. Assume the connection has the name idsConnection. Select the Data Perspective. Right click on “idsConnection” and choose “Reconnect”. Expand the connection. Notice under “GLANCE” and “Tables” there are currently 2 tables. We will create the third and fourth tables for the class example, then create the SQL insert statements, and populate the tables with some data. IDS 517 Page 3 of 43
  • 4. Figure 5. Reconnect to Database Figure 6. Import DB to Web Project Figure 7. Locate DB and Tables in DB Servers Figure 8. Select Tables to Import Select the tables for your group. In the example here, we will select GLANCE.JOB and GLANCE.PART. Right click on the selected section, and choose “Import to Folder”. On the window that opens, select “Browse” (not shown). On the “Folder Selection” window, choose “PracticeWebProject” and then “OK”. NOTE: You may be asked several questions about creating folders. Allow folder creation by choosing “Yes”. 1. Your view in the Data Perspective should appear as shown below. See the folder “databases”. 2. Right click on “WEB-INF/databases” The “New” window opens. (Figure 12). NOTE: Alternatively, you can also open the Data Definition view, and right click on “Table”, as shown in Figure 11. 3. Select Data on left and “Table Definition” on right. We will now create a table SUPPLIER. IDS 517 Page 4 of 43
  • 5. Figure 9. Select Web Project for DB Import Figure 10. Database Ready for Import Figure 11. New Table Definition from Data Definition Figure 12. Create a New Table Click the “Browse” button to the right of “Database/schema”, and find the database and then the schema. For class, the schema will be “ids517team#”, but here it is “GLANCE”, as it is on my home pc. Select the schema, and then “OK”. NOTE: If you do not select the schema, but select the database instead, you will get an error, and not be able to create your table. If you create 4 columns, then your columns might appear as in Figure 16. IDS 517 Page 5 of 43
  • 6. NOTE: Make sure, for each VARCHAR, that you do NOT check “For bit data”. Otherwise, you will end up with an array of bytes, instead of a String, when you create your Java bean later on. Click “Finish”. Figure 13. Create a New Table Figure 14. Select the DB Schema Figure 15. Name the Table Figure 16. Shows the Table's Columns You can see the results in the Data Perspective. Notice the new table SUPPLIER: “idsConnection...SUPPLIER.tblxmi”. Next, we create the table “SPJ_TABLE”. (I use SPJ_TABLE instead of SPJ to avoid confusion). The procedure is the same as above, but you have foreign keys. I won’t go through this here. Only the shots from the primary and foreign key creation are shown. When done, you should see the table SPJ_TABLE in the Data Perspective under “databases”. IDS 517 Page 6 of 43
  • 7. Figure 17. Table SUPPLIER in Perspective Figure 18. Selection of Primary Key Figure 19. Selection of Foreign Keys Figure 20. Table SPJ_TABLE in Perspective IDS 517 Page 7 of 43
  • 8. WE WILL NOW UPDATE THE PERSISTENT DATABASE. In order to update the persistent database, you need to have the “Data Definition” perspective open. NOTE: The Data Definition perspective is NOT the same as the Data perspective. 1. On the menu at the top of WSAD, choose “Window → Show View → Other”. 2. Expand “Data” and select “Data Definition”. Press “OK”. 3. Expand your project until you locate your database, which is under “WEB-INF/databases”. 4. Right click on database and select “Export to Server”. NOTE: On the “Data Export” page, choose what you want to export. Be as selective as you wish. Best idea is to only choose the tables that are new. NOTE: If you only want to export a table, or a few tables, only select those tables, and then right click on them, and “Export to Server”. Then you won’t have to worry about update other tables that are ok. Figure 21. Opening Another View Figure 22. Selecting Data Definition View IDS 517 Page 8 of 43
  • 9. Figure 23. Select Tables to Update Figure 24. Display Choice of Tables Updated IDS 517 Page 9 of 43
  • 10. NOTE: You will be asked to create a new connection (Figure 25). Remember that this is just a connection to the database. You can have as many connections to any database as you wish. YOU DO NOT HAVE TO CREATE A NEW CONNECTION. YOU CAN ALTERNATIVELY CLICK THE “Use existing connection”, shown at the bottom of Figure 25. • Select “Finish” to do the update. Then observe the table in the DB Servers window. NOTE: You need to do a “Refresh” on your “idsConnection” to see the update, as shown in Figure 26. If you created another connection, you can delete it. Below, the temporary connection is named “Con5”. Figure 25. A New Connection to the DB Figure 26. DB Servers View of Updated DB IDS 517 Page 10 of 43
  • 11. II. SQL STATEMENT AND JAVA BEAN CREATION 1. CREATING AN SQL STATEMENT – AN INSERT Now, let’s make our first SQL statement, which will be an Insert. After that, we will create the associated Java bean. 1. Close the Data Definition perspective. 2. Open the Data perspective. 3. Right click on PracticeWebProject, then select New → Other. 4. Select “Data” on the left, and “SQL Statement” on the right. A new window opens : “Create a New SQL Statement”. 5. In the list, choose “Insert”. Deselect “Create a new database connection” (Only in WSAD version 5.1) 6. Your are then asked to locate the database. Find it in WEB-INF/databases. 7. Click “OK”, and “IDS” will appear in the text field after “Database model”. Figure 27. Opening SQL Statement from Data Perspective Figure 28. Pick "Data" and "SQL Statement" Figure 29. Choose the INSERT Type Figure 30. Locate Existing Database IDS 517 Page 11 of 43
  • 12. 1. In the next window (Figure 31), enter “insertJob” as the name of the SQL statement. NOTE: In WSAD version 5.0, Figure 31 is part of the previous window. 2. Expand the schema (Figure 32) to find the JOB table, as that is the only table you need. 3. Select “JOB”, and use the “>” to put “JOB” in the “Selected Table” text field. Figure 31. Name the New SQL Statement Figure 32. Select the Table(s) Used in the SQL Statement IDS 517 Page 12 of 43
  • 13. Click the “Insert” tab. Notice that the column “Value” has no data. We want to do the following: 1. Put “:num” in the Value column of row JNUM. 2. Put “:name” in the Value column of row JNAME. 3. Put “:city” in the Value column of row JCITY. NOTE: It is VERY IMPORTANT to include the colon “:” before variables num, name and city. The colon identifies num, name and city as variables. Double click in the Value column of JNUM row. The cell changes color. Type in “:num”. Hit the Enter key. Repeat the procedure for JNAME and JCITY, putting in “:name” and “:city”, respectively. The completed window looks like this: You are now ready to test the SQL statement insertJob. It will actually update your database. • Click “Next”. You will see the WSAD-generated SQL: IDS 517 Page 13 of 43
  • 14. Figure 33. SQL Statement in SQL You will want to test this. Press “Execute”. You will get a blank window. Press “Execute” at the bottom of that window (not shown). Follow the same procedure (from above) to enter data into the right column. Figure 34. Enter Actual Data For Testing IDS 517 Page 14 of 43
  • 15. When you press “Finish”, you will execute the statement. Since we are doing an insert, no data is returned to display. Just press “Close” and then “Finish”. You are done! VERIFY THAT DATA WAS ENTERED (Optional) Before we create the Java Bean, let’s verify that the data was actually written to the database. 1. Select Data perspective. DB Servers window should appear somewhere on your monitor, but usually below the Data perspective. 2. Expand idsConnection until you see the JOB table. 3. Right click on the JOB table, and select the option “Sample Contents”. You will see the row of data appear, as shown below. Figure 35. Locate Table in DB Servers View Figure 36. Select All Rows From JOB Table Figure 37. View JOB Rows in DB Output View IDS 517 Page 15 of 43
  • 16. 2. GENERATE THE JAVA BEAN OPEN THE OUTLINE VIEW TO CREATE THE JAVA BEAN Before generating the Java bean, you can see the results of your SQL statement creation in the data (or web) perspective. Expand databases” , and you will see an entry with a suffix “sqx”. If you wish to see the information you entered for the SQL statement, you double-click on the “*insertJob.sqx” text, and several windows open, displaying the statement as you entered it. (NOTE: The outline view may already be open, so this may be optional). Next, you need to locate the “Outline” window. In case it is not on your screen, there is a way to get it. 1. From the WSAD menu, select Window → Show View → Other (Figure 39). 2. Next, in the “Show View” window that opens (Figure 40), expand “Basic”, highlight “Outline” and press “OK”. 3. In the outline view (Figure 41), right click on the SQL statement name “insertJob”. 4. Select “Generate Java Bean”. Figure 38. Locate SQL Statement in Perspective Figure 39. Open a New View Figure 40. Select Outline View Figure 41. Generate Java Bean From Outline View IDS 517 Page 16 of 43
  • 17. In the window that opens, select the web project as the Source Folder. We want to put the beans in a package, which we will call “bean”. Put this in package “bean”, and name the bean “InsertJob”. Notice that the name of the bean is identical to the name of the SQL statement, except the first letter is capitalized. Since we are creating a Java class named “bean.InsertJob.class”, we should follow Java convention and always capitalize the first letter of a Java class. Figure 42. Specify Location, Package and Name of Java Bean Make sure the “Use Driver Manager” radio button is selected, with “COM.ibm.db2.jdbc.net.DB2Driver” in the “Driver name” field. That field, and the URL field are filled in automatically. Figure 43. Specify the Driver Manager Connection (set by default) IDS 517 Page 17 of 43
  • 18. Press “Finish”. The next screen displays the methods that are created in the InsertJob bean class. Note that the method we will use is “execute()”. This method will always be created in beans, but it may have different arguments for different SQL statements. Notice that the first two will always be the same: “username” followed by “password”. These refer to the username and password to your database. Figure 44. WSAD-Generated Java Bean Methods You can click “Finish” now. In the Data or WebProject perspectives, if you expand the project, under “bean” you will see the Java source code InsertJob.java”. Figure 45. Java Bean in Data or Web Project Perspective IDS 517 Page 18 of 43
  • 19. If you double click on “InsertJob.java”, you can see the code of method initializer() that connects to the database, and creates the Statement object that does the insert: protected void initializer() { modify = new DBModify(); try { modify.setDriverName("COM.ibm.db2.jdbc.net.DB2Driver"); modify.setUrl("jdbc:db2://localhost:6789/IDS"); modify.setCommand( "INSERT INTO GLANCE.JOB ( JNUM, JNAME, JCITY ) “ + VALUES ( :num, :name, :city )"); DBParameterMetaData parmMetaData = modify.getParameterMetaData(); parmMetaData.setParameter( 1, "num", java.sql.DatabaseMetaData.procedureColumnIn, java.sql.Types.VARCHAR, String.class); parmMetaData.setParameter( 2, "name", java.sql.DatabaseMetaData.procedureColumnIn, java.sql.Types.VARCHAR, String.class); parmMetaData.setParameter( 3, "city", java.sql.DatabaseMetaData.procedureColumnIn, java.sql.Types.VARCHAR, String.class); } catch (SQLException ex) { ex.printStackTrace(); } } Method initalizer() is called from the constructor: public InsertJob() { super(); initializer(); } IDS 517 Page 19 of 43
  • 20. In your code, which we will develop shortly, you will call the execute method. the parameters are set, and then the SQL statement in initalizer() public void execute( String userid, String password, String num, String name, String city) throws SQLException { try { modify.setUsername(userid); modify.setPassword(password); modify.setParameter("num", num); modify.setParameter("name", name); modify.setParameter("city", city); modify.execute(); } // Free resources of modify object. finally { modify.close(); } } There are other details that have not been mentioned, but essentially, you must know how to use the execute method in your jsp. Before we develop another bean, let’s create the jsp that does the insert into the JOB table. IDS 517 Page 20 of 43
  • 21. 3. CREATE THE JSP PAGE FOR THE INSERT JAVA BEAN Before we create the first jsp, which we will name “insertJob.jsp”, we need to do something to allow certain classes in the COM package to be found. This solutions works in the lab: 1. In the Web Perspective, locate “WebContent”. Right click on this, and select “Import” in the context menu which opens. We want to find db2java.zip, and selectively import only the COM package into the WebContent folder. 2. On the “Import” window, select “Zip File”, which is at the bottom of the list of options. 3. Deselect “com”, but leave “COM” checked. Java is case sensitive, so COM and com are two different Java packages. 4. Press Finish. You will see “COM” under WebContent in the PracticeWebProject hierarchy. Figure 46. Select Import Under WebContent Figure 47. Choose the Zip File Import Option Figure 49. Display of COM in Perspective View Figure 48. Deselect com, Keep COM (NOTE: InsertBean should be InsertJob) IDS 517 Page 21 of 43
  • 22. CREATION OF THE FIRST JSP FILE. Now create and test our first JavaServerPages file. 1. Select the Web Perspective (Figure 50). Right click on “WebContent”, then select “New”. Notice “JSP File”. Select “JSP File”. 2. Name the file “insertJob.jsp”. (Figure 51) 3. Click “Next”. NOTE: It’s important, but not required, to create names of SQL statements, JavaBeans and jsp files that help you attach one to the other. That is, by calling this first jsp file “insertJob.jsp”, we know we will use the methods of “InsertJob.class”, which was created from the SQL statement “insertJob”. The screen shots are from WSAD 5.1, which differ slightly from WSAD 5.0. 4. Make sure that “HTML Transitional’ or something similar is visible in the “Document type” textfield (Figure 52). 5. Click “Finish”. In the PracticeWebProject hierarchy, under WEB-INF (and above “bean”), you should see the file “insertJob.jsp”. It is very important to find this file, as you will need to open it up and modify it to make it do what you want it to do. Figure 50. Locate JSP File For Creation Figure 51. Specify Name of JSP File Figure 52. Set Document Type as Transitional Figure 53. View insertJob.jsp in Perspective View IDS 517 Page 22 of 43
  • 23. Now double click on “insertJob.jsp”. A new view opens called the “Page Designer”. This view has three tabs at the bottom left corner. You will primarily use only the “Design” and “Source” tabs. Note: This is where your programming skills are needed. There isn’t much programming, and what you need will be shown. But I can’t code for every situation. Still, if you study the jsp files in this document, you should have sufficient information to do just about anything you need to do. Figure 54. The WSAD-Generated (Default) Text of the File insertJob.jsp IDS 517 Page 23 of 43
  • 24. If you click on the Design tab, you can access elements that can be placed on the page without any coding. In Figure 55, I selected the default text, changed it to “INSERT JOBS”, centered it, made it bold and larger, all by using respective icons located below the WSAD menubar. NOTE: To get icons to show, select menu “Toolbar” on the WSAD menubar. Click whatever you wish to appear below the menubar as icons. Then you can click icons instead of using the popup menus. After entering the text, I hit “Enter”. This puts a break between the title and whatever comes next. Right click on the page to get the popup menu. Select insert → form and input fields. You will mostly use elements Form, Submit Button, Text Field, and List Box. On the previous context menu, notice Table, which you should use a great deal. Note that all of these elements are placed, for most applications, within a form. Figure 55. Insert a Form From the Design View of the insertJob.jsp Page IDS 517 Page 24 of 43
  • 25. In Figure 56, a form is being created. Within the form, I have placed a table, with 3 rows and 2 columns. The left column will list the fields of table JOB, and the right column will be the input from the user. We need to open an “Attributes” view. This will allow, for each element type, specification of certain parameters. You right click on the page, or on an element to open up the Attributes view. When it is open, when you select an element, the appropriate attributes for that element will appear. Figure 56. Creating a Table and Opening the Attributes View Figure 57. The Attribute View for a Table IDS 517 Page 25 of 43
  • 26. Center the table. Then, in each cell of the second column, we place a textField. Give each field a descriptive name. For example, the field that will hold the job number will be named numField. This then is like a variable, and should start Next, we put in a submit button. Figure 58. Text Field Creation Figure 59. Submit Button Creation Figure 60. Completed Design for insertJob.jsp IDS 517 Page 26 of 43
  • 27. NOTE: You must save your work so the WSAD environment can update the appropriate servlets and related files. But do not save too often, as this takes up resources, such as RAM. On systems that have low RAM, there will be excessive page swapping by the operating system. The result is an incredibly long time to do a save. One fast way to save your file is to press the control key and then the letter “s”. Let’s look at the code, before changes are made. <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>insertJob.jsp</title> </head> <body> <h2 align="center">INSERT JOBS</h2> <p><br /> </p> <form> <center><table border="1"> <tbody> <tr> <th align="left" valign="middle">Job number:</th> <td><input type="text" name="numField" size="22" /></td> </tr> <tr> <th align="left" valign="middle">Job name:</th> <td><input type="text" name="nameField" size="22" /></td> </tr> <tr> <th align="left" valign="middle">Job city:</th> <td><input type="text" name="cityField" size="22" /></td> </tr> </tbody> </table> <br /> <input type="submit" name="processBtn" value="Process" /> </center></form> </body> </html> THIS IS THE PLAN. You must have a plan before doing design. Otherwise, you will waste lots of time. Whenever the page opens, the fields will be blank. User enters data, or fails to enter complete data, and then presses the submit button. The current page is then redisplayed. Why? Because there is no “ACTION = newPage “ within the opening form tag. This means the current page will be called again when submit is pressed. <form> <center> <table border="1"> <tbody> <tr> So, if we want to go to “index.jsp” after pressing the button, we would change the above to this: IDS 517 Page 27 of 43
  • 28. <form ACTION=”index.jsp”> <center> <table border="1"> <tbody> <tr> Continuing on with our plan, when the button is pressed, all the html code is again processed. What we want is to read the data from the text fields before redisplaying the the textFields. Otherwise, we won’t have data in the textFields when they are read. So we put code before the text fields. The code includes Java code. I won’t go through the code creation, but you can learn by examining the results. If you put your Java Bean in a folder other than JavaSource, then you must tell WSAD where the beans are stored. Assume that we put the beans in the bean folder, instead of Java Source. Here’s what you must do: 1. Right click on the PracticeWebProject in the Data or Web Project perspective. 2. Select “properties” on the popup menu. 3. On the window (Figure 61) that opens, select “Java Build Path” on the left. 4. Notice that “../JavaSource” is listed. Delete this, as our bean is not in that location. (It can be, if you wish. This is your choice). 5. Press “Remove’ and then “Add Folder”. 6. Find PracticeWebProject/bean by expanding the hierarchy (Figure 62) that is displayed, select it, and close that window. PracticeWebProject/bean now appears. 7. Press “OK” to close the Properties window (figure 61). Figure 61. Setting the Java Build Path IDS 517 Page 28 of 43
  • 29. Figure 62. Locating the Java Source Folder We just set up the system to handle the bean location. This will work for all the other beans. Here is our code so far. All we have done is 1. created some variables, 2. retrieved the textField data and stored it in those variables, 3. created an InsertBean object, and 4. called the InsertBean method that sends the sql insert statement to the database. IDS 517 Page 29 of 43
  • 30. <%! String num, name, city; InsertJob ij; %> <title>insertJob.jsp</title> </head> <body> <h2 align="center">INSERT JOBS</h2> <p><br /> </p> <form> <center><table border="1"> <tbody> <% // Retrieve data from textFields num = request.getParameter("numField"); name = request.getParameter("nameField"); city = request.getParameter("cityField"); // Create an InsertBean object, which causes the // connection to the database, and sends an sql insert // statement to the database. ij = new InsertJob(); ij.execute("glance", "gl122855", num, name, city); %> <tr> But we are done, aren’t we? There is nothing left to do. This will not be the case in the following examples. You must create a selectJob bean that will return all the rows in the JOB table. We can even put a button on insertJob.jsp that will link directly to that page. AVOID SENDING NULL DATA TO THE DATABASE But there is at least one problem with the above code. What happens when the page first opens? All the fields are blank, so the variables num, name and city are all null. We will get an SQLException if we send a query with null values. So, put in some code that creates the InsertJob object and calls the method execute() only if all of those variables are not null: // Create an InsertBean object, which causes the // connection to the database, and sends an sql insert // statement to the database. if( num != null && name != null && city != null ){ ij = new InsertJob(); ij.execute("glance", "gl122855", num, name, city); } We can go further and check each field individually for nulls, instead of together, as done above. Then you can report back which field has no data. You can also check that the data entered is an integer, if it was meant to be an integer, by using the static method parseInt() of class Integer. IDS 517 Page 30 of 43
  • 31. RUN THE INSERT BEAN ON A SERVER Before we continue, it would be nice to see this jsp in action. Let’s run it on a server. 1. Find insertJob.jsp, and right click on it. (Figure 63). 2. Select “Run on Server”. A “Server Selection” window will open. (Figure 64) NOTE: If this is the first time you have run the jsp on a server, you will not see a server listed which has already been used for this project. So, select “Create a New Server”. In the accompanying list, select the “Test Environment’ under the WSAD heading, as shown below. Figure 63. Finding "Run on Server" Figure 64. Specifying the Server IDS 517 Page 31 of 43
  • 32. If you are lucky, you will see the following in the WSAD tool. But you can take the ULR, and paste it in an independent browser. You can optionally set WSAD to always run the pages in a separate browser. Later, I will show you how to do this. Figure 65. The jsp Running in Internet Explorer IDS 517 Page 32 of 43
  • 33. CREATE A JSP THAT DISPLAYS ALL THE CONTENTS OF A TABLE The insertJob.jsp file was pretty easy, as all we needed to do was execute(). But with select, not only must we execute(), but we must also retrieve tuples from the database. But still, you will see how easy this can be. NOTE: As in the insertJob SQL statement, we must create a selectAllJobs SQL statement. 1. Open the Data Perspective. 2. Right click on PracticeWebProject, then select New → Other. 3. Select “Data” on the left, and “SQL Statement” on the right. A new window opens: “Create a New SQL Statement”. 4. In the list, choose “SELECT”. Deselect “Create a new database connection (only in WSAD version 5.1). 5. You are asked to locate the database. Find it in WEB-INF/databases. 6. Click “OK”, and “IDS” will appear in the text field after “Database model”. Figure 66. Opening SQL Statement from Data Perspective Figure 67. Pick "Data" and "SQL Statement" Figure 68. Choose SELECT Type Figure 69. Locate Existing Database IDS 517 Page 33 of 43
  • 34. 7. Enter “selectJob” as the name of the SQL statement 8. Expand the schema (Figure() to find the JOB table, as that is the only table you need. 9. Select table “JOB”, and use the “>” place “JOB” in the “Selected Tables” list on the right. Figure 70. Name the New SQL Statement "selectJob" Figure 71. Select the Table(s) Used in the SQL Statement IDS 517 Page 34 of 43
  • 35. We will need all the data for each tuple. Highlight the JOB table, and press the “>>” in the center. This will copy all the fields of JOB into the Selected Columns list on the right. Figure 72. Select All the Columns in Table JOB There is nothing left to do, except test the generated SQL statement. Press”Next>”. Then “Execute” to test the statement. Figure 73. WSAD-Generated SQL Statement for selectAllJobs IDS 517 Page 35 of 43
  • 36. When you press Enter, a new window opens. Press Enter on that window, and all the tuples in JOB should appear. You can then press Close and Finish. The new selectAllJobs sql statement will be generated. You can find this statement in the WEB-INF/database. Figure 74. The selectAllJobs.sqx file GENERATE THE JAVA BEAN 1. In the Outline View, right click on “selectAllJobs”. 2. Choose “Generate Java Bean” from the popup menu (Figure 75) 3. Set location where beans are located. (We see they have been moved to PracticeWebProject/JavaSource) 4. Set package as “bean” 5. Set name to “SelectAllJobs” 6. Press “Next” to specify the Driver Manager (Figure 77) 7. Specify “COM.ibm.db2.jdbc.net.DB2Driver” as the Driver Manager, if not already present 8. Press Next. You will then see the WSAD-generated SelectAllJobs Java Bean methods. There are two classes generated. One gets the connection to the database and executes the query, and returns the tuples (SelectAllJobs) and the other has methods that allow you to extract field values from each tuple returned (SelectAllJobsRow). NOTE: For all SELECT Java Beans, a class with the bean name you specified will then be returned, and also another class with “Row” appended to that bean name. The is a “helper class”, in that it provides the methods to help you get your information. 9. Press “Finish”. You can see your bean classes in the Web Perspective under PracticeWebProject/Java Source Figure 75. Generate Java Bean Figure 76. Java Bean Location, Pkg and Name IDS 517 Page 36 of 43
  • 37. Figure 77. Specify DriverManager as COM.ibm.db2.jdbc.net.DB2Driver Figure 78. Resulting WSAD-Generated SQL Statement Figure 79. Location of Bean classes IDS 517 Page 37 of 43
  • 38. CREATE THE JSP PAGE selectAllJobs.jsp 10. Open the Web perspective 11. Right click on “WebContent” to view the popup window (Figure 80). 12. Select New → JSP File 13. Enter name “selectAllJobs.jsp” as the name of the JSP File (Figure 81). Press “Next >” 14. The Document Type selection must include the word “Transitional” (Figure 82). Your JSP File has been generated. The Page Designer opens on its Source view. (Figure 84). Figure 80. Creating a New JSP File Figure 81. Naming the JSP File IDS 517 Page 38 of 43
  • 39. Figure 82. Select "Transitional" as Document Type Figure 83. SelectAllJobs.jsp Location Figure 84. The JSP Page Designer, Open on Source View IDS 517 Page 39 of 43
  • 40. MODIFYING THE JSP PAGE A JSP file that shows data is typically designed with two table rows.The first row lists the field names, and the second is included in a java loop, that creates a new row for every tuple returned by the query. There are three fields in the JOB table. As in the insertJob.jsp, we will create a form in selectAllJobs.jsp which contains a table. The table we create will have 2 rows and 3 columns. (Recall the table in the insertJob.jsp had 3 rows and 2 columns). Figure 85 shows the result of adding the form, table, and the submit button. Also modified is the heading. In addition, we will add another form which contains a submit button. This submit button, named insertBtn, will be a link to the insertJob.jsp file. NOTE: Buttons are one way of linking to other pages. But each submit button must be enclosed in its own form. Another way is to use just a text link. These links can be anywhere, so you may have more than one per form. Figure 85. Design View of selectAllJobs.jsp in Page Designer START THE PROGRAM You can locate either insertJob.jsp or selectAllJobs.jsp. I added a button to insertJob.jsp that redirects you to selectAllJobs.jsp. So, you get to the other JSP file from either one. You definitely need to put such links on your pages, or you won’t be able to go anywhere from your page. Also, the process button on the selectAllJobs page just reloads the page again. Should the database be updated from another location, you can see the update by pressing either the refresh (on the browser) or the process button. IDS 517 Page 40 of 43
  • 41. Figure 86. selectAllJobs.jsp in WSAD Browser Figure 87. insertJob.jsp in WSAD Browser IDS 517 Page 41 of 43
  • 42. We will now modify the code. I will show the completed code, and then explain it in some detail. 1 <?xml version="1.0" encoding="ISO-8859-1" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <%@ page 7 language="java" 8 contentType="text/html; charset=ISO-8859-1" 9 pageEncoding="ISO-8859-1" 10 import = "bean.*" 11 %> 12 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 13 <%! 14 SelectAllJobs saj; 15 SelectAllJobsRow[] rows; 16 SelectAllJobsRow row; 17 %> 18 <title>selectAllJobs.jsp</title> 19 </head> 20 <body> 21 <p align="center"><font size="+2"><b>LIST OF ALL JOBS</b></font></p> 22 <p><br /></p><form> 23 <center><table border="1"> 24 <tbody align="center"> 25 <tr> <th>Job Number</th> 26 <th>Job Name</th> 27 <th>Job City</th> 28 </tr> 29 <% 30 saj = new SelectAllJobs(); 31 saj.execute("glance", "gl122855"); 32 rows = saj.getRows(); 33 for(int i = 0; i < rows.length; i++){ 34 row = rows[i]; 35 %> 36 <tr> 37 <td><%= row.getJOB_JNUM() %> </td> 38 <td><%= row.getJOB_JNAME() %></td> 39 <td><%= row.getJOB_JCITY() %></td> 40 </tr> 41 <% 42 } 43 %> 44 </tbody> 45 </table> 46 <br /> 47 <input type="submit" name="processBtn" value="Process" /> 48 </center></form> 49 <p><br /> 50 </p> 51 <form action ="insertJob.jsp"> 52 <div align="center"><input type="submit" name="insertBtn" 53 value="Insert Job" /></div></form> 54 </body> 55 </html> IDS 517 Page 42 of 43
  • 43. Line 10: import = "bean.*" This is part of the tag that begins on line 6 and ends on line 11. This is in a “page directive”, which has the start tag “< %@ page”. The import allows the generated servlets to know what the classes are which are referenced in the jsp file. We see that the package “bean” is referenced. If you do not have this, then you will probably get execeptions when you save selectAllJobs.jsp. Lines 13-17: <%! SelectAllJobs saj; SelectAllJobsRow[] rows; SelectAllJobsRow row; %> Note that the code starts with the tag “<%!” and ends with “%>”. These are called ‘declarations” The exclamation mark “!” in the start tag denotes a section that contains declarations of variables and implementation of methods. As you can see, there are currently no methods here.. You can put these declarations with the code starting at line 30, instead of in this declaration section. This is a programming issue. The class SelectAllJobs has the execute() method. We create an object of this class in order to call execute() with correct parameters. The tuples are returned in an array of class SelectAllJobsRow. I call the variable “rows” since it may contain many rows or tuples. Each reference in the SelectAllJobsRow[] rows is a reference to a SelectAllJobsRow object. We will have the need to get one tuple at a time, store it in variable row, and then use the methods of the SelectAllJobsRow class to extract (or get) the field values out of the row object. Lines 29-43 <% saj = new SelectAllJobs(); saj.execute("glance", "gl122855"); rows = saj.getRows(); for(int i = 0; i < rows.length; i++){ row = rows[i]; %> <tr> <td><%= row.getJOB_JNUM() %> </td> <td><%= row.getJOB_JNAME() %></td> <td><%= row.getJOB_JCITY() %></td> </tr> <% } %> 30. We create a SelectAllJobs object, and store a reference to this object in variable saj. 31. Execute the query that returns all the tuples in the JOB table. 32. Use the SelectAllJobs method getRows() to return all the rows in JOB, and store them in the rows arrray. 33. The for-loop. Allows us to step through the array, one index at a time. 34. Each row[i] is a reference to a SelectAllJobsRow object, so store it in row. Note that the previous lines were wrapped in tags “<% .. %>”. This denotes Java code. Lines 36-40: This is one row. The start of each row is line 36, and the end is line 40. Line 38 has Java code row.getJOB_NUM(). This method returns the JNUM value of the particular row. This is surrounded by tags “<%= .. %>”. These are Expressions. The code inside is converted to a String. Lines 39-40. Similar to line 38. Retrieves the JNAME and JCITY of the current row object. Lines 41-43: Closes the for-loop. IDS 517 Page 43 of 43