10 : 用戶管理②

上章:用戶管理①

Header10 這個章是,上章「用戶管理①」繼續的內容。
還沒看完上章的內容的話,請參考這裡吧。

3 : 作「users」網頁

到這裡作了、沒有登入的利用者不能看全部的「posts」網頁的網站了。
用作好的「users」資料庫,接着作「users」資料庫的網頁吧。
在這個章作的「users」資料庫的網頁的設定是,
  • show
  • 顯示會員的資料
  • index
  • 顯示全部的會員的資料
  • edit
  • 打入編輯的會員的資料
  • update
  • 用「edit」網頁打入的內容,更新會員的資料
這個四個內容。

在這裡,在「users」資料庫上設定 這個三個內容。
首先從「七個網頁的設定」開始做吧!

 ① : 七個網頁的設定


要設定網頁的時候,在「config > routes.rb」文件裡設定要用哪一個網頁。
首先用Sublime Text打開myapp之後,編輯「config > routes.rb」文件的內容吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ... 61 62 Rails.application.routes.draw do devise_for :users resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] resources :welcome, :only => [:index] root "welcome#index" resources :users, :only => [: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' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

追加的內容是用「users」資料庫的七個網頁的設定

在這裡設定,使用「users」資料庫的「show」「index」「edit」「update」網頁
仔細看內容可以看到,第3行裡有新追加的設定。

 routes.rb(第3行)
3 devise_for :users

這個設定是,在作「users」資料庫的設定文件的時候

 terminal
1 rails g devise user

自動追加的內容,在設定使用
等等的「devise」作的網頁。
到這裡,設定了要使用「users」資料庫的「show」「index」「edit」「update網頁。
接着做資料的操作吧。


 ② : 顯示網頁・操作資料的設定


設定好了七個網頁的設定,接着設定顯示網頁跟操作資料吧。

要作顯示網頁跟操作資料的文件文件夾,要terminal上打入
rails g controller 資料庫的名字
的命令。

同樣作作看「users」資料庫的設定文件文件夾吧!

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

有沒有顯示下面圖像一樣的畫面嗎? Rails g controller users 這個打入自動會作app > controllers > users_controller.rb文件跟app > views > users文件夾,看看有沒有作好了沒!
確認文件文件夾作好之後,設定「users_controller」的文件吧。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class UsersController < ApplicationController def show end def index end def edit end def update end end

※ 這個設定在「posts」資料庫也設定過了,詳細的內容請參考這裡

這一次要設定
的網頁。
※ new」跟「create的網頁,「devise」已經在註冊登入的網頁作好了。
在這裡保存要使用的顯示網頁的設定文件吧(詳細請參考這裡)。
為了作網頁,在app > views > users文件夾裡保存
  • show.html.erb
  • index.html.erb
  • edit.html.erb
  • update.html.erb
這個四個文件吧。
※ 保存文件的方法參考這裡

在這些文件上,設定網頁的顯示吧。

 那麽,設定各個資料操作跟網頁顯示吧

 ⑴ : show網頁


show」網頁的資料操作是用id顯示網頁的內容,像下面設定。
※ 詳細的說明,請參考「posts」資料庫的「show」網頁

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


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

用這個@user在網頁上顯示會員的資料。
接着,在app > views > users > show.html.erb文件上追加顯示的內容。編輯show.html.erb的內容吧。
※ 詳細的內容,請參考「posts」資料庫的「show」網頁

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


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

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


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


編輯好了之後,打開「0.0.0.0:3000/users/1」吧!
 使用Windows的話,打開「localhost:3000/users/1」吧。

有沒有顯示下面圖像一樣的網頁嗎? Chrome users 1 還沒保存「users」資料庫的
  • 「family_name」
  • 「first_name」
  • 「self_introduction」
這些框子的資料,所以內容還不會顯示。


過一會兒作好edit」「update」網頁之後,在網頁上顯示保存好的資料吧!
連結有
  • 移動到「users」資料庫的「index」網頁的連結

  • 1 <p><a href="/users" class="btn btn-primary">返回會員一覽</a></p>
    返回會員一覽
  • 「users」資料庫的「edit」網頁的連結

  • 1 <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">編輯會員資料</a>

    編輯會員資料

這個兩個。
但是點擊這些連結之後移動到的網頁的內容還沒設定好,所以移動後也顯示空白的網頁。
咱們接着設定剩下的網頁吧。


 ⑵ : index網頁


index」網頁的資料操作是,從「users」資料庫選擇全部的資料的資料操作。
※ 詳細的內容,請參考「posts」資料庫的「index」網頁的設定

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


7 8 9 def index @users = User.all end

在網頁上,顯示在這裡設定的,選擇「users」資料庫的全部的資料@users」。
接着在app > views > users > index.html.erb上追加顯示的設定。編輯index.html.erb的內容吧。
※ 詳細的內容請參考「posts」資料庫的「index」網頁

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


1 2 3 4 5 6 7 <h1>會員一覽</h1> <hr> <% @users.each do |u| %> <p><a href="/users/<%= u.id %>"><%= u.family_name %><%= u.first_name %></a></p> <hr> <% end %> <a href="/posts" class="btn btn-info">返回主頁</a>

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


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


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

有沒有顯示下面圖像一樣的畫面嗎? Chrome users 在這裡也沒有保存family_name」跟「first_name的資料,所以沒有顯示會員的名字吧。



edit」網頁的資料操作要選擇編輯的資料。
參考下面,編輯裡面的內容吧!
※ 詳細的說明,請參考「posts」資料庫的「edit」網頁

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


11 12 13 def edit @user = User.find(params[:id]) end

用這個@user的資料,設定打入的輸入框發信按鈕
接着在app > views > users > edit.html.erb上追加設定。編輯edit.html.erb的內容吧。
※ 網頁的說明,請參考「posts」資料庫的「edit」網頁
※ 輸入框的class等等,請參考Bootstrap的說明

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>編輯會員資料</h1> <hr> <%= form_for @user do |f| %> <p>姓氏</p> <%= f.text_field :family_name, :class => "form-control my-form" %> <p>名字</p> <%= f.text_field :first_name, :class => "form-control my-form" %> <p>自我介紹</p> <%= f.text_area :self_introduction, :class => "form-control my-form" %> <hr> <%= f.submit "更新", :class => "btn btn-primary" %> <% end %> <hr> <a href="/users/<%= @user.id %>" class="btn btn-info">返回主頁</a>

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


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


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

有沒有顯示下面圖像一樣的網頁嗎? Chrome users 1 edit before 輸入框也做好了,接着作資料的更新吧!



update」網頁的資料操作是,用在「edit」網頁打入的資料更新資料。
參考下面,設定內容吧。
※ 詳細的內容,請參考「posts」資料庫的「update網頁吧。

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


15 16 17 18 def update @user = User.find(params[:id]) @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction)) end

