Báo cáo dự án trang web trọ tốt hn

Core đa năng c a ngôn ng này đã đủ ữ ược nhúng vào Netscape, IE, và các trình duy t khác.ệ ● Lợi thế của JavaScript oSự tương tác Server ít hơn: Bạn có thể xác nhận đầu vào input người s

Đ I H C QU C GIA HÀ N I Ạ Ọ Ố Ộ

NHÓM 24, INT2208-8-2019

B MÔN: CÔNG NGH PH N M M Ộ Ệ Ầ Ề

GI NG VIÊN: PGS.TS TR Ả ƯƠ NG ANH HOÀNG

THÀNH VIÊN:

1 NGUY N DUY TÂM Ễ

2 Đ NG VĂN NGUY N Ặ Ễ

3 NGUY N M NH TH NG Ễ Ạ Ắ

4 PH M VĂN THU N Ạ Ấ

M c l c ụ ụ

Kết quả kiểm thử 17

Phầần I: Gi i thi u chung ớ ệ

I.1 Mô t d án ả ự

Hàng năm, Th đô Hà N i l i ti p nh n thêm hàng ngàn b n tr đ ủ ộ ạ ế ậ ạ ẻ ổ

v đ h c t p và làm vi c, cùng v i đó là lề ể ọ ậ ệ ớ ượng sinh viên ra trường tr ụ

l i thành ph đ ki m vi c làm do v y nhu c u ch luôn là v n đ ạ ố ể ế ệ ậ ầ ỗ ở ấ ề nóng Vi c tìm phòng phù h p v i b n thân là vô cùng khó khăn vì s ệ ợ ớ ả ố

lượng nhà tr phù h p ch có h n.M c dù v y có r t nhi u nhà tr ọ ợ ỉ ạ ặ ậ ấ ề ọ không có người thuê vì không qu ng bá đúng cách nên r t ít ngả ấ ười bi t ế

đ n Trong th i đ i công ngh phát tri n nh hi n nay, đ gi i quy t ế ờ ạ ệ ể ư ệ ể ả ế

v n đ này nhóm ấ ề Nhóm 24, INT2208-8-2019 đã quy t đ nh xây d ng d ế ị ự ự

án trang web Tr T t HN nh m k t n i ngọ ố ắ ế ố ười có nhu c u thuê tr và cácầ ọ

ch nhà tr v i nhau Nh đó mà vi c tìm phòng tr phù h p v i yêu c uủ ọ ớ ờ ệ ọ ợ ớ ầ

c a b n thân s tr nên d dàng h n Nh ng ngủ ả ẽ ở ễ ơ ữ ười kinh doanh phòng

tr cũng có th gi i thi u phòng tr c a mình đ tìm ki m nhi u khách ọ ể ớ ệ ọ ủ ể ế ề hàng h n.ơ

Tên d án: Tr T t HN.ự ọ ố

I.2 Các thành viên trong nhóm

⮚ Nguyễn Duy Tâm

⮚ Đặng Văn Nguyễn

⮚ Nguyễn Mạnh Thắng

⮚ Phạm Văn Thuấn

I.3 Quy trình phầần mêầm áp d ng cho d án ụ ự

- Áp d ng quy trình Scrum cho d án.ụ ự

- Các vai trò g mồ

● Product Owner: Nguyễn Mạnh Thắng

● Scrum Master: Nguyễn Duy Tâm

● Đội phát triển:

o Nguyễn Duy Tâm

o Đặng Văn Nguyễn

o Nguyễn Mạnh Thắng

o Phạm Văn Thuấn

- Quy trình phát tri n theo các sprint kéo dài t 1-3 tu n, để ừ ầ ược tóm

lượ ạc l i nh sau:ư

● Tuần 1: Product Owner cung cấp các yêu cầu cho đội phát triển Sau khi nắm rõ yêu cầu, đội phát triển lập tức tiến hành tìm hiểu vấn đề, lập kế hoạch với sự dẫn dắt của Scrum Master

● Tuần 2 đến tuần 4: Tạo ra giao diện sơ khai, đồng thời thu thập thông tin để tạo lập CSDL

● Tuần 5 đến tuần 7: tiếp tục cải tiến Front-end, xây dựng back-end để tạo ra phiên bản đầu tiên, trước hết là để chạy được những chức năng cơ bản và quan trọng nhất

● Tuần 8 đến tuần 10: Cài đặt thêm các chức năng phụ

● Tuần 11: Thực hiện các ca kiểm thử cho toàn bộ hệ thống để thẩm định, đánh giá sản phẩm

