Ruby on Rails in 3 Weeks(more) - Blog - Videos 10 - 16 - Homework Two

[jendiamond]

Go to Ruby on Rails in 3 Weeks

Everyone was so on top of it this week why don't we push through and finish the whole thing by next week. Then next week we can start a new one.

We will NOT be coding during the Meetup next time so be sure to finish before then. If you have any questions pose them in the google group.

Do the work for 10-16 in the videos.

10. Add Validation to Blog Posts
11. Edit and Delete Blog Posts
12. Add Comments to Blog Posts
13. Deleting Comments on Blog Posts
14. About Page -- Static Pages and Profile Picture
15. Add Users to Blog, Limit Options to Non-Users
16. Finish Blog App

The repository of the code

---

The directions from the video are written below.

Remember: $ means type this command in your terminal. Don't type it in. :)

+ Means add this code here. Don't type it in. :)

---

#10. Add Validation to Blog Posts

app/models/post.rb

class Post < ActiveRecord::Base
 +  validates :title, presence:true, length: { minimum: 5 }
 + validates :body, presence:true
end

---

app/controllers/posts_controller.rb

class PostController < ApplicationController
  def index
    @posts = Post.all.order('created_at DESC')
  end

 +    def new
 +     @post = Post.new
 +    end

  def create
    @post = Post.new(post_params)
 +      if @post.save
 +        redirect_to @post
 +     else
 +        render 'new'
 +      end
  end

  def show
    @post = Post.find(params[:id])
  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

---

app/views/posts/new.html.erb

<div id="page_wrapper">
  <h1>New Post</h1>

  <%= form_for :post, url: posts_path do |f|  %>

+  <% if @post.errors.any? %>
+    <div id="errors">
+      <h2><%= pluralize(@post.errors.count, "error") %>prevented this post from saving</h2>
+      <ul>
+        <% @post.errors.full_messages.each do |msg| %>
+          <li><%= msg %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>   
    <p>
      <%= f.label :title %><br>
      <%= f.text_field :title %>
    </p>
    <p>
      <%= f.label :body %><br>
      <%= f.text_area :body %>
    </p>
    <p>
      <%= f.submit %>
    </p>
  <% end %>  
</div>

---

#11. Edit and Delete Blog Posts

app/controllers/posts_controller.rb

class PostController < ApplicationController
  def index
    @posts = Post.all.order('created_at DESC')
  end

  ....
    (your other methods)
  ....

+  def edit
+    @post = Post.find(params[:id])
+  end

+  def update
+    @post = Post.find(params[:id])
+    if @post.update(params[:post].permit(:title, :body))
+      redirect_to @post
+    else
+      render 'edit'
+    end
+  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

---

Create a new file called app/views/posts/_form.html.erb

• Go to app/views/posts/new.html.erb
• Transfer/Delete the code below in the app/views/posts/new.html.erb and then
• Put it in the app/views/posts/_form.html.erb file

  <%= form_for :post, url: posts_path do |f|  %>
    <% if @post.errors.any? %>
      <div id="errors">
        <h2><%= pluralize(@post.errors.count, "error") %> prevented this post from saving </h2>
        <ul>
          <% @post.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
    <p>
      <%= f.label :title %><br>
      <%= f.text_field :title %>
    </p>

    <p>
      <%= f.label :body %><br>
      <%= f.text_area :body %>
    </p>

    <p>
      <%= f.submit %>
    </p>

  <% end %>

Change the first line in the app/views/posts/_form.html.erb file

  <%= form_for @post do |f|  %>

---

Change your app/views/posts/new.html.erb to look like this

<div id="page_wrapper">
  <h1>New Post</h1>
  <%= render 'form' %>
</div>

---

Create a new file called app/views/posts/edit.html.erb

<div id="page_wrapper">
  <h1>Edit Post</h1>
  <%= render 'form' %>
</div>

---

Update your app/views/posts/show.html.erb to add a link to be able to edit your post

