báo cáo btl môn kỹ thuật phần mềm xây dựng hệ thống quản lý trọ

Chúng em quyết định xây dựng một trang website giúp kết nối người cần thuê phòng trọ và người cho thuê bằng cách cho phép người cho thuê phòng có thể đăng tải các bài đăng về phòng, nhà

MUC LUC Nội dung

2.1.4 Tạo một bài đăng trên websiÏte - HH He 8 2.1.5 Xem, chỉnh sửa thông tin cá nhân -c- se site 8 2.2 Mô tả thiết kế giao diện 00 0.222 rrrrrree 8 2.2.1 Trang ChỦ + + tt SE ExEExEEtEkEErg.1.111.Eerrke 8 2.2.2 Trang đăng nhập - 5: +2 2tr 1211111111Hktke 10 2.2.3 Trang đăng ký c1 ke 10 2.2.4 Trang danh sách bài đăng - che 11 2.2.5 Trang chỉ tiết bài đăng - c2 t2 t2 222122221122 1 rerreriee 12

2.2.7 Trang thông tin cá nhân

3 Chương 3: Mô hình UML Diagrams neo 16

3.1.1 UC-1 Xem thông tin trang Web ch 16 3.1.2 UC-2 Đăng nhập H1 HH He 17

3.1.4 UC-4 Thay đổi thông tin cá nhân c-ccccccrrrrrerrrrrrrrrrrerrree 20

4 Chương 4: Mô hình dữ liệu - S2 24 4.1 Cấu trúc dữ liệu - 5: 50 St2t n1 te rrrrrrerrve 24 4.1.1 Bảng POSỂ cọ nh HH 1111111111111111111112111 1E 24

5.2 CMS Strapi (NodeJS) ch H111 re 27 BeBe MUU En a 27

5.4 Heroku Cloud - cm ke 27

5.6 Google Firebase Cloud - caro 28

6 Chương 6: Kết quả đạt được - 0 n2 rrrrrrrreo 29

1.Chuong 1: Giới thiệu

Trong xã hội hiện nay, nhu cầu tìm kiếm nhà, phòng cho trọ, cho thuê không hề thiếu Đặc biệt là trong bối cảnh hậu đại dịch Covid-19, bình thường hóa cuộc sống Một số lượng người không nhỏ

đổ về các thành phố lớn để tiếp tục công việc bản thân Sinh viên đại học là một trong số đó Với việc một loạt các trường đại học bắt đầu

cho phép sinh viên quay trở lại giảng đường, nhu cầu tìm kiếm phòng trọ xung quanh khu vực các trường đại học tăng vọt Chính vì vậy nên việc có thể tìm kiếm được cho bản thân một căn phòng ưng ý,

đáp ứng đủ nhu cầu của bản thân trở lên khó khăn Nắm bắt được

thực trạng này cũng như việc chính bản thân cũng là sinh viên đang phải chật vật đi tìm phòng trọ xung quanh khu vực trường đại học Phenikaa Chúng em quyết định xây dựng một trang website giúp kết nối người cần thuê phòng trọ và người cho thuê bằng cách cho phép người cho thuê phòng có thể đăng tải các bài đăng về phòng, nhà

mà mình cho như cầu cho thuê cùng thông tin liên hệ Từ đó các bạn

có nhu cầu tìm phòng có thể tham khảo qua các thông tin mà chủ

phòng, trọ đăng tải, rồi thực hiện liên hệ với chủ phòng để tới xem phòng cũng như đưa ra quyết định thuê phòng

1.1 Nền tảng hoạt động

- _ lên website chính thức: FindHomePKA

- _ Hoạt động trên các nền tảng trình duyệt web phổ biến hiện nay nhu Chrome, CocCoc, Microsoft Edge, FireFox,

- H6 tro cac hé diéu hanh phé bién nhu Windows (XP, 7, 8, 10, 11), Linux, MacOS

1.2 Các công nghệ sử dụng

e NextJS (React]S framework)

e Strapi CMS (NodeJS framework)

e Mui Ul

e Database Postgres SQL

e Heroku Cloud

Vercel Cloud

Google Firebase Cloud

Google Map API

Tóm tắt các chức năng chính

Trang web FindHomePKA sẽ có các chức năng chính như sau:

Tạo tài khoản và xác thực người dùng thông qua cơ chế JWT

Token

Xac thuc OAuthentic qua Google, Facebook

Quản lý thông tin cá nhân bao gồm các thông tin cơ bản như họ

và tên, số điện thoại, email

Chỉnh sửa, cập nhật thông tin cá nhân

