Bài tập lớn môn Lập trình Web đề tài "Website phân tích tài chính" | Học viện Công nghệ Bưu chính Viễn thông

Bài tập lớn môn Lập trình Web đề tài "Website phân tích tài chính" của Học viện Công nghệ Bưu chính Viễn thông với những kiến thức và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học vào thực tiễn cuộc sống. Mời bạn đọc đón xem!

lOMoARcPSD|36067889
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA CÔNG NGHỆ THÔNG TIN 1
BÀI TẬP LỚN MÔN LẬP TRÌNH WEB (FINTECH)
Hà Nội 2023
lOMoARcPSD|36067889
Mục lục
I. Phân tích yêu cu bài toán ................................................................................................. 3
1. Mô t bài toán: ....................................................................................................................... 3
2. Xác định yêu cu bài toán .................................................................................................... 3
II. Phân tích thiết kế h thng ............................................................................................... 4
1. Phân tích thiết kế CSDL ........................................................................................................ 4
2. Phân tích thiết kế chức năng ............................................................................................... 9
3. Các chức năng chưa làm được ......................................................................................... 25
III. Cài đặt hướng hướng dn s dng: ............................................................................. 26
IV. Tài liu và tham kho..................................................................................................53
V. Phân công công vic..................................................................................................53
lOMoARcPSD|36067889
I. Phân tích yêu cầu bài toán
1. Mô tả bài toán:
Trong sự phát triển không ngừng của xã hội thì nhu cầu của con người về cuộc
sống ngày càng cao. Từ ý nghĩa thực tế đó mà đã nảy sinh ra nhiều loại hình dịch vụ
để phần nào đáp ứng được những nhu cầu thiết yếu của con người. Các dịch vụ đó đa
dạng về nhiều mặt với nhiều cách đáp ứng khác nhau. Và một loại hình dịch vụ khá
phổ biến hiện nay đó là bán hàng qua mạng.
- Từ kiến thức được học ở môn lập trình web nhóm em đã tạo ra một trang web thương
mại điện tử, phát triển chức năng cũng như sản phẩm để tạo được tiện ích cho người
dùng và người kinh doanh. Quá trình tạo lập web thương mại điện tử bao gồm nhiều
bước quan trọng. Đầu tiên, nhóm bọn em tìm hiểu và nghiên cứu những thông tin về
các yêu cầu phổ biến của khách hàng và doanh nghiệp.
- Tiếp theo đó, nhóm em tạo giao diện bắt mắt, thân thiện với người dùng. Các thanh
menu cũng như hình ảnh, đường link được sắp xếp hợp lý, sáng tạo, có khả năng tương
thích với mọi thiết bị
- Tiếp đến là hiển thị đầy đủ thông tin sản phẩm: Các thông tin sản phẩm bao gồm kiểu
dáng, màu sắc (có ô tick vào màu sắc để chọn lựa), kích cỡ (có ô chọn kích cỡ khi mua
hàng), mô tả, …Ngoài ra, có thanh tìm kiếm sản phẩm thanh tìm kiếm thông minh
giúp khách hàng có thể tìm kiếm sản phẩm/ bài viết dựa trên từ khóa liên quan. Đăng
nhập, đăng ký website cho phép người dùng đăng ký tài khoản mới hoặc đăng nhập.
Đặt mua hàng trực tuyến, tiến hành thanh toán, các bước đổi trả hàng
- Nhóm em sử dụng các ứng dụng như HTML, CSS, JavaScript và Spring for Java để
xây dựng các chức năng cần thiết cho trang web, bao gồm quản lý sản phẩm, giỏ hàng,
thanh toán và xử lý đơn hàng.
1. Xác định yêu cầu bài toán
Xác định yêu cầu bài toán ( xác định nghiệp vụ ) là khi chúng ta tạo lập một trang web
thì cần phải xác định những yêu cầu nghiệp vụ cụ thể để từ đó có thể đảm bảo được các
chức năng của trang web đó được thiết kế sao cho phù hợp với nhu cầu, mong muốn của
khách hàng nhất. Dưới đây là một số những yêu cầu cụ thể:
+) Yêu cầu môi trường:
Hệ điều hành: trang web cần được thiết kế để chạy trên mọi hệ điều hành khác nhau
như Windows, macOS,..
Trình duyệt web: Trang web phải được thiết kế để hiển thị đầy đủ và tương thích trên
mọi trình duyệt web khác nhau như Google, Chrome,...
Ngôn ngữ lập trình : HTML, CSS, JavaScript,..
Cơ sở dữ liệu: cần sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu và các thông tin
liên quan đến sản phẩm, đơn hàng, khách hàng,..
Phần mềm máy chủ: cần sử dụng Apache để đảm bảo ổn định và đáp ứng nhu cầu
khách hàng
Thư viện và framework: sử dụng một số thư viện phổ biến như Lombok, Thymleaf,
Bootstrap, jQuery để tăng tính tương thích và tối ưu hóa trang web
lOMoARcPSD|36067889
+)Yêu cầu giao diện:
Đây là phần đầu tiên mà khách hàng thấy khi truy cập vào trang web nên cần phải
có một giao diện đẹp mắt, thu hút khách hàng, ở phần trang chủ của khách hàng cần
phải hiển thị thêm những sản phẩm mới cập nhật, sản phẩm được mua nhiều nhất,.. để
khách hàng có thể tham khảo trước khi mua hàng.
Header: được đặt ở đầu trang web, chứa tên của shop giày, các logo, thanh tìm kiếm
sản phẩm và là nơi để người dùng có thể đăng nhập, đăng ký.
Danh mục sản phẩm: Cần phân rõ các danh mục sản phẩm để khách hàng dễ lựa
chọnvà tìm kiếm sản phẩm phù hợp với nhu cầu của mình.
Chi tiết sản phẩm: Nên cung cấp đầy đủ thông tin về sản phẩm bao gồm: hình ảnh,
thông tin sản phẩm, giá cả, màu sắc.
Thanh toán: Trang web bán giày cần cung cấp các phương thức thanh toán đa dạng,
bao gồm thanh toán trực tuyến qua thẻ tín dụng và thanh toán trực tiếp khi nhận hàng.
● Liên hệ: cần có form thông tin để người dùng điền vào khi muốn liên hệ với admin.
Tra cứu đơn hàng: cung cấp một thanh công cụ để khách hàng có thể tra cứu đơn
hàng của mình thông qua ID đơn hàng.
Footer: được đặt ở cuối trang web, chứa các liên kết quan trọng khác như thông tin
liên hệ, thanh điều hướng.
+)Yêu cầu chức năng:
Tìm kiếm sản phẩm: trang web cần phải cung cấp tính năng tìm kiếm sản phẩm một
cách nhanh chóng và dễ dàng thông qua từ khóa, mã sản phẩm,...
Quản lý danh mục sản phẩm: cung cấp thêm tính năng chọn lọc sản phẩm dựa vào
các thông tin như sản phẩm mới nhất, cũ nhất,...
Quản lý giỏ hàng: cần hiển thị các sản phẩm mà khách hàng đã chọn. Ngoài ra cần
cung cấp các chức năng thêm, sửa, xóa, điều chỉnh số lượng sản phẩm
Quản lý các đơn đặt hàng: cần cung cấp thông tin chi tiết về đơn hàng, tình trạng đơn
hàng, thông tin khách hàng. Ngoài ra trang quản lý đơn hàng cần cung cấp các công
cụ để xử lý đơn hàng, quản lý vận chuyển và cập nhật trạng thái đơn hàng.
Quản lý tài khoản: cần cung cấp các công cụ để tạo tài khoản, đăng nhập, quản lý
thông tin cá nhân và mật khẩu.
Liên hệ: Cần cung cấp các công cụ để liên hệ và hỗ trợ khách hàng bao gồm số điện
thoại, email…
Bảo mật: trang web cần cung cấp tính năng mã hóa dữ liệu để đảm bảo rằng thông tin
khách hàng được bảo vệ và không bị lộ ra bên ngoài.
II.Phân tích thiết kế hệ thống
1. Phân tích thiết kế CSDL
1.1 Bảng
Tên thực thể
Tên thuộc tính
Kiểu dữ liệu
admins
id
varchar
lOMoARcPSD| 36067889
address
varchar
created_by
varchar
created_time
timestamp
email
varchar
last_updated_by
varchar
last _updated_time
timestamp
name
varchar
password
varchar
phone
varchar
role
int
status
bit(1)
username
varchar
categories
id
int
created_by
varchar
created_time
timestamp
image
longblob
last_updated_by
varchar
lOMoARcPSD| 36067889
last_updated_time
timestamp
name
varchar
status
int
url
varchar
feedbacks
id
int
content
text
created_at
timestamp
status
int
email
varchar
subject
varchar
first_name
varchar
last_name
varchar
other_details
id
int
order_id
varchar
price
double
quantity
int
shoe_id
int
color
varchar
size
int
orders
id
varchar
lOMoARcPSD| 36067889
address
varchar
created_time
timestamp
last_updated_by
varchar
last_updated_time
timestamp
note
text
status
int
user_id
varchar
email
varchar
name
varchar
phone
varchar
shoe_details
id
int
color
varchar
quantity
int
shoe_id
int
size
int
image
longblob
shoes
id
int
Khóa chính
category_id
int
created_at
timestamp
created_by
varchar
description
text
hot_order
int
lOMoARcPSD| 36067889
image
longblob
last_updated_by
varchar
price
bigint unsigned
Kiểu dữ liệu số nguyên lớn và
không chứa số âm
promote_price
bigint unsigned
status
int
title
varchar
updated_at
timestamp
users
id
varchar
Khóa chính
address
varchar
created_at
timestamp
email
varchar
name
varchar
otp
varchar
password
varchar
phone
varchar
status
int
username
varchar
created_by
varchar
created_time
timestamp
last_updated_by
varchar
last_updated_time
timestamp
uuid2
next_val
bigint
1.2 Relational Diagram
lOMoARcPSD|36067889
2. Phân tích thiết kế chức năng
2.1 Sơ đồ BFD
2.2 Mô tả chức năng, giao diện và chi tiết luồng
a, Admin
Quản lý tài khoản:
- Tài khoản Admin
+ Hiển thị thông tin tài khoản gồm:
ID, tên, tên đăng nhập, quyền, địa chỉ, SDT, trạng thái, người tạo tài khoản, thời
gian tạo, người sửa cuối, thời gian sửa
lOMoARcPSD|36067889
+ Thêm tài khoản mới
Giúp thêm tài khoản đăng nhập user + password kèm các thông tin cá nhân cho
người tham gia quản web bán giày với từng nhiệm vụ khác nhau từng quyền hạn
riêng
+ Sửa, xóa tài khoản cũ:
Giúp người dùng chỉnh sửa thông tin cá nhân, password,... khi có nhu cầu thay đổi
phù hợp với nhu cầu
lOMoARcPSD|36067889
Chú ý:
+ Không thể xóa tài khoản đang đăng nhập
+ Chỉ có tài khoản đang đăng nhập mới có thể thay đổi được mật khẩu của mình
Quản lý trạng thái hoạt động tài khoản:
Được hoạt động/ Không được hoạt động
Giúp người quản trị kiểm soát cho phép hoặc vô hiệu hóa quyền truy cập của tài khoản
vào trang web
- Phân quyền sử dụng cho tài khoản Admin:
+ Quản lý người: Sử dụng chức năng danh sách tài khoản
Dùng cho nhân viên quản lý tài khoản, người quản lý có quyền kiểm soát các tài khoản
được sử dụng trong cả 2 site admin và user; thêm, xóa, cho phép hoặc vô hiệu quá
quyền truy cập, nắm bắt các thông tin thời tạo, sửa của các người khác
lOMoARcPSD|36067889
+ Quản lý sản phẩm: Sử dụng các chức năng quản lý sản phẩm
Dùng cho nhân viên quản lý kho hàng, người quản lý có quyền quản lý 2 mục, quản lý
danh mục sản phẩm và quản lý Giày, cập nhật các thông tin liên quan đến sản phầm
+ Quản lý đơn hàng: Sử dụng các chức năng mục đơn hàng
Dùng cho nhân viên bán hàng xử lý các đơn hàng, có quyền xem chi tiết đơn hàng khách
đã đặt, xem thông tin chi tiết đơn đặt hàng để liên hệ khách hàng và xử lý đơn đặt hàng
lOMoARcPSD|36067889
+ Quản lý phản hồi: Sử dụng chức năng quản lý phản hồi khách hàng
Dùng cho nhân viên chăm sóc khách hàng có quyền xem, xóa thông tin phản hồi của
khách hàng
+ Quản lý toàn bộ: Sử dụng tất cả các chức năng toàn bộ các chức năng.
- Tài khoản User
+ Hiển thị thông tin tài khoản gồm: ID, tên, tên đăng nhập, quyền, địa chỉ, SDT, trạng
thái, người tạo tài khoản, thời gian tạo, người sửa cuối, thời gian sửa. Dùng để quản lý
khách hàng đăng nhập vào web
lOMoARcPSD|36067889
+ Thêm tài khoản mới
Hiển thị tài khoản khách hàng đã đăng kí, thêm tài khoản cho khách hàng sử dụng
+ Sửa, xóa tài khoản cũ
lOMoARcPSD|36067889
+ Quản lý trạng thái hoạt động tài khoản:
Được hoạt động/ Không được hoạt động
Quản lý quyền được phép đăng nhập sử dụng tài khoản của khách hàng
Quản lý sản phẩm
- Quản lý danh mục
+ Hiển thị thông tin danh mục: ID, tên danh mục, đường dẫn ảnh, hình ảnh, người tạo,
thời gian tạo, người cập nhật cuối, thời gian cập nhật cuối
+ Cập nhật trạng thái danh mục: Được hoạt động/ Không được hoạt động
+ Thêm, sửa, xóa danh mục
lOMoARcPSD|36067889
- Quản lý giày
+ Hiện thị thông tin giày:
ID, ID danh mục, Tên, Độ ưu tiên, Giá, Ảnh, mô tả sản phẩm, người tạo, thời gian tạo,
người sửa, thời gian người sửa thông tin liên quan đến giày
+ Cập nhật trạng thái mặt hàng: Được hoạt động/ Không được hoạt động
+ Thêm, sửa, xóa giày:
Người quản lý kho có quyền thay đổi thông tin về loại giày cung cấp cho khách hàng từ
size, ảnh cover, tên hãng, màu, mô tả sản phẩm,....
lOMoARcPSD|36067889
Quản lý đơn hàng ( Order)
Chức năng này gồm 2 thao tác chính: xem đơn hàng và cập nhập trạng thái đơn
hàng
+ Hiển thị đơn hàng:
Admin sẽ xem được các thông tin của đơn hàng gồm : ID đơn hàng, người đặt
hàng, Email của người đặt hàng, SDT của người đặt hàng, Địa chỉ của người đặt
hàng
+ Cập nhật trạng thái đơn hàng:
Trạng thái đơn hàng gồm: Chờ xác nhận, xác nhận chờ giao, đang giao, giao thành
công, chờ hoàn trả, Đã hoàn trả, Hủy đơn.
lOMoARcPSD|36067889
Admin toàn bộ và Admin đơn hàng có có thể thay đổi trạng thái đơn hàng
Quản lý phản hồi khách hàng (Feedback)
Admin toàn bộ và Admin phản hồi có thể quản lý phản hồi của khách hàng như
sau:
Xem thông tin của phản hồi: ID người gửi phản hồi, Tên người gửi phản hồi, Chủ
đề phản hồi, Trạng thái phản hồi, Thời gian gửi phản hồi
Xem thông tin chi tiết của từng phản hồi, xóa phản hồi
Ví dụ: Xem và xóa phản hồi của khách hàng có ID là 19
lOMoARcPSD|36067889
b, User
● Quản lí tài khoản:
- Khách hàng chưa có sản phẩm đăng kí tài khoản (.../dang-ky), sau khi đăng kí thành
công (không được để trống các thông tin), hệ thống sẽ báo đăng kí thành công và điều
hướng đến trang đăng nhập (.../dang-nhap)
=> Tài khoản User sẽ được lưu lại trong data của máy chủ
- Khi đăng nhập, nhập sai mật khẩu, tên đăng nhập hoặc để trống, hệ thống sẽ báo lỗi và
yêu cầu đăng nhập lại
lOMoARcPSD|36067889
- Phần thông tin tài khoản, người dùng có thể sửa thông tin cá nhân, thay đổi mật khẩu
và theo dõi đơn hàng (.../thong-tin-tai-khoan)
● Quản lý sản phẩm:
- Hiển thị danh sách sản phẩm: khách hàng có thể xem danh sách sản phẩm theo hãng
trong danh mục sản phẩm; xem sản phẩm giảm giá, sản phẩm mới nhất hoặc được mua
nhiều nhất ở trang chủ
lOMoARcPSD|36067889
- Hiện thị chi tiết sản phẩm: ứng với từng sản phẩm có hình ảnh và mô tả chi tiết về sản
phẩm, kèm theo giá, size và màu sản phẩm (.../san-pham/{id sản phẩm})
- Lọc sản phẩm: ở trang “Sản phẩm” khách hàng có thể tìm sản phẩm theo bộ lọc: cũ
nhất, mới nhất, theo thứ tự chữ cái, theo giá cao đến thấp hoặc thấp đến cao
(.../danhsach-san-pham?&filter={yêu cầu lọc})
lOMoARcPSD|36067889
- Tìm kiếm sản phẩm: trên cùng của trang, khách hàng có thể tìm trực tiếp sản phẩm
bằng từ khóa tên của sản phẩm (.../tim-kiem?search_query={yêu cầu tìm kiếm})
=> Ở đây, phân bậc sẽ là danh mục => hãng => bộ tìm kiếm
VD: /danh-sach-san-pham?danh-muc=adidas&filter=lowhigh
=> Với trường hợp dùng bộ lọc trước danh mục, hệ thống sẽ loại bỏ bộ lọc và chuyển
sang danh mục sản phẩm yêu cầu
- Thêm sản phẩm vào giỏ hàng: khách hàng chọn size và màu sắc mong muốn, sau đó
thêm hàng vào giỏ. Sản phẩm sẽ được lưu vào giỏ hàng, khách hàng có thể tiếp tục
xem sản phẩm hoặc tới trang giỏ hàng thanh toán
lOMoARcPSD|36067889
● Quản lý giỏ hàng: (.../gio-hang)
- Hiển thị sản phẩm đã thêm vào giỏ: người dùng có thể xem sản phẩm và thông tin sản
phẩm đã thêm vào giỏ hàng
- Cập nhật giỏ hàng: khách hàng thêm số lượng, đi mua thêm hoặc xóa sản phẩm => Ở
đây, hệ thống sẽ ghi nhận và lưu lại khi khách hàng chọn “Cập nhật giỏ hàng”
- Tạo đơn hàng: sau khi cập nhật giỏ hàng, khách hàng sẽ tiến đến thanh toán sản phẩm.
Ở đây khách hàng có thể dễ dàng quan sát được giá từng sản phẩm và tổng đơn hàng,
điền các thông tin cần thiết và lựa chọn phương thức thanh toán phù hợp. Sau khi đặt
hàng xong, hệ thống sẽ hiển thị thông tin chi tiết đơn đặt hàng (.../thanh-toan)
=> Phần thông tin đặt hàng sẽ tự động điền thông tin theo thông tin của tài khoản (nếu tài
khoản đã đăng kí và đăng nhập). Người dùng sẽ không phải điền lại nhưng vẫn có thể
chỉnh sửa thông tin nếu cần thiết
lOMoARcPSD|36067889
- Khi bấm “Đặt hàng” web sẽ chuyn đến trang đặt hàng thành công và hiển thị thông
tin đơn hàng
Quản lí đơn đặt hàng: tra cứu thông tin, trạng thái đơn hàng qua ID mã đơn hàng, hệ
thống sẽ hiển thị thông tin chi tiết của đơn hàng, thời gian đặt hàng, đặc biệt khách
hàng có thể theo dõi trạng thái đơn hàng (.../tra-cuu-don-hang/{id đơn hàng})
Liên hệ phản hồi:
lOMoARcPSD|36067889
- Nhập thông tin và nội dung phản hồi trực tiếp trên web cho shop qua trang Liên hệ
(/lien-he)
- Ngoài ra, có thể liên hệ qua email hoặc SĐT ở chân trang bằng cách nhấn vào button,
sau đó sẽ được điều hướng đến ứng dụng email hoặc gọi điện trên thiết bị
Lưu ý: Tất cả các phần điền thông tin đều yêu cầu, điền email cần đúng dạng email, nội
dung ghi chú không bắt buộc
3. Các chức năng chưa làm được
3.1. Phần đặt hàng
lOMoARcPSD|36067889
- Phương thức thanh toán: Chưa có thanh toán bằng thẻ ngân hàng, thẻ visa. Mới chỉ
có thanh toán bằng tiền mặt khi nhận hàng (COD).
- Chưa áp dụng được mã giảm giá
3.2. Phần login
- chưa có chức năng quên mất khẩu
- Chưa áp dụng được cookies cho login
III. Cài đặt hướng hướng dẫn sử dụng:
1. JDK 18 (java 18)
Bước 1: Truy cập trang download JDK và chọn download phiên bản JDK phù hợp
với máy và dự án
Bước 2: Nhấn vào link download và tải môi trường về
Bước 3: Sau khi tải xuống hoàn tất. Mở tệp vừa mới tải xuống rồi nhấn Next. Đến hộp
thoại cuối cùng, nếu muốn thay đổi nơi chứa chọn Change, hoàn tất chọn Close
lOMoARcPSD|36067889
Bước 4: Vào cài đặt chọn Edit the system environment variable
Bước 5: chọn Advanced system setting
lOMoARcPSD|36067889
Bước 6: Thêm các thông tin như hình dưới
Bước 7: Vào path ở System variable, chọn New và thêm 2 dòng như hình. Lưu ý đưa
đúng đường dẫn ổ chứa thư mục Java. Hoàn thiện chọn OK
lOMoARcPSD|36067889
2. Apache Tomcat
Bước 1: vào trang https://tomcat.apache.org/ để thực hiện cài đặt
Bước 2: Ở phần Tomcat 10.1.10 Released, chọn download
Bước 3: Có thể chọn cách thức tải
lOMoARcPSD|36067889
Bước 4: Tùy ý cài đặt cho phù hợp với môi trường
3. Dbeaver
Tải và cài đặt DBeaver
lOMoARcPSD|36067889
- Truy cập trang chủ của DBeaver và chọn phiên bản phù hợp với hệ điều
hành của bạn và tải xuống. Bạn có thể tải xuống tại dbeaver.io/download/
phiên bản miễn phí trên các hệ điều hành Windows, Mac OS X, Linux
- Chọn các tùy chọn cài đặt, bao gồm ngôn ngữ, đặt biểu tượng trên màn
hình, và cấu hình kết nối mạng.
- Nhấn "Next" để tiếp tục và sau đó "Install" để bắt đầu quá trình cài đặt.
lOMoARcPSD|36067889
- Chờ đợi quá trình cài đặt hoàn tất và nhấn "Finish" để kết thúc.
Sau khi hoàn tất, DBeaver sẽ được cài đặt trên máy tính của bạn và bạn có thể mở
nó để bắt đầu sử dụng.
4. Cách cài đặt My SQL 8
Bước 1: Vào trang web tải MySQL Community. Chọn MySQL Community Server.
Vào trang web tải MySQL Community. Chọn MySQL Community Server
Bước 2: Chọn nền tảng máy của bạn và chọn Go to Download Page.
lOMoARcPSD|36067889
Chọn nền tảng máy của bạn và chọn Go to Download Page
Bước 3: Chọn bản Community với dung lượng lớn hơn và chọn Download.
Chọn bản Community với dung lượng lớn hơn và chọn Download
Bước 4: Tại trang tiếp theo, chọn No thanks, just start my download.
lOMoARcPSD|36067889
Tại trang tiếp theo, chọn No thanks, just start my download
Bước 5: Chọn nơi tải về và chọn Save.
Chọn nơi tải về và chọn Save
Bước 6: Sau khi tải về nhấn đúp vào file vừa tải và đợi một chút để chương trình chuẩn bị
cài đặt.
lOMoARcPSD|36067889
Sau khi tải về nhấn đúp vào file vừa tải và đợi một chút để chương trình chuẩn bị cài đặt
Bước 7: Chọn loại cài đặt theo nhu cầu sử dụng của bạn và chọn Next.
Chọn loại cài đặt theo nhu cầu sử dụng của bạn và chọn Next
Bước 8: Nhấn Next.
lOMoARcPSD|36067889
Nhấn Next
Bước 9: Bộ cài hiển thị danh sách các gói sẽ được cài vào, chọn Execute.
Bộ cài hiển thị danh sách các gói sẽ được cài vào, chọn Execute
Bước 10: Đợi một chút để chương trình kiểm tra cài đặt và chọn Next.
lOMoARcPSD|36067889
Đợi một chút để chương trình kiểm tra cài đặt và chọn Next
Bước 11: Bộ cài đặt tiếp tục tới phần cấu hình MySQL Server, chọn Next.
Bộ cài đặt tiếp tục tới phần cấu hình MySQL Server, chọn Next
Bước 12: Chọn tính khả dụng cho nhu cầu cài đặt, chọn Next.
lOMoARcPSD|36067889
Chọn tính khả dụng cho nhu cầu cài đặt, chọn Next
Bước 13: Tại bảng cài đặt mạng, hãy chỉnh theo ý muốn hoặc giữ nguyên như cài đặt
chuẩn của nhà sản xuất và chọn Next.
Tại bảng cài đặt mạng, hãy chỉnh theo ý muốn hoặc giữ nguyên như cài đặt chuẩn của
nhà sản xuất và chọn Next
Bước 14: Tại mục Phương thức chứng thực (Authentication method) chọn đặt mật
khẩu khi sử dụng hay sử dụng chung. Ở đây mình sẽ chọn sử dụng với mật khẩu. Tiếp
đến chọn Next.
lOMoARcPSD|36067889
Tại mục Phương thức chứng thực (Authentication method) chọn đặt mật khẩu khi sử
dụng hay sử dụng chung
Bước 15: Đặt mật khẩu và xác nhận lại mật khẩu của bạn, tiếp đến chọn Add user để
thêm tài khoản sử dụng.
Đặt mật khẩu và xác nhận lại mật khẩu của bạn, tiếp đến chọn Add user để thêm tài
khoản sử dụng
Bước 16: Đặt tên tài khoản và nhập mật khẩu. Kế tiếp chọn Next.
lOMoARcPSD|36067889
Đặt tên tài khoản và nhập mật khẩu. Kế tiếp chọn Next
Bước 17: Chọn Next.
Chọn Next
Bước 18: Chọn Next.
lOMoARcPSD|36067889
Chọn Next.
Bước 19: Ở mục Áp dụng cấu hình (Apply configuration), chọn Execute để áp dụng.
Ở mục Áp dụng cấu hình (apply configuration), chọn Execute để áp dụng
Bước 20: Chọn Finish để kết thúc quá trình thiết lập bảo mật.
lOMoARcPSD|36067889
Chọn Finish để kết thúc quá trình thiết lập bảo mật
Bước 21: Tại mục Product Configuration, chọn Next.
Tại mục Product Configuration, chọn Next
Bước 22: Chọn Finish.
lOMoARcPSD|36067889
Chọn Finish
Bước 23: Điền tên, password và chọn Check.
Điền tên, password và chọn Check
Bước 24: Sau khi check thành công, chọn Next.
lOMoARcPSD|36067889
Sau khi check thành công, chọn Next
Bước 25: Chọn Execute.
Chọn Execute.
Bước 26: Chọn Finish.
lOMoARcPSD|36067889
Chọn Finish.
Bước 27: Kế kiếp lập lại quá trình xác nhận, chọn Next và chọn Finish để kết thúc quá
trình cài đặt.
Kế kiếp lập lại quá trình xác nhận, chọn Next và chọn Finish để kết thúc quá trình cài đặt
Vậy là bạn đã cài đặt MySQL thành công!
lOMoARcPSD|36067889
Vậy là bạn đã cài đặt MySQL thành công!
5. Visual (esclipse, intellij) - Linh ( làm cách cái đặt visual )
Bước 1: Tải xuống Visual Studio Code
Truy cập trang web chính thức của Visual Studio Code tại địa chỉ:
https://code.visualstudio.com/. Tại trang web y, bạn sẽ thấy nút "Download" (Tải
xuống) để tải về phiên bản phù hợp với hệ điều hành của bạn. Chọn phiên bản phù hợp
và tải xuống tệp cài đặt.
lOMoARcPSD|36067889
Bước 2:
Cài đặt Visual Studio Code Sau khi tải xuống tệp cài đặt, hãy mở nó và bắt đầu
quá trình cài đặt. Quá trình cài đặt khá đơn giản và bạn chỉ cần làm theo các hướng dẫn
trên màn hình. Đảm bảo bạn đọc và ch
ấp nhận các điều khoản và điều kiện của Visual
Studio Code trước khi tiến hành cài đặt.
lOMoARcPSD|36067889
Bước 3: Tích chọn những ô trong Other Bước 4:
Chọn Next lần lượt ở những bước tiếp theo.
lOMoARcPSD|36067889
Bước 5: Kiểm tra Add to PATH và chọn Install.
Bước 6: Phần mềm VS Code 2023 sẽ được cài đăt. Chọn Finish để kết thúc.
lOMoARcPSD|36067889
6. Springboot (cách tạo 1 project, thêm các thư viện )
Để dễ dàng tạo 1 project có thể sử dụng spring initializr
- Giao diện của spring initializr
- Chọn phiên bản spring boot 3.1.0, dùng ngôn ngữ java, loại project Maven
lOMoARcPSD|36067889
- Thêm thư viện, gồm có các thư viện sau
- Sau đó chọn GENERATE để hoàn tất việc tạo 1 project
lOMoARcPSD|36067889
IV. Tài liệu và tham khảo
1. Giáo trình lập trình web
2. Link: https://www.javatpoint.com/spring-mvc-tutorial
3. Link: https://data-fun.com/cai-dat-mysql/?fbclid=IwAR08wyjkOT-
a7bLrWTU04AaQZTvKTWLKVNpcu7-ZW4If_irYMUShJKYObGw
4. Web: https://www.w3schools.com/
5. https://www.geeksforgeeks.org/
6. https://viblo.asia/p/huong-dan-spring-security-co-ban-de-hieu-OeVKBdedlkW
7. Chat GPT
V.Phân công công việc
STT
TÊN THÀNH VIÊN
MÃ SINH VIÊ
NCÔNG VIỆC
XÁC
NHẬN
1
Nguyễn Mạnh Cường
B21DCTC004
- Vẽ sơ đồ BFD, phân tích
chức năng site (admin)
- Làm back-end của admin:
Quản lý sản phẩm và quản lý
đơn hàng
2
Trần Trung Kiên
(Nhóm trưởng)
B21DCTC057
- Phân tích thiết kế cơ sở dữ
liệu- Làm back-end của admin:
Phần quản lý người và phản hồi
- Thiết kế database
lOMoARcPSD| 36067889
3
Lê Thị Phương Linh
B21DCTC061
- Mô tả bài toán
- Cài đặt và hướng dẫn sử
dụng- Làm front-end cho toàn
bộ project
4
Nguyễn Khánh Ly
B21DCTC065
- Làm báo cáo
- Phân tích chức năng (user)
- Backend User: Quản lý
giỏ hàng, Liên hệ và phản hồi,
Quản lí đơn đặt hàng
5
Cao Thị Hồng Nhung
B21DCTC077
- Xác định yêu cầu bài toán
- Backend User: Quản lí sản
phẩm, Quản lí tài khoản
| 1/53

