【HowTo】Simple Calendar/캘린더를 간편하게 도입해 본다(투고 기능 첨부)
스쿨에서는 커리큘럼에 없었던 내용이었기 때문에, 스스로 여러가지 조사해 실장했으므로, 비망록으로서 기사로 합니다.
여러분의 구현에 조금이라도 도움을 주시면 감사하겠습니다.
이 기사 관련 Github : htps : // 기주 b. 코 m / 타츠 88 - 토키 / 부 lkF 리엔 ds2
구현을 위한 생각
이번, 「트레이닝 메모 기능」을 실장하는데 있어서, 다음을 생각했습니다.
- 근육 트레이닝을 하는데 있어서 기록을 붙이는 것은, 동기 유지에 연결된다.
- 기록을 붙이면 날짜별로 기록을 할 필요가 있다.
- 그 기록을 열람할 때는 가능한 한 보기 쉬운 것이 베터.
위의 생각에서 이번 '트레이닝 메모 기능은 캘린더를 사용하여 날짜별로 기록할 수 있도록 하는 것을 목표로 했습니다.
거기서, 여러가지 조사한 결과, 이번은 gem의 「simple_calendar」를 사용한 구현을 하기로 했습니다.
이하에서, 실장 방법등을 기재해 갑니다.
구현 이미지
우선, 이번에 구현하는 이미지를 이하에서 설명합니다.
이번에 구현하는 기능은 다음과 같습니다.
1. 달력 표시
2. 캘린더에의 투고·삭제·편집
1. 캘린더 전체감 + 투고 내용 상세 + 투고 액션
2. 캘린더에 게시
사전 준비
gem 도입
まず、今回の実装に当たって必須となるgemを導入します。
gemfile
gem 'simple_calendar', '~> 2.0'
#記載完了次第、Bundle installを忘れずに。
컨트롤러/모델 준비
続いて、今回使用するコントローラを作成します。
ターミナル
$ rails g controller trainings
モデルも作成します。
ターミナル
rails g model training
その後、マイグレーションファイルにて、今回の仕様に合わせてテーブルを作成します。
migrationfile
class CreateTrainings < ActiveRecord::Migration[5.2]
def change
create_table :trainings do |t|
t.string :title
t.text :content
t.date :start_time
t.references :user, foreign_key: true
t.timestamps
end
end
end
ターミナル
$ rails db:migrate
コントローラとモデルの作成が完了しました。
以上で必要なファイルなどの準備ができましたので、コントローラなどを編集していきましょう。
모델 편집
まず、作成したモデルに今回の仕様に合わせて記述します。
こちらは先ほどのMigration fileに合わせて記載していきます。
training.rb
class Training < ApplicationRecord
belongs_to :user
validates :title, presence: true
validates :start_time, presence: true
end
ユーザーモデルも関連しているので、忘れずに。
user.rb(一部抜粋)
class User < ApplicationRecord
has_many : trainings
end
컨트롤러 편집
続いて、コントローラを編集します。
training_controller
class TrainingsController < ApplicationController
before_action :set_user
def index
@trainings = current_user.trainings
end
def show
@training = current_user.trainings.find(params[:id])
end
def new
@trainings = current_user.trainings
end
def edit
@training = current_user.trainings.find(params[:id])
end
def update
@training = current_user.trainings.find(params[:id])
@training.update(update_params)
redirect_to trainings_path(@user.id)
end
def create
@training = current_user.trainings.new(training_memo)
if @training.save
redirect_to trainings_path(@user.id)
else
redirect_to new_training_path
end
end
def destroy
@trainings = current_user.trainings.find(params[:id])
@trainings.destroy
redirect_to trainings_path(@user.id)
end
private
def training_memo
params.permit(:start_time,:title, :content,:user_id)
end
def set_user
@user = User.find(params[:id])
end
def update_params
params.require(:training).permit(:start_time,:title, :content,:user_id)
end
end
View 편집 (index 전용)
それではViewの編集をしていきます。
全てのViewを記事内に記載するとボリュームが多くなってしまうため、割愛します。
*editやdestroy向けのファイルに関して気になる方は、この記事の冒頭にある当方のGithubからご参照いただけますと幸いです。
今回のカレンダーを作成するにあたり、簡単かつ見栄えをよくするために"simple calendar"にて準備されているviewファイルをダウンロードします。
ターミナル
$ rails g simple_calendar:views
#=>以下のファイルが生成されます。
app/views/simple_calendar
app/views/simple_calendar/_calendar.html.erb
app/views/simple_calendar/_month_calendar.html.erb
app/views/simple_calendar/_week_calendar.html.erb
上記で作成したファイルを使用するために、cssファイルに以下のように記載いたします。
css
*= require simple_calendar
今回はマンスリーカレンダーを使用したかったので、Readmeに従って以下をベースに記載をします。
(ウィークリーカレンダーなど使用したい方はReadme参照ください)
Readme(SimpleCalendar)
<%= month_calendar events: @meetings do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<%= meeting.name %>
</div>
<% end %>
<% end %>
自身のファイルにあてはめます。
view
=render "home/header_login"
.trainings
=link_to "記録する", new_training_path ,class:"training-edit"
= month_calendar events: @trainings do |date,trainings|
= date.day
- trainings.each do |training|
=link_to training.title,training_path(training.id)
以上でviewの編集は完了です。
라우팅 편집
最後にルーティングを編集します。
今回はユーザーとリンクさせるためにユーザーの記述にネスティングすることで実装しました。
route.rb(一部抜粋)
resources :user, only: [:show, :edit, :update]do
resources :trainings
以上で、カレンダーを使用した”トレーニングメモ”機能が実装できました！
gemを使用することで簡単にカレンダー機能を実装できますね。
참조
Github Simple calendar htps : // 기주 b. 이 m / x x d3 / mp ぇ_
【rails】 simple_calendar를 사용하여 달력이있는 블로그 기능을 만들어 보았습니다.
htps : // 코 m / 이사 아츠 0131 / ms / 아 d1d0 아 6130 4fd339d0
simple calendar를 사용하여 캘린더 소개
htps : // y 나 b. 하테나 bぉg. 코m/엔트리/2018/10/26/144038
이상이 됩니다. 끝까지 봐 주셔서 감사합니다!
앞으로도 학습한 사항에 관하여 Qiita에 투고해 가므로, 잘 부탁드립니다!
기술에 뭔가 잘못 등 있으면, 수고스럽지만 연락하실 수 있으면 다행입니다.
Reference
이 문제에 관하여(【HowTo】Simple Calendar/캘린더를 간편하게 도입해 본다(투고 기능 첨부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Tatsu88/items/e1800d929c7adf226942
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선, 이번에 구현하는 이미지를 이하에서 설명합니다.
이번에 구현하는 기능은 다음과 같습니다.
1. 달력 표시
2. 캘린더에의 투고·삭제·편집
1. 캘린더 전체감 + 투고 내용 상세 + 투고 액션
2. 캘린더에 게시
사전 준비
gem 도입
まず、今回の実装に当たって必須となるgemを導入します。
gem 'simple_calendar', '~> 2.0'
#記載完了次第、Bundle installを忘れずに。
컨트롤러/모델 준비
続いて、今回使用するコントローラを作成します。
$ rails g controller trainings
モデルも作成します。
rails g model training
その後、マイグレーションファイルにて、今回の仕様に合わせてテーブルを作成します。
class CreateTrainings < ActiveRecord::Migration[5.2]
def change
create_table :trainings do |t|
t.string :title
t.text :content
t.date :start_time
t.references :user, foreign_key: true
t.timestamps
end
end
end
$ rails db:migrate
コントローラとモデルの作成が完了しました。
以上で必要なファイルなどの準備ができましたので、コントローラなどを編集していきましょう。
모델 편집
まず、作成したモデルに今回の仕様に合わせて記述します。
こちらは先ほどのMigration fileに合わせて記載していきます。
class Training < ApplicationRecord
belongs_to :user
validates :title, presence: true
validates :start_time, presence: true
end
ユーザーモデルも関連しているので、忘れずに。
class User < ApplicationRecord
has_many : trainings
end
컨트롤러 편집
続いて、コントローラを編集します。
class TrainingsController < ApplicationController
before_action :set_user
def index
@trainings = current_user.trainings
end
def show
@training = current_user.trainings.find(params[:id])
end
def new
@trainings = current_user.trainings
end
def edit
@training = current_user.trainings.find(params[:id])
end
def update
@training = current_user.trainings.find(params[:id])
@training.update(update_params)
redirect_to trainings_path(@user.id)
end
def create
@training = current_user.trainings.new(training_memo)
if @training.save
redirect_to trainings_path(@user.id)
else
redirect_to new_training_path
end
end
def destroy
@trainings = current_user.trainings.find(params[:id])
@trainings.destroy
redirect_to trainings_path(@user.id)
end
private
def training_memo
params.permit(:start_time,:title, :content,:user_id)
end
def set_user
@user = User.find(params[:id])
end
def update_params
params.require(:training).permit(:start_time,:title, :content,:user_id)
end
end
View 편집 (index 전용)
それではViewの編集をしていきます。
全てのViewを記事内に記載するとボリュームが多くなってしまうため、割愛します。
*editやdestroy向けのファイルに関して気になる方は、この記事の冒頭にある当方のGithubからご参照いただけますと幸いです。
今回のカレンダーを作成するにあたり、簡単かつ見栄えをよくするために"simple calendar"にて準備されているviewファイルをダウンロードします。
$ rails g simple_calendar:views
#=>以下のファイルが生成されます。
app/views/simple_calendar
app/views/simple_calendar/_calendar.html.erb
app/views/simple_calendar/_month_calendar.html.erb
app/views/simple_calendar/_week_calendar.html.erb
上記で作成したファイルを使用するために、cssファイルに以下のように記載いたします。
*= require simple_calendar
今回はマンスリーカレンダーを使用したかったので、Readmeに従って以下をベースに記載をします。
(ウィークリーカレンダーなど使用したい方はReadme参照ください)
<%= month_calendar events: @meetings do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<%= meeting.name %>
</div>
<% end %>
<% end %>
自身のファイルにあてはめます。
=render "home/header_login"
.trainings
=link_to "記録する", new_training_path ,class:"training-edit"
= month_calendar events: @trainings do |date,trainings|
= date.day
- trainings.each do |training|
=link_to training.title,training_path(training.id)
以上でviewの編集は完了です。
라우팅 편집
最後にルーティングを編集します。
今回はユーザーとリンクさせるためにユーザーの記述にネスティングすることで実装しました。
resources :user, only: [:show, :edit, :update]do
resources :trainings
以上で、カレンダーを使用した”トレーニングメモ”機能が実装できました！
gemを使用することで簡単にカレンダー機能を実装できますね。
참조
Github Simple calendar htps : // 기주 b. 이 m / x x d3 / mp ぇ_【rails】 simple_calendar를 사용하여 달력이있는 블로그 기능을 만들어 보았습니다.
htps : // 코 m / 이사 아츠 0131 / ms / 아 d1d0 아 6130 4fd339d0
simple calendar를 사용하여 캘린더 소개
htps : // y 나 b. 하테나 bぉg. 코m/엔트리/2018/10/26/144038
이상이 됩니다. 끝까지 봐 주셔서 감사합니다!
앞으로도 학습한 사항에 관하여 Qiita에 투고해 가므로, 잘 부탁드립니다!
기술에 뭔가 잘못 등 있으면, 수고스럽지만 연락하실 수 있으면 다행입니다.
Reference
이 문제에 관하여(【HowTo】Simple Calendar/캘린더를 간편하게 도입해 본다(투고 기능 첨부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Tatsu88/items/e1800d929c7adf226942텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
