9 : 用戶管理①

上章:作作看主頁!

Header9

0 : 這個章的目的

 作作看做用戶管理的會員制的網站吧。
在很多網頁上,利用者登入網站之後使用那個網頁。
我們在這裡,想作作看這樣做用戶管理的會員制的網站的設定。

在Ruby on Rails上,為了作「用戶管理」的機能我們使用devise」的gem

先簡單的解釋用devise作的會員制的網頁吧。
  • 登入機能

  • 要看post資料庫的網頁(0.0.0.0:3000/posts等等)的時候需要登入會員,如果沒有登入的利用者的話會移動到「登入」網頁Chrome users sign in nav 登入之後, Chrome posts all nav after login 顯示網頁裡面的內容。
  • 登入利用者的資料

  • 登入的會員的資料,會在「users」資料庫「devise」會作資料庫)裡保存。
    用這個「users」資料庫,可以作會員資料的網頁。 Chrome users 1 after
  • 用user資料庫顯示別的資料

  • 如果會員的資料設定好了的話,可以用這個users資料庫區別,別的資料庫的資料是誰作的 等等的設定。

在這個章做這個三個設定,但是作這個設定之前先導入這個「devise」的工具


1 : 導入devise

導入devise是有,
  • 安裝gem "devise"
  • users資料庫
  • devise的顯示・作views(登入註冊網頁等等)
這個三個設定。那麽一個一個做做看吧!

 ① : 安裝gem "devise"


首先用Sublime Text打開myapp吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


gem的「devise」要在Gemfile裡設定內容。

 Gemfile(「gem 'sprockets', '3.6.3'」後面追加「gem 'devise'」)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


26 27 28 29 30 31 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'devise'

Gemfile文件裡設定好內容之後,在terminal上打入bundle install導入gem。
首先在terminal上,移動到myapp吧。


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


 terminal
1 2 3 cd Desktop cd rails_project cd myapp

之後打入bundle install

terminal
 使用Windows的話,用「命令提示符」吧。
1 bundle install

 不會動的話,刪除「Gemfile.lock」之後再試試看吧。

有沒有顯示下面圖像一樣的網頁了嗎? Terminal bundle install bootstrap
完了之後在網站上適用「gem」的內容,在terminal上打入

terminal
 使用Windows的話,用「命令提示符」吧。
1 rails g devise:install

這個內容吧。有沒有顯示下面一樣的網頁嗎? Rails g devise install 這樣子devise的導入完成了。
可是要使用的話,還需要作資料庫跟設定顯示的內容。
先作作看資料庫吧。


 ② : 作users資料庫


接着作保存會員資料的資料庫吧。
說要作資料庫,不是從頭到尾作users資料庫,所以不要擔心。電子郵件・密碼・登入的時間等等的框子,「devise」會作。
在這裡作「devise」不會做的「姓氏」「名字」「自我介紹」的框子
首先在terminal上打入

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

的命令吧。有沒有顯示下面圖像一樣的畫面嘛? Rails g devise user 用這個打入作了,設定「devise」的會員資料庫的「users」資料庫的設定文件

如果資料庫的名字,想用「customers」的話,打入
rails g devise customer
的命令。
畫面上有沒有顯示日子_devise_create_users.rb的文件嗎?
devise作的設定「users」資料庫的設定文件是這一個。

在這個設定文件裡追加「姓氏」「名字」「自我介紹」的框子,之前看裡面的內容吧!
用Sublime Text打開看db > migrate > 日子_devise_create_users.rb文件吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


 日子_devise_create_users.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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 class DeviseCreateUsers < ActiveRecord::Migration def change create_table(:users) do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

有沒有顯示這樣子的文件嗎?
那麽,追加「姓氏」「名字」「自我介紹」的框子的設定吧。

 3個框子
  • 放短的文章的「family_name(姓名)」
  • 放短的文章的「first_name(名字)」
  • 放長的文章的「self_introduction(自我介紹)」
要怎麼設定呢?

※ 不知道的話,請參考這裡


