bài tập lớn xây dựng ứng dụng web xây dựng website mạng xã hội

Vậy nên việc xây dựng một websitemạng xã hội hoàn toàn mới là một điều khó và đầy thách thức nhưng cũng đầy thúvị và ý nghĩa, và trong bài cáo này chúng em hy vọng có thể giúp mọi người

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA

-oOo -BÀI TẬP LỚN

(N01)

mạng xã hội

Nhóm 2

Thành viên nhóm:

1.Nguyễn Ngọc Hoàng Anh

2.Nguyễn Mạnh Cường

Giảng viên hướng dẫn: Trần Đức Minh

-Hà Nội, 21 tháng 10 năm

2023 -Mục lục LỜI NÓI ĐẦU 1

Chương I Tổng quan về đề tài 2

1.Tên đề tài: 2

2 Mục tiêu của đề tài: 2

3 Ý nghĩa của đề tài: 3

4 Đối tượng nghiên cứu của đề tài: 4

5 Một số trang chính của website: 4

Chương 2: Công cụ dùng để tạo ra website 5

1 Giới thiệu về HTML 5

1.1.Công Dụng Của HTML 5

1.2.Cú Pháp Của HTML 6

2 Giới thiệu Về Adobe Dreamweaver 6

2.1.Macromedia Dreamweaver 6

2.2.Ngôn Ngữ CSS (Cascading Style Sheets) 7

2.3.Ngôn Ngữ JavaScript 8

Chương 3: Giao diện của chương trình 10

1.Giao diện Sign up 10

2.Giao diện Sign in 11

3.Giao diện Home 12

5.Giao diện Notification 14

8 Giao diện Profile 16

Chương 4: Kết luận và hướng phát triển 17

1 Kết quả đạt được: 17

2 Việc chưa làm được: 17

3 Hướng phát triển của đề tài: 18

LỜI NÓI ĐẦU

Mạng xã hội là một trong những hiện tượng vĩ đại nhất của thế kỷ 21 Đã từ lâu, chúng ta thấy sự lan truyền nhanh chóng của các nền tảng mạng xã hội và tầm ảnh hưởng lớn mà chúng đem lại cho cuộc sống hàng ngày, cho việc làm kinh doanh, và thậm chí là cho cuộc cách mạng xã hội toàn cầu

Với sự bùng nổ như thế của mạng xã hội, hiện nay không khó để ta có thể bắt gặp hay sử dụng một website mạng xã hội Vậy nên việc xây dựng một website mạng xã hội hoàn toàn mới là một điều khó và đầy thách thức nhưng cũng đầy thú

vị và ý nghĩa, và trong bài cáo này chúng em hy vọng có thể giúp mọi người hiểu hơn về quá trình xây dựng và phát triển website “Vlife”

Trong báo cáo này, chúng em sẽ giới thiệu về ý tưởng và mục tiêu của dự án, cũng như quá trình phát triển và các tính năng chính của trang web mạng xã hội mà chúng em đã tạo ra

Cuối cùng chúng em xin gửi lời cảm ơn đặc biệt đến thầy Trần Đức Minh đã luôn hỗ trợ và giảng dạy trong suốt thời gian qua

Hãy cùng khám phá trang web mạng xã hội mà chúng em đã xây dựng mặc

dù nó chưa được hoàn thiện đầy đủ các chức năng cũng như các tác vụ

Xin chân thành cảm ơn!

1

Chương I Tổng quan về đề tài

1.Tên đề tài:

Thiết kế website có chủ đề mạng xã hội –Cyrene

2 Mục tiêu của đề tài:

Tìm hiểu về thiết kế Website mạng xã hội và ứng dụng kiến thức vào việc thực hiện bài tiểu luận cuối kỳ môn Xây dựng ứng dụng Web

