Tìm hiểu framework Spring cho Backend, Reactjs cho frontend và xây dựng website bán giày Minh Họa.pdf

TRƢỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
THỰC TẬP TỐT NGHIỆP
TÌM HIỂU FRAMEWORK SPRING CHO BACKEND,
REACTJS CHO FRONTEND VÀ XÂY DỰNG WEBSITE
BÁN GIÀY MINH HỌA
Ngành: CÔNG NGHỆ THÔNG TIN
Chuyên ngành: TRUYỀN THÔNG VÀ MẠNG MÁY TÍNH
Giảng viên hướng dẫn : Trần Đức Doanh
Sinh viên thực hiện :
Cao Tiến Quang - 1651150026 - KM16
Trần Phước Thành - 1651150034 - KM16
TP. Hồ Chí Minh, 2020

TRƢỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
---------------------------------------
HỌ VÀ TÊN SINH VIÊN:
CAO TIẾN QUANG, TRẦN PHƢỚC THÀNH
TÌM HIỂU FRAMEWORK SPRING CHO BACKEND,
REACTJS CHO FRONTEND VÀ XÂY DỰNG
WEBSITE BÁN GIÀY MINH HỌA
NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH: TRUYỀN THÔNG VÀ MẠNG MÁY TÍNH
BÁO CÁO THỰC TẬP TỐT NGHIỆP
NGƢỜI HƢỚNG DẪN
THẦY: TRẦN ĐỨC DOANH
TP. HỒ CHÍ MINH – 2020

NHẬN XÉT CỦA GIẢNG VIÊN HƢỚNG DẪN
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
TP. Hồ Chí Minh, ngày … tháng … năm 2020
Giảng viên hướng dẫn

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
Giảng viên phản biện

LỜI CAM ĐOAN
Nhóm tôi xin cam đoan đây là công trình nghiên cứu công nghệ độc lập của
riêng nhóm chúng tôi, không sao chép từ bất khi đồ án nào.
Các số liệu sử dụng phân tích trong luận án có nguồn gốc rõ ràng, đã công bố
theo đúng quy định. Các kết quả nghiên cứu trong luận án do nhóm tôi tự tìm
hiểu, phân tích một cách trung thực, khách quan và phù hợp với thực tiễn.
Mọi sự tham khảo trong đồ án này đều được trích dẫn các nguồn tài liệu trong
danh mục tài liệu tham khảo.
Các kết quả này chưa từng được công bố trong bất kỳ nghiên cứu nào khác.
Sinh viên thực hiện

i
MỤC LỤC
DANH MỤC CÁC TỪ VIẾT TẮT....................................................................................iii
DANH MỤC HÌNH ẢNH....................................................................................................v
DANH MỤC BẢNG...........................................................................................................vii
LỜI MỞ ĐẦU.......................................................................................................................1
CHƢƠNG 1: TÌM HIỂU VỀ FRAMEWORK .................................................................5
1.1. Tìm hiểu Spring Framework....................................................................................5
1.1.1. Khái Niệm ............................................................................................................5
1.1.2. Lợi ích ..................................................................................................................5
1.1.3. Cài đặt Spring framework...................................................................................6
1.1.4. Kiến trúc, các module của Spring Framework ..................................................7
1.1.5. Các dự án trong Spring Framework.................................................................13
1.2. Tìm hiểu ReactJS ....................................................................................................14
1.2.1. Giới thiệu ...........................................................................................................14
1.2.2. ReactJS là gì? ....................................................................................................15
1.2.3. Cài đặt ReactJS..................................................................................................21
1.2.4. Các thư viện hỗ trợ............................................................................................23
CHƢƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .............................................27
2.1. Yêu cầu đề tài ..........................................................................................................27
2.2. Hoạt động của trang web........................................................................................28
2.3. Đối tƣợng sử dụng...................................................................................................28
2.4. Phân tích các chức năng của hệ thống ..................................................................28
2.5. Mô tả các chức năng cho từng đối tƣợng..............................................................30
2.5.1. Các chức năng của đối tượng Customer..........................................................31
2.5.2. Các chức năng của đối tượng Administrator...................................................32
2.6. Các biểu đồ thiết kế hệ thống.................................................................................33
2.6.1. Biểu đồ hoạt động..............................................................................................33
2.6.2. Thiết kế các bảng dữ liệu cho trang web..........................................................42
CHƢƠNG 3: XÂY DỰNG ỨNG DỤNG MINH HỌA...................................................47
3.1. Trang chủ.................................................................................................................47
3.2. Trang danh sách sản phẩm ....................................................................................48

ii
3.3. Trang chi tiết ...........................................................................................................49
3.4. Giỏ hàng...................................................................................................................50
3.5. Thanh toán...............................................................................................................51
3.5.1. Địa chỉ giao hàng ..............................................................................................51
3.5.2. Trang thanh toán và đặt mua............................................................................51
3.6. Trang quản trị .........................................................................................................52
3.6.1. Trang quản lý sản phẩm ...................................................................................52
3.6.2. Trang quản lý người dùng ................................................................................52
3.6.3. Trang quản lý bình luận ...................................................................................53
3.6.4. Trang quản lý hóa đơn......................................................................................53
3.6.5. Trang quản lý slide............................................................................................54
3.7. Đăng ký và đăng nhập ............................................................................................54
3.8. Thông tin tài khoản.................................................................................................55
CHƢƠNG 4: KẾT LUẬN VÀ ĐÁNH GIÁ.....................................................................56
TÀI LIỆU THAM KHẢO.................................................................................................57

iii
DANH MỤC CÁC TỪ VIẾT TẮT
API: Application Program Interface
AJAX: Asynchronous Javascript and XML
EJB: Enterprise JavaBeans
DOM: Document Object Model
HTML: Hypertext Markup Language
IDE: Integrated Development Environment
JEE: Java Enterprise Edition
JDBC: Java Database Connectivity
JDK: Java Development Kit
JDO: Java Data Objects
JNDI: Java Naming and Directory Interface
JPA: Java Persistence API
JS: Javascript
JSX: Javascript XML
MVC: Model View Controller
NPM: Node Package Manager
ORM: Object Relational Mapping
PJO: Plain Javascript Object
POJO: Plain Old Java Object

iv
SPA: Single Page Application
STOMP: Streaming Text Oriented Messaging Protocol
UI: User Interface
XML: Extensible Markup Language

v
DANH MỤC HÌNH ẢNH
Hình 1.1: Kiến trúc Spring framework
Hình 1.2 : Spring IOC container
Hình 1.3 : ApplicationContext
Hình 1.4: Virtual DOM
Hình 1.5: React one-way binding
Hình 1.5: Cài đặt ReactJs
Hình 1.6: Redux Store
Hình 1.7: Nguyên lý vận hành của Redux
Hình 1.8: Middleware redux-thunk
Hình 2.1: Các tác nhân của hệ thống
Hình 2.2: Biểu đồ Use Case
Hình 2.3: Biểu đồ hoạt động đăng nhập
Hình 2.4: Biểu đồ hoạt động đăng xuất
Hình 2.5: Biểu đồ chức năng xem thông tin sản phẩm
Hình 2.6: Biểu đồ chức năng thêm sản phẩm
Hình 2.7: Biểu đồ chức năng sửa sản phẩm
Hình 2.8: Biểu đồ chức năng xóa sản phẩm
Hình 2.9: Biểu đồ chức năng thêm sản phẩm vào giỏ hàng

