BTI420 programming assignment specifications document 3

Assignment specifications document, for the final deliverable.

.

This is the final specifications document for the programming assignment.

Here is a link back to the programming assignment introduction.

Here is a link to the first specifications document.

Here is a link to the second specifications document.

.

Next due date, expectations and marking guide

The final due date and time is Wednesday, April 9, 2014, at 8:00am ET.

Plan to do the following. (If you do more, that’s OK.)

  1. For a Student user, enable the student to annotate a graded work item
  2. Fix things that need fixing, including functionality, security, etc.
  3. Make sure there’s enough data there for a suitable demonstration and use
  4. Fit-and-finish

Submit your work by uploading to the My.Seneca/Blackboard link. (Remove the packages, bin, and obj folders.)

.

Functionality by role

Some students have asked for a detailed list of functionality.

Your professors explained that we do not expect every student to submit the exact same project, and that we’re flexible about functionality. However, many use cases are obvious, so we’ll affirm their presence in the lists below. It’s possible that your app will have more use cases, and that’s OK.

.

Administrator users…

  • Register new “Teacher” accounts
  • Edit a course (to assign/configure a teacher)

.

Teacher users…

  • View list of my courses
  • View list of my graded works (some flexibility about the format of the list; think about use cases)
  • Add, edit, delete a graded work item

.

Student users…

  • View list of my courses
  • Select/configure my courses (which is an edit task)
  • View list of my graded work items (how should that be sorted? should there be choice?)
  • View details of a selected graded work item, including its annotations
  • Add an annotation to a graded work item (maybe edit too)

.

Anonymous users…

  • Register (which creates a new “Student” account)
  • View list of courses (would it be useful to see course detail?)
  • View list of teachers (would it be useful to see teacher detail?)

.

Introduction to ‘new’ topics – security, and annotations

As previously discussed, this final specification document asks you to ensure your app’s security works in a way that makes sense, and to enable a student/user to annotate (personalize) a graded work item.

The information below suggests some ways to handle these situations and typical use cases. Some students have already implemented some of these suggestions. For those who like step-by-step instructions, the following will be useful.

If you have a question, ask your professor.

.

How to ‘connect’ a security account to a Student or Teacher

We need a way to ‘connect’ a security account that’s created during a “Register” task, to a Student or Teacher object.

Your code already enables a new account to be created, and placed in the “Student” role.

In addition, your code enables an Administrator to create an account for a new “Teacher”.

However, neither of these actions will create a “Student” or “Teacher” object in your design model. Here’s a suggested way to handle this situation. Notice that this procedure changes the identity model and design model classes, so you must either re-create your database or configure another Code First Migration.

Also notice that we are not creating hard-coded associations between the security class and our design model classes. Instead, we are creating a logical association.

.

Edit the “ApplicationUser” class in the identity model

Look at your design model classes for Student and Teacher, and notice the property names for ‘family name’, ‘given names’, and ’email address’.

Then, in the IdentityModels.cs source code file, add these properties to the ApplicationUser class. We suggest that you use the same property names if possible. That way, if you choose to do so, you can use AutoMapper to help reduce the amount of code you must write later.

It’s possible that you have already done this. We have noticed that a number of students have already added these properties to their apps.

.

Update the RegisterViewModel class, and the ‘register’ view

In the RegisterViewModel class, add code for the new properties you just added in the previous step.

Then, in the ‘register’ view, add code to show them on the HTML Form.

.

Edit the “Student” and “Teacher” classes in the design model

Add a string property named “UserName” to the Student and Teacher classes.

.

Update the ‘register’ methods in the account controller

As you would expect, you must update the code in the “Register” method to assign the new RegisterViewModel properties to the ApplicationUser security account object.

In addition, do one more task: Create a new “Student” object.

Use the information in the new ApplicationUser object, and add code to create a new “Student” object.

Previously, you have already created another ‘register’ method to enable an administrator to register a new ‘teacher’ security account. Similar to above, add code to create a new “Teacher” object in that method.

.

In code, how do I get the current ApplicationUser object?

The User property can be queried for answers to these kinds of questions.

From the MSDN Library, the User property type is iPrincipal, which “represents the security context of the user on whose behalf the code is running, including that user’s identity… and any roles to which they belong.”

In controller or view code, it is the User property.

In a manager class, it is the HttpContext.Current.User property.

