comp730:MeAndYou Project GUI Notes

Introduction
MeAndYou is a platform to connect two people on different relational levels anonymously. Two individuals can make a connection through being a crush, friend, family member or a long lost loved one. In order to establish this connection, both individuals must supply personal credentials about the other party. Once a connection is made, both people can see their relationship while remaining hidden from the rest of the MeAndYou user base. It is not a dating site; you can only use it to find someone you already know or had a relationship with. You cannot use it to search for people you don’t know. After you enter all the necessary information about the person you are trying to find, the connection will only be made if, and only if, that other person has an active account on the site and they are actively looking for you as well! So even if the person you are trying to find is registered on this site you cannot connect to him/her unless that person is looking for you. Once the connection is made, you two can choose the way you want to communicate with each other.

Purpose
The purpose of this platform is to reconnect with people you lost connection with a long time ago. You can use it when you want know if someone in particular, say a crush, is looking for you. You can also it to reconnect with a family member who you have fallen out of touch with. This site was primarily built to find and reconnect long-lost loved ones, in the event that you (and that special someone) are looking to connect and potentially get back together. You can do all of that by registering yourself and searching this site.

GUI Functional Requirements
User interface: the front end portion of the software will be designed using: HTML, CSS, PHP, Javascript.


 * Users can create an account.


 * Users can log in.


 * Users can edit information.


 * Users can search for other users (putting in information that will remain an open search until it expires after 30 days).


 * Users can cancel their account.

Use Case Diagram for MeAndYou Prototype

GUI Non-Functional Requirements
The user interface will help:


 * Register the user.


 * Find connections.


 * Notify the user if a match was made.

What it will not do:


 * It will not help users to search for random people.


 * It will not make connections unless the person you are looking for is registered and is also searching for the user (100% match).

Home (Index) Page

 * Home page has a title bar shows the logo on the left side and on the right side it has the following:
 * 1) Get started: This will take the user to the registration page where they can enter their information, create a password and create an account. After creating an account, the user will be able to: Search for the person(s) he/she wants to find; manage active searches; find matches and check notifications. Users will also be to: delete an active search; edit their profile or edit the information they entered for any active searches in the searches list.
 * 2) Log In: This button is to be used by registered users. By clicking this button, the user will be asked to redirected to the log in page where they can enter their e-mail and password to log in to their account and enjoy all of the features provided by this web site.
 * The home page also displays a slide show explaining what MeAndYou is, how it works, and providing brief explanations of the different kinds of connections that can be made on MeAndYou (Crushes, Friendships, Family and Lost Loves).
 * The home pages also has clip art representing each of the relationships types on MeAndYou (Crushes, Friendships, Family and Lost Loves).
 * In addition to the above, the home page also has small sections towards the bottom of the page informing users of any news regarding the MeAndYou website, recently implemented updates and upcoming updates to come.
 * Lastly, there is another small section devoted to tracking and displaying how many people are using the site, how many active searches are taking place, and how many matches were made.

Home Page
 * Index.PNG

About Us Page
 * aboutus.PNG

Registration Page
In order for the user to use YouAndMe site the user must create an account.

The user account requirements are:

These requirements shall be the same information that are used by the system to find this user if someone were to be searching for him/her. After the user enters the appropriate information into all of the required fields, they will be redirected to the log in page where they will log in for the first time and then be sent to the user dashboard. Each Security question is required, in order for the user to register. The Security Questions are the following:
 * E-mail
 * Password
 * First name
 * Middle name
 * Last name
 * Nick name
 * City
 * State(Configured as a drop down containing all 50 States. Me&You is only intended for US use at this time.)
 * Zip code
 * Gender
 * Date of Birth
 * Security question answers


 * What was the name of your elementary/primary school?
 * What is your favorite food?
 * What is the name of your first crush?

User then completes the registration process by clicking the "Sign Up" button found on the bottom of the page"

(Future improvements) When the user clicks sign up, a verification email is sent that contains a link that the user will need to click to validate their email address

Registration Page
 * register.PNG