vi
Hình 2.10 : Biểu đồ chức năng đặt hàng
Hình 3.1: Trang chủ - Thanh điều hướng, slide
Hình 3.2: Trang chủ - Danh sách sản phẩm
Hình 3.3: Trang chủ - Một số sản phẩm mới nhất
Hình 3.4: Trang danh sách sản phẩm
Hình 3.5: Thông tin chi tiết sản phẩm
Hình 3.6: Phần bình luận
Hình 3.7: Giỏ hàng
Hình 3.8: Địa chỉ giao hàng
Hình 3.9: Thanh toán và đặt mua
Hình 3.10: Danh sách sản phẩm
Hình 3.11: Danh sách người dùng
Hình 3.12: Quản lý bình luận
Hình 3.13: Quản lý hóa đơn
Hình 3.14: Quản lý slide
Hình 3.15: Trang đăng nhập
Hình 3.16: Trang đăng ký
Hình 3.17: Thông tin tài khoản

vii
DANH MỤC BẢNG
Bảng 2.1: Bảng người dùng
Bảng 2.2: Bảng sản phẩm
Bảng 2.3: Bảng Thể Loại
Bảng 2.4: Bảng Đơn hàng

1
LỜI MỞ ĐẦU
1. Tính cấp thiết của đề tài
Nếu như trước đây khi Internet chưa ra đời và ngay cả khi nó ra đời được một
thời gian, con người thường có thói quen mua bán hàng hóa, giao dịch trên
các môi trường truyền thống như siêu thị, cửa hàng, khu chợ hay trung tâm
thương mại. Với hình thức mua bán truyền thống này, người mua phải đến tận
nơi để xem xét sản phẩm, trả giá, thanh toán và nhận sản phẩm. Tuy nhiên giờ
đây, với hình thức bán hàng trực tuyến, người mua hàng và người bán có thể
tương tác trực tiếp với nhau trên Internet. Ưu điểm của bán hàng trực tuyến
đối với các cửa hàng, doanh nghiệp đó là không bị giới hạn về thời gian và
không gian, có thể bán hàng mọi lúc, mọi nơi 24/7, tiết kiệm chi phí đầu tư
thuê mặt bằng hay nhân công, phạm vi tiếp cận rộng bao gồm mọi vùng miền
trong nước và cả ngoài nước từ đó mang lại lợi nhuận và doanh thu cao, hiệu
quả hơn so với bán hàng truyền thống. Có rất nhiều hình thức bán hàng trực
tuyến khác nhau như bán hàng trên Facebook, bán hàng trên Youtube,….tuy
nhiên bán hàng trực tuyến qua website được nhiều cửa hàng, doanh nghiệp,
công ty.
Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và kết hợp
với sự phát triển mạnh mẽ của Thương mại điện tử (TMĐT) và được ứng
dụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống
thường nhật của con người để phục cho các nhu cầu và mục đích của mọi
người. Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải kể đến
việc ứng dụng công nghệ thông tin vào hầu hết các hoạt động. Nhờ đó, các
công việc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều.
Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thu
nhập kinh tế ngày càng được cải thiện thì việc mua các vật dụng điện tử hay

2
gia dụng,… không còn trở nên xa lạ với mọi người nữa mà ngược lại nó là
các vật dụng thông dụng hàng ngày không thể thiếu đối với mọi người hiện
nay. Hầu hết mọi người thường ra ngoài và mua các vật dụng gia đình hay các
trang thiết bị điện tử hay các sản phẩm công nghệ như điện thoại, bếp,… và
tốn rất nhiều thời gian, công sức khi đi mua, thì bây họ có thể xem và mua
chúng một cách thiết thực nhất, lựa chọn cái yêu thích và có thể đáp ứng được
nhu cầu cho người dùng thông qua mạng Internet trong môi trường Thương
mại điện tử hiện nay.
Với các lý do trên và qua tìm hiểu thì nhóm sẽ thực hiện đồ án thực tập tốt
nghiệp về ứng dụng bán các mặt hàng giày trên môi trường Thương mại điện
tử. Sẽ giúp mọi người có thể mua các mặt hàng cần thiết cho mình và gia đình
nhanh và tiết kiệm thời gian và công sức di chuyển.
Do đó nhóm xin thực hiện đề tài: “Tìm hiểu Framework Spring cho Backend,
ReactJS cho Frontend và xây dựng website bán giày minh họa”.
2. Tình hình nghiên cứu
Từ lâu cho đến hiện nay có rất nhiều các ứng dụng thành công trong việc thực
hiện bán các đồ điện tử ,…thông qua Internet, bởi Thương mại điện tử phát
triển cực mạnh trong thập kỷ qua. Một số ứng dụng đã phát triển thành công
đó là như: Tiki, Shopee, Nguyenkim, … đó là những ứng đã và đang hoạt
động mạnh và có quy mô lớn tại Việt Nam.
Ứng dụng được xây dựng với định hướng giúp mọi người mua sắm thuận tiện
và nhanh hơn, có tính chính xác, và không mất nhiều thời gian.

3
3. Mục đích nghiên cứu đề tài
- Quản lý các thông tin về khách hàng, admin.
- Đưa ra các sản phẩm giày mới trên ứng dụng.
- Cung cấp cho khách hàng những cập nhật mới nhất về sản phẩm và giá
cả.
- Đưa ra các thông kê và báo cáo chính xác về số lượng sản phẩm và
khách hàng.
4. Nhiệm vụ nghiên cứu
Tìm hiểu và phân tích quy trình hoạt động của ứng dụng
- Tìm về các công cụ để xây dựng và thiết kế hệ thống như: Eclipse,
Visual Studio Code, MySQL, Postman, …
- Tìm hiểu Framework Spring cho Backend, ReactJS cho Frontend và
các thư viện hỗ trợ liên quan.
- Demo hệ thống đã thực hiện trên máy.
5. Phƣơng pháp nghiên cứu
- Khảo sát hiện trạng về ứng dụng khác hoạt động trên môi trường
Thương mại điện tử.
- Thu thập và tìm hiểu thông tin từ mạng internet và các trang web
thương mại điện tử hiện có.
- Phân tích và xây dựng, thiết kế hệ thống theo yêu cầu phù hợp của
người dùng.
- Nghiên cứu các công cụ và thuộc tính để thiết kế và xây dựng.

4
6. Các kết quả đạt đƣợc của đề tài
- Giúp nhóm đề tài hiểu rõ hơn quy trình hoạt động về bán hàng trực
tuyến.
- Giúp cho việc quản lý hàng hóa thuận tiện và chính xác hơn.
- Tạo thuận tiện cho khách hàng mua hàng trên Website và thực hiện
đúng các quy trình khi mua hàng trực tuyến.
- Tạo ra được một ứng dụng thương mại điện tử cho phép người dùng
thực hiện việc mua sản phẩm hiện có trên ứng dụng.
- Ứng dụng có các quyền truy cập khác nhau như : admin hay user.
- Có các chức năng cơ bản của một ứng dụng thương mại điện tử : phân
trang, giỏ hàng , đăng nhập, đăng ký ,tạo sản phẩm , quản lý danh sách
sản phẩm,…
- Nhóm được tìm hiểu, nghiên cứu về các công nghệ, kỹ thuật để xây
dựng một website hoàn chỉnh, đầy đủ chức năng.
- Nâng cao khả năng làm việc nhóm, quản lý công việc, khả năng tự học
hỏi, trau dồi kiến thức,..
7. Kết cấu của đề tài (Thực tập tốt nghiệp)
 Chương 1: Tìm hiểu về framework
 Chương 2: Phân tích và thiết kế hệ thống
 Chương 3: Xây dựng ứng dụng minh họa
 Chương 4: Kết luận và đánh giá

