Xây dựng website sàn thương mại Điện tử công ty tnhh thương mại dịch vụ và du lịch kendu

Trải nghiệm người dùng là điều mà các sàn thương mại điện tử luôn chú trọng, từ giao diện thân thiện đến hệ thống thanh toán an toàn [1].. Giỏ Hàng và Thanh Toán: Người mua có thể thêm s

SO LAO DONG TB&XH TINH BINH THUAN TRUONG TRUNG CAP BACH KHOA MIEN NAM

LUAN VAN TOT NGHIEP

Đề tài:

XÂY DỰNG WEBSITE SÀN THƯƠNG MẠI ĐIỆN

TỬ CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ VÀ

CONG HOA XA HOI CHU NGHIA VIET NAM

Độc lập — Tự do - Hạnh phúc

XAC NHAN CUA CO SO THUC TAP

Tên đơn vị thực tập: CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ VÀ DU LICH KENDU

Địa chỉ: 933/4/10B Tỉnh Lộ 10, Phường Tan Tao, Quan Binh Tan, Thanh phó Hồ Chí Minh, Việt Nam

Trong thời gian từ ngày 15/05/2024 đến ngày 15/07/2024

Trong thời gian thực tập tại CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ

VÀ DU LỊCH KENDU

Anh (chị) Chu Đình Đại Nghĩa đã chấp hành tốt các quy định của cơ quan

và thể hiện tỉnh thần làm việc nghiêm túc, chăm chỉ và chịu khó học hỏi Tình hình và số liệu trong báo cáo thực tập phản ánh đúng thực trạng của cơ quan

Tp Hỗ Chí Minh, ngày thẳng năm 2024

Xác nhận của đơn vị (có chữ ký và đồng dấu tròn của cơ quan)

TRUONG TRUNG CAP BACH KHOA MIEN NAM KHOA KE TOAN - QUAN TRI KINH DOANH

BAN NHAN XET CHUYEN DE TOT NGHIEP

Tên đề tài XÂY DỰNG WEBSITE SÀN THƯƠNG MẠI ĐIỆN TỬ CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ VÀ DU LỊCH KENDU

- Sinh viên thực hiện: Chu Đình Đại Nghĩa Mã số: T22CNTT.020

NHẬN XÉT

Kết luận và cho điểm:

Đình Thuận, ngày tháng năm 2024 GIÁO VIÊN HƯỚNG DÂN

LOI CAM ON

Lời đầu tiên, em xin gửi lời cảm ơn sâu sắc nhất đến Thầy Ân - giảng viên Trường Trung Cấp Bách Khoa Miền Nam Thầy là người đã tận tình hướng dẫn, hỗ trợ và chia sẻ cho em những ý kiến, kinh nghiệm quý báu trong suốt quá trình thực tập và thực hiện đỗ án tốt nghiệp

Em cũng xin gửi lời cảm ơn chân thành tới các thầy cô giáo của Trường, đặc biệt là các thầy cô trong khoa Công nghệ thông tin đã luôn tận tình giảng dạy, truyền đạt cho em những kiến thức và kỹ năng bỗ ich trong thời gian học tập và rèn luyện tại Trường

Đó chắc chắn sẽ là hành trang vững chắc dé em tr tin theo đuôi những mục tiêu trong tương lai

Cuối cùng, em xin cảm ơn các anh chị trong Công Ty TNHH Thương Mại Dịch Vụ

và Du Lịch KenDu, gia đình và bạn bè đã luôn ủng hộ, quan tâm, động viên và giúp đỡ

em trong suốt quá trình học tập và hoàn thành đồ án tốt nghiệp

Vì thời gian có hạn, cũng như trình độ hiểu biết của bản thân còn nhiều han ché, nên đồ án không thê tránh khỏi những thiếu sót Em rất mong nhận được sự góp ý của các thay cô đề đồ án của em được hoàn thiện hơn

Em xin chân thành cảm ơn

NHAN XET, DANH GIA, CHO DIEM

(CUA GIANG VIEN HUONG DAN)

Đồng ý/ Không đồng ý cho sinh viên bảo vệ trước hội đồng chấm đồ án tốt nghiệp

21H HH ray , ngày tháng năm CÁN BỘ GIẢNG VIÊN HƯỚNG DÂN

Chương 1: Khảo sát và xác định yêu cầu

Chương 2: Phân tích và thiệt kê hệ thông

Chương 3: Cài đặt và thử nghiệm hệ thông

CHƯƠNG I KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẤU

1.1

122

Giới thiệu bài toán

Khảo sát thực trạng

Phần mua sắm của khách hàng

Phần Quản Lý Dành Cho Người Bán Hàng

Phân quản lý của quản trị viên

Lập trình giao diện với Vuejs

Mô tả hệ thông

Xác định các chức năng

Kết luận chương,

Biểu đồ use case và kịch bản