● Tuần 12 đến tuần 14: Bảo trì, nâng cấp mã nguồn, sửa các lỗi còn phát sinh

● Tuần 15: Kiểm thử chấp nhận của người dùng

I.4 Liên kêết đêến repo c a nhóm trên Github ủ

https://github.com/thangnmuet2017/TroTotHN

I.5 Liên kêết đêến trang ch s n ph m tri n khai c a ủ ả ẩ ể ủ nhóm

https://trotothn.000webhostapp.com/

I.6 Liên kêết đêến video demo s n ph m ả ẩ

● T ng quan Trang ch , đăng ký, đăng nh p, đăng xu tổ ủ ậ ấ

https://www.youtube.com/watch?v=zgUG9sTtlVw

● Tìm ki m nhanh theo lo i phòng, s p x p theo giá và th i gianế ạ ắ ế ờ https://www.youtube.com/watch?v=7R8aqXlfEb8

● S d ng b l c đ tìm phòng theo đi u ki nử ụ ộ ọ ể ề ệ

https://www.youtube.com/watch?v=8g_eT3NExEQ

● Đăng tin nhanh và xem chi ti t phòngế

https://www.youtube.com/watch?v=0iG5Xmuw4Tw

Phầần II: Các công ngh và tài nguyên đ ệ ượ ử ụ c s d ng II.1 HTML5

HTML (ti ng Anhế , vi t t t cho ế ắ HyperText Markup Language,

hay là "Ngôn ng Đánh d u Siêu văn b n") là m t ữ ấ ả ộ ngôn ng đánh d uữ ấ

được thi t k ra đ t o nên các ế ế ể ạ trang web v i các m u thông tin đớ ẩ ược trình bày trên World Wide Web Cùng v i ớ CSS và JavaScript, HTML t o ạ

ra b ba n n t ng k thu t cho ộ ề ả ỹ ậ World Wide Web HTML đượ ịc đ nh nghĩa

nh là m t ng d ng đ n gi n c a ư ộ ứ ụ ơ ả ủ SGML và đượ ử ục s d ng trong các tổ

ch c c n đ n các yêu c u xu t b n ph c t p HTML đã tr thành m t ứ ầ ế ầ ấ ả ứ ạ ở ộ chu n ẩ Internet do t ch c ổ ứ World Wide Web Consortium (W3C) duy trì Phiên b n chính th c m i nh t c a HTML là HTML 4.01 (1999) Sau đó,ả ứ ớ ấ ủ các nhà phát tri n đã thay th nó b ng ể ế ằ XHTML Hi n nay, HTML đang ệ

được phát tri n ti p v i phiên b n ể ế ớ ả HTML5 h a h n mang l i di n m o ứ ẹ ạ ệ ạ

m i cho ớ Web

B ng cách dùng ằ HTML đ ngộ ho c ặ Ajax, l p trình viên có th ậ ể

đượ ạc t o ra và x lý b i s lử ở ố ượng l n các công c , t m t chớ ụ ừ ộ ương trình

so n th o văn b n đ n gi n – có th gõ vào ngay t nh ng dòng đ u ạ ả ả ơ ả ể ừ ữ ầ tiên – cho đ n nh ng công c xu t b n ế ữ ụ ấ ả WYSIWYG ph c t p.ứ ạ

N l c tách ph n n i dung ra kh i ph n hình th c trình bày c a trangỗ ự ầ ộ ỏ ầ ứ ủ HTML đã đ a đ n s xu t hi n c a các chu n m i nh ư ế ự ấ ệ ủ ẩ ớ ưXHTML Các chu n này nh n m nh vào vi c s d ng th đánh d u vào vi c xác đ nh ẩ ấ ạ ệ ử ụ ẻ ấ ệ ị

c u trúc tài li u nh ph n đ m c, đo n văn, kh i văn b n trích d n và ấ ệ ư ầ ề ụ ạ ố ả ẫ các b ng, ch không khuyên dùng các th đánh d u mang tính ch t trình ả ứ ẻ ấ ấ bày tr c quan, nh ự ư <font>, <b> (in đ m), và ậ <i> (in nghiêng) Nh ng mã ữ mang tính ch t trình bày đó đã đấ ược lo i b kh i HTML 4.01 Strict và ạ ỏ ỏ các đ c t ặ ảXHTML nh m t o đi u ki n cho ằ ạ ề ệ CSS CSS cung c p m t ấ ộ

gi i pháp giúp tách c u trúc HTML ra kh i ph n trình bày c a n i dung ả ấ ỏ ầ ủ ộ

