Đang tải... (xem toàn văn)
MỤC LỤC N i dung 1 Chương 1 Giới thiệu 5 1 1 Nền tảng hoạt động 5 1 2 Các công nghệ sử dụng 5 1 3 Tóm tắt các chức năng chính 6 2 Chương 2 Các chức năng chi tiết 7 2 1 Các chức năng chính 7 2 1 1 Đăng[.]
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 Chương 2: Các chức chi tiết 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 2.2.1 Mô tả thiết kế giao diện 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 4.1.1 4.1.2 4.2 Cấu trúc liệu 24 Bảng Post 24 Bảng User 25 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 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 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 thuê 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 thuê 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 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 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 phòng cho thuê 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 th 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ủ 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 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 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 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ủ Ngoà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 Ngồ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 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 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 Mơ tả Actor Sự kiện kích Hiển thị thơng tin website Cho phép người dùng xem thơng tin có trang web User 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 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 Đăng nhập Mô tả Cho phép người dùng đăng nhập để sử dụng Actor User chức hệ thống Sự kiện kích 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 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 phụ Use case kết thúc A1 – Sai tên tài khoản mật khẩu: Khi 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 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 phụ Use case kết thúc A1 – Tên tài khoản email sử 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 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 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 Tạo đăng Mô tả Cho phép người dùng tạo đăng cho thuê Actor User phòng ... 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 thuê phòng đăng... đảm bảo thông tin liên hệ người cho thuê người thuê 2.2.7 Trang thông tin cá nhân H nh 13 Trang thồng tin cá nhân Đây trang giúp quản lý thông tin cá nhân người dùng Người dùng thực xem thông... 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 nh Trang chủ Phần cuối trang chủ phần liên hệ Phần giúp người dùng