Biểu đồ use case tông q quát

Biểu đồ phân rã và kịch bản UC Đăng nhập

Biểu đồ phân rã và kịch ban UC quản lý sản phẩm

Biéu dé phan ra và kịch bản UC thanh toán

Biểu đồ phân rã và kịch bản UC tạo cửa hàng

Biéu dé phân rã và kịch bản UC Quản lý thông tin tài khoản Biêu đồ phân rã và kịch bản UC Khách hàng quản lý đơn hàng

Kịch bản ÚC tiêp tục thanh toán

CHƯƠNG 3 CÀI ĐẶT VÀ THỨ NGHIỆM HỆ THÓNG

Biéu do phan ra va kich ban UC Tim kiem

Xây dựng biêu đồ lớp

Mô tả chỉ tiết thuộc tính và phương thức của các lớp

Thiết kế mô hình cơ sở dữ liệu

Chức năng Quản lý giỏ hàng

Chức năng chỉnh sửa giỏ hàng

Chức năng Thanh toán

3.1 Môi trường triên khai hệ thông,

3.2 Giao diện hệ thông

3.2.2 Giao diện đăng nhập

3.2.3 Giao diện trang chủ

3.2.4 Giao diện trang tìm kiếm

3.2.5 Giao diện chỉ tiết sản phẩm

3.2.6 Giao diện giỏ hàng

3.2.7 Giao diện danh sách yêu thích

3.2.8 Giao diện thanh toán

3.2.9 Giao diện chỉnh sửa profile

3.2.10 Giao diện danh sách đơn hàng

3.2.11 Giao diện thông tin đơn hàng chỉ tiết

3.2.12 Giao diện tạo mới cửa hàng

3.2.13 Giao diện quản lý thông tin cửa hàng

3.2.14 Giao diện quản lý sản phẩm

3.2.15 Giao diện thêm và sửa sản phẩm

3.2.16, Giao diện quản lý loại sản phẩm

3.2.17 Giao diện chỉnh sửa và thêm loại sản phẩm

3.2.18 Giao diện thông kê

3.3 Kết luận chương

KÉT LUẬN

TÀI LIỆU THAM KHẢO

DANH MỤC CÁC HÌNH

Hình 2.1: Biểu đồ usecase tông quan 2s nh HH2 H22 rrrrrờn 9 Hình 2.2: Biểu đồ phân rã UC Đăng ký 2Q n2 2212 xe rờg

Hình 2.4: Biểu đồ phân rã UC Quản lý Sản phẩm Q0 HH2 1g ru Hình 2.5: Biểu đồ phân rã UC quản lý giỏ hàng 0 SH He xeg Hình 2.6: Biểu đồ phân rã UC thanh toán 22 22S 2221211227122 22122222 re 14 Hình 2.7: Biểu đồ phân rã UC tạo cửa hàng 20 nọ 22222 tr eerrrro 15 Hình 2.8: Biểu đồ phân rã UC Quản lý thông tỉn tài khoản cường 16 Hình 2.9: Biểu đồ phân rã UC Khách hàng quản lý đơn hàng nen 17 Hình 2.10: Biêu đồ phân rã UC tìm kiếm sản phẩm - 2 nh ruyu 19 Hình 2.11: Biêu đồ phân rã LIC Quản lý Danh sách yêu thích - nen 20 Hình 2.12: Biêu đồ phân rã UC quản lý loại sản phẩm 20 SH rrườn Hình 2.13: Biêu đồ phân rã UC thống kê của Ađmin 0n HH2 rrrryg Hình 2.14: Biêu đồ phân rã quản lý đơn hàng của Người ban

Hình 2.15: Biêu đồ phân rã UC quản lý cửa hàng 52 2n t2 rrryg Hình 2.16: Biêu đồ phân rã LIC thống kê của người bán hàng nen ưu 25 Hình 2.17: Biêu đỗ lớp pha phân tích - 22 c0 22012121 eưyu Hình 2.18: Biêu đồ cơ sở dữ liệu

Hình 2.19: Biêu đồ tuần tự của chức năng đăng ký

Hình 2.20: Biêu đồ tuần tự của chức năng đăng nhập 2- SH HH ưu 39 Hình 2.21: Biêu đồ tuần tự của chức năng thêm sửa sản phẩm - 2 nen 40 Hình 2.22: Biêu đồ tuần tự của chức năng xoá sản phâm 5 nen 4I Hình 2.23: Biêu đồ tuần tự của chức năng thêm sản phẩm giỏ hàng co co: 42 Hình 2.24: Biêu đồ tuần tự của chức năng chỉnh sửa giỏ hàng à nen rời 43 Hình 2.25: Biêu đồ tuần tự của chức năng thanh toán à ntnH tt ruyn 44 Hình 2.26: Biêu đồ tuần tự của chức năng tạo cửa hàng nhe rườn 45 Hình 2.27: Biêu đồ tuần tự của chức năng quản lý thông tin tài khoán 46 Hình 2.28: Biéu dé tuần tự của chức năng tiếp tục thanh toán 2tr yn 47 Hình 2.29: Biéu dé tuần tự của chức năng đánh giá sản phẩm o2 non ưu 48 Hình 2.30: Biêu đồ tuần tự của chức năng tìm kiếm 2 22H HH tren 49 Hình 2.31: Biêu đồ tuần tự của chức năng thêm sản phẩm yêu thích - si 50

