- partials
- associations
- nested routes and resources
- Learn to utilize documentation
- Learn to write programs based on an algorithm
Establish a basic CRUD blog app
This blog app should be able to:
- Create a blog post at
/posts/new
- Edit a blog post at
/posts/edit
- Show a blog post at
/posts/:id
- Delete a blog post on
/posts/:id
What are the routes (contoller action, route, template)?
- Create a db connection (
db.js
) - Define your models (db tables)
- Create data schema (
models/*.js
) - Aka, data migrations
- Sync your models (
bin/www
)
Model.sync()
creates any missing tables
- Seed your database (with fixtures) (
seed.js
) - Create routes (controllers) (
routes/posts.js
)
- Controllers interact with:
- Models
- Views
- Mount your routes (
app.js
:app.use('/posts', posts)
) - Run your server (
$ node bin/www
)
+---------------------------------------------------------------+
| controller action | route | template |
+---------------------------------------------------------------+
| Create a blog post | GET /posts/new | new_post.ejs |
| | POST /posts | |
| Edit a blog post | GET /posts/:id/edit | edit_post.ejs |
| | POST /posts/:id/edit | |
| Show a blog post | GET /posts/:id | post.ejs |
| Delete a blog post | DELETE /posts/:id | post.ejs |
+---------------------------------------------------------------+
Bare bones:
new_post.ejs
<h1>New Post</h1>
<form action="/posts/new" method="post">
<label>Title</label>
<input type="text" name="title">
<label>Description</label>
<textarea name="description"></textarea>
</form>
Bare bones:
edit_post.ejs
<h1>Edit Post</h1>
<form action="/posts/edit" method="post">
<label>Title</label>
<input type="text" name="title">
<label>Description</label>
<textarea name="description"></textarea>
</form>
Implement an EJS partial post_form.ejs
for the blog post form, so that
in new_post.ejs
<h1>New Post</h1>
<form action="/posts/new" method="post">
<%- include _post_form.ejs %>
</form>
in edit_post.ejs
<h1>Edit Post</h1>
<form action="/posts/edit" method="post">
<%- include _post_form.ejs %>
</form>
_
underscore to indicate it's a partial
-
What steps should we take to implement comments?
-
Think MVC: What routes should we have?
+-----------------------------------------------------------------------------------------+
| controller action | route | template |
+-----------------------------------------------------------------------------------------+
| Create a blog post comment | GET /posts/:post_id/comments/new | new_comment.ejs |
| | POST /posts/:post_id/comments | |
| Edit a blog post comment | GET /posts/:post_id/comments/:id/edit | edit_post.ejs |
| | POST /posts/:post_id/comments/:id/edit | |
| Show a blog post comment | GET /posts/:id/comments/:id | comment.ejs |
| Delete a blog post comment | DELETE /posts/:id/comments/:id | comment.ejs |
+-----------------------------------------------------------------------------------------+
- Deleting a blog post should delete its comments
- Create a many-to-many relationship between posts and tags
- Be able to create tags on a blog post
- Add search functionality for posts with a given tag
- Deleting a blog post should delete its comments and delete its tags
- Add a taggable input field to the edit blog post
See: http://sliptree.github.io/bootstrap-tokenfield/
Add Bootstrap, and use bootstrap-tokenfield.