Design and Implementation of a Web-based Student Platform Single Page Application

TABLE OF CONTENTS

ABSTRACT

CHAPTER I - INTRODUCTION
1.1 GOALS AND OBJECTIVES
1.2 MOTIVATION
1.3 OVERVIEW AND TECHNICAL AREA
1.4 OVERVIEW OF THE PAPER
1.5 PROBLEM STATEMENT

CHAPTER 2 - REQUIREMENT ANALYSIS
2.1 FUNCTIONAL REQUIREMENTS
2.2 NON-FUNCTIONAL REQUIREMENTS
2.3 USE CASE DIAGRAM

CHAPTER 3 - LITERATURE REVIEW
3.1 SYSTEM RESEARCH
3.1.1 MyStudyLife
3.1.2 My School Portal
3.2 TECHNOLOGIES CHOSEN
3.2.1 Laravel
3.2.2 Vue.js
3.2.3 Bootstrap
3.2.4 Other Libraries and Packages
3.2.5 MySQL
3.2.6 Single-Page Application

CHAPTER 4 - SYSTEM DESIGN
4.1 PAGE STRUCTURE
4.2 DATABASE DESIGN

CHAPTER 5 - SYSTEM IMPLEMENTATION AND RESULTS
5.1 STUDENT PANEL
5.2 ADMIN PANEL

CHAPTER 6 - TESTING
6.1 AUTHENTICATION AND SECURITY
6.2 STUDENT PANEL TESTING
6.3 ADMIN PANEL TESTING

CHAPTER 7 - CONCLUSION AND FUTURE SCOPE
7.1. CONCLUSION
7.2. FUTURE SCOPE

REFERENCES

ACKNOWLEDGMENTS

First and foremost, all praises and thanks to God, for His showers of blessings throughout the process of making this paper that allowed me to put my efforts and see it to its completion.

I would like to express an appreciation to my supervisor, Mr. Wang Haibin, for guiding and encouraging me until the completion of this paper. He has been very kind and patient throughout the completion of this paper and without his efforts, I would not have been able to complete this paper properly and thoroughly.

I would like to express my deepest gratitude towards my parents, whom both moral and financial support has given me the opportunity to conduct this project and see it to its completion. They have helped and supported me all throughout my life and are the main reason that I was able to achieve the many accomplishments that I have today, including this paper.

In addition, I would like to thank all other friends and acquaintances who has supported me and helped me in any form along the way. Many people has helped me considerably throughout this paper, whether directly or indirectly, and I am very grateful for all of the aid and support I received from everyone involved.

LIST OF FIGURES

Fig. 1: Use Case Diagram

Fig. 2: Page Structure

Fig. 3: Page Structure - Login and Register

Fig. 4: Page Structure - Student Panel

Fig. 5: Page Structure - Admin Panel

Fig. 6: Database Design - Entity-Relationship Model

Fig. 7: Database Design - Right Section

Fig. 8: Database Design - Middle Section

Fig. 9: Database Design - Left Section

Fig. 10: Home Page

Fig. 11: Register Page

Fig. 12: Login page

Fig. 13: Student Panel - Dashboard

Fig. 14: Sidebar

Fig. 15: Student Panel - Dashboard

Fig. 16: Student Panel - Profile

Fig. 17: Student Panel - To-Do List

Fig. 18: Student Panel - Assignments

Fig. 19: Student Panel - Exams

Fig. 20: Student Panel - Timetable

Fig. 21: Student Panel - Calendar

Fig. 22: Student Panel - Grades

Fig. 23: Student Panel - Courses

Fig. 24: Student Panel - Teachers

Fig. 25: Admin Panel - Dashboard

Fig. 26: Admin Panel - Users

Fig. 27: Admin Panel - Profiles

Fig. 28: Admin Panel - Majors

Fig. 29: Admin Panel - Grades

Fig. 30: Admin Panel - Courses

Fig. 31: Admin Panel - Teachers

Fig. 32: Admin Panel - Courses Taught

LIST OF TABLES

Table 1: Register page test cases

Table 2: Login page test cases

Table 3: Authentication, Authorization, and Security test cases

Table 4: Student Panel navigation test cases

Table 5: Dashboard page test cases

Table 6: Profile page test cases

Table 7: To-Do List page test cases

Table 8: Assignments page test cases

Table 9: Exams page test cases

Table 10: Timetable page test cases

Table 11: Calendar page test cases

Table 12: Grades page test cases

Table 13: Courses page test cases

Table 14: Teachers page test cases

Table 15: Users page test cases

Table 16: Profiles page test cases

Table 17: Majors page test cases

Table 18: Grades page test cases

Table 19: Courses page test cases

Table 20: Teachers page test cases

Table 21: Courses Taught page test cases

ABSTRACT

Being organized and keeping track of every single assignment, events, deadlines, and schedule can be a difficult thing for a student to accomplish. Keeping all this record manually introduces a lot of problems and inefficiency, such as possible loss of records and additional time wasted just by writing down these tasks manually on paper. Creating a digital student platform aims to fix this problem, increasing convenience and efficiency in a student's daily lives by providing useful functions that help keep track and organize the tasks and events that a student need to do in an easy manner.

