アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

gemを使わず簡易の管理画面でお知らせ表示をさせる

f:id:simpledancer:20201001152646j:plain
管理画面に四苦八苦しました。
そして共同開発していたはずなのに、slackの@here ってメンションに最近は誰もスタンプをつけてくれない、、孤独!
全然進まないながらも、やっとこさ、最大の峠を超えた(多分)

一番ネックだった管理画面の機能が実装できました。
PMという立場だったので
最初は仕事振ってたのですが、「僕はできません」宣言をされ、(いや、メンターおるんやから、聞いて、、)その他のエラー部分も「ここまで調べたんですが、わからないのでやってもらっていいですか」と。
結局苦手なバックエンドを引き受けるということになってしまった。あーしんどい。

simpledancer.hatenablog.com

gemを使わない管理者画面の実装

手こずりました。
ここは前にブログで書きました。deviseで管理者ログインができた状態からスタートです。

simpledancer.hatenablog.com


前提として

  • 書き込めるのはログインした管理者のみ
  • 管理者ページから作成・編集・削除ができる
  • 内容がトップページに反映させる←ゴール!

今まで管理者画面自体は作ったことがあったのですが、管理者画面内、トップページ内どちらもお知らせ一覧を表示させるのがやり方が最初わからず
やべー私よくわかんないなー、逃げたいなー多分そんな難しくはないけどバックエンド触りたくないなー(という思いしかありませんでした。結果自分が実装する羽目になったんですけど)

adminコントローラーを作る

まずにdeviseでできたログイン機能があり、そこでログインしたら管理画面に移動し、操作が行えるようにするために管理画面のコントローラを作ります。

今回の場合はtop画面のnews(お知らせ)を管理者で作りたかったので(すでに他の人がtopのコントローラを生成しています)

$rails g controller admin::top

で、adminが使用するためのコントローラを作ります。

ものすごくシンプルですが

class Admin::TopController < ApplicationController
def index
@news = News.all.order(id: "DESC").limit(5)
end
 
def new
@news = News.new
end
 
def create
News.create(news_params)
end
 
def edit
@news = News.find(params[:id])
end
 
def update
news = News.find(params[:id])
news.update(news_params)
end
 
def destroy
 
news = News.find(params[:id])
news.destroy
 
end
private
 
def news_params
params.require(:news).permit(:date, :contents)
end

end

ものすごーく単純な作りですが、操作後どこどこに遷移、みたいなことをせずに、基本的にviewのなかでリンクを設置、降順で5件だけ表示させたいのでindexにはDEScと.limit(5)を追記

ルーティング


そしてルーティングですが、もっと簡略化できたのですけど、、

post "/admin/top/new", to: "admin/top#new"
post '/admin/top', to: "admin/top#create"
get '/admin/top/:id/edit', to: 'admin/top#edit'
patch '/admin/top/:id', to: 'admin/top#update'
delete '/admin/top/:id', to: 'admin/top#destroy'

namespace admin ~

でできるかな?と思ったのですけど、エラーが出たのでとりあえず今の所上記のルーティングで。

 もっとスマートな書き方もできると思います。

viewを作る

create,update,は端折ります。
new.html.erb

<div class="category_title">
<h2>新規投稿</h2>
</div>
<div class="news_new_form">
<%= form_with model: @news, url: "/admin/top", method: :post, local: true do |f| %>
<p>日付:<%= f.datetime_field :date %></p>
<p>内容:<%= f.text_field :contents %></p>
<%= f.submit "送信" %>
<% end %>
</div>

rails 5.1以降は form_withが一般的だそうです。
datetime_fieldにすると、日付を入れるときにカレンダーがでてくるのでユーザーフレンドリーではないでしょうか?と思って設定。

adminではない場合と書き方が違っていたり、色々試した結果、結局シンプルな
model,urlを指定するというやり方にするとうまく行きました。

index.html.erb

<div class="news_contents">
<% @news.each do |news| %>
<dl>
<dt><%= news.date %></dt>
<dd><%= news.contents %></dd>
 
<dd><%= link_to '削除', "/admin/top/#{news.id}", method: :delete,
data: {confirm:
"削除しますか?"} %></dd>
<dd><%= link_to '編集', "/admin/top/#{news.id}/edit", method: :get %></dd>
 
</dl>
<% end %>
</div>
 

 日付と内容を表示、
index内で削除と編集へのリンクも設置。
コントローラーで5件までと指定してるので画面には5件の内容が表示されるようになります。

 

topページに反映させる

管理画面の中で一覧表示ができたら、今度はトップページに表示をさせます。
(トップのコントローラーはすでに通常に作成されていると仮定)

top.index.html

<div class="news_contents">
<% @news.each do |news| %>
<dl>
<dt class="news_date"><%= news.date %></dt>
<dd class="news_contents"><%= news.contents %></dd>
</dl>
<% end %>
</div>

 ここにはもちろん編集や削除などは設置しません。
日付、内容のみが表示されるようにします。

f:id:simpledancer:20210120164137p:plain

CSSは調整してます。
こんな感じで5件分のお知らせ画面がトップページにも反映できました。

 

まとめ

忘れないうちに書いておこうと思ったので、かなり煩雑です。
admin/~で作成しないでおくと、管理者以外もログインせずに入れてしまったりして危険なため、(本当はコントローラにさらにbefore_actionなどの記述も必要)admin配下に生成する必要があります。
無駄に色々コントローラーやviewを作成してしまい、てんやわんやでしたなんと簡易の管理画面と投稿機能を作ることができました。

simpledancer.hatenablog.com