1 2 3 t.string :first_name t.string :family_name t.text :self_introduction

t.timestamps null: false的前面追加,這三行的設定吧。

有沒有打入跟下面一樣內容了嗎?

 日時_devise_create_users.rb(追加第33〜35行)
※ 用半母字母數字打入。一起點擊「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 class DeviseCreateUsers < ActiveRecord::Migration def change create_table(:users) do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.string :first_name t.string :family_name t.text :self_introduction t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

編輯好了之後,在terminal上

terminal
 使用Windows的話,請用「命令提示符」吧。
1 rake db:migrate

 不動的話,在命令的前面加「bundle exec」,打入「bundle exec rake db:migrate」吧。

打入這個內容吧。 Rake db migrate model users 顯示這樣子的畫面之後,用Sequel Pro看看資料庫吧!
※ 打開的方法,請參考Sequel 或者 SqliteBrowser
選擇「myapp_development」之後,看看有沒有「users」資料庫。 Sequel pro users 有「users」資料庫的話,看看內容裡面有沒有「family_name」「first_name」「self_introduction」的框子
※ 如果沒有的話,參考這裡追加框子吧。

這樣子做好會員(user)的資料庫的設定了。
接着設定「devise」的網頁的導入吧。


 ③ : 導入devise的網頁


接着導入在「devise」使用的網頁吧。
devise 的網頁的導入也是從terminal上的打入設定。
那麽,在terminal上打入下面的命令吧。

terminal
 使用Windows的話,用「命令提示符」吧。
1 rails g devise:views

有沒有顯示下面一樣的畫面嗎? Rails g devise views 確認裡面有沒有作好的文件文件夾。
app > views > devise文件夾嗎? Sublime text devise 裡面有很多文件,但是使用的是「registrations」的「new.html.erb」(登入的網頁)「sessions」的「new.html.erb」(註冊的網頁)這個兩個文件。
導入到這裡。最後想總結。


 ④ : 總結


要導入「devise」的時候,
  • 設定Gemfile之後安裝
  • 導入devise
  • 導入users的框子
  • 導入顯示網頁的views
要準備這個4個文件。在這裡一個一個解釋吧。
  • 設定Gemfile之後安裝

  • 「devise」的gem要在,Gemfile裡

     Gemfile
    1 gem 'devise'

    追加之後,在terminal上

     terminal
    1 bundle install

    打入這個內容,設定。
  • 導入devise

  • 安裝好「devise」的gem之後,在terminal上

     terminal
    1 rails g devise:install

    打入這個內容。
  • 導入users的框子

  • 打入

     terminal
    1 rails g devise user

    作「devise」的「users」資料庫的設定文件

    自己更改內容之後,在terminal上打入

     terminal
    1 rake db:migrate

    作「users」資料庫。
  • 顯示的view的設定

  • 「devise」的網頁也在用terminal的打入作。

     terminal
    1 rails g devise:views

    打入這個命令,作「devise」的網頁。


2 : 登入機能

devise的導入也完了,接着設定登入機能吧!
一起點擊「Command」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。
這樣編輯好的內容會適用在網頁上。


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


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

 這個是註冊的網頁。 Chrome users sign up before
接着打開「0.0.0.0:3000/users/sign_in」吧!
 使用Windows的話,打開「localhost:3000/users/sign_in」吧。

 這個是登入的網頁。 Chrome users log in before

 ① : 裝飾登入註冊的網頁


首先用Bootstrap,裝飾登入註冊的網頁吧!

在這裡 做這個兩個設定。

 ⑴ : btn跟form-control


現在的網頁,輸入框跟按鈕會不會有一點不好看呢?
在網頁上追加btnform-control這個兩個設定,把網頁的顯示的裝飾的更漂亮吧。

首先看看註冊的網頁(0.0.0.0:3000/users/sign_up)吧。
打開「app > views > devise > registrations」的文件夾裡的new.html.erb吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


 new.html.erb(registrations文件夾)
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 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off" %> </div> <br> <div class="actions"> <%= f.submit "Sign up" %> </div> <% end %> <%= render "devise/shared/links" %>