5
CHƢƠNG 1: TÌM HIỂU VỀ FRAMEWORK
1.1. Tìm hiểu Spring Framework
1.1.1. Khái Niệm
 Spring là framework phát triển ứng dụng phổ biến nhất dành cho Java
Enterprise. Ban đầu nó được viết bởi Rod Johnson và lần đầu tiên được
phát hành theo giấy phép Apache 2.0 vào tháng 6 năm 2003. Spring có
kích thướng nhẹ, phiên bản cơ bản của Spring framework có kích
thước khoảng 2MB.
 Được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency
Injection và Aspect Oriented Programming.
 Là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ dành cho
Java Enterprise. Với Spring Framework các nhà phát triển có thể tạo ra
các mã có hiệu suất cao, dễ kiểm thử và có thể sử dụng lại được.
 Không chỉ giúp chúng ta phát triển web mà spring framework nó còn là
1 hệ sinh thái phát triển rất nhiều nền tảng khác như cloud, mobile,
app ... vì nó dạng tích hợp, nhúng vô là xài.
1.1.2. Lợi ích
 Spring cho phép lập trình viên sử dụng POJO. Việc sử dụng POJO giúp
bạn không phải làm việc với EJB, ứng dụng, các luồng chạy, cấu
hình… đơn giản hơn rất nhiều.
 Spring được tổ chức theo kiểu mô đun. Số lượng các gói và các lớp khá
nhiều, nhưng bạn chỉ cần quan tâm đến những gì bạn cần và không cần
quan tâm đến phần còn lại.

6
 Spring hỗ trợ sử dụng khá nhiều công nghệ như ORM Framework, các
logging framework, JEE, các thư viện tạo lịch trình (Quartz và JDK
timer)…
 Module Web của Spring được thiết kế theo mô hình MVC nên nó cung
cấp đầy đủ các tính năng giúp thay thế các web framework khác như
Struts.
1.1.3. Cài đặt Spring framework
 Yêu cầu đã cài đặt:
 Bộ phát triển Java (JDK).
 Thiết lập Apache Tomcat.
 Thiết lập Eclipse (IDE).
 Thiết lập thư viện Spring
 Sau đây là các bước đơn giản để tải xuống và cài đặt thư viện Spring
framework trên máy của bạn.
 Bạn cần phải tải bản .zip cho Windows và .tz cho Unix.
 Tải xuống phiên bản Spring mới nhất từ
https://repo.spring.io/release/org/springframework/spring/
 Các bài hướng dẫn trên viettuts.vn sử dụng phiên bản Spring
5.2.6.RELEASE trên Windows. Sau khi đã tải xuống tệp tin đã giải
nén, nó sẽ tạo cấu trúc thư mục bên trong lib...
 Tiếp theo là bạn phải chọn ra những gì cần sử dụng và thêm vào
CLASSPATH cho project của bạn.

7
 Dưới đây là một số ví dụ bộ thư viện phát triển ứng dụng Spring Web:
 spring-aop-5.2.6.RELEASE
 spring-aspects-5.2.6.RELEASE
 spring-beans-5.2.6.RELEASE
 spring-context-5.2.6.RELEASE
 spring-context-support-5.2.6.RELEASE
 spring-core-5.2.6.RELEASE
 spring-instrument-5.2.6.RELEASE
 spring-jdbc-5.2.6.RELEASE
 spring-messaging-5.2.6.RELEASE
 spring-orm-5.2.6.RELEASE
 spring-oxm-5.2.6.RELEASE
 spring-web-5.2.6.RELEASE
 spring-webmvc-5.2.6.RELEASE
 …
1.1.4. Kiến trúc, các module của Spring Framework
Spring được chia làm nhiều module khác nhau, tùy theo mục đích phát triển
ứng dụng mà ta dùng 1 trong các module đó.

8
Hình 1.1: Kiến trúc Spring framework
1.1.4.1. Core Container
1.1.4.1.1. Module spring-core
IoC(Inversion of Control) container được xem là cốt lõi của Spring
Framework, giúp lập trình viên quản lý quá trình thực thi DI (Dependency
Injection) trong ứng dụng một cách tự động.
Spring IoC Container là một chương trình (một module trong spring
framework) đảm nhiệm việc Inject sự phụ thuộc (dependencies) vào các đối
tượng.

9
Hình 1.2 : Spring IOC container
1.1.4.1.2. Module Spring Bean
Đối tượng được quản lý bởi Spring IoC container. Định nghĩa của bean bao
gồm các thông tin được gọi là cấu hình siêu dữ liệu (configuration metadata).
 Spring BeanFactory Container.
 Container đơn giản cung cấp những hỗ trợ cơ bản cho for DI và được
định nghĩa bởi interface org.springframework.beans.factory.Bean
Factory.
 Lớp XmlBeanFactory implements BeanFactory.Container này sẽ đọc
cấu hình từ file XML và sử dụng nó để tạo cấu hình cho hệ thống
hoặc ứng dụng.
 The BeanFactory thường thích hợp sử dụng ở nơi mà tài nguyên bị
giới hạn như trên thiết bị di động.

10
1.1.4.1.3. Module spring-context
 Xây dựng trên một nền tảng vững chắc được cung cấp bởi các module
Core và Beans, được sử dụng để truy cập vào các đối tượng trong
framework-style tương tự như việc đăng ký một JNDI.
 ApplicationContext
Các lớp thực thi ApplicationContext:
- FileSystemXmlApplicationContext: Container này tải các định
nghĩa của bean từ file XML. Cần cung cấp đầy đủ đường dẫn của
file XML cấu hình bean đến constructor.
- ClassPathXmlApplicationContext: Container này tải các định
nghĩa của bean từ file XML. Cần cung cấp đầy đủ đường dẫn của
file XML, cần set đúng CLASSPATH vì container này sẽ tìm
kiếm
file XML cấu hình trong CLASSPATH.
- WebXmlApplicationContext: Container này sẽ tải file XML định
nghĩa các bean trong ứng dụng web.