c a nó.ủ

II.2 CSS3

CSS ( d ch t ti ng anh là ị ừ ế Cascading Style Sheets) được dùng

đ miêu t cách trình bày các tài li u vi t b ng ngôn ng ể ả ệ ế ằ ữHTML và XHTML.[1] Ngoài ra ngôn ng đ nh ki u theo t ng cũng có th dùng cho ữ ị ể ầ ể XML SVG XUL, , Các đ c đi m k thu t c a CSS đặ ể ỹ ậ ủ ược duy trì b i ở World Wide Web Consortium (W3C) Thay vì đ t các th quy đ nh ki u ặ ẻ ị ể dáng cho văn b n ả HTML (ho c ặ XHTML) ngay trong n i dungộ c a nó, ủ

b n nên s d ng CSS Hi u đ n gi n thì CSS là m t Design Language ạ ử ụ ể ơ ả ộ

đ n gi n đơ ả ượ ử ục s d ng đ làm đ n gi n hóa ti n trình trình bày các ể ơ ả ế trang web

CSS h n ch t i thi u vi c làm r i mã ạ ế ố ể ệ ố HTML c a trang ủ Web

b ng các th quy đ nh ki u dáng (ch đ m, ch in nghiêng, ch có g ch ằ ẻ ị ể ữ ậ ữ ữ ạ chân, ch màu), khi n mã ngu n c a trang Web đữ ế ồ ủ ượ ọc g n gàng h n, táchơ

n i dung c a trang ộ ủ Web và đ nh d ng hi n th , d dàng cho vi c c p ị ạ ể ị ễ ệ ậ

nh t n i dung.ậ ộ

CSS t o ra các ki u dáng có th áp d ng cho nhi u trang Web, giúp ạ ể ể ụ ề tránh ph i l p l i vi c đ nh d ng cho các trang ả ặ ạ ệ ị ạ Web gi ng nhau.ố

II.3 JavaScript

JavaScript là m t ngôn ng l p trình c a HTML và WEB Nó làộ ữ ậ ủ

nh và đẹ ượ ử ục s d ng ph bi n nh t nh là m t ph n c a các trang web,ổ ế ấ ư ộ ầ ủ

mà s thi hành c a chúng cho phép Client-Side script tự ủ ương tác v i ớ

ngườ ử ụi s d ng và t o các trang web đ ng Nó là m t ngôn ng chạ ộ ộ ữ ương trình thông d ch v i các kh năng hị ớ ả ướng đ i tố ượng

JavaScript được bi t đ n đ u tiên v i tên Mocha, và sau đó là ế ế ầ ớ LiveScript, nh ng Hãng Netscape thay đ i tên c a nó thành JavaScript, ư ổ ủ

b i vì s ph bi n nh là m t hi n tở ự ổ ế ư ộ ệ ượng c a Java lúc b y gi ủ ấ ờ JavaScript xu t hi n l n đ u trong Netscape 2.0 năm 1995 v i tên ấ ệ ầ ầ ớ LiveScript Core đa năng c a ngôn ng này đã đủ ữ ược nhúng vào Netscape,

IE, và các trình duy t khác.ệ

● Lợi thế của JavaScript

oSự tương tác Server ít hơn: Bạn có thể xác nhận đầu vào (input) người sử dụng trước khi gửi trang tới Server Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server của bạn tải ít hơn

oPhản hồi ngay lập tức tới khách truy cập Họ không phải chờ cho:

một trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó

oKhả năng tương tác tăng lên Bạn có thể tạo các giao diện mà :

phản ứng lại khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím

oGiao diện phong phú hơn Bạn có thể sử dụng JavaScript để bao :

gồm những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn

● Tuy nhiên JavaScript cũng có hạn chế là chúng ta không thể đối

xử JavaScript như là một ngôn ngữ chương trình chính thức (full-fledged) Nó thiếu các tính năng quan trọng sau:

oClient-side JavaScript không cho phép đọc và ghi các file, bởi vì

lý do bảo mật

oJavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vì không có những hỗ trợ có sẵn

oJavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

II.4 Bootstrap 4

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng d dàng thi t k website theo 1 chu n nh t đ nh, t o các website ễ ế ế ẩ ấ ị ạ thân thi n v i các thi t b c m tay nh mobile, ipad, tablet, ệ ớ ế ị ầ ư

