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

Recommended

Recommended

More Related Content

Similar to Rails gril

Similar to Rails gril (20)

More from Aaron King

More from Aaron King (14)

Rails gril

Editor's Notes