JAVA RUNTIME OBJECTS METHOD
8.4 GETTING STARTED WITH JAVA WEB APPLICATIONS
8.4.3 Create Five Web Pages Using Microsoft Offi ce
In this section, we will create fi ve web pages, LogIn, Selection, Faculty, Course, and Student, as the GUIs to access and manipulate our sample database via Web server.
Figure 8.46. The fi nished Database Tables wizard.
Figure 8.47. The fi nished Create Persistence Unit wizard.
c08.indd 614
c08.indd 614 7/20/2011 11:12:28 AM7/20/2011 11:12:28 AM
www.traintelco.com
Figure 8.48. The fi nished Entity Classes wizard.
Figure 8.49. The fi nished Mapping Options wizard.
When a Web application starts, the default starting page is index.jsp . However, in this application, we want to use the LogIn.jsp page as our starting page. Because of the relative complexity in our fi ve pages, we need to use Microsoft Offi ce Publisher 2007 as a tool to help us to do this job.
Let ’ s fi rst handle the LogIn page.
8.4.3.1 Create the LogIn Page
The purpose of this page is to allow users to login to our sample SQL Server database to perform data actions to fi ve tables in our sample database. Exactly this page is related to the LogIn table to enable users to login and enter this database.
Launch Microsoft Offi ce Publisher 2007 and click on the Web Sites icon to open the
Web Sites wizard. Scroll down to the bottom of this wizard and double click on the
Web 984 × 4608px item under the Blank Sizes category as the template of this page.
Perform the following operations to build this page:
1. Go to Insert > Text Box menu item to add a textbox to the top of this page. Enter
Welcome to CSE DEPT LogIn Page into this textbox as a label for this page.
2. Highlight the text of the label and select the Arial Black as the font type and 12 as the font size.
3. Perform the similar operation as step 1 to create another two textboxes, and enter User Name and Pass Word as another two labels. Locate these two labels just under the top label as we did in step 1 above.
4. Go to Insert > Form Control > TextBox menu item to add two textboxes; align each of them after each of two labels, User Name and Pass Word , respectively.
5. Right click on the fi rst textbox we added in step 4 above, and select the Format Form Properties item. Enter UserNameField into the text fi eld under the Return data with this label as the name of this textbox. Click on the OK button to complete this naming process.
6. Perform the similar operation to the second textbox we added in step 4 above and name it as PassWordField .
7. Go to Insert > Form Control > Submit menu item to add a command button into this page. Uncheck the Button text is same as button type checkbox and enter
LogIn into the Button text fi eld. Locate this button under two textboxes we added in steps 4 – 6. Click on the OK button to close this dialog box.
8. Perform the similar operation to add another button, and use Cancel as the button text for this button.
9. Go to File > Save As item to save this page as an HTML fi le. On the opened Save As dialog, select the Web Page, Filtered ( * .htm, * .html) from the Save as type combo box and enter LogIn.html to the File name fi eld. Click on the Save button to save this HTML fi le to certain location in your root driver, such as C:\Temp . Click Yes to the message box and OK to the Form Properties dialog to complete this saving process.
Now go to File > Web Page Preview menu item to take a look at this LogIn page.
Your fi nished LogIn page should match one that is shown in Figure 8.50 .
To convert this HTML page to a JSP page, open the Notepad and perform the fol- lowing operations:
1. On the opened Notepad, go to File > Open menu item to open the Open dialog box. Make sure to select All Files from the Files of type combo box at the bottom of this dialog.
2. Browse to the folder where you saved the LogIn.html fi le, such as C:\Temp ; select it and click on the Open button to open this fi le.
3. Go to File > Save As menu item to open the Save As dialog box. Then enter “ LogIn.
jsp ” into the File name fi eld as the name of this page. The point to be noted is that you must use the double quotation marks to cover this fi le name to enable the Notepad to save it as a JSP fi le. Click on the Save button to save this JSP fi le to your desired folder, such as C:\Temp .
4. Close the Notepad and we have completed creating our LogIn.jsp fi le.
Next, let ’ s handle to create our Selection JSP fi le.
c08.indd 616
c08.indd 616 7/20/2011 11:12:28 AM7/20/2011 11:12:28 AM
www.traintelco.com
8.4.3.2 Create the Selection Page
The purpose of this page is to allow users to choose other web pages to perform the related data actions with the different data tables in our sample database. Therefore, this page can be considered as a main or control page to enable users to browse to other pages to perform data actions against the related data table in our sample database.
Launch Microsoft Offi ce Publisher 2007 and click on the Web Sites icon to open the
Web Sites wizard. Scroll down to the bottom of this wizard and double click on the Web 984 × 4608px item under the Blank Sizes category as the template of this page.
Perform the following operations to build this page:
1. Go to Insert > Text Box menu item to add a textbox to the top of this page. Enter Make Your Selection into this textbox as a label for this page.
2. Highlight the text of the label and select the Arial Black as the font type and 12 as the font size.
3. Go to Insert > Form Control > List Box menu item to add a listbox control. Locate this listbox just under the top label as we did in step 1 above.
4. Right click on the new added listbox and select Format Form Properties item to open List Box Properties dialog. Enter ListSelection into the Return data with this label fi eld as the name of this listbox.
5. In the Appearance list, click on the Remove buttons three times to delete all default items from this list.
6. Click on the Add button to add the fi rst item to this list. On the opened dialog, enter the
Faculty Information into the Item fi eld and check the Selected radio button. Make sure that the Item value is same as item text checkbox is checked. Your fi nished Add/
Modify List Box Item dialog should match one that is shown in Figure 8.51 . Click on the OK button to close this dialog box.
7. Click on the Add button to add our second item into this listbox. On the opened Add/
Modify List Box Item dialog, enter Course Information into the Item fi eld, and
Figure 8.50. The fi nished LogIn page.
make sure that both Not selected radio button and the Item value is same as item text checkbox are checked. Click on the OK button to close this dialog box.
8. Perform the similar operations as we did in step 7 above to add the third item, Student Information , into this listbox.
9. Your fi nished List Box Properties dialog should match one that is shown in Figure 8.52 . Click on the OK button to complete this listbox setup process.
10. Go to Insert > Form Control > Submit menu item to add a command button into this page. Uncheck the Button text is same as button type checkbox and enter
OK into the Button text fi eld. Locate this button under the listbox we added above.
Click on the OK button to close this dialog box.
11. Perform the similar operation to add another button and use Exit as the button text for this button.
Figure 8.51. The fi nished Add/Modify List Box Item dialog box.
Figure 8.52. The fi nished List Box Properties dialog box.
c08.indd 618
c08.indd 618 7/20/2011 11:12:28 AM7/20/2011 11:12:28 AM
www.traintelco.com
12. Go to File > Save As item to save this page as an HTML fi le. On the opened Save As dialog, select the Web Page, Filtered ( * .htm, * .html) from the Save as type combo box and enter Selection.html to the File name fi eld. Click on the Save button to save this HTML fi le to a certain location in your root driver, such as C:\Temp . Click Yes to the message box and OK to the Form Properties dialog to complete this saving process.
13. Now go to File > Web Page Preview menu item to take a look at this Selection page.
Your fi nished Selection page should match one that is shown in Figure 8.53 .
To convert this HTML page to a JSP page, open the Notepad and perform the fol- lowing operations:
1. On the opened Notepad, go to File > Open menu item to open the Open dialog box. Make sure to select All Files from the Files of type combo box at the bottom of this dialog.
2. Browse to the folder where you saved the Selection.html fi le, such as C:\Temp , select it and click on the Open button to open this fi le.
3. Go to File > Save As menu item to open the Save As dialog box. Enter “ Selection.jsp ” into the File name fi eld as the name of this page. The point to be noted is that you must use the double quotation marks to cover this fi le name to enable the Notepad to save it as a JSP fi le. Click on the Save button to save this JSP fi le to your desired folder, such as C:\
Temp .
4. Close the Notepad and we have completed creating our Selection.jsp fi le.
Next let ’ s handle to create our Faculty JSP fi le.
8.4.3.3 Create the Faculty Page
The purpose of this page is to allow users to access the Faculty table in our sample database to perform data actions via this page, such as data query, new faculty records
Figure 8.53. The preview of the Selection page.
insertion, and faculty member updating and deleting. Because the HTML and JSP did not provide any combo box control, in this application, we have to use text box control to replace the combo box control and apply it in this page.
The preview of this Faculty page is shown in Figure 8.54 .
Now let ’ s start to build this page using Microsoft Offi ce Publisher 2007.
Launch Microsoft Offi ce Publisher 2007 and click on the Web Sites icon to open the
Web Sites wizard. Scroll down to the bottom of this wizard and double click on the
Web 984 × 4608px item under the Blank Sizes category as the template of this page.
Perform the following operations to build this page:
1. Go to Insert > Text Box menu item to insert a textbox into this page and enter Image into this textbox as an image label.
2. Go to Insert > Form Control > Textbox menu item to insert a Textbox into this page and locate this textbox just to the right of the image label we added in step 1 above.
3. Right click on this inserted Textbox and select the Format Form Properties item to open the Text Box Properties dialog, as shown in Figure 8.55 a. Then enter
FacultyImageField into the Return data with this label fi eld, as shown in Figure 8.55 a. Click on the OK button to close this dialog.
4. Go to Insert > Picture > Empty Picture Frame menu item to insert a blank picture to this page. Locate this picture under the FacultyImageField textbox we added in step 2.
5. Go to Insert > Text Box to insert a new TextBox and move it to the right of the picture.
Type Faculty Name in this inserted TextBox as the Faculty Name label.
6. Go to Insert > Form Control > Textbox menu item to insert a Textbox into this page and locate this textbox to the right of the Faculty Name label.
7. Right click on this inserted Textbox and select the Format Form Properties item to open the Text Box Properties dialog. Enter FacultyNameField into the Return
Figure 8.54. The preview of the Faculty page.
c08.indd 620
c08.indd 620 7/20/2011 11:12:28 AM7/20/2011 11:12:28 AM
www.traintelco.com
data with this label fi eld, as shown in Figure 8.55 b. Click on the OK button to close this dialog.
8. Go to Insert > Text Box menu item again to insert another TextBox and move it to the right of the picture under the Faculty Name TextBox. Type Faculty ID into this TextBox and use it as the Faculty ID label.
9. Go to Insert > Form Control > Textbox menu item to insert a Textbox into this page, and move this Textbox to the right of the Faculty ID label.
10. Change this Textbox ’ s name to FacultyIDField as we did in step 7 above.
11. In a similar way, you can fi nish adding another six Textboxes and the associated labels, as shown in Figure 8.54 . Use step 7 above to change these six Textboxes ’ names to:
A. NameField B. TitleField C. Offi ceField D. PhoneField E. CollegeField F. EmailField
12. You can use Format > Paragraph > Line spacing > Between lines menu property to modify the vertical distances between each label. In this application, set this distance to 0.6 sp.
13. Go to Insert > Form Control > Submit menu item to insert fi ve buttons at the bottom of this page. In the opened Command Button Properties dialog, uncheck the Button text is same as button type checkbox, and enter
A. Select B. Insert C. Update D. Delete E. Back
into the Button text fi eld for these fi ve buttons one by one. Click on the OK button to complete these fi ve button creation process.
Figure 8.55. The FacultyImageField and FacultyNameField textboxes.
a b
14. Your fi nished Faculty page in Microsoft Publisher 2007 should match one that is shown in Figure 8.56 .
15. Go to File > Save As item to save this page as an HTML fi le. On the opened Save As dialog, select the Web Page, Filtered ( * .htm, * .html) from the Save as type combo box and enter Faculty.html to the File name fi eld. Click on the Save button to save this HTML fi le to a certain location in your root driver, such as C:\Temp . Click Yes to the message box and OK to the Form Properties dialog to complete this saving process.
To convert this HTML page to a JSP page, open the Notepad and perform the fol- lowing operations:
1. On the opened Notepad, go to File > Open menu item to open the Open dialog box. Make sure to select All Files from the Files of type combo box at the bottom of this dialog.
2. Browse to the folder where you saved the Faculty.html fi le, such as C:\Temp , select it and click on the Open button to open this fi le.
3. Go to File > Save As menu item to open the Save As dialog box. Enter “ Faculty.jsp ” into the File name fi eld as the name of this page. The point to be noted is that you must use the double quotation marks to cover this fi le name to enable the Notepad to save it as a JSP fi le. Click on the Save button to save this JSP fi le to your desired folder, such as C:\
Temp .
4. Close the Notepad and we have completed creating our Faculty.jsp fi le.
Next, let ’ s handle to create our Course JSP fi le.
8.4.3.4 Create the Course Page
The purpose of using this page is to allow users to access and manipulate data in the Course table in our sample database via the Web server, such as course query, new course
Figure 8.56. The fi nished Faculty page.
c08.indd 622
c08.indd 622 7/20/2011 11:12:29 AM7/20/2011 11:12:29 AM
www.traintelco.com
insertion, course updating and deleting, based on the selected faculty member from the Faculty Name textbox.
The preview of this Course page is shown in Figure 8.57 .
Now let ’ s start to build this page using Microsoft Offi ce Publisher 2007.
Launch Microsoft Offi ce Publisher 2007 and click on the Web Sites icon to open the
Web Sites wizard. Scroll down to the bottom of this wizard and double click on the
Web 984 × 4608px item under the Blank Sizes category as the template of this page.
Perform the following operations to build this page:
1. Go to Insert > Picture > Clip Art menu item to open the Clip Art dialog box. Make sure to select the geometry in the Search for fi eld and click on the Go button to display all clip arts related to geometry. Click on the fi rst one and add it into the upper left corner of this page.
2. Go to Insert > Text Box menu item to insert a textbox into this page and enter Faculty Name into this textbox as the Faculty Name label.
3. Go to Insert > Form Control > Textbox menu item to insert a Textbox into this page and locate this textbox just to the right of the Faculty Name label we added in step 1 above.
4. Right click on this inserted Textbox and select the Format Form Properties item to open the Text Box Properties dialog. Then enter FacultyNameField into the Return data with this label fi eld. Click on the OK button to close this dialog.
5. Go to Insert > Form Control > List Box menu item to add a listbox control. Locate this listbox just under the top label as we did in step 1 above.
6. Right click on the new added listbox and select Format Form Properties item to open List Box Properties dialog. Enter CourseList into the Return data with this label fi eld as the name of this listbox.
Figure 8.57. The preview of the Course page.
7. In the Appearance list, click on the Remove buttons three times to delete all default items from this list.
8. Right click on the newly added listbox CourseList and select Format Form Properties to open the List Box Properties dialog. Click on the Add button to open the Add/
Modify List Box Item dialog box. Enter Course ID into the Item fi eld and check the Selected radio button, and click on the OK button.
9. Go to Insert > Text Box to insert a new TextBox and move it to the right of the listbox.
Type Course Name in this TextBox as the Course Name label.
10. Go to Insert > Form Control > Textbox menu item to insert a Textbox into this page and locate this textbox to the right of the Course Name label.
11. Right click on this inserted Textbox and select the Format Form Properties item to open the Text Box Properties dialog. Enter CourseNameField into the Return data with this label fi eld. Click on the OK button to close this dialog.
12. In a similar way, you can fi nish adding another four Textboxes and the associated labels, as shown in Figure 8.57 . Use step 10 above to change these four Textboxes ’ names to:
A. ScheduleField B. ClassroomField C. CreditField D. EnrollmentField
13. You can use Format > Paragraph > Line spacing > Between lines menu property to modify the vertical distances between each label. In this application, set this distance to 0.6 sp.
14. Go to Insert > Form Control > Submit menu item to insert fi ve buttons at the bottom of this page. In the opened Command Button Properties dialog, uncheck the Button text is same as button type checkbox, and enter:
A. Select B. Insert C. Update D. Delete E. Back
into the Button text fi eld for these fi ve buttons one by one. Click on the OK button to complete these fi ve button creation process.
15. Your fi nished Faculty page in Microsoft Publisher 2007 is shown in Figure 8.58 .
To convert this HTML page to a JSP page, open the Notepad and perform the fol- lowing operations:
1. On the opened Notepad, go to File > Open menu item to open the Open dialog box.
Make sure to select All Files from the Files of type combo box at the bottom of this dialog.
2. Browse to the folder where you saved the Course.html fi le, such as C:\Temp , select it, and click on the Open button to open this fi le.
3. Go to File > Save As menu item to open the Save As dialog box. Enter “ Course.jsp ” into the File name fi eld as the name of this page. The point to be noted is that you must use the double quotation marks to cover this fi le name to enable the Notepad to save it as
c08.indd 624
c08.indd 624 7/20/2011 11:12:29 AM7/20/2011 11:12:29 AM
www.traintelco.com