Posted at

画面遷移 ver0

More than 1 year has passed since last update.

ホーム画面作成

登録画面、登録修正画面作成

メッセージ作成画面、トーク画面作成

ログイン画面作成


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を呼び出してレンダリングしています。

...



<link rel=""

href=""

integrity=""

crossorigin="">

<%= yield :title %>

...

<%= rendeet "layouts/navbar" %>




...







...

layout配下にnavbar.html.erbファイルを作成し次のコードを入力。

このファイルはベーステンプレートファイルに挿入されるので、アプリケーションの全ての画面にNavbarが表示。

このファイルはBootstrapのNavbarのDefalt navbarのソースコードから今から作成するアプリケーションで不要な部分(ドロップダウンメニュー、検索フォームの箇所)を削除し、

リンクの名称などをこのアプリケーション向けに変更。(検索フォームはver4の時に追加します。)

hrefの箇所は今から作成するホーム画面のルート<%=home_path %>以外はとりあえず#とし、あとで画面ができた段階で正しく設定していく。

※ログアウトのルーティングでDELETEメソッドを使う。











Toggle navigation









<a class="navbar-brand" href="<%= homepath %>">ホーム




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を設定

...

<a href="<%= edit
user_path(:id => 1) %>">Testさんようこそ

...

app/views/home配下のindex.html.erbファイルのhref箇所を次のコード

UserControllerのnewアクションへのルートをhrefに設定

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に設定

...

<a herf="<%= posts
path %>">トーク画面

...

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に設定

...

<form action="<%= input
path %>" method="post">

...


" methd="post">

...

config/routes.rbに次のコード追加

postControllerのdelete_all_postアクションにルート定義

...

post 'delete_all_post' => 'post#delete_all_post'

...