Nhận file word miễn phí nhắn tin zalo 03838.288.54 nhé. Báo cáo thực tập công nghệ thông tin.

1. 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

2. 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

3. 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

4. NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
………………………………………………………………………………….
TP. Hồ Chí Minh, ngày … tháng … năm 2020
Giảng viên phản biện

5. 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.
TP. Hồ Chí Minh, ngày … tháng … năm 2020
Sinh viên thực hiện

6. 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

7. 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

8. 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

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

10. 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

11. 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

12. 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

13. 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

14. 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.

15. 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.

16. 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á

17. 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.

18. 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.

19. 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 đó.

20. 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.