RailsでECサイト作成の練習をするなり。その2

前回は、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モデルを作ってきます。# はコメントといい、# 以降の文字をコードとして認識しないようになります。例外として、#がついてもコードに作用するマジックコメントというものもあります。
```ruby:create_products.rb
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モデルを作ります。
```ruby:create_users.rb
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``をして直前のマイグレートをロールバックしていきます。
```ruby:terminal
rails db:rollback
rails db:rollback
rails db:migrate
```
``db/schema.rb``が、反映されているのを確認できたらOKです。
元のデータを作っていきます。``db/seeds.rb``に設定することでデータベースにデータを入力することができます。
```ruby: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コンソールを使うことがあります。以下のコマンドを叩いてコンソール画面を開き、さっき作成したデータベースが保存されているか確認してみましょう。
```ruby:terminal
rails c
User.first
Product.first
Product.last
```
|User.first|Product.first|Product.last|
|:--:|:--:|:--:|
|Userテーブルの先頭データを表示します。|Productテーブルの先頭データを表示します|Productテーブルの末尾データを表示します。|

コンソールから抜けるには、``exit``を叩きます。
```ruby:terminal
exit
```

# Productテーブルのデータを一覧で表示
次にproductのデータを一覧で表示してみます。
controller.rbは、``app/controller``の配下にあります。
```ruby:products_controller.rb
class ProductsController < ApplicationController
  def index
    @products = Product.all
  end
end
```
インスタンス変数である``@products``にproductsテーブルの全てのデータをぶち込みます。
``def index``は、``app/views/products/index.html.erb``の前に読み込まれます。
```erb: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では、<%=  %>を使いません。
![Product.allの表示確認完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1788322/d5e763e0-1ab4-3b85-ab26-8975ce5d1f87.png)
上のように表示できていればOKです！
# 詳細画面を作成する
### 詳細画面に移動するためのリンクを作成する
商品名などを選択した時、商品の詳細ページに飛べるようにします。
```erb:products/index.html.erb
このページは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 %>
```
```ruby:products_controller.rb
def show
  @product = Product.find(params[:format])
end
```
products#showで``@product``に選択したデータの宣言をしているので、show.html.erbで表示してみます。
```erb:products/show.html.erb
<div>
  <%= @product.product_name %>
  <%= @product.seller %>
  <%= @product.stock %>
</div>
### 作成したshowのルーティングを設定
```
products#showを新たに作成したのでルーティング設定をします。
```ruby:config/routes.rb
    get 'product', action: :show, controller: 'products' # 追記
```
### 動作確認
``rails s``して確認してみます。
``localhost:3000``に接続し、一応ページの更新をかけます。``ctrl + R``でも更新できます。
商品名をクリックし、詳細ページに移動できたらOKです。クリックしたデータが詳細ページに出ているかも確認しておきましょう。

# 終わり
フロント周りはいつかやる予定です。たぶん。
自分がわからないところをもっとやっていきたいので、次回から初心者講座風の作りを抜け出して作成する予定なり。