INTRODUCTION OF WEB DEVELOPMENT TECHNOLOGY (WORKBOOK ACTIVITY)

45

2. DEVELOPING A SERVLET IN JAVA

Activity 2.4C

Activity Outcome: Use redirect response.

Figure 2.4C(3): redirect.java source code
c. Save, compile and run the redirect.html. The output should be as shown in

Figure 2.4C(4).

Figure 2.4C(3): redirect.html output

46

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

3.1 CONSTRUCT THE JSP FILE IN WEB APPLICATION (JSP)

Learning Outcomes

This lab sheet encompasses SIX (6) activities. (Activity 3.1A until 3.1F)
By the end of this lab, student should be able to:

I. Able to construct the JSP file in the web application

Activity 3.1A

Activity Outcome: Creating New JSP page index.jsp
Task 1 : Create New Project to construct the JSP file
a. Create a New Project namely LabActivity3.1. Then, create the new

index.jsp file as shown in Figure 3.1A(1).

Figure 3.1A(1): Create new index.jsp file

47

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1A

Activity Outcome: Creating New JSP page index.jsp.
b. Then, write the source code for index.jsp as shown in Figure 3.1A(2).

Figure 3.1A(2): index.jsp source code
c. Save, compile and run the page index.jsp and the output should be as shown

in Figure 3.1A(3).

Figure 3.1A(2): index.jsp output
[Note: This activity will enable reader to understand on creating a JSP web
page as well as to declare a variable and print the value in a JSP page.]

48

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1B

Activity Outcome: Display date using jsp:foward.
Task 1 : Use the existing project to implement jsp:forward
a. In the same project in Activity 3.1A, create a web page Date.jsp and copy the

source code as shown in Figure 3.1B(1).

Figure 3.1B(1): Date.jsp source code
b. Next, create a web page ShowDate.jsp and copy the source code as shown in

Figure 3.1B(2).

Figure 3.1B(1): ShowDate.jsp source code

49

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1B

Activity Outcome: Display date using jsp:foward.
Task 1 : Use the existing project to implement jsp:forward
c. Save, compile, run the file Date.jsp and the output should be as shown in

Figure 3.1B(3).

Figure 3.1B(1): Date.jsp source code

50

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1C

Activity Outcome: Display date using jsp:include with and without parameter
Task 1 : Use the existing project to include with and without parameter
a. In the same project in Activity 3.1B, create a web page DateInclude.jsp and

copy the source code as shown in Figure 3.1C(1).

Figure 3.1C(1): DateInclude.jsp source code
b. Then, create a web page ShowDateInclude.java and copy the source code as

shown in Figure 3.1C(2).

Figure 3.1C(2): ShowDateInclude.jsp source code

51

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1C

Activity Outcome: Display date using jsp:include with and without parameter
c. Save, compile, run the file DateInclude.jsp and the output should be as shown

in Figure 3.1C(3).

Figure 3.1C(3): DateInclude.jsp output
d. Next, modify the source code in DateInclude.jsp and ShowDateInclude.jsp as

shown in Figure 3.1C(4) and Figure 3.1C(5). This modification is necessary in
order to pass and receive parameter from DateInclude.jsp to
ShowDateInclude.jsp .

Figure 3.1C(4): DateInclude.jsp modification source code

52

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1C

Activity Outcome: Display date using jsp:include with and without parameter

Figure 3.1C(5): ShowDateInclude.jsp modification code
e. Save, compile and run DateInclude.jsp and the output should be as shown in

Figure 3.1C(6).

Figure 3.1C(6): DateInclude.jsp modification code output

53

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1D

Activity Outcome: Display user identification detail using jsp:useBean
Task 1 : Display user identification detail using jsp:useBean
a. In the same project in Activity 3.1B, create a web page namely

IdentificationDetail.jsp and copy the source code as shown in Figure 3.1D(1).

Figure 3.1D(1): IdentificationDetail.jsp source code
b. Next, create new Java Package namely test and inside that package, create

IdentificationDetail.java. Then copy the source code as shown in Figure
3.1D(2).

