TIỂU LUẬN môn INTERNET và GIAO THỨC đề tài xây dựng web cửa hàng bán giày nam nữ

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA VIỄN THƠNG I

TIỂU LUẬN KẾT THÚC HỌC PHẦN
MÔN INTERNET VÀ GIAO THỨC
Đề tài: Xây dựng web cửa hàng bán giày nam nữ
Giảng viên: Nguyễn Đình Long
Nhóm:

07

Nhóm lớp:

04

Sinh viên:

Nguyễn Mạnh Dũng

B18DCVT064

Nguyễn Q Đơn

B18DCVT104

Bùi Nhật Anh Quân

B18DCVT336

----Hà Nội, tháng 12 năm 2021---1

MỤC LỤC
Lời nói đầu:............................................................................................................... 3
Danh mục hình ảnh: ............................................................................................... 4
Giới thiệu về ReactJS: ............................................................................................ 5
Xây dựng trang web giày dép nam: ...................................................................... 6
1. Tổng quan về giao diện: ...................................................................................................6
2. Các chức năng dành cho người dùng:..............................................................................8
3. Các chức năng dành cho Admin: ...................................................................................13

Kết luận .................................................................................................................. 16

2


LỜI NĨI ĐẦU
Trong thời đại cơng nghệ ngày càng phát triển, rất nhiều những ứng dụng, thành tựu của
internet đã được áp dụng vào đời sống xã hội, góp phần giúp chúng ta ngày một phát triển ở rất
rất nhiều lĩnh vực khác nhau, cũng như khiến cho cuộc sống trở nên dễ dàng và tiện ích hơn.
Nhất là khi cả thế giới vẫn đang chìm trong cơn khủng hoảng mang tên Covid-19, khiến cho
nhiều nền cơng nghiệp bị đình trệ, rất nhiều các ngành nghề khác nhau không thể phát triển.
Tuy nhiên, đây lại là một cơ hội lớn để internet bùng nổ một cách rộng rãi và đa dạng hơn. Một
trong số các ví dụ điển hình chính là các sàn thương mại điện tử. Đặc biệt, chúng giờ đây đang
là một thị trường cực kì tiềm năng, giúp hạn chế được tiếp xúc giữa người mua và người bán mà
vẫn đảm bảo được nhu cầu cung/cầu hàng hóa giữa hai bên. Trong tương lai, thương mai điện
tử có thể trở thành một phần chủ chốt trong sự phát triển, tăng trưởng kinh tế của nước ta nói
riêng và tồn cầu nói chung.
Trong chương hình học của sinh viên ngành Viễn Thơng năm nay có bộ mơn Internet và
giao thức. Đây là mơn học cực kì quan trọng, giúp cho sinh viên có những nền tảng nhất định
trong việc định hướng và xây dựng được một hệ thống web cũng như các yếu tố khác. Và một

lựa chọn liên quan đến thương mại điện tử là trang web giày dép nam, nhóm chúng em, với vốn
kiến thức đã được thầy Nguyễn Đình Long truyền tải trong học kì vừa rồi, mong muốn mang
đến cho thầy cũng như các bạn một cái nhìn rõ hơn về một hệ thống web bán hàng. Nhóm
chúng em sử dụng ReachJs (một cơng nghệ FrontEnd do Facebook phát triển). Ngồi ra, các
cơng nghệ như Single page application hay cilent side rendering cũng là những thứ bọn em sử
dụng trong hệ thống web của mình.

3


DANH MỤC HÌNH ẢNH
Hình 1: Giao diện trang chủ tổng quan
Hình 2: Giao diện trang chủ tổng quan
Hình 3&4: Giao diện danh mục sản phẩm
Hình 5: Database của sản phẩm
Hình 6: Database của đơn hàng
Hình 7: Tra cứu đơn hàng
Hình 8: Kết quả tra cứu
Hình 9: Giao diện đặt hàng và thanh tốn
Hình 10: Thơng báo đặt đơn hàng thành cơng + mã đơn hàng.
Hình 11: Trạng thái đơn hàng.
Hình 12: Sản phẩm trong giỏ hàng
Hình 13: Trang chủ dành cho admin
Hình 14: Màn hình đăng nhập của admin
Hình 15: Danh sách hàng hóa được khách hàng đặt mua
Hình 16: Giao diện thêm hàng

4

I. Giới thiệu về React (ReactJS)
- React là một framework JavaScript front-end mã nguồn mở miễn phí để xây dựng
giao diện người dùng dựa trên các thành phần UI. Nó được duy trì bởi Meta (trước
được biến đến là Facebook) và một cộng đồng các nhà phát triển và công ty cá nhân.
React có thể được sử dụng như một framework để phát triển các ứng dụng trang đơn
hoặc di động
- Ứng dụng đơn giản và phổ biến nhất của React là tạo lập và duy trì một trang web

-

-

html đơn giản bao gồm các script tag khác nhau
React thuộc lớp View của ứng dụng MVC (Model View Controller)
Để sử dụng React cho một trang web động, chúng ta cần có tùy chọn cho NPM (node
package manager) nằm trong hệ thống NodeJS
Single Page Application (SPA) là ứng dụng web hoặc trang web tương tác với
người dùng bằng cách tự động viết lại trang web hiện tại với dữ liệu mới từ máy chủ
web, thay vì phương pháp mặc định của trình duyệt web tải tồn bộ trang mới. Mục
tiêu là chuyển đổi nhanh hơn để làm cho trang web giống một ứng dụng gốc hơn.
Trong SPA, dữ liệu chỉ thay đổi phụ thuộc vào một vài tương tác cụ thể của người
dung thay vì cập nhật tất cả thành phần trong trang web
Client-side Rendering: Ứng dụng và các trang web được phát triển dưới dạng SPA
thường sử dụng Client-side Rendering để hoạt động
o Những logic đơn giản (validation, đọc dữ liệu, sorting, filtering) nằm ở client
side
o Logic để routing (chuyển trang), render (hiển thị) dữ liệu thì hầu hết nằm ở
client side
o Logic phức tạp (thanh toán, phân quyền) hoặc cần xử lý nhiều (data
processing, report) vẫn nằm ở server side.

5


- Để làm được điều này trang web yêu cầu phải được chia làm 2 phần: front-end và
backend để code
- Áp dụng cho những trang web cần tương tác nhiều

II. XÂY DỰNG TRANG WEB GIÀY DÉP NAM SỬ DỤNG REACTJS
1. Tổng quan về giao diện
.
- Web được tạo với mục đích là bn bán, kinh doanh mặt hàng giày nam nữ.
- Giao diện chủ đạo của web sử dụng tông màu sáng, mang lại cảm giác thoải mái,
tươi mới và đầy sức trẻ.
- Web thiết kế ảnh nền đầu trang là một dãy hình ảnh thay đổi được và các thơng
báo, khuyến mãi nhỏ lẻ chạy bên trên.

Hình 1: Giao diện trang chủ tổng quan

6


Hình 2: Giao diện trang chủ tổng quan
- Khi người dùng click vào mục “Sản phẩm”, sẽ có một list các sản phẩm hiện có
trong cửa hàng.

7


Hình 3&4: Giao diện danh mục sản phẩm

- Ở các mục khác như “Nam”, “Nữ” hay “Sale OFF” cũng được thiết kế tương tự
và ở các trang đều có nút giúp người dùng có thể quay trở về trang chủ (Home).

2. Các chức năng dành cho người dùng
Người dùng sẽ có thể sử dụng được các chức năng sau:
- Tra cứu hàng hóa
- Mua hàng
- Check trong giỏ đồ mà mình đã thêm hàng

Mỗi thao tác sẽ có một database khác nhau như sau:
8


Hình 5: Database của sản phẩm

Hình 6: Và database của đơn hàng

9


Hình 7: Tra cứu đơn hàng

Hình 8: Kết quả tra cứu

10


Hình 9: Giao diện đặt hàng và thanh tốn

Khi đặt hàng thành công, hệ thống sẽ gửi một mã đơn hàng để người dùng có thể

từ mã đơn hàng này theo dõi tình trạng của sản phẩm (đã nhận đơn, đã xuất kho, di
chuyển đến đâu rồi,...).

Hình 10: Thơng báo đặt đơn hàng thành công + mã đơn hàng.

11


Hình 11: Trạng thái đơn hàng.

Ngồi ra, ta có thể thêm các sản phẩm mình ưa thích vào giỏ cũng như kiểm tra
trong giỏ hàng của mình.

Hình 12: Sản phẩm trong giỏ hàng

12


3. Các chức năng dành cho admin

Hình 13: Trang chủ dành cho admin
Admin có thể quản lí web bán hàng của mình bằng cách thêm “/admin” vào đi
đường dẫn link của trang web. Sau đó cần phải đăng nhập bằng tài khoản xác
minh.

Hình 14: Màn hình đăng nhập của admin
Sau khi đăng nhập sẽ chuyển qua trang quản trị. Ở đây, admin có thể làm được các
việc như xem đơn đặt mua, thêm hàng, quản lí và phân phối đơn mua sản phẩm,..
13

g.
Hình 15: Danh sách hàng hóa được khách hàng đặt mua

Ngồi ra, admin có thể chọn thêm hàng ở mục kế bên

Hình 16: Giao diện thêm hàng

14


Ở mục này, nếu muốn thêm sản phẩm nào, admin có thể điền chi tiết về thơng tin
sản phẩm ở các ơ u cầu thơng tin bên dưới. Hình ảnh về sản phẩm sẽ yêu cầu
admin truy cập vào file ảnh tương ứng có trong máy để hiển thị.

Link: /> />
15


KẾT LUẬN
Bộ môn Internet và giao thức của thầy Nguyễn Đình Long đã giúp chúng em rất nhiều
trong việc hiểu được các kĩ thuật làm web cơ bản cũng như các phương pháp xây dựng và hình
thành một hệ thống web, từ đó chúng em có nền tảng vững hơn trong việc tìm tịi và phát triển
bản thân cho các mơn sau này.
Bài tiểu luận của nhóm chúng em nhìn chung vẫn cịn nhiều sai sót, kính mong thầy có
thể bỏ qua cũng như góp ý để bọn em có thể rút kinh nghiệm và bài tiểu luận được thành cơng
hơn.
Nhóm chúng em xin trân trọng cảm ơn!

16