Đặc tả các yêu cầu:

 Xác định và hiểu rõ yêu cầu cơ bản của một trang web mạng xã hội, bao gồm việc tạo, quản lý tài khoản người dùng, chia sẻ nội dung, tương tác với người dùng khác và quản lý thông tin cá nhân

 Xây dựng trang web mạng xã hội với các chức năng cơ bản như đăng nhập, đăng ký tài khoản, tạo, chỉnh sửa và xóa bài viết, kết bạn và tương tác với người dùng khác

 Đảm bảo tính bảo mật và quyền riêng tư của người dùng thông qua quản lý thông tin cá nhân và tùy chọn riêng tư

 Tối ưu hóa hiệu năng và tốc độ xử lý trang web mạng xã hội

 Thiết kế giao diện người dùng thân thiện, dễ sử dụng và hiện đại

 Sử dụng mã hóa và biện pháp an toàn để bảo vệ dữ liệu và thông tin cá nhân của người dùng

 Cung cấp tính năng tìm kiếm, liên kết giữa các tài khoản và tương tác qua các phương tiện truyền thông và bài viết trên trang web mạng xã hội

 Đảm bảo tính tương tác và tính hợp nhất giữa các phần của trang web mạng

xã hội

 Thực hiện kiểm thử, gỡ rối và sửa lỗi để đảm bảo tính ổn định và chất lượng của trang web mạng xã hội

Yêu cầu đối với sản phẩm:

 Đảm bảo rằng trang web có kích thước vừa phải, tốc độ xử lý nhanh và không gây chậm trễ

 Thiết kế giao diện thân thiện, thu hút và dễ sử dụng cho người dùng

 Sử dụng mã hóa và biện pháp bảo mật để đảm bảo tính an toàn của thông tin người dùng

 Xác minh tính toàn vẹn và tính chính xác của dữ liệu và thông tin trên trang web mạng xã hội

 Tích hợp tính năng đăng nhập và đăng ký tài khoản an toàn cho người dùng

 Hỗ trợ các tính năng tương tác giữa người dùng và tạo điều kiện cho tạo, quản lý và tương tác với nội dung trên trang web

 Thực hiện kiểm thử để đảm bảo tính ổn định và chất lượng của trang web mạng xã hội

 Cung cấp tài liệu hướng dẫn và hỗ trợ người dùng trong việc sử dụng trang web mạng xã hội

3 Ý nghĩa của đề tài:

 Tạo ra một sản phẩm công nghệ mới, giúp tạo cơ hội tiếp cận gần hơn với người dùng và cung cấp một nền tảng trực tuyến cho các mối quan hệ xã hội

và tương tác mạng xã hội

 Quảng bá thương hiệu của dự án và tạo điều kiện để thúc đẩy sự nhận diện

và tương tác của người tiêu dùng với sản phẩm

 Cung cấp một môi trường trực tuyến cho người dùng để chia sẻ nội dung, tương tác với người dùng khác, xây dựng và duy trì mối quan hệ xã hội, và tham gia vào các hoạt động mạng xã hội

 Hỗ trợ việc quản lý thông tin cá nhân, bảo vệ tính riêng tư và đảm bảo an toàn thông tin cho người dùng trên nền tảng mạng xã hội

 Tạo cơ hội cho doanh nghiệp tương tác với người tiêu dùng, thu thập phản hồi và dữ liệu về người dùng để phát triển sản phẩm và dịch vụ

 Xây dựng cơ sở hạ tầng công nghệ cho trang web mạng xã hội và thiết lập các tính năng quan trọng như đăng nhập, đăng ký tài khoản, tạo, chỉnh sửa

và xóa bài viết

 Khuyến khích tương tác và giao tiếp giữa người dùng thông qua các phương tiện truyền thông và cơ hội chia sẻ nội dung

 Tạo môi trường trực tuyến an toàn và thân thiện để người dùng tương tác, xây dựng mối quan hệ và chia sẻ thông tin

3

 Nắm bắt và theo dõi sự tương tác của người dùng trên nền tảng mạng xã hội

để cung cấp dịch vụ tốt hơn và cải thiện trải nghiệm của họ

 Đóng góp vào việc phát triển các sản phẩm và dịch vụ công nghệ, đồng thời giới thiệu và đánh dấu vị trí của dự án trong lĩnh vực mạng xã hội và công nghệ thông tin