<div id="post_content">
  <h1 class="title">
    <%+ @post.title %>
  </h1>
  <p class="date">
    Submitted <%= time_ago_in_words(@post.created_at) %> Ago
+    |  <%= link_to 'Edit', edit_post_path(@post) %>
  </p>

  <p class="body">
    <%= @post.body %>
  </p>
</div>

---

Update your app/controllers/posts_controller.rb to add a the action to be able to delete your post

class PostController < ApplicationController
  def index
    @posts = Post.all.order('created_at DESC')
  end

  ....
    (your other methods)
  ....

  def update
    @post = Post.find(params[:id])
    if @post.update(params[:post].permit(:title, :body))
      redirect_to @post
    else
      render 'edit'
    end
  end

+  def destroy
+    @post = Post.find(params[:id])
+    @post.destroy
+    redirect_to root_path
+  end

  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

---

Update your app/views/posts/show.html.erb to add a link to be able to delete your post

<div id="post_content">
  <h1 class="title">
    <%+ @post.title %>
  </h1>
  <p class="date">
    Submitted <%= time_ago_in_words(@post.created_at) %> Ago
      |  <%= link_to 'Edit', edit_post_path(@post) %>
+    |  <%= link_to 'Delete', post_path(@post), method: :delete, data: { confirm: 'Are you sure you want to delete this post?' }  %>
  </p>

  <p class="body">
    <%= @post.body %>
  </p>
</div>

---

#12. Add Comments to Blog Posts

Add a new Model called Comment so you can comment on your blog posts

$ rails g model Comment name:string body:string post:references

$ rake db:migrate

---

Add has_many :comments to the app/models/post.rb file to associate the post with the comments

class Post < ActiveRecord::Base
+  has_many :comments
  validates :title, presence:true, length: { minimum: 5 }
  validates :body, presence:true
end

---

Update your config/routes.rb file to add a link to nest the Comments into the Posts

Rails.application.routes.draw do

  resources :posts do
    resources :comments
  end

  root "posts#index"

end

---

Create the Comments Controller

$ rails g controller Comments

---

Update your new Comments Controller app/controller/comment_controller.rb to add a create action

class CommentsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment].permit(:name, :body))

    redirect_to post_path(@post)
  end
end

Create app/views/comments/_form.html.erb

<%= form_for([@post, @post.comments.build]) do |f| %>
  <p>
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </p>

  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>
  <br>
  <p>
    <%= f.submit%>
  </p>
<% end %>

Create app/views/comments/_comment.html.erb

<div class="comment clearfix">
  <div class="comment_content">
    <p class="comment_name"><strong><%= comment.name %></ strong></p>
    <p class="comment_body"><%= comment.body %></p>
    <p class="comment_time"><%= time_ago_in_words(comment.created_at) %>Ago</p>
  </div>
</div>

---

Update app/views/posts/show.html.erb

<div id="post_content">
  <h1 class="title">
    <%+ @post.title %>
  </h1>
  <p class="date">
    Submitted <%= time_ago_in_words(@post.created_at) %> Ago
      |  <%= link_to 'Edit', edit_post_path(@post) %>
+    |  <%= link_to 'Delete', post_path(@post), method: :delete, data: { confirm: 'Are you sure you want to delete this post?' }  %>
  </p>

  <p class="body">
    <%= @post.body %>
  </p>

  <div id="comments">
    <h2><%= @post.comments.count %> Comments </h2>
    <%= render @post.comments %>

    <h3>Add a comment: </h3>
    <%= render "comments/form" %>
  </div>
</div>

---

#13. Deleting Comments on Blog Posts

Update your Comments Controller app/controller/comment_controller.rb to add a delete action

class CommentsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(params[:comment].permit(:name, :body))

    redirect_to post_path(@post)
  end

+  def destroy
+    @post = Post.find(params[:post_id])
+    @comment = @post.comments.find(params[:id])
+    @comment.destroy

+    redirect_to post_path(@post)
+  end
end

---

Update your app/views/comments/_comment.html.erb so you can delete a comment