- Biéu đồ tuân tự cia chire nang quan ly ctra hang occ csc ceeeeeeeseeereene 55 : Biểu đồ tuân tự của chức năng thống kê của người bán ào 56 Giao diện đăng ký tài khoản - 0 n1 121221221211 151221111111121 1112112215181 xe 57

Giao diện đăng nhập 0201211221211 121 221121211111 111211 21201121102 112 xe 58

Hình 3.11: Giao diện danh sách đơn hàng 0 20 2222012211212 1 251121151 211121211 20112 ky

Hình 3.12: Giao diện thông tin chỉ tiết đơn hàng chen ryyn

Hình 3.13: Giao diện tạo mới cửa hàng

Hình 3.14: Giao diện quản lý thông tin cửa hàng

Hình 3.15: Giao điện quản lý sản phâm S2 H221 22 re ru 64 Hình 3.16: Giao điện thêm sửa sản phâm nhe 65 Hình 3.17: Giao điện quản lý loại sản phẩm 0 2n SH HH ru 65

Hình 3.18: Giao diện thêm sửa loại sản phẩm TT TT kg xnxx kg xnxx 66 Hình 3.19: Giao diện thống KG oii n ng nh ng ng tk tk xxx kg xxx gà xxx xxx ru 66

VI

Kịch bản UC xóa sản phẩm à Sàn HT ng rung Kịch bản UC thêm sản phẩm giỏ hàng Q0 2n nh H Hư 14 Kịch bản UC chính sửa giỏ hàng 00 20221221211 221 121221222115 111 111 re 14 Kịch bản UC thanh toán ©222S2 S2 221222211217111722112 210212 rre 15

Kịch bản UC tạo cửa hàng 0 cece enseeecneceseeseaeeseesceneeseeeeeesseessesenes 16

Kịch bản UC quản lý thông tin tài khoản - che rrererre 17 Kịch bản UC tiếp tục thanh toán 2 2s n2 212111 rrrra 18 Kịch bản UC đánh giá sản phâm 22252 S21 2121222121222 ere 18 Kịch bản UC tìm kiếm sản phâm 2-2 T222 121 1e ryn 19 Kịch bản UC thêm sản phâm yêu thích - 22 TT n2 2 tre ren 20 Kịch bản UC xóa sản phẩm yêu thích

Kich ban UC quan ly loại sản phâm 22 2 n2 220gr ryn Kịch bản UC thống kê của Admin 22 SỰ212 222222 re run Kịch bản UC quản lý đơn hàng của người bán hàng ee 23

Kịch bản UC quản lý cửa hàng

Kịch bản UC thống kê của người bán hàng

Mô tả chỉ tiết thuộc tính và phương thức của các lớp nen 36

vil

DANH MUC KY HIEU VA CHU VIET TAT

CRUD Create, Read, Update, và Delete Tạo, Đọc, Cập nhập, Xóa

MO DAU Trong thời đại mà cuộc sống hàng ngày ngày càng kết nối thông qua công nghệ, thương mại điện tử không chỉ là một phân của cuộc sống hàng ngày mà còn là một động lực thúc đấy sự đôi mới trong kinh doanh [1] Đối với nhiều doanh nghiệp, sàn thương mại điện tử có nhiều đặc điểm nôi bật cho người mua và người bán

Sàn thương mại điện tử giúp kết nối người mua và người bán trên khắp thề giới Điều này mở ra cơ hội không giới hạn cho doanh nghiệp để tiếp cận thị trường toàn câu

và khách hàng tiềm năng Người tiêu dùng có thể mua sắm mọi lúc, mọi nơi, chỉ cần kết

nối internet Điều này mang lại sự tiện lợi và lĩnh hoạt cho cả người mua và người bán

Bên cạnh đó, sàn thương mại điện tử cho phép doanh nghiệp đa dạng hóa sản phâm và dịch vụ của mình một cách linh hoạt, từ đó đáp ứng nhu cầu đa dạng của khách hàng Trải nghiệm người dùng là điều mà các sàn thương mại điện tử luôn chú trọng, từ giao diện thân thiện đến hệ thống thanh toán an toàn [1]

Với những đặc điểm nỗi bật của sàn thương mại điện tử, đồ án quyết định chọn đề tài “Xây dựng Website Sàn Thương mại Điện tử Công Ty TNHH Thương Mại Dịch Vụ