有沒有打開這樣子的文件嗎?
有「form_for」等等的內容,裡面的內容也可以理解一些吧。
f.label :文字
在顯示「文字」
f.email_field :email
在設定打入Email的輸入框,
f.password_field :password
在設定打入密碼的輸入框。

 在new.html.erb的「f.email_field」上,追加Bootstrap的輸入框的設定吧。
※ 不知道的話,請參考這裡


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


8 <%= f.email_field :email, autofocus: true, :class => "form-control" %>

這樣打入也可以設定Bootstrap的輸入框的設定,但是這樣子設定的輸入框太長了所以用之前作的「my-form」把框子設定的短一點吧。

「f.email_field」的設定完了之後,
  • 在「f.password_field」裡面設定輸入框
  • 在「f.submit」裡面設定按鈕
追加這個內容吧。

 new.html.erb(編輯第8、16、21、23、25行)
※ 用半母字母數字打入。一起點擊「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 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control my-form" %> </div> <br> <div class="actions"> <%= f.submit "Sign up", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

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


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


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

有沒有顯示下面圖像一樣的畫面嗎? Chrome users sign up bootstrap
註冊網頁的設定也好了,接着作登入網頁的設定吧。
登入的網頁要設定在app > views > devise > sessions文件夾裡的new.html.erb文件裡。

那麽
  • 在輸入框裡「form-control」跟「my-form
  • 在按鈕裡「btn」跟「btn-primary
追加顯示的內容吧!

 new.html.erb(sessions文件夾)
※ 用半母字母數字打入。一起點擊「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 <h2>Log in</h2> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <% if devise_mapping.rememberable? -%> <div class="field"> <%= f.check_box :remember_me %> <%= f.label :remember_me %> </div> <% end -%> <br> <div class="actions"> <%= f.submit "Log in", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

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


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


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

有沒有顯示下面一樣子的網頁了嗎? Chrome users log in bootstrap 做好了按鈕跟輸入框的設定、接着追加navigation-bar的內容吧。


 ⑵ : navigation-bar


在navigation-bar註冊登入的連結吧!
這一次在navigation-bar,遊覽列的右邊加兩個連結吧。

 設定看移動到,註冊的網頁「0.0.0.0:3000/users/sign_up」的連結
※ 移動到「0.0.0.0:3000」的連結可以省略,打入「/」這樣也可以設定。


1 <a href="/users/sign_up">註冊</a>

同樣的移動到0.0.0.0:3000/users/sign_in的「登入」的連結,

1 <a href="/users/sign_in">登入</a>

這樣子設定(上面放鼠標,可以看到答案)。

application.html.erb裡面的navigation-bar追加這個連結吧。
首先用Sublime Text打開app > views > layouts文件夾之後打開「application.html.erb」,追加下面的內容吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


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


10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <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="/posts/new">作新的投稿</a></li> </ul> </div> </div> </nav>

※ 使用navigation-bar的方法,請參考這裡
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


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


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

有沒有顯示下面一樣子的網頁了嗎? Chrome posts nav add log in
装飾也不是那麽難吧?

 接着作登入機能,不要讓沒有登入的利用者利用「posts」的網頁吧。


 ② : 設定登入機能


在這裡做做看登入機能吧!

在這裡設定的是
  • 只讓登入的會員,顯示投稿(posts)的網頁的設定
  • Chrome posts sign in before alert
  • 登入成功的時候・錯的時候要顯示的通知的設定
  • Chrome users log in after Chrome posts fail to sign in
這個兩個設定吧。

 ⑴ : 對登入的會員顯示「posts」的網頁


那麽在這裡,設定不要讓登入的會員以外的利用者顯示「posts」的網頁吧。
方法很簡單。在不想被看的「controller」文件上,打入下面的設定就OK。

1 before_action :authenticate_user!

用這個設定檢查利用者有沒有登入。

那麽,開始做吧。
編輯「posts_controller.rb」的內容吧。

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


