Skip to main content

New

Lesson Objectives​

  1. Create a new route and page
  2. Add interactivity to your site with forms
  3. Redirect the user to another page

Next, we want to be able to create a new fruit. Let's review our 7 restful routes:

#ActionURLHTTP VerbEJS view filename
1Index/fruits/GETindex.ejs
2Show/fruits/:indexGETshow.ejs
3New/fruits/newGETnew.ejs
4Create/fruits/POSTnone
5Edit
6Update
7Destroy

Create a new route and page​

  1. Let's create a page that will allow us to create a new fruit using a form
  2. First, we'll need a route for displaying the page in our server.js file IMPORTANT: put this above your show route, so that the show route doesn't accidentally pick up a /fruits/new request
server.js
// put this above your show.ejs file
app.get("/fruits/new", (req, res) => {
  res.render("new.ejs");
});
  1. Now let's create the html for this page in our /views/new.ejs file
  • touch views/new.ejs
views/new.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>New Fruit</title>
  </head>
  <body>

  </body>
</html>
  1. Visit http://localhost:3000/fruits/new to see if it works

Add interactivity to your site with forms​

We can use forms to allow the user to enter their own data:

Breaking down the parts of a form

  • <form> - this encompasses all the elements in a form
    • action where should this form be sent (for us it will be the relative path /fruits)
    • method - this will be a POST route, which is in line for our 7 RESTful routes pattern for creating a new fruit
  • <label> - this is for visual formatting and web accessibility
    • for attribute that should match id in the companion input - again for web accessibility
  • <input /> - a self closing tag
    • type we'll use text, checkbox and submit for this project but there are many more like, number, password... you can always google for a more exhaustive list
    • name - this field MUST match your key value for your incoming data. This gets parsed as the key with body-parser
views/new.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>New Fruit</title>
  </head>
  <body>
    <h1>New Fruit Page</h1>
    <form action="/fruits" method="POST">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" />
      <label for="color">Color</label>
      <input type="text" name="color" id="color" />
      <label for="isReadyToEat">Is Ready to Eat</label>
      <input type="checkbox" name="readyToEat" id="isReadyToEat" />
      <input type="submit" value="Create Fruit" />
    </form>
  </body>
</html>

Polishing​

Right now, on successful POST, our data is just rendered as JSON. We should redirect it back to our index page or (bonus figure this out!) to the new show page of our new fruit.

server.js
// create
app.post("/fruits", (req, res) => {
  console.log(req.body);
  if (req.body.readyToEat === "on") {
    // if checked, req.body.readyToEat is set to 'on'
    req.body.readyToEat = true;
  } else {
    // if not checked, req.body.readyToEat is undefined
    req.body.readyToEat = false;
  }
  fruits.push(req.body);
  res.redirect("/fruits");
});

Put a link in the index page going to the new page

views/index.ejs
<nav>
    <a href="/fruits/new">Create a New Fruit</a>
</nav>