進度條

WordPress 架站實體工作坊即將開始

【實體課程】12/06 (日) 09:00 「台北場」WordPress 整天工作坊即將開始,目前持續售票中,不要錯過喔!購票與詳情請看「KKTIX 購票頁面」或「進度條文章」。

[Ruby on Rails] 03. [Mac] 安裝程式編輯器與變更網站首頁

我們成功運行了Ruby on Rails後,第一件事情當然是先拿掉預設首頁換成我們的啊!

作者: 縱裕 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. [Mac] 安裝程式編輯器與網站首頁設定 (所屬課程)


以下正式開始文章


在開始修改程式之前,我們需要一個程式編輯器。課程裡面用的都是Adobe 的 Brackets,當然你也可以用Atom 或是 Sublime Text,在Rails的開發學習中使用哪一個基本上沒太大的差異,選你用的順手的就可以了。

 

第一件事情就是延續上一堂課,我們需要用到終端機(Terminal),你可以使用搜尋的方式找到它,也可以在Finder裡面->應用程式(Applications) -> 工具程式(Utilities)-> 終端機(Terminal)。 找到以後就把他鎖在Dock上,以我們的(將來的)工作內容來說,幾乎每天都會用到它。所以還是跟他熟悉點比較好。

 

這邊複習一下指令,從常見Bash commad開始。那什麼是Bash?

 

 

最簡單的理解就是,因為電腦是很笨的,就連鍵盤輸入與程式輸出文字結果都需要"指定"。就算是Standard(基本/標準)輸入輸出,其實都是要設定的,更不用說如果我們想要執行各式各樣的「指令(command)」,至少我們要先知道「指令」放在哪裡。所以在作業系統的演進裡面,就出現了所謂的命令處理器。

 

終端機(Terminal)打開後,會從使用者設定裡面找到一個命令處理器去執行,執行成功就可以開始使用指令了。命令處理器自己本身也是個指令,就叫做bash。你可以嘗試執行bash,執行完畢後你會跳到另外一個新的命令處理器程式裡面,你可以下exit離開。不過這不是我們這堂課的重點,總之先知道我們的終端機開啟後在跑bash。這邊要講一下「Terminal」這個詞, 如果大家有坐過捷運到終點站的話,應該會聽到「Terminal station」這個詞,也就是終點站。那為什麼我們輸入的程式會被稱之為Terminal呢?這就要從「網路」去想。

 

網路他是由一台電腦做為「點」,兩台電腦組成「線」,三台以上就可能有面的概念,再更多的話就會變成「網」。你發出要求到某一台主機(比方說progressbar.tw),這台主機會回你一段資料給你,兩邊互相傳輸的時候會經過很多「點」,網站把資料交給A電腦, A交給B,B交給C,C.....某台電腦交給你。所以你就是「終點」,中間過往的電腦都只是轉交而已直到你停下來...做什麼?當然就是下命令摟!所以Terminal其實是一種概念,網路末端的人機輸入介面而已,有很多程式可以滿足這個功能,其中一個就是Bash。

 

Mac預設終端機就是跑bash,同時bash也知道很多預設安裝的程式(也就是指令)的所在位置,一般來說都在:

1. /bin/

2. /usr/bin/

3 /usr/local/bin/

...  還有一些其他的,你可以看$PATH看出來有哪些。$PATH是系統變數,記錄著指令所在位置,只要在$PATH所記錄的位置,你都可以直接使用該程式。例如cd 是在 /usr/bin/ 底下,ls 是在 /bin/ 底下,你可以使用whereis這個指令去看其他指令所在位置,而whereis自己也是在 /usr/bin/ 底下。

 

 

上面一下指令,一下程式,搞得你很亂。其實這是故意的,因為指令就是程式。如果你用C語言寫了一個程式編譯過了以後就會變成可執行檔,然後如果把這個可執行檔放進上面的路徑其中之一,你就會發現它變成指令了!!

 

 

