Rails gril

Rails安裝
Download http://railsinstaller.org/en Or http://goo.gl/DvzVwL

Sublime Text 2
Dowload: http://www.sublimetext.com/2 Or http://goo.gl/ByaLtn

Learn A B C
 靜態與動態網站的差別
 程式語言是什麼
 瀏覽器、終端、程式碼編輯器、目錄結構。

靜態與動態網站的差別

程式碼編輯器、終端、瀏覽器

TryRuby
 1. Use http://tryruby.org/ or

Bulid WebSite App
 第一步
 輸入cmd後按Enter

 第二步
 輸入cd c: 按enter
 輸入mkdir projects 按enter

 第三步
 輸入cd projects 按Enter
 輸入rails new railsgirl 按Enter

 第四步
 輸入cd railsgirl 按Enter
 輸入rails server按Enter

 第五步
 打開瀏覽器
 輸入localhost:3000
 出現右邊的畫面的話
 恭喜！你的第一個網站建起來了

 確定我們還在railsgirl目錄
 輸入rails generate scaffold idea name:string description:text picture:string
按下Enter

 再次輸入rake db:migrate 按下Enter

 現在再一次輸入rails server。然後在網址打上http://localhost:3000/ideas
 試著操作一下

第一道指令
rails generate scaffold idea name:string description:text picture:string

第二道指令
rake db:migrate

怎麼做？
1.先打開C:projectsrailsgirlappviewslayouts資料夾
2.在application.html.erb檔案上按右鍵，用sublime Text2開啟
3.找到<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
4.在這行上面加入<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">
5.把<%= yield %>換成<div class="container"><%= yield %></div>

6.找到<body>。在底下加入
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">The Idea app</a>
<ul class="nav">
<li class="active"><a href="/ideas">Ideas</a></li>
</ul>
</div>
</div>
</div>

 7.找到</body>，在上方加入。最後按存檔
<footer>
<div class="container">
Rails Girls 2013
</div>
</footer>

最後一步
 1.先打開C:projectsrailsgirlappassetsstylesheets資料夾
 2.在application.css檔案上按右鍵，用sublime text開啟
 3.在最下方加入底下的文字，然後存檔
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important;
border: none !important; }
th { border-bottom: 1px solid #DDD !important; }

一個網頁的基本組成
還有這個
我們剛剛做了這個

加點調味料
 1.加入圖片上傳
 2.調整一下我們瀏覽時的網址
 3.作者頁面

圖片上傳
 1. 先開啟C:projectsrailsgirl資料夾
 2.在Gemfile檔案上按右鍵，用sublime Text 2開啟
 3.找到gem ‘sqlite3‘ 在這行下面加入gem ’carrierwave‘ 然後按存檔
 3.接下來回到我們先前的cmd視窗裡輸入bundle 然後按Enter
 4. 再打上rails generate uploader picture

圖片上傳
 5.打開C:projectsrailsgirlappmodels資料夾
 6.在idea.rb按右鍵，用sublime text2開啟
 7.找到class Idea < ActiveRecord::Base這行後在下面加入
 mount_uploader :picture, PictureUploader
 8.打開C:projectsrailsgirlappviewsideas資料夾
 9.在_form.html.erb上按右鍵，用sublime text2開啟
 10.找到<%= f.text_field :picture %>這行，修改為<%= f.file_field :picture %>

好像出錯了？
 1.打開C:projectsrailsgirlappviewsideas資料夾
 2.找到show.html.erb按右鍵後，用sublime text2開啟
 3.把<%= @idea.picture %>換成
 <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present?
%>
 4.重新整理一下瀏覽器看看: )

調整一下瀏覽的網址
 1.開啟C:projectsrailsgirlconfig資料夾
 2.在routes.rb上按右鍵，用sublime text2開啟
 3.在第一行的底下加入root :to => redirect(‘/ideas’) 然後存檔
 4.再重新開啟http://localhost:3000 看看: )

Last
 1.在我們的cmd視窗裡輸入rails generate controller pages info
 2.開啟C:projectsrailsgirlappviewspages資料夾
 3.在info.html.erb上按右鍵，用sublime text2開啟
 4.開始動手做自已的作者頁吧: )
 5.最後在瀏覽器上打上http://localhost:3000/pages/info 看看你的成果

Rails gril

More Related Content

Similar to Rails gril

More from Aaron King

Rails gril

Editor's Notes