WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS

66 2 0
WEBSITE THI TOÁN ONLINE SỬ DỤNG THƯ VIỆN REACTJS

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

LỜI MỞ ĐẦU 1.Lí do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ. Ứng dụng của công nghệ thông tin cũng rất rộng lớn, thâm nhập vào mọi lĩnh vực trong xã hội với mọi phương thức hoạt động hoàn toàn mới mẻ, sáng tạo mà không mất đi tính chính xác. Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống. Ở nước ta hiện nay ứng dụng tin học trong các hoạt động quản lý chiếm phần lớn trong các sản phẩm phần mềm. Một số phàn mềm về quản lý như: quản lý vật tư, quản lý thư viện, quản lý tài chính, quản lý nhân sự, quản lý doanh nghiệp,… đang được sử dụng rộng rãi và rất có hiệu quả. Tuy nhiên các phần mềm hỗ trợ cho công tác giáo dục, học tập vẫn còn chưa nhiều. Với thời buổi dịch bệnh đang là một trong những vấn đề nóng của xã hội thì nhu cầu học tập và thi cử trực tuyến đang được quan tâm. Nhiều cơ sở giáo dục cũng đã và đang thực hiện việc kiểm tra năng lực bằng hình thức thi online những cũng gặp nhiều bất cập và khó khăn Dựa vào tình hình thực tế đó, em xin đề xuất và thực hiện đồ án “ Xây dựng website thi Toán online cho học sinh tiểu học” để phục vụ cho việc học tập cũng như thi cử hiện nay. 2.Mục tiêu nghiên cứu Mục tiêu: Xây dựng một website thi Toán online trực tuyến, hỗ trợ cho việc ôn tập kiến thức cũng như thi cử. Website phải xây dựng được các chức năng chính như quản lý được thành viên, thông tin các chủ đề, và các câu hỏi của bộ môn Toán. Nhiệm vụ: Để đạt được mục tiêu trên thì nhiệm vụ đặt ra của đề tài là: +Thu thập dữ liệu từ thực tế, tổng hợp phân tích dữ liệu. +Nghiên cứu các công nghệ và phần mềm cần thiết để xây dựng và phát triển website thi online. +Xây dựng các chức năng hỗ trợ người dung sử dụng một cách hiệu quả nhất. 3.Đối tượng và phạm vi nghiên cứu Đối tượng nghiên cứu gồm: Website xây dựng bằng REACTJS, HTML5, CSS3, JQUERY, JAVASCRIPT, BOOTSTRAP. Hệ quản trị cơ sở dữ liệu NoSQL(Firebase) Phạm vi nghiên cứu gồm: Nghiên cứu dữ liệu thông tin cần thiết như dữ liệu bộ câu hỏi, các chức năng của trang web. Tìm hiểu khái quát về ReactJS. 4.Phương pháp nghiên cứu 4.1Phương pháp nghiên cứu lý thuyết: +Tiến hành thu thập và nghiên cứu các tài liệu có liên quan đến đề tài. +Nghiên cứu công cụ đồ họa như Photoshop. +Nghiên cứu về ReactJS. +Nghiên cứu về Firebase. +Nghiên cứu html, css, javascript. +Phương pháp quan sát: trức tiếp quan sát, sử dụng thử một vài trang web thi Online, để phân tích ưu nhược điểm, các quy trình cơ bản với web thi Online +Phương pháp thu thập tài liệu: thông qua quá trình thu thập tài liệu từ các nguồn như mạng Internet, tổng hợp các tài liệu, nghiên cứu tài liệu, ngôn ngữ và công cụ liên quan. 4.2Phương pháp nghiên cứu thực nghiệm: +Phân tích yêu cầu thực tế và xây dựng các bước phân tích hệ thống để hỗ trợ lập trình, xây dựng ứng dụng. Đánh giá kết quả đạt được, triển khai, bảo trì. 5.Bố cục đề tài Ngoài phần mở đầu và kết luận, bố cục của đề tài bao gồm ba chương: Chương 1: Cơ sở lý thuyết Phần này trình bày về những kỹ thuật sẽ sử dụng để xây dựng và phát triển ứng dụng. Chương 2: Phân tích thiết kế hệ thống Phần này trình bày về việc phân tích thiết kế hệ thống và phân tích cơ sở dữ liệu. Chương 3: Xây dựng ứng dụng website Phần này trình bày những kết quả đạt được khi xây dựng chương trình. Đây là một đề tài tôi áp dụng những công nghệ học được trong quá trình thực tập nên trong lúc nghiên cứu có thể có nhiều sai sót. Tôi mong nhận được sự đóng góp của quý thầy cô và anh chị. 6.Nội dung và tiến độ thực tập 6.1 Nội dung thực tập •Tìm hiểu đơn vị thực tập •Làm quen với môi trường thực tập tại Công ty TNHH giải pháp công nghệ HIFIVEPLUS tại Đà Nẵng •Tìm hiểu khảo sát các ứng dụng REACTJS và Sql Server, áp dụng các khảo sát và ứng dụng vào đề tài. •Học tập các kiến thức nền tảng tại công ty để củng cố và phát huy kiến thức công nghệ để xây dựng dự án từ đó rèn luyện kỹ năng lập trình •Tiếp thu kiến thức, học hỏi kinh nghiệm từ các anh chị hỗ trợ về mặt công nghệ cũng như giao tiếp với mọi người trong công ty. •Tìm hiểu công cụ, ngôn ngữ lập trình và các công nghệ khác để áp dụng vào đồ án báo cáo thực tập. •Qua quá trình thực hiện đồ án rút ra được kinh nghiệm giải quyết vấn đề logic cũng như các vấn đề ngoại lệ từ các anh chị trong công ty •Tiếp thu những phản hồi từ GVHD và các anh chị hỗ trợ để hoàn thiện ứng dụng phù hợp với xu thế phát triển hiện nay. •Tích cực tìm kiếm và sử dụng các phương pháp nghiên cứu khác từ nhiều nguồn nhiều phương thức khác nhau để xây dựng ứng dụng.

TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC  BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI XÂY DỰNG WEBSITE THI TOÁN ONLINE CHO HỌC SINH TIỂU HỌC Giảng viên hướng dẫn: Đồn Duy Bình Sinh viên thực hiện: Nguyễn Trường Hiếu Lớp: 17CNTT1 Đà Nẵng, 04/2021 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự Do – Hạnh phúc NHẬN XÉT ĐÁNH GIÁ CỦA CƠ SỞ THỰC TẬP Kính gửi: ……………………………………………………………………………… ………………………………………………………………………………………… Họ tên: ……………………………………………………………………………… Khoa:…………………………………………………………………………………… Ngành đào tạo: Lớp: …………………… Khóa đào tạo: …………………… Địa điểm thực tập:……………………………………………………………………… Thời gian thực tập: Từ ngày … tháng … năm 2021 đến ngày … tháng … năm 2021 Nhận xét sở thực tập: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… …………… Đà Nẵng, ngày …… tháng … năm…… XÁC NHẬN CỦA CƠ SỞ THỰC TẬP NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN Đà Nẵng, ngày … tháng … năm … Cán hướng dẫn NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN Đà Nẵng, ngày … tháng … năm … Hội đồng phản biện LỜI CAM ĐOAN Tôi tên Nguyễn Trường Hiếu , sinh viên lớp 17CNTT1 Tôi xin cam đoan đề tài thực Các nội dung kết nghiên cứu trình bày Đồ án chuyên ngành trung thực tham khảo trích dẫn, rõ nguồn tham khảo theo quy định Sinh viên thực Nguyễn Trường Hiếu LỜI CẢM ƠN Trong thời gian thực đồ án với giúp đỡ tạo điều kiện trường Đại học Sư Phạm – Đại học Đà Nẵng, góp ý bạn đặc biệt quan tâm hướng dẫn trực tiếp, bảo tận tình giảng viên hướng dẫn Đồn Duy Bình, em hoàn thành đề tài với báo cáo thời gian quy định Với khả thời gian có hạn nên khơng tránh khỏi thiếu sót, em mong nhận quan tâm, giúp đỡ, tạo điều kiện thầy giáo để em hồn thiện đề tài nghiên cứu thời gian tới Em xin cảm ơn quý công ty TNHH giải pháp cơng nghệ HIFIVEPLUS tạo điều kiện để em thực tập, hiểu biết thêm nhiều kiến thức chuyên ngành cần thiết, kĩ làm việc nhóm, làm việc cá nhân hiệu Một lần em xin chân thành cảm ơn tất thầy, cô giáo Trường Đại học Sư Phạm – Đại học Đà Nẵng, quý công ty TNHH giải pháp công nghệ HIFIVEPLUS thầy cô giáo trường, tổ chức liên kết dạy dỗ, bảo em suốt thời gian học tập Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Trường Hiếu WEBSITE THI ONLINE MỤC LỤC LỜI CAM ĐOAN LỜI CẢM ƠN MỤC LỤC HÌNH ẢNH .3 LỜI MỞ ĐẦU Lí chọn đề tài Mục tiêu nghiên cứu Đối tượng phạm vi nghiên cứu 4 Phương pháp nghiên cứu 5 Bố cục đề tài Nội dung tiến độ thực tập CHƯƠNG I: CƠ SỞ LÝ THUYẾT .8 1.1 Kỹ thuật tương tác người dùng( Front-End) 1.1.1 HTML HTML5 1.1.2 CSS Bootstrap 12 1.1.3 JavaScript 14 1.1.4 Thư viện Reactjs 16 1.2 Cơ sở liệu NoSQL 19 1.2.1 Tổng quan NoSQL 19 1.2.2 Một số khái niệm Firebase 19 1.2.3 Làm việc Firebase Realtime Database 20 1.2.4 Thực thao tác CRUD 21 1.2.5 Tính bảo mật quy định 24 CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 26 2.1 Giới thiệu toán 26 2.2 Khảo sát 26 2.3 Phân tích thiết kế hệ thống 27 2.3.1 Hoạt động web thi online 27 2.4 Sơ đồ chức 28 2.4.1 Ca sử dụng tổng quát Admin 28 2.4.2 Ca sử dụng tổng quát thành viên 29 2.4.3 Sơ đồ hoạt động hệ thống 30 2.5 Danh sách Actor UseCase 30 2.5.1 Danh sách UseCase Admin 31 2.5.2 Danh sách UseCase Thành viên 32 2.6 Đặc tả UseCase Admin 32 2.6.1 Đặc tả UseCase đăng nhập 32 WEBSITE THI ONLINE 2.6.2 Đặc tả UseCase đăng xuất 33 2.6.3 Đặc tả UseCase quản lý Thành viên 34 2.6.4 Đặc tả UseCase quản lý khóa học 35 2.6.5 Đặc tả UseCase quản lý chủ đề 35 2.6.6 Đặc tả UseCase quản lý Chuyên đề 36 2.6.7 Đặc tả UseCase quản lý câu hỏi 37 2.6.8 Đặc tả UseCase quản lý tin tức 38 2.7 Đặc tả UseCase Thành viên 38 2.7.1 Đặc tả UseCase đăng ký 38 2.7.2 Đặc tả UseCase đăng nhập 39 2.7.3 Đặc tả UseCase chỉnh sửa thông tin cá nhân 40 2.7.4 Đặc tả UseCase xem điểm thi 41 2.7.5 Đặc tả UseCase chọn chuyên đề 41 2.7.6 Đặc tả UseCase vào thi 42 2.7.7 Đặc tả UseCase liên hệ 42 2.8 Thiết kế sở liệu 43 2.8.1 Sơ đồ liệu 43 2.8.2 Cấu trúc bảng 43 CHƯƠNG III: 47 CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 47 3.1 Môi trường triển khai 47 3.2 Kết chương trình 47 3.2.1 Giao diện trang chủ 47 3.2.2 Giao diện trang giới thiệu 50 3.2.3 Giao diện đăng nhập 51 3.2.4 Giao diện đăng ký 52 3.2.5 Giao diện trang khóa học 53 3.2.6 Giao diện trang chi tiết khóa học 54 3.2.7 Giao diện trang thi 55 3.2.8 Giao diện trang cẩm nang 56 3.2.9 Giao diện trang liên hệ 57 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 58 Kết đạt 58 Hạn chế đề tài 58 Hướng phát triển 59 TÀI LIỆU THAM KHẢO 60 WEBSITE THI ONLINE MỤC LỤC HÌNH ẢNH Hình Cấu trúc tài liệu HTML Hình Ví dụ mã CSS 14 Hình Bootstrap biên dịch 14 Hình JSX Reactjs 17 Hình Cách sử binding khai báo state Reactjs 17 Hình 6.Ví dụ lưu trữ JSON 21 Hình Biểu đồ UseCase Admin 28 Hình Ca sử dụng tổng quát UseCase thành viên 29 Hình Sơ đồ hoạt động hệ thống 30 Hình 10 Sơ đồ liệu 43 Hình 11 Giao diện trang chủ 47 Hình 12 Giao diện trang chủ 48 Hình 13 Giao diện trang chủ 49 Hình 14 Giao diện trang giới thiệu .50 Hình 15 Giao diện trang đăng nhập 51 Hình 16 Giao diện trang đăng kí 52 Hình 17 Giao diện trang khóa học 53 Hình 18 Giao diện trang chi tiết khóa học 54 Hình 19 Giao diện trang thi 55 Hình 20 Giao diện trang cẩm nang .56 Hình 21 Giao diện trang liên hệ 57 WEBSITE THI ONLINE LỜI MỞ ĐẦU Lí chọn đề tài Ngày nay, ứng dụng công nghệ thơng tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Ứng dụng công nghệ thông tin rộng lớn, thâm nhập vào lĩnh vực xã hội với phương thức hoạt động hoàn toàn mẻ, sáng tạo mà khơng tính xác Bằng internet, thực nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Ở nước ta ứng dụng tin học hoạt động quản lý chiếm phần lớn sản phẩm phần mềm Một số phàn mềm quản lý như: quản lý vật tư, quản lý thư viện, quản lý tài chính, quản lý nhân sự, quản lý doanh nghiệp,… sử dụng rộng rãi có hiệu Tuy nhiên phần mềm hỗ trợ cho công tác giáo dục, học tập chưa nhiều Với thời buổi dịch bệnh vấn đề nóng xã hội nhu cầu học tập thi cử trực tuyến quan tâm Nhiều sở giáo dục thực việc kiểm tra lực hình thức thi online gặp nhiều bất cập khó khăn Dựa vào tình hình thực tế đó, em xin đề xuất thực đồ án “ Xây dựng website thi Toán online cho học sinh tiểu học” để phục vụ cho việc học tập thi cử Mục tiêu nghiên cứu - Mục tiêu: Xây dựng website thi Toán online trực tuyến, hỗ trợ cho việc ôn tập kiến thức thi cử Website phải xây dựng chức quản lý thành viên, thông tin chủ đề, câu hỏi mơn Tốn - Nhiệm vụ: Để đạt mục tiêu nhiệm vụ đặt đề tài là: +Thu thập liệu từ thực tế, tổng hợp phân tích liệu +Nghiên cứu công nghệ phần mềm cần thiết để xây dựng phát triển website thi online +Xây dựng chức hỗ trợ người dung sử dụng cách hiệu Đối tượng phạm vi nghiên cứu Đối tượng nghiên cứu gồm: WEBSITE THI ONLINE 2.8.2.8 Bảng liên hệ TÊN TRƯỜNG MÔ TẢ IDLienHe Img_LienHe SDT DiaChi Email Website IDTK Mã Liên hệ Ảnh đính kèm Số điện thoại liên hệ Địa liên hệ Email liên hệ Website liên hệ Mã tài khoản Bảng 2.11 Mô tả bảng liên hệ 2.8.2.9 Bảng tin tức TÊN TRƯỜNG MÔ TẢ IDTinTuc Img_TinTuc TieuDe_TinTuc NgayDang NguoiDang NoiDung_TinTuc IDTK Mã Tin tức Ảnh đính kèm Tiêu đề tin tức Ngày đăng Người đăng tin Nội dung tin Mã tài khoản Bảng 2.12 Mô tả bảng tin tức 46 WEBSITE THI ONLINE CHƯƠNG III: CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 3.1 Mơi trường triển khai ❖ Cơng cụ lập trình: Visual studio code ❖ Cơng nghệ sử dụng: HTML, CSS, BOOSTRAP, JAVASCRIPT, REACTJS, FIREBASE 3.2 Kết chương trình 3.2.1 Giao diện trang chủ Trang chủ: Hiển thị thơng website, khóa học, danh mục chức dành cho thành viên, Hình 11 Giao diện trang chủ 47 WEBSITE THI ONLINE Hình 12 Giao diện trang chủ 48 WEBSITE THI ONLINE Hình 13 Giao diện trang chủ 49 WEBSITE THI ONLINE 3.2.2 Giao diện trang giới thiệu Hình 14 Giao diện trang giới thiệu 50 WEBSITE THI ONLINE 3.2.3 Giao diện đăng nhập Hình 15 Giao diện trang đăng nhập 51 WEBSITE THI ONLINE 3.2.4 Giao diện đăng ký Hình 16 Giao diện trang đăng kí 52 WEBSITE THI ONLINE 3.2.5 Giao diện trang khóa học Hình 17 Giao diện trang khóa học 53 WEBSITE THI ONLINE 3.2.6 Giao diện trang chi tiết khóa học Hình 18 Giao diện trang chi tiết khóa học 54 WEBSITE THI ONLINE 3.2.7 Giao diện trang thi Hình 19 Giao diện trang thi 55 WEBSITE THI ONLINE 3.2.8 Giao diện trang cẩm nang Hình 20 Giao diện trang cẩm nang 56 WEBSITE THI ONLINE 3.2.9 Giao diện trang liên hệ Hình 21 Giao diện trang liên hệ 57 WEBSITE THI ONLINE KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt Về kiến thức học tập Đối với lần nghiên cứu này, em xem hội thử thách thân để tự học hỏi, rèn luyện điều lạ từ ngơn ngữ lập trình hay framework chúng Khi tiếp xúc thực hành dùng ngôn ngữ, em nhận thú vị, đặc trưng riêng biệt mà chúng hỗ trợ Bên cạnh đó, việc áp dụng kiến thức học tự học điều thu hút em Điển ngơn ngữ Java, HTML, CSS,… thầy cô truyền tải cho chúng em giảng đường, bây giờ, lại trở thành kiến thức bản, tảng để em tiếp tục đường tự tìm tịi, học hỏi Đặc biệt, khả phân tích, thiết kế hệ thống hay giải vấn đề trình nghiên cứu lần củng cố, áp dụng cách linh hoạt Xây dựng sở liệu trình nghiên cứu phân tích hệ thống nhằm đáp ứng tốt cho việc viết chương trình Và khơng qn trọng vào việc tìm hiểu nghiên cứu cấu trúc hệ thống để đảm bảo trải nghiệm tốt cho người dùng Về phần mềm Phần mềm viết ngơn ngữ Javascript (thơng qua Framework Reactjs) đóng vai trò Client, hệ thống giao diện người sử dụng để tương tác trực tiếp với người dùng Phần mềm viết rõ ràng phần liên quan đến ngôn ngữ nên hệ thống vận hành cách nhanh chóng xác, đảm bảo trải nghiệm cho người dùng cách tốt Bên cạnh việc thiết kế bố cục, tương phản châu chuốt kĩ lưỡng để thu hút thích thú người tiêu dùng Về phía hệ thống, xử lí tốt liệu, yêu cầu người dùng gửi đến, đảm bảo tính đắn, nhanh chóng Thêm vào đó, hệ thống cịn cung cấp số tính cho người quản lí khách hàng nhu cầu Hạn chế đề tài Hệ thống dành cho người dùng người quản lí thật hệ thống lớn, cần đầu tư thời gian, cơng sức nỗ lực để hồn thiện Song, thời gian nghiên cứu có hạn, hệ thống mà em phân tích thiết kế cịn nhiều hạn chế: • Kiến thức kinh nghiệm kỹ lập trình cịn nhiều hạn chế, nên sản phẩm làm đơn giản, chưa triển khai tưởng 58 WEBSITE THI ONLINE • Kỹ đọc hiểu tài liệu tiếng anh cịn chậm • Chưa áp dụng hết kiến thức học Cơng ty vào đồ án • Chưa biết vận dụng công nghệ vào cho sản phẩm để góp phần website mượt hơn, chạy nhanh • Chưa bám sát theo kế hoạch đặt trước Hướng phát triển Hướng phát triển cần bổ sung tính mới, cơng nghệ vào đề tài nhằm khắc phục hạn chế đề tài phát triển hệ thống hoàn chỉnh, thân thiện với người sử dụng 59 WEBSITE THI ONLINE TÀI LIỆU THAM KHẢO [1] https://vi.wikipedia.org/wiki/HTML [2] https://en.wikipedia.org/wiki/Cascading_Style_Sheets [3] https://en.wikipedia.org/wiki/JavaScript [4] https://getbootstrap.com/ [5] https://www.w3schools.com/ [6] https://vi.wikipedia.org/wiki/HTML [7] https://www.w3schools.com/js/ [8] Jon Duckett (2011), HTML and CSS design and build website, Nhà xuất Wiley [9] Jonathan Snook (2011), CSS Scalable and Modular Architeture for CSS, Nhà xuất Snook.ca Web Development, Inc 60

Ngày đăng: 07/06/2023, 15:58

Tài liệu cùng người dùng

Tài liệu liên quan