Catholic Community Services of Northern Utah
This project was done as a college class project. Catholic Community Services of Northern Utah wanted a web app that would allow them to add and store their volunteers information in a database that can be accessed and added to from anywhere. This version of the web app was created with html, css, php and mySQL.
Catholic Community Services of Northern Utah
This project was a capstone class for my college degree. I was asked by my professor to create a web application that would allow the client to input volunteer data into a database. We decided to use HTML, CSS, PHP, MySQL and jQuery to design a web interface that would allow the client to input user and volunteer data into a database. The client had some specific design requirements (colors, fonts and input types). That is why the colors are what they are. I decided to use the Bootstrap CSS framework to layout the application, because it was pre-built and made the layout process easier. The following images are screen shots of the application pages.
User Log In Page
This page is used to log users into the application. This page didn’t have a lot of information that needed to be placed. It’s just a form for user log in credentials. When the user submits the form, I use PHP and MySQL to check those credentials. If the credentials are good it loads the next page.
This page is used to log users into the application. This page didn’t have a lot of information that needed to be placed. It’s just a form for user log in credentials. When the user submits the form, I use PHP and MySQL to check those credentials. If the credentials are good it loads the next page.
User Welcome Page
The “user welcome page” is the landing page for the user. This page changes depending on user access levels. This page loads the navigation menu and links, then lets users go to the pages they have access to. This page is also where the user session begins. A user can now log out and destroy their session by clicking on the “log out” button.
The “user welcome page” is the landing page for the user. This page changes depending on user access levels. This page loads the navigation menu and links, then lets users go to the pages they have access to. This page is also where the user session begins. A user can now log out and destroy their session by clicking on the “log out” button.
Create New User Page
A user can create new users depending on their access level. This page will not appear if the current users access level is too low. If somebody tries to access this page, they will be redirected to another page. When a user submits the form it directs to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
A user can create new users depending on their access level. This page will not appear if the current users access level is too low. If somebody tries to access this page, they will be redirected to another page. When a user submits the form it directs to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
Create New Volunteer Page
Users can create new volunteers and add the data to the database. The “date of birth” input has a jQuery function tied to it, to check the format of the date (mm/dd/yyyy). If the “court ordered” radio button is checked “yes”, then a second form appears with input types tied to that information. When a user submits the form it redirects to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
Users can create new volunteers and add the data to the database. The “date of birth” input has a jQuery function tied to it, to check the format of the date (mm/dd/yyyy). If the “court ordered” radio button is checked “yes”, then a second form appears with input types tied to that information. When a user submits the form it redirects to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
Create New Volunteer Group Page
This page is similar to the “Create New Volunteer” page, but this one is specific to groups or organizations. This page has a contact information part of the form that selects contact types from the database and prints them to a drop down menu. When a user submits the form it redirects to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
This page is similar to the “Create New Volunteer” page, but this one is specific to groups or organizations. This page has a contact information part of the form that selects contact types from the database and prints them to a drop down menu. When a user submits the form it redirects to a PHP file that tests for duplicates and inserts the data into the database. If the data is inserted the PHP file redirects to a confirmation page.
Volunteer Search Page
The client needed a way to view, search and update volunteer records. I created a search feature for the application. A user types a name, group name or ID number into the search field, and it displays the closest results. I did this with PHP and MySQL code. The update buttons will take a user to an update page with that specific volunteers records displayed.
The client needed a way to view, search and update volunteer records. I created a search feature for the application. A user types a name, group name or ID number into the search field, and it displays the closest results. I did this with PHP and MySQL code. The update buttons will take a user to an update page with that specific volunteers records displayed.
Update Volunteer Page
The client needed to be able to update volunteer records. The easiest way to do this was to tie that feature into the search feature. Once the update button is clicked, that specific volunteers records are displayed. The page displays and fills in a volunteer information form. If a volunteer has contact, court order, foreign language or training records, those are displayed in separate tables that allows users to update those specific records separately. A user can also add contact, court order, foreign language or training records to the volunteer. When a user clicks one of those buttons a form pops up that allows the user to enter that data. This part of the form is hidden and displayed with a jQuery function. This page’s information is selected and displayed based on PHP session variables and MySQL statements.
The client needed to be able to update volunteer records. The easiest way to do this was to tie that feature into the search feature. Once the update button is clicked, that specific volunteers records are displayed. The page displays and fills in a volunteer information form. If a volunteer has contact, court order, foreign language or training records, those are displayed in separate tables that allows users to update those specific records separately. A user can also add contact, court order, foreign language or training records to the volunteer. When a user clicks one of those buttons a form pops up that allows the user to enter that data. This part of the form is hidden and displayed with a jQuery function. This page’s information is selected and displayed based on PHP session variables and MySQL statements.