ブログアプリ⑤(記事を投稿できるようにしよう)

ビューからデータを送信して、データベースに保存する機能をつくるよ!

View

タイトル、本文、公開or下書きを選ぶ、送信ボタンを置いた

f:id:d_riko:20181202144530p:plain

views/articles/new.html.haml

= form_for @article do |f|
  = f.text_field :title, placeholder: "タイトルだよ"
  %br
  = f.text_area :text, placeholder: "本文だよ"
  %br
  = f.select :status, Article.article_statuses.keys.to_a
  %br
  = f.submit '送信するよ'

なおビューにstatusセレクトボックスの選択項目をベタがきしたくなかったので、modelファイルにenumで項目を書いてビューで呼び出すようにした

models/article.rb

class Article < ApplicationRecord
  enum article_status: {
    "公開する": 1,
    "下書きする": 2
  }
end
Controller

データを新規追加するためにcreateアクションでインスタンスの生成と保存する処理、あとストロングパラメーターを設定する

controllers/article_controller.rb

class ArticlesController < ApplicationController

  def create
    @article = Article.new(article_params)
    @article.save
  end

  private
  def article_params
    params.permit(:title, :text, :status)
  end
end

よーし試しにデータ登録してみるぞ!

f:id:d_riko:20181202145923p:plain

なんでや!

いやいや落ち着いてコンソールを見ようね

f:id:d_riko:20181202145846p:plain

いくつか気になるとこがあるね

  • Unpermitted parameter: ... :article, ...とあるのでarticleモデルが許可されてない?
  • Parametersのstatusで文字が送られてる。本当は番号を飛ばしたい
  • MySQLが動いたあと、createアクションのテンプレート無いよって言われてる。ごめんて

上から順に解決していこう

Unpermitted parameter

ストロングパラメーターを修正。articleモデルを許可してあげるイメージ

controllers/article_controller.rb

  def article_params
    params.require(:article).permit(:title, :text, :status)
  end

詳しくはここを見よう

railsguides.jp

statusで文字が送られてる

ここでやりたいことは下の2つ

  1. DBに番号で登録する
  2. 日本語で表記する

で、1はできたものの2ができなかった

gemのenum_helpを使ってみたもののうまくいかなかったんだよねー。しかもそこまで重要ではないので、妥協して1だけでよいものとして以下のように修正

views/articles/new.html.haml

  = f.select :status, Article.article_statuses
models/article.rb

  enum article_status: {
    active: 1,
    archive: 2
  }
createアクションのテンプレート無いよ

ひとまずnew(記事新規作成)の画面に戻るようにした

記事一覧or記事新規作成を選べるようにしたいなー

controllers/article_controller.rb

  def create
    @article = Article.new(article_params)
    @article.save
    redirect_to new_article_path
  end

よーし、今度こそデータ登録するぞ!

f:id:d_riko:20181202155826p:plain

送信するよ

f:id:d_riko:20181202155838p:plain

できたー!

次は保存したデータをビューで表示するようにするよ