11
Hình 1.3 : ApplicationContext
1.1.4.1.4. Module spring-expression
Cung cấp một Expression Language mạnh mẽ cho việc truy vấn và tính toán
một đồ thị đối tượng lúc runtime. Nó được kế thừa và mở rộng từ unified
expression language.Ngôn ngữ này hỗ trợ setting và getting giá trị các
property, gọi phương thức, truy cập vào nội dung của mảng, tập hợp và chỉ
mục, operator logic và tính toán, đặt tên biến, và truy xuất các đối tượng theo
tên từ IoC container của Spring.
1.1.4.2. Data Access/Integration
1.1.4.2.1. Module spring-jdbc
Cung cấp một lớp JDBC-abstraction để loại bỏ những code tẻ nhạt cả JDBC
và phân tích những mã lỗi cụ thể của database-vendor.
1.1.4.2.2. Module spring-orm
Cung cấp lớp tích hợp với các orm API phổ biến như JPA, JDO và Hibernate.
1.1.4.2.3. Module spring-oxm
Cung cấp lớp abstraction hỗ trợ triển khai Object/XML mapping như AXB,
Castor, XMLBeans, JiBX and XStream.
1.1.4.2.4. Module spring-jms
Chứa các tính năng tạo và sử dụng các message. Từ Spring Framework 4.1,
nó được tích hợp với spring-messaging.
1.1.4.2.5. Module spring-transaction

12
Hỗ trợ quản lý giao dịch theo chương trình và khai báo cho các lớp mà thực
hiện các giao diện đặc biệt và cho tất cả các POJO của bạn.
1.1.4.3. Web
1.1.4.3.1. Module spring-web
Cung cấp tính năng tích hợp web theo định hướng cơ bản như chức năng tập
tin tải lên nhiều phần dữ liệu và khởi tạo các container IoC sử dụng nghe
servlet và một bối cảnh ứng dụng web theo định hướng.
1.1.4.3.2. Module spring-webmvc
Bao gồm việc triển khai Model-View-Controller (MVC) của Spring cho các
ứng dụng web.
1.1.4.3.3. Module spring-websocket
Cung cấp hỗ trợ cho WebSocket-based, giao tiếp hai chiều giữa client và
server trong các ứng dụng web.
1.1.4.3.4. Module springwebmvc-portlet
Cung cấp việc triển khai MVC được sử dụng trong môi trường portlet và ánh
xạ chức năng của module Web-Servlet.
1.1.4.4. Các module khác
1.1.4.4.1. Module AOP
Cung cấp một thực hiện lập trình hướng khía cạnh cho phép bạn xác định
phương pháp-chặn và pointcuts để sạch tách mã thực hiện chức năng đó nên
được tách ra.
1.1.4.4.2. Module Aspects

13
Cung cấp tích hợp với AspectJ, mà lại là một khuôn khổ AOP mạnh mẽ và
trưởng thành.
1.1.4.4.3. Module Instrumentation
cung cấp thiết bị đo đạc lớp hỗ trợ và triển khai lớp bộ nạp được sử dụng
trong các máy chủ ứng dụng nhất định.
1.1.4.4.4. Module Messaging
Cung cấp hỗ trợ cho STOMP như WebSocket sub-protocol để sử dụng trong
các ứng dụng. Nó cũng hỗ trợ một mô hình lập trình chú thích cho việc định
tuyến và xử lý tin nhắn STOMP từ các máy khách WebSocket.
1.1.4.4.5. Module Test
Hỗ trợ việc kiểm tra các thành phần mùa xuân với JUnit hoặc TestNG khuôn
khổ.
1.1.5. Các dự án trong Spring Framework
Trên thực tế Spring Framework là một tập hợp của nhiều dự án con. Spring
Core như chúng ta đã tìm hiểu là nền tảng của các dự án trong Spring
Framework. Một một dự án sẽ đảm nhận một chức năng riêng trong việc xây
dựng các ứng dụng doanh nghiệp. Chúng ta sẽ cùng điểm qua các dự án lớn
trong Spring.
1.1.5.1. Spring MVC
Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng
web. Đây là một dự án chúng ta không thể bỏ qua khi xây dựng các ứng dụng
Java web.

14
1.1.5.2. Spring Security
Dự án này cung cấp các cơ chế xác thực (authentication) và phân quyền
(authorization) cho ứng dụng của bạn.
1.1.5.3. Spring Boot
Spring Boot là một framework giúp chúng ta phát triển cũng như chạy ứng
dụng một cách nhanh chóng.
1.1.5.4. Spring Batch
Dự án này giúp chúng ta dễ dàng tạo các lịch trình (scheduling) và tiến trình
(processing) cho các công việc xử lý theo mẻ (batch job).
1.1.5.5. Spring Integration
Spring Integration là một implementation của Enterprise Integration Patterns
(EIP). Dự án này thiết kế một kiến trúc hướng thông điệp hỗ trợ việc tích hợp
các hệ thống bên ngoài.
1.1.5.6. Spring Social
Dự án này sẽ kết nối ứng dụng của bạn với các API bên thứ ba của Facebook,
Twitter, Linkedin ...
1.2. Tìm hiểu ReactJS
1.2.1. Giới thiệu

15
Reactjs là một thư viện Javascript đang nổi lên trong những năm gần đây với
xu hướng Single Page Application (SPA). Trong khi những framework khác
cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn
giản và dễ dàng phối hợp với những thư viện Javascript khác.
Nếu như AngularJS là một Framework cho phép nhúng code javascript trong
code html thông qua các attribute như ng-model, ng-repeat...thì với react là
một thư viện cho phép nhúng code HTML trong code javascript nhờ vào JSX,
bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa
javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.
1.2.2. ReactJS là gì?
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng
những thành phần (components) UI có tính tương tác cao, có trạng thái và có
thể sử dụng lại được. React được sử dụng tại Facebook trong production, và
instagram được viết hoàn toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động
trên phía client, mà còn được render trên server và có thể kết nối với nhau.
React so sánh sự thay đổi giữa các giá trị của lần render này với lần render
trước và cập nhật ít thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu
hình, chúng ta sẽ đi đến một số khái niệm cơ bản:
1.2.2.1. Virtual DOM
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc
mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với
việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến
tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề

16
này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin
cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi
giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree
thật.
Hình 1.4: Virtual DOM
React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu
được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp
chúng ta dễ dàng kiểm soát cũng như sửa lỗi.

17
Hình 1.5: React one-way binding
Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ
liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết
kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của
bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share,
comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng.
1.2.2.2. Giới thiệu về JSX
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript (nó
được khuyến khích dùng trong React).
Đặc điểm:
 Nhanh hơn: JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javascript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với
một mã tương đương viết trực tiếp bằng Javascript.
 An toàn hơn: Ngược với Javascript, JSX là kiểu statically-typed, nghĩa
là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các
lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng
cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.
 Dễ dàng hơn: JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để
cho các lập trình viên Javascript có thể sử dụng.
1.2.2.3. Giới thiệu về Components
React được xây dựng xung quanh các component, chứ không dùng template
như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng
những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một

18
component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau,
trong một component lại có thể chứa thành phần khác. Mỗi component trong
React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật
component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là
component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một
react component đơn giản chỉ cần một phương thức render. Có rất nhiều
phương thức khả dụng khác, nhưng render là phươc thức chủ đạo.
1.2.2.4. Props và State
* Props:
 Props là viết tắt của properties. Chúng là các giá trị đơn hoặc các đối
tượng có chứa 1 tập hợp các giá trị được chuyển đến Component. Nó
sử dụng quy ước đặt tên tương tự như các thuộc tính của thẻ HTML.
 Props giúp các component tương tác với nhau, component nhận input là
props, và trả thuộc tính mô tả những gì component con sẽ render. Prop
là bất biến.
 Props chỉ để đọc. Cho dù bạn khai báo component dưới dạng hàm hay