Và Du Lịch KenDu” để đáp ứng phần nào nhu cầu trên

Nội dung của đồ án bao gồm 3 phần chính như sau:

Chương I: Khảo sát và xác định yêu cầu

Nội dung chương | trình bày về bài toán quản lý mua bán hàng online, cũng như các giải pháp đã được phát triển để giải quyết một số bài toán tương tự Kế tiếp, chương 1 trình bày về những giải pháp công nghệ mà đỗ án sẽ sử dụng đề giải quyết bài toán Cuối cùng, chương 1 trình bày chỉ tiết những yêu cầu của hệ thống

Chương 2: Phân tích và thiết kế hệ thông

Nội dung chương 2 trình bày quá trình phân tích và thiết kế hệ thông, với các biêu

đồ theo chuẩn UML

Chương 3: Cài đặt và thử nghiệm hệ thống

Nội dung chương 3 trình bày môi trường triển khai hệ thống, cũng như hình ảnh giao diện hệ thống sau khi cài đặt

CHUONG 1 KHAO SAT VA XAC BINH YEU CAU

Trong chương này, đồ án khảo sát 1 số hệ thông giải quyết việc quản lý mua bản hàng online Sau đó, đồ án trình bày các giải pháp công nghệ đề xây dựng hệ thống Cuối

cùng đề án nêu mô tả của hệ thông, xác định cụ thể và chỉ tiết các yêu cầu của hệ thông

1.1 Giới thiệu bài toán

Trong thời đại số hóa ngày nay, người mua ngày càng tra chuộng việc mua sắm trực tuyến với nhiều đặc điểm nỗi bật Sàn thương mại điện tử cho phép người mua thực hiện mua sắm bất kỳ lúc nào, 24/7, không bị ràng buộc bởi giờ làm việc có định Cùng với đó

là sự cung cấp dịch vụ giao hàng tận nơi, giúp người mua tiếp kiệm thời gian và công sức Sản Thương mại Điện tử đa dạng hóa sản phẩm và dịch vụ, người bán có thể mở

rộng phạm vi kinh doanh của họ một cách nhanh chóng và tiện lợi, không bị ràng buộc

bởi không gian địa lý Và cung cấp một loạt các sản phẩm và dịch vụ từ nhiều ngành công nghiệp, từ hàng tiêu dùng đến dịch vụ chuyên ngành Sàn Thương mại Điện tử tương tác cao với người dùng, người mua có khả năng đánh giá sản phẩm và gửi phản hdi, dé dang tim thay sản phẩm mong muốn Bên cạnh đó Sàn Thương mại Điện tử có nhiều đặc điểm khác như bảo mật thanh toán và dữ liệu, cạnh tranh và ưu đãi, quản lý tài khoản và thống ké [1]

Nhìn chung, Sàn Thương mại Điện tử không chí là một nên tảng mua bán trực tuyến

mà còn là một hệ thống tích hợp nhiều đặc điểm độc đáo để đáp ứng nhu cầu ngày càng

đa dạng của người mua và người bán Trên cơ sở đó, đồ án quyết định lựa chọn để tài Xây dựng Hệ thống Website Sàn Thương mại Điện tử dé tao sự thuận lợi trong việc mua

va ban trực tuyến

1.2 Khảo sát thực trạng

Đối tượng khảo sát là một số trang web sàn thương mại điện tử như Shopee, Lazada, SenDo, Amazon, Qua quá trình khảo sát thu được 1 số kết quả sau:

Mỗi hệ thống sàn thương mại điện tử thường gồm 3 phần chính:

- _ Phân thứ nhất là phần mua sắm của khách hàng

- Phân thứ 2 là phần quản lý dành cho người bán hàng

- Phân thứ 3 là phần quản lý của quản trị viên

Phần Mua Sam Cho Khách Hàng là nơi người tiêu dùng có thể tìm kiếm, xem thông tin chỉ tiết và mua sắm hàng ngàn sản phẩm khác nhau Dưới đây là mô tả chỉ tiết về các tính năng và chức năng quan trọng trong phan này:

Tinh nang tìm kiếm giúp người dùng để đàng tìm thấy sản phẩm mong muốn Người mua có thê nhập từ khóa, tên sản phâm, hoặc thậm chí làm sử dụng

hình ảnh để tim kiếm

Danh Mục và Bộ Lọc: Sản phẩm được tô chức vào các danh mục, giúp người dùng dễ dàng duyệt và lựa chọn Bộ lọc cho phép họ thu hẹp kết quả tìm kiếm dựa trên nhiều tiêu chí như giá, đánh giá, thương hiệu,

