TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN THỰC PHẨM BỔ SUNG

CHO NGƯỜI CHƠI THỂ THAO

Sinh viên thực hiện : PHAN BÁ HIẾU

Giảng viên hướng dẫn : TS. LÊ THỊ TRANG LINH
Ngành : CÔNG NGHỆ THÔNG TIN
Chuyên ngành : CÔNG NGHỆ PHẦN MỀM
Lớp : D13CNPM2
Khóa : 2018-2023
Hà Nội, tháng 10 năm 2022
 PHIẾU CHẤM ĐIỂM

Họ và tên sinh viên Nội dung thực hiện Chữ ký

Phan Bá Hiếu

Họ và tên giảng viên Điểm Ghi chú

Giảng viên chấm 1

(Ký và ghi rõ họ tên)

Giảng viên chấm 2

(Ký và ghi rõ họ tên)
 MỤC LỤC
DANH MỤC HÌNH ẢNH...........................................................................................
DANH MỤC BẢNG BIỂU.........................................................................................
LỜI NÓI ĐẦU.............................................................................................................
CHƯƠNG 1: TỔNG QUAN ĐÈ TÀI......................................................................10
1.1 Lý do chọn đề tài......................................................................................10
1.2 Mục tiêu và những yêu cầu khi xây dựng website.........................................10
1.2.1 Mục tiêu khi xây dựng hệ thống.............................................................10
1.2.2 Những yêu cầu đặt ra cho hệ thống.........................................................11
1.2.3 Hoạt động của hệ thống...........................................................................11
1.2 Phương pháp giải quyết............................................................................11
2.1 Biểu đồ usecase..............................................................................................12
2.1.1 Biểu đồ usecase tổng quát.......................................................................12
2.1.2 Biểu đồ usecase đăng nhập.....................................................................13
2.1.3 Biểu đồ usecase khách hàng....................................................................13
2.2 Đặc tả usecase................................................................................................16
2.2.1 Đăng nhập...............................................................................................16
2.2.2 Đăng xuất................................................................................................17
2.2.3 Đăng ký...................................................................................................18
2.2.4 Tìm kiếm sản phẩm.................................................................................18
2.2.5 Xem chi tiết sản phẩm.............................................................................18
2.2.6 Giỏ hàng..................................................................................................10
2.2.7 Quản lý sản phẩm....................................................................................11
2.2.8 Quản lý đơn đặt hàng..............................................................................11
2.2.9 Quản lý khách hàng.................................................................................12
2.2.10 Thống kê................................................................................................12
2.3 Biểu đồ hoạt động..........................................................................................14
2.3.1 Biểu đồ hoạt động đăng nhập..................................................................14
2.3.2 Biểu đồ hoạt động đăng ký.....................................................................16
 2.3.3 Biểu đồ hoạt động tìm kiếm sản phẩm....................................................18
2.3.4 Biểu đồ hoạt động xem chi tiết sản phẩm..............................................19
2.3.5 Biểu đồ hoạt động đặt hàng.....................................................................20
2.4 Biểu đồ trình tự..............................................................................................22
2.4.1 Biểu đồ trình tự đăng nhập......................................................................22
2.4.2 Biểu đồ trình tự đăng xuất hệ thống........................................................23
2.4.3 Biểu đồ trình tự quản lý khách hàng.......................................................24
2.4.4 Biểu đồ trình tự quản lý sản phẩm..........................................................25
CHƯƠNG 3: THIẾT KẾ.........................................................................................26
3.1 Thiết kế cơ sở dữ liệu.....................................................................................26
3.2 Sơ đồ thực thể liên kết....................................................................................29
3.3 Giao diện website...........................................................................................30
3.3.1 Giao diện trang chủ.................................................................................30
3.3.2 Giao diện trang đăng ký..........................................................................31
3.3.3 Giao diện trang đăng nhập...................................................................31
3.3.4 Giao diện trang chi tiết sản phẩm.........................................................32
3.3.5 Giao diện trang giỏ hàng.........................................................................33
3.3.6 Giao diện trang đặt hàng......................................................................33
CHƯƠNG 4: TRIỂN KHAI GIẢI PHÁP................................................................34
4.1 ReactJS.......................................................................................................34
4.2 NodeJS.................................................................................................36
4.3 MongoDB...................................................................................................37
KẾT LUẬN..............................................................................................................40
TÀI LIỆU THAM KHẢO........................................................................................41
 DANH MỤC HÌNH ẢNH

HÌNH 2.1.1 BIỂU ĐỒ USECASE TỔNG QUÁT...................................................12

