時間割の投稿を作成します
この記事では、時間割を作成するときのやり方を説明しています。
時間割以外でも、表形式で投稿したいときに使えます。
完成イメージ
前提
1.resourceでルーティングがされている
2.コントローラーを作成済み
手順
1.モデルを作成
2.投稿画面の作成
3.一覧ページの作成
4.デザインを変更する
1.モデルを作成
時間割以外に使いたいカラムを入れて作成します。（時間割に使うカラムも入れてもいいのですが、長くなりすぎて面倒なので後ほど追加します。）
この記事の場合は、titleカラムとcontentカラムの入ったPostモデルを作成しています。
ターミナル
rails g model Post title:string content:text
次に、今作成したマイグレーションファイルに時間割のカラムを追加します。
途中から追加する場合は、必ずマイグレーションファイルをdownにしてから編集してください！
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
そしてマイグレーションをします。
ターミナル
rails db:migrate
これでschema.rbに反映されていれば成功です。
2.投稿ページを作成
new.html.erbを作成し、以下を記述します。
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 %>
コントローラーも編集します。
既にある部分は省略してください。
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ファイルを作成し、以下を記述します。
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は表形式で表示したいときに使います。
続いてコントローラーも編集しましょう。
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
詳細、編集、削除機能は必要に応じて作成してください。
デザインを変更する
マスの大きさや、テキストの位置などを好きに調整します。
下には一例を載せておきます。
assets/stylesheets/posts.scss
/* 表全体 */
table {
border-collapse: collapse;/* 隣接するセルと境界線を共有 */
text-align: center;/* テキストを中心に配置 */
}
/* 各マス */
th, td {
border: solid 1px black; /* 線の種類 太さ 色 を指定 */
width: 80px; /* マスの横幅を指定 */
height: 50px; /* マスの縦幅を指定 */
}