Let's make the app better

Addition of comment function

Scaffold Comment Scaffold the author name of the comment, the comment body, and the relationship to the Idea table (`reference`). `rails generate scaffold comment user_name:string body:text idea:reference`

Make a migration. rails db:migrate

Add a relationship to the model Make Rails aware of the connection between the Idea and the comment object.

app/models/idea.rb

class Idea < ApplicationRecord
has_many :comments

app/models/comment.rb

class Comment < ApplicationRecord
belongs_to :idea

View and edit comment form

app/views/ideas/show.html.erb

<p>
  <strong>Picture:</strong>
  <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
</p>

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: 'Delete Are you sure you want to?' } %></p>
  </div>
<% end %>
<%= render 'comments/form', comment: @comment %>

app/controllers/ideas_controller.rb

def show
  @comments = @idea.comments.all
  @comment = @idea.comments.build
end

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
</div>

<%= form.hidden_field :idea_id %>

Finally delete the following line:

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :idea_id %>
  <%= form.number_field :idea_id %>
</div>

Let's design using HTML & CSS

Apply application layout

app/assets/stylesheets/application.css

body { padding-top: 100px; }

Rewrite the above line as follows.

app/assets/stylesheets/application.css

body { padding-top: 60px; }

Finally, delete ʻapp / assets / stylesheets / scaffolds.scss`.

Let's improve navigation Always show the "New Idea" button in the navigation.

app/views/layouts/application.html.erb

<li class="active"><a href="/ideas">Ideas</a></li>
<li><%= link_to 'New Idea', new_idea_path %></li>

Idea list design

Rewrite as follows.

app/views/ideas/index.html.erb

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

<h2>Design a detail page for Idea</h2>

Rewrite as follows.


#### **`app/views/ideas/show.html.erb`**

<%= notice %>

Thumbnail display using Carrierrwave

Install ImageMagick Run `brew install imagemagick`,

gem 'carrierwave'

under,

gem 'mini_magick'

To add. Then execute the following command. bundle

Create thumbnail when uploading image

app/uploaders/picture_uploader.rb

 # include CarrierWave::MiniMagick

version :thumb do
  process :resize_to_fill => [50, 50]
end

Delete the # above.

Thumbnail creation

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

Is changed as follows.

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url(:thumb) if idea.picture.present? %>

Add authentication function with Decice

Add devise gem

gem 'devise'

To add. Then run the following command in the terminal. bundle

Set up devise on your app Execute the following command.

rails generate devise:install

Device environment settings Add the default url option to the environment file.

config/environments/development.rb

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

Add before ʻend`.

app/views/layouts/application.html.erb

<% if notice %>
  <p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>

Add the line above.

Also, delete the following:

app/views/ideas/show.html.erb

<p id="notice"><%= notice %></p>

Similarly, delete it in ʻapp / views / comments / show.html.erb. Because I added the same line to ʻapp / views / layouts / application.html.erb.

User model setup

Use the bundled generator script to create a User model.

rails generate devise User
rails db:migrate

Sign up and add login link Add the appropriate link or guidance that users can log in to in the upper right corner of the navigation bar.

app/views/layouts/application.html.erb

<p class="navbar-text pull-right">
  <% if user_signed_in? %>
    Logged in as <strong><%= current_user.email %></strong>.
    <%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link'  %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path, class: 'navbar-link'  %> |
    <%= link_to "Login", new_user_session_path, class: 'navbar-link'  %>
  <% end %>
</p>
<ul class="nav navbar-nav">
  <li class="active"><a href="/ideas">Ideas</a></li>
</ul>

Make it impossible to check the registered contents when you are not logged in last.

app/controllers/application_controller.rb

  before_action :authenticate_user!

Add before ʻend`.

Add profile picture with Gravatar

Add Gravtastic gem

gem 'gravtastic'

Add this under devise.

In Terminal, run the following command:

bundle

Set up Gravatar Add the following below the last line:

app/models/user.rb

include Gravtastic
gravtastic

Set Gravatar.

app/views/layouts/application.html.erb

<% if user_signed_in? %>

In, rewrite as follows.

app/views/layouts/application.html.erb

<% else %>
<%= image_tag current_user.gravatar_url %>

Let's design more

header design

app/assets/stylesheets/application.css

nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

table design Rewrite as follows.

app/views/ideas/index.html.erb

<table class="table">

Use the code below to resize the image.

<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>

Add the following to the end of ʻapp / assets / stylesheets / ideas.scss`.

app/assets/stylesheets/ideas.scss

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

Add style to footer

app/assets/stylesheets/application.css

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

Add style to button

app/assets/stylesheets/ideas.scs

.container input[type="submit"] {
   height: 30px;
   font-size: 13px;
   background-color: #f55e55;
   border: none;
   color: #fff;
 }