Xây dựng website trao nhận học bổng cho sinh viên đồ án tốt nghiệp

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÌNH DƯƠNG KHOA CƠNG NGHỆ THƠNG TIN, ROBOT VÀ TRÍ TUỆ NHÂN TẠO  ĐỒ ÁN TỐT NGHIỆP XÂY DỤNG WEBSITE TRAO NHẬN HỌC BỔNG CHO SINH VIÊN Giảng viên hướng dẫn: Bùi Văn Chuyên Người thực thiện: Nguyễn Thành Quang Lớp: 21TH01 Khóa: 21 Bình Dương, Ngày … tháng … năm 2023 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÌNH DƯƠNG KHOA CƠNG NGHỆ THƠNG TIN, ROBOT VÀ TRÍ TUỆ NHÂN TẠO  ĐỀ TÀI XÂY DỤNG WEBSITE TRAO NHẬN HỌC BỔNG CHO SINH VIÊN Giảng viên hướng dẫn: Bùi Văn Chuyên Người thực thiện: Nguyễn Thành Quang Lớp: 21TH01 Khóa: 21 Bình Dương, Ngày ….tháng… năm 2023 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN …………………………………………………………………………………………………………… ………………………………………………………………………… …… ………………………………………………………………… …………… ………………………………………………………… …………………… ………………………………………………… …………………………… ………………………………………… …………………………………… ………………………………… …………………………………………… ………………………… …………………………………………………… ………………… …………………………………………………………… ………… …………………………………………………………………… … ……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… … …………………………………………………………………… ………… …………………………………………………………… ………………… …………………………………………………… ………………………… …………………………………………… ………………………………… …………………………………… ………………………………………… …………………………… ………………………………………………… …………………… ………………………………………………………… …………… ………………………………………………………………… …… ……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… ……………………………………………………………………… Bình Dương, ngày …… tháng …… năm 2023 Giáo viên hướng dẫn Trang / 45 DANH MỤC TỪ VIÊT TẮT SEO: Search engine optimization - Tối ưu hóa cơng cụ tìm kiếm q trình tăng chất lượng lưu lượng truy cập website cách tăng khả hiển thị website webpage cho người dùng máy truy tìm liệu Google, Bing, Yahoo, HTTP: HyperText Transfer Protocol - giao thức truyền tải siêu văn sử dụng www dùng để truyền tải liệu Web server đến trình duyệt Web ngược lại REST: REpresentational State Transfer - dạng chuyển đổi cấu trúc liệu, kiểu kiến trúc để viết API Trang / 45 DANH MỤC HÌNH ẢNH Hình ảnh: Khảo sát bdu.edu.vn 14 Hình ảnh: Khảo sát idp.com 15 Hình ảnh: Khảo sát daihoc.fpt.edu.vn 15 Hình ảnh: Restful api 19 Hình ảnh: Cách hoạt động restful api 20 Hình ảnh: Lược đồ chức quản trị viên 22 Hình ảnh: Lược đồ chức trường/ công ty 23 Hình ảnh: Lược đồ chức sinh viên 23 Hình ảnh: Lược đồ sở liệu 24 Hình ảnh: 10 Bảng contact 24 Hình ảnh: 11 Bảng company 25 Hình ảnh: 12 Bảng form 26 Hình ảnh: 13 Bảng news 26 Hình ảnh: 14 Bảng role 27 Hình ảnh: 15 Bảng save scholaship 27 Hình ảnh: 16 Bảng scholaship 28 Hình ảnh: 17 Bảng tag news 29 Hình ảnh: 18 Bảng tag 29 Hình ảnh: 19 Bảng tag scholaship 30 Hình ảnh: 20 Bảng user role 30 Hình ảnh: 21 Bảng user 31 Hình ảnh: 22 Trang chủ 32 Hình ảnh: 23 Trang tìm kiếm 32 Hình ảnh: 24 Trang tin tức 33 Hình ảnh: 25 Trang quy định điều khoản 33 Hình ảnh: 26 Trang about 34 Hình ảnh: 27 Giao diện quản lý 34 Hình ảnh: 28 Trang quản lý tin tức 35 Hình ảnh: 29 Trang thêm tin tức 35 Hình ảnh: 30 Trang quản lý học bổng 36 Hình ảnh: 31 Trang quản lý trường/cơng ty 36 Trang / 45 Hình ảnh: 32 Trang sinh viên cần tư vấn 37 Hình ảnh: 33 Trang sinh viên đăng ký 37 Hình ảnh: 34 Cài đặt xampp 38 Hình ảnh: 35 Cấu hình env backend 38 Hình ảnh: 36 Quy trình kiểm thử 39 Hình ảnh: 37 Quy trình chạy kiểm thử 40 Trang / 45 Mục lục DANH MỤC TỪ VIÊT TẮT DANH MỤC HÌNH ẢNH LỜI CẢM ƠN TÓM TẮT ĐỀ TÀI PHIẾU THEO DÕI TIẾN ĐỘ THỰC HIỆN 10 PHẦN MỞ ĐẦU 12 Tính cấp thiết đề tài 12 Mục tiêu đề tài 12 Phương pháp thực 12 PHẦN NỘI DUNG 14 CHƯƠNG I: KHẢO SÁT HIỆN TRẠNG 14 Phân tích trạng 14 Khảo sát số trang web 14 Phân tích yêu cầu dự án 15 Danh sách chức nghiệp vụ 16 Danh sách chức hệ thống 16 Chương II: Cơ sở lý thuyết 18 Next.js 18 Laravel 18 Restful API 18 Chương III: Mơ hình hóa u cầu 22 Lược đồ chức 22 Chương IV: Thiết kế hệ thống 24 Thiết kế sở liệu 24 Thiết kế giao diện 31 Chương V: Cài đặt kiểm thử hệ thống 38 Cài đặt 38 Kiểm thử phần mềm 39 PHẦN KẾT LUẬN 41 Những kiến thức đạt 41 Ưu điểm 41 Nhược điểm 41 Hướng phát triển 41 Trang / 45 DANH SÁCH TÀI LIỆU THAM KHẢO 43 Trang / 45 LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Bình Dương tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh em xin gửi đến thầy Huỳnh Quang Đức anh lập trình viên cơng ty VNPT lời cảm ơn sâu sắc nhất, quan tâm, đóng góp ý kiến bảo em thời gian thực đồ án Trải qua trình dài học tập thực đồ án thời gian qua Thầy anh tận tâm bảo nhiệt tình em suốt trình từ lúc bắt đầu kết thúc đồ án Nhờ có tảng kiến thức chuyên ngành vững Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Huỳnh Quang Đức anh lập trình viên công ty VNPT tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thơi thúc chúng em hồn thành đồ án Eem thật cảm ơn khắc ghi kiến thức Đây hành trang vô lớn em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hoàn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Em hi vọng nhận góp ý tận tình q thầy (cơ) qua em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt đẹp Cuối lần chúng em xin gửi lời cảm ơn sâu sắc đến với thầy Huỳnh Quang Đức anh lập trình viên cơng ty VNPT tập thể quý thầy (cô) Khoa Công Nghệ Thơng Tin – Trường Đại Học Bình Dương Chúc thầy có sức khỏe thật tốt! Em xin chân thành cảm ơn! Bình Dương, ngày tháng năm 2023 Sinh viên thực Nguyễn Thành Quang Trang / 45 TRƯỜNG ĐẠI HỌC BÌNH DƯƠNG KHOA CƠNG NGHỆ THƠNG TIN ⁎⁎⁎⁎⁎⁎⁎ TÓM TẮT ĐỀ TÀI Họ tên sinh viên: Nguyễn Thành Quang MSSV: 18050120 Tên đề tài: XÂY DỰNG WEBSITE TRAO NHẬN HỌC BỔNG CHO SINH VIÊN Giáo viên hướng dẫn: Huỳnh Quang Đức Người hướng dẫn: Các anh lập trình viên cơng ty VNPT Cơng cụ sử dụng đề tài: - Ngơn ngữ lập trình: Javascript, PHP - Các framework thư viện sử dụng: Next.js, tailwind css, laravel, … - Giao diện trang chủ: sử dụng framework Next.js - Giao diện quản lý: sử dụng framework laravel dựa Botble CMS - Back end: sử dụng framework laravel - Database: SQL Server Tính cấp thiết đề tài: - Giúp học sinh có điều kiện khó khăn thiếu tài có hội học tập hồn thành học tập - Thúc đẩy giáo dục nghiên cứu lĩnh vực cụ thể - Giúp sinh viên có hội để tạo mối quan hệ mở rộng mạng lưới cá nhân - Giúp tổ chức tài trợ cơng ty đóng góp vào việc giúp đỡ học sinh có điều kiện khó khăn giúp đỡ lĩnh vực cần nâng cao chất lượng giáo dục nghiên cứu Đề tài bao gồm: - Trang chủ: trang chủ website cung cấp thông tin tổng quan học bổng cách nhận học bổng Hình ảnh: 17 Bảng tag news - Bảng tag: Hình ảnh: 18 Bảng tag - Bảng tagscholaship: 29 Hình ảnh: 19 Bảng tag scholaship - Bảng userrole: Hình ảnh: 20 Bảng user role - Bảng user: 30 Hình ảnh: 21 Bảng user Thiết kế giao diện - Trang chủ: 31 Hình ảnh: 22 Trang chủ - Trang tìm kiếm học bổng: Hình ảnh: 23 Trang tìm kiếm - Trang tin tức: 32 Hình ảnh: 24 Trang tin tức - Trang quy định điều khoản: Hình ảnh: 25 Trang quy định điều khoản - Trang chúng tơi: 33 Hình ảnh: 26 Trang about - Trang quản lý: Hình ảnh: 27 Giao diện quản lý 34 Hình ảnh: 28 Trang quản lý tin tức Hình ảnh: 29 Trang thêm tin tức 35 Hình ảnh: 30 Trang quản lý học bổng Hình ảnh: 31 Trang quản lý trường/cơng ty 36 Hình ảnh: 32 Trang sinh viên cần tư vấn Hình ảnh: 33 Trang sinh viên đăng ký 37 Chương V: Cài đặt kiểm thử hệ thống Cài đặt - Back end Cài XAMPP mở port để mở phpmyadmin Hình ảnh: 34 Cài đặt xampp Vào phpadmin tạo cở sở liệu giống với cấu hình file env scholashipbe Hình ảnh: 35 Cấu hình env backend 38 Mở scholaship-be chạy lệnh composer install, npm install để cài đặt package cần thiết Chạy lệnh php artisan migrate để add table vào cở sở liệu Chạy lệnh php artisan db:Seed UserSeeder để tạo tài khoản mặc định Chạy lệnh php artisan serve để start be Mở http://localhost:8000/admin để vào trang admin quản lý - Front end Chạy lệnh npm íntall để cài đặt package cần thiết Chạy lệnh npm run dev để start fe Mở http://localhost:3000/ để vào trang chủ Kiểm thử phần mềm 2.1 Kế hoạch kiểm thử Trưởng nhóm test thực viết test plan cho tồn hệ thơng gồm phần sau: - Định nghĩa phạm vi kiểm thử - Định nghĩa chiến lược kiểm thử - Nhận dạng rủi ro yếu tố bất ngờ - Nhận dạng hoạt động kiểm thử xây dựng lịch kiểm thử - Nhận dạng môi trường kiểm thử - Hiệu chỉnh suốt chu kỳ kiểm thử để phản ánh thay đổi cần thiết 2.2 Quy trình thiết kế kiểm thử Hình ảnh: 36 Quy trình kiểm thử Trong quy trình TestManager thực xây dựng kế hoạch kiểm thử, 39 thơng qua phân tích đánh giá về: phạm vi, chiến lược, rủi ro xảy ra, dạng kiểm thử, môi trường kiểm thử… Dựa sở Test Analysis tiến hành viết testcase cho chức module cách kỹ lưỡng tỉ mỉ với mục tiêu tìm lỗi module lỗi dự án Sau TestCase tiến hành thực thi module cụ thể Tester cụ thể Trong giai đoạn chuẩn bị, Tester dùng mẫu prototype, use case, đặc tả chức để viết test case theo trình tự bước Tester phải liên tục trì tạo báo cáo lỗi trình thực hiện, sau báo cáo kết kiểm thử cho TestManager TestManager tạo bảng tổng kết đánh giá hoạt động kiểm lỗi, xác định xem đạt tiêu chí thành cơng hồn thành kiểm thử chưa 2.3 Quy trình kiểm thử Hình ảnh: 37 Quy trình chạy kiểm thử Tester bố trí cơng việc Test Leader để thi hành kiểm thử theo quy trình cụ thể sau: - Thi hành kiểm thử theo testcase cho module cụ thể - Chạy lại case bị failed trước để xác nhận case sửa - So sách kết ghi nhận thực thi với kết mong đợi - Đánh giá kết kiểm thử (Passed/Failed) cho trường hợp kiểm thử - Viết báo cáo lỗi cho trường hợp kết ghi nhận kết mong đợi không giống 40 PHẦN KẾT LUẬN Những kiến thức đạt Vận dụng thành công loại công nghệ phần mềm, công nghệ Website mới, ngôn ngữ đại: Next.js, Laravel, JSON Web Token, RestfulAPI, CSS, Tìm hiểu vận dụng sở liệu MySQL, đem lại hiệu cao Cơ xây dựng thành cơng Website tìm kiếm việc làm với chức đặt ra: Đăng nhập vào website (bao gồm đăng nhập tài khoản, đăng ký tài khoản) Quản trị viên: Có tất quyền người dùng thơng thường; Thêm, xóa, sửa tài khoản người dùng, học bổng, tin tức; Chỉnh sửa thông tin tài khoản cá nhân quản trị viên; Tìm kiếm người dùng, học bổng; Đổi mật khẩu; Thống kê số lượng học bổng Công ty: Đăng tin tức, học bổng cho sinh viên, xác nhận tư vấn cho sinh viên đăng ký nhận học bổng Cách hoạt động nhóm hiệu quả, linh hoạt vị trí lĩnh vực cơng nghệ thông tin Ưu điểm Ứng dụng chức quản lý, kiểm soát liệu đầu vào liệu đầu Website có cấu trúc hồn thiện, có khả bảo trì nâng cấp Giao diện thân thiện với người dung, dễ dàng sử dụng Sử dụng cơng nghệ Website đại, có chia cấu trúc Frontend - Backend rõ ràng Nhược điểm Chưa gửi email thông báo cho sinh viên bên liên quan xác nhận trao học bổng cho sinh viên Hướng phát triển Khắc phục nhược điểm Deloy ứng dụng lên server thực Tiến hành phân tích liệu người dùng dựa thơng tin đề xuất học bổng phù hợp cho sinh viên 41 Xây dựng tính chia sẽ, bình luận học bổng 42 DANH SÁCH TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/restful-api-la-gi-1Je5EDJ4lnL [2] https://fullstack.edu.vn/ [3] https://reactjs.org/docs/hooks-intro.html [4] https://redux-toolkit.js.org/ [5] https://redux.js.org/ [6] https://www.mongodb.com/ [7] https://www.hostinger.vn/huong-dan/mysql-la-gi/ [8] https://axios-http.com/vi/docs/intro [9] https://nextjs.org/ [10] https://laravel.com/ 43