Đồ án xây dựng website thương mại điện tử bán điện thoại di động

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ BÁN ĐIỆN THOẠI DI ĐỘNG GV HƯỚNG DẪN: ThS Đỗ Thị Thanh Tuyền SV THỰC HIỆN: Huỳnh Tiến Thịnh MSSV: 20520311 Mã lớp: SE121.N21 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ thông tin - ĐHQG TP.HCM em trang bị kiến thức bản, kỹ thực tế để lần đầu thực Đồ án Để hồn thành Đồ án này, em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin Em xin gửi lời cảm ơn chân thành đến cô Đỗ Thị Thanh Tuyền tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực đề tài mà hành trang tiếp bước cho em trình học tập lập nghiệp sau Và cuối cùng, em xin gửi lời cảm ơn đến gia đình, tất thầy khoa, bạn bè người sẵn sàng sẻ chia giúp đỡ học tập sống Tuy nhiên trình nghiên cứu đề tài, kiến thức chuyên ngành hạn chế nên em nhiều thiếu sót tìm hiểu, đánh giá, trình bày đề tài Rất mong nhận quan tâm, góp ý để đề tài em đầy đủ hoàn chỉnh Em xin chân thành cảm ơn TP Hồ Chí Minh, ngày 30 tháng 06 năm 2023 Sinh viên thực Huỳnh Tiến Thịnh MỤC LỤC TÓM TẮT ĐỒ ÁN Chương GIỚI THIỆU ĐỀ TÀI .3 1.1 Lý chọn đề tài 1.2 Mục đích 1.3 Đối tượng 1.4 Phạm vi nghiên cứu 1.4.1 Phạm vi môi trường 1.4.2 Phạm vi chức Chương NGHIÊN CỨU LÝ THUYẾT 2.1 Cơ sở lý thuyết 2.1.1 Kiến thức tảng 2.1.2 Công nghệ sử dụng 2.2 Phương pháp nghiên cứu 19 2.2.1 Phương pháp làm việc .19 2.2.2 Phương pháp thực 20 2.2.3 Phương pháp tài liệu .20 2.2.4 Phương pháp công nghệ 20 2.2.5 Phương pháp thực nghiệm 20 Chương PHÂN TÍCH HỆ THỐNG 21 3.1 Phân tích yêu cầu hệ thống 21 3.1.1 Yêu cầu chức 21 3.1.2 Yêu cầu phi chức 44 3.2 Sơ đồ phân rã chức 45 3.3 Phân tích thiết kế hệ thống .46 3.3.1 Sơ đồ 46 3.3.2 Sơ đồ lớp 53 Chương XÂY DỰNG WEBSITE VÀ KIỂM THỬ .61 4.1 Cài đặt chương trình .61 4.1.1 Cài đặt chương trình hệ thống 61 4.1.2 Cài đặt giao diện chương trình 61 4.1.3 Cài đặt sở liệu 61 4.2 Kết chương trình 62 4.2.1 Giao diện trang chủ 62 4.2.2 Giao diện chi tiết điện thoại 63 4.2.3 Giao diện đăng nhập, đăng ký 64 4.2.4 Giao diện sản phẩm 65 4.2.5 Giao diện đặt hàng 66 4.2.6 Giao diện quản lý điện thoại 67 4.2.7 Giao diện quản lý thành viên 69 4.2.1 Giao diện quản lý đơn hàng 69 4.2.2 Giao diện trò chuyện với khách hàng .70 4.3 Kiểm thử 71 KẾT LUẬN .74 TÀI LIỆU THAM KHẢO 76 DANH MỤC BẢNG BIỂU Bảng 3.1 Danh sách Actors 23 Bảng 3.2 Mô tả use case 24 Bảng 3.3 Use-case Xem sản phẩm 26 Bảng 3.4 Use-case Xem trang chủ 27 Bảng 3.5 Use-case Tìm sản phẩm theo danh mục 28 Bảng 3.6 Use-case Đăng ký khách hàng thành viên 29 Bảng 3.7 Use-case Đăng nhập 30 Bảng 3.8 Use-case Thêm xem giỏ hàng 31 Bảng 3.9 Use-case Thanh toán 32 Bảng 3.10 Use case Đánh giá sản phẩm 33 Bảng 3.11 Use-case Xóa thành viên 34 Bảng 3.12 Use-case Xem sản phẩm 35 Bảng 3.13 Use case Xem đơn hàng 36 Bảng 3.14 Use-case Xem báo cáo 37 Bảng 3.15 Use-case Tạo vận đơn .38 Bảng 3.16 Use-case Thay đổi trạng thái đơn hàng 39 Bảng 3.17 Use-case Tạo sản phẩm 40 Bảng 3.18 Use-case Sửa sản phẩm 41 Bảng 3.19 Use-case Xóa sản phẩm 42 Bảng 3.20 Use-case Lọc đơn hàng 43 Bảng 3.21 Use-case Xem đánh giá 44 Bảng 3.22 Danh sách lớp đối tượng quan hệ 53 Bảng 3.23 Lớp wp_user 54 Bảng 3.24 Lớp wp_usermeta 55 Bảng 3.25 Lớp wp_post 55 Bảng 3.26 Lớp wp_postmeta 56 Bảng 3.27 Lớp wp_comments 57 Bảng 3.28 Lớp wp_commentmeta 58 Bảng 3.29 Lớp wp_order_items .58 Bảng 3.30 Lớp wp_order_itemmeta 59 Bảng 3.31 Lớp wp_dokan_orders 59 Bảng 3.32 Lớp wp_revslider_sliders .60 Bảng 4.1 Kiểm thử Đăng nhập & Đăng ký 71 Bảng 4.2 Kiểm thử đặt hàng 72 Bảng 4.3 Kiểm thử quản lý đơn hàng 72 Bảng 4.4 Kiểm thử quản lý sản phẩm 73 DANH MỤC HÌNH ẢNH Hình 2.1 Logo JavaScript Hình 2.2 Logo ReactJS Hình 2.3 Logo NodeJS .11 Hình 2.4 Logo TypeScript 13 Hình 2.5 Logo Draw.io 17 Hình 2.6 Logo GitHub .18 Hình 3.1 Sơ đồ Use-case cho Khách hàng .21 Hình 3.2 Sơ đồ Use-case cho Khách hàng thành viên .22 Hình 3.3 Sơ đồ Use-case cho Quản trị viên .23 Hình 3.4 Sơ đồ phân rã chức 45 Hình 3.5 Sơ đồ đăng nhập 46 Hình 3.6 Sơ đồ đăng ký thành viên 47 Hình 3.7 Sơ đồ tìm kiếm sản phẩm 47 Hình 3.8 Sơ đồ đặt hàng .48 Hình 3.9 Sơ đồ xem thông tin sản phẩm 48 Hình 3.10 Sơ đồ bình luận 49 Hình 3.11 Sơ đồ hiển thị danh sách sản phẩm .49 Hình 3.12 Sơ đồ thêm sản phẩm 50 Hình 3.13 Sơ đồ xóa sản phẩm 50 Hình 3.14 Sơ đồ xem đơn hàng 51 Hình 3.15 Sơ đồ xóa thành viên 51 Hình 3.16 Sơ đồ xóa đơn hàng 52 Hình 3.17 Sơ đồ lớp mức thiết kế 53 Hình 4.1 Giao diện trang chủ 62 Hình 4.2 Giao diện chi tiết điện thoại 63 Hình 4.3 Giao diện đăng ký .64 Hình 4.4 Giao diện đăng nhập 64 Hình 4.5 Giao diện sản phẩm 65 Hình 4.6 Giao diện giỏ hàng 66 Hình 4.7 Giao diện toán 66 Hình 4.8 Giao diện quản lý điện thoại .67 Hình 4.9 Giao diện thêm sản phẩm 68 Hình 4.10 Giao diện thêm lọc chi tiết sản phẩm 68 Hình 4.11 Giao diện quản lý thành viên 69 Hình 4.12 Giao diện quản lý đơn hàng 69 Hình 4.13 Giao diện trị chuyện với khách hàng .70 TÓM TẮT ĐỒ ÁN Đặt vấn đề: Hiện nay, hầu hết cửa hàng điện thoại sử dụng rộng rãi ứng dụng công nghệ thông tin, giúp người dùng dễ dàng mua hàng, dễ dàng quản lý thông tin cá nhân,… Bên cạnh đó, hỗ trợ mạnh mẽ ngơn ngữ lập trình, với đời framework thúc đẩy em chọn đề tài “Xây dựng website thương mại điện tử bán điện thoại di động” Với đề tài này, website cho phép người sử dụng thực cách nhanh chóng, xác việc tìm kiếm thơng tin, loại điện thoại, giá tiến hành việc đặt hàng,… với giao diện làm việc thân thiện, tiện dụng với người sử dụng hệ thống, người tiêu dùng Sử dụng ngôn ngữ Javascript với hai framework tương ứng Reactjs Nodejs hệ quản trị sở liệu MongoDB làm đề tài cho môn Mục tiêu nghiên cứu: Mục tiêu đồ án tìm giải pháp hiệu để giải công việc bán hàng cho cửa hàng điện thoại Đối tượng phạm vi nghiên cứu: Các khách hàng cửa hàng điện thoại, vai trò người quản lý cửa hàng, loại điện thoại thị trường, chi nhánh cửa hàng Phạm vi nghiên cứu: Tập trung xây dựng hệ thống giúp người dùng đặt hàng trực tuyến quản lý thông tin điện thoại Đề tài xây dựng ngơn ngữ lập trình như: Javascript, HTML, CSS sử dụng hệ quản trị sở liệu MongoDB Sau đây, nhóm trình bày phần mềm, quy trình thiết kế cài đặt qua phần: • Chương 1: Giới thiệu đề tài: trình bày lý chọn đề tài, mục đích, đối tượng, phạm vi nghiên cứu đề tài • Chương 2: Nghiên cứu lý thuyết: trình bày sở lý thuyết phương pháp nghiên cứu lý thuyết • Chương 3: Phân tích hệ thống: phân tích yêu cầu hệ thống, sơ đồ phân rã chức năng, phân tích thiết kế hệ thống • Chương 4: Xây dựng website kiểm thử: trình bày cách cài đặt, kết chương trình, kiểm thử chương trình • Kết luận: trình bày ưu điểm, hạn chế hướng phát triển ứng dụng 4.2.3 Giao diện đăng nhập, đăng ký Người dùng đăng nhập đăng ký tài khoản để đảm bảo việc mua hàng tốn Hình 4.3 Giao diện đăng ký Hình 4.4 Giao diện đăng nhập 64 4.2.4 Giao diện sản phẩm Người dùng xem danh sách tất điện thoại cửa hàng, tìm kiếm điện thoại, lọc sản phẩm theo thương hiệu, tính năng, giá cả, xếp theo giá,… Hình 4.5 Giao diện sản phẩm 65 4.2.5 Giao diện đặt hàng Người dùng chọn điện thoại mà muốn, hệ thống chuyển tiếp đến trang đặt hàng Trong trang này, người dùng nắm giá tiền sản phẩm mà khách hàng thêm vào giỏ hàng Ứng với số lượng điện thoại chọn, tổng giá tiền thay đổi để tiện cho người dùng theo dõi Hình 4.6 Giao diện giỏ hàng Hình 4.7 Giao diện toán 66 4.2.6 Giao diện quản lý điện thoại Trong trang này, người quản lý kiểm soát tồn thơng tin điện thoại Hình 4.8 Giao diện quản lý điện thoại Với chức năng, xem thông tin chi tiết, thêm, chỉnh sửa, xóa điện thoại Khi click vào nút exit bên phải điện thoại, trang thông tin điện thoại Khi muốn thêm điện thoại mới, người quản lý chọn vào icon “Add” phía trang quản lý điện thoại phim Hệ thống trang sản phẩm để người quản lý nhập thông tin điện thoại vào Sau điền đầy đủ thông tin, người dùng chọn “Save” để lưu thông tin vào hệ thống Người dùng muốn chỉnh sửa thông tin phim, click vào nút chỉnh sửa điện thoại, hệ thống trang thông tin để phục vụ việc chỉnh sửa Sau chỉnh sửa thông tin cần thiết, người dùng nhấn nút Save để lưu thông tin vào hệ thống Đối với chức Xóa điện thoại, người dùng nhấn vào nút xóa bên phải để thực tiến trình xóa 67 Hình 4.9 Giao diện thêm sản phẩm Hình 4.10 Giao diện thêm lọc chi tiết sản phẩm 68 4.2.7 Giao diện quản lý thành viên Ở trang này, người quản lý xem tồn thơng tin tài khoản thành viên Hình 4.11 Giao diện quản lý thành viên 4.2.1 Giao diện quản lý đơn hàng Ở trang này, người quản lý kiểm sốt tồn thơng tin đơn đặt hàng Hình 4.12 Giao diện quản lý đơn hàng 69 4.2.2 Giao diện trò chuyện với khách hàng Trong trang người quản lý trị chuyện, tư vấn, trao đổi thơng tin với khách hàng Hình 4.13 Giao diện trị chuyện với khách hàng 70 4.3 Kiểm thử Bảng 4.1 Kiểm thử Đăng nhập & Đăng ký Test Description Data input Steps case Expected Actual Status output output id Hiển thị Mở trang Hiển thị Hiển trang login login từ trang thị nút login login trang Pass login Hiển thị Mở trang Hiển thị Hiển trang đăng đăng ký trang thị ký từ nút đăng ký trang đăng ký Pass đăng ký Đăng nhập Email: Đăng Đăng nhập nhập password thành thành công công Nhấn 20520311@gm.uit.edu.vn email Pasword: 123456 Đăng ký Email: Nhập Đăng ký 20520311@gm.uit.edu.vn email thành Password: 123456 password công Đăng tiến hành công đăng tiến nhập hành ký thành đăng nhập 71 Pass Pass Bảng 4.2 Kiểm thử đặt hàng Test Description Case Data Steps input Expected Actual output output Status id Thêm sản Ấn nút Sản phẩm Sản phẩm phẩm vào thêm vào thêm thêm giỏ hàng giỏ hàng vào giỏ hàng vào giỏ Pass hàng Hiển thị Mở trang Hiển thị trang Hiển thị trang giỏ giỏ hàng từ giỏ hàng trang giỏ hàng nút giỏ hàng Pass hàng Tuỳ chỉnh Thay đổi số Cập nhật lại Cập nhật lại giỏ hàng lượng sản giá tiền giá tiền Nhấn nút Đặt hàng Đặt hàng đặt hàng thành công thành công Pass phẩm giỏ hàng Đặt hàng Pass đăng Bảng 4.3 Kiểm thử quản lý đơn hàng Test Description Case Data Steps input Expected Actual output output Status id Hiển thị danh Mở đơn Hiển thị danh Hiển thị danh Pass sách đơn hàng từ sách đơn sách đơn hàng sidebar hàng hàng 72 Chấp nhận Ấn nút Cập nhật đơn hàng đồng ý status đơn status đơn hàng hàng đơn hàng Huỷ đơn Ấn nút Cập nhật Cập nhật hàng huỷ status đơn status Cập nhật hàng đơn hàng Khơng có Mở đơn Thơng báo Thơng báo đơn hàng hàng từ khơng có đơn khơng có đơn sidebar hàng hàng Pass Pass Pass Bảng 4.4 Kiểm thử quản lý sản phẩm Test Description Data Case input Steps Expected Actual output output Status id Hiển thị Mở danh sách Hiển thị Hiển thị danh Pass danh sách sản phẩm từ danh sách sách sản sản phẩm sidebar sản phẩm phẩm Thêm sản Nhập đầy dủ Hiển thị sản Hiển thị sản phẩm thông tin sản phẩm vừa phẩm vừa phẩm cần thêm thêm Cập nhật Cập nhật sản Pass Pass thêm Sửa sản ấn nút edit phẩm sản phẩm sản phẩm phẩm vừa vừa thêm thêm Xoá sản Xoá sản Xoá sản ấn nút xoá phẩm sản phẩm phẩm khỏi phẩm khỏi danh sách danh sách 73 Pass KẾT LUẬN Ưu điểm: Về kiến thức học tập − Hiểu nắm kiến thức phát triển web − Hiểu biết thêm thiết kế giao diện người dùng tảng Figma − Hiểu nắm cách xây dựng website Visual Studio Code − Nâng cao khả phân tích, thiết kế hệ thống − Nắm rõ HTML, CSS, JavaScript framework ReactJS để thiết kế giao diện website phát triển phía Front-end − Nắm rõ NodeJS để phát triển phía Back-end Về phần mềm − Tạo sản phẩm, trực quan, thân thiện, dễ sử dụng, đảm bảo trải nghiệm tốt cho người dùng − Phần mềm viết ngôn ngữ Javascript (thơng qua Framework Nodejs) đóng vai trị server để xử lý logic, để tìm kiếm, lưu trữ, thay đổi liệu phục vụ trở lại người dùng − Phần mềm viết ngơn ngữ thơng qua Reactjs, đóng vai trị Client, hệ thống giao diện người sử dụng để tương tác trực tiếp với người dùng − Về phía hệ thống, xử lý tốt liệu, yêu cầu người dùng gửi đến, đảm bảo tính đắn, nhanh chóng 74 Hạn chế: Hệ thống dành cho khách hàng người quản lý thật hệ thống lớn, cần đầu tư thời gian, công sức nỗ lực để hoàn thiện Song, thời gian nghiên cứu có hạn, hệ thống mà em phân tích thiết kế cịn nhiều hạn chế: − Khả mở rộng số lượng sản phẩm, loại sản phẩm, biến thể tăng lên đáng kể, hệ thống gặp khó khăn việc xử lý lượng liệu lớn đáp ứng đồng thời cho nhiều người dùng − Bảo mật thơng tin chưa hồn chỉnh − Chưa bổ sung thêm vai trò nhân viên để tạo thơng tin sản phẩm − Chưa đầy đủ chức điều khiển vai trò người quản lý − Chưa thực chức sửa đổi thông tin cá nhân − Kiến thức thực tế lập trình cịn hạn chế, nên tính chun nghiệp chương trình chưa cao, bắt lỗi chưa kĩ số chổ số tính chưa tối ưu Hướng phát triển: − Mở rộng tính năng: Bổ sung tính chia sẻ mạng xã hội, tạo hồ sơ người dùng, tương tác kết nối người mua người bán, áp dụng AI vào gợi ý sản phẩm theo nhu cầu sở thích khách hàng,… − Phát triển ứng dụng di động: Xây dựng phiên ứng dụng di động để đáp ứng nhu cầu người dùng thiết bị di động, tạo thuận tiện trải nghiệm người dùng tốt − Tăng cường bảo mật: Đẩy mạnh bảo mật, áp dụng biện pháp mạnh để bảo vệ thông tin cá nhân người dùng ngăn chặn hình thức công 75 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt: [1] "Javascript gì? Giới thiệu ngơn ngữ JS cho người học," MONA.Media, [Online] Available: https://monamedia.co/javascript-la-gi-gioi-thieu-ve-ngonngu-js-cho-nguoi-moi-hoc/ [Accessed 12/ 04/ 2023] [2] "ReactJS gì? Tại ReactJS lại sử dụng nhiều?," hocjavascript.net, [Online] Available: https://hocjavascript.net/react/reactjs-la-gi-tai-sao-lai-duocsu-dung/ [Accessed 12/ 04/ 2023] [3] "Giới thiệu Node.js," viblo.asia, [Online] Available: https://viblo.asia/p/gioithieu-ve-nodejs-3P0lPyRg5ox [Accessed 12/ 04/ 2023] [4] "Tìm hiểu TypeScript kiến thức bản," viblo.asia, [Online] Available: https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB [Accessed 12/ 04/ 2023] [5] "GitHub gì? Những lợi ích GitHub mang lại cho lập trình viên," topdev.vn, [Online] Available: https://topdev.vn/blog/github-la-gi/ [Accessed 12/ 04/ 2023] [6] "Draw.io: vẽ sơ đồ online, nhanh mạnh, miễn phí, khơng giới hạn số lượng," tinhte.vn, [Online] Available: https://tinhte.vn/thread/draw-io-ve-so-do-onlinenhanh-va-manh-mien-phi-khong-gioi-han-so-luong.2679948/ [Accessed 12/ 04/ 2023] Tài liệu tiếng Anh: [7] M a community, "React – A JavaScript library for building user interfaces," Meta Platforms, 29/ 05/ 2013 [Online] Available: https://legacy.reactjs.org/ [Accessed 12/ 04/ 2023] 76 [8] M Inc, "MongoDB Atlas Database - MongoDB as a Service," 11/ 02/ 2009 [Online] Available: https://www.mongodb.com/ [Accessed 12/ 04/ 2023] [9] R D O F B C Microsoft Corporation, "NodeJS," 27 05/ 2009 [Online] Available: https://nodejs.org/en [Accessed 12/ 04/ 2023] 77 78