4 Đối tượng nghiên cứu của đề tài:

 Đối tượng nghiên cứu chủ yếu là các người dùng của trang web mạng xã hội Những người này bao gồm cả người dùng cá nhân và doanh nghiệp muốn tham gia và tương tác trên nền tảng mạng xã hội

 Đồng thời, đối tượng của đề tài cũng bao gồm các quản trị viên và chủ sở hữu trang web mạng xã hội, người quản lý thông tin, dữ liệu và tính năng trên trang web

 Đối tượng bao gồm cả doanh nghiệp và thương hiệu mong muốn sử dụng mạng xã hội để tương tác với khách hàng, xây dựng thương hiệu và quảng

bá sản phẩm và dịch vụ của họ

 Các người dùng cuối cùng của trang web mạng xã hội có thể thuộc mọi độ tuổi, giới tính, ngành nghề và sở thích và sử dụng mạng xã hội để kết nối, tương tác và chia sẻ nội dung với người dùng khác

5 Một số trang chính của website:

Chức Năng Đăng Ký (Sign Up):

Chức năng Đăng ký là cánh cửa mở ra thế giới của trang web Người dùng mới có thể tạo ra tài khoản cá nhân của mình bằng cách cung cấp các thông tin cần thiết như tên, địa chỉ email và mật khẩu an toàn Qua quy trình Đăng ký, họ

có thể truy cập vào các tính năng và nội dung độc quyền chỉ dành cho thành viên

Chức Năng Đăng Nhập (Sign In):

Khi người dùng đã có tài khoản, họ có thể sử dụng chức năng Đăng nhập để truy cập vào trang web Việc này giúp họ duyệt qua nội dung một cách dễ dàng

và an toàn, chẳng hạn như xem các bài viết, ảnh và video, hoặc tương tác với cộng đồng

Trang Chủ (Home):

Trang chủ là trung tâm của trang web, nơi người dùng có thể tìm thấy các bài viết và thông tin mới nhất từ người dùng khác hoặc từ trang web chính Từ đây, họ có thể duyệt qua các nội dung được cá nhân hóa dựa trên sở thích và quan tâm của mình

Tin Nhắn (Messages):

Chức năng Tin nhắn cho phép người dùng gửi và nhận tin nhắn riêng tư từ bạn bè hoặc thành viên khác Điều này tạo ra một môi trường giao tiếp riêng tư, nơi họ có thể chia sẻ ý kiến, hỏi đáp hoặc thảo luận với nhau một cách thuận tiện và bảo mật

Hồ Sơ Cá Nhân (Profile):

Hồ sơ cá nhân là nơi người dùng có thể tùy chỉnh thông tin cá nhân của mình Họ có thể thay đổi ảnh đại diện, cập nhật trạng thái, và chia sẻ thông tin

về sở thích, nghề nghiệp và hơn thế nữa Hồ sơ cá nhân không chỉ là cách để người dùng thể hiện bản thân mình mà còn giúp họ kết nối với những người có

sở thích và quan điểm tương đồng

Trang web này không chỉ cung cấp những chức năng cơ bản mà còn tạo ra một cộng đồng trực tuyến sôi động, nơi mọi người có thể kết nối, chia sẻ và tương tác với nhau một cách thuận lợi và thú vị

Chương 2: Công cụ dùng để tạo ra website

1 Giới thiệu về HTML

HTML, viết tắt của "Hypertext Markup Language," là ngôn ngữ cốt lõi và phổ biến nhất được sử dụng trong lập trình web HTML cho phép lập trình viên xây dựng và định dạng các trang web, tạo ra cấu trúc và nội dung của chúng Nó đã tồn tại từ những ngày đầu của World Wide Web và đóng vai trò quan trọng trong việc hiển thị thông tin trên các trình duyệt web

1.1.Công Dụng Của HTML

HTML có nhiều công dụng quan trọng trong lập trình web:

5

 Định dạng nội dung: HTML định dạng văn bản, hình ảnh, video và các phần