<div class="comment clearfix">
  <div class="comment_content">
    <p class="comment_name"><strong><%= comment.name %></ strong></p>
    <p class="comment_body"><%= comment.body %></p>
    <p class="comment_time"><%= time_ago_in_words(comment.created_at) %>Ago</p>
  </div>
  <p><%= link_to 'Delete', [comment.post, comment], 
                                            method: delete, 
                                            class: "button", 
                                            data: { confirm: 'Are you sure you want to delete your comment?' } %>
  </p>
</div>

---

#14. About Page -- Static Pages and Profile Picture

Update your app/models/post.rb to include dependent: :destroy to make sure that when the post is deleted that all the associated comments are also deleted

class Post < ActiveRecord::Base
+  has_many :comments, dependent: :destroy
  validates :title, presence:true, length: { minimum: 5 }
  validates :body,  presence:true
end

---

Create a Pages Controller

$ rails g controller pages

---

In your new app/controller/pages_controller.rb add an about action

class PagesController < ApplicationController

  def about
  end

end

---

Update your config/routes.rb file to add a link to the About Page

Rails.application.routes.draw do

  resources :posts do
    resources :comments
  end

  root "posts#index"

  get '/about', to: 'pages#about'
end

---

Update your app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  ...
    the rest of the code
  ...
  <body>

  <div id="sidebar">
    <ul>
      <li class="category">Websites</li>
      <li><%= link_to "Blog", root_path %></li>
+      <li><%= link_to "About", about_path %></li>
    </ul>

  ...
    the rest of the code
  ...

  </body>
</html>

---

Create app/views/pages/about.html.erb

<div id="page_wrapper">
  <div id="profile_image">
    <%= image_tag "profile.jpg" %>
  </div>

  <div id="content">
    <h1> Hi! I am user!</h1>
    <p>
      Cupcake ipsum dolor sit amet I love. Topping chupa chups muffin cotton candy candy canes cake biscuit candy jelly beans. Liquorice I love sweet roll dessert pie chupa chups bonbon. I love croissant lemon drops muffin gummi bears chocolate bar.
    </p>
  </div>
</div>

---

Add an image called profile.jpg in app/assets/images

#15. Add Users to Blog, Limit Options to Non-Users

Get the most recent version of the Devise Gem and Add it to your Gemfile

gem 'devise', '~> 3.5.2'

Bundle your Gemfile

$ bundle

Re-Start your server

$ rails g devise:install

Add this line to the bottom of your config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

---

Wrap the app/view/devise/sessions/new.html.erb in <div id="page_wrapper"> code</div>

+ <div id="page_wrapper">
    <h2>Log in</h2>

    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <div class="field">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true %>
      </div>
     ...
       the rest of your code
     ....
    <div class="actions">
      <%= f.submit "Log in" %>
    </div>
  <% end %>

  <%= render "devise/shared/links" %>
+ </div>

Add a before_action to your app/controller/post_controller.rb

class PostsController < ApplicationController
+  before_action :authenticate_user!, except: [:index, :show]

  def index
    @posts = Post.all.order('created_at DESC')
  end
  ...
    the rest of your code
  ....
  private

  def post_params
    params.require(:post).permit(:title, :body)
  end
end

---

Add some authentication to app/views/layouts/application.html.erb using Devise methods

<!DOCTYPE html>
<html>
<head>
  ...
    the rest of the code
  ...
  <body>

  <div id="sidebar">
    <ul>
      <li class="category">Websites</li>
      <li><%= link_to "Blog", root_path %></li>
      <li><%= link_to "About", about_path %></li>
    </ul>
  ...
    the rest of the code
  ...
  <div id="sidebar">
    <ul>
      <li class="category">Websites</li>
      <li><%= link_to "Blog", root_path %></li>
      <li><%= link_to "About", about_path %></li>
    </ul>
    <ul>
      <li class="category">Social</li>
      <li><a href="https://github.com/CrashLearner">Github</a></li>
      <li><a href="mailto:yon@crashlearner.com">Email</a></li>
    </ul>