Figure 3.1D(2):IdentificationDetail.java source code

54

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1D

Activity Outcome: Display user identification detail using jsp:useBean
c. Save, compile and run IdentificationDetail.jsp and the output should be as

shown in Figure Figure 3.1D(3)

Figure 3.1D(3): IdentificationDetail.jsp output

55

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1E

Activity Outcome: Implement directive elements
Task 1 : Implement Directive Elements
a. In the same project in Activity 3.1B, create a new web page namely

directive.jsp and copy the source code as shown in Figure 3.1E(1).

Figure 3.1D(1): IdentificationDetail.jsp source code
Figure 3.1E(1): directive.jsp source code

b. Save, compile and run the Directive.jsp file. The output as shown in Figure
3.1E(2).

Figure 3.1E(2): directive.jsp output

56

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1E

Activity Outcome: Implement directive elements
c. Next, create a web page ErrorPage.jsp and copy the source code as shown in

Figure 3E(3).

Figure 3.1E(3): ErrorPage.jsp source code
d. Then, create a web page StringLength.jsp and copy the source code as

shown in Figure 3.1E(4).

Figure 3.1E(4): directive.jsp output

57

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1E

Activity Outcome: Implement directive elements
e. Save, compile and run the StringLength.jsp file. The output as shown in

Figure 3.1E(5).

Figure 3.1E(5): StringLength.jsp output
[Note: The output displayed “Sorry an exception occurred” because there
has null string given in the StringLength.jsp file. Type of exception is
displayed so that the developer able to identify the root cause and able
propose a possible solution.]
Task 2 : Implement Include Directive Elements
a. In the same project in Activity 3.1D, create a new web page namely
IncludeDirective.jsp and copy the source code as shown in Figure 3.1E(6).

Figure 3.1E(6): IncludeDirective.jsp source code

58

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1E

Activity Outcome: Implement directive elements
b. Then, using a existing index.html modify the existing code with the new

code as shown in Figure 3.1E(7)

Figure 3.1E(7): index.jtml source code
c. Save, compile and run the IncludeDirective.jsp file. The output as shown in

Figure 3.1E(8).

Figure 3.1E(8): IncludeDirective.jsp output

59

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
Task 1 : Implement out method
a. In the same project in Activity 3.1E, create a web page namely

calculator_out.jsp to implementing out method and copy the source code as
shown in Figure 3.1F(1).

Figure 3.1F(1): calculator_out.jsp source code
b. Save, compile and run the calculator_out.jsp file. The output should be as

shown in Figure 3.1F(2).

Figure 3.1F(2): calculator_out.jsp output

60

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
Task 2 : Implement request method
a. In the same project in Activity 3.1E, create a web page RegisterName.html

and follows the source code as shown in Figure 3.1F(3) to allow user to insert
their name.

Figure 3.1F(3): RegisterName.html source code
b. Then, create display.jsp and follows the source code as shown in Figure

3.1F(4) to implement request method.

Figure 3.1F(4) : display.jsp source code

61

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
c. Save, compile and run the RegisterName.html file. The output as shown in

Figure 3.1F(5) - Figure 3.1F(6).

Figure 3.1F(5): RegisterName.html output

Figure 3.1F(6): RegisterName.html output

62

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
Task 3 : Implement session method
a. In the same project in Activity 3.1E, create a web page ClassName.jsp and

follows the source code to implement session method as shown in Figure
3.1F(7).

Figure 3.1F(7): ClassName.jsp source code
b. Then, create DisplayClass.jsp and follow the code as shown in Figure 3.1F(8).

Figure 3.1F(8): DisplayClass.jsp source code

63

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
c. Save, compile and run the ClassName.jsp file. The output as shown in Figure

3.1F(9).

Figure 3.1F(9): ClassName.jsp output
d. Then, click the “click here to get class” link and the output should be as

shown in Figure 3.1F(10).

Figure 3.1F(10): ClassName.jsp output

64

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.1F

Activity Outcome: JSP implicit objects
Task 3 : Implement application method
a. In the same project in Activity 3.1E, create a jsp file namely