Login Page
In order for the user to log into their account they will click the (login) button in the navigation bar towards the right upper portion of the page. They will then be redirected to the log in page where they will be asked to enter their:
 * 1) E-mail address
 * 2) Password
 * 3) Afterwards the user will click 'log in' and if authentication is successful, the user will be directed to the user dashboard.
 * 4) If authentication fails, or the user has forgotten their password, the user can click the 'forgot password?' button to be taken to the 'forgot password page' and initiate a password reset upon answering all three security questions.

Login Page
 * login.PNG

Forgot Password Page
Provide a self-service option to the user to set a new password without compromising account integrity.
 * 1) User enters email address previously used to register account.
 * 2) User answers three security questions they previously set answers for during registration.
 * 3) User creates and verifies a new password, and submits the change.
 * 4) If the change is successful, the user is brought back to the login screen, to login with their new password.

Forgot Password Page
 * Forgot.png

Forgot Password Activity Diagram
 * Loginhelp 480.png

The Dashboard

 * Dashboard.png

After the user logs into their account he will be directed to the user dashboard;

Dashboard page has:


 * 1) A Header.
 * 2) The YouAndMe Logo is displayed on the left-hand side of the page.


 * The right side has a navigation bar housing the following buttons:


 * Notifications.
 * Account: Clicking this button will bring the user to their account page and provide them an opportunity to change their information if so desired.
 * Logout: Clicking this button will log the user out of their account and return them to the home or index page.


 * A window in the middle of the dashboard page houses the actual dashboard, which includes the following tabs:


 * My Dashboard: The dashboard tab reads: "Welcome to your dashboard! Use the following tabs to search for people, view your matches or manage your searches."
 * Search For Someone: This is where users can generate searches. Initially they will only be able to search for crushes, but this will be expand to all of the relationship types in the future.
 * View Matches: This is where users can review all of the matches they have made on MeAndYou.
 * Manage Searches: This is where users can manage (i.e., delete or archive searches).

Search for Someone


New Search Activity Diagram
 * Newsearch 720.png


 * A drop down window when the user clicks it will have the following options:


 * Find a Crush
 * Find a Family member.
 * Find a Friend
 * Find a Lost Love.

The relationship type to match we are working on this semester is Finding a Crush.

They will then click the search button, and if a match is made they will receive the email address of the person they are looking for in the View Matches Tab.
 * 1) After the user selects "Find Crush" from the drop down box, they will enter the following information about the person they are looking for:
 * First name
 * Last name
 * Email
 * Address: (City, State, Zip).
 * Phone number.

View Matches
If a match is made the email address of the person you are looking for will appear in this window.
 * User logs in from the Home Page.
 * Select "Crush" from drop down menu.
 * Enter crush information and verify output.
 * User starts search and finds match. (View matches only works if there is a match in the system.)
 * If the Match is not the Match that the user is looking for, the Match is saved and the User has a chance to start a new search.
 * If the Match is the Match that the user is looking for the Match is saved as matching in the system.
 * The User is offered the chance to Contact Crush. If the User chooses an e-mail is sent to the Crush notifying them of the match.
 * User is prompted to Log Off.



Manage Searches
Manage Searches: Manage searches shows all of the searches you have performed and gives users the ability to clear the search history. A user can edit or change the first and last name of the person he/she is searching for. When manage search is clicked, a user is able to see what he/she has searched for previously. A user will be able to view the search type (in this case a crush), search name that is the name of the crush they were looking for, the search status (if the search was completed or not), the expiration date of the search, and the action. Also, the user will be able to delete searches for people that they no longer wish search for.



Manage Searches Activity Diagram
 * Activity_Diagram.png

Account Page
Once a user has logged into MeAndYou, they are able to access and review their account information by navigating to the Account page. This can be done by clicking on the Account tab in the upper right hand corner of the screen from the Dashboard. All data forms on the Account page are locked as this as a means of preventing accidental changes while reviewing account information. From this page, users can also navigate to the Index page (by clicking on the MeAndYou Logo in the upper lefthand corner) as well as the Dashboard, Notifications, and Log Out pages by clicking on the appropriate button in the upper righthand corner navigation bar. Furthermore, users can make changes to their account by clicking the Edit button at the bottom of form or they can change their password if so desired by clicking the Change Password button.

Account Page
 * Account.png

