読者です 読者をやめる 読者になる 読者になる

グループ交流アプリ

アプリ説明

登録画面

app/controllers配下にhome_controller.rbを作成し次のコード。 HomeControllerのindexアクションはホーム画面(index.html.erb)を表示するだけなので処理は省略。 (ビューの処理はRailsアクションと同じ名前かた始まるテンプレートを表示する処理を裏で行ってくれるので省略) class HomeContrlller < ApplicationController def index end end config/routes.rbを作成し次のコード。 ブラウザhttp://localhost:3000,http://localhost:3000/homeと入力するとviews/home配下のindex.html.erbが表示。 Rails.application.routes.draw do get 'home' => 'home#index' root 'home#index' end rails s Webサーバーを動かして動作確認 http://localhost:3000 app/views配下にusersフォルダ作成 このフォルダ配下にUsercontrollerアクションに対応する画面テンプレートファイルを置く。 users配下にnew.html.erbファイルを作成し、次のコード 登録画面のテンプレートファイル BootstrapのFormsのBasic exampleをベースに作成 formタグにaction,method,enctype属性を追加。acton属性にUsercontrollerのcreateアクションのルート設定。enctype属性はファイルアップロードを行うとき必要。 inputタグname属性を追加。name属性はコントローラと連携するために必要 コントローラのアクションではname属性を使ってフォームの入力データを取得。 CFRF対策のため、<%=hidden_field_tag :authenticity_token, form_authenticity_token %>も必要なので追加。 ... users配下にedit.html.erbファイルを作成し次のコードを入力。 登録情報修正外面のテンプレートファイル BootstrapのFormsのBasic exampleをベースに作成 登録画面とほぼ同じですが、PUTメソッドを疑似的に実現するために以下の行が追加 formタグのaction属性にUsersControllerのupdateアクションへのルートを設定 パラメータが必要なのでコントローラから受け取った@user.id(実際にはダミーデータの1)を設定 ... layout配下の_navbatr.html.erbファイルのhref箇所に次のコード UserControllerのeditアクションへのルートをhrefに設定パラメータが必要んsのええとりあえず1を設定 ...

... app/views/home配下のindex.html.erbファイルのhref箇所を次のコード UserControllerのnewアクションへのルートをhrefに設定 登録画面へ app/controllers配下にusers_controller.rbを作成し次のコード。 class UserController.rbを作成し次のコード。 newアクションでは先ほど作成したnew.html.erbを表示 createアクションではすでに存在しているホーム画面に推移するような暫定的処理 editアクションではダミーのUserを作成、Userデータ(id-1のみ)をビューに渡す。 ダミー処理は後でモデルを実装する際に削除。ビューでは先ほど作成したedit.html.erbを使用 updateアクションでもすでに存在しているホーム画面に推移するような暫定的処理。 class User def id 1 end end calss UserController < ApplicationController def new end def create redirect_to home_path end def edit @user = User.new end def update redirect_to home_path end end config/routes.rbを作成し次のコード リソースベースのルート定義を使ってUsrscontrollerの各アクションのルートを設定。 Rails.application.routes.draw do get 'home' => 'home#index' root 'home#index' resources :users end ブラウザhttp://localhost:3000/users/new,http://localhost:3000/users/1/edit public配下にimagesフォルダを作成し、test.jpgを置く app/views配下にpostsフォルダを作成 このフォルダ配下にPostControllerアクションに対応する画面のテンプレートファイルを置く post配下にnew.html.erbファイルを作成し次のコードを入力。 メッセージ作成画面のテンプレートファイルBootstrapのFormsのBasic exampleをベースに作成 formタグにaction,method属性を追加。action属性にPostsContorllerのcreateアクションのルート設定 inputタグに name属性追加。name属性はコントローラと連携するため必要。コントローラのアクションではname属性を使ってフォームの入力データを取得。 CSRF対策のため<%= hidden_filed_tag :authenticity_token,form_authenticity_token %>も必要なので追加。 ... posts配下にindex.html.erbファイルを作成し、次のコード トーク画面のテンプレートファイルBootstrapのmedia objectをベースにボタンなどを追加。 上部の削除ボタンの処理やルート定義は最後に行う。 imageフォルダのtest.jpgをMedia objectの画像に設定。 ... layout配下の_navbatr.html.erbファイルのhref箇所を次のコードのように変更 PostControllerのindexアクションへのルートをhrefに設定 ...

... app/controller配下にposts_controller.rbを作成し次のコード indexアクションではPostクラスを使ってダミーの投稿データ(messageのみ)を作成 この処理は後でモデルを実装する際に削除 ダミーデータ(messageのみ)はビューに渡されトーク画面で表示 newアクションではさk.html.erbを表示 createアクションではトーク画面に推移 ... ... ... app/controllers配下のuser_controller.rbのredirect_toの宛先を次のコートに変更 createアクションとupdateアクションの推移先トーク画面に変更 ... redirect_to posts_path ... redirect_to posts_path ... config/routes.rbに次のコードを追加 リソースベースのルート定義を使ってPostControllerの各アクションのルートを設定 ... resources :posts ... ブラウザhttp:localhost:3000/posts/new,http://localhost:3000/posts app/views配下にsessionsフォルダ作成 このフォルダ配下にSessionsControllerのアクションに対応する画面のテンプレートファイルを置く Session配下にlogin.html.erbファイルを作成し、次のコード ログイン画面のテンプレートファイルBootstrapのFormsのBasiv exapleをベース formタグにaction,method属性を追加。action属性にPostsContorllerのcreateアクションのルート設定 action属性にSessionsControllerのpostloginアクションへのルート設定 inputeタグにname属性を追加name属性はコントローラと連携するために必要 コントローラのアクションではname属性を使ってフォームの入力データを取得。 CSRF対策のため<%= hidden_field_tag :authenticity_token,form__authenticity_token %>必要 ... layout配下に_navbar.html.erbファイルのactionとhref箇所に次のコード SessionControllerのdeleteLogoutとgetLoginアクションへのルートをactionとhrefに設定 ...

 

...... app/controllers配下にsessions_controller.rbを作成し次のコード getLoginアクションでは先ほど作成したlogin.html.erbを表示 postLoginアクションではトーク画面に推移 deleteLogoutアクションではホーム画面に推移 ... ... ... config/routes.rbに次のコードを追加 SessionControllerの各アクションルート定義を行う get 'login' => 'sessions#getLogin' post 'login' => 'sessions#postLogin' delete 'logout' => 'sessions#deleteLogout' ブラウザhttp:localhost:3000/login app/controllers配下のposts_controller.rbにつぎ トーク画面の削除ボタンを押したとき呼ばれるアクション追加 def delete_all_post redirect_to_post_path end post配下のindex.html.erbファイルのaction箇所を次のコードに変更 ... ... config/routes.rbに次のコード追加 postControllerのdelete_all_postアクションにルート定義 ... post 'delete_all_post' => 'post#delete_all_post' ...