Bài giảng Lập trình ứng dụng mạng: Bài 8 - GV. Võ Tấn Dũng

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN TP.HCM

LẬP TRÌNH ỨNG DỤNG MẠNG BÀI 8

SHOPPING CART SHOPPING CART

1

GIẢNG VIÊN: VÕ TẤN DŨNG

g n ũ D n ấ T õ V

:

V G

PHẦN 1 TÌM HIỂU VỀ GIỎ HÀNG (SHOPPING CART)

2

g n ũ D n ấ T õ V

:

V G

• Thiết kế giỏ hàng (shopping cart) với session. • Thiết kế giỏ hàng với cơ sở dữ liệu. • Tìm hiểu cookies.

3

g n ũ D n ấ T õ V

:

V G

CÁC VẤN ĐỀ ĐƯỢC TRÌNH BÀY CÁC VẤN ĐỀ ĐƯỢC TRÌNH BÀY

• Để mua hàng trên mạng chúng ta cần một giỏ hàng. Đó

chính là shopping cart.

• Các mặt hàng hiển thị trên trang web cho ta chọn rồi đưa vào giỏ hàng. Giỏ hàng sẽ cho biết tổng số mặt hàng mà bạn đã mua cùng với giá phải thanh toán.

• Bạn có thể thêm bớt số lượng hoặc loại bỏ, chọn lại các

mặt hàng khác.

• Có hai cách để xây dựng shopping cart:

– Sử dụng session. – Sử dụng các bảng của một cơ sở dữ liệu.

4

g n ũ D n ấ T õ V

:

V G

KHÁI NIỆM GIỎ HÀNG KHÁI NIỆM GIỎ HÀNG

• Chương trước ta đã dùng session và application để lưu dữ liệu để truyền qua lại giữa các trang web. Bây giờ ta sử dụng session trong một ứng dụng rất thực tế đó là áp dụng để xây dựng shopping cart cho các trang web mua sắm trên mạng.

• Đối tượng session là nơi lý tưởng để xây dựng

shopping cart lưu các mặt hàng mà người dùng chọn mua trước khi thanh toán.

• Ngoài ra ta còn có thể xây dựng giỏ hàng bằng cơ sở dữ liệu để lưu các mặt hàng trong các bảng dữ liệu.

5

g n ũ D n ấ T õ V

:

V G

KHÁI NIỆM GIỎ HÀNG KHÁI NIỆM GIỎ HÀNG

• Một giỏ hàng cần có những phương thức cơ bản thực

hiện những công việc sau: – addItem: thêm một mục hàng mới vào giỏ hàng. – removeItem: loại bỏ một mục hàng ra khỏi giỏ hàng. – clearItem: xóa bỏ tất cả các mục hàng trong giỏ hàng. – updateQuantity: thay đổi số lượng mua của một mục

hàng.

– getCost: cho biết tổng số tiền phải trả cho tất cả các mục

hàng có trong giỏ hàng.

– getNumOfItem: đếm tổng số mục hàng có trong giỏ

hàng.

6

g n ũ D n ấ T õ V

:

V G

CÁC PHƯƠNG THỨC CỦA GIỎ HÀNG CÁC PHƯƠNG THỨC CỦA GIỎ HÀNG

• Một mục hàng (item) lưu trong giỏ hàng cần có những

thông tin cơ bản sau: – Mã số của mục hàng (item id). – Tên mục hàng (item desc). – Đơn giá (price). – Số lượng mua (quantity).

• Bởi vì giỏ hàng có thể chứa nhiều mục hàng tương ứng với một khóa (item id) nên ta sử dụng bảng Hashtable của Java (bảng này dùng để lưu các giá trị dựa trên khóa) hoặc dùng các table của CSDL để lưu giá trị các mục hàng mà người dùng thêm vào.

7

g n ũ D n ấ T õ V

:

V G

THÔNG TIN CỦA MỘT MỤC HÀNG THÔNG TIN CỦA MỘT MỤC HÀNG

PHẦN 2 XÂY DỰNG GIỎ HÀNG VỚI SESSION

8

g n ũ D n ấ T õ V

:

V G

• Sau đây ta tiến hành viết code xây dựng giỏ hàng với

session trong lớp ShoppingCart.java

9

g n ũ D n ấ T õ V

:

V G

XÂY DỰNG GIỎ HÀNG VỚI SESSION XÂY DỰNG GIỎ HÀNG VỚI SESSION

