over 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
Rails.application.routes.draw do
+ root 'groups#index' #這行代表把 localhost:3000/groups 這個網址設成首頁
+ resources :groups
...
...
設定 Controller groups
class GroupsController < ApplicationController
+ def index
+ end
end
設定 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'
原本
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
...
...
插入
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 套件裝進專案裡面
原本
/*
* ...(一堆註解)
*= require_tree .
*= require_self
*/
插入
/*
* ...(一堆註解)
*= require_tree .
*= require_self
*/
@import "bootstrap";
把 application.css 改成 application.css.scss => 不然吃不到檔案
將 Bootstrap 的 js 套件裝進專案裡面
本專案只用 dropdown 跟 alert 這二個效果
原本
//= ...(一堆註解)
//= require_tree .
插入
//= ...(一堆註解)
//= require bootstrap/dropdown
//= require bootstrap/alert
//= require_tree .
--
建立頁面的 navbar 與 footer
到 app/views 增加一個資料夾 : common
增加二個檔案
<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>
<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
原本
...
...
<body>
<%= yield %>
</body>
</html>
改成
...
...
<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
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
...
...
<div class="container-fluid">
<%= render "common/navbar" %>
+ <%= notice_message %>
<%= yield %>
</div>
...
...
How to use notice_message
測試: :notice
class GroupsController < ApplicationController
def index
+ flash[:notice] = "早安！你好！"
end
end
結果
測試 :alert
原本
class GroupsController < ApplicationController
def index
end
end
改成
class GroupsController < ApplicationController
def index
flash[:alert] = "晚安！該睡了！"
end
end
結果
測試 :warning
原本
class GroupsController < ApplicationController
def index
end
end
改成
class GroupsController < ApplicationController
def index
flash[:warning] = "這是 warning 訊息！"
end
end
結果
我們可以使用 這個叫做 notice_message 的"輔助函式" (在 Rails 叫做 『 helper 』)
來幫助我們做出訊息提醒/警告的功能 => 例如當討論版創建完成後顯示 創建成功
