about 3 years ago

本章的作業目標:

  • 建立一個討論版(group)
  • group 有 title 跟 description 二個欄位
  • 設定 routes 並建立首頁 => hello world!
  • 套入前端套件 Bootstrap
  • 建立 navbar 與 footer
  • 建立 notice_message

建立一個討論版(group)

rails g controller groups
建立一個 Controller: groups (要加s)

group 有 title 跟 description 二個欄位

rails g model group title:string description:text
建立一個 Model: group (不加s)
並順便建立資料表 group 的二個欄位: title (string 字串屬性) 跟 description (text 文字屬性)

rake db:migrate
將資料庫建立起來


設定 routes 並建立首頁 => hello world!

routes

config/routes.rb
Rails.application.routes.draw do
+ root 'groups#index' #這行代表把 localhost:3000/groups 這個網址設成首頁
+ resources :groups
...
...

設定 Controller groups

app/controllers/groups_controller.rb
class GroupsController < ApplicationController
+ def index
+ end
end

設定 app/views/groups/index.html.erb

到 app/views/groups 這個資料夾 建立一個叫做 index.html.erb 的檔案

原本

app/views/groups/index.html.erb
<!-- (空的) -->

插入

app/views/groups/index.html.erb
<h1>Hello World!</h1>

看看成果

rails s
打開 Server 模擬模式
打開瀏覽器,網址: localhost:3000


套入前端套件 Bootstrap

安裝 gem 'bootstrap-sass'

原本

gemfile
source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

gem 'rails', '4.2.0'
...
...

插入

gemfile
source 'https://rubygems.org'

gem "bootstrap-sass"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

gem 'rails', '4.2.0'
...
...

bundle install

安裝 gem => 重開 rails s

保持一個原則: 動到除了 app 資料夾以外的檔案,都要重跑 rails s

將 Bootstrap 的 CSS 套件裝進專案裡面

原本

app/assets/stylesheets/application.css
/*
 * ...(一堆註解)
 *= require_tree .
 *= require_self
 */

插入

app/assets/stylesheets/application.css
/*
 * ...(一堆註解)
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";

把 application.css 改成 application.css.scss => 不然吃不到檔案

將 Bootstrap 的 js 套件裝進專案裡面

本專案只用 dropdown 跟 alert 這二個效果

原本

app/assets/javascripts/application.js
//= ...(一堆註解)

//= require_tree .

插入

app/assets/javascripts/application.js
//= ...(一堆註解)

//= require bootstrap/dropdown

//= require bootstrap/alert

//= require_tree .

--

建立頁面的 navbar 與 footer

到 app/views 增加一個資料夾 : common

增加二個檔案

app/views/common/_navbar.html.erb
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Rails 101s</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li> <%= link_to("登入", '#') %> </li>
      </ul>
    </div>
  </div>
</nav>
app/views/common/_footer.html.erb
<footer class="container" style="margin-top: 100px;">
  <p class="text-center">
    Copyright ©2014 Rails101s <br>
    Design by <a href="http://sdlong.logdown.com" target=_new>sdlong</a>
  </p>
</footer>

修改你的 app/views/layout/application.html.erb

原本

app/views/layouts/application.html.erb
...
...
<body>

<%= yield %>

</body>
</html>

改成

app/views/layouts/application.html.erb
...
...
<body>

<div class="container-fluid">
  <%= render "common/navbar" %>
  <%= yield %>
</div>
  <%= render "common/footer" %>
  
</body>
</html>

打開瀏覽器看看


建立 notice_message

利用 rails 的 helper 做出網站的訊息通知功能,在並讓它在 layout 顯示 (render) 出來
再配合配合 bootstrap 的 js 套件功能: alert 跟 css 效果來讓它有好的視覺效果

建立 helper: notice_message

app/helpers/application_helper.rb
module ApplicationHelper
+ def notice_message
+   alert_types = { notice: :success, alert: :danger }
+
+   close_button_options = { class: "close", "data-dismiss" => "alert", "aria-hidden" => true }
+   close_button = content_tag(:button, "×", close_button_options)
+
+   alerts = flash.map do |type, message|
+     alert_content = close_button + message
+
+     alert_type = alert_types[type.to_sym] || type
+     alert_class = "alert alert-#{alert_type} alert-dismissable"
+
+     content_tag(:div, alert_content, class: alert_class)
+   end
+
+   alerts.join("\n").html_safe
+ end
end

在 layout 放入 notice_message 這個 helper

app/views/layouts/application.html.erb
...
...
<div class="container-fluid">
  <%= render "common/navbar" %>
+ <%= notice_message %>
  <%= yield %>
</div>
...
...

How to use notice_message

測試: :notice

app/controllers/groups_controller.rb
class GroupsController < ApplicationController

  def index
+  flash[:notice] = "早安!你好!"
  end
end

結果


測試 :alert

原本

app/controllers/groups_controller.rb
class GroupsController < ApplicationController

  def index
  end
end

改成

app/controllers/groups_controller.rb
class GroupsController < ApplicationController

  def index
      flash[:alert] = "晚安!該睡了!"
  end
end

結果


測試 :warning

原本

app/controllers/groups_controller.rb
class GroupsController < ApplicationController

  def index
  end
end

改成

app/controllers/groups_controller.rb
class GroupsController < ApplicationController

  def index
      flash[:warning] = "這是 warning 訊息!"
  end
end

結果


我們可以使用 這個叫做 notice_message 的"輔助函式" (在 Rails 叫做 『 helper 』)
來幫助我們做出訊息提醒/警告的功能 => 例如當討論版創建完成後顯示 創建成功

← [ 2.0 ] 1. 創建一個 Rails 專案 [ 2.0 ] 2-1. 手動實作出有 CRUD 功能的討論版 →
 
comments powered by Disqus