Tìm Hiểu Spring Restful Api, Angular Xây Dựng Website Bán Đồ Nội Thất.pdf

Untitled Page 1 of 236 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN Đề Tài KHÓA LUẬN TỐT NGHIỆP KHÓA 2016 2020 BỘ MÔN CÔNG NGHỆ PHẦN MỀM TÌM HIỂU SPRING RESTFUL API, ANGULAR[.]

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM TRẦN THỊ NGỌC TRÂM - 16110543 PHẠM GIA THỊNH - 16110475 Đề Tài: TÌM HIỂU SPRING RESTFUL API, ANGULAR XÂY DỰNG WEBSITE BÁN ĐỒ NỘI THẤT KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO KHÓA 2016 - 2020 Page of 236 LỜI CÁM ƠN Trong trình nghiên cứu đề tài, giảng viên hỗ trợ, hướng dẫn sinh viên Với tất kính trọng, nhóm thực đề tài xin bày tỏ lòng biết ơn đến quý thầy cô theo dõi hướng dẫn suốt thời gian thực đề tài Nhóm xin gửi lời cảm ơn đến Ban Chủ nhiệm khoa Công nghệ Thông tin thầy cô khoa Công nghệ Thông tin - trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh tạo mơi trường học tập làm việc chun nghiệp, nhiệt tình giảng dạy nhóm thực đề tài nói riêng sinh viên khoa Cơng nghệ Thơng tin nói chung q trình học tập làm việc trường Đặc biệt, xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Đạo, hướng dẫn, quan tâm, góp ý ln đồng đồng hành nhóm giai đoạn khó khăn đề tài Với kinh nghiệm thực tiễn cịn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hỏi, đóng góp ý kiến bảo thêm q thầy để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau Chúng em xin chân thành cảm ơn! Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa : CNTT ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ Tên SV thực : Trần Thị Ngọc Trâm Mã Số SV : 16110543 Họ Tên SV thực : Phạm Gia Thịnh Mã Số SV : 16110475 Thời gian làm luận văn : từ : Đến : Chuyên ngành : Công nghệ phần mềm Tên luận văn : Tìm hiểu Spring Restful API – Angular xây dựng website bán đồ nội thất GV hướng dẫn : Ths.Nguyễn Minh Đạo Nhiệm Vụ Của Luận Văn : Tìm hiểu Spring Restful API Angular Xây dựng website bán đồ nội thất Đề cương viết luận văn : Phần 1: MỞ ĐẦU Chương : Giới thiệu đề tài 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Kết cấu đề tài Chương : Khảo sát trạng 1.1 Khảo sát website tiêu biểu 1.2 Kết luận tiêu chí website cần đạt Phần 2: NỘI DUNG Chương : Tìm hiểu Spring Restful API Angular 1.1 Spring Restful API 1.1.1 Spring boot 1.1.2 Một số spring boot annotation 1.1.3 Restful Api 1.1.4 Oauth2 1.2 Angular 1.2.1 Giới thiệu Angular 1.2.2 Ưu điểm việc sử dụng Angular 1.2.3 Một số khái niệm Chương : Xây dựng website bán đồ nội thất 2.1 Mơ hình hóa u cầu thiết kế sở liệu 2.1.1 Use case diagram 2.1.2 Chi tiết Actor 2.1.3 Sơ đồ luồng liệu sở liệu nghiệp vụ 2.1.4 Cơ sở liệu cuối 2.1.5 Sequence Diagram 2.2 Thiết kế giao diện xử lý 2.3 Lập trình 2.3.1 Ngơn ngữ lập trình Java 2.3.2 Ngơn ngữ lập trình Javascript 2.3.3 Hệ quản trị sở liệu MySQL 2.3.4 Sơ đồ lớp 2.4 Kiểm thử phần mềm Phần : KẾT LUẬN Phụ lục Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc Ghi 30/3 – 06/04/2020 Thiết kế sở liệu 07/04 – 12/04/2020 Tìm hiểu Spring boot, html, bootstrap 11/04 – 15/04/2020 Tìm hiểu Spring restful api 13/04 – 19/04/2020 Tìm hiểu Angular 30/04 – 05/05/2020 Tìm hiểu đăng nhập với Oauth2 01/05 – 12/05/2020 Xây dựng api (crud) cho website 15/05 – 25/05/2020 Xây dựng giao diện admin quản lý 02/06 – 09/06/2020 Kết hợp api (crud) từ spring vào angular 10/06 – 20/06/2020 Xây dựng giao diện trang chủ người dùng 10 23/06 – 30/06/2020 Xây dựng chức đăng nhập với OAuth2 11 02/07 – 09/07/2020 Xây dựng chức mua hàng 12 10/07 – 15/06/2020 Xây dựng chức thống kê 13 20/07 – 23/07/2020 Kiểm thử 14 23/07 – 27/07/2020 Hồn thành báo cáo chương trình 15 28/07 – 12/07/2020 Kiểm thử, hồn tất chương trình Tp Hồ Chí Minh, ngày … tháng … năm 2020 Sinh viên Trần Thị Ngọc Trâm, Phạm Gia Thịnh Ý kiến giáo viên hướng dẫn (ký ghi rõ họ tên) MỤC LỤC MỤC LỤC HÌNH ẢNH 13 MỤC LỤC BẢNG BIỂU 14 PHẦN 1: MỞ ĐẦU 15 Chương GIỚI THIỆU ĐỀ TÀI 15 1.1 Tính cấp thiết đề tài 15 1.2 Mục tiêu đề tài 15 1.3 Kết cấu đề tài 15 Chương 2.1 KHẢO SÁT HIỆN TRẠNG 17 Khảo sát website tiêu biểu 17 2.1.1 Website https://nhadep.com.vn/ 17 2.1.2 Website https://noithathoaphat.pro/ 27 2.1.3 Website nhaxinh.com 34 2.1.4 Website https://gotrangtri.vn/ 44 2.2 Kết luận tiêu chí website cần đạt 58 2.2.1 Những ưu điểm cần học 58 2.2.2 Những nhược điểm cần khắc phục 58 PHẦN 2: NỘI DUNG 59 Chương 1.1 TÌM HIỂU SPRING RESTFUL API VÀ ANGULAR 59 SPRING RESTFUL 59 1.1.1 Spring boot 59 1.1.2 Một số spring boot annotation 60 1.1.3 Restful Api 61 1.1.4 OAuth2 62 1.2 ANGULAR 64 1.2.1 Giới thiệu Angular 64 10 1.2.2 Ưu điểm việc sử dụng Angular 64 1.2.3 Một số khái niệm 66 Chương 2.1 XÂY DỰNG WEBSITE BÁN ĐỒ NỘI THẤT 71 MƠ HÌNH HĨA U CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 71 2.1.1 Use Case Diagram 71 2.1.2 Chi tiết Actor 71 2.1.3 Sơ đồ luồng liệu sở liệu nghiệp vụ 93 2.1.4 Cơ sở liệu cuối 181 2.1.5 Sequence Diagram 182 2.2 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 198 2.2.1 Màn hình đăng nhập 198 2.2.2 Màn hình đăng ký 199 2.2.3 Màn hình trang chủ 201 2.2.4 Màn hình sản phẩm 205 2.2.5 Màn hình chi tiết sản phẩm 208 2.2.6 Màn hình chi tiết sản phẩm 211 2.2.7 Màn hình giỏ hàng 213 2.2.8 Màn hình trang chủ admin 216 2.2.9 Màn hình thêm loại sản phẩm 218 2.2.10 Màn hình xem chi tiết nhân viên 219 2.2.11 Màn hình menu cá nhân 220 2.2.12 Màn hình quên mật 221 2.3 LẬP TRÌNH 223 2.3.1 Ngơn ngữ lập trình Java 223 2.3.2 Ngơn ngữ lập trình JavaScript 223 2.3.3 Hệ quản trị sở liệu MySQL 224 11 2.3.4 2.4 Sơ đồ lớp 224 KIỂM THỬ PHẦN MỀM 231 Phần 3: KẾT LUẬN 234 PHỤ LỤC 235 TÀI LIỆU THAM KHẢO 236 12 MỤC LỤC HÌNH ẢNH Hình 1: Usecase Diagram 71 Hình Giao diện hình đăng nhập 198 Hình Thiết kế xử lý giao diện đăng nhập 198 Hình Giao hình đăng ký 199 Hình Thiết kế xử lý giao diện đăng ký 200 Hình Giao diện hình trang chủ 202 Hình Thiết kế xử lý giao diện trang chủ 204 Hình Giao diện hình sản phẩm 205 Hình Thiết kế xử lý giao diện sản phẩm 206 Hình 10 Giao diện hình chi tiết sản phẩm 209 Hình 11 Thiết kế xử lý giao diện chi tiết sản phẩm 210 Hình 12 Giao diện hình thơng tin cá nhân 211 Hình 13 Thiết kế xử lý giao diện thông tin cá nhân 212 Hình 14 Giao diện hình giỏ hàng 214 Hình 15 Thiết kế xử lý giao diện giỏ hàng 215 Hình 16 Giao diện hình trang chủ admin 216 Hình 17 Thiết kế xử lý giao diện trang chủ admin 217 Hình 18 Giao diện hình thêm loại sản phẩm 218 Hình 19 Thiết kế xử lý giao diện thêm loại sản phẩm 218 Hình 20 Giao diện hình xem chi tiết nhân viên 219 Hình 21 Thiết kế xử lý giao diện xem chi tiết nhân viên 219 Hình 22 Giao diện hình menu cá nhân 220 Hình 23 Thiết kế xử lý giao diện menu cá nhân 221 Hình 24 Giao diện hình quên mật 221 Hình 25 Thiết kế xử lý giao diện quên mật 222 13 MỤC LỤC BẢNG BIỂU Bảng Danh sách nghiệp vụ đối tượng Guest 71 Bảng Danh sách quy định đối tượng Guest 72 Bảng Danh sách nghiệp vụ đối tượng User 74 Bảng Danh sách quy định đối tượng User 75 Bảng Danh sách nghiệp vụ đối tượng Admin 76 Bảng Danh sách quy định đối tượng Admin 79 Bảng Danh sách nghiệp vụ đối tượng Employee 85 Bảng Danh sách nghiệp vụ đối tượng Employee 87 14 2.3 LẬP TRÌNH 2.3.1 Ngơn ngữ lập trình Java Java biết tới ngơn ngữ lập trình phổ biến giới thời đại Đây ngôn ngữ lập trình máy tính đa mục đích, đạt phổ biến nhờ vào tính chất định hướng đối tượng, đồng thời dựa class Ngôn ngữ tồn hai thập kỷ, đặc điểm hấp dẫn sự tiến hố khơng ngừng giúp Java giữ vững vị trí cộng đồng người sử dụng Enum, Generics, Autoboxing,… số số thay đổi đột phá xuất tảng theo thời gian Khơng cịn thắc mắc gì; nhiều chuyên gia tin Java ngơn ngữ lập trình tốt tạo Các ưu điểm Java: - Điểm cộng lớn Java rõ ràng mã nguồn, hồn tồn tách riêng với giao diện HTML - Java cho phép bạn tạo chương trình mơ-đun mã tái sử dụng để giữ cho hệ thống mở rộng linh hoạt - Java cung cấp API cho hoạt động khác kết nối sở liệu, kết nối mạng, I / O, phân tích cú pháp XML, tiện ích - Một số lượng lớn công cụ phát triển mã nguồn mở sử dụng Java làm cho Java trở thành lựa chọn mạnh mẽ cho nhà phát triển, ví dụ Eclipse Netbeans, IntelliJ Chúng tảng mạnh mẽ đóng góp hiệu việc tạo Java thành công ngày hơm 2.3.2 Ngơn ngữ lập trình JavaScript JavaScript ngơn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ lập trình web (HTML, CSS, JS) JavaScript có nhiều ưu điểm khiến vượt trội so với đối thủ, đặc biệt trường hợp thực tế Sau số lợi ích JavaScript: - Khơng cần compiler web browser biên dịch HTML - Lỗi dễ phát dễ sửa - Nó gắn số element trang web event trang web thông qua click chuột di chuột tới - JS hoạt động nhiều trình duyệt, tảng, … 223 - Bạn sử dụng JavaScript để kiểm tra input giảm thiểu việc kiểm tra thủ cơng truy xuất qua database - Nó giúp website tương tác tốt với khách truy cập - Nó nhanh nhẹ ngơn ngữ lập trình khác 2.3.3 Hệ quản trị sở liệu MySQL MySQL sở liệu mã nguồn mở phổ biến ổn định chế xử lý nhanh, nhiều người sử dụng đáng tin cậy, Yahoo, Google, Nokia, Youtube,… sử dụng MySQL để tiết kiệm thời gian chi phí website có dung lượng lớn Ngồi ưu điểm mã nguồn mở phổ biến nhất, MySQL sở liệu chọn cho ứng dụng xây dựng Linux, Apache, chạy nhiều flatform linh hoạt việc sử dụng Các ưu điểm bật MySQL: - Linh hoạt - Thực thi cao - Sử dụng - Hỗ trợ giao dịch - Nơi tin cậy để lưu trữ web liệu - Bảo mật tốt - Phát triển ứng dụng hỗn hợp - Dễ quản lý - Mã nguồn mở tự hỗ trợ xuyên suốt - Chi phí thấp 2.3.4 Sơ đồ lớp Package diagram 224 Class diagram: 2.1 Package config: 2.2 Package controller 225 2.3 Package exception 226 2.4 Package model 2.5 Package payload 227 2.6 Package repository 2.7 Package security 228 2.7.1 Package oauth2 2.7.1.1 Package user 229 2.8 Package sevice 2.9 Package seviceimpl 230 2.10 Package util 2.4 KIỂM THỬ PHẦN MỀM Kế hoạch kiểm thử: 231 - Dùng Postman để test API tạo để đảm bảo tính xác trước liên kết với phần giao diện - Hoàn thành giao diện, tiến hành kiểm tra responsive giao diện thiết bị - Kết nối front-end back-end - Tiến hành kiểm tra toàn ứng dụng tiến hành sửa lỗi Mỗi cập nhật thêm tính kiểm tra lại ứng dụng tiến hành sửa lỗi - Kiểm tra lại nhiều lần vào ngày kết thúc việc cập nhật thêm tính (ứng dụng đáp ứng nhu cầu) Quy trình kiểm thử: Quy trình gồm bước: Requirenment analysis - Phân tích yêu cầu Đọc hiểu, nghiên cứu phân tích yêu cầu mà ứng dụng phải đáp ứng phần đặc tả Từ đưa kiểm thử cho chức phải đáp ứng Test planning - Lập kế hoạch kiểm thử Xác định phạm vi dự án, sau lựa chọn phương án kiếm thử cho dự án Lên kế hoạch kiểm thử cho dự án: chức cần test, đáp ứng yêu cầu chức xem hoạt động yêu cầu đưa ra, xác định kiểm thử đến kết thúc Test case development - Thiết kế kịch kiểm thử Xem lại tài liệu cơng việc cần làm, cịn thiếu sót không Viết testcase, chuẩn bị liệu để kiểm thử, xem lại testcase liệu ổn chưa Test execution - Thực kiểm thử Tiến hành việc kiểm thử ghi lại kết sau kiểm thử Test result analysis – Phân tích kết kiểm thử So sánh kết có với kết mong đợi, phân tích nguyên nhân dẫn đến tính đáp ứng không yêu cầu Định kế hoạch phương thức khắc phục lỗi Sau tiến hành sửa lỗi Re-Testing – Kiểm tra lại Tiến hành việc kiểm thử lại xem lỗi khắc phục hay chưa Ghi lại kết đối chiếu với kết mong đợi Nếu chưa khắc phục tiến hành lại bước Test cycle closure - Đóng chu trình kiểm thử 232 Khi testcase pass ứng dụng đáp ứng yêu cầu đề ra, ta tiến hành ngừng việc kiểm thử 233 Phần 3: KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC - Xây dựng thành công Website lĩnh vực bán hàng nội thất online - Đảm bảo chức đăng nhập, đăng ký, giỏ hàng, thao tác quản lý admin - Vận dụng công nghệ: Spring Restful API, Angular ƯU ĐIỂM - Giao diện đơn giản, dễ sử dụng, màu sắc hài hịa - Có chức đăng nhập Facebook Googgle tạo thuận tiện cho người dùng - Có thể thêm sản phẩm vào giỏ hàng mà không cần phải vào trang chi tiết sản phẩm - Có thể chỉnh sửa số lượng sản phẩm muốn mua chi tiết sản phẩm giỏ hàng - Mã hóa password BCrypt trước lưu vào CSDL nhằm tăng tính bảo mật - Hệ quản trị sở liệu tiên tiến, hiệu cao NHƯỢC ĐIỂM - Hệ thống phân quyền đơn giản - Chưa responsive hồn tồn cho website - Tìm kiếm khơng có gợi ý cho người dùng HƯỚNG PHÁT TRIỂN - Đăng nhập thông qua google facebook - Responsive website hồn tồn - Tìm kiếm có gợi ý người dùng nhập nội dung - Tự động tính chi phí giao hàng 234 PHỤ LỤC Bảng phân cơng cơng việc STT Sinh viên thực Công việc Ghi Trần Thị Ngọc Trâm, Phạm Gia Thịnh Thiết kế sở liệu Xây dựng chức (crud) cho Trần Thị Ngọc Trâm website Phạm Gia Thịnh Xây dựng giao diện admin quản lý Xây dựng giao diện trang chủ người Phạm Gia Thịnh dùng Xây dựng chức đăng nhập với Trần Thị Ngọc Trâm OAuth2 Trần Thị Ngọc Trâm, Xây dựng chức thống kê, mua Phạm Gia Thịnh hàng Trần Thị Ngọc Trâm, Phạm Gia Thịnh Hoàn thành báo cáo chương trình Trần Thị Ngọc Trâm, Phạm Gia Thịnh Kiểm thử, hồn tất chương trình 235 TÀI LIỆU THAM KHẢO [1] https://angular.io/docs, Angular document [2] https://cameoplus.com/spring-framework-restful-web-service-don-gian/, 2018, Làm quen Spring Framework qua dự án Restful Web Service đơn giản [3] https://www.hostinger.vn, 2019, JavaScript gì? Giới thiệu JS cho người bắt đầu [4] https://medium.com/velacorpblog/làm-quen-và-xây-dựng-restfull-api-crud-đơngiản-với-spring-boot-5cb812245d2b, 2018, Làm quen xây dựng Restful Api với Spring boot [5] https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/, Copyright © 2012-2020, Tài liệu Spring boot 236 S K L 0