WDA-Slides-06.pptx

Size: px

Start display at page:

Download "WDA-Slides-06.pptx"

けいざぶろういせき
5 years ago
Views:

1 WEB+DB システム ( 応用編 ) 第 6 回 (2016 年 10 月 27 日 ) Main Controller の構造とメニュー分岐及びテスト

2 Web プログラミングの基本は? p 1: ブラウザに HTML で画面を表示する p 2: ブラウザからのリクエストを受け取る p 3: パラメータを処理してリスポンスを返す p この 1 3 に視点を置いたプログラムの読み方 n 画面上のどこに何を表示し何を入力させるか n 画面上で入力された何をどこで受け取るか n 処理した結果をどのように画面に埋め込むか p この三つを理解すれば読めることになる n 今日はこの三つを理解しよう!

3 TDD の進め方都合により 1 回先送りして入れ替えました元々の予定 : Capybara を用いた画面入力のテストとモデルのテストなどを追加していきますまた Contoller で一通りすべてのメソッドのテストが実行できるように追記していきます

4 今日やること流れをトレースしながら前期の画面分割を行います memopad で実施した多国語化も行います ( これらは復習になります ) 画面でのリンクのクリックから controller がどのように処理してどう画面を切り替えて行くか role を参照しながら画面アクセスの切り替えを調べ実装して行きますこのため role ごとのメニューを用意します

5 多国語化で修正するファイル群 app/controllers/application_controller.rb config/initializers/i18n.rb config/locales/en.yml config/locales/ja.yml ( 第 1 回スライド参照 )

6 画面分割で修正するファイル群 app/assets/stylesheets/scaffold.scss app/assets/images/title_en.gif( 任意 ) app/assets/images/title_ja.gif app/helpers/application_helper.rb app/views/layouts/application.html.erb app/views/shared ( 新規に作成する ) app/views/shared/_menu_bar.html.erb app/views/shared/_right_bar.html.erb app/views/shared/_footer.html.erb

7 View: index.html.erb p ブラウザで URL を指定するとまず index という名前のファイルが探される n index.htm, index.html, index.cgi, index.php n index.jsp, index.asp など p ここでもまず index.html.erb から調べる p その前に p app/views/layouts/application.html.erb p がすべてに共通する画面の構造となる

8 app/views/layouts/application.html.erb yield の部分に個別の index.html.erb がはめ込まれる

9 app/assets/stylesheets/scaffold.scss p 以下の内容を書き加えてみる div#container{ background-color: white; margin: 0 auto; padding: 5px 0 0; width: 800px; } div#header { padding-top: 4px; border-top: 4px solid white; } div#left { float: left; background-color: white; padding: 6px 6px 6px 0; } div#right { float: right; width: 228px; background-color: #e8ffff; } div#footer { background-color: white; border-top: 2px lightgreen solid ; text-align: center; clear: both; width: 100%; } div#menu_bar{ color: black; }

10 前期に行った screen 分割を試す前期第 5 回のスライドを参照します views/sharedのフォルダを作る sharedの下に _menu_bar.html.erbを置く ( 新規作成 : 前期第 4 回 : スライドP31 P60) タイトルバナーに画像を出してみる ( 前期第 4 回 : スライドP32) 宿題として各自試してみて下さい以下実装済みの画面を提示します

11 views/layout/application.html.erb

' %> <% else %> <%= image_tag 'title_en.

12 views/layout/application.html.erb 画面の分割 ( 前期第 4 回 ) <body> <div id="container"> <div id="header"> <% if I18n.locale == :ja %> <%= image_tag 'title_ja.gif', :size=>'600x133', :alt => 'Koganei Vegetable Vil.' %> <% else %> <%= image_tag 'title_en.gif', :size=>'600x133', :alt => 'Koganei Vegetable Vil.' %> <% end %> <%= render :partial => 'shared/menu_bar' %> </div> <div id='left'> <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> <%= yield %> </div> <div id='right'> <%= render :partial => 'shared/right_bar' %> </div> <div id='footer'> <%= render :partial => 'shared/footer' %> </div> </div> </body> 言語によって画像を変えるようにしてみました

13 私の用意したサンプル画像

