#一覧表示機能を実装する
投稿された全ての投稿を確認するための一覧表示機能を作成します。
indexアクションで、投稿データをDBから取得し、indexのビューで出力します。
#一覧表示アクションで投稿データを取得する。
PostsControllerのindexアクションを以下のように書き換えます。
indexアクションでは、全投稿のデータをPost.allで取得し、ビューに出力するためのインスタンス変数に格納します。
def index
@posts =Post.all
end
#一覧画面ですべての投稿を表示する
次にビューを実装します。@posts内の各Postオブジェクトの内容をテーブル形式で表示します。
h1 タスク一覧
= link_to '新規投稿', new_post_path, class: 'btn btn-primary'
.mb-3
table.table.table-hover
thead.thead-default
tr
th= Post.human_attribute_name(:content)
th= Post.human_attribute_name(:created_at)
tbody
- @posts.each do |post|
tr
td= post.content
td= post.created_at
#詳細表示機能を実装する
一覧画面内の投稿をクリックして、詳細画面に遷移する機能を作ります。
app/views/posts/index.html.slimの、投稿を表示している部分を以下に変えます。
td= link_to post.content, post
投稿部分がリンクになり、"post/[投稿ID]"という詳細表示のURLに遷移します。URLは、Railsが推測して作ってくれます。
続いてアクションを実装します。
def show
@post = Post.find(params[:id])
end
findメソッドを使って詳細表示にするためのPostオブジェクトを取得しています。
params[:id]には、paramsから得られるid、リクエストされたURL"posts/[投稿id]"の[投稿id]が格納されています。
続いてビューを修正し、投稿(@post)の各属性を表示するようにします。
h1 投稿の詳細
.nav.justify-content-end
= link_to '一覧'、posts_path, class: 'nav-link'
table.table.table-hover
tbody
tr
th= Post.human_attribute_name(:id)
td= @post.id
tr
th= Post.human_attribute_name(:content)
td= simple_format(h(@post.content), {}, sanitize: false, wrapper_tag: "div")
tr
th= Post.human_attribute_name(:created_at)
td= @post.created_at
tr
th= Post.human_attribute_name(:updated_at)
td= @post.updated_at
投稿内容は複数行にわたるテキストなので、改行コードを含む場合があります。改行コードはHTML自体の改行として扱われて、画面上では改行しているように見えません。文字列内の改行を<br>タグなどに変換する必要があります。
今回のsimple_formatメソッドでは、デフォルトのsanitizeオプションをfalseにし、hというメソッドでXSS(クロスサイトスクリプティング)対策を施しています。また、デザイン上の制約でwrapper_tagで<div>を指定しています。
これで、詳細表示機能が完成しました。
一覧画面で投稿をクリックすると…
投稿の詳細が確認できました!