4 : 作聊天室②

上章 : 作聊天室①

Coffeecup header4 這個章是,上章「作聊天室①」繼續的內容。
還沒看完上章的內容的話,請參考這裡吧。

2 : 作聊天室

設定作聊天室的內容吧!
作聊天室要在 Chrome messages users 1 start chat 點擊上面的圖像的 開始聊天 之後,

  • 作新的「rooms」資料

  • rooms
    id name explain created_at updated_at
    1 新的聊天 打入說明 2016-04-12 20:30:21 2016-04-12 20:30:21
     作聊天室「1」

  • 作,表示哪一個會員在參加哪一個聊天室的「entries」資料

  • entries
    id room_id user_id created_at updated_at
    1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
    id room_id user_id created_at updated_at
    1 1 2 2016-04-12 20:30:21 2016-04-12 20:30:21
     表示會員「1」跟「2」在參加聊天室「1」的資料

使用這個兩個, Chrome messages rooms 1 no messages 顯示這個畫面。

這個網頁0.0.0.0:3000/rooms/1是,
顯示「rooms」資料庫的「id」是「1」的資料的「show」網頁

在右邊,顯示「messages」資料庫的資料
在左邊,顯示「rooms」資料庫的資料跟「entries」資料庫裡的會員的資料
所以,在「users」資料庫的「show」網頁上做
  • 新增「rooms」資料(create)
  • 新增「entries」資料(create)
Chrome messages users 1 start chat「rooms」資料庫的「show」網頁上做
  • 顯示「rooms」資料(show)
  • 顯示「entries」資料
Chrome messages rooms 1 no messages 這些設定。
用這個「rooms」資料庫,作
  • index網頁

  • 顯示全部的「rooms」資料 Chrome messages rooms
  • edit

  • 打入編輯的「rooms」資料 Chrome messages rooms 1 edit
  • update

  • 編輯「rooms」 Chrome messages rooms 1 update
這些網頁的設定。
在這裡做的設定是,

 「rooms」資料庫
  • create(在users資料庫的「show」網頁做)
  • show
  • index
  • edit
  • update
 「entries」資料庫
  • create(在users資料庫的「show」網頁做)
  • show(在rooms資料庫的「show」網頁做)
這些設定。

 首先從「rooms」資料庫開始設定吧!


 ① : 「rooms」資料庫


 做「rooms」資料庫的資料操作・網頁顯示之前,事先刪除在上章作的留言板吧!

留言板有
  • 資料操作的設定
  • 顯示網頁的設定
這個兩個設定,刪除內容吧。

 首先從資料操作開始做吧。

app > controllers > users_controller.rb裡,刪除messages資料庫的資料。
※ 詳細請參考這裡

 users_controller.rb(第7〜8行)
7 8 @messages = Message.where(:receiver => @user.id) @message = Message.new

刪除上面的內容,改成下面一樣的內容吧!

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


1 2 3 4 5 6 7 8 9 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) end # 省略

 接着做網頁顯示吧!

app > views > users > show.html.erb,刪除在做顯示「messages」資料・顯示輸入框按鈕的設定吧。
※ 「messages」資料的顯示請參考這裡,輸入框按鈕的顯示請參考這裡 Chrome messages users 1 owner after posts 所以在這裡,刪除app > views > users > show.html.erb

 show.html.erb(第5〜19行)
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <hr> <h4>留言版</h4> <% @messages.each do |m| %> <hr> <h5><%= m.id %> : <a href="/users/<%= m.user.id %>"><%= m.user.family_name %><%= m.user.first_name %></a>的投稿</h5> <p><%= m.content %></p> <% end %> <%= form_for @message do |f| %> <%= f.text_area :content, :class => "form-control my-form", :placeholder => "留下留言吧!" %> <%= f.hidden_field :receiver, :value => @user.id %> <br> <%= f.submit "登錄", :class => "btn btn-warning" %> <% end %>

的內容,改成下面的內容吧!

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


1 2 3 4 5 6 7 8 9 <h1>會員資料</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>歲)</p> <p>自我介紹:<%= @user.self_introduction %></p> <hr> <p><a href="/users" class="btn btn-primary">返回會員一覽</a></p> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">編輯會員資料</a> <% end %>

到這裡,刪除了在上章設定的內容了!

 那麽,開始做聊天室的設定吧!