Preview text:

lOMoARcPSD| 36067889
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA CÔNG NGHỆ THÔNG TIN 1
BÀI TẬP LỚN MÔN LẬP TRÌNH WEB (FINTECH)
Hà Nội – 2023 lOMoARcPSD| 36067889 Mục lục
I. Phân tích yêu cầu bài toán ................................................................................................. 3
1. Mô tả bài toán: ....................................................................................................................... 3
2. Xác định yêu cầu bài toán .................................................................................................... 3
II. Phân tích thiết kế hệ thống ............................................................................................... 4
1. Phân tích thiết kế CSDL ........................................................................................................ 4
2. Phân tích thiết kế chức năng ............................................................................................... 9
3. Các chức năng chưa làm được ......................................................................................... 25
III. Cài đặt hướng hướng dẫn sử dụng: ............................................................................. 26
IV. Tài liệu và tham khảo..................................................................................................53
V. Phân công công việc..................................................................................................53 lOMoARcPSD| 36067889
I. Phân tích yêu cầu bài toán
1. Mô tả bài toán:
Trong sự phát triển không ngừng của xã hội thì nhu cầu của con người về cuộc
sống ngày càng cao. Từ ý nghĩa thực tế đó mà đã nảy sinh ra nhiều loại hình dịch vụ
để phần nào đáp ứng được những nhu cầu thiết yếu của con người. Các dịch vụ đó đa
dạng về nhiều mặt với nhiều cách đáp ứng khác nhau. Và một loại hình dịch vụ khá
phổ biến hiện nay đó là bán hàng qua mạng.
- Từ kiến thức được học ở môn lập trình web nhóm em đã tạo ra một trang web thương
mại điện tử, phát triển chức năng cũng như sản phẩm để tạo được tiện ích cho người
dùng và người kinh doanh. Quá trình tạo lập web thương mại điện tử bao gồm nhiều
bước quan trọng. Đầu tiên, nhóm bọn em tìm hiểu và nghiên cứu những thông tin về
các yêu cầu phổ biến của khách hàng và doanh nghiệp.
- Tiếp theo đó, nhóm em tạo giao diện bắt mắt, thân thiện với người dùng. Các thanh
menu cũng như hình ảnh, đường link được sắp xếp hợp lý, sáng tạo, có khả năng tương
thích với mọi thiết bị
- Tiếp đến là hiển thị đầy đủ thông tin sản phẩm: Các thông tin sản phẩm bao gồm kiểu
dáng, màu sắc (có ô tick vào màu sắc để chọn lựa), kích cỡ (có ô chọn kích cỡ khi mua
hàng), mô tả, …Ngoài ra, có thanh tìm kiếm sản phẩm thanh tìm kiếm thông minh
giúp khách hàng có thể tìm kiếm sản phẩm/ bài viết dựa trên từ khóa liên quan. Đăng
nhập, đăng ký website cho phép người dùng đăng ký tài khoản mới hoặc đăng nhập.
Đặt mua hàng trực tuyến, tiến hành thanh toán, các bước đổi trả hàng
- Nhóm em sử dụng các ứng dụng như HTML, CSS, JavaScript và Spring for Java để
xây dựng các chức năng cần thiết cho trang web, bao gồm quản lý sản phẩm, giỏ hàng,
thanh toán và xử lý đơn hàng.
1. Xác định yêu cầu bài toán
Xác định yêu cầu bài toán ( xác định nghiệp vụ ) là khi chúng ta tạo lập một trang web
thì cần phải xác định những yêu cầu nghiệp vụ cụ thể để từ đó có thể đảm bảo được các
chức năng của trang web đó được thiết kế sao cho phù hợp với nhu cầu, mong muốn của
khách hàng nhất. Dưới đây là một số những yêu cầu cụ thể: +) Yêu cầu môi trường:
● Hệ điều hành: trang web cần được thiết kế để chạy trên mọi hệ điều hành khác nhau như Windows, macOS,..
● Trình duyệt web: Trang web phải được thiết kế để hiển thị đầy đủ và tương thích trên
mọi trình duyệt web khác nhau như Google, Chrome,...
● Ngôn ngữ lập trình : HTML, CSS, JavaScript,..
● Cơ sở dữ liệu: cần sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu và các thông tin
liên quan đến sản phẩm, đơn hàng, khách hàng,..
● Phần mềm máy chủ: cần sử dụng Apache để đảm bảo ổn định và đáp ứng nhu cầu khách hàng
● Thư viện và framework: sử dụng một số thư viện phổ biến như Lombok, Thymleaf,
Bootstrap, jQuery để tăng tính tương thích và tối ưu hóa trang web lOMoARcPSD| 36067889 +)Yêu cầu giao diện:
Đây là phần đầu tiên mà khách hàng thấy khi truy cập vào trang web nên cần phải
có một giao diện đẹp mắt, thu hút khách hàng, ở phần trang chủ của khách hàng cần
phải hiển thị thêm những sản phẩm mới cập nhật, sản phẩm được mua nhiều nhất,.. để
khách hàng có thể tham khảo trước khi mua hàng.
● Header: được đặt ở đầu trang web, chứa tên của shop giày, các logo, thanh tìm kiếm
sản phẩm và là nơi để người dùng có thể đăng nhập, đăng ký.
● Danh mục sản phẩm: Cần phân rõ các danh mục sản phẩm để khách hàng dễ lựa
chọnvà tìm kiếm sản phẩm phù hợp với nhu cầu của mình.
● Chi tiết sản phẩm: Nên cung cấp đầy đủ thông tin về sản phẩm bao gồm: hình ảnh,
thông tin sản phẩm, giá cả, màu sắc.
● Thanh toán: Trang web bán giày cần cung cấp các phương thức thanh toán đa dạng,
bao gồm thanh toán trực tuyến qua thẻ tín dụng và thanh toán trực tiếp khi nhận hàng.
● Liên hệ: cần có form thông tin để người dùng điền vào khi muốn liên hệ với admin.
● Tra cứu đơn hàng: cung cấp một thanh công cụ để khách hàng có thể tra cứu đơn
hàng của mình thông qua ID đơn hàng.
● Footer: được đặt ở cuối trang web, chứa các liên kết quan trọng khác như thông tin
liên hệ, thanh điều hướng. +)Yêu cầu chức năng:
● Tìm kiếm sản phẩm: trang web cần phải cung cấp tính năng tìm kiếm sản phẩm một
cách nhanh chóng và dễ dàng thông qua từ khóa, mã sản phẩm,...
● Quản lý danh mục sản phẩm: cung cấp thêm tính năng chọn lọc sản phẩm dựa vào
các thông tin như sản phẩm mới nhất, cũ nhất,...
● Quản lý giỏ hàng: cần hiển thị các sản phẩm mà khách hàng đã chọn. Ngoài ra cần
cung cấp các chức năng thêm, sửa, xóa, điều chỉnh số lượng sản phẩm
● Quản lý các đơn đặt hàng: cần cung cấp thông tin chi tiết về đơn hàng, tình trạng đơn
hàng, thông tin khách hàng. Ngoài ra trang quản lý đơn hàng cần cung cấp các công
cụ để xử lý đơn hàng, quản lý vận chuyển và cập nhật trạng thái đơn hàng.
● Quản lý tài khoản: cần cung cấp các công cụ để tạo tài khoản, đăng nhập, quản lý
thông tin cá nhân và mật khẩu.
● Liên hệ: Cần cung cấp các công cụ để liên hệ và hỗ trợ khách hàng bao gồm số điện thoại, email…
● Bảo mật: trang web cần cung cấp tính năng mã hóa dữ liệu để đảm bảo rằng thông tin
khách hàng được bảo vệ và không bị lộ ra bên ngoài.
II.Phân tích thiết kế hệ thống 1.
Phân tích thiết kế CSDL 1.1 Bảng Tên thực thể Tên thuộc tính Kiểu dữ liệu Chú thích admins id varchar Khóa chính lOMoAR cPSD| 36067889 address varchar created_by varchar created_time timestamp email varchar last_updated_by varchar last _updated_time timestamp name varchar password varchar phone varchar role int
Được phân làm 5 vai trò: 1
(Quản lý toàn bộ), 2 (Quản lý
người), 3 (Quản lý sản
phẩm), 4 (quản lý đơn hàng),
5 (quản lý phản hồi người dùng) status bit(1)
Có 2 trạng thái là: 1 (Được
hoạt động) và 0 (Không được hoạt động) username varchar categories id int
Khóa chính, tự tăng từ 1 (Auto Increment) created_by varchar created_time timestamp image longblob last_updated_by varchar lOMoAR cPSD| 36067889 last_updated_time timestamp name varchar status int url varchar feedbacks id int Khóa chính content text created_at timestamp status int email varchar subject varchar first_name varchar last_name varchar other_details id int Khóa chính order_id varchar price double quantity int shoe_id int color varchar size int orders id varchar Khóa chính lOMoAR cPSD| 36067889 address varchar created_time timestamp last_updated_by varchar last_updated_time timestamp note text status int user_id varchar email varchar name varchar phone varchar shoe_details id int Khóa chính color varchar quantity int shoe_id int size int image longblob shoes id int Khóa chính category_id int created_at timestamp created_by varchar description text hot_order int lOMoAR cPSD| 36067889 image longblob last_updated_by varchar price bigint unsigned
Kiểu dữ liệu số nguyên lớn và không chứa số âm promote_price bigint unsigned status int title varchar updated_at timestamp users id varchar Khóa chính address varchar created_at timestamp email varchar name varchar otp varchar password varchar phone varchar status int username varchar created_by varchar created_time timestamp last_updated_by varchar last_updated_time timestamp uuid2 next_val bigint 1.2 Relational Diagram lOMoARcPSD| 36067889
2. Phân tích thiết kế chức năng 2.1 Sơ đồ BFD
2.2 Mô tả chức năng, giao diện và chi tiết luồng a, Admin
Quản lý tài khoản: - Tài khoản Admin
+ Hiển thị thông tin tài khoản gồm:
ID, tên, tên đăng nhập, quyền, địa chỉ, SDT, trạng thái, người tạo tài khoản, thời
gian tạo, người sửa cuối, thời gian sửa lOMoARcPSD| 36067889
+ Thêm tài khoản mới
Giúp thêm tài khoản đăng nhập user + password kèm các thông tin cá nhân cho
người tham gia quản lý web bán giày với từng nhiệm vụ khác nhau từng quyền hạn riêng
+ Sửa, xóa tài khoản cũ:
Giúp người dùng chỉnh sửa thông tin cá nhân, password,... khi có nhu cầu thay đổi phù hợp với nhu cầu lOMoARcPSD| 36067889 Chú ý:
+ Không thể xóa tài khoản đang đăng nhập
+ Chỉ có tài khoản đang đăng nhập mới có thể thay đổi được mật khẩu của mình
Quản lý trạng thái hoạt động tài khoản:
Được hoạt động/ Không được hoạt động
Giúp người quản trị kiểm soát cho phép hoặc vô hiệu hóa quyền truy cập của tài khoản vào trang web
- Phân quyền sử dụng cho tài khoản Admin:
+ Quản lý người: Sử dụng chức năng danh sách tài khoản
Dùng cho nhân viên quản lý tài khoản, người quản lý có quyền kiểm soát các tài khoản
được sử dụng trong cả 2 site admin và user; thêm, xóa, cho phép hoặc vô hiệu quá
quyền truy cập, nắm bắt các thông tin thời tạo, sửa của các người khác lOMoARcPSD| 36067889
+ Quản lý sản phẩm: Sử dụng các chức năng quản lý sản phẩm
Dùng cho nhân viên quản lý kho hàng, người quản lý có quyền quản lý 2 mục, quản lý
danh mục sản phẩm và quản lý Giày, cập nhật các thông tin liên quan đến sản phầm
+ Quản lý đơn hàng: Sử dụng các chức năng mục đơn hàng
Dùng cho nhân viên bán hàng xử lý các đơn hàng, có quyền xem chi tiết đơn hàng khách
đã đặt, xem thông tin chi tiết đơn đặt hàng để liên hệ khách hàng và xử lý đơn đặt hàng lOMoARcPSD| 36067889
+ Quản lý phản hồi: Sử dụng chức năng quản lý phản hồi khách hàng
Dùng cho nhân viên chăm sóc khách hàng có quyền xem, xóa thông tin phản hồi của khách hàng
+ Quản lý toàn bộ: Sử dụng tất cả các chức năng toàn bộ các chức năng. - Tài khoản User
+ Hiển thị thông tin tài khoản gồm: ID, tên, tên đăng nhập, quyền, địa chỉ, SDT, trạng
thái, người tạo tài khoản, thời gian tạo, người sửa cuối, thời gian sửa. Dùng để quản lý
khách hàng đăng nhập vào web lOMoARcPSD| 36067889
+ Thêm tài khoản mới
Hiển thị tài khoản khách hàng đã đăng kí, thêm tài khoản cho khách hàng sử dụng
+ Sửa, xóa tài khoản cũ lOMoARcPSD| 36067889
+ Quản lý trạng thái hoạt động tài khoản:
Được hoạt động/ Không được hoạt động
Quản lý quyền được phép đăng nhập sử dụng tài khoản của khách hàng
Quản lý sản phẩm
- Quản lý danh mục
+ Hiển thị thông tin danh mục: ID, tên danh mục, đường dẫn ảnh, hình ảnh, người tạo,
thời gian tạo, người cập nhật cuối, thời gian cập nhật cuối
+ Cập nhật trạng thái danh mục: Được hoạt động/ Không được hoạt động
+ Thêm, sửa, xóa danh mục lOMoARcPSD| 36067889 - Quản lý giày
+ Hiện thị thông tin giày:
ID, ID danh mục, Tên, Độ ưu tiên, Giá, Ảnh, mô tả sản phẩm, người tạo, thời gian tạo,
người sửa, thời gian người sửa thông tin liên quan đến giày
+ Cập nhật trạng thái mặt hàng: Được hoạt động/ Không được hoạt động
+ Thêm, sửa, xóa giày:
Người quản lý kho có quyền thay đổi thông tin về loại giày cung cấp cho khách hàng từ
size, ảnh cover, tên hãng, màu, mô tả sản phẩm,.... lOMoARcPSD| 36067889
Quản lý đơn hàng ( Order)
Chức năng này gồm 2 thao tác chính: xem đơn hàng và cập nhập trạng thái đơn hàng
+ Hiển thị đơn hàng:
Admin sẽ xem được các thông tin của đơn hàng gồm : ID đơn hàng, người đặt
hàng, Email của người đặt hàng, SDT của người đặt hàng, Địa chỉ của người đặt hàng
+ Cập nhật trạng thái đơn hàng:
Trạng thái đơn hàng gồm: Chờ xác nhận, xác nhận chờ giao, đang giao, giao thành
công, chờ hoàn trả, Đã hoàn trả, Hủy đơn. lOMoARcPSD| 36067889
Admin toàn bộ và Admin đơn hàng có có thể thay đổi trạng thái đơn hàng
Quản lý phản hồi khách hàng (Feedback)
Admin toàn bộ và Admin phản hồi có thể quản lý phản hồi của khách hàng như sau:
Xem thông tin của phản hồi: ID người gửi phản hồi, Tên người gửi phản hồi, Chủ
đề phản hồi, Trạng thái phản hồi, Thời gian gửi phản hồi
Xem thông tin chi tiết của từng phản hồi, xóa phản hồi
Ví dụ: Xem và xóa phản hồi của khách hàng có ID là 19 lOMoARcPSD| 36067889 b, User ● Quản lí tài khoản:
- Khách hàng chưa có sản phẩm đăng kí tài khoản (.../dang-ky), sau khi đăng kí thành
công (không được để trống các thông tin), hệ thống sẽ báo đăng kí thành công và điều
hướng đến trang đăng nhập (.../dang-nhap)
=> Tài khoản User sẽ được lưu lại trong data của máy chủ
- Khi đăng nhập, nhập sai mật khẩu, tên đăng nhập hoặc để trống, hệ thống sẽ báo lỗi và
yêu cầu đăng nhập lại lOMoARcPSD| 36067889
- Phần thông tin tài khoản, người dùng có thể sửa thông tin cá nhân, thay đổi mật khẩu
và theo dõi đơn hàng (.../thong-tin-tai-khoan) ● Quản lý sản phẩm:
- Hiển thị danh sách sản phẩm: khách hàng có thể xem danh sách sản phẩm theo hãng
trong danh mục sản phẩm; xem sản phẩm giảm giá, sản phẩm mới nhất hoặc được mua
nhiều nhất ở trang chủ lOMoARcPSD| 36067889
- Hiện thị chi tiết sản phẩm: ứng với từng sản phẩm có hình ảnh và mô tả chi tiết về sản
phẩm, kèm theo giá, size và màu sản phẩm (.../san-pham/{id sản phẩm})
- Lọc sản phẩm: ở trang “Sản phẩm” khách hàng có thể tìm sản phẩm theo bộ lọc: cũ
nhất, mới nhất, theo thứ tự chữ cái, theo giá cao đến thấp hoặc thấp đến cao
(.../danhsach-san-pham?&filter={yêu cầu lọc}) lOMoARcPSD| 36067889
- Tìm kiếm sản phẩm: trên cùng của trang, khách hàng có thể tìm trực tiếp sản phẩm
bằng từ khóa tên của sản phẩm (.../tim-kiem?search_query={yêu cầu tìm kiếm})
=> Ở đây, phân bậc sẽ là danh mục => hãng => bộ tìm kiếm
VD: /danh-sach-san-pham?danh-muc=adidas&filter=lowhigh
=> Với trường hợp dùng bộ lọc trước danh mục, hệ thống sẽ loại bỏ bộ lọc và chuyển
sang danh mục sản phẩm yêu cầu
- Thêm sản phẩm vào giỏ hàng: khách hàng chọn size và màu sắc mong muốn, sau đó
thêm hàng vào giỏ. Sản phẩm sẽ được lưu vào giỏ hàng, khách hàng có thể tiếp tục
xem sản phẩm hoặc tới trang giỏ hàng thanh toán lOMoARcPSD| 36067889
● Quản lý giỏ hàng: (.../gio-hang)
- Hiển thị sản phẩm đã thêm vào giỏ: người dùng có thể xem sản phẩm và thông tin sản
phẩm đã thêm vào giỏ hàng
- Cập nhật giỏ hàng: khách hàng thêm số lượng, đi mua thêm hoặc xóa sản phẩm => Ở
đây, hệ thống sẽ ghi nhận và lưu lại khi khách hàng chọn “Cập nhật giỏ hàng”
- Tạo đơn hàng: sau khi cập nhật giỏ hàng, khách hàng sẽ tiến đến thanh toán sản phẩm.
Ở đây khách hàng có thể dễ dàng quan sát được giá từng sản phẩm và tổng đơn hàng,
điền các thông tin cần thiết và lựa chọn phương thức thanh toán phù hợp. Sau khi đặt
hàng xong, hệ thống sẽ hiển thị thông tin chi tiết đơn đặt hàng (.../thanh-toan)
=> Phần thông tin đặt hàng sẽ tự động điền thông tin theo thông tin của tài khoản (nếu tài
khoản đã đăng kí và đăng nhập). Người dùng sẽ không phải điền lại nhưng vẫn có thể
chỉnh sửa thông tin nếu cần thiết lOMoARcPSD| 36067889
- Khi bấm “Đặt hàng” web sẽ chuyển đến trang đặt hàng thành công và hiển thị thông tin đơn hàng
● Quản lí đơn đặt hàng: tra cứu thông tin, trạng thái đơn hàng qua ID mã đơn hàng, hệ
thống sẽ hiển thị thông tin chi tiết của đơn hàng, thời gian đặt hàng, đặc biệt khách
hàng có thể theo dõi trạng thái đơn hàng (.../tra-cuu-don-hang/{id đơn hàng}) ● Liên hệ phản hồi: lOMoARcPSD| 36067889
- Nhập thông tin và nội dung phản hồi trực tiếp trên web cho shop qua trang Liên hệ (/lien-he)
- Ngoài ra, có thể liên hệ qua email hoặc SĐT ở chân trang bằng cách nhấn vào button,
sau đó sẽ được điều hướng đến ứng dụng email hoặc gọi điện trên thiết bị
Lưu ý: Tất cả các phần điền thông tin đều yêu cầu, điền email cần đúng dạng email, nội
dung ghi chú không bắt buộc
3. Các chức năng chưa làm được 3.1. Phần đặt hàng lOMoARcPSD| 36067889 -
Phương thức thanh toán: Chưa có thanh toán bằng thẻ ngân hàng, thẻ visa. Mới chỉ
có thanh toán bằng tiền mặt khi nhận hàng (COD). -
Chưa áp dụng được mã giảm giá 3.2. Phần login -
chưa có chức năng quên mất khẩu -
Chưa áp dụng được cookies cho login III.
Cài đặt hướng hướng dẫn sử dụng: 1. JDK 18 (java 18)
Bước 1: Truy cập trang download JDK và chọn download phiên bản JDK phù hợp
với máy và dự án
Bước 2: Nhấn vào link download và tải môi trường về
Bước 3: Sau khi tải xuống hoàn tất. Mở tệp vừa mới tải xuống rồi nhấn Next. Đến hộp
thoại cuối cùng, nếu muốn thay đổi nơi chứa chọn Change, hoàn tất chọn Close lOMoARcPSD| 36067889
Bước 4: Vào cài đặt chọn Edit the system environment variable
Bước 5: chọn Advanced system setting lOMoARcPSD| 36067889
Bước 6: Thêm các thông tin như hình dưới
Bước 7: Vào path ở System variable, chọn New và thêm 2 dòng như hình. Lưu ý đưa
đúng đường dẫn ổ chứa thư mục Java. Hoàn thiện chọn OK lOMoARcPSD| 36067889 2. Apache Tomcat
Bước 1: vào trang https://tomcat.apache.org/ để thực hiện cài đặt
Bước 2: Ở phần Tomcat 10.1.10 Released, chọn download
Bước 3: Có thể chọn cách thức tải lOMoARcPSD| 36067889
Bước 4: Tùy ý cài đặt cho phù hợp với môi trường 3. Dbeaver
Tải và cài đặt DBeaver lOMoARcPSD| 36067889
- Truy cập trang chủ của DBeaver và chọn phiên bản phù hợp với hệ điều
hành của bạn và tải xuống. Bạn có thể tải xuống tại dbeaver.io/download/ có
phiên bản miễn phí trên các hệ điều hành Windows, Mac OS X, Linux

