AN-NAJAH NATIONAL UNIVERSITY FACULTY OF ENGINEERING AND INFORMATION TECHNOLOGY Computer Engineering Department Software Graduation Project Equestrian Club Group members Mohammad Belal Mousa Hassan Saed Abu Thiab Supervisor Dr. Manar Qamhieh Presented in partial fulfillment of the requirements for Bachelor degree in computer engineering. May, 2022 Disclaimer This report has been written by students Hassan Abu Thiab and Mohammad Musa from the computer engineering department at An-Najah National University. It might contain linguistic or informational mistakes. An-Najah National University is not responsible for its content. It also has no responsibility for any misuse of it for anything else than what has been written for. Acknowledgement “ First and foremost “ �والشكرالحمد ” , we would like to thank our supervisor ( Dr.Manar Qamhieh ) who guided us in doing this project. She provided us with invaluable advice and helped us. Her motivation and help contributed tremendously to the successful completion of the project. Besides, we would like to thank our friends for their support and for helping us by giving advice and providing the equipment which we needed. Also we would like to thank our families for their support. Without that support we couldn’t have succeeded in completing this project. At last but not least, we would like to thank everyone who helped and motivated us to work on this project. ” Contents Abstract 1 Introduction 1 1.1 Problem Statement 1 1.2 Project Objective 2 1.3 Project Scope 3 1.4 Project Importance 3 1.5 Report Organization 3 2 Constraints, Standards and Earlier Coursework 4 2.1 Constraints 4 2.1.1 Limited information 4 2.1.2 Limited Time 4 2.2 Standards 4 2.2.1 Database Back-end 4 2.2.2 ReactJS 5 2.3 Earlier coursework 5 3 Literate Review 6 4 Methodology 7 4.1 System Features and Implementation 7 5 Results & Discussion 41 5.1 Project outcomes 41 6 Conclusion 42 6.1 Things we learnt and future work 42 6.2 Future work 42 References 43 Figures Figure 4.1: Home page 8 Figure 4.2: Tournaments 9 Figure 4.3: Feeds 10 Figure 4.4: Sign in and sign up 11 Figure 4.5: Profile 12 Figure 4.6: Recover Two Factor Authentication code 13 Figure 4.7: Admin dashboard 14 Figure 4.8: Admin Feeds 14 Figure 4.9: Admin Control Trainers 16 Figure 4.10: Tournaments 20 Figure 4.11: Courses 21 Figure 4.12: Horses 23 Figure 4.13: Admin-trainer chat 23 Figure 4.14: Scheduling 25 Figure 4.15: Trainer’s reserved sessions 25 Figure 4.16: Trainer’s horses 26 Figure 4.17: All trainer’s courses 27 Figure 4.18: Session reserved trainer’s Notification 30 Figure 4.19 Trainer-student chat 30 Figure 4.20 Student week registered sessions 31 Figure 4.21 Trainers’ sessions for student 32 Figure 4.22 Student payment for courses 33 Figure 4.23 Tournament registration 36 Figure 4.24 Student’s horses 37 Figure 4.25 Student’s tournaments 37 Figure 4.26 Student’s sessions 38 Figure 4.27 Student’s Notification 39 Figure 4.28 Student-trainer Chat 40 Abstract Equestrian clubs and students of the sport will greatly appreciate a method that helps connect them with each other easily through the use of web and technology, providing convenient scheduling that does not currently exist within our country as well as exposing the sport to more people and giving newcomers an easy time to start their journey. The main purpose of the project is to implement a convenient scheduling system for the courses of our clubs as well as the tournaments that will be held within our local area. This can be done through the use of notification and scheduling systems using technology. When it comes to achieving easy communication, the Project will provide the users with a chat system between each other and with the clubs they are enlisted to for any inquiries. Each user will have a profile containing their information about them, tournaments and courses they have participated in and any steeds they own within the stables, the User will also be able to enroll into courses and schedule them with ease through online payment. Finally, the Admin will be able to manage his trainers who give and create the courses, alongside multiple things such as tournaments and post news for major events. The process of the application development will be done to build responsive front-end website using React as well as the development of the back-end will be done using PHP-Laravel Framework from login/signup system with authentication for multiple users (Equestrians, Trainers, Admin) till build a full website As mentioned earlier, we believe no application currently exists for this within our local area that's dedicated to Equestrian clubs and tournaments. 1 Introduction 1.1 Problem Statement The problem we encounter is the lack of modern means to run Equestrian clubs as without them it’s filled with inconveniences for the head of the club, the trainers and the students and that is made clear by the following limitations: ● As a User ○ The limited ability to communicate with their future trainers and the club they are attending. ○ Not having everything that’s related to the club they are attending in one location ○ Missing tournaments or going through a tiresome process in order to sign up for them. ○ Needing to resort to old means to schedule their meetings and browse the news of their club. ● As a Trainer ○ The inability to book a location within the grounds of the club strictly for their session. ○ Not having the ability to advertise their courses to the students in one location ○ Lacking any form of feedback from their students. ○ Going through a long process in order to communicate with students if one of the courses was updated or moved to a different date. ● As a club Owner ○ Lacking a database to store the information of their users and trainers. ○ Not being able to post news and have them be condensed on a front page. ○ Creating and managing tournaments is a lot of effort with the old means as it requires reviewing a lot of papers manually and a lot of paper filling. ○ Inability to interact with their customers and receive feedback, as well as their trainers who work for them in case they require a form of communication to plan things out. ○ Not being able to have condensed information about the statistics of how many new users the club received or how. 1 1.2 Project Objective Create a responsive web app that allows Equestrians to grow their community further by removing obstacles that stand in the club’s way in the form of inconveniences such as scheduling communication and tournaments advertisement, making getting into the entire sport much easier. ● As a User ○ The ability to create an account with your own personal information, personalizing it with your profile image as well. Making the process of filling out papers for a club less tedious ○ Users are able to view the news of their club as well as the current rankings of previous tournaments ○ Users having the ability to view all available trainers and the courses they have to offer ○ Schedule their courses into a nicely built in calendar that automatically slots in the courses they sign up for ○ The ability to pay for the courses through online means ○ Notifications of newly added tournaments or updated courses. ○ Contacting the trainers they are signed up with as long as the club in case they have any inquiries through a chat system ○ Viewing the history of courses and tournaments they attended to ● As a Trainer ○ Easily book the location of your next course as well as be able to view which locations are taken by which Trainer ○ The ability to update their courses without worrying that the students won’t be aware of it ○ Having a Schedule to view what courses they have to provide as well as what their colleagues have as well. ● As an Owner ○ Add Trainers, remove them and view their profiles ○ Add tournaments, advertise them and be able to rank the attendants and view who has participated in one location ○ Book a room within the stables for one of the User’s horses to easily manage the stables without any issues ○ Post news on the Feed page of the to inform the users of any upcoming events or major changes. 2 1.3 Project Scope In this Project, our target audience is the Equestrians and the clubs for that sport within Palestine only. Our application aims to connect them all together through one website for the club they are signed up for. However, it does not expand past Palestine and this website is given to one club. 1.4 Project Importance The project's importance comes from the fact there are little to no applications that provide Equestrians with modern means to participate, manage and improve on their sport within the boundaries of Palestine. The application should help grow the sport in the region and also make the everyday activities of the club owners simplified, as well as the users that desire to participate in events and courses. 1.5 Report Organization The second section (Constraints & Earlier Coursework),will first of all explain the project constraints. It will then go over previously taken courses that were helpful to us in our journey of building and creating the project from the ground up. The third section (Literature Review), will discuss related work, including similar applications that were built for the same purpose and will mention the differences between their work and this project. The fourth chapter (Methodology), will explain how the web application site features and then how they were implemented. Moreover, it will show what tools and languages were used in implementing the project functionality. The fifth section (Results & Discussion), In this chapter we will present the results that are achieved from this project and it will give a sufficient details to justify the conclusion. The final section (Conclusions),will summarize the whole project, final outcomes and it will show what we learned in the journey of developing this project. Also, it will introduce some of the work that will be in the future in this project. 3 2 Constraints, Standards and Earlier Coursework 2.1 Constraints 2.1.1 Limited information The React page only includes its documentation and a few instructions on how to set it up. We had to put a lot of time and effort in order to study it further, the same goes for the other languages we used as well as having to become familiar with packages we used. All that time could have been better spent on the development of our project. 2.1.2 Limited Time A time period of approximately 4 months to build a project in a language we were unfamiliar with was quite a task, considering we had other educational courses to go through that required their own fair bit of attention and time consumption in order to perform. 2.2 Standards 2.2.1 Database Back-end Since we have insisted on using different technology , we used PHP framework - Laravel, it is a server-side open-source platform PHP web framework, it is a suitable language to connect the back-end because It offered scalability and parallel code execution. It introduced a new logic and approach for PHP server-side development. It is also light and fast. It owes its popularity specifically to its scalability features and functions that take care of most development issues that are challenging to tackle manually, for example, routing or authentication, as it reduces the time spent on coding. 4 Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar. Since EquestrianClub is a website that has real time features, Pfizer uses Laravel, We used MySQL as a database, it makes it easy to store structured or unstructured data. MySQL can also handle data of all sorts in a scalable way. We decided to build our chat with Pusher API which is scalable and easy to use. It can build realtime features users need and it’s fast. 2.2.2 ReactJS The reason behind us using ReactJS is because it is a highly used open-source JavaScript Library. It helps in creating impressive web apps that require minimal effort and coding. The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. And it enables all of that through the ability to reuse components, multiple libraries that make it easy to build and not to forget how many tools are there that support it and enhance its performance. 2.3 Earlier coursework Thanks to courses we have taken throughout our academic years such as HTML, CSS and Javascript, our process of learning a new language such as React was made so much easier through online courses and other documentation left for developers like us to pick up and learn from. 5 https://en.wikipedia.org/wiki/Application-level_package_manager https://en.wikipedia.org/wiki/Application_deployment https://en.wikipedia.org/wiki/Application_deployment 3 Literate Review A website for managing an Equestrian club isn’t very prominent but that does not mean there weren’t any preecders to our project. One of these applications is called The Pony Club, which is an international club website that’s represented in 21 countries for people who are interested in horses and riding as a whole. Their website excels in the fact they have implemented a membership system rather than paying for courses upfront and in order to access other features and benefits. One major benefit out of these is insurance for the horses that the members own. Also the ability for users to sign up their children through providing their parental information. However their system does not include Palestine yet nor does it provide interaction between the user and their trainer. Another website is called Goldcoast Equestrian Club, which is also a website that provides a wide range of equestrian services, providing beginner lessons and also trial lessons, as well as giving people a chance to ride on the horse for the first time through trial runs with professionals who are focused on safety and the well-being of the horse throughout the people’s journey of their first time riding a horse. 6 4 Methodology For our project, we used React library alongside a few dependencies in order to run and create projects throughout, such as NodeJS and React Command line. We also did use Font-awesome, Material-UI Icons to use well designed icons in our project. We also did use things as Bootstrap and Material-UI core for the ease of design and a more professional look to our theme, as well as enabling us to reuse components much more easily if the component was provided in the documentation. Style-component was also used in order to create our own personal components and have them be easily reusable as well. React-Dom library was provided in order to navigate through the websites and link them to each other, that way the user can change the page they are viewing through the link or through the navigation built in the interface. We utilized Laravel - PHP Framework as a backend as well as packages for authentication such as fortify and sanctum. Also, implementing payment through Paypal API. 4.1 System Features and Implementation The first thing our users will see when they visit our page is the Home page in which they will be introduced to our club, as well as become familiar with what it has to offer from recent news posted by the owner as well as recent tournaments. At the bottom of it all there will be a leaderboard to commend our students for their efforts in improving. (a) About us 7 (b) Leaderboard Figure 4.1: Home page The other page viewers have access to without the need of signing up or logging is our Tournaments page, attracting people if they are interested in a specific tournament as well as giving them a sneak peak to what our club has to offer. The user is also provided with a filter system in order to make browsing much easier. Signing up and participating in the tournament will require the viewer to create an account and login which we will branch into later. (a) Tournaments 8 We also provided pagination which will bring the data from the server in pages,some data for each page for instance we bring 3 tournaments each page. That helps in case we have a lot of data then the data can be shown in pages instead of bringing all the data from the server at once, The data will be brought one piece at a time in order to make the user experience much smoother in terms of performance. However, Non-registered users will also have access to one last page which we will move to next. F (b) Tournaments pagination Figure 4.2: Tournaments 9 The Feed page is a simple page which condenses the announcements and posts made by the hed of the club into one page, this way the users will be easily informed of any major events or even minor ones that they might be interested in joining or simply information that needs to be put out there for everyone to view, provided with pagination as well to improve the performance. (a) Feeds Figure 4.3: Feeds For further features, the user will have to access the login page through the Login button within the Navbar and enter the information of their account. In the case of the user not having an account then they would have to create one by entering their personal information then proceed to the login page. The users will have to enter a unique username and that’s because it’s a way to distinguish between Admins, Trainers and Students without having to add additional inputs for them to fill. The information required of the user is your average basics, such as Username, Email, Password and phone number, while requiring the password to be more than 8 characters as well as confirming it. 10 (a) Sign in Student (b) Sign up Student Figure 4.4: Sign in and sign up 11 Once the User successfully enters their information or creates an account, they have the ability to upload a new image for their account, edit any information they might have changed in the past, or edit their password in case of worrying that their current security might not be enough. To reinforce security further the user will also have the option to enable 2FA(TwoFactor authentication). The 2FA will have two options for the user to enter for whenever they desire to enter the account. They can either scan a QR Code (Quick Response Code) which is a type of matrix barcode, the other option is entering a simple code provided to them out of multiple to pick from. (a) Profile edit (b) two factor authentication Figure 4.5: Profile 12 If the Two factor authentication is enabled when the user signs in he will be redirected to this page which he has to type the code or recover the codes by the email then after typing the code the user will be logged in. (a) TwoFA login (b) Request the code (c) Code Email Figure 4.6: Recover Two Factor Authentication code 13 The Admin will be directed to a different page once they successfully login into their account. The main page they will see will enable them to view a summary of courses taken, the income and the tournaments in the form of a neat graph. (a) dashboard Figure 4.7: Admin dashboard The admin can navigate to the Feed page to view while also having the access to create a new post, or delete previously created ones. (a) New post Figure 4.8: Admin Feeds 14 This page allows the trainer to view all currently registered trainers within the facility, they are all put in a Data grid provided by material UI that contains multiple functionalities, be it sorting, searching in a specific category while also providing us with paging we need to view the data. The user here will be able to add new trainers if they so desire, as the “New Trainer” button will navigate them to the form they need to fill out. The Admin can also edit those trainers from the actions of the grid, as well as delete them if they are required to do so. (a) Display the trainers (b) New trainer 15 (c) Modify trainer Figure 4.9: Admin Control Trainers The admin will also be able to manage the tournaments once they navigate to the tournament’s page, following a similar trend of using a data grid to display the information. In addition to the editing section and deletion the Admin will have access to a new option where they can be directed to a page that allows them Rank the users based on their performance in the tournament, this will contribute to the user points hence the leaderboard that exists in the main page. (a) Display tournaments 16 The tournament information consists of the club that’s currently running it alongside the name of the tournament, Email of contacts and the Size they want it to be as tournaments can be run on a small or a big scale. Location as that’s something needed for a real life event, description and a Date. Private tournaments won’t be displayed for unregistered users as well, categories for different sections of the tournament alongside an image they desire for display sake. The editing of the tournament will display a similar form except the data will be already filled with the option to edit it in the manner they desire. (b) New tournament 17 (c) Modify tournament The Ranking page of a specific tournament will contain all the users that are currently registered for it, enabling the Admin to also view their email as well as the category they are signed up for. After that they have the option to give the User a rank based on the events of the tournament, the rank form will behave in the form of a dialogue and they pick a rank they find fitting, the input will be rejected if the rank is taken already within the same category. 18 (d) Display the participants (e) Change ranking 19 (f) After change ranking for a user Figure 4.10: Tournaments The admin is able to check the courses of the trainers by clicking on their card and viewing them. It also shows if the session has been reserved or not and by who and he can see the students profile and the date the course starts and ends, with it comes the overall duration and price that’s calculated per minute. (a) Trainers for courses 20 (b) Trainer’s sessions (c) Student’s profile Figure 4.11: Courses 21 The admin can display the stable they have and the rooms that are currently occupied by horses. The Admin has the ability to remove horses from the stables or edit their profiles, they are also able to create news through the button that leads them into a form. The form requires information such as the horse name, the owner’s email, the birthdate of the horse, gender and the room ID they will occupy. (a) Display horses (b) Add horse 22 (c) Modify horse Figure 4.12: Horses With the help Pusher API, we were able to create a chat system that connects the User, Admin and the Trainers all together so they can communicate and view their contacts. (a) Admin-trainer Chat Figure 4.13: Admin-trainer chat 23 Regarding Trainers, after they successfully login they have access to a Schedule page where they will be able to view their current schedule, be it monthly, weekly or daily through a dropbox option to switch between them. The Trainer will be able to click on a specific day, or a specific time cell which is 30 minutes of the day and create a course as a form pops up. The form will require the Trainer to enter a location and choose the time period of the course. They can also edit and delete existing sessions through the calendar by hovering over them. (a) Display the schedule (b) Add, modify session 24 (c) Error message Figure 4.14: Scheduling After creating the course, the Trainer can view it in the form of a data grid and see the users that are currently signed up for them and be able to view their profile as well. (a) Trainer’s reserved sessions (b) User profile Figure 4.15: Trainer’s reserved sessions 25 The trainer similar to the normal User has access to view their currently registered horses in the club’s stables. (a) My horses Figure 4.16: Trainer’s horses 26 The trainer can view the history of the courses they have given in the past, the date they were given, the price and the students. (a) All trainer’s courses Figure 4.17: All trainer’s courses The Trainer once a User enrolls into their course will receive multiple forms of notifications, the one that they will see the most is the push notification that appears as a pop up message at the top right using the Pusher API, the second form is the Database as the Trainer can click the notification bell and have access to view the recent notifications they received in a summarized manner. Clicking on the notification will open up all of the notifications where the Trainer can click on them and view the full notification. The last form is an email sent to their inbox of the email they attached to their account. 27 (a) Session reserved Email notification (b) Session reserved Databases notification 28 (c) Session reserved push notification (d) Trainer’s all notifications 29 (e) Trainer’s Display notification Figure 4.18: Session reserved trainer’s Notification The same as earlier, the Trainer can chat with users that have enrolled into their course. As well as the Admin (a) Trainer-student chat Figure 4.19 Trainer-student chat 30 The User Schedule unlike the trainer is Read-Only, meaning the User won’t be able to create or edit sessions but simply view the ones they are registered to in order to be able to plan out their daily activities and be able to constantly check when they have a course to attend to with ease. (a) Student week registered sessions Figure 4.20 Student week registered sessions The User can view multiple trainers that are registered to the club, they can see the trainer profile image, and then navigate to the courses they have created. The courses page has the course, their cost and the time duration and the date of the course. Alongside with a button that enables the user to proceed to the payment page and enroll for the course. The courses’ data grid still has all the functionality mentioned before for searching and sorting. (a) Trainers 31 (b) Trainer’s sessions for the students to enroll Figure 4.21 Trainers’ sessions for student The payment page is provided to us by the PayPal API which will require the user to enter their user and password. Following that up the User will have the option to pay with Visa, credit card or through paypal itself. Once the payment is complete the course will be added to the User schedule as well as give them a message of approval so they are assured the process went smoothly. (a) Paypal login for payment 32 (c) Paypal payment process (d) after payment 1 (e) Schedule after payment Figure 4.22 Student payment for courses 33 The User can register to the Tournaments previously mentioned since they have registered an account and are able to navigate to the form that enables them to fill information needed. The form will ask the Users for their personal information and the category they desire to sign up for. After filling the multi-step form they are able to go back to any step of the form and edit it before fully submit. (a) Tournaments (b) Step 1 34 (c) step 2 (d) step 3 35 (e) step 4 - review (f) After submitting Figure 4.23 Tournament registration The User has multiple pages to view what they have committed to, from courses they have signed up for, horses they own as well as tournaments they are participating in or have done in the past. 36 (a) Student’s horses Figure 4.24 Student’s horses (a) Student’s tournaments Figure 4.25 Student’s tournaments 37 (a) Student’s sessions Figure 4.26 Student’s sessions The User just like the Trainer has a notification system, their notification system however notifies them of any changes to courses they are registered for or if a new tournament or course was added to the list so they can check it out and not miss their chance to sign up. (a) New tournament push notification 38 (b) New tournament database notification (c) New tournament database notification Figure 4.27 Student’s Notification 39 The User also has the ability to chat with the trainers they have currently registered courses with. (a) Student-trainer chat Figure 4.28 Student-trainer Chat 40 5 Results & Discussion The project ended up being a fully responsive website that eases the ability to manage an Equestrian club quite significantly through the database system that’s provided to the user through a data grid, as well as enable the User to sign up and enroll into classes they desire with ease with a proper navigation system and a search filter. It also enables communication with users of different levels such as a Trainer with their registered students which is more than this community had before, not to forget the notification system that makes events and changes hard to miss with the different forms of notifications the User receives. However our system is limited in that it does not provide the Club any form of feedback from it’s users, which we plan on adding eventually as it’s an important feature. 5.1 Project outcomes ● A web application developed with login and registration for users. ● A feed paget to keep users updated with the major events of the club. ● A chatting system developed with Push API in order to have the User, Admin and Trainers communicate with each other. ● A notification system to keep the users away from potentially missing out on any changes and additions. ● The ability to sign up to tournaments and enroll into classes. ● A neat scheduling system for both Users and Trainers to manage their time. ● The ability to view all of the data relating to you from tournaments and courses to past ones to horses you own. 41 6 Conclusion In summary, we have created an application able to provide the Users with the ability to communicate with each other, as well as give student a platform to participate in tournaments of their favorite sport as well improve on it through courses that can be paid through modern means such as online payment, the ability to have a proper schedule to track their courses as well as notifications that keep them updated with any changes or additions. The Admin also has the ability to manage their club through the data grids provided in the website dashboard. 6.1 Things we learnt and future work ● Building a web application using React and other libraries ● Building a web application using Laravel as backend and other packages ● Connecting our application with the backend server ● Implementing a full chat system using Pusher ● Implementing a notification system using Pusher for push notification ● Implementing a payment process using paypal API 6.2 Future work ● Feedback system in the form of comments and likes. ● The ability to schedule recurring appointments and create them ● Have a subscription system that allows for further features ● Implement an algorithm that allows users to take care of their horses and schedule appointments based on their calendar or suggest a specific time. ● A small shop for tools that are useful for Equestrians 42 References Get started with Bootstrap · Bootstrap v5.2. (n.d.). Bootstrap. Retrieved May 18, 2022, from https://getbootstrap.com/docs/5.2/getting-started/introduction/ Guide, S. (n.d.). Getting Started – React. React. Retrieved May 18, 2022, from https://reactjs.org/docs/getting-started.html Installation - Material UI. (n.d.). MUI. Retrieved May 18, 2022, from https://mui.com/material-ui/getting-started/installation/ MySQL :: MySQL Documentation. (n.d.). MySQL :: Developer Zone. Retrieved May 18, 2022, from https://dev.mysql.com/doc/ The PHP Framework For Web Artisans. (n.d.). Laravel. Retrieved May 18, 2022, from https://laravel.com/docs/9.x Pusher Channels Docs. (n.d.). Pusher. Retrieved May 18, 2022, from https://pusher.com/docs/channels/ Set up online and mobile payment gateway integration. (n.d.). PayPal Developer. Retrieved May 18, 2022, from https://developer.paypal.com/docs/online/ 43