2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails 投稿機能

Posted at

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

##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>
2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?