HÌNH 2.1.2 BIỂU ĐỒ USECASE ĐĂNG NHẬP..................................................13
HÌNH 2.2.2 BIỂU ĐỒ USECASE KHÁCH HÀNG...............................................14
HÌNH 2.1.4.1 BIỂU ĐỒ USECASE CA SỬ DỤNG QUẢN LÝ SẢN PHẨM......14
HÌNH 2.1.4.2 BIỂU ĐỒ USECASE CA SỬ DỤNG QUẢN LÝ KHÁCH HÀNG14
HÌNH 2.1.4.3 BIỂU ĐỒ USECASE CA SỬ DỤNG QUẢN LÝ BLOG................15
HÌNH 2.1.4.4 BIỂU ĐỒ USECASE CA SỬ DỤNG QUẢN LÝ ĐƠN ĐẶT HÀNG
..........................................................................................................................................16
HÌNH 2.1.4.5 BIỂU ĐỒ USECASE CA SỬ DỤNG THỐNG KÊ.........................16
HÌNH 2.3.1 BIỂU ĐỒ HOẠT ĐỘNG ĐĂNG NHẬP.............................................14
HÌNH 2.3.2 BIỂU ĐỒ HOẠT ĐỘNG ĐĂNG KÝ..................................................16
HÌNH 2.3.3 BIỂU ĐỒ HOẠT ĐỘNG TÌM KIẾM SẢN PHẨM............................18
HÌNH 2.3.4 BIỂU ĐỒ HOẠT ĐỘNG XEM CHI TIẾT SẢN PHẨM....................19
HÌNH 2.3.5 BIỂU ĐỒ HOẠT ĐỘNG ĐẶT HÀNG...............................................20
HÌNH 2.4.1 BIỂU ĐỒ TRÌNH TỰ ĐĂNG NHẬP.................................................22
HÌNH 2.4.2 BIỂU ĐỒ TRÌNH TỰ ĐĂNG XUẤT.................................................23
HÌNH 2.4.3 BIỂU ĐỒ TRÌNH TỰ QUẢN LÝ KHÁCH HÀNG...........................24
HÌNH 2.4.4 BIỂU ĐỒ TRÌNH TỰ QUẢN LÝ SẢN PHẨM.................................25
HÌNH 3.2.1 SƠ ĐỒ THỰC THỂ LIÊN KẾT..........................................................29
HÌNH 3.3.1 GIAO DIỆN TRANG CHỦ.................................................................30
HÌNH 3.3.2 GIAO DIỆN TRANG ĐĂNG KÝ.......................................................31
HÌNH 3.3.3 GIAO DIỆN TRANG ĐĂNG NHẬP..................................................31
HÌNH 3.3.4 GIAO DIỆN TRANG CHI TIẾT SẢN PHẨM...................................32
HÌNH 3.3.5 GIAO DIỆN TRANG GIỎ HÀNG......................................................33
Hình 3.3.6 Giao diện trang đặt hàng........................................................................33
 DANH MỤC BẢNG BIỂU
BẢNG 2.3.1 CÁC TRƯỜNG HỢP DỮ LIỆU KHÔNG HỢP LỆ HOẠT ĐỘNG
ĐĂNG NHẬP..................................................................................................................15
BẢNG 2.3.2 CÁC TRƯỜNG HỢP DỮ LIỆU KHÔNG HỢP LỆ HOẠT ĐỘNG
ĐĂNG KÝ.......................................................................................................................17
BẢNG 2.3.5 CÁC TRƯỜNG HỢP DỮ LIỆU KHÔNG HỢP LỆ HOẠT ĐỘNG
ĐẶT HÀNG.....................................................................................................................21
BẢNG 3.1.1 BẢNG PRODUCT.............................................................................26
BẢNG 3.1.2 BẢNG PRODUCTS...........................................................................26
BẢNG 3.1.3 BẢNG USER......................................................................................27
BẢNG 3.1.4 BẢNG BLOG.....................................................................................27
BẢNG 3.1.5 BẢNG KHÁCH HÀNG.....................................................................28
BẢNG 3.1.6 BẢNG ORDER..................................................................................28
Bảng 3.1.7 Bảng Admin...........................................................................................29
 LỜI NÓI ĐẦU
Ngày nay song song với sự phát triển của khoa học kĩ thuật,công nghệ thông tin
cũng phát triển và giữ vai trò quan trọng trong cuộc sống của chúng ta, ngành công nghệ
thông tin đã đạt được những kết quả cao, việc phát triển và ứng dụng công nghệ thông
tin đã có bước chuyển biến đáng kể. Tin học đã thâm nhập sâu vào hầu hết tất cả các
lĩnh vực của xã hội và đặc biệt với nhiều ứng dụng to lớn trong các hệ thống quản lý của
các công ty, nhà trường, ngân hàng... bởi tính chính xác và nhanh gọn.

Đặc biệt trong thời buổi kinh tế thị trường thì kinh doanh online chính là kênh bán
lẻ hiệu quả nhất. Nó đã dần trở thành quen thuộc với người dân, nó trở thành thói quen
mua sắm và là tiêu chí sử dụng hàng đầu của người tiêu dùng. Từ những con số thống kê
cụ thể, website bán hàng cùng với một hệ thống quản lý sẽ hổ trợ cho các nhà quản lý
chủ động hơn trong vấn đề quản lý hàng hóa, đưa ra phương án khuyến mãi xử lý hàng
tồn kho và các chiến lược kinh doanh hiệu quả thu hút người tiêu dùng. Từ những khảo
sát và hiểu biết ban đầu em đã quyết định tìm hiểu đề tài thiết kế website bán hàng.

Với sự hướng dẫn và chỉ bảo tận tình của TS. Lê Thị Trang Linh cùng với sự cố
gắng của bản thân, em đã cố gắng hoàn thành đề tài. Em xin chân thành cảm ơn cô giáo
đã giúp đỡ em hoàn thành đề tài này.

Tên đề tài: “Xây dựng website bán thực phẩm bổ sung dành cho người chơi thể
thao”.

Nội dung báo cáo bao gồm 04 chương:

Chương 1: Tổng quan về đề tài

Chương 2:.Phân tích hệ thống

Chương 3: Thiết kế

Chương 4: Triển khai giải pháp

 CHƯƠNG 1: TỔNG QUAN ĐÈ TÀI