作網頁的時候,需要設定 這個三個內容。

這一次按着上面的手順,設定作rooms」資料庫的網頁。

首先從七個網頁的設定開始做吧。


 ⑴ : routes.rb


 那麽設定「七個網頁的設定」吧!
「七個網頁的設定」是在config > routes.rb裡設定內容。

這一次的「rooms」資料庫,要用
這個5個網頁的設定,作網站。

那麽編輯config > routes.rb的內容吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 63 64 Rails.application.routes.draw do devise_for :users resources :welcome, :only => [:index] root "welcome#index" resources :users, :only => [:show, :index, :edit, :update] resources :messages, :only => [:create] resources :rooms, :only => [:create, :show, :index, :edit, :update] # 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

這樣設定好了「rooms」資料庫的
  • create
  • show
  • index
  • edit
  • update
的5個網頁的設定了。

 接下設定「操作資料的設定」跟「顯示網頁的設定」吧!

在這裡設定各個網頁。剛開始從「create」開始設定吧。


 設定的內容,請參考這裡


 ⑵ : create


 首先從「rooms」資料庫的「create」網頁開始設定吧!
先作rooms」資料庫的「操作資料」的設定文件跟「顯示網頁」的設定文件夾吧!
在terminal上,打入下面的命令吧!

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

在這個打入作rooms」資料庫
  • 操作資料的文件「app > controllers > rooms_controller.rb
  • 顯示網頁的文件夾「app > views > rooms
這個兩個設定文件文件夾。
首先在作好的文件文件夾上,追加剛開始的設定!

 rooms_controller.rb(追加第3〜18行)
※ 用半母字母數字打入。一起點擊「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 class RoomsController < ApplicationController before_action :authenticate_user!, :only => [:create, :show, :index, :edit, :update] def create end def show end def index end def edit end def update end end

在這裡設定好,會員的限制裡面沒有設定內容的資料操作了。
※ 會員的限制請參考這裡

接着作顯示網頁的設定文件。
app > views > rooms」裡保存
  • show.html.erb
  • index.html.erb
  • edit.html
的文件吧!
※ 保存資料的方法,請參考這裡

「create」要在「users」資料庫的「show」網頁上設定顯示,「update」網頁要移動到「edit」網頁,所以不使用顯示網頁的文件。
 那麽做「create」網頁的設定吧!

create網頁的設定,
  • 「users」資料庫的操作資料的設定文件「users_controller.rb」上

  • 新增「rooms」資料

    1 @room = Room.new

  • 「users」資料的顯示網頁的設定文件「show.html.erb」上

  • 顯示登入按鈕 開始聊天

    1 2 3 <%= form_for @room do |f| %> <%= f.submit "開始聊天", :class => "btn btn-warning" %> <% end %>
    Chrome messages users 1 start chat
  • 「rooms」資料庫的操作資料的設定文件「rooms_controller.rb」上

  • 保存新的「rooms」資料

    1 @room = Room.create

這個三個內容。

一個一個做做看吧。
 首先從「users_controller.rb」設定內容吧。

打開app > controllers > users_controller.rb之後,編輯內容吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) if @user.id == current_user.id else @room = Room.new end end # 省略

這裡是設定怎麼樣的內容呢?

在這裡設定「users」資料庫的「show」網頁的會員跟在登入的會員不一樣的時候,
作新的rooms資料庫的資料的標記@room
※ 「if/else」,請參考這裡

使用這個@room,作 開始聊天 的按鈕。
 在「users」資料庫的「show.html.erb」追加設定吧!

打開app > views > users > show.html.erb,編輯內容吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="row"> <div class="col-xs-6"> <h1>會員資料</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>歲)</p> <p>自我介紹:<%= @user.self_introduction %></p> <br> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">編輯會員資料</a></p> <% else %> <%= form_for @room do |f| %> <%= f.submit "開始聊天", :class => "btn btn-warning" %> <% end %> <% end %> </div> </div> <hr> <p><a href="/users" class="btn btn-primary">返回會員一覽</a></p>

說明內容吧!
 首先從第10〜13行

8 9 10 11 12 13 14 <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">編輯會員資料</a></p> <% else %> <%= form_for @room do |f| %> <%= f.submit "開始聊天", :class => "btn btn-warning" %> <% end %> <% end %>