14 予めメニューを作る Viewsの下にsharedフォルダを作成しその下に _menu_bar.html.erb _right_bar.html.erb _footer.html.erb などを作成する ( 前期第 4 回のスライド参照のこと )

$current_user %> <% menu_items = [ { :link => merchandises_path, :name => 'List of merchandises' }, スライドP44 { :link => new_user_registration_path, :name => 'Sign Up' }, { :link =>$ $new_user_session_path, :name => 'Sign In' }, 参照のこと { :link => "", :name => 'About Us', :disabled => true } ] -%> <% else %> <% if current_user.role.$

15 役割に応じたメニューをデザイン <% if!current_user %> <% menu_items = [ { :link => merchandises_path, :name => 'List of merchandises' }, スライドP44 { :link => new_user_registration_path, :name => 'Sign Up' }, { :link => new_user_session_path, :name => 'Sign In' }, 参照のこと { :link => "", :name => 'About Us', :disabled => true } ] -%> <% else %> <% if current_user.role.ename == guest" %> <% menu_items = [ { :link => merchandises_path, :name => 'List of merchandises' }, { :link => "", :name => 'Shopping Cart' }, { :link => "", :name => 'Orders' }, { :link => "", :name => 'About Us', :disabled => true }, { :link => destroy_user_session_path, :name => 'Sign Out', :method => "delete" } ] -%> <% elsif current_user.role.ename == "staff" %> <% menu_items = [ { :link => merchandises_path, :name => 'List of merchandises' }, { :link => new_merchandise_path, :name => 'New Merchandise' }, { :link => "", :name => 'Customer Management' }, { :link => "", :name => 'Order Management' }, { :link => destroy_user_session_path, :name => 'Sign Out', :method => "delete" } ] -%> <% else %> <% menu_items = [ { :link => users_path, :name => 'List Users' }, { :link => "", :name => 'Master Tables Maintenance', :disabled => true }, { :link => destroy_user_session_path, :name => 'Sign Out', :method => "delete" } ] -%> <% end %> <% end %>

16 _menu_bar でのエラー Path が定義されていないと NameError になります rake routes で path を確認し各自の実装状況に合わせて書き換えてください

17 _menu_bar.html.erb の記述 menu_items の定義の下に以下を記述します <div id="menu_bar"> <% menu_items.each_with_index do item, index -%> <% if index > 0 %> <% end -%> <%= menu_link_to item -%> <% end -%> </div>

18 ログインしていない時と設定された role でメニューを分ける <% if!current_user %> <% menu_items = [ ( 省略 ) ] -%> <% elsif current_user.role.ename == guest %> <% menu_items = [ ( 省略 ) ] -%> <% elsif current_user.role.ename == staff %> <% menu_items = [ ( 省略 ) ] -%> <% else %> <% menu_items = [ ( 省略 ) ] -%> <% end %> ログインしていない時のメニュー一般のお客様のメニュー従業員のメニュー Admin ユーザのメニュー Validation で role が 1 3 以外にならないようにする

19 Application_helper #!ruby # coding: utf-8 module ApplicationHelper def menu_link_to( item ) if current_page?( item[:link] ) raw <span class= 'current_page '>" + item[:name] + "</ span>" elsif item[:disabled] raw "<span class= 'disabled '>" + item[:name] + "( 工事中 )</ span>" elsif item[:method] link_to(item[:name], item[:link], :method => item[:method]) else link_to(item[:name], item[:link]) end end end

20 app/helpers/application_helper.rb

21 Right Bar と Footer 現在は仮として入れておきます

22 ここまでで一区切り画面分割と他国語化対応は一区切りとしますただまだ若干問題はあります一般客が他のユーザの権限を編集できる ( 一般客が自分もadminになれてしまう ) 一般客が adminユーザを削除できるこれらへの対応を今後テストからの記述で考えます

23 メニューを整理する一般ユーザが自分を登録する自分のパスワードを変更したい自分のハンドルは変更できるようにしたい管理者がスタッフを含む全ユーザの一覧を見たいスタッフが一般ユーザの一覧を見たいこれらを目的とする画面切り替えをワンタッチで行えるようにするためにメニューに登録する