1.1 Lý do chọn đề tài
Internet là cơ sở hạ tầng quan trọng của quốc gia. Khi mới xuất hiện ở Việt Nam,
internet được coi là công nghệ mới. 5 năm sau đó là nơi kinh doanh mang lại lợi nhuận
cho doanh nghiệp. Còn hiện nay internet nói riêng và công nghệ thông tin nói chung là
hạ tầng thúc đẩy mọi mặt kinh tế của xã hội.
Những lợi ích mà website mang lại:
- Cơ hội quảng bá không giới hạn, mở cửa trao đổi thông tin 24h/ngày.
- Tạo ra hình ảnh của 1 CLB được tổ chức khoa học và hiệu quả.
- Phương tiện tốt nhất để bạn tiếp thị sản phẩm dịch vụ và hình ảnh của mình theo
một hình thức mới và hiện đại nhất.
Khi mà công nghệ thông tin đang phát triển và luôn được nhắc đến ở tất cả các
phương tiện truyền thông thì mọi ngành nghề đều chịu tác động ít nhiều của công nghệ
thông tin trong đó hoạt động kinh doanh online ngày càng phát triển mạnh mẽ.
Mặc dù trên thế giới việc giới thiệu quảng bá hình ảnh qua mạng internet diễn ra
rộng rãi và phổ biến thì nước ta chỉ dừng lại ở một số công ty doanh nghiệp lớn còn
những cửa hàng kinh doanh nhỏ lẻ vẫn chưa có một website chính thức để đáp ứng nhu
cầu
Hiểu rõ vấn đề và nhằm đáp ứng nhu cầu tìm hiều trao đổi thông tin và quảng bá
hình ảnh sản phẩm bổ sung cho người chơi thể thao một cách dễ dàng và khoa học em
xin đưa ra giải pháp thiết kế website hỗ trợ và quản lý.
1.2 1.2 Mục tiêu và những yêu cầu khi xây dựng website
1.2.1 Mục tiêu khi xây dựng hệ thống
- Đáp ứng nhu cầu thị trường
- Thông tin sản phẩm luôn được cập nhật đáp ứng nhu cầu của người mua
- Hỗ trợ tư vấn người mua sản phẩm
 - Tiết kiệm được chi phí và thời gian
1.2.2 Những yêu cầu đặt ra cho hệ thống
- Màu sắc bắt mắt phù hợp với lĩnh vực quảng cáo giới thiệu marketing
- Dễ sử dụng cho khách hàng
- Hỗ trợ quản trị viên quản lý tốt website
1.2.3 Hoạt động của hệ thống
Gồm 2 hoạt động chính:
- Hoạt động của khách hàng:
+ Đăng ký là thành viên
+ Đặt mua sản phẩm qua website
- Hoạt động của quản lý
+ Giới thiệu sản phẩm: quản trị viên sẽ cung cấp thông tin các sản phẩm cho khách
hàng
+ Quản lý các đơn hàng, sản phẩm
1.2 Phương pháp giải quyết
Từ những mục tiêu và yêu cầu đặt ra em xin đưa ra phương pháp giải quyết
- Tìm hiểu ngôn ngữ lập trình và các dạng cơ sở dữ liệu để đưa ra phương pháp giải
quyết phù hợp
- Tiến hành viết giao diện website chức năng của khách hàng và người quản lý
- Chạy thử và kiểm tra khắc phục lỗi nếu có
 CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG

2.1 Biểu đồ usecase

2.1.1 Biểu đồ usecase tổng quát

Hình 2.1.1 Biểu đồ usecase tổng quát

2.1.2 Biểu đồ usecase đăng nhập

Hình 2.1.2 Biểu đồ usecase đăng nhập

2.1.3 Biểu đồ usecase khách hàng

Hình 2.2.2 Biểu đồ usecase khách hàng

2.1.4 Biểu đồ usecase quản lý
 Ca sử dụng Quản lý sản phẩm

Hình 2.1.4.1 Biểu đồ usecase ca sử dụng quản lý sản phẩm

 Ca sử dụng Quản lý khách hàng

Hình 2.1.4.2 Biểu đồ usecase ca sử dụng quản lý khách hàng

 Ca sử dụng Quản lý blog

Hình 2.1.4.3 Biểu đồ usecase ca sử dụng quản lý blog

  Ca sử dụng Quản lý đơn đặt hàng

Hình 2.1.4.4 Biểu đồ usecase ca sử dụng quản lý đơn đặt hàng

 Ca sử dụng Thống kê

Hình 2.1.4.5 Biểu đồ usecase ca sử dụng thống kê

2.2 Đặc tả usecase
2.2.1 Đăng nhập
Tác nhân chính: Khách hàng, quản trị viên.
Tiền điều kiện: Khách hàng và quản trị viên phải có tài khoản (user name) và mật
khẩu (password) riêng được hệ thống cấp trước đó.
Hậu điều kiện: Người dùng đăng nhập được vào website.
 Kích hoạt: Người dùng chọn đăng nhập.