class thì nó vẫn không bao giờ có thể sửa đổi props của chính nó.
* State:
 Thể hiện trạng thái của ứng dụng, khi state thay đổi thì component
đồng thời render lại để cập nhật UI.
 Khác với props là bất biến thì state có thể thay đổi. State được quản lý
chỉ bởi duy nhất 1 component, nó cũng không thể truyền xuống cho
component con.
1.2.2.5. Component Lifecycle

19
Component lifecycle Là vòng đời của một component, trong đó có những
phương thức sẽ được gọi tuân theo quy luật của component lifecycle.
 componentWillMount: đây là phương thức sẽ được thực thi trước khi 1
component được render trên cả server side và client side.
 componentDidMount: Phương thức này được thực thi khi 1 component
được render trên client side. Đây là nơi các hàm AJAX requests, DOM
hay update state được thực thi. Phương thức này cũng được sử dụng để
kết nối với các JS Framework khác và các function với delayed
execution như setTimeout or setInterval.
 componentWillReceiveProps: sẽ được thực thi ngay khi thuộc tính
được update và trước khi component được render lại.
 shouldComponentUpdate: sẽ trả về kết quả true or false. Phương thức
này sẽ xác định 1 component có được update hay không. Mặc định giá
trị này là true. Nếu bạn không muốn component render lại sau khi
update state hay props thì return giá trị thành false.
 componentWillUpdate: Được gọi khi chúng ta cập nhật lại state của
component trước khi nó render lại.
 componentDidUpdate: sau khi componentWillUpdate ở trên được gọi
xong thì đến lượt thằng này được gọi.
 componentWillUnmount: được gọi khi chúng ta unmount 1 component
kiểu như xóa nó khỏi react.
1.2.2.6. Ưu – nhược điểm của ReactJs
* Ưu điểm:
 Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà
các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu
suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật

20
lên DOM và chỉ thực hiện chúng. Điều này giúp Reactjs tránh những
thao tác cần trên DOM mà nhiều chi phí.
 Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp
đặc biệt là JSX.
 Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài
đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn
debug code dễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có
cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM
thông thường.
 Render tầng server: Một trong những vấn đề với các ứng dụng đơn
trang là tối ưu SEO và thời gian tải trang. Reactjs là một thư viện
component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và
cũng có thể render bằng các chuỗi HTML mà server trả về.
 Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case
giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS.
 Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ
dàng cho bảo trì và sửa lỗi.
* Nhược điểm:
- Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó
không phải là một MVC framework như những framework khác. Đây
chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ
không có phần Model và Controller, mà phải kết hợp với các thư viện
khác. React cũng sẽ không có 2-way binding hay là Ajax.
- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần
phải cấu hình lại.

21
- React khá nặng nếu so với các framework khác React có kích thước
tương tương với Angular (Khoảng 35kb so với 39kb của Angular).
Trong khi đó Angular là một framework hoàn chỉnh.
- Khó tiếp cận cho người mới học Web.
1.2.3. Cài đặt ReactJS
1.2.3.1. Nodejs
* Khái niệm:
 Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở
trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được
các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.
 Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty
Joyent, trụ sở tại California, Hoa Kỳ.
 Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho
tốc độ xử lý và hiệu năng khá cao.
 Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời
gian thực.
 Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng
nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh
nhất có thể.
* Đặc điểm:
 Nodejs là một nền tảng (platform), không phải Web Framework, cũng
không phải ngôn ngữ lập trình.
 Nodejs không hỗ trợ đa luồng, nó là một máy chủ đơn luồng.
 Nodejs không dành cho người mới tinh mà chưa biết gì về lập trình, vì
như đã nói ở trên, Nodejs không phải là ngôn ngữ lập trình, để học

22
được Nodejs thì bạn cần phải biết về Javascript, kỹ thuật lập trình, một
số giao thức,…
* Cài đặt
- Cài đặt Nodejs trên windows:
Đối với windows, bạn chỉ cần vào trang chủ Nodejs.org để download và cài
đặt Nodejs. Để kiểm tra đã cài đặt được nodejs hay chưa bạn cần mở chương
trình "Node.js Command Prompt" lên bằng cách vào Start gõ search từ
"prompt" rồi gõ node -v.
Nếu xuất ra version của Nodejs tức là bạn đã cài đặt thành công. Tiếp theo là
kiểm tra NPM - Công cụ quản lý package của NodeJS.
npm –v: Nếu xuất ra version của NPM bạn đã cài đặt thành công NPM.
- Cài đặt Nodejs trên linux
Đầu tiên, bạn nên update tất cả package của hệ điều hành để đảm bảo việc cài
đặt NodeJS không gặp vấn đề: sudo apt-get update
Cài Nodejs: sudo apt-get install nodejs
Cài đặt NPM: sudo apt-get install npm
Để kiểm tra NPM và NodeJS đã cài đặt được chưa: nodejs –v và npm –v
1.2.3.2. Cài đặt ReactJS
- Để cài đặt ReactJs thì điều đầu tiên chúng ta cần cài đặt server nodejs
(phiên bản >= 8.10) và npm (phiên bản >= 5.6) (xem ở mục 1.2.3.1.
NodeJs).

23
- Sau khi đã cài đặt server nodejs và npm thành công, ta mở command
line chuyển tới thư mục – nơi sẽ chứa các file cấu hình ReactJs và gõ
lệnh: npx create-react-app ten-ung-dung-reactjs.
- Sau khi cài đặt xong, ta chuyển tới thư mục react vừa tạo, gõ lệnh npm
start để chạy ứng dụng.
Hình 1.5: Cài đặt ReactJs
1.2.4. Các thư viện hỗ trợ
1.2.4.1. Redux
 Khái niệm:
Redux là một predictable state management tool cho các ứng dụng Javascript.
Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các
môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra
đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của
Facebook. Do vậy Redux thường dùng kết hợp với React.
Do yêu cầu cho các ứng dụng single-page sử dụng Javascript ngày càng trở
nên phức tạp thì code của chúng ta phải quản lý nhiều state hơn. State có thể
bao gồm là data trả về từ phía Server và được cached lại hay như dữ liệu được
tạo ra và thao tác ở phía client mà chưa được đẩy lên phía server. UI state
cũng trở lên phức tạp vì chúng ta cần quản lý việc active Routes, selected tabs,
spinners, điều khiển phân trang …vv.

24
Với Redux, state của ứng dụng được giữ trong một nơi gọi là store và mỗi
component đều có thể access bất kỳ state nào mà chúng muốn từ chúng store
này.
Cái cách mà Redux hoạt động là khá đơn giản. Nó có 1 store lưu trữ toàn bộ
state của app. Mỗi component có thể access trực tiếp đến state được lưu trữ
thay vì phải send drop down props từ component này đến component khác.
Có 3 thành phần của Redux: Actions, Store, Reducers.
Hình 1.6: Redux Store
 Actions
Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app
đến Redux store. Những data này có thể là từ sự tương tác của user với app,
API calls hoặc cũng có thể là từ form submission.

25
Actions được gửi bằng cách sử dụng store.dispatch() method, chúng phải có
một type property để biểu lộ loại action để thực hiện. Chúng cũng phải có một
payload chứa thông tin. Actions được tạo thông qua một action creator.
 Reducers
Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực
hiện một action và trả về một state mới. Những states này được lưu như
những objects và chúng định rõ cách state của một ứng dụng thay đổi trong
việc phản hồi một action được gửi đến store.
 Store
Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng
Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or
hủy đăng ký các listeners thông qua helper methods.

