BTI420 Assignment 10

Work with JavaScript and Ajax.

Read/skim all of this document before you begin work.

 

Due date

Wednesday, April 5, 2017, at 11:00pm ET

Grade value: 4% of your final course grade

If you wish to submit the assignment before the due date and time, you can do that.

 

Objective(s)

Use JavaScript and Ajax in a web app.

 

Introduction to the problem to be solved

We need to add rich interaction to a web app, using JavaScript and Ajax. A number of small exercises will enable you to add features to an app:

  1. Show an employee photo when hovering over an area on a page
  2. When adding a new customer, look for duplicate name entry
  3. Get and display data from a public web service

 

Specifications overview and work plan

For this and the remaining assignments, continue to follow the oft-repeated list of general specifications (e.g. follows best practices, etc.).

During the class/session, your professor will help you get started and make progress on this assignment.

Every week, in the computer-lab class/session, your teacher will record a grade when you complete a specific small portion of the assignment. We call this “in-class grading“.

The in-class grading will be announced in-class by your professor.

 

Getting started

Create a new project, named “Assignment10”, and use the “Web app project v1” template (which includes the Chinook sample database).

Build/compile, and run the app, to ensure that you are starting with a working error-free base. Then, as you write code, build/compile frequently.

 

Baseline “getting started” tasks

You must do these before continuing:

 

Display a list of employees

Display a list of employees, sorted by last name (then first name).

Obviously, you will need:

  • View model classes and mappers
  • Manager methods to fetch
  • Controller and view

 

Display list of customers

Display a list of customers, sorted by last name (then first name).

Obviously, you will need:

  • View model classes and mappers
  • Manager methods to fetch
  • Controller and view

 

Show an employee photo when hovering over an area on a page

In this task, the idea is to modify the document when an event happens.

After studying this week’s code examples, you learned some techniques to implement this idea. In summary:

  • JavaScript code is in a “core.js” source code file, in the Scripts > App folder
  • It is activated (referenced) on the page that needs it, or in the _Layout.cshtml view
  • The view (web page) must have elements that can be accessed by JavaScript
  • The view, or the JavaScript, must configure handlers for the desired events

 

For this task, you can follow this summary of techniques, while also referring to the code examples. Some additional guidance appears below.

Notice: Each student has some JavaScript knowledge and techniques. The content below will help a student who has been away from JavaScript for awhile. Alternatively, for a confident and experienced JavaScript programmer who follows best practices, the content below is not intended to constrain your solution to exactly match the content below.

 

Getting started 

We need a photo for each employee. You can get photos from anywhere; there are probably public domain photos out there. On Blackboard, there is a zip file that has photos. (The photos are actually Canadian members of parliament, just renamed.)

If you are going to harvest your own photos, here are a few guidelines:

  • Eight (8) photos are needed
  • Limit each photo’s size to comfortably fit/render on a laptop or mobile device

Photo name? Good question. Remember what we’re doing here – showing a photo in response to an event. When the event fires, what do we know? Well, we probably know (or have access to) data that identifies an employee on the list. Maybe their name, right? So, set/configure the name of each photo in a meaningful manner that will help your coding task succeed.

Where to store them? Good question. How about creating a new folder named “Images” in the root of your project, and saving the photos in there.

 

JavaScript code and activation

The core.js source code file will include a function that will show (or hide) a photo. The function will need two arguments:

  1. The event (which will include useful data, like the event itself (hover, click, etc.) and the current pointer location)
  2. Some identifying information that you can use to select the photo (e.g. a name)

The jQuery library is available in all ASP.NET MVC web apps, so you can write jQuery-flavoured JavaScript, or pure JavaScript – your choice. While the code will be a bit different, the same algorithm and coding plan will be used.

Show the photo:

  1. Get the current pointer location (because we want to show the photo nearby)
  2. Use the name/identifying info to construct an HTML <img> element
  3. Add it to the container element in the document (tip: just toggle the value of the “display” attribute)

Hide (clear) the photo:

  1. Set the value to turn off the container element’s display/visibility

How is the core.js source code file referenced in the view? Follow the guidelines that you have learned recently:

  • If all (or most) views will benefit from the code, add it to the bottom of the _Layout.cshtml file, following the statement that renders the “jquery” bundle
  • Alternatively, if the code will benefit this view (or only a few), add it to the bottom of the view file, at the end of the scripts section block of code

Note: If the view does not currently have a scripts section, add it:

@section Scripts {
  // The next statement may or may not be needed
  @Scripts.Render("~/bundles/jqueryval")
  // Add this reference
  <script src="~/Scripts/App/core.js"></script>
}

 

View modification work

There are at least two ways to implement the hovering/show photo behaviour. One way is to add the behaviour to the table row, which will work anywhere across width of the row. Another way is to attach it to one area of the row – for example, a small/thumbnail image.

Either way, you probably want to watch for the onmouseover and onmouseout events.

Here are some screenshots. The first shows the result of a full-row hover, and the other shows the result of a hover over a thumbnail. Click an image to view it full size in a new tab/window:

 

 

 

 

Preview / lookup for duplicate when adding a customer

In this task, the idea is to give the user some feedback about data that’s being entered on a form, before the user must submit the form. In this use case, we’re watching for duplicates, which we can assume will not be permitted after submission. (So let’s highlight the problem before the user does much more work.)

Here’s what it could look like. Notice that a duplicate was detected. (The “Existing customers” list is shown here purely for convenience, to give the teacher team an easy way to know about duplicates. You don’t have to display the same list of existing customers in your work. Unless you want to.) Click the image to view it full size in a new tab/window:

 

To get started with this, create – using the scaffolder – a “create” view. Obviously, you will need a CustomerAdd view model class (with nice data annotations etc.). While you must write the controller GET method, it is not necessary – for this assignment – to write the controller POST method. (We are focusing on the JavaScript here.)

As above, there is script work to do, and view work.

The essential algorithm is that it should watch for the change event on the name fields. Then, it will use Ajax to send the current values of the name fields to a controller method. The method will check for an existing match, by calling a new method in the Manager class. If found, it returns a string with an error/info message. Otherwise, it returns an empty string.

Therefore, in summary, the method is delivering a simple string (not full HTML markup or JSON data).

Tip: Use an attribute-defined route on the controller method. For best results, something in this format:

[Route("customers/lookup/{firstname}/{lastname}")]

 

Get and display data from a web service

In this task, Ajax will be used to send a request to a public web service that can return some data.

You can use any public web service, but be careful and wary. Most will require you to register for a developer key, and must know about your app (which implies that it must be publicly hosted etc.). Probably too high a barrier for this assignment.

The teacher team used a web service from the JSONPlaceholder web site. It has a number of resources URLs available (/posts, /users, /photos, etc.).

Before writing code, look at the data returned by the resource URLs, and decide which data set you wish to render on your page. You can use the formatted JSON viewer that’s published by CuriousConcept.com.

Then, study the structure of each object in the array, so that you are prepared to dereference its keys-values and render them with JavaScript.

 

Controller work

To keep this simple, we suggest that you just add a new method to an existing controller (Home or Customers).  The only purpose of the method is to show the view.

Remember to add a menu choice to _Layout.cshtml to easily get to this new action/method.

Generate (scaffold) a view.

 

JavaScript work

Write a function that will manage an Ajax request to a web service, and then render the response data in an HTML Table. Assume that the view will have the <table> tags, and the header row (<th> elements). Also assume that it will have a <tbody> element with its “id” attribute configured, so that you can get a reference to it from the code.

 

View work

As suggested above, add a button that will call the new JavaScript function. (A “Clear” button or hyperlink would also be useful to clear/restart the task.)

Then, write the table structure, including the header row titles.

Make sure that it has a <tbody> element that can be referenced from code.

Here’s what the interaction could look like (for the /users data set). Click an image to view it full size in a new tab/window:

 

 

 

 

Publish to Azure

To be determined.

 

Testing your work

In a browser, test your work, by doing tasks that fulfill the use cases in the specifications.

Remember to customize the app’s appearance (front/home page, menus, etc.) before you submit your work.

 

Reminder about academic honesty

You must comply with the College’s academic honesty policy. Although you may interact and collaborate with others, you must submit your own work.

 

Submitting your work

Here’s how to submit your work, before the due date and time:

1. Locate the folder that holds your solution files. In Solution Explorer, right-click the “Solution” item, and choose “Open Folder in File Explorer”. It has three  (or more) items: a Visual Studio Solution file, a folder that has your project’s source code, and a “packages” folder. Go UP one level.

2. Make a copy of the folder. This is the version that you will be uploading.

3. Remove the “packages” folder from the copied folder; also, remove the “bin” and “obj” folders.

4. Compress/zip the copied folder. The zip file SHOULD be about 2MB or less in size. If it isn’t, you haven’t followed the instructions properly.

5. Login to My.Seneca/Blackboard. Open the Web Programming on Windows course area. Click the “Assignments” link on the left-side navigator. Follow the link for this assignment. Submit/upload your zip file. The page will accept three submissions, so if you upload, then decide to fix something and upload again, you can do so.

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Advertisements
%d bloggers like this: