11/25/2019

MVC PATTERN
AND
SHOPPING CART

MVC Pattern
̵ The model-view-controller (MVC) design
pattern specifies that an application consist of
a data model, presentation information, and
control information.

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

1
 11/25/2019

MVC Pattern
̵ The Model contains only the pure application
data, it contains no logic describing how to present
the data to a user.
̵ The View presents the model’s data to the user.
The view knows how to access the model’s data,
but it does not know what this data means or what
the user can do to manipulate it.
̵ The Controller exists between the view and the
model. It listens to events triggered by the view
and executes the appropriate reaction to these
events.
̵ In most cases, the reaction is to call a method on
the model. Since the view and the model are
connected through a notification mechanism, the
result of this action is then automatically reflected
in the view. 3

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

2
 11/25/2019

Controllers
̵ Controllers are what the user interacts with.
̵ They receive a request from the user, decide
what to do, and send a response back.
̵ It’s the only component that interacts with the
models.

In JSP/Servlet, controller is servlet page. The servlet

receipt data in web browser and do something with them.
With data receipt, The servlet decides what business
logic code applies and which JSP page should present the
results
5

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

Model
̵ Models are where an application’s data are
stored, usually in a database.
̵ Responsible for storing and retrieving data.
̵ They know nothing about the user interface.

The model is a java class with some method

validate data, is where define business rules of data.
Should use model to connect database.
Model data is usually the same as the database
data. 6

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

3
 11/25/2019

View
̵ Views are what the user sees on the
screen (i.e. the HTML).
̵ They present the data to the user.

Displaying the Model data fetched by the Controller.

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

SHOPPING CART

08/2019 KHOA CNTT - NLU

4
 11/25/2019

Shopping cart
̵ Shopping cart in eCommerce assist to visitors
make purchases online. Upon checkout, the
software calculates the total of the order,
including shipping fee and payment
information, etc.
̵ Shoping cart:
▪ Add item.
▪ Update item (color, size, quantity …)
▪ Delete item
▪ Calcutate bill.
▪…
9

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

Modeling the Business Process

̵ What information should a session deal with?
▪ What information must be gathered via forms?
• Items to purchase
• Customer information, etc.
▪ What information must be displayed to the user in response
pages?
• Shopping cart contents, etc.
▪ What information must be stored long term?
• Throughout session
• Longer (in databases, etc.)
̵ Model of business process
▪ Defined by organization you develop site for
▪ Defined structure for each modeL
10

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

10

5
 11/25/2019

̵ MODEL: software classes that store/manipulate

information gathered in session
▪ Usually separate from servlets/JSPs
▪ Servlets/JSPs interact with those classes
▪ Usually working with databases

Store data
request Classes
Control that model
servlet business
View process
JSP
View Access and
JSP display data
response View
JSP Database 11

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

11

Store data solution

̵ Bad solution:
Store all information to session as separate
attributes
• We need multiple attribute to store
• Difficulties in data calculating.

All session data

… …
Session data
Session ID
Attribute 1 Item id 1

Attribute 2 Item id 2

… … 12

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

12

6
 11/25/2019

Store data solution

̵ Better solution:
▪ Create classes and use data structure to store data
• Data stored in session as a object.
• Class have all method to store/access/manipulate
data.

All session data

… …
Session data
Session ID
“Cart” Cart Object
… …

… … 13

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

13

Model Class
̵ All information is stored as the variables
̵ Each variable has getter and setter method:
▪ Setter: Takes value as parameter and stores it in
state variable, validate all value put in
▪ Getter: return current value of variable

14

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

14

7
 11/25/2019

Example Customer Class

15

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

15

Using Model Classes

̵ We must include package name at top of file
package packagename;
̵ Other classes that use class must import the package
▪ Servlets use import statement
▪ JSPs use <@ page import tag

16

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

16

8
 11/25/2019

Using Model Classes

̵ In servlet:
▪ Construct a new instance of the model object
▪ Use its set methods to store parameters from form
▪ Store the object as a session attribute

17

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

17

Using Model Classes

̵ In JSP:
▪ Retrieve the object from the session attributes
• Must cast back to its original type
▪ Use its get methods to retrieve data
▪ Display the data on the page

18

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

18

9
 11/25/2019

Business Model Objects

Key idea:
̵ Methods in model objects should implement business
model
▪ Methods to validate values
▪ Methods to perform computations
▪ Methods to store information in database

Goal:
̵ Separate web programming and business knowledge
as much as possible

19

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

19

Shopping Cart
̵ Usually Map of items
▪ Map type in Java
▪ Has methods to put new element to map, get element with
id, and remove element with id
▪ Use product id with key and product object is value
̵ Map element is business model object
▪ Has fields for all relevant data about item purchased
• Set and get methods for each
• One field should be unique identifier (key field)
• Some fields populated by database lookup
▪ May have way to set quantity purchased

20

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

20

10
 11/25/2019

Shopping Cart API

̵ Product get(int id)
▪ Lookup and return the Item in the list with the given ID
̵ int put(Product item)
▪ add a new item to the cart with the given ID
̵ boolean remove(int id)
▪ Delete the Item in the list with the given ID
̵ double total()
▪ Return sum of cost of Cart
̵ Collection<Product> list()
▪ Return list of Product in Cart

21

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

21

Product class sample

22

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

22

11
 11/25/2019

Cart class implement

23

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

23

Cart class implement

24

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

24

12
 11/25/2019

Displaying Cart Contents

̵ Get cart from session

̵ Inside of a table:
▪ Get number of items in cart
▪ Get list of Product ->using for to loop this list

25

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

25

Displaying Cart Contents

26

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

26

13
 11/25/2019

Displaying Cart Contents

27

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

27

Add product to Cart

̵ Get current Cart object from session using getAttribute
▪ If null, no Cart exists yet
▪ In that case, construct one
̵ Get data from request and pass to Cart
▪ Cart will construct and store a new Item
▪ Will need to validate request first
̵ Will need to check whether item already in Cart
▪ Need to avoid duplicate entries in Cart
▪ Business model defines how handled
• Error message
• Change quantity,
• Add to quantity, etc.

28

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

28

14
 11/25/2019

Add product to Cart

29

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

29

Embedded Forms in Cart Pages

30

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

30

15
 11/25/2019

Embedded Forms in Cart Pages

31

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

31

Simple Removal Servlet

̵ Delete servlet

̵ Remove method in cart object

32

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

32

16
 11/25/2019

Hidden Form Elements

̵ Must submit product code for remove to work
̵ Product code not displayed on page inside a form
element
▪ Common for most ecommerce pages

Can use hidden form element

̵ Not shown by browser
̵ Can store product code or other information that we
need to send to server
<input type=“hidden” name=“parameter name”
value=“<%= product code %>”
33

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

33

Passing Data using Links

̵ Can append “form data” directly to URL in link
▪ Result similar to “get” method in form
̵ Syntax:
<a href = “url of servlet?name=value&name=value…”>

Submit request to the servlet

Each passed as a
The ‘?’ indicates form name=value pair separated by ‘&’
parameters

▪ Note: will need to use response.encodeURL to insure this

works if cookies not enabled

<a href = “<%=response.encodeURL(

‘servleturl?name=value&…’)%>”> 34

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

34

17
 11/25/2019

Passing Data using Links

35

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

35

DEMO
36

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

36

18
 11/25/2019

Q&A

37

08/2019 KHOA CNTT - NLU LẬP TRÌNH WEB PHAN ĐÌNH LONG 37

37

19