In the current modern society, having this platform in a digital, web-based application is the ideal way to implement a student platform in a school setting. This allows the students to access the platform anywhere and anytime, on any device, to be more productive using current technology. For this reason, this project aims to design and implement a student platform single-page web application using the PHP framework Laravel and the JavaScript framework Vue.js, while storing the records in a MySQL database. The platform will provide students with functionalities such as being able to keep track of their tasks, schedule, and events, as well has a student portal in which they can view their grades, courses, and teachers. The platform will also include an administrator panel in which school administrators can edit and modify data for each particular student. These modifications can be made conveniently through the application program interface (API) without directly modifying the tables. Upon using the platform, students should be able to easy and efficiently manage and organize their tasks as well as view their grades and other school-related information, and therefore increase productivity and efficiency in their daily student lives.

Keywords: framework, Laravel, Vue.js, single-page application

CHAPTER I - INTRODUCTION

1.1 GOALS AND OBJECTIVES

The main goal of this project is to create an efficient digital student platform with features where students will be able to keep track and organize their tasks and events, and can also serve as a student portal in which they will be able to view their grades, taken courses, and teachers. This is done to maximize student productivity and efficiency by utilizing modern web technologies to create a web­based application that would serve this purpose.

Another goal of this project is to increase practical knowledge and improve technical expertise using modern web development tools and technologies currently used in the industry. These include web frameworks such as the PHP framework Laravel and the JavaScript framework Vue.js, both of which will be researched and utilized in the construction of this project. This objective is executed by designing and implementing the student platform web-based single-page application mentioned above while learning and using the modern web development tools to gain technical skills and knowledge at the same time, both of which will be very valuable for years to come for future endeavors in the web development industry.

1.2 MOTIVATION

In today's age of digital technology, we have to utilize this modern technology to our advantage in order to maximize our efficiency and productivity. This is especially true for students, whose lives can be very hectic and all over the place if they do not organize their responsibilities and activities properly. This calls for the role and creation of a digital student planner to help students manage and organize their daily tasks and events, with features that allows students to take advantage of modern technology in order to better manage and organize their daily tasks.

Being a student myself, to be able to properly manage and organize tasks and events has always been a key factor in maintaining a healthy and productive student life. I have always utilized the tools available in disposal, particularly student planners and platforms similar to this project, to achieve this goal. Having experience with various kinds of student platforms, each of them has their own advantages and disadvantages that comes with the platform. Because of this, I am determined to make my own form of a student platform that would try to solve those disadvantages of other platforms and maximize student efficiency and productivity, as well as adding additional features of my own that would enhance the functionality of the platform, making it become an application that I would personally gladly use and benefit greatly from.

One of which is the addition and integration of the school portal section in the proposed student platform, which could serve as an information gateway between the student and the school by being able to view and interact with school-related information. Typically, school information portals are kept separate and do not necessarily include student helper/planner applications and functionalities. This requires the student to sometimes cycle back and forth when dealing with school-related applications and platforms. The intended purpose of this proposed project is to combine the two separate platforms into one centralized, integrated platform that could serve as a single platform for students to use when managing and dealing with school-related tasks and information.

1.3 OVERVIEW AND TECHNICAL AREA

The proposed project incorporates functionalities of a student planner such as managing and organizing tasks and events as well as functionalities of a student platform such as being able to view your grades and courses, in the aim to seamlessly integrate these two functionalities together to form an efficient, centralized student platform that students will be able to use for their day-to-day activities.

The Laravel back-end will maintain the business logic, database transactions with the MySQL database, and complex computation that the system requires. The Vue.js front-end will relay the user requests to the back-end and display the results of the response.

1.4 OVERVIEW OF THE PAPER

The paper starts with an introduction to the subject as well as defining the problem scope of the paper, which is to create an efficient, convenient, centralized student platform system that could act as a planner for students to manage and organize their tasks and events, as well as serve as a school portal for students to be able to view school-related information such as their grades and selected courses. This is done in the greater goal of increasing and maximizing student efficiency and productivity.

The paper then defines the requirements needed to design and build such platform, stating the required components that will be vital in creating a fully working student platform as it is intended to be. The paper then states the tools and technologies that will be used to actually construct the student platform, and the reasons as to why these particular technologies were selected. Carefully planning out the required components as well as the tools and technologies required to build those components are a vital process in ensuring that the final project will work and function smoothly as intended.

Then, the paper defines the page structure and database design of the project, in order to ensure that the underlying foundations of the student platform is well-defined and concrete. A proper page structure needs to be well designed before any of the components are built to ensure that the student will have easy navigation throughout the platform. Using the tools defined in the requirement analysis on the previous chapter, the database is designed and implemented as the means to store and persist records in the system. These two elements, the database design and page structure, are not only vital to ensure a convenient user experience and a fully-functioning platform, but also play a key role during development as well-structured basic foundations of a project is easier to maintain and modify.

Once all of the basic prerequisites has been properly implemented and all the components have been properly integrated throughout the platform, the paper shows the results of this project, providing screenshots and explanations to the whole student platform and its workflow. The whole implementation and system is then tested thoroughly by conducting the defined test cases during the testing section. Once the testing process is completed and the Student Platform successfully passes all of the test cases, then the platform can be deemed to work smoothly and properly as intended.

Finally, the paper concludes itself with a conclusion chapter that restates all the goals that have been completed upon completion of the project, as well as defines future endeavors that could be conducted to improve and enhance the functionalities of the platform. References used in the paper are also noted at the very end of the paper.

1.5 PROBLEM STATEMENT

Technology has advanced rapidly in recent years that it has become inevitable that technology will play a role in each and every single aspect of our lives. Thus, it is very important for a student to utilize this access to modern technology as best as they can to maximize their efficiency and productivity. One of the daily struggles of a student is finding a way to manage and organize their tasks and events. Student planner applications help towards this cause by providing students a nice and efficient way to manage and organize their tasks and events, however these applications are typically not integrated within a school's information portal system and thus requires the use of third-party applications outside from the school-provided information portal.

