railsでアプリを作るときのメモ2

rails generate

いろいろ作ってくれる魔法の呪文を唱えます

$ rails generate controller home top

ルーティングについて

routes.rbにコードが追加されています。

/config/routes.rb

Rails.application.routes.draw do
  get 'home/top' # 追加されている
end

これによって $ rails s をすると
http://localhost:3000/home/top にアクセスできます

ビューについて

新しくファイルが作成されています。

/app/views/home/top.html.erb

<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

先ほどの http://localhost:3000/home/top にアクセスするとこの画面が表示されます。

コントローラについて

新しくファイルが作成されています。

/app/controllers/home_controller.rb

class HomeController < ApplicationController
  def top
  end
end

ルーティング編集

/config/routes.rb

Rails.application.routes.draw do
  get 'top' => "home#top"  # 編集
end

http://localhost:3000/top にアクセスすると、homeコントローラのtopメソッドが呼び出されます。

紹介ページを作る

ルーティング追加

/config/routes.rb

Rails.application.routes.draw do
  get 'top' => "home#top"  
  get "about" => "home#about" # 追加
end

コントローラ追加

/app/controllers/home_controller.rb

class HomeController < ApplicationController
  def top
  end
  def about
  end
end

ビュー作成

自動生成されないので自分でファイルを新規作成します。

app/views/home/about.html.erb

<div class="about-main">
  <h2>MyFormAppとは</h2>
  <p>
    フォームを新しく作成するアプリケーションです。
  </p>
</div>

共通コンポート作成

ヘッダーなどの共通部分を作成します。

/app/views/layouts/application.html.erb

<!-- 追加 -->
  <header>
    <div class="header-logo">
      <a href="/top">MyFormApp</a>
    </div>
    <ul class="header-menus">
      <li>
        <a href="/about">MyFormAppとは</a>
      </li>
    </ul>
  </header>

トップページ

紹介ページ

同じものが表示されています。

CSS

CSSファイルは自動で作成されています。

/app/assets/stylesheets/home.scss

ul, li {
  list-style-type: none;
}
body {
  background-color: #3ecdc6;
}
.main {
 position: absolute;
 top: 64px;
}
header {
  height: 64px;
  position: absolute;
  width: 100%;
}
.header-logo {
  float: left;
  color: white;
}
//
.header-logo a{
  color: white;
}
//
.header-menus {
  float: right;
}
.header-menus a {
  color: white;
}

とりあえずここまで