I would like to express my sincerest thanks to Dr. Pham Dinh Tan for his enthusiastic help and dedicated guidance throughout the implementation of this design project. His support and in-depth expertise were instrumental in helping me achieve good results and improve myself a lot. Dr. Pham Dinh Tan, right from the beginning of assisting students, designed a clear path for us to keep us from straying off track and be focused on what we do in the project. The passion plus commitment from him not only was able to support me to finish this project but also allowed me to grow my skills in an all-around way. His leadership on time management for this project was critical: it helped me address the intricacies related to this project and yet served as a push towards my developmentboth academically and personally. The positive and constructive feedback from Dr. Pham Dinh Tan has helped me understand the content better and learn how to operate a project. His detailed comments on the different aspects of my work-including his fair evaluation based on an attentive eye-allowed me to see things differently, enhancing my ability to detect issues and self-judge accordingly so that the project could reach high standards of quality and excellence.
Introduction
Front-end
Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) are the technologies used in my website HTML provides the structure of web pages, CSS controls presentation and layout while JavaScript adds interactivity and dynamic behavior to web pages
HTML plays an important role in web development as it defines the components and structure of a website Include tag elements that include different symbols such as titles, anchor paragraphs, and images HTML provides the framework for organizing and displaying web page content
CSS complements HTML by controlling the visual aspects of a web page It allows developers to define website page appearance such as colors, fonts, spacing and layout, thereby enhancing the presentation and aesthetics of the website CSS allows for consistent styling across multiple pages and supports responsive design for optimal viewing on a variety of devices
JavaScript, or JS for short, is a programming language that enables interactive features on websites JavaScript allows developers to create features such as form validation, animations, maps or interactions, and responsive menus This encourages developer creativity and increases the interactivity of websites to improve the experience and increase user engagement
On the other hand, ReactJS is a JavaScript library for building user interfaces, especially single-page applications Developed by Facebook, ReactJS follows a component-based architecture that allows developers to create reusable UI components ReactJS uses a virtual DOM (Document Object Model) for efficient rendering, which provides faster performance and greater scalability than traditional JavaScript frameworks
One of the main advantages of ReactJS is its component-based architecture, which promotes code reusability and modularity Developers can create independent components that encapsulate functionality and styling, making it easier to maintain and update the codebase Additionally, ReactJS offers a declarative approach to building user interfaces, simplifying the process of managing application state and updating the DOM
However, ReactJS also has some limitations Its steep learning curve can be challenging for beginners, especially those new to JavaScript or web development Furthermore, the ecosystem surrounding ReactJS is vast and constantly evolving, which can lead to issues with compatibility and dependency management Additionally, while ReactJS excels at building user interfaces, it may not be the best choice for applications requiring server-side rendering or complex data manipulation
In conclusion, HTML, CSS, JavaScript, and ReactJS are integral technologies in web development, each serving specific purposes in creating dynamic and engaging web experiences While ReactJS offers numerous advantages such as component-based architecture and efficient rendering, developers should carefully consider its complexities and limitations when choosing it for a project
Figure 2 ReactJS (Source: https://www.linkedin.com/pulse/reactjs-ecosystem-exploring-key-libraries- frameworks-2023-murthy)
Backend
The system's backend uses the following technologies and architecture:
NET Core is an open-source, cross-platform framework developed by Microsoft that provides a powerful platform for developing scalable, maintainable, and modular software solutions .NET Core stands out for its flexibility, high performance, and ability to run on multiple operating systems, including Windows, macOS, and Linux This makes it a versatile choice for developing modern applications that need to be deployed across various environments.[1]
Figure 3 .Net Core (Source: https://tenten.vn/tin-tuc/net-core-la-gi/)
Features: The Clean Architecture pattern, often associated with NET Core, enforces a clear separation of concerns by organizing the application into distinct layers: presentation, application, domain, and infrastructure This design pattern ensures that business rules are independent of frameworks, user interfaces, databases, or external services It promotes a more organized codebase, which is easier to understand, test, and maintain The separation into layers means that each part of the application can evolve independently, enhancing adaptability to changing requirements
The Presentation Layer is responsible for handling user interactions and displaying information The Application Layer contains use cases and orchestrates the flow of data between the user interface and the domain layer The Domain Layer holds the business logic and rules, while the Infrastructure Layer deals with external services like databases, file systems, and other APIs
Figure 4 Clean Architecture (Source: https://code-maze.com/dotnet-clean-architecture/)
Advantages: Combining NET Core with Clean Architecture offers several significant advantages:
1 Code Organization and Maintainability: The modular nature of Clean
Architecture makes it easy to understand and modify the code This structure also facilitates automated testing, ensuring higher reliability and fewer bugs
2 Performance: NET Core is optimized for performance, providing efficient execution and handling high-load scenarios with ease Its cross-platform capability extends the application's reach and allows developers to work in diverse environments
3 Community and Open Source: NET Core's open-source nature fosters a vibrant and collaborative developer community Continuous improvements and updates from the community ensure that the framework stays modern and efficient
4 Flexibility: Clean Architecture's separation of concerns allows each layer to evolve independently This flexibility makes it easier to incorporate new features, fix bugs, and adapt to new requirements without affecting other parts of the application
5 Scalability: The framework is designed to handle both small-scale and large- scale applications, providing a solid foundation for growth
Disadvantages: While the combination of NET Core and Clean Architecture offers many benefits, there are also some challenges:
1 Learning Curve: Developers new to Clean Architecture may face a steep learning curve Understanding the principles and effectively applying them requires time and practice
2 Initial Setup: Setting up a project with Clean Architecture can be complex, especially for those unfamiliar with the pattern The initial configuration might be time-consuming but pays off in the long run with easier maintenance and scalability
3 Complexity: For smaller projects, the complexity introduced by Clean
Architecture might seem unnecessary However, for larger projects or those expecting to scale, the benefits far outweigh the initial complexity
Overall, NET Core with Clean Architecture provides a robust framework for building maintainable and scalable applications Developers should weigh the initial learning curve and setup complexity against the long-term benefits of maintainability and scalability
Gembox is a comprehensive library designed to handle various document-related tasks, including working with Word files, Excel spreadsheets, and PowerPoint presentations In this project, Gembox is utilized to render Word file orders from data stored in the database, facilitating efficient document generation and management Gembox supports a wide range of document formats and provides features such as reading, writing, and converting documents, making it an invaluable tool for handling document-related operations within the system
MailKit is a feature-rich library that allows sending emails via the SMTP protocol
It supports a wide array of email functionalities, including authentication, secure connections (SSL/TLS), and multipart messages MailKit is known for its robustness and reliability, making it a preferred choice for managing email communication in various applications Its comprehensive API allows for seamless integration and handling of complex email scenarios, ensuring that emails are delivered reliably and securely
JSON Web Tokens (JWT) are a compact and self-contained way of securely transmitting information between parties as a JSON object This information can be verified and trusted because it is digitally signed using a secret (with the HMAC algorithm) or a public/private key pair (using RSA or ECDSA) JWTs are commonly used for authentication and authorization in web applications, providing a secure method for exchanging information between the client and the server.[2]
(Source: https://developer.okta.com/blog/2019/02/14/modern-token-authentication- in-node-with-express)
Bearer tokens, also known as Bearer authentication, involve the use of security tokens In the context of HTTP authentication, the bearer token is a cryptic string typically generated by the server in response to a login request The client must include this token in the Authorization header of subsequent requests to access protected resources This method is simple to implement and widely used in modern web applications
1 Compact: JWTs are compact, allowing them to be sent through URL parameters, POST parameters, or inside HTTP headers without significantly increasing the payload size
2 Self-contained: JWTs are self-contained, meaning they contain all the information needed for authentication and authorization, eliminating the need for repeated database queries
3 Secure: JWTs can be signed and encrypted to ensure data integrity and confidentiality The use of public/private key pairs enhances security and trust
4 Interoperable: JWTs are language-agnostic and can be used across different platforms and programming languages, promoting interoperability in diverse environments
MySQL is a widely-used open-source relational database management system
(RDBMS) renowned for its reliability, scalability, and ease of integration It is designed to handle large volumes of data efficiently, making it suitable for a wide range of applications, from small-scale projects to enterprise-level systems MySQL's robust architecture and extensive features make it a popular choice for web-based applications and data-driven projects.[5]
Figure 6 MySQL (Source: https://www.educba.com/what-is-mysql/)
1 ACID Compliance: MySQL supports ACID (Atomicity, Consistency,
Isolation, Durability) compliance, ensuring the reliability and integrity of transactions This is critical for applications requiring precise data management and consistency
2 Multiple Storage Engines: MySQL offers multiple storage engines, such as
InnoDB and MyISAM, allowing users to choose the one that best fits their specific requirements Each storage engine has its own strengths and use cases, providing flexibility in data management
3 Data Security: MySQL includes strong data security measures, such as encryption and user authentication, to protect sensitive information It supports SSL/TLS for secure connections and provides granular access control to ensure data privacy
System Analysis and Design
Current status survey
The online exam system is designed to support the exam process efficiently and conveniently The system comprises two primary actors: administrators and examinees, each with specific functionalities and permissions The system should include both backend and frontend components to handle requests and provide a user- friendly interface
Account Management: o Create, edit, and delete examinee accounts o Reset passwords and manage access permissions
Question Management: o Create, edit, and delete questions o Categorize questions by topic and difficulty level
Exam Management: o Create and edit exams from the question bank o Set exam duration, number of questions, and exam type (multiple- choice, essay)
Assign Exams: o Assign exams to specific groups or individual examinees o Schedule exams and notify examinees
Grading: o Automatically grade multiple-choice exams o Support manual grading for essay exams
View Exam Results: o View and manage the results of each examinee o Export reports in various formats (PDF, Excel)
View Notifications: o Receive notifications about new exams, results, and related information
View Assigned Exams: o Access the list of assigned exams o View details, timing, and status of each exam
Take Exams: o Complete exams online with a user-friendly interface o Features a countdown timer and progress saving
Submit Exams: o Submit the exam after completion or when the time is up o Confirm submission and receive a status notification
View Exam Results: o Access results of completed exams o View scores, correct answers, and feedback (if any)
User Interface: o User-friendly, easy to navigate, and compatible with multiple devices (PC, tablet, mobile) o Intuitive design with clear navigation, visible buttons, and notifications
User Experience: o Ensure fast page load times and stable performance o Provide clear, accurate, and continuously updated information
Figure 7 Online Exam System (Source: https://prepwithharshita.com/online-examination-system/)
Backend: o Use popular technologies like Node.js, Python, Java, or PHP for server- side development o Relational databases (MySQL, PostgreSQL) or NoSQL databases (MongoDB) for data storage o RESTful or GraphQL APIs for communication between frontend and backend
Frontend: o Use modern frameworks like React, Angular, or Vue.js to build the user interface o Apply responsive design principles to ensure good display on all devices
Security: o Secure user data and exam information o Use HTTPS, user authentication, and protection against attacks (e.g., XSS, SQL Injection)
Performance: o Optimize databases and code to ensure smooth system operation o Use caching and other techniques to reduce server load and increase response speed
The online exam system should be built with comprehensive functionalities to support both administrators and examinees Additionally, the system must ensure a good user experience and meet technical requirements for security, performance, and multi-platform compatibility With a complete system, the exam process will become easier, more transparent, and more efficient.
Function overview
Figure 8 Overview use case diagram
There are two main factors: admin and candidate
For admin, there are the following main use cases: login, logout, account management, question management, test management, assigning tests to candidates, grading, test result management, etc
With the candidate, there are the following main use cases: login, logout, view notification, view list test, do test, check test score, etc
Decay use case Account management
Figure 9 Decay diagram Use case Account management
: The "View list account" function includes the "Search account" function, meaning that to view the list of accounts, the admin can perform a search for accounts
: The "Create account", "Update account", and "Delete account" functions extend from the "View list account" function, meaning that the admin can perform these functions after viewing the list of accounts
Decay use case Question management
Figure 10 Decay diagram Usecase Question management
(Search question): The "Search question" use case is included in the
"View list question" use case, suggesting that the search functionality is a part of the process of viewing the question list
(Create, Update, Delete question): The "Create question," "Update question," and "Delete question" use cases extend the "View list question" use case This means that these actions (creating, updating, or deleting a question) can only be performed after the admin has viewed the list of questions and potentially selected a specific question to act upon
Decay use case Test management
Figure 11 Decay diagram Use case Test management
(Search test, Add section, Select question): The "Search test" use case is included in the "View list test" use case, suggesting that the search functionality is a part of the process of viewing the test list Similarly, "Add section" and "Select question" are included in the "Create test" use case, indicating that they are steps within the test creation process
(Create, Update, Delete test): The "Create test," "Update test," and
"Delete test" use cases extend the "View list test" use case This means that these actions (creating, updating, or deleting a test) can only be performed after the admin has viewed the list of tests and potentially selected a specific test to act upon
Decay use case Test result management
Figure 12 Decay diagram Use case Test result management
Use case "View detail answer sheet" expands from use case "View list test answer sheet", which means the admin can view details of an assignment after viewing the list of assignments
Use case "Grading" extends from use case "View detailed answer sheet", which means the admin can only grade after viewing the details of the assignment
Decay use case Account management
Figure 13 Decay diagram Use case Account management
(expand): The use cases "Start test," "Answer all question," and
"Submit test" extend from the use case "View test assign to me." This means that these actions can only occur after the candidate has viewed the assigned test list In other words, candidates cannot start, answer questions, or submit the test if they have not seen the assigned test list
1 Admin Go to page test management
2 System Get list test in database and show to screen
4 System Get questions in database and show form create test to screen
5 Admin Input test info, add sections and choose questions to test
7 System Validate and save test to database then show message success
8 Admin Go to page assign test to candidate
9 System Get list test and list acc candidate then show form assign to screen
10 Admin Choose test , assign candidates to test then submit
11 System Save data test-candidate to database then show message success
12 Candidate Go to page list test for me
13 System Get list test assigned to this candidate and show to screen
14 Candidate Select test and click start
15 System Get test info and all questions from database then show form do test to screen
16 Candidate Answer all question and submit test
17 System Save test answer sheet to database then show message success
18 Admin Go to page test result
19 System Get list test answer sheet form data base and show to screen
20 Admin Select answer sheet and start grading
22 System Calculate score and save to database then show message success
23 Candidate Go to page check my score
24 System Get test score form database and show to screen
25 System Get list test in database and show to screen
Non-functional requirements
Advanced SQL Usage with Stored Procedures:
The system employs SQL extensively and adopts a meticulous approach by constructing Stored Procedures for every business operation This strategic decision serves a dual purpose, aiming to fortify the system against SQL injection attacks while concurrently enhancing performance metrics
Mitigating SQL Injection Risks: By leveraging Stored Procedures, the system effectively mitigates the risks associated with SQL injection attacks This proactive measure bolsters the system's security posture, ensuring that malicious actors are unable to exploit vulnerabilities through injection attacks
Optimized Performance: Although the adoption of Stored Procedures entails a longer build time, the resultant query execution speed and overall optimization surpass those achieved through conventional SQL render libraries This optimized approach not only enhances the system's efficiency but also elevates the user experience by delivering faster response times and seamless performance across diverse use cases
The backend system showcases a sophisticated architecture, harnessing the power of Dependency Injection, Clean Architecture, and elements of Domain-Driven Design (DDD) This amalgamation of architectural paradigms sets the stage for unparalleled scalability, maintainability, and extensibility
Accelerated Upgrade and Maintenance: By leveraging a multi-tier architecture and incorporating traditional repository patterns, the system is poised to experience expedited upgrade and maintenance cycles This streamlined approach facilitates seamless modifications and enhancements, ensuring that the system remains agile and responsive to evolving business requirements
Optimized Performance and Scalability: The utilization of Dependency
Injection and Clean Architecture empowers the system with inherent scalability and performance optimization capabilities This architectural prowess not only enhances the system's responsiveness but also lays the groundwork for future scalability initiatives, enabling the seamless accommodation of increasing user loads and evolving business demands
In summary, the system's commitment to advanced SQL usage and sophisticated backend architecture exemplifies a proactive approach towards enhancing non- functional requirements By prioritizing security, performance optimization, and architectural robustness, the system sets a benchmark for excellence in both functionality and performance.
Application development and deployment
Architectural design
Clean Architecture is a software design philosophy introduced by Robert C Martin (also known as Uncle Bob) Its primary goal is to create systems that are easy to maintain, test, and evolve over time Clean Architecture achieves this by promoting the separation of concerns, ensuring that different parts of the system are independent and loosely coupled.[3]
Figure 15 .Net Core Clean Architecture (Source: https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps- azure/common-web-application-architectures)
1 Presentation Layer: This layer is responsible for the user interface and user interaction It includes components such as views, controllers, and presenters, which handle input from users and display output
2 Application Layer: This layer contains the application’s use cases or business logic It orchestrates the flow of data between the user interface and the domain layer, ensuring that the application behaves according to its specifications
3 Domain Layer: The core of Clean Architecture, the domain layer includes the business logic and entities This layer is independent of any external frameworks or technologies, which makes it highly reusable and testable
4 Infrastructure Layer: This layer handles external systems and services, such as databases, file systems, and network services It includes implementations of repositories, data access objects, and other infrastructure concerns
1 Separation of Concerns: Each layer in Clean Architecture has a distinct responsibility, which makes the codebase easier to understand, maintain, and test
2 Testability: Because the business logic is decoupled from the infrastructure and user interface, it can be tested independently This leads to more reliable and maintainable code
3 Flexibility and Adaptability: The modular nature of Clean Architecture allows for changes in one part of the system without impacting others For example, switching from one database technology to another only affects the infrastructure layer, leaving the domain and application layers untouched
4 Scalability: Clean Architecture supports large and complex systems by organizing the code into well-defined layers This makes it easier to scale the application as new features are added
N-layer architecture, also known as multi-layer architecture, is a traditional design pattern that organizes an application into several layers, typically including the presentation layer, business logic layer, and data access layer
1 Presentation Layer: This layer handles the user interface and user interaction
2 Business Logic Layer: This layer contains the core functionality of the application, including the business rules and logic
3 Data Access Layer: This layer manages the communication with the database, including data retrieval and storage
Comparison: Clean Architecture vs N-Layer Architecture
1 Separation of Concerns: o Clean Architecture: Achieves a higher level of separation of concerns by dividing the application into more granular layers (presentation, application, domain, infrastructure) Each layer has a clear and distinct role, reducing interdependencies o N-Layer Architecture: While it also separates concerns, the layers are often more tightly coupled Changes in the data access layer, for instance, can have direct impacts on the business logic layer
2 Dependency Direction: o Clean Architecture: Enforces a strict rule that dependencies flow inward The outer layers (infrastructure) depend on the inner layers (domain), but not vice versa This ensures that business logic is not influenced by external systems o N-Layer Architecture: Dependencies are not strictly managed
Typically, the presentation layer depends on the business logic layer, which in turn depends on the data access layer This can lead to situations where business logic becomes dependent on the data access implementation
3 Testability: o Clean Architecture: Promotes high testability The business logic and application rules can be tested in isolation without concerns about the user interface or data access code o N-Layer Architecture: Testing can be more challenging because the layers are often more interdependent Mocking dependencies in the data access layer, for instance, can be cumbersome and error-prone
4 Flexibility and Maintainability: o Clean Architecture: Highly flexible and maintainable due to its modular structure Changes in one layer (e.g., replacing a database) do not affect other layers o N-Layer Architecture: Less flexible because changes in one layer often propagate to others Maintaining and evolving the system can become more complex over time
5 Focus on Business Logic: o Clean Architecture: Keeps business logic at the center of the design, ensuring that it is insulated from external concerns This centrality makes it easier to focus on what the application is supposed to do o N-Layer Architecture: Business logic is often intermixed with other concerns, making it harder to isolate and modify core functionalities without side effects
Clean Architecture offers a modern approach to software design that emphasizes maintainability, testability, and flexibility By enforcing a clear separation of concerns and ensuring that dependencies flow inward, Clean Architecture creates systems that are easier to understand and evolve Compared to traditional N-layer architecture, Clean Architecture provides a more robust framework for managing complex applications, making it a preferred choice for many developers seeking to build scalable and adaptable software solutions
Figure 16 N-tier architecture and Clean Architecture (Source: https://www.linkedin.com/posts/marcelooviedo_arquitectura-de- software-n-tier-vs-clean-activity-7115676979747561472-mQ_T/)
In NET Core, the projects are typically organized into three distinct packages: Api,
Core, and Infrastructure These packages represent separate projects, each with its own dependencies, settings, and library packages This modular structure promotes a clean separation of concerns and enhances maintainability
The API project serves as the entry point for client requests It contains the Controllers package, which includes controllers responsible for handling HTTP requests from clients These controllers process incoming requests, interact with the underlying services, and return appropriate responses Additionally, the API project contains an Authentication package, which manages all authentication-related tasks such as user login, token generation, and authorization checks By centralizing these concerns, the Api project ensures a streamlined and secure communication channel between the client and the server
The Core project is the foundation of the application and does not depend on any other projects It encapsulates the essential business logic and domain models, making it the most stable and enduring part of the application The Core project includes several key packages:
Entities: This package contains the models and Data Transfer Objects (DTOs) that represent the core business entities
Shared: This package includes enums, utilities, resources, and other shared components that are used across the application
Detailed design
Use calming, pleasant blue colors + Color palette
In this section, I would like to analyze the design of classes related to flows: Add Item, other similar information
Front-End ReactJS source folder structure:
- Select Database Management System (DBMS)
- Implement stored procedures and triggers
Build an app
3.3.1 Libraries and tools to use
Table 3.1: List of libraries and tools used
2022 https://visualstudio.microsoft.com/fr/
VSCode https://code.visualstudio.com/
Container Docker https://www.docker.com/
Heroku CLI https://devcenter.heroku.com/articles/heroku-cli
DB Forge for MySQL https://www.devart.com/dbforge/mysql/studio/downlo ad.html
Netlify CLI https://www.netlify.com/
Google https://www.google.com/
Have built a website system with websites for customers and salesman, 1 server provides business APIs
English Section: This test includes an English test with one question asked
Knowledge question: "What is the capital of Vietnam?" placed in a question frame Answer options:
"SUBMIT" button: This button is located in the upper right corner so candidates can submit their exam once completed
Candidate information: The upper right corner shows the account name "candidate" and a notification icon
Page title: "Applicant Entrance Test" is displayed at the top of the page
Test list: A list of tests listed with test code (BT1) and test name (Test 1)
Confirmation window: Displays a confirmation dialog box with the content:
"Confirmation of taking the exam Test 1"
The "CANCEL" button is red to cancel taking the test
The "AGREE" button is green to confirm taking the test
Page title: "Applicant Entrance Test" is displayed at the top of the page
Test list: A list of tests with test code (BT1) and test name (Test 1)
Candidate information: The upper right corner shows the account name "candidate" and a notification icon
Page title: "Applicant Entrance Test" is displayed at the top of the page
List of tests: The center part displays a list of tests with test code (Test Code) as BT1 and test name (Test Name) as Test 1
Candidate list: The right side displays the list of candidates assigned to the exam, including the "candidate" account
Test taker - Test (currently selecting)
Notice: In the upper right corner there is the message "Successfully saved candidate lists of test BT1" showing that saving candidate lists has been completed
Confirm button: The "Confirm changes" button is located at the bottom right to save changes to the candidate list
Figure 29 Add test for candidates
Page title: "Applicant Entrance Test" is displayed at the top of the page
Test name: Displays the test name (Test 1)
Test code: Display test code (BT1)
Exam sections: Allows you to add exam sections to the test
Section name: For example: "Knowledge section" and the related question
"What is the capital of Vietnam?"
Test section name: For example: "English section"
Add exam button: Plus symbol (+) to add a new exam
Confirm button: The "Confirm" button is located in the lower right corner to save the new test
Cancel button: "Cancel" button to cancel the test adding operation
Page title: "Applicant Entrance Test" is displayed at the top of the page
Question type: Displays the question type (e.g Multiple choice 1 answer)
Question content: Displays the question content (for example: "What is the capital of Vietnam?")
Category: Shows the question's category (e.g "General")
Notification: In the upper right corner there is a message "Question added successfully" indicating that adding a new question has been completed
Search and filter questions: There are search and filter tools above the question list for administrators to easily find and manage questions
Page title: "Applicant Entrance Test" is displayed at the top of the page
Question list: Displays Type, Content Text, and Category columns
Question content (Content Text): "What is the capital of Vietnam?"
Question type: Multiple choice, 1 answer
Hanoi (chosen as the correct answer)
Confirm button: "Confirm" button in the lower right corner to save the new question
Cancel button: "Cancel" button to cancel the question-adding operation
Page title: "Applicant Entrance Test" is displayed at the top of the page
Question list: Displays the Type, Content Text, and Category columns but currently has no data in the list ("No data")
Search and filtering toolbar: There are search and filtering tools above the question list so administrators can easily find and manage questions
Add question button: The "Add question" button is located in the upper right corner to add a new question
Admin information: The upper right corner shows the account name "admin" and a notification icon
Page title: "Applicant Entrance Test" is displayed at the top of the page
User Name: User name (for example admin)
Full Name: Full name (for example Nguyen Van A)
Address: Address (for example: Hanoi)
Date of Birth: Date of birth
Role: Role (for example admin)
User Name Full Name Password Phone Email Address Date of Birth Role
Confirmation button: "Confirm" button in the lower right corner to save the new account
Cancel button: "Cancel" button to cancel the account adding operation
Page title: "Applicant Entrance Test" is displayed at the top of the page
Search and filtering toolbar: There are search and filtering tools above the account list so administrators can easily find and manage user accounts
Add account button: "Add account" button located in the upper right corner to add a new account
Page title: "Applicant Entrance Test" is displayed at the top of the page
Statistical chart: "Number of tests and test takers"
Horizontal axis (X): Displays timelines from December 2023 to December
Vertical axis (Y): Shows the number of tests and test takers
Chart data: Includes two types of data:
"Not yet done" (represented by green area)
"Done" (represented by blue area and markers)
Admin information: The upper right corner shows the account name "admin" and a notification icon
Surveying Requirements for the Online Examination System
The initial phase of my project was dedicated to conducting a comprehensive survey to gather requirements for the online examination system This step was vital to ensure that the system would meet the actual needs and expectations of its users, including students, teachers, and administrative staff Through interviews, questionnaires, and focus group discussions, I collected valuable insights into the specific functionalities required Key findings highlighted the necessity for robust account management, efficient question management, seamless exam assignment, accurate grading mechanisms, and intuitive results viewing for administrators For examinees, the survey emphasized the importance of clear notifications, accessible exam listings, a user-friendly interface for taking exams, secure submission processes, and detailed results presentation
Designing Functionalities and User Interfaces
With the requirements clearly defined, the next step involved designing the functionalities and user interface of the system I began by creating wireframes and prototypes to visualize the system’s layout and workflow These designs were iteratively refined based on feedback from potential users to ensure they were intuitive and met their needs The design process included outlining the user journey for both administrators and examinees, ensuring that each interaction with the system was straightforward and efficient The focus was on creating a seamless experience that would minimize the learning curve and maximize user satisfaction
Self-Learning Technologies and Architectures
To build a robust and modern online examination system, I had to self-learn several new technologies and architectural patterns I delved into NET Core for the backend, ReactJS for the front end, and MySQL for the database Understanding and implementing Clean Architecture was particularly challenging yet rewarding This architecture promotes separation of concerns and dependency inversion, making the system more modular and easier to maintain I spent considerable time studying these technologies through online courses, tutorials, and documentation The self-learning process was intensive but essential for ensuring that I could implement a scalable and efficient system
Managing time and tasks effectively was crucial throughout the project I developed a detailed project plan, breaking down the work into manageable tasks with specific deadlines Regular progress reviews and adjustments to the plan were necessary to stay on track and accommodate any unforeseen challenges Balancing learning new technologies with actual development work required disciplined time management I used tools like Trello for task management and Google Calendar for scheduling to maintain productivity and ensure that all project milestones were met
Building and Completing Key Functionalities
The development phase involved turning the designs and plans into a functioning system I successfully implemented most of the core functionalities, including user authentication, question management, exam creation and assignment, automated grading, and result visualization Each feature was developed with a focus on reliability and performance, ensuring that the system could handle real-world usage scenarios The integration of backend services with the frontend interface was meticulously tested to ensure a seamless user experience Continuous testing and debugging were integral parts of this phase, allowing me to identify and resolve issues promptly
Throughout the development process, I paid close attention to the user experience I conducted usability tests with potential users to gather feedback on the interface and overall system flow This feedback was invaluable in making iterative improvements to the design and functionality Ensuring that the system was user-friendly and accessible was a top priority The final product features a clean and intuitive interface, making it easy for both administrators and examinees to navigate and use the system effectively The positive feedback from initial user tests indicated that the system met the usability and functionality expectations
One of the highlights of this project was the successful application of modern technologies Utilizing NET Core for the backend provided a powerful and flexible framework for developing scalable web applications ReactJS enabled the creation of a dynamic and responsive frontend, enhancing the overall user experience The use of MySQL ensured efficient and reliable data management Implementing Clean Architecture principles resulted in a well-organized and maintainable codebase These technologies collectively contributed to building a robust and modern online examination system
Completing this project was a significant achievement that involved a blend of thorough planning, effective time management, continuous learning, and practical application of modern technologies The journey from gathering requirements to designing, developing, and testing the system was both challenging and rewarding The positive feedback from users and the successful implementation of core functionalities reaffirmed the effectiveness of the chosen approach and technologies
The project not only enhanced my technical skills but also improved my ability to manage complex tasks and work independently The experience gained from this project will undoubtedly be valuable in my future endeavors, providing a solid foundation for tackling more complex software development challenges The final system stands as a testament to the importance of careful planning, continuous learning, and dedication to quality in software development
In the future, the development direction of the system will be:
Building and Enhancing Existing Functionalities
Moving forward, the project will focus on refining and expanding upon the functionalities that have already been implemented This includes further optimizing the user authentication and authorization processes to ensure seamless access control Additionally, improvements will be made to the question management system, enhancing the ability to categorize, search, and organize questions effectively The grading mechanism will be fine-tuned to provide more detailed and accurate feedback to examinees, facilitating better learning outcomes
In addition to enhancing existing functionalities, the project will incorporate new features to enrich the user experience and expand the capabilities of the online examination system One key addition will be the implementation of a notification system to alert users about upcoming exams, deadline reminders, and important announcements Furthermore, the system will be enhanced to allow for the randomization and shuffling of questions and exams, providing a more diverse and challenging testing experience for examinees
Security is paramount in any online system, particularly one that handles sensitive data such as exam questions and results In the future, the project will prioritize further strengthening the security measures implemented within the system This will involve conducting comprehensive security audits, implementing encryption protocols to protect data at rest and in transit, and fortifying defenses against common cyber threats such as SQL injection and cross-site scripting (XSS) attacks
To improve scalability, flexibility, and maintainability, the project will transition towards a microservices architecture for the backend This approach involves breaking down the monolithic backend into smaller, independent services that can be developed, deployed, and scaled individually By decoupling functionality into microservices, the system will become more modular and resilient, allowing for easier management and future expansion
Real-World Deployment and User Feedback
A crucial step in the project's future roadmap is the real-world deployment of the online examination system for actual use by educational institutions, training centers, and other organizations This deployment will provide valuable insights and feedback from users in a live environment, allowing for further refinement and optimization based on real-world usage patterns and user preferences User feedback will be actively solicited and incorporated into ongoing development efforts to ensure that the system continues to evolve to meet the needs of its users effectively
As the project progresses, ongoing learning and development will be essential to keep pace with emerging technologies, best practices, and evolving user requirements Regular training sessions, workshops, and knowledge-sharing initiatives will be organized to empower team members with the latest skills and insights Additionally, collaboration with academic institutions, industry experts, and technology partners will be sought to leverage external expertise and stay at the forefront of innovation in the field of online education and assessment