26
Hình 1.7: Nguyên lý vận hành của Redux
1.2.4.2. Redux-thunk
- Middleware
Middleware khá phổ biến với các Framework server-side, nó được đặt giữa
thời điểm server nhận request và thời điểm server response. Ở Redux,
Middleware giải quyết vấn đề khác với các Framework server-side nhưng
định nghĩa có phần tương tự
Hiểu một cách đơn giản middleware cho phép chúng ta can thiệp vào giữa
thời điểm dispatch một action và thời điểm action đến được reducer.
- Redux Thunk

27
Redux Thunk cho phép trả về các Action là một function thay vì chỉ là một
PJO, nó đóng vai trò là một Middleware được đặt trước thời điểm reducer
nhận request để nhận biết các action có trả về một PJO hay không, nếu đó là
một PJO, Thunk sẽ chuyển action đó đến Reducer như thường lệ, nếu action
trả về là một function, Redux Thunk sẽ chặn action đó lại và đợi cho đến khi
một lệnh asynchronous nào đó trong function hoàn tất và trả về kết quả (như
giá trị response ở trên). Đến đây chúng ta đã nhận được một PJO và Redux
Thunk sẽ cho action này đến Reducer như bình thường.
Hình 1.8: Middleware redux-thunk
1.2.4.3. Một số thư viện khác
- React Router: Định tuyến giữa các components
- React Bootstrap: Hỗ trợ style sẵn các components
- Axios: Thực hiện việc xử lý API
CHƢƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2.1. Yêu cầu đề tài
Xây dựng một trang web bán hàng (giày) online. Hiện nay việc kinh doanh
bởi công nghệ hiện đại đặt biệt Internet, giúp doanh nghiệp,… có thể bán
hàng qua nhiều kênh khác nhau và mà có thể quản lý được tất cả.

28
Và trong thời buổi kinh tế thị trường với yêu cầu của những người sử dụng
khá cao,có thể một số nơi tại chỗ ở của bạn không thể đáp ứng được hết yêu
cầu của khách hàng.Nếu khách hàng là những người bận rộn, không có nhiều
thời gian để lựa chọn sản phẩm cho phù hợp với nhu cầu và chi phí của họ.
Việc đi đến một cửa hàng chiếm mất nhiều thời gian của bạn và bạn mong
muốn có một dịch vụ đáp ứng được điều đó.
2.2. Hoạt động của trang web
Hoạt động của Website bao gồm hai hoạt động chính:
- Hoạt động của khách hàng.
- Hoạt động của admin website
2.3. Đối tƣợng sử dụng
Có 2 đối tượng sử dụng chính của website là:
- Khách hàng: Là người có thể xem, tìm kiếm thông tin sản phẩm và mua
những sản phẩm theo nhu cầu của mình.
- Người quản trị: Là người có toàn quyền sử dụng hệ thống, quản lý tất cả
sản phẩm, quản lý thông tin khách mua hàng và hóa đơn, đồng thời đảm bảo
tính an toàn, bảo mật cho website.
2.4. Phân tích các chức năng của hệ thống
* Yêu cầu giao diện của website:

29
 Giao diện người dùng
- Thân thiện dễ sử dụng.
- Giới thiệu những thông tin về cửa hàng: Địa chỉ liên hệ của cửa
hàng hoặc các đại lý trực thuộc, các số điện thoại liên hệ, email liên
hệ.
- Sản phẩm của cửa hàng: những sản phẩm nào đang có, sản phẩm
bán
chạy, sản phẩm mới nhất, sản phẩm thịnh hành.
- Màu sắc phải hài hòa không được sử dụng quá nhiều màu sắc, làm
nổi bật được hình ảnh của sản phẩm, font chữ thống nhất, tiện lợi
khi sử dụng.
 Giao diện người quản trị
- Giao diện đơn giản, dễ quản lý dữ liệu.
- Phải được bảo vệ bằng User và Password riêng của Admin.
* Các tác nhân của hệ thống
Hình 2.1: Các tác nhân của hệ thống

30
- Administrator: Là người quản trị của hệ thống, có các quyền và chức
năng như: quản lý sản phẩm, quản lý các tài khoản người dùng, quản lý
hóa đơn mua hàng.
- Customer: Là khách vãng lai có chức năng xem, tìm kiếm thông tin,
đặt hàng và xem giỏ hàng.
Hình 2.2: Biểu đồ Use Case
2.5. Mô tả các chức năng cho từng đối tƣợng

31
2.5.1. Các chức năng của đối tượng Customer
2.5.1.1. Chức năng xem thông tin sản phẩm
Trong website , khi khách hàng click vào nút “xem chi tiết” hoặc click vào
sản phẩm khách hàng có thể xem thông tin chi tiết của sản phẩm . Các thông
tin của sản phẩm được lưu dưới CSDL khi người dùng có nhu cầu sẽ được lấy
ra và hiển thị.
2.5.1.2. Chức năng tìm kiếm thông tin
Khi khách hàng truy cập website và sử dụng chức năng tìm kiếm của trang
web để tìm kiếm những thông tin liên quan đến sản phẩm mà mình muốn.
Trang web sẽ lấy tất cả các sản phẩm có liên quan đến giá trị mà người dùng
nhập vào thanh tìm kiếm để tìm kiếm từ trong CSDL để hiển thị ra trên
website cho người dùng xem.
2.5.1.3. Chức năng xem thông tin giỏ hàng
Sau khi khách hàng đã chọn những sản phẩm phù hợp trong cửa hàng ,các sự
lựa chọn đó sẽ được lưu vào giỏ hàng. người dùng có thể truy cập vào xem lại
tất cả các sản phẩm mà mình đã mua. Trong giỏ hàng, khách hàng có thể xóa
sản phẩm đã được đặt mua trước đó, tăng giảm số lượng mỗi sản phẩm và
thấy được tổng thành tiền các sản phẩm đã đặt mua.
2.5.1.4. Chức năng mua hàng
Sau khi khách hàng đã chọn xong những sản phẩm mà mình muốn mua thì
khi bấm vào nút thanh toán trong giỏ hàng khách hàng sẽ được chuyển qua
trang kiểm tra thông tin của khách hàng để có thể tiến hành thanh toán hay
thông tin địa chỉ để có thể giao hàng đến người mua hàng được.
2.5.1.5. Chức năng xem đơn hàng