application_method.jsp and follows the source code to implement
application method as shown in Figure 3.1F(11).

Figure 3.1F(11): application_method.jsp source code
b. Save, compile and run the application_method.jsp file. The output should be

as shown in Figure 3.1F(12).

Figure 3.1F(12): application_method.jsp output

65

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

3.2 CONSTRUCT THE DATABASE WITH JDBC IN WEB APPLICATION

Learning Outcomes

This lab sheet encompasses THREE (3) activities. (Activity 3.2A until 3.2C)
By the end of this lab, student should be able to:

I. Able to connect to database
II. Able to use suitable statement and retrieving data
III. Handling SQL exception

Activity 3.2A

Activity Outcome: Connection to database and register new data
Task 1 : Construct the database connection
a. Create new project with the title of LabActivity_3.2A. Then, open

index.html and copy the source code as shown in Figure 3.2A(1).

Figure 3.2A(1): index.html source code
b. Save, compile and run the index.html file. The output should be as shown in

Figure 3.2A(2).

Figure 3.2A(1): index.html output

66

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2A

Activity Outcome: Connection to database and register new data
c. This Activity_3.2A will require a database to store and manipulate data.

Thus, mysql database server needs to be installed. Next, by using MySQL-
Front (optional), you are required to prepare and create a database Detail
and a table User with four columns as shown in Figure 3.2A(3).

Figure 3.2A(3):Related database information
d. Next, create a web page namely LabAct3.3_InsertData.jsp and copy the

source code as shown in Figure 3.2A(4) and Figure 3.2A(5).

Figure 3.2A(4): LabAct3.3_InsertData.jsp source code

67

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2A

Activity Outcome: Connection to database and register new data

Figure 3.2A(5):LabAct3.3_InsertData.jsp source code
e. Save, compile and run LabAct3.3_InsertData.jsp and the output should be as

shown in Figure 3.3A(6).

Figure 3.2A(6):LabAct3.3_InsertData.jsp output

68

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2A

Activity Outcome: Connection to database and register new data
f. Next, create a JSP file namely, process.jsp and copy the source code as

shown in Figure 3.2A(6).

Figure 3.2A(6):process.jsp source code
g. Save, compile and run the LabAct3.3_InsertData.jsp and observe the

output.

69

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2A

Activity Outcome: Connection to database and register new data
h. Based on Figure 3.2A(7), user required to insert all the information needed

then click “save data” button to register new data to the database.

Figure 3.2A(7): LabAct3.3_InsertData.jsp output
i. After all the data stored in the database successfully, then success message

is displayed to notified the user as shown in Figure 3.2A(8).

Figure 3.2A(8): LabAct3.3_InsertData.jsp output

70

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2B

Activity Outcome: Display and delete data from database
a. In the same project in Activity 3.2A, create a web page viewuser.jsp and

follows the source as shown in Figure 3.2B(1) to Figure 3.2B(3).

Figure 3.2B(1): viewuser.jsp source code

71

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2B

Activity Outcome: Display and delete data from database

Figure 3.2B(2): viewuser.jsp source code

Figure 3.2B(3): viewuser.jsp source code

72

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2B

Activity Outcome: Display and delete data from database
b. Save, compile and run viewuser.jsp file and the output as shown in Figure

3.2B(4)

Figure 3.2B(4): viewuser.jsp output
c. Next, create a web page namely, deleteform.jsp and copy the code as shown

in Figure 3.2B(5).

Figure 3.2B(5): deleteform.jsp source code

73

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2B

Activity Outcome: Display and delete data from database
d. Save, compile and run viewuser.jsp file and click the delete button. The

output as shown in Figure 3.2B(6) and Figure 3.2B(7)

Figure 3.2B(6): viewuser.jsp user interface
e. After the delete process of specific data is completed, proper message is

displayed to notified user as shown in Figure 3.2B(7).

Figure 3.2B(7): deleteform.jsp output

74

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2C

Activity Outcome: Updating specific data from database
a. In the same project in Activity 3.2B, create a web page namely editform.jsp

