JSP Model 2 (MVC)
1. Create a database named “mvc”.
2. In “mvc” database, create a table named “category” that has a structure as below:
cat_id varchar(10), PK
cat_name nvarchar(50)
cat_description nvarchar(1000)
3. In “mvc” database, create another table named “product” that has a structure as
below:
pro_id varchar(10), PK
pro_name varchar(50)
pro_price bigint
pro_quantity int
pro_description nvarchar(500)
cat_id varchar(10), FK
4. You must input 03 samples for category table and 05 samples for product table as
below
Category
1 Apple
2 Samsung
3 Xiaomi
Product
1 IPhone 15 22.000.000 20 New 1
2 IPhone 14 17.000.000 10 Like New 1
3 Samsung S24 22.000.000 15 New 2
4 Redmi K30 5G 5.500.000 30 China 3
5 Redmi Note 14 13.000.000 12 China 3
5. Create a page named “index.jsp” to show all of products in database.
Attribute Type Name CSS Note
Edit button link .btn -
.btn-success
Delete button link .btn -
.btn-danger
6. When the user click on the “Add New” button, they will be redirected to
“addnew.jsp”.
Attribute Type Name CSS Note
Product ID Textbox txtID -
Product Name Textbox txtName -
Price Number txtPrice -
Quantity Number txtQuan -
Description TextArea txtDes -
Category Name Select cboCat -
Create button Submit btnCreate .btn -
.btn-primary
Back to list link .btn Back to
. btn-danger index.jsp
a. User must input all information for product to insert into database. You
must use Javascript or Jquery to validate the inputted data before submitting
to db.
b. At the Category Name, you must show the names of categories for user to
choose, but when user click on Create button, you must send the Category
Id.
c. When product is created successfully, the website will be redirected to
“index.jsp”.
7. In “index.jsp” page, when user click on edit button, they will be redirected to
“edit.jsp” and all info of product will be shown on the form.
Attribute Type Name CSS Note
Product ID Textbox txtID Readonly
Product Name Textbox txtName -
Price Number txtPrice -
Quantity Number txtQuan -
TextArea Description txtDes -
Category Name Select cboCat -
Save button Submit btnSave .btn -
.btn-primary
Back to list link .btn Back to
.btn-danger index.jsp
a. You must use Javascript or Jquery to validate the inputted data before
submitting to db.
b. The website will be redirected to “index.jsp” after updating in database or
having any errors.
8. In “index.jsp” page, when user click on delete button, they will be redirected to
“delete.jsp” to confirm. When user click on delete button, the data of this product
will be deleted in database.
Attribute Type Name CSS Note
- hidden txtProID -
Product ID Textbox txtID Disable
Product Name Textbox txtName Disable
Price Number txtPrice Disable
Quantity Number txtQuan Disable
TextArea Description txtDes Disable
Category Name Select cboCat Disable
Delete button Submit btnDelete .btn
.btn-primary
Back to list link .btn Back to
.btn-danger index.jsp
URLs for functions in this workshop:
Function URL Jsp page
List of Product http://localhost:8080/ index.jsp
Or
http://localhost:8080/List
Add new a product http://localhost:8080/Create addnew.jsp
Edit a product http://localhost:8080/Edit?id={id} edit.jsp
Delete a product http://localhost:8080/Delete?id={id} delete.jsp
In which:
List, Create, Edit and Delete are actions (name of controllers/servlets). Students must use the
correct action names for the functions.
id is a parameter containing the product ID passed to another page.
{id} is value of parameter id.
1. Do not use context root
2. To pass data between page, student must use variable name “id” on URL.
3. Do not use <thead> and <tbody> tag in <table> tag.