32
Sau khi đã thanh toán thành công khách hàng có thể theo dõi đơn hàng của
mình ở mục “đơn hàng của tôi”.
2.5.1.6. Chức năng nhận xét
Sau khi đã đặt mua hàng thành công khác hàng có thể nhận xét về sản phẩm
mà mình đã mua
2.5.2. Các chức năng của đối tượng Administrator
2.5.2.1. Chức năng quản lý sản phẩm
- Chức năng thêm sản phẩm Khi trang web có những sản phẩm nào mới
ra trên thị trường thì Admin sẽ sử dụng chức năng thêm sản phẩm mới
rồi thêm những thông tin cần thiết của sản phẩm để cập nhật trên CSDL
sẽ được hiển thị ra sau khi Admin đã thêm xong sản phẩm.
- Chức năng xóa sản phẩm Khi một sản phẩm nào đó trong CSDL mà
Admin thấy nó không tồn tại hoặc đã hết hàng không còn phù hợp với
trang web của mình nữa thì sẽ dùng chức năng xóa sản phẩm trong
CSDL, rồi hiển thị lại danh sách ra trang web để khách hàng có thể cập
nhật.
- Chức năng cập nhật sản phẩm Khi một sản phẩm nào trong CSDL cần
được update lại dữ liệu thì Admin sẽ tìm và chọn sản phẩm đó để sửa
lại thông tin cho phù hợp, rồi cập nhật lại CSDL để hiển thị ra danh
sách trên website để khách hàng có thể cập nhật lại.
2.5.2.2. Chức năng quản lý các hóa đơn mua hàng
Sau khi khách hàng xác nhận đặt hàng, hoá đơn sẽ được lưu vào trong CSDL
và được thông báo đến mail của Admin ,sau đó gọi điện cho khách hàng để
xác nhận thông tin. Nếu đúng hoá đơn sẽ được chuyển sang bộ phận giao

33
hàng, sau khi thực hiện giao dịch thành công hoá đơn được hoàn tất, trong quá
trình xử lý hoá đơn khách hàng có thể huỷ bỏ hoá đơn đặt hàng đó.
2.6. Các biểu đồ thiết kế hệ thống
2.6.1. Biểu đồ hoạt động
2.6.1.1. Đăng nhập
Hình 2.3: Biểu đồ hoạt động đăng nhập

35
2.6.1.2. Đăng xuất
Hình 2.4: Biểu đồ hoạt động đăng xuất

36
2.6.1.3. Xem thông tin chi tiết sản phẩm
Hình 2.5: Biểu đồ chức năng xem thông tin sản phẩm

37
2.6.1.4. Thêm sản phẩm
Hình 2.6: Biểu đồ chức năng thêm sản phẩm

38
2.6.1.5. Sửa thông tin sản phẩm
Hình 2.7: Biểu đồ chức năng sửa sản phẩm

39
2.6.1.6. Xóa sản phẩm
Hình 2.8: Biểu đồ chức năng xóa sản phẩm

40
2.6.1.7. Thêm sản phẩm vào giỏ hàng
Hình 2.9: Biểu đồ chức năng thêm sản phẩm vào giỏ hàng

41
2.6.1.8. Đặt hàng
Hình 2.10 : Biểu đồ chức năng đặt hàng

42
2.6.2. Thiết kế các bảng dữ liệu cho trang web
Bảng 2.1: Bảng người dùng
Tên Kiểu dữ liệu Chú thích
id bigint(20) Số thứ tự người dùng
created_by varchar(255) Được tạo bởi ai
created_date datetime Được tạo ngày nào
modified_by varchar(255) Được thực hiện bởi ai
modified_date datetime Được thực hiện ngày nào
address varchar(255) Địa chỉ
district varchar(255) Quận
email varchar(255) Email
fullname varchar(255) Họ và tên
gender varchar(255) Giới tính
password varchar(255) Mật khẩu
phonenumber varchar(255) Số điện thoại

43
status int(11) Trạng thái(Hoạt động /
Không hoạt động)
username varchar(255) Tên tài khoản
Bảng 2.2: Bảng sản phẩm
color varchar(255) Màu sắc
content text Nội dung
countinput int(11) Số lượng

44
name varchar(255) Tên sản phẩm
price bigint(20) Giá tiền
productcode varchar(255) Mã sản phẩm
saleoff double Sale
shortdescription text Mô tả ngắn
size int(11) Kích cỡ
status int(11) Trạng thái
thumbnail varchar(255) Hình đại diện
title varchar(255) Chú thích
category_id bigint(20) Mã thể loại
store_id bigint(20) Mã kho

45
Bảng 2.3: Bảng Thể Loại
code varchar(255) Mã thể loại
name varchar(255) Tên thể loại
categorygender_id bigint(20) Mã thể loại giới tính

46
Bảng 2.4: Bảng Đơn hàng
address varchar(255) Địa chỉ giao hàng
district varchar(255) Quận/Huyện
fullname varchar(255) Họ và tên
email varchar(255) email
phonenumber varchar(255) Số điện thoại
provincial varchar(255) Tỉnh/Thành phố

47
purchase_code varchar(255) Mã đơn hàng
status int(11) Trạng thái(Chờ xử lý/Đã xử
lý)
ward varchar(255) Xã/Phường
user_id bigint(20) Mã người dùng
sum_money bigint(20) Tổng tiền
ship_id bigint(20) Mã ship
CHƢƠNG 3: XÂY DỰNG ỨNG DỤNG MINH HỌA
3.1. Trang chủ
Hiển thị một số thông tin chung như thanh điều hướng (đăng ký, đăng nhập,
danh sách sản phẩm, thanh tìm kiếm, giỏ hàng,…), các sản phẩm mới,…
Hình 3.1: Trang chủ - Thanh điều hướng, slide

48
Hình 3.2: Trang chủ - Danh sách sản phẩm
Hình 3.3: Trang chủ - Một số sản phẩm mới nhất
3.2. Trang danh sách sản phẩm
Hiển thị danh sách sản phẩm theo phân loại (giày nam, giày nữ, unisex,
slipon, búp bê,…). Người dùng có thể xem một số thông tin như tên, giá hay
thêm sản phẩm vào giỏ hàng. Ngoài ra người dùng có thể lựa chọn sắp xếp
theo giá, theo tên, lọc theo màu, kích cỡ, giá.

49
Hình 3.4: Trang danh sách sản phẩm
3.3. Trang chi tiết
Trang chi tiết là nơi giúp người dùng có thể tìm hiểu thêm nhiều thông tin hơn
về sản phẩm, đánh giá cũng như để lại bình luận, ý kiến về sản phẩm.
Hình 3.5: Thông tin chi tiết sản phẩm

50
Hình 3.6: Phần bình luận
Để thêm bình luận ở mỗi sản phẩm, người dùng phải thực hiện đăng nhập.
3.4. Giỏ hàng
Sau khi chọn thêm các sản phẩm vào giỏ, người dùng có thể xem, thêm, bớt,
xóa sản phẩm trong giỏ hàng nếu muốn.
Hình 3.7: Giỏ hàng

51
3.5. Thanh toán
3.5.1. Địa chỉ giao hàng
Người dùng phải thực hiện việc đăng nhập trước khi đến phần thanh toán, sau
khi đăng nhập thành công, website sẽ chuyển đến trang địa chỉ thanh toán,
người dùng có thể xem lại tóm tắt giỏ hàng và chọn địa chỉ giao hàng.
Hình 3.8: Địa chỉ giao hàng
3.5.2. Trang thanh toán và đặt mua
Bước xác nhận thông tin cuối cùng, khách hàng có thể xem lại giỏ hàng, địa
chỉ đặt mua và thực hiện đặt hàng.
Hình 3.9: Thanh toán và đặt mua

52
3.6. Trang quản trị
3.6.1. Trang quản lý sản phẩm
Hiển thị danh sách sản phẩm, người quản trị có thể xem danh sách, thêm, sửa,
xóa sản phẩm.
Hình 3.10: Danh sách sản phẩm
3.6.2. Trang quản lý người dùng
Hiển thị danh sách người dùng, người quản trị có thể xem danh sách, thêm,
sửa, xóa tài khoản.
Hình 3.11: Danh sách người dùng

