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

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

Name: <%= @idea.name %>

Description: <%= @idea.description %>

<%= link_to 'Edit', edit_idea_path(@idea) %> | <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> | <%= link_to 'Back', ideas_path %>

```
```

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;
 }

Recommended Posts

Let's make the app better
Let's make Rails-like (View)
Let's understand the function!
Let's make a calculator application in Java ~ Display the application window
Make an instagram clone app ④
Make an instagram clone app ②
Let's understand the if statement!
Let's try the S2Struts tutorial (# 3_180425)
Let's solve the roman numerals
Let's understand the guard statement!
Let's try the S2Struts tutorial (# 5_180526)
Let's try the S2Struts tutorial (# 4_180505)
Let's try the S2Struts tutorial (# 1_180423)
Make an android app. (Day 5)
Let's make Rails-like 2 (controller edition)
Let's solve the FizzBuzz problem!
Let's understand the for-in statement!
Let's try the S2Struts tutorial (# 2_180424)
Make an instagram clone app ③
Let's understand the switch statement!
Make an instagram clone app ①
Let's make a combination without duplication | First, calculate the total number
Let's make a custom_cop that points out the shaking of the name
About the information sharing app band
Let's verify the image search filter
Make an android app. (First day)
Let's try the S2Struts tutorial (# 0_yymmdd)
Let's understand the Array (Element) type!
Yes, let's preview the image. ~ part5 ~
Image processing: Let's play with the image
Let's understand the Optional (Wrapped) type!
Let's attack the vulnerability (2) Open redirect