1 : Mugcup(基礎編)的複習


Coffeecup header1

0 : 這個章的目的

  作網絡聊天的網站會使用,在Mugcup(基礎編)裡說明的「作作看簡單的網站」「Bootstrap」「主頁」「用戶管理」等等的內容。

在這裡複習 的內容作作看下面圖像一樣的網站吧。 Chrome messages root add nav users sign in up


1 : 作剛開始的網站吧!

首先作剛開始的網站吧!
※ 詳細的內容請參考這裡
在這裡設定
  • rails new
  • 導入Gem
  • 準備資料庫
這個三個內容。

 ① : rails new


 首先作作看剛開始的網站吧!
Desktop < rails_project裡作,網站的設定文件夾message-app

 首先移動到「rails_project」吧。


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


 terminal
1 2 cd Desktop cd rails_project

那麽,在這裡作作看設定「message-app」的網站的文件夾吧!
※ 詳細請參考這裡吧。

 terminal
1 rails new message-app -d mysql


 使用Windows的話,打入下面的命令。


 命令提示符
1 rails new message-app

在Finder的Desktop > rails_project裡面,有沒有作好message-app的文件夾嗎?
這個是設定「message-app」的網站的文件夾。

接着做導入gem(工具)吧!


 ② : 導入Gem


 在這裡,導入工具・gem吧!

導入,作網站的時候使用的Gem
※ 不知道內容的話,請參考這裡

編輯在設定gemGemfile的內容吧。
 使用Mac的話

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」的後面追加內容)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
26 25 27 28 29 30 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'devise'


設定好之後,打入下面的內容吧。

 terminal
1 bundle install

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

安裝好gem之後,作Bootstrap的安裝

 terminal
1 rails g bootstrap:install

 這樣子做好了,在Mac上的「gem」的導入了。
 使用Windows的話

 Gemfile(「gem 'sdoc', '~> 0.4.0', group: :doc」後面追加內容)
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。
26 27 gem 'coffee-script-source', '1.8.0' gem 'devise'

設定好了之後,在terminal上打入下面的內容吧。

 terminal
1 bundle install

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

安裝好gem之後,參考這裡安裝Bootstrap吧。

 這樣,使用Windows的「gem」的導入完成了。
 這樣做好了「gem」的設定。


 ③ : 準備資料庫


 準備資料庫吧!
為了保存資料,網站裡必須作資料庫。
※ 不知道的話,請參考這裡吧。

那麽作作看資料庫吧。在terminal上打入下面的內容吧!

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

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

這樣,資料庫作好了!
作好之後,在 Sequel Pro / SqliteBrowser 上看看有沒有「message-app_development」的資料庫。
※ 請參考打開Sequel Pro 的方法打開SqliteBrowser 的方法吧。

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


2 : 作主頁!

 設定網站的設定文件夾也作好了,接着做這個網頁的主頁吧!
※ 詳細請參考這裡吧。
在這裡做 這些內容。
首先做
  • 資料操作的文件(controller文件)
  • 顯示網頁的文件(views文件夾)
這個兩個吧!
※ 詳細請參考這裡

為了作controller文件・views文件夾,在terminal上打入

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

的命令吧。

這樣作好了
  • 操作資料的設定文件「app > controllers > welcome_controller.rb
  • 設定顯示網頁的文件夾「app > views > welcome
這個文件文件夾了。在這裡設定內容。

設定這個兩個的內容之前,首先設定「七個網頁的設定」吧。

 ① : 七個網頁的設定


設定七個網頁(詳細請參考這裡)裡使用哪一個網頁的內容吧。
在這裡設定,在主頁「0.0.0.0:3000」裡顯示「welcome」的「index」網頁吧!

七個網頁的內容在config > routes.rb上面設定。
參考下面的內容,編輯文件吧!

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


1 2 3 4 5 6 7 8 ... 60 Rails.application.routes.draw do resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

在第3行裡指定了使用「welcome」的「index」網頁的設定,
在第4行裡指定了在主頁「0.0.0.0:3000」裡顯示「welcome」的「index」網頁的設定。
※ 詳細請參考這裡吧。

