![\"Cannot](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Node-Rotten-Potatoes@a0d98f1f6ed38aa9565f2fd77460c6c3f32df86f/P03-Creating-A-Review/assets/find-template.png\" "\\"\\"")
\n You might know the website Rotten Tomatoes it is a site where people can review movies. In this tutorial you are going to build Rotten Potatoes - your very own movie review website.
"},{"id":"T0E6OlNlY3Rpb24tODYxMw==","title":"Why is this important?","htmlContent":"By finishing this tutorial you will continue to deepen your knowledge of Node.js and Express.js as well as main the internet-wide paradigms of RESTful and Resourceful routing. You will be Creating, Reading, Updating, and Deleting (CRUD) a single resource (in this case, a Review). You will also learn how to use a MongoDB document-based database with Express.js.
By the end of this tutorial, you should be able to...
Software development these days is usually organized into Agile Sprints that are usually two weeks long. You'll notice evidence of this if you ever update your apps and read the update text. Sometimes it just says:
We ship a new version every two weeks...\n
That's because they are organizing their engineering in this standard agile way.
During each sprint developers pick a few User Stories to build, test, and ship to production. A User Story is one chunk of functionality. Engineers use the term User Story instead of \"feature\" to emphasize the user's experience in their design, development and testing. This emphasis on the user is called User Centered Development. Whenever you build anything on a team or by yourself, always use a Backlog of User Stories to organize and prioritize what you will build and when.
It is a good habit to build applications one resource at a time, adding all the Resourceful Routes for each resource before moving to the next.
So the user stories we can have for this review app will be as follows:
Once we have this single Review resource build, we can move onto making an associated Comment resource.
As we finish and test user stories we'll be committing to github 🐙.
"},{"id":"T0E6OlNlY3Rpb24tODYxNg==","title":"Getting Started - Node.JS and npm","htmlContent":"Now that we have some user stories, let's initialize an Express.js project so we can start on the first user story in the next chapter of this tutorial.
We're gonna jump right in to starting the new review and provide more context as new topics and concepts come up.
For reference for the rest of this chapter you can look at ExpressJS's Getting Started docs
Open your computer's terminal and then...
"},{"id":"T0E6OlNlY3Rpb24tODYxNw==","title":"Install Homebrew","htmlContent":"If you don't already have Homebrew installed, Mac's package manager, install that first and then install NodeJS. NodeJS's package manager npm is installed automatically when you install node, so we'll be able to install node modules from our command line once we install node.
\nWhenever you see the $ in a command, that means it should be called in your computer's terminal. Remember: Don't include the $ in your command.
Follow the install instructions for Homebrew. Once that's installed, use it to install node:
\n$ brew install node\n\n
Now that we have Node installed (and therefore have npm), now we can use npm to initialize a Node project using the command npm init which means \"npm initialize\".
Make a new directory called 'rotten-potatoes', then navigate into that directory, and finally initialized a new npm project in that directory. The npm init function will prompt you to define the configuration options that will be recorded in a file called package.json. Just hit enter for each option to select the default choice.
Use the terminal commands below to execute the above instructions:
\n$ mkdir rotten-potatoes\n$ cd rotten-potatoes\n$ npm init\n# (hit enter for each option it asks for to select the default choice)\n\n
Now if you open your project in Atom, you'll see the package.json which records the npm configuration you define upon initialization of the project.
Now we need to add just a \"Hello World\" rendered with Express.js and then add the template engine we'll be using called Handlebars. Express.js is template engine-agnostic, meaning we could use all sorts of templating engines. We're going to use Handlebars so we get two key features:
Our main file of our whole application we'll call app.js
\nFirst install Express.js and then create the main file using the \"touch\" command.
\n$ npm install express --save\n$ touch app.js\n\n
Now your project should have two files and a folder: app.js, package.json, and node_modules.
\nNow open your project's code base using the Atom text editor by typing:\nbash\n$ atom .\n
And let's add some standard Express.js code to app.js to show a hello world.
Add the following to app.js:
const express = require('express')\nconst app = express()\n\napp.get('/', (req, res) => {\n res.send('Hello World!')\n})\n\napp.listen(3000, () => {\n console.log('App listening on port 3000!')\n})\n\n
At this point, we could run our project with node app.js and we would see \"Hello World\". Remember that we still haven't added a template engine yet! We are just sending text back to the browser.
Let's install nodemon if you haven't already. Make sure you've installed nodemon and run your server by running nodemon. Nodemon just helps us by restarting our server every time we change our code.
Install nodemon and then have it start our app:
$ npm install nodemon -g\n$ nodemon app.js\n\n
In your terminal you should see \"App listening on port 3000!\" output in your terminal from the console.log inside of app.listen(3000 ...). Now on your browser at http://localhost:3000 you should see \"Hello World\".
Hello there code!
\nIf you want to start your server by just entering nodemon, then edit the main option in package.json file to app.js instead of index.js
Now, we are going to need to render HTML for our project, so we have to add a Templating Engine if we want extend Express.js to use HTML.
Let's add Handlebars.js as our templating engine so our Express.js server can render templates. This is called server-side HTML templates.
\nInstall Handlebars.js to your project using the express-handlebars node module.
$ npm install express-handlebars --save\n\n
Now that we've installed the package, we must require it or initialize it in your app and also, let's set the defaultLayout to main.
Add the following to app.js
// app.js\nvar exphbs = require('express-handlebars');\n\napp.engine('handlebars', exphbs({ defaultLayout: 'main' }));\napp.set('view engine', 'handlebars');\n\n
Now extend your root route ('/') to render home.handlebars.
// app.js\n\napp.get('/', (req, res) => {\n res.render('home', { msg: 'Handlebars are Cool!' });\n})\n\n
Refresh your browser now and read the error you get carefully. This error tells us that our application can't find a home.handlebars template yet (because we haven't made it!).
\nIt is useful to try to predict what error you might get as you are coding, and see if you get the error you expected. Errors can be a great way to check your work as you go and not go too far before checking your work.
\n\nCreate the views, layouts folders and main.handlebars and home.handlebars files.
$ mkdir views\n$ mkdir views/layouts\n$ touch views/layouts/main.handlebars\n\n
So now we have our views folder setup with a layout template called main. Great!
Now we'll add some boilerplate code to the main.handlebars layout template. Remember that we used Handlebars because it has a Layout Template. A layout template is a super-template that all other templates will inherit from. Having a layout template means we can put things that go on every page in just one file of code. These templates will be threaded in right at the {{{body}}}.
Add the following into views/layouts/main.handlebars:
<!-- views/layouts/main.handlebars -->\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Rotten Potatoes</title>\n</head>\n<body>\n\n {{{body}}}\n\n</body>\n</html>\n\n
Update views/home.handlebars to the following so that it will render the message from our root route:
<!-- home.handlebars -->\n<h1>{{msg}}</h1>\n\n
Now when you visit localhost:3000 you now should see \"Handlebars are Cool!\" inside an h1 tag.
Let's start by installing git if you don't already have it installed. And then initializing our project folder as a git repository. Then we can check the git status. We should see all our files as uncommitted and unstaged to commit.
Install git if you haven't, and then initialize it:
\n$ brew install git\n$ git init\n$ git status\n\n
Now we can stage all the files to commit, then commit them adding a commit message, and then double check our status. We should see we have no files to commit because we just committed them all.
Add and commit what we have so far:
\n$ git add .\n$ git commit -m 'init'\n$ git status\n\nNow go to github and create a public repository called Rotten-Potatoes-Tutorial.
Once you've done that, associate it as a remote for your local git project and then push to it:
\n$ git remote add origin GITHUB-REPO-URL\n$ git push origin main -u\n\n
Following our User Stories we are going to define a single Resource in this app called a Review so that we have something to CRUD:
A Resource is an abstract object that we use to organize data, code, and the features of our app. For example, a User resource we can keep track of logging in and out, email and passwords, and people's birthdays. In a blog, we might have an Article or Post resource where we would track the titles and bodies of articles and keep track of the code for publishing and sharing them.
Resources can also be related to each other. For example, articles may have comments; a building resource might have floors, and the floors may have units; a user might have friends (like in Facebook).
All resources have a few actions in common that are called Resourceful Routes.
Review this table of routes, as we'll be referencing it frequently in this tutorial, and you should be familiar with what each route does:
\n\n| URL | \nHTTP Verb | \nAction | \nWhat it Does | \n
|---|---|---|---|
| /reviews | \nGET | \nindex | \nSee all reviews | \n
| /reviews/new | \nGET | \nnew | \nSee new review form | \n
| /reviews | \nPOST | \ncreate | \nCreate a new review | \n
| /reviews/:id | \nGET | \nshow | \nSee one review | \n
| /reviews/:id/edit | \nGET | \nedit | \nSee an edit review form | \n
| /reviews/:id | \nPATCH/PUT | \nupdate | \nUpdate a review | \n
| /reviews/:id | \nDELETE | \ndestroy | \nDelete a review | \n
The table above shows the resources, routes, and actions that might be used on a photo sharing site like Instagram.
We're going to start with the index action and then show, and then we'll look at the create, edit, update, and delete.
"},{"id":"T0E6OlNlY3Rpb24tNzQ2Nw==","title":"Adding a /reviews Route","htmlContent":"Let's make a route to /reviews for the index action where we can see all the reviews that we've created. Eventually this will be on our root route, but we can start making it its own separate path.
Add the following to app.js:
// app.js\n\n// OUR MOCK ARRAY OF PROJECTS\nlet reviews = [\n { title: \"Great Review\", movieTitle: \"Batman II\" },\n { title: \"Awesome Movie\", movieTitle: \"Titanic\" }\n]\n\n// INDEX\napp.get('/reviews', (req, res) => {\n res.render('reviews-index', { reviews: reviews });\n})\n\n
Notice how we are making a mock array of reviews, and sending that in as an object into the template { reviews: reviews }. So the variable reviews will be available in our template.
If you refresh localhost:3000/reviews right now what do you see? An error! That's ok! Errors are our friends. What does the error say? I bet it says something like \"I can't find the template 'reviews-index'\". That makes sense because we haven't made it yet! It's ok to complete coding tasks in an order that throws a predictable error.
\nErrors often tell you the next step you need to take. In this case the error is telling you that the template does not exist. Let's make it!
\nSo to fix this error, let's add the template views/reviews-index.handlebars. We're going to use the Handlebars.js {{#each}} iterator to loop over our array of reviews and display each one's title.
Create the views/reviews-index.handlebars template and add the following to it:
<!-- reviews-index -->\n<h1>Reviews</h1>\n{{#each reviews}}\n <h2>{{this.title}}</h2>\n <small>{{this.movieTitle}}</small>\n{{/each}}\n\n
If you refresh localhost:3000/reviews now what do you see?
\nYou should see the mock reviews we wrote into code. Can you add to them or change them?
\nLet's update the /reviews route to be our root route. Just change the path from /reviews to / and delete or comment out the hello world root route we made before.
// app.js\n\n// INDEX\napp.get('/', (req, res) => {\n res.render('reviews-index', { reviews: reviews });\n})\n\n
Now navigate to localhost:3000. Do you see the mock reviews displayed?
$ git add .\n$ git commit -m 'Users can see all reviews'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tNzQ3MQ==","title":"Stretch Challenge","htmlContent":"Throughout Make School tutorials, you'll see sections designated by a green box with a trophy symbol. These are stretch challenges, and are provided for those who want to dive deeper on a topic, or get more practice. They are not required to complete the tutorial, but we encourage you to try them! More practice is always beneficial!
Can you make changes to your reviews array in app.js and see it reflected in your reviews-index template?
JSON or JavaScript Object Notation is a way to organize data to transmit it across the internet. It looks the same as a JavaScript object. It is made up of pairs of keys and values separated by colons (:) and surrounded by curly braces ({}). The only difference between a JavaScript object and a JSON object is the keys are wrapped in strings. For example:
// JS OBJECT\n{\n title: \"Great Review\"\n}\n\n
// JSON OBJECT\n{\n \"title\": \"Great Review\"\n}\n
A MongoDB database allows you to save JavaScript Objects or JSON just as they are as key value pairs. In a MongoDB each object is called a single document, hence why this sort of database is called a document-based database. These documents are collected into groups called collections. We will save our review documents in a collection called \"reviews\".
MongoDB gives each document a unique identification number with the key _id (with an underscore). We can use that _id attribute to retrieve the whole document later.
Working with MongoDB is like dropping clothes off at the drycleaners. They put a number on each piece of clothing and give you a ticket for each one. Later we can get that clothing back by matching our ticket to the right number.
If we created a new review like this to a MongoDB database:
// JS OBJECT\n{\n title: \"A New Review\"\n}\n
Then it will save something like this:
// MONGODB OBJECT\n{\n _id: \"507f1f77bcf86cd799439011\",\n title: \"A New Review\"\n}\n"},{"id":"T0E6OlNlY3Rpb24tNzI0NQ==","title":"Installing MongoDB","htmlContent":"
Our web server is going to save documents in MongoDB, but MongoDB itself has to run on our computer's operating system - it isn't an npm module we load into our review.
Let's install mongodb using homebrew!
\n$ brew update\n$ brew install mongodb\n\n
You also need to create a folder to save your databases on your computer.
\n$ mkdir -p /data/db\n\n
If you have problems with permissions with this folder you can \"change owner\" of the directory using this command:
\nsudo chown -R $USER /data/db\n\nNow you need to start the MongoDB daemon in order to use MongoDB:
\n$ mongod # SHORT FOR \"MONGO DAEMON\"\n\nOnce you turn on mongod you can close the terminal tab you used to do that.
The command mongod should start MongoDB and now it will be accessible from your web server. Let's configure express to write to MongoDB using the npm library mongoose.
Since our web server (Node.js) and our web framework (Express.js) are both written in JavaScript, our data is represented as JavaScript objects, but we have to save them as MongoDB documents. These look almost exactly the same, remember, but they are a tiny bit different. So we use a tool to map our JavaScript Objects to MongoDB documents. This tool is called an ODM or a Object Document Mapper. In Express.js, the most popular MongoDB ODM is called Mongoose.
First, install the mongoose npm module in your review.
\n$ npm install mongoose --save\n\n
Now initialize mongoose in app.js and connect to our database that we'll name after our app.
Add the following to app.js:
// app.js\n\n...\n\nconst mongoose = require('mongoose');\nmongoose.connect('mongodb://localhost/rotten-potatoes', { useNewUrlParser: true });\n\n...\n\n\n
Voila, you are connected to your database! But wait, you haven't written or read from it yet. Boring! In order to write and read data from your MongoDB database with Mongoose, you need to use what is called a Model - the \"M\" in MVC or the Model View Controller architecture of web server development.
"},{"id":"T0E6OlNlY3Rpb24tNzI0Nw==","title":"Making a Model","htmlContent":"The model is the Data Layer of your application. Models are where you put the code dedicated to interacting with the database. We'll be using mongoose our ODM to create a model. For now we'll put it in the app.js file and later we'll add it to a file at models/review.js.
Add the following to app.js:
// app.js\n\nconst mongoose = require('mongoose');\nmongoose.connect('mongodb://localhost/rotten-potatoes', { useNewUrlParser: true });\n\nconst Review = mongoose.model('Review', {\n title: String,\n movieTitle: String\n});\n\n
\nNotice how the model is capitalized and singular (e.g. Review, Article, User)? This is a universal pattern across many web frameworks to designate models. It looks sorta like a class, right? Classes and models are similar except classes save in recent memory, and models are stored on the database.
Now that you have a model, you can use it to query your database for all the reviews that might be there. At first there won't be any reviews, so we should just expect the query to return an empty array.
"},{"id":"T0E6OlNlY3Rpb24tNzI0OA==","title":"Our First MongoDB Query with a Mongoose Model","htmlContent":"Let's return to our root path that displays our reviews-index template.
First let's comment out our reviews variable that we hard coded. We're gonna use the database now instead with the model Review we instantiated.
Comment out the mock data and update the root route in app.js to the following:
// app.js\n\n// var reviews = [\n// { title: \"Great Review\" },\n// { title: \"Next Review\" }\n// ]\n\n// INDEX\napp.get('/', (req, res) => {\n Review.find()\n .then(reviews => {\n res.render('reviews-index', { reviews: reviews });\n })\n .catch(err => {\n console.log(err);\n })\n})\n\n
Let's review the above code block for the root route: a Mongoose model has many functions you can call on to query, create, and update documents in the MongoDB. We're used the .find() method, which returns a Promise. A Promise is an object that represents represents a value that will be provided in the future.
We call .then() and provide a function for the Promise to call when it resolves — when it finished whatever it was doing. In the case of this mongoose function, the promise resolves once the data comes back from the database.
We call .catch() and provide a function for the promise to call if the Promise is rejected. A Promise is rejected if it fails.
Reviews.find()\n .then(review => {\n // Code in here is executed when the promise resolves\n })\n .catch(err => {\n // executed if the promise is rejected\n });\n
Refresh browser at localhost:3000. What do you see?
\nYou shouldn't see anything! :D - that's because there are no reviews in your database right now.
\nIn the next lesson we will save a new review to our database. Onward!
"},{"id":"T0E6OlNlY3Rpb24tNzI0OQ==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Added MongoDB and Review model'\n$ git push\n\nRemember we are doing Resourceful and RESTful architecture to our MVC structured app. We've made some views in the views folder, instantiated a model, and put our controller logic (our routes) into the app.js file. As our model and controller logic grows we can move them into other files. For this app it is so simple, that we'll just leave all that logic in the app.js file.
As for the Resourceful Routes, we've created just one: the index action for our Review resource.
Remember the previous table that showed a hypothetical set of routes for service like Instagram?
Here it is again for review:
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| /reviews | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
| /reviews/:id/edit | \nGET | \nedit | \n
| /reviews/:id | \nPATCH/PUT | \nupdate | \n
| /reviews/:id | \nDELETE | \ndestroy | \n
What do the routes look like for the app your are currently building?
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
Now we want to create two more for the new action, and the create action.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
First things first - what does the user see?
The user will have to click \"New Review\" to create a new review. So let's put a link into the reviews-index template.
Add the below link to views/reviews-index.handlebars:
<!-- views/reviews-index.handlebars -->\n\n<h1>Reviews</h1>\n\n<a href=\"/reviews/new\">New Review</a>\n\n{{#each reviews}}\n <h2>{{this.title}}</h2>\n <small>{{this.movieTitle}}</small>\n{{/each}}\n\n
When you click this link you should see a friendly error reminding you that we haven't made the route for /reviews/new yet.
Remember that errors are not bad. They are like sign posts that tell you what to do next. So let's add our route to this new path.
"},{"id":"T0E6OlNlY3Rpb24tNjMzNQ==","title":"New Review Form","htmlContent":"Now we have to make a route to the /reviews/new path, and have it render a reviews-new template.
Make a /reviews/new route in app.js:
// app.js\n\n// NEW\napp.get('/reviews/new', (req, res) => {\n res.render('reviews-new', {});\n})\n\n
If we navigate our browsers to /reviews/new we'll get a friendly little error reminding us that we don't have a template called reviews-new.handlebars yet. So let's put that into our views folder.
Create views/reviews-new.handlebars to be the following:
<!-- views/reviews-new.handlebars -->\n\n<form method=\"POST\" action=\"/reviews\">\n <fieldset>\n <legend>New Review</legend>\n <!-- TITLE -->\n <p>\n <label for=\"title\">Title</label><br>\n <input type=\"text\" name=\"title\" />\n </p>\n <p>\n <label for=\"movieTitle\">Movie Title</label><br>\n <input type=\"text\" name=\"movieTitle\" />\n </p>\n </fieldset>\n\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Review</button>\n </p>\n\n</form>\n\n
\nNotice a few things about our form. The form tag has an HTML attribute called action that has a value equal to the path we want our form to submit its data to. /reviews is the route to our create action that we will add to our server in the next step.
Now if you navigate to /reviews/new you should see our new form looking great!
If you try to submit our form now, we see the form sends a POST request to the url /reviews, but we have not made a route that detects post requests to that path. So we see our friendly error:
cannot POST to /reviews\n
Our server has no route called /reviews that accepts a POST HTTP method. So let's make one!
First, you need to get ready to accept form data using an npm module called body-parser
Install body-parser:
$ npm install body-parser --save\n\n
Body Parser is a module that allows express to see form data that is coming in from a POST request.
Initialize the body-parser module in our app.js file.
// app.js\n...\n// INITIALIZE BODY-PARSER AND ADD IT TO APP\nconst bodyParser = require('body-parser');\n\n...\n// The following line must appear AFTER const app = express() and before your routes!\napp.use(bodyParser.urlencoded({ extended: true }));\n\n...\n// CREATE\napp.post('/reviews', (req, res) => {\n console.log(req.body);\n // res.render('reviews-new', {});\n})\n\n
body-parser gives us a new attribute of the req object called req.body and this will contain the form data. So when you submit your form you should see it log in in your terminal like this:
{ title: 'Creating a Review',\n description: 'a sample review description' }\n"},{"id":"T0E6OlNlY3Rpb24tNjMzNw==","title":"Using Form Data to Create a Review","htmlContent":"
So now let's use that form data to save a new review to our MongoDB database using our Review model. We'll use the method provided to us by Mongoose called create(). After we create the review, let's redirect to the root path to see our new review.
write the create route in app.js:
// app.js\n\n// CREATE\napp.post('/reviews', (req, res) => {\n Review.create(req.body).then((review) => {\n console.log(review);\n res.redirect('/');\n }).catch((err) => {\n console.log(err.message);\n })\n})\n\n
When you submit your form what do you see?
"},{"id":"T0E6OlNlY3Rpb24tNjMzOA==","title":"Adding a New Attribute to our Model","htmlContent":"The new action will be our form for making a new review. For now reviews just have two attributes: title and movieTitle. We can always add more! Let's add an attribute called description so we can write some more details about the review we've done.
First let's add what the user sees - the reviews-new.handlebars form input field.
Add a section for description in views/reviews-new.handlebars:
<!-- views/reviews-new.handlebars -->\n\n<form method=\"POST\" action=\"/reviews\">\n <fieldset>\n <legend>New Review</legend>\n <!-- TITLE -->\n <p>\n <label for=\"review-title\">Title</label><br>\n <input id=\"review-title\" type=\"text\" name=\"title\" />\n </p>\n\n <!-- MOVIE TITLE -->\n <p>\n <label for=\"movie-title\">Movie Title</label><br>\n <input id=\"movie-title\" type=\"text\" name=\"movieTitle\" />\n </p>\n\n <!-- DESCRIPTION -->\n <p>\n <label for=\"description-text\">Description</label><br>\n <textarea id=\"description-text\" name=\"description\" rows=\"10\" /></textarea>\n </p>\n </fieldset>\n\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Review</button>\n </p>\n\n</form>\n\n
Next, let's add the description attribute to the Review model.
Update the Review model in app.js:
// app.js\n\nconst Review = mongoose.model('Review', {\n title: String,\n description: String,\n movieTitle: String\n});\n\n
You can create any attributes you like for your model and use various data types such as: String, Number, and Date.
Can you resubmit the form? What happens now?
"},{"id":"T0E6OlNlY3Rpb24tNjMzOQ==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Users can create reviews'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tNjM0MA==","title":"Stretch Challenge: Adding a Rating Attribute","htmlContent":"Can you add a rating attribute that is a Number, and then use <select> and <option>'s elements to have a dropdown for users to select 0-5 a stars rating? You might have to google for an example to see how this works.
We are building out all the Resourceful Routes for our Review resource.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
We've already completed the index, new, and create actions. Now you will add a show action that will display a single resource via it's id.
Now let's setup the show action so we give each single review its own page and unique url path.
"},{"id":"T0E6OlNlY3Rpb24tNjM0Mg==","title":"Show One Review","htmlContent":"Remember always start with what the user will see and do. To create the show action, you will want to start by making a link to the review from our index action template. Your route has to follow the /reviews/:id structure.
MongoDB automatically creates an _id attribute on anything you save. So we can use that _id attribute for our :id in the route. This is called the Url or Request Parameter and we access it in Express using the req.params parameter inside a controller route.
Update views/reviews-index.handlebars to the following:
<!-- views/reviews-index.handlebars -->\n\n<h1>Reviews</h1>\n\n<a href=\"/reviews/new\">New Review</a>\n\n{{#each reviews}}\n <h2><a href=\"/reviews/{{this._id}}\">{{this.title}}</a></h2>\n <small>{{this.movieTitle}}</small>\n{{/each}}\n\n
What happens if you click on one of those links? A friendly error! Let's do what it says and make the route.
Add the /reviews/:id route to app.js:
// app.js\n\n...\n\n// SHOW\napp.get('/reviews/:id', (req, res) => {\n res.send('I\\'m a review')\n});\n\n
Now what happens if you go to that route?
"},{"id":"T0E6OlNlY3Rpb24tNjM0Mw==","title":"req.params & Review.findById()","htmlContent":"Ok time to add a template with an actual review object!
Update the /reviews/:id route in app.js to the following:
// app.js\n\n...\n\n// SHOW\napp.get('/reviews/:id', (req, res) => {\n Review.findById(req.params.id).then((review) => {\n res.render('reviews-show', { review: review })\n }).catch((err) => {\n console.log(err.message);\n })\n})\n\n
Now if we go to the route, we'll see the error that no template reviews-show is found. Great! Let's make it.
Create views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<h1>{{review.title}}</h1>\n<h2>{{review.movieTitle}}</h2>\n<p>{{review.description}}</p>\n\n
Now what do you see? All the links to reviews should work now!
"},{"id":"T0E6OlNlY3Rpb24tNjM0NA==","title":"Add a Back Link","htmlContent":"This is good, the show action is working, but there is a bit of a problem. Once you are on the show action page, you can't get back home.
Let's fix that by putting in a \"Back\" link in views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<a href=\"/\">Back to Home</a>\n\n<h1>{{review.title}}</h1>\n<h5>{{review.movieTitle}}</h5>\n<p>{{review.description}}</p>\n\n
That's better. What else could we do now that we have this show route?
"},{"id":"T0E6OlNlY3Rpb24tNjM0NQ==","title":"Update the Create Action's Redirect","htmlContent":"It makes sense from the user's perspective that after we create a new review, we should be automatically redirected to it, no?
Change the create route to redirect to the show path in app.js:
// CREATE\napp.post('/reviews', (req, res) => {\n Review.create(req.body).then((review) => {\n console.log(review)\n res.redirect(`/reviews/${review._id}`) // Redirect to reviews/:id\n }).catch((err) => {\n console.log(err.message)\n })\n})\n\n
$ git add .\n$ git commit -m 'Users can see single reviews'\n$ git push\n\nNow our user experience is getting very smooth, and our code is getting more and more complete. Onward!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUzNw==","slug":"editing-a-review","title":"Edit Route: Editing and Updating a Resource"},"previous":{"id":"T0E6OlBhZ2UtMTUzNw==","slug":"editing-a-review","title":"Edit Route: Editing and Updating a Resource"}},{"id":"T0E6OlBhZ2UtMTUzNw==","title":"Edit Route: Editing and Updating a Resource","slug":"editing-a-review","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjM0Nw==","title":"Edit Route: Editing and Updating a Resource","htmlContent":"Now we're checking off the seven Resourceful Routes. But we're not done until all of them are complete.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
| /reviews/:id/edit | \nGET | \nedit | \n
| /reviews/:id | \nPUT/PATCH | \nupdate | \n
Normally in a site like Rotten Potatoes, we would only want authors of reviews to have the permission to edit or delete a review. However, because we do not have authentication yet, we're just going to let anyone edit and delete reviews.
"},{"id":"T0E6OlNlY3Rpb24tNjM0OA==","title":"Edit Link","htmlContent":"We want people to be able to edit and update reviews, let's again start from the user's perspective. Edit and Update are similar to New and Create. First we need a link to the edit route that renders the reviews-edit, and then we submit that edit form to the update route which will redirect to the show action.
So let's make the edit link in views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<h1>{{review.title}}</h1>\n<h2>{{review.movieTitle}}</h2>\n<p>{{review.description}}</p>\n\n<p><a href=\"/reviews/{{review._id}}/edit\">Edit</a></p>\n\n
Ok now if we click that edit link, we'll see the route is not found. So let's make our edit action. The edit action is like the show action because we look up the review by its _id in the url parameter, but then we render the information in a template as editable form elements.
Add an edit route in app.js:
// app.js\n...\n// EDIT\napp.get('/reviews/:id/edit', (req, res) => {\n Review.findById(req.params.id, function(err, review) {\n res.render('reviews-edit', {review: review});\n })\n})\n\n
And of course we'll need that reviews-edit template. This template is a bit weird for three reasons:
PUT. This makes no sense, but nevertheless we must find a sensible work around to HTML's shortcomings. So what we'll do is add ?_method=PUT onto the end of the action, and then on the server we'll intercept this request and direct it towards our update action that takes a PUT HTTP request.value=\"\" - we are using the value html attribute to pass in the values of the review we are trying to edit.<textarea>{{}}</textarea> - the <textarea> HTML tag does not have a value attribute, so its contents must go between its open and close tags.Add a views/reviews-edit.handlebars template:
<!-- views/reviews-edit.handlebars -->\n\n<form method=\"POST\" action=\"/reviews/{{review._id}}?_method=PUT\">\n <fieldset>\n <legend>Edit Review</legend>\n <!-- TITLE -->\n <p>\n <label for=\"review-title\">Title</label><br>\n <input id=\"review-title\" type=\"text\" name=\"title\" value=\"{{review.title}}\"/>\n </p>\n\n <!-- MOVIE TITLE -->\n <p>\n <label for=\"movie-title\">Movie Title</label><br>\n <input id=\"movie-title\" type=\"text\" name=\"movieTitle\" value=\"{{review.movieTitle}}\" />\n </p>\n\n <!-- DESCRIPTION -->\n <p>\n <label for=\"review-description\">Description</label><br>\n <textarea id=\"review-description\" name=\"description\" rows=\"10\" />{{review.description}}</textarea>\n </p>\n </fieldset>\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Review</button>\n </p>\n</form>\n\n
Remember that you needed to intercept this POST request and make sure its processed as a PUT request so it goes to our update action. (this will work for our delete action later too!). We'll use the method-override middleware.
install method-override:\nbash\n$ npm install method-override --save\n
After importing the new package use require('method-override') to import it into your project.
Add the following near the top of app.js.
// app.js\nconst methodOverride = require('method-override')\n\n...\n\n
Now add methodOverride as middleware after const express = require('express') but before your routes in app.js:
\n...\n\nconst express = require('express')\nconst methodOverride = require('method-override')\n\n...\n\nconst app = express()\n\n...\n\n// override with POST having ?_method=DELETE or ?_method=PUT\napp.use(methodOverride('_method'))\n\n
Now you can create your update action and it will receive requests with a PUT method.
Add the update route to app.js:
// app.js\n...\n// UPDATE\napp.put('/reviews/:id', (req, res) => {\n Review.findByIdAndUpdate(req.params.id, req.body)\n .then(review => {\n res.redirect(`/reviews/${review._id}`)\n })\n .catch(err => {\n console.log(err.message)\n })\n})\n\n
Did you notice that the code of our reviews-new and reviews-edit have a lot of similarities? Pretty much everything inside the form tag is the same. Let's use a Partial Template to pull that code out into its own template.
First make a folder called partials inside the views folder. Now in that partials folder create the reviews-form.handlebars.
<!-- views/partials/reviews-form.handlebars -->\n\n<fieldset>\n <legend>{{title}}</legend>\n <!-- TITLE -->\n <p>\n <label for=\"review-title\">Title</label><br>\n <input id=\"review-title\" type=\"text\" name=\"title\" value=\"{{review.title}}\"/>\n </p>\n\n <!-- MOVIE TITLE -->\n <p>\n <label for=\"movie-title\">Movie Title</label><br>\n <input id=\"movie-title\" type=\"text\" name=\"movieTitle\" value=\"{{review.movieTitle}}\" />\n </p>\n\n <!-- DESCRIPTION -->\n <p>\n <label for=\"review-description\">Description</label><br>\n <textarea id=\"review-description\" name=\"description\" rows=\"10\" />{{review.description}}</textarea>\n </p>\n</fieldset>\n\n
And now we can use this partial to replace that information in both our new and edit templates.
Update views/reviews-new.handlebars and views/reviews-edit.handlebars to use the partial:
<!-- views/reviews-new.handlebars -->\n\n<form method=\"POST\" action=\"/reviews\">\n {{> reviews-form}}\n\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Review</button>\n </p>\n\n</form>\n\n
<!-- views/reviews-edit.handlebars -->\n\n<form method=\"POST\" action=\"/reviews/{{review._id}}?_method=PUT\">\n {{> reviews-form}}\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Review</button>\n </p>\n</form>\n\n
Finally, notice how we included a {{title}} in views/partials/reviews-form.handlebars. We need to ensure that gets populated correctly based on whether a user is editing a review or creating a new one.
Update your new and edit routes in app.js to include the title parameter:
// app.js\n...\n\n// NEW\napp.get('/reviews/new', (req, res) => {\n res.render('reviews-new', {title: \"New Review\"});\n})\n\n...\n\n// EDIT\napp.get('/reviews/:id/edit', (req, res) => {\n Review.findById(req.params.id, function(err, review) {\n res.render('reviews-edit', {review: review, title: \"Edit Review\"});\n })\n})\n\n
Triumph! DRY code. (Don't Repeat Yourself)
"},{"id":"T0E6OlNlY3Rpb24tNjM1MQ==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Users can edit and update reviews'\n$ git push\n\nSometimes people might start making a resource and then want to cancel. Can you add a \"Cancel\" button next to the \"Save Review\" button? What will it do? Where will it link to?
\nSo we've come to the end of our RESTful and Resourceful routes. Only one to go: Delete.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
| /reviews/:id/edit | \nGET | \nedit | \n
| /reviews/:id | \nPUT/PATCH | \nupdate | \n
| /reviews/:id | \nDELETE | \nDestroy | \n
As always, we start with what the users sees and does. So let's make a link to delete a review.
We can't set an <a> tag's method (it is always GET) so we are going to use a form to submit a DELETE request to our delete action path.
Add the delete button to views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<h1>{{review.title}}</h1>\n<h2>{{review.movieTitle}}</h2>\n<p>{{review.description}}</p>\n<p><a href=\"/reviews/{{review._id}}/edit\">Edit</a></p>\n<!-- Delete button -->\n<p><form method=\"POST\" action=\"/reviews/{{review._id}}?_method=DELETE\">\n <button type=\"submit\">Delete</button>\n</form></p>\n\n
Now we need a delete action route. After deleting the review, it should redirect to the home page (reviews-index).
Create the delete route in app.js:
// app.js\n...\n// DELETE\napp.delete('/reviews/:id', function (req, res) {\n console.log(\"DELETE review\")\n Review.findByIdAndRemove(req.params.id).then((review) => {\n res.redirect('/');\n }).catch((err) => {\n console.log(err.message);\n })\n})\n\n
We did it! All Resourceful Routes for the Review resource are complete!
$ git add .\n$ git commit -m 'Users can destroy reviews'\n$ git push\n\nBut there is still one problem. All the review routes are all hanging out in the app.js file. This breaks the Separation of Concerns principle of clean and Good Smelling code. Let's pull out these routes into their own reviews Controller.
First make a folder called controllers, now add the file reviews.js to this folder.
Our app.js file is not aware that there is a controllers folder or a reviews controller yet. We have to connect them. There are basically two ways to connect this controller to our app. Either we use the Express Router or JavaScript's modules system. In this case we are going to use the JavaScript modules system both to introduce it and to avoid getting into the extra and, at this stage, unnecessary details of the Express Router.
require can let you connect any file to any other in JavaScript. All you have to do is put module.exports into one file, and then require(name-of-file) in the other. Let's look at an example in our controller.
Add the following to controllers/reviews.js
//reviews.js\n\nmodule.exports = function(app, Review) {\n\n app.get('/', (req, res) => {\n Review.find()\n .then(reviews => {\n res.render('reviews-index', {reviews: reviews});\n })\n .catch(err => {\n console.log(err);\n });\n });\n\n}\n\n
Now let's import our reviews.js file into our app.js file. We'll pass the app and our model Review into the file as well.
Update app.js to require controllers/reviews.js:
// app.js\n\nconst reviews = require('./controllers/reviews')(app, Review);\n\n
Test that your updates worked!
Now migrate the rest of the reviews routes into the reviews.js controller file.
By the end of this chapter we'll have a views, controllers, and a models folders, finally getting a clean app.js file and the proper separation of concerns!
Let's move the Review model from the app.js file into the models/review.js file.
First make the models folder, and then create the review.js file inside. Note that model files are singular, while controller files are plural.
Inside the review.js, we have to have mongoose initialized, and the Review code. At the end we want to export it so we can require the model in other files, like our controller.
Update models/review.js to the following:
// models/review.js\n\nconst mongoose = require('mongoose');\n\nconst Review = mongoose.model('Review', {\n title: String,\n description: String,\n movieTitle: String\n});\n\nmodule.exports = Review;\n\n
Instead of including our model Review through the require statement in our app.js, let's put it into the controller via its own require statement. Now app.js only needs to keep track of the controllers!
Update app.js to only keep track of the controllers:
// app.js\n\nconst reviews = require('./controllers/reviews')(app);\n\n
Update controllers/reviews.js to require the models it needs:
// controllers/reviews.js\n\nconst Review = require('../models/review');\nmodule.exports = function(app) {\n\n...\n\n}\n\n
$ git add .\n$ git commit -m 'Addressed separation of concerns'\n$ git push\n\nSo now it is refactored and all working It ain't pretty though... more on that in a bit, but first we should make sure we know how to test what we got!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUzOQ==","slug":"adding-tests","title":"Adding Tests"},"previous":{"id":"T0E6OlBhZ2UtMTUzOQ==","slug":"adding-tests","title":"Adding Tests"}},{"id":"T0E6OlBhZ2UtMTUzOQ==","title":"Adding Tests","slug":"adding-tests","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjM2MA==","title":"Adding Tests","htmlContent":"Automated testing is an important part of any professional coder's life. Writing automated tests slow you down to start, but then they speed you way up as your project gets more complex and large.
Node.js is great for testing because it has a lot of good Test Runners (We'll be using Mocha) and Assertion Libraries (We'll be using Chai) and tests run really quickly if you build them right.
"},{"id":"T0E6OlNlY3Rpb24tNjM2MQ==","title":"What is Automated Testing?","htmlContent":"Automated testing is code that tests if your code is working. The opposite is Manual Testing.
No matter what you have to test your code and you have to test that your new code didn't break older code. If you have automated tests set up, then you can just run the tests for old code to make sure that your new code didn't break any old code. This means that old tests become Regression Tests, and act as a sort of double check that new code didn't break old stuff.
So the tests you write today for your new feature, in the future become regression tests to make sure your feature didn't break when someone wrote something.
"},{"id":"T0E6OlNlY3Rpb24tNjM2Mg==","title":"Adding A Test Runner and Assertion Library","htmlContent":"We're going to use a few tools to test with, let's install them all up front:
\n$ npm install mocha chai chai-http --save-dev\n\n
\nWe use --save-dev when we want to save dependencies that will not be needed for pushing to production. In this case, we don't need our testing dependencies in production, so we use --save-dev instead of --save.
Let's run through a quick overview of what we just installed:
mocha is our Test Runner - it actually runs our test code.chai is our Assertion Library - it gives us syntactic sugar to make writing test intuitive.chai-http is a Helper Test Library - it gives us methods to make http request inside our tests very easily.We're going to use mocha to write a test for the index route of our Review resource.
We need to create a folder called test and inside that folder a file called test-reviews.js in there put our test code in
Next we'll need to export the app variable from our app.js file to include it in our tests.
// app.js\n\n...\n\nmodule.exports = app;\n\n
Now we can add our test file!
Add the following to test/test-reviews.js:
// test-reviews.js\n\nconst chai = require('chai');\nconst chaiHttp = require('chai-http');\nconst server = require('../app');\nconst should = chai.should();\nconst Review = require('../models/review');\n\nchai.use(chaiHttp);\n\ndescribe('Reviews', () => {\n\n // TEST INDEX\n it('should index ALL reviews on / GET', (done) => {\n chai.request(server)\n .get('/')\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html;\n done();\n });\n });\n\n // TEST NEW\n // TEST CREATE\n // TEST SHOW\n // TEST EDIT\n // TEST UPDATE\n // TEST DELETE\n});\n\n
Now go to your terminal inside your project directory and type mocha to run your tests.
$ mocha\n\n
Mocha will always look inside the /test directory and run all the files inside.
Lets look line by line at how this test works:
\n// tell mocha you want to test Reviews (this string is taco)\ndescribe('Reviews', () => {\n // make taco name for the test\n it('should index ALL reviews on / GET', (done) => {\n // use chai-http to make a request to your server\n chai.request(server)\n // send a GET request to root route\n .get('/')\n // wait for response\n .end((err, res) => {\n // check that the response status is = 200 (success)\n res.should.have.status(200);\n // check that the response is a type html\n res.should.be.html;\n // end this test and move onto the next.\n done();\n });\n });\n});\n"},{"id":"T0E6OlNlY3Rpb24tNjM2NA==","title":"Red-Green-Refactor","htmlContent":"
Before moving on, we should double check to see if we can break the test and make it return false.
Set the test to expect the response to have a status of 404 and rerun your tests. Did it turn \"Red\"?
What was the error message?
Now put it back to 200 and see if it is green again.
If you don't do this step with tests, you might just be testing an Identity like that 4 = 4. That's not a very good test!
Now that we have the Index route, lets use the same sort of testing logic for the New route.
Add the following test to tests/test-reviews.js:
// test-reviews.js\n // TEST NEW\n it('should display new form on /reviews/new GET', (done) => {\n chai.request(server)\n .get(`/reviews/new`)\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n\n
Now run your tests!
"},{"id":"T0E6OlNlY3Rpb24tNjM2Ng==","title":"Next Test: Show & Edit","htmlContent":"To test the rest of the tests we'll need sample test data in our database. We can put test data in pretty easily, but we'll also have to send a dump truck around after testing to remove the new data we've created, otherwise every time we run our tests, we'll be adding documents to our database.
Let's add a sampleReview to the top of tests/test-reviews.js:
\nconst chai = require('chai');\nconst chaiHttp = require('chai-http');\nconst server = require('../app');\nconst should = chai.should();\nconst Review = require('../models/review');\n\nconst sampleReview = {\n \"title\": \"Super Sweet Review\",\n \"movie-title\": \"La La Land\",\n \"description\": \"A great review of a lovely movie.\"\n}\n\n
And now we can use this sample review to generate a new review in our DB and then create it, visit it, edit it, update it, and delete it. Let's start just by visiting its show route.
Add a show test to tests/test-reviews.js:
// test-reviews.js\n\n // TEST SHOW\n it('should show a SINGLE review on /reviews/<id> GET', (done) => {\n var review = new Review(sampleReview);\n review.save((err, data) => {\n chai.request(server)\n .get(`/reviews/${data._id}`)\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n });\n\n
Now if we run this each time this route will create a new review during the show rout test. So we need the dump truck to come around and delete all our sample reviews after each test. We'll use an after() test hook that mocha provides for exactly this use case.
Add in a clean up after() to tests/test-reviews.js:
describe('Reviews', () => {\n\n after(() => {\n Review.deleteMany({title: 'Super Sweet Review'}).exec((err, reviews) => {\n console.log(reviews)\n reviews.remove();\n })\n });\n\n ...\n\n});\n\n
The edit route is the same. Add that now:
\n// TEST EDIT\nit('should edit a SINGLE review on /reviews/<id>/edit GET', (done) => {\nvar review = new Review(sampleReview);\n review.save((err, data) => {\n chai.request(server)\n .get(`/reviews/${data._id}/edit`)\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n});\n\n
Now we'll do the create route test. We'll send in the sampleReview as JSON to the route and check that the response is a 200 status.
Add a create test to tests/test-reviews.js:
// TEST CREATE\n it('should create a SINGLE review on /reviews POST', (done) => {\n chai.request(server)\n .post('/reviews')\n .send(sampleReview)\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n\n
Run your tests again! Your line of green dots should be getting longer. Can you make this create route test fail and turn red and then turn it back to green?
"},{"id":"T0E6OlNlY3Rpb24tNjM2OA==","title":"Next Test: Update","htmlContent":"For update we have to create the sample review, then send in a PUT message with a change and see if it response with a 200.
Add an update test to tests/test-reviews.js:
// TEST UPDATE\n it('should update a SINGLE review on /reviews/<id> PUT', (done) => {\n var review = new Review(sampleReview);\n review.save((err, data) => {\n chai.request(server)\n .put(`/reviews/${data._id}?_method=PUT`)\n .send({'title': 'Updating the title'})\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n });\n\n
Finally we have to see if we can test deleting a review. We'll create the sample review, then send in a delete message to see if we can destroy it and get a 200 status back.
Add a delete test to tests/test-reviews.js:
// TEST DELETE\n it('should delete a SINGLE review on /reviews/<id> DELETE', (done) => {\n var review = new Review(sampleReview);\n review.save((err, data) => {\n chai.request(server)\n .delete(`/reviews/${data._id}?_method=DELETE`)\n .end((err, res) => {\n res.should.have.status(200);\n res.should.be.html\n done();\n });\n });\n });\n});\n\n
Good work adding your Resourceful Routes test sweet. Your product currently has 100% Test Coverage because each route has a corresponding test.
Now commit these changes and push them to github:
$ git add .\n$ git commit -m 'Added tests'\n$ git push\n\nNow that you have the user's experience mapped out and the functionality built, you can style your pages using Twitter's project Bootstrap. Bootstrap is the web's most popular CSS Framework.
The main elements we will be using are the...
There is a lot more that you can explore and even extend and modify.
"},{"id":"T0E6OlNlY3Rpb24tODYyNA==","title":"Adding Bootstrap with a Content Delivery Network (CDN)","htmlContent":"It is easy to get started with bootstrap quickly by using the CDN links bootstrap maintains.
We'll add the <link> to bootstrap's css in our <head> tag in the main.handlebars file. And although we aren't going to use any of bootstrap's JavaScript's components, for completeness's sake, we'll put the JavaScript <script> tag just before the closing </body> tag.
Add the bootstrap links to views/layouts/main.handlebars:
<!-- views/layouts/main.handlebars -->\n\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Rotten Potatoes</title>\n <!-- Latest compiled and minified CSS -->\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n</head>\n<body>\n\n {{{body}}}\n\n <!-- Latest compiled and minified JavaScript -->\n <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n</body>\n</html>\n\n
Just after doing that, refresh your page. The typography and layout should change just a tiny bit if it worked.
"},{"id":"T0E6OlNlY3Rpb24tODYyNQ==","title":"Adding a Navbar","htmlContent":"Add the most common navigational component - a top navbar. We'll have it have a button to create a new review so that anywhere a user navigates to they can always make a new review.
Make a new partial. Create a new file navbar.handlebars in the views/partials directory.
<!-- views/partials/navbar.handlebars -->\n\n<nav class=\"navbar navbar-default\">\n <div class=\"container-fluid\">\n <div class=\"navbar-header\">\n <a class=\"navbar-brand\" href=\"/\">\n Rotten Potatoes\n </a>\n </div>\n <div class=\"pull-right\">\n <a href=\"/reviews/new\" class=\"btn btn-default navbar-btn\">New Review</a>\n </div>\n </div>\n</nav>\n\n
Include this in views/layouts/main.handlebars
...\n<body>\n\n {{> navbar}}\n\n {{{body}}}\n ...\n\n
People argue about the usefulness of some of the more complex parts of Bootstrap, but everyone agrees that to build websites you need a grid system. Bootstrap ships with a 12-column grid. Meaning you can break up the whole page, or any element into 12 columns and that way construct an appealing layout.
We'll start by wrapping the {{{body}}} with a container class. in views/layouts/main.handlebars:
<!-- views/layouts/main.handlebars -->\n...\n<body>\n ...\n <div class=\"container\">\n {{{body}}}\n </div>\n...\n\n
Refresh and see that this gives us some satisfying gutters on the sides of the page. If we change the screen size by resizing the window, we'll see that these gutters vanish when our screen shrinks beyond a certain size. This is because Bootstrap's grid system is Responsive meaning it changes depending on the size of the screen that is being shown on. Pretty neat!
"},{"id":"T0E6OlNlY3Rpb24tODYyNw==","title":"Adding a Responsive Grid with Cards","htmlContent":"Now that you have a container, style your reviews-index template to have each review take up 1/4 of the container. First wrap the {{#each}} block in a row class and then wrap each review in its own col-sm-3 class.
col-sm-3 means: On screens larger than a tablet, have this element take up three cells out of twelve that are the whole width of its parent element. Since 3/12 = 1/4 this will give us each review taking up one quarter of the container's width.
Add the class to the following div in views/reviews-index.handlebars:
<!-- views/reviews-index.handlebars -->\n\n<h1>Reviews</h1>\n\n<div class=\"row\">\n {{#each reviews}}\n <div class=\"col-md-3\">\n <h2><a href=\"/reviews/{{this._id}}\">{{this.title}}</a></h2>\n <small>{{this.movieTitle}}</small>\n </div>\n {{/each}}\n</div>\n\n
Can you wrap each of the reviews in a card class? Use the Cards Documentation for help
The show template should make the text relatively narrow, because people don't like reading all the way across the screen. Use an offset grid class to push a column over to the right.
Add the following classes to views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<a href=\"/\">Back to Home</a>\n<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <h1>{{review.title}}</h1>\n <h2>{{review.movieTitle}}</h2>\n <p>{{review.description}}</p>\n <p><a href=\"/reviews/{{review._id}}/edit\">Edit</a></p>\n <p><form method=\"POST\" action=\"/reviews/{{review._id}}?_method=DELETE\">\n <button class=\"btn btn-primary\" type=\"submit\">Delete</button>\n </form></p>\n </div>\n</div>\n\n
Now let's add some bootstrap styling to views/reviews-new.handlebars:
<!-- views/reviews-new.handlebars -->\n\n<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <form method=\"POST\" action=\"/reviews\">\n {{> reviews-form}}\n <!-- BUTTON -->\n <div class=\"form-group\">\n <button class=\"btn btn-primary\" type=\"submit\">Save Review</button>\n </div>\n </form>\n </div>\n</div>\n\n
Make the same changes to views/reviews-edit.handlebars:
<!-- views/reviews-edit.handlebars -->\n\n<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <form method=\"POST\" action=\"/reviews/{{review._id}}?_method=PUT\">\n {{> reviews-form}}\n <!-- BUTTON -->\n <div class=\"form-group\">\n <button class=\"btn btn-primary\" type=\"submit\">Save Review</button>\n </div>\n </form>\n </div>\n</div>\n\n
Now add some Bootstrap classes to the reviews-form.handlebars partial. These class will make your form and form elements look better. Notice that each form element is wrapped in a div with the class form-group and form elements, like input get the class form-control.
Update views/partials/reviews-form.handlebars to the following:
\n...\n\n<fieldset>\n <legend>Edit Review</legend>\n <!-- TITLE -->\n <div class=\"form-group\">\n <label for=\"review-title\">Title</label><br>\n <input class=\"form-control\" id=\"review-title\" type=\"text\" name=\"title\" value=\"{{review.title}}\"/>\n </div>\n\n <!-- MOVIE TITLE -->\n <div class=\"form-group\">\n <label for=\"movie-title\">Movie Title</label><br>\n <input class=\"form-control\" id=\"movie-title\" type=\"text\" name=\"movieTitle\" value=\"{{review.movieTitle}}\" />\n </div>\n\n <!-- DESCRIPTION -->\n <div class=\"form-group\">\n <label for=\"review-description\">Description</label><br>\n <textarea class=\"form-control\" id=\"review-description\" name=\"description\" rows=\"10\" />{{review.description}}</textarea>\n </div>\n</fieldset>\n\n
Looking pretty good now, huh?
"},{"id":"T0E6OlNlY3Rpb24tODYzMA==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Added vanilla bootstrap'\n$ git push\n\nAlmost done! Let's finish it off.
"}]},"next":{"id":"T0E6OlBhZ2UtMTU0MQ==","slug":"push-to-heroku","title":"Push to Production with Heroku"},"previous":{"id":"T0E6OlBhZ2UtMTU0MQ==","slug":"push-to-heroku","title":"Push to Production with Heroku"}},{"id":"T0E6OlBhZ2UtMTU0MQ==","title":"Push to Production with Heroku","slug":"push-to-heroku","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjM4MA==","title":"Push to Production with Heroku","htmlContent":"Time to ship some code! Since we've built and styled our Rotten Potatoes app, let's show it to the world by putting it online. We'll use a service called Heroku that is free, but it does require a credit card to be on file.
"},{"id":"T0E6OlNlY3Rpb24tNjM4MQ==","title":"Sign Up For and Install Heroku","htmlContent":"First you need to create a Heroku account at heroku.com.
\n\nThen you will need to add the Heroku Command Line Interface (CLI) to your bash terminal so we can interact with the Heroku service via the terminal and git. Follow these instructions to install the Heroku CLI.
\nBefore we push to Heroku, we'll have to create a special file, called Procfile, that lets Heroku know how to run your website.
Create and open your new Procfile using the following commands:
$ touch Procfile\n$ atom Procfile\n\n
Next, we need to insert the command to run our application on Heroku.
Paste the following into your new Procfile and save:
web: node app.js\n\n
Great! When we push to Heroku, it'll know how to run our application. Keep going!
"},{"id":"T0E6OlNlY3Rpb24tNjM4Mw==","title":"Pushing to Heroku using Github","htmlContent":"Let's start by committing what we have so far so that we have that Procfile
Commit the Procfile
$ git add .\n$ git commit -m 'adding Procfile'\n\nNow let's use the heroku command to create a heroku app and name it with \"rotten-potatoes\" and then our initials. So someone named Samantha Bee would be \"rotten-potatoes-sb\". This heroku create command will add our heroku app as a git remote repository that we will be able to push to using the git command git push. We can see our remote repos by using the command git remote -v.
Create your heroku app, replacing MY-INITIALS with your initials
$ heroku create rotten-potatoes-MY-INITIALS\n$ git remote -v\n\n
Alright, now we can push our code to heroku and open our new website!
Push to Heroku!
\n$ git push heroku main\n$ heroku open\n\n
You are probably seeing an error screen right now! Bit of a let down maybe. But also a good lesson - Things never work the first time. Let's debug our issues.
"},{"id":"T0E6OlNlY3Rpb24tNjM4NA==","title":"Scale Your Heroku application","htmlContent":"We need to run an additional command that tells Heroku to assign a free worker to our deployment in order to run your website. In Heroku syntax, that means executing the ps:scale command, like so:
Run the ps:scale command:
$ heroku ps:scale web=1\n\n
Just like heroku create, you only need to execute this command once per project!
When ever you have an error or problem with Heroku, you can see the logs by running heroku logs.
$ heroku logs\n
If you want to see the logs to continually you can add --tail to this command.
$ heroku logs --tail\n
What error are we seeing in heroku now? What do we need to do?
You might need to add a \"start\" command to your package.json file:
// package.json\n\n\"scripts\": {\n \"start\": \"node app.js\"\n}\n\n
It looks like the error is that we cannot connect to our mongodb database. That's because it is looking at the 'mongodb://localhost/rotten-potatoes' URI, but that is on our local computer and heroku, which is remote, doesn't have access to that. So we have to add a mongodb heroku add-on called mLabs.
Add mLabs:
$ heroku addons:create mongolab:sandbox\n\n
Then we have to point to this production mongodb database URI in our app.js file.
Update app.js to point to the mongodb URI if it exists:
// app.js\n\nvar mongoose = require('mongoose');\nmongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/rotten-potatoes', { useNewUrlParser: true });\n\n
Now if we try to open our heroku app via the terminal using heroku open, what happens?
Another error! This is a weird one. First it just hangs for a while, then times out, and then the error says \"cannot bind on $PORT\". This is because Heroku does not use port 3000, it uses another port available in production at process.env.PORT, just like your mongoDB URI.
Let's fix that by setting the port also with the process.env. Then we have to point to this production mongodb database URI in our app.js file.
// app.js\n\nconst port = process.env.PORT || 3000;\napp.listen(port);\n\n
Now if we try to open our heroku app what happens?
"},{"id":"T0E6OlNlY3Rpb24tNjM4OA==","title":"WooHoo!","htmlContent":"Awwww yeah - you did it! You made your first RESTful and Resourceful app using Node.js, Express.js, and MongoDB!
"}]},"next":{"id":"T0E6OlBhZ2UtMTU0Mg==","slug":"adding-comments","title":"Adding Comments (Form)"},"previous":{"id":"T0E6OlBhZ2UtMTU0Mg==","slug":"adding-comments","title":"Adding Comments (Form)"}},{"id":"T0E6OlBhZ2UtMTU0Mg==","title":"Adding Comments (Form)","slug":"adding-comments","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODYzMQ==","title":"Adding Comments (Form)","htmlContent":"At this point you should have a functioning site that creates and saves Reviews to a database! This system manages a single resource, which we've called a Review. In this section you will add a new resource which will represent comments that visitors can add to Reviews.
Comments will be treated like Reviews: they will have a model that defines them, and they will be stored as documents in the database.
"},{"id":"T0E6OlNlY3Rpb24tODYzMg==","title":"Create a partial for the comment form","htmlContent":"Follow the same approach used in the tutorial, start with what users will see. Users reading a Review may want to write a comment and read comments posted by other users. Adding comments will require a form to enter the comment.
Putting the comment form in a partial will make your code modular and help keep it organized.
Make a new file views/partials/comment-form.handlebars:
<!-- views/partials/comment-form.handlebars -->\n\n<form>\n <fieldset>\n <legend>Add a Comment</legend>\n <!-- TITLE -->\n <div class=\"form-group\">\n <label for=\"comment-title\">Title</label><br>\n <input class=\"form-control\"\n id=\"comment-title\"\n type=\"text\"\n name=\"title\"\n placeholder=\"Title\"/>\n </div>\n\n <!-- DESCRIPTION -->\n <div class=\"form-group\">\n <label for=\"comment-content\">Description</label><br>\n <textarea class=\"form-control\"\n id=\"comment-content\"\n name=\"content\"\n rows=\"10\"\n placeholder=\"Your comment...\"/></textarea>\n </div>\n </fieldset>\n\n <!-- BUTTON -->\n <div class=\"form-group\">\n <button class=\"btn btn-primary\" type=\"submit\">Save Comment</button>\n </div>\n</form>\n\n
Notice you used the same class names and markup used in the Reviews Form. This form only has three form elements:
Add the partial to the bottom of views/review-show.handlebars.
<!-- views/reviews-show.handlebars -->\n\n<a href=\"/\">Back to Home</a>\n<div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <h1>{{review.title}}</h1>\n <h2>{{review.movieTitle}}</h2>\n <p>{{review.description}}</p>\n <p><a href=\"/reviews/{{review._id}}/edit\">Edit</a></p>\n <p><form method=\"POST\" action=\"/reviews/{{review._id}}?_method=DELETE\">\n <button class=\"btn btn-primary\" type=\"submit\">Delete</button>\n </form></p>\n\n <hr>\n\n <!-- Comment form -->\n {{> comment-form}}\n\n </div>\n</div>\n\n
For now the form action is empty. You should be able to see the form but, nothing will happen if you click submit. We need to add a route for that! We'll do that next, but let's commit what we have so far.
"},{"id":"T0E6OlNlY3Rpb24tODYzNA==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Comment form added'\n$ git push\n\nNow it's time to add a route to handle comments.
"},{"id":"T0E6OlNlY3Rpb24tNjM5NQ==","title":"Creating Comments","htmlContent":"You need to define a route. Here is the list of the current routes with a new one added for the comment form at the bottom.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
| /reviews/:id/edit | \nGET | \nedit | \n
| /reviews/:id | \nPUT/PATCH | \nupdate | \n
| /reviews/:id | \nDELETE | \nDestroy | \n
| /reviews/comments | \nPOST | \ncreate | \n
The Comment route uses the POST method since creating a Comment will be sending data and creating new resources.
"},{"id":"T0E6OlNlY3Rpb24tNjM5Ng==","title":"Setting the Action on the Comment Form","htmlContent":"Get the form to call the new route by adding an action. Make sure to set the method as post, use the route defined above.
Set the method to post in the commend form on views/partials/comment-form.handlebars:
<!-- views/partials/comment-form.handlebars -->\n\n<form action=\"/reviews/comments\" method=\"post\">\n <fieldset>\n ...\n\n
Comments belong to a single review, so we need to keep track of this relationship. We need to Associate a comment with a review. The comment will be a child to the parent review. This relationship can be expressed through these two phrases:
We'll associate a comment with a review by attaching a reviewId attribute to each comment that points to its parent review id. We have to set this at the time of creation, so we can do this by adding a hidden input field that sends in the parent review id.
Let's include the _id of the review with the form. One way you can accomplish this is using a hidden form field. A hidden field is an input tag that has a value that isn't visible in the browser.
Add a hidden field to the form and set the value to the id of the review in views/partials/comment-form.handlebars:
<!-- views/partials/comment-form.handlebars -->\n\n<form action=\"/reviews/comments\" method=\"post\">\n <input type=\"hidden\" value=\"{{review._id}}\" name=\"reviewId\">\n <fieldset>\n ...\n\n
The hidden field get's a value from the review._id and has a name of reviewId.
Submitting this form will include the id of the review along with the title and content input by the user writing the comment.
"},{"id":"T0E6OlNlY3Rpb24tNjM5OQ==","title":"Define a Route","htmlContent":"Define a new route in express to handle this new form. We can do this inside of a new comments.js controller.
Create a new file controllers/comments.js.
Once that's done, add this to controllers/comments.js:
// comments.js\n\nmodule.exports = (app, Comment) => {\n\n // NEW Comment\n app.post('/reviews/comments', (req, res) => {\n res.send('reviews comment')\n })\n\n}\n\n
This should print the message 'reviews comment' to the browser when the form is submitted. This is a good test to check if everything is working so far.
"},{"id":"T0E6OlNlY3Rpb24tNjQwMA==","title":"Comment Model","htmlContent":"To save comments to the database you need a Comment model. You'll need to define a new model for Comments.
Make a new file in your models folder called comment.js: models/comment.js
// comment.js\n\n// imports `mongoose`. We need `mongoose` here to create the new model.\nconst mongoose = require('mongoose')\n\n//similar to the Review model with the difference that the Comment model only saves a `title` and `content`.\nconst Comment = mongoose.model('Comment', {\n title: String,\n content: String\n});\n\n// exports the `Comment` object. By doing this you can import `Comment` into any of your other files.\nmodule.exports = Comment\n\n
Lastly, require Comment into app.js, right underneath your require for Reviews:
Add the require in app.js:
// app.js\n\nconst reviews = require('./controllers/reviews')(app);\nconst comments = require('./controllers/comments')(app);\n\n
Also add the following underneath the other model require in review.js, we'll need it later to actually show our comments.
//review.js\n\n...\nconst Comment = require('../models/comment')\n...\n\n
Every Comment will need to have reference to a Review. This reference is the _id of the Review. Remember, id's are unique so every Review can ask for all Comments that reference it's id. Or conversely, any Comment will be able to refer to the Review the Comment was written for through the the review id it owns.
Open models/comment.js make the following changes:
const mongoose = require('mongoose')\nconst Schema = mongoose.Schema\n\nconst Comment = mongoose.model('Comment', {\n title: String,\n content: String,\n reviewId: { type: Schema.Types.ObjectId, ref: 'Review' }\n});\n\nmodule.exports = Comment\n\n
On the second line you got a reference to the Mongoose Schema object. This Object helps Mongoose organize all of the models that it is using.
The second change was to add a new property: reviewId. The value of this property is a ref or reference to another Mongoose model, 'Review' in this case. This name must match the name given to the model in models/review.js:
...\nconst Review = mongoose.model('Review', {\n ...\n})\n
You can check your work by testing your project in the browser. Any errors should show in the terminal. Comments cannot be saved yet but, saving Reviews should still work.
Submitting a comment the browser should show the message: 'reviews comment' from res.send('reviews comment') from the post comment route in app.js.
Revisit the post comment route now. Open controllers/comments.js and look for app.post('/reviews/comments', ...). You need to create a new comment and then reload the page. Make the changes below:
// comments.js\n\nconst Comment = require('../models/comment');\n\nmodule.exports = (app) => {\n\n // CREATE Comment\n app.post('/reviews/comments', (req, res) => {\n Comment.create(req.body).then((comment) => {\n console.log(comment)\n res.redirect(`/reviews/${comment.reviewId}`);\n }).catch((err) => {\n console.log(err.message);\n });\n });\n}\n\n
Note the addition of requiring the comment model.
Test your work. Write a comment and submit the form. The console.log call will allow you to see your comment in the console. If there are any errors they should also appear in the console.
You still can't see comments in the browser! Let's tackle that problem next.
This is a chicken and egg problem. We'd like to see comments but can't see any if they don't exist in the database. For this reason we chose to write the code that create comments first. Now we will write the code to display comments.
Open controllers/reviews.js and make these changes to the route that shows a single review by id. Make sure to also require the Comment model in this controller, since we'll be using it now too!
//reviews.js\nconst Review = require('../models/review');\nconst Comment = require('../models/comment')\n\nmodule.exports = function(app) {\n...\n\n // SHOW\n app.get('/reviews/:id', (req, res) => {\n // find review\n Review.findById(req.params.id).then(review => {\n // fetch its comments\n Comment.find({ reviewId: req.params.id }).then(comments => {\n // respond with the template with both values\n res.render('reviews-show', { review: review, comments: comments })\n })\n }).catch((err) => {\n // catch errors\n console.log(err.message)\n });\n });\n\n...\n\n}\n\n
This is an interesting use of Promise! Promise.all() runs any number of asynchronous requests in parallel (at the same time). The code in the then() block is run when all of the requests have resolved. Values from the requests are returned in an array, values in the example above. Where values[0] is the first request, values[1] is the second request etc.
In the code block above there are two requests [findReviews, findComments] when these resolve values[0] will be an array if reviews, and values[1] will be an array of comments.
Now that you have an array of comments we need to display them.
A partial will be a good way to keep your code clean and organized.
Create a new file views/partials/comment.handlebars.
<!-- views/partials/comment.handlebars -->\n\n<div class=\"card\">\n <div class=\"card-block\">\n <h4 class=\"card-title\">{{this.title}}</h4>\n <p class=\"card-text\">{{this.content}}</p>\n </div>\n</div>\n\n
Now display comments using this partial in views/reviews-show.handlebars.
<!-- views/reviews-show.handlebars -->\n\n<a href=\"/\">Back to Home</a>\n\n ...\n\n {{> comment-form}}\n\n <hr>\n\n <!-- Show Comments -->\n {{#each comments}}\n {{> comment}}\n {{/each}}\n\n </div>\n</div>\n\n
Use an {{#each ...}} block to display one copy of the comment.handlebars partial for each item in the comments array.
Remember the > in {{> comment}} signifies that comment.handlebars is a partial!
Test your work! Navigate to a single Review and add a comment. Submitting the comment should display a new comment below the Comment form.
"},{"id":"T0E6OlNlY3Rpb24tNjQwNA==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'Users can see comments'\n$ git push\n\nYou created a relationship between two different document/records in your database. Reviews each have a unique id. By saving the id of a Review with a Comment comments can find the Review that they are are associated with. Reviews can also find all of the Comments that are associated with their id.
This is a one to many relationship. This an important concept in database design, and an important tool you will use when managing data.
"}]},"next":{"id":"T0E6OlBhZ2UtMTU0NA==","slug":"deleting-comments","title":"Deleting Comments"},"previous":{"id":"T0E6OlBhZ2UtMTU0NA==","slug":"deleting-comments","title":"Deleting Comments"}},{"id":"T0E6OlBhZ2UtMTU0NA==","title":"Deleting Comments","slug":"deleting-comments","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNzI1MA==","title":"Deleting Comments","htmlContent":"Finally, since we are creating comments, we should also be able to delete them.
Remember that currently we do not have authentication so we'll just be letting any user create and delete comments. As we developed this project for a go live, we would probably add authentication and only allow people to delete their own comments!
"},{"id":"T0E6OlNlY3Rpb24tNzI1MQ==","title":"Deleting Comments","htmlContent":"You need to define a route. Here is the list of the current routes with a new one added for the comment form at the bottom.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
| /reviews/:id/edit | \nGET | \nedit | \n
| /reviews/:id | \nPUT/PATCH | \nupdate | \n
| /reviews/:id | \nDELETE | \ndestroy | \n
| /reviews/comments | \nPOST | \ncreate | \n
| /reviews/comments/:id | \nDELETE | \ndestroy | \n
We'll use the :id url parameter to look up the comment we want to destroy.
As always, we start with what the users sees and does. So let's make a link to delete a comment.
We can't set an <a> tag's method (it is always GET) so we are going to use a form to submit a DELETE request to our delete action path.
Let's add this link to the comments partial at: views/partials/comment.handlebars.
<!-- views/partials/comment.handlebars -->\n\n<div class=\"card\">\n <div class=\"card-block\">\n <h4 class=\"card-title\">{{this.title}}</h4>\n <p class=\"card-text\">{{this.content}}</p>\n <!-- Delete link -->\n <p><form method=\"POST\" action=\"/reviews/comments/{{this._id}}?_method=DELETE\">\n <button class=\"btn btn-link\" type=\"submit\">Delete</button>\n </form></p>\n </div>\n</div>\n\n
Now we need a delete action route. After deleting the comment, it should redirect back to the parent review (reviews-show).
add a delete route for comments in controllers/comments.js:
// controllers/comments.js\n...\n// DELETE\napp.delete('/reviews/comments/:id', function (req, res) {\n console.log(\"DELETE comment\")\n Comment.findByIdAndRemove(req.params.id).then((comment) => {\n res.redirect(`/reviews/${comment.reviewId}`);\n }).catch((err) => {\n console.log(err.message);\n })\n})\n\n
Ok so now try deleting a comment.
"},{"id":"T0E6OlNlY3Rpb24tNzI1NA==","title":"What Happened","htmlContent":"So now we've completed all our user stories:
You used Resource Based Development and Resourceful Routing to build a review app!
Congrats! You got Rotten Potatoes all set up! The following chapter has some extra challenges if you're looking to improve RP even more.
Reflect on what you've learned so far. How does it relate to the content in the rest of the course? What will you take with you?
\nWe promise this won't take longer than 2 minutes!
Please take a moment to rate your understanding of learning outcomes from this tutorial, and how we can improve it via our tutorial feedback form
"}]},"next":{"id":"T0E6OlBhZ2UtMTU0NQ==","slug":"bells-and-whistles","title":"Bells and Whistles"},"previous":{"id":"T0E6OlBhZ2UtMTU0NQ==","slug":"bells-and-whistles","title":"Bells and Whistles"}},{"id":"T0E6OlBhZ2UtMTU0NQ==","title":"Bells and Whistles","slug":"bells-and-whistles","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODMxMQ==","title":"Bells and Whistles","htmlContent":"If you're looking for some extra challenges, there are a few more things we can do to tighten up our website and make it look more like the big leagues. Let's look at a few.
"},{"id":"T0E6OlNlY3Rpb24tODMxMg==","title":"Displaying \"Created At\" Time","htmlContent":"Let's display a \"timestamp\" for when a Review was created that looks like this: \"Created on Nov 3, 2018\".
First we have to update our model to track when documents are created and updated. This is so common, that there is an established convention in Mongoose called \"timestamps\" to accomplish it. We just have to add the additional option of { timestamps: true } to the schema of our model and then all documents will have a createdAt and updatedAt Date fields added and set correctly by default.
Update models/review.js to use timestamps:
const Review = mongoose.model('Review', new mongoose.Schema({\n ...\n}, {\n timestamps: true\n});\n\n
const Review = mongoose.model('Review', reviewScheme);
module.exports = Review;\n```
Now we can display that createdAt timestamp in our html:
Update view/reviews-show.handlebars to include the createdAt field right below the title:
...\n\n<h1>{{review.title}}</h1>\n<p class=\"text-muted\">Created on: {{review.createdAt}}</p>\n\n...\n\n
Now create a new review and see what is displayed.
Uh-oh - what you see there is called a Unix timestamp.
Mon Nov 26 2018 12:57:54 GMT-0800 (Pacific Standard Time)
It technically says the date and time when the review was created, but it isn't very readable for humans!
"},{"id":"T0E6OlNlY3Rpb24tODMxMw==","title":"Formatting Timestamps","htmlContent":"We could parse it manually, but let's use a neat and very common js library called moment to parse that time into something more readable.
Install moment
\n$ npm install moment --save\n\n
Now update the /show route in controllers/reviews.js to format the createdAt date into something we can read:
//reviews.js\n\nconst Review = require('../models/review');\nconst Comment = require('../models/comment');\n// Got to import the libary\nconst moment = require('moment');\nmodule.exports = function (app) {\n\n...\n\n // SHOW\n app.get('/movies/:movieId/reviews/:id', (req, res) => {\n // find review\n Review.findById(req.params.id).then(review => {\n let createdAt = review.createdAt;\n createdAt = moment(createdAt).format('MMMM Do YYYY, h:mm:ss a');\n review.createdAtFormatted = createdAt;\n // fetch its comments\n Comment.find({ reviewId: req.params.id }).then(comments => {\n comments.reverse();\n // respond with the template with both values\n res.render('reviews-show', { review: review, comments: comments })\n })\n }).catch((err) => {\n // catch errors\n console.log(err.message)\n });\n });\n\n...\n\n}\n\n
Finally, let's use our new property:
Update views/reviews-show.handlebars to include the createdAtFormatted property:
<!-- views/reviews-show.handlebars -->\n...\n\n<small class=\"text-muted\">Created on: {{event.createdAtFormatted}}</small>\n\n...\n\n
Reload your browser and check the timestamp. Doesn't that look so much better?
\nWant it to display differently? Use the moment documentation to tweak the format string until you are happy with how the text displays.
\nNow let's add a footer (Brought to you by mdbootstrap.com). Add the following code after the {{{body}}} tag but before the </body> tag or any <script> tags.
Add the following code after the {{{body}}} tag, but before the </body> tag or any <script> tags in views/layouts/main.handlebars.
<!-- main.handlebars -->\n...\n\n<!-- Footer -->\n<footer class=\"page-footer font-small blue pt-4\">\n <div class=\"container-fluid text-center\">\n <div class=\"row\">\n <hr class=\"clearfix w-100 d-md-none pb-3\">\n <div class=\"col-md-6 mb-md-0 mb-3\">\n <h5 class=\"text-uppercase\">Links</h5>\n <ul class=\"list-unstyled\">\n <li><a href=\"#!\">Link 1</a></li>\n <li><a href=\"#!\">Link 2</a></li>\n <li><a href=\"#!\">Link 3</a></li>\n <li><a href=\"#!\">Link 4</a></li>\n </ul>\n </div>\n <div class=\"col-md-6 mb-md-0 mb-3\">\n <h5 class=\"text-uppercase\">Links</h5>\n <ul class=\"list-unstyled\">\n <li><a href=\"#!\">Link 1</a></li>\n <li><a href=\"#!\">Link 2</a></li>\n <li><a href=\"#!\">Link 3</a></li>\n <li><a href=\"#!\">Link 4</a></li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"footer-copyright text-center py-3\">© 2018 Copyright:\n <a href=\"https://mdbootstrap.com/education/bootstrap/\"> MDBootstrap.com</a>\n </div>\n</footer>\n\n...\n\n
Beautiful. Make any visual changes you like.
"},{"id":"T0E6OlNlY3Rpb24tODMxNQ==","title":"Adding a Bootstrap Theme","htmlContent":"Now if we want to customize our style a little bit, we can add a free bootstrap theme. One popular website for finding these is called Bootswatch.
You can pick whichever you like, but for these instructions we'll use the \"flatly\" theme.
\nGo to Bootswatch and select a theme from the Themes dropdown
Select the dropdown of the name of the style you selected. For example, if you like the Flatly style, you should see a Flatly dropdown as the last nav bar item on the left
Select the bootstrap.min.css option in the dropdown\nCopy the URL into your <head> tag to include the style you want. Make sure that this theme comes AFTER your link to bootstrap itself. Otherwise it won't work.
<head>\n ...\n\n <link rel=\"stylesheet\" href=\"https://bootswatch.com/4/flatly/bootstrap.min.css\">\n</head>\n\n
Now you can mess around with the CSS classes you have previously applied to achieve the look that you want!. Note that this will cause some areas of the app to look a lot different from what we initially did. But all of it is adjustable with some additional CSS!
"},{"id":"T0E6OlNlY3Rpb24tODMxNg==","title":"Now Commit","htmlContent":"$ git add .\n$ git commit -m 'added createdAt, footer, and bootstrap theme'\n$ git push\n"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMTUzNg==","title":"Show Route: See One Resource","slug":"showing-one-review","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjM0MQ==","title":"Show Route: See One Resource","htmlContent":"We are building out all the Resourceful Routes for our Review resource.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /reviews/new | \nGET | \nnew | \n
| /reviews | \nPOST | \ncreate | \n
| /reviews/:id | \nGET | \nshow | \n
We've already completed the index, new, and create actions. Now you will add a show action that will display a single resource via it's id.
Now let's setup the show action so we give each single review its own page and unique url path.
"},{"id":"T0E6OlNlY3Rpb24tNjM0Mg==","title":"Show One Review","htmlContent":"Remember always start with what the user will see and do. To create the show action, you will want to start by making a link to the review from our index action template. Your route has to follow the /reviews/:id structure.
MongoDB automatically creates an _id attribute on anything you save. So we can use that _id attribute for our :id in the route. This is called the Url or Request Parameter and we access it in Express using the req.params parameter inside a controller route.
Update views/reviews-index.handlebars to the following:
<!-- views/reviews-index.handlebars -->\n\n<h1>Reviews</h1>\n\n<a href=\"/reviews/new\">New Review</a>\n\n{{#each reviews}}\n <h2><a href=\"/reviews/{{this._id}}\">{{this.title}}</a></h2>\n <small>{{this.movieTitle}}</small>\n{{/each}}\n\n
What happens if you click on one of those links? A friendly error! Let's do what it says and make the route.
Add the /reviews/:id route to app.js:
// app.js\n\n...\n\n// SHOW\napp.get('/reviews/:id', (req, res) => {\n res.send('I\\'m a review')\n});\n\n
Now what happens if you go to that route?
"},{"id":"T0E6OlNlY3Rpb24tNjM0Mw==","title":"req.params & Review.findById()","htmlContent":"Ok time to add a template with an actual review object!
Update the /reviews/:id route in app.js to the following:
// app.js\n\n...\n\n// SHOW\napp.get('/reviews/:id', (req, res) => {\n Review.findById(req.params.id).then((review) => {\n res.render('reviews-show', { review: review })\n }).catch((err) => {\n console.log(err.message);\n })\n})\n\n
Now if we go to the route, we'll see the error that no template reviews-show is found. Great! Let's make it.
Create views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<h1>{{review.title}}</h1>\n<h2>{{review.movieTitle}}</h2>\n<p>{{review.description}}</p>\n\n
Now what do you see? All the links to reviews should work now!
"},{"id":"T0E6OlNlY3Rpb24tNjM0NA==","title":"Add a Back Link","htmlContent":"This is good, the show action is working, but there is a bit of a problem. Once you are on the show action page, you can't get back home.
Let's fix that by putting in a \"Back\" link in views/reviews-show.handlebars:
<!-- views/reviews-show.handlebars -->\n\n<a href=\"/\">Back to Home</a>\n\n<h1>{{review.title}}</h1>\n<h5>{{review.movieTitle}}</h5>\n<p>{{review.description}}</p>\n\n
That's better. What else could we do now that we have this show route?
"},{"id":"T0E6OlNlY3Rpb24tNjM0NQ==","title":"Update the Create Action's Redirect","htmlContent":"It makes sense from the user's perspective that after we create a new review, we should be automatically redirected to it, no?
Change the create route to redirect to the show path in app.js:
// CREATE\napp.post('/reviews', (req, res) => {\n Review.create(req.body).then((review) => {\n console.log(review)\n res.redirect(`/reviews/${review._id}`) // Redirect to reviews/:id\n }).catch((err) => {\n console.log(err.message)\n })\n})\n\n
$ git add .\n$ git commit -m 'Users can see single reviews'\n$ git push\n\nNow our user experience is getting very smooth, and our code is getting more and more complete. Onward!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUzNw==","slug":"editing-a-review","title":"Edit Route: Editing and Updating a Resource"},"previous":{"id":"T0E6OlBhZ2UtMTUzNw==","slug":"editing-a-review","title":"Edit Route: Editing and Updating a Resource"}}}},"staticQueryHashes":[]}