Luồng sự kiện chính cho usecase đăng nhập:
1. Người dùng chọn chức năng Login trên website.
2. Website hiển thị form đăng nhập.
3. Người dùng nhập tài khoản và mật khẩu.
Website tiến hành nhận và so sánh tài khoản và mật khẩu với cơ sở dữ liệu, nếu
việc đăng nhập thành công thì thiết lập phiên đăng nhập cho người dùng, hiển thị những
chức năng họ được sử dụng. Nếu người dùng nhập sai tên, mật khẩu thì chuyển sang
luồng rẽ nhánh A1.
Luồng rẽ nhánh A1:
Người dùng đăng nhập không thành công.
Website thông báo quá trình đăng nhập không thành công
Chọn đăng nhập lại.
Website yêu cầu người dùng nhập lại tên và mật khẩu .
Nếu người dùng đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không
đồng ý thì UC kết thúc
2.2.2 Đăng xuất
Tác nhân chính: Khách hàng, quản trị viên.
Tiền điều kiện: Khách hàng đã đăng nhập thành công.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Người dùng chọn đăng xuất.
Luồng sự kiện chính cho usecase đăng xuất:
1. Người dùng chọn Đăng xuất.

2. Website nhận yêu cầu, xác nhận phiên đăng nhập và đóng phiên đăng nhập đó,
trả lại trang dành cho người dùng.
 2.2.3 Đăng ký
Tác nhân chính: Khách hàng, quản trị viên.
Tiền điều kiện: Khách hàng muốn đăng ký làm thành viên.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Chọn đăng ký.
Luồng sự kiện chính cho usecase đăng xuất:
1. Người dùng chọn đăng ký.
2. Người dùng nhập thông tin đăng ký.
3. Sau khi đăng ký xong chọn nút xác nhận.
2.2.4 Tìm kiếm sản phẩm
Tác nhân chính: Khách hàng, Thành viên.
Tiền điều kiện: Dành cho khách hàng tìm kiếm sản phẩm.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Chọn tìm kiếm.
Luồng sự kiện chính cho usecase tìm kiếm sản phẩm:
1. Người dùng chọn ô tìm kiếm.
2. Người dùng chọn sản phẩm muốn tìm và nhấn nút tìm kiếm.
3. Website sẽ tiến hành kiểm tra CSDL theo từ khóa người dùng nhập và
sẽ hiển thị ra kết quả hoặc không có sản phẩm nào giống từ khóa, liên
quan đến từ khóa.
2.2.5 Xem chi tiết sản phẩm
Tác nhân chính: Khách hàng.
Tiền điều kiện: Dành cho khách hàng muốn xem chi tiết một sản phẩm.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Chọn vào sản phẩm muốn xem.
9
 Luồng sự kiện chính cho usecase xem chi tiết sản phẩm:
1. Người dùng chọn vào tìm kiếm sản phẩm hoặc chọn luôn sản phẩm cần
xem.
2. Website sẽ tiến hành kiểm tra trong CSDL theo từ khóa người dùng
nhập vào nếu có sẽ trả về mặt hàng sản phẩm cần xem hoặc không có
sản phẩm nào liên quan từ khóa.
2.2.6 Giỏ hàng
Tác nhân chính: Thành viên, khách hàng.
Tiền điều kiện:
Thành viên đã đăng nhập vào hệ thống.
Giúp thành viên thêm, sửa, xóa và đặt các sản phẩm.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Người dùng chọn vào phần giỏ hàng.
Luồng sự kiện chính cho usecase giỏ hàng:
1. Thành viên phải đăng nhập vào hệ thống.
2. Chọn sản phẩm mà thành viên muốn mua hàng.
3. Trong giỏ hàng thành viên có thể thêm, sửa, xóa hay đặt hàng.
4. Website sẽ kiểm tra thông tin đăng nhập thành viên sau đó sẽ lưu và cập
nhật giỏ hàng, lưu thông tin đơn hàng vào CSDL.

10
 2.2.7 Quản lý sản phẩm
Tác nhân chính: Quản trị viên.
- Tiền điều kiện:
1. Người dùng đăng nhập vào hệ thống có quyền quản trị.
2. Giúp thêm, sửa hay xóa tìm kiếm sản phẩm.
Hậu điều kiện: Người dùng thoát khỏi website.
Kích hoạt: Người dùng chọn vào phần quản lý sản phẩm.
Luồng sự kiện chính cho usecase quản lý sản phẩm:
1. Người dùng chọn phần quản lý sản phẩm.
2. Chọn thêm, sửa, xóa hay tìm kiếm sản phẩm. Điền thông tin chính xác
vào các trường với chức năng thêm và sửa.
3. Hệ thống sẽ kiểm tra thông tin của quản trị viên. Lưu hoặc cập nhật lại
sản phẩm trong CSDL, tìm kiếm sản phẩm theo từ khóa nhập.
4. Show ra danh sách quản lý sản phẩm theo yêu cầu.
2.2.8 Quản lý đơn đặt hàng
- Tác nhân chính: Quản trị viên.
- Tiền điều kiện:
1. Người dùng đăng nhập vào hệ thống có quyền quản trị.
2. Người dùng cập nhật trạng thái và quản lý các đơn hàng.
- Hậu điều kiện: Người dùng thoát khỏi website.
- Kích hoạt: Người dùng chọn phần quản lý đơn đặt hàng.

