5 : 作作看網頁①

上章:資料庫裡保存資料

Header5

0 : 這個章的目的

 理解 Ruby on Rails 上可以作怎麼樣子的網頁、然後作作看網頁。
在上章,我們用 Ruby on Rails新增資料之後,做資料的編輯跟刪除。

到這裡,有沒有了解了一點關於網站上做的事情嗎?
在上章我們用Facebook的例子解釋資料庫。如果是網絡聊天的網站的話,

messages
id user send_to content
82903 山田太郎 田中一郎 可不可以拿第一堂課的資料嗎?
82904 張張 Tom 明天有考試
80905 A Green 差不多可以還給我上次給的100万元吧

作這樣子的資料庫保存資料,之後從這個資料庫顯示資料。

這樣子應該簡單的理解怎麼做資料庫了吧。
在這個章裡不用「rails c」,想用用看瀏覽器上的網站做資料的顯示・新增・編輯・刪除。
※ 網頁的顯示會用html,所以看看html的內容吧。


 使用Windows的話,確認有沒有加這個設定



1 : 設定網頁

第二章解釋過,Ruby on Rails 是隨着保存資料的方法設定各個網頁。

設定的網頁可以分類成資料的顯示・新增・編輯・刪除這個四種網頁,但正確分類的話有七個(操作的資料的方法是只有4種)。
※ 現在就記住這個七種就OK

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

這樣看來,可以看出用設定在上章學習的操作資料的方法顯示內容。
這些七個設定要在設定資料操作的文件上設定。

 在這個章,用「posts」資料庫作作看這個七個網頁吧

各個設定中必須要有三個設定
  • 七個網頁中,使用哪一個網頁的設定
  • 資料操作的設定
  • 網頁內容的設定(html)
做了這個三個設定後,網頁會顯示。
剛開始,作作看「顯示一個資料(show)」的網頁吧!


 ① : 顯示一個資料(show)


按照上面三個設定,在這裡作作看顯示一個資料(show)」的網頁吧。
顯示一個資料(show)的網頁,例如說是顯示一個推特的網頁的話,用id區別網頁。

所以說,顯示一個資料(show)的網頁要用rails c

1 Post.find(選擇的id)

操作資料。 Chrome localhost posts 1 2 像上面的圖像一樣,用id作各個資料的網頁。

那麽開始作吧!


 ⑴ : 七個網頁的設定


 那麽剛開始設定「七個網頁的設定」吧!

要編輯設定文件,所以用 Sublime Text 打開看看在第三章作的網站「myapp」吧!
※ 用Sublime Text打開文件的方法請參考這裡
 用Windows的 Sublime Text 打開文件文件夾的方法請參考這裡


打開之後,參考下面的圖像打開routes.rb吧。 Sublime text open route rb 這個routes.rb的文件在設定,七個網頁中使用哪一個網頁的設定文件。

 routes.rb
1 2 3 4 5 6 7 8 9 10 ... 56 57 Rails.application.routes.draw do # 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' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

在這個設定文件上設定用資料庫作哪些七個網頁。

看起來是很長,但是從「#」開始的行不會適用,所以文件上沒有內容在設定。
文件的內容從「do」到「end」的行裡面設定。
那麽追加下一個行,設定内容吧!

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


1 2 3 4 5 6 7 8 9 10 11 ... 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' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

上面的內容在設定,用「posts」資料庫作

