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ọ

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

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

Mã Phương Nga

Hà Nội - 2023

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

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

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ẻ <div> 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

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

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!

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ờicũ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

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 trongquá 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

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

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ẻ <div>

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ụ:

Hình 3: Gán thuộc thính HTML id của thẻ <div>

Chúng ta gán thuộc tính HTML id của thẻ <div> với giá trị duynhất

Điều này sẽ cho phép chúng ta tìm thấy phần tử này từ

Javascript code và hiển thị một React component bên trong nó

- Bước 2: Thêm các thẻ Script (Script Tags)

Hình 4: Thêm các thẻ Script

Hai thẻ đầu tiên sẽ load React Thẻ thứ ba sẽ load componentcode

- Bước 3: Tạo một React Component

Tạo một file với tên like-button.js cùng với trang HTML

Mở đoạn code khởi tạo sau và dán nó vào trong file vừa tạo.

Hình 5: Đoạn code khởi tạo

Thêm 2 dòng vào cuối file like-button.js:

Hình 6: Thêm 2 dòng cuối file like-button.js

Hai dòng code này tìm thẻ <div> đã thêm vào trang HTML ở bước đầu tiên, và sau đó hiển thị nút “Like” - một React

component bên trong div ở trên

1.2 Spring Boot

1.2.1 Spring Boot là gì?

trong hệ sinh thái Spring framework 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 cơ bản HelloWorld sử

dụng Spring framework bạn sẽ cần ít nhất 5 công đoạn sau:

1) Tạo một project sử dụng Maven với các dependency cần thiết của Spring MVC và Servlet API

2) Một tập tin web.xml để khai báo DispatcherServlet của Spring MVC

3) Một tập tin cấu hình của Spring MVC

4) Một class Controller trả về một trang “Hello World” khi có request đến

5) Cuối cùng là phải có một web server dùng để triển khai ứng dụng lên chạy

1.2.2 Một số tính năng nổi bật của Spring Boot

- Tự động cấu hình Spring khi cần thiết

- Không sinh code cấu hình và không yêu cầu phải cấu hình bằng XML …

1.2.3 Cách khởi tạo dự án

- Để khởi tạo một dự án thì cần làm các bước sau:

1) Đầu tiên, các bạn hãy cài đặt Spring Boot CLI trước Bạn

nào chưa biết cách cài đặt thì có thể tham khảo trên page spring boot

- Kiểm tra Spring Boot CLI như sau:

Hình 7: Cách kiểm tra Spring Boot CLI

- Kế tiếp, mình sẽ dùng Spring Boot CLI để tạo một ứng

dụng web cơ bản bằng câu lệnh sau:

spring init {project_name} -d=web

- Kế tiếp, mình sẽ tạo ứng dụng web tên là helloWorld như

sau:

Hình 8: Tạo ứng dụng web demo

- Kế tiếp, ta sẽ được cấu trúc của một Maven project như

sau:

Hình 9: Cấấu trúc c a Maven và fle ch a ủ ứ

Hình 1 1: Cấu trúc của Maven và file chứa

- Kế tiếp, dùng command line di chuyển đến thư mục và chạy ứng dụng với câu lệnh sau:

mvn spring-boot:run

- Kế tiếp, Spring Boot tự động làm hết mọi thứ để chạy ứng dụng web trên Tomcat với port mặc định là 8080.

Hình 10: Khởi tạo web với địa chỉ port

- Kế tiếp, dùng trình duyệt và truy cập đến

http://localhost:8080 sẽ thấy kết quả sẽ như sau:

Hình 11: Kết quả sau khi chạy

- Chúng ta sẽ thấy lỗi 404 Not Found là vì trong project mà chúng ta vừa tạo không có một Controller nào xử lý cho

request đến

- Bây giờ, nếu các bạn tạo một class HelloWorldController trong folder \src\main\java\app\controller\home:

package com.example.helloWorld;

import org.springframework.http.HttpStatus;

import org.springframework.http.ResponseEntity;

import org.springframework.stereotype.Controller;

public ResponseEntity hello() {

return new ResponseEntity("Hello World!", HttpStatus.OK);}

}

- Kế tiếp, run lại câu lệnh mất khoảng 15 giây:

Hình 12: Run code và giao diện hiển thị

- Tổng kết lại khi sử dụng Spring Boot chúng ta không mất qua nhiều công đoạn và thời gian để tạo một web project

đẻ chạy Mọi thứ đã được Spring Boot tự động làm hết

như sử dụng các framework PHP như Symfony, Laravel, … cái mà chúng ta quan tâm chỉ là develop Controller

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Giới thiệ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ờicũ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 website quản lý phòngtrọ 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

2.2 Khảo sát sơ bộ hệ thống

a Yêu cầu chức năng hệ thống:

Website quản lý phòng trọ cần có những chức năng sau:

QuanLyKhachHang

QuanLyPhongTro Admin

TimKiem

CSDL

QuanLyHoaDon

Hình 13: Biểu đồ usecase tổng quát

- Use case DangNhap cho phép admin đăng nhập vào hệ thống quản trị

- Use case QuanLyKhachHang cho phép admin thêm, sửa, xóa tài khoản khách hàng

- Use case QuanLyPhongTro cho phép admin thêm, sửa xóa

Hình 18: Bảng thông tin phòng