In code, you will often use these three members of the User object:

  • User.Identity.IsAuthenticated
  • User.Identity.Name
  • User.IsInRole()

If you have the user name value, then you can use that to find the Student or Teacher object.

That’s how you connect a security account to a Student or Teacher object!

.

How to filter data for the current user

Some data queries and operations need to be filtered for the current user.

For example, a logged-in “Student” must work with their courses and graded work.

How can this be done?

  • The controller method must be marked with the [Authorize(Roles = “Student”)] attribute
  • It calls a method in the Manager class to fetch (or whatever) a collection of courses (or whatever)
  • Then, in the Manager class method, get the current User object
  • Use it to help create your query expression

.

An example method, adapted from a BTI420 student’s code in their Manager class, shows how this can be done:

manager-get-courses-for-student

.

Annotations for a graded work item

A student can ‘annotate’ a graded work item. Annotations can include notes and partner/group info.

The idea is to enable a student to capture personalized information about a graded work item.

There are many correct and appropriate ways to implement this functionality. One way is suggested below.

.

Add a new “Annotation” class to your design model

To your design model, add a new class named “Annotation”. It can be a simple class, perhaps with these properties:

  • Identifier (obviously)
  • Date edited, a timestamp, assigned and updated in code (it’s not necessary to show it in the user interface)
  • A flag (i.e. a boolean) to enable the student to indicate whether they’ve completed the graded work item
  • The identifier for the logically-associated graded work item
  • A string to enable the user to add descriptive notes about the graded work item
  • A string for the names of other students who are working with the student in a group
  • A navigation property to the Student object

To the Student class, add a new navigation property, which will be a collection of Annotation objects.

Notice that we are not hard-coding an association with the GradedWork class. Instead, we’ll use a logical association, by storing the identifier of the graded work item.

In summary, Annotation has an association with Student only.

Note that you will also create suitable view model classes.

The following class diagram shows the new Annotation class in the lower-right area. Please note that your diagram may look different. In other words, do not assume that the following diagram is the authoritative correct answer, because it’s not.

 

DesignModelClassesV4

.

Scenario overviews

There are three typical scenarios that involve annotations:

  1. While looking at the ‘details’ view of a graded work item, show the annotations
  2. Add an annotation to a graded work item
  3. Edit an annotation

Here are some implementation suggestions.

.

View/show annotations for a graded work item

Your app probably has an existing view that enables a student to see the details for a graded work item.

Therefore, you have the graded work item’s identifier. And, you have data that identifies the student/user.

Create a Manager class method that accepts these arguments:

  • Graded work identifier
  • Information that identifies a student/user

The method will return a collection of Annotation items (mapped to a suitable view model class).

You will have to edit the view model class that you’re using for the view, and add a property for the annotation collection.

Then, in the controller method, call the new Manager class method to get the annotation collection, and assign it to the new property in the view model object.

Finally, in the view, write code to render the annotation collection, in a format that’s pleasing to you and appropriate for users. To support the ‘edit’ task below, you should add a link for each rendered annotation.

.

Add a new annotation to a graded work item

The view (above) needs a link to enable the student/user to add a new annotation for the graded work item they are viewing.

In your controller, add the method pair (GET, POST) that enables the student/user to add a new annotation.

The Manager class will also need a new method to handle the new data.

The view (user interface) will enable the user to:

  1. Enter the name(s) of another existing student/user, who will be a ‘group member’
  2. Enter descriptive text notes about the graded work item

When the data (view model object) is posted back to the controller and/or manager methods:

  • set the ‘graded work identifier’ property to the identifier for the current graded work item,
  • add a date/time stamp,
  • and set the ‘completion’ flag to “false”.

.

What should the user interface be for #1?

Some people will say that a select list of existing students should be displayed. That’s probably not a good idea, because it will leak information to users who shouldn’t have it, so don’t do it.

Instead, use a simple text box. A name, in ‘firstname lastname’ format, would be entered. The program code (ultimately in the Manager class) would take those values and simply search for matching Student objects. If found, it would use the found object’s values. If not found, it would silently ignore the name.

What if you wanted to enable multiple names to be entered? One suggestion, documented below, is to continue to use a simple text box, and accept a comma-separated list of names. For example:

