Bài 8 Shopping Cart

1 GIẢNG VIÊN: 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 G V : V õ T ấ n D ũ n g 2G V : V õ T ấ n D ũ n g PHẦN 1 TÌM HIỂU VỀ GIỎ HÀNG (SHOPPING CART) 3G V : V õ T ấ n D ũ n g CÁC VẤN ĐỀ ĐƯỢC TRÌNH BÀY • 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. 4G V : V õ T ấ n D ũ n g KHÁI NIỆM GIỎ HÀNG • Để 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. 5G V : V õ T ấ n D ũ n g 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. 6G V : V õ T ấ n D ũ n g CÁC PHƯƠNG THỨC CỦA 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. 7G V : V õ T ấ n D ũ n g THÔNG TIN CỦA MỘT MỤC 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. 8G V : V õ T ấ n D ũ n g PHẦN 2 XÂY DỰNG GIỎ HÀNG VỚI SESSION 9G V : V õ T ấ n D ũ n g XÂY DỰNG GIỎ HÀNG VỚI SESSION • 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 10 G V : V õ T ấ n D ũ n g Lớp ShoppingCart.java 11 G V : V õ T ấ n D ũ n g Lớp ShoppingCart.java (tt) 12 G V : V õ T ấ n D ũ n g Lớp ShoppingCart.java (tt) 13 G V : V õ T ấ n D ũ n g Lớp ShoppingCart.java (tt) 14 G V : V õ T ấ n D ũ n g Biên dịch ShoppingCart.java • 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: 15 G V : V õ T ấ n D ũ n g ShoppingCart.jsp 16 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) 17 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) 18 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) 19 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) 20 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) 21 G V : V õ T ấ n D ũ n g ShoppingCart.jsp (tt) • Hình sau đây là kết quả hiển thị nội dung giỏ hàng của trang ShoppingCart.jsp 22 G V : V õ T ấ n D ũ n g TestShoppingCart.html • Ta có thể xây dựng một trang web độc lập khác để kiểm tra trang ShoppingCart.jsp 23 G V : V õ T ấ n D ũ n g TestShoppingCart.html (tt) 24 G V : V õ T ấ n D ũ n g Giải thích (ShoppingCart.jsp) • 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. 25 G V : V õ T ấ n D ũ n g Giải thích (ShoppingCart.jsp) (tt) • 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ý. 26 G V : V õ T ấ n D ũ n g PHẦN 3 XÂY DỰNG GIỎ HÀNG VỚI CƠ SỞ DỮ LIỆU 27 G V : V õ T ấ n D ũ n g 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ỏ. • 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ể gặp sự cố. Lúc đó đối tượng session sẽ bị mất. 28 G V : V õ T ấ n D ũ n g 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. • 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 đủ các phương thức của một giỏ hàng. 29 G V : V õ T ấ n D ũ n g ShoppingCartDB.java 30 G V : V õ T ấ n D ũ n g ShoppingCartDB.java (tt) 31 G V : V õ T ấ n D ũ n g ShoppingCartDB.java (tt) 32 G V : V õ T ấ n D ũ n g ShoppingCartDB.java (tt) 33 G V : V õ T ấ n D ũ n g ShoppingCartDB.java (tt) 34 G V : V õ T ấ n D ũ n g ShoppingCartDB.java (tt) 35 G V : V õ T ấ n D ũ n g Giải thích (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. 36 G V : V õ T ấ n D ũ n g Giải thích (ShoppingCartDB.java) (tt) • 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. 37 G V : V õ T ấ n D ũ n g PHẦN 4 TÌM HIỂU CÁCH LƯU DỮ LIỆU CỦA COOKIES 38 G V : V õ T ấ n D ũ n g LƯ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ủ. 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. • 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. 39 G V : V õ T ấ n D ũ n g LƯU GIAO DỊCH BẰNG COOKIES 40 G V : V õ T ấ n D ũ n g COOKIES LƯU VẾT PHÍA TRÌNH KHÁCH • Ví dụ sau đây cho thấy cách sử dụng cookies phía máy khách. 41 G V : V õ T ấ n D ũ n g GIẢI THÍCH (cookieshow.html) • 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. 42 G V : V õ T ấ n D ũ n g GIẢI THÍCH (cookieshow.html) • 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. 43 G V : V õ T ấ n D ũ n g GỬI COOKIE LÊN TRÌNH 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. 44 G V : V õ T ấ n D ũ n g CookieListing.java 45 G V : V õ T ấ n D ũ n g CookieListing.java (tt) 46 G V : V õ T ấ n D ũ n g CookieListing.java (tt) 47 G V : V õ T ấ n D ũ n g CookieListing.java (tt) 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. 48 G V : V õ T ấ n D ũ n g GIẢI THÍCH (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ủ. 49 G V : V õ T ấ n D ũ n g GIẢI THÍCH (CookieListing.java) • 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ămWebsite 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. 50 G V : V õ T ấ n D ũ n g GIẢI THÍCH (CookieListing.java) • 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. 51 G V : V õ T ấ n D ũ n g HẾT BÀI 8