53
3.6.3. Trang quản lý bình luận
Người quản trị có thể xem xét và xóa những bình luận mang nội dung tiêu
cực, ảnh hưởng tới người dùng khác,…
Hình 3.12: Quản lý bình luận
3.6.4. Trang quản lý hóa đơn
Người quản trị xem thông tin hóa đơn và xét duyệt
Hình 3.13: Quản lý hóa đơn

54
3.6.5. Trang quản lý slide
Người quản trị có thể tùy chọn hình ảnh slide để hiển thị ra ngoài trang chủ
Hình 3.14: Quản lý slide
3.7. Đăng ký và đăng nhập
Người dùng có thể thực hiện đăng ký hoặc đăng nhập (bằng tài khoản
facebook) để thanh toán, lưu sản phẩm vào giỏ hàng, bình luận…
Hình 3.15: Trang đăng nhập

55
Hình 3.16: Trang đăng ký
3.8. Thông tin tài khoản
Sau khi đăng nhập thành công, người dùng có thể xem thông tin chi tiết tài
khoản, đổi mật khẩu và thông tin chi tiết đơn đặt hàng
Hình 3.17: Thông tin tài khoản

56
CHƢƠNG 4: KẾT LUẬN VÀ ĐÁNH GIÁ
Nhìn chung sản phẩm đã gần như đủ các chức năng cơ bản của một website
thương mại điện tử. Quan trọng hơn hết nhóm đã thật sự nỗ lực và dành thời
gian nghiên cứu, thảo luận, nâng cấp sản phẩm, học thêm được nhiều kiến
thức bao gồm những kiến thức chuyên ngành và những kiến thức kỹ năng
mềm, tiếng anh,… Hiểu rõ được quy trình bán hàng thương mại điện tử, vận
dụng tốt các công cụ lập trình (MySQL, Visual Studio Code, Eclipse,…). Tìm
hiểu và vận dụng hiệu quả công cụ quản lý source code (git). Đặc biệt là sự
góp ý, động viên từ giảng viên hướng dẫn là nguồn động lực và ý tưởng lớn
lao, tiếp thêm sức mạnh và ý tưởng để sản phẩm ngày càng hoàn thiện hơn.
Tuy vậy vì sự hạn chế về mặt nhân lực và thời gian, nhóm chưa đi sâu, rà
soát, kiểm thử được toàn bộ sản phẩm. Chưa tối ưu hóa và vận dụng triệt để
các thư viện hỗ trợ, cấu trúc code còn dài dòng, lộn xộn,…
Tương lai nếu phát triển thêm nhóm sẽ hoàn thiện một số chức năng như:
 Đánh giá sản phẩm: Hiển thị các mức lẻ 0.5, 1.5, 2.5,...
 Phần chọn màu sắc trong trang chi tiết: Sẽ hiển thị theo mã màu.
 Phần bình luận: Hiển thị avatar của người dùng, chia mục bình luận
bằng tài khoản Facebook và tài khoản thông thường thành 2 phần.
 Phần quản trị: Có thể chọn hình ảnh để hiển thị ra slide ngoài trang chủ,
biểu đồ thống kê số lượng user đăng ký mỗi tháng, số đơn đặt hàng mỗi
tháng,…
 Thêm nhiều sản phẩm để đa dạng hóa mặt hàng.
 Thêm vào một số animation để website sống động, linh hoạt hơn.
Kiểm tra rà soát lỗi, nghiên cứu sâu hơn về các thư viện hỗ trợ, tối ưu hóa tốc
độ cũng như dung lượng website.

57
TÀI LIỆU THAM KHẢO
[1] Trang hỏi đáp về code, 06/02/2020, https://stackoverflow.com/
[2] Viettuts, Tìm hiểu về Spring, 05/02/2020, https://viettuts.vn/spring
[3] Nguyễn Tuấn Anh, Giới thiệu Spring Framework, 05/02/2020,
https://kipalog.com/posts/Gioi-thieu-Spring-Framework
[4] Thanh Nguyen, Spring Framework, 07/5/2020,
https://www.slideshare.net/mrbeen351/spring-framework-61190798
[5] Techtalk, Một cái nhìn tổng quan nhất về Nodejs, 11/02/2020,
https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html
[6] Nguyen Minh Dinh, Node.js Tutorial: Phần 1 – Giới thiệu và cài đặt ứng
dụng đầu tiên, 11/02/2020, https://viblo.asia/p/nodejs-tutorial-phan-1-gioi-
thieu-va-cai-dat-ung-dung-dau-tien-gVQvlwdykZJ
[7] Kazuho Oku và Goro Fuji, JSX, 12/02/2020, https://jsx.github.io/
[8] Bùi Hiếu, Bước đầu tìm hiểu về ReactJs, 12/02/2020,
https://viblo.asia/p/buoc-dau-tim-hieu-ve-reactjs-1VgZvwWYlAw
[9] Do Khanh Toan, Giới thiệu về ReactJS - phần I (Các khái niệm cơ bản),
12/02/2020, https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-
co-ban-V3m5WzjblO7
[10] Hoang Trong Hieu, ReactJS – Ưu điểm và nhược điểm, 12/02/2020,
https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7
[11] Facebook, ReactJS, 13/02/2020, https://reactjs.org/
[12] Pets Pets, ReactJS – Tìm hiểu về Component Life Cycle, 17/02/2020,
https://viblo.asia/p/reactjs-tim-hieu-ve-component-life-cycle-naQZRw4Plvx

58
[13] React Bootstrap, 31/3/2020, https://react-bootstrap.github.io/
[14] Jason Saayman, Axios, 31/3/2020, https://github.com/axios/axios
[15] React Training, Website hướng dẫn về React Router, 01/4/2020,
https://reacttraining.com/react-router/web/guides/quick-start
[16] AdeleD, React paginate, 01/4/2020, https://github.com/AdeleD/react-
paginate#readme
[17] Nghiepuit, Khóa học lập trình React.js – Redux (Reactjs redux tutorial),
04/4/2020,
https://www.youtube.com/playlist?list=PLJ5qtRQovuEOoKffoCBzTfvzMTT
ORnoyp
[18] Nhat, Redux là gì? Hiểu rõ cơ bản cách dùng Redux, 03/4/2020
https://topdev.vn/blog/redux-la-gi/
[19] Phạm Tín, Tìm hiểu về ReduxThunk, 05/4/2020, https://viblo.asia/p/tim-
hieu-ve-redux-thunk-Qbq5Qkm4ZD8

Tìm hiểu framework Spring cho Backend, Reactjs cho frontend và xây dựng website bán giày Minh Họa.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Tìm hiểu framework Spring cho Backend, Reactjs cho frontend và xây dựng website bán giày Minh Họa.pdf

Similar to Tìm hiểu framework Spring cho Backend, Reactjs cho frontend và xây dựng website bán giày Minh Họa.pdf (20)

More from Man_Ebook

More from Man_Ebook (20)

Recently uploaded

Recently uploaded (20)

Tìm hiểu framework Spring cho Backend, Reactjs cho frontend và xây dựng website bán giày Minh Họa.pdf