Xây dựng website bán mỹ phẩm sử dụng vuejs + python đồ án tốt nghiệp

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN MỸ PHẨM SỬ DỤNG VUEJS + PYTHON Sinh viên thực hiên Ngày sinh Lớp Khoa Mã sinh viên Giáo viên hướng dẫn : : : : : : Nguyễn Đức Thương 05/04/1999 DCCNTT 1.10.1 CNTT 187480201021 ThS Nguyễn Hải Bình Bắc Ninh, năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á BÁO CÁO ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI XÂY DỰNG WEBSITE BÁN MỸ PHẨM SỬ DỤNG VUEJS + PYTHON GIẢNG VIÊN HƯỚNG DẪN: Th.S Nguyễn Hải Bình Họ tên sinh viên: Nguyễn Đức Thương Ngày sinh: 05/04/1999 Khóa: Lớp: DCCNTT9.10.1 Ngành: Cơng nghệ thơng tin Điểm báo cáo Bằng số: Bằng chữ: CÁN BỘ CHẤM (Ký ghi rõ họ tên) CÁN BỘ CHẤM (Ký ghi rõ họ tên) Bắc Ninh, năm 2022 LỜI NĨI ĐẦU Hiện phát triển khơng ngừng xã hội, việc ứng dụng công nghệ thơng tin việc tin học hóa đại hóa xem trông thành phần định, tất yếu hoạt động phủ tổ chúc doanh ngiệp, đoàn thể, đóng vai trị vơ quan trọng, tạo bước đột phá, tiến rõ rệt, vơ mạnh mẽ trơng hoạt động Vì việc sở hữu riêng cho trang web dược xem chiến lược quảng cáo, cạnh tranh doanh nghiệp, cơng ty, đơn vị, đồn thể việc tiếp thị, giới thiệu, quảng bá sảm phẩm kinh doanh sản phẩm, khả mở rộng hoạt động kinh doanh tăng lên Thông qua Website, thông tin doanh nghiệp, công ty, đơn vị, đoàn thể dịch vụ mới, sản phẩm mới… đến dược với người quan tâm, đến với khách hàng họ cách nhanh chóng dễ dàng Nắm bắt nhu cầu với việc chọn thực đề tài “Xây dựng Website bán đồ mỹ phẩm”, với mong muốn xây dựng Website nhằm đắp ứng nhu cầu cung cấp thông tin sản phẩm cách linh hoạt tới tay người tiêu dùng cải thiện doanh số kinh doanh cho đơn vị, doanh nghiệp, cơng ty, đồn thể với khả quản lý dễ dàng việc quản lý cập nhật thông tin Website Em xin gửi lời cảm ơn chân thành đến với giảng viên hướng dẫn, Nguyễn Hải Bình tận tình hướng dẫn em hoàn thành chuyên đề Một lần nữa, em xin gửi lời cảm ơn đến tất thầy cô Trường Đại Học Công Nghệ Đông Á giảng dạy, giúp đỡ em thời gian vừa qua LỜI CÁM ƠN Em xin gửi lời cảm ơn chân thành tới Nguyễn Hải Bình hướng dẫn em suốt trình làm báo cáo thực tập tốt nghiệp Trong thời gian làm việc với cô, em khơng học hỏi nhiều kiến thức bổ ích mà học tinh thần làm việc thái độ làm việc nghiêm túc cô Trong suốt trình thực đề tài này, nổ lực báo cáo em khó tránh khỏi sai sót Em mong nhận thơng cảm bảo tận tình q thầy cô Một lần em xin chân thành cảm ơn! Bắc Ninh, ngày 23 tháng 03 năm 2022 Sinh viên thực Thương Nguyễn Đức Thương MỤC LỤC LỜI NÓI ĐẦU LỜI CÁM ƠN MỤC LỤC MỤC LỤC HÌNH ẢNH MỤC LỤC BẢNG BIỂU .7 CÁC TỪ VIẾT TẮT CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài 1.2 Mục đích đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.4 Ý nghĩa đề tài .10 1.5 Cơ sở lý thuyết 10 1.5.1 Mơ hình Client – Server .10 1.5.2 Python Framework Django 12 1.5.3 Framework VueJS 15 1.5.4 Cơ sở liệu MySQL 17 1.5.5 Firebase Firebase messaging, Firebase storage 18 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG .20 2.1 Phân tích nghiệp vụ hệ thống .20 2.1.1 Đặc tả Actor 20 2.2 Biểu đồ luồng liệu 20 2.2.1 Biểu đồ luồng liệu mức khung cảnh 20 2.2.2 Biểu đồ luồng liệu mức đỉnh 21 2.2.3 Biểu đồ luồng liệu mức đỉnh 21 2.3 Biểu đồ phân rã chức .23 2.4 Biểu đồ Use Case mô tả kịch ca sử dụng .26 2.4.1 Biểu đồ Use Case 26 2.4.2 Mô tả kịch ca sử dụng 26 2.5 Biểu đồ 35 2.5.1 Xem sản phẩm 35 2.5.2 Tìm kiếm sản phẩm 36 2.5.3 Thêm giỏ hàng 36 2.5.4 Xóa giỏ hàng .37 2.5.5 Thanh toán 37 2.5.6 Đăng nhập admin 38 2.5.7 Duyệt đơn hàng 38 2.6 Phân tích sở liệu 39 2.6.1 Cấu trúc bảng sở liệu .39 2.6.2 Biểu đồ lớp 44 2.6.3 Biểu ERD hệ thống .44 CHƯƠNG 3: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 51 3.1 Trang người dùng .51 3.2 Trang quản trị 66 CHƯƠNG 4: TRIỂN KHAI, KIỂM THỬ VÀ ĐÁNH GIÁ .85 4.1 Triển khai trang web 85 4.2 Kiểm thử Đánh giá .86 CHƯƠNG 5: KẾT LUẬN 87 5.1 Kết luận 87 5.2 Hướng phát triển .87 TÀI LIỆU THAM KHẢO 88 MỤC LỤC HÌNH ẢNH Hình Mơ hình Client-Server Hình Mơ hình Client-Server Hình Cấu trúc thư mục Django project 13 Hình VueJS code 15 Hình Biểu đồ luồng liệu mức khung cảnh 19 Hình Biểu đồ luồng liệu mức đỉnh 20 Hình Biểu đồ luồng liệu mức đỉnh chức quản lý bán hàng 20 Hình Biểu đồ luồng liệu mức đỉnh chức quản lý user 21 Hình Biểu đồ luồng liệu mức đỉnh chức quản lý sản phẩm 21 Hình 10 Biểu đồ phân rã chức hệ thống 22 Hình 11 Biểu đồ Use Case .25 Hình 12 Biểu đồ xem sản phẩm 33 Hình 13 Biểu đồ tuần tìm kiếm sản phẩm 34 Hình 14 Biểu đồ tuần thêm giỏ hàng 34 Hình 15 Biểu đồ xóa giỏ hàng 35 Hình 16 Biểu đồ tốn 35 Hình 17 Biểu đồ đăng nhập admin .36 Hình 18 Biểu đồ duyệt đơn hàng 36 Hình 19 Biểu đồ lớp .42 Hình 20 Biểu đồ ERD 48 Hình 21 Trang chủ Website 49 Hình 22 Sản phẩm bật 50 Hình 23 Sản phẩm bán chạy 51 Hình 24 Sản phẩm theo danh mục 52 Hình 25 Chi tiết sản phẩm 53 Hình 26 Sản phẩm danh mục 54 Hình 27 Trang giỏ hàng yêu thích 55 Hình 28 Trang giỏ hàng 56 Hình 29 Trang tốn (1) 57 Hình 30 Trang tốn (2) 57 Hình 31 Trang Đơn hàng tơi 58 Hình 32 Trang Thơng tin cá nhân 59 Hình 33 Trang đổi mật 60 Hình 34 Trang Liên hệ 61 Hình 35 Trang Đăng ký thành viên 62 Hình 36 Trang Đăng nhập 63 Hình 37 Đăng nhập trang quản trị 64 Hình 38 Bảng điều khiển trang quản trị 65 Hình 39 Quản lý sản phẩm .66 Hình 40 Quản lý thêm sản phẩm 67 Hình 41 Quản lý sửa thơng tin sản phẩm .68 Hình 42 Quản lý danh mục sản phẩm 69 Hình 43 Quản lý thêm danh mục sản phẩm 70 Hình 44 Quản lý sửa danh mục sản phẩm 71 Hình 45 Quản lý banner 72 Hình 46 Quản lý thêm banner 73 Hình 47 Quản lý sửa banner 74 Hình 48 Quản lý mã giảm giá 75 Hình 49 Quản lý thêm mã giảm giá .76 Hình 50 Quản lý sửa mã giảm giá 77 Hình 51 Quản lý đơn hàng .78 Hình 52 Quản lý cập nhật đơn hàng .79 Hình 53 Quản lý người dùng 80 Hình 54 Quản lý thêm người dùng 81 Hình 55 Quản lý sửa người dùng 82 MỤC LỤC BẢNG BIỂU Bảng Mô tả kịch xem sản phẩm 26 Bảng Mô tả kịch tìm kiếm sản phẩm 27 Bảng Mô tả kịch xem viết tin tức 27 Bảng Mô tả kịch thêm/cập nhật sản phẩm giỏ hàng 28 Bảng Mô tả kịch thêm/cập nhật sản phẩm giỏ hàng 28 Bảng Mô tả kịch cập nhật thông tin cá nhân 29 Bảng Mô tả kịch xem đơn hàng cá nhân .29 Bảng Mô tả kịch quản lý danh mục 30 Bảng Mô tả kịch quản lý sản phẩm 31 Bảng 10 Mô tả kịch quản lý banner 32 Bảng 11 Mô tả kịch quản lý mã giảm giá 33 Bảng 12 Mô tả kịch quản lý đơn hàng .33 Bảng 13 Mô tả kịch quản lý người dùng 34 Bảng 14 Bảng banner .39 Bảng 15 Bảng danh mục 39 Bảng 16 Bảng mã giảm giá 39 Bảng 17 Bảng giỏ hàng 40 Bảng 18 Bảng giỏ hàng yêu thích 40 Bảng 19 Bảng ảnh sản phẩm 41 Bảng 20 Bảng sản phẩm 41 Bảng 21 Bảng biến thể sản phẩm 42 Bảng 22 Bảng đơn hàng 42 Bảng 23 Bảng chi tiết đơn hàng .43 Bảng 24 Bảng người dùng 43 CÁC TỪ VIẾT TẮT Từ viết tắt Ý nghĩa API Application Programming Interface – giao diện lập trình ứng dụng HTTP, HTTPS HyperText Transfer Protocol (Secure) giao thức truyền tải siêu văn Js Javascript Tcp/Ip Transmission Control Protocol/ Internet Protocol - Giao thức điều khiển truyền nhận/ Giao thức liên mạng ERD Entity Relationship Diagram – Sơ đồ thực tể liên kết CLI Command Line Interface App Application - Ứng dụng FCM Firebase Cloud Messaging Hình 45 Quản lý banner Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem quản lý thông tin banner Phạm vi: Trong giao diện quản trị, trang Banner Mô tả chức năng: Người dùng tiến hành chọn thao tác cập nhật trạng thái banner, xóa nhiều banner lúc Và người dùng có từ khóa để tìm kiếm banner 75 Hình 46 Quản lý thêm banner Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng thêm banner Phạm vi: Trong giao diện quản trị, trang Banner Mô tả chức năng: Khi người dùng click vào nút Thêm mới, hệ thống mở popup Thêm banner Sau người dùng tiến hành điền đầy đủ thông tin banner thêm 76 Hình 47 Quản lý sửa banner Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem cập thông tin banner Phạm vi: Trong giao diện quản trị, trang Banner Mô tả chức năng: Khi người dùng click vào biểu tượng Sửa dòng banner, hệ thống mở popup Sửa banner Sau người dùng xem, chỉnh sửa thơng tin banner 77 Hình 48 Quản lý mã giảm giá Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem quản lý thông tin mã giảm giá Phạm vi: Trong giao diện quản trị, trang Mã giảm giá Mô tả chức năng: Người dùng tiến hành chọn thao tác cập nhật trạng thái mã giảm giá, xóa nhiều mã giảm giá lúc Và người dùng có từ khóa để tìm kiếm mã giảm giá 78 Hình 49 Quản lý thêm mã giảm giá Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người thêm mã giảm giá Phạm vi: Trong giao diện quản trị, trang Mã giảm giá Mô tả chức năng: Khi người dùng click vào nút Thêm mới, hệ thống mở popup Thêm mã giảm giá Sau người dùng tiến hành điền đầy đủ thơng tin mã giảm giá thêm 79 Hình 50 Quản lý sửa mã giảm giá Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem cập nhật thông tin mã giảm giá Phạm vi: Trong giao diện quản trị, trang Mã giảm giá Mô tả chức năng: Khi người dùng click vào biểu tượng Sửa dòng mã giảm giá, hệ thống mở popup Sửa mã giảm giá Sau người dùng xem, chỉnh sửa thơng tin mã giảm giá 80 Hình 51 Quản lý đơn hàng Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem quản lý thông tin đơn hàng Phạm vi: Trong giao diện quản trị, trang thêm viết Mô tả chức năng: Người dùng tiến hành chọn thao tác xóa nhiều đơn hàng lúc Và người dùng có từ khóa để tìm kiếm đơn hàng 81 Hình 52 Quản lý cập nhật đơn hàng Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem cập nhật trạng thái đơn hàng Phạm vi: Trong giao diện quản trị, trang thêm viết Mô tả chức năng: Khi người dùng click vào biểu tượng Sửa dòng đơn hàng, hệ thống mở popup Sửa đơn hàng Sau người dùng xem, chỉnh sửa trang thái đơn hàng 82 Hình 53 Quản lý người dùng Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem quản lý thông tin người dùng hệ thống Phạm vi: Trong giao diện quản trị, trang Người dùng Mô tả chức năng: Người dùng tiến hành chọn thao tác cập nhật trạng thái người dùng, xóa nhiều người dùng lúc Và người dùng có từ khóa để tìm kiếm người dùng 83 Hình 54 Quản lý thêm người dùng Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người thêm người dùng hệ thống Phạm vi: Trong giao diện quản trị, trang Người dùng Mô tả chức năng: Khi người dùng click vào nút Thêm mới, hệ thống mở popup Thêm người dùng Sau người dùng tiến hành điền đầy đủ thông tin người dùng thêm 84 Hình 55 Quản lý sửa người dùng Ràng buộc: Người dùng phải đăng nhập vào hệ thống tài khoản quản trị viên Mục đích: Trang cho phép người dùng xem cập nhật thông tin người dùng hệ thống Phạm vi: Trong giao diện quản trị, trang Người dùng Mô tả chức năng: Khi người dùng click vào biểu tượng Sửa dòng người dùng, hệ thống mở popup Sửa người dùng Sau người dùng xem, chỉnh sửa thơng tin người dùng 85 CHƯƠNG 4: TRIỂN KHAI, KIỂM THỬ VÀ ĐÁNH GIÁ 4.1 Triển khai trang web - Yêu cầu phần cứng:  CPU từ 1.6 GHz trở lên  RAM từ GB trở lên  Có Microsoft NET Framework 4.5.2 - Yêu cầu phần mềm:  Cơng cụ lập trình Visual Studio Code  Ngơn ngữ lập trình Python phiên 3.8 trở lên  Pip (1 trình quản lý gói cho Python) phiên 20.2 trở lên  Framework Django phiên 3.1 trở lên  Node.js (1 tảng Javascript) phiên 16 trở lên  Npm (1 trình quản lý gói cho Node.js) phiên 8.1.3 trở lên  Vue Cli (CLI – Command Line Interface) phiên 4.5 trở lên  Quasar Cli phiên 1.2 trở lên  Heroku phiên 7.54 trở lên  Firebase phiên 10.2 trở lên - Yêu cầu tài khoản:  Tài khoản Google, kết nối với Firebase  Tài khoản Heroku kết nối với tài khoản Github Gitlab - Yêu cầu kỹ thuật:  Triển khai phần Backend server lên Heroku app  Triển khai phần Frontend website lên Firebase hosting (máy chủ Firebase) 86 4.2 Kiểm thử Đánh giá - Website hoàn thành bản các yêu cầu đã đặt của bài toán, bao gờm: Về giao diện: - Hồn thành các trang cần thiết như: Trang chủ, trang đăng ký, đăng nhập, quản lý thông tin cá nhân, trang danh sách sản phẩm và chi tiết sản phẩm, giỏ hàng và tiến hành đặt hàng, giao diện Admin, quản lý sản phẩm, quản lý đơn hàng,… Về chức năng: - Người dùng đã có thể đăng ký thành viên và đăng nhập vào hệ thống - Khách hàng đăng nhập để sử dụng chức Giỏ hàng tiến hành đặt hàng - Khách hàng đăng nhập có thể sử dụng chức giỏ hàng yêu thích để lưu sản phẩm ḿn mua sau này - Khách hàng xem tìm kiếm sản phẩm theo Tên, Danh mục - Hiển thị nội dung danh mục sản phẩm và chi tiết sản phẩm - Người dùng đăng nhập vào hệ thống có thể quản lý thông tin cá nhân của mình, lấy lại mật khẩu nếu đã quên mật khẩu - Khách hàng đăng nhập vào hệ thống có thể xem và theo dõi các đơn hàng đã mua - Đối với Admin, đã có thể quản lý người dùng, banner, mã giảm giá, quản lý danh mục, sản phẩm và quản lý đơn hàng tại trang quản trị riêng - Có hệ thống thơng báo Khách hàng nhập thông tin liên hệ, đăng ký tạo đơn hàng Những hạn chế: - Chưa có phần chức liên quan đến viết, tin tức - Chưa tích hợp tính tốn online - Tốc độ lấy liệu từ server chậm - Chưa có trang thống kê số liệu 87 CHƯƠNG 5: KẾT LUẬN 5.1 Kết luận Với việc xây dựng Website mỹ phẩm giúp ích nhiều cho chủ cửa hàng vừa nhỏ quản lý sản phẩm thống kê giao dịch, công việc rút ngắn xuống Có thể quảng bá thương hiệu cách rộng rãi hơn, giúp người tiêu dùng tiếp cận đồ dùng, mỹ phẩm mà không cần phải đến trực tiếp Người tiêu dùng gửi phản ánh thắc mắc sản phẩm cho chủ cửa hàng biết Chức Website chia thành module giúp dễ dàng chỉnh sửa, nâng cấp Chức đăng sản phẩm tin tức dễ dàng cho người quản lý Website - Chức người dùng xem chi tiết sản phẩm, sản phẩm loại - Chức người dùng tìm kiếm sản phẩm - Chức người dùng theo dõi đơn hàng - Chức người dùng cập nhật thông tin cá nhân 5.2 Hướng phát triển - Xây dựng thêm nhiều tiêu chí tìm kiếm - Cải tiến giao diện Website để tối ưu trải nghiệm người dùng - Thêm chức hỗ trợ ngơn ngữ, đơn vị tiền tệ - Cấu hình khối giao diện động, admin thêm khối giao diện lên trang người dùng cách tùy biến - Tính chat thơng báo realtime thay phụ thuộc vào bên thứ ba - Tích hợp toán online VNPAY 88 TÀI LIỆU THAM KHẢO [1] Nguyễn Trọng Đại, Thương mại điện tử ứng dụng thương mại điện tử việt nam, trường Đại học bách khoa Hà Nội, 2016 [2] http:-/vi.wikipedia.org/ [3] https://www.djangoproject.com/ [4] http://www mysql.com [5] http://www.w3school.com [6] https://vuejs.org/ [7] https://quasar.dev/ [8] https://api.slack.com/ [9] https://firebase.google.com/docs/reference [10] https://devcenter.heroku.com/categories/reference [11]https://viblo.asia/p/cach-trien-khai-ung-dung-django-cho-heroku-voi-git-cli1VgZvDj15Aw [12] https://softauthor.com/deploy-vue-js-app-on-firebase-hosting/ [13]https://stackoverflow.com/questions/62760926/deploying-quasar-with-firebasehosting 89