這樣設定好,七個網頁的設定了。

接下做操作資料的設定吧。


 ② : 操作資料


接着做操作資料的設定吧!
資料操作在「controller」文件夾裡的「welcome_controller.rb」文件設定。
這一次不用在「welocme」的「index」網頁上操作資料,所以要設定下面的內容。
※ 詳細請參考這裡

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


1 2 3 4 5 6 class WelcomeController < ApplicationController def index end end

這樣作好操作資料的設定了。

接下來,做網頁的設定吧!


 ③ : 網頁的設定


做做看網頁的設定吧。
網頁的顯示在「app > views > welcome」文件夾設定。
首先在「welcome」文件夾裡保存「index.html.erb(保存的方法請參考這裡)之後,參考下面的內容編輯文件吧!
※ 內容請參考這裡

 index.html.erb(在「app > views > welcome」文件夾裡保存文件)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 <div class="header-image"> <h1 class="text-center header-content"><strong>歡迎光臨</strong></h1> </div>

使用html設定的內容到這裡。
接着把主頁「0.0.0.0:3000Chrome messages root 1 顯示的跟上面圖像一樣吧。

為了顯示這樣的內容,做做看
  • 保存要顯示的圖像
  • 設定CSS文件
吧。
※ 不知道的話,請參考這裡
首先,在message-app」的「app > assets > images」文件夾裡保存想在主頁上顯示的圖像吧。
如果沒有想顯示的圖像的話,保存這裡的圖像吧。 Chrome image save assets1 Chrome image save assets2 完了之後,在app > assets > stylesheets裡保存style.scss(保存的方法請參考這裡)之後,參考下面編輯內容吧。
※ 內容請參考這裡

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


