Done By Mohammed, Bineid and Abdullah, Al Halabi
Project Supervisor: Dr. Madeleine Togher
- HTA – Hierarchical Task Analysis, describes an activity in terms of its specific goals, subgoals, operations, and plans.
- UI – User Interface, the point of human-computer interaction and communication in a device.
- UX – User Experience.
- ERD – Entity Relationship Diagram, is a graphical representation that depicts relationships among people, objects, places, concepts or events within a system.
- OOP – Object-oriented programming, “refers to computer programming model that organizes software design around data, or objects, rather than functions and logic”.
- Framework – a tool that provides ready-made components or solutions that are customized in order to speed up development such as Node.js.
- MVC – Model-View-Controller, a design pattern used to achieve separation of concerns.
- IDE – Integrated Development Environment.
Auto-registration system utilizing artificial intelligence (AI) technology, in general, the project is providing a new technique that can be used efficiently for student to register. This new technique for registration will depend on server-side or backend. Students will be able to register for the course easily. The main goal of this project is to design a system that can help student to register easily and provide department or management the required data to decide how many classes they need for every course. The system we are using nowadays is not efficient and time consuming for both students and management. Therefore, this system will reduce time and effort.
When I was a second-year student trying to register my courses, I was having many problems, such as what course should I register for? How many courses can I take? Am I allowed to take this course? Because of these questions, I was forced to ask my advisor. This process is repeated every semester and most students face these problems. Therefore, the inspiration and the whole idea came from the beginning of the problem. The main reason why we started this project is that there was a problem that the collage did not solve yet. As a team, we are motivated by our passion for making something useful for the long term and to know our limits and skills. Thus, we have this project idea where we plan on finding solutions to these problems by utilizing smarter solutions such as Internet of things (IoT) to improve the efficiency, enhance the system, optimize the parking utilization, reduce cost and time when using the parking system or even managing it. This project will focus on solving the problems one by one, along with having additional features included to furthermore enhance the user’s experience.
In every semester we are facing a problem with lack/surplus of classes due to having unbalanced number of lecturer and students. In 2020 fall semester, SMC student had a math course “Applied Mathematics” registered in his schedule. The problem is the system only allowing 10 students as minimum and they were 8 students only, but the registration system already accepted it and submit the request. Therefore, the lecturer cancels the course and who had 4 courses left with 3 courses which leads to more academic issues. The thought of doing this whole project was to solve this type of a problem and catch irregular behavior in the registration system.
To summarize our problem with the current registration system:
- The main problem is having lack/surplus number of classes.
- The system is not counting the number of students in every course and because of that we don’t know how many classes we need for every course.
- The system is slow and freezes sometimes.
- Time: The process itself is bad and slow because there are too many people involved therefore, we need to make it auto-register or at least reduce the number of interactions between students, advisors, and others.
- Human error: for example, register for courses for another major.
- Lack of feedback: student (user) should get Immediate feedback on their actions for example: when they register/drop to a course or not met the minimum credit.
HCT registration system is a system that provides and manages college courses. Their goal is to provide a fast, secure, and easier way to register courses to students across all HCT campuses. HCT registration system providing a lot of services for student such as: Prepare for Registration, Register for Classes, Plan Ahead, Browse, View Registration Information, Browse Course Catalog. The above services work efficiently but it is missing some important features/services. One of these features is having a lack/surplus of classes due to having unbalanced number of lecturer and students. Currently system is not counting and dividing the classes based on the number of student and lecturer. This problem would affect every stakeholder (Students, Lecturers, Advisors, Supervisors, Administrations) in a separate way. For students, this will affect them by having the minimum/maximum number of credits, for ex. If a student had 4 courses and then they decided to cancel his 4th course, then he will stick with 3 course which will leave him with 9 credits, and this is not allowed due to HCT regulations. For Lecturers, the system will keep adding/dropping courses from their schedule, and this will confuse the lecturers. As an advisor, the students will ask the advisor frequently to send a request to the administrations to open/add new courses which will lead to consume more unneeded effort and time to the advisor. As a supervisor, he will have to check for the number of registered students in each course to open classes manually which leading to a lot of human errors. For administrations, they will have to deal with the massive number of courses requests that are coming from the supervisors.
Our solution to this problem will be create a new feature/service that will count the needed classes numbers based on the student courses registration. This solution will solve a lot of problems that we have talked about previously. It will help the students to get enough classes in every semester. Lecturers can be prepared before the semester starts. It will save a lot of time and effort on advisors. As a supervisor, she/he will have enough data to decide the classes number. Eventually, administration will know the number of classes, budgets, and lecturers needed in every semester. This solution will benefit HCT organization in every aspect, from the financial to the operational processes. We believe that it will lead to less human errors and will add a high value to HCT registration system effectively.
The HCT registration system is going to fulfil all the requirements and problems stated in the problem statement and this system will deal with all those problems efficiently. It will enhance the speed of work and will reduce the workforce cost. The reliability will be increased by the use of HCT registration system. Because in traditional systems generally institutions store the data on documents, files or on spread sheets but now it will provide a specific database in which it will be easy to insert of delete some kind of data about any registration and system will also allow to modify the data.
As we know that the system is for a Higher College have clear requirements about new system, each and every term associated with the system is well defined and well explained that shows that the requirements of the system are very clear and understandable, due to the reason we choose to use the waterfall methodology for this project. Waterfall methodology is very basic software development methodology which were being use over the decades for software development and system development. We have some advantages of this model, due to these advantages many of the organization still using this model on and off for their projects.
-
I. Easy to understand: This is sequential and hierarchal model thus easy to understand for people within the team and outside the team like clients. It provides a complete life cycle for controlling and organizing software development projects.
-
II. Focus on goal: Every team whether they are part of development team or part of design team, every person has a common goal to complete this project. They share common goal and stay stick on one point to complete their work in assigned time frame as in shown in
Figure 1. -
III. Coordination between teams: This development model allows departmentalization and managerial controls. They focus to coordinate with each team and provide a specific time frame to each of them to complete their work on time. In this model team’s coordination is easy when a design team finish their work and complete design phase, they handover all the material to development team to start coding the design.
Where the requirements of a system are not subject to change, we use waterfall methodology as this development methodologies gives us a clear roadmap and help us to focus on our goal. We are using waterfall for the project because it allows the owner to have control over system development team and system development progress can be access easily.
In September 2020, SMC student had a course registered in his schedule with 12 credits. The problem is the system only allowing 10 students as minimum and they were 8 students only and the registration system already accepted it and submit the request. Therefore, the lecturer cancels the course and who had 4 courses left with 3 courses. Therefore, the lecturer cancels the course and who had 4 courses left with 3 courses. This problem leads to more academic issues. After discovering this problem, we read several pieces of literature about course registration systems.
One of the literatures Ruben Estevez, S. R. (2013) found or mentions in his research that there are actually some researchers who built an auto-registered system in which they used "genetic algorithms to generate satisfactory schedules" and found that the algorithms reduced the time needed to create course schedules, and the resulting schedules satisfy instructors. There are also other researchers who have built a system using wireless application protocol which enables the student to register over mobile but still requires the presence of students on campus. However, the problem is none of them mention how the user feels about for example: "the usability of course, registration systems. Can users learn to use a course registration system easily? Can they use it properly? Are they satisfied with the system?".
(LI, Y. ,2017) wrote a paper about Add-on Course Registration System and he/she talk about the problems, business component, technology component, Disadvantages and advantageous but he/she mention one feature about the system that I think it’s important and it will add a lot to our system which is Provide Course Recommendation Ranking and Reviews for example: student can tell how many credit he/she need to complete and what courses they have not scheduled for yet. Also, there is another paper written by Qurban A. Memon, M. S. (2005) about a similar feature called course priority, which suggests what course student should add or prioritize first.
Y. Peng, N. Liu, Y. Li and Z. Shao paper he says that the online course registration system is a critical component of the educational administration system, which includes registration guidance, registration control, undergraduate and graduate course registration, retaking and retesting, dropping a course in the middle of the semester, and information exchange, among other things. In April 2009, Tsinghua University's new course registration system became live. After implementing he found the new system enhanced the registration procedure, established common course registration for undergraduate and graduate students, and supported instructional activities across the spring, summer, and autumn semesters by allowing students to register for courses willingly. This article discusses the new online course registration system's design and execution, including the registration method, technical architecture, and system design.
Also, Parthiban, K; Nataraj, R. V says Each program has its requirements. Course registration is crucial at educational institutions throughout the academic system. Managing course registration for a semester is a time-consuming job that incorporates various factors such as course design, teacher assignment, and timetable.
Furthermore, course registration for FCFS-based registration will be more time consuming because it will need selecting numerous course instructors who will be teaching multiple courses. This study primarily focuses on investigating a Service Oriented Architecture by combining the curriculum, instructor management, and schedule management in order to provide students with a highly available, dependable online course registration platform. In our project we need a database to save our data and records after reading many papers we are looking about the difference between different types of databases. A. Boicea, F. Radulescu, Laura Ioana Agapin.
This paper compares and contrasts Oracle Database, a SQL database management system, and Mongo DB, a No SQL document-oriented database management system. Theoretical differences, features, constraints, integrity, distribution, system requirements, architecture, query, and insertion times are among the comparison factors.
We also researched the technical aspects, and we found that our project is possible to implement by using the MongoDB extension that the JavaScript programming language support. The most extensive defect of using this method is that we need to learn monody from scratch.
The proposed service will have a positive effect on the organization structure and procedures because it will be less interaction between student, advisor, and others, which means it will reduce the errors that’s made by humans; therefore, it will save time and effort. Our system will fit the current registration system as it is a new function of it, therefore it has a small effect on day-to-day operations. The only sensible change that may occur is the classes counter that the system is missing.
I used MS Project to create a plan for the schedule and time management as shown in Figure 2 and Figure 3.
The above Table 1 shows the balance and the cost for every asset we chose, it also shows if it's under or above our budget.
Risk management is the process of identifying, analyzing, and responding to project risks. It includes risk description, probability, impact, and how to mitigate these risks. Risk management also includes accepting risk.
The above Table 2 shows the risks we might face in this project and how we can reduce or remove the risk.
Here is the table that shows the Requirements gathering in Table 3.
We believe that our system will solve two major problems we have in our current system, which is the lack of classes and the time needed to register for classes. We will solve the first problem which is lack of classes by counting the number of student for each course then display it in the form of report to supervisor which will give him accurate number for each course then he/she can decide how many classes he/she need to open and how many instructors needs for each course. For the second problem, our system will suggest or recommend courses to a student, depending on his/her semester or credit and prioritize the course the student need to complete first. By fixing these two problems, we will reduce the amount of interaction between the advisor and student and that will make course registration faster, easier and less stressful for both student and advisor.
The significant challenge that we will face is to test our service on universities portals. Also, it won’t be easy to use the universities portal to test our code. In our project we need to learn the below skills/languages to create our service:
- SQLDeveloper (Oracle) or MongoDB: For our database.
- Node.js or PHP: To link our database to the service.
- JavaScript (Vanilla or React Library) and Bootstrap: To create our service UI.
The first and foremost purpose of the assignment was to test and analyze the whole system that how it going to be built and how it’s going to fulfill the requirements of the institution. The analysis and design part provides a comprehensive idea about the view that how the system will look after the completion and how it will get, store, and transfer the data and also gives an idea about the data processing inside the system. The system analysis part will provide the cost idea and also provide the UML model of this system so, it would be easy for the developers to read this document and start the development process step by step. The edge system analysis provides us is that it enables us to decrease the risks and deal will all the sensitive components efficiently.
- System must be efficient to fetch complete student information from the college system to calculate courses and generate plan for each student.
- System must provide reliable information and if the number of course is less than 4 ask the student to choose another course so he can take 4 courses in one semester.
- Any student profile which is incomplete or insufficient for generating a course plan will not be entertained in this new registration system.
Functional Requirements: Which are the essential things (functions) we want the system to do so we can focus on the important thing and not get distracted. (Specifies things the system should do)
| No. | Requirements |
|---|---|
| 1 | Authentication |
| 2 | Authorization levels |
| 3 | Create reports for supervisor |
| 4 | Send notification to students |
| 5 | Generate plan for students |
| 6 | Calculate how many classes needed for each course |
| 7 | Advisor: Edit Student Plan |
| 8 | Student: Edit Plan |
| 9 | Checking if student need to repeat the course |
Non-Functional Requirements: The behavior of the system like user experience, general characteristics and some features.
| No. | Requirements |
|---|---|
| 1 | Provide multiple plans for students |
| 2 | Usability: How easily users will interact with the web |
| 3 | Reliability: Reduce or remove all the bugs |
| 4 | Front End: CSS and Bootstrap ...etc |
Well, in this task we faced many challenges unfortunately or luckily as you can say because this task gave us hard time but also provided us with knowledge and problem-solving techniques and it was a great experience overall. The major issue that we faced was in the flow chart, we were facing problems in understanding the case because we were trying our best to do it perfectly. So, we repeated the flow chart 4 times and then we got the best one. In this whole scenario, the software development methodology was also a big task because the success ratio of development of the system and especially the system analysis document depends on the methodology that we choose to develop the system, as we all know that it depends on the idea of the system that are we clear about the requirements? And there is no need to change the requirements in the future? Then we choose the best method and suggest developing with that methodology. Cost management is also a huge task when we plan for a system because the estimated cost enables us to use the resources according to the budget and also if we need to outsource for some resources then we feel free to hire someone else for the specific task. The entity-relationship diagram part is also tricky because there should never be any mistake and all the entities and their relationships with each other should follow the rules and regulations of UML modeling. The topics, those students should read before doing these kinds of tasks are as follows:
- Development Methodologies
- UML Modeling
- ERD
- Cost Analysis
- Risk Management
Education is one of the major concerns for every state in the present time. Everyone and every country are focusing on the improvement in education system. According to research, the adult literacy rate in Arab Emirates is increased from 53% to 93% and this rate is recorded from 1975 to 2015 and now these days it is improving more. the primary concern of all the states these days. The average increase in literacy rate is 21.02%. With the growing literacy rate of course, we can say that people are getting admissions in different educational institutes rapidly.
So, to takeover this huge amount of registrations day by day, every institution whether it’s a school, college, or university they want an efficient and automatic registration system that fills up their needs and make the registration process easy for both institute and the students. These automatic systems will reduce the workload and work forces in the college. This project is all about that online registration system named as HCT registration system. This system is going to solve all these registration and management problems.
Design phase is the longest part in this project because it explains the design of the whole computing-based solution from design deliverables, ERDs, Json and other diagrams.
Relational design is the actual design of the database. We have two ERDs one for SQL and NoSQL, both of them are right but at first, we think that we will work with Oracle which SQL but at the end we decide MongoDB is better for us. However, because we are using MongoDB with Document-oriented Database we need to attach our JSON file with it.
The above Figure 4 & Figure 5 shows the SQL Relational Diagram and NoSQL Relational Diagram.
Here is the JSON as Code 1 shows below.
[
{
"std_id": "h00353361",
"first_name": "Mohammed",
"last_name": "Bineid",
"mobileNo": 567760020,
"year": 2022,
"semNo": "1",
"gpa": 2,
"gender": "male",
"user": {
"username": "h000001",
"password": "0000",
"email": "[email protected]"
},
"adv_Id": "h000002",
"d_id": 1,
"major_code": "CIS",
"course_id": [1, 2, 3, 4, 5]
},
{
"users_std": {
"username": "h00353361",
"password": "0000",
"email": "[email protected]",
"std_id": "h00353361"
},
"user_adv": {
"username": "h000002",
"password": "0000",
"email": "[email protected]",
"adv_Id": "h000002"
},
"users_fac": {
"username": "h000003",
"password": "0000",
"email": "[email protected]",
"std_id": "h000003"
}
},
{
"course_id": 1,
"title": "JAVA",
"credit_hours": 12,
"course_code": "CIS001"
},
{
"major_code": "CIS",
"major": "IT",
"course_id": [1, 2, 3, 4, 5]
},
{
"adv_id": "h000002",
"first_name": "Madeleine",
"last_name": "Togher",
"mobileNo": 567760020,
"user": {
"username": "h000002",
"password": "0000",
"email": "[email protected]"
},
"d_id": 1
},
{
"sp_id": "h000003",
"first_name": "Unkown",
"last_name": "Unkown",
"mobileNo": 567760020,
"user": {
"username": "h000003",
"password": "0000",
"email": "[email protected]"
},
"d_id": 1
},
{
"d_id": 1,
"address:": "200 SHJ",
"city": "Dubai"
},
{
"semester_1": [
{
"plan_No": 1,
"course_id": [1, 2, 3, 4, 5]
},
{
"plan_No": 2,
"course_id": [1, 2, 3, 4, 5]
}
],
"semester_2": [
{
"plan_No": 1,
"course_id": [1, 2, 3, 4, 5]
},
{
"plan_No": 2,
"course_id": [1, 2, 3, 4, 5]
}
]
}
]Designing a web page from appearance and functionality to navigation and ease-of-use, can be time consuming and frustrating. Therefore, tools or processes like wireframes and prototypes are there to help designer. Wireframes are blueprints for the website or basic representations of the product. The two types of wireframes are low-fidelity, mid-fidelity and high-fidelity, but in this project, we will use low and high fidelity. Prototypes are early design models of the final UI of your website or simply an advanced wireframe with more visual detail and interaction. The benefit of these tools is to save time and money by having an idea on how the final product will look like.
Low-fidelity wireframe is a basic or a skeleton of a web page. It helps programmer, stakeholders, and designers to have an idea of where the UI element might be placed. Low fidelity can be developed by hand as a sketch or using digital tools like Figma or Adobe XD, but we used Figma in this project.
High-fidelity wireframes are more complete version of the end product than low fidelity. Usually, high-fidelity is the last thing to be done in the project because it takes more effort to create, but they are effective in that they reveal how a product will look at project completion.
- Login
- Authentication
- Select_plan
- Approvement
- Report
The above Figure 6, Figure 7 and Figure 8 Login page is the first page you will see when you enter the portal or website. First you need to Enter your email and password in the textboxes, then click on button. After you click on the button you will redirect to Authentication page.
After being redirected to Authentication page the user should receive a code which he needs to enter in the textbox, then he needs to click on the button to make sure that no one can enter his account as shown in Figure 9, Figure 10 and Figure 11. After you click on the button you will redirect to Select_plan page.
After being redirected to Select_plan page you need to select a plan by click on button or checkbox then clicking on the confirm button which is on the right side below the plan table. This page is for selecting a plan as shown in Figure 12, Figure 13 and Figure 14, after you click on the confirm button you will redirect to Approvement page.
After being redirected to Approvement page, this page is to change your courses or delete them as shown in Figure 15, Figure 16 and Figure 17. After you are done you just need to click the approvement button then the system should send SMS or email to make sure you are registered.
Report page is for department or supervisor and it’s just for reading. It contains all the information about each course and suggested classes number as shown in Figure 18, Figure 19 and Figure 20.
Planning or designing an evaluation for a project is a critical step in every project because it will give the developer an idea about product quality. The design evaluation criteria are different for every project because the criteria depend on the product. However, Design Principles and Accessibility are the criteria we chose.
Note: we can’t use Usability criteria because we need to develop the website to test it.
The rules a designer must follow to create an effective and attractive product or simply what you should do and don’t and it based on knowledge, experience, and common-sense. There are five Design Principles rules Visibility, Feedback, Affordances, Constraints, Consistency.
| Principle | Meaning |
|---|---|
| Visibility | This principle is responsible for how the product or what the product is and what used for |
| Feedback | This principle is responsible for making a clear response on what has been accomplished by the user |
| Affordances | This principle is responsible for how the product is used |
| Constraints | This principle is responsible for restricting the possible actions that can be performed |
| Consistency | This principle is responsible for creating a uniform interface or having similar operations and similar elements for similar tasks |
The above Table 4 shows the design principles that we are going to use in our project.
Thousand of students will use this system therefore, we need to make sure that everyone should be able to use our system and that’s called accessibility. Web Accessibility is all about designing or developing a website with tools and technologies so that people with disabilities can use them. In this project we will focus on one type of disabilities Visual Impairment.
These types of people are blind, or they have any kind of vision loss, and they need some sort of feature. Therefore, we will provide these features in our website:
- We will use Alt Text to images or icons because people with this problem usually rely on assistive technologies such as Screen Readers and refreshable Braille Readers.
- Avoid using thin fonts and we will try to avoid adding links to images that can’t support Alt Text.
- Avoid using Place Holder because it’s usually gray and small which make it hard to see.
- Avoid Automatic Media and Navigation. Color blind: To avoid most problems with color blindness we will provide a dark-mode which will make the website just white, black, dark grey and more, but it will be limited color and the majority of space is dedicated to dark surfaces.
Designing a website is one of the hardest parts of this project for several reasons. First, we can’t ask people about our design or get feedback from them because there is no time and it’s hard to find people. Second, we can’t design a website that is accessible for all types of people such as people with Motor Skills/Physical Disabilities because of time. However, we didn’t include Usability criteria because we need to develop the project (website) first then we can test it to see if it meets the criteria or not.
Hierarchical Task Analysis (HTA) is a diagram or method to describe the activity in terms of how to reach the goals. It focuses on physical and observable actions, and also includes actions not related to software.
Main Task: main task always starts with number 0. Figure 21
Sub-Task: sub-task always starts with number 1 or more. Figure 22
letter “ * ”: Tasks that are repeated. Figure 23
letter “ O ”: Tasks that are optional. Figure 24
A line: under a task means there are no more subtasks. Figure 25
Plan: plan can be numbered based on the task; however, the plan shows the path you need to take to reach your goal or main task. Figure 26
The first step to draw a HTA diagram is to make something called tasks breakdown which simply means breaking every task you have into smaller tasks. To make a task breakdown we need these steps:
- Identify the task title or main task which is the starter point.
- Identify the first level of sub-tasks.
- Identify which sub-tasks need further analysis.
- Number task and all sub-tasks.
-
To register
-
Enter URL
-
Login
2.1. Enter the Authentication code
- Click register
3.1. Select plan
3.2. Edit course
3.3. Delete course
- Click confirm
After making Task break down, we can draw the diagram. However, the diagram has more details like identifying essential and optional sub-tasks and finally planning for each path. Figure 27
Diagrams or pictures are among the best and oldest forms of human communication They are mainly used for representation. A context diagram or data flow diagram is a high-level model that shows or illustrates how your system interacts with alternative entities (systems, database, process) and how the data flows. The main benefit of context diagram is that no knowledge or experience is needed to understand the diagram. Levels in a context diagram or data flow diagram are numbered from level 0 and level 1 or more, they use a context diagram as a base to draw more detailed diagrams.
Process: Any process that produces , updates, and performs computations. Figure 28
External entity: External system that’s interact with the system by sending or receiving. Figure 29
Data store: Is where we store or hold data to use it later (database). Figure 30
Data flow: The route or path that the data travel between external entities, processes and data stores. Figure 31
In the below diagram, Auto-register system is the main process, or we can call it process 0, is the process that represents the entire information system. There are eight entities Student, Advisor, Plan offering system, Course offering system, Advisor management system, Academic history system and Department. Figure 32
- The system provides the specific Plans for each student and generates reports.
- The system filters out those courses that cannot be selected by students because their pre-requisites, GPA , and semester are not satisfied. Repeated courses are also added to the plan.
- The student makes Plan selections.
- The advisor has permission to edit or change plans for students.
- The student can edit or change courses depending on the filtered courses.
- The system sends confirmation to students and generates reports for the department.
In the context diagram we represent the entire system with a single process, which is process 0. However, in level 0 we represent each process as sub-processes and now we can add data store, they are together form a complete system. Figure 33
Sub-processes: Select Plan 0.1 - Get Information 2.0 - Filter Course 3.0.
Data store: Plans Offered and Courses D1 , Approved Plan D2
The student selects which of the planes he prefers. The selected plan (approved plan) is stored. Both student and advisor can make modification if there are courses. Repeat courses cannot be removed. Send confirmation and produce report, then send it to department.
Advisors receive student list from the Advisor Management System. Courses offered received from the Course Offering System.
Checks if student needs to repeat courses and student status. Other semester courses for the student are provided through Plan Offering System and stored.
At level 1 diagram we look at the processes that make up level 0 diagram but with more details. Figure 34
Outside the rectangular boundary are external entities and data store however they are out of scope of this level 1 diagram.
The first problem we faced in this report was understanding what context, level 0, level 1 diagrams are because many articles and papers contradict each other and because of that we took a lot of time and effort. To solve this problem, we read even more articles and watched many videos. In the end, the problem was there are two types or methods to create context, level 0, level 1 which are old and new. However, we chose the old system because it is more logical.
Old method: Starting with creating context then level 0 then level 1 and continue.
New method: Starting with creating level 0 then 1 then 2 and continue.
A use case diagram is used to describe the interaction between actors and the system that you want to observe, which is Auto-register system. Use case diagram has 4 elements: system, actor, relationships and use cases. Unlike context diagram use case specify how the system interacts with actors without worrying about the details of how that functionality is implemented.
Actor: Stick figures is an end-user but not necessarily sometime can be non-human. Figure 35
System boundary: A system boundary defines the scope of what a system will be. Figure 36
Use case: A use case represents a functionality of the system. Figure 37
Relationships or Associations: Used to describe the relationships between actors and the use cases. Figure 38
The above Figure 39 shows the use case diagram of our system.
-
All end-users of the system must authenticate to use its services.
-
Student must select a plan then, approve it.
-
All end-users can manage plan.
-
Only supervisor can read report.
The above Figure 40 shows the state diagram of our system.
The above Figure 41 shows the sequence diagram of our system.
We classify our development tools into these four categories Programming language, Database, Network configuration, along with other technologies.
A programming language is a formal language comprising a set of strings that produce various kinds of machine code output or simply mean a way to communicate with computers. We classify programming languages into two categories front-end and Back-end.
Front-end or client-side is everything that users interact with from text, colors, buttons, navigation menus and images. In this project we will use HTML, CSS, and JavaScript.
| Term | Meaning |
|---|---|
| HTML | Stands for Hypertext Markup Language is the basic building block of almost any website. The purpose of HTML is to define meaning and structure for web content |
| CSS | Stands for Cascading Style Sheets is one of the style sheet languages like DSSSL and XSL which responsible of the presentation of the website such as layout, colors, fonts |
| JavaScript | Used to make our website more interactive with users like drop-down menus and contact forms |
| jQuery | Is JavaScript library and the purpose of it to simplify HTML DOM tree traversal and manipulation, as well as event handling and more |
Back-end or server-side is everything that happens behind-the-scenes activities such as communicating with servers or databases. However, we removed the database-side because we will explain it on the next Database section.
| Term | Meaning |
|---|---|
| Node.js | An open-source, cross-platform, back-end JavaScript runtime environment and it uses JavaScript. The purpose of node.js in this project is to handle all the operations on the server-side such as generate pages, read and write files, collect form data |
| Embedded JavaScript Templating (EJS) | Is template language/system that help user to generate html pages with plain JavaScript. It works like a master page in .asp, however, we will use it because it makes things easier when we need to output html using JavaScript |
| Document Object Model (DOM) | Programming API for HTML and XML documents and it defines the logical structure of documents. The purpose of DOM is to allow language like JavaScript to style or structure your website |
| Express.js | It's a back-end web application framework for Node.js |
| Mongoose | It's a library for MongoDB and Node.js that allows you to define schemas with strongly typed data or to make simple it’s an object modeling tool for MongoDB |
Database is a set of organized collection of structured information or data stored electronically in a computer system. There are many types of databases, but we will use NoSQL database.
| Term | Meaning |
|---|---|
| NoSQL | Stand for not only SQL is which mean you can use both SQL and other technologies like JSON to store and retrieve data. There are four types, but we will use Document-Oriented Database and to specific we will use MongoDB, this type of database used JSON like document to store data |
| Atlas | A service or a cloud service that provided by MongoDB |
Configuring network is process of assigning network settings, policies, flows, and control or simply it’s a process to design some type of communication.
| Term | Meaning |
|---|---|
| Heroku | Is a platform (PaaS) in cloud used to deploy and manage apps or in our project we will deploy a website |
| Git | Stand for Global Information Tracker which used to manage your source code |
Since we will use Heroku we will explain the steps as developer and for end-user all he need is laptop or pc with internet using WI-FI or LAN.
Note: In this part we will assume that all dependencies and plugins are already added to the project.
- Create Account in Heroku (Free)
- Login
- Download Heroku Command Line Interface (CLI) and Git.
- Using Command Line Interface like CMD or Git Bash login to Heroku.
Code 2
C:\Users\User>heroku login
>> Warning: heroku update availabe from 7.53.0 to 7.59.0.
heroku: Press any key to open up the browser to login or q to exit:- Check that you have the prerequisites installed and they are node, npm and git this is important because some versions need different steps.
5.1. Check node by enter: "node --version" Code 3
C:\Users\User>node --version
v14.18.15.2. Check node by enter: "npm --version" Code 4
C:\Users\User>npm --version
6.14.155.3. Check node by enter: "git --version" Code 5
C:\Users\User>git --version
git version 2.33.1.windows.1- Create a Profile file in your project folder to declare what command should be executed when you start your app.
Code 6
C:\Users\User\Desktop\..m>copy nul Procfile
1 file(s) copied.- Write this code in Profile file: web: node “your index name”. “file type”.
Code 7
web: node app.js- Run git init command to creates a new Git repository.
Code 8
C:\Users\User\Desktop\..m>git init- Run git add command to add files to the Git staging area.
Code 9
C:\Users\User\Desktop\..m>git add- Run git commit -m “ your comment” command to save what you did.
Code 10
C:\Users\User\Desktop\..m>git commit -m "1st GP Project commit"- Run heroku create command to create an app on Heroku.
Code 11
C:\Users\User\Desktop\..m>heroku create- Run git push heroku master command to upload your files to Heroku server.
Code 12
C:\Users\User\Desktop\..m>heroku create- Run git push heroku master command to upload your files to Heroku server.
Code 13
C:\Users\User\Desktop\..m>git push heroku master- Finally click on the link or copy and paste it on the browser to go to your website.
In this section we listed the rest of the programs/software that we used in this project.
| Term | Meaning |
|---|---|
| Integrated Development Environment (IDE) | IDE is software or application to build other applications and it has tools and graphical user interface (GUI) to help developer |
| Visual Studio Code (VS code) | It's a source-code editor made by Microsoft for window, Linux and macOS. We used Vs code because it has many plugins, fast and a nice interface |
| CMD & Git Bash | A Command-Line maybe it’s not IDE but simply it just to run command. We used it because it fast, simpler, and efficient for large system or when we need to edit files |
| Graphical tools | The tools we used to design our diagrams such as ERD, Context diagram and Use case |
| Data Modeler | It is a free tool or software made by oracle, we used it to create ERDs |
| Moon Modeler | It is a data modeling tool for MongoDB, PostgreSQL and other however, we used it to create our NoSQL diagram |
| Lucid | is website to create diagrams and we used Lucid to create diagram such as Context diagrams and Use cases |
To sum up, we will use Front-End tools like HTML, CSS, and JavaScript to design our interface. We also will use things like jQuery to cut or reduce time because it will reduce the code that we need to write like animation or event handling moreover, it’s fast, free and small.
After building our front-end we need to build our Back-End to handle all the requests, responses, and database. Node.js is what we will use for server-side because it is free, runs on various platforms , node.js uses JavaScript so we don’t need to learn new language, however, the main reason we chose Node.js is because of Express.js which is framework of node.js. We think Express.js will reduce coding time and effort required to build out project because express.js provides simple routing for requests made by the client and provides middleware that is responsible for making decisions based on the request and response by the client. On top of that, we will use Embedded JavaScript Templating (EJS) because our website needs to deal with a lot of HTML output and generated real-time updates like add or delete courses. Before talking about database, we will Mongoose because we think it will help us to reduce time in terms of managing schema, validation, and relationships. According to Mithun Satheesh, B. J. (2015) many companies used node.js such is PayPal, LinkedIn, eBay.
on the other hand, building database is much simpler compared to back-end especially nowadays, because databases are in cloud such as Atlas which we will use. We chose atlas because it has many features such as it’s free, fast and you can store up to 500 collections and you can create 100 databases moreover, you can pay if you more space. Atlas also provides Security by using Authentication, Authorization, Encryption, and more therefore, we don’t need to start from scratch we just need to do simple security processes. However, Kristina Cbodorow (2013) said that MongoDB has two main goals which is Easy of Use and Easy Scaling.
Finally, Network Configuration is last and the easiest part which all we need to do is deploying our website online using Heroku platform. We will use Heroku because it’s free, simple and provide some security or at least for small project Figure 42.
Challenges or problems we faced in this project were more than we expected in both design and development. The first challenge in the design phase was designing a user interface (UI) for both Low-Fidelity and High-Fidelity. The problem was we needed to design the UI according to Design Principles and Accessibility and, that took a lot of time from reading previous courses or articles online. The second problem was creating Level 0 and Level 1 diagrams, because level 0 diagram depends on context diagram and level 1 diagram depends on level 0 therefore, if we change context diagram, we need to create all of them from the start and that’s what happened which took a lot of time.
However, for Development phase we didn’t face a lot of challenges because we knew all the technologies that’s we need to develop our project but, we may change a few technologies or tools such as choosing between SQL or NoSQL database. On the other hand, Programming Language (Front-End & Back-End), Network configuration and Other Technologies will remain the same. Regarding the database type Distributed or Centralized we will use Atlas which is NoSQL database, and they will take care of our data, therefore, we don’t need to think about Centralized Database or Distributed Database but if an organization want to use, we recommend using Distributed Database because there are many campuses, and every campus should have their own database.
Lastly, Graphical Tools were one of the biggest problems we faced because most of them are not free, such as Moon Modeler which we used to create our ERD for NoSQL data and Lucid which we used to create other diagrams such as level 0, 1 diagrams and Use case. Moon Modeler was free for a limited time (14 days) therefore, we need to create our database within 14days, which was hard because we can’t change it later. Lucid.app on the other hand, there is no limitation on time but there is on how much you can use, such as how many pages you can use or how many shapes you can put in the pages.
Figure 43 Shows the whole Roadmap.
Figure 44 shows the Initiate Phase timeline that include Abstract, Introduction, Problem Statement, Project Objectives, Feasibilities, Contribution and Project Deliverables, and References parts.
Figure 45 shows the Planning & Analysis Phase timeline that include Abstract & Introduction, Methodology Selection & Discussion, Flowcharts, Context Diagrams, Entity Relationship Diagrams, Learning, Building a sample Databases, Functional and Non-Functional Requirements, Time & Cost & Risk Managements, and WBS parts.
Figure 46 shows the Design Phase timeline that include Abstract & Introduction, JSON, ERD's, UI Designs (Low & High Fidelities), Design Principles, HTA, System Descriptions, Level 0 and 1 Context Diagrams, Use Case Diagram, and State Diagram parts.
Figure 47 shows the Implementation Phase timeline that Front-End & Back-End. For this part we used a specific programming language for the Front and Back End in our project. We also used MongoDB for our Database and Heroku for server/hosting.
In conclusion, Auto-Register system has two main goals which are every students must have enough courses and students cannot register any course by mistake. We can achieve the first goal by provide the management the data they need to decide how many classes they should open for every course. The second goal can be achieved by providing a plan for student, because the plan is generated by the system it will be free from mistake and student can modify the plan if they meet the requirements for the course that they want to add.
Since I finished the project, I'm able to say that I'm more familiar now with the structure of building/creating a project from zero. It's really useful and helpful to know how to start a project from the ground and organize/split the work on team members. I learned how to organize my and the team members time by using the MS Project application with helped us to estimate the time we need to work on every part. I also learned how to combine everything I learned in my previous 4 years in one project and now it makes since of why having diagrams which it means it saves a lot of time from the start instead of doing it without it. It really helped us to reduce time and errors from the start of the project.
In the future, we are going to develop or implement the project (website) based on the plan we decided. From creating an interface, back-end, database and deploy the website online. We will divide the work equally between us and gives everyone the part he is expert or has experience on. However, to implement the project we need to learn new technologies such as React or Next.js for front-end and we need to learn how the server works in term of request, response, and process request time to control the speed of our website. Also, we will add more features and capabilities to our website like how many hours lest for student.
- [1] “Usability testing on website wadaya,” [Online]. Available: https://iopscience.iop.org/article/10.1088/1742-6596/1165/1/012012/pdf#page=1. [Accessed 13 4 2022].
- [2] “Using the Advantages of NOSQL: A Case,” [Online]. Available: https://www.researchgate.net/profile/Divya-Chauhan-4/publication/349110376_Using_the_Advantages_of_NOSQL_A_Case_Study_on_MongoDB/links/6021154d92851c4ed5580298/Using-the-Advantages-of-NOSQL-A-Case-Study-on-MongoDB.pdf#page=1. [Accessed 18 3 2022].
- [3] “A Place for Node.Js in the Computer Science Curricu,” [Online]. Available: https://www.researchgate.net/profile/Scott-Frees/publication/271849731_A_Place_for_NodeJs_in_the_Computer_Science_Curriculum/links/54d4db340cf2970e4e63c479/A-Place-for-NodeJs-in-the-Computer-Science-Curriculum.pdf#page=1. [Accessed 13 4 2022].
- [4] “Testing a Website: Best Practices” [Online]. Available: https://www.heromotocorp.com/en-in/uploads/Annual_Reports/pdf/20130315113443-pdf-68.pdf#page=1. [Accessed 21 3 2022].
- [5] “WebSite Testing. Software Research, Inc.” [Online]. Available: http://www.lieb.com/Readings/evalid%20site%20testing.pdf#page=1. [Accessed 18 11 2022].
- [6] "Comparison of JWT and OAuth 2.0 authorisation,” [Online]. Available: https://core.ac.uk/download/pdf/159753962.pdf#page=1. [Accessed 11 10 2021].
- [7] “Automated Course Advising System.” [Online]. Available: http://www.ijmlc.org/papers/384-H0018.pdf. [Accessed 19 1 2022].
- [8] "Add-on Course Registration System.” [Online]. Available: https://digitalcommons.wou.edu/cgi/viewcontent.cgi?referer=https://scholar.google.com/&httpsredir=1&article=1000&context=computerscience_studentpubs. [Accessed 24 9 2021].
- [9] “An Automatic Dialog System for Student Advising.” [Online]. Available: https://cornerstone.lib.mnsu.edu/cgi/viewcontent.cgi?referer=https://scholar.google.com.tw/scholar?hl=en&as_sdt=0%2C5&q=automated+student+registration+scheduling+system&btnG=&httpsredir=1&article=1041&context=jur. [Accessed 16 2 2022].
- [10] "Advising for Course Registration: A UAE University,” [Online]. Available: https://www.researchgate.net/profile/Qurban-Memon/publication/270194000_Advising_for_course_registration_a_uae_university_perspective/links/54ab7ada0cf2bce6aa1d880d/Advising-for-course-registration-a-uae-university-perspective.pdf. [Accessed 27 9 2021].
- [11] “ORIENTAL JOURNAL OF COMPUTER SCIENCE,” [Online]. Available: http://www.computerscijournal.org/vol9no2/development-of-online-student-course-registration-system/. [Accessed 14 3 2022].
- [12] "A model for web-based course.” [Online]. Available: https://www.researchgate.net/profile/Indratmo-Indratmo/publication/263481101_A_model_for_web-based_course_registration_systems/links/5745777a08ae9f741b4091a6/A-model-for-web-based-course-registration-systems.pdf. [Accessed 18 2 2022].
- [13] “MongoDB The Definitive Guide.” [Online]. Available: https://books.google.ae/books?hl=en&lr=&id=uGUKiNkKRJ0C&oi=fnd&pg=PP1&dq=mongodb+&ots=halARddUwk&sig=XLx8N4R6XYqgknRPfk9qLdcaDrk&redir_esc=y#v=onepage&q&f=false. [Accessed 12 4 2022].
- [14] "Node.js, MongoDB, and AngularJS Web Development.” [Online]. Available: https://books.google.ae/books?hl=en&lr=&id=8kTCAwAAQBAJ&oi=fnd&pg=PR6&dq=node+js+mongodb&ots=Hh5ml0PBcz&sig=7Rj2hGLZiknxVFxji92U0r6sJA8&redir_esc=y#v=onepage&q=node%20js%20mongodb&f=false. [Accessed 23 5 2021].
- [15] "Web Development with MongoDB and NodeJS. ” [Online]. Available: https://books.google.ae/books?hl=en&lr=&id=4QKACwAAQBAJ&oi=fnd&pg=PP1&dq=node+js+mongodb&ots=SdUDVKqgrx&sig=PEwyqIeQOAY6r_z-Jmja44z-fIU&redir_esc=y#v=onepage&q=node%20js%20mongodb&f=false. [Accessed 24 4 2021].