Đề tài xây dựng website bán laptop và phụ kiện

Chính vì lẽ đó, quyết định chọn đề tài "Xây dựng web bán laptop vàphụ kiện bằng Node.js" không chỉ là sự lựa chọn cá nhân của nhóm em màcòn là sự đánh giá cao về tiềm năng mà Node.js man

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN

PHẦN

ĐỀ TÀI:

XÂY DỰNG WEBSITE BÁN LAPTOP VÀ PHỤ KIỆN

Sinh viên thực hiện : HUỲNH NHẬT LINH

VŨ TRUNG HIẾU Giảng viên hướng dẫn : ĐỖ ĐỨC CƯỜNG

Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D15CNPM3

Khóa : 2020 – 2025

Hà Nội, tháng 12 năm 2023

PHIẾU CHẤM ĐIỂM

Sinh viên thực hiện:

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

MỤC LỤC

Tran

g

CHƯƠNG 1 GIỚI THIỆU CHUNG

1.1 Giới thiệu về NodeJS

1.2 Giới thiệu về ReactJS

1.3 Giới thiệu hệ quản trị cơ sở dữ liệu MongoDB, MySQL, Workbench

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ THIẾT KẾ HỆ THỐNG

2.1 Khảo sát hiện trạng

2.2 Mô tả bài toán

2.2.1 Các chức năng hệ thống

2.2.2 Yêu cầu về chức năng

2.2.3 Yêu cầu phi chức năng

2.2.4 Công cụ lập trình và ngôn ngữ sử dụng

2.3 Đặc tả chức năng của hệ thống

2.3.1 Usecase tổng quát

2.3.2 Mô tả usecase

2.3.3 Biểu đồ tuần tự

CHƯƠNG 3 GIAO DIỆN WEBSITE

3.1 Giao diện đăng nhập của admin

3.2 Giao diện đăng nhập, đăng ký của khách hàng

3.3 Giao diện Admin

3.4 Giao diện trang chủ

3.5 Giao diện giỏ hàng

KẾT LUẬN

TÀI LIỆU THAM KHẢO

LỜI MỞ ĐẦU 1.Lý do chọn đề tài

Trong thời đại công nghệ ngày nay, sự phổ biến của mạng Internet đã

mở ra những cơ hội mới cho việc kinh doanh trực tuyến Việc xây dựng mộttrang web bán hàng không chỉ là một cơ hội kinh doanh mà còn là thách thứcđối với nhóm em, những người muốn kết hợp sự sáng tạo và kỹ năng lậptrình

Chính vì lẽ đó, quyết định chọn đề tài "Xây dựng web bán laptop vàphụ kiện bằng Node.js" không chỉ là sự lựa chọn cá nhân của nhóm em màcòn là sự đánh giá cao về tiềm năng mà Node.js mang lại trong việc phát triểnứng dụng web đa dạng và mạnh mẽ Node.js không chỉ là một nền tảng phổbiến mà còn giúp nhóm em tối ưu hóa hiệu suất và đáp ứng nhanh chóng, tạo

ra trải nghiệm người dùng tốt nhất

Nhóm em hy vọng rằng dự án này không chỉ mang lại sự hiểu biết sâurộng về Node.js mà còn là một bước tiến quan trọng trong việc áp dụng kiếnthức lý thuyết vào thực tế, từ đó đạt được kết quả tích cực trong lĩnh vực pháttriển web và thương mại điện tử

2.Cấu trúc của báo cáo

Cấu trúc báo cáo sẽ chia thành 3 chương chính:

Chương 1: Giới thiệu chung

Chương 2: Khảo sát hệ thống và thiết kế hệ thống

Chương 3: Giao diện website

CHƯƠNG 1 GIỚI THIỆU CHUNG 1.1 Giới thiệu về NodeJS

