(TIỂU LUẬN) đồ án WEBSITE bán HÀNG ONLINE

Bộ giáo dục đào tạo Trường Đại học Ngoại ngữ - Tin học TP.HCM Bộ giáo dục đào tạo Trường Đại học Ngoại ngữ - Tin học TP.HCM ĐỒ ÁN: WEBSITE BÁN HÀNG ONLINE Ngành: Công nghệ thông tin Bộ mơn: Lập trình web nâng cao Giảng viênWEBSITE hướng dẫn: Ths.Trần TuấnONLINE ĐỒ ÁN: BÁNPhương HÀNG Sinh viên Cơng thực hiện: Ngành: nghệNguyễn thơng tinHồng Thái Tuấn - 19DH111134 Nguyễn Thanh Lun – 19DH111105 Bộ mơn: Lập trình web nângHồ cao ThânThs.Trần Hải ĐiềnPhương – 19DH110678 Giảng viên hướng dẫn: Tuấn Sinh viên thực hiện: Nguyễn Hoàng Thái Tuấn – 19DH111134 Nguyễn Hồ Thanh Luyên – 19DH111105 Thân Hải Điền – 19DH110678 TP.HCM, Ngày 21 tháng 06 năm 2022 TP.HCM, ngày 21 tháng 06 năm 2022 Lời cám ơn Trong thời gian học tập làm báo cáo với đề tài “Xây dựng website bán hàng online” này, em muốn gửi lời cám ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực đồ án Trước hết, em xin chân thành cám ơn thầy Ths Trần Phương Tuấn Giảng viên Khoa Công Nghệ Thông Tin, Trường Đại học Ngoại Ngữ - Tin Học Thành phố Hồ Chí Minh, người trực tiếp hướng dẫn, nhận xét, giúp đỡ em suốt trình thực đồ án Xin chân thành cảm ơn thầy cô Khoa Cơng Nghệ Thơng Tin phịng ban nhà trường tạo điều kiện tốt cho em bạn khác suốt thời gian học tập làm đồ án Cuối em xin gửi lời cảm ơn đến gia đình, bạn bè, người thân giúp đỡ động viên em nhiều trình học tập làm đồ án công nghệ phần mềm nâng cao thời gian quy định Do thời gian thực có hạn, kiến thức cịn nhiều hạn chế nên đồ án thực chắn không tránh khỏi thiếu sót định Em mong nhận ý kiến đóng góp thầy giáo bạn để em có thêm kinh nghiệm tiếp tục hồn thiện đồ án Em xin chân thành cảm ơn tất người.! TP Hồ Chí Minh, ngày 13 tháng năm 2022 Nhân xét giảng viên ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Mục lục Lời cám ơn Nhân xét giảng viên Mục lục Danh mục hình ảnh Danh mục từ viết tắt Danh mục bảng biểu Chương 1: Mở đầu I Tổng quan: Bối cảnh đề tài: Lý chọn đề tài Mục đích đề tài: Khảo sát trạng: Chương 2: Giới thiệu ngôn ngữ công cụ sử dụng I Ngôn ngữ C# Định nghĩa Đặc trưng Ưu điểm II Kiến trúc lớp MVC III Bootstrap Cấu trúc Bootstrap Ưu điểm Bootstrap: Tính Bootstrap Lưu ý sử dụng Bootstrap Chương 3: Thiết kế I Phân tích thiết kế hệ thống Khảo sát nghiệp vụ Tổng quan chức Sơ đồ sở liệu II Thiết kế giao diện mô tả chức Giao diện trang chủ Giao diện trang danh mục sản phẩm Giao diện trang chi tiết sản phẩm Giao diện trang giỏ hàng Giao diện trang chi tiết hóa đơn Giao diện trang chi tiết đơn hàng đặt Giao diện trang đơn hàng chờ Giao diện mặt hàng mua Giao diện trang chủ quản lý 10 Giao diện trang quản lý hàng hóa 11 Giao diện trang thêm sản phẩm 12 Giao diện trang chỉnh sửa thông tin sản phẩm 13 Giao diện trang xóa sản phẩm 14 Giao diện trang quản lý thể loại hàng hóa 15 Giao diện trang quản lý khách hàng 16 Giao diện trang quản lý hóa đơn 17 Giao diện trang chi tiết hóa đơn Chương 4: Code chức ứng dụng I Phần người quản trị Hiện thị danh sách toàn sản phẩm Thêm thông tin sản phẩm Xem chi tiết sản phẩm Trang chỉnh sửa thông tin sản phẩm Xóa thơng tin mặt hàng Các trang quản trị lại Trang đăng nhập Trang thống kê Trang chủ quản trị II Phần khách hàng Banner Danh sách sản phẩm trang chủ khách hàng Trang sản phẩm Trang chi tiết sản phẩm Trang giỏ hàng Xác nhận đơn hàng chọn phương thức tốn Trang hủy hóa đơn chi tiết hóa đơn Chương 5: Kết luận hướng phát triển I Kết luận: II Hướng phát triển: Phân công công việc: Tài liệu tham khảo Nhận xét giảng viên: Danh mục hình ảnh Hình 1: Biểu đồ usecase tổng quát .11 Hình 2: Usecase chi tiết Admin 12 Hình 3: Biều đồ usecase khách hàng 13 Hình 4: Sơ đồ sở liệu .17 Hình 5: Giao diện trang chủ .18 Hình 6: Giao diện trang sản phẩm .20 Hình 7: Giao diện trang chi tiết sản phẩm 21 Hình 8: Giao diện trang giỏ hàng .22 Hình 9: Giao diện trang chi tiết hóa đơn 23 Hình 10: Giao diện trang chi tiết đơn hàng đặt .24 Hình 11: Giao diện trang đơn hàng chờ 26 Hình 12: Giao diện trang mặt hàng mua 27 Hình 13: Giao diện trang chủ quản lý 28 Hình 14: Giao diện trang quản hàng hóa 30 Hình 15: Giao diện trang thêm sản phẩm 32 Hình 16: Giao diện trang chỉnh sửa thông tin sản phẩm 33 Hình 17: Giao diện trang xóa sản phẩm .34 Hình 18: Giao diện trang quản lý thể loại hàng hóa 35 Hình 19: Giao diện trang quản lý khách hàng 36 Hình 20: Giao diện trang quản lý hóa đơn 37 Hình 21: Giao diện trang chi tiết hóa đơn 38 Hình 22: Model class mặt hàng 40 Hình 23: Model thị thông tin mặt hàng 41 Hình 24: View thị thơng tin mặt hàng 41 Hình 25: View thị thơng tin mặt hàng 42 Hình 26: Code model class cho mặt hàng 43 Hình 27: View thêm mặt hàng 44 Hình 28: View thêm mặt hàng 44 Hình 29: Controller thêm mặt hàng 45 Hình 30: Controller xem chi tiết sản phẩm 46 Hình 31: View xem chi tiết sản phẩm 46 Hình 32: Controller tìm sản phẩm cần chỉnh sửa .47 Hình 33: Controller chỉnh sửa thông tin .47 Hình 34: View chỉnh sửa thơng tin 48 Hình 35: Controller xóa mặt hàng 49 Hình 36: Controller xóa mặt hàng 49 Hình 37: View xóa sản phẩm 50 Hình 38: View xóa sản phẩm 50 Hình 39: Model khách hàng người quản trị .51 Hình 40: Phần view trang đăng nhập 51 Hình 41: Controller phần login 52 Hình 42: Model thống kê theo sản phẩm 52 Hình 43: Model thống kê theo khách hàng 53 Hình 44: Controller thống kê theo khách hàng 53 Hình 45: Controller thơng kê theo mặt hàng 54 Hình 46: View phần thống kê 54 Hình 47: Controller trang chủ admin 55 Hình 48: View trang chủ quản trị .56 Hình 49: View phần thống kê trang chủ quản trị 56 Hình 50: View banner 57 Hình 51: Controller phần trang chủ khách hàng 58 Hình 52: View sản phẩm 59 Hình 53: View sản phẩm mua nhiều 59 Hình 54: Controller trang sản phẩm .60 Hình 55: View cho danh sách mặt hàng .61 Hình 56: View chi tiết sản phẩm 62 Hình 57: View chi tiết sản phẩm 62 Hình 58: Model giỏ hàng 63 Hình 59: Model hóa đơn 64 Báo cáo đồ án “Website bán đồ điện tử online” Đây code theo mặt hàng vào giỏ hàng Đầu tiên kiểm tra giỏ hàng có mặt hàng chưa, nết có tăng số lượng, nết chưa có lưu thơng tin mặt hàng vào giỏ hàng số lượng vào Đây code update số lượng khách hàng muốn mua thêm sản phẩm có giỏ hàng Hình 59: Model hóa đơn Là model để lưu thơng tin hóa đơn người mua tạo phần với trang thái chờ xác nhận 65 Báo cáo đồ án “Website bán đồ điện tử online” Hình 60: Model chi tiết hóa đơn Phần lưu thơng tin chi tiết hóa đơn thông tin sản phẩm mà người mua muốn mua hóa đơn b Phần controller Đầu tiên ta phải tạo giỏ hàng gắn giỏ cho Session để lưu thông tin giỏ hàng, sau gán cho hàm để thể gọi sau Khi người khách hàng chọn mua mặt hàng mặt hàng đẩy vào giỏ hàng cách 66 Báo cáo đồ án “Website bán đồ điện tử online” Kiểm tra mặt hàng khơng cịn gọi gỏi hàng add mặt hàng vào cuối lưu lại thông tin giỏ hàng Khi khách hàng muốn mua thêm sản phẩm có giỏ hàng Phần lấy tín hiệu từ button bên phần view sau cơng trừ số lượng theo u cầu khách hàng cách nhấp update (Giải thích bên phần view) Lúc cần gọi giỏ hàng lưu thêm hàm cập nhật số lượng theo id mặt hàng số lượng 67 Báo cáo đồ án “Website bán đồ điện tử online” Hình 61: Controller giỏ hàng Phần bắt đầu tạo hóa đơn để lấy id hóa đơn để lưu thơng tin mặt hàng mà khách hàng muốn mua Đầu tiên hóa đơn có id với thơng tin khách hàng sau lưu thơng tin vào database Tiếp theo lấy giỏ hàng gồm hàng hóa chọn Dùng vịng foreach để chạy sản phẩm có giỏ hàng, chạy chi tiết hóa đơn tạo riêng cho mặt hàng chi tiết hóa đơn, chi tiết hóa đơn lưu thơng tin sản phẩm số lượng sản phẩm lưu thơng tin vào database c Phần view 68 Báo cáo đồ án “Website bán đồ điện tử online” Hình 62: View phần giỏ hàng Phần view gỏi hàng đơn giản hiển thị mặt hàng cho vào giỏ gọi thêm hai button tiếp tục mua hàng để chuyển hướng đến trang mặt hàng để chọn thêm hàng hóa để mua button mua hàng chuyển hướng đến trang xác nhận đơn hàng chọn phương thức tốn với id hóa đơn tạo Xác nhận đơn hàng chọn phương thức toán a Phần model Đối với model phần dùng model hóa đơn giải thích b Phần controller 69 Báo cáo đồ án “Website bán đồ điện tử online” Hình 63: Controller xác nhận đơn hàng Đầu tiên cần phải tìm hóa đơn có id giử phần giỏ hàng đưa thêm danh sách phương thức tốn Sau đưa tất thơng tin qua phần view để thị chờ xác nhận từ khách hàng Hình 64: Controller xác nhận đơn hàng 70 Báo cáo đồ án “Website bán đồ điện tử online” Sau khách hàng xác nhận đơn hàng cách nhấn button mua hàng phần view controller lấy hóa đơn xác nhận lại thông tin Sau xác nhận lưu thông tin phương thức tốn chuyển hướng trang sang trang mua hàng thành công c Phần view Phần view chia thành hai phần Phần đầu thơng tin khách hàng lấy từ hóa đơn chuyển từ controller qua câu lệnh sau Hình 65: View xác nhận hóa đơn 71 Báo cáo đồ án “Website bán đồ điện tử online” Phần hiển thị thông tin khách hàng phương thức tốn để lưu vào hóa đơn, liệu phần chuyển ngược lại phần controller Tiếp theo sản phẩm có chi tiết hóa đơn hóa đơn phần thị để khách hàng xác nhận mua Dữ liệu lấy từ controller giải thích Trang hủy hóa đơn chi tiết hóa đơn d Trang hủy hóa đơn Để hủy đơn hàng cần phải hiển thị đơn hàng chờ xác nhận có thông tin người khách hàng Thông tin khách hàng lưu từ lúc đăng nhập, lọc hóa đơn chờ xác nhận khách hàng lưu thành danh sách chuyển đến view 72 Báo cáo đồ án “Website bán đồ điện tử online” Sau lấy thơng tin từ controller chuyển qua view view bắt đầu thị danh sách cá phiếu mượn vịng foreach vịng foreach có chứa vịng mặt hàng đính kèm với hóa đơn thị vịng lập foreach Cuối có button hủy đơn hàng Khi khách hàng ân button chuyển chuyển liệu hóa đơn cần hủy sang cho controller xử lý 73 Báo cáo đồ án “Website bán đồ điện tử online” Ở phần controller lấy liệu thơng qua form để kiểm tra có kết phù hợp xóa hóa đơn khỏi database e Trang chi tiết sản phẩm mua Đối với phần controller cần thơng tin khách hàng (đã lưu bước đăng nhập) lập danh sách hóa đơn có mã id khách hàng đó, sau lấy thơng tin danh sách hóa đơn tìm đến chi tiết hóa đơn lập thành danh sách chuyển qua phần view Sau qua view lấy thơng tin câu lệnh thể dạng bảng 74 Báo cáo đồ án “Website bán đồ điện tử online” Hình 66: View mặt hàng đa mua Thông tin biểu diễn dạng bảng, vòng lặp foreach để lấy tất thông tin truyền từ controller 75 Báo cáo đồ án “Website bán đồ điện tử online” Chương 5: Kết luận hướng phát triển I Kết luận: - Tương đối đầy đủ chức hiển thị sản phẩm theo trang nhóm sản phẩm, thêm xóa sửa sản phẩm - Khách hàng tìm kiếm sản phẩm, xem chi tiết sản phẩm cần mua, thêm sản phẩm vào giỏ hàng, toán giỏ hàng hủy đơn hàng - Giao diện đơn giản, dễ sử dụng - Admin dễ dàng quản lý sản phẩm khách hàng Hướng phát triển: - Chức tìm kiếm sản phẩm chưa hồn chỉnh - Giao diện cịn đơn giản, chưa tối ưu - Thêm chức khuyến khách hàng thành viên VIP, đến dịp sinh nhật - Thêm chức tính phí ship theo km - Thêm chức đánh giá bình luận khách hàng mua sản phẩm 76 Báo cáo đồ án “Website bán đồ điện tử online” Phân công công việc: Phân công công việc Tên công việc Nguyễn Hồ Nguyễn Thanh Luyên Xây dựng, chỉnh sửa Hoàng Thân Hải Điền Thái Tuấn x x giao diện Code x x Viết báo cáo x x x Tổng hợp lại báo cáo x Tìm tài liệu x x Tìm hình ảnh x x Bảng 7: Bảng phân chia công việc 77 Báo cáo đồ án “Website bán đồ điện tử online” Tài liệu tham khảo [1] Tài liệu học tập thầy Ths Trần Phương Tuấn [2] W3school, ASP Tutorials, https://www.w3schools.com/asp/ [3] Stack overflow, https://stackoverflow.com/ [4] Tedu, hướng dẫn code ASP.NET MVC, https://tedu.com.vn/khoa-hoc/lap-trinhdu-an-website-ban-hang-aspnet-mvc-4-1.html 78 Báo cáo đồ án “Website bán đồ điện tử online” Nhận xét giảng viên: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Điểm thành viên: Nguyễn Hồ Thanh Luyên Nguyễn Hoàng Thái Tuấn Thân Hải Điền 19DH111105 19DH111105 19DH110678 79 ... phẩm 11 Sơ đồ sở liệu 16 Báo cáo đồ án ? ?Website bán đồ điện tử online? ?? Hình 4: Sơ đồ sở liệu 12 Thiết kế giao diện mô tả chức Giao diện trang chủ 17 Báo cáo đồ án ? ?Website bán đồ điện tử online? ??... giúp đỡ phát triển kỹ kinh nghiệm C# Kiến trúc lớp MVC Báo cáo đồ án ? ?Website bán đồ điện tử online? ?? Trong đồ án website bán hàng online chúng em tổ chức code theo mơ hình MVC (Model – View -... của cửa hàng  Khách hàng chọn sản phẩm thích cho vào giỏ hàng để đặt hàng 10 Báo cáo đồ án ? ?Website bán đồ điện tử online? ??  Khách hàng đặt đơn hàng hủy đơn hàng  Có thể xem hàng hóa mua Đối với