11
- Luồng sự kiện chính cho usecase quản lý đơn đặt hàng:
1. Người dùng chọn sửa, xem chi tiết tìm kiếm hay xuất đơn hàng.
2. Hệ thống sẽ kiểm tra thông tin của quản trị viên, cập nhật hoặc hiện chi
tiết đơn hàng trong CSDL. Tìm kiếm đơn hàng theo từ khóa đã nhập,
xuất file đơn hàng khi có yêu cầu.
3. Show danh sách quản lý đơn hàng theo yêu cầu.
2.2.9 Quản lý khách hàng
- Tác nhân chính: Quản trị viên.
- Tiền điều kiện:
1. Người dùng đăng nhập vào hệ thống có quyền quản trị.
2. Người dùng quản lý các khách hàng.
- Hậu điều kiện: Người dùng thoát khỏi website.
- Kích hoạt: Người dùng chọn phần quản lý khách hàng.
- Luồng sự kiện chính cho usecase quản lý khách hàng:
1. Người dùng chọn chức năng cần thực hiện tại trang quản lý khách
hàng.
2. Người dùng lấy thông tin nợ của khách hàng trong CSDL với chức
năng xóa, thêm, sửa.
3. Show trang danh sách khách hàng theo yêu cầu.
2.2.10 Thống kê
- Tác nhân chính: Quản trị viên.
- Tiền điều kiện:

12
 1. Người dùng đăng nhập vào hệ thống có quyền quản trị.
2. Người dùng quản lý thống kê doanh thu.
- Hậu điều kiện: Người dùng thoát khỏi website.
- Kích hoạt: Người dùng chọn phần quản lý thống kê .
- Luồng sự kiện chính cho usecase quản lý sự kiện:
1. Người dùng quản lý được thống kê doanh thu, trạng thái đơn hàng,
thống kê nhập xuất kho.
2. Hệ thống sẽ tạo các thống kê cho người dùng.
3. Load và show ra danh sách trên màn hình

13
 2.3 Biểu đồ hoạt động
2.3.1 Biểu đồ hoạt động đăng nhập

Hình 2.3.1 Biểu đồ hoạt động đăng nhập

 Mô tả hoạt động:

Bước 1: Người dùng gửi yêu cầu đăng nhập vào hệ thống bằng cách click vào
nút “Đăng nhập”
Bước 2: Màn hình hiển thị giao diện đăng nhập
Bước 3: Người dùng nhập vào tài khoản và mật khẩu

14
 Bước 4: Hệ thống kiểm tra tính hợp lệ của dữ liệu đầu vào:
- Dữ liệu hợp lệ  Chuyển sang Bước 5
- Dữ liệu không hợp lệ  Chuyển sang bước 3
Bảng 2.3.1 Các trường hợp dữ liệu không hợp lệ hoạt động đăng nhập

Dữ liệu không hợp lệ Thông báo hệ thống

Tài khoản chứa khoảng trắng Tài khoản không được chứa khoảng
trắng

Mật khẩu chứa khoảng trắng Mật khẩu không được chứa khoảng trắng

Tài khoản ít hơn 3 kí tự Tài khoản tối thiểu 3 kí tự

Tài khoản nhiều hơn 50 kí tự Tài khoản tối đa 50 kí tự

Mật khẩu ít hơn 6 kí tự Mật khẩu tối thiểu 6 kí tự

Mật khẩu nhiều hơn 30 kí tự Mật khẩu tối đa 30 kí tự

Bước 5: Hệ thống kiểm tra thông tin đăng nhập trong CSDL:
- Nếu dữ liệu tồn tại trong CSDL  Chuyển sang Bước 6
- Nếu dữ liệu không tồn tại trong CSDL  thông báo “Sai tên tài khoản hoặc
mật khẩu” và trở lại Bước 3
Bước 6: Cấp quyền đăng nhập cho người dùng

15
 2.3.2 Biểu đồ hoạt động đăng ký

Hình 2.3.2 Biểu đồ hoạt động đăng ký

 Mô tả hoạt động:
Bước 1: Người dùng gửi yêu cầu đăng ký tài khoản bằng cách click vào nút “Đăng ký”
Bước 2: Màn hình đăng ký hiển thị
Bước 3: Người dùng nhập thông tin tài khoản và mật khẩu
Bước 4: Hệ thống kiểm tra thông tin người dùng nhập với cơ sở dữ liệu:
- Dữ liệu hợp lệ thì chuyển sang bước 5
 Dữ liệu không hợp lệ thì quay lại bước 3 và đưa ra thông báo “Tên tài khoản đã được đăng
ký vui lòng đăng nhập hoặc đăng ký tên tài khoản mới”
Bảng 2.3.2 Các trường hợp dữ liệu không hợp lệ hoạt động đăng ký
Dữ liệu không hợp lệ Thông báo hệ thống
Tài khoản chứa khoảng trắng Tài khoản không được chứa khoảng
trắng
Mật khẩu chứa khoảng trắng Mật khẩu không được chứa khoảng
trắng
Tài khoản ít hơn 3 kí tự Tài khoản tối thiểu 3 kí tự
Tài khoản nhiều hơn 50 kí tự Tài khoản tối đa 50 kí tự
Mật khẩu ít hơn 6 kí tự Mật khẩu tối thiểu 6 kí tự
Mật khẩu nhiều hơn 30 kí tự Mật khẩu tối đa 30 kí tự

Bước 5: Chuyển người dùng tới Trang chủ

 2.3.3 Biểu đồ hoạt động tìm kiếm sản phẩm

Hình 2.3.3 Biểu đồ hoạt động tìm kiếm sản phẩm

 Mô tả hoạt động:
Bước 1: Người dùng nhập từ khóa tìm kiếm
Bước 2: Hệ thống lấy ra danh sách sản phẩm và đối chiếu với từ khóa người dùng nhập vào
và đưa ra kết quả
Bước 3: Hiển thị kết quả ra màn hình
 2.3.4 Biểu đồ hoạt động xem chi tiết sản phẩm