Account Page Activity Diagram
 * AccountAD.png

Account Edit Page
In the event a user has decided to change their account information on the Account page, they will be brought to the Account Edit page when they can edit their account details. All personal account information with the exception of the user's password can be changed and then updated in the database from this form. The user can navigate to the Index, Dashboard, Notifications, and Log Out pages from the Account Edit page in the same manner they would on the Account page. To confirm and submit account detail changes, all the user must do is click the Submit button at the bottom of Edit Account Details form. Upon doing this, the user will be brought back to the Account page where they can verify the changes they submitted.


 * AccountEdit.png

Account Edit Page Activity Diagram
 * Editaccount 720.png

=Gannt Chart=


 * Gantt Chart.png

=Tasks to be completed for the start of class March 29, 2017=

Develop individual activity diagrams based off of the group developed Use Case Diagram
 * Forgot Password Diagram - Josh
 * Start a New Search Diagram - Will
 * View Matches - Yashna
 * User Registration Diagram - Ryan
 * Edit Account Information - Zach

=Tasks to be completed for the start of class April 5th, 2017= Begin HTML Development
 * Update the Image set for MeAndYou - Yashna
 * Reconfigure the User registration page - Ryan
 * Fix Account Edit Page and create a link from the account page - Will
 * Create Forgot Password Page, and create a link from the login page - Josh
 * Start development of Notifications View - Zach

=Tasks to be completed for the start of class April 12th, 2017= Continue HTML Development
 * Update the logo - Yashna
 * Continue editing the registration page (fix tabbing, add security questions and nicknames) - Ryan
 * Create Manage Searches and View Matches mock-up pages - Josh
 * Continue development of Notification view - Zach
 * Can we be Mobile Responsive - All
 * GRC and URC posters

=Tasks to be completed for the start of class April 19, 2017=
 * Upload new and modified HTML pages to the server
 * Upload new images to the server
 * Begin PHP Development pulling data from the recently completed new database
 * Troubleshoot the broken user authentication page.

=Tasks to be completed for the start of class April 26th, 2017=
 * Everyone needs to login to the server, register on the new site, create a search, look for bugs or issues, document them, report them, and troubleshoot them.


 * All members of the GUI team will work on completing the documentation for individual pages.
 * For each page, each member will verify the accuracy of the UML Diagrams, provide descriptions of each page and its functionality, and upload screenshots of the page(s) they have been assigned. Below are the pages each individual will be working on:
 * Registration - Ryan
 * Forgot Password - Josh
 * Login + Home (Index) Page with Carousel - Zack
 * Account + Account Edit Pages - Will
 * Dashboard (New Search, View Matches, Manage Searches) - Yashna


 * As a GANTT Chart has been overlooked, this will be generated and updated on the Wiki page as well.

=Tasks to be completed for the start of class May 3, 2017= Every team member is now registered on MeAndYou!

This week every team member needs to login, change their password, and start a search for other team members, search pairs are as follows:
 * Will + Josh
 * Zack + Ryan
 * Yashna + Will


 * Report and document any bugs or issues experienced performing the above.
 * Also, please go through the GUI testing practices (as detailed below) and document those errors. All error/bug documentation should take place under Identified GUI Bugs.

Continue working on updating the Wiki.
 * Gantt Chart - Any changes?
 * GUI Notes - Search - Yashna
 * General Project Notes - ENTIRE GUI GROUP

=Tasks to be completed for the start of class May 10, 2017= Wrap up documentation for the GUI

Keep testing the system
 * Make another account
 * Change your password again
 * Change your account details
 * Create multiple searches

=GUI Testing Practices=