tử khác trên trang web Điều này cho phép thiết kế giao diện và hiển thị nội dung theo cách phù hợp

 Liên kết: HTML cho phép tạo liên kết giữa các trang web và giữa các phần

tử trên cùng một trang, giúp tạo ra một trải nghiệm liên kết trực quan cho người dùng

 Semantics: HTML cung cấp các thẻ có ý nghĩa, giúp máy chủ tìm hiểu nội dung và cải thiện SEO (Search Engine Optimization) Điều này quan trọng

để tối ưu hóa sự hiển thị và tìm kiếm trang web

1.2.Cú Pháp Của HTML

HTML sử dụng cú pháp dựa trên thẻ (tags) để đánh dấu và định dạng nội dung Dưới đây là một số điểm quan trọng về cú pháp của HTML:

 Một thẻ HTML bắt đầu bằng < và kết thúc bằng > Ví dụ: <p> là thẻ mở cho đoạn văn bản và </p> là thẻ đóng

 Có nhiều loại thẻ, như thẻ văn bản <p>, thẻ tiêu đề <h1>, thẻ hình ảnh

<img>, và nhiều thẻ khác Mỗi thẻ có một mục đích cụ thể

 Thẻ mở thường có thuộc tính (attributes) để cung cấp thông tin bổ sung về phần tử, ví dụ: <img src="hinh-anh.jpg" alt="Hình ảnh">

HTML có một cấu trúc cơ bản bao gồm phần đầu (head) và phần thân (body) của trang

HTML là ngôn ngữ căn bản và là nền tảng cho mọi trang web Nó cung cấp

cơ sở để tạo ra cấu trúc, nội dung và giao diện của trang web, và là một kiến thức quan trọng mà bất kỳ lập trình viên web nào cũng cần phải hiểu

2 Giới thiệu Về Adobe Dreamweaver

2.1.Macromedia Dreamweaver

 Giao diện WYSIWYG (What You See Is What You Get): Dreamweaver cung cấp một giao diện sử dụng chuột và thả để thiết kế trang web Người dùng có thể thấy kết quả ngay lập tức trên giao diện mà họ thiết

kế, giống như trang web sẽ hiển thị trên trình duyệt

 Mã nguồn và chế độ thiết kế: Dreamweaver cho phép người dùng chuyển đổi giữa chế độ thiết kế và chế độ mã nguồn, điều này giúp phát triển viên web cảm thấy thoải mái khi chỉnh sửa mã nguồn trực tiếp

 Hỗ trợ nhiều ngôn ngữ lập trình web: Dreamweaver hỗ trợ nhiều ngôn ngữ lập trình web phổ biến như HTML, CSS, JavaScript, PHP, và nhiều ngôn ngữ khác Điều này cho phép phát triển viên làm việc trên nhiều khía cạnh của một trang web

 Quản lý dự án: Nó cung cấp các tính năng quản lý dự án để tổ chức và quản lý tất cả các tài nguyên của trang web, bao gồm hình ảnh, tệp CSS,

và mã nguồn

 Kiểm tra giao diện đa nền tảng: Dreamweaver cho phép bạn kiểm tra cách trang web của bạn hiển thị trên nhiều trình duyệt và thiết bị khác nhau

 Hỗ trợ tích hợp Adobe: Sau khi Macromedia được mua lại bởi Adobe, Dreamweaver đã được tích hợp chặt chẽ với các sản phẩm khác trong Adobe Creative Cloud, như Adobe Photoshop và Adobe Illustrator 2.2.Ngôn Ngữ CSS (Cascading Style Sheets)

 CSS, hoặc Cascading Style Sheets, là một ngôn ngữ sử dụng để kiểm soát giao diện và bố cục của trang web CSS cho phép bạn tạo ra các quy tắc