1 2 3 4 5 6 7 8 9 10 class PostsController < ApplicationController before_action :authenticate_user! def show @post = Post.find(params[:id]) end def index #以下省略

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


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


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

 現在還沒登入,應該會顯示登入網頁吧? Chrome posts sign in before alert0.0.0.0:3000/posts/1等等別的網頁試試看吧。
 使用Windows的話,打開「localhost:3000/posts/1」等等吧。


現在的狀況,沒有登入的利用者不能打開「posts」網頁。但是也可以設定讓全部的利用者打開「show」「index」這個兩個網頁

設定,可以誰都可以看「show」跟「index」這個兩個網頁的內容吧!
編輯剛才的「posts_controller」文件的設定。


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


1 2 3 4 5 6 7 8 9 10 class PostsController < ApplicationController before_action :authenticate_user!, :only => [:new, :create, :edit, :update, :destroy] def show @post = Post.find(params[:id]) end def index #以下省略

追加了後面的only => [...]的設定了。
這個設定的方法,跟routes.rb一樣,應該可以推測內容吧。

這一次在 這個五個網頁上,檢查利用者有沒有登入。

 在「controller」文件裡追加設定「new」跟「create」的網頁裡檢查利用者有沒有登入的內容的時候要怎麼設定呢?


1 before_action :authenticate_user!, :only => [:new, :create]


 ⑵ : 設定登入的通知


到這裡,用檢查利用者有沒有登入的設定,不讓沒有登入的利用者看「posts」的網頁的內容。
現在就可以註冊會員登入網站了。但是註冊登入之前,咱們設定利用者登入之後等等的時候顯示的通知吧。 Chrome users log in after Chrome posts fail to sign in 這個通知也加幾個內容就可以設定,做做看吧。
首先編輯「app > views > layouts > application.html.erb」<div class="container main-page">裡的內容吧。

 application.html.erb(<div class="container main-page">之後追加內容)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


36 37 38 39 40 41 42 43 44 45 46 47 </nav> <div class="container main-page"> <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div>

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


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


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

有沒有顯示下面圖像一樣的畫面嗎? Chrome posts fail to sign in
 在這裡解釋設定的內容吧。

在這裡的設定中,新追加

1 <% if notice %>
1 <% if alert %>

的設定。這個設定在做什麼呢?

在這一些跟

1 <% end %>

之間的地方設定條件判別,然後在各個條件上顯示各個顯示的內容。

條件用
<% if 條件 %>
指定,如果條件成立的時候
<% end %>
顯示到這裡的內容。

這一次,

<% if notice %>
在設定有通知過來的時候的條件,
<% if alert %>
在設定有錯誤的通知過來的時候的條件。
<% if notice %>」(通知來的時候:notice)是,

1 2 <br> <p class="alert alert-success"><%= notice %></p>

<% if alert %>」(錯誤的通知來的時候:alert)是,

1 2 <br> <p class="alert alert-danger"><%= alert %></p>

顯示各個內容。

如果是notice的話顯示

Signed in successfuly.


如果是alert的話顯示

You need to sign in or sign up before continuing.


這樣的通知的內容,放在
<%= notice %> <%= alert %>
裡面顯示。
在這裡顯示的有顏色的文字是怎麼設定呢?
這個其實也是「Bootstrap」顯示有顏色文字的設定。在文字class裡指定「alert」跟「alert-success」「alert-danger」設定裝飾的內容。

2 <p class="alert alert-success"><%= notice %></p>

2 <p class="alert alert-danger"><%= alert %></p>


綠色的通知在顯示

<p class="alert alert-success">顯示的文字</p>

紅色的通知在顯示

<p class="alert alert-danger">顯示的文字</p>

各個內容。

綜括一下在這裡設定的內容吧。
  • 「<% if notice %>」跟「<% end %>」之間設定有通知來的時候
  • 「<% if alert %>」跟「<% end %>」之間設定有錯誤的通知來的時候
顯示的內容。

各個通知在「<%= notice %>」「<%= alert %>」裡顯示內容。
這個通知是從哪裡來的呢?
其實說這個通知可以自己作作看,在這裡作作看通知吧。