and follows the source code as shown in Figure 3.2C(1) to Figure 3.2C(3).

Figure 3.2C(1): editform.jsp source code

75

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2C

Activity Outcome: Updating data from database

Figure 3.2C(2): editform.jsp source code

Figure 3.2C(3): editform.jsp source code

76

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.2C

Activity Outcome: Updating data from database
b. Save, compile and run viewuser.jsp page and click Edit button to update

specific user information. The output should be as shown in Figure 3.2C(4) –
Figure 3.2C(6) .

Figure 3.2C(4): view.jsp user interface

Figure 3.2C(5): editform.jsp user interface

Figure 3.2C(6): update information output

77

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

3.3 PERFORM THE INTEGRATION JSP AND SERVLET IN A PROJECT

Learning Outcomes

This lab sheet encompasses ONE (1) activities (Activity 3.3A).
By the end of this lab, student should be able to:

I. Perform the integration JSP and servlet

Activity 3.3D

Activity Outcome: Integration JSP and Servlet
Task 1 : Perform the integration between JSP and servlet.
a. Create new project with the title of LabActivity_3.3D. Then, open

index.html and copy the source code as shown in Figure 3.3D(1).

Figure 3.3D(1): index.html source code
b. Save, compile and run index.html page and the output should be as shown

in Figure 3.3D(2).

78

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.3D

Activity Outcome: Integration JSP and Servlet

Figure 3.3D(2): index.html user interface
c. Next, create new servlet with the name of LoginServlet.java. Copy the

source code as shown in Figure 3.3D(3).

Figure 3.3D(3): LoginServlet.java source code

79

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.3D

Activity Outcome: Integration JSP and Servlet
d. Next, create new java class with the name of Validate.java for the database
connection and copy the code as shown in Figure 3.3D(4). This file is created
to authenticate and validate user credential inserted by the user.

Figure 3.3D(4): LoginServlet.java source code
e. Save, compile and run index.html. The output should be as shown in Figure

3.3D(5)

Figure 3.3D(5): index.html user interface

80

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.3D

Activity Outcome: Integration JSP and Servlet
f. Next, create new java class with the name of Validate.java for the database
connection and copy the code as shown in Figure 3.3D(6). This file is created
to authenticate and validate user credential inserted by the user.

Figure 3.3D(6): LoginServlet.java source code
g. Then, create new jsp file with the name home.jsp and then copy the source

code as shown in Figure 3.3D(7).

Figure 3.3D(7): home.jsp source code

81

3. INTRODUCTION TO JAVA SERVER
PAGES (JSP)

Activity 3.3D

Activity Outcome: Integration JSP and Servlet
h. Save, compile and run index.html. Then, insert the correct user credential
and click “login” button. The output should be as shown in Figure 3.3D(8)
and Figure 3.3D(9).

Figure 3.3D(8): index.html user interface

Figure 3.3D(9): index.html user interface

82

4. DEPLOYMENT AND SECURITY

4.1 PRODUCE WEB APPLICATION SECURITY IN WEB APPLICATION

Learning Outcomes

This lab sheet encompasses THREE (3) activities. (Activity 3.2A until 3.2C)
By the end of this lab, student should be able to:

I. Produce Web Application Security in Web
Application

Activity 4.1A

Activity Outcome: Form based authentication
Task 1 : Construct the Form based authentication
a. Create new project namely LabActivity_4.1. Then, create a login.jsp and

copy the source code as shown in Figure 4.1A(1).

Figure 4.1A(1): login.jsp source code
b. Save, compile and run the login.jsp file and the output should be as shown in

Figure 4.1A(2).

Figure 4.1A(2): login.jsp output

83

4. DEPLOYMENT AND SECURITY

Activity 4.1A

Activity Outcome: Form based authentication
c. Then, create new jsp file namely index.jsp copy the source code as shown in
Figure 4.1A(3).

Figure 4.1A(3): index.jsp source code
d. Next, create new jsp file namely, error.jsp and copy the source code as

shown in Figure 4.1A(4). This file is created in order to display proper error
when user entered wrong user credentials.

