新規制作の準備

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になっていたらOKです

URLの「show/1」の「1」の部分はContentのIDです

ER図で確認した時に「自動で生成される」と説明しましたね

今回は初めて作ったContentですからもちろん番号は「1」になります

また新たに作ると次の番号は「2」なります

連番で作られるということですね

次回、保存データを確認する

今回はここまでです

お疲れさまでした

次回は今回保存したデータを呼び出して表示しましょう!

わからないところがあればコメント欄にて

絶対に挫折しないRailsアプリ制作04

コメントを残す

メールアドレスが公開されることはありません。

Rating

wp-puzzle.com logo