Ứng dụng công nghệ express js và node js vào xây dựng website diễn đàn sinh viên

TRƯỜNG ĐẠI HỌC HỊA BÌNH KHOA CƠNG NGHỆ THƠNG TIN – ĐIỆN TỬ VIỄN THÔNG ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: ỨNG DỤNG CÔNG NGHỆ EXPRESS.JS VÀ NODE.JS VÀO XÂY DỰNG WEBSITE DIỄN ĐÀN SINH VIÊN Giảng viên hướng dẫn : ThS Nguyễn Thị Vân Sinh viên thực hiện: Hoàng Sành Châu Lớp: 519CNT Mã sinh viên: 519CNT003 Hà Nội, 20 tháng 06 năm 2023 Mục lục LỜI CẢM ƠN LỜI MỞ ĐẦU Danh mục bảng biểu Danh mục hình ảnh Danh mục từ viết tắt Chương I GIỚI THIỆU Giới thiệu website diễn đàn sinh viên Mục đích phạm vi đồ án Đối tượng phương pháp nghiên cứu 3.1 Đối tượng nghiên cứu 3.2 Phương pháp nghiên cứu Chương II CƠ SỞ LÝ THUYẾT 11 Các khái niệm, định nghĩa 11 1.1 Website 11 1.1 Frontend 11 1.2 Backend 12 1.3 Database 12 1.4 API 12 Các công nghệ, công cụ sử dụng dự án 13 2.1 Các công nghệ 13 2.2 Các công cụ 17 Chương III THIẾT KẾ HỆ THỐNG 19 Phân tích hệ thống 19 1.1 Tổng quan toàn trang web 19 1.2 Tổng quan trang chủ 20 1.3 Tổng quan trang chuyên mục 21 1.4 Tổng quan trang tiện ích 22 1.5 Tổng quan trang giới thiệu 22 Thiết kế sở liệu 23 2.1 Collection users 23 2.2 Collection topics 25 2.3 Collection posts 27 Chương IV CHƯƠNG TRÌNH THỰC NGHIỆM VÀ KIỂM THỬ 30 Thiết kế giao diện trang người dùng 30 1.1 Trang đăng nhập 30 1.2 Trang đăng ký 31 1.3 Trang chủ 32 1.4 Trang chuyên mục 33 1.5 Trang tiện ích 34 1.6 Trang giới thiệu 35 1.7 Trang cá nhân 35 1.8 Trang chi tiết viết 36 1.9 Trang đăng 37 Thiết kế giao diện trang quản trị 37 2.1 Trang thống kê 37 2.2 Trang quản lý tài khoản 38 2.3 Trang quản lý viết 39 2.4 Trang quản lý chuyên mục 40 Kiểm thử sửa lỗi hệ thống 41 3.1 Kiểm thử chức đăng ký 41 3.2 Kiểm thử chức đăng 43 Chương V KẾT LUẬN 45 Tổng kết đánh giá kết đạt 45 Những hạn chế khó khăn trình thực đề tài 45 Hướng phát triển cải tiến cho đề tài 45 TÀI LIỆU THAM KHẢO 47 Các tài liệu, tài liệu tham khảo sử dụng trình thực đồ án 47 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành đến quý thầy cô Trường Đại Học Hịa Bình, người dìu dắt em tận tình, truyền đạt cho em kiến thức học quý báu suốt thời gian em theo học trường Em xin trân trọng gửi lời cảm ơn đến tất thầy cô khoa Công Nghệ Thông Tin Điện Tử Viễn Thông, đặc biệt cô Ths.Nguyễn Thị Vân, cô tận tình hướng dẫn giúp đỡ em suốt trình làm đồ án tốt nghiệp Với bảo cơ, em có định hướng tốt việc triển khai thực yêu cầu trình làm đồ án tốt nghiệp Em xin cảm ơn người thân gia đình quan tâm, động viên tạo cho em điều kiện tốt suốt trình học tập làm tốt nghiệp Ngoài ra, em xin gửi lời cảm ơn tới tất bạn bè, đặc biệt bạn lớp 519CNT ln gắn bó, học tập giúp đỡ em năm qua suốt trình thực đồ án Em xin chân thành cảm ơn! LỜI MỞ ĐẦU Với phát triển không ngừng công nghệ, việc xây dựng website diễn đàn trở nên ngày phổ biến cần thiết hết Các diễn đàn trực tuyến cung cấp tảng cho sinh viên để chia sẻ, thảo luận học hỏi từ người khác cộng đồng Đây công cụ hữu ích giúp sinh viên tìm kiếm thơng tin, giải đáp thắc mắc, chia sẻ kinh nghiệm giao lưu với Trong đó, cơng nghệ NuxtJS ExpressJS hai công nghệ ưa chuộng việc phát triển website NuxtJS framework VueJS giúp xây dựng ứng dụng web tốt với tính tối ưu hóa SEO, tối ưu hóa hiệu suất khả tái sử dụng cao ExpressJS framework NodeJS, giúp xây dựng ứng dụng web nhanh đáng tin cậy với khả xử lý đồng thời cao Vì vậy, đề tài này, em sử dụng công nghệ NuxtJS ExpressJS để xây dựng website diễn đàn sinh viên chuyên nghiệp, tiện lợi hiệu Đây bước tiến việc ứng dụng công nghệ tiên tiến nhằm cung cấp cho sinh viên tảng tốt để học tập giao lưu với Danh mục bảng biểu Bảng Mô tả Bảng 1.1 Collection users Bảng 1.2 Collection topics Bảng 1.3 Collection posts Bảng 1.4 Kiểm thử chức đăng ký Bảng 1.5 Kiểm thử chức đăng viết Danh mục hình ảnh Hình Mơ tả Hình 1.1 Mơ hình website Hình 1.2 Các cơng nghệ lập trình Hình 1.3 Các code editor Hình 2.1 Biểu đồ tổng quan tồn phần người dùng Hình 2.2 Biểu đồ tổng quan tồn phần quản trị website Hình 2.3 Tổng quan trang chuyên mục Hình 2.4 Tổng quan trang tiện ích Hình 2.5 Tổng quan trang giới thiệu Hình 2.6 Tổng quan cấu trúc sở liệu Hình 3.1 Trang đăng nhập Hình 3.2 Trang đăng ký Hình 3.3 Trang chủ Hình 3.4 Chức tìm kiếm tài khoản Hình 3.5 Trang chun mục Hình 3.6 Trang tiện ích Hình 3.7 Trang giới thiệu Hình 3.8 Trang cá nhân Hình 3.9 Trang chỉnh sửa thơng tin nhân Hình 3.10 Trang chi tiết viết Hình 3.11 Trang đăng viết Hình 4.1 Trang thống kê Hình 4.2 Trang quản lý tài khoản Hình 4.3 Chức chỉnh sửa thơng tin tài khoản Hình 4.4 Trang quản lý tài khoản Hình 4.5 Trang quản lý chuyên mục Hình 4.6 Báo lỗi chức đăng ký Hình 4.7 Biểu đồ test case đăng ký Hình 4.8 Biểu đồ test case đăng Danh mục từ viết tắt Tên từ viết tắt Ỹ nghĩa từ viết tắt HTML HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản, sử dụng để xây dựng định dạng trang web CSS Cascading Style Sheets - Ngôn ngữ định dạng kiểu trang, sử dụng để tạo kiểu trang trí cho trang web Frontend Phần giao diện người dùng ứng dụng trang web, bao gồm HTML, CSS JavaScript, hiển thị tương tác trực tiếp với người dùng Backend Phần xử lý quản lý liệu, xử lý logic cung cấp dịch vụ cho phía frontend, thường triển khai máy chủ sử dụng ngôn ngữ Node.js, Python, PHP, Ruby, v.v Database Hệ quản trị sở liệu, sử dụng để lưu trữ, quản lý truy xuất liệu, ví dụ MySQL, MongoDB, PostgreSQL, v.v API Một framework JavaScript để xây dựng giao diện người dùng ứng dụng web đơn trang (Single-Page Applications) hiệu dễ sử dụng NuxtJS Một framework phát triển ứng dụng web phía máy khách (client-side) xây dựng Vue.js, giúp xây dựng ứng dụng web tĩnh động dễ dàng hiệu VueJS: Một framework JavaScript để xây dựng giao diện người dùng ứng dụng web đơn trang (Single-Page Applications) hiệu dễ sử dụng VueJS Một framework JavaScript để xây dựng giao diện người dùng ứng dụng web đơn trang (Single-Page Applications) hiệu dễ sử dụng Vs Code Visual Studio Code - Một trình biên tập mã nguồn mở miễn phí phát triển Microsoft, hỗ trợ nhiều ngơn ngữ lập trình cung cấp nhiều tính tiện ích hữu ích cho lập trình viên NodeJS Một mơi trường chạy mã JavaScript phía máy chủ (server-side), cho phép lập trình viên xây dựng ứng dụng web dịch vụ mạng phía máy chủ JavaScript CSDL Cơ sở liệu Hình 3.4: chức tìm kiếm tài khoản Người dùng nhập từ khóa tìm kiếm: Tên tên đăng nhập kết tìm kiếm tương ứng nhấn vào tài khoản để chuyển trang chi tiết tài khoản 1.4 Trang chuyên mục Hình 3.5: Trang chuyên mục Trang cung cấp cho người dùng chuyên mục có diễn đàn gồm thơng tin: 33 • Nhóm chun mục • Tên chuyên mục • Mô tả chuyên mục • Số lượng viết chuyên mục • Bài viết chuyên mục Người dùng nhấn vào tên viết để truy cập đến trang chi tiết viết 1.5 Trang tiện ích Hình 3.6: Trang tiện ích Trang cung cấp cho người dùng tiện ích có diễn đàn ví dụ như: Chia thời khóa biểu, chuyển đổi tiền tệ… 34 1.6 Trang giới thiệu Hình 3.7: trang giới thiệu Trang giới thiệu diễn đàn, lợi ích, mục đích phát triển, kim nam, đội ngũ phát triển diễn đàn thông tin khác 1.7 Trang cá nhân Hình 3.8: trang cá nhân Trang hiển thị người dùng: • Tên đăng nhập 35 • Tên hiển thị • Tất viết người dùng • Những người theo dõi • Những người theo dõi Trường hợp người dùng tự vào trang cá nhân có nút chỉnh sửa thông tin cá nhân, nhấn nút để truy cập trang chỉnh sửa thơng tin cá nhân Hình 3.9: Trang chỉnh sửa thơng tin nhân Người dùng cập nhật ảnh đại diện, tên hiển thị số điện thoại 1.8 Trang chi tiết viết Hình 3.10: trang chi tiết viết 36 Trang hiển thị chi tiết viết gồm: • Tiêu đề viết • Chuyên mục viết • Nội dung viết • Người đăng • Số lượt thích viết • Các bình luận viết Người dùng bình luận, tương tác like bình luận 1.9 Trang đăng Hình 3.11: trang đăng viết Người dùng chọn chuyên mục, nhập tiêu đề, nội dung viết sau nhấn đăng để tạo viết Thiết kế giao diện trang quản trị 2.1 Trang thống kê 37 Hình 4.1: Trang thống kê Trang hiển thị cho quản trị viên thông tin diễn đàn Chỉ cấp bậc tài khoản quản trị viên có quyền vào trang quản trị • Tổng số chuyên mục diễn đàn • Tổng số viết • Tổng số thành viên • Tổng số lượt truy cập trung bình vào diễn đàn 2.2 Trang quản lý tài khoản Hình 4.2: trang quản lý tài khoản 38 Trang hiển thị toàn danh sách tài khoản diễn đàn, quản trị viên thao tác: chỉnh sửa xóa tài khoản Hình 4.3: Chức chỉnh sửa thơng tin tài khoản Các liệu chỉnh sửa gồm: • Tên hiển thị • Cấp bậc tài tài khoản: Thành viên (member), Quản trị viên (admin) • Email tài khoản • Số điện thoại tài khoản • Mật tài khoản 2.3 Trang quản lý viết 39 Hình 4.4: trang quản lý viết Trang hiển thị tồn đăng có diễn đàn, gồm thơng tin: • Tên người đăng • Tiêu đề đăng • Chuyên mục đăng • Thời gian đăng 2.4 Trang quản lý chuyên mục Hình 4.5: trang quản lý chuyên mục 40 Trang hiển thị toàn danh sách chuyên mục diễn đàn gồm: • Nhóm chun mục • Tiêu đề chuyên mục • Tổng số viết chuyên mục • Thời gian tạo chuyên mục Kiểm thử sửa lỗi hệ thống 3.1 Kiểm thử chức đăng ký Bảng 1.4: kiểm thử chức đăng ký Trường hợp Các bước thực Kết - Nhập đầy đủ xác trường liệu - Nhập tài khoản - Người dùng thông báo đăng ký thành công - Nhập email - Nhập mật - Nhập lại mật - Tự động chuyển đến trang đăng nhập - Sau nhấn nút đăng ký - Không nhập trường liệu - Người dùng nhấn trực tiếp nút đăng ký mà để trống tất trường liệu - Sẽ có thơng báo lỗi tương ứng bên nhập liệu - Không nhập tên khoản - Người dùng nhập trường khác xác bỏ trống trường tài khoản - Thông báo lỗi: trường liệu bắt buộc - Nhập kí tự - Nhập tên tài khoản bắt đầu kí tự số - Nhập vào kí tự - Thơng báo lỗi: tài khoản phải từ đến 12 kí tự - Nhập vào: 56admin - Thông báo lỗi: tài khoản không bắt đầu số - Không nhập email - Bỏ trống trường email - Nhập email không định dạng - Nhập email: test.com - Thông báo lỗi: trường liệu bắt buộc - Thông báo lỗi: email không định dạng 41 - Bỏ trống trường mật - Thông báo lỗi: trường liệu bắt buộc - Nhập vào: 123 - Thông báo lỗi: mật phải có kí tự - Khơng nhập trường nhập lại mật - Bỏ trống trường nhập lại mật - Thông báo lỗi: trường liệu bắt buộc - Nhập lại mật không khớp Nhập vào: 12345 - Thông báo lỗi: nhập lại mật không xác - Khơng nhập mật - Nhập mật kí tự Hình 4.6: biểu đồ test case đăng ký 42 Hình 4.7: báo lỗi chức đăng ký 3.2 Kiểm thử chức đăng Bảng 1.5: kiểm thử chức đăng Trường hợp Các bước thực Kết - Nhập đầy đủ xác trường liệu - Chọn chuyên mục - Thông báo: đăng thành công tự động chuyển đến trang chủ - Nhập tiêu đề viết - Nhập nội dung viết - Nhấn vào nút đăng - Khơng nhập trường liệu - Nhấn nút đăng mà để trống tất trường liệu - Thông báo lỗi: trường liệu bắt buộc ô input tương ứng - Không chọn chuyên mục - Nhấn nút đăng mà - Thông báo lỗi: trường không chọn chuyên mục liệu bắt buộc 43 - Không nhập tiêu đề - Bỏ trống xóa hết viết tiêu đề - Thông báo lỗi: trường liệu bắt buộc - Nhập tiêu đề kí tự - Nhập vào: Bài - Thông báo lỗi: tiêu đề phải kí tự - Không nhập nội dung viết - Bỏ trống xóa hết nội dung - Thông báo lỗi: trường liệu bắt buộc - Nhập nội dung 10 kí tự - Nhập vào: Nội dung - Thông báo lỗi: nội dung phải 10 kí tự Hình 4.8: biểu đồ test case đăng 44 Chương V KẾT LUẬN Tổng kết đánh giá kết đạt Trong trình thực đề tài xây dựng website diễn đàn sinh viên, em đạt kết quan trọng Trước hết, em thành công việc xây dựng hệ thống website diễn đàn sinh viên hoàn chỉnh hoạt động ổn định Trang web cung cấp cho sinh viên tảng chia sẻ thơng tin Người dùng tạo tài khoản, đăng nhập, đăng bài, tham gia thảo luận, tìm kiếm nội dung trang web Giao diện người dùng thiết kế thân thiện, dễ sử dụng thân thiện với người dùng Những hạn chế khó khăn q trình thực đề tài Trong trình thực đề tài, em gặp số hạn chế khó khăn Đầu tiên, việc xây dựng website diễn đàn sinh viên đòi hỏi kiến thức kỹ chuyên sâu lập trình phát triển web em phải tìm hiểu nắm vững công nghệ framework HTML, CSS, JavaScript, NuxtJS, ExpressJS Thời gian công sức đầu tư để nghiên cứu áp dụng công nghệ thách thức đáng kể Ngoài ra, việc xử lý quản lý liệu website gặp số khó khăn em phải thiết kế triển khai sở liệu phù hợp để lưu trữ thông tin người dùng viết Đồng thời, em phải đảm bảo tính bảo mật quyền riêng tư người dùng việc xử lý lưu trữ liệu Hướng phát triển cải tiến cho đề tài Để nâng cao chất lượng tính website diễn đàn sinh viên, em đề xuất số hướng phát triển cải tiến sau: • Tăng tính tương tác: Phát triển tính tương tác hệ thống bình luận, đánh giá, kết bạn để tăng cường giao tiếp tương tác thành viên trang web • Tối ưu hóa trải nghiệm người dùng: Cải thiện giao diện người dùng, tăng tốc độ tải trang, tăng tính responsivity để mang lại trải nghiệm tốt cho người dùng sử dụng trang web • Phát triển ứng dụng di động: Xây dựng ứng dụng di động cho trang web diễn đàn sinh viên, giúp người dùng truy cập sử dụng dịch vụ cách tiện lợi điện thoại di động • Mở rộng chức khả tích hợp: Kết hợp tính hệ thống thơng báo, quảng cáo, tích hợp với dịch vụ ứng dụng khác để nâng cao trải nghiệm người dùng tăng tính ứng dụng trang web 45 • Tăng cường bảo mật: Đảm bảo an tồn liệu thơng tin cá nhân người dùng cách triển khai biện pháp bảo mật mã hóa liệu, xác thực hai bước, quản lý quyền truy cập Tóm lại, việc xây dựng website diễn đàn sinh viên đem lại kết tích cực cung cấp tảng tương tác chia sẻ thông tin hữu ích cho cộng đồng sinh viên Tuy nhiên, việc phát triển cải tiến cần tiếp tục để đáp ứng nhu cầu ngày cao người dùng mang lại trải nghiệm tốt cho họ 46 TÀI LIỆU THAM KHẢO Các tài liệu, tài liệu tham khảo sử dụng trình thực đồ án Jon Duckett, HTML and CSS: Design and Build Websites (2011) Eric Freeman Elisabeth Robson, Head First JavaScript Programming: A Brain-Friendly Guide (2014) Nuxt3 Documentation: https://nuxtjs.org/docs Express.js Documentation: https://expressjs.com MongoDB Documentation: https://docs.mongodb.com Node.js Documentation: https://nodejs.org/en/docs HTML and CSS Documentation: https://developer.mozilla.org 47