顯示全部的資料(index)・顯示一個資料(show
打入新的資料(new)・新增資料(create
打入編輯的資料(edit)・編輯資料(update
刪除資料(destroy


這個七種網頁。
如果不想刪除資料的話,

 routes.rb(第二行)
2 resources :posts , :only => [:show, :index, :new, :create, :edit, :update]

像上面這樣子「:only =>」後面指定「destroy」以外六個網頁。
※ 「:」是在Ruby on Rails 作網頁時的規則。請記住。

所以網頁的設定是在routes.rb上追加
resources :資料庫的名字, :only => [:想加的網頁...]
這些內容。

 如果用「messages」的資料庫作
  • 顯示全部的資料(index)
  • 新增資料(create)
  • 刪除資料(destroy)
這個三種資料操作的話,「routes.rb」上要設定什麼樣的資料呢?



 routes.rb(第2行)
1 resources :messages, :only => [:index, :create, :destroy]


 ⑵ : 資料操作的設定

到這裡設定了用七個網頁的設定文件、接着設定怎麼樣操作資料吧
在這邊做做看顯示一個資料(show)
事先用terminal,做資料操作跟顯示網頁的設定文件。
用terminal移動到「myapp」吧!


 使用Windows移動的方法請參考這裡


terminal
1 2 3 cd Desktop cd rails_project cd myapp

移動之後,打入下面的命令。
用這個命令作「posts」資料庫的顯示網頁的文件跟操作資料的文件。

terminal
 使用Windows的話,用「命令提示符」吧。
1 rails g controller posts

有出現像下面一樣的顯示嗎?這樣子設定文件作好了。 Terminal rails g controller posts 那麽,看看文件吧!首先,用Sublime Text打開myapp吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡

畫面出現的話,打開看看app吧。
打開後可以看到,裡面有controllersviews這個兩個文件夾。
那麽開開看這兩個文件夾吧。 Sublime text controller folder and view folder controllers裡面有posts_controller.rb的文件,views裡面有posts的文件夾。

這些是剛才打入rails g controller posts作的文件跟文件夾。在各個文件跟文件夾上設定操作資料的方法跟顯示網頁的方法。 Sublime text post controller and post view 那麽先從操作資料的設定開始解釋。
首先打開剛才看的posts_controller.rb的文件。

 posts_controller.rb
1 2 class PostsController < ApplicationController end

顯示這樣子的內容嗎?
那麽打入下面的內容吧。

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


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

打入rails g controller 資料庫的名字作了設定文件之後,先在資料庫的名字_controller.rb設定,上面一樣操作資料的方法。
這個def 網頁的名字end之間,指定「routes.rb」上設定好的各個網頁的操作資料的方法
(例如說「Post.all」或者是「Post.create」或者是「Post.find(id號碼)」)

 所以如果是routes.rb上沒有設定destroy的話,

21 22 def destroy end

不用這個兩行。
這些部分就想設定什麼就設定什麼。
那麽,解釋設定操作資料的方法吧。
這一次是顯示一個資料(show)的網頁,所以

1 2 def show end

在上面的內容中,設定內容。
那麽開始設定吧。

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


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

這個是網頁上設定「顯示一個資料(show)」的操作資料的方法。

有看見「Post.find(選擇的id號碼)」吧。對。在這裡選擇資料。
後面的params[:id]的部分在表現從網頁拿來id的意思。這樣子選擇網頁的資料(比如說推特的話,一個一個的推特)。
那麽「@post」是什麼呢?

「@post」是,顯示網頁的html文件上,顯示資料的時候使用的標記
在html文件裡放這個標記的話,可以在網頁上顯示資料。
※ 這個標記的名字是,從「@」開始的單詞的話什麼都可以。命名自己可以理解的名字吧。

 設定「tweets」資料庫的「顯示一個資料(show)」的操作資料的內容吧!


 tweets_controller.rb
3 4 5 def show @tweet = Tweet.find(:params[:id]) end


 ⑶ : 網頁的設定

到這裡設定了「七個網頁的設定」跟「操作資料的設定」的方法

那麽,在網頁上顯示保存的資料吧! 網頁的設定、要從「views」文件夾裡作html文件上做。
那麽參考下面的圖像,從Sublime Text打開的myapp > app打開views文件夾吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡
Sublime text select views 這個「views」文件夾裡面的「posts」文件夾裡,作作看為了顯示網頁的設定文件・html文件。

事先posts」文件夾裡保存,顯示網頁的設定文件「show.html.erb」吧!
※ 保存文件的方法,請參考這裡
※ Ruby on Rails上文件的名字不用「show.html」用「show.html.erb」。請記住。

完了之後,參考下面的圖像打開看看show.html.erb吧。 Sublime text posts show html erb 在這個設定文件上,設定顯示網頁的設定。
那麽,跟剛才的方法一樣,在posts」文件夾裡保存

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

這些六個文件吧。 ※ 保存文件的方法,請參考這裡 Sublime text views posts all 使用這些文件,設定網頁的內容。
 那麽做做看網頁的設定吧!

首先顯示看文字吧。

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


1 <h1>投稿</h1>

這樣子保存好資料的話,用瀏覽器看看內容吧!

用 Ruby on Rails 作的網站,要先起動服務器之後再顯示網頁。
※ 詳細的內容參考這裡

那麽起動服務器,看看網頁吧!
首先,用terminal移動到「myapp」吧。


 使用Windows的話,請參考這裡


terminal
1 2 3 cd Desktop cd rails_project cd myapp


移動到「myapp」之後,打入rails s起動服務器。

terminal
 使用Windows的話,用「命令提示符」。
1 rails s

顯示下面圖像一樣的畫面嗎? Terminal rails s 這樣,起動服務器了。
應為服務器起動了,現在可以從瀏覽器看網站了。

那麽用瀏覽器,打開看「0.0.0.0:3000/posts/1」吧!


 使用Windows的話,打開localhost:3000/posts/1吧。


有顯示像下面圖像一樣的畫面嗎? Chrome localhost posts 1 1 「顯示一個資料(show)」的網頁是,用瀏覽器打開0.0.0.0:3000/資料庫的名字/id號碼。在「id號碼」的地方,可以選擇資料。
這個網頁在選擇posts資料庫裡,id是1的資料。
那麽接着用瀏覽器打開看「0.0.0.0:3000/posts/2016」吧。
 使用Windows的話,用瀏覽器打開看localhost:3000/posts/2016吧。

有沒有出現,下面一樣的Error的畫面嗎? Chrome localhost posts 2016 這個是應為,沒有id是2016的posts資料
如果還有別的保存過的資料的話、打開看看那個網頁吧!

 從瀏覽器打開「從tweets資料庫裡,選擇id是9028的資料」的「顯示一個資料(show)」的網頁要怎麼打入好呢?


 瀏覽器
1 0.0.0.0:3000/tweets/9028


到這裡,作了在顯示各個資料的網頁。

接着,顯示看保存的資料吧!
像下面,編輯「show.html.erb」的內容吧!

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


1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

內容編輯之後,在terminal上移動到myapp之後,用rails s打開服務器打開「0.0.0.0:3000/posts/1」吧。

 使用Windows移動到「myapp」的方法,請參考這裡
 Windows的網站,可以從localhost:3000/posts/1打開。


有沒有跟下面圖像一樣,顯示保存的資料嗎? Chrome localhost posts 1 2 還有別的保存的資料的話,那個資料也用跟這裡一樣的方法打開看確認內容吧!
※ 使用Sequel Pro的方法請參考這裡
※ 使用SqliteBrowser的方法請參考這裡

那麽,說明設定 html文件的方法吧。

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

內容應該可以推測吧。

有沒有看到剛才的解釋操作資料的地方設定的「@post嗎?這個@post是在選擇網頁的資料。

所以,如果在操作資料的部分・「posts_controller.rb」沒有設定「@post」的話,不會顯示這樣子的資料。

2 <%= @post.name %>

在這個部分,從「@post」拿出「name」。
同樣的

3 <%= @post.content %>

在拿出「content」。
簡單的追加說明。

用 Ruby on Rails作的html文件,要必須從資料庫選擇資料

這樣子的部分用,
<%= 内容 %>
或者是
<% 内容 %>
設定內容。

在這個「<%=」或者「<%」「%>」之間,取得資料庫的資料。
「<%=」跟「%>」之間的內容會顯示在網頁上,但是「<%」跟「%>」之間的內容不會顯示。


內容也只能打入資料庫裡的資料或者簡單的算數 等等...。這些在等一下解釋吧。
像這一次一樣的「顯示一個資料(show)」的資料的操作是,
@設定的標記.框字的名字
設定。

 那麽,「從@tweet選擇place」的顯示要怎麼設定好呢?


1 <%= @tweet.place %>

 現在的網頁上,從選擇的資料「@post」只能拿出「name」跟「content」而已。在這裡追加顯示「place」的設定吧。


1 <p><%= @post.place %></p>


 ⑷ : 總結

用Ruby on Rails顯示網頁的時候,要設定三個設定
  • 七種網頁中,使用哪一個資料的設定
  • 操作資料的設定
  • 網頁內容的設定
※ 七個網頁的設定是設定 index/ show/ new/ create/ edit/ update/ destroy這個七個


設定完了之後,在terminal打入rails s起動服務器,之後用瀏覽器打入0.0.0.0:3000/...可以顯示網頁。

設定的內容,可以從這裡看

編輯「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

在「:only =>」後面的「[]」裡設定喜歡的網頁

在「app > controllers」文件夾裡的「資料庫的名字_controller.rb」文件,設定各個網頁上怎麼樣操作資料。

這一次,說明了顯示一個資料(show)的網頁。

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

顯示一個資料(show)的網頁上,用find(:params[:id])各個id上選擇資料。
@喜歡的名前,設定顯示在網頁上的html文件的標記

在「app > views」文件夾裡的「資料庫的名字」的文件夾,作顯示網頁的html文件。
隨着要用的網頁,作
  • index.html.erb
  • show.html.erb
  • new.html.erb
  • create.html.erb
  • edit.html.erb
  • update.html.erb
  • destroy.html.erb

這一次顯示一個資料(show)的網頁中設定show.html.erb

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

從資料庫選擇的資料要設定在「<%=」跟「%>」之間。
選擇的資料,在html上打入@設定的標記.框子的名字顯示。

設定完了之後,在terminal上打入「rails s」之後,用瀏覽器打開網頁。
「顯示一個資料(show)」的網頁,從0.0.0.0:3000/資料庫的名字/要顯示的id打開。

 使用Windows的話,從localhost:3000/資料庫的名字/要顯示的id號碼打開。
到這裡顯示了一個一個的資料。
接着作顯示全部的資料的,像推特的主頁一樣子的網頁吧。

設定的內容可以從這裡看


 ② : 顯示全部的資料(index)


那麽作作看顯示全部的資料的像推特的網頁吧。 顯示全部的資料,用上章的內容解釋的話,可以說設定

1 Post.all

的內容,作 Chrome posts all 2 上面圖像一樣的,會顯示全部的投稿資料的網頁。

設定有「用哪一個網頁的設定」「操作資料的設定」「網頁的內容的設定」的三個。在這裡一個一個設定吧。


  ⑴ : 設定網頁


 剛開始從「七個網頁的設定」開始做吧!

打開看看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

內容已經編輯過了吧。

跟上面一樣追加「index」了嗎?
這樣子設定,要使用顯示全部的資料(index)的網頁。
 咱們設定「操作資料」的內容吧。

「posts」資料庫的資料,要設定在posts_controller.rb文件裡。

首先,用Sublime Text打開app > controllers文件夾裡的posts_controller.rb文件吧。

※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


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

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


7 8 9 def index @posts = Post.all end

用「Post.all」,選擇posts資料庫裡的全部的資料。
※ 使用「rails c」確認打入的內容吧。

在這裡的標記「@posts」使用複數。
這是應為要用顯示全部的資料的標記,所以在這裡使用複數的名字。等下自己看的時候可以理解的話,名字用什麼也沒關係。

在「index」操作資料的方法是,用「資料庫的名字.all」選擇全部的資料之後,設定標記。

 設定從tweets資料庫選擇全部的資料的資料的操作吧。


1 @tweets = Tweet.all

 那麽設定網頁的內容吧。

剛開始,用Sublime Text打開myapp文件夾之後,打開app > views > posts文件夾吧。

※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


裡面有沒有index.html.erb文件嗎?如果有的話,開開看吧!
在這個文件上,設定顯示「選擇全部的資料(index)」的網頁。

 那麽剛開始,複習學習的內容吧。 Chrome posts all 1 像上面的圖像的畫面,設定「index.html.erb」文件吧。
※ 線用<hr>設定。


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


1 2 <h1>投稿一覽</h1> <hr>

做完了之後,用terminal移動到myapp,之後打入rails s吧。

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

顯示下面圖像一樣子的網頁嗎? Chrome posts all 1
在這裡,作作看下面圖像一樣子的像SNS的網頁吧! Chrome posts all 2
那麽,編輯index.html.erb文件吧。打入下面的內容。

 index.html.erb(編輯第3〜7行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


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

一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。
這樣編輯好的內容會適用在網頁上。


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


 如果設定的內容沒有顯示在網頁上的時候,一起點擊「Command」跟「c」停止用「rails s」打開的服務器之後,再打入「rails s」吧。

設定好了之後,用瀏覽器打開「0.0.0.0:3000/posts」。
 使用Windows的話,打開「localhost:3000/posts」。 Chrome posts all 2 有沒有顯示上面一樣子的像SNS主頁的網頁嗎?
那麽,解釋剛才的設定在做什麼。

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

可不可以推測,在這裡

1 2 3 4 <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr>

反覆顯示這裡的內容嗎?
在裡面的

1 <%= p.name %>

顯示名字,id顯示號碼,content顯示投稿的內容。
那麽第3行到第7行是在做什麼呢?

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

在這個第三行,
吧「Post.all」選擇的資料「@posts」(下面的「posts_controller.rb」)分成一個一個的資料(p)之後,反覆顯示分成一個一個的內容。

 posts_controller.rb
1 2 3 def index @posts = Post.all end

<% @posts.each.do |p| %><% end %>的地方會反覆顯示。

然後在各個反覆中的「p」裡代入各個資料。然後用這個資料「p」顯示資料。
※ 這個「p」的名字是用什麼都可以,在這裡用「post」的第一字「p」。名字用什麼都可以。
說明設定的方法吧。
像「Post.all」一樣裡面包括複數資料的時候、必須吧這個資料分成一個一個的資料。

 這樣子的複數的資料要用,
<% @設定的標記.each do |喜歡的名字| %>
分成一個一個的資料。
※ 是「<%」不是「<%=」,要注意。

 到
<% end %>
的地方分成的資料會反覆顯示
※ 這裡也是「<%」不是「<%=」,要注意。

 裡面的資料是,跟顯示一個資料(show)一樣用
<%= 設定的名字.框子的名字 %>
顯示內容。

※ 在上章解釋的「where」也可以用這個方法顯示。用搜索的時候也會出現複數的資料。
 那麽在「顯示全部的資料(index)」的網頁裡追加「作資料的時間」的內容要這麼設定呢?
※ 裡面放作資料的框子是「created_at」


1 <p><%= p.created_at %></p>

 做下面一樣子的資料操作的時候,設定看顯示「@messages」的,寄件者「name」收件者「send_to」内容「content」的網頁。

 messages_controller.rb
1 2 3 def index @messages = Message.all end


 index.html.erb(答案的例子)
1 2 3 4 5 6 7 8 <h1>message一覽</h1> <hr> <% @messages.each do |m| %> <p寄件者:><%= m.name %></p> <p收件者:><%= m.send_to %></p> <p內容:><%= m.content %></p> <hr> <% end %>

 雖然已經打開過了,但是解釋用瀏覽器打開網頁的方法。

在瀏覽器打開0.0.0.0:3000/資料庫的名字的話,可以打開顯示全部的資料(index)的網頁。
這一次是顯示「posts」資料庫裡全部的內容的網頁,所以打入

 瀏覽器
1 0.0.0.0:3000/posts

打開網頁。

 打開顯示全部的「tweets」資料的網頁要這麼打開?


 瀏覽器
1 0.0.0.0:3000/tweets


 ⑵ : 移動網頁


到這裡「顯示全部的資料(index)」的網頁的設定完成了。

但是在瀏覽器上一次一次打入移動網頁的方法,會不會覺得有一點麻煩呢?普通的網頁是點擊一次就可以移動網頁。

最後想做做看,從全部的資料的網頁(index)到一個資料的網頁(show)/ 從一個資料的網頁(show)到全部的資料的網頁的移動

網頁的移動、要在「html.erb」文件上做。首先在「show.html.erb」上,追加點擊後移動到「顯示全部的資料的網頁(index)」的設定(連結)

移動網頁的文字要
<a href="移動到的網頁">文字</a>
這樣子設定。設定後,網頁上會出現點擊後會移動到指定的網頁的文字

那麽試試看吧。按照下面的內容,編輯「show.html.erb」

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


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="http://www.books.com.tw/">博客來</a></p>

顯示之後,用瀏覽器打開「0.0.0.0:3000/posts/1」吧。
※ 為了適用內容,一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


 使用Windows的話,
  一起點擊「ctrl」跟「c」停止用「rails s」打開的服務器之後,再打入「rails s」。之後打開「localhost:3000/posts/1」。


顯示像下面的圖像一樣的圖像嗎? Chrome localhost posts 1 3 點擊「博客來」的部分之後,移動到博客來的網頁嗎?

 設定看移動到Facebook(http://facebook.com)的文字吧。


1 <a href="http://facebook.com">Click</a>

跟上面一樣子,設定從「顯示一個資料(show)」的網頁到「顯示全部的資料(index)」移動的連結吧。

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


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="/posts">主頁</a></p>

編輯之後,在瀏覽器上打開「0.0.0.0:3000/posts/1」。
※ 為了適用內容,一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


 使用Windows的話,
  一起點擊「ctrl」跟「c」停止用「rails s」打開的服務器之後,再打入「rails s」。之後打開「localhost:3000/posts/1」。


點擊「主頁」之後,
移動到「顯示全部的資料(index)」的網頁「0.0.0.0:3000/posts」嗎?

 應為「/posts」的「/」表示url「0.0.0.0:3000」(Windows的話,「localhost:3000」),所以點擊之後移動網頁。

 設定看,移動到photos資料庫的「index」網頁的「按這裡」的連結。


1 <a href="/photos">按這裡</a>

那麽,「index」網頁上設定移動到「show」網頁的內容吧。
按照下面的內容,編輯「index.html.erb」的內容。

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


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 %>

顯示之後,在瀏覽器上打開「0.0.0.0:3000/posts」吧。
※ 為了適用內容,一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


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


Chrome posts all 3 顯示像上面一樣的畫面嗎?
點擊「id」的部分之後、看看可不可以移動網頁!

 那麽解釋內容吧!

在連接上設定,省略「0.0.0.0:3000/posts/id號碼」的「/posts/id號碼,這樣可以移動到「顯示一個資料(show)」的網頁。

在這裡為了指定「/posts/id號碼」,在「id號碼」的部分設定顯示選擇的id「<%= p.id %>」。
這樣,用「id」設定各個網頁的移動。
 設定看,移動到books資料庫「id是10」的「show」網頁的「按這裡」的連結


1 <a href="/posts/10">按這裡</a>


 ⑶ : 總結

先解釋「顯示全部的資料(index)」上設定的三個設定。

設定的內容請參考這裡

「config」文件夾裡的「routes.rb」文件裡設定「index

 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.rb」文件的「index

 posts_controller.rb
1 2 3 def index @posts = Post.all end

設定選擇全部的資料的「.all」跟html上顯示的標記

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

 index.html.erb
1 2 3 4 5 6 7 8 <h1>message一覽</h1> <hr> <% @message.each do |m| %> <p>寄信者 : <%= m.name %></p> <p>收信者 : <%= m.send_to %></p> <p><%= m.content %></p> <hr> <% end %>

在網頁上,顯示「controller」文件上設定的資料

<% @設定的標記.each do |名字| %>,把複數的資料分成一個一個的資料,
<% end %>之間,設定各個資料的顯示方法。

<%= 資料庫的名字.框子的名字 >顯示各個資料。

設定完了之後用terminal打入「rails s」、可以在瀏覽器打開網頁。
顯示全部的資料(index)的網頁,從0.0.0.0:3000/資料庫的名字打開。
 使用Windows的話,從localhost:3000/資料庫的名字打開。
 網頁的移動(連結)

網頁的移動,
<a href="想移動的網頁">文字</a>
做。

想移動到「index」網頁的話,

1 <a href="/posts">按這裡</a>

想移動到「show」網頁的話,

1 <a href="/posts/<%= p.id %>">按這裡</a>

這樣子設定。

設定的內容請參考這裡
 到這裡我們作了顯示全部的資料的網頁。
還剩的「在網頁上,新增・編輯・刪除資料」的方法,在下章解釋!

到這裡設定的內容參考這裡