Trang Sản Phẩm Chi Tiết: Mỗi sản phâm có trang chỉ tiết riêng biệt hiển thị thông tin chỉ tiết, hình ảnh, đánh giá từ người dùng, thông số kỹ thuật, và các tùy chọn mua sắm như kích thước, màu sắc, và số lượng

Giỏ Hàng và Thanh Toán: Người mua có thể thêm sản phẩm vào giỏ hang và xem lai các mục đã chọn trước khi tiến hành thanh toán Quả trình thanh toàn

an toàn và thuận tiện với nhiều phương thức thanh toán khác nhau

Ưu Đãi và Khuyến Mãi: thường xuyên cung cấp các ưu đãi, giảm giá và khuyến mãi cho người mua sắm Những thông báo về các chương trình khuyến mãi sẽ xuất hiện trực tiếp trên trang sản phẩm hoặc thông qua thông báo

Hệ Thống Đánh Giá và Nhận Xét: Người mua có thê đọc đánh giá từ người dùng khác về sản phẩm trước khi quyết định mua Những đánh giá này thường đi kèm với hình ảnh và trải nghiệm cá nhân, giúp người mua đưa ra quyết định thông tin

Dịch Vụ Giao Hàng và Theo Dõi Đơn Hàng: cung cấp các dịch vụ giao hàng nhanh chóng và theo đõi đơn hàng Người mua có thê theo dõi tình trạng vận chuyên và biết chính xác khi nào họ sẽ nhận được hàng

Trang Cá Nhân và Lịch Sử Mua Sắm: Mỗi người dùng có một trang cá nhân riêng, nơi họ có thê quản lý thông tin cá nhân, theo đõi lịch sử mua sắm, và quản lý đơn hàng đã đặt

Phần Quản Lý Dành Cho Người Bán Hàng cung cấp các công cụ và tính năng giúp người bán quản lý cửa hàng của họ, theo déi doanh số bán hàng, và tương tác với khách hàng Dưới đây là mô tả chỉ tiết về các phân quan trọng của phần này: Danh Sách San Pham va Quản Lý Kho: Người bán có thể thêm mới, chỉnh sửa và xóa sản phẩm từ danh sách của mình Họ cũng có thể quản lý thông tin kho hàng, theo dõi lượng tồn kho và cập nhật tình trạng của sản phẩm Đặt Giá và Ưu Đãi: Các công cụ quản lý giá giúp người bán đặt giá sản phẩm của mình theo cách linh hoạt để tối tru hóa doanh số bán hàng Người ban cũng có thê tạo và quản lý các chương trình ưu đãi và khuyến mãi

Quản Lý Đơn Hàng và Giao Hàng: Người bán có thé theo doi don hang mdi, đơn hàng đã xử lý và đơn hàng đã gửi đi Họ cũng có thê xác nhận và quản lý quá trình giao hàng và trả hàng

Thống Kê Doanh Số Bán Hàng: Cung cấp các báo cáo và thống kê về doanh số bán hàng, doanh thu, và các chí số khác Người bán có thê theo đõi hiệu suất của cửa hàng và sản phẩm đề đưa ra quyết định kinh doanh thông minh Chăm Sóc Khách Hàng: Cung cấp công cụ để tương tác với khách hàng, giải quyết tranh chấp, và cung cấp hỗ trợ Người bán có thê quản lý yêu cầu trả hàng, câu hỏi từ khách hàng và giữ liên lạc với họ

Quảng Bá và Tiếp Thị: cung cấp các công cụ tiếp thị và quảng bá để người bán

có thể tăng cường hiện điện của sản phẩm và thương hiệu của họ Các tính năng này bao gồm quảng cáo trả tiền, quảng cáo sản phẩm, và khuyến mãi flash

Dịch Vụ Lưu Trữ và Vận Chuyên: cung cấp dịch vụ lưu trữ và vận chuyến,

giúp người bán quản lý hàng tồn kho một cách hiệu quả và tiết kiệm chỉ phí Thông Báo và Cài Đặt: Người bán có thê tùy chỉnh cài đặt tài khoản và thông báo để nhận thông tin quan trọng và cập nhật

Phần quản lý của quản trị viên

Phần quản trị viên của Amazon không được công khai, và nó thường là một giao diện riêng biệt đành cho những người quản trị hệ thống và các quy trình kinh doanh nên Quản trị viên có thé thực hiện các nhiệm vụ như quản lý tài khoản, cầu hình hệ thống,

1.3.1 Kiến trúc hệ thông

Hệ thống được xây dựng dựa trên mô hình 3 lớp, bao gồm Presentation Layer (lớp trinh bày), Business Logic Layer (lớp logic), và Data Access Layer (lớp truy cập dữ liệu) DỊ:

-_ Lớp trình bày: Lớp này có nhiệm vụ chính là giao tiếp với người dùng Nó gồm các thành phần giao điện như nhập đữ liệu, hiễn thị đữ liệu, kiểm tra tính đúng đắn đữ liệu trước khi gọi lớp logic Có 2 thành phần chính sau:

