[ 2.0 ] 2-1. 手動實作出有 CRUD 功能的討論版

almost 5 years ago

[ 2.0 ] 2-1. 手動實作出有 CRUD 功能的討論版

本章的作業目標：

安裝 gem "simple_form"
不用 Scaffold 實作出有 CRUD 功能的 group
連前端網頁部分也做完
資料驗證 => title 欄位不能空白

安裝 gem "simple_form"

插入

gemfile

gem "simple_form"

執行 bundle install

前置設定: controller

打開 groups_controller

app/controllers/groups_controller.rb

class GroupsController < ApplicationController

  def index
  end

+ def show
+ end
+
+ def new
+ end
+  
+ def edit
+ end
+
+ def create
+ end
+
+ def update
+ end
+
+ def destroy
+ end
end

前置設定: Views

到 app/views/groups/ 資料夾裡面

建立以下三個空白的檔案:

show.html.erb

new.html.erb

edit.html.erb

我們在上一章有做一個 index.html.erb

所以這個資料夾應該有四個檔案

不用 Scaffold 實作出有 CRUD 功能的 group

接下來是從零開始刻出 CRUD 功能

建立 Index action

Controller

app/controllers/groups_controller.rb

class GroupsController < ApplicationController

def index
+ @groups = Group.all
end
...
...

view index

app/views/groups/index.html.erb

<div class="col-md-12">
  <div class="group">
    <%= link_to("New group", new_group_path, class: "btn btn-primary pull-right") %>
  </div>
  <table class="table table-hover">
    <thead>
      <tr>
        <td>#</td>
        <td>Title</td>
        <td>Description</td>
      </tr>
    </thead>
    <tbody>
      <% @groups.each do |group| %>
        <tr>
          <td>#</td>
          <td><%= link_to(group.title, group_path(group)) %></td>
          <td><%= group.description %></td>
          <td>
              <%= link_to("Edit", edit_group_path(group), class: "btn btn-sm btn-default")%>
              <%= link_to("Delete", group_path(group),    class: "btn btn-sm btn-default", 
                          method: :delete, data: { confirm: "Are you sure?" } )%>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

結果:

我們會發現按了 "New group" 只有跑出空白頁面，所以我們要繼續做下去

建立 New action

Controller

app/controllers/groups_controller.rb

class GroupsController < ApplicationController

...
...
def new
+ @group = Group.new
end
...
...

view new

app/views/groups/new.html.erb

<div class="col-md-4 col-md-offset-4">
  <h1>新增討論版</h1>

  <hr>
  <%= simple_form_for @group do |f| %>
    <div class="form-group">
      <%= f.input :title, input_html: { class: "form-control"} %>
      <%= f.input :description, input_html: { class: "form-control"} %>
    </div>
    <%= f.submit "Submit", class: "btn btn-primary", data: { disable_with: "Submitting..." } %>
  <% end %>
</div>

建立 create action

將填好的 New 表單裡的資料送到資料庫裡建立 (create)

controller

app/controllers/groups_controller.rb

...
...
  def create
+   @group = Group.create(group_params)
+
+   if @group.save
+     redirect_to groups_path
+   else
+     render :new
+   end
  end
...
...
#(放在最下面)
+ private
+ 
+ def group_params 
+   params.require(:group).permit(:title, :description)
+ end

下面 group_params 的設定是 strong_params 可點連結了解這功能

接下來我們可以測試新增討論版的效果了

Show action

接下來要能觀看單一討論版頁面

controller

app/controllers/groups_controller.rb

...
...
def show
+ @group = Group.find(params[:id])
end
...
...

views show

app/views/groups/show.html.erb

<div class="col-md-12">
  <div class="group">
    <%= link_to("Edit", edit_group_path(@group), class: "btn btn-primary pull-right")%>
  </div>
  <h2><%= @group.title %></h2>
  <p><%= @group.description %></p>
</div>

點進第一個討論版連結後的結果

Edit Action

接下來要能夠修改討論版內容

controller

app/controllers/groups_controller.rb

...
...
  def edit
+  @group = Group.find(params[:id])
  end
...
...

views edit

(其實跟 new.html.erb 一模一樣，只有標題修改)

app/views/groups/edit.html.erb

<div class="col-md-4 col-md-offset-4">
  <h1>修改討論版</h1>

  <hr>
  <%= simple_form_for @group do |f| %>
    <div class="form-group">
      <%= f.input :title, input_html: { class: "form-control"} %>
      <%= f.input :description, input_html: { class: "form-control"} %>
    </div>
    <%= f.submit "Submit", class: "btn btn-primary", data: { disable_with: "Submitting..." } %>
  <% end %>
</div>

update action

要將填好的 edit 表單資料更新 (update) 到資料庫

app/controllers/groups_controller.rb

...
...
  def update
+   @group = Group.find(params[:id])
+
+   if @group.update(group_params)
+     redirect_to groups_path, notice: "修改討論版成功"
+   else
+     render :edit
+   end
  end
...
...

來看看實際運作畫面

destroy action

最後我們要能把討論版刪除掉

app/controllers/groups_controller.rb

...
...
  def destroy
+   @group = Group.find(params[:id])
+   @group.destroy
+   redirect_to groups_path, alert: "討論版已刪除"
  end
...
...

如果整個 CRUD 操作有問題，可能是你的 groups_controller.rb 的設定有誤

完整的:

app/controllers/groups_controller.rb

class GroupsController < ApplicationController
  def index
    @groups = Group.all
  end

  def new
    @group = Group.new
  end

  def show
    @group = Group.find(params[:id])
  end

  def edit
    @group = Group.find(params[:id])
  end

  def create
    @group = Group.create(group_params)

    if @group.save
      redirect_to groups_path
    else
      render :new
    end
  end

  def update
    @group = Group.find(params[:id])

    if @group.update(group_params)
      redirect_to groups_path, notice: "修改討論版成功"
    else
      render :edit
    end
  end

  def destroy
    @group = Group.find(params[:id])
    @group.destroy
    redirect_to groups_path, alert: "討論版已刪除"
  end

  private

  def group_params
    params.require(:group).permit(:title, :description)
  end
end

資料驗證: title 不能空白

當我們要創建討論版的時候，如果版名是空白的不是很怪嗎？

model 可以做出所有跟資料庫相關的設定

原本

app/models/group.rb

class Group < ActiveRecord::Base
end

插入

app/models/group.rb

class Group < ActiveRecord::Base
+ validates :title, presence: true
end

這行就能設定 title 不能空白

December 30, 2014 05:56
Permalink
Comments