Hình 2.3.4 Biểu đồ hoạt động xem chi tiết sản phẩm
 Mô tả hoạt động:
Bước 1: Người dùng chọn sản phẩm cần xem chi tiết
Bước 2: Hệ thống lấy dữ liệu và trả về kết quả
Bước 3: Hiển thị kết quả lên màn hình
 2.3.5 Biểu đồ hoạt động đặt hàng

Hình 2.3.5 Biểu đồ hoạt động đặt hàng

 Mô tả hoạt động:
Bước 1: Người dùng muốn đặt hàng thì click vào nút “Đặt hàng”
Bước 2: Nhập các thông tin cần thiết như họ tên, số điện thoại, địa chỉ,…
Bước 3: Hệ thống kiểm tra thông tin nhập vào
Nếu hợp lệ chuyển sang bước 4
Nếu không hợp lệ chuyển về bước 2 và đưa ra thông báo
 Bảng 2.3.5 Các trường hợp dữ liệu không hợp lệ hoạt động đặt hàng
Dữ liệu không hợp lệ Thông báo hệ thống
Các ô dữ liệu để trống Vui lòng không bỏ trống ô này

Bước 4: Hệ thống tạo đơn hàng và lưu vào cơ sở dữ liệu

Bước 5: Hiển thị lên màn hình kết quả và đưa ra thông báo “Bạn đã đặt hàng thành công.
Chúng tôi sẽ liên hệ trong 24h để xác nhận đơn hàng”
2.4 Biểu đồ trình tự
2.4.1 Biểu đồ trình tự đăng nhập

: :
Form :
Form : : :
DangNhap
Admin : DangNhap ManHinh TaiKhoan
NhanVienQuanLy

1: chon dang nhap

2: hien thi form dang nhap

3: nhap thong tin dang nhap

4: gui thong tin

5: truy van

6: tra ve ket qua

7: xac nhan thong tin

8: tra ve ket qua

Hình 2.4.1 Biểu đồ trình tự đăng nhập

2.4.2 Biểu đồ trình tự đăng xuất hệ thống

Hình 2.4.2 Biểu đồ trình tự đăng xuất

2.4.3 Biểu đồ trình tự quản lý khách hàng

Form : Form Form : : :

DangNhap : KhachHang
Hình 2.4.3 Biểu đồ trình tự quản lý khách hàng
QLKha...

2.4.4 Biểu đồ trình tự quản lý sản phẩm

Hình 2.4.4 Biểu đồ trình tự quản lý sản phẩm
 CHƯƠNG 3: THIẾT KẾ
3.1 Thiết kế cơ sở dữ liệu
- Bảng Product
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

1 id string Mã sản phẩm

x

2 Name String Tên

3 Type String Loại

4 salePrice String Giá bán

5 entryPrice string Giá nhập

6 description string Mô tả

7 Image String Hình ảnh

8 created_at date Ngày tạo

9 updated_at date Ngày cập

nhật

10 x Admin_id string Người thêm

sản phẩm

Bảng 3.1.1 Bảng Product

- Bảng Products
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

1 id string id
x

2 type string Loại

3 x product string Sản phẩm

Bảng 3.1.2 Bảng Products

 - Bảng User
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

id string id
x
username string Tên đăng nhập

Password string Mật khẩu

fullName String Tên đầy đủ

Address String Địa chỉ

Phone String Số điện thoại

Gender string Giới tính

Image String ảnh đại diện

Bảng 3.1.3 Bảng User

- Bảng Blog
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

1 id string id
x
2 title string Tên bài viết

3 description string Nội dung bài

viết
4 image String Hình ảnh mô
tả
5 x name string Tên người viết

Bảng 3.1.4 Bảng Blog

-Bảng Customer
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

1 id string id
x
2 name string Tên

3 Gender String Giới tính

4 phone string Điện thoại

5 Email String email

6 address String Địa chỉ

 7 Number_of_purch number Số lần mua
ases hàng
Customer_type string Loại khách
hàng
Bảng 3.1.5 Bảng khách hàng
- Bảng Order
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải
1 id String Mã đơn đặt hàng
x
2 x product_id string Mã sản phẩm

3 x User_id string mã khách hàng

4 sale string Giảm giá

5 qty int Số lượng

6 price string Giá bán

7 created_at date Ngày tạo

8 updated_at date Ngàycập nhật

9 Admin_id string Người lập đơn

Bảng 3.1.6 Bảng Order

- Bảng Admin
STT Khóa chính Khóa ngoại Tên trường Kiểu dữ liệu Diễn giải

id string id
x
username string Tên đăng nhập

Password string Mật khẩu

fullName String Tên đầy đủ

Address String Địa chỉ

Phone String Số điện thoại

Gender string Giới tính

Image String ảnh đại diện

Bảng 3.1.7 Bảng Admin

3.2 Sơ đồ thực thể liên kết
Hình 3.2.1 Sơ đồ thực thể liên kết
3.3 Giao diện website
3.3.1 Giao diện trang chủ

Hình 3.3.1 Giao diện trang chủ

3.3.2 Giao diện trang đăng ký

Hình 3.3.2 Giao diện trang đăng ký

3.3.3 Giao diện trang đăng nhập

Hình 3.3.3 Giao diện trang đăng nhập

3.3.4 Giao diện trang chi tiết sản phẩm

Hình 3.3.4 Giao diện trang chi tiết sản phẩm