This proposed project aims to solve this problem by not only providing a centralized platform that the students could use to manage their tasks and events, but would also act as a student portal for them to conveniently view their grades, scores, and other student information in one centralized, web­based platform.

Having a centralized student platform would make it easier for students to plan and manage their daily tasks and events, as well as view their student information, and having it available on the web would make this platform easier to access anytime, anywhere, and on any device with an Internet connection. The platform being a single-page application would make it easier for students to navigate through the platform by providing an intuitive and modern user interface, allowing for a great user experience.

CHAPTER 2 - REQUIREMENT ANALYSIS

One of the most important aspects of any software project is to define and analyze the requirements properly to ensure that the goals and objectives will be met once the finished product is successfully implemented by completing the predefined requirements. In order to properly define and analyze these requirements, the requirements analysis chapter will be divided into two parts, which will list the functional and non-functional requirements of the Student Platform. Then finally, a use case diagram will be created to illustrate and better understand these defined requirements.

The main requirements of the system is to build an efficient student web-based platform which would act as a centralized platform for students to manage their daily tasks and events, as well as have access to several student portal functionalities such as being able to view their grades, courses, and other personal student information. The platform should also have an Admin Panel in which system administrators can view and manage user accounts and every other information on the platform. These requirements are further broken down into functional and non-functional requirements on the sections below.

2.1 FUNCTIONAL REQUIREMENTS

In software engineering, functional requirements defines a function of a system or its component in the form of calculations, technical details, and other specific functionalities [39], that portray the intended behavior of the system. For the Student Platform, there are several key functional requirements that needs to be defined for it to successfully complete its primary objective, these requirements are listed as follows:

1. The Student Platform should consist of two main panels, the Student Panel which will hold the main purpose of the Student Platform, and the Admin Panel, which stands for administrator panel, which will be used by platform administrators to manage and organize data and information related to the system and school administration.
2. The Student Platform should validate between student accounts and platform administrator accounts after user login, and redirect them to their correct corresponding panels.
3. The Student Panel should allow students to create and manage their tasks, assignments, exams, events, and schedule.
4. The Student Panel should also allow students to view and interact with school-related information such as their grades, courses, and teachers.
5. The Admin Panel should allow platform administrators to manage all registered users and their information in the platform, as well as register new users.
6. The Admin Panel should also allow platform administrator to manage all school-related information and modify each student's particular information, such as every student's grade, courses, teachers, and profile information.

2.2 NON-FUNCTIONAL REQUIREMENTS

Contrary to functional requirements, non-functional requirements defines the criteria or quality attributes of the system [40]. The main non-functional requirements of the Student Platform are listed as follows:

1. The Student Platform should have a user-friendly and pleasing user interface that is easy and convenient to navigate to allow every user, particularly the students who are the main target group of this platform, to utilize the platform as efficiently as possible. This would allow both the students and the system administrators do to their respective tasks efficiently and not waste time trying to figure out a system with a convoluted user interface.
2. The Student Platform should be web-based so that students have no problem accessing their information anytime, anywhere as long as they have a working internet connection. This would also allow the students to access the Student Platform with any device that supports opening a browser.
3. Unregistered users should not be able to access the Student Platform, and student accounts should not be able to access the Admin Panel.

2.3 USE CASE DIAGRAM

Before designing the system, a use case diagram is required to define the end users that will use the Student Platform, as well as show the relationship between these users and how they interact with the system [38]. The use case diagram can also highlight the different functionalities of the Student Platform along with the user types that will be able to use these features. The proposed use case diagram for the Student Platform is shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

From the use case diagram, we can infer that there will be two main users of the Student Platform, the student and the platform administrator. Both users will have access to common system functionalities such as Authentication and Profile, as well be able to view the Student Profile, with the exception that the student will be able to view the portal for his particular information only, while the platform administrator will be able to view the portal containing every user's information.

The student will have access to the student planner and agenda aspects of the Student Platform, such as managing their tasks, assignments, exams, as well as their events, along with a dashboard page to show this information in a glance. Meanwhile, the platform administrator will have access to the system administration aspects of the Student Platform, such as managing users, majors, as well as the whole School Portal.

CHAPTER 3 - LITERATURE REVIEW

3.1 SYSTEM RESEARCH

One of the first things that needs to be done before the design and creation of the Student Platform is to research similar previous and existing systems to the proposed platform. This will include student planner, student management, and student portal-like systems that exists in the real world and already in use, since the proposed Student Platform will adopt certain aspects from these systems and intend to integrate them together to create one single centralized platform. Several of the main platforms researched that already exist and became the main inspiration for the Student Platform are listed below.

3.1.1 MyStudyLife

MyStudyLife is a free, multi-platform web and native application that acts as a student planner and task organizer [41]. It aims to help students organize classes, tasks, and exams while also including a push notification feature that reminds students of upcoming lectures or assignments as well as the ability to sync these information onto different platforms using the same account. As an application that I have previously used for quite a significant amount of time, MyStudyLife has benefited me tremendously as a student in terms of better managing and organizing my school-related tasks, and I believe that using such student planners have increased my productivity and efficiency as a student throughout my school life. However, I have personally switched between several student planner applications, and it turns out many of these applications like MyStudyLife does not provide integration with a school portal, which is a feature that I would like to see and thus implement in my own Student Platform. While on one hand it is understandable that including school portal functionalities is not the main intended purpose of these applications, I believe that having this feature in one single unified platform would enhance the student experience and further increase student productivity and efficiency. Coming from this experience, student planner applications like MyStudyLife was the main inspiration in creating a Student Platform of my own, one that would include additional features not present in student planner applications like MyStudyLife such as a school portal.

