(2)Railsで簡単なメモアプリを作ってみる
今回はモデルの作成とフォームの作成を行い
実際にデータベースに情報を保存できるようにします。
モデルの作成
rails g model post
migrateファイルやmodel/post.rbが作成されました。
db/migrate/~~_create_posts.rbはデータベースの設計図のようなもので
このファイルの中身を弄ってmigrateコマンドを入力することにより
データベースが定着し、使えるようになります。
db/migrate/20200623234501_create_posts.rb
class CreatePosts < ActiveRecord::Migration[5.2]
def change
create_table :posts do |t|
t.text :content ・・・ここを追加
t.timestamps
end
end
end
rails db:migrate
このようにcreate_tableとでればOKです。
migrateファイル確認方法
migrateをしたけどカラム名が間違っていた!
型の指定が違った!なんて時はすぐに削除したりするのはNGです。
schema.rbというファイルの中身とデータベースの情報に差異が生まれ
エラーが出てしまうからです。
rails db:rollback
rails db:migrate:status
上記の2つのコマンドをターミナルで入力すると
Statusがdownになっていることが確認できると思います。
これはrails db:create前に戻したよという意味なので
migrateファイルを修正して、もう一度migrateしなおせばOKです。
rails db:migrate
Sequel Proでもpostsテーブルがあることを確認できました。
テーブルにデータを保存する
テーブルにデータを入れる方法はいろいろあります。
・Sequel Proに直接入力
・コンソールから挿入
・seed.rbに記入して流し込む
しかし今回はフォーム作ってそこから入れる方法でいきます。
テスト無しのぶっつけ本番って感じですね。
投稿ページの作成
app/views/memo/new.html.haml
<h1>投稿ページ</h1>
<%= form_tag('/posts', method: :post) do %>
<input type="text" name="content">
<input type="submit" value="投稿する">
<% end %>
<%= link_to 'トップページ', '/' %>
http://localhost:3000/memo/new
こちらにアクセスすると上記のようなフォームができていると思います。
今のままでは、投稿してもデータを定着させる記述がないため
エラーが出てしまいます。
投稿を保存する設定(createアクション)
def create
Post.create(post_params)
redirect_to root_path
end
private
def post_params
params.permit(:content)
end
createアクションで投稿を定着させます。
(post_params)というメソッドをprivate以下に書くことにより
他のアクションでも使い回しが利くようになり、便利です。
redirect_toという記述がありますが
こちらは、保存した後にどこに遷移するかを指定できます。
今回はトップページに戻りたいので、root_pathとしています。
config/routes.rb
Rails.application.routes.draw do
root to: "memo#index"
resources :memo, only: [:new, :create]
end
resourcesにcreateを追加します。
app/controllers/memo_controller
def index
@posts = Post.all
end
トップページでpostテーブル情報が呼べるように@postsに代入します。
@posts :代入先
Post.all :Postテーブル情報を全て取得
app/views/memo/index.html.erb
<h1>Memo app</h1>
<% @posts.each do |post| %>
<ul>
<li>
<%= post.content %>
</li>
</ul>
<% end %>
<%= link_to '新規投稿', '/memo/new' %>
postテーブルに保存されている内容を全て取り出して表示します。
縦並びに表示したいので、<ul><li>で囲んでいます。
こちらはの表示方法はお好みで大丈夫です。
https://gyazo.com/b55bf707bce8a1bdc4564a81ab6654d0
これで一通りの投稿機能の実装が終わりました。
次回は編集機能を追加したいと思います。
ここまで読んでいただきありがとうございます。
間違いがあれば指摘していただけると助かります。
この記事が気に入ったらサポートをしてみませんか?