Bootstrap bao g m nh ng cái c b n có s n nh : typography, forms, ồ ữ ơ ả ẵ ư buttons, tables, navigation, modals, image carousels và nhi u th khác ề ứ Trong bootstrap có thêm nhi u Component, Javascript h tr cho vi c thi tề ỗ ợ ệ ế

k reponsive c a b n d dàng, thu n ti n và nhanh chóng h n.ế ủ ạ ễ ậ ệ ơ

Vì sao nên s d ng Bootstrap? ử ụ

● Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới để xây dựng nên một website Bootstrap đã xây dựng nên

1 chuẩn riêng và rất được người dùng ưa chuộng Chính vì thế, chúng

ta hay nghe tới một cụm từ rất thông dụng "Thiết kế theo chuẩn Bootstrap"

● Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ cần có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

● Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

● Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên,

với IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên Điều này vô cùng

dễ hiểu vì IE8 không support HTML5 và CSS3

II.5 jQuery

jQuery là th vi n JavaScript đa trình duy t đư ệ ệ ược thi t k đ n gi n ế ế ơ ả hóa l p trình máy ngậ ười dùng c a HTML, phát hành vào tháng 1 năm ủ

2006 t i BarCamp NYC b i John Resig Đạ ở ượ ử ục s d ng b i h n 52% ở ơ trong 10000 truy c p nhi u nh t các trang web, jQuery là th vi n ậ ề ấ ư ệ JavaScript ph bi n nh t đổ ế ấ ượ ử ục s d ng ngày nay

jQuery làm đ n gi n hóa vi c truy n t i HTML, x lý s ki n, t o ơ ả ệ ề ả ử ự ệ ạ

hi u ng đ ng và tệ ứ ộ ương tác Ajax V i jQuery, khái ni m Rapid Web ớ ệ Development đã không còn quá xa l ạ

jQuery là m t b công c ti n ích JavaScript làm đ n gi n hóa các ộ ộ ụ ệ ơ ả tác v đa d ng v i vi c vi t ít code h n.ụ ạ ớ ệ ế ơ

II.6 PHP

PHP là viết tắt Hypertext Preprocessor một ngôn ngữ lập trình kịch bản mã nguồn mở chạy ở phía server PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến và được ưa chuộng nhất thế giới nhờ tốc độ nhanh, nhỏ gọn, cú pháp dễ học

Một file PHP có thể chứa văn bản, HTML, CSS, JavaScript, và mã PHP Mã PHP được thực thi trên máy chủ, và kết quả được trả về cho trình duyệt như bằng HTML

Một file PHP có phần mở rộng ".php"

PHP có th làm gì? ể

⮚ Tạo ra nội dung trang năng động

⮚ Tạo ra, mở, đọc, viết, xóa, và đóng tập tin trên máy chủ

⮚ Thu thập dữ liệu mẫu.

⮚ Gửi và nhận các tập tin cookie

⮚ Thêm, xóa, sửa đổi dữ liệu trong cơ sở dữ liệu của bạn

⮚ Sử dụng để kiểm soát truy cập người dùng

⮚ Mã hóa dữ liệu

Với PHP bạn không giới hạn để HTML là đầu ra Bạn có thể đê hình ảnh làm đầu ra, file PDF, và các phim Flash Bạn cũng có thể ra bất kỳ văn bản, chẳng hạn như XHTML và XML

T i sao nên s d ng PHP? ạ ử ụ

⮚ PHP chạy trên các nền tảng khác nhau (Windows, Linux, Unix, Mac OS X, vv)

⮚ PHP tương thích với hầu như tất cả các máy chủ sử dụng ngày nay (Apache, IIS, vv)

⮚ PHP hỗ trợ một loạt các cơ sở dữ liệu

⮚ PHP là miễn phí Tải về nó từ nguồn PHP chính thức:

www.php.net.

⮚ PHP là dễ dàng để tìm hiểu và chạy hiệu quả ở phía máy chủ

II.7 MySQL

MySQL là h qu n tr c s d li uệ ả ị ơ ở ữ ệ t do ngu n mự ồ ở ph bi n nh t th ổ ế ấ ế

gi i và đớ ược các nhà phát tri n r t a chu ng trong quá trình phát tri n ể ấ ư ộ ể

ng d ng Vì MySQL là c s d li u t c đ cao, n đ nh và d s d ng,

có tính kh chuy n, ho t đ ng trên nhi u h đi u hành cung c p m t h ả ể ạ ộ ề ệ ề ấ ộ ệ

