Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@A-Like

画面遷移 ver0

Posted at

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

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

integrity=""
crossorigin=""> <%= yield :title %> ... <%= rendeet "layouts/navbar" %>
...
...

layout配下に_navbar.html.erbファイルを作成し次のコードを入力。
このファイルはベーステンプレートファイルに挿入されるので、アプリケーションの全ての画面にNavbarが表示。
このファイルはBootstrapのNavbarのDefalt navbarのソースコードから今から作成するアプリケーションで不要な部分（ドロップダウンメニュー、検索フォームの箇所）を削除し、
リンクの名称などをこのアプリケーション向けに変更。（検索フォームはver4の時に追加します。）
hrefの箇所は今から作成するホーム画面のルート<%=home_path %>以外はとりあえず#とし、あとで画面ができた段階で正しく設定していく。
※ログアウトのルーティングでDELETEメソッドを使う。

Toggle navigation ホーム

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

グループ交流アプリ

アプリ説明

登録画面

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に設定パラメータが必要んｓのええとりあえず１を設定
...

Testさんようこそ ...

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

... ...

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'
...

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?