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 và Truyền
Thông – Đại hoc Thái Nguyên đã tạo điều kiện cho em thực hiện đồ án này.
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 là người trực tiếp hướng dẫn em trong suốt quá trình thực hiện đồ án.
Em xin gửi lời cảm ơn chân thành đến toàn thể các anh chị trong công ty cổ
phần Vinno Việt Nam đã nhiệt tình giúp đỡ, đóng góp những ý kiến bổ ích cho em
trong quá trình thực hiện đồ án.
Cuối cùng, em xin gửi lời cảm ơn đến gia đình và bạn bè vì những tình cảm,
sự ủng hộ và động viên đã dành cho em trong suốt quá trình học tập cũng như
thực hiện đồ án này.
Thái Nguyên, tháng 6 năm 2015
Sinh viên thực hiện
Nguyễn Thị Lệ
1
LỜI CAM ĐOAN
Đồ án tốt nghiệp là sản phẩm tổng hợp toàn bộ các kiến thức mà sinh viên
đã học được trong suốt thời gian học tập tại trường Đại học. Ý thức được điều đó,
với tinh thần nghiêm túc, tự giác cùng sự lao động miệt mài của bản thân và sự
hướng dẫn tận tình của 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 của mình.
Em xin cam đoan về 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 bằng HTML5” không sao chép nội
dung cơ bản từ các đồ án khác, hay các sản phẩm tương tự mà không phải do
em làm ra. Sản phẩm của đồ án là do chính bản thân em nghiên cứu và xây
dựng nên.
Nếu có gì sai em xin chịu mọi hình thức kỉ luật của Trường Đại học Công
Nghệ Thông Tin và 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 hiện
2
MỤC LỤC
DANH MỤC HÌNH ẢNH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
DANH SÁCH CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT . . . . . . . . . . . . . . . . . . . . . . . . 5
LỜI MỞ ĐẦU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1. Giới thiệu về HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.1.Ưu, nhược điểm của HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.2. Một số đặc điểm nổi bật của HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.3. Các tính năng mới có trong HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1.4. Lịch sử hình thành và 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 2. 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 hiện trạng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.1.2. Phân tích bài 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 các chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 bài 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 năng tìm mua nhà . . . . . . . 70
3.4. Giao diện hiển thị thông tin chi tiết của một bất động sản . . . . . . . . . . . . . . . 71
3.5. Giao diện hiển thị chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
3
3.6. Giao diện hiển thị chức năng tìm kiếm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.7. Giao diện hiển thị chức năng đăng tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
3.8. Giao diện hiển thị chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
3.9. Giao diện hiển thị chức năng đăng ký thành viên. . . . . . . . . . . . . . . . . . . . . . . . 76
KẾT LUẬN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
TÀI LIỆU THAM KHẢO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
4
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 năng đăng ký . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Hình 2.3: Biểu đồ trình tự chức năng đăng ký . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Hình 2.4: Biểu đồ hoạt động chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Hình 2.5: Biểu đồ trình tự chức năng đăng nhập của người dùng. . . . . . . . . . . . . . . 40
Hình 2.6: Biểu đồ trình tự chức năng đăng nhập của Admin . . . . . . . . . . . . . . . . . . . 41
Hình 2.7: Biểu đồ hoạt động chức năng xem danh mục bất động sản . . . . . . . . . . 42
Hình 2.8: Biểu đồ trình tự chức năng xem danh mục bất động sản của người dùng
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Hình 2.9: Biểu đồ hoạt động chức năng xem chi tiết tinbất động sản . . . . . . . . . . 43
Hình 2.10: Biểu đồ trình tự chức năng xem chi tiết tin bất động sản của người
dùng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Hình 2.11: Biểu đồ trình tự chức năng xem chi tiết tin bất động sản của admin 44
Hình 2.12: Biểu đồ hoạt động chức năng tìm kiếm bất động sản. . . . . . . . . . . . . . . 45
Hình 2.13: Biểu đồ trình tự chức năng tìm kiếm bất động sản . . . . . . . . . . . . . . . . . 46
Hình 2.14: Biểu đồ hoạt động chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 2.15: Biểu đồ trình tự chức năng liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 2.16: Biểu đồ hoạt động chức năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Hình 2.17: Biểu đồ trình tự chức năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Hình 2.18: Biểu đồ hoạt động chức năng duyệt tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 2.19: Biểu đồ trình tự chức năng duyệt tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 2.20: Biểu đồ hoạt động chức năng xem tin đợi duyệt . . . . . . . . . . . . . . . . . . . 51
Hình 2.21: Biểu đồ trình tự chức năng xem tin đợi duyệt . . . . . . . . . . . . . . . . . . . . . . 51
Hình 2.22: Biểu đồ hoạt động chức năng xóa tin đợi duyệt . . . . . . . . . . . . . . . . . . . . 52
Hình 2.23: Biểu đồ trình tự chức năng xóa tin đợi duyệt. . . . . . . . . . . . . . . . . . . . . . . 52
Hình 2.24: Biểu đồ hoạt động chức năng tạo danh mục . . . . . . . . . . . . . . . . . . . . . . . 53
Hình 2.25: Biểu đồ trình tự chức năng tạo danh mục. . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Hình 2.26: Biểu đồ hoạt động chức năng sửa thông tindanh mục . . . . . . . . . . . . . . 54
Hình 2.27: Biểu đồ trình tự chức năng sửa thông tin danh mục . . . . . . . . . . . . . . . . 55
Hình 2.28: Biểu đồ hoạt động chức năng xóa danh mục . . . . . . . . . . . . . . . . . . . . . . . 55
Hình 2.29: Biểu đồ trình tự chức năng xóa danh mục . . . . . . . . . . . . . . . . . . . . . . . . . 56
Hình 2.30: Biểu đồ hoạt động chức năng tạo tin bất động sản . . . . . . . . . . . . . . . . . . 57
Hình 2.31: Biểu đồ trình tự chức năng tạo tin bất động sản . . . . . . . . . . . . . . . . . . . . 57
5
Hình 2.32: Biểu đồ hoạt động chức năng sửa nội dung tin bất động sản . . . . . . . 58
Hình 2.33: Biểu đồ trình tự chức năng sửa nội dung tin BĐS . . . . . . . . . . . . . . . . . . 58
Hình 2.34: Biểu đồ hoạt động chức năng xóa tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Hình 2.35: Biểu đồ trình tự chức năng xóa tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Hình 2.36: Biểu đồ hoạt động chức năng tạo loại hình bất động sản của admin. 60
Hình 2.37: Biểu đồ trình tự chức năng tạo loại hình bất động sản của 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 của admin
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Hình 2.39: Biểu đồ trình tự chức năng 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 năng xóa loại hình bất động sản . . . . . . . . . . . 62
Hình 2.41: Biểu đồ trình tự chức năng xóa loại hình bất động sản. . . . . . . . . . . . . . 63
Hình 2.42: Biểu đồ hoạt động chức năng tạo tài khoản của admin. . . . . . . . . . . . . . 64
Hình 2.43: Biểu đồ trình tự chức năng tạo tài khoản của admin . . . . . . . . . . . . . . . . 64
Hình 2.44: Biểu đồ hoạt động chức năng sửa thông tin tài khoản. . . . . . . . . . . . . . . 65
Hình 2.45: Biểu đồ trình tự chức năng sửa thông tin tài khoản của người dùng 65
Hình 2.46: Biểu đồ trình tự chức năng sửa thông tin tài khoản của người dùng 66
Hình 2.47: Biểu đồ trình tự chức năng xóa tài khoản thành viên của admin . . . . 66
Hình 2.48: Biểu đồ trình tự chức năng xóa tài khoản thành viên của admin . . . . 67
Hình 2.49: Biểu đồ lớp của 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 của mộ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 năng đăng tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Hình 3.7: Giao diện chức năng đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Hình 3.8: Giao diện chức năng đăng ký thành viên . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6
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
7
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 như
hiện nay, điện thoại thông minh hay còn gọi là Smartphone thực sự đã mang
đến một cuốc cách mạng cho các thiết bị di động. Sự tiến bộ vượt bậc của
công nghệ đã làm thay đổi hoàn toàn thói quen cũng như hành vi của con
người. Thiết bị di động đã đang và sẽ trở thành phương tiện giao tiếp và làm
việc chủ yếu của con người. Và phần cốt lõi để tạo ra sức hấp dẫn từ chiếc
Smartphone chính là hệ điều hành và các ứng dụng mà chúng đang chạy.
Hiện tại, các ứng dụng dành cho thiết bị di động đang bị phân mảnh rất lớn
do các hãng công nghệ lớn cạnh tranh, ganh đua nhau tạo ra các nền tảng hệ điều
hành di động của riêng mình: IOS, Android, Window Phone, BlackBerry,
webOS,… Vì vậy, việc xây dựng các ứng dụng trên di động là cần thiết và là
hướng đi mới trong tương lai.
Trong đề tài này em muốn giới thiệu về ngôn ngữ HTML5, lý thuyết phân
tích thiết kế hệ thống hướng đối tượng và xây dựng một chương trình phần mềm
ứng dụng thông tin mua bán nhà đất cho mobile chạy trên nền tảng Android.
Với mục tiêu của đồ án là xây dựng ứng dụng thông tin mua bán cho mobile
bằng HTML5. Đồ án được chia thành 3 chương với các nội dung cơ bản sau:
Chương 1. Cơ sở lý thuyết
Chương này tập chung nghiên cứu các kiến thức tổng quan về:
Giới thiệu HTML5
Tổng quan về phân tích thiết kế hệ thống theo hướng đối tượng
Chương 2. Khảo sát và phân tích thiết kế hệ thống
Chương này chủ yếu trình bày về:
Khảo sát về nhu cầu cần một ứng dụng di động đơn giản, dễ sử dụng để
tra cứu thông tin bất động sản.
8
Trình bày các chức năng của ứng dụng và phân tích các chức năng theo
hướng đối tượng
Chương 3. Xây dựng ứng dụng thông tin mua bán nhà đất bằng HTML5
Chương này trình bày về 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 về HTML5
1.1.1.Ưu, nhược điểm của HTML5
a. Ưu điểm:
- Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước
đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ
trợ thì nó phải có một cơ chế fall back để render trong các 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 của
HTML5 khá thoải mái, thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần
nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do
CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng
trong các phiên bản HTML trước đây.
- Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các
khai báo đơn giản hơn và một API mạnh mẽ.
Vd: khai báo DOCTYPE:
HTML4:
HTML5:
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa
mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
-Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các
9
ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết
bị và nền tảng khác nhau
- Điểm đặc trưng đầu tiền của một ngôn ngữ đánh dấu là các thẻ. Và HTML5
bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung(article, aside, title…) đến
các thẻ hỗ trợ tương tác và multimedia ( video, audio…).
Thẻ
.PDF 
120 
135 
98 