th ng l n các hàm ti n ích r t m nh V i t c đ và tính b o m t cao, ố ớ ệ ấ ạ ớ ố ộ ả ậ MySQL r t thích h p cho các ng d ng có truy c p CSDL trên internet.ấ ợ ứ ụ ậ

MySQL có nhi u u đi m ề ư ể :

⮚ MySQL là mã nguồn mở Vì thế, để sử dụng nó, bạn chẳng phải mất một xu nào

⮚ MySQL là một chương trình rất mạnh mẽ

⮚ MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng

là SQL

⮚ MySQL làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP, PERL, C, C++, Java, …

⮚ MySQL làm việc nhanh và khỏe ngay cả với các tập dữ liệu lớn.

⮚ MySQL rất thân thiện với PHP, một ngôn ngữ rất đáng giá để tìm hiểu để phát triển Web

⮚ MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữa trong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB, nhưng bạn có thể tăng kích cỡ này (nếu

hệ điều hành của bạn có thể xử lý nó) để đạt tới giới hạn lý thuyết

là 8 TB

⮚ MySQL là có thể điều chỉnh Giấy phép GPL mã nguồn mở cho phép lập trình viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ

Phầần III: Quá trình phát tri n và ki m th phầần mêầm ể ể ử III.1 Phần tích và đ c t yêu cầầu ặ ả

III.1.1Phân tích yêu cPhân tích yêu cầầu

- Người dùng là người đang có nhu cầu tìm thuê nhà/phòng trọ ở Hà Nội để thuận tiện cho học tập/làm việc

- Các chức năng cơ bản cần có:

❖ Cung cấp ba loại phòng là Phòng trọ, Nhà nguyên căn và Ở ghép

❖ Cho phép tìm kiếm tất cả các phòng thuộc một trong ba loại trên

❖ Tìm kiếm nâng cao bằng bộ lọc với các điều kiện về khu vực địa lý, loại phòng, kiểu vệ sinh và giá phòng

❖ Chia sẻ thông tin về địa chỉ nhà trọ, phòng trọ đến cho những người khác

❖ Cung cấp tài khoản cho người dùng để chia sẻ thông tin về địa chỉ nhà trọ, phòng trọ

- Các chức năng dễ sử dụng với mọi đối tượng, giao diện thân thiện

III.1.2Đặc tả yêu cầu chức năng

- Hiện ra tất cả các phòng hiện có trong CSDL lên Trang chủ, với tiêu đề, khu vực và mức giá, hình ảnh demo

- Hiện ra các kết quả cho các loại phòng riêng biệt, đi kèm theo đó là hình ảnh demo, địa chỉ, diện tích, kiểu vệ sinh, giá phòng, liên hệ đến chủ cho thuê nhà, và thời gian đã tồn tại từng bài đăng

- Khi click vào xem chi tiết của từng phòng, tất cả các thông tin đều được hiện ra Ngoài nh ng điều vừa kể trên, còn có giá điện nước, ữ đối tượng cho thuê, các tiện ích, mô tả chi tiết về phòng, kèm theo các hình ảnh về phòng

- Tìm kiếm các phòng theo điều kiện nhất định về khu vực địa lý, kiểu phòng, giá phòng, kiểu vệ sinh

- Sắp xếp các kết quả tìm được theo giá cả và thời gian xuất hiện

- Cung cấp tài khoản cho người dùng (Người dùng đăng ký)

- Người dùng sau khi có tài khoản có thể đăng nhập để chia sẻ các thông tin về địa chỉ thuê nhà của mình cho những người khác

- Đăng xuất tài khoản

III.1.3Đặc tả yêu cầu phi chức năng

- Tính khả dụng: giao diện thân thiện, các chức năng dễ sử dụng cho người dùng ở mọi lứa tuổi, mọi trình độ

- Tính tương thích: hệ thống tương thích với nhiều thiết bị, nhiều trình duyệt và các độ rộng màn hình khác nhau

- Tính tin cậy: hệ thống hoạt động đúng theo các chức năng đã thiết kế

- Hiệu năng: tốc độ xử lý nhanh, phản hồi chính xác các thao tác và yêu cầu từ người dùng

- Tính khả kiểm thử: hệ thống có thể dễ dàng được kiểm thử

III.1.4Mô tả yêu cầu người dùng dưới dạng User story

- Là một người có nhu cầu thuê nhà/phòng, tôi muốn tìm loại phòng phù hợp cho mục đích và đi uề kiện của bản thân

- Là một người đi tìm phòng trọ, tôi muốn tìm kiếm thông qua các lựa chọn, để việc tìm kiếm được nhanh, dễ dàng và chính xác hơn