選擇更新的資料之後,用「edit」網頁打入的資料更新資料。

為了不讓別的框子的資料(id或者email等等)更新,設定只讓「users」資料庫的
  • family_name
  • first_name
  • self_introduction
這個三個框子更新。

接着在app > views > users > update.html.erb上設定內容吧。編輯update.html.erb的內容吧。
※ 詳細的內容,請參考「posts」資料庫的「update網頁吧。

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


1 2 3 4 5 6 7 8 <h1>會員資料編輯好了。</h1> <hr> <p>名字:<%= @user.family_name %><%= @user.first_name %></p> <p>自我介紹:<%= @user.self_introduction %></p> <hr> <p><a href="/users/<%= @user.id %>" class="btn btn-primary">返回會員資料</a></p> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">編輯會員資料</a></p> <p><a href="/posts" class="btn btn-info">返回主頁</a></p>

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


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


編輯好之後,打開「0.0.0.0:3000/users/1/edit」吧!
 使用Windows的話,打開「localhost:3000/users/1/edit」吧。

 打開之後,點擊「更新」的按鈕吧。 Chrome users 1 edit 有沒有移動到編輯完成的網頁了嗎? Chrome users 1 update 出現網頁之後,打開0.0.0.0:3000/users/1吧!
 使用Windows的話,打開「localhost:3000/users/1」吧。 Chrome users 1 after 在「show」網頁上,有沒有顯示編輯的資料了嗎?



