Mugcup(基礎編)的複習:設定一覽

Mugcup(基礎編)的複習

Coffeecup header1

0 : 這個章的複習

 看「Mugcup(基礎編)的複習」的設定一覽


1 : 設定一覽

在「Mugcup(基礎編)的複習」設定了

  • 作剛開始的「message-app」的網站
  • 作主頁「0.0.0.0:3000
  • Bootstrap
  • devise

這個4個設定,作「message-app」網站。


在這裡複習學的內容。

  • 作「message-app」

  • 剛開始,用terminal作「message-app」。打入

     terminal
     使用Windows的話,用「命令提示符」。
    1 2 cd Desktop cd rails_project

    移動到「rails_project」之後,


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


    在這個「rails_project」文件夾裡作「message-app」剛開始的網站。

     terminal
    1 rails new message-app -d mysql

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

     命令提示符
    1 rails new message-app



    完了之後做工具(gem)的設定跟導入

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

    接着做資料庫的準備
    「資料庫的準備」是,在terminal打入下面的命令。

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

    這樣作好了message-app_development」的資料庫了。

  • 作主頁

  • 為了作主頁的設定文件,打入下面的命令。

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

    使用這個命令作好的設定文件
    • 操作資料的設定文件「app > controllers > welcome_controller.rb
    • 顯示網頁的設定文件「app > views > welcome
    裡追加設定。

    首先在「route.rb」設定「七個網頁中使用的網頁」

     route.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

    操作資料在app > controllers > welcome_controller.rb裡面設定。

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


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

    網頁顯示,在app > views > 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>

    接着在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; }

    最後追加「Bootstrap」的設定。

     terminal
    1 rails g bootstrap:install

     使用Windows的話,請參考這裡導入Bootstrap。

  • Bootstrap

  • application.html.erb裡設定,使用Bootstrap的遊覽列・navigation-bar的顯示。

     application.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 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>

    追加這個內容,再追加CSS的設定。

     style.scss
    ※ 用半母字母數字打入。一起點擊「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; }

  • devise

  • 首先從「devise」的安裝開始做。

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

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

    編輯,用這個打入作好的db > migrate > 日子_devise_create_users.rb的內容。

     日子_devise_create_users.rb
    ※ 用半母字母數字打入。一起點擊「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

    編輯好了之後,為了適用內容打入

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

    的內容。

    做好了之後,為了設定顯示的內容打入下面的內容。

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

    在這個打入作好的
    • 註冊網頁「app > views > devise > registrations > new.html.erb
    • 登入網頁「app > views > devise > sessions > 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" %>

    登入的網頁「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" %>

    為了調整輸入框的長度,追加CSS的設定。

     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{ /* 以下省略 */

    接着,追加遊覽列・navigation-bar的設定通知:flash

     application.html.erb(追加第24〜28行跟第36〜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 46 47 48 <!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"> <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div> </body> </html>

    最後作了「users」資料庫的網頁了。首先作設定文件。

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

    在這裡作好的
    • 操作資料的文件「app > controllers > users_controller.rb
    • 顯示網頁的文件夾「app > views > users
    裡追加設定。

    app > views > users」文件夾裡,保存「show.html.erb」「index.html.erb」「edit.html.erb」文件(保存的方法請參考這裡)。
     首先在route.rb裡追加「七個網頁的設定」。

     route.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

     接著在app > controllers > users_controller.rb追加操作資料的設定。

     users_controller.rb
    ※ 用半母字母數字打入。一起點擊「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 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 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

     最後在「app > views > users」文件夾裡的文件,設定網頁的顯示。

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

     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>

     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>