在這裡使用「users」網頁的會員資料跟在登入的會員資料是不是一樣的條件
判別要不要顯示 開始聊天 的按鈕。
※ 「if/else」的內容請參考這裡

這裡沒有輸入框,但是這樣也可以新增資料。
在資料庫裡設定了,作好空的資料的時候要在裡面放的資料,所以點擊按鈕之後,資料庫裡會保存「name」裡「新的聊天」「explain」裡「打入說明」的資料
※ default的設定請參考這裡
 接着做,第1、2、15、16行

裡面應該是

1 2 ... 15 16 <div class="row"> <div class="col-xs-6"> 内容 </div> </div>

這樣的設定。
這個row」跟「col-xs-6是,在設定畫面左右長度的Bootstrap的設定。

設定row圍起來的地方的長度是12,在裡面追加col-xs-數字分割長度「12」的畫面。
這一次使用col-xs-6,設定12一半的長度「6」, Chrome messages users 1 start chat 所以顯示畫面一半的長度。

會員資料

的下面的線,應該有變短了吧。
像這一次一樣,要顯示

内容1(長度3)

内容2(長度9)

一樣的顯示的時候,

1 2 3 4 5 6 7 8 <div class="row"> <div class="col-xs-3"> 内容1 </div> <div class="col-xs-9"> 内容2 </div> </div>

這樣設定。
 最後在「rooms_controller.rb」裡追加作「rooms」資料的設定吧。

打開app > controllers > rooms_controller.rb之後,編輯內容吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 class RoomsController < ApplicationController before_action :authenticate_user!, :only => [:create, :show, :index, :edit, :update] def create @room = Room.create redirect_to "/rooms/#{@room.id}" flash[:notice] = "作好聊天室了!" end def show end # 以下省略

那麽解釋內容吧!
 首先從第6行

6 @room = Room.create

在這裡作「id」「created_at」「updated_at」以外沒有任何資料的「rooms」資料
※ 詳細請參考這裡
 接着第7行

7 redirect_to "/rooms/#{@room.id}"

在這裡,移動到作好的「rooms」資料的網頁
移動到作好的「@room」的「id」的「rooms」資料庫的「show」網頁。
※ 詳細請參考「update」網頁吧。

應為在這裡移動「rooms」資料庫的「show」網頁,所以不用作「create.html.erb」文件。
 最後第8行

8 flash[:notice] = "作好聊天室了!"

在這裡設定,移動到的網頁上顯示

作好聊天室了!

的通知。
※ 詳細請參考這裡

到這裡設定好了「rooms」資料庫的「create」的設定了。

 接着設定「show」網頁的設定吧!

 設定的內容,請參考這裡



 接着作「rooms」資料庫的「show」網頁吧!
show網頁的設定要
  • rooms_controller.rb」文件上的資料操作

  •  選擇要顯示的「rooms」資料

    1 @room = Room.find(params[:id])

     選擇要顯示的「messages」資料・新增「messages」資料

    1 2 @messages = @room.messages @message = Message.new

  • 「rooms」資料庫的「show」網頁的設定

  • 在這裡 Chrome messages rooms 1 no messages no entry 像這樣設定

     在左邊顯示「rooms」資料
     在右邊顯示「messages」資料

    這些內容。

在這裡設定這個兩個設定吧!
 首先在「rooms_controller.rb」裡追加設定。

app > controllers > rooms_controller.rb裡追加下面的設定吧!

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


11 12 13 14 15 def show @room = Room.find(params[:id]) @messages = @room.messages @message = Message.new end

內容應該大概是沒有問題,解釋第13行的設定
在這個網站上,一個「rooms」資料可以拿複數的「messages」資料

rooms
id name explain created_at updated_at
1 新的聊天 打入說明 2016-04-12 20:30:21 2016-04-12 20:30:21
messages
id content user_id room_id created_at updated_at
1 什麼呀? 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43
id content user_id room_id created_at updated_at
2 功課做好了嗎? 2 1 2016-04-12 20:33:43 2016-04-12 20:33:43
id content user_id room_id created_at updated_at
3 還沒 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43

使用,一方的資料有拿別的資料庫的複数的資料的時候的設定,

13 @messages = @room.messages

設定上面一樣的內容。
在這裡選擇,有拿跟「@room」的「id」一樣的「room_id」的「messages」資料庫的資料
※ 詳細請參考這裡
為了適用這個設定,
  • app > models > message.rb
  • app > models > room.rb
