LoginSignup
0
0

More than 1 year has passed since last update.

#2 投稿機能

Posted at

はじめに

自分の学習復習のために、アプリを一から作成する手順を記事にしてます。
今回は #2 の投稿機能になります。
ラジオボタンやプルダウン選択のフィールドも使用して作成していきます。

目次

1.Model作成、マイグレーションファイルの編集
2.Controller,routes,viewファイルの作成
3.controllerの中身記述
4.viewファイルの中身記述

内容としてはシンプルですが、今回viewファイルの所でプルダウン選択やラジオボタンのフィールドも使用しているので、そちらの内容も理解していきましょう。

1. Model作成、マイグレーションファイルの編集

rails g model StudentPost

投稿用のStudentPostテーブルを作成します。
rails db:migrateを行えばデータベースに反映されるのですが、その前にマイグレーションファイルを編集していきます。

db/migrate/~~_create_student_posts.rb
create_table :student_posts do |t|
      t.string :user_id #投稿にユーザーIDを結びつけたい為
      t.string :title #投稿のタイトル
      t.text :body #投稿の本文
      t.integer :field #投稿の分野
      t.integer :status #投稿のステータス(状況)

      t.timestamps
    end

マイグレーションファイルに記述し、カラムを追加します。
rails db:migrateを先にしてしまうと、
マイグレーションファイルを編集できなくなってしまうので注意。

そして、、

rails db:migrate

これでデータベースに反映されました。

今回は、ユーザーと投稿が1:Nの関係になる為、モデル同士で関連づける必要があります。
(1:Nの意味がわからない方は調べてみてください)

~/models/student_post.rb
belongs_to :user
~/models/user.rb
has_many :student_posts, dependent: :destroy

2.Controller,routes,viewファイルの作成

次はcontrollerを作成し、ルーティングを作成し、viewファイルを作成するだけです。

rails g controller StudentPosts
student_posts_controller.rb
  def index
  end

  def show
  end

  def new
  end

  def create
  end
routes.rb
resources :student_posts, only: [:index, :show, :new, :create]

views/student_postsにindex.html.erb、show.html.erb、new.html.erbを作成する。

これでrails routesでURLを確認後、任意のページに遷移する事ができます。
ですが、まだviewページにもcontrollerに何も記述してないので、ページに遷移しても何も表示されません。
次は投稿用にcontrollerの中身を記述していきたいと思います。

3.controllerの中身記述

一覧表示させるindex.html.erb = indexアクション
投稿詳細用のshow.html.erb = showアクション
新規投稿ページのnew.html.erb = newアクション+createアクション+(ストロングパラメーター)
がそれぞれ必要になってくる。

student_posts_controller.rb
  def index
    @student_posts = StudentPost.all
  end

  def show
    @student_post = StudentPost.find(params[:id])
  end

  def new
    @student_post = StudentPost.new
  end

  def create
    @student_post = StudentPost.new(student_post_params)
    @student_post.user_id = current_user.id
    @student_post.save
    redirect_to student_posts_path
  end

  private

  def student_post_params
    params.require(:student_post).permit(:title, :body, :field, :status)
  end

そして最後にviewページの中身を記述していく。

4.viewファイルの中身記述

new.html.erb/index.html.erb/show.html.erbの3つを作成する。

new.html.erb
<%= form_with model:@student_post, local: true do |f| %>

<h4>タイトル</h4>
<%= f.text_field :title %>

<h4>内容</h4>
<%= f.text_area :body %>

<h4>分野</h4>
<%= f.select :field, [["選択肢1", "選択肢1"],["選択肢2", "選択肢2"]], include_blank: "選択して下さい" %>

<h4>ステータス</h4>
<%= f.radio_button :status, :受付中,  checked: "checked" %>
<%= f.label :status, "受付中" %>

<%= f.submit "新規投稿する" %>

<% end %>

indexとshowも適当に作成する。(レイアウトはお好みで後ほどいじる)

index.html.erb
<% @student_posts.each do |student| %>]
<h4>タイトル</h4>
<%= student.title %>
<h4>内容</h4>
<%= student.body %>
<h4>分野</h4>
<%= student.field %>
<h4>ステータス</h4>
<%= student.status %>
<% end %>
show.html.erb
<%= @student_post.title %>
<%= @student_post.body %>
<%= @student_post.field %>
<%= @student_post.status %>

表示させる事はできたので、後は配置だったりレイアウトを自分好みの形にするだけ!

最後に

以上で投稿機能の作成、表示が完了しました。
レイアウト面での作業が一番時間かかるので、レイアウトをいじる時は時間を確保して作成していきましょう!

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