Rails 投稿機能 #Ruby

Railsで投稿機能の作成です
部分的な備忘録ですので分かりづらいと思います

railsアプリケーション作成

$ rails _5.2.3_ new sample_boad -d mysql

Gem追加

bundle installとbundle updateを実行

gem 'pry-rails'
gem 'compass-rails', '3.1.0'
gem 'sprockets', '3.7.2'

データベース作成

$ rake db:create

モデル作成

$ rails g model tweet

テーブル作成

マイグレーションファイルはテーブルの設計図のようなものです。
t.の後に続いている記述は、どんなデータが入るのかを示す型です。

srting 文字(少なめ)
text 文字(多め)
integer 数字
などがあります。

timespasはcreated_at(作成時間) や updated_at(更新時間) を定義する時に使用します。
:nameや:textはカラム名です。

この場合、nameカラム(ユーザー名)をstring型(ユーザー名は文字少なめ)、textカラム(投稿された文章)をtext型(文章だから文字多め)、imageカラム(画像)をstring型としています。

2020XXXXXXXXXXXX_create_tweets.rb

class CreateTweets < ActiveRecord::Migration[5.2]
  def change
    create_table :tweets do |t|
      t.string :name
      t.text   :text
      t.string   :image
      t.timestamps null: true
    end
  end
end

rake db:migrateでマイグレーションファイルを実行

ルーティング

投稿一覧を表示するindexアクション　投稿画面を作成するためにnewアクション　投稿された内容を保存するためにcreateアクションを使います。

route.rb

Rails.application.routes.draw do
  resources :tweets only: [:index,:new,:create]
end

コントローラー

private以下はストロングパラメーターです。
ビューでフォームに入力された情報は、コントローラにキーと一緒にパラメーターとして送られます。
ストロングパラメーターは、指定したキーを持つパラメーターのみを受け取るようにするものです。
不正な情報を送信しようとしたときに、ストロングパラメーターを設定しておくと、不正な情報を受け取らずにすみます。

$ rails g controller tweets

tweets.controller.rb

class TweetsController < ApplicationController

  def index
    @tweets = Tweet.order("created_at DESC").page(params[:page]).per(5)
  end

  def new
  end

  def create
    Tweet.create(tweet_params)
  end

  private
  def tweet_params
    params.permit(:name,:image,:text)
  end
end

Tweet.order("created_at DESC")は、投稿された内容を降順に並び替えて表示させています。
つまり、新しい投稿ほど上に表示されます。
page(params[:page]).per(5)はページネーションです。説明は省略します。Gemはkaminariを使用しています。

ビュー作成

投稿一覧

index.html

<html>
<head>
  <title> Sample boad</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>

<body>
<header class="header">
  <h1>掲示板</h1>
  <%= link_to "投稿する", "/tweets/new" ,class: "send_btn"%>
</header>
<div class="comment">
  <% @tweets.each do |tweet|%>
  <div class="comment-list">
    <div class="title">
      <%= tweet.title%>
    </div>
    <div class="comments">
      <%= tweet.text %>
    </div>
  </div>
   <% end %>
</div>
<%= paginate(@tweets)%>
</div>
</body>
</html>

投稿完了画面

create.html

<div class="contents row">
  <div class="succes">
    <h3>
    投稿が完了しました
    </h3>
    <a class="btn" href="/tweets">投稿一覧へ戻る</a>
  </div>
</div>

投稿画面

7〜9行目に:name :image :textの記述があります。
これが、コントローラーに送信されるキーを表しています。ユーザーに入力された情報はキーと一緒にパラメーターとして送られます。
コントローラーでストロングパラメーターを使っているので、:userなど指定されていないキーは受け取られません。

new.html

<div class="contents row">
  <div class="container">
    <%= form_with(model: @tweet, local: true) do |form| %>
      <h3>
        投稿する
      </h3>
      <%= form.text_field :name, placeholder: "Nickname" %>
      <%= form.text_field :image, placeholder: "Image Url" %>
      <%= form.text_area :text, placeholder: "text", rows: "10" %>
      <%= form.submit "SEND" %>
    <% end %>
  </div>
</div>