3.3.5 Giao diện trang giỏ hàng

Hình 3.3.5 Giao diện trang giỏ hàng

3.3.6 Giao diện trang đặt hàng

Hình 3.3.6 Giao diện trang đặt hàng

 CHƯƠNG 4: TRIỂN KHAI GIẢI PHÁP
4.1 ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi
Facebook, ra mắt vào năm 2013 với mục đích để xây dựng giao diện người
dùng. Nó được sử dụng rộng rãi để xây dựng các trang web SPA (Single Page
Application) và các ứng dụng trên nền tảng di động. Nó rất dễ sử dụng và cho
phép người dùng có thể tạo các component UI có thể tái sử dụng.
 Những tính năng của ReactJS
ReactJS có các tính năng hết sức nổi bật bao gồm:
JSX: viết tắt của JavaScript extension, nó là React extension , giúp cho
việc thay đổi cây DOM dễ dàng hơn bằng HTML-style code đơn giản. Nó là
một trong những tính năng tốt và dễ sử dụng.
Components: Một trang web được xây dựng bằng ReactJS là một sự kết
hợp nhiều component lại với nhau chứ không phải chung một Template như
bình thường. Các component cũng như các hàm JavaScript bình thường, giúp
tạo ra các code dễ dàng bằng cách tách các logic ra thành các đoạn code độc lập
có thể tái sử dụng. Chúng ta có thể sử dụng component dưới dạng function hoặc
class, ngoài ra các component còn có state và props.
Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo). Đúng
như tên gọi, nó là một copy của DOM thật trên trang web đó. ReactJS dùng
những DOM ảo đó để tìm đúng những DOM thật cần được cập nhật khi có bất
kỳ sự kiện nào làm các thành phần bên trong nó thay đổi.
Javascript Expressions: Biểu thức JS có thể sử dụng trong file .jsx
hoặc .js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”.
  Ưu điểm của ReactJS:
• Vì ReactJS sử dụng DOM ảo để cache cấu trúc dữ liệu trong bộ nhớ và
chỉ những thay đổi cuối cùng mới được cập nhật vào trong DOM trình duyệt.
Điều này làm cho ứng dụng trở nên nhanh hơn.
• Bạn có thể tạo các component theo từng chức năng mà bạn muốn bằng
cách sử dụng tính năng react component. Các component này có thể tái sử
dụng theo nhu cầu của bạn, đồng thời việc tạo các component theo từng chức
năng cũng giúp cho việc bảo trì sau này trở nên dễ dàng hơn.
• ReactJS là một opensource, vì vậy cũng rất dễ cho những bạn mới bắt
đầu tìm hiểu nó.
• Trong những năm gần đây, ReactJS đang trở nên phổ biến hơn và được
duy trì bởi Facebook và Instagram. Ngoài ra nó cũng được sử dụng bởi các
công ty nổi tiếng như Apple, Netflix, …
• Facebook vẫn đang duy trì, phát triển, và cho ra những thay đổi mới. Vì
thế bạn cứ yên tâm sử dụng ReactJS cho những dự án của bạn hoặc những dự án
dành do doanh nghiệp.
• ReactJS có thể được sử dụng để xây dựng giao diện người dùng cho cả
các ứng dụng dành cho máy tính và các ứng dụng di động.
• Dễ dàng cho việc test và debug, vì hầu hết các code đều được thực hiện
bằng JavaScript chứ không phải bằng HTML.
 Nhược điểm của ReactJS
• Vì hầu hết code được viết dưới dạng JSX, tức là HTML và CSS là một
phần của JavaScript, nó không giống như những framework khác vẫn tách biệt
giữa HTML và CSS nên những bạn mới làm quen với ReactJS sẽ hơi lúng túng
và dễ nhầm lẫn giữa JSX và HTML. Tuy nhiên bạn sẽ nhanh chóng quen với
cách kết hợp này của React mà thôi.
• Một nhược điểm nữa của ReactJS đó là dung lượng các file của nó hơi
lớn.
4.2 NodeJS
Nodejs là một nền tảng được phát triển độc lập trên V8 JavaScript Engine –
trình thông thực thi mã JavaScript. Nhờ Nodejs mà việc xây dựng các ứng dụng
Web trở nên đơn giản và dễ dàng hơn rất nhiều. Ngoài ra, Nodejs còn được biết
tới là một mã nguồn mở và là một môi trường cho các máy chủ và ứng dụng
mạng.
Ưu điểm của Nodejs
Dưới đây là những ưu điểm của Nodejs:
Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn
có thể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất.
Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.
Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử
lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất
nhiều.
Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất.
Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng
chat, mạng xã hội …
Nhược điểm của Nodejs
Nodejs gây hao tốn tài nguyên và thời gian. Nodejs được viết bằng C++ và
JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch. Nếu bạn cần
xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs.
Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự
chênh lệch quá nhiều. Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng
mới. Tuy nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs không
phải là sự lựa chọn hoàn hảo nhất.
4.3 MongoDB
 MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu
