Ruby on Railsで簡単なアプリケーション作る

#環境

• MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
• macOS Mojave 10.14
• Rails 4.2.6
• ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin18]
• mysql Ver 14.14 Distrib 5.6.42, for osx10.14 (x86_64) using EditLine wrapper

#作るアプリケーション

• 名前と身長と体重をトップページに表示
• トップページの入力ボタンで入力画面に遷移
• 入力画面で値を入力後、登録ボタンを押せば登録完了画面に遷移
• 登録完了画面からリンククリックでトップページに遷移

#手順
1.適当な場所(Desktopにした)に作成するRailsアプリケーションの関連ファイルを保存するフォルダ(project)を作る

terminal

$ cd ~/Desktop
$ mkdir project
$ cd project

2.Railsアプリケーション(アプリケーション名は"practice")のガラを作る

terminal

$ rails _4.2.6_ new practice -d mysql

3.Gemfile(practice/Gemfile)をエディタで編集
Gemfile編集後、ターミナルでbundle updateして、bundle install

practice/gemfile

#編集
gem 'mysql2', '0.3.18'
gem 'sass-rails', '~> 4.0.2'
#末尾に追記
gem 'pry-rails'
gem 'compass-rails','~> 2.0'
gem 'sprockets', '2.11.0'

4.データベースを作る

terminal

$ rake db:create

5.トップページに行くURLを指定する

practice/config/routes.rb

Rails.application.routes.draw do
  get '/practice' => 'practice#index'
end

6.コントローラー(practice)をターミナルから作成して、コントローラファイルを編集してアクション(index)を作る

terminal

＄ rails g controller practice

practice/app/controllers/practice_controller.rb

class PracticeController < ApplicationController
  def index
  end
end

7.データベースのテーブル(モデル)を作って、データも入れる
7-1.ターミナルでテーブルの設計図(マイグレーションファイル)のガラを作る

terminal

＄ rails g model person

7-2.マイグレーションファイルを編集(欲しいカラムをデータ型と共に追記)

db/migrate/20XXXXXXXXXXX_create_people.rb

class CreatePeople < ActiveRecord::Migration
  def change
    create_table :people do |t|
      t.string    :name
      t.integer   :height
      t.integer   :weight
      t.timestamps
    end
  end
end

7-3.ターミナルで設計したテーブルを作成するコマンドを発行

terminal

＄ rake db:migrate

7-4.データ入れる

terminal

＄ rails c   #Railsコンソールを立ち上げる

terminal

[2] pry(main)> Person.create(name: "kenji", height: "170", weight: "50")  
#3つくらい適当にデータを入れる

8.トップページにデータベースに入力したデータを表示させる
8-1.indexアクションにデータベースのデータを渡すようにする

practice/app/controllers/practice_controller.rb

class PracticeController < ApplicationController
  def index
     @people = Person.all
  end
end

8-2.トップページのビューファイルを作成する
practice/app/viewsフォルダにindex.html.erbを作成

practice/app/views/index.html.erb

<% @people.each do |p| %>
    <div class="person">
      <%= p.name %>
      <%= "#{p.height}cm" %>
      <%= "#{p.weight}kg" %>
    </div>
    <div class="line">------------------------------</div>
<% end %>

<%= button_to "Register?", 'practice/new', method: :get, class: 'btn btn-default' %>

ここまでで
「名前と身長と体重をトップページに表示」は達成

ターミナル上でrails sコマンドでサーバを立ち上げて、
ブラウザから"http://localhost:3000/practice"
にアクセスするとトップページに行ける（はず）

ちなみに、既にトップページ上にRegister?ボタンもある(はず)

####ここからは、そのボタンを押したら入力画面に遷移して入力できるようにしていきます

9.トップページのボタンから入力画面に遷移させるようにする
9-1.routes.rbを編集し、入力画面への遷移と入力データの登録ができるようにする

practice/config/routes.rb

Rails.application.routes.draw do
  get '/practice' => 'practice#index'
  get '/practice/new' => 'practice#new' #入力画面への遷移
  post '/practice' => 'practice#create'　#入力データの登録
end

9-2.practiceコントローラーにnewアクション(入力画面遷移)とcreateアクション(入力データ登録)を作る

practice/app/controllers/practice_controller.rb

class PracticeController < ApplicationController
  def index
     @people = Person.all
  end
  def new
  end
  def create
    Person.create(name: params[:name], height: params[:height], weight: params[:weight])
  end
end

9-3.入力画面のビューファイルを作成する
practice/app/viewsフォルダにnew.html.erbを作成

practice/app/views/new.html.erb

  <%= form_tag('/practice', method: :post) do %>
    <h3>
      Register form
    </h3>
    <input placeholder="name" type="text" name="name">
    <input placeholder="height" type="text" name="height">
    <input placeholder="weight" type="text" name="weight">
    <input type="submit" value="SENT">
  <% end %>

  <%= button_to "Cancel", practice_path, method: :get, class: 'btn btn-default' %>

9-4.登録完了画面のビューファイルを作成する

practice/app/views/create.html.erb

<h1>your data has been saved successfully!</h1>
<%= link_to 'Back to top page', '/practice' %>

以上で完成となります
お疲れ様でした

抜け漏れ間違いなんでもご指摘くださいませ