那我們現在回到Rails來,在上一篇文章裡面,我們嘗試了rails server (可縮寫成 rails s)。你有想過,這個rails為何突然可以用嗎?原因很簡單,因為rvm把ruby與rails裝好後,rvm 把rails丟進/usr/bin/裡面(另一個常用的指令 rake 也在裡面)。 所以我們自然就可以直接使用 rails s 而非使用絕對路徑 ./...PATH/rails s

 

 

 

複習一下指令,我們常用的有

1. pwd => 看目前路徑

 

2. ls    => 看當前資料夾內容

 

3. cd   => 進入某個路徑,例如cd Desktop,進入桌面。小技巧,當你打路徑的時候,如果不想打那麼多字,可以使用tab鍵讓它自動完成。如果同一個路徑底下有兩個一樣字首的路徑的話,你可以連按兩下tab,他就會顯示你可能的路徑選項,但是這樣不會自動完成。

 

 

4. cd ~ => 小蝌蚪 ~ 代表的是家目錄,所以無論你在哪個路徑想要回家目錄的話,可以直接使用cd ~

 

 

5. rm => 刪除檔案,rm [檔案路徑] 這樣去刪,但是無法刪除資料夾。想要刪除資料夾的話需要自帶參數為 rm -rf [檔案路徑],r代表的是recursive(遞迴),意思就是如果資料夾裡面還有資料的話,就一起刪掉。f代表的是force(強制),如果不下f的話,他會再確認。如果一次刪大量的檔案,每個都要再確認很惱人。這邊特別提醒,rm -rf 是一個相當強力的指令,歷史上造成了無數的悲劇,每個工程師在他的生涯裡面都會碰到幾次。希望各位發生意外的時候,是有版本管理的。

 

 


接下來介紹一下這堂課會用到的 rails指令。

1.  rails new [project name],建立新的rails專案。專案名稱有一些不能用此方式產生,例如test。

2. 進入 [project] 後執行rails s 啟動 web server。啟動成功就可以在http://localhost:3000 上看到。如果要跳出,必須用bash的快速鍵,ctrl + c。強制終止程式。

3. rails g controller [controller name] => 在專案中新增controller

 

 

 

 

那現在開始正式的修改首頁!!

 

 

Ruby on Rails 是一個遵守MVC概念的框架,所以主要有Model - View - Controller。其中因為Model曾跟資料庫有關,所以先不介紹。我們這邊要介紹的是View 和 Controller。

 

無論是MVC的那一段,最基本的部分都會放在 [專案]/app/  裡面,其中包含 controllers / models / views。我們之後大多數的時間都在關心這三個資料夾,所以位置要記好。如果要產生新的頁面,必須包含一個controller 而且裡面必須要有一個action method。聽起來很玄,但其實照做的話就跟下圖一樣而已。然後必須要在views 裡面也包含 [controller name]/[action].html.erb 之類的檔案。

 

 

 

例如建立這兩個檔案:

app/controller/home_controller.rb

app/views/home/index.html.erb

可以使用$ rails g controller home 來達成

 

 

之後修改home_controller.rb ,在裡面的Class加入

def index

end

 

然後把index.html.erb 改成你想要的內容,就差不多了。不過外部還是連不進來。

 

 

原因是因為Route還沒有設!程式沒有聰明到會自己知道要用哪個客製化頁面當首頁,所以我們這邊要設定一下。進入/config/routes裡面去修改!

 

其中root 就是對應首頁的意思,我們這邊要讓他去讀取home_controller 與 index action,所以就要寫成 root "home#index",其中root是function,後面的是字串。但是root這隻程式預設會把字串再分成controller 與 action。

 

 

都設定完以後就可以按下重新整理,接者就可以看到我們設定的文字了!!

 

 

所以我們就成功地把首頁給換成我們自己的了!

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Medium picture

縱裕

錄課程錄到快死掉了啊!!!