NoSQL(*) hàng đầu, được hàng triệu người sử dụng. MongoDB được viết bằng
C++.
Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các
khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng
cao và khả năng mở rộng dễ dàng.
Các thuật ngữ hay sử dụng trong MongoDB
_id – Là trường bắt buộc có trong mỗi document. Trường _id đại diện cho
một giá trị duy nhất trong document MongoDB. Trường _id cũng có thể được
hiểu là khóa chính trong document. Nếu bạn thêm mới một document thì
MongoDB sẽ tự động sinh ra một _id đại diện cho document đó và là duy nhất
trong cơ sở dữ liệu MongoDB.
Collection – Là nhóm của nhiều document trong MongoDB. Collection có
thể được hiểu là một bảng tương ứng trong cơ sở dữ liệu RDBMS (Relational
Database Management System). Collection nằm trong một cơ sở dữ liệu duy
nhất. Các collection không phải định nghĩa các cột, các hàng hay kiểu dữ liệu
trước.
Cursor – Đây là một con trỏ đến tập kết quả của một truy vấn. Máy khách
có thể lặp qua một con trỏ để lấy kết quả.
Database – Nơi chứa các Collection, giống với cơ sở dữ liệu RDMS chúng
chứa các bảng. Mỗi Database có một tập tin riêng lưu trữ trên bộ nhớ vật lý. Một
mấy chủ MongoDB có thể chứa nhiều Database.
Document – Một bản ghi thuộc một Collection thì được gọi là một
Document. Các Document lần lượt bao gồm các trường tên và giá trị.
Field – Là một cặp name – value trong một document. Một document có
thể có không hoặc nhiều trường. Các trường giống các cột ở cơ sở dữ liệu quan
hệ.
JSON – Viết tắt của JavaScript Object Notation. Con người có thể đọc
được ở định dạng văn bản đơn giản thể hiện cho các dữ liệu có cấu trúc. Hiện tại
JSON đang hỗ trợ rất nhiều ngôn ngữ lập trình.
 Index – Là những cấu trúc dữ liệu đặc biệt, dùng để chứa một phần nhỏ
của các tập dữ liệu một cách dễ dàng để quét. Chỉ số lưu trữ giá trị của một
fields cụ thể hoặc thiết lập các fields, sắp xếp theo giá trị của các fields này.
Index hỗ trợ độ phân tích một cách hiệu quả các truy vấn. Nếu không có chỉ
mục, MongoDB sẽ phải quét tất cả các documents của collection để chọn ra
những document phù hợp với câu truy vấn. Quá trình quét này là không hiệu quả
và yêu cầu MongoDB để xử lý một khối lượng lớn dữ liệu.
Cách thức hoạt động của MongoDB
MongoDB hoạt động dưới một tiến trình ngầm service, luôn mở một cổng
(Cổng mặc định là 27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các
ứng dụng gửi vào sau đó mới tiến hành xử lý.
Mỗi một bản ghi của MongoDB được tự động gắn thêm một field có tên
“_id” thuộc kiểu dữ liệu ObjectId mà nó quy định để xác định được tính duy
nhất của bản ghi này so với bản ghi khác, cũng như phục vụ các thao tác tìm
kiếm và truy vấn thông tin về sau. Trường dữ liệu “_id” luôn được tự động đánh
index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất.
Mỗi khi có một truy vấn dữ liệu, bản ghi được cache (ghi đệm) lên bộ nhớ
Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ
ổ cứng.
Khi có yêu cầu thêm/sửa/xóa bản ghi, để đảm bảo hiệu suất của ứng dụng
mặc định MongoDB sẽ chưa cập nhật xuống ổ cứng ngay, mà sau 60 giây
MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng.
 KẾT LUẬN
1. Kết Luận
Đề tài “Xây dựng website bán thực phẩm bổ sung dành cho người chơi thể
thao” dưới sự hướng dẫn của thầy cô đã đạt được các kết quả sau:
• Vận dụng các kiến thức đã học vào đồ án để xây dựng website bán
sách.
• Đảm bảo các chức năng cơ bản của website: người dùng có thể đăng
kí, đăng nhập, mua hàng, xem bài viết và bình luận; quản trị viên có
thể thêm, sửa, xóa các sản phẩm, bài viết, đơn hàng, tài khoản.
• Thiết kế giao diện website.
• Bên cạnh đó, cũng còn những hạn chế mà đề tài còn tồn tại:
• Nhiều chức năng còn hạn chế.
• Kiểm soát dữ liệu ở một số trường thông tin nhập vào còn chưa được
chặt chẽ.
2. Hướng phát triển:
Trong thời gian tới, có thể phát triển đầy đủ hơn để áp dụng vào thực tế:
• Bổ sung thêm một số tính năng mới.
• Tăng tính bảo mật.
• Bổ sung hiệu ứng sinh động, hấp dẫn cho trang web, giúp thu hút
khách hàng.
• Tạo nhiều hiệu ứng đẹp mắt trong giao diện sử dụng của khách hàng.
...
 TÀI LIỆU THAM KHẢO
[1]. Thạc Bình Cường, 2002, Phân tích và thiết kế hệ thống thông tin,
nhà xuất bản Khoa học và Kỹ thuật.
[2]. Phạm Hữu Khang, Hoàng Đức Hải, 2005, Giáo trình nhập môn PHP
và MySQL –
[3]. Xây dựng ứng dụng web (tủ sách dễ học), nhà xuất bản Phương
Đông (3): https://vi.wikipedia.org/wiki/MySQL
[4]. https://vi.wikipedia.org/wiki/PHP
[5]. Jermy Osborn & Nhóm AGI Creative, HTML5 Và CSS3: Thiết Kế
Trang Web Thích Ứng Giàu Tính Năng, nhà xuất bản Bách Khoa –
Hà Nội
[6]. https://vi.wikipedia.org/wiki/JavaScript