NodeJS là nền tảng phía máy chủ được xây dựng trên công cụJavaScript của Google Chrome (V8 Engine) Node.js được phát triển bởiRyan Dahl trong năm 2009 và phiên bản mới nhất của nó là v0.10.36 Địnhnghĩa của Node.js được cung cấp bởi https://nodejs.org

Node.js là môi trường thời gian chạy đa nền tảng nguồn mở để pháttriển các ứng dụng mạng và phía máy chủ Các ứng dụng Node.js được viếtbằng JavaScript và có thể chạy trên OS X, Microsoft Windows và Linux.Node.js cũng cung cấp một thư viên phong phú gồm nhiều mô-đunJavaScript khác nhau giúp đơn giản hóa việc phát triển các ứng dụng webbằng cách sử dụng Node.js đến một mức độ lớn

Node.js = Runtime Environment + JavaScript Library

*Ưu điểm của NodeJS

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầuđồng thời

- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

- Chia sẻ cùng code ở cả phía client và server

- NPM(Node Package Manager) và module Node đang ngày càngphát triển mạnh mẽ

- Cộng đồng hỗ trợ tích cực

- Cho phép stream các file có kích thước lớn

*Nhược điểm của NodeJS

- Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế

mô hình đa lõi trong các phần cứng cấp server hiện nay

- Khó thao tác với cơ sử dữ liệu quan hệ

- Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

xử lý giao tiếp trong thời gian thực Nền tảng này có thể dễ dàng

mở rộng quy mô và thường dùng để tạo ra các chatbot Bên cạnh

đó, các tính năng liên quan đến ứng dụng trò chuyện như: chatnhiều người, thông báo đẩy,… cũng có thể dễ dàng được bổ sungnhờ NodeJS

- Internet of Things (IoT): Các ứng dụng IoT thường bao gồmnhiều bộ cảm biến phức tạp để gửi những phần dữ liệu nhỏ.Node.JS là một lựa chọn lý tưởng để xử lý các yêu cầu đồng thờinày với tốc độ cực nhanh

- Truyền dữ liệu: Netflix là một trong số những công ty lớn trênthế giới chuyên sử dụng Node.JS cho mục đích truyền dữ liệu

Sở dĩ vì đây là một nền tảng nhẹ và cực nhanh, đồng thời còncung cấp một API chuyên dùng để stream

- Các SPA (Single-page application) phức tạp: Trong SPA, toàn

bộ ứng dụng được load vào trong một trang duy nhất, do đó sẽ cómột số request được thực hiện trong nền Vòng lặp sự kiện (eventloop) của Node.JS cho phép xử lý các request theo hướng non-blocking

- Các ứng dụng REST dựa trên API: JavaScript được sử dụngtrong cả frontend lẫn backend của trang Do đó một server có thể

dễ dàng giao tiếp với frontend qua REST API bằng Node.js Bêncạnh đó, Node.JS còn cung cấp nhiều package như Express.js

hay Koa để việc xây dựng ứng dụng web trở nên dễ dàng hơnbao giờ hết.

1.2 Giới thiệu về ReactJS

ReactJS là môt thư viện JavaScript mã nguồn mở để xây dựng cácthành phần giao diện có thể tái sử dụng với xu hướng Single PageApplication, một trong những đặc điểm tăng hiệu năng cho ứng dụng là côngnghệ sử dụng DOM ảo (Virtual DOM) Nó được tạo ra bởi Jordan Walke,một kĩ sư phần mềm tại Facebook React lần đầu được sử dụng cho ứng dụngNewsfeed của Facebook năm 2011 sau đó được triển khai cho Instagram.Mục tiêu của react chính là đơn giản để phát triển Tất cả trạng thái đềuđược tập trung tại một thời điểm, bằng cách chia giao diện người dùng thànhtập hợp các thành phần (components)

*Ưu điểm của ReactJS

- Phù hợp với đa dạng thể loại website: ReactJS khiến cho việckhởi tạo website dễ dàng hơn bởi vì bạn không cần phải codenhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML

