作者：Mackenzie Child
影片：How to build a workout log in Rails 4
Github：workout_log
我練習的Github
【開啟新專案workout_log】
1.終端機：rails new workout_log
2.終端機：cd workout_log
3.用一視窗開啟終端機：rails s
4.終端機：git init
5.終端機：git status
6.終端機：git add .
7.終端機：git commit -am "Inital Commit"
【創建workout的odel & controller & routes】
1.終端機：rails g model workout date:datetime workout:string mood:string length:string
2.終端機：rake db:migrate
3.終端機：rails g controller workouts
4.
....
resources :workouts
root "workouts#index"
....
5.
....
def index
end
....
6.終端機：git status
7.終端機：git add .
8.終端機：git commit -am "Workout model & controller & routes"
【安裝gem＆Workout表格】
1.安裝haml、simple_form、bootstrap-sass。
....
gem 'haml', '~> 5.0', '>= 5.0.1'
gem 'simple_form', '~> 3.5'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
....
2.終端機：bundle install
3.用另一視窗重啟終端機：rails s
4.將application.css改成application.css.scss，並移除以下。
*= require_tree .
*= require_self
5.
....
@import "bootstrap-sprockets";
@import "bootstrap";
6.under jquery
....
//= require bootstrap-sprockets
....
7.終端機：rails g simple_form:install --bootstrap
8.新增index.html.haml檔案。
%h1 This is the Workouts#Index placeholer
9.
....
before_action :find_workout, only: [:show, :edit, :update, :destroy]
def index
end
def show
end
def new
@workout = Workout.new
end
def create
@workout = Workout.new(workout_params)
if @workout.save
redirect_to @workout
else
render 'new'
end
end
def edit
end
def update
end
def destroy
end
private
def workout_params
params.require(:workout).permit(:date, :workout, :mood, :length)
end
def find_workout
@workout = Workout.find(params[:id])
end
....
10.新增_form.html.haml檔案。
= simple_form_for(@workout, html: { class: 'form-horizontal' }) do |f|
= f.input :date, label: "Date"
= f.input :workout, label: "What area did you workout?", input_html: { class: "form-control" }
= f.input :mood, label: "How were you feeling?", input_html: { class: "form-control" }
= f.input :length, label: "How long was the workout?", input_html: { class: "form-control" }
%br/
= f.button :submit
11.新增new.html.haml檔案。
%h1 New Workout
= render 'form'
= link_to "Cancel", root_path
12.新增show.html.haml檔案。
#workout
%p= @workout.date
%p= @workout.workout
%p= @workout.mood
%p= @workout.length
13.終端機：git status
14.終端機：git add .
15.終端機：git commit -am "Add App Gems & Workout Forms / Views"
【修改Workouts#Index顯示】
1.
- @workouts.each do |workout|
%h2= link_to workout.date, workout
%h3= workout.workout
2.
....
def index
@workouts = Workout.all.order("created_at DESC")
end
....
3.終端機：git status
4.終端機：git add .
5.終端機：git commit -am "Loop workouts on Workouts#Index"
【增加修改及刪除功能】
1.
....
def update
if @workout.update(workout_params)
redirect_to @workout
else
render 'edit'
end
end
....
2.
....
= link_to "Back", root_path
= link_to "Edit", edit_workout_path(@workout)
3.
%h1 Edit Workout
= render 'form'
= link_to "Cancel", root_path
4.
....
def destroy
@workout.destroy
redirect_to root_path
end
....
5.
....
= link_to "Delete", workout_path(@workout), method: :delete, data: { confirm: "Are you sure?" }
6.終端機：git status
7.終端機：git add .
8.終端機：git commit -am "Add edit & destroy ability"
【修改基本版型】
1.將application.html.erb改成haml。
!!!
%html
%head
%title Workout Log Application
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%nav.navbar.navbar-default
.container
.navbar-header
= link_to "Workout Log", root_path, class: "navbar-brand"
.nav.navbar-nav.navbar-right
= link_to "New Workout", new_workout_path, class: "navbar navbar-link"
.container
= yield
2.終端機：git status
3.終端機：git add .
4.終端機：git commit -am "Basic structure"
【將exercise加到workout下】
1.終端機：rails g model exercise name:string sets:integer reps:integer workout:references
2.終端機：rake db:migrate
3.
....
has_many :exercises, dependent: :destroy
....
4.
....
resources :workouts do
resources :exercises
end
root "workouts#index"
....
5.終端機：rake routes
6.終端機：rails g controller exercises
7.
class ExercisesController < ApplicationController
def create
@workout = Workout.find(params[:workout_id])
@exercise = @workout.exercises.create(params[:exercise].permit(:name, :sets, :reps))
redirect_to workout_path(@workout)
end
end
8.
= simple_form_for([@workout, @workout.exercises.build]) do |f|
= f.input :name, input_html: { class: "form-control" }
= f.input :sets, input_html: { class: "form-control" }
= f.input :reps, input_html: { class: "form-control" }
%br/
= f.button :submit
9.
%p= exercise.name
%p= exercise.sets
%p= exercise.reps
10.
#workout
%p= @workout.date
%p= @workout.workout
%p= @workout.mood
%p= @workout.length
#exercises
%h2 Exercises
= render @workout.exercises
%h3 Add an exercise
= render "exercises/form"
= link_to "Back", root_path
= link_to "Edit", edit_workout_path(@workout)
= link_to "Delete", workout_path(@workout), method: :delete, data: { confirm: "Are you sure?" }
11.終端機：git status
12.終端機：git add .
13.終端機：git commit -am "Add exercises to workouts"
【修改首頁時間表現方式】
1.
- @workouts.each do |workout|
%h2= link_to workout.date.strftime("%A %B %d"), workout
%h3= workout.workout
2.終端機：git status
3.終端機：git add .
4.終端機：git commit -am "Change DateTime Formatting"
【改版】
1.
....
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(90deg, #616161 10%, #9bc5c3 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #616161 10%, #9bc5c3 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #616161 10%, #9bc5c3 90%); /* IE10 */
background: -o-linear-gradient(90deg, #616161 10%, #9bc5c3 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #616161 10%, #9bc5c3 90%); /* W3C */
}
.navbar-default {
background: rgba(250, 250, 250, 0.5);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
border: none;
border-radius: 0;
.navbar-header {
.navbar-brand {
color: white;
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
}
}
.navbar-link {
line-height: 3.5;
color: rgb(48, 181, 199);
}
}
#index_workouts {
h2 {
margin-bottom: 0;
font-weight: 100;
a {
color: white;
}
}
h3 {
margin: 0;
font-size: 18px;
span {
color: rgb(48, 181, 199);
}
}
}
2.
!!!
%html
%head
%title Workout Log Application
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%nav.navbar.navbar-default
.container
.navbar-header
= link_to "Workout Log", root_path, class: "navbar-brand"
.nav.navbar-nav.navbar-right
= link_to "New Workout", new_workout_path, class: "nav navbar-link"
.container
= yield
3.
#index_workouts
- @workouts.each do |workout|
%h2= link_to workout.date.strftime("%A %B %d"), workout
%h3
%span Workout:
= workout.workout
4.終端機：git status
5.終端機：git add .
6.終端機：git commit -am "A little bit of styling"
【延伸閱讀】
1.12 in 12 Challenges #1：如何利用Rails4打造出Reddit或Hacker News類型的網站
2.12 in 12 Challenges #2：如何用Rails4做出部落格
3.12 in 12 challenges #3：如何用Rails4打造一個食譜網站
4.12 in 12 challenges #4：如何用Rails4打造Pinterest
5.12 in 12 challenges #5：如何用Rails4打造電影評論網
6.12 in 12 challenges #6：如何用Rails4打造待做清單
7.12 in 12 Challenges #7：如何利用Rails4打造出求職網站
8.12 in 12 Challenges #8：如何用Rails4做出健身紀錄
9.12 in 12 Challenges #9：如何用Rails4做出維基百科
10.12 in 12 Challenges #10：如何用Rails4做出論壇
11.12 in 12 Challenges #11：如何用Rails4做出Notebook
12.12 in 12 Challenges #12：如何用Rails4做出Dribbble