通知在controller」文件裡設定
  • 通知(notice)的話
  • flash[:notice] = "顯示的內容"
    
  • 錯誤的通知(alert)的話
  • flash[:alert] = "顯示的內容"
    
各個內容可以在網頁上顯示。

controller」文件裡設定的各個通知的內容會顯示在
<%= notice %>  <%= alert %>
裡面。

show」的網頁「0.0.0.0:3000/posts/1裡顯示自己設定的通知吧。

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


5 6 7 8 def show @post = Post.find(params[:id]) flash[:notice] = "投稿" end

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


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


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

有沒有顯示下面圖像一樣的畫面嗎? Chrome posts 1 flash 這樣設定好通知了!
這一次設定的通知是試試看的而已,所以這一次設定的內容就除掉吧。
「devise」的通知也是用這個設定。
通知的內容「devise」會自動作,所以簡單的理解內容就OK。

 「posts_controller.rb」的edit」網頁裡,顯示「@post」的「content」的通知要怎麼樣設定呢?
※ 在上面放鼠標,答案會顯示。


1 2 3 4 def edit @post = Post.find(params[:id]) flash[:notice] = @post.content end


 ⑶ : 登入


到這裡做完了限制看「posts」網頁的設定跟通知的設定、咱們註冊登入吧!
打開註冊的網頁「0.0.0.0:3000/users/sign_up之後,註冊會員吧。

 使用Windows的話,打開localhost:3000/users/sign_up之後註冊會員吧! Chrome users sign up bootstrap 登入之後會出現下面圖像一樣的畫面吧。 Chrome posts root after sign up 這樣子,會員註冊好了。
註冊完了之後,打開new」網頁「0.0.0.0:3000/posts/new吧。沒有顯示登入網頁,顯示作作投稿的網頁的話OK。

 使用Windows的話,打開localhost:3000/posts/new吧。
會員登錄也完了,用Sequel Pro看看保存好的會員資料吧。
※ 打開Sequel Pro的方法請參考這裡,打開SqliteBrowser的方法請參考這裡

像下面的圖像一樣,有沒有追加了保存的資料了嗎? Sequel pro users 1


 ③ : 總結


到這裡設定了登入機能的內容了(雖然很多是「devise」作的・・・)。

在這裡設定了
  • 註冊登入網頁的設定
  • 網頁上檢查利用者有沒有登入的設定
  • 通知的設定
這個三個內容。

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

  • 註冊登入網頁的設定

  • 註冊網頁(「0.0.0.0:3000/users/sign_up」)

    app > views > devise > registrations文件夾裡的new.html.erb文件裡追加設定的內容。 Chrome users sign up bootstrap
    登入網頁(「0.0.0.0:3000/users/sign_in」)

    app > views > devise > sessions文件夾裡的new.html.erb文件裡追加設定的內容。 Chrome users log in bootstrap
  • 網頁上檢查利用者有沒有登入的設定

  • 要限制顯示網頁的內容的話,想檢查利用者的網頁的資料庫的「controller」文件裡追加下面的設定。

    1 before_action :authenticate_user!

    這樣子在全部的網頁上檢查利用者了。
    如果要指定檢查的網頁的話,設定像下面的內容。

    1 before_action :authenticate_user!, :only => [:new, :create, :edit, :update, :destroy]

  • 通知的內容

  • 在「devise」裡,可以設定顯示註冊登入網頁上的通知的內容。
    設定通知要追加下面的內容。

    1 2 3 4 5 6 7 8 <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %>

    內容使用
    <% if 條件 %>
      内容
    <% end %>
    
    判別通知,在各個通知上顯示設定的內容。

    設定的內容請參考這裡

到這裡辛苦你了。作的網站也更像會員制的網站吧。
 看「users」資料庫裡面,應該看到
  • 「family_name」
  • 「first_name」
  • 「self_introduction」
的框子裡沒有保存的資料,應為註冊的時候沒有打入。

接着在這個資料庫裡保存資料,作「users」資料庫的網頁吧。