và định dạng để áp dụng cho các phần tử HTML trên trang web, như font chữ, màu sắc, khoảng cách, và nhiều tính năng thiết kế khác Dưới đây là một số điểm quan trọng về CSS:

 Tách rời kiểu dáng và nội dung: CSS tách rời kiểu dáng (style) của trang web khỏi nội dung (content) của nó Điều này giúp bạn duy trì và cập nhật giao diện của trang một cách dễ dàng mà không cần phải thay đổi nội dung HTML

 Các quy tắc CSS: CSS sử dụng các quy tắc để định dạng các phần tử HTML Mỗi quy tắc gồm một bộ chọn (selector) và một khối khai báo (declaration block)

 Kế thừa và ưu tiên: CSS sử dụng nguyên tắc kế thừa, nghĩa là các quy tắc

có thể được áp dụng từ các phần tử cha đến các phần tử con Tuy nhiên, CSS cũng có cơ chế ưu tiên để xác định xem quy tắc nào nên được áp dụng khi có nhiều quy tắc xung đột

 Lớp và ID: Trong CSS, bạn có thể sử dụng lớp (class) và ID để định rõ các phần tử cụ thể mà bạn muốn định dạng Lớp có thể được sử dụng cho nhiều phần tử cùng một loại, trong khi ID phải là duy nhất trên một trang

 CSS ưu tiên và trình duyệt: Mỗi trình duyệt web có cơ chế ưu tiên riêng,

và điều này có thể dẫn đến một số khác biệt trong cách mà trình duyệt

7

hiển thị trang web Điều này đặc biệt quan trọng khi phát triển các trang web đa trình duyệt

 CSS3 và tính năng tiên tiến: CSS3 là phiên bản mới nhất của CSS và đưa vào sử dụng nhiều tính năng tiên tiến như hoạt ảnh, đổ bóng, chuyển đổi,

và nhiều hiệu ứng tạo ra trải nghiệm trang web đa dạng và hấp dẫn hơn CSS là một phần quan trọng của phát triển web và cho phép bạn kiểm soát hoàn toàn giao diện của trang web của bạn

2.3.Ngôn Ngữ JavaScript

JavaScript là một ngôn ngữ lập trình mạng thường được sử dụng để tạo tính năng tương tác và động cho các trang web Được phát triển ban đầu bởi Netscape, JavaScript đã trở thành một phần quan trọng của phát triển web và là một trong những ngôn ngữ lập trình phía client phổ biến nhất Dưới đây là một số điểm quan trọng về JavaScript:

 Ngôn ngữ phía client: JavaScript chạy trên trình duyệt của người dùng, nghĩa là mã JavaScript được tải và thực thi trực tiếp trên máy tính hoặc thiết bị của họ Điều này giúp tạo ra trải nghiệm tương tác trên trang web

mà không cần liên hệ với máy chủ

 Tính năng tương tác: JavaScript cho phép bạn thêm tính năng tương tác vào trang web, chẳng hạn như biểu đồ động, kiểm tra biểu mẫu, lấy dữ liệu từ máy chủ (thông qua AJAX), và thậm chí là tạo trò chơi trực tuyến

 DOM (Document Object Model): JavaScript được sử dụng để tương tác với DOM, một biểu diễn phân cấp của trang web, cho phép bạn thay đổi nội dung và cấu trúc của trang một cách động Điều này giúp bạn tạo ra các tương tác như việc thêm, xóa hoặc thay đổi phần tử HTML

 Sự kiện (Event): JavaScript cho phép bạn đăng ký và xử lý sự kiện như nhấn nút, click chuột, hoặc nhập liệu từ bàn phím Điều này cho phép bạn tạo ra các phản hồi động dựa trên hành vi của người dùng

 Thư viện và khung làm việc: Có nhiều thư viện và khung làm việc JavaScript phổ biến như jQuery, React, Angular, và Vue.js, giúp tối ưu hóa quá trình phát triển và cung cấp các công cụ và thư viện tiện ích

 Cộng đồng mạnh mẽ: JavaScript có một cộng đồng phát triển lớn và tích hợp khái niệm mã nguồn mở (open source), điều này có nghĩa là có nhiều tài liệu, ví dụ và hỗ trợ từ cộng đồng

 Tiêu chuẩn ECMAScript: JavaScript dựa trên tiêu chuẩn ECMAScript, và

có nhiều phiên bản khác nhau Hiện nay, ECMAScript 6 (hoặc ES6) là