BÁO cáo môn THIẾT kế và PHÁT TRIỂN WEBSITE 1 đề tài xây DỰNG WEBSITE bất ĐỘNG sản

TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU
VIỆN CNTT – ĐIỆN – ĐIỆN TỬ
- - -   - - -

BÁO CÁO MÔN
THIẾT KẾ VÀ PHÁT TRIỂN WEBSITE 1
ĐỀ TÀI : XÂY DỰNG WEBSITE BẤT ĐỘNG SẢN
Nhóm sinh viên thực hiện :
Cáp Hữu Nhân Quốc
Vũ Đức Anh


ĐÁNH GIÁ CỦA GIẢNG VIÊN
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................
.......................................................................................................................................................................................

....................................................................................................................................................................................…

1


MỤC LỤC
MỤC LỤC
ĐÁNH GIÁ CỦA GIẢNG VIÊN....................................................................................................................................1
LỜI NÓI ĐẦU.................................................................................................................................................................6
CHƯƠNG I : TỔNG QUAN VỀ HTML, CSS & JAVASCRIPT..................................................................................7
1.HTML.......................................................................................................................................................................7


HTML Là gì?..................................................................................................................................................7



Để thiết kế các trang web HTML khơng khó, bạn chỉ cần các trình soạn thảo:....................................7



Các trang web................................................................................................................................................7



Một số khái niệm cần nhớ trong lúc học HTML.......................................................................................7

2.CSS............................................................................................................................................................................8


CSS là gì – Tổng quan về CSS......................................................................................................................8



Các tính năng mặc định của trang web......................................................................................................8



Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:...............................................8



Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thơng tin trên website.........................................9



Khi đặt chung trong trang tài liệu HTML..................................................................................................9



Khi viết riêng biệt với tài liệu HTML.........................................................................................................9

3.JAVASCRIPT..........................................................................................................................................................10


JavaScript là gì ?.........................................................................................................................................10



Bạn cần biết gì:............................................................................................................................................10



Làm thế nào để thêm JavaScript trên website của bạn?........................................................................10

CHƯƠNG II: PHÂN TÍCH ĐỀ TÀI WEBSITE BẤT ĐỘNG SẢN (BABYLON RESIDENCE WEBSITE)..........11
1.

MỤC ĐÍCH :.....................................................................................................................................................11

2.

SƠ ĐỒ PHÂN CẤP WEBSITE :......................................................................................................................11

3.

THÀNH PHẦN :...............................................................................................................................................12

THANH MENU – BAR DROPDOWN & SLIDESHOW DOTS SHOW TEXT...................................................13

4.

a.

GIAO DIỆN :.................................................................................................................................................13

b.

XỬ LÝ SỰ KIỆN (MENU & SLIDESHOW TEXT) :................................................................................13



THANH MENU – BAR DROPDOWN:....................................................................................................13



SLIDESHOW SHOW TEXT :...................................................................................................................14
CHỨC NĂNG VÀ NHIỆM VỤ CỦA ĐỀ TÀI................................................................................................15

[TAG] - TRANG CHỦ:.............................................................................................................................................15
2


a.GIAO DIỆN :......................................................................................................................................................15
b.XỬ LÝ SỰ KIỆN (TRANG CHỦ):...................................................................................................................17
[TAG] - THƯ VIỆN ẢNH:........................................................................................................................................22
a.GIAO DIỆN:.......................................................................................................................................................22
b. XỬ LÝ SỰ KIỆN (THƯ VIỆN ẢNH):............................................................................................................23
[TAG] - MẶT BẰNG CĂN HỘ:...............................................................................................................................24
a.GIAO DIỆN :......................................................................................................................................................24
[TAG] - TIN TỨC:.....................................................................................................................................................27
a. GIAO DIỆN :.....................................................................................................................................................27
b.

XỬ LÝ SỰ KIỆN (TIN TỨC) :....................................................................................................................29

[TAG] - GIỚI THIỆU:...............................................................................................................................................31
a. GIAO DIỆN :.....................................................................................................................................................31
[TAG] - LIÊN HỆ:.....................................................................................................................................................33
a. GIAO DIỆN :.....................................................................................................................................................33

b.XỬ LÝ SỰ KIỆN (LIÊN HỆ):..........................................................................................................................35
CHƯƠNG III: TẦM NHÌN PHÁT TRIỂN..................................................................................................................37


Mục tiêu tương lai:............................................................................................................................................37



Kết luận:.............................................................................................................................................................37

