画面遷移  ver0

ホーム画面作成
登録画面、登録修正画面作成
メッセージ作成画面、トーク画面作成
ログイン画面作成

------------------------

mysql -u root -p

create database talkapp DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
grant all privilleges on talkapp.* to ken@localhost identified by 'pass123'

talkappというデータベースを作成するとともに、pass123というパスワードでログインしてきたkenとういユーザーにtalkappというデータベースのすべてのリソースに
アクセスできる権限を与えています。
データベースで日本語などのマルチバイト文字を使用する場合は、文字コードを正しく設定しないとエラーが発生すつ場合もあります。
CHARACTER SETやCOLLATEを設定してデータベースの作成。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
CHARACTER SETやCOLLATEの設定

データベースが存在しなければ作成する　:IF NOT EXISTS
CREATE DATABASE IF NOT EXISTS データベース名;
デフォルトの文字コードを指定する　:CHARACTER SET
CREATE DATABASE データベース名 DEFAULT CHARACTER SET 文字コード;
データベース照合順序を指定する:CLLATE
CREATE DATABASE データベース名 COLLATE 照合順序;

http://uxmilk.jp/12421
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
別のターミナルを開く
rails new talkapp -d myaql
talkappというアプリケーションを新規作成。
データベースをMySQL指定-d mysql。

cd talkapp

config/database.yml次のコードを変更
MySQLコマンドで設定値を設定し、データベースの準備。
先ほど作成したデータベース、ユーザー名、ユーザーパスワード、test用の設定をしないコメントアウトをしています。
...
username: ken
password: pass123
...
database: talkapp
...
#xxxx
#xxxx
#xxxx

app/assets/stylesheets配下にmystylee.cssを作成。
アプリケーションの背景設定、ログアウトボタンとメッセージ作成ボタンの位置調整のためのclasss定義。
body {
  background-color: lightgreen;
}

.btn-space-8{
  margin-top: 8px;
}

.btn-space-30 {
  margin-top: 30px;
}

app/views/layout配下のapplication.html.erbを次のコードに変更
このアプリケーションのすべての画面のベースとなるテンプレートファイル。
既存のapplication.html.erbにBootstrapのBasic templateやBootstrap CDNコードを追加して、
Bootstrapが使えるようにするとともに、部分テンプレート（パーシャル）として別ファイルとして存在している
_navbar.html.erbを呼び出してレンダリングしています。
...
<meta name="" content="">
<link rel=""
href=""

integrity=""
crossorigin="">
<title><%= yield :title %></title>
...
<%= rendeet "layouts/navbar" %>
<div class="container">
...
</div>
<script
src=""></script>
<script
src=""
integrity=""
crosssrigin=""></script>
...

layout配下に_navbar.html.erbファイルを作成し次のコードを入力。
このファイルはベーステンプレートファイルに挿入されるので、アプリケーションの全ての画面にNavbarが表示。
このファイルはBootstrapのNavbarのDefalt navbarのソースコードから今から作成するアプリケーションで不要な部分（ドロップダウンメニュー、検索フォームの箇所）を削除し、
リンクの名称などをこのアプリケーション向けに変更。（検索フォームはver4の時に追加します。）
hrefの箇所は今から作成するホーム画面のルート<%=home_path %>以外はとりあえず#とし、あとで画面ができた段階で正しく設定していく。
※ログアウトのルーティングでDELETEメソッドを使う。
<nav class="navbar navbar-inverse">
  <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" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<%= home_path %>">ホーム</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="<%= posts_path %>">トーク画面</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<%= edit_user_path(:id => 1) %>">Testさんようこそ</a></li>
        <li>
          <form action="<%= logout_path %>" method="post">
            <input name="_method" type="hidden" value="DELETE">
            <button type="submit" class="btn btn-link btn-space-8">ログアウト</button>
            <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
          </form>
        </li>
        <li><a href="<%= login_path %>">ログイン</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

app/view配下にhomeフォルダ作成
このフォルダはいかにHomeControllerのアクションに対応する画面のテンプレートファイル（ホーム画面）を置く。
homeフォルダ配下にindex.html.erbにBootstrapのBasicファイルを作成し、次のコード
ホーム画面のテンプレートファイル。BootstrapのJumbotronをベースに作成。herf箇所は後で設定。
<% content_for :title do %>
グループ交流アプリ
<% end %>

<div class="jumbotron">
<h1>グループ交流アプリ</h1>
<p>アプリ説明</p>
<a class="btn btn-primary" href="a">登録画面</a>
</div>

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メソッドを疑似的に実現するために以下の行が追加
<input name-" _method" tyoe=" hidden" value=" PUT">
formタグのaction属性にUsersControllerのupdateアクションへのルートを設定
パラメータが必要なのでコントローラから受け取った@user.id（実際にはダミーデータの１）を設定
...

layout配下の_navbatr.html.erbファイルのhref箇所に次のコード
UserControllerのeditアクションへのルートをhrefに設定パラメータが必要んｓのええとりあえず１を設定
...
<li><a href="<%= edit_user_path(:id => 1) %>">Testさんようこそ</a></li>
...

app/views/home配下のindex.html.erbファイルのhref箇所を次のコード
UserControllerのnewアクションへのルートをhrefに設定
<a class="<btn btn-primary>" href="<%= new_user_path %>" role="button">登録画面へ</a>

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に設定
...
<li><a herf="<%= posts_path %>">トーク画面</a></li>
...

app/controller配下にposts_controller.rbを作成し次のコード
indexアクションではPostクラスを使ってダミーの投稿データ(messageのみ)を作成
この処理は後でモデルを実装する際に削除
ダミーデータ(messageのみ)はビューに渡されトーク画面で表示
newアクションではさｋ.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に設定
...
<form action="<%= input_path %>" method="post">
...
<li><a href="<%= login_path %>"></li>
...

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箇所を次のコードに変更
...
<form action="<%= delete_all_post_path %>" methd="post">
...

config/routes.rbに次のコード追加
postControllerのdelete_all_postアクションにルート定義
...
post 'delete_all_post' => 'post#delete_all_post'
...