MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A STUDENT ATTENDANCE TRACKING SYSTEM INSTRUCTOR: MSC. NGUYEN TRAN THI VAN STUDENT: NGUYEN TAN THANH HOANG NGOC BAO TRAN NGUYEN HOANG VU SKL010387 Ho Chi Minh City, February, 2023 MINISTRY OF EDUCATION AND TRAINING HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING -------------------- CAPSTONE PROJECT BUILDING A STUDENT ATTENDANCE TRACKING SYSTEM INSTRUCTOR: Nguyen Tran Thi Van MSc. STUDENTS: Nguyễn Tấn Thành ID Student: 18110046 Hoàng Ngọc Bảo Trân ID Student: 18110057 Nguyễn Hoàng Vũ ID Student: 18110398 Hồ Chí Minh City, February, 2023 SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness -------- Ho Chi Minh City, September 15th , 2022 PROJECT ASSIGNMENT Student Name: Nguyễn Tấn Thành ID: 18110046 Student Name: Hoàng Ngọc Bảo Trân ID: 18110057 Student Name: Nguyễn Hoàng Vũ ID: 18110398 Specialization: Capstone Project. Project title: Building a Website For Student Attendance.
Implementation of Content Theory: ● Research and learn React. ● Research and learn Node. ● Research and learn MongoDB. ● Research and learn Express JS.
Practice: Build an E-web Application: ● For student: login/out, view profile, view project, check attendance, manage personal information, send request. ● For teacher: login/out, manage project, manage students, check attendance, manage student information, manage personal information. Processing time: 15 weeks Student's signature: Nguyễn Tấn Thành 18110046 Student's signature: Hoàng Ngọc Bảo Trân 18110057 Student's signature: Nguyễn Hoàng Vũ 18110398 CHAIR OF THE PROGRAM INSTRUCTOR (Sign with full name) (Sign with full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness -------- Ho Chi Minh City, February, 2023 PRE-DEFENSE EVALUATION SHEET Student Name: Nguyễn Tấn Thành ID: 18110046 Student Name: Hoàng Ngọc Bảo Trân ID: 18110057 Student Name: Nguyễn Hoàng Vũ ID: 18110398 Major: Capstone Project Project title: Building a Website For Student Attendance. Name of Instructor: Nguyen Tran Thi Van MSc.
Content and workload of the project:. Approval for oral defense? (Approved or denied) .) INSTRUCTOR (Sign with the full name) SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom - Happiness -------- Ho Chi Minh City, February, 2023 PRE-DEFENSE EVALUATION SHEET Student Name: Nguyễn Tấn Thành ID: 18110046 Student Name: Hoàng Ngọc Bảo Trân ID: 18110057 Student Name: Nguyễn Hoàng Vũ ID: 18110398 Major: Capstone Project. Project title: Building a Website For Student Attendance. Name of Reviewer: Nguyen Thien Bao PhD.
Content and workload of the project:. Approval for oral defense? (Approved or denied) .) REVIEWER (Sign with the full name) ACKNOWLEDGEMENT Thank our instructor – Nguyen Tran Thi Van MSc. for amazing lectures and discussions! We enjoyed this class, we're excited to come to class every lesson, learned a lot, and benefited from your course. Thanks for facilitating such a positive learning environment.
Thank you so much for caring about both what you’re teaching and how you teach it for this semester. For your patience and for creating an environment where we aren’t only allowed to succeed but also to fail. For caring for the students and training us. For allowing us to question without judging and for having a growth mindset with us.
Students succeed when students feel the freedom to image and trust they give. You are a very good supervisor. You continue to impress us more and more with your knowledge, creativity, and engaging coursework. However, our limited knowledge and experience in technology and social work may prevent us from developing software that is perfect for everyone.
We eagerly await your feedback in order to improve the software even further. Hồ Chí Minh City, February, 2023. Student's signature: Nguyễn Tấn Thành Student's signature: Hoàng Ngọc Bảo Trân Student's signature: Nguyễn Hoàng Vũ TABLE OF CONTENTS CHAPTER 1: INTRODUCTION. Reason to select this topic.
The goal of the project. 1 CHAPTER 2: THEORY BASIS. 7 CHAPTER 3: SYSTEM REQUIREMENTS AND MODELING. Non-functional Requirements.
Use case diagram. 19 CHAPTER 4: SYSTEM DESIGN. List of screens and conversion diagrams. Detailed description of the screens.
48 CHAPTER 5: IMPLEMENTATION AND TESTING. Apply the MERN stack. Testing method and techniques. Black box testing and bug report.
Directions of future development. 74 LIST OF FIGURES Figure 1: User use case diagram. 19 Figure 2: List of screens diagram. 39 Figure 3: Landing page design.
40 Figure 4: Sign in form design. 40 Figure 5: Sign up form design. 41 Figure 6: Design personal information page. 42 Figure 7: Homepage information.
42 Figure 8: All students page. 44 Figure 9: Project manage page. 45 Figure 10: Create project popup. 46 Figure 11: Add student popup.
47 Figure 12: Login diagram. 48 Figure 13: Check attendance diagram. 48 Figure 14: Send absent request diagram. 49 Figure 15: Search project diagram.
49 Figure 16: View profile diagram. 50 Figure 17: View teacher profile diagram. 50 Figure 18: View history attendance diagram. 51 Figure 19: View project information diagram.
51 Figure 20: Add student to project diagram. 52 Figure 21: View students diagram. 52 Figure 22: Delete student diagram. 53 Figure 23: Student profile diagram.
53 Figure 24: Project management diagram. 54 Figure 25: Project management diagram. 54 Figure 26: Project management diagram. 55 Figure 27: Attendance management diagram.
55 Figure 28: Project management diagram. 56 Figure 29: Front-end work. 57 Figure 30: Structure ReactJS in project. 58 Figure 31: MVC pattern in NodeJS.
59 Figure 32: REST API S. 59 LIST OF TABLES Table 1: Teacher role in page. 10 Table 2: Student role in page. 12 Table 3: User related in non-functional requirements.
14 Table 4: Staff-related in non-requirement function. 15 Table 5: Usecases actor and function. 16 Table 6: Actor description. 17 Table 7: Function description.
17 Table 8: Login use case specification. 19 Table 9: Register use case specification. 21 Table 10: View project information use case specification. 22 Table 11: Search project use case specification.
23 Table 12: View history attendance use case specification. 24 Table 13: Send a request use case specification. 25 Table 14: Check attendance use case specification. 27 Table 15: View student/ request/ project use case specification.
28 Table 16: Edit student/ request/ project information use case specification. 29 Table 17: Delete student/ request/ project specification. 30 Table 18: Add student/ request/ project specification. 31 Table 19: Acceptance request use case specification.
33 Table 20: User database. 34 Table 21: Project database. 35 Table 22: Request database. 36 Table 23: Task database.
37 Table 24: Student join database. 37 Table 25: studentSchedules database. 38 Table 26: Test Deliverables. 61 Chapter 1: Introduction CHAPTER 1: INTRODUCTION 1.
Reason to select this topic Nowaday, a large part of the students are giddgy or getting a job soon. Therefore they not pay attention to go to school. Attendance is also a way to encourage students to come to school and study seriously. The goal of the project Give users a good experience when coming to our web.
Our team wanted to make a website for teachers to strictly manage their students' attendance. In addition, students can also easily check their attendance. Along with that, the web also calculates salaries for teachers based on the number of shifts they teach. Research mission − Clarifying the theoretical basis of the topic.
− Survey the actual situation of the current system. − Design the website according to the structure and color scheme of the eCommerce website. − The functionality of the website is divided into different modules for ease of use management. Scope Learn around ReactJS, NodeJS, MongoDB,… to build an Student Attendance website.
Page | 1 Chapter 2: Theory Basis CHAPTER 2: THEORY BASIS 2. MERN Stack The technology we chose to develop this project is the MERN tech stack (MongoDB, Express, ReactJS, NodeJS). Because it is one of the most modern web development technologies, it supports the development of a website both backend and frontend. MERN stack makes it possible for developers to build a website in less time suitable for agile development projects.
Learning these technologies is also quite easy and does not take much time to apply. In addition, the support community and resources are very large, so the application of these technologies to understanding and developing web applications is completely reasonable and feasible. Theory ReactJS is a JavaScript-based UI development library. Facebook and an open- source developer community run it.
Although ReactJS is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development. ReactJS offers graceful solutions to some of front-end programming’s most persistent issues, allowing you to build dynamic and interactive web apps with ease. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing.
There’s never been a better time to learn React. Main concept React is designed around the concept of reusable components. You define small components and you put them together to form bigger components. All components small or big are reusable, even across different projects.
Components in ReactJS play the same role as functions in javascript, but they work independently and are responsible for returning HTML components through the render function. Page | 2 Chapter 2: Theory Basis There are 2 types of components: Function components and Class components ● Function Component: in ReactJS, the easiest way to define a component is to write a JavaScript function, which returns the HTML response: ● Class Component: we can also use ES6 Class to define a component, this is called the Class component in ReactJS c. Outstanding features You can completely use ReactJS to write apps directly in JavaScript. Turn complex UI components into standalone components.
Pass customized data to a specific UI component. Allows you to change the state for many child components and not affect the parent component even while in the Stateful state. The ability to determine exactly when to re-render as well as when to remove the DOM element. ● User-friendly interface: using ReactJS, users can create attractive, fast, and efficient web applications with minimal coding.
Users will feel the optimization of ReactJS in individual components. Instead of having to work on the entire website application, when using ReactJS, developers can break down the UI structure into simpler components. With the level of a JavaScript programmer, using ReactJS, you can easily develop web- based applications. ● Support Reusable Component: not every developer can design effective components.
Reusable components allow developers to make extensive use of pre-optimized features. Thanks to ReactJS, developers can completely reuse components that have been developed into other applications with the same functionality. ● Write components more easily and faster: to write React components, users will use JSX. This is a combination of JavaScript and HTML.
While not the most popular syntax extension, JSX is appreciated by users when developing special components or large applications. Using JSX, users can Page | 3 Chapter 2: Theory Basis extend the syntax with a wide range of options easily. The process of writing site structure is also clearer. ● Better performance with Virtual DOM: web-based application projects are often prone to trouble in the DOM process.
With the advantage of using Virtual-DOM, ReactJS will help users avoid this problem. Besides, ReactJS also allows users to build Virtual DOM and host them in memory. This advantage will help virtual change as soon as the actual DOM changes. Continuous updates help apps avoid interruptions.
Users use it continuously, and the website is stable, helping to maintain and increase revenue. ● SEO Friendly: this is the wish of all businesses in today's exciting e- commerce era.