CODE WEBSITE BẤT ĐỘNG SẢN...........................................................................................................................37
[TAG] – TRANG CHỦ (HomePage) :......................................................................................................................37
1.HTML.................................................................................................................................................................37
2.CSS......................................................................................................................................................................45
3.JAVASCRIPT......................................................................................................................................................58
[TAG] – THƯ VIỆN ẢNH (PhotoLibrary) :............................................................................................................59
1.HTML.................................................................................................................................................................59
2.CSS......................................................................................................................................................................63
3.JAVASCRIPT......................................................................................................................................................72
[TAG] – MẶT BẰNG CĂN HỘ (Apartment-Premises) :........................................................................................73
1.HTML.................................................................................................................................................................73
2.CSS......................................................................................................................................................................77
3.JAVASCRIPT......................................................................................................................................................86
[TAG] – TIN TỨC (News) :......................................................................................................................................88
1.HTML.................................................................................................................................................................88
3


2.CSS......................................................................................................................................................................96
3.JAVASCRIPT....................................................................................................................................................111

[TAG] – GIỚI THIỆU (Introduce) :........................................................................................................................114
1.HTML...............................................................................................................................................................114
2.CSS...................................................................................................................................................................116
3.JAVASCRIPT....................................................................................................................................................122
[TAG] – LIÊN HỆ (Contact) :.................................................................................................................................122
1.HTML...............................................................................................................................................................122
2.CSS...................................................................................................................................................................127
3.JAVASCRIPT....................................................................................................................................................143
[PHÒNG KHÁCH – THƯ VIỆN ẢNH] – LivingRoom............................................................................................144
1.HTML...................................................................................................................................................................144
2.CSS........................................................................................................................................................................148
3.JAVASCRIPT........................................................................................................................................................155
[PHÒNG BẾP – THƯ VIỆN ẢNH] – Kitchen...........................................................................................................157
1.HTML...................................................................................................................................................................157
2.CSS........................................................................................................................................................................160
3.JAVASCRIPT........................................................................................................................................................168
[PHÒNG NGỦ – THƯ VIỆN ẢNH] – Bedroom.......................................................................................................169
1.HTML...................................................................................................................................................................169
2.CSS........................................................................................................................................................................173
3.JAVASCRIPT........................................................................................................................................................180
[PHÒNG TẮM – THƯ VIỆN ẢNH] – Bathroom......................................................................................................182
1.HTML...................................................................................................................................................................182
2.CSS........................................................................................................................................................................185
3.JAVASCRIPT........................................................................................................................................................193
[PHÒNG SÁCH – THƯ VIỆN ẢNH] – ReadingRoom.............................................................................................194
1.HTML...................................................................................................................................................................194
2.CSS........................................................................................................................................................................198
3.JAVASCRIPT........................................................................................................................................................206
[GARAGE – THƯ VIỆN ẢNH] – Garage.................................................................................................................207
1.HTML...................................................................................................................................................................207

2.CSS........................................................................................................................................................................210
4


3.JAVASCRIPT........................................................................................................................................................218
[PHỊNG NGHỈ – THƯ VIỆN ẢNH] – Restroom.....................................................................................................219
1.HTML...................................................................................................................................................................219
2.CSS........................................................................................................................................................................223
3.JAVASCRIPT........................................................................................................................................................230
[PHỊNG GIẢI TRÍ – THƯ VIỆN ẢNH] – Entertainment-Room............................................................................232
1.HTML...................................................................................................................................................................232
2.CSS........................................................................................................................................................................235
3.JAVASCRIPT........................................................................................................................................................243
[PHÒNG ĂN – THƯ VIỆN ẢNH] – Dining-Room..................................................................................................244
1.HTML...................................................................................................................................................................244
2.CSS........................................................................................................................................................................247
3.JAVASCRIPT........................................................................................................................................................255
TÀI LIỆU THAM KHẢO...........................................................................................................................................257

5


LỜI NÓI ĐẦU
Trong bối cảnh kinh tế mở cửa, hiện nay hoạt động giao dịch mua bán nhà đất tại Việt
Nam đang có xu hướng phát triển mạnh nên việc xây dựng một sàn giao dịch thông tin bất
động sản trực tuyến là rất thiết thực đối với thị trường bất động sản, Sàn giao dịch thông
tin bất động sản trực tuyến có thể trở thành nơi giao lưu hiệu quả mà ở đó sàn giao dịch
cung cấp những thơng tin chính xác về hướng phát triển những dự án mới ,giá cả cũng như
diện tích mỗi khách hàng muốn giao dịch .Sàn giao dịch có thể quảng bá giúp cho người
bán và người mua dễ dàng tiếp cận thông tin cũng như thỏa mãn nhu cầu giao dịch trong