Xem danh sách các bài đăng, thông tin chỉ tiết các bài đăng Tạo mới một bài đăng

2.Chương 2: Các chức năng chỉ tiết

Quản lý thông tin cá nhân

Hình 1S œiôô các chúc năng chính của website

Người dùng có thể đăng ký tài khoản để có thể thực hiện đầy

đủ các chức năng có trên hệ thống Bao gồm các trường thông tin như tên, số điện thoại, email, mật khẩu Bên cạnh đó người dùng có thể đăng nhập thẳng thông qua các tài khoản từ bên thư ba như Google, Facebook

Người dùng sử dụng thông tin như tên hoặc email cùng mật

khẩu đã tạo ở bước đăng ký để tiến hành đăng nhập vào hệ thống Người dùng cũng có thể đăng nhập nhanh thông qua các tài khoản

bên thư ba là Google, Facebook

Người dùng không cần thực hiện đăng nhập đăng ký để thực hiện chức năng này Người dùng có thể xem toàn bộ các bài đăng về

các phòng cho thuê đang có mặt trên hệ thống Khi click vào một bài đăng, website sẽ điều hướng người dùng đến trang thông tin chỉ tiết của bài đăng đó Tại đây người dùng có thể xem đầy đủ về các hình ảnh, thông tin mô tả, vị trí, cùng thông tin liên hệ của người đăng

bài

Người dùng bắt buộc phải thực hiện đăng nhập đăng ký để thực

hiện chức năng này Người dùng có thể thực hiện đăng tải thông tin

về phòng cho thuê trên hệ thống

Người dùng bắt buộc phải thực hiện đăng nhập đăng ký để thực

hiện chức năng này Người dùng có thể xem thông tin cá nhân của mình, thực hiện sửa đổi, cập nhật thông tin cá nhân

2.2 Mô tả thiết kế giao diện

Thiết kế giao diện trang chủ chính bao gồm một thanh điều

hướng chính giúp người dùng có thể điều hướng di chuyển giữa các

chức năng trong trang website Thanh điều hướng này sẽ luôn ở vị trí đầu trang ở bất kỳ một trang nào trong website Thanh điều hướng này bao gồm logo website, nút trở về trang chủ, nút hiển thị danh sách cùng nút cho phép đăng bài cho thuê Cuối cùng là hai nút đăng nhập và đăng ký

Hinh 3 Trang chu 2

Khi người dùng cuộn xuống sẽ thấy được danh sách một vài bài đăng mới nhất Các bài đăng ở đây sẽ được giới hạn hiển thị giúp người dùng có được cái nhìn tổng quan về trang web Người dùng có

thể bấm vào nút xem thêm để chuyển sang trang xem đầy đủ các

bài đăng

đưa ra những câu hỏi, báo cáo vấn đề, lỗi hệ thống, Với các thông

tin được người dùng cung cấp, đội ngũ quản trị viên sẽ nhanh chóng hồi đáp cũng như xử lý vấn đề được báo cáo

Trang đăng nhập là trang giúp người dùng có thể thực hiện việc ghi danh vào hệ thống giúp mở khóa toàn bộ các chức năng mà website cung cấp Người dùng sẽ thực hiện điền tên đăng nhập hoặc email cùng mật khẩu đã tạo trước đó để thực hiện xác thực cá nhân Sau khi đăng nhập thành công, người dùng sẽ được điều hướng trở lại trang chủ Ngoài ra, người dùng có thể đăng nhập nhanh với Google và Facebook Khi bấm vào một trong hai lựa chọn này, người dùng sẽ được chuyển hướng đến trang đăng nhập của google hoặc facebook

Chào mừng thành viên mới!

Hinh 6 Trang dang ky

Trang đăng ký là trang giúp người dùng tạo tài khoản để dùng trên hệ thống Người dùng sẽ điền đầy đủ các thông tin theo trong form trong hình để thực hiện đăng ký tài khoản Ngoài ra tại đây người dùng cũng có thể sử dụng các dịch vụ đăng nhập từ bên thứ 3 như google và facebook

Cac bai dang khả dung

Hiện tại có 5 bài đáng

Cho thuế căn hộ 80m2 tòa Xuân Mai Complex HH2, Đương Nội, Hả Đông 7.5 riệu/thảng + 80m Quận Hà Đông, Thành phố Hà Nội

n hộ 80m2 tòa Xuân Mai Complex HH2, Dương Nội, Hà Đông 3ngủ 2 vê shh

Chẹ thuê căn hệ 2 ngủ khu đố thị Xa La, Hà Đông ful! nội thất

6 triệu/tháng + 70m” + Quận Hà Đồng, Thành phố Hà Nội