10

g n ũ D n ấ T õ V

:

V G

ShoppingCart.java LớpLớp ShoppingCart.java

11

g n ũ D n ấ T õ V

:

V G

LớpLớp ShoppingCart.java ShoppingCart.java ((tttt))

12

g n ũ D n ấ T õ V

:

V G

LớpLớp ShoppingCart.java ShoppingCart.java ((tttt))

13

g n ũ D n ấ T õ V

:

V G

LớpLớp ShoppingCart.java ShoppingCart.java ((tttt))

• Biên dịch lớp ShoppingCart nói trên thành file

ShoppingCart.class và chép file .class này vào thư mục WEB-INF\cart\classese của ứng dụng. Bạn sẽ có một giỏ hàng sẵn sàng phục vụ cho các ứng dụng mua sắm trên mạng chuyên nghiệp.

• Chúng ta hãy xem và sử dụng lớp ShoppingCart này như thế nào trong trang ShoppingCart.jsp sau đây:

14

g n ũ D n ấ T õ V

:

V G

ShoppingCart.java BiênBiên dịchdịch ShoppingCart.java

15

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ShoppingCart.jsp

16

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

17

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

18

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

19

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

20

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

• Hình sau đây là kết quả hiển thị nội dung giỏ hàng của

trang ShoppingCart.jsp

21

g n ũ D n ấ T õ V

:

V G

ShoppingCart.jsp ((tttt)) ShoppingCart.jsp

• Ta có thể xây dựng một trang web độc lập khác để

kiểm tra trang ShoppingCart.jsp

22

g n ũ D n ấ T õ V

:

V G

TestShoppingCart.html TestShoppingCart.html

23

g n ũ D n ấ T õ V

:

V G

TestShoppingCart.html ((tttt)) TestShoppingCart.html

• Trong trang ShoppingCart.jsp, trước hết chúng ta tìm xem đối tượng giỏ hàng mang tên “cart” đã được lưu trong đối tượng session chưa. Nếu chưa thì ta tạo mới và lưu đối tượng này vào session.

24

g n ũ D n ấ T õ V

:

V G

GiảiGiải thích ShoppingCart.jsp)) thích ((ShoppingCart.jsp

GiảiGiải thích ShoppingCart.jsp) () (tttt))

25

g n ũ D n ấ T õ V

:

V G