thời gian sớm nhất .Đồng thời, khách hàng cũng có thể phản hồi về chất lượng dịch vụ,
qua đó giúp cho những khách hàng khác có được thơng tin tham khảo để ra quyết định lựa
chọn cho riêng mình.
Vì thế mà nhóm em chọn đề tài “ XÂY DỰNG WEBSITE BẤT ĐỘNG SẢN ” hỵ vọng
sẽ đem lại một trong những sự lựa chọn tốt nhất để xây dựng một sàn giao dịch thông tin
bất động sản trực tuyến phong phú về thông tin, thuận tiện cho người sử dụng và đem lại
những giá trị thiết thực cho cả đơn vị chủ quản và các khách hàng. Với sự hướng dẫn tận
tình của cơ “Nguyễn Lan Hương” nhóm em đã hồn thành cuốn báo cáo đồ án tốt nghiệp
này.
Trong thời gian có hạn và kinh nghiệm cịn khiêm tốn tuy đã cố gắng hết sức tìm hiểu,
phân tích thiết kế và cài đặt hệ thống nhưng vẫn không tránh khỏi nhiều bỡ ngỡ trước đề
tài lớn và chắc rằng không tránh khỏi những thiếu sót. Em rất mong nhận được sự chỉ bảo
và đóng góp ý kiến để chương trình của nhóm em có thể hồn thiện hơn và có thêm những
hướng phát triển mới.
Cuối cùng, nhóm em xin chân thành cảm ơn các thầy cô Viện CNTT - Điện - Điện Tử
Trường Đại Học Bà Rịa Vũng Tàu đã tận tình giảng dạy chúng em trong suốt thời gian
chúng em học tập tại khoa. Nhóm em xin chân thành cảm ơn cơ “Nguyễn Lan Hương”
đã hết lịng hướng dẫn nhóm em trong suốt quá trình nghiên cứu và thực hiện đồ án tốt
nghiệp này.
Xin trân trọng cảm ơn!
Tp.Vũng Tàu, ngày 06 tháng 08 năm 2020
6


CHƯƠNG I : TỔNG QUAN VỀ HTML, CSS &
JAVASCRIPT
1.HTML
 HTML Là gì?
 HTML ( Hyper Text Markup Language) ngơn ngữ đánh dấu siêu văn bản
 HTML không phải ngôn ngữ lập trình.

 HTML là một ngơn ngữ đánh dấu.
 Ngơn ngữ đánh dấu chứa một hợp các thẻ được gọi là thẻ đánh dấu.
 Để định dạng các web người ta dùng các thẻ đánh dấu.
 Các thành phần HTML là khối cơ bản để xây dựng các trang web.
 Để thiết kế các trang web HTML khơng khó, bạn chỉ cần các trình soạn thảo:
 Notepad
 Wordpad
 Dreamweaver
 Các trang web
 Tại sao web thì rất hữu ích trên internet? Điều này có thể giải thích:
 Cách đơn giản nhất để truyền thơng tin trên Internet
 Một hình thức để quảng bá doanh nghiệp của bạn
 Bạn có thể nói với thế giới rằng bạn có điều gì đó để nói trên một trang cá nhân.
 Một số khái niệm cần nhớ trong lúc học HTML
 Tag (thẻ) - được sử dụng để xác định vùng của tài liệu HTML, trình duyệt sẽ đọc
sau. Cú pháp: <tag>Nội dung </tag>
 Element (thành phần) - là một thẻ hồn chỉnh, có thẻ mở <tag> và thẻ đóng tag>.
 Attribute (thuộc tính) - được sử dụng để thay đổi giá trị của một phần tử trong
HTML. Thường thì một phần tử có một số thuộc tính.

7


2.CSS
 CSS là gì – Tổng quan về CSS
 Cascading Style Sheets, thường được viết tắt là CSS, là một ngôn ngữ định kiểu
được sử dụng để định dạng – trình bày một tài liệu HTML hoặc XML (bao gồm
các ngôn ngữ XML khác nhau như SVG hoặc XHTML). CSS mô tả quy cách
các phần tử được cấu trúc phải được hiển thị trên màn hình, trên giấy, trong lời

nói hoặc trên các phương tiện khác.
 CSS là một trong những ngơn ngữ cốt lõi của web mở và có đặc tả W3C tiêu
