(Tiểu luận) 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ê

MỤC LỤC Ni dung Chương 1: Giới thiệu 1.1 Nền tảng hoạt động 1.2 Các công nghệ sử dụng 1.3 Tóm tắt chức .6 Chương 2: Các chức chi tiết .7 2.1 Các chức 2.1.1 Đăng ký 2.1.2 Đăng nhập 2.1.3 Xem thông tin website 2.1.4 Tạo mt đăng website 2.1.5 Xem, chỉnh sửa thông tin cá nhân 2.2 Mô tả thiết kế giao diện 2.2.1 Trang chủ 2.2.2 Trang đăng nhập 10 2.2.3 Trang đăng ký 10 2.2.4 Trang danh sách đăng 11 2.2.5 Trang chi tiết đăng 12 2.2.6 Trang tạo đăng .13 2.2.7 Trang thông tin cá nhân .15 Chương 3: Mơ hình UML Diagrams 16 3.1 Biều đồ use case 16 3.1.1 UC-1 Xem thông tin trang web 16 3.1.2 UC-2 Đăng nhập 17 3.1.3 UC-3 Đăng ký 18 3.1.4 UC-4 Thay đổi thông tin cá nhân 20 3.1.5 UC-5 Tạo đăng .21 Chương 4: Mơ hình liệu 24 4.1 Cấu trúc liệu 24 4.1.1 Bảng Post 24 4.1.2 Bảng User .25 4.2 Quan hệ cấu trúc liệu .25 Chương 5: Công nghệ sử dụng 26 5.1 NextJS (ReactJS Library) 26 h 5.2 CMS Strapi (NodeJS) 27 5.3 MuiUi .27 5.4 Heroku Cloud 27 5.5 Vercel Cloud 28 5.6 Google Firebase Cloud 28 5.7 Google Map API 28 Chương 6: Kết đạt 29 h Chương 1: Giới thiệu Trong xã hi nay, nhu cầu tìm kiếm nhà, phịng cho trọ, cho th không thiếu Đặc biệt 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ỏ đổ thành phố lớn để tiếp tục công việc thân Sinh viên đại học mt số Với việc mt loạt 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 trường đại học tăng vọt Chính nên việc tìm kiếm cho thân mt phòng ưng ý, đáp ứng đủ nhu cầu thân trở lên khó khăn Nắm bắt thực trạng việc thân sinh viên phải chật vật tìm phịng trọ xung quanh khu vực trường đại học Phenikaa Chúng em định xây dựng mt trang website giúp kết nối người cần thuê phòng trọ người cho thuê cách cho phép người cho th phịng đăng tải đăng phịng, nhà mà cho cầu cho th thơng tin liên hệ Từ bạn có nhu cầu tìm phịng tham khảo qua thơng tin mà chủ phòng, trọ đăng tải, thực liên hệ với chủ phòng để tới xem phòng đưa định thuê phòng 1.1 Nền tảng hoạt động - Tên website thức: FindHomePKA Hoạt đng tảng trình duyệt web phổ biến Chrome, CocCoc, Microsoft Edge, FireFox, … - Hỗ trợ hệ điều hành phổ biến Windows (XP, 7, 8, 10, 11), Linux, MacOS 1.2 Các công nghệ sử dụng  NextJS (ReactJS framework)  Strapi CMS (NodeJS framework)  Mui UI  Database Postgres SQL  Heroku Cloud h  Vercel Cloud  Google Firebase Cloud  Google Map API 1.3 Tóm tắt chức Trang web FindHomePKA có chức sau: - Tạo tài khoản xác thực người dùng thông qua chế JWT Token - Xác thực OAuthentic qua Google, Facebook - Quản lý thông tin cá nhân bao gồm thông tin họ 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 đăng, thông tin chi tiết đăng - Tạo mt đăng h 2.Chương 2: Các chức chi tiết 2.1 Các chức Hnh S ơđồồ chức website 2.1.1 Đăng ký Người dùng đăng ký tài khoản để thực đầy đủ chức có hệ thống Bao gồm trường thơng tin tên, số điện thoại, email, mật Bên cạnh người dùng đăng nhập thẳng thơng qua tài khoản từ bên thư ba Google, Facebook 2.1.2 Đăng nhập Người dùng sử dụng thông tin tên email mật tạo bước đăng ký để tiến hành đăng nhập vào hệ thống Người dùng đăng nhập nhanh thơng qua tài khoản bên thư ba Google, Facebook 2.1.3 Xem thông tin website Người dùng không cần thực đăng nhập đăng ký để thực chức Người dùng xem tồn b đăng h phịng cho th có mặt hệ thống Khi click vào mt đăng, website điều hướng người dùng đến trang thông tin chi tiết đăng Tại người dùng xem đầy đủ hình ảnh, thơng tin mơ tả, vị trí,… thơng tin liên hệ người đăng 2.1.4 Tạo mt đăng website Người dùng bắt buc phải thực đăng nhập đăng ký để thực chức Người dùng thực đăng tải thơng tin phịng cho thuê hệ thống 2.1.5 Xem, chỉnh sửa thông tin cá nhân Người dùng bắt buc phải thực đăng nhập đăng ký để thực chức Người dùng xem thơng tin cá nhân mình, thực sửa đổi, cập nhật thông tin cá nhân 2.2 Mô tả thiết kế giao diện 2.2.1 Trang chủ Hnh Trang chủ h Thiết kế giao diện trang chủ bao gồm mt điều hướng giúp người dùng điều hướng di chuyển chức trang website Thanh điều hướng ln vị trí đầu trang mt trang website Thanh điều hướng bao gồm logo website, nút trở trang chủ, nút hiển thị danh sách nút cho phép đăng cho thuê Cuối hai nút đăng nhập đăng ký Hnh Trang chủ Khi người dùng cun xuống thấy danh sách mt vài đăng Các đăng giới hạn hiển thị giúp người dùng có nhìn tổng quan trang web Người dùng bấm vào nút xem thêm để chuyển sang trang xem đầy đủ đăng h Hnh Trang chủ Phần cuối trang chủ phần liên hệ Phần giúp người dùng có trực tiếp liên hệ với đi ngũ quản trị viên thống để đưa câu hỏi, báo cáo vấn đề, lỗi hệ thống,… Với thông tin người dùng cung cấp, đi ngũ quản trị viên nhanh chóng hồi đáp xử lý vấn đề báo cáo 2.2.2 Trang đăng nhập Hnh Trang đăng nhập h Trang đăng nhập trang giúp người dùng thực việc ghi danh vào hệ thống giúp mở khóa tồn b chức mà website cung cấp Người dùng thực điền tên đăng nhập email mật tạo trước để thực xác thực cá nhân Sau đăng nhập thành công, người dùng điều hướng trở lại trang chủ Ngồi ra, người dùng đăng nhập nhanh với Google Facebook Khi bấm vào mt hai lựa chọn này, người dùng chuyển hướng đến trang đăng nhập google facebook 2.2.3 Trang đăng ký Hnh Trang đăng ký Trang đăng ký trang giúp người dùng tạo tài khoản để dùng hệ thống Người dùng điền đầy đủ thơng tin theo form hình để thực đăng ký tài khoản Ngoài người dùng sử dụng dịch vụ đăng nhập từ bên thứ google facebook 2.2.4 Trang danh sách đăng h Hnh Trang danh sách đăng Trang danh sách đăng trang giúp người dùng xem tồn b đăng đăng có hệ thống Theo mặc định, đăng phân trang hiển thị tối đa cho mt trang 12 Người dùng dùng hệ thống phân trang để xem thêm đăng khác Khi người dùng thực bấm vào mt đăng, hệ thống thực chuyển người dùng tới trang chi tiết đăng 2.2.5 Trang chi tiết đăng 10 h 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 use case 3.1.1 UC-1 Xem thông tin trang web Tên use case Hiển thị thông tin website Mô tả Cho phép người dùng xem thơng tin có Actor trang web User Sự kiện kích Người dùng muốn truy cập vào website hoạt Tiền điều kiện Khơng có Hậu điều kiện Người dùng xem thông tin website thành công Luồng kiện Người dùng truy cập vào website Hệ thống hiển thị thông tin trang chủ cho 15 h người dùng Luồng kiện Use case kết thúc Khơng có phụ Hnh 15 Luồồng liệu UC-1 3.1.2 UC-2 Đăng nhập Tên use case Mô tả Đăng nhập Cho phép người dùng đăng nhập để sử dụng chức hệ thống Actor Sự kiện kích User Người dùng muốn đăng nhập vào website hoạt Tiền điều kiện Người dùng có tài khoản Hậu điều kiện Người dùng đăng nhập thành công Luồng kiện Người dùng truy cập vào website, trang đăng nhập Hệ thống hiển thị thông tin trang đăng 16 h nhập cho người dùng Người dùng nhập email tên tài khoản mật chọn lệnh đăng nhập Hệ thống kiểm tra thông tin hợp lệ cho phép đăng nhập hiển thị hình trang chủ Luồng kiện Use case kết thúc A1 – Sai tên tài khoản mật khẩu: Khi phụ người dùng nhập sai tài khoản mật Hệ thống hiển thị lại hình đăng nhập kèm thơng báo nhập sai thơng tin Quay trở lại bước luồng kiện Hnh 16 Luồồng liệu UC-2 3.1.3 UC-3 Đăng ký Tên use case Mô tả Đăng ký Cho phép người dùng tạo tài khoản hệ thống 17 h Actor Sự kiện kích User Người dùng muốn tạo tài khoản hệ thống hoạt Tiền điều kiện Khơng có Hậu điều kiện Người dùng tạo tài khoản thành công Luồng kiện Người dùng truy cập vào website, trang đăng ký Hệ thống hiển thị thông tin trang đăng ký cho người dùng Người dùng nhập trường thông tin cần thiết mà hệ thống yêu cầu Hệ thống kiểm tra thông tin hợp lệ cho phép đăng ký tự đng đăng nhập hiển thị hình trang chủ Luồng kiện Use case kết thúc A1 – Tên tài khoản email sử phụ dụng: Khi người dùng nhập mt tên tài khoản email sử dụng Hệ thống hiển thị lại hình đăng nhập kèm thông báo tên tài khoản email sử dụng Quay trở lại bước luồng kiện A2 – Nhập thiếu trường thông tin: Khi người dùng nhập thiếu mt trường thông tin yêu cầu Hệ thống hiển thị lại hình đăng ký kèm thơng báo nhập thiếu thông tin Quay trở lại bước luồng kiện 18 h Hnh 17 Luồồng liệu UC-3 3.1.4 UC-4 Thay đổi thông tin cá nhân Tên use case Mô tả Thay đổi thông tin cá nhân Cho phép người dùng thay đổi thông tin cá nhân thân Actor Sự kiện kích User User muốn thay đổi thông tin cá nhân hoạt Tiền điều kiện User có tài khoản Hậu điều kiện User thay đổi thơng tin thành cơng Luồng kiện Người dùng truy cập vào website, thực đăng nhập, truy cập trang thông tin cá nhân Hệ thống hiển thị thông tin trang thông tin cá nhân cho người dùng 19 h Người dùng nhập thông tin cần thay đổi Hệ thống kiểm tra thông tin hợp lệ cho phép thay đổi thông tin hiển thị thông báo Luồng kiện phụ Use case kết thúc A1 – Email sử dụng: Khi người dùng nhập email sử dụng Hệ thống hiển thị lại hình thơng tin cá nhân kèm thông báo email sử dụng Quay trở lại bước luồng kiện Hnh 18 Luồồng liệu UC-4 3.1.5 UC-5 Tạo đăng Tên use case Mô tả Tạo đăng Cho phép người dùng tạo đăng cho thuê phòng Actor User 20 h Sự kiện kích Người dùng muốn đăng tin phịng muốn cho th hoạt Tiền điều kiện Người dùng đăng nhập Hậu điều kiện Người dùng tạo đăng thành cơng Luồng kiện Người dùng truy cập vào website, thực đăng nhập, truy cập trang cho thuê Hệ thống hiển thị thông tin trang cho thuê cho người dùng Người dùng điền đầy đủ thơng tin phịng cần cho thuê chọn lệnh xác nhận Hệ thống thông báo xác nhận lại thông tin cá nhân cho người dùng Người dùng chọn lệnh xác nhận Hệ thống kiểm tra thông tin, thông tin hợp lệ cho phép đăng hiển thị thông báo cho người dùng Luồng kiện phụ Use case kết thúc A1 – Tên tiêu đề bị trùng : Khi người dùng nhập tên tiêu đề bị trùng Hệ thống hiển thị lại hình đăng nhập kèm thông báo tên tiêu đề sử dụng Quay trở lại bước luồng kiện 21 h Hnh 19 Luồồng liệu UC-5 22 h 4.Chương 4: Mơ hình liệu 4.1 Cấu trúc liệu 4.1.1 Bảng Post Tên thuộc tính Kiểu liệu Mô tả ID type_home city district subdistrict street title detail acreage unit Int Text Text Text Text Text Text Text Double Text Mã định danh Loại nhà cho thuê Thành phố Quận/Huyện Phường/Xã Đường/Phố Tiêu đề đăng Chi tiết đăng Diện tích h Tiền thuê tính theo tháng, quý price bedroomsNumber toiletsNumber floorNumber contactName phoneNumber email slug Double Int Int Int Text Text Text UID hay năm Giá thành cho thuê Số phòng ngủ Số nhà vệ sinh Số tầng Tên người đăng Số điện thoại người đăng Email người đăng Dẫy ký tự chuyển đổi GoogleMapLocal images users_permissions từ tiêu đề Text Tọa đ Google map Media Hình ảnh mơ tả Relationship Liên kết tới bảng User _user CreateAt UpdateAt Date Date 4.1.2 Ngày tạo đăng Ngày cập nhật đăng Bảng User Tên thuộc tính Kiểu Mơ tả liệu 23 h ID Email password SDT username Post Int Text Password Text Text Relationshi Mã định danh Email người dùng Mật người dùng Số điện thoại người Tên tài khoản Liên kết bảng Post p 4.2 Quan hệ cấu trúc liệu Hnh 20 Mồ hnh quan hệ liệu 5.Chương 5: Công nghệ sử dụng 24 h Để xây dựng mt website hoạt đng mượt mà tảng trình duyệt ngày nay, tập lớn lần này, chúng em kết hợp sử dụng công nghệ, framework đại phổ biến thời điểm giúp giải vấn đề trình xây dựng triển khai website Về kể tới mt vài cơng nghệ, framework 5.1 NextJS (ReactJS Library) Chắc hẳn nhắc đến việc xây dựng mt website Single Page Application (SPA) người ta nghĩ đến mt ba thư viện ReactJS, Vue Angular Trong đó, ReactJS thư viện nhiều lập trình viên tin tưởng sử dụng từ quý 2/2019 theo thống kê hotframeworks.com Các Webapp lớn sử dụng ReactJS kể đến Shopee, Tiki, Facebook, Twitter,… ReactJS sở hữu nhiều ưu điểm chia nhỏ thành phần website, khả tái sử dụng code, modules hoá css, xử lý kiện, hiệu với virualDOM ấn tượng Nhưng bên cạnh đó, với chất sử dụng virualDOM kiến cho ứng dụng sử dụng reactjs thực render liệu phía client (Clientside rendering) Điều ảnh hưởng lớn tới trình SEO website Với tập lớn lần này, chúng em nhận thấy FindHomePKA mt trang web cần trọng tới trình SEO giúp người dùng tìm kiếm đăng website google Để giải vấn đề này, chúng em định sử dụng mt framework NextJS Đây mt framework sử dụng tảng reactJS phát triển Vercel Mang toàn b ưu điểm mà reactJS có, với việc hỗi trợ Server Side Rendering giúp cho trang web có khả SEO tốt 25 h Hnh 21 Đánh giá điểm SEO cho website FindHomePKA LightHouse 5.2 CMS Strapi (NodeJS) Bên cạnh việc xây dựng frontend, để trang web có nguồn liệu thơng suốt nhanh chóng, chúng em sử dụng mt trình quản lý ni dung open source mang tên Strapi Đây mt ứng dụng xây dựng tảng NodeJS framework giúp quản lí ni dung CMS mt cách dễ dàng xây dựng sẵn Rest full API khả custom API Kết hợp với sở liệu Postgres SQL điều giúp cho ứng dụng có kết nối thông suốt frontend backend 5.3 MuiUi Với mt mt ứng dụng web, việc mang lại trải nhiệm UI, UX hoàn hảo cho người dùng mt điều khơng thể thiếu Để hồn thiện mt giao diện đồng b, bắt mắt, chúng em sử dụng b UI MuiUI (Material UI) Được lấy cảm hứng từ Material design Google, MuiUI mang đến thành phần web bo góc, màu sắc ni dung đồng b 5.4 Heroku Cloud 26 h Heroku cloud mt dịch vụ cung cấp máy chủ miễn phí cho phép cá nhân, doanh nghiệp xây dựng, triển khai, quản lý mở rng ứng dụng Trong tập lớn này, chúng em sử dụng tảng máy chủ Heroku để triển khai phần backend ứng dụng Kết hợp với chức CI/CD Github giúp cho việc triển khai phần backend trở nên tự đng dễ dàng 5.5 Vercel Cloud Giống với Heroku, Vercel Cloud mt dịch vụ cung cấp máy chủ miễn phí Nhưng phần Vercel cơng ty phát triển framework NextJS, hệ thống Vercel Cloud hỗi trợ tốt cho ứng dụng NextJS Chính nên chúng em định triển khai phần frontend trang web cloud Vercel Kết hợp chức CI/CD Gitlab giúp cho việc tự đng triển khai frontend dễ dàng 5.6 Google Firebase Cloud Với chất cho người dùng nhìn tổng quan phòng trọ đăng tải, việc với mt đăng có hình ảnh chụp trực tiếp giúp người xem có nhiều thơng tin so với lời mô tả Với việc cho phép người dùng upload ảnh tự chụp phòng cần cho thuê, chúng em cần mt nơi để lưu trữ ảnh Google Firebase storage mt lựa chọn tốt cho phép lập trình viên có mt hệ thống cloud lưu trữ file với nhiều định dạng khác 5.7 Google Map API Để có hồn thiện trải nhiệm người dùng phòng cho thuê, việc cho người dùng có mt nhìn tổng quan vị trí xác phịng điều khơng thể thiểu Thay có thơng tin địa dạng chữ, chúng em hỗi trợ người dùng xem vị trí xác phịng thơng qua Google Map Người dùng xem vị trí phịng đồ google, 27 h chuyển vị trí sang đồ lớn Google từ tính tốn qng đường di chuyển, tuyến đường phương tiện di chuyển 28 h 6.Chương 6: Kết đạt Sau mt khoảng thời gian tích cực tìm hiểu thực hiện, chúng em hồn thiện phần lớn yêu cầu mà chủ để tập lớn đưa Nhưng phần thiếu nhiều kiến thức thời gian phát triển ngắn nên khơng thể tránh sai sót, bug phát sinh Chúng em mong có ý kiến đóng góp từ thầy bạn để xây dựng trang web FindHomePKA ngày hoàn thiện 29 h