最後追加檢查利用者有沒有登入的設定。
追加下面的設定吧。
※ 詳細的說明,請參考登入機能

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


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

這一次設定「users」資料庫的「show」「index」「edit」「update」網頁上,檢查利用者有沒有登入的設定。


到這裡設定好了「users」資料庫的網頁的設定了。

應為是設定的內容,應該沒有很難的地方吧。
接着為了把網站設定的更方便,追加看「users」網頁的連結吧。


 ③ : navigation-bar上追加「users」網頁的連結


到這裡,做好了「users」資料庫的網頁。
最後在遊覽列・navigation-bar上,追加移動到「users」網頁連結吧。
沒有登入的時候,在遊覽列上顯示「登入」「註冊」的連結 Chrome users sign in nav 登入的時候,在遊覽列上顯示「會員一覽」「會員資料」「作投稿」「登出」的連結 Chrome posts all nav after login 顯示的這樣子的設定吧。

 ⑴ : 追加移動到「users」網頁的連結


首先在遊覽列・navigation-bar裡,追加「users」網頁的連結吧。

 那麽移動到「users」資料庫的「index」網頁的連結「會員一覽」要怎麼設定好呢?


1 <a href="/users">會員一覽</a>

事先在遊覽列・navigation-bar上設定,移動到這個users」的「index」網頁的連結吧。

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


23 24 25 26 27 28 29 30 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">會員一覽</a></li> <li><a href="/posts/new">作投稿</a></li> </ul> </div>

那麽打開看自己喜歡的網頁吧。在遊覽列上追加了「會員一覽」的連結了嗎?

接着追加users」資料庫的「show」網頁的連結吧!
要設定的移動到「users」的「show」網頁的連結,必須要移動到自己的會員的網頁。
那麽,在利用的會員的(利用者自己的)資料要怎麼取得呢?

在這裡使用「devise」作
current_user
這個設定。用「<% %>」(或者是「<%= %>」)裡打入這個內容,可以取得利用者的資料。

用這個「current_user」的設定,例如說想顯示利用者的「first_name」的話,

1 <p><%= current_user.first_name %></p>

這樣子可以顯示內容。

使用這個「current_user」,在navigation-bar上追加移動到利用者的網頁的連結吧。

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


23 24 25 26 27 28 29 30 31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">會員一覽</a></li> <li><a href="/users/<%= current_user.id %>">會員資料</a></li> <li><a href="/posts/new">作投稿</a></li> </ul> </div>

編輯完了之後,打開自己喜歡的網頁吧。有沒有顯示「會員資料」的連結嗎? Chrome posts all nav add users 有顯示「會員資料」的連結的話,點擊連結吧。移動到會員資料的網頁(0.0.0.0:3000/users/1)了嗎?

這一次使用去的利用者的id,

28 <li><a href="/users/<%= current_user.id %>">會員一覽</a></li>

設定移動到利用者的會員資料的網頁的連結。

 這樣,在登入的利用者的資料可以用
current_user
取得。
最後設定登出」的連結吧。
登出的連結的內容,

1 <%= link_to "顯示的文字", destroy_user_session_path, :method => :delete %>

設定。
追加看下面的內容吧。

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


23 24 25 26 27 28 29 30 31 32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <li><a href="/users">會員一覽</a></li> <li><a href="/users/<%= current_user.id %>">會員資料</a></li> <li><a href="/posts/new">作投稿</a></li> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> </ul> </div>

