Báo cáo thực tập tốt nghiệp Công nghệ thông tin: Tìm hiểu framework spring cho backend, reactjs cho frontend và xây dựng website bán giày minh họa

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:70

Thêm vào BST

Báo xấu

29
lượt xem 17
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Mục tiêu của đề 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" là 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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Báo cáo thực tập tốt nghiệp Công nghệ thông tin: Tìm hiểu framework spring cho backend, reactjs cho frontend và xây dựng website bán giày minh họa

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 …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. …………………………………………………………………………………. TP. Hồ Chí Minh, ngày … tháng … năm 2020 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. TP. Hồ Chí Minh, ngày … tháng … năm 2020 Sinh viên thực hiện
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 i
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 ii
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 iii
SPA: Single Page Application STOMP: Streaming Text Oriented Messaging Protocol UI: User Interface XML: Extensible Markup Language iv
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 v
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 vi
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 vii
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 1
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. 2
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. 3
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á 4
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. 5
 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. 6
 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 đó. 7
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. 8