Can cho thuế cên hộ 3 phòng ngủ nội that đẹp Chung cư Xuân Mai Complex Dương Nội Hã

` \ 1.5 triệu/thảng » 80m? + Quận Hà Đông, Thành phố Hà Nội

ăn cho thuê căn hộ 3 phòng ngủ, nội thất đẹp Chung cư Xuân Mai Complex Dưới

Hinh 7 Trang danh sdch bai dang

Trang danh sách bài đăng là trang giúp người dùng có thể xem toàn bộ các bài đăng đăng có trong hệ thống Theo mặc định, các bài đăng sẽ được phân trang và hiển thị tối đa cho một trang là 12 bài Người dùng sẽ dùng hệ thống phân trang dưới để có thể xem thêm các bài đăng khác Khi người dùng thực hiện bấm vào một bài đăng,

hệ thống sẽ thực hiện chuyển người dùng tới trang chỉ tiết của bài đăng đó

10

Loại tinđảng: — Chọthu#cân hộ chưng cư

Dis cht Chung cự Xuân Mai, Phường Dưỡng 9} Quan #8 Dong, Thar pho He NOL

SS phorg noi: 3 chang

SOnhave sin: §— 2 chong

Hình 9 Trang chỉ tiêêt bài đăng 2

Trang chỉ tiết bài đăng là trang hiển thị các thông tin chi tiết về một bài đăng cho thuê phòng Trang này sẽ thể hiện đầy đủ những

thông tin mà người cho thuê phòng cung cấp bao gồm các thông tin

như tiêu đề bài đăng, hình ảnh mô tả, chỉ tiết mô tả, vị trị phòng cho thuê, mức giá cho thuê, diện tích, số tầng, số nhà vệ sinh, số phòng ngủ, loại căn hộ, vị trí trên google map, ngày đăng tin, ngày hết hạn, thông tin liên hệ người cho thuê

11

2.2.6 Trang tao bai dang

Thông tin cơ bản

Các thông tin cổ gấu * ¡à các trưởng thông tin bắt buốc

›ại bất động sã

Địa chỉ Ính/Thành phố: * - Quận/huyện: * Phường/xã: * + Đường/Phố/Dự án *

ông bao gồm nhiễ tu đề lêu dé ba

Vị trí trên Google Map

Tga độ chính xác trén googie map [ 20 97171595698325, 105.77394458286655

Hình 11 Trang tạo bài đăng 2

Thông tin người đăng

hungwap375 ẹn thoại hién tk

hungwap375@gmail.com

Hình 12 Trang tạo bài đăng 3

Trang tạo bài đăng cho phép người dùng có thể tạo bài đăng trên hệ thống Người dùng sẽ cần bắt buộc đăng nhập trước khi sử

dụng chức năng này Để thực hiện đăng bài, người dùng cần điền đầy

đủ các thông tin theo hướng dẫn Khi thực hiện nhấn nút xác nhận,

hệ thống sẽ yêu cầu người đăng bài xác nhận lại về thông tin cá

13

nhân trước khi thực hiện đăng tải nội dung Đây là bước dam bao thông tin liên hệ giữa người cho thuê và người đi thuê

Thồng tin cá nhân

Hình 13 Trang thông tin cá nhân

Đây là trang giúp quản lý thông tin cá nhân của người dùng Người dùng có thể thực hiện xem thông tin cá nhân của bản thân cùng thông tin về các bài đăng mà tài khoản này thực hiện đăng

Người dùng có thể thực hiện thay đổi thông tin cá nhân hoặc xóa các

bài đăng mà tài khoản này quản lý

14

3.Chương 3: Mô hình UML Diagrams

3.1 Biều đồ use case

Hình 14 Mô hình luôông hoạt động cúc use case

Yêu cầu thông tin

Nhân được kết quả

Gửi yêu cầu

Yêu cầu dữ liệu

Tra két qua / Hién Truy van database

nhập cho người dung

3 Người dùng nhập email hoặc tên tài khoản cùng mật khẩu rồi chọn lệnh đăng nhập

4 Hệ thống kiểm tra thông tin nếu hợp lệ cho phép đăng nhập và hiển thị màn hình trang chủ

5, Use case kết thúc

Luồng sự kiện | A1 - Sai tên tài khoản hoặc mật khẩu: Khi

1 Hệ thống hiển thị lại màn hình đăng nhập kèm thông báo nhập sai thông tin

Yêu cầu đăng nhập

> Yêu cầu dữ liệu

Tên use case _| Dang ky

17

5, Use case kết thúc

phụ

dụng: Khi người dùng nhập một tên tài khoản hoặc email đã được sử dụng

1 Hệ thống hiển thị lại màn hình đăng nhập kèm thông báo tên tài khoản hoặc email đã được sử dụng

2 Quay trở lại bước 2 luồng sự kiện chính

A2 - Nhập thiếu một trong các trường

thông tin: Khi người dùng nhập thiếu một trong các trường thông tin yêu cầu

1 Hệ thống hiển thị lại màn hình đăng ký kèm thông báo nhập thiếu thông tin

18

: ee ¡ dữ liê Ghi dữ liệu vào

Tao tài khoản thành CS: 5 pr database

công Trả ket qua / Hien

thị thông tin ,

Trả kết quả

Trả dữ liệu

Hình 17 Luôông dữ liệu UC-3

đăng nhập, truy cập trang thông tin cá nhân

2 Hệ thống hiển thị thông tin trang thông tin

19

3 Người dùng nhập thông tin cần thay đổi

4 Hệ thống kiểm tra thông tin nếu hợp lệ cho

phép thay đổi thông tin và hiển thị thông

báo

5 Use case két thuc

1 Hệ thống hiển thị lại màn hình thông tin cá nhân kèm thông báo email đã được sử dụng

nhân cần đỗi

đ§Eöã ` Walt: Ghi dữ liệu vào

