Xây dựng website mua bán, cho thuê bất động sản sử dụng net core đồ án tốt nghiệp ngành công nghệ thông tin

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE MUA BÁN, CHO THUÊ BẤT ĐỘNG SẢN SỬ DỤNG NET CORE GVHD: Th.S LÊ VĨNH THỊNH SVTH: KHỔNG GIA BÌNH TRẦN THỦY TIÊN SKL009522 Tp.Hồ Chí Minh, tháng 6/2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN - - KHOÁ LUẬN TỐT NGHIỆP Đề Tài: XÂY DỰNG WEBSITE MUA BÁN, CHO THUÊ BẤT ĐỘNG SẢN SỬ DỤNG NET CORE Giáo viên hướng dẫn: ThS Lê Vĩnh Thịnh Sinh viên thực hiện: Khổng Gia Bình 18110255 Trần Thủy Tiên 18110374 TP.HCM, tháng 06 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN - - KHỐ LUẬN TỐT NGHIỆP Đề Tài: XÂY DỰNG WEBSITE MUA BÁN, CHO THUÊ BẤT ĐỘNG SẢN SỬ DỤNG NET CORE Giáo viên hướng dẫn: ThS Lê Vĩnh Thịnh Sinh viên thực hiện: Khổng Gia Bình 18110255 Trần Thủy Tiên 18110374 TP.HCM, tháng 06 năm 2022 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ***** Tp Hồ Chí Minh, ngày 11 tháng 07 năm 2022 NHIỆM VỤ KHOÁ LUẬN TỐT NGHIỆP Họ tên sinh viên: Khổng Gia Bình MSSV: 18110255 Ngành: Cơng Nghệ Thơng Tin Lớp: 18110ST4 Họ tên sinh viên: Trần Thuỷ Tiên MSSV: 18110374 Ngành: Công Nghệ Thông Tin Lớp: 18110ST4 Giảng viên hướng dẫn: Th.S Lê Vĩnh Thịnh Ngày nhận đề tài: Ngày nộp đề tài: Tên đề tài: Xây dựng Website mua bán, cho thuê bất động sản sử dụng NET Core Các liệu tài liệu ban đầu: Khảo sát tình hình thơng qua trang web tham khảo ý kiến người có chuyên môn để thực Nội dung đề tài: - Xây dựng trang web cho phép khách hàng tìm kiếm tạo đăng bất động sản theo nhu cầu - Xây dựng trang web cho phép nhân viên quản trị viên quản lý, theo dõi thống kê người dùng đăng bất động sản Sản phẩm: Trang web bất động sản TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Khổng Gia Bình MSSV: 18110255 Họ tên sinh viên: Trần Thuỷ Tiên MSSV: 18110374 Ngành: Công Nghệ Thông Tin Đề tài: Xây dựng Website mua bán, cho thuê bất động sản sử dụng NET Core Họ tên Giáo viên hướng dẫn: Th.S Lê Vĩnh Thịnh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm:…………… (Bằng Chữ: ) Hồ Chí Minh, ngày … tháng … năm 2022 Giáo viên hướng dẫn CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Khổng Gia Bình MSSV: 18110255 Họ tên sinh viên: Trần Thuỷ Tiên MSSV: 18110374 Ngành: Công Nghệ Thông Tin Đề tài: Xây dựng Website mua bán, cho thuê bất động sản sử dụng NET Core Họ tên Giáo viên phản biện: Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm:…………… (Bằng Chữ: ) Hồ Chí Minh, ngày … tháng … năm 2022 Giáo viên phản biện KẾ HOẠCH THỰC HIỆN STT Ngày 22/8/2021 – 15/9/2021 16/9/2021 – 30/9/2021 1/9/2021 – 15/10/2021 16/10/2021 – 02/11/2021 03/11/2021 – 14/11/2021 15/11/2021 – 30/11/2021 01/12/2021 – 12/12/2021 13/12/2021 – 29/12/2021 14/2/2022 – 14/3/2022 10 15/3/2022 – 15/4/2022 11 16/4/2022 – 16/5/2022 12 17/5/2022 – 30/6/2022 Nhiệm vụ Ghi Khảo sát thực trạng, tham khảo trang web đề tài, xác định yêu cầu chức website Thiết kế UI, Cơ sở liệu Xây dựng phần giao diện cho trang chủ, trang đăng nhập, đăng ký, quên mật khẩu; viết API cho chức đăng ký, đăng nhập, quên mật Xây dựng chức đăng viết, tạo api cho phần đăng viết Xây dựng phần chi tiết đăng, phần tìm kiếm; viết API cho chức lấy chi tiết đăng, lấy đăng theo từ khóa, lọc theo loại đăng, loại bất động sản Xây dựng chức lại đổi trạng thái viết, đăng xuất, đổi thông tin người dùng, đổi mật khẩu, Xây dựng trang Admin: chức Admin viết đăng nhập, quản lí người dùng angular Xây dựng trang Admin: chức Admin viết quản lí đăng, thay đổi thông tin angular Xây dựng API chức báo cáo viết, xây dựng chức báo cáo viết trang client, xây dựng lại giao diện admin Xây dựng API chức thông báo, Admin viết Xây dựng chức thông báo lại trang client, xây dựng lại giao diện Reactjs admin Xây dựng chức quản lý người Admin viết dùng trang admin, xây dựng chức lại quản lý đăng trang admin Reactjs Xây dựng API chức tạo tin tức, xây dựng chức hiển thị tin tức trang client Xây dựng chức quản lý tin tức trang admin 13 1/7/2022 – 10/7/2022 Xây dựng chức quản lý báo cáo trang admin Xây dựng tính chia sẻ viết trang client Xây dựng chatbox (message facebook + FPT.AI) Viết power point Viết báo cáo Test app LỜI CẢM ƠN Lời đầu tiên, cho phép nhóm em gửi lời cảm ơn chân thành đến thầy Lê Vĩnh Thịnh, người phụ trách hướng dẫn nhóm chúng em việc thực hoàn thành báo cáo cách tốt hiệu Những dạy, nhật xét, đóng góp ý kiến từ thầy góp phần quan trọng việc giúp chúng em hoàn hành đề tài cách hoàn thiện Em xin chân thành cảm ơn quý thầy cô khoa Công Nghệ Thông Tin giúp đỡ hỗ trợ kiến thức giải đáp thắc mắc chúng em em gửi lời cảm ơn bạn, nhóm khác tận tình việc giúp đỡ, trao đổi kinh nghiệm, kiến thức suốt trình học Để hoàn thành báo cáo với tên đề tài: “Xây dựng website mua bán, cho thuê bất động sản sử dụng NET Core”, chúng em nỗ lực nhiều để hoàn thành tốt nhiệm vụ đề tài, song báo cáo chúng em không tránh khỏi hạn chế, thiếu sót Vì thế, chúng em mong nhận quan tâm, đóng góp ý thầy bạn bỏ qua sai sót nhóm em từ cải thiện để báo cáo chúng em hoàn chỉnh Những ý kiến đóng góp thầy bạn giúp chúng em nhận hạn chế qua chúng em có thêm nguồn tư liệu đường học tập nghiên cứu sau Chúng em xin chân thành cảm ơn TP Hồ Chí Minh, ngày … tháng… năm 2022 Nhóm sinh viên thực hiện: Khổng Gian Bình 18110255 Trần Thủy Tiên 18110374 MỤC LỤC DANH MỤC HÌNH ẢNH i DANH MỤC BẢNG iii DANH MỤC CÁC TỪ VIẾT TẮT v CHƯƠNG 1: TỔNG QUAN 1.1 LÝ DO CHỌN ĐỀ TÀI 1.2 MỤC TIÊU ĐỀ TÀI 1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 1.4.1 Phía người dùng 1.4.2 Phía quản trị viên CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG 2.1.1 Khảo sát nhu cầu người dùng 2.1.2 Khảo sát phần mềm 2.2 XÁC ĐỊNH YÊU CẦU 23 2.2.1 Chức sản phẩm 23 2.2.2 Đối tượng sử dụng 24 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 25 3.1 THIẾT KẾ USECASE VÀ SEQUENCE DIAGRAM 25 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 43 3.2.1 Sơ đồ thiết kế sở liệu 43 3.2.2 Mô tả thiết kế sở liệu 44 3.3 THIẾT KẾ GIAO DIỆN 50 3.3.1 Giao diện User 50 3.3.2 Giao diện Admin 67 CHƯƠNG 4: CÁC CÔNG NGHỆ SỬ DỤNG 81 4.1 KIẾN TRÚC TỔNG THỂ CỦA HỆ THỐNG 81 4.2 .NET CORE 81 4.3 REACT JS 84 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 87 5.1 CÀI ĐẶT ỨNG DỤNG 87 Trang cập nhật tin tức Hình 3.37: Giao diện Admin - Trang cập nhật tin tức Bảng 3.54: Mô tả giao diện Admin - Trang cập nhật tin tức STT Tên Loại Ghi Tiêu đề input Nhập tiêu đề đăng Ảnh bìa input Lựa chọn hình ảnh Nội dung Text area Nhập nội dung đăng Quay lại button Quay trở lại trang trước Tạo tin button Submit form cập nhật tin 79 Trang quản lý báo cáo Hình 3.38: Giao diện Admin - Quản lý báo cáo Bảng 3.55: Mô tả giao diện Admin - Quản lý báo cáo STT Tên Trạng thái báo cáo Mã đăng bị báo cáo Loại select link 80 Ghi Lựa chọn trạng thái báo cáo Điều hướng sang chi tiết đăng bị báo cáo CHƯƠNG 4: CÁC CÔNG NGHỆ SỬ DỤNG 4.1 KIẾN TRÚC TỔNG THỂ CỦA HỆ THỐNG Hình 4.1: Các thành phần ứng dụng Trang Web xây dựng gồm thành phần sau: - Front-end: - Back-end: - Cơ sở liệu: - Gửi mã OTP qua tin nhắn: Twilio - Gửi thông tin đăng nhập qua mail: Gmail API - Tạo đồ: Google Map API - Chatbox: Message Facebook + FPT.AI 4.2 .NET CORE NET Core framework Microsoft phát triển Đây tảng phát triển đa mục đích .Net Core tảng chéo (hỗ trợ Windows, macOS Linux) sử dụng để xây dựng ứng dụng thiết bị, đám mây IoT 81 .NET Core hỗ trợ ngôn ngữ như: C # F # (và C ++ / CLI kể từ 3.1) cịn hỗ trợ phần Visual Basic NET C#: Là loại ngôn ngữ lập trình phát triển theo hướng đối tượng mục đích ASP.NET Core giúp [1]: - HTTP request tối ưu nhẹ - Hợp xây dựng web UI web APIs - Tích hợp client-side frameworks đại có luồng phát triển - Hệ thống cấu hình dựa mơi trường đám mây thật - Dependency injection xây dựng sẵn - Có thể host IIS self-host process riêng bạn - Được xây dựng NET Core, hỗ trợ thực app versioning - Những công cụ để đơn giản hóa q trình phát triển web tối ưu - Xây dựng chạy đa tảng(Windows, Mac Linux) - Mã nguồn mở tập trung vào cộng đồng 82 Cách tổ chức source code: Hình 4.2: Cách tổ chức back-end Thư mục controllers: Chứa controller thực nhiệm vụ nhận request trả reponse cho người dùng Thư mục automappers: bao gồm file chứa hàm dùng để map qua lại đối tượng Thư mục IServices chứa interface dùng để xử lý logic nghiệp vụ Thư mục models quy định mơ hình để tạo bảng sở liệu Thư mục Services chứa class dùng để xử lý logic nghiệp vụ 83 Thư mục Repositories (thuộc Ifrastructure) chứa lớp abstraction trung gian lớp data lớp business Lớp chứa đựng phương thức thao tác mà để giao tiếp với lớp data để phục vụ cho business từ lớp logic Mục đích tạo lớp để cách ly với việc tiếp cận data cho thay đổi không ảnh hưởng trực tiếp đến lớp logic business Thư mục Repositories (thuộc Domain) chứa interface mà lớp Repositories kế thừa Thư mục UoW(unit of work) (thuộc Ifrastructure) chứa mẫu xử lý transaction thao tác liệu sử dụng mẫu Repository Thư mục UoW (thuộc Domain) chứa interface mà lớp UoW kế thừa 4.3 REACT JS ReactJS thư viện JavaScript sử dụng để xây dựng thành phần UI tái sử dụng Theo tài liệu thức React, sau định nghĩa: ReactJS hiểu đơn giản thư viện JavaScrippt sử dụng để xây dựng giao diện cho phía người dùng (UI), sau định nghĩa React: - React thư viện có chức cho phép xây dựng giao diện phía người dùng kết hợp lại với (bằng việc kết hợp component lại với nhau) - Ngồi ra, React khuyến khích việc người dùng tạo thành phần giao diện tái sử dụng (việc tái sử dụng nhờ React chia UI phức tạp thành phần component độc lập) - Và điểm khiến React trở nên hữu dụng việc render liệu không thực tầng Server mà Client Cách tổ chức source code trang Admin: 84 Hình 4.3: Cách tổ chức front-end Hình 4.4: Cách tổ chức front-end 85 Thư mục dashboard: chứa giao diện trang admin Thư mục services: nơi chứa API backend cung cấp Thư mục store: tổ chức lưu trữ liệu theo redux bao gồm (actions, reducers, store) 86 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 5.1 CÀI ĐẶT ỨNG DỤNG Yêu cầu: - Máy phải cài đặt NodeJS - Máy phải cài đặt npm - Máy phải có Visual Studio, Visual Studio Code, Sql Server Các bước cài đặt: - API: Sử dụng visual studio để chạy project RealEstateApi - Trang admin, trang client: Sử dụng visual studio code mở project RealEstateClient o Bước 1: Cài npm install cho project o Bước 2: Chạy project lệnh: npm start 5.2 KIỂM THỬ ỨNG DỤNG Bảng 5.1: Kiểm thử phần mềm ID TC_01 Mơ tả TestCase Đăng kí tài khoản Kết mong đợi Kết thực tế Nếu số điện thoại chưa Như mong đợi đăng kí trước đăng kí thành cơng TC_02 Đăng nhập Nếu nhập số điện Như mong đợi thoại mật đăng nhập thành cơng TC_03 Gửi mã code quên Nếu nhập số điện Như mong đợi mật thoại đăng kí nhận mã code, không báo lỗi TC_04 Đổi mật Nhập mã code Như mong đợi quên mật nhận nhập mật đổi mật 87 TC_05 Đổi thông tin cá nhân Nếu đăng nhập người Như mong đợi dùng đổi thông tin cá nhân thân TC_06 Đổi mật Nếu nhập mật Như mong đợi cũ mật mật xác nhận lại trùnh cho đổi mật TC_07 Tạo viết Nếu liệu nhập vào đủ Như mong đợi trường bắt buộc cho phép tạo đăng TC_08 Chỉnh sửa đăng Nếu liệu sau chỉnh Như mong đợi sửa đủ trường bắt buộc cho phép cập nhập lại đăng ( cho phép chỉnh sửa đăng chưa duyệt) TC_09 u thích/ bỏ u Nếu đăng nhập người Như mong đợi thích viết dùng phép yêu thích/bỏ yêu thích viết TC_10 Theo dõi người dùng Nếu đăng nhập người Như mong đợi dùng theo dõi người dùng mong muốn TC_11 Đăng xuất Nếu người dùng đăng Như mong đợi nhập đăng xuất TC_12 Duyệt đăng, Từ Bài đăng chuyển Như mong đợi chối đăng trạng thái sang trạng thái phù hợp 88 TC_13 Khoá mở khoá tài Tài khoản chuyển Như mong đợi khoản người dùng TC_14 Tạo tài khoản người Tài khoản người dùng Như mong đợi dùng TC_15 trạng thái phù hợp tạo Chỉnh sửa thông tin Thông tin người dùng Như mong đợi người dùng chỉnh sửa TC_16 Tạo tin tức Tin tức tạo Như mong đợi TC_17 Cập nhật tin tức Tin tức thay đổi Như mong đợi TC_18 Xoá tin tức Tin tức xoá Như mong đợi TC_19 Hiển thị tin/ Ẩn tin Tin tức / ẩn Như mong đợi 89 CHƯƠNG 6: KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 6.1 KẾT QUẢ ĐẠT ĐƯỢC Sau thời gian nghiên cứu thực đề tài: “Xây dựng website mua bán, cho thuê bất động sản sử dụng NET Core” cơng nghệ tìm hiểu áp dụng NET Core, ReactJS nhóm đạt kết sau: Ưu điểm - Các đăng sau tạo cần phê duyệt để tránh đăng nội dung không hợp lệ - Cho phép báo cáo đăng không hợp lệ thực khoá đăng đăng thực vi phạm - Bài đăng sau duyệt không phép chỉnh sửa nội dung - Cho phép lưu đăng - Đưa gợi ý đăng phù hợp nhắn với chatbox, cho phép nhắn tin trao đổi trực tiếp với admin trang - Cho phép người đăng chuyển trạng thái đăng thành bán, cho thuê Nhược điểm: - Một vài trường hợp xử lý nghiệp vụ chưa thể xử lý rõ ràng - Đăng ký số điện thoại cần xác thực trước qua trang Twilio dùng miễn phí - Giao diện người dùng chưa tốt - Do thời gian training có hạn, nên gợi ý đưa chưa nhiều - Google Map API bị giới hạn lượt sử dụng nên có lúc không load map cho đăng 90 6.2 HƯỚNG PHÁT TRIỂN - Tối ưu hoá trang web - Nâng cao bảo mật web - Cải thiện giao diện người dùng - Training model để giúp việc hỗ trợ tìm kiếm đăng thơng qua message cách có hiệu - Thực nâng cấp tính gửi tin nhắn để không bị giới hạn việc gửi tin nhắn mã code tới người dùng đăng ký tài khoản - Khi trang web thu hút lượng người dùng đáng kể phát triển theo hướng thu lợi nhuận cách cho phép người dùng nạp tiền, đẩy đăng lên đầu để tăng lượt xem - Liên kết trang web với đối tác có nhu cầu đăng nhiều đăng nhằm giảm bớt thời gian tạo đăng 91 TÀI LIỆU THAM KHẢO [1] NET CORE gì? Tổng quan, phân biệt NET core, NET FW, MONO (chiasekinang.com) [2] Component React, React Native (noron.vn) [3] Bạn hiểu hết ReactJS chưa? - AMELA Technology [4] Sự khác Props State ReactJS (viblo.asia) [5] Tổng quan NPM (viblo.asia) [6] Redux gì? Hiểu rõ cách dùng Redux | TopDev 92 S K L 0