bài tập lớn thiết kế web và triển khai hệ thống phần mềm thiết kế web bán hàng bất động sản

Nó bao gồm các yếu tố như bố cục, màu sắc, hìnhảnh và các phần khác nhau của trang web.- Trải nghiệm người dùng UX: Trải nghiệm người dùng bao gồm cách ngườidùng tương tác với trang web

TRƯỜNG ĐẠI HỌC ĐẠI NAMKHOA CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN

TÊN MÔN HỌC: THIẾT KẾ WEB VÀ TRIỂN KHAI HỆ THỐNGPHẦN MỀM

TÊN ĐỀ TÀI: THIẾT KẾ WEB BÁN HÀNG (BẤT ĐỘNG SẢN)

Giảng viên hướng dẫn: ThS Trần Thị HuệSinh viên thực hiện: Trần Hải Long

Hà Nội, 2024

TRƯỜNG ĐẠI HỌC ĐẠI NAMKHOA CÔNG NGHỆ THÔNG TIN

BÀI TẬP LỚN

TÊN MÔN HỌC: THIẾT KẾ WEB VÀ TRIỂN KHAI HỆ THỐNG PHẦNMỀM

TÊN ĐỀ TÀI: THIẾT KẾ WEB BÁN HÀNG (BẤT ĐỘNG SẢN)

STTMã Sinh ViênHọ và TênNgày Sinh

11771020438Trần Hải Long15/03/2000

Trần Thị Huệ

Hà Nội,2024 LỜI NÓI ĐẦU

(Nếu có)

MỤC LỤC(Đánh tự động)

MỤC LỤC HÌNH ẢNH(Nếu có)

MỤC LỤC BẢNG(Nếu có)

BẢNG CÁC TỪ VIẾT TẮT(Nếu có)

CHƯƠNG I: GIỚI THIỆU VỀ THIẾT KẾ WEB VÀ TRIỂN KHAI HỆTHỐNG PHẦN MỀM

1.1 Các khái niệm cơ bản

Thiết kế Web là gì ?

Một số khái niệm thiết kế Web

- Giao diện người dùng (UI): Giao diện người dùng là phần của trang web màngười dùng tương tác trực tiếp Nó bao gồm các yếu tố như bố cục, màu sắc, hìnhảnh và các phần khác nhau của trang web.

- Trải nghiệm người dùng (UX): Trải nghiệm người dùng bao gồm cách ngườidùng tương tác với trang web và cảm nhận của họ Nói chung, mục tiêu là tạo ra trảinghiệm tích cực và thuận tiện cho người dùng.

- Responsive Web Design (RWD): RWD là một phương pháp thiết kế web môphỏng lại cách mà trang web tự điều chỉnh một cách tự động để phù hợp với kíchthước và định dạng màn hình của từng thiết bị, chẳng hạn như desktop, điện thoại diđộng hoặc máy tính bảng.

- HTML: HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu siêu vănbản được sử dụng để xây dựng các trang web Nó sử dụng các thẻ để định dạng vàtổ chức nội dung trên trang web

+ HTML không phải là ngôn ngữ lập trình, mà thay vào đó là một ngôn ngữđánh dấu, được sử dụng để tạo ra cấu trúc cho các trang web và mô tả cáchmà các yếu tố trên trang web liên quan đến nhau

+ Mỗi trang web HTML được viết bằng các thẻ HTML Các thẻ HTML giúpđịnh dạng nội dung trên trang, bao gồm tiêu đề, đoạn văn bản, hình ảnh,liên kết, bảng, mẫu đơn và nhiều yếu tố khác

+ Ví dụ, thẻ <h1> đại diện cho tiêu đề chính của một trang, thẻ <p> được sửdụng để tạo ra một đoạn văn bản, và thẻ <img> được sử dụng để chèn hìnhảnh vào trang web

+ HTML cũng hỗ trợ việc tạo liên kết đến các trang web khác thông qua thẻ<a>, chèn video bằng thẻ <video>, âm thanh bằng thẻ <audio>, và nhiềutính năng khác

+ HTML là một công cụ quan trọng cho việc xây dựng các trang web và hiểucách sử dụng HTML là cần thiết khi làm việc với các dự án web.

