...
- Login Page
The login and logout process is handled with PHP. A login cookie is created for each user session after a user successfully logs in with their registered username and password. Unless the user logouts or the cookie expires, the user will have access to their personal PickFind profile (their profile information, active games, game history and list of users they follow). The login page has a “Forgot your password” option. Passwords are encrypted with MD5, and as a result, if a user misplaces their password, it must be reset. - Logout Page
The Logout page is accessed from the dropdown menu next to the username. As with the login process, logout is handled in PHP. On logout, the session cookie is deleted, and any attempt to load the main index.php page will redirect the user to the login.php page instead. - Registration Page
The registration page was implemented with a html frontend and PHP backend. The entries are checked to make sure the username and email address are unique, and also that both password entries match. If all conditions are met, a new record is inserted into the MYSQL database. - Change Password Page
The changing password page is also accessed from the drop-down menu next to the username. A PHP script verifies that both password fields match, then encrypts the string with MD5 before updating the user’s record in the MYSQL database. - Logged-in Main Page
The main page of PickFind, or the index.php file, is the page the displays whenever the user is logged in. It is split into three sections: the top header section, the right section with the schedule and news feed, and the large section containing either game information or profile information. The top and right sections are organized with <div> tags, while the large section is an <iframe> tag. - Home Page (frame)
The home page is the page inside the <iframe> tag the shows up when a user first logs in. This page displays the filter and list of all games as specified by the filter. The home page is organized with <div> tags. The filter portion is a <div> that expands and collapses as dictated in Javascript. Inside the filter, we use a few JQuery libraries to display the calendar when filtering date, display the time list when filtering by time, and display the slider when filtering skill level. Clicking on the “Filter” button or changing a filter field sends an event to Javascript that triggers an AJAX request to the database. The request retrieves the filtered games to display on the page. When we get this filtered result, we use Javascript to parse the data. Javascript then populates the game boxes in the All Games <div> and changes the window height. When the user clicks to expand/collapse the roster, a Javscript event fires to change the page accordingly. The appearances of these game boxes are defined in CSS. - My Profile Page (frame)
The profile page is divided into four main sections. The first section presents the profile information about the user. This is taken from the user database. All entries are initially non-editable. Clicking the “Edit” button/icon toggles the fields, and they become editable. This was implemented with a series of hidden fields that would toggle between hidden and unhidden by clicking the “Edit” button/ icon or the “Cancel” button in edit mode. In edit mode, making changes to the fields and clicking “Save changes”, sends an update command from PHP to the MYSQL database, changing the value in the fields as requested.
The second section presents a list of users you are following. When you follow another user, you get updates about their game statuses, which show up in your news feed in the right pane. Five users are displayed in each row, with the option to display more available by clicking the ‘show more’ button. Javascript expands the size of the frame. This allows us to only request data from a small set of records each time, instead of having to pull the entire user database from MYSQL. There’s a filter option which let’s you search your following list. The search looks for matching substrings in the username.
The third section displays a list of active games you the user are currently involved in. This includes future games you are organizing, joined as a player or watching. This list is pulled via a list of corresponding gameID’s stored in game lists in the user database. To display the games, both databases are queried. For consistency, these game boxes are identical in appearance to the ones of the main page, and each provide the option to leave, join, edit, delete, watch or unwatch are required by the current status of the user in the particular game.
The fourth section displays a game history: all games the user has participated in in the past. Similar to the third section, the game data is pulled from the game and user databases, but as expected without the options to leave, join, edit, etc. - Other User’s Profile Page
Clicking on the link of another user’s username takes you to their profile page. This page is presented in the same manner as your own profile page. The difference is that instead of the “Edit” button, you have an option to follow or unfollow them (depending on your current status). Clicking “Follow” or “Unfollow” has immediate feedback, updating the page by toggling the follow/unfollow button as appropriate. - Update Profile Picture Page
Profile pictures are stored are a URL string in the user database. To upload/remove a profile pic, PHP was used to check the validity of the uploaded file, including file type (.png, .jpeg, .jpg or .gif) and also the maximum file size. If requirements are met, the file itself is uploaded into the athena locker and the URL path to this file entered into the user record. Removing the picture, removes the url from the record. During page load, an empty entry in this field loads a default user image instead. - User search page (frame)
User search is accessed from the user search bar at the top of the page. This searches for a matching substring in the usernames across the entire user database. Clicking ‘Go’ takes you to the user search page, which displays the filtered results. Similar to the list of followers presented on the profile page, once again five results are displayed at a time to limit the requests required of the database server.
...