+ <% if !user_signed_in? %>
      <p class="sign_in">Admin login</p>
+ <% end %>
  </div>

  <div id="main_content">
    <div id="header">
      <p>All Posts</p>
+   <% if user_signed_in? %>
        <div class="buttons">
          <button class="button"><%= link_to "New Post", new_post_path%></button>
          <button class="button">Log Out</button>
        </div>
      </div>
+  <% end %>
    <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert") %>
    <% end %>

    <%= yield %>
  </div>
</body>
</html>

---

Update your app/views/posts/show.html.erb to only allowe a signed in user to be able to delete or edit a post

<div id="post_content">
  <h1 class="title">
    <%= @post.title %>
  </h1>

  <p class="date">
    Submitted <%= time_ago_in_words(@post.created_at) %> Ago
+    <% if user_signed_in? %>
        | <%= link_to 'Edit', edit_post_path(@post) %>
        | <%= link_to 'Delete', post_path(@post), method: :delete, data: {
                    confirm: 'Are you sure you want to delete this post?' } %>
+    <% end %>
  </p>

  <p class="body">
    <%= @post.body %>
  </p>

  <div id="comments">
    <h2><%= @post.comments.count %> Comments </h2>
    <%= render @post.comments %>

    <h3>Add a comment:</h3>
    <%= render "comments/form" %>
  </div>
</div>

---

Update your app/views/comments/_comment.html.erb to only allow a signed in user to be able to delete or edit a post

<div class="comment clearfix">
  <div class="comment_content">
    <p class="comment_name"><strong><%= comment.name %></strong></p>
    <p class="comment_body"><%= comment.body %></p>
    <p class="comment_time"><%= time_ago_in_words(comment.created_at) %>Ago</p>
  </div>
+  <% if user_signed_in? %>
      <p><%= link_to 'Delete', [comment.post, comment],
                             method: :delete,
                             class: "button",
                             data: { confirm: 'Are you sure you want to delete your comment?' } %>
      </p>
+  <% end %>
</div>

---

#16. Finish Blog App

You are finished! :)

Add more functionality

Add Tests

Or just move on to the Pinterest App

---

[eaglerockdude]

I am unclear on whether or not we can view or watch the videos. It looks like u have to be a paid member...or do we have access?

[kkchu791]

Hey Ken,

The videos should be free to everyone. Here's the link again :
https://www.skillshare.com/classes/technology/Ruby-on-Rails-in-3-Weeks-Build-Evernote-Pinterest-and-Wordpress/1493287244?via=search-layout-grid

I know on that site the other tutorials require you to pay, but
surprisingly these vids are free.

On Thu, Aug 13, 2015 at 10:12 AM, ken mcfadden [email protected]
wrote:

I am unclear on whether or not we can view or watch the videos. It looks
like u have to be a paid member...or do we have access?

—
Reply to this email directly or view it on GitHub
https://github.com/LARailsLearners/three-in-one_blog/issues/2#issuecomment-130764389
.

[eaglerockdude]

At first I was getting a link to join, but now they seem to be free.

thanks.
On 8/13/15 11:23 AM, kkchu791 wrote:

Hey Ken,

The videos should be free to everyone. Here's the link again :
https://www.skillshare.com/classes/technology/Ruby-on-Rails-in-3-Weeks-Build-Evernote-Pinterest-and-Wordpress/1493287244?via=search-layout-grid

I know on that site the other tutorials require you to pay, but
surprisingly these vids are free.

On Thu, Aug 13, 2015 at 10:12 AM, ken mcfadden [email protected]
wrote:

I am unclear on whether or not we can view or watch the videos. It looks
like u have to be a paid member...or do we have access?

—
Reply to this email directly or view it on GitHub

https://github.com/LARailsLearners/three-in-one_blog/issues/2#issuecomment-130764389
.

—
Reply to this email directly or view it on GitHub
https://github.com/LARailsLearners/three-in-one_blog/issues/2#issuecomment-130788821.