- CSS: CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để địnhdạng và trình bày các thành phần trên trang web Nó được sử dụng để điều khiểncách mà các phần tử HTML được hiển thị trên trình duyệt của người dùng

+ CSS cho phép người phát triển web tạo ra các giao diện đẹp mắt và chuyênnghiệp bằng cách áp dụng các quy tắc và thuộc tính khác nhau cho cácphần tử HTML Nó giúp định dạng và tạo kiểu cho các yếu tố như màu sắc,vị trí, kích thước, khoảng cách, phông chữ, đường viền và nền

+ Mỗi quy tắc CSS bao gồm một bộ chọn và một khối khai báo Bộ chọn xácđịnh các phần tử mà quy tắc sẽ được áp dụng, trong khi khối khai báo chứacác thuộc tính và giá trị mà phần tử sẽ có

+ CSS có nhiều loại chọn khác nhau, bao gồm chọn theo tên thẻ HTML, lớp,ID, các yếu tố con, tình trạng (state) và nhiều hơn nữa Nó cũng hỗ trợ viếtmã CSS theo cách nối (inherit) và ưu tiên (priority), cho phép người pháttriển kiểm soát cách các quy tắc được áp dụng và kế thừa.

+ Với CSS, người phát triển web có thể tạo giao diện đồ họa, tinh chỉnh trựcquan trang web và đảm bảo tính nhất quán trên các trình duyệt và thiết bịkhác nhau CSS là một phần quan trọng trong quá trình phát triển trang web

và giúp cải thiện trải nghiệm người dùng.

- JavaScript: JavaScript là một ngôn ngữ lập trình được sử dụng phổ biến trênweb để tạo ra các trang web tương interactives JavaScript thường được dùng đểthực hiện các tác vụ động, như thay đổi nội dung của một trang web mà người dùngđang xem mà không cần tải lại trang

+ JavaScript là một ngôn ngữ bậc cao, dễ học và linh hoạt, được thực thi trựctiếp trên trình duyệt của người dùng, không cần qua bất kỳ trình biên dịchhay trình thông dịch nào khác Điều này giúp các nhà phát triển web dễdàng tích hợp mã JavaScript vào các trang web và ứng dụng di động + JavaScript cung cấp cho nhà phát triển nhiều chức năng như tạo ra hiệu ứng

động, xử lý dữ liệu đầu vào từ người dùng, kiểm tra và xác thực dữ liệu,tương tác với API để gửi và nhận dữ liệu từ máy chủ, và nhiều nhiệm vụkhác Nó cũng hỗ trợ sự kiện và các trình xử lý sự kiện để phản hồi nhanhchóng đối với hành động của người dùng trên trang web.

+ JavaScript được hỗ trợ trên hầu hết các trình duyệt web hiện đại và đượcsử dụng rộng rãi trong việc xây dựng các ứng dụng web phức tạp, trò chơitrực tuyến, cũng như các trang web tương tác và đáp ứng.

Triển khai hệ thống phần mềm là gì ?

Một số khái niệm triển khai hệ thống phần mềm

- Môi trường triển khai (Deployment Environment): Đây là môi trường thực tếmà ứng dụng phần mềm sẽ chạy trên, bao gồm các thiết bị phần cứng, hệ điều hành,cơ sở dữ liệu và mạng Môi trường triển khai cần được chuẩn bị và cấu hình đúng đểđảm bảo hiệu suất và sẵn sàng cho việc triển khai

- Gói triển khai (Deployment Package): Đây là tập hợp các tệp tin và tàinguyên cần thiết để cài đặt và chạy ứng dụng phần mềm trong môi trường triển khai.

Gói triển khai bao gồm mã nguồn, tệp cấu hình, tài liệu và bất kỳ thành phần phụthuộc nào

- Cài đặt (Installation): Quá trình cài đặt là việc chuyển gói triển khai từ mộtmôi trường lưu trữ sang môi trường triển khai Các bước cài đặt bao gồm giải nén,tạo cơ sở dữ liệu, cấu hình hệ thống và cài đặt các ứng dụng phụ thuộc

