Tìm hiểu django, reactjs và xây dựng website bán hàng

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN TÌM HIỂU DJANGO, REACTJS VÀ XÂY DỰNG WEBSITE BÁN HÀNG GVHD: NGUYỄN HỮU TRUNG SVTH: PHẠM THANH SƠN MSSV: 15110301 SVTH:NGUYỄN THỊ TRÚC MSSV:15110349 SKL 0 Tp Hồ Chí Minh, tháng 7/2019 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM  PHẠM THANH SƠN: 15110301 NGUYỄN THỊ TRÚC: 15110349 Đề Tài: TÌM HIỂU DJANGO, REACTJS VÀ XÂY DỰNG WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG KHÓA 2015 - 2019 ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Phạm Thanh Sơn MSSV: 15110301 Nguyễn Thị Trúc MSSV: 15110349 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: Tìm hiểu django, reactjs xây dựng website bán hàng Họ tên Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung NHẬN XÉT: Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp.Hồ Chí Minh, ngày … tháng 07 năm 2019 Giáo viên hướng dẫn (Ký ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Phạm Thanh Sơn MSSV: 15110301 Nguyễn Thị Trúc MSSV: 15110349 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: Tìm hiểu django, reactjs xây dựng website bán hàng Họ tên Giáo viên phản biện: TS Lê Văn Vinh NHẬN XÉT: Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp.Hồ Chí Minh, ngày … tháng 07 năm 2019 Giáo viên phản biện (Ký ghi rõ họ tên) LỜI CẢM ƠN Đầu tiên, chúng em xin chân thành gửi lời cám ơn đến thầy cô, giảng viên trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh nói chung, khoa Cơng Nghệ Thơng Tin, chun ngành Cơng Nghệ Phần Mềm nói riêng rèn luyện, cung cấp kiến thức quan trọng khía cạnh chun ngành bên ngồi xã hội, giúp chúng em có thêm kinh nghiệm, kỹ công việc, học tập Đặc biệt, chúng em xin gửi lời cảm ơn cách chân thành thầy, giảng viên ThS Nguyễn Hữu Trung, người trực tiếp hướng dẫn nhóm hồn thành tiểu luận chuyên ngành Trong trình thực hiện, thầy tận tình, cung cấp kiến thức hữu ích, thầy ln tạo động lực để nghiên cứu,tìm tịi kiến thức mới, nhiệt tình giúp đỡ hướng dẫn chúng em lúc gặp khó khăn, định hướng đắn Bài báo cáo khóa luận tốt nghiệp, ứng dụng hồn thành cịn nhiều khuyết điểm cịn nhiều sai sót Kính mong thầy góp ý chân thành để đề tài chúng em hoàn thiện Cho chúng em định hướng tương lai, để thêm kinh nghiệm cho đề tài sau, cách thức làm việc chuyên nghiệp hơn, hỗ trợ cho công việc chúng em sau Cuối chúng em kính chúc q thầy, sức khỏe dồi dào, nhiệt huyết giảng dạy để góp phần đào tạo cho lớp sinh viên sau, trở thành bậc nhân tài, tương lai đất nước sau Chúng em xin chân thành cảm ơn! ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh phúc ****** ****** ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Phạm Thanh Sơn MSSV: 15110301 Nguyễn Thị Trúc MSSV: 15110349 Thời gian làm khóa luận từ 10/03/2019 đến 15/07/2019 Chuyên ngành: Công nghệ phần mềm Tên luận văn: Tìm hiểu django, reactjs xây dựng website bán hàng Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung Nhiệm vụ Luận Văn : Khảo sát trạng website thực tế Tìm hiểu django, django rest framework reactjs Áp dụng kiến thức tìm hiểu xây dựng website bán hàng Kế hoạch thực STT Thời gian Công việc 10/03/2019 đến 13/03/2019 Tìm hiểu django, reatcjs 14/03/2019 đến 16/03/2019 Khảo sát website bán hàng online 17/03/2019 đến 21/03/2019 Phân tích yêu cầu chức năng, đặc tả yêu cầu 22/03/2019 đến 01/04/2019 Thiết kế sở liệu 02/04/2019 đến 17/04/2019 Thiết kế giao diện triến khai viết code 18/04/2019 đến 20/04/2019 Code đăng ký, đăng nhập 20/04/2019 đến 27/04/2019 Code trang chủ, sản phẩm mới, khuyến mãi, đổi mật 28/04/2019 đến 05/05/2019 Code chỉnh sửa thông tin cá nhân, kiểm tra đơn hàng cho người dùng 06/05/2019 đến 10/05/2019 Code tặng xu, đặt hàng, toán 10 11/05/2019 đến 16/05/2019 Code phần nhân viên: quản lý đơn hàng, kích hoạt flash sale 11 17/05/2019 đến 06/06/2019 Code phần admin: quản lý sản phẩm, loại sản phẩm ( thêm, sửa, xóa) Code quản lý thông tin khách hàng, nhân viên Code thống kê sản phẩm bán 12 07/06/2019 đến 30/06/2019 Viết báo cáo 13 01/07/2019 đến 07/07/2019 Kiểm thử hoàn thiện phần mềm 14 08/07/2019 đến 10/07/2019 Hoàn thành ứng dụng website báo cáo Ngày … tháng … năm 2019 Ý kiến Giáo viên hướng dẫn Người viết đề cương (ký ghi rõ họ tên) MỤC LỤC LỜI CẢM ƠN _ ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP _ MỤC LỤC DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH 10 TÓM TẮT KHÓA LUẬN 12 PHẦN MỞ ĐẦU 13 I TÍNH CẤP THIẾT CỦA ĐỀ TÀI 13 II MỤC TIÊU CỦA ĐỀ TÀI 13 III ĐỐI TƯỢNG NGHIÊN CỨU 13 IV PHƯƠNG PHÁP NGHIÊN CỨU _ 14 PHẦN NỘI DUNG 15 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 15 1.1 TÌM HIỂU VỀ DJANGO 15 1.2 TÌM HIỂU VỀ DJANGO REST FRAMEWORK _ 16 1.3 TÌM HIỂU VỀ REACTJS _ 16 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU _ 20 2.1 KHẢO SÁT HIỆN TRẠNG 20 2.2 XÁC ĐỊNH YÊU CẦU _ 24 CHƯƠNG 3: MƠ HÌNH HĨA YÊU CẦU VÀ THIẾT KẾ DỮ LIỆU 27 3.1 NHẬN DIỆN TÁC NHÂN VÀ CHỨC NĂNG TRONG SƠ ĐỒ USE CASE _ 27 3.2 SƠ ĐỒ USE CASE _ 28 3.3 ĐẶC TẢ USE CASE _ 31 3.4 SƠ ĐỒ QUAN HỆ _ 40 3.5 CHI TIẾT CÁC BẢNG DỮ LIỆU _ 41 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ LUỒNG XỬ LÝ _ 48 4.1 THIẾT KẾ GIAO DIỆN _ 48 4.2 LƯỢC ĐỒ SEQUENCE _ 68 CHƯƠNG 5: KIỂM THỬ 80 PHẦN KẾT LUẬN 85 KẾT QUẢ ĐẠT ĐƯỢC _ 85 KẾT QUẢ CHƯA ĐẠT ĐƯỢC 85 HƯỚNG PHÁT TRIỂN _ 85 DANH MỤC TÀI LIỆU THAM KHẢO 86 Sequence Diagram Chỉnh sửa thông tin cá nhân sd Edit Profile Edit Profile Page Controler Database User, Admin Select Edit Profile() Make Change() Confirm change() Display change() Confirm Save() Click Save() Save() alt [if( true)] Message Save Successfully() Show Message() [If ( false)] Message error() Show Message () Hình 4-45 Sequence Diagram Chỉnh sửa thông tin cá nhân 73 Sequence Diagram Thanh toán sd Thanh Toan Payments Page Order Page Database User Click use coin() Choose number product() Click " Thanh toan"() Save() Show đơn hàng() Show() Chọn hình thức toán() Chọn nhà giao hàng() Click "Gửi "() Send mail thơng báo đặt hàng thành cơng() Hình 4-46 Sequence Diagram Thanh toán 74 Sequence Diagram Quản lý nhân viên sd Quan Ly Nhan Vien Manage Employee Page Add, Edit Employee Database Admin Click " Quan ly nhan vien" () Get info() Return info() Show() seq Add, Edit Employee Click "Them Nhan Vien" or "Sua"() Input info Employee() Click "Save"() Save() Message Successfully() Message Success() seq Delete Employee Click " Xoa"() Message ( Xac nhan xoa) Click "OK"() Delete Employee() Message Successfully() Message Successfully() Hình 4-47 Sequence Diagram Quản lý nhân viên 75 Sequence Diagram Quản lý loại sản phẩm sd Quan Ly Loai San Pham Manage Type Product Page Add, Edit Type Product Database Admin Click " Quan ly loai san pham" () Get info() Return info() Show() seq Add, Edit Type Product Click "Them danh muc" or "Sua"() Input info Type Product() Click "Save"() Save() Message Successfully() Message Success() seq Delete Type Product Click " Xoa"() Message ( Xac nhan xoa) Click "OK"() Delete Type Product() Message Successfully() Message Successfully() Hình 4-48 Sequence Diagram loại sản phẩm Sequence Diagram Quản lý đơn hàng giao sd Quan Ly Don Hang Da Giao Manage Order Complete Page Database Admin Click " Kiem tra don hang da giao" () Get info() Return info() Show() 76 Hình 4-49 Sequence Diagram Quản lý đơn hàng giao Sequence Diagram Quản lý thông tin khách hàng sd Quan Ly Thong Tin Khach Hang Manage Info Customer Page Database admin Click Quan ly thong tin khach hang() Get info of customer() Return () Show() click " Edit"() input new infomation() Click " Save"() Save info() Update info() Show() Hình 4-50 Sequence Diagram Quản lý thông tin khách hàng Sequence Diagram Quản lý xu sd Quan Ly Xu Manage Coins Page Database Admin Click " Quan ly xu"() Get info Coins of User() Return info() Display Coin of User List() Show() Hình 4-51 Sequence Diagram Quản lý xu 77 Sequence Diagram Thống kê sd Thong Ke Database Statistical Page Admin Input month, year() Click" Lọc"() Get infomation() Return info() Display Statistical() Hình 4-52 Sequence Diagram Thống kê Sequence Diagram Kiểm tra đơn hàng sd Kiem Tra Don Hang Check Order Page Database Employee Click " Kiem tra don hang"() Get infomation of all order() Return infomation() Display Order List() Show() Click "Xóa"() Delete Order() alt DeleteOrder [Success] Success() Success() [Fail] Fail() Fail() Hình 4-53 Sequence Diagram Kiểm tra đơn hàng 78 Sequence Diagram Quản lý sản phẩm kho sd Quan Ly San Pham Trong Kho Manage Product Admin Database Employees Click " San pham kho"() Get infomation of product (name, price, ) Return infomation() Display Product List() Show() Input name of product() Click bieu tuong Search() Get infomation of product (name, price, ) Return infomation of product () Display Product List() Show() Hình 4-54 Sequence Diagram Quản lý sản phẩm kho Sequence Diagram Quản lý Flash Sale sd Quan Ly Flash Sale Flash Sale Page Database employees input infomation Flash sale (time, product) click Save() Save infomation() Show Flash Sale() Show() Hình 4-55 Sequence Diagram Quản lý Flash Sale 79 CHƯƠNG 5: KIỂM THỬ 5-1 Bảng kiểm thử chức website ID Test Case Discription Test Case Procedure Expected Result Test Comments Result Đăng nhập Test đăng nhập Nhập username thành công password Click button đăng nhập Username sai, Nhập username sai password password Click button đăng nhập Hiển thị hình trang chủ Pass Yêu cầu nhập lại username Pass Username, password sai Nhập username sai Yêu cầu nhập password sai lại username, Click button đăng nhập password Pass Username, password bỏ trống Nhập username Yêu cầu nhập thông tin password bỏ trống Click button đăng nhập username, password Pass Đăng ký tài khoản Test đăng ký thành công Nhập name, email, password, phone, address, id cart Click button đăng ký Nhập sai thông Nhập sai tin hay nhiều trường số nhiều trường trường name, bỏ trống email, password, phone, address, id cart Click button đăng ký Thông báo đăng ký tài khoản thành công Hiển thị hình đăng nhập Nhập sai thơng tin u cầu nhập lại thơng tin Bỏ trống u cầu nhập thơng tin khơng bỏ trống Pass Pass Tìm kiếm sản phẩm Tìm kiếm thành công Nhập thông tin liên quan đến sản phẩm: tên, giá Click button search 80 Hiển thị sản phẩm tìm kiếm thấy Pass Nhập thơng tin khơng có database Khơng nhập thơng tin Nhập thơng tin tìm kiếm Click button search Khơng nhập thông tin Click button search Hiển thị liệu Pass Hiển thị tất sản phẩm có phân trang website Pass Xóa sản phẩm xóa giỏ hàng Pass Hiển thị hình chọn hình thức tốn Pass Thơng báo đặt hàng thành cơng Pass Giỏ hàng Xóa sản phẩm Thanh tốn Click button xóa Click button tốn Trong giỏ hàng phải có sản phẩm thêm vào Trong giỏ hàng phải có sản phẩm thêm vào Thanh toán Xác nhận đặt hàng Sau chọn hình thức tốn chọn bên giao hàng click button gửi Thay đổi thông tin cá nhân Thay đổi thôg tin cá nhân thành công Nhập họ tên, số điện thoại, email, địa Click button hồn tất Nhập thơng tin Nhập thông tin số điện thay đổi không thoại không ( khơng đủ 10 số có tồn chữ ), email khơng u cầu(khơng có ký tự @) Click button hoàn tất Đổi mật 81 Thông báo thay đổi thông tin cá nhân thành công Yêu cầu nhập lại số điện thoại vs email Pass Pass Khi đặt hàng thành công hệ thống gửi mail thông báo đơn hàng email Đổi mật thành công Nhập mật cũ nhập mật lần Click button thay đổi Nhập mật Nhập mật cũ cũ không không Nhập mật lần Click button thay đổi Nhập mật Nhập mật mới không lần không giống giống Click button thay đổi Thông báo thay đổi mật thành công Yêu cầu nhập lại mật cũ Pass Yêu cầu nhập lại mật Pass Pass Kiểm tra đơn hàng Test trạng thái giao hàng Click button chưa giao hàng Test xóa đơn hàng Click button xóa Button hiển thị thành giao hàng Pass Đơn hàng bị xóa Pass Kích hoạt Flash Sale 82 Sản phẩm chưa giao thành cơng hiển thị button chưa giao hàng Khi nhân viên giao hàng thành công click button chưa giao hàng để chuyển sang thành giao hàng unable button Khi đơn hàng chưa giao thành cơng button xóa enable Ngược lại giao button xóa unable Test kích hoạt flash sale thành công Chọn time bắt đầu, kết Test kích hoạt flash sale khơng thành cơng Chọn, nhập không đầy thúc, sản phẩm Click lưu thay đổi đủ trường thời gian bắt đầu, kết thúc, sản phẩm Click lưu thay đổi Thông báo kích hoạt flash sale thành cơng Hiển thị u cầu nhập đủ cá trường thông tin Pass Pass Quản lý sản phẩm Test thêm sản phẩm Test thêm sản phẩm không thành công Test thay đổi thông tin sản phẩm Nhập tất cá trường thông tin, chọn file hình ảnh Click Lưu thay đổi Nhập không đầy đủ nhiều trường thông tin, chọn file Click lưu thay đổi Nhập thông tin sản phẩm muốn thay đổi Click lưu thay đổi Thông báo thêm sản phẩm thành công Pass Hiển thị yêu cầu nhập đầy đủ thông tin trường không nhập Hiển thị thông báo thay đổi thông tin sản phẩm thành công Pass Pass Quản lý nhân viên Test thêm nhân Nhập tất cá trường viên thông tin Click Lưu thay đổi Test thêm nhân Nhập không đầy đủ viên không nhiều trường thành công thông tin Click lưu thay đổi Test thay đổi Nhập thông tin nhân thông tin nhân viên muốn thay đổi viên Click lưu thay đổi Thông báo thêm nhân viên thành công Hiển thị yêu cầu nhập đầy đủ thông tin Pass Hiển thị thông báo thay đổi thông tin nhân viên thành công Pass Pass Quản lý loại sản phẩm Test thêm loại sản phẩm Nhập tất cá trường thông tin Click Lưu thay đổi Test thêm laoị sản phẩm Nhập không đầy đủ nhiều trường thông tin 83 Thông báo thêm loại sản phẩm thành công Hiển thị yêu cầu nhập đầy đủ thông tin Pass Pass không thành công Test thay đổi thông tin loại sản phẩm Click lưu thay đổi Nhập thông tin sản phẩm muốn thay đổi Click lưu thay đổi Hiển thị thông báo thay đổi thông tin loại sản phẩm thành công Pass Quản lý thông tin khách hàng Test thay đổi thông tin khách hàng Nhập thông tin sản phẩm muốn thay đổi Click lưu thay đổi Hiển thị thông báo thay đổi thông tin thông tin khách hàng thành công Pass Hiển thị thông kê số sản phẩm bán theo tháng năm theo hãng điện thoại Hiển thị khơng có liệu Pass Hiển thị thông kê số sản phẩm bán theo năm theo hãng điện thoại Pass Thống kê Test thống kê theo tháng năm thành công Chọn tháng, năm Click lọc Test thống kê theo tháng năm không thành công Test thống kê theo năm thành công Chọn tháng, không chọn năm Click lọc Chọn năm, không chọn tháng Click lọc 84 Pass PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Với đồ án này, chúng em hoàn thành yêu cầu đặt ra, bao gồm :  Tìm hiểu django, django rest framework, reactjs  Xây dựng website với: - Phân quyền người dùng - Khách hàng tìm kiếm thơng tin sản phẩm website - Thêm xóa, sửa thơng tin, hình ảnh sản phẩm - Quản trị cho việc thêm sản phẩm, xóa sửa sản phẩm cũ, xem chi tiết sản phẩm, chỉnh sửa thông tin sản phẩm - Quản trị cho việc xem chi tiết, chỉnh sửa, xóa tài khoản - Quản trị cho việc chỉnh sửa, xóa loại sản phẩm - Quản trị nhân viên, khách hàng - Nhân viên quản lý đơn hàng - Người dùng đánh giá comment sản phẩm - Thực upload file, phục vụ việc quản lý sản phẩm KẾT QUẢ CHƯA ĐẠT ĐƯỢC  Hình ảnh có độ phân giải chưa tốt  Chưa hồn thành chat HƯỚNG PHÁT TRIỂN Vì thời gian nghiên cứu có hạn, nên việc viết ứng dụng xây dựng cịn nhiều thiếu sót tương lai nhóm cố gắng:  Phát triển đa ngơn ngữ ( Tiếng Anh, …)  Chỉnh sửa hồn thiện trang template cho phù hợp với thiết bị  Bổ sung chức khách hàng thân thiết, tăng chiết khấu, ưu đãi cho khách V.I.P  Tăng cường bảo mật cho website  Bảo mật souce code cửa website Có thể sử dụng kỹ thuật mã hóa tồn souce code website để chống đánh cắp bảo mật thông tin 85 DANH MỤC TÀI LIỆU THAM KHẢO [1] http://blog.scuti.asia/2018/05/reactjs-p1-gioi-thieu-ve-reactjs.html [2] https://jsx.github.io/ [3] https://www.djangoproject.com/ [4] https://www.django-rest-framework.org/ [5] http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ [6] https://github.com/hustcc/echarts-for-react [7] https://www.techiediaries.com/django-react-forms-csrf-axios/ [8]https://medium.com/@apogiatzis/create-a-restful-api-with-users-and-jwtauthentication-using-django-1-11-drf-part-1-288268602bb7 [9]https://medium.com/@apogiatzis/create-a-restful-api-with-users-and-jwtauthentication-using-django-1-11-drf-part-2-eb6fdcf71f45 [10] https://redux.js.org/introduction/getting-started 86 S K L 0 ... đó, ? ?Xây dựng website bán hàng? ?? vấn đề thực tế, ứng dụng có tìm để phát triển II MỤC TIÊU CỦA ĐỀ TÀI Xây dựng website bán hàng đặt mục tiêu xây dựng thành công chức website : - Khách hàng tìm. .. văn: Tìm hiểu django, reactjs xây dựng website bán hàng Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung Nhiệm vụ Luận Văn : Khảo sát trạng website thực tế Tìm hiểu django, django rest framework reactjs. .. kiến thức tìm hiểu xây dựng website bán hàng Kế hoạch thực STT Thời gian Cơng việc 10/03/2019 đến 13/03/2019 Tìm hiểu django, reatcjs 14/03/2019 đến 16/03/2019 Khảo sát website bán hàng online