3.1.2 My School Portal

My School Portal is a platform that aims to store and manage student information designed for parents and schools [42]. One of My School Portal's main features is that it only requires one set of login details for both parents and the school to be able to view and manage the student's school information, allowing for easier and faster authentication among the two parties while still uncompromising security. Other features of My School Portal include email integration, news and RSS feeds, online payment, and more. Although I have not used this service personally, My School Portal is used by multiple schools and colleges in the United Kingdom, where the company is based from. However, My School Portal is primarily aimed towards parents and teachers and not necessarily the students themselves. Because of this, features that we see on student planner applications such as being able to manage and organize tasks, classes, and assignments are not present in My School Portal. Granted the school staff can create and modify assignments and events on the calendar, but the students themselves are not able to create their own assignments and events like we see available on student planner applications.

In conclusion, the Student Platform aims to integrate these two student-related applications together and becoming a single, centralized student planner and school portal Student Platform. This is intended to further increase student productivity by having all of their school-related needs, both planning and organizing tasks and events like we see on student planner applications as well as viewing other school-related information particular to the student like in school portals, all well integrated into one single, centralized web platform for the student to conveniently conduct all their school-related online activities.

3.2 TECHNOLOGIES CHOSEN

3.2.1 Laravel

Laravel is a free and open-source web application framework created by Taylor Otwell for the server-side scripting language PHP (PHP: Hypertext Preprocessor) [13]. A framework provides existing, generic functionalities that are reusable to a specific software, application, or programming language [2]. Frameworks are used to speed up the development process by allowing developers to reuse these existing functionalities given by the framework instead of having to code everything again from scratch. Frameworks also provide other additional features that enables developers to explore new functionalities that may not be present natively on the original software.

PHP is a scripting language now commonly used for back-end web development [1]. Created by Rasmus Lerdorf in 1994 , PHP claims to be a fast, flexible, and pragmatic server-side scripting language, and currently powers 78.3% of all the websites whose server-side programming language is known, according to usage statistic reports by w3techs.com [3]. PHP is utilized to transform static web pages in HTML into dynamic web pages, which are web pages dynamically constructed by processed scripts that come from a web server[5]. (Beighley & Morrison, 2009) elaborates on this by stating that PHP allows you to manipulate web page content on the server right before the page is delivered on the client browser, dynamically generating HTML web pages on the fly. The PHP script runs on the server and can modify or generate HTML code at will, hence the term, server-side scripting.

Laravel acts as a framework which provides a large amount of tools and functionalities to PHP, easing common development tasks for developers to build large and robust applications [10]. Laravel provides an ample amount of features to developers, including a fast routing engine, an intuitive database ORM (object-relational mapping), a middleware functionality to validate requests, database agnostic schema migrations, and much more. Laravel aims to provide clear and simple code library and features that help developers quickly learn and start developing applications that adhere to clean and simple code. Laravel also boasts a large and active community that is certainly helpful for developers to discuss issues and new features related to the framework.

Laravel, like many other frameworks, is built using the MVC (Model-View-Controller) design pattern. MVC is a software design pattern commonly used for developing software which divides the program into three structured elements that interconnect with each other, among them being the Model, View, and Controller. This is done to separate the internal representation of information (back-end logic) from how the information is displayed to the user on the user interface. The components of an MVC design pattern are as follows [15]:

- Model

- This is the central component of the design pattern, which represents the dynamic data structure, logic, and rules of the application, separate from the user interface. Modifications to the Model are done through user input via the Controller.

- View

- This component would eventually end up being a part of the user interface, the complete user interface as a whole. The View component can be seen as a representation of information being shown to the user, such as a chart, diagram, or table, from information gathered from the Model.

- Controller

- The Controller acts as the bridge between the Model and the View component. It takes in user input and converts it into commands for the Model or the View.

The MVC design pattern aims for simultaneous development and code reuse. Because MVC separates the business logic from the application interface, it allows different ends of developers (front­end and back-end) to work in parallel without having to wait or disrupting one another. MVC also promotes clean code and code reuse in which similar views for one application can be refactored and reused for other applications with different data, since views inherently simply handles how the data is being represented to the user. While this does not work for code that handles user input, MVC is often combined with a component architecture that provides a set of UI elements, in this case, Laravel's collection of existing components.

Laravel comes bundled in with plenty of features geared towards an efficient yet robust development process. These include but are not limited to:

- Eloquent ORM
- Query Builder
- Migrations
- Artisan
- Blade
- RESTful Controllers

(Staufer, 2019) suggests that frameworks such as Laravel that pre-package a collection of third- party components along with the framework makes developers' workflow easier by having these components already preconfigured and work well together, providing consistency and flexibility to the software development process. (Bean, 2015) also suggests that the cohesive assembly of existing components provided by Laravel allows developers to build their applications in a more structured and pragmatic way.

This project uses PHP as the back-end programming language of choice, along with Laravel as its additional framework. PHP was chosen because of its many advantages compared to other server­side scripting languages. An article by (Goodworklabs, 2015) mentioned 6 benefits of using PHP and why it still remains as one of the most versatile and pragmatic web development languages in the world, including: the simplicity and easy-to-learn nature of the programming language, the flexibility of PHP during development, PHP's easy integration and compatibility with multiple different platforms, PHP's efficient and high performance on production, PHP's completely open-source and free nature, and finally the ability of PHP to give its developers more control by allowing to to mix PHP code with HTML tags.

