Ruby on Rails を使って「W3Qみたいなアプリ」を作ってみる③

Ruby on Railsの使い方をマスターすべく、W3Qみたいなアプリを作ってみようと思います！

前回は環境構築したので、さっそく機能を作っていきます！

今回やること：質問投稿機能を作る

質問コントローラーとビューを作る

アプリのディレクトリへ移動して、質問を投稿するためのコントローラーを作る。

cd w3q-app
rails g controller posts index

・app/controllers/posts_controller.rb
・app/views/posts/index.html.erb
が作成されてます。
とりあえず、質問一覧（仮）が入るようにしてみる。

<h1>質問内容</h1>
<p>ここに気になることを投稿する</p>
<h2>質問一覧</h2>
<ul>
    <% @posts.each do |post| %>
        <li><%= post %></li>
    <% end %>
</ul>

class PostsController < ApplicationController
  def index
    #適当なpostsを用意
    @posts = ["test1","test2","test3"]
  end
end

Rails.application.routes.draw do
  #ルートディレクトリに表示するように設定
  get '/' => 'posts#index'
end

ひとまず、一覧表示はできた！
こんな感じです↓

質問テーブルを作る

rails g model Post content:text user_id:string

・app/model/post.rb
・app/db/migrate/20180808144010_create_posts.rb
が作成されてます。

マイグレーションファイルの中身
app/db/migrate/20180808144010_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.text :content
      t.string :user_id

      t.timestamps
    end
  end
end

マイグレーションファイルを使ってテーブルを作成

rails db:migrate

作成したテーブルの確認

コンソール開始
rails dbconsole

テーブルの情報表示
.shcema posts

表示内容
CREATE TABLE "posts" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "content" text, "user_id" varchar, "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);

終了
.quit

フォームの作成

テーブルができたので、フォーム入力からの値をテーブルに保存するとこを実装してみます。

htmlにform_tagを追加します。
link_toを使って、質問の個別ページへ遷移できるようにしておきます。

<h1>質問内容</h1>
<p>ここに気になることを投稿する</p>

<%= form_tag("/posts/create") do %>
    <textarea name="content"></textarea>
    <input type="submit" value="投稿">
<% end %>

<h2>質問一覧</h2>
<ul>
    <% @posts.each do |post| %>
        <li id="topic-<%= post.id %>">
            <%= link_to "/q/#{post.id}" do %>
                <span><%= post.id %>／<%= post.user_id %>／<%= post.created_at %></span>
                <br>投稿内容：<%= post.content %>
            <% end %>
        </li>
    <% end %>
</ul>

class PostsController < ApplicationController
  
  #投稿一覧表示
  def index
    @posts = Post.all.order(created_at: :desc)
  end

  #新規投稿
  def create
    #/posts/indexへリダイレクト
    @post = Post.new(
      content: params[:content],
      user_id: "test"
      )
    @post.save

    #元のページへ戻る（アクション：/posts/indexを呼び出す）
    redirect_to("/")
  end
end

Rails.application.routes.draw do
  #createのルーティングを追加
  post 'posts/create' => 'posts#create'
  get '/' => 'posts#index'
end

投稿してみるとこんな感じに反映されます↓

まとめ

今回は質問投稿の処理を作ってみました。

次回は回答の処理を作ってみます！