Đồ án cơ sở 1 thiết kế forum cho sinh viên

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ THIẾT KẾ FORUM CHO SINH VIÊN Sinh viên thực hiện: Trần Lê Nhất Gô Lớp: 22ITe Giảng viên hướng dẫn: TS Lê Thị Thu Nga Đà Nẵng, tháng 05 năm 2021 Thiết kế website forum ii TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ THIẾT KẾ FORUM CHO SINH VIÊN Sinh viên thực hiện: Trần Lê Nhất Gô Lớp: 22ITe Giảng viên hướng dẫn: TS Lê Thị Thu Nga Đà Nẵng, tháng 05 năm 2021 Khoa Khoa học máy tính Thiết kế website forum NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… Khoa Khoa học máy tính iii Thiết kế website forum iv LỜI CẢM ƠN Trong th>i gian làm đA án, nhóm em đD nh⌀n đưFc nhiGu gi甃Āp đJ, đóng góp 礃Ā kiĀn chN bảo nhiệt tPnh cQa thRy cô b愃⌀n bV Em xin gYi l>i cảm ơn chân thành đĀn cô TS Lê Thị Thu Nga ngư>i đD t⌀n tPnh hướng dẫn, chN d愃⌀y nhóm em suĀt trPnh thực ĐA án sở Em xin chân thành cảm ơn cô đD hỗ trF, gi甃Āp nhóm em thực đA án lRn Nhóm em xin chân thành cảm ơn! Khoa Khoa học máy tính Thiết kế website forum v MỤC LỤC Danh mục từ viết tắt vii Danh mục hình vẽ viii Mở Đầu 1 Giới thiệu Mục tiêu, nhiệm vụ cQa đG tài Phương pháp nghiên cứu Ph愃⌀m vi nghiên cứu BĀ cục cQa lu⌀n văn Chương TỔNG QUAN VỀ ĐỀ TÀI Tổng quan vG forum trực tuyĀn 1.1 Khái niệm forum trực tuyĀn .3 1.2 Các đặc trưng cQa forum trực tuyĀn Các công cụ để xây dựng website 2.1 Khái quát vG HTML .3 2.1.1 Khái quát .4 2.1.2 Ưu, nhược điểm .5 2.2 Khái quát vG CSS .5 2.2.1 Khái quát .5 2.2.2 Ưu, nhược điểm .6 2.3 Khái quát vG Bootstrap .7 2.3.1 Khái quát .7 Khoa Khoa học máy tính Thiết kế website forum vi 2.3.2 Ưu, nhược điểm .7 2.4 Khái quát vG JavaScript 2.3.1 Khái quát .8 2.3.2 Ưu, nhược điểm .8 KĀt chương Chương PHÂN TÍCH THIẾT KẾ WEBSITE 10 Xác định yêu cRu 10 1.1 ĐĀi với admin 10 1.2 ĐĀi với ngư>i dùng 10 Phân tích yêu cRu 10 2.1 Đặc tả use case .10 2.2 Use case diagram 14 Chương XÂY DỰNG WEBSITE 16 Cấu tr甃Āc folder dự án .16 Demo sản phẩm 17 2.1 Trang ChQ .17 2.2 Trang ChQ đG 18 KẾT LUẬN 20 KĀt đ愃⌀t đưFc 20 Hướng phát triển 20 TÀI LIỆU THAM KHẢO i Khoa Khoa học máy tính Thiết kế website forum vii DANH MỤC CÁC TỪ VIẾT TẮT VIẾT TẮT NỘI DUNG HTML HyperText Markup Language CSS Cascading Style Sheets JS JavaScript Khoa Khoa học máy tính Thiết kế website forum viii DANH MỤC HÌNH VẼ Hình 2.1 Use case đăng kí 14 Hình 2.2 Use case đăng kí 15 Khoa Khoa học máy tính Thiết kế website forum MỞ ĐẦU Giới thiệu ThĀ kỷ XXI, ngư>i ch甃Āng ta có nhu cRu kĀt nĀi với ngư>i xung quanh với phát triển cQa công nghệ internet hiện, ch甃Āng ta hồn tồn làm điGu với xuất cQa trang web forum, chat Chính vP v⌀y ph愃⌀m vi ĐA Án Cơ Sở 1, nhóm em chọn đG tài “ThiĀt kĀ website forum” gi甃Āp ngư>i giao tiĀp chia sẻ với cách dễ dàng ,nhanh chóng hiệu Mục tiêu, nhiệm vụ đề tài Mục tiêu cQa đG tài nhằm: - Xây dựng giao diện bên ngồi cQa website forum - Nắm bắt đưFc cơng nghệ thiĀt kĀ Website HTML, CSS, JavaScript - Website hiển thị thông tin mà ngư>i dùng muĀn xem cách rõ ràng - Website đơn giản, dễ nhPn Đối tượng, phạm vi phương pháp tiếp cận Phương pháp nghiên cứu l礃Ā lu⌀n: - Nghiên cứu qua việc đọc sách, báo, tài liệu liên quan nhằm xây dựng sở l礃Ā thuyĀt cQa đG tài biện pháp cRn thiĀt để giải quyĀt vấn đG cQa đG tài Phương pháp nghiên cứu thực nghiệm: - Thông qua quan sát thực tĀ, yêu cRu cQa sở l礃Ā lu⌀n đưFc nghiên cứu, Website đưFc đưa vào ho愃⌀t động từ có điGu chNnh phù hFp Ph愃⌀m vi nghiên cứu Khoa Khoa học máy tính Thiết kế website forum Đóng góp đề tài Ph愃⌀m vi thực đA án dựa kiĀn thức thu đưFc từ môn học trPnh học t⌀p t愃⌀i trư>ng tham khảo thêm sĀ tài liệu bên để bổ sung thêm kiĀn thức nhằm hồn thiện đA án tơt hơn, đáp ứng đưFc mục tiêu đA án Bố cục đề tài Sau phRn Mở đRu, báo cáo đưFc trPnh bày 03 chương, cụ thể sau: Chương Tổng quan vG đG tài Chương Phân tích thiĀt kĀ Website Chương 3.Xây dựng Website CuĀi KĀt lu⌀n Tài liệu tham khảo liên quan đĀn đG tài Khoa Khoa học máy tính Thiết kế website forum - JS ho愃⌀t động nhiGu nGn tảng trPnh duyệt web khác - ĐưFc chuyên gia đánh giá lo愃⌀i ngôn ngữ l⌀p trPnh nhẹ nhanh nhiGu so với ngơn ngữ l⌀p trPnh khác - JS cịn đưFc gắn sĀ element events cQa trang web - Những Website có sY dụng JS thP ch甃Āng gi甃Āp cho trang web có tương tác tăng thêm nhiGu trải nghiệm cho ngư>i dùng - Ngư>i dùng t⌀n dụng JS với mục đích để kiểm tra input thay vP cách kiểm tra thQ công thông qua ho愃⌀t động truy xuất database - Giao diện cQa ứng dụng phong ph甃Ā với nhiGu thành phRn Drag and Drop, Slider để cung cấp đĀn cho ngư>i dùng Rich Interface (giao diện giàu tính năng) - Gi甃Āp thao tác với ngư>i dùng phía Client tách biệt Client với Nhược điểm: - JS Code Snippet lớn - JS dễ bị hacker scammer khai thác - JS khả đa luAng đa d愃⌀ng xY l礃Ā - Có thể đưFc dùng để thực thi mD độc máy tính cQa ngư>i sY dụng - Những thiĀt bị khác thực JS khác nhau, từ dẫn đĀn khơng đAng - VP tính bảo m⌀t an tồn nên Client-Side Javascript không cho phép đọc ghi file - JS không đưFc hỗ trF b愃⌀n sY dụng tPnh tr愃⌀ng thiĀt bị đưFc kĀt nĀi m愃⌀ng Kết chương Thông qua việc tPm hiểu khái quát ưu nhưFc điểm cQa công cụ, từ làm sở để phân tích , thiĀt kĀ phRn cQa trang web đưFc trPnh bày chương tiĀp theo Khoa Khoa học máy tính Thiết kế website forum Khoa Khoa học máy tính 10 Thiết kế website forum 11 Chương PHÂN TÍCH THIẾT KẾ WEBSITE Xác định yêu cầu 1.1 Đối với admin - Đăng k礃Ā - Đăng nh⌀p - Quản l礃Ā chQ đG - Quản l礃Ā viĀt - Quản l礃Ā trang quảng cáo - Quản l礃Ā tài khoản ngư>i dùng - Đăng chNnh sYa viĀt - Tương tác với viĀt khác - Xóa ngư>i dùng 1.2 Đối với người dùng - Đăng k礃Ā - Đăng nh⌀p - Hiển thị danh sách chQ đG - Hiển thị danh sách viĀt - Đăng chNnh sYa viĀt - Tương tác với viĀt khác Phân tích yêu cầu 2.1 Đặc tả use case 2.1.1 Use case đăng ký - Tác nhân: admin, ngư>i dùng - Mục đích: Đăng kí tài khoản để sY dụng website - TiGn điGu kiện: Ngư>i dùng chưa có tài khoản có nhu cRu đăng kí tài khoản website Khoa Khoa học máy tính Thiết kế website forum 12 - H⌀u điGu kiện: Đăng kí thành cơng tài khoản ngư>i dùng có sở liệu - Mô tả: Khi ngư>i dùng nhấn vào đăng k礃Ā, hệ thĀng thị form đăng k礃Ā yêu cRu ngư>i dùng nh⌀p thông tin Sau ngư>i dùng nh⌀p thông tin, nhấn “đăng k礃Ā”, hệ thĀng kiểm tra thông tin NĀu hFp lệ thông báo đD đăng k礃Ā thành công c⌀p nh⌀t sở dự liệu NĀu thông tin không hFp lệ, hệ thĀng yêu cRu ngư>i dùng nh⌀p l愃⌀i thông tin Action of actor Action of system Người dùng ấn đăng ký Hiển thị form đăng ký yêu cầu người dùng nhập thông tin Người dùng nhập thông tin Hệ thống kiểm tra thông tin (trường hợp hợp lệ) Thông báo “Đăng ký thành công” Trường hợp không hợp lệ: Hệ thống kiểm tra thông tin (trường hợp không hợp lệ) Yêu cầu người dùng nhập lại thông tin 6.Người dùng nhập lại thông tin 2.1.2 Use case đăng nhập - Tác nhân: admin, ngư>i dùng - Mục đích: Đăng nh⌀p tài khoản đD t愃⌀o vào website - TiGn điGu kiện: Ngư>i dùng có nhu cRu đăng nh⌀p vào hệ thĀng có tài khoản đD tAn t愃⌀i sở liệu - H⌀u điGu kiện: Đăng nh⌀p vào hệ thĀng thành công - Mô tả: Khi ngư>i dùng nhấn vào đăng nh⌀p, hệ thĀng thị form đăng nh⌀p yêu cRu ngư>i dùng nh⌀p thông tin Sau ngư>i dùng nh⌀p thông tin, nhấn “đăng nh⌀p”, hệ thĀng kiểm tra thông tin NĀu hFp lệ thông báo đD đăng nh⌀p thành công NĀu thông tin không hFp lệ, hệ thĀng yêu cRu ngư>i dùng nh⌀p l愃⌀i thông tin Khoa Khoa học máy tính Thiết kế website forum 13 Action of actor Action of system Người dùng ấn đăng nhập Hiển thị form đăng nhập yêu cầu người dùng nhập thông tin Người dùng nhập thông tin Hệ thống kiểm tra thông tin (trường hợp hợp lệ) Thông báo “Đăng nhập thành công” Trường hợp không hợp lệ: Hệ thống kiểm tra thông tin (trường hợp không hợp lệ) Yêu cầu người dùng nhập lại thông tin Người dùng nhập lại thơng tin 2.1.3 Use case tìm kiếm chủ đề, viết - Tác nhân: admin, ngư>i dùng - Mục đích: TPm kiĀm hiển thị chQ đG phù hFp với từ khóa tPm kiĀm forum - TiGn điGu kiện: Ngư>i dùng ấn vào tPm kiĀm - H⌀u điGu kiện: Nội dung ngư>i dùng tPm kiĀm đưFc hiển thị website - Mô tả: Use-case cho phép ngư>i dùng tPm sản phẩm có hệ thĀng Action of actor Action of system Người dùng ấn tìm kiếm Hiển thị giao diện tìm kiếm, bao gồm forum nhập từ khóa nút tìm kiếm Nhập từ khóa tìm kiếm vào nhập Xử lý u cầu tìm kiếm hiển thị kết từ khóa ấn nút tìm kiếm tìm kiếm Hiển thị danh sách chủ đề, viết phù hợp với từ khóa tìm kiếm Ngoại lệ: Tìm kiếm thông tin nhập so với sở liệu (giả sử thơng tin sản phẩm khơng có sở liệu) Hiển thị thông báo không tìm thấy kết Khoa Khoa học máy tính Thiết kế website forum 14 2.1.3 Use case hiển thị chủ đề, viết - Tác nhân: admin, ngư>i dùng - Mục đích: Hiển thị chQ đG viĀt có forum cho ngư>i dùng - TiGn điGu kiện: Ngư>i dùng truy c⌀p vào trang chQ forum hay trang chQ đG - H⌀u điGu kiện: Hiển thị thông tin chQ đG viĀt - Mô tả: Khi ngư>i dùng truy c⌀p vào trang chQ forum thP hệ thĀng hiển thị danh sách chQ đG Sau ngư>i dùng chọn vào chQ để , hệ thĀng hiển thị danh sách viĀt Action of actor Action of system Người dùng truy cập vào trang chủ Hiển thị danh sách chủ đề forum Tùy chọn vào chủ đề Hiển thị danh sách thông tin viết chủ đề 2.1.4 Use case đăng chỉnh sửa viết - Tác nhân: admin, ngư>i dùng - Mục đích: Ngư>i dùng đăng viĀt chQ đG chNnh sYa viĀt đD đăng - TiGn điGu kiện: Ngư>i dùng đD đăng nh⌀p tài khoản - H⌀u điGu kiện: Ngư>i dùng đăng viĀt chNnh sYa nội dung cQa viĀt đD có forum - Mơ tả: Ngư>i dùng chọn “Đăng viĀt” “SYa viĀt” Hệ thĀng hiển thị cYa sổ thông tin để ngư>i dùng nh⌀p Sau ngư>i dùng nh⌀p hay sYa thông tin viĀt nhấn n甃Āt lưu Hệ thĀng lưu c⌀p nh⌀p thông tin viĀt vG hệ thĀng hiển thị danh sách viĀt Action of actor Action of system Người dùng tùy chọn “Đăng Hiển thị giao diện cho phép người dùng viết” “Sửa viết” nhập nội dung Nhập tiêu đề, nội dung văn bản, đính kèm hình ảnh Nhấn nút Lưu để đăng lê hệ thống Khoa Khoa học máy tính Hệ thống nhận thông tin nhập lưu Thiết kế website forum 15 lên sở liệu Hiển thị viết đăng chỉnh sửa lên forum 2.1.5 Use case quản lý tài khoản người dùng Tác nhân: admin Mục đích: Admin quản l礃Ā tài khoản ngư>i dùng forum, bao gAm t愃⌀o tài khoản, cấp quyGn, khóa tài khoản, xóa tài khoản TiGn điGu kiện: Đăng nh⌀p vào hệ thĀng đảm bảo thành công H⌀u điGu kiện: Thực chức thành công Mô tả: Khi admin đăng nh⌀p vào hệ thĀng để xem tài khoản ngư>i dùng Hệ thĀng hiển thị danh sách tài khoản ngư>i dùng Ngư>i quản l礃Ā tuỳ chọn chức có hệ thĀng Action of actor Action of system Đăng nhập vào hệ thống Hiển thị danh sách tài khoản Lựa chọn tài khoản chức Lưu thông tin vào sở liệu Hệ thống hiển thị kết Khoa Khoa học máy tính Thiết kế website forum 16 2.2 Use case diagram 2.2.1 Đăng ký Hình 2-1 Use case đăng ký 2.2.2 Đăng nhập Hình 2-2 Use case đăng nhập Khoa Khoa học máy tính Thiết kế website forum Chương XÂY DỰNG WEBSITE Cấu trúc folder dự án Khoa Khoa học máy tính 17 Thiết kế website forum Demo sản phẩm 2.1 Trang chủ Khoa Khoa học máy tính 18 Thiết kế website forum - Side bar 2.2 Trang Chủ đề - T愃⌀o viĀt Khoa Khoa học máy tính 19 Thiết kế website forum Khoa Khoa học máy tính 20 Thiết kế website forum Khoa Khoa học máy tính 21 Thiết kế website forum 22 KẾT LUẬN Kết đạt Với phát triển cQa khoa học công nghệ thP việc kĀt nĀi với ngư>i từ khoảng cách xa khơng cịn bất tiện Hiện nay, diễn đàn forum không cịn gi甃Āp ích ngư>i chia sẻ 礃Ā kiĀn quan điểm với ngư>i khác Hiện việc website diễn đàn forum điện tY Việt Nam chN đáp ứng đưFc sĀ vấn đG bản, chưa đưFc linh ho愃⌀t Việc ứng dụng địi h•i phải tĀn nhiGu th>i gian tiGn b愃⌀c Với kiĀn thức nGn tảng đD đưFc học trư>ng nỗ lực cQa mPnh, nhóm em đD hoàn thành đG tài “ThiĀt kĀ forum cho sinh viên” Mặc dù đD cĀ gắng đRu tư nhiGu th>i gian có h愃⌀n nên đG tài cịn nhiGu h愃⌀n chĀ Nhóm em mong nh⌀n đưFc thơng cảm góp 礃Ā cQa qu礃Ā thRy b愃⌀n để chương trPnh ngày hồn thiện Nội dung đề tài đạt được: - TPm hiểu tổng quan ứng dụng website forum - TPm hiGu công cụ cộng xây dựng giao diện l⌀p trPnh Website Hướng nghiên cứu - Xây dựng thêm nhiGu chức nhắn tin cá nhân - Xây dựng giao diện đẹp hơn, thân thiện với ngư>i dùng - KĀt hFp Cơ sở liệu vào website Khoa Khoa học máy tính Thiết kế website forum i TÀI LIỆU THAM KHẢO W3Schools (n.d.) Retrieved https://www.w3schools.com/css/default.asp from W3Schools (n.d.) Retrieved https://www.w3schools.com/js/default.asp from W3Schools (n.d.) Retrieved https://www.w3schools.com/html/default.asp from W3Schools (n.d.) Retrieved https://www.w3schools.com/bootstrap5/index.php from