Railsで時間割を投稿する

# 時間割の投稿を作成します
この記事では、時間割を作成するときのやり方を説明しています。
時間割以外でも、表形式で投稿したいときに使えます。

完成イメージ![時間割.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3657847/048f5200-d181-0436-715a-57e9e8ad77ec.png)


## 前提
1.resourceでルーティングがされている
2.コントローラーを作成済み
## 手順
1.モデルを作成
2.投稿画面の作成
3.一覧ページの作成
4.デザインを変更する

## 1.モデルを作成
時間割以外に使いたいカラムを入れて作成します。（時間割に使うカラムも入れてもいいのですが、長くなりすぎて面倒なので後ほど追加します。）

この記事の場合は、titleカラムとcontentカラムの入ったPostモデルを作成しています。
```ruby:ターミナル
rails g model Post title:string content:text
```
次に、今作成したマイグレーションファイルに時間割のカラムを追加します。

:::note warn
途中から追加する場合は、必ずマイグレーションファイルをdownにしてから編集してください！
:::
```ruby:db/migrate/2024xxxxxxxxxx_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.1]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content

      #追加ここから
      #月曜日
      t.string :mon1
      t.string :mon2
      t.string :mon3
      t.string :mon4
      t.string :mon5
      t.string :mon6
      #火曜日
      t.string :tue1
      t.string :tue2
      t.string :tue3
      t.string :tue4
      t.string :tue5
      t.string :tue6
      #水曜日
      t.string :wen1
      t.string :wen2
      t.string :wen3
      t.string :wen4
      t.string :wen5
      t.string :wen6
      #木曜日
      t.string :thu1
      t.string :thu2
      t.string :thu3
      t.string :thu4
      t.string :thu5
      t.string :thu6
      #金曜日
      t.string :fri1
      t.string :fri2
      t.string :fri3
      t.string :fri4
      t.string :fri5
      t.string :fri6
      #ここまで

      t.timestamps
    end
  end
end

```
そしてマイグレーションをします。
```ruby:ターミナル
rails db:migrate
```
これでschema.rbに反映されていれば成功です。
## 2.投稿ページを作成
new.html.erbを作成し、以下を記述します。
```ruby:posts/new.html.erb
<%= form_for @post do |f| %>

    <div class="field">
        <div class = "title-field">
            <%= f.label :title %><br>
            <%= f.text_field :title, size: 30 %>
        </div>

        <div class = "content-field">
            <%= f.label :content %><br>
            <%= f.text_area :content, :size => "50x5" %>
        </div>
        <table>
            <tr>
                <th></th> <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th>
            </tr>
            <tr>
                <th>1</th><td><%= f.text_area :mon1 %></td><td><%= f.text_area :tue1 %></td><td><%= f.text_area :wen1 %></td><td><%= f.text_area :thu1 %></td><td><%= f.text_area :fri1 %></td>
            </tr>
            <tr>
                <th>2</th><td><%= f.text_area :mon2 %></td><td><%= f.text_area :tue2 %></td><td><%= f.text_area :wen2 %></td><td><%= f.text_area :thu2 %></td><td><%= f.text_area :fri2 %></td>
            </tr>
            <tr>
                <th>3</th><td><%= f.text_area :mon3 %></td><td><%= f.text_area :tue3 %></td><td><%= f.text_area :wen3 %></td><td><%= f.text_area :thu3 %></td><td><%= f.text_area :fri3 %></td>
            </tr>
            <tr>
                <th>4</th><td><%= f.text_area :mon4 %></td><td><%= f.text_area :tue4 %></td><td><%= f.text_area :wen4 %></td><td><%= f.text_area :thu4 %></td><td><%= f.text_area :fri4 %></td>
            </tr>
            <tr>
                <th>5</th><td><%= f.text_area :mon5 %></td><td><%= f.text_area :tue5 %></td><td><%= f.text_area :wen5 %></td><td><%= f.text_area :thu5 %></td><td><%= f.text_area :fri5 %></td>
            </tr>
            <tr>
                <th>6</th><td><%= f.text_area :mon6 %></td><td><%= f.text_area :tue6 %></td><td><%= f.text_area :wen6 %></td><td><%= f.text_area :thu6 %></td><td><%= f.text_area :fri6 %></td>
            </tr>
        </table>
    </div>

    <div class="action">
        <%= f.submit %>
    </div>
<% end %>
```
コントローラーも編集します。
既にある部分は省略してください。
```ruby:posts_controller
class PostsController < ApplicationController
    def new
        @post = Post.new
    end

    def create
        post = Post.new(post_params)
        if post.save
            redirect_to action: "index"
        else
            redirect_to action: "new"
        end
    end

    private
    def post_params
        params.require(:post).permit(:title, :content ,:mon1,:mon2,:mon3,:mon4,:mon5,:mon6,:tue1,:tue2,:tue3,:tue4,:tue5,:tue6,:wen1,:wen2,:wen3,:wen4,:wen5,:wen6,:thu1,:thu2,:thu3,:thu4,:thu5,:thu6,:fri1,:fri2,:fri3,:fri4,:fri5,:fri6)
    end
end

```
## 3.一覧ページの作成
index.html.erbファイルを作成し、以下を記述します。
```ruby:posts/index.html.erb
<%= link_to "新規投稿ページへ", "/posts/new" %>
<% @posts.each do |p| %>
    <div class = "post-title">
        <%= p.title %>
    </div>

    <div class = "post-content">
        <%= p.content %>
    </div>
    <table>
        <tr>
            <th></th> <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th>
        </tr>
        <tr>
            <th>1</th><td><%= p.mon1 %></td><td><%= p.tue1 %></td><td><%= p.wen1 %></td><td><%= p.thu1 %></td><td><%= p.fri1 %></td>
        </tr>
        <tr>
            <th>2</th><td><%= p.mon2 %></td><td><%= p.tue2 %></td><td><%= p.wen2 %></td><td><%= p.thu2 %></td><td><%= p.fri2 %></td>
        </tr>
        <tr>
            <th>3</th><td><%= p.mon3 %></td><td><%= p.tue3 %></td><td><%= p.wen3 %></td><td><%= p.thu3 %></td><td><%= p.fri3 %></td>
        </tr>
        <tr>
            <th>4</th><td><%= p.mon4 %></td><td><%= p.tue4 %></td><td><%= p.wen4 %></td><td><%= p.thu4 %></td><td><%= p.fri4 %></td>
        </tr>
        <tr>
            <th>5</th><td><%= p.mon5 %></td><td><%= p.tue5 %></td><td><%= p.wen5 %></td><td><%= p.thu5 %></td><td><%= p.fri5 %></td>
        </tr>
        <tr>
            <th>6</th><td><%= p.mon6 %></td><td><%= p.tue6 %></td><td><%= p.wen6 %></td><td><%= p.thu6 %></td><td><%= p.fri6 %></td>
        </tr>
    </table>

    <%= p.created_at %>
<% end %>
```
ここで、thはタイトル（曜日や時間）、tdはマスに入る情報（国語や数学）を示しています。
tableは表形式で表示したいときに使います。