©_ Ulcomponents: gồm các thành phần tạo nên giao diện của hệ thống

Chúng chịu trách nhiệm thu nhận và hiển thị dữ liệu cho người dùng Ví

du: textbox, button, combobox,

o UI Process Components: 1a thành phần chịu trách nhiệm quản lý các quá trình chuyên đôi giữa các UI

-_ Lớp Logic: lớp này phân ra thành 2 nhiệm vụ

o _ Xử lý chính nguồn đữ liệu từ lớp trình bày trước khi truyền xuống lớp

truy cập dữ liệu và lưu vào hệ quan tri cơ sở đữ liệu

o_ Kiểm tra các ràng buộc, tính toàn vẹn và hợp lệ dữ liệu, thực hiện tính

toán và xử lý các yêu cầu nghiệp vụ, trước khi trả kết quả về lớp trình bày -_ Lớp truy cập dữ liệu: Lớp này có chức năng giao tiếp với hệ quản trị CSDL như thực hiện các công việc liên quan đến lưu trữ và truy vấn (tìm kiếm, thêm, xóa, sửa, .)

1.3.2 Lập trình giao diện với VueJs

Giao diện hệ thông được xây dựng giao điện dựa trên ngôn ngữ Vue]s và sự hễ trợ cua 1 sé thu vién VueJS, bao gom Vuetify, VueX, Vue Router

VueJs là một framework JavaScript dựa trên thanh phan (component-based), linh hoạt, dễ sử dụng và tích hợp tốt với các dự án lớn [3]

Vuetify là một thư viện UI đựa trên Vue.js, cung cấp nhiều thành phân thiết kế và giao diện đẹp cho hệ thống [4]

o_ Tích Hợp Nhanh Chóng: Cung cấp cầu hình mặc định và các tiện ích giúp tích hợp nhanh chóng với các dự án

o_ Quản Lý Dependency: Sử dụng Maven hoặc Gradle dé quan lý dependency và build ứng dụng dễ dàng

o Microservices Ready: Hé tro kién tric microservices néu cần mở rong

mình và thống kê Quản trị viên có thé quan ly loại sản phẩm và thông kê

1.4.2 Xác định các chức năng

Từ mô tả hệ thông, đỗ án xác định các chức năng cần có như sau:

- _ Chức năng của người dùng:

o Dang nhap/ dang ky

© Quan ly thong tin tai khoan

- _ Chức năng của quản trị viên:

o Thống kê

o_ Quản lý loại sản phẩm

- _ Chức năng cho nha ban hang (seller)

©_ Quản lý đơn hang

Quản lý danh sách yêu thích

Thanh toán đơn hàng

Trong chương 1, đồ án đã giới thiệu về đề tài Xây đựng ứng dựng Sàn Thương mại

Điện tử Tiếp theo đề án tham khảo một số hệ thống có sẵn, tìm ra những chức năng chính

của chúng Sau đó, đồ án đề xuất các công nghệ sẽ sử dụng trong xây dựng hệ thống Cuối cùng đồ án trình bày yêu cầu của hệ thống Ở chương tiếp theo, đồ án sẽ đi vào chỉ tiết cách bước phân tích và thiết kế cho hệ thống

CHUONG 2 PHAN TICH VA THIET KE HE THONG

Trong chương này, đồ án thực hiện phân tích và thiết kế hệ thông hướng đối tượng,

sử đụng các biểu đồ theo chuẩn ngôn ngữ UML Nội dung chính của chương bao gồm: biểu đồ use case tông quát, các biêu đồ phân rã use case, kịch bản, biểu đồ lớp phân tích, thiết kế mô hình lưu trữ dữ liệu, biểu đồ tuần tự và biểu đồ lớp thiết kế

2.1 — Biểu đồ mse case và kịch bản

2.1.1 Biéu dé use case tông quát

2.1.2 Biéu dé phan ra va kich ban UC Dang ky

Hình 2.2: Biéu đồ phân rã UC Đăng ký

Hậu điều kiện Khách đăng ký tài khoản thành công

2.1.3 Biéu dé phan ra va kich ban UC Dang nhập

3 Người dùng nhập tài khoản (usename), mật khâu (password)

4 Hệ thống thông báo đăng nhập thành công

Ngoại lệ

4 Hệ thống thông báo sai tài khoản, mật khẩu Và yêu cầu nhập lại

4.1 Quay lại bước 5 của chuỗi sự kiện chính

Bang 2.2: Kich ban UC dang nhập

* - Vào được trang quản lý sản phẩm

pham thanh cong

Chuỗi sự kiện chính

1 Người bán nhập từ khóa trên thanh tim kiếm và ấn tìm kiếm -

2 Hé thong tìm kiêm các sản phâm và hiện lên danh sách tìm kiểm

