Nó giúp cho các lập trình viên chúng ta đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng.- Để phát triển một ứng dụng web
lOMoARcPSD|39222638 TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN =======***======= BÁO CÁO BÀI TẬP LỚN THỰC TẬP CHUYÊN NGHÀNH KTPM ĐỀ TÀI: SỬ DỤNG FRAMEWORK REACTJS VÀ SPRING BOOT ÁP DỤNG TRONG VIỆC XÂY DỰNG WEB QUẢN LÝ PHÒNG TRỌ Giáo viên hướng dẫn: Ths Nguyễn Thái Cường Nhóm thực hiện: Nhóm 3 Thành viên: Nguyễn Quang Huy Mạch Văn Quân Lê Thị Trang Phạm Đức Thắng Mã Phương Nga Hà Nội - 2023 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 MỤC LỤC MỤC LỤC 2 LỜI CẢM ƠN .6 LỜI MỞ ĐẦU 7 CHƯƠNG 1: TỔNG QUAN VỀ NỘI DUNG NGHIÊN CỨU 8 1.1 ReactJS 8 1.1.1 Tổng quan về ReactJS 8 1.1.2 Ưu điểm của ReactJS 8 1.1.3 Các đặc điểm nổi bật của ReactJS .9 1.1.4 Thêm ReactJS vào website 10 1.2 Spring Boot 13 1.2.1 Spring Boot là gì? 13 1.2.2 Một số tính năng nổi bật của Spring Boot 13 1.2.3 Cách khởi tạo dự án 13 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17 2.1 Giới thiệu .17 2.2 Khảo sát sơ bộ hệ thống 17 2.3 Phân tích hệ thống 17 2.3.1 Mô hình hóa chức năng hệ thống 17 2.3.2 Phân tích use case 26 CHƯƠNG 3: CÀI ĐẶT CHƯƠNG TRÌNH 35 3.1 Giao diện quản lý admin - User 35 3.1.1 Giao diện hiển thị danh sách admin 35 3.1.2 Giao diện Add Admin .36 3.1.3 Giao diện Edit Admin .36 3.1.4 Giao diện Delete Admin 37 3.2 Giao diện quản lý phòng trọ - Room 37 2 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 3.2.1 Giao diện hiển thị danh sách phòng trọ 38 3.2.2 Giao diện Add Room 38 3.2.2 Giao diện Edit Room 39 3.2.3 Giao diện Delete Room 39 3.3 Giao diện quản lý khách hàng - Customer 39 3.3.1 Giao diện hiển thị danh sách khách hàng 40 3.3.2 Giao diện Add Customer 40 3.3.2 Giao diện Edit Customer 41 3.3.3 Giao diện Delete Customer 41 3.4 Giao diện quản lý hóa đơn – Bill 42 3.4.1 Giao diện hiển thị danh sách hóa đơn 42 3.4.2 Giao diện Add Bill 42 3.4.2 Giao diện Edit Bill .43 3.4.3 Giao diện Delete Bill 43 3.5 Giao diện đăng nhập – Login 43 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 45 TÀI LIỆU THAM KHẢO 46 3 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 DANH MỤC HÌNH ẢNH Hình 1: Logo ReactJS 8 Hình 2: Khai báo biến trong JSX 9 Hình 3: Gán thuộc thính HTML id của thẻ 10 Hình 4: Thêm các thẻ Script 11 Hình 5: Đoạn code khởi tạo 12 Hình 6: Thêm 2 dòng cuối file like-button.js .12 Hình 7: Cách kiểm tra Spring Boot CLI 13 Hình 8: Tạo ứng dụng web demo 14 Hình 9: Cấu trúc của Maven và file chứa 14 Hình 10: Khởi tạo web với địa chỉ port .15 Hình 11: Kết quả sau khi chạy 15 Hình 12: Run code và giao diện hiển thị 16 Hình 13: Biểu đồ usecase tổng quát 18 Hình 14: Biểu đồ thực thể liên kết .19 Hình 15: Bảng thông tin người dùng 19 Hình 16: Bảng thông tin khách hàng 20 Hình 17: Bảng thông tin hóa đơn 20 Hình 18: Bảng thông tin phòng 21 Hình 19: Biểu đồ lớp phân tích 27 Hình 20: Biểu đồ trình tự usecase đăng nhập 27 Hình 21: Biểu đồ lóp phân tích usecase quản lý khách hàng 28 Hình 22: Biểu đồ trình tự usecase quản lý khách hàng .30 Hình 23: Biểu đồ lớp phân tích usecase quản lý phòng trọ 30 Hình 24: Biểu đồ trinh tự usecase quản lý phòng trọ 32 Hình 25: Biểu đồ lớp phân tích usecase quản lý phòng trọ 32 4 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 Hình 26: Biểu đồ trinh tự usecase tìm kiếm 33 Hình 27: Biểu đồ lớp phân tích usecase quản lý phòng trọ 33 Hình 28: Biểu đồ trinh tự usecase quản lý hóa đơn 34 Hình 29: Giao diện hiển thị danh sách Admin 35 Hình 30: Giao diện Add User 36 Hình 31: Giao diện Edit User 36 Hình 32: Giao diện Delete User 37 Hình 33: Giao diện hiển thị danh sách phòng trọ .38 Hình 34: Giao diện Add Room 38 Hình 35: Giao diện Edit Room 39 Hình 36: Giao diện Delete Room 39 Hình 37: Giao diện hiển thị danh sách khách hàng 40 Hình 38: Giao diện Add Customer 40 Hình 39: Giao diện Edit Customer 41 Hình 40: Giao diện Delete Customer 41 Hình 41: Giao diện hiển thị danh sách hóa đơn .42 Hình 42: Giao diện Add Bill 42 Hình 43: Giao diện Edit Bill 43 Hình 44: Giao diện Delete Bill 43 Hình 45: Giao diện Login 44 5 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 LỜI CẢM ƠN Lời đầu tiên, nhóm 3 chúng em xin gửi lời cảm ơn trân thành đến thầy Nguyễn Thái Cường Trong quá trình học tập và thực hiện đề tài, chúng em đã nhận được sự quan tâm, hướng dẫn tận tình từ thầy Những gì chúng em nhận được không chỉ dừng lại ở kiến thức môn học mà nhiều hơn thế đó là những lời khuyên, chia sẻ thực tế từ thầy Để hoàn thành được đề tài này, nhóm chúng em đã cùng nhau nghiên cứu, thảo luận, áp dụng những kiến thức được học trên lớp cùng với các nguồn tài liệu trên Internet và cả những trải nghiệm của bản thân đối với đề tài lần này Chúng em rất mong sẽ nhận được những lời nhận xét, góp ý từ thầy, cô và các bạn đọc để đề tài của bọn em có thể hoàn thiện hơn nữa Em xin chúc thầy cũng như các thầy, cô của Trường Đại học Công Nghiệp Hà Nội luôn luôn mạnh khỏe, tươi vui để có thể tiếp tục dìu dắt những thế hệ bọn em đến với tương lai tươi mới hơn Chúng em xin trân thành cảm ơn! 6 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 LỜI MỞ ĐẦU Trong thời đại công nghệ số ngày nay, việc sử dụng các ứng dụng trên điện thoại để quản lý cuộc sống và công việc của chúng ta đã trở nên phổ biến hơn bao giờ hết Và khi đến việc quản lý phòng trọ, điều này càng trở nên cần thiết hơn bao giờ hết Với sự phát triển của thị trường bất động sản, việc quản lý phòng trọ đòi hỏi sự chú ý và theo dõi từ phía chủ nhà, đồng thời cũng đòi hỏi sự tiện ích và dễ dàng trong việc quản lý từ phía các sinh viên, người thuê trọ Vì vậy, một ứng dụng quản lý phòng trọ tiện lợi và dễ sử dụng sẽ là giải pháp tốt nhất cho các chủ nhà và người thuê trọ để quản lý phòng trọ một cách hiệu quả và thuận tiện hơn bao giờ hết 7 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 CHƯƠNG 1: TỔNG QUAN VỀ NỘI DUNG NGHIÊN CỨU 1.1 ReactJS 1.1.1 Tổng quan về ReactJS - ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để xây dựng các tương tác với các thành phần trên website - React giúp tạo các UI tương tác một cách dễ dàng Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng của bạn, và React sẽ cập nhật và render đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi Hình 1: Logo ReactJS 1.1.2 Ưu điểm của ReactJS Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance website thì ReactJS còn có một số ưu điểm có thể nói đến như: - Phù hợp với đa dạng thể loại website 8 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 - Tái sử dụng các Component - Có thể sử dụng cho cả Mobile application - Thân thiện với SEO - Debug dễ dàng - Công cụ phát triển web hot nhất hiện nay 1.1.3 Các đặc điểm nổi bật của ReactJS - JSX (Javascript XML): Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương Hình 2: Khai báo biến trong JSX - Redux: là một phần cực kỳ quan trọng đối với ReactJS và được sử dụng phổ biến Trong một ReactJS không có các module chuyên dụng để xử lý dữ liệu nên nó được thiết lập một cách độc lập bằng việc chia nhỏ view thành các thành phần khác nhau giúp chúng liên kết chặt chẽ với nhau tốt hơn Sự liên kết và các mối quan hệ giữa các component trong ReactJS cần được quan tâm đặc biệt bởi chỉ có một luồng dữ liệu duy nhất là luồng dữ liệu từ cha sang con - Virtual Dom: là một phần quan trọng mà hầu như các framework đều sử dụng nó như một ReactJS Người dùng không cần thao tác trực tiếp trên Dom mà vẫn có thể thấy được view và các thay đổi đó Bởi Virtual Dom đóng vai trò 9 Downloaded by MON MON (monmon2@gmail.com) lOMoARcPSD|39222638 là một model và kiêm cả vai trò là một view nên sự thay đổi một trong hai nhân tố sẽ kéo theo các nhân tố khác thay đổi Ngược lại, nếu bạn không thao tác trực tiếp trên các phân tử Dom, bạn vẫn có thể thực hiện được các cơ chế Data Binding 1.1.4 Thêm ReactJS vào website - Bước 1: Thêm DOM Container vào HTML Đầu tiên, mở trang HTML cần chỉnh sửa Thêm thẻ rỗng để đánh dấu chỗ mà bạn muốn hiển thị một phần tử nào đó với React Ví dụ: 10 Downloaded by MON MON (monmon2@gmail.com)