狠狠撸

搁补颈濒蝉安装
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
按下贰苍迟别谤

? 再次輸入rake db:migrate 按下贰苍迟别谤

? 現在再一次輸入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

Rails gril

Editor's Notes