Liz's Blog

12 in 12 Challenges #8:如何用Rails4做出健身紀錄

| Comments

作者: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.

config/routes.rb
....
resources :workouts

root "workouts#index"
....

5.

app/controllers/workouts_controller.rb
....
def index
end
....

6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Workout model & controller & routes"

【安裝gem&Workout表格】
1.安裝hamlsimple_formbootstrap-sass

Gemfile
....
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.

app/assets/stylesheets/application.css.scss
....
@import "bootstrap-sprockets";
@import "bootstrap";

6.under jquery

app/assets/javascripts/application.js
....
//= require bootstrap-sprockets
....

7.終端機:rails g simple_form:install --bootstrap
8.新增index.html.haml檔案。

app/views/workouts/index.html.haml
%h1 This is the Workouts#Index placeholer

9.

app/controllers/workouts_controller.rb
....
    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檔案。

app/views/workouts/_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檔案。

app/views/workouts/new.html.haml
%h1 New Workout

= render 'form'

= link_to "Cancel", root_path

12.新增show.html.haml檔案。

app/views/workouts/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.

app/views/workouts/index.html.haml
- @workouts.each do |workout|
    %h2= link_to workout.date, workout
    %h3= workout.workout

2.

app/controllers/workouts_controller.rb
....
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.

app/controllers/workouts_controller.rb
....
    def update
        if @workout.update(workout_params)
            redirect_to @workout
        else
            render 'edit'
        end
    end
....

2.

app/views/workouts/show.html.haml
....
= link_to "Back", root_path
= link_to "Edit", edit_workout_path(@workout)

3.

app/views/workouts/edit.html.haml
%h1 Edit Workout

= render 'form'

= link_to "Cancel", root_path

4.

app/controllers/workouts_controller.rb
....
    def destroy
        @workout.destroy
        redirect_to root_path
    end
....

5.

app/views/workouts/show.html.haml
....
= 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。

app/views/layouts/application.html.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.

app/models/workout.rb
....
  has_many :exercises, dependent: :destroy
....

4.

config/routes.rb
....
  resources :workouts do
    resources :exercises
  end
  root "workouts#index"
....

5.終端機:rake routes
6.終端機:rails g controller exercises
7.

app/controllers/exercises_controller.rb
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.

app/views/exercises/_form.html.haml
= 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.

app/views/exercises/_exercise.html.haml
%p= exercise.name
%p= exercise.sets
%p= exercise.reps

10.

app/views/workouts/show.html.haml
#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.

app/views/workouts/index.html.haml
- @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.

app/assets/stylesheets/applcation.css.scss
....
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.

app/views/layouts/application.html.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: "nav navbar-link"

    .container
        = yield

3.

pp/views/workouts/index.html.haml
#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

Comments

comments powered by Disqus