\ プログラミング学習奮闘記録 /

Progate学習メモ Ruby on Rails5【SNSを作る③〜投稿詳細・新規投稿ページ〜】

目次

投稿詳細ページ

復習:postsテーブルを作ると、idカラム、created_atカラム、updated_atカラムの3つが自動生成される。

idカラム

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

created_atカラムとupdated_atカラム

データベースに保存された時刻が自動で入る。

updated_atはデータ更新時にも時刻が更新される。

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

投稿詳細ページでは、特定のidを取得して表示する。

特定のidの投稿を取得するためには、find_byメソッドを使う。

《ターミナル》

$ rails console

post = Post.fnd_by(id:3)

post.contents

=> “我が名はアシタカ”

  • モデル名.find_by(カラム名: )」とすることで、その値を持ったデータをデータベースから取得することができる

各投稿の投稿詳細ページを作成する

新たにページを作成する際には、ルーティング・ビュー・コントローラが必要!

→投稿詳細ページのURLに、表示したい投稿のidを入れるようにする

→そのidを持つデータを表示できるようにする

投稿詳細ページのルーティングを作成する

《ルーティング》

詳細ページにはshowアクションを作り、URLが「/posts/1」などの時にshowアクションに行くことにする。

get “posts/1” => “posts#show”

get “posts/2” => “posts#show”

get “posts/3” => “posts#show”

|  これだとデータの数だけ書かなければならないので、、、

↓  

《ルーティング》

get “posts/:id” => “posts#show”

《コントローラ》

def show

end

  • ルーティングのURL部分に「:」を用いて「posts/:id」と指定することで、「/posts/1」でも「/posts/2」でもshowアクションにいくようにすることができる
  • 注意:ルーティングは合致するURLを上から順に探すので、「posts/:id」というルーティングは「posts/index」より下に書く!

URLからidを取得する 変数params

《ルーティング》

get “posts/:id” => “posts#show”

《コントローラ》

def show

 @id = params[:id]  → {id:1}と言うハッシュが、変数paramsに入っている

end

《ビュー》

<%= @id %>

  • コントローラのアクション内では、ルーティングで設定したURLの「:id」の値を取得することができる
  • params[:id]とすることで、その値を取得することができる

詳細ページに投稿を表示する

《コントローラ》

showアクションで変数@postを定義し、idカラムの値がparams[:id]と等しい投稿をデータベースから取得して代入

def show

 @posts = Post.find_by(id: params[:id])

end

《ビュー》

@postをshow.html.erbで表示することで、各URLに対応した投稿のデータが表示される

<div class=”posts-show-item”>

 <%= @posts.content %>

 <div class=”post.time”>

  <%= @posts.created_at %>

 </div>

</div>

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

各投稿の内容の部分をクリックすると詳細ページに移動できるように、link_to(post.content, “/posts/#{post.id}”)とする。

《ビュー》

<% @post.each do|post| %>

 <div class=”posts-index-item”>

  <%= link_to(post.content,”/posts/#{post.id}”) %>

 </div>

<% end %>

  • link_toメソッドの使い方:link_to(リンクテキスト,リンク先URL)

新規投稿ページを作成する

新規投稿ページの準備

新規投稿ページは、「localhost:3000/posts/new」というURLでアクセスできるようにする。

→ルーティング、コントローラ、ビューを作成する

→アクションはnewアクションとする

《①ルーティングを追加する》

get “posts/index” => “posts#index”

get “posts/new” => “posts#new”

get “posts/:id” => “posts/show”

  • get “posts/:id” => “…”よりも上に書く

《②コントローラにnewアクションを追加する》

class PostsController < ApplicationController

 def new

 end

end

  • リスト
  • リスト

入力フォームを作成する

HTML & CSSの<textarea>タグや<input>タグを用いる。

【復習①】

一行のテキスト入力を受け取る:<input>(終了タグは不要)

複数行のテキスト入力を受け取る:<textarea></textarea>

【復習②送信ボタン】

<input type=”submit”>

  • type属性を指定することができ、type属性にsubmitを指定すると、送信ボタンになる
  • 日本語ブラウザでは、デフォルトで「送信」になる。

<input type=”submit” value=”保存”>

value属性に任意の値を指定することで、ボタンに表示されるテキストを変更できる!

【書き方例】

<div class=”form”>

 <div class=”form-body”>

  <textarea></textarea>

  <input type=”submit” value=”投稿”>

 </div>

</div>

投稿を保存する

フォームの投稿ボタンを押すと、Rails側に投稿データが送信される。

→例としてcreateアクションを用意して、受け取った投稿データをデータベースに保存するようにする

createアクションのルーティング

今までルーティングを書く際に「get」と書いてきたが、createアクションのようにデータベースに変更を加える場合は「post」とする必要がある

【書き方例】

get “posts/new” => “posts#new”

post “posts/create” => “posts#create”

フォームの送信先を指定する form_tagメソッド

form_tagメソッドでフォームに入力されたデータを送信できる。

【書き方例】

<% form_tag(“posts/create”) do %>

 <textarea></textarea>

 <input type=”submit” value=”投稿”>

<% end %>

  • form_tag(送信先のURL) do」のように送信先のURLを指定する
  • リスト

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

現段階の投稿機能の問題点

①createアクションに対するビューがない

②投稿を保存できない

リダイレクト redirect_toメソッド(①createアクションに対するビューがない問題を解決)

createアクションではビューを用意する代わりに、「リダイレクト」と言う、他のURLに転送する機能を使う。

→リダイレクトを用いて、投稿一覧に転送する

【書き方】

《コントローラ》

def create

 redirect_to(“/posts/index”)

end

  • redirect_toは「redirect_to(URL)」とすることで、指定のURLのページに転送できる。

投稿内容を保存する

STEP
投稿がcreateアクションに送信されるようにする

<textarea>タグにname属性を指定すると、入力データを送信することができるようになり、name属性の値をキーとしたハッシュがRails側に送られる。

【書き方】

<textarea name=”content”></textarea>

STEP
送信された内容をアクション内で受け取る

name属性を指定したフォームに入力されたデータは、コントローラのアクション内で受け取ることが可能になる

【書き方】

《コントローラ》

def create

 params[:content]

end

  • フォームのデータは、変数paramsで受け取る
STEP
データベースに投稿を保存する

Postインスタンスを作成する際にparams[:content]を用いる

【書き方】

《コントローラ》

def create

 @post = Post.new(contene: params[:content])

 @post.save

 redirect_to(“/posts/index”)

end

変数paramsまとめ

入力データを受け取るためのparamsはURLからidの値を取得するときにも使った。

【paramsの2通りの使い方】

  1. 「:○○」を使ったルーティングのURLから値を取得するget “posts/:○○
  2. 「name=”○○”」が付いたフォームの入力内容を受け取る<textarea name=”○○”></textarea>

params[:○○]で取得できる

投稿を並び替える orderメソッド

上から順に新しい投稿が表示されるようにする

【書き方】

def index

 @posts = Post.all.order(created_at: :desc)

end

  • order(カラム名: 並び替えの順序で使う
  • 並び替えの順序:昇順、古いものから(:asc)または 降順、新しいものから(:desc)
  • リスト
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次