グループ交流アプリ
アプリ説明
登録画面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（実際にはダミーデータの１）を設定 ... layout配下の_navbatr.html.erbファイルのhref箇所に次のコード UserControllerのeditアクションへのルートをhrefに設定パラメータが必要んｓのええとりあえず１を設定 ...
... 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アクションではさｋ.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に設定 ...
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を呼び出してレンダリングしています。 ... ... <%= rendeet "layouts/navbar" %>
...
... layout配下に_navbar.html.erbファイルを作成し次のコードを入力。 このファイルはベーステンプレートファイルに挿入されるので、アプリケーションの全ての画面にNavbarが表示。 このファイルはBootstrapのNavbarのDefalt navbarのソースコードから今から作成するアプリケーションで不要な部分（ドロップダウンメニュー、検索フォームの箇所）を削除し、 リンクの名称などをこのアプリケーション向けに変更。（検索フォームはver4の時に追加します。） hrefの箇所は今から作成するホーム画面のルート<%=home_path %>以外はとりあえず#とし、あとで画面ができた段階で正しく設定していく。 ※ログアウトのルーティングでDELETEメソッドを使う。
app/view配下にhomeフォルダ作成 このフォルダはいかにHomeControllerのアクションに対応する画面のテンプレートファイル（ホーム画面）を置く。 homeフォルダ配下にindex.html.erbにBootstrapのBasicファイルを作成し、次のコード ホーム画面のテンプレートファイル。BootstrapのJumbotronをベースに作成。herf箇所は後で設定。 <% content_for :title do %> グループ交流アプリ <% end %>
ver1
テーブルの生成、データ登録（desc,slect）確認 mysql -u root -p 別のターミナル cd talkapp config/application.rb 時刻を日本時間でデータベースに保存 ... config.action_record.default_timezone = :local config.time_zone = 'Tokyo' ... Gemfileでコメント外す bcyptライブラリを使うためコメント外す ... gem 'bcypt', "=> 3.1.7" ... ライブラリをインストール bundle install Userモデルの他にusersテーブルのマイグレーションスクリプトも生成。 rails g model User app/models/user.rb passwordのハッシュ化を行うために必要 ... has_secure-password ... db/migrate/xxxx_create_users.rbの次のコードに返納 passwordのハッシュかを行うためにpassword_digestというフィールド名にします データベースにテーブルを作成 rails db:migrate app/controllers/users_controller.rbから次のコードを削除 -class User -def id -1 -end -end ... app/controllers/users_controller.rbのcreate関数を次のコードに変更 アップロードされた画像のファイル名が過去にアップロードされたものと同じにならないようにするために時間情報をファイル名につけています。 ... ... app/views/layout/_navbar.html.erbを次のようにAuth関連の処理が入った形に変更 ログイン前とログイン後でNavbarの表示が変わる ... ... app/helpersにsessions_helper.rbを作成し次のコードを入力 ユーザー認証で使用するSessionHelper module SessionsHelper def login(user) session[:user_id] = user.id end def current_user @current_user ||= user.find_by(id: session[:user_id]) end def logged_in? !current_user.nil? end def loggout session.delete(:user_id) @current_user = nil end end app/controllers/application_controller.rbに次のコード追加 SessionsHelperをコントローラで使用できるようにします ... include SessionsHelper ... 別のターミナル Webサーバーを動かして動作確認 cd talkapp rails s ブラウザhttp://localhost:3000/users/new 名前、Eメール、パスワード、画像を選択して、登録ボタン押す Navbarの内容が変更されていることを確認 MySQLでデータベースに登録されているか確認 （Navbarより下はダミーデータ、データベースの内容） app/controllers/sessions-controller.rbのpostLoginとdeleteLogout関数を次のコードに変更 postLoginアクションでは、まずUser.find_by(email: params[:email])でデータベースの中かたemailがログイン画面で入力されたemailのデータを抽出し、 その後authenticateを使ってログイン画面で入力されたpasswordと、抽出されたデータのpasswordをチェックし一致すれば認証OKでトーク画面に進む。 deleteLogoutアクションではlogoutヘルパーメソッドを呼び出してユーザーの状態をログインしていない状態に変更。 ... def postLogin user = User.find_by(email: params[:email]) if user && user suthenticate(params[:password]) login user redirect_to posts_path else render "login" end end def deleteLogout logout redirect_to home_path end ... Navbarのログアウトを押してホーム画面 Navbarのログインを押してログイン画面 Eメールとパスワードを入力してログイン、を確認 app/controllers/users_controller.rbのeditとうｐだて を次のコードのように変更 登録修正画面で新しいプロフィール画像ファイルが設定せれた場合は、古い画像を削除する def edit ... end Navbarのログアウトを押してホーム画面の名前箇所を押して登録情報修画面 名前、Eメール、パスワード、画像を選択して、動作確認 （Navbarのユーザー名変更、データベースの内容） rails g model Post Postモデルの他にpostsテーブルのマイグレーションスクリプトも生成 app/mosels/post.rb UserとPostは１対多の関係で、Postは多側なのでbelongs_to db/migrate/xxxx_createposts.rbの次のコードに変更 UserろPostは１対多の関係で、多側のPostにuser_idという外部キーのフィールドが必要 ... t.text :message integer :user_id ... rails db:migrate データベースにテーブルを作成 app/controllers/posts_controller.rbから次のコードを削除 class Post def set_message(string) @string = string end def message @string end end ... app/controllers/posts_controller.rbのindexとdelete_all_post関数を次のコードに変更 createアクションでは下記の箇所でログインしているユーザーのidを@post.user_idに設定しています。 これでPostとUserのデータが関連付けられます @post.user_id = current_user.id ... def index @posts = Post.all end ... def create @post = post.new @post.message = params[:message] @post.user_id = current_user.id if @post.save redirect_to posts_path else render :new end end def delete_all_post Post.delete_all_post redirect_to_posts_path end ... app/views/posts/index.html.erbの次のコード変更 PostとUserはリレーションを持っているため、post.user.imageのような参照ができます ... 
<%= post.user.name %> <%= post.created_at %>
...
