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」资料库,要用
这个五个网页的设定,作网站。

那么编辑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
的五个网页的设定了。

 接下设定「操作资料的设定」跟「显示网页的设定」吧!

在这里设定各个网页。刚开始从「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 像上面图像一样,显示在参加聊天室的会员资料吧。

设定的內容请参考这里吧。