Tài liệu Xây dựng website bất động sản

.PDF

247

thucaothi349968 Báo vi phạm

Tải xuống 57

Mô tả:

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 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 .................................................................................................................................................................... 44 3. JAVASCRIPT.................................................................................................................................................... 57 [TAG] – THƯ VIỆN ẢNH (PhotoLibrary) .............................................................................................................. 58 1. HTML ................................................................................................................................................................ 58 2. CSS .................................................................................................................................................................... 62 3. JAVASCRIPT.................................................................................................................................................... 70 [TAG] – MẶT BẰNG CĂN HỘ (Apartment-Premises) .......................................................................................... 71 1. HTML ................................................................................................................................................................ 71 2. CSS .................................................................................................................................................................... 75 3. JAVASCRIPT.................................................................................................................................................... 84 [TAG] – TIN TỨC (News) ....................................................................................................................................... 86 1. HTML ................................................................................................................................................................ 86 2. CSS .................................................................................................................................................................... 93 3 3. JAVASCRIPT.................................................................................................................................................. 108 [TAG] – GIỚI THIỆU (Introduce).......................................................................................................................... 111 1.HTML .............................................................................................................................................................. 111 2.CSS .................................................................................................................................................................. 112 3.JAVASCRIPT .................................................................................................................................................. 117 [TAG] – LIÊN HỆ (Contact) .................................................................................................................................. 118 1.HTML .............................................................................................................................................................. 118 2.CSS .................................................................................................................................................................. 123 3.JAVASCRIPT .................................................................................................................................................. 138 [PHÒNG KHÁCH – THƯ VIỆN ẢNH] – LivingRoom ............................................................................................ 139 1.HTML .................................................................................................................................................................. 139 2.CSS ...................................................................................................................................................................... 142 3.JAVASCRIPT ...................................................................................................................................................... 149 [PHÒNG BẾP – THƯ VIỆN ẢNH] – Kitchen ........................................................................................................... 151 1.HTML .................................................................................................................................................................. 151 2.CSS ...................................................................................................................................................................... 154 3.JAVASCRIPT ...................................................................................................................................................... 161 [PHÒNG NGỦ – THƯ VIỆN ẢNH] – Bedroom ....................................................................................................... 163 1.HTML .................................................................................................................................................................. 163 2.CSS ...................................................................................................................................................................... 166 3.JAVASCRIPT ...................................................................................................................................................... 173 [PHÒNG TẮM – THƯ VIỆN ẢNH] – Bathroom ...................................................................................................... 175 1.HTML .................................................................................................................................................................. 175 2.CSS ...................................................................................................................................................................... 178 3.JAVASCRIPT ...................................................................................................................................................... 186 [PHÒNG SÁCH – THƯ VIỆN ẢNH] – ReadingRoom ............................................................................................. 187 1.HTML .................................................................................................................................................................. 187 2.CSS ...................................................................................................................................................................... 191 3.JAVASCRIPT ...................................................................................................................................................... 198 [GARAGE – THƯ VIỆN ẢNH] – Garage ................................................................................................................. 199 1.HTML .................................................................................................................................................................. 199 2.CSS ...................................................................................................................................................................... 202 3.JAVASCRIPT ...................................................................................................................................................... 209 [PHÒNG NGHỈ – THƯ VIỆN ẢNH] – Restroom ..................................................................................................... 211 4 1.HTML .................................................................................................................................................................. 211 2.CSS ...................................................................................................................................................................... 214 3.JAVASCRIPT ...................................................................................................................................................... 221 [PHÒNG GIẢI TRÍ – THƯ VIỆN ẢNH] – Entertainment-Room ............................................................................. 223 1.HTML .................................................................................................................................................................. 223 2.CSS ...................................................................................................................................................................... 226 3.JAVASCRIPT ...................................................................................................................................................... 233 [PHÒNG ĂN – THƯ VIỆN ẢNH] – Dining-Room ................................................................................................... 234 1.HTML .................................................................................................................................................................. 234 2.CSS ...................................................................................................................................................................... 238 3.JAVASCRIPT ...................................................................................................................................................... 245 TÀI LIỆU THAM KHẢO ........................................................................................................................................... 246 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 đã hoà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ể hoà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: Nội dung • Element (thành phần) - là một thẻ hoàn chỉnh, có thẻ mở và thẻ đóng . • 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ế luôn 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 chuyên về IT. 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 • 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ẻ ➢ 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) : 9 HOẶC : 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 toà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