編輯完了之後,在自己喜歡的網頁上看看遊覽列(navigation-bar有沒有顯示。 Chrome posts 1 nav add logout 到這裡,網頁全部的連結設定完了。


 ⑵ : user_signed_in?


首先點擊看「登出」的連結吧。可不可以登出呢?

點擊之後,因該會出現下面一樣的畫面。 Chrome posts after logout 這個是應為會員已經登出了沒有登入的會員的資料,所以「current_user」不能取得登入的會員的資料,顯示的錯誤的畫面。

在這裡更改這個設定吧。
因為有這樣的錯誤,登入的時候跟沒有登入的時候必須要顯示別的連結。

  • 登入的時候

  • 顯示「會員一覽」「會員資料」「作投稿」「登出」的連結 Chrome posts all nav after login
  • 登出的時候

  • 顯示「註冊」「登入」的連結 Chrome users sign in nav

使用在登入的通知的解釋的判別條件的
<% if 條件 %>
  内容
<% end %>
的設定跟,

「devise」上,判別利用者有沒有登入的,
user_signed_in?
這個設定判別。

那麽,使用這個「user_signed_in?」跟「<% if %>」,
設定,登入的時候顯示「會員一覽」「會員資料」「作投稿」「登出」的連結的設定吧


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


21 22 23 24 25 26 27 28 29 30 31 32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <% if user_signed_in? %> <li><a href="/users">會員一覽</a></li> <li><a href="/users/<%= current_user.id %>">會員資料</a></li> <li><a href="/posts/new">作投稿</a></li> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> <% end %> </ul> </div>

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


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



再打開同樣的網頁吧。 Chrome posts root after logout 這一次應該沒問題打開網頁了吧。

應為現在利用者沒有登入,所以「會員資料」沒有像上一次一樣的顯示。這樣現在沒有出現錯誤了。
那麽再登入看吧。
有沒有像下面一樣登入了嗎? Chrome posts root after login 這樣看,雖然已經登入了,但是還顯示「註冊」「登入」的連結現在已經登入好了,還有這些連結是有一點奇怪。
這個也用<% if %>的設定除掉吧。

如果是要判別條件成立的話,使用
<% if 條件 %>
  内容
<% end %>
這個設定在判別條件。
相反的如果要判別條件不成立的話,使用
<% if 条件 %>
  内容(跟條件一樣的時候)
<% else %>
  内容(跟條件不同的時候)
<% end %>
判別條件。

那麽,設定不讓登入的會員顯示「註冊」「登入」的連結的內容吧。

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


21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% if user_signed_in? %> <li><a href="/users">會員一覽</a></li> <li><a href="/users/<%= current_user.id %>">會員資料</a></li> <li><a href="/posts/new">作投稿</a></li> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> <% else %> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <% end %> </ul> </div>

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


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



編輯完了之後,登入會員再打開自己喜歡的網頁吧。 Chrome posts all nav after login 網頁上沒有顯示註冊」「登入的連結吧。
如果沒有顯示的話,再登出吧。 Chrome users sign in nav 沒有登入的時候顯示的連結的話OK。
最後總結解釋的內容。



在這裡使用利用者有沒有登入的條件,區別navigation-bar的顯示的設定。
為了做這個設定,使用下面的三個設定。
  • current_user(取得登入的會員的資料)
  • user_signed_in?(判別利用者有沒有登入)
  • <% else %>(跟條件不成立的時候顯示内容)
在這裡說明各個設定。

設定的內容請參考這裡
  • current_user

  • 如果想取得登入的會員的資料的話,用「devise」的設定,在「<% %>」「<%= %>」裡面設定
    current_user
    
    這個內容。

    1 <li><a href="/users/<%= current_user.id %>">會員資料</a></li>

  • user_signed_in?

  • 如果想判別利用者有沒有登入的話,用「devise」的設定在「<% %>」裡設定
    if user_signed_in?
    
    這個內容。

    1 <% if user_signed_in? %>

  • <% else %>

  • <% if 条件 %>
    
    判別條件的時候,顯示條件不成立的設定用「<% else %>」。

    1 2 3 4 5 6 <% if user_signed_in? %> <li><%= link_to "登出", destroy_user_session_path, :method => :delete %></li> <% else %> <li><a href="/users/sign_up">註冊</a></li> <li><a href="/users/sign_in">登入</a></li> <% end %>

到這裡設定了「users」網頁了。
最後做這裡的總結吧。

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



在這個章,使用在上章設定的「devise」的「users」資料庫作網頁。

設定的內容請參考這裡
為了設定「users」網頁的內容、首先做用哪一個網頁的設定
之後在各個網頁上,做顯示網頁・操作資料的設定

網頁的設定也做好了之後,用
  • current_user
  • user_signed_in?
  • <% else %>
設定遊覽列(詳細的內容請參考這裡)。
到這裡,可以看會員資料了。

接着在投稿的「posts」資料庫裡加會員資料從投稿的資料看會員的資料吧。