前回は、railsプロジェクト作って、モデルとコントローラーとビューのファイルを作りました。
今回は、マイグレーションファイルとコントローラーをいじって商品が一覧で表示できるようにしていきます！また。詳細画面も作成します。
データベースの準備
データベースのモデルはとりあえず以下のようにしていきます。
Usersモデル
| ID | name | seller_flag | mail_address | pass_word |
|---|---|---|---|---|
| 元からあるやつ | ユーザ名 | 出品者かどうか判定する | メールアドレス | パスワード |
Productsモデル
| ID | product_name | seller | stock |
|---|---|---|---|
| 元からあるやつ | 商品名 | 出品者が誰か | 在庫数 |
マイグレート
マイグレートするファイルはdb/migrate配下にあります。20230723のような数字がありますが、この記事ではバージョンと呼ぶことがあります。その数字の後ろに、create_products.rbとcreate_users.rbがあるので確認しておきましょう。
まず、productsモデルを作ってきます。# はコメントといい、# 以降の文字をコードとして認識しないようになります。例外として、#がついてもコードに作用するマジックコメントというものもあります。
class CreateProducts < ActiveRecord::Migration[7.0]
def change
create_table :products do |t|
t.string :product_name # 追加
t.integer :seller # 追加
t.integer :stock # 追加
t.timestamps
end
end
end
次にuserモデルを作ります。
class CreateUsers < ActiveRecord::Migration[7.0]
def change
create_table :users do |t|
t.string :name # 追加
t.boolean :seller_flg # 追加
t.string :mail_address # 追加
t.string :pass_word # 追加
t.timestamps
end
end
end
マイグレーションファイルを変更時は、マイグレートをしましょう。
普段はしないですが、今回はrails db:rollbackをして直前のマイグレートをロールバックしていきます。
rails db:rollback
rails db:rollback
rails db:migrate
db/schema.rbが、反映されているのを確認できたらOKです。
元のデータを作っていきます。db/seeds.rbに設定することでデータベースにデータを入力することができます。
User.create({name: '太郎',seller_flg: true,mail_address: 'startaro@mail.com',pass_word: 'c3por2d2'})
Product.create({product_name: 'Rubyの本',seller: 1,stock: 10})
Product.create({product_name: 'Pythonの本',seller: 1,stock: 7})
Product.create({product_name: 'JavaScriptの本',seller: 1,stock: 8})
Product.create({product_name: 'COBOLの本',seller: 1,stock: 3})
データの確認でRailsコンソールを使う
データベースのデータを手っ取り早く確認するのにrailsコンソールを使うことがあります。以下のコマンドを叩いてコンソール画面を開き、さっき作成したデータベースが保存されているか確認してみましょう。
rails c
User.first
Product.first
Product.last
| User.first | Product.first | Product.last |
|---|---|---|
| Userテーブルの先頭データを表示します。 | Productテーブルの先頭データを表示します | Productテーブルの末尾データを表示します。 |
コンソールから抜けるには、exitを叩きます。
exit
Productテーブルのデータを一覧で表示
次にproductのデータを一覧で表示してみます。
controller.rbは、app/controllerの配下にあります。
class ProductsController < ApplicationController
def index
@products = Product.all
end
end
インスタンス変数である@productsにproductsテーブルの全てのデータをぶち込みます。
def indexは、app/views/products/index.html.erbの前に読み込まれます。
<div>このページはproducts#indexです。</div>
<% @products.each do |data| %>
<div>
<%= data.product_name %>
<%= data.seller %>
<%= data.stock %>
</div>
<% end %>
<% %>内で、Rubyを使えます。表示をする場合は、<%= %>を使います。
なので、each文とendでは、<%= %>を使いません。
上のように表示できていればOKです！
詳細画面を作成する
詳細画面に移動するためのリンクを作成する
商品名などを選択した時、商品の詳細ページに飛べるようにします。
このページはproducts#indexです。
<% @products.each do |data| %>
<div>
<%= link_to "#{data.product_name}", product_url(data.id), method: :post %>
<%= data.product_name %>
<%= data.seller %>
<%= data.stock %>
</div>
<% end %>
def show
@product = Product.find(params[:format])
end
products#showで@productに選択したデータの宣言をしているので、show.html.erbで表示してみます。
<div>
<%= @product.product_name %>
<%= @product.seller %>
<%= @product.stock %>
</div>
### 作成したshowのルーティングを設定
products#showを新たに作成したのでルーティング設定をします。
get 'product', action: :show, controller: 'products' # 追記
動作確認
rails sして確認してみます。
localhost:3000に接続し、一応ページの更新をかけます。ctrl + Rでも更新できます。
商品名をクリックし、詳細ページに移動できたらOKです。クリックしたデータが詳細ページに出ているかも確認しておきましょう。
終わり
フロント周りはいつかやる予定です。たぶん。
自分がわからないところをもっとやっていきたいので、次回から初心者講座風の作りを抜け出して作成する予定なり。