1 2 3 4 5 6 7 8 9 10 11 12 .header-image{ background-image: url(/assets/保存的圖像的名字); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

做好這裡之後,在message-app上打入

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

起動服務器後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。 Chrome messages root 1 有沒有顯示上面圖像一樣的畫面了嗎?這樣主頁作好了!

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

接着使用「Bootstrap」,設定遊覽列吧!


3 : 使用Bootstrap吧!

那麽使用「Bootstrap」,設定遊覽列・navigation-bar吧!
※ 詳細請參考這裡吧。
Mac上的Bootstrap的導入,打入

terminal
1 rails g bootstrap:install

的內容。
沒做好的話,再做一次吧!

 使用Windows的話,請參考這裡吧。
那麽,設定看上面的遊覽列吧!
遊覽列要在全部的網站上顯示,所以在app > views > layouts」文件夾裡的「application.html.erb」文件設定內容。
編輯application.html.erb的內容吧。
※ 詳細請參考這裡

 application.html.erb(追加第11〜27、29、30行)
※ 用半母字母數字打入。一起點擊「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 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <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="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container main-page"> <%= yield %> </div> </body> </html>

這個遊覽列「navigation-bar的設定以外,還要設定container」跟「main-page」的內容吧。
※ 詳細請參考這裡吧。
現在的網頁上「navigation-bar」的地方會蓋住圖像,所以設定「main-page」的CSS文件修改內容吧。

編輯style.scss的內容。

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .main-page{ margin-top:50px; } .header-image{ background-image: url(/assets/保存的圖像的名字); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

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


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


編輯好了之後,打開「0.0.0.0:3000」吧!
 使用Windows的話,打開「localhost:3000」吧。 Chrome messages root 2 有沒有顯示上面的網頁了嗎?

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


4 : 用戶管理

最後用devise,設定用戶管理。
※ 詳細請參考這裡
在這裡做 這個四個設定吧。

 ① : 安裝「devise」


那麽安裝「devise」吧!
為了安裝用gem導入的「devise」,在terminal上打入下面的命令。
※ 詳細請參考這裡

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

這樣安裝好「devise」了!
接下作「devise」的會員資料庫吧!


 ② : 作會員資料庫


接着作「devise」的會員資料庫吧!
在這裡使用「devise」作「users」資料庫。為了「devise」作「users」資料庫,要在terminal打入下面的內容。
※ 詳細請參考這裡

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

這樣作好了作「devise」的「users」資料庫的設定文件了。
db > migrate 文件夾裡的日子_devise_create_users.rb是這個設定文件。
在這個文件夾裡追加下面的內容。

 日子_devise_create_users.rb(追加第33〜36行)
※ 用半母字母數字打入。一起點擊「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 46 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.integer :age 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

在這裡追加了
  • 短的文章的「first_name」的框子
  • 短的文章的「family_name」的框子
  • 長的文章的「self_introduction」的框子
  • 數字的文章的「age」的框子
這個四個框子。
設定好了之後,作資料庫吧!
為了用設定的文件作資料庫,要在terminal上打入下面的命令。

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

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

這樣作好資料庫了!

作完之後,在Sequel Pro / SqliteBrowser看看「message-app_development」的「users」資料庫有沒有作好了沒!
※ 打開Sequel Pro的方法請參考這裡、打開SqliteBrowser的方法請參考這裡

接下來,裝飾「devise」的註冊・登入網頁吧!


 ③ : 裝飾註冊・登入網頁


用「devise」作註冊・登入網頁之後,裝飾網頁的內容吧!
在這裡用「devise」作註冊・登入網頁之後,用Bootstrap裝飾網頁的內容吧。
為了用「devise」作網頁的畫面,要在terminal上打入下面的內容。
※ 詳細請參考這裡

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

在這個命令作好的幾個文件文件夾裡,使用
  • 註冊畫面
  • app > views > devise > registrations」文件夾裡的「new.html.erb」文件
  • 登入畫面
  • app > views > devise > sessions」文件夾裡的「new.html.erb」文件
這個兩個文件。在各個文件上設定內容。
※ 詳細請參考這裡

在這裡做 這個三個內容。

 裝飾註冊・登入網頁上的輸入框・按鈕

輸入框跟按鈕的裝飾,使用Bootstrap的設定。
 首先從註冊網頁開始裝飾。

在設定註冊網頁的設定文件是app > views > devise > registrations裡的new.html.erb

那麽,編輯new.html.erb的內容吧!
※ 內容的說明請參考這裡

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

為了把輸入框的長度設定的短一點,在app > assets > stylesheets > style.scss裡追加設定輸入框的大小的CSS文件的設定「my-form」
※ 詳細請參考這裡

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


1 2 3 4 5 6 7 ... .main-page{ margin-top:50px; } .my-form{ width:500px; } .header-image{ /* 以下省略 */

※ 一起點擊「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 messages users sign up 有沒有顯示上面圖像一樣的畫面嗎?
接着做登入網頁的設定吧!

 接着裝飾登入網頁

顯示登入網頁的設定文件是app > views > devise > sessions裡面的new.html.erb」文件

編輯sessions裡面的new.html.erb文件吧。
※ 詳細請參考這裡

 new.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 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 messages users sign in 有沒有顯示上面圖像一樣的畫面嗎?
接着在遊覽列(navigation-bar)上追加,移動到註冊・登入網頁的連結。

 遊覽列(navigation-bar)上追加,移動到註冊・登入網頁的連結

「navigation-bar」的設定是,在application.html.erb裡追加Bootstrap的裝飾設定。
※ 詳細請參考這裡吧。

在這個章設定的「navigation-bar」裡追加,移動到 的連結吧!

打開app > views > layouts > application.html.erb之後,參考下面的內容編輯文件的內容吧!
※ 詳細請參考這裡

 application.html.erb(追加第24〜28行)
※ 用半母字母數字打入。一起點擊「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 <!DOCTYPE html> <html> <head> <title>MessageApp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <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="/" class="navbar-brand">Message-app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <% 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 %> </ul> </div> </div> </nav> <div class="container main-page"> <%= yield %> </div> </body> </html>

用「if」「else」跟「user_signed_in?」,設定
  • 不是會員的話,顯示「註冊」「登入」的連結
  • 會員的話,顯示「登出」的連結
的內容吧。
※ 詳細請參考這裡

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


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


編輯好了之後,打開「0.0.0.0:3000/posts」吧!
 使用Windows的話,打開「localhost:3000/posts」吧。 Chrome messages root add nav users sign in up 遊覽列(navigation-bar)上有沒有顯示連結了嗎?
做好之後點擊連結,看看移動到的網頁是對不對。
 追加註冊・登入的通知

註冊・登入的通知的設定,在application.html.erb裡設定Bootstrap跟「if」「else」的條件判別。
※ 詳細請參考這裡

參考下面的內容,編輯application.html.erb的內容吧!

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


35 36 37 38 39 40 41 42 43 44 45 <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>

這樣做好通知的設定了!
接着用「users」資料庫,顯示看「users」資料庫的網頁吧!



最後作作看用「users」資料庫作的網頁吧。
設定用資料庫的網頁的話,需要做
  • 七個網頁的設定(routes.rb)
  • 操作資料的設定(controller)
  • 顯示網頁的設定(views)
這個三個設定。

首先為了作「users」資料庫的資料操作・網頁顯示的設定文件,在terminal上打入下面的命令。
※ 詳細請參考這裡

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

這樣作好
  • 資料操作的設定文件「app > controllers > users_controller.rb
  • 顯示網頁的設定文件夾「app > views > users
這兩個了。
在這個文件文件夾上,設定內容。
應為「devise」會作好會員資料,所以「users」資料庫裡設定 這個四個內容

所以在顯示網頁的設定文件夾app > views > users裡,保存
  • show.html.erb
  • index.html.erb
  • edit.html.erb
  • update.html.erb
這個四個文件吧(保存文件的方法請參考這裡

到這裡做好之後,首先設定「七個網頁的設定」吧!
 七個網頁的設定

「七個網頁的設定」要在config > routes.rb裡追加設定。編輯routes.rb的內容吧!
※ 詳細請參考這裡

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


1 2 3 4 5 6 7 8 9 ... 62 Rails.application.routes.draw do devise_for :users 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". # 省略 end

這樣設定好了使用「users」資料庫的「show」「index」「edit」「update」網頁的設定了!

那麽,在各個網頁上追加設定吧!

 show網頁

要設定網頁的時候,需要
  • 操作資料的設定(users_controller.rb
  • 顯示網頁的設定(html.erb
這個兩個設定。
首先從操作資料的設定開始做吧。在app > controllers > users_controller.rb裡追加資料操作的設定。

編輯users_controller.rb的內容吧。
※ 詳細請參考這裡

 users_controller.rb(追加第3〜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 end

在這裡追加了
  • 設定在「show.html.erb」顯示的標記「@user
  • 設定不讓沒登入的會員看內容(請參考這裡
這個兩個設定。
接着設定顯示網頁的設定吧!
編輯app > views > users > show.html.erb的內容吧。
※ 詳細請參考這裡

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

顯示「@user」的資料以外,
用「if」「else」,如果登入的會員跟網頁上顯示的會員是一樣的時候而已,顯示

編輯會員資料

的按鈕。
※ 詳細請參考這裡

到這裡「show」網頁的設定完成了!

做好這裡之後,
註冊網頁「0.0.0.0:3000/users/sign_up裡註冊新的會員吧!
 使用Windows的話,打開「localhost:3000/users/sign_up」吧。 Chrome messages users sign up enter info 作好了之後,看看會員的網頁「0.0.0.0:3000/users/1吧! Chrome messages users 1 no info 有沒有顯示上面一樣的內容嗎?

接着做「index」網頁吧!
 index網頁

首先從資料操作(controller)開始做吧。
編輯app > controllers > users_controller.rb的內容吧。
※ 詳細請參考這裡

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


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

這樣子設定好了,網頁上顯示的標記「@users」
接着設定顯示的網頁吧。

「index」網頁的顯示,在app > views > users > index.html.erb文件裡設定顯示的內容。
編輯index.html.erb的內容吧!
※ 詳細請參考這裡

 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="/" class="btn btn-info">返回主頁</a>

在這個設定,把「users_controller.rb」設定的「@users」分成一個一個的內容顯示在網頁

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


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


做好之後,打開「0.0.0.0:3000/users」吧!
 使用Windows的話,打開「localhost:3000/users」吧。 Chrome messages users 有沒有顯示上面圖像一樣的網頁嗎?

接着做「edit」網頁吧
 edit網頁

首先從資料操作開始做。
編輯app > controllers > users_controller.rb的內容吧。
※ 詳細請參考這裡

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


9 10 11 12 13 14 15 16 17 18 19 20 21 22 def index @users = User.all end def edit @user = User.find(params[:id]) if @user.id == current_user.id else redirect_to "/" flash[:alert] = "無效的會員" end end end

在這裡也使用「if」「else」
  • 如果登入的會員跟在顯示的會員一樣的話,

  • 顯示網頁的內容

  • 如果登入的會員跟在顯示的會員不一樣的話,

  • 移動到"/"「0.0.0.0:3000網頁,顯示

    無效的會員

的設定。
※ 詳細請參考這裡
接下設定網頁的顯示吧。

「edit」網頁的顯示,在app > views > users > edit.html.erb文件裡設定顯示的內容。
編輯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 15 16 <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.number_field :age, :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 messages users 1 edit 有沒有顯示上面圖像一樣的畫面嗎?

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

在這裡的「update」網頁裡想設定,編輯好了之後
不移動到編輯完成的網頁,而移動到會員編輯的網頁「0.0.0.0:3000/users/1/edit的設定。

在「edit」網頁上點擊「登錄」之後,下面圖像一樣再顯示「edit」的網頁。 Chrome messages users 1 update after 這個是在資料操作的「controller」文件上使用「redirect_to」跟「通知:flash設定。
那麽在app > controllers > users_controller.rb上面設定內容吧。
詳細請參考這裡

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


13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 def edit @user = User.find(params[:id]) if @user.id == current_user.id else redirect_to "/" flash[:alert] = "無效的會員" end end def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "會員資料編輯好了" else redirect_to "/" flash[:alert] = "無效的會員" end end end

這一次也用「if」「else」條件判別(詳細請參考這裡)。
「if」「else」裡面,新設定了

26 27 redirect_to "/users/#{@user.id}/edit" flash[:notice] = "會員資料編輯好了"

的內容。

可以理解,在第27行顯示

會員資料編輯好了

的內容,

但是第28行redirect_to是移動到哪一個網頁呢?
應該可以推測,在這裡移動到「users」資料庫的「edit」網頁吧。

這個「#{@user.id}」跟顯示網頁的「html.erb」

1 <a href="/users/<%= @user.id %>/edit">編輯會員資料</a>

顯示標記的

1 <%= @user.id %>

一樣,顯示資料「@user.id」。
這一次的

1 redirect_to "/users/#{@user.id}/edit"

是在「controller」文件顯示「@user.id」的設定。

可是使用#{@user.id}的顯示,也許覺得有一點奇怪。
「""」裡的這個
#{}
大概可以說是,跟「html.erb」文件
<%= %>
一樣的設定。

如果不用「#{}」的話,「""」裡的「@user.id」的部分不會換成會員的號碼
會移動到0.0.0.0:3000/users/@user.id/edit的網頁。

如果資料操作的文件的「""」裡面使用像「@user」一樣的標記的時候,用「#{}」顯示資料。

 使用「redirect_to」移動到「posts」資料庫的「show」網頁的設定要怎麼設定好呢?


1 redirect_to "/posts/#{@post.id}/edit"

※ 一起點擊「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 messages users 1 update after 有沒有顯示上面圖像一樣的網頁嗎?
接着在0.0.0.0:3000/users/1的網頁看看內容有沒有更改!

最後update.html.erb不用使用了,所以刪除吧。

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


到這裡作好了「message-app」的用戶管理了!
這個章的內容都是複習,應該沒有很難得地方。

從下章,作作看網絡聊天的網站吧!