A study by (Liaw & Mohammed, 2007) comparing the performance of PHP against another well-known open-source server-side web application framework, ASP.net, developed a Personal Media Center to explore the advantages of both technologies. The results also concluded that PHP does indeed have several advantages over Microsoft's ASP.net, including cost, performance, and complexity. Finally, PHP was also chosen because I have personally have had prior experience programming and building a project in PHP, and this project is also intended to improve my programming skills and deepen my knowledge of this particular language. With plenty of its proven benefits, PHP is currently considered one of the most popular programming languages, one of them by an article written by (Goel, 2020), ensuring that there will be plenty of community support to help with issues during development.

Laravel was chosen as the PHP framework of choice because of its simple and clear, yet robust and high-performance capabilities. Many functionalities of the Laravel framework was utilized efficiently during the completion of this project which helped quicken the development process, as well as allow for cleaner and much more maintainable code. Laravel's nature of adopting the MVC design pattern was also very helpful towards the development of this project. MVC allows for separation of the front-end (application interface) and back-end (business logic) of the application. This not only structures the application in a clear format, but also enables easier bug tracking during development. Laravel's command-line interface, Artisan, also provides a lot of helpful commands and functionalities such as the ability to run a web server without requiring the use of a third-party web server typically used along with PHP such as Apache. Many built-in features of Laravel such as the Eloquent ORM and Migrations also make interacting with records in the database very easy to deal with. These two features, along with Artisan, also enables Laravel developers to conduct database transactions directly in Laravel without requiring to directly interact with the RDBMS, adding to the efficiency of the development process.

Laravel also provides a middleware functionality to filter and validate HTTP requests entering the application for authentication. This functionality proved to be very beneficial towards this project, in which it was utilized to differentiate and validate student accounts and system administrator accounts, and then redirect them to the proper panel accordingly. This is utilized along with Laravel Passport, a built-in funcionality provided by Laravel for authenticating APIs used all throughout the project. Laravel's well-built authentication features ensures the security and data protection in the student platform.

Finally, Laravel provides built-in functionalities and scaffolding when working with Bootstrap and Vue [9], both of which were used to create this project. A native functionality ensures that the components from these third-party libraries not only will work smoothly when communicating with the front-end, but will also require less configuration than when working with two different libraries without built-in compatibility. In conclusion, Laravel's well-structured design, intuitive and robust features, and its high performance capability makes it one of the best options for the back-end framework of this project.

3.2.2 Vue.js

Vue.js (or Vue) is a progressive web framework for building user interfaces built for the client­side scripting language, JavaScript [18]. JavaScript is a lightweight interpreted programming language, one of the most well-known and used for building web pages [16]. JavaScript uses the just-in-time (JIT) compilation, meaning that the code will compile during the execution of the program (at run­time) as opposed to before execution like some other programming languages [17].

Much like Laravel is a framework to use with PHP, Vue.js is a framework built for JavaScript. Vue was designed to be incrementally adoptable, easy to pick up and learn, and integrate well with other libraries or existing projects [20]. And also like any other framework, Vue provides numerous features and functionalities on top of regular JavaScript designed to improve the development workflow, such as a virtual DOM, data binding, components, event handling, animations, and much more, all while being a small yet scalable framework that is easy to pick up and understand, integrates smoothly with other libraries and applications, and provide clear, detailed documentation [21]. In addition, (Macrae, 2018) also suggests that Vue enables developers to write less and more concise code especially when working with requests, as opposed to just using an older JavaScript library such as jQuery.

This project uses JavaScript as the front-end programming language of choice, along with Vue.js as its additional framework. JavaScript was chosen because it is currently one of the most popular scripting languages, ensuring that there will be plenty of community support upon encountering issues during development. Similarly to Laravel, Vue.js was chosen because of its high performance and robust features. Vue's small framework size ensures that a high performance is kept when loading and navigating through the application, allowing for high speed navigation and modification of elements. Despite its small size, Vue is also scalable and provides plenty of features that were very helpful in the production of the project.

Vue's two-way model binding helps in showing dynamic elements on the pages of the student platform, as well as storing these dynamic elements to be sent to the Laravel back-end, such as when dealing with form requests upon change and submission. These form request are utilized multiple times when the user is trying to modify items in the database records.

Vue also supports components, which enables Vue components to be stored on different files and imported when needed. This allows for more modular and reusable code, reusing components such as many of the button components found on the student platform. A more modular structured system is easier to debug and track issues, which helped save time during development.

Vue's native integration with Laravel was also a major reason why this was the suitable client­side framework for this project. Setting up a Vue front-end in Laravel is as easy as typing a few commands with Laravel, and you are immediately given an easy-to-use scaffolding to work with. This saves plenty of development time as opposed to using two non-integrated frameworks to work with, which adds additional installation and configuration overhead before you can actually start working.

In conclusion, Vue.js' high performance nature, robust and useful features, and native integration with Laravel makes it one of the best options when selecting a front-end framework to utilize in creating the student platform.

3.2.3 Bootstrap

Bootstrap is one of the world's most popular CSS framework for creating responsive, mobile- friendly websites [22]. Like the two other frameworks used for the dynamic front-end and back-end functionalities above, Bootstrap is also free and open-source, allowing the users of Bootstrap to view its source code and use the framework without having to pay a fee [23]. Bootstrap provides basic style definitions for all of the HTML elements, allowing for a uniform appearance of Bootstrap components and elements used throughout the project. Bootstrap also provides CSS classes that includes their selected choices of color, size, font, and layout, preconfigured for developers to choose and implement to their project. This makes developing the layout and appearance of the user interface much easier and faster, yet also keeping a clean, pleasing, and modern look to the Bootstrap components used in the project.