và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùngcho nhiều trường hợp

- Tái sử dụng các Component: Nếu bạn xây dựng các Component

đủ tốt, đủ flexible để có thể thoả các “yêu cầu” của nhiều dự ánkhác nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lạihầu như toàn bộ ở các dự án sau Không chỉ riêng mỗi ReactJS

mà các framework hiện nay cũng đều cho phép chúng ta thựchiện điều đó, ví dụ Flutter chẳng hạn.

- Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đềubiết rằng ReactJS được sử dụng cho việc lập trình website,nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó Nếubạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêmReact Native – một framework khác được phát triển cũng chínhFacebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sửdung lại các Business Logic trong ứng dụng

- Thân thiện với SEO: SEO là một phần không thể thiếu để đưathông tin website của bạn lên top đầu tìm kiếm của Google Bảnchất ReactJS là một thư viện JavaScript, Google Search Enginehiện nay đã crawl và index được code JavaScript, tuy nhiên bạncũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!

- Debug dễ dàng: Facebook đã phát hành 1 Chrome extensiondùng trong việc debug trong quá trình phát triển ứng dụng Điều

đó giúp tăng tốc quá trình release sản phẩm cung như quá trìnhcoding của bạn

- Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào sốliệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạolướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev,Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí ReactDeveloper là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và

độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là nhưthế nào

1.3 Giới thiệu hệ quản trị cơ sở dữ liệu MongoDB, MySQL, Workbench

MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kếtheo kiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linhhoạt cho phép các dữ liệu lưu trên bảng không cần phải tuân theo một dạngcấu trúc nhất định nào Chính do cấu trúc linh hoạt này nên MongoDB cóthể được dùng để lưu trữ các dữ liệu có cấu trúc phức tạp và đa dạng vàkhông cố định (hay còn gọi là Big Data) MongoDB là một cơ sở dữ liệudựa trên Document, trong đó một Collection giữ các Document khác nhau.

Số trường, nội dung và kích cỡ của Document này có thể khác vớiDocument khác.Các thư viện và Framework hỗ trợ

MySQL Server là máy tính hay một hệ các máy tính cài đặt phần mềmMySQL dành cho server để giúp bạn lưu trữ dữ liệu trên đó, để máy khách

có thể truy cập vào quản lý Dữ liệu này được đặt trong các bảng, và cácbảng có mối liên hệ với nhau MySQL server nhanh, an toàn, đáng tin cậy

Phần mềm MySQL cũng miễn phí và được phát triển, phân phối và hỗ trợbởi Oracle Corporation.

MySQL Workbench chính là một chương trình giúp cho người lập trình

có thể giao tiếp với hệ cơ sở dữ liệu MySQL thay vì phải sử dụng các lệnhCommand-line phức tạp và mất thời gian MySQL Workbench được thiết kếđơn giản, dễ sử dụng và có thể thích ứng với nhiều hệ điều hành như làMicrosoft Windowns, Max OS, Linux hay Ubuntu

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ THIẾT KẾ HỆ THỐNG 2.1 Khảo sát hiện trạng

Hiện nay, thị trường thương mại điện tử đang phát triển mạnh mẽ, đặcbiệt là trong lĩnh vực bán laptop và phụ kiện Tuy nhiên, thông tin từ khảo sátcho thấy nhiều trang web hiện vẫn còn tồn tại một số thách thức và cơ hội cầnđược xem xét

Yếu điểm:

Giao diện người dùng: Một số trang web hiện nay vẫn gặp khó khăn

trong việc tối ưu hóa giao diện người dùng Sự phức tạp không cần thiết vàtrải nghiệm người dùng chưa linh hoạt có thể làm giảm hiệu suất và tăng tỷ lệthoát trang

Tích hợp thanh toán: Một số trang web gặp khó khăn trong việc tích