3 Người bán ấn nút thêm mới sản phẩm hoặc ấn chỉnh sửa sản phẩm

4 Hệ thống hiển thị trang điền thông tin sản phẩm Gồm có các thông tin của sản phẩm và phần giảm giá của sản phẩm

Người bán điền thông tin va bam nut “save”

._ Hệ thông kiểm tra tính đúng đắn của thông tin đã nhập

7 Hệ thống thông báo thêm sản phẩm thành công Sau đó lưu thông tin vào

° Chuyén dén trang quan ly san phâm

thành công

Chuỗi sự kiện chính

1 Nguoi ban chon 1 san phẩm và ấn nút xóa sản phẩm

2 Hé thong hiện thị xác nhận xóa sản phâm

ven) <<Include>> >Gimsn ris)

Guest

Hình 2.5: Biéu do phan ra UC quan ly giỏ hàng

2.1.5.1 Kịch bản UC thêm sản phẩm giỏ hàng

*° - Khách thêm sản thành

Hệ thống hiện thông tin sản phẩm

Khách chỉnh sửa số lượng sản phẩm và bấm nút thêm vào giỏ hàng

Hệ thống kiểm tra tính đúng đắn của số lượng sản phẩm giỏ hàng

I[hông báo thêm sản phẩm thành công và lưu giỏ hàng

Ngoại lệ

Hệ thống thông báo quá số lượng cho phép, vui lòng nhập lại

Quay lại bước 3 của kịch bản chính

thành công Kích hoạt

Chuỗi sự kiện chính

1 Khách ấn nút giỏ hàng trên trang chủ

2 Hệ thống chuyên đến trang giỏ hàng và hiện thông tin giỏ hàng

3 Khách chỉnh sửa sản phẩm của giỏ hàng (sửa sô lượng hoặc xóa sản phẩm)

4 Hệ thống thông báo chính sửa sản phẩm thành công

Ngoại lệ

4 hệ thống thông báo số lượng sản phẩm không phù hợp

4.1 quay lai bude l trong chuỗi sự kiện chính

Bang 2.6: Kịch bản UC chỉnh sửa giỏ hàng

2.1.6 Biểu đồ phân rã và kịch bản UC thanh toán

Customer š

Hình 2.6: Biểu đô phân rã UC thanh toán

* - Đăng nhập thành công

Chuỗi sự kiện chính

Khách hàng ấn thanh toán trên trang giỏ hàng

Hệ thống hiển thị trang điền thông tỉn thanh toán, gồm có địa chỉ nhận hàng và phương thức thanh toán

Khách hàng điền địa chỉ nhận hàng và chọn phương thức thanh toán là Thanh toán khi nhận hàng

Hệ thống lửu trạng tháLcủa đơn hàng va chuyén về trang danh sách đã mua

Ngoại lệ

3 Khách hàng điền địa chỉ nhận hàng và chọn phương thức thanh toán là thanh toán trực tuyến

Hệ thống chuyển đến trang thanh toán của zaloPay

Khách hàng tiến hành thanh toán

Quay trở lại bước 4 của chuỗi sự kiện chính

* Chuyén dén trang chu

thành công

Chuỗi sự kiện chính

1 Khách hàng ấn nút biểu tượng tài khoản và chọn thông tin cá nhân

2 Hệ thống hiện trang thông tin cá nhân

3 Khách hàng chọn cửa hàng của tôi

4 Hệ thống hiện lên giao diện tạo cửa hàng, gồm có ảnh cửa hàng, tên, mô

Hệ thống thông báo tạo cửa hàng thành công và có nút chuyển đến cửa hàng Ngoại lệ

Hệ thống thông báo cần điền đầy đủ các thông tin

Quay trở lại bước 5 trong kịch bản chính

Bang 2.8: Kịch bản UC tao cua hang

Hình 2.8: Biéu đò phân rã UC Quản lý thông tin tai khoản

+ - Chuyên đền trang chủ

tài khoản thành công

Chuỗi sự kiện chính

1 Khách hàng ấn vào nút thông tin tài khoản

2 Hệ thống hiển thị thông tin của người dùng, gồm có thông tin, hình ảnh của người dùng, thông tin mật khâu của người dùng

3 Người dùng chỉnh sửa thông tin và lưu

4 Hé thong lưu các thông tin đã chỉnh sửa

Ngoại lệ

4 Hệ thống thông báo nhập đầy đủ các trường cần thiết

4.1 Quay lại bước 3 của chuỗi sự kiện chính

4 Hệ thông thông báo mật khâu hiện tại không đúng

| 4.1 Quay lại bước 3a của chuỗi sự kiện chính

Bảng 2.9: Kịch bản UC quản lý thông tin tài khoản

2.1.9 Biểu đồ phân rã và kịch bản UC Khách hàng quản lý đơn hàng

Customer

<<Include>>

Hình 2.9: Biêu đề phân rã UC Khách hàng quản Ìý đơn hàng

2.1.9.1 Kịch bản UC tiếp tục thanh toán

* Chuyén dén trang chu

Khách hàng chọn nút quản lý đơn hàng trên trang chủ

._ Hệ thống hiện giao diện quản lý đơn hàng với danh sách đơn hàng Khách hàng chọn l đơn hàng chưa thanh toán và ấn nút xem chỉ tiết

Hệ thống hiện trang chỉ tiết đơn hàng với các sản phẩm của đơn hàng và nút tiếp tục thanh toán

Khách hàng ấn nút tiếp tục thanh toán

Hệ thống chuyên đến trang thanh toán của ZaloPay

Khách hàng tiễn hành thanh toán

._ Hệ thống cập nhật trạng thái đơn hàng thành đã thanh toán và quay trở lại trang quản lý đơn hàng

Ngoại lệ

6

Hệ thống chuyên đến trang thanh toán của ZaloPay và hiện thông báo quá

6.1 Khách hàng chọn quay lại

6.2 _ Hệ thông cập nhật trạng thái đơn hàng thành Hủy và quay trở lại trang quản lý đơn hàng -

4 Hé thong chuyền đền trang chi tiết đơn hàng và thông báo đơn hàng đã được thanh toán

4.1 Khách hàng an nút quay lại

42 Hệ thống chuyên đến trang quan lý đơn hàng

Bảng 2.10: Kịch bản UC tiếp tục thanh toán

2.1.9.2 Kịch ban UC đánh giá sản phẩm đã mua

+ - Chuyến đến trang quản lý đơn hàng

phẩm thành công

Chuỗi sự kiện chính

1 Khách hàng chọn 1 đơn hàng va ấn xem chi tiết

2 Hệ thống chuyên đến trang chỉ tiết đơn hàng, mỗi sản phẩm của đơn hàng

có nút đánh giá

Khách hàng chọn | san phẩm và ấn nút đánh giá

Hệ thống hiện phân đánh giá sản phẩm

Khách hàng tiên hành đánh giá sản phẩm và ấn lưu đánh giá sản phẩm ._ Hệ thống lưu đánh giá sản phâm của khách hàng và thông báo đánh giá sản phẩm thành công

6 Hệ thông thông báo “chưa nhập đây đủ các trường”

6.1 Quay lại bước 5 của chuỗi sự kiện chính

thành công

Chuỗi sự kiện chính

1 Khách hàng chọn tìm kiếm trên trang chủ

2 Hé thong hiện thị giao diện tìm kiêm

3 Khách chọn thông tin sản phẩm muốn tìm kiếm Gồm tên, loại sản phẩm,

vị trí cửa hàng, khoảng giá, độ đánh giá của sản phẩm

4 Hệ thông hiện các sản phâm theo thông tin khách đã chọn

có quyền quản lý thông tin tài khoản, đăng nhập Khách hàng, có tất cả quyền của Người dùng, có quyền thanh toán những sản phẩm trong giỏ hàng, quản lý đơn hàng đã mua, đánh giá giá sản phẩm đã mua, tạo cửa hàng Quản trị viên, có tất cả quyền của Người dùng, có quyền quản lý loại sản phẩm, thống kê doanh thu tất cả cửa hàng, thống kê chỉ tiêu của khách hàng Người bán, có tất cả quyền của Người dùng, có quyền quản lý đơn hàng, quản lý sản phẩm, thống kê doanh thu cửa hàng, thống kê số lượng đơn hàng cửa hàng, quản lý thông tin của cửa hàng

* Trích xuất danh từ

viên, Người bán

* _ Danh từ liên quan đến thông tin: hệ thống, web sàn thương mại điện tử, tài khoản, quyền, sản phẩm, giỏ hàng, loại sản phẩm, giá, cửa hàng, vị trí cửa hàng, đanh sách yêu thích, đơn hàng

* Đánh giá, lựa chọn danh từ, xác định lớp thực thể hoặc thuộc tính

* _ Danh từ trừu tượng: hệ thống, web sàn thương mại điện tử

* - Danh từ liên quan đến người:

VỊ trí: là thông tin của lớp Store

Danh sách yêu thích -> lớp WIshLst

Don hang-> lop Order

Sản phâm của đơn hàng -> lớp OrderDetail

Thống kê chỉ tiêu của khách hàng -> lớp CustomerStat

Thống kê doanh thu cửa hàng, thống kê số lượng đơn hàng cửa hàng -> lớp StoreStat

* Quan hệ số lượng giữa các thực thể

+ 1 User sẽ có nhiều Role, 1 Role có thể của nhiều User Nên quan hệ User-Role là n-

n Nên chúng ta sẽ tạo thêm I lớp giữa chúng là User_Role