24 Sign up( 自己登録 ) 直後の動作 Sign Up 後 user_root( ホーム画面 = merchandises の index) に飛びますところが Devise 管理ではとパスワード以外の role やハンドル名が登録されていませんそこで merchandises_controller の index アクションでユーザの編集にリダイレクトします後ほど一般ユーザは自分の role を変更できないように修正します

ログインまでの流れ ( 復習 ) config/routes.rb で root :to => welcome#index を記述したそのためドメインルートの http://0.0.0.0:3000/ を指定するとまず app/views/welcome/index.

25 ログインまでの流れ ( 復習 ) config/routes.rb で root :to => welcome#index を記述したそのためドメインルートのを指定するとまず app/views/welcome/index.html.erb が表示される同様に get merchandises', :to => merchandises#index', :as => :user_root を記述したため merchandises#index が :user_root となる

26 ログイン後の TOP ページ get 'merchandises', :to => 'merchandises#index', :as => :user_root を記述したため merchandises#index が :user_root となる app/controllers/welcome_contrlller.rb はドメイントップのコントローラになるがログイン後 (current_user が設定された後 ) は redirect_to :user_root で :user_root すなわち merchandises#index にリダイレクトされる

27 app/controllers/ merchandises_controller.rb index アクションに以下のように追記する # GET /merchandises # GET /merchandises.json def index if current_user if!current_user.handle current_user.handle = "No Name" current_user.save redirect_to :controller=>"users", :action=>"edit", :id=> current_user.id return end = Merchandise.all end

28 app/controllers/ merchandises_controller.rb

29 ユーザ登録直後の動作 2 段階になるけれどもこの修正で devise によるユーザ登録直後にアプリからのユーザ登録が行われて不自然な動作ではなく登録ができるはずです他にも実装方法はあると思います慣れてきたら各自工夫してみてください

30 メニューへの登録方法コマンド : rake routes でルーティングのテーブルを確認する URL controller ( view) Path を見ながらそれぞれの role ごとのメニューについてこちらも各自工夫してみてください

31 スタッフ用ページと一般ページ Welcome#index から一般ページをそのまま開くようにする merchandises_controller.rb( 商品の表示ページ ) には before_filter :authenticate_user! を記述していないこのためこのページは一般ページとしてログインしなくても誰もが表示することができる今回の設計としては Welcome 画面にスタッフ入口へのリンクを埋め込むものとしその Action に認証要求を組み込む

32 全体指定と個別指定 Controller 内部のメソッド全てに共通するパラメータの場合には before_filter :authenticate_user! のようにメソッド定義の外部 (Class の先頭部分 ) に記述します Action ごとに個別指定する場合には authenticate_user! のメソッドを呼び出します

33 認証要求のタイミングログイン認証がいつ要求されるかは before_filter :authenticate_user! の記述がある controller を最初に開こうとした時点スタッフの場合にはスタッフ用入口からの Action 実行で認証を要求する一般客はショッピングカートに商品を入れ精算に進んだ先の画面で認証を要求するこのタイミングは devise に任せるプログラマはそれぞれのタイミングで authenticate_user! を埋め込めば良い

34 Welcome 画面の改造 Welcome#index にメニューでジャンプ先を登録する二つのリンクを埋め込む Welcome to Vegetable Market: Jump to a Shopping Mall( 画像から ) Staff Entrance( リンクボタン )

$jpg', { :border => '0', :size => '300x200', :alt => ' 商品一覧 '}), merchandises_path %><br /> <%= t :staff_entrance %> ==> <%= link_to (t$

35 私の作った Entry 画面の例 app/views/welcome/index.html.erb <%= link_to image_tag('pumpkin2.jpg', { :border => '0', :size => '300x200', :alt => ' 商品一覧 '}), merchandises_path %><br /> <%= t :staff_entrance %> ==> <%= link_to (t :click_here ), staff_entry_path %> 画像の表示はこちらに書いても構いません

36 Welcome 画面

