Liz's Blog

12 in 12 challenges #6:如何用Rails4打造待做清單

| Comments

第六週學做To Do List,比起前五週輕鬆很多。

作者:Mackenzie Child
影片:How to build a movie review app in Rails 4
Github:movie_review

依照影片做少許修改,可參考我的Github

【開啟新專案todo】
1.終端機:rails new todo
2.終端機:cd todo
3.用另一視窗開啟終端機:rails s
4.終端機:git init
5.終端機:git status
6.終端機:git add .
7.終端機:git commit -am "Inital Commit"

【利用鷹架快速建立todo_list及todo_item】
1.終端機:rails g scaffold todo_list title:string description:text
2.終端機:rake db:migrate
3.瀏覽器:localhost:3000/todo_list
4.

config/routes.rb
....
resources :todo_lists

root "todo_lists#index"
....

5.終端機:rails g model todo_item content:string todo_list:references
6.終端機:rake db:migrate
7.

app/models/todo_list.rb
....
  has_many :todo_items, dependent: :destroy
....

8.

config/routes.rb
....
resources :todo_lists do
  resources :todo_items
end

root "todo_list#index"
....

9.終端機:rake routes
10.終端機:rails g controller todo_items
11.

app/controllers/todo_items_controller.rb
....
before_action :set_todo_list

def create
    @todo_item = @todo_list.todo_items.create(todo_item_params)
    redirect_to @todo_list
end

private

def set_todo_list
    @todo_list = TodoList.find(params[:todo_list_id])
end

def todo_item_params
    params[:todo_item].permit(:content)
end

12.新增_form.html.erb檔案。

app/views/todo_items/_form.html.erb
<%= form_for([@todo_list, @todo_list.todo_items.build]) do |f| %>
    <%= f.text_field :content, placeholder: "New Todo" %>
    <%= f.submit %>
<% end %>

13.新增_todo_item.html.erb檔案。

app/views/todo_items/_todo_item.html.erb
<p><%= todo_item.content %></p>

14.

app/vies/todo_lists/show.html.erb
....
<div id="todo_items_wrapper">
    <%= render @todo_list.todo_items %>
    <div id="form">
        <%= render "todo_items/form" %>
    </div>
</div>

<%= link_to 'Edit', edit_todo_list_path(@todo_list) %> |
....

15.

app/views/todo_items/_todo_item.html.erb
<p><%= todo_item.content %></p>
<%= link_to "Delete", todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } %>

16.

app/controllers/todo_items_controller.rb
....
def destroy
    @todo_item = @todo_list.todo_items.find(params[:id])
    if @todo_item.destroy
        flash[:success] = "Todo List item was deleted."
    else
        flash[:error] = "Todo List item could not be deleted."
    end
    redirect_to @todo_list
end

private
....

17.終端機:git status
18.終端機:git add .
19.終端機:git commit -am "Added Todo Lists & Todo Items"

【todo_item完成時,可被修改成已完成狀態】
1.終端機:rails g migration add_completed_at_to_todo_items completed_at:datetime
2.終端機:rake db:migrate
3.

config/routes.rb
....
resources :todo_lists do
  resources :todo_items do
    member do
        patch :complete
    end
  end
end
....

4.

app/views/todo_itens/_todo_item.html.erb
....
<%= link_to "Mark as Complete", complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch %>

5.

app/controllers/todo_items_controller.rb
....
class TodoItemsController < ApplicationController
    before_action :set_todo_list
    before_action :set_todo_item, except: [:create]

    def create
        @todo_item = @todo_list.todo_items.create(todo_item_params)
        redirect_to @todo_list
    end

    def destroy
        if @todo_item.destroy
            flash[:success] = "Todo List item was deleted."
        else
            flash[:error] = "Todo List item could not be deleted."
        end
        redirect_to @todo_list
    end

    def complete
        @todo_item.update_attribute(:completed_at, Time.now)
        redirect_to @todo_list, notice: "Todo item completed"
    end

    private

    def set_todo_list
        @todo_list = TodoList.find(params[:todo_list_id])
    end

    def set_todo_item
        @todo_item = @todo_list.todo_items.find(params[:id])
    end

    def todo_item_params
        params[:todo_item].permit(:content)
    end

end

6.