Đôi thông tin thành Sinh NJ n6 ghí dự Tiệu database

Trả dữ liệu

Hình 18 Luôông dữ liệu UC-4

3 Người dùng điền đầy đủ thông tin về phòng

cần cho thuê rồi chọn lệnh xác nhận

4 Hệ thống hiện thông báo xác nhận lại thông tin cá nhân cho người dùng

5 Người dùng chọn lệnh xác nhận

6 Hệ thống kiểm tra thông tin, nếu thông tin

hợp lệ cho phép đăng bài rồi hiển thị thông

báo cho người dùng

1 Hệ thống hiển thị lại màn hình đăng nhập

kèm thông báo tên tiêu đề đã được sử

dụng

21

eS S| &

đăng mới

x gay hi dữ liêu Ghi dữ liệu vào

ite Tra két qua / Hien database

Trả kết quả

Trả dữ liệu

Hình 19 Luôông dữ liệu UC-5

4.Chuong 4: M6 hinh du liéu

4.1 Cấu trúc dữ liệu

title Text Tiéu dé bai dang

slug UID Dẫy ký tự duy nhất chuyển đổi

từ tiêu đề

users_permissions | Relationship | Liên kết tới bảng User

_USeF

Để có thể xây dựng một website có thể hoạt động mượt mà trên

mọi nền tảng trình duyệt ngày nay, trong bài tập lớn lần này, chúng

em đã kết hợp sử dụng các công nghệ, framework hiện đại và phổ biến ở thời điểm hiện tại giúp giải quyết được các vấn đề trong quá

trình xây dựng và triển khai website Về cơ bản có thể kể tới một vài

công nghệ, framework chính như

5.1 NextJS (ReactJS Library)

Chắc hẳn khi nhắc đến việc xây dựng một website Single Page

Application (SPA) thì người ta sẽ nghĩ ngay đến một trong ba thư viện

là ReactJS, Vue và Angular Trong đó, ReactJS là thư viện được nhiều lập trình viên tin tưởng và sử dụng nhất từ quý 2/2019 cho tới nay theo thống kê của hotframeworks.com Các Webapp lớn sử dụng

ReactJS có thể kể đến như Shopee, Tiki, Facebook, Twitter, ReactJS

sở hữu rất nhiều ưu điểm như chia nhỏ các thành phần của website,

khả năng tái sử dụng code, modules hoá css, xử lý sự kiện, hiệu năng với virualDOM cực kỳ ấn tượng Nhưng bên cạnh đó, với bản chất sử dụng virualDOM kiến cho các ứng dụng sử dụng reactjs chỉ thực hiện render dữ liệu ở phía client (Clientside rendering) Điều này ảnh hưởng rất lớn tới quá trình SEO của website Với bài tập lớn lần này, chúng em nhận thấy rằng FindHomePKA là một trang web rất cần chú trọng tới quá trình SEO giúp người dùng có thể tìm kiếm các bài đăng của website trên google Để giải quyết vấn đề này, chúng em

đã quyết định sử dụng một framework NextJS Đây là một framework

sử dụng nền tảng của reactJS được phát triển bởi Vercel Mang rất toàn bộ nhưng ưu điểm mà reactJS có, cùng với việc hỗi trợ Server Side Rendering giúp cho trang web có khả năng SEO tốt hơn

25