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
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC PHENIKAA -oOo -
1.Nguyễn Ngọc Hoàng Anh2.Nguyễn Mạnh Cường
Giảng viên hướng dẫn: Trần Đức Minh
Trang 2-Hà Nội, 21 tháng 10 năm
2023 -Mục lụcLỜ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
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
Trang 3LỜ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 kinhdoanh, 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 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 hiểuhơ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ặcdù 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
Trang 4Chươ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ệcthự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, baogồ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ớingườ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ớingườ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âncủ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 quacá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ượngcủ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.
Trang 5 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 tinngườ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 trangweb 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 webmạ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 trangweb 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ớingườ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ộivà 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ệnvà 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 antoà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ảnhồ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ậpcác tính năng quan trọng như đăng nhập, đăng ký tài khoản, tạo, chỉnh sửavà 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ươngtiệ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
Trang 6 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ờigiớ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ôngnghệ 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ệpmuố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ăngtrên trang web.
Đối tượng bao gồm cả doanh nghiệp và thương hiệu mong muốn sử dụngmạng xã hội để tương tác với khách hàng, xây dựng thương hiệu và quảngbá 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ùngmớ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 tincầ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ànhviê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àngvà 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ớicộng đồng.
Trang Chủ (Home):
Trang 7Trang chủ là trung tâm của trang web, nơi người dùng có thể tìm thấy cácbà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ậntiệ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ủamình Họ có thể thay đổi ảnh đại diện, cập nhật trạng thái, và chia sẻ thông tinvề 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ộtcộ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ươngtá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ênxâ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 trongviệ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
Trang 8 Định dạng nội dung: HTML định dạng văn bản, hình ảnh, video và các phầntử khác trên trang web Điều này cho phép thiết kế giao diện và hiển thị nộidung 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ầntử 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 chongười dùng
Semantics: HTML cung cấp các thẻ có ý nghĩa, giúp máy chủ tìm hiểu nộidung 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ộidung 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ấpcơ 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ứcquan 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): Dreamweavercung 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ếtkế, 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ểnviên web cảm thấy thoải mái khi chỉnh sửa mã nguồn trực tiếp
Trang 9 Hỗ trợ nhiều ngôn ngữ lập trình web: Dreamweaver hỗ trợ nhiều ngônngữ lập trình web phổ biến như HTML, CSS, JavaScript, PHP, và nhiềungôn ngữ khác Điều này cho phép phát triển viên làm việc trên nhiềukhí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 tracách trang web của bạn hiển thị trên nhiều trình duyệt và thiết bị khácnhau
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 trongAdobe 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átgiao diện và bố cục của trang web CSS cho phép bạn tạo ra các quy tắcvà định dạng để áp dụng cho các phần tử HTML trên trang web, như fontchữ, 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 trangweb khỏi nội dung (content) của nó Điều này giúp bạn duy trì và cậpnhật giao diện của trang một cách dễ dàng mà không cần phải thay đổinộ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ắccó 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 ápdụ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 chonhiề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
Trang 10hiển thị trang web Điều này đặc biệt quan trọng khi phát triển các trangweb đ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à đưavà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áthoà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ínhnă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 trongnhữ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 quantrọ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ặcthiế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 webmà 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ácvà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ácvới DOM, một biểu diễn phân cấp của trang web, cho phép bạn thay đổinộ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 racá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ạntạ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ệcJavaScript phổ biến như jQuery, React, Angular, và Vue.js, giúp tối ưuhó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ềutà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à
Trang 11một phiên bản tiêu chuẩn JavaScript phổ biến và cung cấp nhiều tínhnăng và cú pháp mới cho việc phát triển ứng dụng web
JavaScript là một ngôn ngữ lập trình mạng quan trọng, cho phép bạn tạo racác trang web và ứng dụng web phức tạp với tính năng tương tác mạnh mẽ.
9
Trang 12Chương 3: Giao diện của chương trình
1.Giao diện Sign up
- Mục đích: Chỉ ra lý do việc thu thập thông tin cá nhân qua trang đăng kí tài khoảnlà cần thiết.
- Thông Tin Đăng Kí Tài Khoản+ Thông tin bắt buộc:
1 Tên (Name): Tên thường gọi của người dùng.
2 Email: Địa chỉ email dùng để liên lạc và đăng nhập vào tài khoản.3 Mật khẩu (Password): Mật khẩu được sử dụng để bảo vệ tài khoản.+ Thông tin tùy chọn:
4 Ngày Sinh (Date of Birth): Ngày, tháng, và năm sinh của ngườidùng.
5 Giới Tính (Gender): Giới tính của người dùng (nam, nữ, không xácđịnh, và còn các lựa chọn khác nếu có).
- Lý Do
+Thông tin cá nhân được thu thập với mục đích xác minh tài khoản, cungcấp dịch vụ, tạo trải nghiệm cá nhân hóa, và quản lý tài khoản người dùng.- Quyền Riêng Tư và Bảo Mật