(Đồ án hcmute) thiết kế website đăng tin phòng trọ

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 ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ KỸ THUẬT MÁY TÍNH THIẾT KẾ WEBSITE ĐĂNG TIN PHÒNG TRỌ GVHD: PHẠM VĂN KHOA SVTH: THÂN TRỌNG HOÀI PHƯƠNG MSSV:14119165 SKL 0 6 Tp Hồ Chí Minh, tháng 01/2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO    ĐỒ ÁN TỐT NGHIỆP THIẾT KẾ WEBSITE ĐĂNG TIN PHÒNG TRỌ GVHD : TS PHẠM VĂN KHOA SVTH : THÂN TRỌNG HỒI PHƯƠNG Khóa : 2014 Lớp : 14119CL1 MSSV:14119165 NGÀNH: CƠNG NGHỆ KỸ THUẬT MÁY TÍNH TP Hồ Chí Minh, tháng năm 2020 an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày - tháng - năm 2019 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Thân Trọng Hồi Phương MSSV:14119165 Ngành: Cơng Nghệ Kỹ Thuật Máy Tính Lớp: 14119CL1 Giảng viên hướng dẫn: TS Phạm Văn Khoa Ngày nhận đề tài: 2/9/2019 Ngày nộp đề tài: 29/12/2019 Tên đề tài: Thiết kế website đăng tin phòng trọ Các số liệu, tài liệu ban đầu: Kiến thức môn HTML,CSS bản, Javascrip,AWS,PHP,Framework,database, webserver Nội dung thực đề tài: • Tính đăng tin tìm kiếm phịng trọ trang web • Thi cơng website • Hiệu chỉnh, hồn thiện webiste Sản phẩm: Thiết kế website đăng tin phòng trọ Tp.Hồ Chí Minh, ngày tháng năm 20… Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an CỘNG HOÀ 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: Thân Trọng Hồi Phương MSSV: 14119165 Ngành: Cơng Nghệ Kỹ Thuật Máy Tính Tên đề tài: Thiết kế website đăng tin phòng trọ Họ tên giáo viên hướng dẫn: TS Phạm Văn Khoa 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ữ: ) Tp.Hồ Chí Minh, ngày tháng năm 20… Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an LỜI CẢM ƠN Để hoàn thành đồ án tốt nghiệp có kiến thức vơ q báu q trình thực hiện, nhóm em xin chân thành gửi lời cảm ơn sâu sắc đến TS Phạm Văn Khoa … giảng viên thời gian qua hướng dẫn cho nhóm em nhiệt tình, tâm huyết đầy trách nhiệm từ giúp nhóm định hướng cách thức thực góp phần chỉnh sửa giúp nhóm mặt hạn chế đề tài Chia kinh nghiệm quý báu người thầy để trị hồn thành luận văn tốt nghiệp Chúng em xin cảm ơn Thầy Cô mơn kỹ thuật máy tính - viễn thơng trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh truyền đạt lại nhiều kiến thức tảng tạo điều kiện thuận lợi để chúng em hồn thành tốt đồ án nhóm em xin cảm ơn q thầy trường Đại học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, khoa Đào Tạo Chất Lượng Cao dạy dỗ chúng em suốt thời gian qua Nhóm xin chân thành gửi lời cảm ơn đến quý thầy cô hội đồng bảo vệ dành chút thời gian để xem luận văn tốt nghiệp giúp nhóm mặt tích cực hạn chế Nhóm thực đề tài xin gửi lời cảm ơn đặc biệt tới tất bạn bè lớp 14119CL1 đồng hành giúp đỡ lẫn suốt năm qua, khoảng thời gian đáng quý đáng nhớ Cuối cùng, nhóm thực xin gửi lời cảm ơn chân thành sâu sắc đến bậc cha mẹ, người thân động viên giúp đỡ nhóm suốt chặng đường học tập vừa qua trình nghiên cứu đồ án tốt nghiệp Do thời gian thực đề tài có hạn, kiến thức cịn hạn hẹp, dù nhóm cố gắng không tránh khỏi sai sót hạn chế Nhóm mong nhận lời dẫn, góp ý quý báu từ quý thầy cô bạn Xin chân thành cảm ơn! i an TĨM TẮT Ngày cơng nghệ thơng tin phát triển với tốc độ nhanh chóng Cơng nghệ tin học ứng dụng nhiều lĩnh vực nghiên cứu khoa học, phát triển kinh tế, quân nhiều loại hình nghệ thuật khác Ở nước ta máy tính ứng dụng nhiều lĩnh vực nhằm phục vụ lợi ích người Việc sử dụng mạng Internet khơng cịn q xa lạ cá nhân, tổ chức kinh tế, nhà nước Thơng tin định vị, vị trí cư ngụ một khu vực ngày xác, thông tin cập nhật ngày Lý cho thấy việc xây dựng phần mềm đăng tin phòng trọ, đáp ứng nhanh hiệu yêu cầu đăng tin, tìm kiếm cách xác nhanh chóng ii an ABSTRACT Today, Information Technology has developed with quickly speed Information technology has been applied in many sectors such as scientific research, economic development, military and in many different forms of artistic In developed countries, the computer has been used in many sectors to serve human interests Using the Internet is no longer a stranger to all individuals, economic organizations, government Therefore, the Search for motel rooms is easy With this reason, the development of information technology has become an important economic sector, especially software technology But besides the convenience that these programs bring, there are still many difficulties and disadvantages that need to be overcome dictionary The downside of the program are many reasons, such as the programming itself is limited to the level and experience of software Keywords: Amazon Web Services ,API communication, framework iii an MỤC LỤC Trang LỜI CẢM ƠN I TÓM TẮT II DANH MỤC HÌNH ẢNH VII DANH MỤC BẢNG BIỂU VIII THUẬT NGỮ IX CHƯƠNG TỔNG QUAN 1.1 TÌNH HÌNH NGHIÊN CỨU 1.2 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.3 MỤC TIÊU ĐỀ TÀI 1.4 GIỚI HẠN ĐỀ TÀI 1.5 BỐ CỤC ĐỀ TÀI CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 TÌM HIỂU VỀ CÁC NGƠN NGỮ LẬP TRÌNH 2.1.1 NGÔN NGỮ HTML 2.1.2 NGÔN NGỮ CSS 2.1.3 NGÔN NGỮ LẬP TRÌNH PHP 2.1.4 NGÔN NGỮ JAVASCRIPT 2.1.5 FRAMEWORK LARAVEL 2.1.6 MƠ HÌNH MVC 2.1.7 DỊCH VỤ AWS 2.2 MỘT SỐ THƯ VIỆN HỖ TRỢ 2.2.1 THƯ VIỆN AJAX 2.2.2 THƯ VIỆN BOOTSTRAP 2.2.3 THƯ VIỆN JQUERY 10 2.3 CƠ SỞ DỮ LIỆU MYSQL 10 2.3.1 KHÁI NIỆM CƠ SỞ DỮ LIỆU MYSQL 10 2.3.2 CÁC THÀNH PHẦN CỦA MYSQL 11 CHƯƠNG THIẾT KẾ HỆ THỐNG 12 3.1 KHẢO SÁT VÀ ĐẶC TẢ YÊU CẦU 12 3.1.1 PHẦN QUẢN LÝ TRONG ADMIN 12 3.1.2 GIAO DIỆN NGƯỜI DÙNG 12 iv an 3.2 CÁC YÊU CẦU CHỨC NĂNG 13 3.3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13 3.3.1 CÁC CHỨC NĂNG CỦA HỆ THỐNG 13 3.3.2 CÁC TÁC NHÂN CỦA HỆ THỐNG 13 3.4 BIỂU ĐỒ USE CASE 17 3.4.1 USE – CASE TỔNG QUÁT 17 3.4.2 ĐĂNG NHẬP 18 3.4.3 QUẢN LÝ DANH SÁCH PHÒNG TRỌ 18 3.4.4 BÁO CÁO NỘI DUNG SẢN PHẨM 19 3.4.5 QUẢN LÝ THÀNH VIÊN 19 3.4.6 THỐNG KÊ 20 3.4.7 ĐĂNG TIN PHÒNG TRỌ 21 3.4.8 TÌM KIẾM PHÒNG TRỌ 21 3.5 BIỂU ĐỒ TUẦN TỰ 22 3.5.1 CHỨC NĂNG ĐĂNG NHẬP 22 3.5.2 DANH SÁCH PHÒNG TRỌ 23 3.5.3 DANH SÁCH NGƯỜI DÙNG 24 3.5.4 BÁO CÁO NỘI DUNG 26 3.5.5 ĐĂNG BÀI 28 3.5.6 TÌM KIẾM PHỊNG 30 3.6 BIỂU ĐỒ, DANH SÁCH CÁC ĐỐI TƯỢNG 31 3.7 THIẾT KẾ CƠ SỞ DỮ LIỆU 32 3.8 GIAO DIỆN HIỂN THỊ 33 3.8.1 GIAO DIỆN TRANG CHỦ HIỂN THỊ 33 3.8.2 GIAO DIỆN ĐĂNG TIN 34 3.8.3 GIAO DIỆN SẢN PHẨM 35 3.8.4 GIAO DIỆN THÔNG TIN ĐĂNG BÀI 36 3.8.5 GIAO DIỆN DANH SÁCH PHÒNG TRỌ 37 3.8.6 GIAO DIỆN ĐĂNG KÝ 37 3.8.7 GIAO DIỆN ĐĂNG NHẬP 38 3.9 GIAO DIỆN QUẢN TRỊ 39 3.9.1 GIAO DIỆN QUẢN LÍ ĐĂNG BÀI 39 3.9.2 GIAO DIỆN THÀNH VIÊN 39 3.9.3 BÁO CÁO NỘI DUNG 39 3.9.4 GIAO DIỆN THỐNG KÊ 40 v an 3.9.5 GIAO DIỆN LOGIN ADMIN 41 CHƯƠNG KẾT QUẢ, KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 42 4.1 KẾT QUẢ 42 4.1.1 Giao diện admin 42 4.2 KẾT LUẬN 43 4.3 HƯỚNG PHÁT TRIỂN 43 TÀI LIỆU THAM KHẢO 44 PHỤ LỤC 45 vi an • Giá phịng • Diện tích • Quận/ Huyện, Danh mục • SĐT Liên hệ Khi nhập đầy đủ thơng tin user đăng chờ admin duyệt bài,nếu user đăng thiếu thơng tin không phép đăng bài, trang web yêu cầu user nhập đầy đủ thông tin để phép đăng 3.8.3 Giao diện sản phẩm Hình 3.8.3 - Giao diện sản phẩm Giao diện hiển thị thông tin sản phẩm gồm hình ảnh, giá phịng địa nhiều thơng tin khác cho người tìm kiếm phịng trọ dễ dàng lựa chọn 35 an 3.8.4 Giao diện thông tin đăng Hình 3.8.4 - Giao diện thơng tin đăng Giao diện quản lý đăng user, user đăng nhập tài khoản đăng kí trang web họ phép đăng xem thơng tin đăng kiểm duyệt hay chờ phê duyệt 36 an 3.8.5 Giao diện danh sách phịng trọ Hình 3.8.5 - Giao diện danh sách phòng trọ Giao diện danh sách phòng trọ list tất phòng trọ, nhà chung cư, nhà nguyên căng người dùng click vào mục lựa chọn, lựa chọn danh sách user muốn biết thêm nhiều thơng tin click vào đăng để biết thêm thông tin đăng 3.8.6 Giao diện đăng ký 37 an Hình 3.8.6 - Giao diện đăng ký Giao diện đăng kí user trang web để phép đăng tin phòng trọ, client phải điền thông tin cần thiết theo yêu cầu trang web, điền đầy đủ thông tin khách hàng phép đăng ký 3.8.7 Giao diện đăng nhập Hình 3.8.7 - Giao diện đăng nhập Giao diện đăng nhặp user trang web để phép đăng tin phịng trọ xem thơng tin phịng trọ đăng user 38 an 3.9 Giao diện quản trị 3.9.1 Giao diện quản lí đăng Hình 3.9.1 - Giao diện quản lí đăng Giao diện người quản lý trang web , thây đổi trang admin ảnh hưởng đến trang web hiển thị, ví dụ admin xóa đăng user trang web hiển thị hoàn toàn đăng user 3.9.2 Giao diện thành viên Hình 3.9.2 - Giao diện thành viên Giao diện thành viên cho biết số người đăng kí trang web mình, thây đổi, update thông tin cần thiết 3.9.3 Báo cáo nội dung 39 an Hình 3.9.3– Báo cáo nội dung Giao diện báo cáo nội dung, người tìm kiếm thấy thơng tin đăng sai với thơng tin thực tế có quyền báo cáo với admin để xử lý thông tin 3.9.4 Giao diện thống kê Giao diện thống kê tât số người, đăng, báo cáo trang web Hình 3.9.4 - Giao diện thống kê 40 an 3.9.5 Giao diện login admin Giao diện login admin không đựa đăng ký tài khoản, có account Hình 3.9.5 - Giao diện thống kê 41 an Chương KẾT QUẢ, KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết 4.1.1 Giao diện admin Hình 4.1.1: Giao diện admin Màn hình admin 4.1.2 Giao diện client Hình 4.1.2: Giao diện client Màn hình user 42 an 4.2 Kết luận • Nâng cao khả tự tìm tịi, học hỏi, khả đọc hiểu tài liệu tiếng Anh • Hiểu sâu Laravel Framework - php framework lớn • Hiểu vận dụng thành thạo mơ hình MVC, kiến thức hỗ trợ trình xây dựng hệ thống: CSS, HTML, MySQL, Javascript, AWS,… • Khả lập trình, xây dựng mộ hệ thống đáp ứng nhu cầu thực tế nâng cao Ngoài ra, cịn tích lũy thêm kinh nghiệm xây dựng kế hoạch cho việc phát triển phần mềm hoàn chỉnh • Nâng cao khả thuyết trình, trình bày vấn đề Rèn luyện thêm kỹ viết tài liệu phần mềm chuẩn • Hệ thống đưa vào hoạt động thử nghiệm thành công hosting aws • Các module hệ thống đa phần code tự viết nên an toàn 4.3 Hướng phát triển Sau hoàn thành đề tài xây dựng Xây dựng website đăng tin phòng trọ em tiếp tục nghiên cứu phát triển website nhằm tăng tính tối ưu hóa tốc độ xử lý để đem lại hiệu cao hơn, phát triển để đưa website vào ứng dụng thực tế 43 an TÀI LIỆU THAM KHẢO [1] https://www.php.net/docs.php [2] https://laravel.com/docs/6.x [3] https://www.w3schools.com/html/html_css.asp [4 https://devdocs.io/javascript/ [5] https://docs.aws.amazon.com/ [6] https://techmaster.vn/posts/34646/lap-trinh-laravel-cho-nguoi-moi-bat-dau [7] https://jobs.hybrid-technologies.vn/blog/laravel-la-gi/ [8] https://completejavascript.com/gioi-thieu-tong-quan-ve-ngon-ngu-lap-trinhjavascript [9]https://csc.edu.vn/lap-trinh-va-csdl/tin-tuc/kien-thuc-lap-trinh/su-dung-bootstrapde-tao-giao-dien-cho-trang-web-ho-tro-responsive-162 [10]https://wiki.matbao.net/kb/jquery-la-gi-tong-quan-ve-jquery-va-huong-dan-sudung-jquery/ 44 an PHỤ LỤC  Các bước tạo project AWS Bước 1: Tạo tài khoản aws ấn vào đăng nhập • Click “elasticbeanstalk” • Click “Create New Application” • Click “Select” Hình 6.1 - Đăng nhập vào project Bước 1:Setup Environment , Platform cho project create enviroment 45 an Hình 6.2 - create project Bước 3: Tạo database security Hình 6.3 - Tạo database security 46 an Bước 4: Setup bảo mật Security với project Hình 6.4 - Cài đặt kết nối với project Bước 5: SSH vào project, Ubuntu Windows tương tự • SSH với ip tạo bước • Trỏ vào thư mục /var/www/html • Download phpmyadmin import database Hình 6.5 - SSH vào dự án Bước : Nhập địa ip lên browser 47 an Hình 6.6 - Màn hình hiển thị 48 an S an K L 0 ... động, phòng trọ duyệt, báo cáo biết thông tin tổng quát website, thông tin đề cặp mục 20 an 3.4.7 Đăng tin phịng trọ Hình 3.4.7 - Biểu đồ Use case đăng tin phịng trọ Mơ tả tổng qt user đăng tin. .. đủ thơng tin khách hàng phép đăng ký 3.8.7 Giao diện đăng nhập Hình 3.8.7 - Giao diện đăng nhập Giao diện đăng nhặp user trang web để phép đăng tin phịng trọ xem thơng tin phịng trọ đăng user... trình trang web tìm kiếm phịng trọ xây dựng với mục đích sau: • Đáp ứng nhu cầu tìm kiếm thơng tin phịng trọ, đăng chủ phòng trọ ,báo cáo phòng trọ đăng sai thơng tin - • Đảm bảo tính chun nghiệp,