hợp các phương thức thanh toán đa dạng và thuận tiện Điều này có thể ảnhhưởng đến quá trình mua sắm và làm giảm sự tin cậy của người tiêu dùng

Hiệu suất trang web: Một số trang web gặp vấn đề liên quan đến tốc

độ tải trang và khả năng đáp ứng Điều này có thể làm mất người dùng vàgiảm hiệu suất toàn cầu của trang web

Cơ hội:

Tích hợp công nghệ mới: Cơ hội lớn nằm ở việc tích hợp các công

nghệ mới như Node.js để tối ưu hóa hiệu suất và cải thiện trải nghiệm ngườidùng

Phát triển ứng dụng di động: Việc phát triển ứng dụng di động có thể

mở ra một kênh mới để tiếp cận và giữ chân người dùng

Chăm sóc khách hàng: Cơ hội để cải thiện dịch vụ chăm sóc khách

hàng và tạo ra các chương trình khuyến mãi có thể tăng cường trung bình giátrị đơn hàng và sự trung thực của khách hàng

Nhìn chung, với sự thấu hiểu sâu sắc về những yếu điểm và cơ hội này,

có thể tạo ra một chiến lược phát triển mạnh mẽ và đáp ứng nhu cầu ngàycàng tăng của thị trường

2.2 Mô tả bài toán

+ Chọn màu của sản phẩm cần sửa

+ Nhập giá mới cần sửa

+ Nhập giá cũ cần sửa

+ Chọn danh mục phù hợp với sản phẩm cần sửa

+ Tải ảnh sản phẩm lên danh mục cần sửa

- Xóa sản phẩm trong mục sản phẩm

- Quản lý tạo danh mục:

+ Điền tên danh mục muốn thêm

+Sửa danh mục

+Xóa danh mục

- Kiểm tra đơn hàng chờ được duyệt

- Xem thông tin đơn hàng:

+ Chờ giao hàng

+ Đã giao hàng

- Xem thông tin đơn hàng đã hủy

Quản lý đăng xuất khỏi trang admin

- Đăng nhập bằng email và mật khẩu đã tạo

- Xem sản phẩm theo danh mục, màu sắc, giá(thấp->cao)

- Xem thông tin sản phẩm

- Chọn số lượng sản phẩm muốn mua

- Xóa sản phẩm đã đặt trong giỏ hàng

- Đặt giỏ hàng, điền thông tin địa chỉ giao hàng, nhấn nút đặt hàng

- Xem thông tin đơn hàng

Khách hàng đăng xuất tài khoản

2.2.2 Yêu cầu về chức năng

2.2.3 Yêu cầu phi chức năng

- Giao diện thân thiện, dễ dùng, hấp dẫn, dễ thao tác gọn gàng, đơngiản

- Hệ thống chạy đúng chức năng, hiệu năng ổn định

- Đáp ứng hầu hết các yêu cầu của người dùng

2.2.4 Công cụ lập trình và ngôn ngữ sử dụng

- Hệ quản trị cơ sở dữ liệu: MongoDB Cloud

- Công cụ lập trình: Visual Studio Code

- Ngôn ngữ lập trình: NodeJS, ReactJS

2.3 Đặc tả chức năng của hệ thống

Mô tả Cho phép người dùng đăng nhập vào hệ thống để

thực hiện các chức năng tương ứng trong bảng phân quyền

Actor Admin,user

Điều kiện Truy cập link ứng dụng nhưng chưa đăng nhập hoặc sau

khi đăng xuấtTiền điều kiện Có tài khoản trên hệ thống

Hậu điều kiện Đăng nhập thành công

Luồng sự kiện

chính -Hiển thị màn hình đăng nhập

-Người dùng nhập user và password-Hệ thống kiểm tra thông tin đăng nhập-Nếu thành công chuyển đến trang home, nếu sai

thì thông báo và yêu cầu nhập lại user và password

-Kết thúc use caseLuồng sự kiện