1. Functionality Testing
 * Hyperlinks – Make sure all links go to intended location, check for broken links
 * Forms – Make sure all form fields can be filled out, have correct format and validation rules, and can be submitted to database successfully
 * HTML/CSS validation (http://w3c.github.io/developers/tools) – Make sure HTML5 and CSS3 are up to the latest standards

2. Usability Testing
 * Spell check – Check for spelling and grammar errors
 * Fonts and colors – Make sure all text on website is readable
 * Browser compatibility – Run website in all major browsers and note any differences/issues (Firefox, Chrome, Internet Explorer, Safari, Opera, Edge)
 * Mobile compatibility – Make sure entire website is responsive to window size (media queries)

3. Security Testing
 * Make sure only logged-in users can view restricted pages (Dashboard, account settings, log out, etc.)
 * SQL injection (http://www.w3schools.com/sql/sql_injection.asp)
 * Login system – Make sure passwords are secure (password hashing), make sure users can only log in with correct information

GUI Bugs Identified Testing the User Interface

 * Main logo missing link to homepage (FIXED) - JQ
 * Middle Name and Nick Name being required on the account edit page (FIXED) - JQ
 * Removed requirement
 * Undefined variable errors (username and personId) when editing account details (FIXED) - JQ
 * Due to a corrupt account, fixed by deleting account and reregistering - JQ
 * Undefined variable errors (username and personId) when changing password (FIXED) - JQ
 * Due to a corrupt account, fixed by deleting account and reregistering - JQ
 * Undefined variable error (nameofsearch) when editing search. (FIXED) - JQ
 * Did not select a search before selecting edit, the fix was to have the page load with the first radio button already selected. - JQ
 * CSS rendering issue in Internet Explorer 11. The logos in the carousel are rendering into the header. (FIXED) - AB
 * Increased the z-index of the header in custom.css - JQ
 * Edit Search details is requiring an email address, which is not required for a new search. (FIXED) - JQ
 * Email address is no longer required during search edit. - JQ
 * DOB is being pulled up backwards in account edit and search edit should be MM-DD-YYYY, and it's showing up as YYYY-DD-MM. This issue is further exasperated by the regex which will only accept the former. - JQ
 * DOB format on registration is M/D/YYYY and on account edit and search it is MM-DD-YYYY. It needs to be normalized. (FIXED) -JQ
 * The initial searcher isn't getting a match after the person they're looking for searches for them at a later time. -JQ
 * When editing user account information, there is no syntax error that might be expected between numbers and letters. You can change your personal information to numbers.  - RW
 * Registration page now displays an error Notice: Undefined variable: DOB in C:\xampp\htdocs\meandyou2\register.phpon line 74 on DOB section. - RW

Design Concerns

 * There is no visual distinction between the logged in and logged out states and there is broken navigation between certain subpages of the website. - WR
 * When logged in, users should have the ability to log out from the navigation bar and this is not present at the moment. - WR
 * When logged in, users should also have the ability to return to their dashboard from any page, including the home/index page and register page. - WR


 * There is a substantial amount of duplicated HTML contained within the PHP files. This can be cleaned up so that code review is easier, the pages are more dynamic, and centralized changes can be uniformly carried out, minimizing risk of errors. - WR
 * To address this, the HTML, CSS, and JS containing the header and footer information for the sites was moved to separate HTML files (header.html, header2.html, and footer.html) and then called with the PHP echo file_get_contents function. This saved 60+ lines of repetitive HTML, CSS, and JSS code. - WR
 * Header contains the HTML for generating the header of a user that is not currently logged in. -WR
 * Header 2 contains the HTML for generating the header of a user that is currently logged in. -WR
 * Footer contains the HTML for generating the footer seen at the bottom of every page. - WR

=Recommendations for Future Improvements=
 * At present, searches for crushes require exact date of birth information, which is impractical in a practical setting. In the future there will be better integration between the front-end and search engine that will allow for us to instead use a field requesting an estimated age, which the search engine can then compare against the known DOB information stored in the database. - WR, JQ


 * Incorporate mysql_real_escape_string and md5(mysql_real_escape_string) into registration page to help prevent SQL injection attacks. - WR


 * When a user logs in incorrectly, it would be great to display a warning that lets the user know that the credentials are wrong. At present, the page hangs and then reloads with no indication as to what happened - RW


 * One improvement, would be to have the Notifications displayed on the Dashboard page, be a link to a separate notification page where the user would manage the notifications they have. -RW


 * Add shortcuts from search type icons to the different searches. -Prof. Jonas


 * Add First Names matched to statistics. (i.e. John and Jane found each other) -Prof. Jonas


 * Light blue and Green logo Gradient - Prof. Jonas


 * Emphasis on search match notifications and improve clunkiness -WR