This project uses Bootstrap as its CSS framework of choice, along with the AdminLTE 3 template as a Bootstrap helper template. AdminLTE is a pre-built template for Bootstrap, adding more features and configurations to regular Bootstrap that are specifically tailored to create a uniform and pleasing look to create admin dashboards and control panel [24]. This goes along very well with the expected user interface appearance of the student platform, with the objective of making a pleasing and efficient user experience throughout the platform. The student platform will adopt this the layout to increase effectiveness when viewing elements and navigating through pages in the platform.

The AdminLTE 3 elements and styles used in this project helps to create a uniform and pleasing user interface, allowing for higher user efficiency when using the platform. Bootstrap also comes with a responsive layout and mobile support, which allows for the student platform web application to be viewed and work properly on mobile devices.

3.2.4 Other Libraries and Packages

Aside from the frameworks used to construct the student platform, this project also uses other third-party JavaScript libraries and packages that provide additional functionalities and features in the project. These packages are installed through the npm (Node Package Manager), which is a software registry for open-source JavaScript libraries that uses the CLI (command-line interface) to easily install and remove additional packages and libraries in a project ] [25].

Some of the main additional packages and libraries used in this project are:

- Laravel-Vue-Datatable

- This is a Vue.js datatable component for Laravel that works with Bootstrap [26], which allows for this component to work smoothly with the different frameworks used in this project.
- It allows developers to use a pre-built data table component that they can then configure and customize to their needs. Since it also works with the Bootstrap framework, the default appearance of the data table adopts a clean and modern design that is also configurable if the developer requires to do so.
- This library played a major role in the project, being the main data table to show data and information retrieved from the database, found and used on many of the pages on the student platform.

- FullCalendar

- FullCalendar is a popular full-sized calendar package for JavaScript [27]. FullCalendar contains over 100 configurable settings, but is built as modules that the developers can pick and choose which ones to use to preserve space and performance. FullCalendar also works well with Vue.js with built-in support and documentation, making it relatively easy to integrate with the Vue components found in this project.
- FullCalendar's features include displaying different and custom views of a calendar, creating and modifying events, support for multiple themes, and much more. These features help the project to easily interact with a calendar interface. The two main features of FullCalendar, calendar display and event creation, was used for the Timetable and Calendar pages on the student platform. The Timetable page uses a customized FullCalendar weekly view, while the Calendar page uses a monthly view, with both pages supporting the creation and modification of custom events.

- Momentj s

- Moment.js is a JavaScript library to allow developers to easily parse, validate, manipulate, and display dates and times [28]. Moment.js is used to format the dates found on multiple pages of the student platform into a clearer and more readable date format.

- SweetAlert 2

- SweetAlert 2 is a standalone replacement for JavaScript's popup boxes, providing more beautiful, responsive, customizable, and accessible popup boxes for system feedback [29]. SweetAlert 2 is used throughout the student platform for a more pleasing and modern look of system feedback popup messages that appear after user interaction.

Many of these third-party packages played an essential role in the finished product of the project, adding additional features and functionalities to ensure an effective and exceptional user experience, further adding to the productivity of using the student platform.

3.2.5 MySQL

MySQL is one of the most popular free and open-source relational database management system (RDBMS) used to manage and store relational databases [29]. A relational database stores data in a digital form based on its relational model [30], or the relationships between the data. MySQL, like its name suggests, uses the Structured Query Language (SQL) to manage its records. SQL is a programming language designed specifically for managing data in relational database management systems such as MySQL [31].

MySQL comes with plenty of features such as cross platform support, triggers, commit and rollback transactions, multiple storage engines, and more, making it one of the most popular RDBMS used today, ranking 2 nd on the rank list on the most popular database management systems provided by DB-Engines Ranking [32], as per April 2020. MySQL also provides their own graphical user interface (GUI) for managing with their MySQL client called MySQL Workbench, making it easier for developers to view and manage their databases. In addition, there are also many other third-party RDBMS GUI software that work well with MySQL.

Aside from its robust features, there are also many advantages when choosing MySQL as the RDBMS of choice compared to other options. A 2017 article by DevOps.com mentioned 8 main advantages that MySQL has over other competitors, among them includes data security, on-demand scalability, high performance, and low cost [33]. MySQL is well-known for being one of the most secure and reliable RDBMS, hence why it is used by many popular websites such as WordPress, Facebook, and Twitter. MySQL also offers on-demand scalability, having the ability to support and create various sizes of databases, from a smaller database that barely consumes any space, to massive database centers that take up terabytes of data. Finally, the free and open-source nature of MySQL ensures that anyone can start learning and use MySQL at any time without having to pay unlike other proprietary software.

This project uses MySQL as the RDBMS of choice. MySQL was chosen because of its robust features, SQL syntax that is relatively easy to learn and work with, as well as many of the other advantages listed above. MySQL adopts a familiar SQL syntax that is relatively easy to learn and work with, making development process easier. Although Laravel takes it a step further by allowing for database modifications straight from the migrations that it provides, modifying databases manually on MySQL is still not difficult to do. MySQL's many advantages listed above were also accounted for and ultimately led to it being the RDBMS of choice. MySQL's on-demand scalability and high performance ensures that the student platform will always be on high performance while being efficient and consuming the least amount of space possible.