chuẩn hóa. Được phát triển theo cấp độ, CSS1 hiện đã lỗi thời, CSS2.1 là một đề
xuất và CSS3, hiện được chia thành các mô-đun nhỏ hơn, đang tiến triển trên
bản theo dõi chuẩn. Bản thảo đầu tiên của các mơ-đun CSS4 đang được viết.
 Các tính năng mặc định của trang web
 Các trang web được Đại Phố thiết kế ln mặc định các tính năng sau:
 Mã nguồn được tối ưu với các công cụ tìm kiếm.
 Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy
tính bảng, máy tính và laptop. Sử dụng cơng nghệ HTML5, CSS3 Mobile
Responsive.
 Dễ dàng thay đổi theo phong cách riêng của bạn.
 Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
 Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người khơng chun
về IT.

 Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thơng tin trên website
8


 Thông tin sản phẩm và dịch vụ của công ty
 Thông tin dự án, đối tác Giới thiệu – Liên hệ
 Thông tin giới thiệu, thông tin liên hệ
 Tin tức
 Hình ảnh trên website, sửa các tag alt, descriotion, caption
 Hình ảnh và caption trên Slideshow
 Khi đặt chung trong trang tài liệu HTML
 Nó phải được đặt bên trong cặp thẻ <style>...</style>

 Khi viết riêng biệt với tài liệu HTML

Khai báo sử dụng file CSS “tên style.css” nằm cùng chung thư mục với file HTML(Nó
phải được lưu với phần mở rộng là .css và được khai báo trong phần header của tài liệu
HTML bằng cú pháp) :

HOẶC :
9


3.JAVASCRIPT
 JavaScript là gì ?
JavaScript là ngơn ngữ lập trình mang đến sự sinh động của website. Nó khác với HTML
(thường chuyên cho nội dung) và CSS (thường chuyên dùng cho phong cách), và khác hẵn
với PHP (chạy trên server chứ khơng chạy dưới máy client).
 Bạn cần biết gì:
 JavaScript là ngơn ngữ dễ học;
 Nó được phát triển bởi Netscape, và đang được dùng trên 92% webstie;
 JS có thể được gắn vào một element của trang web hoặc sự kiện của trang web
như cú click chuột;
 Hoạt động trên đa trình duyệt và đa thiết bị;
 Nhanh và nhẹ hơn các ngơn ngữ lập trình khác;
 Có thể ít an tồn hơn vì độ phổ biến của nó;
 Bạn có thể thêm JavaScript trực tiếp vào HTML hoặc bạn có thể lưu nó trên files
riêng biệt và gọi lên khi cần.
 Làm thế nào để thêm JavaScript trên website của bạn?
Để thêm chuỗi code JavaScript code vào trang web, bạn sẽ cần gắn tag <script>. Ví dụ
như sau:

10

CHƯƠNG II: PHÂN TÍCH ĐỀ TÀI WEBSITE BẤT
ĐỘNG SẢN (BABYLON RESIDENCE WEBSITE)
1. MỤC ĐÍCH :
 Trang web này được phát triển để phục vụ việc giới thiệu và buôn bán căn hộ trực
tuyến,.. Giúp những người có nhu cầu cao nhưng vì tính chất cơng việc bận rộn nên có
thể lên trực tiếp trang chủ web bất động sản để cập nhật thơng tin tình hình giá đất, căn
hộ được rao bán, … cũng như liên hệ được với chủ đầu tư dự án một cách nhanh
chóng và thuận tiện nhất.
2. SƠ ĐỒ PHÂN CẤP WEBSITE :
HTML
CSS

JAVASCRIPT

3. THÀNH PHẦN :
 Gồm 3 phần chính: Tiêu đề (Header), Nội dung (Content), Chân trang (Footer)
 Trang web có những thành phần cụ thể như sau:
 Trang chủ
 Thư viện ảnh (phòng khách, phòng bếp, phòng ngủ, phòng tắm, phòng đọc sách,
garage)
11


 Mặt bằng căn hộ
 Tin tức
 Giới thiệu
 Liên hệ
Như hình minh hoạ dưới :

THANH MENU – BAR DROPDOWN & SLIDESHOW DOTS SHOW TEXT

a. GIAO DIỆN :

12


b. XỬ LÝ SỰ KIỆN (MENU & SLIDESHOW TEXT) :
 THANH MENU – BAR DROPDOWN:
Ban đầu như bạn thấy, “MENU – BAR DROPDOWN” nó sẽ có màu chữ là màu trắng và
khơng có nền background-color. Nhưng khi chúng ta cuộn trang xuống thì nó sẽ có nền là
màu đen và chữ sẽ đổi thành màu vàng. Khi hover vào mỗi thẻ thì nó sẽ có nền màu cam.
Như hình dưới :

 SLIDESHOW SHOW TEXT :
