1. Trang chủ
  2. » Giáo Dục - Đào Tạo

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

246 28 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 246
Dung lượng 17,23 MB

Nội dung

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 ĐỀ TÀI : XÂY DỰNG WEBSITE BẤT ĐỘNG SẢN Nhóm sinh viên thực : Cáp Hữu Nhân Quốc Vũ Đức Anh ĐÁNH GIÁ CỦA GIẢNG VIÊN … MỤC LỤC MỤC LỤC ĐÁNH GIÁ CỦA GIẢNG VIÊN LỜI NÓI ĐẦU .6 CHƯƠNG I : TỔNG QUAN VỀ HTML, CSS & JAVASCRIPT 1.HTML .7  HTML Là gì?  Để thiết kế trang web HTML khơng khó, bạn cần trình soạn thảo:  Các trang web  Một số khái niệm cần nhớ lúc học HTML .7 2.CSS  CSS – Tổng quan CSS  Các tính mặc định trang web  Các trang web Đại Phố thiết kế mặc định tính sau: .8  Quản lí nội dung: dễ dàng thêm, xóa, sửa thông tin website .9  Khi đặt chung trang tài liệu HTML  Khi viết riêng biệt với tài liệu HTML .9 3.JAVASCRIPT 10  JavaScript ? .10  Bạn cần biết gì: 10  Làm để thêm JavaScript website bạn? 10 CHƯƠNG II: PHÂN TÍCH ĐỀ TÀI WEBSITE BẤT ĐỘNG SẢN (BABYLON RESIDENCE WEBSITE) 11 MỤC ĐÍCH : 11 SƠ ĐỒ PHÂN CẤP WEBSITE : 11 THÀNH PHẦN : .12 THANH MENU – BAR DROPDOWN & SLIDESHOW DOTS SHOW TEXT 13 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 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 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 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 LỜI NÓI ĐẦU Trong bối cảnh kinh tế mở cửa, hoạt động giao dịch mua bán nhà đất Việt Nam có xu hướng phát triển mạnh nên việc xây dựng sàn giao dịch thông tin bất động sản trực tuyến thiết thực 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 trở thành nơi giao lưu hiệu mà sàn giao dịch cung cấp thơng tin xác hướng phát triển dự án ,giá diện tích khách hàng muốn giao dịch Sàn giao dịch quảng bá giúp cho người bán người mua dễ dàng tiếp cận thông tin thỏa mãn nhu cầu giao dịch thời gian sớm Đồng thời, khách hàng phản hồi chất lượng dịch vụ, qua giúp cho khách hàng khác có thơng tin tham khảo để định lựa chọn cho riêng Vì mà nhóm em chọn đề tài “ XÂY DỰNG WEBSITE BẤT ĐỘNG SẢN ” hỵ vọng đem lại lựa chọn tốt để xây dựng sàn giao dịch thông tin bất động sản trực tuyến phong phú thông tin, thuận tiện cho người sử dụng đem lại giá trị thiết thực cho đơn vị chủ quản khách hàng Với hướng dẫn tận tình “Nguyễn Lan Hương” nhóm em hồn thành báo cáo đồ án tốt nghiệp Trong thời gian có hạn kinh nghiệm khiêm tốn cố gắng tìm hiểu, phân tích thiết kế cài đặt hệ thống không tránh khỏi nhiều bỡ ngỡ trước đề tài lớn không tránh khỏi thiếu sót Em mong nhận bảo đóng góp ý kiến để chương trình nhóm em hồn thiện có thêm hướng phát triển Cuối cùng, nhóm em xin chân thành cảm ơn 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 suốt thời gian chúng em học tập 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 suốt q trình nghiên cứu thực đồ án tốt nghiệp Xin trân trọng cảm ơn! Tp.Vũng Tàu, ngày 06 tháng 08 năm 2020 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  HTML khơng phải ngơn ngữ lập trình  HTML ngôn ngữ đánh dấu  Ngôn ngữ đánh dấu chứa hợp thẻ gọi thẻ đánh dấu  Để định dạng web người ta dùng thẻ đánh dấu  Các thành phần HTML khối để xây dựng trang web  Để thiết kế trang web HTML khơng khó, bạn cần trình soạn thảo:  Notepad  Wordpad  Dreamweaver  Các trang web  Tại web hữu ích internet? Điều giải thích:  Cách đơn giản để truyền thơng tin Internet  Một hình thức để quảng bá doanh nghiệp bạn  Bạn nói với giới bạn có điều để nói trang cá nhân  Một số khái niệm cần nhớ lúc học HTML  Tag (thẻ) - sử dụng để xác định vùng tài liệu HTML, trình duyệt đọc sau Cú pháp: Nội dung  Element (thành phần) - thẻ hồn chỉnh, có thẻ mở thẻ đóng  Attribute (thuộc tính) - sử dụng để thay đổi giá trị phần tử HTML Thường phần tử có số thuộc tính 2.CSS  CSS – Tổng quan CSS  Cascading Style Sheets, thường viết tắt CSS, ngôn ngữ định kiểu sử dụng để định dạng – trình bày tài liệu HTML XML (bao gồm ngôn ngữ XML khác SVG XHTML) CSS mô tả quy cách phần tử cấu trúc phải hiển thị hình, giấy, lời nói phương tiện khác  CSS ngơn ngữ cốt lõi web mở có đặc tả W3C tiêu chuẩn hóa Được phát triển theo cấp độ, CSS1 lỗi thời, CSS2.1 đề xuất CSS3, chia thành mô-đun nhỏ hơn, tiến triển theo dõi chuẩn Bản thảo mô-đun CSS4 viết  Các tính mặc định trang web  Các trang web Đại Phố thiết kế mặc định tính sau:  Mã nguồn tối ưu với cơng cụ tìm kiếm  Trang web hỗ trợ thiết bị di động, tương thích với thiết bị: điện thoại, máy tính bảng, máy tính laptop Sử dụng công nghệ HTML5, CSS3 Mobile Responsive  Dễ dàng thay đổi theo phong cách riêng bạn  Dễ dàng thêm bớt số lượng trang, chỉnh sửa nội hiển thị website tùy ý  Phần quản trị rõ ràng, trực quan, dễ sử dụng với người không chuyên IT  Quản lí nội dung: dễ dàng thêm, xóa, sửa thông tin website  Thông tin sản phẩm dịch vụ 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 website, sửa tag alt, descriotion, caption  Hình ảnh caption Slideshow  Khi đặt chung trang tài liệu HTML  Nó phải đặt bên 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 chung thư mục với file HTML(Nó phải lưu với phần mở rộng css khai báo phần header tài liệu HTML cú pháp) : HOẶC : margin-left: 40%; } instruction > p { display: flex; margin: 50px; } flex-container-1 { display: flex; justify-content: left; background-color: gainsboro; } flex-container-1 > div { margin: 10px; padding: 20px; } flex-container-1 > content-1 { padding: 10px; } /* -CONTACT */ title-contact { display: block; text-align: center; padding: 80px; background-color: gainsboro; } title-contact a { display: inline-block; text-decoration: none; padding: 15px 32px; background-color: #ffA500; color: #fff; cursor: pointer; transition: 0.8s; } title-contact a:hover { box-shadow: 12px 16px rgba(0,0,0,0.24),0 17px 50px rgba(0,0,0,0.19); background-color: black; color: #FFFF04; } /* -FOOTER */ footer { 231 color: #0E0E0D; background-color: #f1f1f1; text-align: center; padding: 20px; } footer:hover { background-color: #0E0E0D; color: #FFFF04; transition: 0.8s; } 3.JAVASCRIPT /* -MENU CỐ ĐỊNH - SCROLL */ window.addEventListener("scroll",function(){ window.addEventListener("scroll",function(){ var header = document.querySelector('header'); //class header chuyển đổi thành tên[class = "sticky"] cuộn header.classList.toggle("sticky",window.scrollY > 0) }) }) /* -SECTION - SLIDESHOW DOTS */ var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } 232 for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } /* -CHANGE- IMAGE */ // Slide: changeImage() let i=0; let images = [" /Image-Babylon/phong-giai-tri-thiet-ke-noi-that-1.jpg", " /Image-Babylon/phong-giai-tri-thiet-ke-noi-that-2.jpg", " /Image-Babylon/phong-giai-tri-thiet-ke-noi-that-3.jpg"] function changeImage() { document.getElementById("slide1").src = images[i]; if (i < images.length - 1) { i++; } else (i = 0) setTimeout("changeImage()", 4000); } [PHÒNG ĂN – THƯ VIỆN ẢNH] – Dining-Room 1.HTML Phòng Nghỉ - Bất Động Sản BABYLON 233
  • TRANG CHỦ
  • THƯ VIỆN ẢNH
    • PHÒNG KHÁCH
    • PHÒNG BẾP
    • PHÒNG NGỦ
    • PHÒNG TẮM
    • PHÒNG SÁCH
    • GARAGE
  • MẶT BẰNG CĂN HỘ
  • TIN TỨC
  • GIỚI THIỆU
  • LIÊN HỆ
PHÒNG ĂN PHÒNG ĂN PHÒNG ĂN 234 ❮ ❯ Trải nghiệm Babylon Residence PHÒNG ĂN GIỚI THIỆU CĂN HỘ

Căn hộ GAPURA VILLA với khoảng khơng gian lịch khép kín cho hai tòa cao ốc, cao ốc gồm 45 hộ, mội tầng có hộ, hộ có diện tích từ 105 m2 tới 650 m2 thiết kế theo tiêu chuẩn quốc tế đại với đầy đủ tiện nghi: máy giặt, tủ lạnh, lò vi sóng, máy hút khói, bếp ga cao cấp hệ thống ánh sáng sang trọng phòng khách, phịn g ngủ, phịng làm việc tạo nên hồn hảo hộ Bên cạnh đó, Qúy khách tận hưởng dịch vụ thư giãn: phòng xơng hơi, xơ ng khơ, phịng tập thể dục đầy đủ dụng cụ, công viên, khu vui chơi trẻ em Dịch vụ ngân hàng, s hopping đầy đủ đáp ứng nhu cầu cần thiết Qúy khách Tất giúp Qúy khách cảm th thoải mái thời gian lưu trú hộ GAPURA VILLA

MƠ TẢ CĂN HỘ:

235 Với gia đình đại, bếp truyền thống khó đáp ứng nh u cầu ngày cao đa dạng sống Ý tưởng đảo bếp thiết kế thực hóa nhằm đáp ứng nhiều yêu cầu Đảo bếp cho phép bà nội trợ làm việc hướng, tạo thêm không gian làm việc, trang trí thêm cho khơng gian nhà bếp Không nơ i "trung chuyển" thức ăn hay đồ đạc, đảo bếp cịn nơi sơ chế, ăn nhẹ, quầy bar

DIỆN TÍCH

30 x 50

THƠNG TIN CHI TIẾT
  • Gạch lát sàn gỗ tự nhiên.
  • Có cửa kính phịng khách.
  • Thiết bị tiện nghi chất lượng.
LIÊN HỆ VỚI CHÚNG TƠI

Nếu có câu hỏi thắc mắc hay muốn tìm hiểu thêm chúng tơi Xin liên hệ với để nhận câu trả lời xác nhanh nhất!

LIÊN HỆ Copyright © 2020 Babylon Residence Designed by Quoc Anh 2.CSS /* -RESET CSS */ *{ 236 margin: 0; padding: 0; } body { font-family: 'Times New Roman', Times, serif; font-size: 20px; } logo img { float: left; padding-left: 50px; padding-top: 15px; } /* -HEADER - MENU */ menu { /* position: absolute; */ width: 100%; box-sizing: border-box; padding: 100px; /*logo*/ /*Scroll*/ position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; z-index: 100000; } /*LOGO - LEFT*/ menu img { position: relative; float: left; width: 200px; /*logo*/ padding-top: 15px; 237 padding-bottom: 20px; } /*MENU - RIGHT*/ nav { position: relative; /**/ float: right; } /*MENU - CHA*/ nav ul { margin: 0; padding: 0; display: flex; /**/ } nav ul li { list-style: none; } nav ul li a { display: block; color: #fff; font-weight: bold; font-size: 20px; padding: 30px 20px; /*Menu*/ text-transform: uppercase; /**/ text-decoration: none; /*Underline From Center*/ background-image: linear-gradient(rgb(240, 255, 30), rgb(240, 255, 30)); background-size: 5px, auto; background-repeat: no-repeat; background-position: center bottom; transition: all 2s ease-out; } /*MENU - CON*/ nav ul li ul { display: block; background: rgba(0,0,0,.5); min-width: 300px; 238 position: absolute; margin-top: 1px; box-shadow: 2px 5px rgba(0,0,0,.5); /*Biến đổi*/ transition: 5s; transform: translateY(40px); /*Ẩn menu con*/ opacity: 0; visibility: hidden; } nav ul li ul li a { padding: 20px; } /*Hover - Menu cha*/ nav ul li:hover ul { /*Hiện menu con*/ opacity: 1; visibility: visible; transform: translateY(0px); } nav ul li a:hover { color: #FFFF04; transition: 5s; /*Underline From Center : Hover*/ /* background-size: calc(100% - 2em) 5px, auto; */ background-size: 100% 5px, auto; } /*Scroll Menu*/ header.sticky menu { padding: 40px 20px; background: #000; } header.sticky logo, header.sticky ul li a { color: #FFFF04; } 239 header.sticky ul li a:hover { background: #ffA500; } /* -SECTION - SLIDESHOW DOTS */ /* Slideshow container */ slideshow-container { /* max-width:100%; */ position: relative; margin: auto; } /* Hide the images by default */ mySlides { display: none; } mySlides img { width: 100%; height: 500px; position: relative; } /* Next & previous buttons */ prev, next { cursor: pointer; position: absolute; top: 40%; width: auto; margin-top: 22px; padding: 16px; color: #f1f1f1; font-weight: bold; font-size: 35px; transition: 0.6s ease; border-radius: 3px 3px 0; } /* Position the "next button" to the right */ next { right: 0; border-radius: 3px 0 3px; } /* On hover, add a black background color with a little bit see-through */ prev:hover, next:hover { background-color: rgba(0,0,0,0.8); 240 } /* Caption text */ text-fade { color: #fff; background: black; width: 30%; height: 100px; line-height: 100px; font-size: 45px; font-weight: bold; position: absolute; top: 40%; left: 35%; bottom: 50%; text-align: center; position: absolute; } /* The dots/bullets/indicators */ dot { cursor:pointer; height: 15px; width: 15px; margin: 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } active, dot:hover { background-color: #717171; } /* Fading animation */ fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: 4} to {opacity: 1} } @keyframes fade { 241 from {opacity: 4} to {opacity: 1} } /* -SECTION - */ /* ========================================= Title =========== =============================== */ #slide1 { background-image: url(" /Image-Babylon/phongan-babylon2.jpg"); background-position: center; background-size: cover; width: 700px; height: 500px; } title-kichen { color: #0E0E0D; height: 200px; } title-kitchen > h1,h4 { text-align: center; padding-top: 20px; } title-kitchen:hover { background-color: #0E0E0D; color: #FFFF04; transition: 0.8s; } #title-2 { width: 300px; height: 80px; margin-left: 40%; } instruction > p { display: flex; margin: 50px; } flex-container-2 { display: flex; justify-content: left; background-color: gainsboro; } flex-container-2 > div { 242 margin: 10px; padding: 20px; } flex-container-2 > content-1 { padding: 10px; } /* -CONTACT */ title-contact { display: block; text-align: center; padding: 80px; background-color: gainsboro; } title-contact a { display: inline-block; text-decoration: none; padding: 15px 32px; background-color: #ffA500; color: #fff; cursor: pointer; transition: 0.8s; } title-contact a:hover { box-shadow: 12px 16px rgba(0,0,0,0.24),0 17px 50px rgba(0,0,0,0.19); background-color: black; color: #FFFF04; } /* -FOOTER */ footer { color: #0E0E0D; background-color: #f1f1f1; text-align: center; padding: 20px; } footer:hover { background-color: #0E0E0D; color: #FFFF04; transition: 0.8s; } 243 3.JAVASCRIPT /* -MENU CỐ ĐỊNH - SCROLL */ window.addEventListener("scroll",function(){ window.addEventListener("scroll",function(){ var header = document.querySelector('header'); //class header chuyển đổi thành tên[class = "sticky"] cuộn header.classList.toggle("sticky",window.scrollY > 0) }) }) /* -SECTION - SLIDESHOW DOTS */ var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } /* -CHANGE- IMAGE */ // Slide: changeImage() 244 let i=0; let images = [" /Image-Babylon/phongan-babylon1.jpg", " /Image-Babylon/phongan-babylon2.jpg", " /Image-Babylon/phongan-babylon3.jpg"] function changeImage() { document.getElementById("slide1").src = images[i]; if (i < images.length - 1) { i++; } else (i = 0) setTimeout("changeImage()", 4000); } TÀI LIỆU THAM KHẢO https://www.w3schools.com/ https://www.youtube.com/channel/UCe_9Rg_DRPOxfl1gHaO0-SA https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog 245 ... Việt Nam có xu hướng phát triển mạnh nên việc xây dựng sàn giao dịch thông tin bất động sản trực tuyến thiết thực 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 trở thành... lựa chọn cho riêng Vì mà nhóm em chọn đề tài “ XÂY DỰNG WEBSITE BẤT ĐỘNG SẢN ” hỵ vọng đem lại lựa chọn tốt để xây dựng sàn giao dịch thông tin bất động sản trực tuyến phong phú thông tin, thuận... 10  JavaScript ? .10  Bạn cần biết gì: 10  Làm để thêm JavaScript website bạn? 10 CHƯƠNG II: PHÂN TÍCH ĐỀ TÀI WEBSITE BẤT ĐỘNG SẢN (BABYLON

Ngày đăng: 31/12/2021, 12:10

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w