YCP Personalized Commencement Ceremony

- Student Login:

     If a student logs in, they are sent to their student portal in which they are shown a list of their information such as their name, major, minor, GPA, the content that they have uploaded, and the QR that contains their student ID that they will scan during the ceremony to display their approved content. From here, the student can either click a button to edit their content or preview their content as it will display during the ceremony.

          Edit Content:

           If the student chooses to edit their content, they can upload their extracurricular activities, an image, and an audio recording of their name that is to be read during the ceremony. The student is also able to reset their content and start fresh if they choose to. Once the content is saved, it will show that it has been uploaded on their student portal and that it is awaiting approval by their advisor.

          Preview Content:

           If the student chooses to preview their content while it has not yet been approved by their advisor, they will see only the default content. However, if their content has been approved, they will see exactly how all the things that they uploaded will show up during the commencement ceremony.

- Advisor Login:

     If an advisor logs in, they are sent to their advisor portal in which they are shown a list of the students assigned to them including each student's name, major, minor, and GPA. Below this list, the advisor is also provided with the QR codes necessary for ending the ceremony in the even that they are the ones running the commencement ceremony. From here, the advisor can click on a student's card to view the content that they submitted. While viewing, if the content is appropriate, the advisor can check a box next to each section of content to approve it, or leave the box blank if they do not approve of it. Once the content is reviewed, the advisor will hit the submit button to send their selections to the database and update the approval status of each piece of content that the student submitted.

- Administrator Login:

     If an administrator logs in, the page that will be streamed for the ceremony is pulled up. On this page, there is a QR code scanner that students can put their codes up to and scan in order to display their content when it is their turn to walk across the stage. Once all students have scanned, the administrator will scan two QR codes. The first will output a list of all students who could not attend and their majors, and the second will output a congratulations message to all of the students who have now graduated from the college.

Project Background

     At first, the YCP Personalized Commencement Ceremony project was meant to be a self-learning experience for myself and my three peers to gain experience using HTML, CSS, JavaScript, Java, and Java Server Pages to build a web application, but it soon turned into so much more than that. Starting at the beginning of February 2022, my peers and I began the backend development of the project, such as model classes implementing inheritance, controller classes that would be used in the servlets, and simple servlets. Soon after, we began to work on the frontend development of the application, using JSP's to build our HTML and CSS, along with implementing JavaScript and Java logic into the JSP's using JSTL. We rolled out our first version of the project, which consisted of three simple web pages connecting to each other through onClick functions linked to certain buttons. After another month or so of hard work, my peers and I released what we called our "final project", though we still saw some things that we could improve. Our final release consisted of the pages that are listed above plus a page for a successful search, five of which are dependent on login credentials to reach (all except for the login page itself and the preview page that the user is sent to when they search for a student). The final release was hosted on a remote server and used to run a mock ceremony, and the mock ceremony was viewable on computer or mobile through a twitch livestream.

     Seeing as our professor said that most groups would not finish their projects, we made it our goal to, at the end of the semester, present a stable, fully functional, and feature-rich web application that exceeded the initial requirements/expectations that we received at the start of the semester. Needless to say, we were able to achieve this goal and present the application to our professors and classmates. Not only this, but we also added accounts to our database for each one of the students in our class and invited them to add content to their profiles, which we looked through and approved or disapproved of prior to the presentation. During the presentation, each one of our classmates got in line, scanned the QR codes from their profiles, and had their content displayed. At the end of the presentation, our professor logged into his account on the application and scanned the QR codes that output the list of students who could not attend and the message congratulating those who graduated during the ceremony. As the presentation was taking place, the in-class peer mentors were able to watch the mock ceremony on their phones through the livestream that we set up.

     Though the application has been taken off of the server due to memory usage, we have since still been adding small updates and improvements since our final presentation. If you are interested in seeing the source code or cloning the project and running it yourself, you may do so by heading over to our GitHub repository. Here, you will find the full source code from start to finish, along with instructions on how to get everything prepared to run the application.