Web Project Assignment 4

1. Authenticating the user on the login page. If the authentication fails, display an error message in red under the login button that says "invalid e-mail or password". Leave the message visible until the user enters a valid email/password and submits it. If the authentication succeeds, proceed to the data collection page. There should be a default section selection for the instructor, which is the first section returned by your login.php script. The menu items should be created as follows:

   courseId semester year major
         

   where major is the major being assessed by that section. For example, if the courseId is COSC365, the semester is spring, the year is 2019, and the major is CS, then the menu item should read:

   COSC365 spring 2019 CS	
         

   The outcomes associated with that section should be displayed in the navigation side bar and the results, assessment plan, and narrative summary sections should be populated with the content from the first outcome assessed by the section.
2. When the user selects an outcome from the navigation side bar, populate the results, assessment plan, and narrative summary sections with any relevant data from the database. If there is no relevant data, then:
   • put placeholder values of "None" into each of the narrative summary text boxes,
   • do not put anything into the remaining widgets (they will appear blank).
   • have one blank assessment appear for the assessment plan section since the instructor will have to enter at least one assessment.
3. When the user selects any of the save buttons, then save the data from the relevant section and display for three seconds a message that reads "xxxxx successfully saved" or "xxxxx unsuccessfully saved" where "xxxxx" is one of "Results", "Assessment Plan", or "Narrative". You can use an AJAX call to determine whether the save succeeded or failed and then a JQuery animation to make the message appear and disappear. The successfully save message should be in black and the unsuccessfully saved messaged should be in red. Before saving the assessment plan, make sure the weights add to 100. If they do not, then display a message in red that reads "assessment weights must add to 100". Do not make this message invisible until the next time that the user hits the save button for the assessment plan. The error message for assessment weights should be displayed in the same place that the save messages are displayed. The following data is required before the form data can be sent to the server:
   • Numbers for each number widget, both in the results and assessment section.
   • Descriptions are required for each of the assessments
   • Descriptions are required for the strengths/weaknesses in the narrative summary, but not the actions.
   You can get the browser to enforce these requirements for you by adding the "required" attribute to the appropriate widgets.
4. When the user selects a trash can icon, you should immediately delete that assessment from the html dom but wait to delete it from the database until the user hits the save button. You may not re-load the abet.php page because there may be changes that would be lost (remember that changes do not take effect until the user hits the save buttons). I specifically want to give you practice in editing the dom object.
5. When the user selects the "New" button in the Assessment Plan section, then add a new row at the bottom of the section with a blank assessment. Again you will need to edit the html dom object to create this new row.
6. If the user tries to leave the page or select a new outcome to edit without saving one or more of the sections, then pop-up a dialog box warning them about which sections are not saved. I'll leave the format of the message to you.
7. When the user selects the "logout" option from the user menu in the upper right corner of the page, log them out and return them to the login page.
8. When the user selects the "Change Password" option from the user menu in the upper right corner of the page, display the password page and allow the user to change their password. Limit the password to 20 characters. When the user presses submit either update the user's password if the two passwords match or else display a message in red to the right of the Submit button that reads "passwords do not match--please make them match". If the password change succeeds then display a message in black to the right of the Submit button that reads "password changed". Note that the navigation bar stays in place on the left side of the browser window so that the user can navigate back to the data collection page by either selecting an outcome or a new section from the Section menu.

Designing Your PhP/HTML Pages

In order to make our lives easier in grading your projects, I want the files you use to display and style the user interface to be named and organized as follows:

1. login.html, login.css: Your code for the front page of the site.
2. abet.php, abet.css: Your code for creating the interface for the data collection portion of the interface. It will include the forms for gathering the outcome results, assessment plan, and narrative summary. You will rename your "abet.html" file from the previous assignment to be "abet.php" and you will display this "abet.php" file when the user is authenticated. Since the html content for the results and narrative summary section are the same, regardless of outcome, you can use the static html you used in the previous assignment to create these two sections. You can use php variables to assign content to the value fields. For example, if you know that the value of a number widget is in the php variable $numMeetsExpectations, then your html for that widget might be:

   <input type="number" id="meetsExpectations" name="meetsExpectations" min="0"
   	value="<?=$numMeetsExpectations;?>">
         

   You will need to use a loop and php print/echo statements to generate the rows of widgets you need in the assessment plan section, although you can use static html for the New and Save buttons. Additionally you can use static html code for the form headings and horizontal rules that separate the forms.