2.3.1.1 Mô tả use case Đăng nhập

- Mô tả vắn tắt: Use case này cho phép admin đăng nhập vào hệthống

cơ sở dữ liệu và cho phép tài khoản đăng nhập vào hệ

thống Use case kết thúc

- Luồng rẽ nhánh:

 Tại bước 2 ở luồng cơ bản, nếu admin nhập sai tên hoặc mật khẩu từ bảng USERTB, hệ thống sẽ hiển thị thông báo lỗi và quay lại bước 1 luồng cơ bản Use case kết thúc

 Tại bất kỳ thời điểm nào trong quá trình thực hiện use casenếu không kết nối được với CSDL thì hệ thống sẽ hiển thị một thông báo lỗi và use case kết thúc.

- Các yêu cầu đặc biệt: Không

- Tiền điều kiện: Không

- Hậu điều kiện: Không

- Điểm mở rộng: Không

2.3.1.2 Mô tả use case Quản lý người dùng

- Mô tả vắn tắt: Use case này cho phép admin xem, thêm, sửa

và xóa tài khoản khách hàng trong bảng CUSTOMERTB

- Luồng sự kiện:

- Luồng cơ bản:

 Use case này bắt đầu khi admin kích vào nút “User” trên thanh menu quản trị Hệ thống lấy thông tin chi tiết của khách hàng (customer_id, customer_check_in,

customer_date_of_birth, customer_identity_card,

customer_number_of_day, customer_name,

customer_check_out) từ bảng CUSTOMERTB trong CSDL và hiển thị lên màn hình

1 Thêm tài khoản khách hàng

- Admin kích vào nút “Thêm mới” trên cửa sổ danh sách khách hàng Hệ thống hiển thị màn hình yêu cầu nhập thông tin chi tiết khách hàng gồm customer_id,

customer_name, customer_check_out vào bảng

CUSTOMERTB Hệ thống sẽ tạo một tài khoản mới trong bảng

2 Sửa tài khoản khách hàng

- Admin kích vào nút “Sửa” trên dòng một tài khoản Hệ thống sẽ hiển thị một màn hình với các thông tin cũ của tàikhoản được chọn gồm: customer_id, customer_check_in, customer_date_of_birth, customer_identity_card,

3 Xóa tài khoản khách hàng

- Admin kích vào nút “Xóa” trên dòng một tài khoản Hệ thống sẽ hiển thị một màn hình yêu cầu xác nhận xóa

- Admin kích vào nút “Đồng ý” Hệ thống sẽ xóa tài khoản được chọn khỏi bảng CUSTOMERTB và hiển thị danh sách tài khoản đã cập nhật

Use case kết thúc

- Luồng rẽ nhánh

 Tại bước 2b hoặc 3b trong luồng cơ bản nếu admin nhập thông tin tài khoản không hợp lệ thì hệ thống sẽ hiển thị thông báo lỗi Admin có thể nhập lại để tiếp tục hoặc “Hủy bỏ” để kết thúc

 Tại bước 2b hoặc 3b hoặc 4b trong luồng cơ bản nếu adminkích vào nút “Hủy bỏ” hệ thống sẽ bỏ qua thao tác thêm mới hoặc sửa chữa hoặc xóa tương ứng và hiển thị danh sách tài khoản trong bảng CUSTOMERSTB

 Tại bất kỳ thời điểm nào trong quá trình thực hiện use casenếu không có kết nối CSDL thì hệ thống sẽ hiển thị thông báo lỗi và kết thúc

- Các yêu cầu đặc biệt: Không

- Tiền điều kiện: Admin cần đăng nhập với vai trò quản trị hệ thống trước khi có thể thực hiện use case

- Hậu điều kiện: Nếu use case kết thúc thì thông tin về tài khoản

sẽ được cập nhật trong CSDL

- Điểm mở rộng: Không

2.3.1.3 Mô tả use case Quản lý phòng trọ.

- Mô tả vắn tắt: Use case này cho phép admin xem, thêm, sửa

và xóa phòng trọ trong bảng ROOM

- Luồng sự kiện:

- Luồng cơ bản:

 Use case này bắt đầu khi admin kích vào nút “Room” trên menu quản trị Hệ thống lấy thông tin chi tiết của phòng trọ (số phòng, loại phòng, giá phòng, tình trạng) từ bảng ROOM trong CSDL và hiển thị lên màn hình

1 Thêm phỏng

- Admin kích vào nút “Thêm mới” trên cửa sổ danh sách phòng Hệ thống hiển thị màn hình yêu cầu nhập thông tin chi tiết phòng gồm số phòng, loại phòng, giá phòng, tình trạng

- Admin nhập thông tin của số phòng, loại phòng, giá phòng,tình trạng Hệ thống sẽ tạo một phòng mới trong bảng

2 Sửa phòng

- Admin kích vào nút “Sửa” trên một phòng Hệ thống sẽ lấy thông tin cũ của phòng được chọn gồm: loại phòng, giá phòng, tình trạng từ bảng ROOM và hiển thị lên màn hình

- Admin nhập thông tin mới cho loại phòng, giá phòng, tình trạng và kích vào nút “Cập nhật” Hệ thống sẽ sửa thông tin của phòng được chọn trong bảng

- Luồng rẽ nhánh