1
0

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 5 years have passed since last update.

rails投稿機能の追加方法 ※自分メモ用

Last updated at Posted at 2019-07-10

2019/7/10

自動生成されるカラム確認

◎idカラムについて

idカラムには、データベースに保存される時に数字が自動で入る。
idは1から順に入っていき、データ毎に重複しないようになっている。

スクリーンショット 2019-07-10 10.19.39.png

◎created_atカラムとupdated_atカラムについて

created_atカラムとupdated_atカラムには、
データベースに保存された時刻が自動で入るようになっている。
updated_atはデータ更新時にも時刻が更新される。

スクリーンショット 2019-07-10 10.23.14.png

###find_byメソッドで投稿を取得する

特定のidの投稿を取得するためには、find_byメソッドを用いる。
find_byメソッドは、ある条件に合致するデータを取得することができます。
図のように、**「モデル名.find_by(カラム名: 値)」**とすることで、その値を持ったデータをデータベースから取得することができる。

スクリーンショット 2019-07-10 10.35.13.png

今回は↓↓↓

post = Post.find_by(id:3)

###投稿詳細ページを作成

ルーティング・アクション・ビューの思考が必要。
投稿詳細ページのURLに表示したい投稿のidを入れる必要がある。
そしてそのidを持つ投稿データを表示する。

スクリーンショット 2019-07-10 10.43.00.png

####①投稿詳細ページのルーティング

・showアクションを作る
・URLにidを含める
→ルーティングのURLの部分に**「:」を用いて"posts/:id"**と指定して
 「posts/1」「posts/2」でもshowアクションにいくようになる。

####②URLからidの取得

変数params

Controllerの場所で..↓↓↓

@id = params[:id]

####③投稿詳細ページ完成

〜Controllerタブ〜

showアクションで変数@postを定義してidカラムの値が
params[:id]と等しい投稿をデータベースから取得して代入します。
@postをshow.html.erbで表示することで、
各URLに対応した投稿のデータが表示されるようにしましょう!

スクリーンショット 2019-07-11 9.13.54.png

####④仕上げ

詳細画面へのリンクを作成する。

投稿一覧ページに、各投稿の詳細ページへのリンクを作成しましょう。
各投稿の内容の部分をクリックすると詳細ページに移動できるように、
link_to(post.content, "/posts/#{post.id}")とします。

スクリーンショット 2019-07-11 9.16.23.png

#新規投稿ページの作成

・新規投稿ページ準備

新規投稿ページは、「localhost:3000/posts/new」というURLでアクセスできるようにしましょう。
そのためにルーティング、アクション、ビューを追加しましょう。
アクションは、newアクションとしましょう。

スクリーンショット 2019-07-11 10.00.58.png

・入力フォームの作成

HTML & CSSのレッスンで学習した<textarea>タグや<input>タグを用いることで入力フォームを作成することができます。
送信ボタンにはtype="submit"と、value="投稿"を指定することに気をつけましょう。

スクリーンショット 2019-07-11 10.04.15.png

・投稿を保存する準備

・投稿を保存するまでの流れ
 フォームの投稿ボタンを押すと、Rails側に投稿データが送信されます。
 今回はcreateアクションを用意して、受け取った投稿データをデータベースに保存するようにします。
 createアクションのURLは「/posts/create」としましょう。

スクリーンショット 2019-07-11 10.07.37.png

=========================
####<※重要※>
・createアクションのルーティングを設定しましょう。
今までルーティングを書く際に「get」と書いてきましたが、フォームの値を受け取る場合は**「post」とする必要があります。(この「post」はPostモデルの「Post」とは関係ありません。)
通常は
「get」、フォームの値を受け取るときは「post」**というように覚えておきましょう。
=========================

スクリーンショット 2019-07-11 10.14.35.png

・フォームの送信先を指定

form_tagメソッドを用いると、フォームに入力されたデータを送信することができます。form_tagは、「form_tag(送信先のURL) do」のように送信先のURLを指定します。
これによって、<input type="submit" ...>のボタンを押した時に、指定されたURLにデータが送信されます。

スクリーンショット 2019-07-11 10.20.20.png

・createアクションの中身を作る

1、createアクションに対応するビューがない
2、投稿を保存できない

上記問題を解決しないことには、フォームを投稿し保存できないので、次のこと行う。

他のURLに転送(リダイレクト)するには、redirect_toメソッドを用います。
redirect_to「redirect_to(URL)」とすることで、そのページに転送することができます。

スクリーンショット 2019-07-11 10.33.05.png

転送はできたけど、保存ができてないので、次に行うのは、投稿内容を保存します。
送信されてきた値をDBに保存する。

・name属性

今の状態のフォームでは、投稿ボタンを押しても入力した内容をcreateアクションに伝えることができません。

タグに`name属性`を指定すると、入力データを送信することができるようになり、name属性の値をキーとした`ハッシュ`がRails側に送られます。 ![スクリーンショット 2019-07-11 10.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/699f39c2-50c3-deaf-403a-98b6540de26d.png) **・フォームに入力されたデータを受け取る** name属性を指定したフォームに入力されたデータは、コントローラのアクション内で受け取ることが可能になります。 フォームのデータは、`変数params`で受け取ります。paramsはname属性に設定した文字列をキーとしたハッシュになっています。 **・データベースに投稿を保存する** 実際に保存する手順に関しては、「rails console」で学んだことを思い出しましょう。 以下の図のように、Postインスタンスを作成する際に`params[:content]`を用います。そのPostインスタンスを保存することで投稿機能の完成です! ![スクリーンショット 2019-07-11 10.40.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/1824e973-9576-daba-1c17-43b9206ed6c7.png) **変数まとめ** 変数paramsのまとめ 入力データを受け取るためのparamsはURLからidの値を取得するときにも使いました。 paramsは以下の2通りの使い方があるので、整理して覚えておきましょう。 ①「:○○」を使った`ルーティングのURLから値を取得する` ②「name="○○"」が付いた`フォームの入力内容を受け取る`
1
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?