- Kiểm thử (Testing): Sau khi cài đặt, hệ thống phần mềm cần được kiểm tra đểđảm bảo rằng nó hoạt động đúng và đáp ứng được yêu cầu Kiểm thử có thể baogồm kiểm tra tích hợp, kiểm thử chức năng, kiểm thử hiệu năng và kiểm thử bảomật

- Triển khai (Deployment): Quá trình triển khai là việc triển khai ứng dụngphần mềm hoàn chỉnh vào môi trường sản xuất Điều này bao gồm việc chuyển góitriển khai đã kiểm tra thành môi trường triển khai và cấu hình nó để hoạt động đúng.- Cập nhật và quản lý (Updating and Management): Sau khi triển khai, hệthống phần mềm cần được cập nhật và quản lý để đảm bảo tính đúng đắn và bảomật Cập nhật có thể bao gồm việc cài đặt các bản vá lỗi, thêm tính năng mới hoặcnâng cấp phiên bản.

1.2 Phân biệt web tĩnh web động

Web tĩnh

- Web tĩnh là một loại trang web mà nội dung của nó không thay đổi tùy thuộcvào người dùng hoặc thời gian Tất cả các trang và nội dung trên website tĩnh đượctạo ra trước và lưu trữ trong tệp tin HTML Khi truy cập vào một trang web tĩnh,người dùng chỉ nhìn thấy nội dung đã được tạo sẵn trên trang đó Các trang web tĩnhthường phù hợp cho các trang giới thiệu, trang tin tức, landing page, hoặc các trangkhông thay đổi nội dung thường xuyên.

- Ví dụ như Danh sách các đời tổng thống Hoa Kỳ

Từ năm 1789 đến nay ,cứ 4 năm 1 nhiệm kỳ tổng thống Web động

- Web động là một loại trang web có thể thay đổi nội dung hoặc tạo ra nội dungmới tùy thuộc vào người dùng hoặc thời gian Các trang web động thường sử dụngcác ngôn ngữ kịch bản (như PHP, ASP, Python) hoặc công nghệ như AJAX đểtương tác với cơ sở dữ liệu và tạo ra nội dung động

- Ví dụ, một trang web động có thể hiển thị thông tin cập nhật từ cơ sở dữ liệu,cho phép người dùng tạo tài khoản và đăng nhập, hoặc gửi biểu mẫu Các trang webđộng thường được sử dụng cho các trang thương mại điện tử, diễn đàn, trang quảnlý nội dung, và các ứng dụng web phức tạp

- Động và tĩnh có thể được sử dụng cùng nhau trên cùng một trang web để kếthợp các tính năng và sự tương tác đa dạng Việc chọn web tĩnh hay web động phụthuộc vào mục đích của trang web và yêu cầu cụ thể của dự án.

trí của một tệp tin, trang web, ứng dụng web, hoặc bất kỳ nguồn tài nguyên nàokhác trên mạng URL thường bao gồm ba yếu tố chính, bao gồm giao thức (ví dụ:HTTP, HTTPS), tên miền hoặc địa chỉ IP của máy chủ và đường dẫn tới tài nguyêncụ thể trên máy chủ.

- Trình duyệt (Browser): là một ứng dụng phần mềm được sử dụng để truy cậpvà duyệt các trang web trên internet Nó cho phép người dùng nhập địa chỉ webhoặc tìm kiếm thông qua công cụ tìm kiếm để truy cập vào các trang web khácnhau Trình duyệt hiển thị các trang web dưới dạng văn bản, hình ảnh, video và âmthanh, và cung cấp khả năng tương tác với các yếu tố trên trang web như điềuhướng, click chuột, gửi biểu mẫu và nhiều hơn nữa Một số trình duyệt phổ biếnđược sử dụng hiện nay bao gồm Google Chrome, Mozilla Firefox, Microsoft Edgevà Safari.

1.4 Một số công cụ thiết kế web (Visual Studio code, Adobe Dreamweaver, …)

Visual Studio Code (VS Code)

- Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn mở và miễnphí phát triển bởi Microsoft Nó được xây dựng trên nền tảng Electron, cho phépchạy trên nhiều hệ điều hành như Windows, macOS và Linux VS Code cung cấpmột giao diện sử dụng đơn giản và nhẹ nhàng nhưng vẫn có đầy đủ tính năng để hỗtrợ phát triển ứng dụng

