~/code/labs
folder.Upon completion, run the following commands
$ git add .
$ git commit -m "done"
$ git push origin master
Everyone likes celebrities, right? Well, even if you don’t, now is your chance to create your own, better, fictional celebrities! Let’s create an Express app with all the basic CRUD actions that will allow the user to create their own celebrities and edit them as they see fit.
The user should be able to:
1. See the list of celebrities. 2. See the details of a celebrity. 3. Add new celebrities. 4. Update existing celebrities. 5. Delete celebrities.
But wait! That’s not all!
Once we have our celebrities, we need something for them to do!
Let’s make up some movie ideas for our celebrities to star in.
That means we’ll need all the basic CRUD actions for movies as well.
The user should be able to:
6. See the list of movies. 7. See the details of a movie. 8. Add new movies. 9. Update existing movies. 10. Delete movies.
All the files that make your Express/Mongoose app work, including your celebrities.js
, and movies.js
routes files and your celebrity.js
, and movie.js
model files.
Celebrity
ModelOnce we have generated our Express app, our first step is to create the Celebrity
model and seed some initial celebrities in our database.
The Celebrity
model should have:
name
- String (like Tom Cruise, Beyonce, Daffy Duck, etc.)occupation
- String (what the celebrity does, why they are famous. For example actor, singer, comedian, or you can put unknown if your celebrity is someone like Kim Kardashian)catchPhrase
- String (every celebrity needs a good catch phrase. Well maybe not all of them have one in real life, but all of our celebrities will have a catch phrase. This can be pretty much anything)celebrity.js
model file in the models/
folder.celebrity.js
model file:
name
, occupation
and catchPhrase
.Celebrity
model with the schema.Celebrity
model.seeds.js
file in the bin/
folder.seeds.js
file:
name
, occupation
and catchPhrase
for our initial celebrities.Celebrity
model’s create
method with the array as argument.create
method’s callback, display feedback.node
to seed your database.mongo
command to confirm that your data was saved.Now that we’ve got some celebrities in the database, we can start working with them in our Express app. Let’s display a list of all the celebrities.
Here’s the route we will be using:
Route | HTTP Verb | Description |
---|---|---|
/celebrities |
GET | Show all celebrities |
/celebrities
GET route in routes/celebrities.js
.Celebrity
model’s find
method to retrieve all the celebrities.next
function and return the error.celebrities/index
view.celebrities/
folder inside views/
.index.hbs
view file inside the views/celebrities/
folder.views/celebrities/index.hbs
view file:
<h2>
tag for the page’s heading.forEach
loop to display tags with each celebrity’s name
.views/index.hbs
(homepage) file:
/celebrities
route.We’ve got a list of celebrities that displays each of their name
, but what if we want to see the other details? In our views/celebrities/index.hbs
view with our list of celebrities, let’s add links so that the user can click on any celebrity’s name, and go to a page specifically for that celebrity. On this page, we will show all the details of that celebrity.
Here’s the route we will be using:
Route | HTTP Verb | Description |
---|---|---|
/celebrities/:id |
GET | Show a specific celebrity |
/celebrities/:id
GET route in routes/celebrities.js
.Celebrity
model’s findOne
or findById
method to retrieve the details of a specific celebrity by its id.next
function and return the error.celebrities/show
view.show.hbs
view file inside the views/celebrities/
folder.views/celebrities/show.hbs
view file:
<h2>
for the page’s heading.name
, occupation
and catchPhrase
.views/celebrities/index.hbs
view file:
/celebrities/:id
route with the :id
replaced by the actual celebrity’s id.Now that we have a list of celebrities, as well as a personalized details page for each celebrity, let’s make it so the user can add new celebrities to the database
Route | HTTP Verb | Description |
---|---|---|
/celebrities/new |
GET | Show a form to create a celebrity |
/celebrities |
POST | Send the data from the form to this route to create the celebrity and save to the database |
/celebrities/new
GET route in routes/celebrities.js
:celebrities/new
view.new.hbs
view file inside the views/celebrities
folderviews/celebrities/new.hbs
view file:
<h2>
for the page’s heading.<form>
tag that makes a POST request to /celebrities
.<input>
tags inside the form so the user can fill in values for each attribute of the celebrity. Make an input for name
, occupation
, and catchPhrase
<button>
tag in the form so the user can submit the form once they are done filling it out./celebrities
post route in routes/celebrities.js
.name
, occupation
, and catchPhrase
.req.body
is the object full of the values from the form)Celebrity
model with the object you made in the previous stepsave
method to save the new celebrity to the databasecelebrities/new
view so the user can try again.views/celebrities/index.hbs
view file:
Now that we have a list of celebrities, a celebrity details page, and a page to create new celebrities, we only have 2 features left to implement: editing celebrities and deleting them. Since deleting is simpler, let’s start with that.
Route | HTTP Verb | Description |
---|---|---|
/celebrities/:id/delete |
POST | Delete a specific celebrity |
views/celebrities/index.hbs
file:
<form>
tag that makes a POST request to celebrities/:id/delete
where the :id
is replaced by the actual id
of each celebrity.<button>
tag inside the form so that it can be submitted./celebrities/:id/delete
POST route in your routes/celebrities.js
fileCelebrity
model’s findByIdAndRemove
method to delete the celebrity by its id
.next
function and return the errorFinal piece of our CRUD puzzle: editing existing celebrities.
Here are the routes we will be using:
Route | HTTP Verb | Description |
---|---|---|
/celebrities/:id/edit |
GET | Show a form to create a celebrity |
/celebrities/:id |
POST | Show a specific celebrity |
/celebrities/:id/edit
GET route in routes/celebrities.js
.Celebrity
model’s findOne
or findById
method to retrieve a specific celebrity by its id.next
function and return the error.celebrities/edit
view.edit.hbs
view file inside the views/celebrities/
folder.views/celebrities/edit.hbs
view file:
<h2>
tag for the page’s heading.<form>
tag that makes a POST request to /celebrities/:id
with the :id
replaced by the actual celebrity’s id.<input>
tags inside the form for each attirbute of the celebrity.
<button>
tag inside the form so that the user can submit the form once they are done editing./celebrities/:id
POST route in the routes/celebrities.js
file.req.body
).Celebrity
model’s update
method and use the celebrity’s id to specify which celebrity we are updating. Also, use the object you just created with the updated attributes for the celebrity and pass this object into the update
method as the second argument.next
function and return the errorAt this point, we have implemented all the basic CRUD actions for the Celebrity model in our app. Nice work!
Now that we’ve done all this good work, it’s time to do it all over again, but for the Movie model. After all, what’s the point of having all these celebrities if we can’t make up fake movies to cast them in?
We are going to create a Movie
model and implement all the same CRUD actions for this model as well. Don’t worry, it’s really much easier the second time around.
Movie
ModelLet’s jump right in.
First of all, we’ll need to create the Movie
model.
The Movie
model should have:
title
- Stringgenre
- Stringplot
- StringGo back and review what you did to create the Celebrity
model. You’ll need to create a file for the model, and in that file, you’ll need to create a schema for the model as well.
Once you’ve done that, go to your seeds.js
file in the bin/
folder and either delete or comment out the seeds you made before for your celebrities.
Replace these seeds with seeds for fake movies. If you don’t delete/comment what you had before, when you run the seeds file with the node
command in the terminal, it will create duplicates of all your celebrities.
Afterward, check the database with the mongo
command to confirm that your data was saved.
Now that we’ve got some movies in the database, let’s make a page where we list all our movies, just like we did with the Celebrity
model.
Go back and review how you did this for the Celebrity
model. You’ll need to
movies
view files).forEach
loop to display all your movies on that pageNow that we’ve got a list of movies, let’s add a details page for each movie just like we did with our celebrities.
Go back and review what you did for the Celebrity
model. You’ll need to:
Okay, the next step is to make it so the user can add new movies to the database
Review how you did this for the Celebrity
model.
req.body
)Okay, only 2 features left, deleting and editing.
Review how you did this with the Celebrity
model.
Final piece of our CRUD puzzle: editing existing movies.
Review how you did this for the Celebrity
model.