Đang tải... (xem toàn văn)
Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh doanh truyền thống thì thương mại điện tử chi phí thấp hơn, hiệu quả đạt cao hơn. Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện. Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển. Biết được những nhu cầu đó thì “Xây dựng website bán thời trang trẻ em online” được xây dựng nhằm để đáp ứng cho mọi người tiêu dùng trên toàn quốc và thông qua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết. Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua. Trên thế giới có rất nhiều trang website bán hàng trực tuyến nhưng vẫn chưa được phổ biến rộng rãi. Và khái niệm thương mại điện tử còn khá xa lạ. Trước thực tế đó em đã chọn đề tài: “Xây dựng website bán thời trang trẻ em online” làm đề tài đồ án tốt nghiệp.
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI KHOA CƠNG NGHỆ THƠNG TIN TẠ THỊ BÍCH NGA XÂY DỰNG WEBSITE BÁN THỜI TRANG TRẺ EM ONLINE ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Hệ thống thơng tin Hà Nội - 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI KHOA CÔNG NGHỆ THÔNG TIN TẠ THỊ BÍCH NGA XÂY DỰNG WEBSITE BÁN THỜI TRANG TRẺ EM ONLINE ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Hệ thống thông tin Cán hướng dẫn: Nguyễn Thái Sơn Hà Nội – 2022 LỜI CẢM ƠN Trong suốt trình thực đồ án này, em nhận quan tâm, hướng dẫn giúp đỡ tận tình thầy, giáo, bạn ngành Hệ thống thơng tin nói riêng khoa Cơng nghệ thơng tin nói chung Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Đại học Công nghệ Giao thông vận tải, Ban chủ nhiệm Khoa Công nghệ thông tin, Trưởng ban chuyên ngành Hệ thống thơng tin tận tình giúp đỡ, tạo điều kiện cho em học tập trường Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến thầy Th.S Nguyễn Thái Sơn – khoa Công nghệ thông tin – trường Đại học Công nghệ giao thông vận tải đồng hành, nhiệt tình hướng dẫn, giúp đỡ em hồn thiện tốt đồ án tốt nghiệp Nhân dịp này, em xin bày tỏ lịng biết ơn đến gia đình, người thân, bạn bè giúp đỡ, ủng hộ, tạo động lực tinh thần cho em hoàn thành học tập trường Đại học Công nghệ Giao thông vận tải LỜI CAM ĐOAN Em xin cam đoan đồ án tốt nghiệp với đề tài “Xây dựng website bán thời trang trẻ em online” nghiên cứu độc lập em Đồng thời, số liệu cung cấp từ báo cáo kết nghiên cứu thân em, hoàn toàn trung thực, khơng chép từ nguồn tài liệu khác Những tài liệu tham khảo, trích dẫn ghi rõ nguồn gốc, thời gian truy cập Em xin chịu hoàn toàn trách nhiệm trước nhà trường trường hợp phát sai phạm hay vấn đề chép đồ án Hà Nội, ngày 09 tháng 06 năm 2022 Tạ Thị Bích Nga MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG 10 DANH MỤC TỪ VIẾT TẮT 11 LỜI NÓI ĐẦU 12 CHƯƠNG 1: TỔNG QUAN 13 1.1 Lý chọn đề tài 13 1.2 Mục tiêu đề tài 13 1.3 Giới hạn phạm vi đề tài .13 1.4 Kết dự kiến đạt 14 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 16 2.1 Tìm hiểu ngơn ngữ JavaScript 16 2.2 Tìm hiểu ngôn ngữ HTML CSS 18 2.2.1 HTML .18 2.2.2 CSS 21 2.3 Tìm hiểu MongoDB 22 2.4 Quy trình xây dựng website 22 2.4.1 Thiết kế website .22 2.4.3 Lựa chọn mua tên miền .24 2.4.4 Lựa chọn thiết lập web server 24 2.4.5 Upload website 25 2.4.6 Cập nhật chỉnh sửa website .25 2.4.7 Quảng bá 25 2.4.8 Bảo trì 25 2.5 Công cụ hỗ trợ 25 2.5.1 Visual Studio Code 25 2.5.2 ReactJS 27 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 31 3.1 Khảo sát hệ thống 31 3.2 Phân tích thiết kế hệ thống .33 3.2.1 Mô tả toán 33 3.2.2 Phân tich chức .35 3.2.3 Biểu đồ Use Case 37 3.2.4 Biểu đồ chức .53 3.2.5 Biểu đồ hoạt động chức 61 3.2.6 Biểu đồ lớp .66 3.2.7 Biểu đồ trạng thái 67 3.3 Thiết kế sở liệu vật lý 68 3.4 Thiết kế giao diện 71 3.4.1 Giao diện khách hàng 71 3.4.2 Giao diện quản trị nhân viên .74 CHƯƠNG 4: CÀI ĐẶT VÀ XÂY DỰNG CHƯƠNG TRÌNH .77 4.1 Chuẩn bị môi trường .77 4.1.1 Tải cài đặt NodeJS 77 4.1.2 Cài đặt VS Code 80 4.1.3 Cài đặt ReactJS 81 4.2 Một số mã nguồn mẫu 83 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 87 TÀI LIỆU THAM KHẢO .88 PHỤ LỤC 89 Tạ Thị Bích Nga_69DCHT20087 DANH MỤC HÌNH ẢNH Hình 2.1: Biểu trượng JavaScript 17 Hình 2.2: Cấu trúc HTML 20 Hình 3.1: Trang web khảo sát .31 Hình 3.2: Sơ đồ Use Case tổng quát .39 Hình 3.3: Use Case quản lý tài khoản quản trị 39 Hình 3.4: Use Case quản lý tài khoản nhân viên khách hàng 42 Hình 3.5: Use Case quản lý danh mục 44 Hình 3.6: Use Case quản lý viết .46 Hình 3.7: Use Case quản lý sản phẩm 47 Hình 3.8: Use Case quản lý giỏ hàng .49 Hình 3.9: Use Case quản lý đơn hàng 50 Hình 3.10: Use Case tìm kiếm .51 Hình 3.11: Use Case thống kê báo cáo 52 Hình 3.12: Biểu đồ chức đăng nhập 53 Hình 3.13: Biểu đồ chức đăng ký 54 Hình 3.14: Biểu đồ chức sửa tài khoản 54 Hình 3.15: Biểu đồ chức đặt hàng .55 Hình 3.16: Biểu đồ chức xem đơn hàng 55 Hình 3.17: Biểu đồ chức thêm danh mục 56 Hình 3.18: Biểu đồ chức sửa danh mục .56 Hình 3.19: Biểu đồ chức xóa danh mục .57 Hình 3.20: Biểu đồ chức thêm giỏ hàng 57 Hình 3.21: Biểu đồ chức sửa giỏ hàng .58 Hình 22: Biểu đồ chức xóa sản phẩm khỏi giỏ hàng .58 Hình 3.23: Biểu đồ chức thêm sản phẩm 59 Hình 3.24: Biểu đồ chức sửa thông tin sản phẩm 59 Hình 3.25: Biểu đồ chức xóa sản phẩm .60 Hình 3.26: Biểu đồ chức thống kê báo cáo 60 Hình 3.27: Biểu đồ hoạt động chức đăng nhập 61 Hình 3.28: Biểu đồ hoạt động chức đăng ký 61 Tạ Thị Bích Nga_69DCHT20087 Hình 3.29: Biểu đồ hoạt động chức tìm kiếm 62 Hình 3.30: Biểu đồ hoạt động chức xem đơn hàng 62 Hình 3.31: Biểu đồ hoạt động chức thêm danh mục .63 Hình 3.32: Biểu đồ hoạt động chức sửa danh mục 63 Hình 3.33: Biểu đồ hoạt động chức xóa danh mục 64 Hình 3.34: Biểu đồ hoạt động chức cập nhật giỏ hàng 64 Hình 3.35: Biểu đồ hoạt động chức thêm sản phẩm .65 Hình 3.36: Biểu đồ hoạt động chức sửa sản phẩm 65 Hình 3.37: Biểu đồ hoạt động chức xóa sản phẩm 66 Hình 3.38: Biểu đồ lớp 67 Hình 3.39: Biểu đồ trạng thái đơn hàng 68 Hình 3.40: Thiết kế giao diện trang chủ khách hàng 72 Hình 3.41: Thiết kế xem chi tiết sản phẩm .72 Hình 3.42: Thiết kế giỏ hàng 73 Hình 3.43: Thiết kế xem đơn hàng trạng thái chờ xử lý 73 Hình 3.44: Thiết kế xem đơn hàng trạng thái giao hàng 74 Hình 3.45: Thiết kế giao diện trang chủ quản trị .74 Hình 3.46: Thiết kế quản lý sản phẩm 75 Hình 3.47: Thiết kế quản lý đơn hàng 75 Hình 3.48: Thiết kế thống kê báo cáo Hình 4.1: Trang chủ NodeJS 77 Hình 4.2: Sau chạy tập tin cài đặt .78 Hình 4.3: Đọc chấp nhận yêu cầu quyền NodeJS .78 Hình 4.4: Thực hướng dẫn mặc định NodeJS 79 Hình 4.5: Môi trường NodeJS cài đặt 79 Hình 4.6: Hồn thành cài đặt NodeJS 80 Hình 4.7: Tích tùy chọn cài đặt VS Code .81 Hình 4.8: Kích chuột phải mở Command window 82 Hình 4.9: Dịng lệnh tạo thư mục React 83 Hình 4.10: Giao diện trang web dùng thư viện ReactJS 83 Hình 4.11: Mã nguồn đăng nhập 84 Hình 4.12: Mã nguồn thêm sản phẩm vào giỏ hàng .84 Tạ Thị Bích Nga_69DCHT20087 Hình 4.13: Mã nguồn đặt hàng .85 Hình 4.14: Mã nguồn thêm bình luận sản phẩm .86 Hình 4.15: Giao diện trang chủ khách hàng 89 Hình 4.16: Xem chi tiết sản phẩm 89 Hình 4.17: Giỏ hàng .90 Hình 4.18: Xem đơn hàng 90 Hình 4.19: Giao diện trang chủ admin 91 Hình 4.20: Quản lý tài khoản 91 Hình 4.21: Quản lý danh mục 92 Hình 4.22: Quản lý đơn hàng 92 Hình 4.23: Thống kê báo cáo 93 Y Tạ Thị Bích Nga_69DCHT20087 DANH MỤC BẢNG Bảng 3.1: Nội dung khảo sát đối tượng quản lý website 31 Bảng 3.2: Nội dung khảo sát nhân viên website .33 Bảng 3.3: Mô tả tác nhân 38 Bảng 3.4: Đặc tả Use Case thêm tài khoản .40 Bảng 3.5: Đặc tả Use Case sửa tài khoản .40 Bảng 3.6: Đặc tả Use Case xóa tài khoản .41 Bảng 3.7: Đặc tả Use Case đăng nhập 43 Bảng 3.8: Đặc tả Use Case thêm danh mục (thể loại) 44 Bảng 3.9: Đặc tả Use Case sửa danh mục (thể loại) .45 Bảng 3.10: Đặc tả Use Case xóa danh mục (thể loại) .45 Bảng 3.11: Đặc tả Use Case thêm viết 46 Bảng 3.12: Đặc tả Use Case thêm sản phẩm 47 Bảng 3.13: Đặc tả Use Case sửa sản phẩm .48 Bảng 3.14: Đặc tả Use Case xóa sản phẩm 48 Bảng 3.15: Đặc tả Use Case giỏ hàng 49 Bảng 3.16: Đặc tả Use Case cập nhật trạng thái đơn hàng .50 Bảng 3.17: Đặc tả Use Case tìm kiếm 51 Bảng 3.18: Đặc tả Use Case thống kê, báo cáo 52 Bảng 3.19: Bảng liệu Product (sản phẩm) 68 Bảng 3.20: Bảng liệu customer (khách hàng) 69 Bảng 3.21: bảng liệu Staff (nhân viên) 69 Bảng 3.22: Bảng liệu User (người dùng) 70 Bảng 3.23: Bảng liệu categorys_product (danh mục sản phẩm) 70 Bảng 3.24: Bảng liệu purchase_order (đơn hàng) .70 10