⽤ Rails 開發網站

初探第三課

徐赫謙 <hechien@me.com> / 2022-10-09

課程⼤綱
關於本堂課 …

• Rails 架構介紹
• Rails Controller 講解
• Rails View 講解
• HTML 基礎教學
• CSS 基礎教學
• 如何建立 Rails 的專案
• 下⼀次課程內容
但欸！
啊你裝好 Rails 的開發環境了嗎？
 https://cindyliu923.com/
2021/07/17/macbook-pro-m1/
Rails 架構介紹
建立好⼀個專案後，怎麼多出這麼多東⻄？
Rails 架構介紹
- app => 主要開發都在這邊
- con g => 專案相關設定內容
- db => 資料庫遷移檔與設定內容
- lib => 專案相關的額外的⼯具程式碼
- log / tmp => 紀錄檔與暫存檔
- public => 網站的根⽬錄
- test => 測試相關撰寫
fi
app 資料夾
- assets => 資源檔根⽬錄，像是 CSS / JS
- channels => WebSocket 相關原始碼
- controllers => 接收 Request 後進⾏處理
- helpers => 協助顯⽰要呈現的資訊
- jobs => Delayed job
- mailers => 郵件傳送器
- models => 資料庫相關操作介⾯
- views => 前端 HTML / JSON 結構
config 資料夾
- application.rb
- initialize.rb
專案根⽬錄的檔案
- .gitignore
- Gem le
- Rake le
- con g.ru
fi
fi
fi
八成都在 app 裡
我們在初階裡⾯也是著重在這⼀個範圍內，先關注它就好
 Rails
Controller
控制器控制的是 Request 與 Response
Rails Controller

• Controller 接收由 Router 傳來的 HTTP Requests

• ⼀個 Controller 由⼀個檔案構成（隸屬於 app/controllers 底下）
• ⼀個 Controller 內會有多個 Action
• Controller 是可以「被繼承」的
• 在 Rails 中⽬前我們看到最⼤的 Controller 是 ApplicationController
• 所以繼承它的 Controller 就能夠使⽤它設定的 protected 跟 public
的⽅法
Controller & Action
想像你⼿上有著⼀把遙控器 …

• Controller => 遙控器本⾝

• Action => 功能按鍵
Controller & Action
舉例來說 … ItemsController

• ItemsController
• add action
• remove action
• show action
Controller & Action
舉例來說 … ItemsController

• ItemsController
• create action
• destroy action
• show action
Controller & Action
讓我順便說明⼀下 …

• @item = Item. nd(params[:id])

• @item.save
• @item.destroy
• params[:id]
• items_params
fi
實體變數 - Instance variable
在 Controller 中很常⽤哦

• 變數名稱前⾯加上⼀個 @
• 變數不會跟其他的實體共享
• 影響範圍在 Controller & Helper & View 都有
Rails View
Response 就交給 View 處理
Rails View
負責 Response 的內容

• 每個 Request 都會有 Response （即便是空的 Content 也是）

• Rails View 不只處理 HTML ，也可以是 JSON / XML … 其他 MIME 的東⻄
• 有特定的⽅式可以產出
Rails View
負責 Response 的內容
HTML
網⾴設計最基礎的東⻄，誰都逃不掉
 HyperText
Markup Lang.
HTML
HTML 標籤簡介
簡列常⽤的 HTML tag

• html / head / body => 結構所需

• div / span => 區隔出⼀個空間所使⽤
• h1 ~ h6 => 標題⼀到標題六
• strong / em => 粗體、斜體
• a => 超連結
• p => 段落
HTML demo
HTML 真的很重要
 CSS
佛要⾦裝，⼈要衣裝，網⾴要 CSS 來裝（扮）
透過描述⽂字來
呈現網⾴畫⾯
跟 HTML ⼀樣都是指令描述
選擇器介紹
CSS Selector
選擇器簡介
CSS Selector

• #id - ID 選擇器
• #header-title // 代表選擇 ID 屬性為 header-title 的元素
• span#alert-message // 代表選擇 ID 屬性為 alert-message 的 span 標籤
• .class - 類別選擇器
• .container // 代表 class 有包含 container 的元素
• header.container // 代表 class 有包含 container 的所有 header 標籤
• [] - 屬性選擇器
• [data-name] // 代表有 data-name 這個屬性的標籤
選擇器 demo
CSS Selector
 Google:
CSS 選擇器
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
 建立⼀個
Rails Project
後⾯的部分請各位⾃⼰嘗試喔！
rails new Todo
建立⼀個 todo 的專案
Rails 架構介紹
下期預告
完