- Khi chúng ta bấm vào nút tiến (Next) hoặc các “DOTS” ở dưới slide thì hình ảnh nó
sẽ tự động thay đổi và text sẽ tự động thay đổi theo.
- Trước khi nhấn nút :

13


- Sau khi nhấn nút :

14


4. CHỨC NĂNG VÀ NHIỆM VỤ CỦA ĐỀ TÀI
[TAG] - TRANG CHỦ:
a.GIAO DIỆN :
- Gồm 5 phần: Hiệu ứng chuyển trang, thông tin chi tiết, cơ sở hạ tầng, thư viện ảnh và
liên hệ.

- Khi vào trang web bạn sẽ nhìn thấy TRANG CHỦ như hình dưới:

15


b.XỬ LÝ SỰ KIỆN (TRANG CHỦ):
- Khi đưa chuột (hover) vào TRANG CHỦ sẽ hiện thị font chữ sẽ đổi thành màu vàng và
có đường gạch chân ở dưới (underline-form-center).
Xem hình dưới:

16


- Khi đưa chuột (hover) vào phần “THÔNG TIN CHI TIẾT” và “CƠ SỞ HẠ TẦNG”
sẽ làm nổi bật chữ vàng trên nền đen.
Xem hình dưới:

17


-Tương tự, khi đưa chuột (hover) vào các “Icons” phần “THÔNG TIN CHI TIẾT” sẽ
làm nổi bật chữ vàng trên nền đen. Và nó sẽ hiện lên phần nội dung trước đó đã bị ẩn đi ở
phía dưới. Xem hình dưới:

- Kéo xuống phần “THƯ VIỆN ẢNH”, ta thấy có 9 hình ảnh. Khi chúng ta (hover)
vào chúng thì từng hình ảnh nó sẽ có 1 cửa sổ xổ từ trên xuống, nó hiện ra tên nội
dung cỉa những hình ảnh đó và có nút bấm chuyển trang như hình dưới (Cụ thể chi
tiết hơn thì mình sẽ nói ở [TAG] “THƯ VIỆN ẢNH”),

18

- Phần “LIÊN HỆ” lúc chưa hover vào thì màu của nó là nền cam và chữ trắng. Và
chú ý hơn phần phía bên góc tay trái có 5 thanh cơng cụ để có thể liên hệ tiện hơn.
Như hình minh hoạ dưới :

- Khi hover vào (button) “LIÊN HỆ” thì nó màu nền từ cam sang đen và chữ màu
vàng. Nếu ta nhấn vào (button) “LIÊN HỆ” thì nó sẽ đưa chúng ta tới TAG(LIÊN
HỆ).

- Khi ta hover vào từng đối tượng bên góc phía bên phải thì nó sẽ hiện ra như hình
dưới, và bạn có thể bấm vào nó thì nó sẽ dẫn tới trang tương ứng.
19


Như hình minh hoạ dưới :

- Và những đối tượng khác trên thanh công cụ cũng vậy.

20


[TAG] - THƯ VIỆN ẢNH:
a.GIAO DIỆN:
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), thư viện ảnh và liên hệ.
- Khi vào “THƯ VIỆN ẢNH” sẽ gồm 3 phần như sau:

21

22


b. XỬ LÝ SỰ KIỆN (THƯ VIỆN ẢNH):
- Khi đưa chuột (hover) vào từng ảnh của THƯ VIỆN ẢNH sẽ sổ xuống 6 thanh menu
con như hình dưới đây:

- Sự kiện nhấp chuột (click) vào 1 menu con bất kỳ sẽ được liên kết qua thông tin chi tiết
được mô tả trong thư viện ảnh.
Xem hình dưới đây:
Ví dụ : Ta click chuột vào “PHỊNG KHÁCH” thì điều gì sẽ xảy ra.

KẾT QUẢ là mở ra 1 giao diện riêng mang tên “PHỊNG KHÁCH”, Như hình minh hoạ
dưới đây :

23


- Hoặc đưa chuột (hover) vào trực tiếp hình ảnh sẽ thấy sổ xuống dòng chữ liên kết qua
trang.

- Tương tự, các hình ảnh cũng vậy.
[TAG] - MẶT BẰNG CĂN HỘ:
a.GIAO DIỆN :
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), hồ sơ mặt bằng và liên hệ.
- Khi vào MẶT BẰNG CĂN HỘ sẽ hiển thị như sau:

24