Báo cáo đồ án tốt nghiệp - Thiết kế Website Bán Laptop | Môn Công nghệ thông tin - Trường Cao đẳng Công Nghệ Bách Khoa Hà Nội

lOMoAR cPSD| 59691467 BÁO CÁO
THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LAPTOP
Khoa: Công nghệ thông tin Ngành: CNTT/TKĐH
SINH VIÊN THỰC HIỆN: LÊ THANH TÙNG
MÃ SỐ SINH VIÊN: 2109610165 LỚP: 1621- CNT05
GV HƯỚNG DẪN: ĐINH THỊ THU TRANG
HÀ NỘI, THÁNG 5 NĂM 2024 lOMoAR cPSD| 59691467 Thành viên nhóm:
• Lê Thanh Tùng: làm biểu đồ trình tự, triển khai, thành phần, thiết kế giao
diện trang chủ, chi tiết sản phẩm, danh mục sản phẩm, viết báo cáo
• Nguyễn Thành Đạt: viết báo cáo, phân tích và đặc tả yêu cầu, thiết kế biểu
đồ usecase, biểu đồ lớp, thiết kế CSDL, caì đặt CSDL trên MySQL
• Nguyễn Ngọc Huy: làm biểu đồ trạng thái, hoạt động, thiết kế giao diện
giỏ hàng, thiết kế giao diện đăng nhập, đăng ký, viết báo cáo lOMoAR cPSD| 59691467
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
Hà Nội, Ngày ..... tháng ..... năm 20....
PHIẾU NHẬN XÉT THỰC TẬP
Họ tên sinh viên (nhóm): Lê Thanh Tùng.................Lớp-khóa: 1621-CNT05-K21
Ngày bắt đầu:19-02-2024............................ngày kết thúc: 12-05-2024........................
Nội dung thực tập: Thiết kế và xây dựng website bán laptop........................................
.......................................................................................................................................
.......................................................................................................................................
1. Nhận xét của GVHD về chất lượng công việc được giao: Các công việc được giao:  Hoàn thành xuất sắc  Khá  Yếu  Tốt  Trung bình
Hoàn tất công việc được giao:
 Hoàn thành đúng  Thỉnh thoảng đúng  Không đúng thời hạn
Tính hữu ích của đợt thực tập với cơ quan
 Giúp ích nhiều  Giúp ích ít  Không giúp ích mấy cho cơ quan
