![\"finished](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P00-Start-An-Express-Project/assets/finished-example.png\" "\\"\\"")
\n You might know the website EventBrite. It is a site where people can find great events to attend. In this tutorial you are going to build Make Parties - your very own event website.
"},{"id":"T0E6OlNlY3Rpb24tODIzNA==","title":"Prerequisites","htmlContent":"Before starting this tutorial you should be familiar with the following topics:
By the end of this tutorial, you should be able to...
Event resourceRsvp), and associate it to another resourceBefore we get started, let's make a plan for what User Stories we're going to build. Then we'll jump in and start Express.js app and add a templating engine.
Software development these days is 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 event app will be as follows:
Once we have this single Event resource build, we can move onto making an associated RSVP resource.
As we finish our user stories we'll be committing to GitHub 🐙.
"},{"id":"T0E6OlNlY3Rpb24tODIzNw==","title":"Getting Started - Cloud9","htmlContent":"(Ignore this section if you are installing the development environment on your own computer)
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.
If you are using Cloud9
\n\n(Ignore this section if you are using Cloud9)
For reference for the rest of this chapter you can look at ExpressJS's Getting Started docs for help with getting started.
\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.
First things first, we need a tool to help us install things like packages and libraries. Homebrew is Mac's package manager, so let's install that first!
Open your computer's terminal and then install Homebrew:
\n$ /usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"\n\n
Cool, now let's get our environment set up. npm, NodeJS's package manager, is installed automatically when you install node, so we'll be able to install node modules from our command line once we install node.
install NodeJS:
\n$ brew install node\n\n
Now that we have Node installed (and therefore have npm), Let's set up our working directory where we'll build our project.
Make a new directory called make-parties, then navigate into that directory
$ mkdir make-parties\n$ cd make-parties\n\nUse the command npm init (\"npm initialize\") to kick off a node project. This command 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.
Run npm init to kick off the project:
$ npm init\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 Express.js.
\nExpress.js is a web framework. Node.js is your server. Express is a structure that makes it easy to use node to handle web requests through HTTP, and then to add other libraries called middleware to do other common website patterns like render HTML, accept form data, serve images and other static assets, and everything else websites can do. With Express as a base, you can build literally anything in the internet from Google to Uber.
\nLets start by just getting Express to say \"Hello World!\". Then we'll add a template engine called Handlebars so Express can render HTML.
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.
$ npm install express\n$ touch app.js\n\n
Now your project should have two files and a folder: app.js, package.json, and node_modules.
(If your on Cloud9 ignore this step)\nNow if you are on your computer, open your project's code base using the Atom text editor by typing:
\n$ atom .\n\n
Let's add some standard Express.js code to app.js to show a hello world:
Add the following to app.js:
// Initialize express\nconst express = require('express')\nconst app = express()\n\n// Tell our app to send the \"hello world\" message to our home page\napp.get('/', (req, res) => {\n res.send('Hello World!')\n})\n\n// Choose a port to listen on\nconst port = process.env.PORT || 3000;\n\n// Tell the app what port to listen on\napp.listen(port, () => {\n console.log('App listening on port 3000!')\n})\n\n
Now run your project!
Run the following command to get your project up and running:
\n$ node app.js\n\n
If you are on Cloud9: select Preview > Preview Running Application to open a browser panel.
\n\nIf you are on your computer: point your browser to http://localhost:3000.
Remember that we still haven't added a template engine yet. We are just sending text back to the browser, but you should see an empty page except for the the text \"Hello World!\"
"},{"id":"T0E6OlNlY3Rpb24tODI0MQ==","title":"Install nodemon and launch your server","htmlContent":"Let's install nodemon if you haven't already. Nodemon just helps us by restarting our server every time we change our code.
Install and run nodemon:
$ npm install nodemon -g\n$ nodemon app.js\n\n
In your terminal, you should see App listening on port 3000! as an output. How did this get here?
From the console.log inside of app.listen(3000 ...)! Make sure to refresh your browser (if you're on localhost) to make sure that the text is still displaying and everything is working properly.
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 our templating engine Handlebars.js so our Express.js server can render templates. This is called server-side HTML templates.
We're also going to add a package called allow-prototype-access to avoid a common error we will run into later.
\nInstall Handlebars.js to your project using the express-handlebars node module.
$ npm install express-handlebars @handlebars/allow-prototype-access\n\n
Now that we've installed the package, we must require it or initialize it in your app:
Update app.js to include the following after the const app = express() line:
// require handlebars\nconst exphbs = require('express-handlebars');\nconst Handlebars = require('handlebars')\nconst {allowInsecurePrototypeAccess} = require('@handlebars/allow-prototype-access')\n\n// Use \"main\" as our default layout\napp.engine('handlebars', exphbs({ defaultLayout: 'main', handlebars: allowInsecurePrototypeAccess(Handlebars) }));\n// Use handlebars to render\napp.set('view engine', 'handlebars');\n\n
Now let's render a handlebars home page!
\nExtend your root route ('/') to render home.handlebars.
// app.js\n\n// Render the \"home\" layout for the main page and send the following msg\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 file.\nbash\n$ mkdir views\n$ mkdir views/layouts\n$ touch views/layouts/main.handlebars\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. This is like a \"super-template\" that all other templates are embedded in. 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 to views/layouts/main.handlebars
<!-- views/layouts/main.handlebars -->\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <title>Make Parties</title>\n</head>\n<body>\n\n {{{body}}}\n\n</body>\n</html>\n\n
Now we can make our views/home.handlebars template (a new file in our views director). This template will use main.handlebars as a boilerplate, but what we write in home.handlebars will render in the {{{body}}} portion of main.handlebars:
Create the views/home.handlebars file and then add the following to it:
<!-- home.handlebars -->\n<h1>{{msg}}</h1>\n\n
Now when you visit localhost:3000 you should now see \"Handlebars are Cool!\" inside an h1 tag:
Now that you have a basic initialized Express.js project, let's commit to github.
![\"handlebars](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P00-Start-An-Express-Project/assets/handlebars-are-cool.png\" "\\"\\"")
\n $ git init\n$ git add .\n$ git commit -m 'init'\nNow go to github and create a public repository called make-parties, and now associate it as a remote for your local git project and then push to it.
$ git remote add origin GITHUB-REPO-URL\n$ git push origin master -u\n
We'll be doing this at the end of every chapter to make sure we're saving our progress as we go along!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUyMA==","slug":"index-events","title":"See All Events"},"previous":{"id":"T0E6OlBhZ2UtMTUyMA==","slug":"index-events","title":"See All Events"}},{"id":"T0E6OlBhZ2UtMTUyMA==","title":"See All Events","slug":"index-events","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI0NQ==","title":"See All Events","htmlContent":"Following our User Stories we are going to define a single Resource in this app called an Event.
A Resource is an abstract object that we use to organize data, code, and the features of our app. For example, in 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. Memorize this table of routes:
| URL | \nHTTP Verb | \nAction | \nWhat it Does | \n
|---|---|---|---|
| /events | \nGET | \nindex | \nSee all events | \n
| /events/new | \nGET | \nnew | \nSee new event form | \n
| /events | \nPOST | \ncreate | \nCreate a new event | \n
| /events/:id | \nGET | \nshow | \nSee one event | \n
| /events/:id/edit | \nGET | \nedit | \nSee an edit event form | \n
| /events/:id | \nPATCH/PUT | \nupdate | \nUpdate a event | \n
| /events/:id | \nDELETE | \ndestroy | \nDelete a event | \n
We're going to start with the index action and then show, and then we'll look at the create, edit, update, and delete.
Let's make a route to /events for the index action where we can see all the events 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 below the app.get('/'...) call in app.js:
// OUR MOCK ARRAY OF PROJECTS\nvar events = [\n { title: \"I am your first event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" },\n { title: \"I am your second event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" },\n { title: \"I am your third event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" }\n]\n\n// INDEX\napp.get('/events', (req, res) => {\n res.render('events-index', { events: events });\n})\n\n
Notice how we are making a mock array of events, and sending that in as an object into the template { events: events }. So the variable events will be available in our template!
Send your browser to your /events path by going to http://localhost:3000/events. 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 'events-index'\". That makes sense because we haven't made it yet! It's ok to complete coding tasks that throw a predictable error, and then use that error like a sign post.
\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/events-index.handlebars. We're going to use the Handlebars.js {{#each}} iterator to loop over our array of events and display each one's title.
Add views/events-index.handlebars to your project, and then put the following code into it:
<!-- events-index -->\n<h1>Events</h1>\n{{#each events}}\n <h2>{{this.title}}</h2>\n <img class=\"img-fluid\" src=\"{{this.imgUrl}}\" alt=\"Card image cap\">\n <p>{{this.description}}</p>\n{{/each}}\n\n
If you refresh localhost:3000/events now what do you see?
\nYou should see the mock events we wrote into code. Can you add to them or change them?
\nLet's update the /events route to be our root route. Just change the path from /events to / and delete or comment out the hello world root route we made before.
Update the call to app.get('/') to render events-index in app.js:
// INDEX\napp.get('/', (req, res) => {\n res.render('events-index', { events: events });\n})\n\n
Now navigate to localhost:3000, and make sure you see those puppies!
![\"puppies\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P01-Index-Events/assets/puppies.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can see all mock events'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODI1MQ==","title":"Stretch Challenge","htmlContent":"Still hankering for more? Use these Stretch Challenge sections to implement additional functionality to your project. Note that you will never need to implement these in order to finish the tutorial, but if you want extra practice, or want to try out some advanced functionality, then this is for you!
Can you make changes to your events array in app.js and see it reflected in your events-index template?
Now 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 Design System.
The main elements we will be using are the...
There is a lot more that you can explore and even extend and modify.
"},{"id":"T0E6OlNlY3Rpb24tNjIzOA==","title":"Adding Bootstrap with a Content Delivery Network (CDN)","htmlContent":"It is easy to get started with bootstrap quickly by using the CDN links that bootstrap maintains.
We'll add the <link> to bootstrap's css in our <head> tag in the views/layouts/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.
You should always reference the latest Bootstrap CDN links and use those to make sure everything is up to date.
\n\nAdd the following <link> and <script> tags to views/layouts/main.handlebars:
<!-- views/layouts/main.handlebars -->\n\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n Make Parties\n <!-- Latest compiled and minified CSS -->\n <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">\n</head>\n<body>\n\n {{{body}}}\n\n <!-- Latest compiled and minified JavaScript -->\n <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/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":"T0E6OlNlY3Rpb24tNjIzOQ==","title":"Adding a Navbar","htmlContent":"Add the most common navigational component - a top navbar. We'll have it contain a button to create a new event so that anywhere a user navigates to, they can always make a new event. If you shrink and grow the size of your browser window you'll notice that this is a responsive navbar, meaning it responds to the size of the screen.
To do this, we need to make a new partial. Partials are like html components that you can reuse in multiple views. They only contain enough html to render the component, hence why they're called a \"partial\".
\nCreate a new folder views/partials, and then create a new file navbar.handlebars in that views/partials directory.
Now add the following code to views/partials/navbar.handlebars
<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <a class=\"navbar-brand\" href=\"#\">Make Parties</a>\n\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n\n <div class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item active\">\n <a class=\"nav-link\" href=\"/\">Home</a>\n </li>\n </ul>\n </div>\n</nav>\n\n
Great, now we need to add it to our main layout so that all pages will have it! We'll use Handlebar's {{> partial}} syntax to inject the partial we just made into our main template.
Update views/layouts/main.handlebars to include the navbar:
...\n<body>\n\n {{> navbar}}\n\n {{{body}}}\n ...\n\n
If you refresh your browser, you should see the following:
"},{"id":"T0E6OlNlY3Rpb24tNjI0MA==","title":"Adding a Grid Container","htmlContent":"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 construct an appealing layout.
Start by updating views/layouts/main.handlebars by wrapping the {{{body}}} with a container class.
<!-- views/layouts/main.handlebars -->\n...\n<body>\n ...\n <div class=\"container\">\n {{{body}}}\n </div>\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. This means that it changes depending on the size of the screen that is being shown on. Pretty neat!
"},{"id":"T0E6OlNlY3Rpb24tNjI0MQ==","title":"Adding a Responsive Grid with Cards","htmlContent":"Let's add some bootstrap to make things look better. First we'll wrap things in a row (with a margin-top utility class) and some responsive columns so the events sit in the middle 6 columns of the page when the browser window is lg (large).
Update views/events-index.handlebars to the following:
<!-- events-index -->\n <div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n <h1>Events</h1>\n {{#each events}}\n <h2>{{this.title}}</h2>\n <img class=\"img-fluid\" src=\"{{this.imgUrl}}\" alt=\"Card image cap\">\n <p>{{this.description}}</p>\n {{/each}}\n </div>\n </div>\n\n
Next we'll add some Bootstrap Card enhanced html inside of the #each:
Update the inside of the #each in views/events-index.handlebars to the following:
![\"navbar\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P02-Adding-Bootstrap/assets/navbar.png\" "\\"\\"")
\n {{#each events}}\n <div class=\"card mt-3\">\n <img class=\"card-img-top\" src=\"{{this.imgUrl}}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">{{this.title}}</h5>\n <p class=\"card-text\">{{this.desc}}</p>\n <div class=\"text-right\">\n <a href=\"#\" class=\"btn btn-info\">Rsvp</a>\n <a href=\"#\" class=\"btn btn-primary\">View</a>\n </div>\n </div>\n </div>\n {{/each}}\n\nLooks a lot nicer now, doesn't it?
Great work! Now let's actually build out those events!
"},{"id":"T0E6OlNlY3Rpb24tNjI0Mw==","title":"Now Commit","htmlContent":"![\"bootstrap](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P02-Adding-Bootstrap/assets/bootstrap-added.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Added vanilla bootstrap'\n$ git push\n"}]},"next":{"id":"T0E6OlBhZ2UtMTUyMg==","slug":"creating-a-event","title":"New Event Form"},"previous":{"id":"T0E6OlBhZ2UtMTUyMg==","slug":"creating-a-event","title":"New Event Form"}},{"id":"T0E6OlBhZ2UtMTUyMg==","title":"New Event Form","slug":"creating-a-event","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjI0NA==","title":"New Event Form","htmlContent":"Remember we are doing Resourceful and RESTful architecture to our MVC structured app. We've made some views in the views folder, instantiated a (fake) 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 Event resource.
Remember the previous table that showed a hypothetical set of routes for services like Instagram?
Here it is again for event:
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| /events | \nGET | \nindex | \n
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
| /events/:id | \nGET | \nshow | \n
| /events/:id/edit | \nGET | \nedit | \n
| /events/:id | \nPATCH/PUT | \nupdate | \n
| /events/: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
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
First things first - what does the user see?
The user will have to click \"New Event\" to create a new event. So let's put a link into the events-index template.
Add the following <h1> and <a> into views/events-index.handlebars:
<!-- views/events-index.handlebars -->\n<div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n <!-- Add the following two lines -->\n <h1>Reviews</h1>\n <a href=\"/events/new\">New Event</a>\n\n <h1>Events</h1>\n {{#each events}}\n ...\n {{/each}}\n </div>\n</div>\n\n
When you click this link you should see a friendly error reminding you that we haven't made the route for /events/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":"T0E6OlNlY3Rpb24tNjI0Ng==","title":"New Event Form","htmlContent":"Now we have to make a route to the /events/new path, and have it render a events-new template.
Add the following route to app.js to handle /events/new:
// NEW\napp.get('/events/new', (req, res) => {\n res.render('events-new', {});\n})\n\n
If we navigate our browser to /events/new we'll get a friendly little error reminding us that we don't have a template called events-new.handlebars yet. So let's put that into our views folder.
Create the views/events-new.handlebars and add the following code to it:
<!-- views/events-new.handlebars -->\n\n<form method=\"POST\" action=\"/events\">\n <fieldset>\n <legend>New Event</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=\"desc\">Movie Title</label><br>\n <input type=\"text\" name=\"desc\" />\n </p>\n </fieldset>\n\n <!-- BUTTON -->\n <p>\n <button type=\"submit\">Save Event</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. /events is the route to our create action that we will add to our server in the next step.
Now if you navigate to /events/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 /events, but we have not made a route that detects post requests to that path. So we see our friendly error:
cannot POST to /events\n
Our server has no route called /events 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\n\n
Body Parser is a module that allows express to see form data that is coming in from a POST request. So we'll initialize the body-parser module in our app.js file.
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('/events', (req, res) => {\n console.log(req.body);\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 Event',\n desc: 'a sample event description' }\n
This is great, we're seeing the form data, but now we need to save this data to the database...
"},{"id":"T0E6OlNlY3Rpb24tNjI0OA==","title":"Setting up SQL","htmlContent":"SQL—pronouced ess-queue-el or see-quell— is a kind of database and the name of the language used to query SQL databases.
For the purpose of this tutorial, we'll be using the PostgreSQL database—pronounced post-gres-queue-el.
We won't be writing an SQL queries though, because we are going to use an Object Relationship Mapper (ORM) to handle our queries for us. We will be using the most popular JavaScript SQL ORM called Sequelize.
Since Sequelize's documentation is notoriously bad, refer to this alternative documentation we've written called Sequelize-It.
Our first step to setup a database is to add PostgreSQL to our environment.
If you have Cloud9 PostgreSQL is already installed and you can do the following to start your database.
Run the following command:
\n$ sudo service postgresql start\n\n
If you are running your development environment on your computer, you'll have to install Postgres.
Follow the steps outlined at Postgres.app to get everything set up.\nNote: Once you've installed, make sure to close/reopen your terminal for the changes to take effect.
Now use $ brew install postgresql in your terminal to finish installing
Cool, Postgres installed, now we gotta work on Sequelize:
Follow the \"Quick Start: Getting Connected\" section in the Sequelize-It documentation.
\n\nIMPORTANT NOTE 1: It's very important to follow all 8 steps in the Quick Start, especially in terms of getting the config.json file set up correctly. If you run into ECONNREFUSED or ETIMEDOUT errors, go back to the guide and make sure you followed all 8 steps correctly.\nIMPORTANT NOTE 2: You must install all the sequalize libraries locally, not globally, otherwise they will not work in heroku.
Local: \nExample: npm install sequelize sequelize-cli pg pg-hstore
You will need these packages to be available in both development and in production in heroku.
"},{"id":"T0E6OlNlY3Rpb24tNjI1MA==","title":"Creating your First Model & Migration","htmlContent":"A Model is like a cookie cutter. You use it to define the attributes and behavior of a resource. Models are also used to interact with a database. We'll use our models every time we want to either save or read something from our database.
A Migration is some code we use to define the tables and columns of our SQL database. We always have to define the tables and columns before we try to read or write data to them.
These will make more sense once you start to use them, so hang tight.
Sequelize has a set of Generators for creating boilerplate code for models, seeders, and migrations. Let's use one of those generator commands to make our Event model and migration
Run the following command in your terminal to make the Event model and migration:
$ sequelize model:create --name Event --attributes title:string,desc:text\n\n
This command creates a model file, db/models/event.js (Notice it is singular), and a migration file 0984932849328-create-event.js. That jumble of numbers is actually a date and time signature for the moment it was created. Every migration has one because migrations have to run in order, so they are run in the order of when they were created.
The important parts about are model are just the two attributes and their types: title:STRING, desc:TEXT. A STRING data type in SQL can have 255 bytes, and the TEXT data type can have unlimited text.
Later we'll use that Event.associate function to associate Rsvps with our event.
Our migration is a bit longer and adds a few other attributes to our Event:
![\"event](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P03-A-New-Event-And-DB/assets/event-form.png\" "\\"\\"")
\n idcreatedAtupdatedAtWe'll use the id to fetch instances of events, and we'll use createdAt and updatedAt to order them.
\n<!-- > First make sure your ports match what sequelize is expecting: port 3306. Not doing this will throw an error when running the next command:
\n\n\n ![\"port\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P03-A-New-Event-And-DB/assets/port.png\" "\\"\\"")
\n -->
Start the server back up, and then run the migrations:
\n$ sequelize db:migrate\n\n
If you run into errors around mysql or mysql2 not being installed, install them through npm (i.e. npm install -g mysql2) and then rerun the migration command.
Starting the migration adds the Events table to your database. Now we can save events to the database!
\nIf you are on your own computer, you can download the program Postico and you can examine and edit your database's contents and structure.
\nOne more step and we can commit our code...
"}]},"next":{"id":"T0E6OlBhZ2UtMTUyMw==","slug":"creating-a-event-Okk=","title":"Create Route: Saving a New Resource"},"previous":{"id":"T0E6OlBhZ2UtMTUyMw==","slug":"creating-a-event-Okk=","title":"Create Route: Saving a New Resource"}},{"id":"T0E6OlBhZ2UtMTUyMw==","title":"Create Route: Saving a New Resource","slug":"creating-a-event-Okk=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI1Mg==","title":"Create Route: Saving a New Resource","htmlContent":"So now we have
Events table.So now we just need our Event model to save to our database.
So now let's use that form data to save a new event to our SQL database using our Event model. We'll use the method provided to us by Sequelize called create(). After we create the event, let's redirect to the root path to see our new event.
To access our models we have to require them into our app.js. Let's do that now near the top of app.js, underneath our body-parser code:
const models = require('./db/models');\n\n
Now we can use this models variable to access our models in our routes:
Update the /create route in app.js to the following:
// CREATE\napp.post('/events', (req, res) => {\n models.Event.create(req.body).then(event => {\n res.redirect(`/`);\n }).catch((err) => {\n console.log(err)\n });\n})\n\n
When you submit your form what do you see? Probably ... nothing yet! Because we aren't actually loading our events in events-index from our database. Let's add that using Sequelize's findAll() method:
Update the /index route in app.js to the following:
// INDEX\napp.get('/', (req, res) => {\n models.Event.findAll().then(events => {\n res.render('events-index', { events: events });\n })\n})\n\n
Ok, now do you see your events? Can you add a few?
If you add a few, notice that new ones are going on the bottom, but that's not good, we want new events on the top. We can use the order option in the findAll() method. the order option takes an array of arrays that contain the attribute and either ASCE or DESC for ascending or descending order.
Update the /index route in app.js to the following:
// Index\napp.get('/', (req, res) => {\n models.Event.findAll({ order: [['createdAt', 'DESC']] }).then(events => {\n res.render('events-index', { events: events });\n })\n})\n\n
Are you seeing your title and description text yet? Probably not because Handlebars went and added an extra layer to their library—ostensibly for security's sake—but for our purposes it just gets in the way. We're going to take this layer of security away to simplify building our project.
Follow the instructions posted on this github issue.\nIgnore changing your handlebars file extension to .hbs, just add the prototype access.
Now the only problem is the images are not showing because we don't have an imgUrl attribute. Let's add that in the next step:
The new action will be our form for making a new event. For now events just have one attribute title, but we can always add more. Let's add an attribute called imgUrl and another called desc so we can write some more details about the event we've done.
First let's add what the user sees - the events-new.handlebars form input field.
Update views/events-new.handlebars to include an input for imgUrl right below the movie title input:
<p>\n <label for=\"imgUrl\">Image Url</label><br>\n <input type=\"text\" placeholder=\"\" name=\"imgUrl\" />\n</p>\n\n
Next, let's create a migration:
Run the following in your terminal:\nbash\n$ sequelize migration:create --name add-img-url-to-events\n
Open the new migration that is created, and let's add the following addColumn() and removeColumn() methods into it:
Fill in the up and down methods with the following code in the db/migrations/add-img-url-to-events.js file:
'use strict';\n\nmodule.exports = {\n up: (queryInterface, Sequelize) => {\n return queryInterface.addColumn('Events', 'imgUrl', { type: Sequelize.STRING });\n },\n\n down: (queryInterface, Sequelize) => {\n return queryInterface.removeColumn('Events', 'imgUrl');\n }\n};\n\n
\nMigrations should be reversible if possible. Meaning they can be run forwards to make a change, and run backwards to reverse that change. The up and down functions in a migration are made to run this way.
Next, let's add the imgUrl attribute to the Event model.
Update the Event in db/models/event.js to include imgUrl:
// db/models/event.js\n...\n const Event = sequelize.define('Event', {\n title: DataTypes.STRING,\n desc: DataTypes.TEXT,\n imgUrl: DataTypes.STRING //add this line (don't forget the comma above!)\n }, {});\n...\n\n
Can you resubmit the form? What happens now? Is it hanging? Did you get an error? That's because we forgot to run the migration and actually update our database Events table:
Run the migration!
\n$ sequelize db:migrate\n\n
Ok now resubmit the form... can you see your image on your newest event with an image?
"},{"id":"T0E6OlNlY3Rpb24tODI1Ng==","title":"Now Commit","htmlContent":"![\"dogicon\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P04-Creating-An-Event/assets/dog-icon.png\" "\\"\\""){kind=icon}
\n $ git add .\n$ git commit -m 'Users can create events'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODI1Nw==","title":"Stretch Challenge: Adding a TakesPlaceOn Attribute","htmlContent":"Events have to take place on a certain day. Can you add a takesPlaceOn attribute that is a Date, and then use <input type=\"date\"> elements? You might have to google for an example to see how this works.
We are building out all the Resourceful Routes for our Event resource.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
| /events/: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 event its own page and unique url path.
"},{"id":"T0E6OlNlY3Rpb24tMTA2MDY=","title":"Show One Event","htmlContent":"Remember, always start by building what the user will see and do. To create the show action, you will want to start by making a link to the event from our index action template. Your route has to follow the /events/:id structure.
SQL 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.
Add the View link in views/events-index.handlebars to the following:
<!-- views/events-index.handlebars -->\n\n...\n<a href=\"/events/{{this.id}}\" class=\"btn btn-primary\">View</a>\n...\n\n
What happens if you click on that link? A friendly error! Let's do what it says and make the route.
Build the /show route in app.js:
// app.js\n\n...\n\n// SHOW\napp.get('/events/:id', (req, res) => {\n res.send('I\\'m an event')\n});\n\n
Now what happens if you go to that route? It should say the text we are sending back. That's good! That means the route is working. Now let's take the next step.
Taking baby steps like this is a GREAT habit as a software engineer. Aim to take many small steps at a good pace.
"},{"id":"T0E6OlNlY3Rpb24tMTA2MDc=","title":"req.params & Event.findByPk()","htmlContent":"Ok time to add a template with an actual event object! We'll update our /show route to find the event we're looking for by its id using sequelize's findByPk method, which searches for a single instance by its primary key (which is the event id, in this case).
Replace your stub /show route in app.js with the following:
// app.js\n\n...\n\n// SHOW\napp.get('/events/:id', (req, res) => {\n // Search for the event by its id that was passed in via req.params\n models.Event.findByPk(req.params.id).then((event) => {\n // If the id is for a valid event, show it\n res.render('events-show', { event: event })\n }).catch((err) => {\n // if they id was for an event not in our db, log an error\n console.log(err.message);\n })\n})\n\n
Now if we go to the route, we'll see the error that no template events-show is found. That's great! We knew that didn't exist, so we were expecting this error. The program is working! Let's make the template now.
Create a new file views/events-show.handlebars, and put the following code in it:
<!-- views/events-show.handlebars -->\n\n<img src={{event.imgUrl}} />\n<h1>{{event.title}}</h1>\n<h2>{{event.desc}}</h2>\n\n
\nYou might need to add dataValues, (e.g. event.dataValues.imgUrl, event.dataValues.title, event.dataValues.desc) to make attributes render depending on your OS, and handlebars.
Now what do you see? All the View links to events should work now!
It makes sense from the user's perspective that after we create a new event, we should be automatically redirected to it, no? Let's change our create route to redirect to the show path.
Update the redirect line in your /create route in app.js to the following:
// CREATE\n...\n// CREATE\napp.post('/events', (req, res) => {\n models.Event.create(req.body).then(event => {\n // Redirect to events/:id\n res.redirect(`/events/${event.id}`)\n\n }).catch((err) => {\n console.log(err)\n });\n})\n...\n})\n
Try adding a new event now, and make sure it takes you to the events-show page after you create it.
Let's make that show template a little prettier with some bootstrap.
We'll wrap it in a responsive row and columns with an offset so its in the middle 6 columns of our container. We'll also add some classes that make the image responsively the full width (w-100 = width 100%), rounded corners, and a margin bottom level 3. And we'll use the .lead class to fancy-up the description text.
Update views/events-show.handlebars to the following:
<div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n <img class=\"img-fluid w-100 rounded mb-3\" src=\"{{event.imgUrl}}\" alt=\"Card image cap\">\n <h3>{{event.title}}</h3>\n <div class=\"lead\">{{event.desc}}</div>\n </div>\n</div>\n\n
Check out your new event page!
Now let's commit!
"},{"id":"T0E6OlNlY3Rpb24tMTA2MTE=","title":"Now Commit","htmlContent":"![\"event-show\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P05-Showing-One-Event/assets/event-show.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can see single events'\n$ git push\nNow our user experience is getting very smooth, and our code is getting more and more complete. Onward!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUyNQ==","slug":"editing-a-event","title":"Edit Route: Editing and Updating a Resource"},"previous":{"id":"T0E6OlBhZ2UtMTUyNQ==","slug":"editing-a-event","title":"Edit Route: Editing and Updating a Resource"}},{"id":"T0E6OlBhZ2UtMTUyNQ==","title":"Edit Route: Editing and Updating a Resource","slug":"editing-a-event","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI2NA==","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
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
| /events/:id | \nGET | \nshow | \n
| /events/:id/edit | \nGET | \nedit | \n
| /events/:id | \nPUT/PATCH | \nupdate | \n
Normally in a site like Eventbrite, we would only want authors of events to have the permission to edit or delete a event. However, because we do not have authentication yet, we're just going to let anyone edit and delete events.
"},{"id":"T0E6OlNlY3Rpb24tODI2NQ==","title":"Edit Link","htmlContent":"We want people to be able to edit and update events, let's again start from the user's perspective. Edit and Update are similar to New and Create:
events-edit\nSo let's make the edit link inside our responsive row and middle 6 columns:
Place the edit link directly underneath the div for desc in views/events-show.handlebars:
<!-- views/events-show.handlebars -->\n\n...\n\n <div class=\"text-right\">\n <a href=\"/events/{{event.id}}/edit\">Edit</a>\n </div>\n...\n\n
Ok now if we click that edit link, we'll see correctly that 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 event by its id in the url parameter, but then we render the information in a template as editable form elements.
Add the /edit route in app.js:
// app.js\n\n...\n\n// EDIT\napp.get('/events/:id/edit', (req, res) => {\n models.Event.findByPk(req.params.id).then((event) => {\n res.render('events-edit', { event: event });\n }).catch((err) => {\n console.log(err.message);\n })\n});\n\n
And of course we'll need that events-edit template. This template is a bit weird for three reasons:
value=\"\" - The form needs to display the current values of the event's attributes. We are using the value html attribute to pass in the values of the event 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.PUT HTTP action; however, HTML forms cannot take an action attribute of PUT only POST. We must find a sensible work around to HTML's shortcomings. We'll use a piece of middleware called methodOverride to get the right method. What we'll do is add this middleware and then add ?_method=PUT onto the end of the action. This way the server will be able to intercept the POST request and set it to PUT and then direct it towards our update action that takes a PUT HTTP request.Let's start by building out the responsive row and columns
Create the views/events-edit.handlebars file and add the following code to it:
<!-- views/events-edit.handlebars -->\n<div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n\n </div>\n</div>\n\n
Now add the Card boilerplate inside <div class=\"col-lg-6 offset-lg-3\"> from above:
<div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">\n <h3>Update Event</h3>\n </div>\n <div class=\"card-text\">\n\n </div>\n </div>\n</div>\n\n
Finally, add the form into the .card-text block from above:
<form action=\"/events/{{event.id}}?_method=PUT\" method=\"post\">\n <div class=\"form-group\">\n <label for=\"title\">Title</label>\n <input name=\"title\" class=\"form-control\" placeholder=\"Pickup Basketball\" value=\"{{event.title}}\" />\n </div>\n <div class=\"form-group\">\n <label for=\"imgUrl\">Image Url</label>\n <input name=\"imgUrl\" class=\"form-control\" placeholder=\"\" value=\"{{event.imgUrl}}\"/>\n </div>\n <div class=\"form-group\">\n <label for=\"desc\">Description</label>\n <textarea name=\"desc\" class=\"form-control\" placeholder=\"A description of your event.\">{{event.desc}}</textarea>\n </div>\n <div class=\"text-right\">\n <a href=\"/events/{{event.id}}\" class='text-muted mr-2'>Cancel</a>\n <button type=\"submit\" class=\"btn btn-primary\" name=\"button\">Update</button>\n </div>\n</form>\n\n
Here's an example of what the form should look like at this point:
If you submit this form now, it will say there is no POST route to this path. We have to initialize the methodOverride middleware to direct this route to the PUT update action.
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:
\n$ npm install method-override --save\n\n
After importing the new package use require('method-override') to import it into your project.
Now add methodOverride as middleware after const express = require('express') but before your routes.
const 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\n// UPDATE\napp.put('/events/:id', (req, res) => {\n models.Event.findByPk(req.params.id).then(event => {\n event.update(req.body).then(event => {\n res.redirect(`/events/${req.params.id}`);\n }).catch((err) => {\n console.log(err);\n });\n }).catch((err) => {\n console.log(err);\n });\n});\n\n
Make sure you're able to edit an event!
"},{"id":"T0E6OlNlY3Rpb24tODI2Nw==","title":"DRY Code & Sub Templates","htmlContent":"Did you notice that the code of our events-new and events-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.
Create views/partials/events-form.handlebars with the following code:
<!-- views/partials/events-form.handlebars -->\n\n<div class=\"form-group\">\n <label for=\"title\">Title</label>\n <input name=\"title\" class=\"form-control\" placeholder=\"Pickup Basketball\" value=\"{{event.title}}\" />\n</div>\n<div class=\"form-group\">\n <label for=\"desc\">Description</label>\n <textarea name=\"desc\" class=\"form-control\" placeholder=\"A description of your event.\">{{event.desc}}</textarea>\n</div>\n<div class=\"form-group\">\n <label for=\"imgUrl\">Image Url</label>\n <input name=\"imgUrl\" class=\"form-control\" placeholder=\"\" value=\"{{event.imgUrl}}\"/>\n</div>\n\n
And now we can use this partial to replace that information in both our new and edit templates.
Update both views/events-new.handlebars and views/events-edit.handlebars to the following:
events-new
\n<!-- views/events-new.handlebars -->\n\n<form action=\"/events\" method=\"post\">\n {{> events-form }}\n <div class=\"text-right\">\n <button type=\"submit\" class=\"btn btn-primary\" name=\"button\">Save</button>\n </div>\n</form>\n...\n\n
events-edit
\n<!-- views/events-edit.handlebars -->\n\n<div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">\n <h3>Update Event</h3>\n </div>\n <div class=\"card-text\">\n <form action=\"/events/{{event.id}}?_method=PUT\" method=\"post\">\n {{> events-form }}\n <div class=\"text-right\">\n <a href=\"/events/{{event.id}}\" class='text-muted mr-2'>Cancel</a>\n <button type=\"submit\" class=\"btn btn-primary\" name=\"button\">Update</button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n
Triumph! DRY code. (Don't Repeat Yourself). Be sure to test your code though by creating a new event and editing an event to make sure everything still works properly.
Reminder - Do not make partials unless the code is very long or repeated. Otherwise you are running the risk of \"overengineering\" your code.
"},{"id":"T0E6OlNlY3Rpb24tODI2OA==","title":"Product So Far","htmlContent":"Things are really starting to come together! Check out how nice our new event page looks now that we're using our styled partial for the form:
"},{"id":"T0E6OlNlY3Rpb24tODI2OQ==","title":"Now Commit","htmlContent":"![\"edit-form\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P06-Editing-An-Event/assets/edit-form.png\" "\\"\\"")
\n ![\"styled-new\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P06-Editing-An-Event/assets/styled-new.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can edit and update events'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODI3MA==","title":"Stretch Challenge: \"Cancel\" buttons","htmlContent":"Sometimes people might start making a resource and then want to cancel. Can you add a \"Cancel\" button next to the \"Save Event\" 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: Destroy!
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
| /events/:id | \nGET | \nshow | \n
| /events/:id/edit | \nGET | \nedit | \n
| /events/:id | \nPUT/PATCH | \nupdate | \n
| /events/:id | \nDELETE | \nDestroy | \n
As always, we start with what the users sees and does. So let's make a link to delete an event. We'll put it in the edit form so people don't click it accidentally.
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 following delete form to views/events-edit.handlebars following the pre-existing edit form block:
<!-- views/events-edit.handlebars -->\n...\n<form action=\"/events/{{event.id}}?_method=PUT\" method=\"post\">\n ...\n</form>\n<form action=\"/events/{{event.id}}?_method=DELETE\" method=\"POST\">\n <button type=\"submit\" class='btn btn-danger'>Delete</button>\n</form>\n...\n\n
Careful not to put a form inside another form. Neither will work.
Your events-edit template should look like this:
But there is no DELETE route, so if you submit this you'll get a helpful error telling you that. So we need a delete action route. After deleting the event, it should redirect to the home page (events-index) because the event will be gone.
Implement the /delete route in app.js:
// app.js\n...\n\n// DELETE\napp.delete('/events/:id', (req, res) => {\n models.Event.findByPk(req.params.id).then(event => {\n event.destroy();\n res.redirect(`/`);\n }).catch((err) => {\n console.log(err);\n });\n})\n\n
Ok now manually test your destroy action.
We did it! All Resourceful Routes for the Event resource are complete!
![\"events-edit\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P07-Deleting-A-Event/assets/edit-page.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can destroy events'\n$ git push\nBut there is still one problem. All the event 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 events Controller.
First make a folder called controllers, now add the file events.js to this folder.
Our app.js file is not aware that there is a controllers folder or a events controller yet. We have to connect them. There are basically two ways to connect this controller to our app:
In this case we are going to use the JavaScript ES5 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.
Take the /index function out from app.js and put it into the controllers/events.js file:
//events.js\n\nmodule.exports = function (app, models) {\n\n // INDEX\n app.get('/', (req, res) => {\n models.Event.findAll({ order: [['createdAt', 'DESC']] }).then(events => {\n res.render('events-index', { events: events });\n })\n })\n}\n\n
Now let's import our events.js file into our app.js file. We'll pass the app and our model Event into the file as well.
Add the following require into app.js:
// app.js\n...\n\nrequire('./controllers/events')(app, models);\n\n
Manually test that you can still navigate to the events-index page.
Once you've done that, now we need to do the same for the rest of our routes.
Migrate the rest of the events routes into the controllers/events.js controller file from app.js
Make sure to test all of your functionality to insure that you didn't accidentally break something in the code migration!
Now we have a views, controllers, and a db/models folders, finally getting a clean app.js file and the proper separation of concerns!
$ git add .\n$ git commit -m 'proper separation of concerns'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODM4Ng==","title":"Next Step - Pushing to Heroku","htmlContent":"So now it is refactored and all working, let's get this site live by pushing to heroku ... let's work on that next!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUyNw==","slug":"push-to-heroku-Dec=","title":"Push to Production with Heroku"},"previous":{"id":"T0E6OlBhZ2UtMTUyNw==","slug":"push-to-heroku-Dec=","title":"Push to Production with Heroku"}},{"id":"T0E6OlBhZ2UtMTUyNw==","title":"Push to Production with Heroku","slug":"push-to-heroku-Dec=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI3MQ==","title":"Push to Production with Heroku","htmlContent":"Time to ship some code! Since we've built and styled our Make Parties 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.
It can be fairly common to get Heroku set up. If you run into trouble, here are some resources to help you along the way:
And don't forget the best resource: Googling your error!
"},{"id":"T0E6OlNlY3Rpb24tODI3Mg==","title":"Sign Up For and Install Heroku","htmlContent":"First you need to create a Heroku account at heroku.com.
\nWe will only be using free tools from Heroku, but to add free versions of specific add-on's, Heroku will require a credit card or debit card number.
Then 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.
In Cloud9 it is already installed but should be updated:
\n$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh\n\nIn your computer you can install it with homebrew
\n$ brew install heroku/brew/heroku\n\n
Now login to heroku
\n$ heroku login -i\n\n
Now let's use the heroku command to create a heroku app and name it with \"make-parties\" and then our initials. So someone named Samantha Bee would be \"make-parties-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.
Run the heroku create command:
$ heroku create make-parties-YOURINITIALS\n\n
Navigate your browser to https://make-parties-YOURINITIALS.herokuapp.com and see that there is an error there, and that it instructs you to run heroku logs --tail.
Run heroku logs --tail in your terminal:
$ heroku logs --tail\n\n
After running that command, you should see something like this:
2018-12-14T19:07:54.989284+00:00 app[api]: Release v1 created by user ajbraus@gmail.com\n2018-12-14T19:07:54.989284+00:00 app[api]: Initial release by user ajbraus@gmail.com\n2018-12-14T19:07:55.926176+00:00 app[api]: Release v2 created by user ajbraus@gmail.com\n2018-12-14T19:07:55.926176+00:00 app[api]: Enable Logplex by user ajbraus@gmail.com\n2018-12-14T19:08:56.223988+00:00 app[api]: Deploy 8477ac80 by user ajbraus@gmail.com\n2018-12-14T19:08:56.223988+00:00 app[api]: Release v3 created by user ajbraus@gmail.com\n2018-12-14T19:08:56.245417+00:00 app[api]: Scaled to web@1:Free by user ajbraus@gmail.com\n2018-12-14T19:08:58.822761+00:00 heroku[web.1]: Starting process with command `npm start`\n2018-12-14T19:09:02.131028+00:00 heroku[web.1]: State changed from starting to crashed\n2018-12-14T19:09:02.136221+00:00 heroku[web.1]: State changed from crashed to starting\n2018-12-14T19:09:02.106945+00:00 heroku[web.1]: Process exited with status 1\n2018-12-14T19:09:02.035080+00:00 app[web.1]: npm ERR! missing script: start\n2018-12-14T19:09:02.044094+00:00 app[web.1]:\n2018-12-14T19:09:02.044534+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:\n2018-12-14T19:09:02.044699+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-12-14T19_09_02_037Z-debug.log\n2018-12-14T19:09:04.679625+00:00 heroku[web.1]: Starting process with command `npm start`\n2018-12-14T19:09:08.105133+00:00 heroku[web.1]: State changed from starting to crashed\n2018-12-14T19:09:08.083706+00:00 heroku[web.1]: Process exited with status 1\n2018-12-14T19:09:07.985068+00:00 app[web.1]: npm ERR! missing script: start\n2018-12-14T19:09:08.015827+00:00 app[web.1]:\n2018-12-14T19:09:08.016884+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:\n2018-12-14T19:09:08.017337+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-12-14T19_09_07_997Z-debug.log\n2018-12-14T19:09:10.316856+00:00 heroku[router]: at=error code=H10 desc=\"App crashed\" method=GET path=\"/\" host=make-parties-ajb.herokuapp.com request_id=e2405128-55ee-4c0a-b447-184d879f900a fwd=\"104.197.64.166\" dyno= connect= service= status=503 bytes= protocol=https\n2018-12-14T19:13:56.767347+00:00 heroku[router]: at=error code=H10 desc=\"App crashed\" method=GET path=\"/\" host=make-parties-ajb.herokuapp.com request_id=a543045a-1d7e-497f-b2cd-ef49095b4c9a fwd=\"142.254.99.26\" dyno= connect= service= status=503 bytes= protocol=https\n2018-12-14T19:13:57.468424+00:00 heroku[router]: at=error code=H10 desc=\"App crashed\" method=GET path=\"/favicon.ico\" host=make-parties-ajb.herokuapp.com request_id=339b35a7-399d-4420-822c-faaa3d328fb2 fwd=\"142.254.99.26\" dyno= connect= service= status=503 bytes= protocol=https\n^C\n
The important line here is in the middle:
2018-12-14T19:09:02.035080+00:00 app[web.1]: npm ERR! missing script: start\n
Heroku requires a start script. So we're going to add that through our package.json file.
Even if you don't receive any of these errors, it's important to still follow these steps so that your setup for heroku is correct.
\nHeroku calls npm start when it starts an node project. So you have to define that script in the package.json file.
Open package.json and add the following \"start\" script to it:
...\n \"scripts\": {\n \"start\": \"node app.js\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n...\n\n
Alright, now we can add and commit and push our code to heroku and open our new website.
Follow the usual commit steps, but this time we'll push to heroku master:
$ git add .\n$ git commit -m 'adding start script'\n$ git push heroku master\n\nNavigate your browser to https://make-parties-YOURINITIALS.herokuapp.com. 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.
It looks like the error is that we cannot connect to our PostgreSQL database. That's because it is looking at our db/config/config.json file and then at the production option, and then looking for the PROD_DATABASE_URL URI, but that is not defined on Heroku. So we have to add a PostgreSQL database to Heroku using an add-on called Heroku Postgres.
Add Heroku Postgres:
\n$ heroku addons:create heroku-postgresql:hobby-dev\n\n
We will still have problems though because we need to update our config.json.
Update db/config/config.json to have the following in the production section:
...\n \"production\": {\n \"use_env_variable\": \"DATABASE_URL\",\n \"dialect\": \"postgres\",\n \"dialectOptions\": {\n \"ssl\": {\n \"require\": true,\n \"rejectUnauthorized\": false\n }\n }\n }\n\n
We also need to add a Heroku config variable to mark that we are in production:
Add a Heroku config variable
\n$ heroku config:set NODE_ENV=production\n\n
Let's get our code onto Heroku now:
Push up to Heroku:
\n$ git add .\n$ git commit -m \"pushing heroku config info\"\n$ git push heroku master\n\nFinally, we need run our migrations onto Heroku as well before anything will work properly!
Run the following commands for the migration:
\n$ heroku run bash\n$ sequelize -m # this just makes sure sequelize is installed\n$ sequelize db:migrate\n\nOk now our database should connect, and we can navigate around our Heroku site!
"},{"id":"T0E6OlNlY3Rpb24tODI3Ng==","title":"WooHoo!","htmlContent":"If everything went well, you should be able to navigate to your Heroku site and see a blank version of our app:
Awwww yeah - you did it! You made your first RESTful and Resourceful app using Node.js, Express.js, and PostgreSQL! V1 is done and shipped!
"}]},"next":{"id":"T0E6OlBhZ2UtMTUyOA==","slug":"adding-rsvps","title":"Adding Rsvps (Form)"},"previous":{"id":"T0E6OlBhZ2UtMTUyOA==","slug":"adding-rsvps","title":"Adding Rsvps (Form)"}},{"id":"T0E6OlBhZ2UtMTUyOA==","title":"Adding Rsvps (Form)","slug":"adding-rsvps","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI3Nw==","title":"Adding Rsvps (Form)","htmlContent":"Let's not forget about our User Stories
At this point you should have a functioning site that creates and saves Events to a database. This system manages a single resource, which we've called a 'Event'. In this section you will add a new resource which will represent Rsvps or reservations to events. We'll call this resource \"Rsvps\" because \"reservations\" is very long and annoying to type and can increase the chance of typos.
Rsvps will be treated like Events. They will have a model that defines them, and they will have a table in the database.
Events will \"Have Many\" Rsvps and Rspvs will \"Belong To\" Events. And they will have two attributes: name and email.
Follow the same approach used in the tutorial, start with what users will see. Users looking at an Event may want to rsvp see who has already rsvp'd. Adding rsvps will require a button and then an rspvs-new form template to create the rsvp.
Let's add an rsvp column on the right. First remove the offset-lg-3 class on the events column, and then add a button for RSVPS:
<!-- views/events-show.handlebars -->\n<div class=\"row mt-4\">\n <div class=\"col-lg-6\">\n ...\n </div>\n\n <div class=\"col-lg-4 offset-lg-1\">\n <a href=\"/events/{{event.id}}/rsvps/new\" class=\"btn btn-primary btn-sm\">RSVP</a>\n </div>\n\n</div>\n\n
Continuing with Resourceful Routing we're going to be as resourceful as we can in building our Rsvps. We aren't going to do all seven routes, just three. And notice that these are Nested Routes under their parent event:
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| /events/:eventId/rsvps/new | \nGET | \nnew | \n
| /events/:eventId/rsvps | \nPOST | \ncreate | \n
| /events/:eventId/rsvps/:id | \nDELETE | \nDestroy | \n
So let's start by adding a new controller:
Create /controllers/rsvps.js and add the following code:
// controllers/rsvps.js\n\nmodule.exports = (app, models) => {\n // NEW\n app.get('/events/:eventId/rsvps/new', (req, res) => {\n models.Event.findByPk(req.params.eventId).then(event => {\n res.render('rsvps-new', { event: event });\n });\n });\n\n // CREATE\n\n // DESTROY \n}\n\n
And remember to require this in your app.js next to your other controller
Require the new controller in app.js:
// app.js\n\n...\nrequire('./controllers/events')(app, models);\nrequire('./controllers/rsvps')(app, models);\n\n
Now you can navigate to your rsvps new template using the button...but we still need to make the template!
"},{"id":"T0E6OlNlY3Rpb24tODI4MA==","title":"New Rsvp Template","htmlContent":"Let's make our views/rsvps-new.handlebars template:
<!-- views/rsvp-new.handlebars -->\n\n<div class=\"row mt-4\">\n <div class=\"col-lg-6 offset-lg-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">\n <h3>New RSVP</h3>\n <div class=\"lead\">\n Event: {{event.title}}\n </div>\n </div>\n <div class=\"card-text\">\n <form action=\"/events/{{event.id}}/rsvps\" method=\"post\">\n <div class=\"form-group\">\n <label for=\"title\">Name</label>\n <input name=\"name\" class=\"form-control\" placeholder=\"Jane Doe\" />\n </div>\n <div class=\"form-group\">\n <label for=\"title\">Email</label>\n <input name=\"email\" class=\"form-control\" placeholder=\"Jane.Doe@gmail.com\" />\n </div>\n <div class=\"text-right\">\n <a href=\"/\" class='text-muted mr-2'>Cancel</a>\n <button type=\"submit\" class=\"btn btn-primary\" name=\"button\">Save</button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n
Notice you used the same class names and markup used in the Events form. This form only has three form elements. One input for the name of the rsvp, one for email, and a button to submit the form.
Try clicking submit. Uh-oh! No create route (but we expected that!).
"},{"id":"T0E6OlNlY3Rpb24tODI4MQ==","title":"Creating the Rsvp","htmlContent":"Now we want to setup our rsvps create action so we have somewhere to submit our form to:
Add a /create route in controllers/rsvps.js:
// controllers/rsvps.js\n\n...\n\n// CREATE\napp.post('/events/:eventId/rsvps', (req, res) => {\n models.Rsvp.create(req.body).then(rsvp => {\n res.redirect(`/events/${req.params.eventId}`);\n }).catch((err) => {\n console.log(err)\n });\n});\n\n
If you try to run this (go ahead!), we'll see that this won't work yet because our next step is create a model and SQL db table for rsvps.
"},{"id":"T0E6OlNlY3Rpb24tODI4Mg==","title":"Adding an Rsvp Model","htmlContent":"Much like we did for Events, let's create the model and migration for rsvps:
Create a new RSVP model using sequelize:
\n$ sequelize model:create --name Rsvp --attributes name:string,email:string\n\n
Now we need to run the migration:
Run the migration:
\n$ sequelize db:migrate\n\n
This creates a model with a name and email attributes, but no association to the parent Event. If we want these two resources to be associated, then we'll need to associate their tables at the database level.
Remember that Rsvps \"Belong To\" Events, and Events \"Have Many\" Rsvps. This is called a One-To-Many Association. To establish this we need to add an attribute called EventId to the rsvp table.
Sequelize does not have any easy way to do this via migrations, so we are going to do this the hard way.
First make a custom migration using the sequelize generator:
\n$ sequelize migration:create --name add-event-id-to-rsvps\n\n
Now in the migration, let's add the EventId column then we are going to change the EventId column we just created to become a Foreign Key—the column that associates one table with another.
Update the new db/migrations/add-event-id-to-rsvps.js migration file to the following:
// migration\n\n'use strict';\n\nmodule.exports = {\n up: (queryInterface, Sequelize) => {\n return queryInterface.addColumn(\n 'Rsvps', // name of source model\n 'EventId', // name of key we are adding\n { \n type: Sequelize.INTEGER,\n references: { //Required field\n model: 'Events',\n key: 'id'\n },\n onDelete: 'CASCADE',\n onUpdate: 'CASCADE'\n }\n );\n },\n\n down: (queryInterface, Sequelize) => {\n return queryInterface.removeColumn('Rsvps', 'EventId');\n }\n};\n\n
We'll also need to update the Rsvp and Event models to define the \"has many\" and \"belongs to\" association:
Update the following models to accurately reflect the associations:
\n\ndb/models/rsvp.js
\n// db/models/rsvp.js\n...\n Rsvp.associate = function(models) {\n Rsvp.belongsTo(models.Event); // EventId\n };\n\n
db/models/event.js
\n// db/models/event.js\n...\n Event.associate = function(models) {\n Event.hasMany(models.Rsvp);\n };\n\n
Now we need to make sure the EventId attribute is set upon creation of an rsvp. We'll do this by updating the req.body object before creating the rsvp.
Update the /create route in controllers/rsvps.js to the following:
// controllers/rsvps.js\n...\n\n // CREATE\n app.post('/events/:eventId/rsvps', (req, res) => {\n req.body.EventId = req.params.eventId;\n models.Rsvp.create(req.body).then(rsvp => {\n res.redirect(`/events/${req.params.eventId}`);\n }).catch((err) => {\n console.log(err)\n });\n });\n\n
Last step before we can save rsvps is we need to actually run the migration we created!
Run the migration!
\n$ sequelize db:migrate\n\n
When you save the Rsvp, it should be setting the EventId attribute now to the parent event instance. That's good because we'll use that association in our queries going forward.
Test this out yourself:
Now that we've got Rsvps saving and associated with their parent event, we can use some nice sequelize queries to get associated rsvps.
In the events/show route, update our query to include rsvps.
// controllers/events.js\n\n...\n\n// SHOW\napp.get('/events/:id', (req, res) => {\n models.Event.findByPk(req.params.id, { include: [{ model: models.Rsvp }] }).then(event => {\n res.render('events-show', { event: event });\n }).catch((err) => {\n console.log(err.message);\n })\n});\n\n
Now in our template we can iterate over event.Rsvps to display them. We can also add a little counter of the number of rsvps above:
Update the .col-lg-4 offset-lg-1 block in views/events-show.handlebars to the following:
<!-- views/events-show.handlebars -->\n...\n<div class=\"col-lg-4 offset-lg-1\">\n <div class=\"d-flex justify-content-between\">\n <b>RSVPs ({{event.Rsvps.length}})</b>\n <a href=\"/events/{{event.id}}/rsvps/new\" class=\"btn btn-primary btn-sm\">RSVP</a>\n </div>\n\n <div class=\"list-group mt-4\">\n {{#each event.Rsvps}}\n <div class=\"list-group-item\">\n {{this.name}}\n </div>\n {{/each}}\n </div>\n</div>\n...\n\n
We've got almost everything hooked up, but what about that RSVP button on the event cards on the home page? Let's get those wired up too!
Update the <a> for RSVPs in views/events-index.handlebars to the following:
...\n\n<a href=\"/events/{{this.id}}/rsvps/new\" class=\"btn btn-info\">Rsvp</a>\n\n...\n\n
Try out the button, and make sure everything is working!
"},{"id":"T0E6OlNlY3Rpb24tODI4Nw==","title":"Product So Far","htmlContent":"Great work! You should now be able to see RSVPs for your event:
RSVP Form
Event Page With RSVPs
"},{"id":"T0E6OlNlY3Rpb24tODI4OA==","title":"Now Commit","htmlContent":"![\"heroku-live\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P08-Push-to-Heroku/assets/heroku-live.png\" "\\"\\"")
\n ![\"rsvp-form\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P09-Adding-Rsvps/assets/rsvp-form.png\" "\\"\\"")
\n ![\"rsvp-event\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P09-Adding-Rsvps/assets/rsvp-event.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'Users can see comments'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODI4OQ==","title":"What Just Happened?","htmlContent":"You created a relationship between two different tables in your database! Events each have a unique id. By saving the id of an Event with a Rsvp, we can find the Event that they are are associated with. Events can also find all of the Rsvps 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":"T0E6OlBhZ2UtMTUyOQ==","slug":"deleting-rsvps","title":"Deleting RSVPs"},"previous":{"id":"T0E6OlBhZ2UtMTUyOQ==","slug":"deleting-rsvps","title":"Deleting RSVPs"}},{"id":"T0E6OlBhZ2UtMTUyOQ==","title":"Deleting RSVPs","slug":"deleting-rsvps","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODI5OA==","title":"Deleting RSVPs","htmlContent":"Finally, since we are creating rsvps, 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 rsvps. If we developed this project for a real production use case, we would want to add authentication and only allow people to delete their own rsvps!
"},{"id":"T0E6OlNlY3Rpb24tODI5OQ==","title":"Deleting RSVPs","htmlContent":"You need to define a route. Here is the list of the current routes with a new one added for the rsvp form at the bottom.
| URL | \nHTTP Verb | \nAction | \n
|---|---|---|
| / | \nGET | \nindex | \n
| /events/new | \nGET | \nnew | \n
| /events | \nPOST | \ncreate | \n
| /events/:id | \nGET | \nshow | \n
| /events/:id/edit | \nGET | \nedit | \n
| /events/:id | \nPUT/PATCH | \nupdate | \n
| /events/:id | \nDELETE | \ndestroy | \n
| /events/:eventId/rsvps/new | \nGET | \nnew | \n
| /events/:eventId/rsvps | \nPOST | \ncreate | \n
| /events/:eventId/rsvps/:id | \nDELETE | \ndestroy | \n
We'll use the :id url parameter to look up the rsvp we want to destroy.
As always, we start with what the users sees and does. So let's make a link to delete a rsvp.
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 a button to each rsvp shown in an event by replacing the .list-group mt-4 block in views/events-show.handlebars with the following:
<!-- views/events-show.handlebars -->\n ...\n <div class=\"list-group mt-4\">\n {{#each event.Rsvps}}\n <div class=\"list-group-item clearfix\">\n <div class=\"float-left\">\n {{this.name}}\n </div>\n <div class=\"float-right\">\n <form class=\"form-inline\" action=\"/events/{{../event.id}}/rsvps/{{this.id}}?_method=DELETE\" method=\"post\">\n <button type=\"submit\" class=\"btn btn-link btn-sm\">Remove</button>\n </form>\n </div>\n </div>\n {{/each}}\n </div>\n ...\n\n
If you try to submit this form, it won't work yet, because the route it points to does not exist. That is our next step.
Notice how we always move from what the user interacts with, to the controllers, and then finally to the models and database, and not the other way around. We do this intentionally because it is faster, and makes leaner more usable code and products.
\nNow we need a destroy action route. After deleting the rsvp, it should redirect back to the parent event (events-show).
Add the following /delete route to controllers/rsvps.js:
// controllers/rsvps.js\n...\n // DELETE\n app.delete('/events/:eventId/rsvps/:id', (req, res) => {\n models.Rsvp.findByPk(req.params.id).then(rsvp => {\n rsvp.destroy();\n res.redirect(`/events/${req.params.eventId}`);\n }).catch((err) => {\n console.log(err);\n });\n });\n\n
Now try deleting a rsvp.
"},{"id":"T0E6OlNlY3Rpb24tODMwMg==","title":"Git Commit and Push, and Push to Heroku","htmlContent":"$ git add .\n$ git commit -m 'Users can delete rsvps'\n$ git push\n$ git push heroku master\nBefore you can test your project on Heroku, remember we made some changes to our DB, and we need to run the migrations on Heroku:
Run the migrations on Heroku
\n$ heroku run bash\n$ sequelize -m # this just makes sure sequelize is installed\n$ sequelize db:migrate\n\nOpen up your Heroku project and do some manual testing. Great work!
"},{"id":"T0E6OlNlY3Rpb24tODMwMw==","title":"What Happened","htmlContent":"So now we've completed all our user stories
You used Resource Based Development and Resourceful Routing to build a event based app! Now let's put some final touches on it to really tie it all together.
"}]},"next":{"id":"T0E6OlBhZ2UtMTUzMA==","slug":"bells-and-whistles-2ug=","title":"Bells and Whistles"},"previous":{"id":"T0E6OlBhZ2UtMTUzMA==","slug":"bells-and-whistles-2ug=","title":"Bells and Whistles"}},{"id":"T0E6OlBhZ2UtMTUzMA==","title":"Bells and Whistles","slug":"bells-and-whistles-2ug=","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tODMwNA==","title":"Bells and Whistles","htmlContent":"Now 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":"T0E6OlNlY3Rpb24tODMwNQ==","title":"Displaying \"Created At\" Time","htmlContent":"Let's display a timestamp of when the event was created. Normally this would require some middleware to accomplish our needs, but if you look at the migration files, you'll see that all of our models come with a createdAt definition by default! Now we just need to display them.
Update views/events-show.handlebars to include the createdAt property:
<!-- views/events-show.handlebars -->\n\n<div class=\"row mt-4\">\n <div class=\"col-lg-6\">\n <img class=\"img-fluid w-100 rounded mb-3\" src=\"{{event.imgUrl}}\" alt=\"Card image cap\">\n <small class=\"text-muted\">Created on: {{event.createdAt}}</small>\n\n <h3>{{event.title}}</h3>\n <div class=\"lead\">{{event.desc}}</div>\n <div class=\"text-right\">\n <a href=\"/events/{{event.id}}/edit\">Edit</a>\n </div>\n </div>\n\n...\n\n</div>\n
Refresh your browser and navigate to an event page. Seems a bit long for a date and time, doesn't it? What you see there is called a Unix timestamp.
Mon Nov 26 2018 12:57:54 GMT-0800 (Pacific Standard Time)\n
It technically says the date and time when the review was created, but it isn't very readable for humans! 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.
\nInstall moment\nbash\n$ npm install moment --save\n
Now update the /show route in controllers/events.js to format the createdAt date into something we can read:
...\n\napp.get('/events/:id', (req, res) => {\n models.Event.findByPk(req.params.id, { include: [{ model: models.Rsvp }] }).then(event => {\n let createdAt = event.createdAt;\n createdAt = moment(createdAt).format('MMMM Do YYYY, h:mm:ss a');\n event.createdAtFormatted = createdAt;\n res.render('events-show', { event: event });\n }).catch((err) => {\n console.log(err.message);\n })\n});\n\n...\n\n
Finally, let's use our new property:
Update views/events-show.handlebars to include the createdAtFormatted property:
<!-- views/events-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 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":"T0E6OlNlY3Rpb24tODMwNw==","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 the <head> tag in views/layouts/main.handlebars 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!.
"},{"id":"T0E6OlNlY3Rpb24tODMwOA==","title":"Product So Far","htmlContent":"Yours may look different depending on the styles/formatting you chose, but it should look similar to this now:
Home Page
Event Page
"},{"id":"T0E6OlNlY3Rpb24tODMwOQ==","title":"Now Commit","htmlContent":"![\"styled-home\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P11-Bells-And-Whistles/assets/styled-home.png\" "\\"\\"")
\n ![\"styled-event\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Make-Parties@59b30afc31a2388069df0dd61fcba41e95fd2d22/P11-Bells-And-Whistles/assets/styled-event.png\" "\\"\\"")
\n $ git add .\n$ git commit -m 'added createdAt, footer, and bootstrap theme'\n$ git push\n$ git push heroku master\nCongrats! Not too shabby for one of your first web apps! We encourage you to check out the stretch challenges in the last chapter to build this out even further!
"},{"id":"T0E6OlNlY3Rpb24tODMxMA==","title":"Feedback and Review - 2 minutes","htmlContent":"We 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
This allows us to get feedback on how well the students are grasping the learning outcomes, and tells us where we can improve the tutorial experience.
"}]},"next":{"id":"T0E6OlBhZ2UtMTUzMQ==","slug":"extra-challenges","title":"Extra Challenges"},"previous":{"id":"T0E6OlBhZ2UtMTUzMQ==","slug":"extra-challenges","title":"Extra Challenges"}},{"id":"T0E6OlBhZ2UtMTUzMQ==","title":"Extra Challenges","slug":"extra-challenges","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tNjMwNA==","title":"Extra Challenges","htmlContent":"This last chapter is all stretch challenges for those who want to dive deeper into the following areas:
If any of those sound interesting to you, check them out! We highly encourage it!
"},{"id":"T0E6OlNlY3Rpb24tNjMwNQ==","title":"Async / Await","htmlContent":"JavaScript ES7 (2016), a newer version than ES6 (2015), has a really neat feature that you can add to your project called async/await.
In some places in our code we have what is called Callback Hell. We can fix this once an for all with async/await.
Check out this example, which covers the /show route for a very similar event website to the one you just built.
This implementation:
app.get('/events/:id', (req, res) => {\n models.Event.findById(req.params.id).then(event => {\n event.getComments({ order: [ ['createdAt', 'DESC'] ] }).then(comments => {\n event.getRsvps({ order: [ ['createdAt', 'DESC'] ] }).then(rsvps => {\n res.render('events-show', { comments: comments, event: event, rsvps: rsvps });\n });\n });\n });\n});\n
is the same as:
app.get('/events/:id', async (req, res) => {\n let event = await models.Event.findById(req.params.id)\n let comments = event.getComments({ order: [ ['createdAt', 'DESC'] ] });\n let rsvps = event.getRsvps()\n res.render('events-show', { comments: comments, event: event, rsvps: rsvps });\n});\n
Notice that the whole function is called async, and the await keyword prefaces any function that returns a promise.
Try using this pattern to update one of your own routes.
\nImagine you get some feedback that people planning and rsvp'd to events would like to comment on the event like a \"wall\" on facebook.
Comments are a lot like Rsvps, so you should be able to add them by referencing that code.
Here are the steps you should take:
\n\nevents-show template below the {{event.desc}}.comments.js controller.content, and then add the foreign key EventId just like Rsvps has. (Reminder - make sure to add the association to the Comment and Event models)include: { all: true} to get all models associated with your event, and then access its comments via event.Comments like event.Rsvps.)event.Comments.Following our User Stories we are going to define a single Resource in this app called an Event.
A Resource is an abstract object that we use to organize data, code, and the features of our app. For example, in 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. Memorize this table of routes:
| URL | \nHTTP Verb | \nAction | \nWhat it Does | \n
|---|---|---|---|
| /events | \nGET | \nindex | \nSee all events | \n
| /events/new | \nGET | \nnew | \nSee new event form | \n
| /events | \nPOST | \ncreate | \nCreate a new event | \n
| /events/:id | \nGET | \nshow | \nSee one event | \n
| /events/:id/edit | \nGET | \nedit | \nSee an edit event form | \n
| /events/:id | \nPATCH/PUT | \nupdate | \nUpdate a event | \n
| /events/:id | \nDELETE | \ndestroy | \nDelete a event | \n
We're going to start with the index action and then show, and then we'll look at the create, edit, update, and delete.
Let's make a route to /events for the index action where we can see all the events 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 below the app.get('/'...) call in app.js:
// OUR MOCK ARRAY OF PROJECTS\nvar events = [\n { title: \"I am your first event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" },\n { title: \"I am your second event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" },\n { title: \"I am your third event\", desc: \"A great event that is super fun to look at and good\", imgUrl: \"https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn\" }\n]\n\n// INDEX\napp.get('/events', (req, res) => {\n res.render('events-index', { events: events });\n})\n\n
Notice how we are making a mock array of events, and sending that in as an object into the template { events: events }. So the variable events will be available in our template!
Send your browser to your /events path by going to http://localhost:3000/events. 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 'events-index'\". That makes sense because we haven't made it yet! It's ok to complete coding tasks that throw a predictable error, and then use that error like a sign post.
\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/events-index.handlebars. We're going to use the Handlebars.js {{#each}} iterator to loop over our array of events and display each one's title.
Add views/events-index.handlebars to your project, and then put the following code into it:
<!-- events-index -->\n<h1>Events</h1>\n{{#each events}}\n <h2>{{this.title}}</h2>\n <img class=\"img-fluid\" src=\"{{this.imgUrl}}\" alt=\"Card image cap\">\n <p>{{this.description}}</p>\n{{/each}}\n\n
If you refresh localhost:3000/events now what do you see?
\nYou should see the mock events we wrote into code. Can you add to them or change them?
\nLet's update the /events route to be our root route. Just change the path from /events to / and delete or comment out the hello world root route we made before.
Update the call to app.get('/') to render events-index in app.js:
// INDEX\napp.get('/', (req, res) => {\n res.render('events-index', { events: events });\n})\n\n
Now navigate to localhost:3000, and make sure you see those puppies!
$ git add .\n$ git commit -m 'Users can see all mock events'\n$ git push\n"},{"id":"T0E6OlNlY3Rpb24tODI1MQ==","title":"Stretch Challenge","htmlContent":"Still hankering for more? Use these Stretch Challenge sections to implement additional functionality to your project. Note that you will never need to implement these in order to finish the tutorial, but if you want extra practice, or want to try out some advanced functionality, then this is for you!
Can you make changes to your events array in app.js and see it reflected in your events-index template?