Figure 4.1A(4): error.jsp user interface

84

4. DEPLOYMENT AND SECURITY

Activity 4.1A

Activity Outcome: Form based authentication
e. Next, create new jsp file namely logout.jsp and copy the source code as
shown in Figure 4.1A(5). This file is created to allow user to logout the
system if necessary.

Figure 4.1A(5): index.jsp source code
f. Then, create new web.xml file as shown in Figure 3.4A(6). Web.xml is under

web category.

Figure 4.1A(6): create new web.xml file

85

4. DEPLOYMENT AND SECURITY

Activity 4.1A

Activity Outcome: Form based authentication
g. Then, modify and copy the web.xml source code as shown in Figure 4.1A(7).

Figure 4.1A(7): web.xml source code

86

4. DEPLOYMENT AND SECURITY

Activity 4.1A

Activity Outcome: Form based authentication
h. Next, refer to the tab services and show the properties of the Apache Tomcat
or TomEE. This is to identify the location of your apache-tomee-plus folder
(Please refer Figure 4.1A (8)).

Figure 4.1A(8): Apache Tomcat or TomEE properties
i. Open the folder apachee-tomee-plus (based on the your computer path

found in Figure 4.1A(8)) then, open and modify the tomcat-users.xml source
code as shown in Figure 4.1A(9).

Figure 4.1A(9): tomcat-users.xml source code

87

4. DEPLOYMENT AND SECURITY

Activity 4.1A

Activity Outcome: Form based authentication
j. Save, compile, run the index.jsp and user are required to entered the correct
user credential (according to username and password in Figure 4.1B(9)). The
output should be as shown in Figure 4.1A(10).

Figure 4.1B(10): index.jsp output
k. If the user entered wrong password and username, the error message is

displayed to notified user as shown in Figure 4.1B(11).

Figure 4.1B(11): index.jsp output

88

4. DEPLOYMENT AND SECURITY

Activity 4.1B

Activity Outcome: Form based authorization
a. With the same project in Activity 4.1B, modify the existing tomcat-users.xml

source code and by another username and password with different role as
shown in Figure 4.1B(1).

Figure 4.1B(1): tomcat-users.xml modified source code
b. Next, modify the index.jsp source code to allow different role user to access

the system as shown in Figure 4.1B(2).

Figure 4.1B(2): index.jsp source code

89

4. DEPLOYMENT AND SECURITY

Activity 4.1B

Activity Outcome: Form based authorization
c. Then, modify the web.xml source code to add the role name “user” as

shown in Figure 4.1B(3)

Figure 4.1B(3): tomcat-users.xml modified source code

90

4. DEPLOYMENT AND SECURITY

Activity 4.1B

Activity Outcome: Form based authorization
d. Then, create new jsp file namely user.jsp and copy the source code as shown
in Figure 4.1B(4).

Figure 4.1B(4): user.jsp source code
e. Save, compile and run the index.jsp file. Then try login by using user and

employee credential as shown in Figure 4.1B(1). The output should be as
shown in Figure 4.1B(5).

Figure 4.1B(5): index.jsp output

91

5. REFERENCES

Burd, Barry, Beginning Programming with Java for Dummies, Java, 2014

Chin, Stephen, Johan Vos, and James Weaver, The Definitive Guide to Modern
Java Clients with JavaFX, The Definitive Guide to Modern Java Clients with
JavaFX (Berkeley, CA: Apress, 2019) <https://doi.org/10.1007/978-1-4842-
4926-0>

Downey, Tim, Web Development with Java, Web Development with Java
(London: Springer London, 2007) <https://doi.org/10.1007/978-1-84628-
863-0>

Kulkarni, Ram, Java EE Development with Eclipse: Develop, Debug, Test, and
Troubleshoot Java EE 7 Applications Rapidly with Eclipse, 3rd Editio (Packt
Publishing; 3rd edition (June 29, 2018), 2015)

Layka, Vishal, Learn Java for Web Development, Learn Java for Web
Development (Berkeley, CA: Apress, 2014) <https://doi.org/10.1007/978-1-
4302-5984-8>