2. Nhận xét của GVHD về cá nhân sinh viên:
2.1 Năng lực chuyên môn được sử dụng vào công việc được giao ở mức:  Giỏi  Khá  Trung bình  Yếu
2.2 Tinh thần, thái độ đối với công việc được giao:  Tích cực  Bình thường  Thiếu tích cực
2.3 Đảm bảo kỷ luật lao động (giờ giấc lao động, nghỉ làm,...):  Tốt  Trung bình  Kém
2.4 Khả năng sử dụng phần mềm văn phòng (office):  Giỏi  Khá  Trung bình  Yếu
2.5 Khả năng sử dụng Ngoại ngữ chuyên ngành (nếu có):  Giỏi  Khá  Trung bình  Yếu
3. Nhu cầu nhân lực của cơ quan (kiến thức, kỹ năng, số lượng):.........................
.......................................................................................................................................................
.......................................................................................................................................................
4. Các nhận xét khác (nếu có):
...............................................................................................................................................................
...............................................................................................................................................................
............................................................................................................................................................... lOMoAR cPSD| 59691467 5. Đánh giá:
a. Điểm chuyên cần, tác phong và đạo đức (Đạt/Không
đạt):.................................
b. Điểm thực tập (GVHD đánh
giá):....................................................................... Cơ quan/Đơn vị (Ký và ghi rõ họ tên) GVHD
(Ký và ghi rõ họ tên) lOMoAR cPSD| 59691467
BẢN KẾ HOẠCH THỰC TẬP TỐT NGHIỆP CÁ NHÂN
Họ và tên SV: Lê Thanh Tùng............................................Lớp-khóa:1621CNT05-K21
Số ĐT:0375511896.................................Email: leetungg03@gmail.com.......................
1. Nội dung thực tập: Thiết kế và xây dựng website bán laptop................................
.........................................................................................................................................
.........................................................................................................................................
2. Yêu cầu:......................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
3. Kế hoạch thực hiện Ngày
Công việc triển khai cụ thể
Kết quả đạt được Ghi chú thực hiện
(theo tỷ lệ %) 11/3/2024 - Mô tả bài toán 100%
- Phân tích và đặc tả yêu cầu 18/3/2024
- Phân tích và thiết kế hệ thống 100%
- Thiết kế cơ sở dữ liệu 25/3/2024 -
Cài đặt xong cơ sở dữ liệu trên 100% MySQL 1/4/2024
- Xây dựng và phát triển giao 100% diện 8/4/2024 -
Xây dựng API cần thiết cho đề 100% tài
4. Nội dung chi tiết thực hiện chi tiết
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
......................................................................................................................................... lOMoAR cPSD| 59691467
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
.........................................................................................................................................
Hà Nội, ngày tháng năm 20
Xác nhận của Cán bộ hướng dẫn Sinh viên
(ký, ghi rõ họ và tên)
(ký, ghi rõ họ và tên)
CHƯƠNG I: KHẢO SÁT HỆ THỐNG
1.1 Mô tả về môi trường hoạt động lOMoAR cPSD| 59691467
1.1.1 Môi trường Phát triển: •
Ngôn ngữ lập trình: Sử dụng các ngôn ngữ lập trình như HTML, CSS,
JavaScript cho phần frontend và Node.js cho phần backend. •
Framework: Sử dụng các framework như React.js cho frontend và Express.js
cho backend để tạo ra một ứng dụng web động và hiệu quả. •
Cơ sở dữ liệu: Sử dụng MongoDB làm cơ sở dữ liệu để lưu trữ thông tin về sản
phẩm, người dùng và đơn hàng. •
Môi trường phát triển tích hợp (IDE): Sử dụng các IDE như Visual Studio
Code, Sublime Text hoặc Atom để phát triển và chỉnh sửa mã nguồn.
1.1.2 Môi trường Sản xuất: •
Hệ điều hành: Triển khai trên các hệ điều hành như Linux hoặc Windows Server. •
Máy chủ web: Sử dụng các máy chủ web như Apache hoặc Nginx để phục vụ trang web. •
Dịch vụ đám mây: Triển khai trên các dịch vụ đám mây như Amazon Web
Services (AWS), Microsoft Azure hoặc Google Cloud Platform (GCP) để đảm
bảo tính sẵn sàng và mở rộng dễ dàng khi cần thiết. •
Bảo mật: Cài đặt các biện pháp bảo mật như SSL/TLS để bảo vệ thông tin cá
nhân và thanh toán của người dùng. •
Quản lý phiên bản: Sử dụng các công cụ quản lý phiên bản như Git để theo dõi và quản lý mã nguồn.
1.2 Khảo sát bài toán
Bài toán: Thiết kế và Xây dựng Website Bán Laptop 1.2.1 Mô tả: •
Mục tiêu: Xây dựng một trang web thương mại điện tử chuyên bán laptop, cung
cấp cho người dùng một nền tảng để xem, mua sắm và đặt hàng các sản phẩm laptop. 1.2.2 Yêu cầu: •
Hiển thị danh sách sản phẩm laptop: Trang web cần hiển thị danh sách các sản
phẩm laptop với thông tin như hình ảnh, giá cả, thông số kỹ thuật và đánh giá. •
Chi tiết sản phẩm: Người dùng có thể xem thông tin chi tiết về từng sản phẩm
bao gồm các tính năng, đặc điểm kỹ thuật, và mô tả. •
Thêm vào giỏ hàng: Cho phép người dùng thêm sản phẩm vào giỏ hàng và điều
hướng đến trang giỏ hàng để xem và quản lý đơn hàng. •
Thanh toán đơn hàng: Cung cấp giao diện thanh toán để người dùng có thể
nhập thông tin thanh toán và hoàn tất quy trình mua hàng. •
Quản lý người dùng: Hỗ trợ đăng ký, đăng nhập và quản lý tài khoản cho người dùng. 1.2.3 Phân tích: •
Nền tảng công nghệ: Sử dụng Node.js và React.js để phát triển cả frontend và
backend của trang web với MongoDB là cơ sở dữ liệu. lOMoAR cPSD| 59691467 •
Thiết kế giao diện người dùng: Tạo giao diện thân thiện với người dùng, dễ sử dụng và trực quan. •
Tối ưu hóa trải nghiệm người dùng: Đảm bảo trang web hoạt động mượt mà và
có thời gian tải nhanh, đồng thời tối ưu hóa trải nghiệm mua sắm trực tuyến.
1.2.4 Triển khai và Kiểm tra: •
Triển khai trang web trên môi trường sản xuất sau khi đã kiểm tra kỹ lưỡng và
đảm bảo tính ổn định. •
Tiến hành kiểm tra chức năng và hiệu suất của trang web để đảm bảo rằng tất cả
các tính năng hoạt động đúng và hiệu quả.
1.2.5 Quản lý và Phát triển: •
Liên tục cập nhật và phát triển trang web để cải thiện trải nghiệm người dùng
và tăng tính linh hoạt và tính năng của nền tảng. •
Theo dõi và phản hồi từ phía người dùng để thúc đẩy sự phát triển và cải thiện liên tục của trang web.
1.3 Yêu cầu đề tài
1.3.1: Mô tả bài toán Mô tả yêu cầu: •
Tạo một liên kết trên trang web, trong đó có một biểu tượng (icon) và một đoạn văn bản (chữ). •
Yêu cầu có sự khoảng cách giữa biểu tượng và văn bản để tạo ra một bố cục hài hòa và dễ nhìn. Chức năng: •
Tạo ra một liên kết trực quan và dễ nhận biết cho người dùng. •
Hiển thị một biểu tượng hình ảnh kèm theo một đoạn văn bản mô tả chức năng
hoặc nội dung của liên kết.
Yêu cầu kỹ thuật: •
Sử dụng ngôn ngữ đánh dấu HTML để tạo các phần tử cần thiết: , (biểu
tượng) và (văn bản). •
Sử dụng CSS để tùy chỉnh kiểu dáng của liên kết, bao gồm cả biểu tượng và
văn bản, và tạo khoảng cách giữa chúng.
Điều kiện tiên quyết: •
Đảm bảo rằng trang web đã tích hợp thư viện biểu tượng (ví dụ: Font
Awesome) để sử dụng biểu tượng. •
Cần có kiến thức cơ bản về HTML và CSS để triển khai yêu cầu.
Yêu cầu không chức năng: •
Liên kết phải có sự tương tác và có thể nhận dạng dễ dàng. •
Biểu tượng và văn bản phải tương thích với giao diện và mục tiêu trang web.
1.3.2: Phân tích và đặc tả yêu cầu
A. Yêu cầu chức năng lOMoAR cPSD| 59691467
1. Cho phép cập nhật hàng vào CSDL.
2. Hiển thị danh sách các mặt hàng theo từng loại.
3. Hiển thị hàng hóa khách hàng đã chọn mua.
4. Quản lý đơn đặt hàng.
5. Cập nhật hàng hóa, nhà sản xuất, loại hàng. 6. Xử lý đơn hàng.
7. Thống kê các khách hàng mua trong ngày.
Hệ thống có 2 phần: •
Phần khách hàng: là những người có nhu cầu mua sắm hàng hóa. Chức năng bao gồm: •
Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua. •
Đăng ký, đăng nhập, xem các thông tin, khuyến mãi trên trang web. •
Phần quản trị viên: là người có quyền kiểm soát mọi hoạt động của hệ thống. Chức năng bao gồm: •
Cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tài khoản khách hàng, slider. •
Tiếp nhận kiểm tra đơn đặt hàng của khách, hiển thị đơn đặt hàng. B. Yêu cầu phi chức năng •
Trang web phải được thiết kế dễ hiểu, giao diện dễ dùng và hấp dẫn. •
Cung cấp thông tin quảng cáo hấp dẫn và tin tức khuyến mãi. •
Đảm bảo an toàn thông tin khách hàng trong quá trình thanh toán. •
Tích hợp nhiều phương thức thanh toán. •
Luôn đổi mới và hấp dẫn.
CHƯƠNG II: PHÂN TÍCH HỆ THỐNG
2.1 Phân tích chức năng hệ thống
2.1.1 Xác định các Actor và Usecase tổng quát của hệ thống A. Các actor
- Actor là một thực thể hoặc hệ thống bên ngoài tương tác với hệ thống mà bạn đang
phân tích hoặc thiết kế. Một actor không nhất thiết phải là một con người, mà có thể lOMoAR cPSD| 59691467
là một hệ thống, một máy móc, hoặc một thành phần khác của môi trường xung quanh. - Ký hiệu : STT Actor Use case 1 Quản trị viên - Đăng nhập
- Chức năng quản lý sản phẩm - Quản lý người dùng 2 Khách hàng - Đăng nhập - Đăng ký
- Chức năng giỏ hàng và thanh toán
- Tìm kiếm sản phẩm, mua bán Hình 5
B. Các usecase tổng quát của hệ thống
- Use case là một kỹ thuật phân tích và thiết kế trong lĩnh vực phát triển phần mềm.
Nóđược sử dụng để mô tả các hành vi của hệ thống từ quan điểm của người sử dụng
và làm rõ các yêu cầu và chức năng của hệ thống. - Ký hiệu : Hình 6 lOMoAR cPSD| 59691467
2.1.6: Biểu đồ usecase
A. Chức năng đăng nhập, đăng ký Hình 7
Đăng nhập: o Tác nhân (Actor): Người dùng o Mô tả: Người
dùng muốn truy cập vào tài khoản đã đăng ký. o Hành động: lOMoAR cPSD| 59691467 
Người dùng nhập email và mật khẩu 
Hệ thống kiểm tra thông tin đăng nhập 
Nếu thông tin đúng, hệ thống cho phép truy cập vào tài khoản 
Người dùng được đưa đến trang chính sau khi đăng nhập thành công
Đăng ký: o Tác nhân (Actor): Người dùng o Mô tả: Người
dùng muốn tạo tài khoản mới trên hệ thống. o Hành động: 
Người dùng nhập thông tin cá nhân (tên, email, mật khẩu, v.v.). 
Hệ thống kiểm tra tính hợp lệ của thông tin. 
Nếu thông tin hợp lệ, hệ thống tạo tài khoản mới. 
Người dùng nhận thông báo xác nhận đăng ký.
B. Chức năng đổi mật khẩu Hình 8 •
Tác nhân (Actor): Người dùng •
Mô tả: Người dùng muốn thay đổi mật khẩu hiện tại của họ. •
Hành động: o Người dùng đăng nhập vào hệ thống.
o Chọn tùy chọn “Đổi mật khẩu”. o Nhập mật khẩu hiện tại và
mật khẩu mới. o Hệ thống kiểm tra tính hợp lệ của mật khẩu mới.
o Nếu mật khẩu mới hợp lệ, hệ thống cập nhật mật khẩu và thông báo thành công.
C. Chức năng quản lý giỏ hàng, thanh toán lOMoAR cPSD| 59691467 Hình 9
1. Quản lý giỏ hàng (Manage Cart):
o Tác nhân (Actor): Người dùng
o Mô tả: Người dùng muốn thêm, xóa hoặc chỉnh sửa các sản phẩm
trong giỏ hàng. o Hành động: 
Người dùng xem danh sách sản phẩm trong giỏ hàng. 
Thêm sản phẩm mới vào giỏ hàng. 
Xóa sản phẩm khỏi giỏ hàng. 
Cập nhật số lượng hoặc thuộc tính của sản phẩm trong giỏ hàng.
2. Thanh toán (Checkout):
o Tác nhân (Actor): Người dùng o Mô tả: Người dùng muốn
thanh toán và hoàn tất đơn hàng. o Hành động: 
Người dùng chọn chức năng thanh toán. 
Form thanh toán xuất hiện, hệ thống hiển thị các yêu cầu thanh toán. 
Người dùng nhập thông tin cá nhân (họ tên, số tài khoản,
phương thức thanh toán, địa chỉ email, v.v.).  Chọn gửi thông tin.
3. Xóa sản phẩm o Tác nhân (Actor): Người dùng o Mô tả: Người dùng
muốn xóa những mặt hàng không cần thiết.
o Hành động: chọn vào ô xóa sản phẩm cạnh sản phẩm cần xóa,
bấm xóa, sản phẩm sẽ tự biến mất khỏi giỏ hàng D. Chức năng
quản lý sản phẩm lOMoAR cPSD| 59691467 Hình 10
1. Thêm thông tin sản phẩm (Add Product):
o Tác nhân (Actor): Người quản lý
o Mô tả: Cho phép người quản lý thêm thông tin về một sản phẩm mới
vào hệ thống. o Hành động: 
Người quản lý chọn “Thêm sản phẩm” từ giao diện quản lý sản phẩm. 
Hệ thống hiển thị biểu mẫu hoặc giao diện để nhập thông tin sản phẩm mới. 
Người quản lý điền thông tin liên quan đến sản phẩm, bao gồm:  Tên sản phẩm 
Mã số sản phẩm (nếu có)  Mô tả sản phẩm  Giá sản phẩm  Danh mục sản phẩm 
Thông tin kỹ thuật (nếu cần) 
Hệ thống kiểm tra thông tin và thêm sản phẩm mới vào cơ sở dữ liệu. 
Người quản lý xác nhận việc thêm sản phẩm. 
Hệ thống thông báo kết quả thành công và hiển thị thông tin
về sản phẩm đã được thêm.
2. Sửa thông tin sản phẩm (Edit Product):
o Tác nhân (Actor): Người quản lý
o Mô tả: Cho phép người quản lý thay đổi thông tin của một sản phẩm
trong hệ thống. o Hành động: lOMoAR cPSD| 59691467 
Người quản lý chọn “Sửa thông tin sản phẩm” từ giao diện quản lý sản phẩm. 
Hệ thống hiển thị danh sách sản phẩm có sẵn. 
Người quản lý chọn sản phẩm cần chỉnh sửa. 
Hệ thống hiển thị biểu mẫu hoặc giao diện để cập nhật thông tin sản phẩm. 
Người quản lý thay đổi thông tin cần sửa (ví dụ: giá, mô tả, danh mục). 
Hệ thống kiểm tra thông tin và cập nhật sản phẩm trong cơ sở dữ liệu. 
Người quản lý xác nhận việc sửa thông tin sản phẩm.  Hệ thống
thông báo kết quả thành công.
3. Xóa sản phẩm (Delete Product):
o Tác nhân (Actor): Người quản lý o Mô tả: Cho phép người quản
xóa một sản phẩm trong hệ thống. o Hành động: 
Người quản lý chọn “xóa sản phẩm” từ giao diện quản lý sản phẩm. 
Người quản lý xác nhận việc xóa sản phẩm.  Hệ thống thông
báo kết quả thành công.
4. Quản lý người dùng (User management):
o Tác nhân (Actor): Người quản lý o Mô tả: Cho phép người quản
xóa một sản phẩm trong hệ thống.
o Hành động: có thể xem thông tin người dùng, chặn hoặc xóa người dùng
2.1.7: Biểu đồ lớp
A. Biểu đồ lớp đối với ca sử dụng mua bán hàng lOMoAR cPSD| 59691467 Hình 11
2.1.8: Biểu đồ hoạt động lOMoAR cPSD| 59691467 Hình 12
1. Tìm kiếm sản phẩm (Search Product):
o Tác nhân (Actor): Người dùng o Mô tả: Người dùng
muốn tìm kiếm sản phẩm trên trang web. o Hành động: 
Người dùng nhập từ khóa tìm kiếm (ví dụ: “laptop Dell”, “laptop Samsung”). 
Hệ thống hiển thị danh sách sản phẩm phù hợp với tìm kiếm. 
Sau khi lập đơn mua hàng với sản phẩm cần thiết, người dùng sẽ
xem xét yêu cầu, nếu phù hợp thì sẽ sang bước tiếp theo, còn
không thì sẽ yêu cầu chọn sản phẩm khác lOMoAR cPSD| 59691467
2. Thanh toán (Checkout):
o Tác nhân (Actor): Người dùng o Mô tả: Người dùng
muốn thanh toán và hoàn tất đơn hàng. o Hành động: 
Người dùng chọn chức năng thanh toán. 
Hệ thống hiển thị form thanh toán và yêu cầu thông tin cá nhân
(họ tên, địa chỉ, phương thức thanh toán, v.v.). 
Người dùng nhập thông tin và xác nhận thanh toán.
2.1.9: Biểu đồ trình tự
A. Biểu đồ trình tự đối với ca sử dụng mua bán hàng Hình 13
Biểu đồ trình tự mua bán hàng
1.Tìm kiếm sản phẩm (Search Product): o Tác nhân (Actor):
Người dùng o Mô tả: Người dùng muốn tìm kiếm sản phẩm
trên trang web. o Hành động: lOMoAR cPSD| 59691467 
Người dùng nhập từ khóa tìm kiếm (ví dụ: “laptop Dell”, “laptop Samsung”). 
Hệ thống hiển thị danh sách sản phẩm phù hợp với tìm kiếm. 
Sau khi lập đơn mua hàng với sản phẩm cần thiết, người dùng sẽ
xem xét yêu cầu, nếu phù hợp thì sẽ sang bước tiếp theo, còn
không thì sẽ chọn sản phẩm khác
2.Thanh toán (Checkout): o Tác nhân (Actor): Người dùng o
Mô tả: Người dùng muốn thanh toán và hoàn tất đơn hàng. o Hành động: 
Người dùng chọn chức năng thanh toán. 
Hệ thống hiển thị form thanh toán và yêu cầu thông tin cá nhân
(họ tên, địa chỉ, phương thức thanh toán, v.v.). 
Người dùng nhập thông tin và xác nhận thanh toán, nhận phiếu bảo hành. 
Nếu có sai sót trong quá trình thanh toán, hệ thống sẽ báo lỗi,
không chấp nhận thanh toán và sau đó hủy thanh toán
2.1.10: Biểu đồ trạng thái A. Thêm khách hàng Hình 14
Thêm khách hàng (Add Customer):
o Tác nhân (Actor): Nhân viên bán hàng o Mô tả: Nhân viên muốn
thêm thông tin khách hàng mới vào hệ thống. o Hành động: 
Nhân viên nhập thông tin khách hàng (tên, số điện thoại, địa chỉ, v.v.). 
Hệ thống kiểm tra tính hợp lệ của thông tin. lOMoAR cPSD| 59691467 
Nếu thông tin hợp lệ, hệ thống tạo khách hàng mới và gán một mã khách hàng. 
Nhân viên xác nhận việc thêm khách hàng.  Hệ thống thông
báo kết quả thành công.
B. Sửa thông tin khách hàng Hình 15
Sửa thông tin khách hàng (Edit Customer Information):
o Tác nhân (Actor): Nhân viên bán hàng
o Mô tả: Nhân viên muốn cập nhật thông tin của một khách hàng trong
hệ thống. o Hành động: 
Nhân viên chọn khách hàng cần sửa thông tin. 
Hệ thống hiển thị biểu mẫu hoặc giao diện để cập nhật thông tin khách hàng. 
Nhân viên thay đổi thông tin cần sửa (ví dụ: số điện thoại, địa chỉ, email). 
Hệ thống kiểm tra thông tin và cập nhật khách hàng trong cơ sở dữ liệu. 
Nhân viên xác nhận việc sửa thông tin khách hàng. 
Hệ thống thông báo kết quả thành công.
C. Xóa thông tin khách hàng