app/views/todo_items/_todo_item.html.erb
<div class="row clearfix">
    <% if todo_item.completed? %>
        <div class="complete">
            <%= link_to "Mark as Complete", complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch %>
        </div>
        <div class="todo_item">
            <p style="opacity: 0.4;"><strike><%= todo_item.content %></strike></p>
        </div>
        <div class="trash">
            <%= link_to "Delete", todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } %>
        </div>
    <% else %>
        <div class="complete">
            <%= link_to "Mark as Complete", complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch %>
        </div>
        <div class="todo_item">
            <p><%= todo_item.content %></p>
        </div>
        <div class="trash">
            <%= link_to "Delete", todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } %>
        </div>
    <% end %>
</div>

7.

app/models/todo_item.rb
....
def completed?
  !completed_at.blank?
end
....

8.終端機:git status
9.終端機:git add .
10.終端機:git commit -am "Mark As Complete Ability"

【套版】
1.將app/assets/stylesheets/資料夾的application.css改成application.css.scss。
2.刪除app/assets/stylesheets/todo_lists.css
3.刪除app/assets/stylesheets/scaffold.css
4.刪除app/assets/stylesheets/todo_items.css
5.在app/assets/stylesheets/application.css.scss檔案中貼入這段
6.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>Todo</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <%= yield %>
</div>

</body>
</html>

7.

app/views/todo_lists/index.html.erb
<% @todo_lists.each do |todo_list| %>
  <div class="index_row clearfix">
    <h2 class="todo_list_title"><%= link_to todo_list.title, todo_list %></h2>
    <p class="todo_list_sub_title"><%= todo_list.description %></p>
  </div>
<% end %>

<div class="links">
  <%= link_to "New Todo List", new_todo_list_path %>
</div>

8.

app/views/todo_items/_todo_item.html.erb
<div class="row clearfix">
    <% if todo_item.completed? %>
        <div class="complete">
            <%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %>
                <i style="opacity: 0.4;" class="fa fa-check"></i>
            <% end %>
        </div>
        <div class="todo_item">
            <p style="opacity: 0.4;"><strike><%= todo_item.content %></strike></p>
        </div>
        <div class="trash">
            <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
                <i class="fa fa-trash"></i>
            <% end %>
        </div>
    <% else %>
        <div class="complete">
            <%= link_to complete_todo_list_todo_item_path(@todo_list, todo_item.id), method: :patch do %>
                <i class="fa fa-check"></i>
            <% end %>
        </div>
        <div class="todo_item">
            <p><%= todo_item.content %></p>
        </div>
        <div class="trash">
            <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), method: :delete, data: { confirm: "Are you sure?" } do %>
                <i class="fa fa-trash"></i>
            <% end %>
        </div>
    <% end %>
</div>

9.

app/views/todo_lists/show.html.erb
<p id="notice"><%= notice %></p>

<h2 class="todo_list_title"><%= @todo_list.title %></h2>
<p class="todo_list_sub_title"><%= @todo_list.description %></p>

<div id="todo_items_wrapper">
    <%= render @todo_list.todo_items %>
    <div id="form">
        <%= render "todo_items/form" %>
    </div>
</div>

<div class="links">
    <%= link_to 'Edit', edit_todo_list_path(@todo_list) %> |
    <%= link_to 'Delete', todo_list_path(@todo_list), method: :delete, data: { confirm: "Are you sure?" }
 %> |
  <%= link_to 'Back', todo_lists_path %>
</div>

10.

app/controllers/todo_lists_controller.rb
....
def destroy
  @todo_list.destroy
  respond_to do |format|
    format.html { redirect_to root_url, notice: 'Todo list was successfully destroyed.' }
    format.json { head :no_content }
  end
end
....

11.

app/views/todo_lists/new.html.erb
<h1 class="todo_list_title">New Todo List</h1>

<div class="forms">
    <%= render 'form' %>
</div>

<div class="links">
    <%= link_to 'Back', todo_lists_path %>
</div>

12.

app/views/todo_lists/edit.html.erb
<h1 class="todo_list_title">Edit Todo List</h1>

<div class="forms">
    <%= render 'form' %>
</div>

<div class="links">
    <%= link_to 'Cancel', todo_lists_path %>
</div>

13.終端機:git status
14.終端機:git add .
15.終端機:git commit -am "Finish Structure and Styles"

【延伸閱讀】
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