railsアプリケーションを作る

rails new testapp

 

railsアプリケーションを起動

rails server

 

モデルを作る (単数系で頭を大文字 e.g. Project )

rails generage model Project title:string

 

データベースに反映

rake db:migrate

 

データベースの確認

rails db
sqlite > .shema

sqlite> select * from projects;

 

rubyコンソール
rails console
>p=new Project(title:”p1″)
>p.save()

>Project.create(title:”p2″)

>Project.all

>exit

 

コントローラーを作る

rails g controller Projects        ※モデルは複数形で指定する事

      create  app/controllers/projects_controller.rb

      create    app/views/projects

 

ルーティング設定をする
config/routes.rbにmodelを追記

Rails.application.routes.draw do

resources :projects

 

ルーティングを反映する
→ new/delete等のURLが作成される。

rake routes

Prefix Verb URI Pattern Controller#Action
projects GET /projects(.:format) projects#index
POST /projects(.:format) projects#create
new_project GET /projects/new(.:format) projects#new
edit_project GET /projects/:id/edit(.:format) projects#edit
project GET /projects/:id(.:format) projects#show
PATCH /projects/:id(.:format) projects#update
PUT /projects/:id(.:format) projects#update
DELETE /projects/:id(.:format) projects#destroy

 

 

モデルのデータ一覧
インデックスアクションを作る

  • コントローラーに下記の関数を追加

def index
@projects = Project.all
end

  • viewを追加(index.html.erb)

<h3>Projects</h3>
<ul>
<% @projects.each do |prj| %>
<li><%= prj.title %></li>
<% end%>
</ul>

 

 URLルートを設定する

config/routes.rbに追記する。

root ‘projects#index’

 

Viewの共通テンプレート

このファイルを変更する
app/views/layout/application.html.erb

<%= yield %> ユーザーのviewがここに展開される

 

  • イメージタグをつける

assets/image/xxx.png

<%= image_tag “xxx.png” %>

 

  • スタイルシートの共通設定を変更する

assets/stylesheets/application.css

<%= link_to “home”, “/” %>
<%= link_to “home”, projects_path %>
<%= link_to “new”, new_project_path %>

このprojects_pathは、「rake routes」のPrefixのところに「_path」をつけたもの

Prefix Verb URI Pattern Controller#Action
projects GET /projects(.:format) projects#index
POST /projects(.:format) projects#create
new_project GET /projects/new(.:format) projects#new
edit_project GET /projects/:id/edit(.:format) projects#edit
project GET /projects/:id(.:format) projects#show
PATCH /projects/:id(.:format) projects#update
PUT /projects/:id(.:format) projects#update
DELETE /projects/:id(.:format) projects#destroy

 

詳細表示画面を追加する 

コントローラーにアクションを追加する。

rake routesのときにログからurl取得

 

Prefix Verb URI Pattern Controller#Action
projects GET /projects(.:format) projects#index
POST /projects(.:format) projects#create
new_project GET /projects/new(.:format) projects#new
edit_project GET /projects/:id/edit(.:format) projects#edit
project GET /projects/:id(.:format) projects#show
PATCH /projects/:id(.:format) projects#update
PUT /projects/:id(.:format) projects#update
DELETE /projects/:id(.:format) projects#destroy

 

class ProjectsController < ApplicationController

def index
@projects = Project.all
end

    def show
        @projects = Project.find(params[:id])
    end
end

 

 対応するViewを作成「show.html.erb」

<h3><%= @project.title %></h3>

 

送信フォームを作る

html

<li><%=link_to “add new”, new_project_path %></li>

controller

def new
@project = Project.new
end

def create
@project = Project.new(project_params)
@project.save

redirect_to projects_path
end

private

def project_params
params[:project].permit(:title)
end

 

view

<%= form_for @project do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>

 

 

フォームの入力制限を行う。

model

class Project < ActiveRecord::Base

validates :title, presence: true
end

 

フォームの入力制限を行う。エラーメッセージ付き

validates :title, 

presence: { message: “入力してください” },
length: {minimum: 3, message: “短いです” }

 

presence: trueは、必須項目にするの意

def create
@project = Project.new(project_params)
if @project.save
redirect_to projects_path   ←セーブ成功
else

render ‘new’        ←セーブ失敗
end

 

view 

<%= form_for @project do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
<% if @project.errors.any? %>
#<%= @project.errors.inspect %>     エラー表示
<% end %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>

 

フォームの共通化(パーシャル)

new.html.erb / edit.html.erb 

<%= render ‘form’ %>

 

view

_form.html .erbを作成し、共通フォームを作成

先頭に_をつけるルール

 

actionが呼ばれた時のコールバック設定

actionが呼ばれたときにset_projectメソッドを呼び出す例。show,edit,update,destroyに適用。

before_action :set_project, only: [:show, :edit,:update,:destroy]

 

モデルを作る

rails g model Task title:string done:boolean project:references

 rake db:migrate

 rails g controller Tasks

モデルを1:nにする

class Project < ActiveRecord::Base
has_many :tasks 

 

ルーティングの作成(routes.rb)
resources :projects do

resources :tasks, only:[:create, :destroy]
end
ルーティングの確認
rake routes

Prefix Verb URI Pattern Controller#Action
project_tasks POST /projects/:project_id/tasks(.:format) tasks#create
project_task DELETE /projects/:project_id/tasks/:id(.:format) tasks#destroy
projects GET /projects(.:format) projects#index
POST /projects(.:format) projects#create
new_project GET /projects/new(.:format) projects#new
edit_project GET /projects/:id/edit(.:format) projects#edit
project GET /projects/:id(.:format) projects#show
PATCH /projects/:id(.:format) projects#update
PUT /projects/:id(.:format) projects#update
DELETE /projects/:id(.:format) projects#destroy
root GET / projects#index
コントローラーの実装
task.rb

 

チェックボックスを作る

html

<%= check_box_tag ”,”, t.done,{‘data-id’ => t.id, ‘data-project_id’ => t.project_id } %>

下記のコードになる。

<input data-id=”16″ data-project_id=”4″ id=”” name=”” type=”checkbox” value=”” />

 

jQueryでPOST

<script>
$(function(){
$(“input[type=checkbox]”).click(function(){
$.post(‘/projects/’+$(this).data(‘project_id’)+’/tasks/’+$(this).data(‘id’)+’/toggle’)
});
});
</script>
routeの設定(jQueryのPOSTされたURLをtasksのtoggleにルーティング)
post ‘/projects/:project_id/tasks/:id/toggle’ => ‘tasks#toggle’

 

controller

def toggle
 render nothing: true    #テンプレートを返さない
@task = Task.find(params[:id])
@task.done = !@task.done
@task.save
end

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です