New

Lesson Objectives#

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

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

#	Action	URL	HTTP Verb	EJS view filename
1	Index	/fruits/	GET	index.ejs
2	Show	/fruits/:index	GET	show.ejs
3	New	/fruits/new	GET	new.ejs
4	Create	/fruits/	POST	none
5	Edit
6	Update
7	Destroy

Create a new route and page#

Let's create a page that will allow us to create a new fruit using a form
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

// put this above your show.ejs fileapp.get("/fruits/new", (req, res) => {  res.render("new.ejs");});

Now let's create the html for this page in our /views/new.ejs file

touch views/new.ejs

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>New Form</title>  </head>  <body>
  </body></html>

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

<!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.

// createapp.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

<nav>    <a href="/fruits/new">Create a New Fruit</a></nav>