新規制作の準備
contents_controller.rbのnewメソッドを編集します
def new
@content = Content.new
end
これはインスタンス変数@contentにContentクラスをインスタンス化して代入しています
とりあえず新規でなにかユーザーから入力してもらう際はこのようにすると覚えましょう
あとは自動ですので
これで入力されたデータをデータベースに送る準備が出来ました
せっかくなのでViewも作り込みましょう
新規作成画面を作る
では新規作成画面を作りましょう
new.html.erbを編集していきます
とりあえずこちらを書いてください
<h1>新規作成</h1>
<%= form_with model:@content do |f| %>
<%= f.text_field :title %>
<%= f.file_field :image %>
<%= f.text_area :body %>
<%= f.submit '保存' %>
<% end %>
では説明します
まずHTMLファイルにRubyを書くときは
<% ここにRuby %>
と記述します
<%= こっちの場合もある %>
%=は表示するものを書きます
意味がわかりませんよね
例えばeach文で配列を繰り返し表示したいとします
その時はこうします
<% names = ['悟空', 'ベジータ-', 'フリーザ', 'セル'] %>
<% names.each do |name| %>
<%= name %>
<% end %>
ユーザーに表示したいコードはnameですよね
ユーザーに表示したいコードは<%= %>で記述します
それ以外の表示する必要の無いもの(eachやendや変数)などは<% %>に記述します
さて前置きが長くなりましたがここからnew.html.erbの記述について解説します
HTMLでもあるformをRailsで書いてます
これはform_withという機能で、書き方は
<%= form_with model:@content do |f| %>
<% end %>
という風にします
form_with model:コントローラーで作ったインスタンス変数 do |f|
と書きます
fの部分は何でもいいですがfとされることが多いです
これでf.text_fieldのように使えます
あとは上から順に
- タイトルを入れるテキストボックス
- 画像ファイルを選択するファイルフィールド
- 本文を入れたいのでテキストエリア
- そして送信ボタン
といった具合
さて実行しましょう
こうなってたらOK
よくサイトで見るパーツが並んでますね
デザインを整える
デザインが絶望的ですので整えます
まずは先程のnew.html.erbをこのように編集
<h1>新規投稿画面</h1>
<%= form_with model:@content do |f| %>
<div class='formGroup'>
<%= f.text_field :title, class: 'form-control', placeholder: 'メモタイトル' %>
</div>
<div class='formGroup'>
<%= f.file_field :image, class: 'form-control' %>
</div>
<div class='formGroup'>
<%= f.text_area :body, class: 'form-control', placeholder: 'メモ本文' %>
</div>
<div class='formGroup'>
<%= f.submit '保存', class: 'btn btn-primary' %>
</div>
<% end %>
今回はBootStrapも使っていきますので準備ます
app/views/layouts/application.html.erbを開きます
このように編集
<!DOCTYPE html>
<html>
<head>
<title>Memo</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<!--ここにBootStrapを入れます-->
<!--導入方法は後述します-->
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<!--divを追加-->
<div class='row'>
<div class="mainContentView col-sm-8 offset-sm-2">
<%= yield %>
</div>
</div>
</body>
</html>
application.html.erbは全ページ共通のパーツを書く部分です
new.htmlやindex.htmlなどは
<%= yield %>
に読み込まれ表示されます
BootStrapを入れましょう
<!-- ここにBootStrapを入れます -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
と記述でOK
保存します
次にCSSを設定していきましょう
CSSファイルは
app/assets/stylesheets/application.css
今回CSSはコピペでいいです
body{
background-color: #f0f8ff;
}
.formGroup{
margin: 30px;
}
.contentParts{
margin-top: 20px;
}
.contentParts img{
width: 300px;
}
.mainContentView{
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
margin-top: 30px;
background-color: #fff;
padding: 10px;
}
.memos{
margin-top: 20px;
font-size: 20px;
}
.memos a{
color: #000;
text-decoration: none;
}
.btn-delete{
color: #fff !important;
}
.line{
margin-top: 10px;
}
こうなりましたか?
データを保存する
次は送られてきたデータを保存する処理を書いていきます
コントローラーのcreateメソッドを編集します
def create
@content = Content.new(content_params)
@content.save
redirect_to content_path(@content)
end
# 省略
def destroy
end
private
def content_params
params.require(:content).permit(:title, :image, :body)
end
こちらで保存出来ます
ではcreateメソッドから解説
1行目
保存ボタンが押されたら新たにContentクラスをインスタンス化し、@contentに代入します
その際、引数にcontent_paramsメソッドを設置してます
これで入力されたデータを取得します
このメソッド解説は後述
2行目
1行目で取得したデータを保存します
3行目
保存されたら強制的に保存したメモの詳細画面に飛びます
今一度ルーティングを見てみましょう
詳細画面(show.html.erb)に行くにはcontent_pathというPathで飛べますね
ただこれだけだとどの詳細画面かわかりません
そこで引数に@contentを入れます
@contentにはnew.htmlで入力されたデータが入ってます
そのデータが入ってる詳細画面に飛ぶ!ってことで引数を設定してます
content_paramsについて解説
ここではどんなデータを受け取るかを指定してます
これがない場合悪意あるユーザーがモデルのtitleやimageをtitle_Weeyやimage_Foo!
などに書き換えることが出来ます
これは如何ともし難い問題です
そこでこの命令で指定したもののみ受け取ってあげるよ!としています
params.require(:content).permit(:title, :image, :body)
悪意あるユーザーに触られたくないので製作者側のみこのメソッドにアクセスできるよう「privateメソッド」にしています
では保存して一度サーバーを再起動して実行しましょう
URLはcontents/newですね
適当にメモと画像を入れて「保存」をクリック!
URLの「show/1」の「1」の部分はContentのIDです
ER図で確認した時に「自動で生成される」と説明しましたね
今回は初めて作ったContentですからもちろん番号は「1」になります
また新たに作ると次の番号は「2」なります
連番で作られるということですね
次回、保存データを確認する
今回はここまでです
お疲れさまでした
次回は今回保存したデータを呼び出して表示しましょう!
わからないところがあればコメント欄にて