thích ((ShoppingCart.jsp • Ta sử dụng một đoạn mã JavaScript phía trình khách để xác định thao tác khi người dùng muốn loại bỏ hay cập nhật các mặt hàng. Sau khi đã xác định được thao tác xử lý, hành động submit mới được gọi để chuyển dữ liệu về lại cho trang ShoppingCart.jsp trên trình chủ xử lý.

PHẦN 3 XÂY DỰNG GIỎ HÀNG VỚI CƠ SỞ DỮ LIỆU

26

g n ũ D n ấ T õ V

:

V G

• Session chỉ có giá trị cục bộ trên một máy chủ Web Server. Trong thực tế, các ứng dụng web có tính đa quốc gia. Các máy Web Server của một tổ chức có thể đặt ở nhiều nơi, các mục hàng để ở các Web Server khác nhau. Nếu dùng session trong trường hợp này là không được.

• Khi người dùng đang mua hàng online, máy chủ có thể

27

gặp sự cố. Lúc đó đối tượng session sẽ bị mất.

g n ũ D n ấ T õ V

:

V G

HẠN CHẾ CỦA SESSION HẠN CHẾ CỦA SESSION • Session để lưu các trạng thái hiện thời của người dùng khi người dùng duyệt web nhưng session không lưu dữ liệu được lâu. Session chỉ lưu được dữ liệu trong một khoảng thời gian nào đó. Quá thời gian này, các dữ liệu trong session sẽ bị hủy bỏ.

• Table này có cấu trúc như sau:

CREATE TABLE shoppingCart(user_id varchar (50), item_id int, item_desc varchar(200), price float, quantity int)

• Bảng này dùng để lưu trữ thông tin mua hàng của một người dùng. Vì vậy, ta phải buộc người dùng đăng nhập vào hệ thống trước khi mua hàng và ta phải sử dụng tên người dùng để tạo thông tin cho giỏ hàng. • Lớp shopping cart được tạo với CSDL cũng có đầy đủ

28

g n ũ D n ấ T õ V

các phương thức của một giỏ hàng.

:

V G

SHOPPING CART VỚI CƠ SỞ DỮ LIỆU SHOPPING CART VỚI CƠ SỞ DỮ LIỆU • Thay vì tạo giỏ hàng với session và lưu các mục hàng trong Hashtable, ta sẽ tạo giỏ hàng với CSDL và lưu các mục hàng trong một table của CSDL.

29

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ShoppingCartDB.java

30

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ((tttt)) ShoppingCartDB.java

31

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ((tttt)) ShoppingCartDB.java

32

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ((tttt)) ShoppingCartDB.java

33

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ((tttt)) ShoppingCartDB.java

34

g n ũ D n ấ T õ V

:

V G

ShoppingCartDB.java ((tttt)) ShoppingCartDB.java

• Để sử dụng đối tượng ShoppingCartDB này, ta cần bổ sung vào trang ShoppingCart.jsp đoạn mã để kiểm tra xem người dùng đã đăng nhập hay chưa và thiết lập giá trị UserID tương ứng cho giỏ hàng trước khi sử dụng.

35

g n ũ D n ấ T õ V

:

V G

GiảiGiải thích ShoppingCartDB.java)) thích ((ShoppingCartDB.java

• Trong quá trình mua hàng ta có thể thêm, bớt, xóa các mặt hàng. Nếu chưa quyết định mua hàng, ta có thể thoát khỏi trình duyệt để chấm dứt session. Trong lần mua hàng tiếp theo, thông tin trong giỏ hàng vẫn còn tồn tại để ta tiếp tục quá trình giao dịch.

• Cài đặt giỏ hàng với session hay với CSDL là tùy theo

nhu cầu của ứng dụng web đòi hỏi.

• Tuy nhiên, ta cũng còn một cơ chế lưu trữ trạng thái khác nữa. Cơ chế này diễn ra tại trình khách và khá thông dụng. Đó là sử dụng cookies.

36

g n ũ D n ấ T õ V

:

V G

GiảiGiải thích thích ((ShoppingCartDB.java ShoppingCartDB.java) () (tttt))

PHẦN 4 TÌM HIỂU CÁCH LƯU DỮ LIỆU CỦA COOKIES

37

g n ũ D n ấ T õ V

:

V G

Nếu muốn lưu vết trạng thái giao dịch phía máy khách thì ta dùng kỹ thuật cookies.

• Cookies là một mẩu thông tin gồm tên và giá trị thể

hiện (tương tự biến). Ta có thể sử dụng ngôn ngữ kịch bản JavaScript để tạo các mẩu cookies.

• Trình duyệt cho phép chúng ta tạo ra các mẩu cookies và ghi nhớ xuống máy khách. Cookies cũng có thể được tạo từ trình chủ (cụ thể là Servlet) và yêu cầu trình duyệt lưu xuống máy khách.

38

• Trong quá trình thực hiện lệnh POST hoặc lệnh GET của giao thức HTTP, trình chủ và trình khách có thể gửi và nhận mẩu tin cookies của nhau.

g n ũ D n ấ T õ V

:

V G

U GIAO DỊCH BẰNG COOKIES LLƯƯU GIAO DỊCH BẰNG COOKIES • Session là cơ chế lưu vết các trạng thái tại trình chủ.

39

g n ũ D n ấ T õ V

:

V G

U GIAO DỊCH BẰNG COOKIES LLƯƯU GIAO DỊCH BẰNG COOKIES

• Ví dụ sau đây cho thấy cách sử dụng cookies phía máy khách.

40

g n ũ D n ấ T õ V

:

V G

U VẾT PHÍA TRÌNH KHÁCH COOKIES LƯƯU VẾT PHÍA TRÌNH KHÁCH COOKIES L

• Trang web vừa rồi của ta có tên cookieshow.html. Trang web này sử dụng JavaScript để tạo mẩu tin cookies mang tên “pagecolor” với giá trị “yellow”. • Hàm setCookie() trong trang web này rất đơn giản, nó chỉ gọi đối tượng document của trang để lưu trị và tên cookie: setCookie(“pagecolor”,”yellow”)

• Hàm getCookieVal() để đọc lại giá trị của cookie. Mỗi mẩu tin trong cookie được phân cách nhau bằng dấu chấm phẩy(;)

• Hàm escape của JavaScript giúp ta loại bỏ các ký tự

đặc biệt trong cookies hoặc chuyển các ký tự đặc biệt thành dạng mã hóa khác.

41

g n ũ D n ấ T õ V

:

V G

cookieshow.html)) GIẢI THÍCH (cookieshow.html GIẢI THÍCH (

• Kết quả hiển thị của mẩu tin vừa mới tạo trên trình

duyệt IE như hình sau. Ngoài mẩu tin pagecolor=yellow thì ta có thể nhận được một số mẩu tin cookie khác do trình duyệt tạo ra.

42

g n ũ D n ấ T õ V

:

V G

cookieshow.html)) GIẢI THÍCH (cookieshow.html GIẢI THÍCH (

• Trang web cookieshow.html mà ta đã thiết kế có thẻ FORM gọi đến Servlet mang tên CookieListing.

• Khi ta nhấn nút “Send cookies to server” thì trình duyệt sẽ gọi đến Servlet CookieListing trên máy chủ. Đồng thời toàn bộ cookies trên máy khách cũng sẽ được trình duyệt đóng gói gửi đi.

• Servlet CookieListing này được thiết kế để tiếp nhận

cookie của trình khách.

43

g n ũ D n ấ T õ V

:

V G

GỬI COOKIE LÊN TRÌNH CHỦ GỬI COOKIE LÊN TRÌNH CHỦ

44

g n ũ D n ấ T õ V

:

V G

CookieListing.java CookieListing.java

45

g n ũ D n ấ T õ V

:

V G

CookieListing.java ((tttt)) CookieListing.java

46

g n ũ D n ấ T õ V

:

V G

CookieListing.java ((tttt)) CookieListing.java

Biên dịch cookieListing.java. Đăng ký servlet này với trình chủ. Trở lại trang Cookieshow.html, nhấn vào nút “Send cookies to Server” được kết quả như hình trên.

47

g n ũ D n ấ T õ V

:

V G

CookieListing.java ((tttt)) CookieListing.java

• CookieListening của ta tiếp nhận được mẩu tin cookie

mang tên “pagecolor=yellow” từ trình khách bằng cách gọi hàm getcookieValue().

• Hàm này sử dụng danh sách cookies do đối tượng req trả về để tìm ra cookie mang tên “pagecolor”. Màu nền trang web phản hồi từ CookieListing được định màu như giá trị cookie pagecolor đã yêu cầu (vàng).

• Đồng thời CookieListening cũng tạo thêm một cookie mới

servervar1 với giá trị vardata1 trả về cho trình khách. • Phía trình khách, trang web của ta tạo mã JavaScript gọi document.write(document.cookie) để in ra toàn bộ các cookie mang về từ trình chủ.

48

g n ũ D n ấ T õ V

:

V G

CookieListing.java)) GIẢI THÍCH (CookieListing.java GIẢI THÍCH (

• Thông thường cookie được dùng để lưu các giá trị cần thiết nhưng không quan trọng. Ví dụ, ta có thể lưu thông tin của người dùng đã ghé thăm Website của mình. Trong lần viếng thăm khác ta sẽ làm họ ngạc nhiên vì đã hiển thị lại đúng thông tin trước đó.

• Hoặc những ứng dụng WebMail như Yahoo sử dụng cookie để lưu thông tin người dùng đăng nhập trước đó. Khi người dùng mở trang web khác thay vì yêu cầu đăng nhập lại,Yahoo mail sử thông dụng tin của cookie để chứng thực.

• Ta có thể quy định thời gian hiệu lực của cookie bằng gọi

phương thức setMaxAge(). Đối số truyền cho phương thức này là kiểu int quy định số giây mà cookie được phép lưu trữ trên trình khách.

49

g n ũ D n ấ T õ V

:

V G

CookieListing.java)) GIẢI THÍCH (CookieListing.java GIẢI THÍCH (

• Ví dụ để thiết lập cookie được phép lưu trữ trong vòng 8 tiếng, ta có thể gọi setMaxAge từ trang JSP hoặc một servlet như sau: • Nếu bạn truyền cho setMaxAge() giá trị âm thì cookie sẽ bị xóa

khỏi máy khách khi trình duyệt đóng lại.

50

g n ũ D n ấ T õ V

:

V G

CookieListing.java)) GIẢI THÍCH (CookieListing.java GIẢI THÍCH (

HẾT BÀI 8

51

g n ũ D n ấ T õ V

:

V G