続いてコントローラーも編集しましょう。
```ruby:posts_controller
class PostsController < ApplicationController
    #追記ここから
    def index
        @posts = Post.all
    end
    #ここまで

    def new
        @post = Post.new
    end

    def create
        post = Post.new(post_params)
        if post.save
            redirect_to action: "index"
        else
            redirect_to action: "new"
        end
    end

    private
    def post_params
        params.require(:post).permit(:title, :content ,:mon1,:mon2,:mon3,:mon4,:mon5,:mon6,:tue1,:tue2,:tue3,:tue4,:tue5,:tue6,:wen1,:wen2,:wen3,:wen4,:wen5,:wen6,:thu1,:thu2,:thu3,:thu4,:thu5,:thu6,:fri1,:fri2,:fri3,:fri4,:fri5,:fri6)
    end
end

```
詳細、編集、削除機能は必要に応じて作成してください。
## デザインを変更する
マスの大きさや、テキストの位置などを好きに調整します。
下には一例を載せておきます。
```ruby:assets/stylesheets/posts.scss
/* 表全体 */
table {
    border-collapse: collapse;/* 隣接するセルと境界線を共有 */
    text-align: center;/* テキストを中心に配置 */
    }

/* 各マス */
th, td {
    border: solid 1px black; /* 線の種類 太さ 色 を指定 */
    width: 80px; /* マスの横幅を指定 */
    height: 50px; /* マスの縦幅を指定 */
}
```
#### 以上です、お疲れ様でした！