6 : 作作看網頁!②

前の章:作作看網頁!①

Header6 在這個章是「作作看網頁①!」繼續的內容。
還沒看上章內容的話、從這裡參考

 ③ : 打入新的資料(new)


到這邊解釋了 的設定方法。
現在可是只能顯示資料,不能追加資料。

所以在這裡做做看作資料的方法。
基本上,用「rails c」上做的

1 Post.create(:name => "名字", :content => "内容", :place => "地方")

設定網頁裡的資料的追加。
作資料的方法有「new」跟「create」的兩個。

  • 先用「new」顯示打入資料的畫面
  • 再來用「create」保存資料後,顯示保存好了的畫面

的順序作資料。

在瀏覽器解釋的話,在打入新的資料(new)的網頁上打入資料之後,點擊登録按鈕之後、 Chrome posts new 2 移動到「新增資料(create)」的網頁。 Chrome posts create 1 然後用 Sequel Pro確認資料庫,可以看到資料會保存在資料庫裡。
 使用Windows的話,用SqliteBrowser打開。 Sequel pro myapp posts 3
首先,先作作看打入新的資料(new)的網頁吧。

 ⑴ : 設定網頁


 首先從學過的內容開始復習吧。要設定網頁的時候,必須要設定三個設定。那個設定是什麼呢?

這個設定是,
  • 七個網頁中設定要使用哪一個網頁的設定
  • →編輯「config > routes.rb」的內容

  • 資料的操作的方法的設定
  • →編輯「app > controllers > 資料庫的名字_controller.rb」的內容

  • 顯示的網頁的內容的設定
  • →編輯「app > views > 網頁的名字.html.erb」的內容
的三個內容。
「打入新的資料(new)」的網頁上,
作空格的資料之後,作打入資料的輸入框。