MySQL has also been proven to work well with the back-end language of choice for this project, PHP, and has been the typical RDBMS of choice for a lot of PHP developers when working with an RDBMS. PHP by itself does not require extensive configuration when working with MySQL, but the PHP framework of this project, Laravel, takes it a step further. Laravel only requires the developer to specify their database information in the provided .env file, and once set, will maintain and persist the database connection as long as the server is active.

3.2.6 Single-Page Application

A single-page application (SPA) is a web application format that constructs and renders the web page by dynamically rewriting the same single page with new data from the web server and the database, hence why it is called a single-page application [34]. Single-page applications aim to provide the users with a more native-app feel and allowing for faster transitions when using the different components and navigating through the different pages on the web application. According to (Flanagan, 2006), single-page applications only requires a single load from the server, with some applications that do not even require any additional server communication after loading. Other responses and data may be dynamically loaded as necessary, typically in response to user actions and requests.

This project uses a single-page application as the application design of choice. This application design was chosen because of its clean and easy to navigate interface, along with its high performance when modifying data and information on the pages as well as communicating with the web server and database. In the case of the student platform, the “pages” are actually loaded components that contains information fetched from the database. The format and layout of the platform stays the same, with different components and information shown according to the respective page. This single-page application format allows users of the platform to create and modify data on the same page without having to navigate through multiple pages simultaneously. This allows for faster user experience when using the platform, leading to a higher efficiency of productivity of tasks being done on the student platform. This is enhanced by the AdminLTE 3 Bootstrap template, which provides an intuitive layout of the pages to show in a panel layout, allowing the user to view and navigate through all of the different pages on the student platform quickly and easily.

In most cases, the pages on the student platform only require a single load to view all of the data and contents on the page, with additional loading only required on some pages when modifying records on the database. This adheres to the single-page load characteristic stated on the above paragraph that single-page applications possess, further enhancing the performance and efficiency of the student platform.

CHAPTER 4 - SYSTEM DESIGN

4.1 PAGE STRUCTURE

The figure below shows the page structure for the whole student platform system:

Abbildung in dieser Leseprobe nicht enthalten

We can divide this complete figure into three parts. First we have the simple home page, which would give the user the option on either to login or register, as shown on the figure below:

Abbildung in dieser Leseprobe nicht enthalten

Fig. 3: Page Structure - Login and Register

Upon login, the isAdmin middleware will trigger and verify whether the logged user is a system administrator or not. If the user isn't an admin, then it will be decided that the user is a student, and therefore will be redirected to the Student Panel. If the user is an admin, however, then he/she will be redirected to the Admin Panel.

Once in the Student Panel, the student will then be immediately greeted with a dashboard where they will be able to view their upcoming tasks and events, as well as a single-page application view of all the features of the platform available, as shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

Fig. 4: Page Structure - Student Panel

The following is a breakdown of all of the pages of the Student Panel:

- Profile

- This page would allow the student to view and edit their personal student information, such as their student ID, profile picture, name, major, email, etc.

- Dashboard

- This would be the first page that the student see after logging in. This allows the student to view all their upcoming tasks and events at a glance without having to manually navigate through the pages one by one.

- Agenda

- This section would be the main planner aspect of the student platform, and would be divided into two sub-sections:

- Assignments and Exams

- This sub-section would be divided into two pages, one for managing a student's assignments, and another for managing their exams. The student would be able to view, create, edit, and delete their assignments and exams.
- Upcoming assignments and exams that are due within one week would also be displayed on the dashboard page for quick view.

- To-Do List

- The To-Do List would list all other tasks that a student needs to do, that doesn't necessarily belong in either the assignments or exams section.
- In this section the student will also be able to view, create, edit, and complete / delete all their tasks in this To-Do List. The students would also be able to filter their To-Do List by showing either all tasks, active (non-completed) tasks, or completed tasks.
- The total number of their tasks would also be displayed on the To-Do List, as well as the dashboard page for quick view.
- Timetable

- This page would allow the student to view and manage their weekly course schedule on a weekly calendar. The student would be able to view, create, edit, and delete classes on their timetable and modify it according to their needs.

- Calendar

- This page would allow the student to view and manage their events on a monthly calendar. The student would be able to view, create, edit, and delete assignments on their personal calendar and modify it according to their needs.
- Upcoming events that will occur within one week would also be displayed on the dashboard page for quick view.

- Grades

- This page would allow the student to view all the grades for the courses that they have taken, if they have received a grade for that particular course. The grade information for each student will be set by the system administrator on the Admin Panel.

- Courses

- This page would allow the student to view all of the courses that they have taken, view all the courses that are available, as well as take courses and remove taken courses straight through the platform.

- Teachers

- This page would allow the student to view all the teacher information for teachers that teaches the particular student's taken courses, such as the teachers' names, photos, phone, email, office address, etc.

- Logout

- Will log out the student from the current session and redirect them to the Home Page.

The Admin Panel would be similar to the Student Panel in terms of layout, however would differ in the features provided for the system administrator, as shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

Fig. 5: Page Structure - Admin Panel

The following is a break down of the Admin Panel:

- Profile

- the same profile page as the one found in the Student Panel, will display profile information about the system administrator.

- Users

- This page would allow the system administrator to view a list of all of the registered users in the system. The system administrator can also create new user accounts through this page, edit user information such as their student ID, name, email, etc., or delete a user account completely.

- Profiles

- This page would allow the system administrator to select a particular user on a drop-down list of all users and view their user profile information. This includes information that are not in the users page, such as their major, phone number, and profile picture. The administrator could also edit a particular user's profile information accordingly.

