Rails6.0 | 12 | Webアプリケーション開発 | 商品リストの表示

<<前　 [TOP] 　次>>


コマンドプロンプトで「bin」フォルダに移動し、「rails server」で「Puma」を起動してください。

Pumaの起動

ブラウザで「http://localhost:3000/goods」にアクセスします。
以下ようなindexページが表示されます。

ブラウザの表示

リストには１つも商品がありません。
「New Good」のリンクをクリックしてみます。
登録フォームが表示されました。

商品登録フォーム

ビューを変更して見た目を少し変えてみます。
「C:\Rails6\work\shop\app\views\goods」フォルダにある「_form.html.erb」ファイルを以下のように編集してみます。
「<%= form.text_area :description, rows: 10, cols: 60 %>」の部分を変更しています。


【C:\Rails6\work\shop\app\views\goods\_form.html.erb】

<%= form_with(model: good, local: true) do |form| %>
  <% if good.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(good.errors.count, "error") %> prohibited this good from being saved:</h2>

      <ul>
        <% good.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :goods_id %>
    <%= form.number_field :goods_id %>
  </div>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description, rows: 10, cols: 60 %>
  </div>

  <div class="field">
    <%= form.label :image_url %>
    <%= form.text_field :image_url %>
  </div>

  <div class="field">
    <%= form.label :price %>
    <%= form.text_field :price %>
  </div>

  <div class="field">
    <%= form.label :date %>
    <%= form.datetime_select :date %>
  </div>

  <div class="field">
    <%= form.label :maker %>
    <%= form.text_field :maker %>
  </div>

  <div class="field">
    <%= form.label :category %>
    <%= form.text_field :category %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

「description」の入力部分が広くなっているのがわかります。

フォームの変更

では実際に商品を登録してみます。
フィールドに情報を入力して「Create Good」ボタンを押してみます。

情報入力

無事登録されました。

商品登録成功

「Back」ボタンで商品一覧画面に戻ると新しい商品がリストに表示されます。

商品リスト

↓↓クリックして頂けると励みになります。

<<前　 [TOP] 　次>>