投稿詳細ページ
復習: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のページに転送できる。
投稿内容を保存する
<textarea>タグにname属性を指定すると、入力データを送信することができるようになり、name属性の値をキーとしたハッシュがRails側に送られる。
【書き方】
<textarea name=”content”></textarea>
name属性を指定したフォームに入力されたデータは、コントローラのアクション内で受け取ることが可能になる
【書き方】
《コントローラ》
def create
params[:content]
end
- フォームのデータは、変数paramsで受け取る
Postインスタンスを作成する際にparams[:content]を用いる
【書き方】
《コントローラ》
def create
@post = Post.new(contene: params[:content])
@post.save
redirect_to(“/posts/index”)
end
変数paramsまとめ
入力データを受け取るためのparamsはURLからidの値を取得するときにも使った。
【paramsの2通りの使い方】
- 「:○○」を使ったルーティングのURLから値を取得する:get “posts/:○○“
- 「name=”○○”」が付いたフォームの入力内容を受け取る:<textarea name=”○○”></textarea>
→params[:○○]で取得できる
投稿を並び替える orderメソッド
上から順に新しい投稿が表示されるようにする
【書き方】
def index
@posts = Post.all.order(created_at: :desc)
end
- order(カラム名: 並び替えの順序)で使う
- 並び替えの順序:昇順、古いものから(:asc)または 降順、新しいものから(:desc)
- リスト
コメント