裡追加設定。
※ 詳細請參考這裡

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


1 2 3 4 5 6 class Message < ActiveRecord::Base belongs_to :user belongs_to :room end

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


1 2 3 4 5 class Room < ActiveRecord::Base has_many :messages end

這樣設定好了

 選擇「room」資料裡的「messages」資料

1 @messages = @room.messages

 選擇「message」資料投稿的地方「room」資料

1 @room = @message.room

的內容了。

到這裡設定好了
  • 「rooms」資料「@room
  • 網頁的「messages」資料「@messages
  • 新的「messages」資料「@message
的內容了。接著顯示這些資料吧。
Chrome messages rooms 1 no messages no entry
 接下做,顯示「show」網頁的設定吧

這一次是 Chrome messages rooms 1 no messages no entry 像上面圖像一樣的左右的畫面顯示,所以

1 2 3 4 5 6 7 8 <div class="row"> <div class="col-xs-3"> 内容1 </div> <div class="col-xs-9"> 内容2 </div> </div>

使用這個設定

内容1(長度3)

内容2(長度9)

這個內容。
※ 詳細請參考這裡

 首先顯示左邊的「@room」吧。

打開app > views > rooms > show.html.erb之後,編輯內容吧。

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


1 2 3 4 5 6 7 8 9 10 11 <br> <div class="row"> <div class="col-xs-3 text-center"> <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">編輯資料</a> </div> <div class="col-xs-9"> </div> </div>

說明內容吧。


1 <div class="col-xs-3 text-center">

圍起來的

1 2 3 4 <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">編輯資料</a>

的地方,在左邊顯示「長度3」的畫面。

在裡面做
  • 顯示「@room」的「name」「explain」
  • 顯示移動到「rooms」資料庫的「edit」網頁的連結
這個兩個設定。
 設定好了的話,看看可不可以作聊天室!

首先註冊兩個會員之後,
登入「id」是「1」的會員之後,打開0.0.0.0:3000/users/2吧!
 使用Windows的話,打開localhost:3000/users/2吧。
※ 不要忘記,在terminal上打入「rails s」起動服務器! Chrome messages users 1 start chat 顯示之後點擊 作聊天室 吧! Chrome messages rooms 1 left 有沒有跟上面圖像一樣顯示0.0.0.0:3000/rooms/1的畫面嗎?
 接着設定右邊的顯示吧!

 在這裡做兩個設定。
  • 顯示訊息資料「@messages」

  • 1 @messages = @room.messages

    什麼呀?
    山田太郎

    功課做好了嗎?
    湘南花子

    還沒
    山田太郎

  • 使用新的訊息資料「@message」,顯示輸入框按鈕

  • 1 @message = Message.new



用這些設定, Chrome messages rooms 1 no messages no entry Chrome messages rooms 1 no image no entries 顯示上面圖像一樣的畫面吧。
 首先從「@messages」的顯示開始做吧。

打開app > views > rooms > show.html.erb之後,編輯內容吧!

 show.html.erb(追加第10〜34行)
※ 用半母字母數字打入。一起點擊「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 25 26 27 28 29 30 31 32 33 34 35 36 <br> <div class="row"> <div class="col-xs-3 text-center"> <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">編輯資料</a> </div> <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <br> <h3 class="text-center">沒有訊息</h3> <br> <% end %> </div> </div>

說明內容吧。
 在這裡使用兩個「if」,做條件判別。

10 <% if @messages.present? %>



12 <% if m.user_id == current_user.id %>

 第一個

10 <% if @messages.present? %>

在判別有沒有「@messages」。
如果沒有的話,顯示下面圖像一樣的畫面, Chrome messages rooms 1 no messages no entry 如果有的話,顯示下面圖像一樣的畫面 Chrome messages rooms 1 no image no entries 像這樣,判別資料有沒有的時候,

1 <% if 資料.present? %>

使用這個內容設定。

 那麽,判別有沒有「@rooms」的時候要怎麼樣設定好呢?


1 <% if @rooms.present? %>

 第二個

1 <% if m.user_id == current_user.id %>

在判別

11 <% @messages.each do |m| %>

使用這個分成一個一個的m」的「user_id跟,
登入的會員current_user」的「id是不是一樣。

