Xây dựng ứng dụng thông tin mua bán cho mobile bằng HTML5

LỜI CẢM ƠN Em xin chân thành cảm ơn trường Đại học Công Nghệ Thông Tin Truyền Thông – Đại hoc Thái Nguyên tạo điều kiện cho em thực đồ án Em xin gửi lời cảm ơn sâu sắc tới thầy Trần Mạnh Tuấn, KS Hoàng Tất Thắng người trực tiếp hướng dẫn em suốt trình thực đồ án Em xin gửi lời cảm ơn chân thành đến toàn thể anh chị công ty cổ phần Vinno Việt Nam nhiệt tình giúp đỡ, đóng góp ý kiến bổ ích cho em trình thực đồ án Cuối cùng, em xin gửi lời cảm ơn đến gia đình bạn bè tình cảm, ủng hộ động viên dành cho em suốt trình học tập thực đồ án Thái Nguyên, tháng năm 2015 Sinh viên thực Nguyễn Thị Lệ LỜI CAM ĐOAN Đồ án tốt nghiệp sản phẩm tổng hợp toàn kiến thức mà sinh viên học suốt thời gian học tập trường Đại học Ý thức điều đó, với tinh thần nghiêm túc, tự giác lao động miệt mài thân hướng dẫn tận tình thầy Trần Mạnh Tuấn, KS.Hoàng Tất Thắng giúp em hoàn thành xong đồ án tốt nghiệp Em xin cam đoan nội dung đồ án tốt nghiệp với tên đề tài “Xây dựng ứng dụng thông tin mua bán cho mobile HTML5” không chép nội dung từ đồ án khác, hay sản phẩm tương tự mà em làm Sản phẩm đồ án thân em nghiên cứu xây dựng nên Nếu có sai em xin chịu hình thức kỉ luật Trường Đại học Công Nghệ Thông Tin Truyền Thông – Đại học Thái Nguyên Thái Nguyên, tháng 06 năm 2015 Sinh viên thực MỤC LỤC DANH MỤC HÌNH ẢNH DANH SÁCH CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT LỜI MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu HTML5 1.1.1.Ưu, nhược điểm HTML5 1.1.2 Một số đặc điểm bật HTML5 1.1.3 Các tính có HTML5 12 1.1.4 Lịch sử hình thành phát triển HTML 19 1.2 Phương pháp phân tích thiết kế hướng đối tượng 21 1.2.1 Giới thiệu phương pháp phân tích thiết kế hướng đối tượng 1.2.2 Phân tích thiết kế hướng đối tượng với UML 21 24 CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 33 2.1 Khảo sát hệ thống 33 2.1.1 Khảo sát trạng 33 2.1.2 Phân tích toán 34 2.2 Phân tích thiết kế hệ thống 37 2.2.1 Xây dựng biểu đồ Use case 37 2.2.2 Phân tích chức 37 2.2.3.Biểu đồ lớp 67 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG NHÀ ĐẤT 68 3.1.Ý nghĩa toán thông tin mua bán bất động sản 68 3.2 Giao diện trang chủ 69 3.3 Giao diện hiển thị danh sách nhà cần bán chức tìm mua nhà 70 3.4 Giao diện hiển thị thông tin chi tiết bất động sản 71 3.5 Giao diện hiển thị chức liên hệ 72 3.6 Giao diện hiển thị chức tìm kiếm 73 3.7 Giao diện hiển thị chức đăng tin 74 3.8 Giao diện hiển thị chức đăng nhập 75 3.9 Giao diện hiển thị chức đăng ký thành viên 76 KẾT LUẬN 77 TÀI LIỆU THAM KHẢO 79 DANH MỤC HÌNH ẢNH Hình 1.1: Các lớp phân tích 27 Hình 2.1: Biểu đồ Use case tổng quát 37 Hình 2.2: Biểu đồ hoạt động chức đăng ký 38 Hình 2.3: Biểu đồ trình tự chức đăng ký 39 Hình 2.4: Biểu đồ hoạt động chức đăng nhập 40 Hình 2.5: Biểu đồ trình tự chức đăng nhập người dùng 40 Hình 2.6: Biểu đồ trình tự chức đăng nhập Admin 41 Hình 2.7: Biểu đồ hoạt động chức xem danh mục bất động sản 42 Hình 2.8: Biểu đồ trình tự chức xem danh mục bất động sản người dùng 42 Hình 2.9: Biểu đồ hoạt động chức xem chi tiết tinbất động sản 43 Hình 2.10: Biểu đồ trình tự chức xem chi tiết tin bất động sản người dùng 44 Hình 2.11: Biểu đồ trình tự chức xem chi tiết tin bất động sản admin 44 Hình 2.12: Biểu đồ hoạt động chức tìm kiếm bất động sản 45 Hình 2.13: Biểu đồ trình tự chức tìm kiếm bất động sản 46 Hình 2.14: Biểu đồ hoạt động chức liên hệ 47 Hình 2.15: Biểu đồ trình tự chức liên hệ 47 Hình 2.16: Biểu đồ hoạt động chức đăng tin 48 Hình 2.17: Biểu đồ trình tự chức đăng tin 49 Hình 2.18: Biểu đồ hoạt động chức duyệt tin 50 Hình 2.19: Biểu đồ trình tự chức duyệt tin 50 Hình 2.20: Biểu đồ hoạt động chức xem tin đợi duyệt 51 Hình 2.21: Biểu đồ trình tự chức xem tin đợi duyệt 51 Hình 2.22: Biểu đồ hoạt động chức xóa tin đợi duyệt 52 Hình 2.23: Biểu đồ trình tự chức xóa tin đợi duyệt 52 Hình 2.24: Biểu đồ hoạt động chức tạo danh mục 53 Hình 2.25: Biểu đồ trình tự chức tạo danh mục 54 Hình 2.26: Biểu đồ hoạt động chức sửa thông tindanh mục 54 Hình 2.27: Biểu đồ trình tự chức sửa thông tin danh mục 55 Hình 2.28: Biểu đồ hoạt động chức xóa danh mục 55 Hình 2.29: Biểu đồ trình tự chức xóa danh mục 56 Hình 2.30: Biểu đồ hoạt động chức tạo tin bất động sản 57 Hình 2.31: Biểu đồ trình tự chức tạo tin bất động sản 57 Hình 2.32: Biểu đồ hoạt động chức sửa nội dung tin bất động sản 58 Hình 2.33: Biểu đồ trình tự chức sửa nội dung tin BĐS 58 Hình 2.34: Biểu đồ hoạt động chức xóa tin 59 Hình 2.35: Biểu đồ trình tự chức xóa tin 59 Hình 2.36: Biểu đồ hoạt động chức tạo loại hình bất động sản admin 60 Hình 2.37: Biểu đồ trình tự chức tạo loại hình bất động sản admin 61 Hình 2.38: Biểu đồ hoạt động chức sửa thông tin loại hình bất động sản admin 61 Hình 2.39: Biểu đồ trình tự chức sửa thông tin loại hình bất động sản 62 Hình 2.40: Biểu đồ hoạt động chức xóa loại hình bất động sản 62 Hình 2.41: Biểu đồ trình tự chức xóa loại hình bất động sản 63 Hình 2.42: Biểu đồ hoạt động chức tạo tài khoản admin 64 Hình 2.43: Biểu đồ trình tự chức tạo tài khoản admin 64 Hình 2.44: Biểu đồ hoạt động chức sửa thông tin tài khoản 65 Hình 2.45: Biểu đồ trình tự chức sửa thông tin tài khoản người dùng 65 Hình 2.46: Biểu đồ trình tự chức sửa thông tin tài khoản người dùng 66 Hình 2.47: Biểu đồ trình tự chức xóa tài khoản thành viên admin 66 Hình 2.48: Biểu đồ trình tự chức xóa tài khoản thành viên admin 67 Hình 2.49: Biểu đồ lớp toàn hệ thống 67 Hình 3.1: Giao diện trang chủ 69 Hình 3.2: Giao diện hiển thị danh sách tìm mua nhà 70 Hình 3.3: Giao diện hiển thị thông tin chi tiết bất động sản 71 Hình 3.4: Giao diện trang liên hệ 72 Hình 3.5: Giao diện trang tìm kiếm 73 Hình 3.6: Giao diện chức đăng tin 74 Hình 3.7: Giao diện chức đăng nhập 75 Hình 3.8: Giao diện chức đăng ký thành viên 76 DANH SÁCH CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT STT THUẬT NGỮ MÔ TẢ  HTML HyperText Markup Language  CSS Cascading Style Sheets  API Application Programming Interface  DOM Document Object Model  SGML Standard Generalized Markup Language LỜI MỞ ĐẦU Trong thời kì mà công nghệ số phát triển với tốc độ chóng mặt nay, điện thoại thông minh hay gọi Smartphone thực mang đến cuốc cách mạng cho thiết bị di động Sự tiến vượt bậc công nghệ làm thay đổi hoàn toàn thói quen hành vi người Thiết bị di động trở thành phương tiện giao tiếp làm việc chủ yếu người Và phần cốt lõi để tạo sức hấp dẫn từ Smartphone hệ điều hành ứng dụng mà chúng chạy Hiện tại, ứng dụng dành cho thiết bị di động bị phân mảnh lớn hãng công nghệ lớn cạnh tranh, ganh đua tạo tảng hệ điều hành di động riêng mình: IOS, Android, Window Phone, BlackBerry, webOS,… Vì vậy, việc xây dựng ứng dụng di động cần thiết hướng tương lai Trong đề tài em muốn giới thiệu ngôn ngữ HTML5, lý thuyết phân tích thiết kế hệ thống hướng đối tượng xây dựng chương trình phần mềm ứng dụng thông tin mua bán nhà đất cho mobile chạy tảng Android Với mục tiêu đồ án xây dựng ứng dụng thông tin mua bán cho mobile HTML5 Đồ án chia thành chương với nội dung sau: Chương Cơ sở lý thuyết Chương tập chung nghiên cứu kiến thức tổng quan về:  Giới thiệu HTML5  Tổng quan phân tích thiết kế hệ thống theo hướng đối tượng Chương Khảo sát phân tích thiết kế hệ thống Chương chủ yếu trình bày về:  Khảo sát nhu cầu cần ứng dụng di động đơn giản, dễ sử dụng để tra cứu thông tin bất động sản  Trình bày chức ứng dụng phân tích chức theo hướng đối tượng Chương Xây dựng ứng dụng thông tin mua bán nhà đất HTML5 Chương trình bày demo ứng dụng thông tin mua bán bất động sản CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu HTML5 1.1.1.Ưu, nhược điểm HTML5 a Ưu điểm: - Khả tương thích: HTML5 giữ lại cú pháp truyền thống trước đây, vài tính HTML5 chưa trình duyệt hỗ trợ phải có chế fall back để render trình duyệt cũ - Tính tiện dụng: HTML5 đặt người dùng lên hàng đầu nên cú pháp HTML5 thoải mái, thiết kế hỗ trợ sẵn bảo mật, tách biệt phần nội dung trình bày ngày thể rõ: công việc định dạng hầu hết CSS đảm nhiệm, HTML5 không hỗ trợ phần lớn chức định dạng phiên HTML trước - Khả hoạt động xuyên suốt trình duyệt: HTML5 cung cấp khai báo đơn giản API mạnh mẽ Vd: khai báo DOCTYPE: HTML4: HTML5: So với phiên trước, đặc tả HTML5 dài đáng kể nhằm chi tiết hóa hành vi để đảm bảo chúng thống trình duyệt khác -Khả truy xuất rộng rãi: HTML5 mang lại hỗ trợ tốt cho ngôn ngữ cho người khuyết tật, đồng thời hoạt động thiết bị tảng khác - Điểm đặc trưng đầu tiền ngôn ngữ đánh dấu thẻ Và HTML5 bổ sung nhiều mới, từ thẻ tổ chức nội dung(article, aside, title…) đến thẻ hỗ trợ tương tác multimedia ( video, audio…) Thẻ HTML5 xem cải tiến lớn Giờ với form 2.0, tất chức mà bạn cần (định dạng, validate data,…) xây dựng trực tiếp vào HTML + thẻ định nghĩa viết bình luận người dùng Nó độc lập với content website + thẻ đánh dấu nội dung bên cạnh trang tại.Ví dụ slidebar + hai thẻ giúp bạn không cần định nghĩa id cho tiêu đề cuối trang + thẻ định nghĩa phần menu điều hướng cho website + thẻ quan trọng, giúp bạn xác định thành phần khác website Bạn gộp chung div nội dung vào thẻ để dễ dàng quản lý + , hai thẻ giúp bạn hiển thị đoạn phim hát website đơn giản nhiều + thẻ xác định container plugin tương tác với ứng dụng bên + thẻ thú vị cho phép bạn vẽ đồ họa mà không cần phải qua đoạn mã hỗ trợ (chủ yếu javascript)  HTML5 bao gồm tập API hấp dẫn Vài API thú vị kể đến như: + Canvas + Geolocation 10 Hình 3.2: Giao diện hiển thị danh sách tìm mua nhà 106 3.4 Giao diện hiển thị thông tin chi tiết bất động sản Như thấy hình trên, ta biết thông tin bản: khu vực, địa chỉ, lọa bất động sản, diện tích, giá tiền, thông tin liên hệ tình trạng loại bất động sản, có ảnh bất động sản Nếu muốn biết thông tin bất động sản, người dùng thao tác chạm vào nút quay lại chọn vào loại bất động sản, hình thông tin chi tiết bất động sản hiển thị Hình 3.3: Giao diện hiển thị thông tin chi tiết bất động sản 107 Trong trình thao tác chức năng, người dùng luôn quay trở lại trang Menu muốn.Chỉ cần thao tác trực tiếp vào nút Menu chức ứng dụng hiển thị để người dùng chọn Ngoài muốn quay lại trang trước cần thao tác với nút quay lại nút back mà thiết bị di động hỗ trợ 108 3.5 Giao diện hiển thị chức liên hệ Người dùng có ý kiến thắc mắc hay góp ý ứng dụng hay thông tin bất động sản gửi phản hồi cho hệ thống giúp xây dựng ứng dụng hoàn thiện 109 Hình 3.4: Giao diện trang liên hệ 110 3.6 Giao diện hiển thị chức tìm kiếm Khi người dùng muốn tìm kiếm bất động sản tỉnh phù hợp với nhu cầu người dùng chọn thông tin tìm kiếm ô tìm kiếm hệ thống lấy thông tin sản phẩm từ sở liệu theo thông tin tìm kiếm hiển thị kết cho người dùng 111 Hình 3.5: Giao diện trang tìm kiếm 112 113 3.7 Giao diện hiển thị chức đăng tin Sau đăng nhập, người dùng đăng tin rao bán cho thuê bất động sản lên hệ thống, người quản trị duyệt tin tin người dùng hiển thị hệ thống Người dùng đăng tin trực tiếp giao diện trang web bất động sản Hình 3.6: Giao diện chức đăng tin 114 3.8 Giao diện hiển thị chức đăng nhập Người dùng muốn thao tác tất chức ứng dụng phải nhập tên truy cập mật đăng nhập Hệ thống kiểm tra xem người dùng có quyền đăng nhập vào hệ thống hay không? Nếu với tên mật truy nhập cho phép người dùng đăng nhập vào hệ thống với quyền quy định Hình 3.7: Giao diện chức đăng nhập 115 3.9 Giao diện hiển thị chức đăng ký thành viên Người dùng có bất động sản muốn rao bán cho thuê, để đăng tin hệ thống người dùng phải nhập thông tin để đăng ký làm thành viên theo yêu cầu hệ thống Người dùng điền đầy đủ thông tin từ form nhập liệu gửi lên hệ thống 116 Hình 3.8: Giao diện chức đăng ký thành viên 117 KẾT LUẬN Dựa kiến thức có HTML5, phân tích thiết kế hệ thống theo hướng đối tượng, … trình thực đồ án em thấy đạt số điểm sau:  Củng cố kiến thức HTML5: Các ưu, nhược điểm, số đặc điểm bật tính HTML5…  Nắm kiến thức phân tích thiết kế hệ thống theo hướng đối tượng  Củng cố kiến thức bất động sản  Tìm hiểu nắm nội dung quy trình xây dựng ứng dụng  Xây dựng ứng dụng thông tin mua bán nhà đất mobile  Bổ sung rèn luyện thêm kỹ sử dụng phần mềm Word Powerpoint  Nâng cao khả đọc hiểu tài liệu Tiếng Anh  Tự rèn luyện kỹ làm việc độc lập cho thân Những điểm hạn chế:  Khả đọc hiểu tài liệu tiếng anh hạn chế  Các kiến thức lập trình web, lập trình ứng dụng cần củng cố thêm  Việc xây dựng ứng dụng thông tin mua bán cho mobile HTML5 chưa thành thạo Hướng phát triển tiếp theo: 118 Với mục tiêu đề ra, đồ án đạt kết tương đối khả quan, bên cạnh số vấn đề cần giải thêm Có thể xây dựng ứng dụng chạy nhiều tảng khác Vận dụng thành thạo kiến thức lập trình, phân tích thiết kế hệ thống theo hướng đối tượng vào việc xây dựng ứng dụng cho mobile ngày toàn diện Em hi vọng nhận góp ý chân thành thầy cô bạn để đồ án em hoàn thiện Cuối em xin gửi lời cảm ơn sâu sắc tới thầy Trần Mạnh Tuấn, KS.Hoàng Tất Thắng, bảo em tận tình thời gian qua với giúp đỡ nhiệt tình anh chị công ty Vinno Việt Nam giúp em hoàn thành đồ án Sinh viên Nguyễn Thị Lệ 119 TÀI LIỆU THAM KHẢO  http://www.w3schools.com/html/html5_intro.asp  20 Recipes for Programming PhoneGap, Jamie Munro  Bài giảng phân tích thiết kế hướng đối tượng, Bộ môn HTTT, Đại học CNTT&TT 120 ... dựng chương trình phần mềm ứng dụng thông tin mua bán nhà đất cho mobile chạy tảng Android Với mục tiêu đồ án xây dựng ứng dụng thông tin mua bán cho mobile HTML5 Đồ án chia thành chương với nội... dụng để tra cứu thông tin bất động sản  Trình bày chức ứng dụng phân tích chức theo hướng đối tượng Chương Xây dựng ứng dụng thông tin mua bán nhà đất HTML5 Chương trình bày demo ứng dụng thông. .. với tên đề tài Xây dựng ứng dụng thông tin mua bán cho mobile HTML5 không chép nội dung từ đồ án khác, hay sản phẩm tương tự mà em làm Sản phẩm đồ án thân em nghiên cứu xây dựng nên Nếu có