- Majors

- This page would allow the system administrator to view all of the majors available on the platform,
- These majors are then shown in the student profile when a student selects from a drop-down list of majors.
- The system administrator can also create new majors, edit existing majors, or delete a particular major completely.

- Grades

- This page would allow the system administrator to view all of the grades for every student. The administrator can also add new grade entries for a particular student's taken course, edit existing grade entries, or delete a grade entry completely.
- These entries will then be shown on the Student Panel according to the particular student ID.

- Courses

- This page would allow the system administrator to view a list of all of the courses available on the platform. The administrator can also add new courses, edit existing courses, or delete a particular course completely.
- These entries will then be shown on the Student Panel on the courses page, where they will also be able to view a list of all of the courses available on the platform.

- Teachers

- This page would allow the system administrator to view a list of all of the teachers available on the platform, as well as their personal teacher information. The administrator can also add new teachers, edit existing teacher information, or delete a particular teacher completely.
- Courses Taught
- This page acts as the configuration page to modify the teachers and the courses that they teach. On this page the administrator would be able to assign teachers to teach a particular course.

- Logout

- Same logout function found on the Student Panel.
- Will log out the administrator from the current session and redirect them to the Home Page.

4.2 DATABASE DESIGN

Before the system is able to run, the database and initial values has to be properly configured and set. The following figure is an entity-relationship model of the database used in the platform:

Abbildung in dieser Leseprobe nicht enthalten

The right section will include the main table of the database, which is the users table. The users table will contain personal information about the user, such as their name, student ID, email, and password, and will also contain the user's profile information, such as their profile picture, major, phone, etc. The users table, and all the other tables in this database, will have an ID column that acts as an auto incrementing primary key for the row value, and will also have created_at and updated_at timestamps to view when a particular entry was created or modified.

The users table will have 2 optional one-to-many relationships with the events table and the todos table. This means that every user can have zero to many events or to-do items. These two tables will use a foreign key that references the student_id column on the users table, which will be used to identify which event/task belongs to which student.

The events table contains every single event information for each student, which will be displayed on their Student Panel's Calendar page. Each entry will contain the name of the event, the start and end dates, whether the event is an all-day event or not, additional details regarding the event, and color options to customize how the event will look on the Student Panel Calendar.

The todos table contains every single task for each student, which will be displayed on their Student Panel's To-Do List page. Each entry will contain the title of the task, as well as two temporary values, isCompleted and editing, which will be utilized by the front-end to indicate the current status of the task.

Finally, the majors table on the top right would not have any direct connections with the other tables, but will be required to store all the names of the majors to be displayed on the platform. The middle section would show the connections between the users and courses table, and all of the tables that reference them, as shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

In this section, the users and the courses table will have many mandatory-to-many optional relationship with the taken_courses table. This is because each student may or may not choose to take a course, but each taken course will require a student ID and a course ID. The taken_courses table will contain all the taken courses for each student, and will have columns containing foreign key references to the student_id in the users table and the course_id in the courses table for its entries.

The grades, assignments, exams, and timetables table will have an optional many-to-one relationship with the users table, and a mandatory many-to-one relationship with the courses table. These four tables are all similar in nature, in the essence that all of their entries will require both the student ID from the users table and the course ID from the courses table for all of their entries. Finally, we have the left section of the database design, which will cover the relationships between the teachers and courses table, as shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

In the above figure, the relationship between the courses table and the teachers table is connected with the taught_courses table, which contains a list of all the courses that are being taught by a teacher.

The courses table has a one-to-many optional relationship with the taught_courses table, in the sense that a course is not required to be taught by a teacher during the time of its creation, and a course can be taught by multiple teachers at the same time. The same applies for the teachers table, in which a teacher can teach multiple courses at the same time. Each entry in the taught_courses table will be required to reference a course ID from the courses table, as well as a teacher ID from the teachers table.

CHAPTER 5 - SYSTEM IMPLEMENTATION AND RESULTS

This chapter will consist of the final results of the Student Platform after the design and implementation process have been successfully carried out. This chapter will also contain screenshots taken from the Student Panel showcasing its appearance, as well as detailed explanations on every page of the Student Platform to highlight its features and functionalities.

The student platform is divided into two main parts, the Student Panel and the Admin Panel. Users who classify as students will automatically be redirected to the Student Panel after a successful login, where they will be able to carry out their student-related tasks. Users who classify as system administrators will automatically be redirected to the Admin Panel after a successful login, where they will be able to carry out platform administrator-related tasks.

5.1 STUDENT PANEL

Upon first opening up the student platform, the student will be greeted with the student portal Home Page, shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

Fig. 10: Home Page

The Home Page consists of simple elements, including a placeholder logo which could be substituted with the logo of the school, the student platform title, as well as hyperlinks to the Login and Register pages of the platform. If the student has not registered to the platform yet, he/she can click on the register button in order to be redirected to the Register page, shown in the figure below:

Abbildung in dieser Leseprobe nicht enthalten

Fig. 11: Register Page

Inside the Register page, the student will be able to fill in a simple registration form, prompting them to fill in their name, student ID, as well as a password to login to the platform. On the bottom of the registration form, the user can either go back to the Home Page or click the Register button to register a new account once they have filled in all of the required information. After a successful registration, the student will then be redirected to the Student Panel Dashboard. Upon registration, every user starts out with a student account. This can be modified by a platform administrator through the Admin Panel by changing the user status to Admin, granting him/her access and immediate redirection to the Admin Panel upon next login.

[...]