這個條件判別在做
登入的會員「current_user」是不是投稿「m」訊息的條件判別

  • 如果成立的話(「m」是登入的會員作的訊息的話),

  • 訊息
    名字


  • 如果不成立的話(「m」是別的會員作的訊息的話),

  • 訊息
    名字

隨着條件判別,顯示內容。

用這個兩個設定, Chrome messages rooms 1 no messages no entry Chrome messages rooms 1 no image no entries 顯示這些畫面。
 解釋詳細的內容吧。

 事先第13〜19行的設定是,
  • 裡面有「@messages」
  • 「m.user_id」跟「current_user.id」是一樣
的時候會顯示,


13 14 15 16 17 18 19 <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4>

這個內容。

使用Bootstrap
  • 在右邊顯示文字的「text-right
  • 顯示有顏色的文字的「alert alert-success

  • 訊息
    名字

這個兩個設定,在顯示
  • 「內容(content)」
  • 「姓字(family_name)」
  • 「名字(first_name)」
的資料。

 第21〜27行的設定是,
  • 裡面有「@messages」
  • 「m.user_id」跟「current_user.id」不一樣
的時候會顯示,


1 2 3 4 5 6 7 <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4>

這個內容。

使用Bootstrap
  • 在左邊顯示文字的「text-left
  • 顯示有顏色的文字的「alert alert-info

  • 訊息
    名字

這個兩個設定,顯示
  • 「內容(content)」
  • 「姓字(family_name)」
  • 「名字(first_name)」
這些三個資料。

  第31〜33行的設定是
  • 沒有「@messages」
的時候會顯示


1 2 3 <br> <h3 class="text-center">沒有訊息</h3> <br>

沒有訊息

的內容。

到這裡作好了「@messages」的顯示了。
接着設定使用「@message」的輸入框的顯示吧。

 作作看使用「@message」的輸入框的設定吧。

打開app > views > rooms > show.html.erb之後,編輯內容吧!

 show.html.erb(追加第35〜43行)
※ 用半母字母數字打入。一起點擊「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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <br> <div class="row"> <div class="col-xs-3 text-center"> <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">編輯資料</a> </div> <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <br> <h3 class="text-center">沒有訊息</h3> <br> <% end %> <hr> <%= form_for @message do |f| %> <%= f.text_field :content, :class => "form-control myform", :placeholder => "打入訊息" %> <%= f.hidden_field :room_id, :value => @room.id %> <br> <div class="text-center"> <%= f.submit "投稿", :class => "btn btn-primary" %> </div> <% end %> </div> </div>

內容應該很容易理解。

1 @message = Message.new

使用這個設定,顯示




輸入框跟發信按鈕。
在這裡

37 38 <%= f.text_field :content, :class => "form-control myform", :placeholder => "打入訊息" %> <%= f.hidden_field :room_id, :value => @room.id %>

像上面一樣作,編輯contentroom_id的輸入框。

使用網頁上打入的資料,在messages_controller.rb設定
※ 詳細請參考這裡

 messages_controller.rb
5 6 7 8 def create @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) redirect_to :back end

的內容。在這裡設定
  • 「content」
  • 「room_id」
  • 「user_id」
這個三個內容可以編輯更改內容,
「user_id」設定裡面要放「current_user」的「id」

點擊 投稿 之後,

messages
id content user_id room_id created_at updated_at
1 你好! 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43
會新增messages像上面的資料。
一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。
這樣編輯好的內容會適用在網頁上。


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


之後在瀏覽器,打開「0.0.0.0:3000/rooms/1」吧。
 使用Windows的話,打開「localhost:3000/rooms/1」吧。 Chrome messages rooms 1 no messages no entry 顯示之後,投稿訊息吧! Chrome messages rooms 1 no image no entries 有沒有顯示上面一樣的畫面嗎?

 接着設定「index」網頁吧!

 設定的內容,請參考這裡



 在這裡作作看「rooms」資料庫的「index」網頁! Chrome messages rooms
作網頁的時候,要設定
  • 資料操作(rooms_controller.rb)
  • 網頁顯示
這個兩個內容。

 首先從資料操作開始做吧!

打開app > controllers > rooms_controller.rb之後,編輯內容吧!

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


18 19 20 def index @rooms = Room.all end

使用在這裡設定的@rooms,顯示資料。
在這裡,使用

19 @rooms = Room.all