In a ‘create new annotation’ view, show a text box for the workgroup names. Tell the user to enter names in ‘firstname lastname’ format, with multiple names separated with commas. For example:

elliott coleshill, peter mcintyre

That content is posted back to the controller method that handles the POST request. After model validation, pass the view model object on to the manager method.

In the manager method, split the string on the ‘comma’ character, to create a ‘source names’ array. Each array element now holds a ‘firstname lastname’.

Create a temporary work-in-progress ‘results’ collection (probably a List<string>) to hold matching/found names.

For each string element in the ‘source names’ array…

Split the trimmed version of the string element into another ‘single name’ array, this time split on the ‘space’ character. If the user entered invalid data, then this operation will not succeed, and that’s OK.

Use the ‘single name’ element content to search for a matching Student object in the data store, case-insensitive. Both the ‘firstname’ and ‘lastname’ must match.

If matched, get/use the proper-case version from the fetched Student object, and add it to the ‘results’ collection.

If not matched, ignore and continue.

At the end of the ‘for each’ task, dump the ‘results’ collection to an array, and then to a string joined with a ‘comma’ character (or comma-space string, for better readability).

That string is saved as the Workgroup value in the Student object.

.

Oh, incidentally, don’t go searching online for code to implement this kind of solution. You won’t find anything. Just follow this procedure.

.

What should the user interface be for #2?

A rich text editor. Use CKEditor to implement this. CKEditor is a plug-in (i.e. copy-paste) JavaScript app that replaces an HTML <textarea> element with a nice-looking and highly-functional rich text editor.

Study the “RichTextEditor” example in the GitHub code example repository to learn how it’s done.

.

Edit an annotation

This will look and function in a way that’s similar to the “add” task above.

Typically, for an editing task, you would create a view model class that’s used by the form to hold the object’s current data.

.

Answers to your MediaItem questions

Some students have asked questions about MediaItem functionality.

As above, your professors do not expect every student to submit the exact same project, and that we’re flexible about functionality. However, here’s some guidance.

.

Images only? Or other kinds (e.g. PDF)?

Our initial position is ‘any kind’. Then the follow-up question is ‘how to show/display a media item’.

Think about a graded work item, and its collection of media items. As a student/user when you’re viewing the details of a graded work item, what do you expect to see? Do you expect to see media items rendered in-line with the text content? Or do you expect to see icons? Or hyperlinks? What’s the right way?

The answer is “it depends”. Your professors are flexible.

For example, assume a situation where a graded work item includes two media items, 1) a PNG image, and 2) a PDF document.

What if you simply wanted to render hyperlinks to these items?

Well, the Manager class method that fetches the graded work item would also fetch its media items collection. At that point, you would have the media item identifier (which is needed to render a hyperlink), and other descriptive data. You could map the result to a suitable view model object, and return it to the controller method.

The controller method would pass the view model object on to the view. In the view code, you could render hyperlinks for the media items in a suitable markup structure (e.g. a table, paragraphs, or an unordered list). Maybe the hyperlink’s visible name/title would be the media item’s “Name” property. If you wanted to, you could have the hyperlink target a new tab/window. And so on.

.

How to add multiple media items to a graded work item?

We discussed this in class. Your professors are flexible.

We suggest that it would be pretty easy to create a dedicated view (with matching controller and manager code) to add a single media item to an existing graded work item.

Treat it like a specialized ‘edit’ task for a graded work item.

You already know how to do a normal ‘edit’ task. For this use case, you want the benefit of the ‘edit’ GET-POST cycle. But you can do whatever you want with the data in the view model object that’s posted back.

If the teacher/user wanted to add multiple media items, the teacher/user would simply run this page/view multiple times.

.

Fixes, data, and fit-and-finish

Fix things that need fixing.

Make sure there’s enough data for a suitable demonstration, as well as for everyday use.

Ensure that the appearance is appropriate. Spend some effort on fit-and-finish.

One fit-and-finish item is menus. Ideally, your app should use conditional menus, and where appropriate, dropdown menus.

See the April 2 class notes page for full coverage.

.

Submit your work on My.Seneca/Blackboard

Follow these brief instructions to submit your work on My.Seneca/Blackboard.

1. Make a copy of your project

2. Remove the “packages”, “bin”, and “obj” folders

3. Zip your project (make sure you’re at the correct level in the file system)

4. Submit your work via My.Seneca/Blackboard

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: