Development

Change config/config.json username and password to conform to your postgres credentials.

To have your app run at port 1337,

$ export PORT=1337 && npm start

Style

We follow this Node.js Style Guide for writing consistent and well formatted node code. Please review the style guide.

Your final projects should include the .eslintrc file in this style guide, and all of the rules should pass (with no red flags or errors) upon submitting your final project.

Please review the rules.

Workshop

Adding blog post comments & tags

Work with a partner

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)?

Steps to launching this data-backed node app

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)

Routes

+---------------------------------------------------------------+
| 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      |
+---------------------------------------------------------------+

Partials for new and edit post

Create a blog post at `/posts/new`

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>

Edit a blog post at `/posts/edit`

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>

Use a Blog Post Form Partial

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

End of Sunday Workshop (9/11/2016)

Blog posts and comments

What is the relationship between posts and comments?

A blog post has many comments

A comment belongs to a blog post

One-to-Many

Objective

Add, show, edit, and delete comments to a blog post

What steps should we take to implement comments?
Think MVC: What routes should we have?

Comments routes

+-----------------------------------------------------------------------------------------+
| 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

Tagging

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

Be able to create tags on a blog post

What are the steps?

Challenge

Add a taggable input field to the edit blog post

See: http://sliptree.github.io/bootstrap-tokenfield/

Add Bootstrap, and use bootstrap-tokenfield.

amyhua/blogger