Web Project Assignment 3
Linking the Client and Server Side
You may not use any toolkit, IDE, or framework for completing this
assignment other than JQuery. I want you to learn how to code
html, css, and php without the benefit of a crutch.
In this final project assignment you will link together the server side and
client side code that you wrote in the previous assignment. You should review
the project description to see the operations that
your interface needs to support. Here is a checklist of those operations:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- When the user selects the "Change Password" option from the
user menu in the upper right corner of the page, display
this 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. Also make the appearance of the password page roughly
approximate the appearance of my password page.
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:
- login.html, login.css: Your code for the front page of the
site.
- 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.
- password.php, password.css: Your code for creating the main
content for the password form.
- 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:
- when the user logs in successfully the browser should navigate to the
abet.php page.
- when the user selects an outcome, the browser should navigate to the
abet.php page.
- when the user selects a section from the Section menu, the browser
should navigate to the abet.php page.
One way you can make the browser do this is
using the window.location.assign function.
The function takes a URL as an argument and makes the browser load that page.
As an example, you could have the submit button for the login page
make an Ajax call to the server. If the login succeeds, the server will
store the section id information in PHP session variables and return true
to indicate that the login succeeded (and of course false if it fails).
When the Ajax call returns the callback function either displays the error
message if the login failed or else uses the window.location.assign function
to make the browser load the abet.php page. The abet.php/nav.php pages can then
access the PHP session variables to retrieve and display the appropriate information.
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">
The PHP session variables would already store the other relevant information,
such as sectionId, major, semester, and year.
Naming Your HTML Elements
We are going to use a script to automate the testing of your web-site and
the script depends on you using the id attribute to name your HTML elements
exactly as detailed below. In the below lists, the first item
describes the widget and the second item indicates what its id attribute
must be named.
Login Page
- email text box: email
- password box: password
- login button: login
- login fail message: loginFail
Navigation Sidebar
- user menu in upper right hand corner: userMenu
- menu item 1: changePassword (the menu item itself should be
more aesthetically pleasing such as "change password")
- menu item 2: logout
- section menu: sectionMenu ‐ The menu items should be named
as shown above and their id attributes should be named section1, section2,
section3, etc. In other words, the id of the first menu item should
be section 1, regardless of what its label is, and the same for the
remaining menu items.
- outcome items: They should be numbered according to their outcome.
For example, if the outcome is outcome 4, then the id should be
outcome4.
Results
- number widgets: notMeetsExpectations,
meetsExpectations, and exceedsExpectations.
- save button: saveResults
- successful save message: resultsSuccess
- unsuccessful save message: resultsFail
Assessment Plan
- weight widgets: weight1, weight2, weight3, ...
- assessment description widgets: assessment1, assessment2, assessment3, ...
- trash can widgets: trash1, trash2, trash3, ...
- new button: newAssessment
- save button: saveAssessments
- successful save message: assessmentsSuccess
- unsuccessful save message: assessmentsFail
- weights error message: weightsNot100
Narrative Summary
- strengths text area: strengths
- weaknesses text area: weaknesses
- actions text area: actions
- save button: saveNarrative
- successful save message: narrativeSuccess
- unsuccessful save message: narrativeFail
Password Form
- new password widget: newPassword
- confirm password widget: confirmPassword
- password error message: passwordError
- password changed message: passwordSucceeded
What To Submit
- Submit a zipped file with all of your files. Minimally your submission
will have .html, .php, .css, .js, and image 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. Please test your interface on the department's
computers before you submit it because that is how we will test it.
- In your submission comments give us a list of your users (i.e., their email addresses) and their passwords. This is crucial because the passwords are encrypted so without you telling us what they are, we have no way of testing your interface with your sample data.
- If you are working with a partner, make only one submission and in the
submission comments indicate whom you are working with.