【Rails】簡単な掲示板機能①

DWCの基礎フェーズの知識を応用してHP内に簡単な掲示板機能を作成したのでここに残します。

※自分自身の掲示板そのものの知識が少ないため「こんなの掲示板じゃねーよ！」と思う方おりましたら先に謝ります笑

やりたいこと

• 風紀を乱さないために、掲示板のコミュニティは管理者側にて作成。
• 会員側では管理者側にて作成されたコミュニティごとに投稿できるようにする。
• 投稿の削除は、投稿した本人と管理者側にてできるようにする。

ER図イメージ

大まかな手順

1. ルーティング・モデル作成
2. 管理者側にてコミュニティを作成
3. 会員側にてコミュニティ一覧ページを作成
4. 会員側にてコミュニティごとの投稿一覧を作成
5. 管理者側にてコミュニティごとの投稿一覧を作成

ルーティング・モデル作成

ルーティング

routes.rb

:
  namespace :admin do
:
    resources :communities,only: [:index, :create, :show, :edit, :update, :destroy]do
        resources:post_boards,only: [:index,:destroy]
    end
:

コミュニティとこの後コミュニティ毎に作成される掲示板投稿はネストさせておきます。

モデル

各モデルとのアソシエーションの作成になります。

コミュニティ

community.rb

:
has_many :post_boards, dependent: :destroy
:

掲示板投稿

post_board.rb

:
belongs_to :community
belongs_to :user
:

会員

user.rb

:
has_many :post_boards, dependent: :destroy
:

管理者側にてコミュニティ作成

一覧ページ＆新規作成フォーム作成

一覧ページの中に新規作成フォームも混みで作成します。

コントローラ記述

admin/communities_controller

class Admin::CommunitiesController < ApplicationController
  def index
    @community = Community.new
    @communities = Community.all
  end

  def create
    @communities = Community.all
    @community = Community.new(community_params)
    @community.admin_id = current_admin.id # 管理者のadmin_idを指定
    if @community.save
      # コミュニティの新規登録が成功した場合の処理
      flash[:notice] = "登録に成功しました。"
      redirect_to admin_community_url(@community)
    else
      # コミュニティの新規登録が失敗した場合の処理
      flash.now[:alert] = "登録に失敗しました"
      render 'index'
    end
  end
  :
  :
  private

  def community_params
    params.require(:community).permit(:name, :explanation, :admin_id) # 必要なパラメータをpermit()メソッド内に指定する
  end
  
  
end

ビューの記述

※　bootstrapが混じっているため見辛くてごめんなさい笑

admin/views/communities/index.html.erb

<div class="container">
  <div class='row'>
    <div class="col-md-3 mt-5">
    <h3>コミュニティ作成</h3>
    
    <%= form_with(model: @community, url: admin_communities_path) do |f| %>
      <%= f.hidden_field :admin_id %>
      <div>
      <%= f.label :name,"コミュニティ名" %><br />
      <%= f.text_field :name, size: 30 , class: 'form-control'%>
      </div>
    
      <div>
      <%= f.label :explanation,"説明" %><br />
      <%= f.text_area :explanation, size: "30x5", class: 'form-control' %>
      </div>
    
      <div>
      <%= f.submit "作成する",class: "btn btn-sm btn-success px-5 mb-2 mt-2" %>
      </div>
    <% end %>
    </div>
    
    <div class="col-md-8 offset-md-1 mt-5">
      <h3>コミュニティ一覧</h3>
      <table class="table">
        <tr>
          <th class="col-4">コミュニティ名</th>
          <th class="col-7">説明</th>
          <th class="col-1"></th>
        </tr>
      <% @communities.each do |community| %>
        <tr>
          <td class="col-4"><%= link_to community.name, admin_community_path(community) %></td>
          <td class="col-7"><%= truncate(community.explanation, length: 100) %></td>
          <td><%= link_to "一覧",admin_community_post_boards_path(community) %></td>
        </tr>
      <% end %>
      </table>
    </div>
  </div>
</div>

admin_idっているか？って感じですが、今後管理者のアカウントが増えたときも考慮して一応入れておきます。新規作成時に表示されないように<%= f.hidden_field :admin_id %>としておきます。

完成形

レイアウトは管理者側なのでこんな感じでとりあえずそんなにこだわらないスタンスで行きます。コミュニティ名をクリックすると詳細に飛べるイメージです。

詳細・編集ページ作成＆削除機能

コントローラ記述

admin/communities_controller

:
  def show
    @community = Community.find(params[:id])
  end

  def edit
    @community = Community.find(params[:id])
  end

  def update
    @community = Community.find(params[:id])
    if @community.update(community_params)
      # コミュニティの更新が成功した場合の処理
      flash[:notice] = "更新に成功しました。"
      redirect_to admin_community_url@community
    else
      # コミュニティの更新が失敗した場合の処理
      flash.now[:alert] = "更新に失敗しました"
      render 'edit'
    end
  end

  def destroy
    @community = Community.find(params[:id])
    @community.destroy
    # コミュニティの削除が成功した場合の処理
    flash[:notice] = "削除に成功しました。"
    redirect_to admin_communities_path
  end
:

ビューの記述

admin/views/communities/show.html.erb

<div class="container mt-5">
  
  <h3 class="mb-5">コミュニティ詳細画面</h3>
  
  <h4 class="row mb-3">
    <div class="col-3">コミュニティ名 :</div>
    <div class="col-9"><%= @community.name %></div>
  </h4>
  
  <h5 class="row mb-3">
    <div class="col-3">説明 :</div>
    <div class="col-9"><%= @community.explanation %></div>
  </h5>
  
  <div class="row">
    <div class="col-4">
      <%= link_to '編集', edit_admin_community_path(@community), class:"btn btn-success mr-2" %>
      <%= link_to '削除', admin_community_path(@community), method: :delete, data: { confirm: '本当に削除しますか?' }, class: 'btn btn-danger' %>
    </div>
  </div>

</div>

admin/views/communities/edit.html.erb

<div class="container">
  <h3 class="row py-4">コミュニティ編集</h3>

  <%= form_with model: @community, url: admin_community_path(@community) do |f| %>
  
    <div class="row mt-2">
      <h4 class="col-3">コミュニティ名 :</h4>
      <div class="col-8"><%= f.text_field :name, size: 40, class: 'form-control' %></div>
    </div>
    
    <div class="row mt-2">
      <h4 class="col-3">説明 :</h4>
      <div class="col-8"><%= f.text_area :explanation , size: "40x5", class: 'form-control'%></div>
    </div>
    
    <div class="row">
      <%= f.submit '更新', class:"btn btn-success mt-3" %>
    </div>
    
  <% end %>

  </div>
</div>

完成形

• 詳細画面
  ただ削除と編集に飛べるだけのページなので割愛します。

• 編集画面
  

まとめ

今回は簡単掲示板機能に必要な手順の1～2までのルーティングや記述のとなります。
長くなりそうなので３部構成くらいで作成していこうと思います。
今回作成した顧客側のコミュニティの作成はDWCの基礎で教わった手順そのものになるので特に複雑さはありませんでした。
今回作成する掲示板は、自分自身の基礎を固めたいというのと、この受講期間のアウトプットの場にしたいと思うところもあり、基礎の積み重ねのような機能になりますが今後はいろいろな機能を盛り合わせた掲示板を作れるようにしたいと思います。