- Điểm mạnh của VS Code là khả năng mở rộng thông qua các extensions, hỗtrợ đa ngôn ngữ, gỡ lỗi mã nguồn, tích hợp hệ thống quản lý phiên bản và nhiều tínhnăng phục vụ cho lập trình viên

- Một số tính năng nổi bật của Visual Studio Code bao gồm:

+ Tích hợp gỡ lỗi: VS Code hỗ trợ gỡ lỗi các ngôn ngữ như JavaScript,TypeScript, Python và nhiều ngôn ngữ khác Bạn có thể dễ dàng đặt điểm

dừng (breakpoint), theo dõi biến và thực hiện các thao tác gỡ lỗi một cáchhiệu quả

+ Hỗ trợ đa ngôn ngữ: VS Code hỗ trợ nhiều ngôn ngữ lập trình như Python,JavaScript, C#, Java, PHP, Ruby và nhiều ngôn ngữ khác Điều này chophép bạn phát triển ứng dụng đa nền tảng và làm việc với nhiều ngôn ngữkhác nhau trong cùng một môi trường

+ Tích hợp hệ thống quản lý phiên bản: VS Code tích hợp một số hệ thốngquản lý phiên bản phổ biến như Git, đồng bộ hóa dự án với kho lưu trữ vàkiểm soát phiên bản dễ dàng

+ Khả năng mở rộng: VS Code cho phép bạn cài đặt và sử dụng cácextensions từ cộng đồng, mở rộng khả năng và tùy chỉnh của trình soạnthảo theo nhu cầu Có sẵn rất nhiều extensions hỗ trợ cho các ngôn ngữ lậptrình, giao diện, cú pháp và quản lý dự án.

Adobe Dreamweaver

Adobe Dreamweaver là một công cụ phát triển trang web được phát triển bởiAdobe Systems Đây là một trình chỉnh sửa mã WYSIWYG (What You See Is WhatYou Get) cho phép người dùng tạo và chỉnh sửa trang web một cách dễ dàng màkhông cần phải viết mã HTML/CSS

- Cách sử dụng Dreamweaver:

+ Tạo mới trang web: Đầu tiên, bạn có thể tạo mới một trang web trongDreamweaver bằng cách chọn tập tin -> tạo -> trang web mới Từ đó, bạncó thể chỉ định thư mục lưu trữ và các tùy chọn khác

+ Chỉnh sửa giao diện: Dreamweaver cung cấp giao diện WYSIWYG, chophép bạn nhìn thấy trực tiếp kết quả của công việc chỉnh sửa trong quátrình phát triển trang web Bạn có thể kéo và thả các phần tử, chỉnh sửa vănbản, và thậm chí xem trước trên các trình duyệt khác nhau

+ Quản lý mã: Nếu bạn muốn làm việc với mã nguồn, Dreamweaver có thểhiển thị giao diện code view dễ sử dụng Bạn có thể chỉnh sửa HTML,CSS, JavaScript và các ngôn ngữ khác một cách thuận tiện

+ Tạo và quản lý các trang kết nối: Dreamweaver cho phép bạn tạo và quảnlý các trang kết nối với cơ sở dữ liệu, như trang đăng nhập hoặc trang hiểnthị dữ liệu từ cơ sở dữ liệu động

- Ứng dụng thực tế của Adobe Dreamweaver:

+ Thiết kế trang web chuyên nghiệp: Dreamweaver có các công cụ tạo giaodiện dễ sử dụng giúp bạn tạo ra các trang web hấp dẫn và chuyên nghiệp + Phát triển tích hợp: Dreamweaver hỗ trợ việc làm việc với các công nghệ

web phổ biến như HTML, CSS, JavaScript, và PHP Điều này giúp bạn xâydựng và phát triển các ứng dụng web phức tạp

+ Tích hợp với các nền tảng CMS: Dreamweaver có tích hợp với các hệthống quản lý nội dung (CMS) phổ biến như WordPress, Joomla và Drupal.Điều này giúp bạn dễ dàng tạo và quản lý nội dung trên các trang web sửdụng các nền tảng này

+ Tương thích đa nền tảng: Dreamweaver hỗ trợ việc tạo ra các trang webtương thích với nhiều nền tảng khác nhau như máy tính để bàn, điện thoạidi động và máy tính bảng

