学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Ruby on Rails 6.0によるWebアプリケーション開発12 商品リストの表示

<<前  [TOP]  次>>


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

Pumaの起動
Pumaの起動


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


リストには1つも商品がありません。
「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]  次>>