Tìm hiểu spring restful api, angular xây dựng website bán đồ nội thất

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 PHẦN 1: MỞ ĐẦU Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tính cấp thiết đề tài Xã hội ngày phát triển, mức sống người dân ngày cao, nhịp sống người tăng nhanh Để đáp ứng cho nhu cầu sống ngày động đổi người, loại hình xuất ngày nhiều Nhu cầu mua sắm online ngày nhiều, đáp ứng nhu cầu tăng khách hàng, website bán đồ nội thất cập nhật xu hướng điểm đến đáng tin cậy cho khách hàng tiềm với nhu cầu mua sắm đồ nội thất cho gia đình 1.2 Mục tiêu đề tài - Xây dụng website bán đồ nội thất với Spring Restful API, AngularJS Website kinh doanh nhiều loại sản phẩm đa dạng chế tác từ nhiều hãng tiếng nước - Các mục tiêu sản phẩm nhắm tới:  Về phía khách hàng:  Giao diện màu sắc hài hịa, bố cục hợp lí, dễ sử dụng  Thơng tin sản phẩm rõ ràng, xác  Dễ dàng chọn lựa, đặt hàng  Thao tác đăng ký tài khoản nhanh chóng  Tài khoản bảo mật  Về phía người quản lý:  Giao diện đơn giản, dễ sử dụng  Dễ dàng quản lý, thực thao tác thêm, xóa, sửa  Phân quyền tài khoản nhân viên admin  Tài khoản bảo mật 1.3 Kết cấu đề tài Đề tài bao gồm giai đoạn: - Khảo sát trạng - Mơ hình hóa u cầu thiết kế CSDL - Thiết kế giao diện xử lý - Lập trình 15 - Kiểm thử phần mềm 16 Chương KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát website tiêu biểu 2.1.1 Website https://nhadep.com.vn/ *Hình ảnh website Trang chủ: 17 18 Trang sản phẩm: 19 Hình 25 Thiết kế xử lý giao diện quên mật - Lập danh sách xử lý STT Tên xử lý Xác nhận thay đổi mật Thoát Điều kiện gọi thực Ghi Khi click vào nút mũi tên Khi click vào nút “x” 222 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 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 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 ... hàng, website bán đồ nội thất cập nhật xu hướng điểm đến đáng tin cậy cho khách hàng tiềm với nhu cầu mua sắm đồ nội thất cho gia đình 1.2 Mục tiêu đề tài - Xây dụng website bán đồ nội thất với Spring. .. chưa hợp lí - Nội dung, hình ảnh chưa đa dạng - Thanh điều hướng chưa mổi bật 58 PHẦN 2: NỘI DUNG Chương TÌM HIỂU SPRING RESTFUL API VÀ ANGULAR 1.1 SPRING RESTFUL 1.1.1 Spring boot Spring boot...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 YÊU CẦU VÀ THIẾT KẾ CƠ SỞ