這個設定,選擇全部的「rooms資料,
等一會兒這裡的「@rooms」會使用entries資料庫,選擇current_user在參加的rooms」資料

entries
id room_id user_id created_at updated_at
1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
1 @entries = current_user.entries

@entries,選擇current_user在參加的rooms」資料
 接着顯示網頁吧。

打開app > views > rooms > index.html.erb之後,編輯內容吧!

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


1 2 3 4 5 6 7 8 <h1>聊天室一覽</h1> <hr> <% @rooms.each do |r| %> <a href="/rooms/<%= r.id %>"><%= r.name %></a> <hr> <% end %> <p><a href="/users/<%= current_user.id %>" class="btn btn-primary">返回<%= current_user.family_name %> <%= current_user.first_name %>的資料</a></p> <p><a href="/" class="btn btn-info">返回主頁</a></p>

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


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


在瀏覽器打開「0.0.0.0:3000/rooms」吧。
 使用Windows的話,打開「localhost:3000/rooms」吧。 Chrome messages rooms 有沒有顯示上面一樣的畫面嗎?

 接着設定「edit」網頁吧!

 設定的內容,請參考這裡



 作作看「rooms」資料庫的「edit」網頁吧!
作網頁的時候,要設定
  • 操作資料(rooms_controller.rb)
  • 顯示網頁
這個兩個內容。

 首先從資料操作開始做吧!

打開app > controllers > rooms_controller.rb之後,編輯裡面的內容吧!

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


21 22 23 def edit @room = Room.find(params[:id]) end

在這裡選擇,要編輯rooms」資料
 接着做資料顯示吧!

打開app > views > rooms > edit.html.erb之後,編輯內容吧!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h2>編輯聊天室</h2> <hr> <%= form_for @room do |f| %> <%= f.label :name %> <%= f.text_field :name, :class => "form-control my-form", :placeholder => "打入名字" %> <br> <%= f.label :explain %> <%= f.text_area :explain, :class => "form-control my-form", :size => "30x10", :placeholder => "打入說明" %> <br> <%= f.submit "更新", :class => "btn btn-success" %> <% end %> <hr> <p><a href="/rooms/<%= @room.id %>" class="btn btn-primary">返回聊天室資料</a></p> <p><a href="/" class="btn btn-info">返回主頁</a></p>

這一次,

8 <%= f.text_area :explain, :class => "form-control my-form", :size => "30x10", :placeholder => "打入說明" %>

裡追加了
1 , :size => "30x10"

的設定。
在這裡設定打入的輸入框「text_area」的大小。

這一次是左右放30個字・上下10行的設定。

這樣設定好了,使用@room輸入框更新 的按鈕了。
這樣設定好,反覆顯示@rooms資料的內容了。

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


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


在瀏覽器打開「0.0.0.0:3000/rooms/1/edit」吧。
 使用Windows的話,打開「localhost:3000/rooms/1/edit」吧。 Chrome messages rooms 1 edit 有沒有顯示上面圖像一樣的畫面了嗎?

 接着設定「update」的網頁

 設定的內容,請參考這裡



 在這裡,作作看「rooms」資料庫的「update」的網頁吧!
設定,編輯好update網頁的內容之後,移動到edit」網頁的內容

1 redirect_to :back

※ 詳細請參考這裡

所以update網頁上,只設定資料操作,不用作網頁顯示

編輯app > controllers > rooms_controller.rb的內容吧!

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


25 26 27 28 29 30 def update @room = Room.find(params[:id]) @room.update(params.require(:room).permit(:name, :explain)) flash[:notice] = "聊天室編輯好了" redirect_to :back end

這樣編輯好文件了。
那麽,顯示看網頁吧!

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


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


之後用瀏覽器打開「0.0.0.0:3000/rooms/1/edit」吧。
 使用Windows的話,打開「localhost:3000/rooms/1/edit」吧。 Chrome messages rooms 1 edit 網頁顯示之後編輯聊天室的資料,點擊 更新 吧! Chrome messages rooms 1 update 有沒有顯示這樣的畫面嗎?

 設定的內容,請參考這裡


到這裡設定好了「rooms」網頁的顯示了。
到這裡做好了聊天室了!接著 Chrome messages rooms 1 no messages 像上面圖像一樣,顯示在參加聊天室的會員資料吧。

設定的內容請參考這裡吧。