+ Với những tính năng và ứng dụng thú vị này, Adobe Dreamweaver có thểlà một công cụ hữu ích cho những người làm việc trong lĩnh vực phát triểntrang web.

Mobirise

- Mobirise là một công cụ xây dựng trang web dựa trên trình kéo và thả, giúpngười dùng dễ dàng tạo nhanh các trang web đẹp mà không cần biết lập trình Đâylà một phần mềm offline, nghĩa là bạn không cần kết nối Internet để sử dụng nó Đểsử dụng Mobirise, bạn chỉ cần tải xuống và cài đặt phần mềm trên máy tính củamình.

- Sau đó, bạn có thể chọn từ một loạt các template đã chuẩn bị sẵn hoặc tạogiao diện trang web của riêng bạn thông qua trình kéo và thả Mobirise cung cấp cáckhối xây dựng, như tiêu đề, ảnh, văn bản, đồ họa, video và nhiều hơn nữa, giúp bạndễ dàng tạo ra các trang web chuyên nghiệp

- Ứng dụng thực tế của Mobirise là rất đa dạng.- Dưới đây là một số ví dụ:

+ Trang web doanh nghiệp hoặc cá nhân: Bạn có thể sử dụng Mobirise đểxây dựng trang web chính cho công ty của mình hoặc để tạo trang web cánhân của bạn Bạn có thể tùy chỉnh giao diện, chèn thông tin công ty, giớithiệu sản phẩm, dịch vụ hoặc thông tin cá nhân

+ Trang web bán hàng: Mobirise đi kèm với các khối xây dựng để tạo gianhàng trực tuyến Bạn có thể thêm danh sách sản phẩm, nút mua hàng, giỏhàng và cách thanh toán Bằng cách sử dụng Mobirise, bạn có thể nhanhchóng tạo ra một trang web bán hàng hoàn chỉnh

+ Trang web sự kiện: Mobirise cung cấp các khối xây dựng để tạo trang websự kiện, chẳng hạn như hội nghị, hội chợ hoặc lễ hội Bạn có thể chènthông tin về sự kiện, lịch trình, đăng ký tham dự và một giao diện tương tácđể tương tác với khán giả

+ Trang web chia sẻ thông tin: Bạn có thể tạo ra các trang web chia sẻ thôngtin cho mục đích giáo dục, truyền thông hoặc phổ biến kiến thức Sử dụngMobirise, bạn có thể chèn văn bản, hình ảnh, video và biểu đồ để trình bàythông tin một cách rõ ràng và hấp dẫn.

WYSIWYG Web Builder

- WYSIWYG Web Builder là một công cụ phát triển trang web dựa trên giaodiện người dùng "WYSIWYG" (What You See Is What You Get - Nhìn gì thấyđấy) Điều này có nghĩa là bạn có thể xây dựng trang web một cách trực quan bằngcách kéo và thả các phần tử mà không cần biết về mã hóa hay lập trình

- Cách sử dụng WYSIWYG Web Builder rất đơn giản Sau khi tải và cài đặtphiên bản phần mềm trên trang chủ, bạn có thể bắt đầu tạo trang web mới Giao diệnWYSIWYG Web Builder gần như tương tự như một chương trình xử lý văn bảnthông thường, với các công cụ tạo trực quan và thanh công cụ

- Có một loạt các phần tử, được gọi là "cục bộ", có thể được kéo và thả vàotrang web của bạn Ví dụ, bạn có thể thêm các khối văn bản, hình ảnh, đồ họavector, biểu đồ, bảng, video, audio, và nhiều hơn nữa Bạn có thể tuỳ chỉnh cácthuộc tính của từng phần tử, như màu sắc, phông chữ, kích thước, hiệu ứng và nhiềuhơn nữa

- WYSIWYG Web Builder cũng hỗ trợ xây dựng trang web đáp ứng, có nghĩalà trang web của bạn sẽ tự động thích nghi với các thiết bị khác nhau như điện thoạidi động và máy tính bảng Bạn cũng có thể thêm tích hợp các chức năng tương tácnhư mẫu liên hệ, dịch vụ phân tích thống kê và các tính năng xã hội