phụ -Người dùng bỏ trống tài khoản hoặc mật khẩu, hệ thốngsẽ yêu cầu nhập đầy đủ.

-Người dùng nhập tài khoản mật khẩu đúng định dạng nhưng tài khoản chưa tồn tại

Usecase Đăng xuất

Mô tả Cho phép người dùng đăng xuất

Actor Admin,user

Điều kiện Click chọn chức năng đăng xuất

Tiền điều kiện Đăng nhập thành công bằng tài khoản nhân viên, admin

Hậu điều kiện Thực hiện chức năng thành công

Luồng sự kiện -Người dùng chọn chức năng đăng xuất

-Hiển thị giao diện

Hậu điều kiện Truy cập link ứng dụng thành công

Luồng sự kiện

chính -Hiển thị màn hình đăng ký-Người dùng nhập tên người dùng,email và password

-Hệ thống kiểm tra thông tin vừa nhập-Nếu thành công chuyển đến trang home, nếu sai định dạng thì thông báo và yêu cầu nhập lại tên người dùng, email và password

-Kết thúc use caseLuồng sự kiện

phụ -Người dùng bỏ trống tên người dùng, email hoặc password, hệ thống sẽ yêu cầu nhập đầy đủ.

Điều kiện Click chọn chức năng quản lý sản phẩm

Tiền điều kiện Đăng nhập thành công bằng quyền Admin

Hậu điều kiện Thực hiện thành công

Luồng sự kiện -Admin chọn quản lý sản phẩm

-Hiển thị giao diện quản lý sản phẩm

- Admin chọn thêm, sửa, xóa sản phẩm

-Kết thúc use case

Usecase Quản lý đơn hàng

Tên Quản lý đơn hàng

Mô tả Admin chọn chức năng quản lý đơn hàng để xem, duyệt và

xóa đơn hàng

Điều kiện Click chọn chức năng quản lý đơn hàng

Tiền điều kiện Đăng nhập thành công bằng quyền Admin

Hậu điều kiện Thực hiện thành công

Luồng sự kiện -Admin chọn quản lý đơn hàng

-Hiển thị giao diện quản lý đơn hàng

- Admin chọn duyệt, xóa đơn hàng

-Kết thúc use case

Usecase Quản lý danh mục

Tên Quản lý danh mục

Mô tả Admin chọn chức năng quản lý danh mục để thêm, sửa,

xóa danh mục

Điều kiện Click chọn chức năng quản lý danh mục

Tiền điều kiện Đăng nhập thành công bằng quyền Admin

Hậu điều kiện Thực hiện thành công

Luồng sự kiện -Admin chọn quản lý danh mục

-Hiển thị giao diện quản lý danh mục

- Admin chọn thêm, sửa, xóa danh mục

Điều kiện Click chọn sản phẩm

Tiền điều kiện Đăng nhập thành công bằng tài khoản user

Hậu điều kiện Thực hiện chức năng thành công

Luồng sự kiện -Người dùng chọn sản phẩm

-Hiển thị giao diện sản phẩm

Điều kiện Sản phẩm phải có trong giỏ hàng

Tiền điều kiện Đăng nhập thành công bằng tài khoản user

Hậu điều kiện Thực hiện chức năng thành công

Luồng sự kiện -Người dùng chọn sản phẩm

-Hiển thị giao diện sản phẩm

-Người dùng chọn số lượng sản phẩm

- Kết thúc use case

Usecase Thanh toán

Mô tả Cho phép người dùng thanh toán sản phẩm

Điều kiện Sản phẩm phải có trong giỏ hàng và có số lượng nhất địnhTiền điều kiện Đăng nhập thành công bằng tài khoản user

Hậu điều kiện Thực hiện chức năng thành công

Luồng sự kiện -Người dùng chọn giỏ hàng

-Hiển thị giao diện giỏ hàng

-Người dùng bấm nút thanh toán

-Hiển thị giao diện thanh toán