37 Config/routes.rb ルーティングテーブルに追加 get 'welcome/staff_entry', :to => 'welcome#staff_entry', :as => :staff_entry URL は welcome/staff_entry Welcome コントローラの staff_entry メソッドで処理する別名として staff_entry をつけるこれを ruby のプログラムから呼び出すときは staff_entry_path と記載する ( 一つ前のスライド )

38 staff_entry アクションを用意スタッフ入口では認証要求を行い index 画面に切り替える App/controllers/welcome_controller.rb def staff_entry authenticate_user! if current_user redirect_to :user_root else redirect_to :root end end

39 app/controller/ welcome_controller.rb

40 画面表示のための辞書を用意メニューその他から多国語化したい辞書の見出し語を用意する welcome_top: Welcome to Koganei Vegetable Market! staff_entrance: Staff Entrance click_here: Click Here list_merchandises: List of Merchandises sign_up: Sign Up sign_in: Sign In sign_out: Sign Out about_us: About Us! shopping_cart: Shopping Cart orders_list: List of Orders new_merchandises: New Merchandises customer_service: Customer Service order_management: Order Management list_users: List of Users master_table_maintenance: Master Table Maintenance

41 画面表示のため辞書を用意 ja.yml や en.yml を作成する

42 Ja.yml ja: welcome_top: 小金井野菜むらへようこそ! staff_entrance: スタッフ専用入り口 click_here: ここをクリック! list_merchandises: 商品一覧 sign_up: 自己登録 sign_in: ログイン sign_out: ログアウト about_us: 当サイトについて shopping_cart: ショッピングカート orders_list: 注文一覧 new_merchandises: 新規商品登録 customer_service: 顧客サービス order_management: 注文管理 list_users: ユーザ一覧 master_table_maintenance: マスター管理

43 実装例スタッフ用メニュースタッフ用処理選択画面を用意しこの画面でログイン認証を求める (devise に任せる ) (1) 商品一覧顧客と同様に登録済みの商品一覧を表示 (2) 新規商品の追加いきなり商品追加を行う (3) 顧客管理 (4) 注文処理 (5) ログアウト

44 実装例管理者用メニュー管理者用処理選択画面を用意しこの画面でログイン認証を求める (devise に任せる ) (1) 登録ユーザ一覧管理者だけがユーザの role を変更出来る (2) マスターメンテナンスよくある管理機能これ以外は必要に応じて実装する

45 Authentication ページへのアクセスを role によって制限するようにしていきますメソッドとして application_helper.rbに allow_to_admin_user_only と allow_to_shop_clerk_only とを準備します

46 Application_helper #!ruby # coding: utf-8 module ApplicationHelper def menu_link_to( item ) ( 省略 ) end def allow_to_admin_user_only if!current_user current_user.role.ename!= "admin" redirect_to :user_root return end end def allow_to_shop_clerks_only if!current_user current_user.role.ename!= "staff" redirect_to :user_root return end endend

47 今日の修正はここまで allow_to_admin_user_only メソッドや allow_to_shop_clerks_only メソッドなどを書く

48 次のステップ Capybara による画面入力のテストを書き本日作成した allow_to_admin_user_only や allow_to_shop_clerks_only などが機能するかテストを通していきますボリュームが大きくなったため一旦ここまでで区切ります

49 今日のまとめ p View と Controller との連係動作についてまとめた p 最初に Controller 経由で特定の画面を呼び出しそこでユーザに値の入力などを求め controller に値を返して保存したり計算処理するという一連の流れを辿った

50 今日のレポート課題レポート課題はありません

51 今日の欠席課題 Role の異なる 3 名のユーザを登録して下さい Role によってメニューが異なることを確認して下さい

52 Rspec/Capybara 入門来週の教材は以下のサイトを参照します rspec_capybara_primer.html テストには強力なツールです事前に目を通しておいてもらうと良いと思います

WDI-Slides-04.pptx

WDI-Slides-04.pptx WEB+DB システム ( 入門編 ) 第 4 回 (2016 年 4 月 28 日 ) HTML と CSS 今日のテーマ p HTML(Hyper Text Markup Language) を読む p CSS(Cascading Style Sheet) の使い方を理解する p 画面の修飾記述方法を調べる n タグについて学ぶ p HTML+CSS で WEB 画面を記述する方法について実際に試し