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

2019/7/10

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

**◎idカラムについて**

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

![スクリーンショット 2019-07-10 10.19.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/30edc4e7-732c-603f-ad10-f04d69591a46.png)

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

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

![スクリーンショット 2019-07-10 10.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/bb841868-fbf6-b724-0be5-68ca8ce7230f.png)


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

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

![スクリーンショット 2019-07-10 10.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/d9171e7d-26dc-640f-79d6-eba225ecd221.png)

今回は↓↓↓

```post = Post.find_by(id:3)```


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

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

![スクリーンショット 2019-07-10 10.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/64778c6f-d90d-c6df-7f8a-2eaf5bec19e7.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/f90d819e-17f9-7935-cb79-370927429c7f.png)

####④仕上げ

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

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

![スクリーンショット 2019-07-11 9.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/cb4c1cdb-fbd3-4d41-2691-0e3a8c2a8f73.png)

#新規投稿ページの作成

**・新規投稿ページ準備**

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

![スクリーンショット 2019-07-11 10.00.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/14e45d68-0594-06ca-0e6c-e2afd7cb5508.png)


**・入力フォームの作成**

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

![スクリーンショット 2019-07-11 10.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/1651ebd6-d618-0a08-de15-a33c82dc073e.png)


**・投稿を保存する準備**

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

![スクリーンショット 2019-07-11 10.07.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/57174a66-1aac-944f-8458-294a12437c00.png)

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

![スクリーンショット 2019-07-11 10.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/8f129fb0-5d7a-f75d-b8fa-495bca44b487.png)

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

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

![スクリーンショット 2019-07-11 10.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/b077a570-d2c3-9721-acb9-a6d7c4b4ea2f.png)

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

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

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

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

![スクリーンショット 2019-07-11 10.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435981/98e90de9-d333-e83d-9648-3c6f196884f5.png)

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

**・name属性**

今の状態のフォームでは、投稿ボタンを押しても入力した内容をcreateアクションに伝えることができません。
<textarea>タグに`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="○○"」が付いた`フォームの入力内容を受け取る`