- Chọn các tùy chọn cài đặt, bao gồm ngôn ngữ, đặt biểu tượng trên màn
hình, và cấu hình kết nối mạng.
- Nhấn "Next" để tiếp tục và sau đó "Install" để bắt đầu quá trình cài đặt. lOMoARcPSD| 36067889
- Chờ đợi quá trình cài đặt hoàn tất và nhấn "Finish" để kết thúc.
Sau khi hoàn tất, DBeaver sẽ được cài đặt trên máy tính của bạn và bạn có thể mở
nó để bắt đầu sử dụng.
4. Cách cài đặt My SQL 8
Bước 1: Vào trang web tải MySQL Community. Chọn MySQL Community Server.
Vào trang web tải MySQL Community. Chọn MySQL Community Server
Bước 2: Chọn nền tảng máy của bạn và chọn Go to Download Page. lOMoARcPSD| 36067889
Chọn nền tảng máy của bạn và chọn Go to Download Page
Bước 3: Chọn bản Community với dung lượng lớn hơn và chọn Download.
Chọn bản Community với dung lượng lớn hơn và chọn Download
Bước 4: Tại trang tiếp theo, chọn No thanks, just start my download. lOMoARcPSD| 36067889
Tại trang tiếp theo, chọn No thanks, just start my download
Bước 5: Chọn nơi tải về và chọn Save.
Chọn nơi tải về và chọn Save
Bước 6: Sau khi tải về nhấn đúp vào file vừa tải và đợi một chút để chương trình chuẩn bị cài đặt. lOMoARcPSD| 36067889
Sau khi tải về nhấn đúp vào file vừa tải và đợi một chút để chương trình chuẩn bị cài đặt
Bước 7: Chọn loại cài đặt theo nhu cầu sử dụng của bạn và chọn Next.
Chọn loại cài đặt theo nhu cầu sử dụng của bạn và chọn Next
Bước 8: Nhấn Next. lOMoARcPSD| 36067889 Nhấn Next
Bước 9: Bộ cài hiển thị danh sách các gói sẽ được cài vào, chọn Execute.
Bộ cài hiển thị danh sách các gói sẽ được cài vào, chọn Execute
Bước 10: Đợi một chút để chương trình kiểm tra cài đặt và chọn Next. lOMoARcPSD| 36067889
Đợi một chút để chương trình kiểm tra cài đặt và chọn Next
Bước 11: Bộ cài đặt tiếp tục tới phần cấu hình MySQL Server, chọn Next.
Bộ cài đặt tiếp tục tới phần cấu hình MySQL Server, chọn Next
Bước 12: Chọn tính khả dụng cho nhu cầu cài đặt, chọn Next. lOMoARcPSD| 36067889
Chọn tính khả dụng cho nhu cầu cài đặt, chọn Next
Bước 13: Tại bảng cài đặt mạng, hãy chỉnh theo ý muốn hoặc giữ nguyên như cài đặt
chuẩn của nhà sản xuất và chọn Next.
Tại bảng cài đặt mạng, hãy chỉnh theo ý muốn hoặc giữ nguyên như cài đặt chuẩn của
nhà sản xuất và chọn Next
Bước 14: Tại mục Phương thức chứng thực (Authentication method) chọn đặt mật
khẩu khi sử dụng hay sử dụng chung. Ở đây mình sẽ chọn sử dụng với mật khẩu. Tiếp đến chọn Next. lOMoARcPSD| 36067889
Tại mục Phương thức chứng thực (Authentication method) chọn đặt mật khẩu khi sử dụng hay sử dụng chung
Bước 15: Đặt mật khẩu và xác nhận lại mật khẩu của bạn, tiếp đến chọn Add user để
thêm tài khoản sử dụng.
Đặt mật khẩu và xác nhận lại mật khẩu của bạn, tiếp đến chọn Add user để thêm tài khoản sử dụng
Bước 16: Đặt tên tài khoản và nhập mật khẩu. Kế tiếp chọn Next. lOMoARcPSD| 36067889
Đặt tên tài khoản và nhập mật khẩu. Kế tiếp chọn Next
Bước 17: Chọn Next. Chọn Next
Bước 18: Chọn Next. lOMoARcPSD| 36067889 Chọn Next.
Bước 19: Ở mục Áp dụng cấu hình (Apply configuration), chọn Execute để áp dụng.
Ở mục Áp dụng cấu hình (apply configuration), chọn Execute để áp dụng
Bước 20: Chọn Finish để kết thúc quá trình thiết lập bảo mật. lOMoARcPSD| 36067889
Chọn Finish để kết thúc quá trình thiết lập bảo mật
Bước 21: Tại mục Product Configuration, chọn Next.
Tại mục Product Configuration, chọn Next
Bước 22: Chọn Finish. lOMoARcPSD| 36067889 Chọn Finish
Bước 23: Điền tên, password và chọn Check.
Điền tên, password và chọn Check
Bước 24: Sau khi check thành công, chọn Next. lOMoARcPSD| 36067889
Sau khi check thành công, chọn Next
Bước 25: Chọn Execute. Chọn Execute.
Bước 26: Chọn Finish. lOMoARcPSD| 36067889 Chọn Finish.
Bước 27: Kế kiếp lập lại quá trình xác nhận, chọn Next và chọn Finish để kết thúc quá trình cài đặt.
Kế kiếp lập lại quá trình xác nhận, chọn Next và chọn Finish để kết thúc quá trình cài đặt
Vậy là bạn đã cài đặt MySQL thành công! lOMoARcPSD| 36067889
Vậy là bạn đã cài đặt MySQL thành công! 5.
Visual (esclipse, intellij) - Linh ( làm cách cái đặt visual )
Bước 1: Tải xuống Visual Studio Code
Truy cập trang web chính thức của Visual Studio Code tại địa chỉ:
https://code.visualstudio.com/. Tại trang web này, bạn sẽ thấy nút "Download" (Tải
xuống) để tải về phiên bản phù hợp với hệ điều hành của bạn. Chọn phiên bản phù hợp
và tải xuống tệp cài đặt. lOMoARcPSD| 36067889
Bước 2: Cài đặt Visual Studio Code Sau khi tải xuống tệp cài đặt, hãy mở nó và bắt đầu
quá trình cài đặt. Quá trình cài đặt khá đơn giản và bạn chỉ cần làm theo các hướng dẫn
trên màn hình. Đảm bảo bạn đọc và ch ấp nhận các điều khoản và điều kiện của Visual
Studio Code trước khi tiến hành cài đặt. lOMoARcPSD| 36067889
Bước 3: Tích chọn những ô trong Other Bước 4:
Chọn Next lần lượt ở những bước tiếp theo. lOMoARcPSD| 36067889
Bước 5: Kiểm tra Add to PATH và chọn Install.
Bước 6: Phần mềm VS Code 2023 sẽ được cài đăt. Chọn Finish để kết thúc.̣ lOMoARcPSD| 36067889 6.
Springboot (cách tạo 1 project, thêm các thư viện )
Để dễ dàng tạo 1 project có thể sử dụng spring initializr
- Giao diện của spring initializr
- Chọn phiên bản spring boot 3.1.0, dùng ngôn ngữ java, loại project Maven lOMoARcPSD| 36067889
- Thêm thư viện, gồm có các thư viện sau
- Sau đó chọn GENERATE để hoàn tất việc tạo 1 project lOMoARcPSD| 36067889 IV.
Tài liệu và tham khảo
1. Giáo trình lập trình web
2. Link: https://www.javatpoint.com/spring-mvc-tutorial
3. Link: https://data-fun.com/cai-dat-mysql/?fbclid=IwAR08wyjkOT-
a7bLrWTU04AaQZTvKTWLKVNpcu7-ZW4If_irYMUShJKYObGw
4. Web: https://www.w3schools.com/
5. https://www.geeksforgeeks.org/
6. https://viblo.asia/p/huong-dan-spring-security-co-ban-de-hieu-OeVKBdedlkW 7. Chat GPT
V.Phân công công việc STT TÊN THÀNH VIÊN MÃ SINH VIÊ NCÔNG VIỆC XÁC NHẬN 1
Nguyễn Mạnh Cường B21DCTC004 -
Vẽ sơ đồ BFD, phân tích chức năng site (admin) - Làm back-end của admin:
Quản lý sản phẩm và quản lý đơn hàng 2 Trần Trung Kiên B21DCTC057 -
Phân tích thiết kế cơ sở dữ (Nhóm trưởng)
liệu- Làm back-end của admin:
Phần quản lý người và phản hồi - Thiết kế database lOMoAR cPSD| 36067889 3 Lê Thị Phương Linh B21DCTC061 - Mô tả bài toán -
Cài đặt và hướng dẫn sử
dụng- Làm front-end cho toàn bộ project 4 Nguyễn Khánh Ly B21DCTC065 - Làm báo cáo -
Phân tích chức năng (user) - Backend User: Quản lý
giỏ hàng, Liên hệ và phản hồi, Quản lí đơn đặt hàng 5
Cao Thị Hồng Nhung B21DCTC077 - Xác định yêu cầu bài toán
- Backend User: Quản lí sản
phẩm, Quản lí tài khoản