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
Trang 25.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
Trang 31.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
Trang 4Vercel 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
Trang 52.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ề
Trang 6cá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
sinh viên|
Hình 2 Trang chủ 1
Trang 7Thiế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
Trang 8đư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
Chào mừng trở lại! 8
8 2
DANGNHAP 4] G
Hình 5 Trang đăng nhập
Trang 9Trang đă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!
e ma
i> SG
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
Trang 10Cac 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
wy
" ` Nộ: Hị 1
sae —
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
Trang 11Loạ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
sotang ving
Xem trên ban do; Ban do
a viene
12/06/2 1208/20
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
Trang 122.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
12
Trang 13Vị 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
Trang 14nhâ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
Trang 153.Chương 3: Mô hình UML Diagrams
3.1 Biều đồ use case
em, chỉnh sửa thông <<Extend>>
Dang nhap
<<Include>>
Dang ky
Hình 14 Mô hình luôông hoạt động cúc use case
Trang 16người dùng 3 Use case kết thúc
User
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
Tra két qua
Trả dữ liệu
Người dùng muôn đăng nhập vào trong website
Trang 17nhậ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
Trang 18
Su kién kich
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
Trang 19: 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
Mô tả Cho phép người dùng thay đổi thông tin cá nhân
của bản thân
Sự kiện kích hoạt
User muon thay đôi thông tin cả nhân
đă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
Trang 20
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
Trang 21
Su kién kich
chính
1 Người dùng truy cập vào website, thực hiện đăng nhập, truy cập trang cho thuê 2 Hệ thống hiển thị thông tin trang cho thuê
cho người dùng
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
Trang 22
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
Trang 234.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
Trang 25Để 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