3. password.php, password.css: Your code for creating the main content for the password form.
4. nav.php, nav.css: Your code for the navigation sidebar and header. You will include nav.php in abet.php and password.php so that you do not have to write this code twice. Use the nav.css file to perform the styling for the nav.php file. You can use static html to generate the header in the nav.php file but will need to dynamically generate the section menu and outcome items in the navigation sidebar.

You should be able to use code in the php files from the previous assignment as your back-end server code. Some of the files, such as the updateXXX.php files will be standalone files that get called when you select various form elements, while other files, such as the results.php, assessment.php, and narrative.php files, will get absorbed into other php files, such as the abet.php file. You will have to make some modifications to these files. You will not need to use the checkWeight.php from the previous assignment as you will be verifying that the assessment weights add to 100 on the client side.

Making The Browser Reference The Correct Page

There are certain times when you will need to make the browser navigate to a new page. Here are several examples:

1. when the user logs in successfully the browser should navigate to the abet.php page.
2. when the user selects an outcome, the browser should navigate to the abet.php page.
3. when the user selects a section from the Section menu, the browser should navigate to the abet.php page.

A second way you can do it, at least for the outcome items, is to generate URL links for each outcome item that includes the string parameter for the selected outcome. For example, you might have the following link for outcome 2:

<a href="abet.php?outcome=2">
  

Some Helpful Questions Asked By Previous Students

Here are some helpful questions asked by previous students and my answers to them:

• Question: If an instructor is in the database, must the instructor be associated with at least one section.

  Answer: Yes! You may assume that if the instructor is in the database, then login.php will always return at least one section for an instructor.

• Question: I am using flex/grid layout but when I pull the navigation bar code into a separate nav.php file, my layout gets messed up. How do I fix it?

  Answer: There are two ways to fix this problem, both of which are a bit hackish and either of which is acceptable:

  1. Put the header, nav, and main elements into different files and load the header/nav files into your abet.php and password.php files. Create separate header.css, nav.css, and abet.css style files and include the header/nav.css files into both the abet.php and password.php files. This is probably the easiest way to fix the problem.

  2. Keep the header and nav elements together in the same file. Start your content div in nav but don’t terminate it in nav—instead terminate it in abet.php:

     nav.php:
     <header>…</header>
     <div id=‘content’>  <!-- start the div in nav.php but don't end it in nav! -->
         <nav>…</nav>
     end nav.php
     
     abet.php:
     <body>
     include ‘nav.php’;
       <main>…</main>
     </div>  <!-- end the content div started in nav.php! -->
     
     </body>
     

     Also notice that you don’t want the <body></body> tag in nav.php because you are including it in abet.php which does have body tags. For the same reason there is no reason to call session_start() in nav.php because it will already be called in abet.php.

• Question: In firefox, the alert box indicating that changes may not have been saved is always displayed when I leave the page and my callback function does not get called.

  Answer: You are probably trying to use addEventListener which for some reason does not work properly for the beforeunload event in firefox. Try this instead:

  $(window).on('beforeunload', function() { ... });  // JQuery
  

  or

  window.onbeforeunload = function() { .. } // native javascript
  

• Question: When I press the "login" button on the sign-in page, I get the error message:

  XHR failed loading: GET "http://web.eecs.utk.edu/~bvanderz/web465/php/login.php?email=coyote%40utk.edu&password=password"
  

  Answer: You need to call event.preventDefault() or else the request gets cancelled and you start seeing error messages like the one above.

What To Submit

1. Submit a zipped file with all of your files. Minimally your submission will have .html, .php, .css, .js, and image files. Make sure that your javascript is in separate .js files and not in your .php files. Your web-site must work without us changing anything in any of your files. That means including your database credentials in all php files so that when we run your web-site on the department's machines your web-site can communicate with the database. Unlike with web_hw3, you must provide us with a working database password. Please test your interface on the department's computers before you submit it because that is how we will test it.
2. In your submission comments give us a list of your users (i.e., their email addresses) and their passwords. We will first try to use our own database to test your web-site. However, if this fails then we will switch to your database and because the passwords are encrypted we have no way of knowing what they are without you telling us what they are.
3. If you are working with a partner, make only one submission and in the submission comments indicate whom you are working with.