Specifications Create a single-page application with an HTML form and database.

Question

Specifications

Create a single-page application with an HTML form and database.
The form will include the following:
Input text field for Zip Code
Submit button

The zip code text field must retain its value after form is submitted.

If an invalid zip code is entered, display an error message.
An invalid zip code is a string that is not made up of 5 digits.
Hint: Use the is_numeric and strlen functions.

If a valid zip code is entered, but not found in the database, display an appropriate message.

If a valid zip code is entered and is found in the database but no people are found within 25 miles, display an appropriate message.

When a valid zip code is entered and people are found within 25 miles, display a report comprised of the following:

Report heading:
Display information about the location selected:

zip code

city

state

the total number of association members within 25 miles

Report Matches:
A table displaying information about the nearby people, with these columns:

Person

Provider number

City

State

Zip

The distance from the selected location. (in miles)

The table will be sorted by distance, closest on top.
Secondary sorting is by provider number

Implementation Details

Use the a6_locations and a6_people tables.

Find the one record in the a6_locations table that matches the entered zip code.
Use this information for your report heading, and to set the $lat and $log variables mentioned below.

Join the two tables together using locationID

To find locations that are within 25 miles, use this formula:
I have two variables, $lat and $log, representing the latitude and longitude from the record found in step 2.

My WHERE clause would be:
WHERE 69*(sqrt(pow($lat-latitude,2) + pow($log-longitude,2))) < 25

sqrt is the MySQL function for square root, and pow is the MySQL function for "to the power of".

Sample output This output contains the extra credit option Within 75 Miles Search 48197 City State Zip Code Members Within 75 Miles Person Provider City State zp Distance Cynthia Chung |33-84490 Ypsilanti M 48198 489 M 48191 727 Braden Coburn 33-79043 Willis Camden Santiago 33-45812 Ann Arbor MI 48108 8.16 Lincoln Mayer 33-52948 Ann Arbor MI 48106 Robert Stark 33-35270 Canton M 4818 1093 Brooklynn Walsh 33-92907 Northville MI 48167 15.88 Ann Arbor M 48103 1664 Amber Isaac Vincent Eubanks 33-12786 New Boston M 48164 16.90 Lauren Melendez 33-69243 Wayne 48184 16.95 M 48131 1732 Ashlynn Brantley 33-48434 Dundee Taylor Hamlin 33-92634 Carleton MI 48117 17.99 Trent Beck 33-30899 Carleton MI 48117 17.99 Allison Fuller 33-95354 Northville MI 48168 1827 Jeremy Richmond 33-65476 Novi 48374 19.37 D-15016 Meestand M 48185 1942 Landen Doe Ashton Abel 33-72042 Garden City MI 48135 20.84 Levi Eubanks 33-69989 Romulus M 48174 21.13 M 4812 22 Elias Trammell 33-44822 Livonia Aaden Shaffer 33-81523 Monroe Michelle Connell 33-14147 Flat Rock MI 48134 23.08 Lorenzo Poole 33-18606 Flat Rock MI 48134 23.08 Angelo Goodrich 33-99441 Tecumseh MI 49286 24.33 Evelyn Ullrich 33-93578 Farmington MI 48332 24.64

Explanation / Answer

1):

Creating the Service Layer:

First, I created a Movie class that represents a movie. This class does two things:

    Tells Entity Framework (EF) how to create the database tables to store the movie data.

    Tells Web API how to format the JSON payload.

namespace MoviesSPA.Models

{

public class Movie

{

    public int ID { get; set; }

    public string Title { get; set; }

    public int Year { get; set; }

    public string Genre { get; set; }

    public string Rating { get; set; }

}

}

step2:

I extended this API by adding a method that finds all the movies in a specified genre:

public class MoviesController : ApiController

{

public IQueryable<Movie> GetMoviesByGenre(string genre)

{

    return db.Movies.Where(m =>

      m.Genre.Equals(genre, StringComparison.OrdinalIgnoreCase));

}

step3

    UI triggers an AJAX request

    Update the HTML to display the response payload

    Handle AJAX errors

. For example, here’s some jQuery code that creates a list of movie titles:

$.getJSON(url)

.done(function (data) {

    // On success, "data" contains a list of movies

    var ul = $("<ul></ul>")

    $.each(data, function (key, item) {

      // Add a list item

      $('<li>', { text: item.Title }).appendTo(ul);

    });

$('#movies').html(ul);

});

step4:

<!DOCTYPE html>

<html>

<head>

<title>Movies SPA</title>

</head>

<body>

<ul>

    <li><a href="#"><!-- Genre --></a></li>

</ul>

<table>

    <thead>

      <tr><th>Title</th><th>Year</th><th>Rating</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><!-- Title --></td>

        <td><!-- Year --></td>

        <td><!-- Rating --></td></tr>

    </tbody>

</table>

<p><!-- Error message --></p>

<p>No records found.</p>

</body>

</html>

Related Questions

Navigate

• Browse (All)
• Browse S
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.