Bootcamp
Search…
3.ICE.3: Bigfoot POST

Introduction

Use forms and POST requests to save new Bigfoot sightings to our DB.

Base

Enable our users to save Bigfoot sightings to our DB. Work in the following order.

Create New Sighting Form

  1. 1.
    Create a new sighting form that sends a POST request to the server when users submit new sightings.
  2. 2.
    Start with just YEAR and SEASON fields so we don't overwhelm ourselves.
  3. 3.
    Confirm that the form produces requests with the appropriate data by inspecting the request in Chrome DevTools.

Create Test Requests using Curl and Thunder Client

  1. 1.
    Often we will want to test our server logic by sending requests independent of our frontends. This is so that we don't have to fill out forms and click several buttons every time we wish to send the same request.
  2. 2.
    We will learn 2 ways to send requests outside of our frontends: Curl and Thunder Client.

Curl

  1. 1.
    ​Curl is a command line utility for sending requests.
  2. 2.
    Send a POST request for new Bigfoot sightings using curl like the example below. -d is for --data, and -X is for --request, allowing us to specify a custom request method different from the default GET method.
    1
    curl -d "YEAR=1989&SEASON=spring" -X POST http://localhost:3004/sighting
    Copied!

Thunder Client

  1. 1.
    If you haven't already, install Thunder Client from 0.7: Thunder Client.
  2. 2.
    Use TC to create requests and test server responses with a visual interface.

Add Server Route to Handle Request

Pro Tip: Smaller Test Database
We may find that using the provided data.json with all its sightings slows us down when verifying our server logic. To simplify our workflow, consider using a new, smaller data.json for testing purposes. Once we've verified our app works, replace data.json with the original full database.
  1. 1.
    Create a route to listen for and handle our POST request from Express.
  2. 3.
    Before writing other request handler logic, verify our route is receiving the request correctly with console.log like the following.
    1
    console.log(request.body);
    2
    response.send('It worked!');
    Copied!
  3. 4.
    Use Curl or Thunder Client to confirm our server receives requests correctly.
  4. 5.
    Send the request again with different params to verify params change in request.body.
    1
    curl -d "YEAR=9999999&SEASON=pepper" -X POST http://localhost:3004/sighting
    Copied!
  5. 6.
    Once we've verified the mechanics of sending and receiving requests, update our request handler in Express to store new sighting data with jsonFileStorage.

Comfortable

Add Full Sighting Details

Add the other Bigfoot sighting attributes to our sighting creation form and save them to the DB.

Redirect After Form Submit

  1. 1.
    Typical app behaviour after entity creation is to redirect the user to a page showing the created entity, i.e. the sighting in our case.
  2. 2.
    Update our server to redirect the user to the correct page after they submit the sighting creation form.
    1. 1.
      Read how to use Express' redirect functionality here. Note that res.send and res.redirect are mutually exclusive, because both terminate the request-response cycle.
    2. 2.
      The redirect URL may look something like the following, where <INDEX> is the index of the newly-created sighting.
      1
      http://localhost:3004/sighting/<INDEX>
      Copied!

More Comfortable

Add Sort Forms for Sightings List

  1. 1.
    Create a form on the sightings list page that sends a GET request with the same sort query parameters from 3.ICE.1: Bigfoot. The generated request URLs might look like the following.
    1
    http://localhost:3004/year-sightings?sort=asc
    2
    http://localhost:3004/year-sightings?sort=desc
    Copied!
  2. 2.
    Use an HTML select tag in the form to allow the user to select "ascending" or "descending" sort params from the dropdown.
  3. 3.
    Add a similar dropdown for other sort options from 3.ICE.2: Bigfoot EJS. These might produce the following URLs.
    1
    http://localhost:3004/?sortBy=year
    2
    http://localhost:3004/?sortBy=state
    Copied!