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ữ

DANH MỤC HÌNH ẢNHHì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Ọ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

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

2021 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

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à toà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) Ngoà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

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 toá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

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 toà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

- Để 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à buôn 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

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

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:

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

Hình 6: Và 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 toá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

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

Ngoà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

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 đuô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,

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

Ngoà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

Ở 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 ô yê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:

https://github.com/Blooful/backendint202

1

https://github.com/Blooful/internetvagiao

thuc-2021

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!