在這裡做
  • 作空格的資料(posts_controller.rb
  • 設定資料的輸入框,發信按鈕(new.html.erb
這個兩個設定。
 那麽從「七個網頁的設定」開始做!

打開config」文件夾裡,設定七個網頁的設定文件routes.rb」文件吧。

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已經編輯過了吧。

跟上面的第三行一樣有沒有追加「new」嗎?
有追加的話,已經設定好使用「打入新的資料(new)」的網頁了。
 那麽設定看「操作資料」的內容吧。

剛開始,用Sublime Text打開app > controllers文件夾裡的posts_controller.rb文件吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,在「def new」跟「end」之間設定下面的內容吧。

 posts_controller.rb(追加第12行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


11 12 13 def new @post = Post.new end

這樣子「打入新的資料(new)」的網頁的操作資料的設定完成了。

「new」的資料操作像下面一樣,
@設定的標記 = 資料庫的名字(第一字是大寫的單數).new
設定。

Post.new在做裡面是空格的資料

用這裡空格的資料打入資料之後,在「新增資料(create)」的網頁上保存資料

在「打入新的資料(new)」的網頁上,作打入空格的資料的輸入框跟發信按鈕。

 作作看「foods」資料庫的「打入新的資料(new)」的網頁上,操作資料的內容吧。


 foods_controller.rb
1 2 3 def new @food = Food.new end

 那麽,設定網頁的資料吧。

在這裡設定像下面圖像一樣子的畫面。 Chrome posts new 1 首先,用Sublime Text打開的「myapp」上,打開app > views > posts吧。
裡面有沒有new.html.erb文件嗎?如果有的話開開看!

在這裡,設定顯示「打入新的資料(new)」的網頁的內容。

那麽,開始做網頁的設定吧!

 new.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">返回主頁</a>

那麽,顯示網頁吧!
※ 一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


起動服務器之後,用瀏覽器打開「0.0.0.0:3000/posts/new」吧。
 使用Window的話,打開看localhost:3000/posts/new吧。 Chrome posts new 1 顯示上面一樣的有輸入框跟發信按鈕的網頁嗎?
像上面的0.0.0.0:3000/資料庫的名字/new是,打入新的資料(new)的網頁。

這一次是「posts」資料庫的打入新的資料(new)的網頁,所以在瀏覽器上打入

 瀏覽器
1 0.0.0.0:3000/posts/new

打入這樣子的url,打開網頁。

 那麽,用瀏覽器打開「tweets」資料庫「打入新的資料(new)」的網頁的時候,要怎麼樣打開網站呢?


 瀏覽器
1 0.0.0.0:3000/tweets/new

那麽,說明在網頁上設定的內容吧。

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">回返主頁</a>

在顯示輸入框的地方是

 new.html.erb(第4〜11行)
4 5 6 7 8 9 10 11 <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %>

的地方。可以推測在這裡設定三個輸入框跟一個發信按鈕吧

對。在這裡設定輸入框,按鈕的顯示。例如說在裡面的

5 <%= f.text_field :name %>

在作資料庫裡保存「name」資料的輸入框
跟這個比的話,作「content」的輸入框的

7 <%= f.text_area :content %>

內容不同。

這個是因為這裡的內容是按照資料的種類(請參考這裡)設定的。

「posts」資料庫解釋的話,在「name」上設定放短的文章・在「content」上設定放長的文章・在「place」上設定放短的文章的內容。
※ 內容請參考這裡

 輸入框也按着這個資料的種類設定。

放短的文章的輸入框的設定是
<%= f.text_field :框子的名字 %>
放長的文章的輸入框的設定是
<%= f.text_area :框子的名字 %>
放在數字的輸入框的設定是
<%= f.number_field :框子的名字 %>
設定。

 打入數字的「price」的輸入框要這麼設定好呢?


1 <%= f.number_field :price %>

到這裡,說明了顯示三個輸入框的設定。
接著解釋顯示「登錄」的發信按鈕。
這個按鈕在

1 <%= f.submit "登錄" %>

顯示。
點擊這個按鈕之後,移動到「新增資料(create)」的網頁之後,保存打入的資料在資料庫裡。
※ 還沒設定新增資料(create)的網頁的資料操作,所以資料還不會保存在資料庫。(點擊看之後,在Sequel Pro/SqliteBrowser看看內容吧)
到這裡,說明了顯示輸入框跟發信按鈕的說明。
那麽還沒說明的第3行第12行是在做什麼呢?

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">返回主頁</a>

 posts_controller.rb
1 2 3 def new @post = Post.new end

在第3行,用「f」的標記選擇「posts_controller.rb」的「Post.new」作的空格的資料「@post」。

※ 在這裡使用的是「f」不是「@post」,請注意。
※ 在這裡使用「f」的名字,但是這個只是從「form」的第一字拿的而已,所以可以用別的自己喜歡的名字。
那麽,說明設定的方法吧。
在「打入新的資料(new)」的網頁上,必須在網頁上顯示「posts_controller.rb」裡用「Post.new」作的空格的資料。

使用這個空格的資料的時候,先設定
<%= form_for @設定的標記 do |喜歡的名字| %>
的內容。這樣子可以選擇「@post」的資料。
※ 是「<%=」不是「<%」,請注意。

選擇的資料要設定在
<% end %>
之間。在這裡作輸入框跟發信按鈕。
在裡面設定的輸入框,如果是短的文章的話,
<%= 名字.text_field :框子的名字 %>
設定。
※ 如果是長的文章的話使用f.text_area,如果是數字的話使用f.number_field設定。

然後,設定從「打入新的資料(new)」的網頁,移動到「新增資料(create)」網頁的發信按鈕
<%= f.submit "顯示的文字" %>
的內容。
 在網頁上打入,像下面一樣設定操作資料的「@stock」的名字「name(短的文章)」用戶「user(短的文章)」價錢「price(數字)」的設定吧。

 stocks_controller.rb
1 2 3 def new @stock = Stock.new end


 new.html.erb
1 2 3 4 5 6 7 8 <%= form_for @stock do |f| %> <p>名字</p> <%= f.text_field :name %> <p>用戶</p> <%= f.text_field :user %> <p>價錢</p> <%= f.number_field :price %> <% end %>


 ⑵ : 總結

解釋「打入新的資料(new)」的網頁的三個設定。

「config」文件夾裡的「routes.rb」文件裡設定「new」的內容

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


設定「app > controllers」文件夾裡的「資料庫的名字_controller」文件「new

 posts_controller.rb
1 2 3 def new @post = Post.new end

設定作空的資料的資料操作「.new」跟用html網頁的顯示

設定「app > views > 資料庫」文件夾裡「new.html.erb」的內容。

 new.html.erb(第3行〜第12行)
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">返回主頁</a>

在網頁上,用「controller」文件裡作的空格的資料,設定打入內容的輸入框。

 form_for

用「<%= form_for @設定的標記 do |喜歡的名字| %>で指定空格的資料,
<% end %>之間作「新增資料(create)」的輸入框跟發信按鈕。

 輸入框・發送按鈕

<%= 名字.輸入框 :框子的名字 %>作資料的輸入框之後,
<%= 名前.submit "顯示的文字" %>,作「新增資料(create)」的按鈕。
※ 短的文章的話用「名字.text_field」設定,長的文章的話用「名字.text_area」設定,數字的話用「名前.number_field」設定

設定完了後,在terminal上打入「rails s」之後用瀏覽器上打開網頁。
「新增資料(create)」的網頁,從0.0.0.0:3000/資料庫的名字/new打開。

 使用Windows的話,從localhost:3000/資料庫的名字/new打開。
到這裡,作了打入資料的網頁。

接著做「新增資料(create)」的網頁吧。

設定的內容請參考這裡


 ④ : 新增資料(create)


到這裡「打入新的資料(new)」的網頁的設定好了。

現在資料的打入之後,可以從「打入新的資料(new)」的網頁移動到「新增資料(create)」的網頁了。
但是資料還不能保存在資料庫裡


在這裡做做看資料的保存吧!
這一次的內容,可以說是在網頁上設定第四章做的

1 Post.create(:name => "名字", :content => "内容", :place => "地方")

的操作資料的地方(posts_controller.rb)。

從「打入新的資料(new)」的網頁拿資料之後,用上面操作資料的方法保存資料。
※ 這個時候,網頁是從打入新的資料(new)的網頁移動到「新增資料(create)」的網頁,所以不用在瀏覽器上打入url。

在這裡做,
  • 用「打入新的資料(new)」的網頁的資料,保存資料(posts_controller.rb
  • 保存之後顯示資料保存好的網頁(create.html.erb
這個兩個設定。

那麽,做做看「七個網頁的設定」「操作資料的設定」跟「顯示的網頁的設定」三個設定吧!

 ⑴ : 設定網頁


 首先從「七個網頁中使用哪一個網頁」的設定開始做。

打開看,設定七個網頁中自己喜歡的網頁的設定文件routes.rb」文件(在config文件夾裡)吧。

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已經有設定過了對吧。

跟上面一樣已經追加了「create」吧。這樣子設定好「新增資料(create)」的網頁了。
 那麽,設定看「操作資料」的內容吧。

在設定「posts」資料庫的操作資料的方法的文件「posts_controller.rb」上,追加設定。

用Sublime Text,打開app > controllers文件夾裡的posts_controller.rb文件吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,在「def create」跟「end」之間設定下面的內容吧。

 posts_controller.rb(追加第16行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


15 16 17 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

內容有一點複雜。

可以推測@post是用html文件設定顯示網頁的標記、Post.create是作資料,所以

1 params.require(:post).permit(:name, :content, :place)

的地方有一點難理解。
「params」裡會放打入新的資料(new)的網頁送來的資料。例如說是「name是'山田太郎'、content是'你好'、place是'新宿'」等等的資料,都放在「params」裡面。

所以這個「params」裡有

1 (:name => "打入的內容", :content => "打入的內容", :place => "打入的內容")

這些,在「打入新的資料(new)」打入的資料。
在後面的,

1 .require(:post).permit(:name, :content, :place)

在設定不要保存posts資料庫的name、content、place以外的資料

這個是為了網站的安全的設定。例如說防止資料庫裡的別的資料的刪除或者更改等等。記得這個設定是為了安全,不要忘記設定。

在這裡的設定是,
  • 在「require」的後面打入「:資料庫的名字(單數)」
  • 「permit」的後面打入「:框子的名字」

這樣子做。

所以「新增資料(create)」的網頁,
@設定的標記 = 資料庫的名字(第一字大寫・單數).create(params.require(:單數的資料庫的名字).permit(:框子的名字 ...))
是這樣子設定。

 設定「tweets」資料庫的「name」「content」「place」的「新增資料(create)」的網頁的資料的操作是怎麼樣做呢?


 tweets_controller.rb
1 Tweet.create(params.permit(:tweet).permit(:name, :content, :place))

操作資料的設定到這裡。接着做做看網頁的設定吧! Chrome posts create 1 在這裡,作作看上面圖像一樣子的網頁。

首先,用Sublime Text打開的「myapp」上,打開app > views > posts吧。
這裡面有沒有create.html.erb文件嗎?有的話打開看!

在這個文件上,追加「新增資料(create)」的網頁的設定。

那麽,編輯create.html.erb的內容吧!

 create.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 <h1>投稿好了</h1> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">返回主頁</a>

接著,在網頁上顯示看吧!
※ 一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


起動服務器之後,用瀏覽器打開「0.0.0.0:3000/posts/new」吧。
 使用Window的話,打開看localhost:3000/posts/new吧。

這樣會顯示打入資料的輸入框,打入看自己喜歡的資料之後,點擊「登錄」的按鈕吧。
像下面的圖像一樣,有沒有移動到投稿好了的畫面嗎? Chrome posts create 1 移動好了之後,用Sequel Pro確認內容吧!

 使用Windows的話,用SqliteBrowser確認內容吧!

 資料有沒有保存好了嗎?
網頁的內容應該容易理解。
在「show.html.erb」裡面設定的,

1 <%= @post.name %>

一樣,在顯示內容。

這一次的「@post」是,

1 @post = Post.create(params.require(:post).permit(:name, :content, :place))

不是「find(id號碼)」一樣選擇資料,記得用「create」也可以顯示資料吧。


 ⑵ : 總結

「新增資料(create)」的網頁上要設定三個內容。

設定的內容請參考這裡

在「config」文件夾裡的「routes.rb」文件裡,追加「create」的設定

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


在「app > controllers > 資料庫的名字_controller」文件夾裡的「create」上,追加設定

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

新增資料的「create」裡,設定指定資料庫的內容(require)跟指定框子的內容(permit)

編輯「app > views > 資料庫的名字」文件夾裡的設定文件「create.html.erb」的內容。

 create.html.erb
1 2 3 4 5 6 7 8 9 <h1>投稿好了</h1> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主頁</a>

沒設定網頁的顯示也可以保存資料,但是利用的人比較會不方便,所以不要忘記設定網頁的顯示吧!

新增資料(create)」的網頁是,從「打入新的資料(new)」的網頁移動到的,不用在瀏覽器打入url可以打開的網頁。
※ 網頁的url,應該是0.0.0.0:3000/posts
到這裡,作了新增資料的網頁。
接着,設定「編輯資料」的網頁吧!

設定的內容,請參考這裡


 ⑤ : 打入編輯的資料(edit)


到這裡設定了
這個四個網頁。

現在,還沒設定好的網頁只有「資料的編輯」跟「資料的刪除」這個兩個而已了。
首先做做看資料的編輯吧!
「資料的編輯」是,在網頁上設定,用「rails c」打入的資料的編輯。

1 Post.find(1).update(:content => "你好")

資料的編輯跟資料的新增一樣有
打入編輯的資料(edit)編輯資料(update),這個兩種。
  • 先用「edit」顯示打入資料的網頁
  • 再來用「update」保存打入的資料
的順序。

首先在打入編輯的資料(edit)的網頁上打入資料,點擊更新按鈕之後, Chrome posts 1 edit 1 移動到編輯資料(update)的網頁。 Chrome posts 1 update 1 用瀏覽器打開0.0.0.0:3000/posts/id的号码,可以看到資料有更新。 Chrome posts 1 edited 首先,作作看這個打入編輯的資料(edit)的網頁吧!


 ⑴ : 設定網頁


 先從複習開始。設定網頁要設定怎麼樣的設定呢?

  • 七個網頁的設定
  • 操作資料的設定
  • 網頁內容的設定

這個三個。
打入編輯的資料(edit)的網頁上,指定要編輯的資料作輸入框。

在這裡設定,
  • 選擇要編輯的資料
  • 顯示輸入框跟發信按鈕
這個兩個設定。
 剛開始從「七個網頁的設定」開始做吧!

那麽先打開,設定七個網頁的config > routes.rb文件吧!

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已經有編輯過了吧。

跟上面一樣,有沒有追加「edit」的網頁嗎?
有追加的話,使用打入編輯的資料(edit)的網頁的設定是OK。
 接着做「操作資料」的設定吧。

操作「posts」資料庫的「posts_controller.rb」文件上,追加設定吧。

用Sublime Text打開,app > controllers文件夾裡的「posts_controller.rb」文件吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,「def edit」跟「end」之間設定下面的設定吧。

 posts_controller.rb(追加第20行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


19 20 21 def edit @post = Post.find(params[:id]) end

 在這個追加的一行,在做什麼呢?

在這個一行,選擇要編輯的資料。
※ 詳細請參考這裡

 這個跟選擇一個資料(show)的設定

1 2 3 def show @post = Post.find(params[:id]) end

做一樣的設定。

要編輯的資料在這裡選擇。
在「打入選擇的資料(edit)」的網頁上,不要忘記設定這個資料的選擇!

 那麽「tweets」資料庫的「打入編輯的資料(edit)」的網頁要怎麼樣設定好呢?


 tweets_controller.rb
1 2 3 def edit @tweet = Tweet.find(params[:id]) end

 那麽,做做看網頁的內容吧。

在這裡顯示像下面圖像一樣子的畫面。 Chrome posts 1 edit 1 首先,用Sublime Text打開myapp > app > views > posts吧。
裡面有edit.html.erb文件嗎?有的話打開看看!

在這個文件上追加,顯示「打入編輯的資料(edit)」的網頁的設定。

 那麽,設定網頁的設定吧!

 edit.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 <h1>編輯投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %> <% end %> <a href="/posts/<%= @post.id %>">返回主頁</a>

這一次的設定,有沒有好像有看過吧?
這個設定因該跟「new.html.erb」很像。

 new.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄" %> <% end %> <a href="/posts">返回主頁</a>

 複習學習的內容吧。這個「new.html.erb」文件中,設定「name」的輸入框跟按鈕的地方在哪裡呢?

 「name」的輸入框
1 <%= f.text_field :name %>

 按鈕
1 <%= f.submit "登錄" %>

new.html.erb文件上,

3 <%= form_for @post do |f| %>

12 <% end %>

之間顯示輸入框跟按鈕

 這個跟「edit.html.erb文件做的設定一樣。

3 <%= form_for @post do |f| %>

10 <% end %>

之間

4 5 6 7 8 9 <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %>

在顯示網頁。
在這裡,做打入「content」跟「place」的設定
加上

 edit.html.erb(第3行)
3 <%= form_for @post do |f| %>

裡面的「@post」是,在「posts_controller.rb」設定的

 posts_controller.rb(第20行)
20 @post = Post.find(params[:id])

選擇「posts」資料庫的資料的標記。在這裡是選擇編輯的資料
 用下面的資料操作的「@user」,作打入姓氏「family_name(短的文章)」名字「first_name(長的文章)」年齡「age(數字)」的網頁吧。

 users_controller.rb
1 2 3 def edit @user = User.find(params[:id]) end


 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>編輯投稿</h1> <hr> <%= form_for @user do |f| %> <p>姓氏</p> <%= f.text_field :family_name %> <p>名字</p> <%= f.text_field :first_name %> <p>年齡</p> <%= f.number_field :age %> <hr> <%= f.submit "更新資料" %> <% end %> <a href="/posts/<%= @post.id %>">返回投稿的資料</a>

那麽在網頁上顯示看吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


起動服務器之後,用瀏覽器打開「0.0.0.0:3000/posts/1/edit」吧。
 使用Window的話,打開看localhost:3000/posts/1/edit吧。 Chrome posts 1 edit 1 有沒有顯示像上面圖像一樣有輸入框的網頁嗎?
打開打入編輯的資料(edit)的網頁的話,用瀏覽器從0.0.0.0:3000/資料庫的名字/id號碼/edit打開。

這一次是打入「posts」資料庫的「id是1」的資料的網頁,所以從

 瀏覽器
1 0.0.0.0:3000/posts/1/edit

打開網頁。

 在瀏覽器上,打開「videos」資料庫的「打入編輯的資料」的網頁要怎麼打入呢?


 瀏覽器
1 0.0.0.0:3000/videos/1/edit


 ⑵ : 總結


打入編輯的資料(edit)的網頁要做三個設定。

設定的內容請參考這裡

「config」文件夾裡的「routes.rb」文件裡,追加「edit

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


設定「app > controllers」文件夾裡的「資料庫的名字_controller」文件的「edit」。

 posts_controller.rb
1 2 3 def edit @post = Post.find(params[:id]) end

設定選擇編輯的資料的「.find(params[:id])」跟,用html顯示標記「@post」

在「app > views > 資料庫的名字」的文件夾裡的「edit.html.erb」裡,設定內容。

 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 <h1>編輯投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "更新" %> <% end %> <a href="/posts/<%= @post.id %>">返回投稿資料</a>

在網頁上,顯示更新的資料的輸入框跟發信按鈕

 form_for

<%= form_for @設定的標記 do |喜歡的名字| %>指定要編輯的資料、
<% end %>之間作資料的輸入框跟「更新(update)」的發信按鈕。

 輸入框・發信按鈕

打入<%= 名字.輸入框 :框子的名字 %>作資料的輸入框,
打入<%= 名字.submit "顯示的文字" %>作「更新(update)」的按鈕。
※ 短的文章的話名字.text_field,長的文章的話名字.text_area,數字的話名字.number_field設定內容。

設定完了之後,在terminal上打入「rails s」之後、用瀏覽器打開網頁。
「打入編輯的資料」的網頁,從0.0.0.0:3000/資料庫的名字/id號碼/edit打開。

 使用Windows的話,打入localhost:3000/資料庫的名字/id號碼/edit打開。
到這裡,作了打入編輯的資料(edit)的網頁了。

接着,作作看「編輯資料(update)」的網頁吧。

設定的內容請參考這裡


 ⑥ : 編輯資料(update)


到這裡設定了打入編輯的資料(edit)的網頁了。

這個跟「新增資料(create)」的網頁一樣,還需要設定編輯資料的資料操作。
那麽,在這裡做做看資料的編輯吧!
這一次設定的資料操作的方法是,在第4章做的

1 Post.find(1).update(:content => "晚安")

這個內容。設定操作資料的地方(posts_controller.rb)裡,設定這個內容。 從「打入編輯的資料(edit)」的網頁拿來資料之後,用上面的操作資料的方法編輯資料的內容。
※ 這個網頁是從「打入編輯的資料(edit)」的網頁移動的,所以不用在瀏覽器上打入URL。

在這裡設定
  • 用「打入編輯的資料(edit)」的網頁上打入的資料,編輯資料
  • 顯示編輯完成的網頁

那麽,做做
  • 「七個網頁的設定」
  • 「資料操作的設定」
  • 「網頁內容的設定」
這個三個設定吧!


 ⑴ : 設定網頁


 首先,設定七個網頁中使用哪一個網頁的設定吧

那麽打開,設定七個網頁的文件config > routes.rb吧!

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已經有編輯過了吧。

應該跟上面的內容一樣子已經追加了「update」吧。這樣子設定好「編輯資料(update)」的網頁了。
 那麽設定看「操作資料」的網頁吧。

在設定「posts」資料庫的資料操作的「posts_controller.rb」文件上追加設定。

用Sublime Text打開app > controllers > posts_controller.rb」文件吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,在「def update」跟「end」之間設定下面的設定吧。

 posts_controller.rb(追加第24行第25行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


23 24 25 26 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

這一次設定的兩行也是,應該在哪裡看過的設定吧。
第一行的@post = Post.find(params[:id])
「顯示一個資料(show)」的網頁,「打入編輯的資料(edit)」的網頁上使用過。

 那麽,第二行是在做什麼呢?

在第二行,按着打入的資料「params」,更新(update)選擇的資料「@post」。
※ 詳細請參考這裡
「新增資料」的時候也設定過,同樣的內容吧。

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

在這個「params」的部分裡面有,從「打入編輯的資料(edit)」網頁送來的資料。

在這個「params」裡面放name是'名字',content是'内容',place是'地方'等等的資料。
然後,為了不要改變指定的資料以外的資料,設定「require」跟「permit」。

在這裡設定的內容是,
  • 「posts」資料庫的「name」的框子
  • 「posts」資料庫的「content」的框子
  • 「posts」資料庫的「place」的框子
以外的框子不要更改


 資料的編輯(update)」也一樣。

1 @post.update(params.require(:post).permit(:content, :place))

在這裡使用「編輯資料」的「update」,所以設定的「@post

 post_controller.rb(第24行)
24 @post = Post.find(params[:id])

裡,只能編輯
  • 「posts」資料庫的「content」的框子
  • 「posts」資料庫的「place」的框子
的內容的操作資料的方法。

 用從「打入編輯的資料(edit)」的網頁拿來的「books」資料庫的「name」「price」「page」的框子,「編輯資料(update)」的網頁的資料操作是這麼樣設定呢?


1 2 3 4 def update @book = Book.find(params[:id]) @book.update(params.require(:book).permit(:name, :price, :page)) end

 最後做做看網頁的設定吧!

打入編輯的資料點擊「登錄」按鈕之後,會顯示下面圖像一樣子的網頁。 Chrome posts 1 update 1 首先,用Sublime Text打開的「myapp」上,打開app > views > posts吧。
裡面有update.html.erb文件嗎?如果有的話,打開看看!

在這個文件裡設定,在「打入編輯的資料(edit)」的網頁上點擊按鈕之後,顯示的網頁的內容。

那麽,編輯這個update.html.erb文件吧!

 update.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 <h1>投稿編輯好了。</h1> <hr> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主頁</a>

 這裡是在設定什麼呢?

在這裡顯示編輯後的資料。
詳細的內容請參考,「顯示一個資料(show)」的網頁,「新增資料(create)」的網頁吧。
那麽顯示看網頁吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


做完之後,打開「0.0.0.0:3000/posts/1/edit」吧!
 使用Windows的話,打開「localhost:3000/posts/1/edit」吧。

打開後打入自己喜歡的内容之後,點擊更新的按鈕吧! Chrome posts 1 update 1 顯示上面一樣子的網頁嗎?

出來了的話,用Sequel Pro / SqliteBrowser,或者打開「0.0.0.0:3000/posts/1」看看內容有沒有更新!


 ⑵ : 總結

在這裡做了「編輯資料(update)」的網頁的設定。

設定的內容,請參考這裡

在「config > routes.rb」文件上,設定「update

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


在「app > controllers > 資料庫的名字_controller」文件裡的「update」設定內容。

 posts_controller.rb
1 2 3 4 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

選擇要編輯的資料之後,在設定編輯的資料的「update」裡指定資料庫(require)跟框子(permit)

「app > views > 資料庫的名字」文件夾裡的「update.html.erb」上設定內容。

 update.html.erb
1 2 3 4 5 6 7 8 9 10 <h1>投稿編輯好了。</h1> <hr> <p>名字</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>地方</p> <%= @post.place %> <hr> <a href="/posts">返回主頁</a>

沒設定網頁的內容也可以編輯資料,可是利用的人會有一點不方便,所以不要忘記設定網頁的內容吧!

「編輯資料(update)」的網頁是在「打入編輯的資料(edit)」點擊按鈕之後會移動到的網頁,所以不用打入URL。
※ 網頁的URL,應該是「0.0.0.0:3000/posts/id號碼」。
到這裡,資料的編輯也做好了。
剩下的也只是資料的刪除而已了!

設定的內容請參考這裡


 ⑦ : 刪除資料(destroy)


這個是,這個章最後一個網頁的說明。
最後解釋「資料的刪除(destroy)」吧。
在這裡設定的內容可以說是,在「rails c」做的

1 Post.find(3).destroy

的操作資料的內容。
首先,像下面的圖像一樣「顯示一個資料(show)」的網頁上追加移動到「刪除投稿」的網頁的連結, Chrome posts 1 add destroy 點擊連結後,會移動到「刪除了」的網頁。 Chrome posts 1 destroy 在「顯示全部的資料(index)」的網頁上可以看到,像下面的圖像一樣資料有刪除了。 Chrome posts all after destroy 所以在這裡設定
  • 追加移動到刪除資料的網頁的設定
  • 操作資料的設定
  • 顯示網頁的設定
這個三個內容。

那麽,開始做「刪除資料(destroy)」的設定吧!


 ⑴ : 設定網頁


差不多記住了,怎麼樣子設定網頁了吧?
  • 七個網頁的設定
  • 操作資料的設定
  • 顯示網頁的設定
這個三個。
 首先,從「七個網頁中使用那些網頁」的設定開始作。

那麽打開,七個網頁的設定文件「config > routes.rb」吧!

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

內容已經有編輯過了吧。

跟上面一樣,有沒有「destroy」的內容嗎?
有的話,已經設定好使用「資料的刪除(destroy)」的網頁了。
 接着做「操作資料」的設定吧。

在設定「posts」資料庫的資料操作的「posts_controller.rb」文件上,追加設定。

用Sublime Text打開,app > controllers > posts_controller.rb把。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開後,「def destroy」跟「end」之間設定下面的內容吧。

 posts_controller.rb(追加第29,30行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


28 29 30 31 def destroy @post = Post.find(params[:id]) @post.destroy end

可以理解這個內容嗎?
首先在

29 @post = Post.find(params[:id])

這裡選擇刪除的資料(請參考showedit)之後,刪除資料。

這裡面的內容也可以用

1 2 3 def destroy Post.find(params[:id]).destroy end

設定。

但是這樣子不能在網頁上顯示刪除的資料,所以要設定「@post」的標記。

 刪除「tweets」資料庫裡的資料的資料操作要怎麼設定呢?


 tweets_controller.rb
1 2 3 4 def destroy @tweet = Tweet.find(params[:id]) @tweet.destroy end

 那麽,設定網頁的內容吧!

首先設定點擊「刪除投稿」之後,移動到「刪除資料(destroy)」的網頁的連結。 Chrome posts 1 add destroy「顯示一個資料」的網頁的「show.html.erb」追加這個設定。
首先用Sublime Text打開的「myapp」上,打開app > views > posts吧。
從這裡打開show.html.erb吧!

 show.html.erb
1 2 3 4 5 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">返回主頁</a></p>

內容應該是這樣子。

那麽,在這裡追加移動到「刪除資料(destroy)」的網頁的設定吧!

 show.html.erb(追加第6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">返回主頁</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete">刪除投稿</a></p>

在這裡追加的行跟,在顯示全部的資料(index)的網頁上追加的移動網頁的設定(連結)很像。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一覽</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

不同的是,裡面的「data-method="delete"」的內容。

移動到刪除的網頁的設定要「data-method="delete"」追加,
<a href="資料庫的名字/選擇的id" data-method="delete">内容</a>
設定內容。

這一次的「選擇的id」是,用資料操作設定的,

 posts_controller.rb
3 4 5 def show @post = Post.find(params[:id]) end

用「@post」的「@post.id」顯示「id」

 show.html.erb
6 <a href="/posts/<%= @post.id %>" data-method="delete">刪除投稿</a>

這樣子作連結。

這樣,移動到「刪除資料(destroy)」的網頁的設定好了!

 移動到刪除「songs」資料庫的「id是100」的資料的「刪除」的連結要怎麼設定好呢?


1 <a href="/songs/100" data-method="delete">刪除</a>

接着設定,刪除完成之後,移動到的網頁吧!

點擊「刪除投稿」之後,顯示下面一樣的網頁。 Chrome posts 1 destroy 首先用Sublime Text打開的「myapp」裡,打開app > views > posts吧。
這裡面的destroy.html.erb是,刪除資料之後會顯示的「刪除資料(destroy)」的網頁。

那麽,看看裡面的內容吧!

 destroy.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 <h1>刪除內容了</h1> <hr> <p>名字:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts">返回主頁</a>

學到這裡的話,裡面的內容應該大概可以理解吧。

說明內容的話,
顯示在資料操作選擇的資料「@post」。
詳細的內容,參考show」「create」「update吧。

利用的人會有一點不方便,所以不要忘記設定這裡的內容哦!
那麽,在網頁上刪除資料吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


移動到,例如說像0.0.0.0:3000/posts/1的,「顯示一個資料(show)」的網頁吧。

有沒有追加刪除的連結嗎? Chrome posts 1 add destroy 有設定好的話,點擊刪除投稿的按鈕吧!有沒有顯示下面一樣子的網頁嗎? Chrome posts 1 destroy 做完了的話,「顯示全部的資料(http://0.0.0.0:3000/posts)」的網頁或者,用Sequel Pro / SqliteBrowser看看資料有沒有刪除! Chrome posts all after destroy


 ⑵ : 總結

「刪除資料(destroy)」的網頁的設定有三個。

設定的內容請參考這裡

「config > routes.rb」文件裡,設定「destroy

 routes.rb(第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers > 資料庫的名字_controller」文件裡,設定「destroy

 posts_controller.rb
1 2 3 4 def destroy @post = Post.find(params[:id]) @post.destroy end

選擇要刪除的資料,設定標記之後、標記的後面加「.destroy」

「app > views > 資料庫的名字」的文件夾裡的「destroy.html.erb」上,設定內容。

 destroy.html.erb
1 2 3 4 5 6 7 <h1>刪除投稿了</h1> <hr> <p>名字:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts">返回主頁</a>

內容設定什麼都可以,但是沒設定內容有一點不方便,所以至少設定返回主頁的連結吧。


刪除資料(destroy)的網頁上,不能從瀏覽器url的打入移動到網頁。
所以到「刪除資料(destroy)」的網頁的移動

1 <a href="/posts/<%= @post.id %>" data-method="delete">刪除投稿</a>

這樣,
<a href="資料庫的名字/選擇的id" data-method="delete">内容</a>
設定連結。
到這裡辛苦你了。最後做總結。

設定的內容請參考這裡


2 : 這個章的總結

用Ruby on Rails作的網頁,按着資料操作的方法有七種。

  • 顯示全部的資料   index
  • 例:推特的主頁
    →顯示的資料用Post.all設定
  • 顯示一個資料    show
  • 例:一個推特
    →顯示的資料用Post.find(id號碼)設定
  • 打入新的資料    new
  • 新增資料      create
  • 例:作推特的畫面
    →資料用Post.create設定
  • 打入編輯的資料   edit
  • 編輯資料      update
  • 例:編輯帳號的畫面
    →資料用Post.find(id號碼).update設定
  • 刪除資料      destroy
  • 例:刪除推特的畫面
    →資料用Post.find(id號碼).destroy設定

顯示各個網頁要設定三個內容。
  • 七個網頁中使用那些網頁的設定
  • 在「config > routes.rb」裡設定
  • 操作資料的設定
  • 「app > controllers」裡的「資料庫的名字_controller.rb」文件上設定
  • 網頁的設定
  • 「 app > views > 資料庫的名字」裡作html文件設定內容。

說明各個設定。

設定的內容請參考這裡

「config > routes.rb」文件裡設定內容

隨着使用的資料庫,設定內容。

 routes.rb(例子:第3行)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


設定操作資料,顯示網頁的內容,必須作設定的文件跟文件夾。
做這個,要在terminal上打入

 terminal
1 rails g controller 資料庫的名字

的內容。 Terminal rails g controller posts 如果出現這樣子的內容的話OK。

在這個命令,作出來的
  • 「app > controllers > 資料庫的名字_controller.rb」是操作資料的文件

  • 「app > views」是顯示網頁的文件
在各個文件文件夾裡,設定內容。
在這裡說明追加設定之前要設定的內容。
  • 資料操作
  • 「app > controllers > 資料庫的名字_controller.rb」裡,追加下面一樣的內容。

     posts_controller.rb
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 class PostsController < ApplicationController def show end def index end def new end def create end def edit end def update end def destroy end end

  • 網頁
  • 「app > views > 資料庫的名字」裡,保存下面的文件。
    ※ 保存文件的方法,請參考這裡

    • 「show.html.erb」(顯示一個資料的網頁)
    • 「index.html.erb」(顯示全部的資料的網頁)
    • 「new.html.erb」(打入新的資料的網頁)
    • 「create.html.erb」(新增資料的網頁)
    • 「edit.html.erb」(打入編輯的資料的網頁)
    • 「update.html.erb」(編輯資料的網頁)
    • 「destroy.html.erb」(刪除資料的網頁)

在這個「資料庫的名字_controller.rb」裡追加各個操作資料的方法,各個html文件上追加內容。
各個說明請參考下面!


  用Ruby on Rails作網頁的說明到這裡了。這樣子應該可以作簡單的網頁吧?

可是現在的內容又不好看又不方便。在下章,咱們吧這個網站設定的又漂亮又方便吧!

在這個章設定的內容請參考這裡