#5 DBの準備とStaticページを作る

投稿者: | 2021年2月21日

前回の記事で、飲食店を想定したウェイティングリストの基本的な画面の設計ができました。今回からはRailsのプロジェクトやモデルを作りながら、最初の1画面を作っていきます。

少し長くなるので今回は、DBの準備と、最初のStaticページを作ります。当面の目標は、1画面目のリソースマスタ画面を作ることを目指します。

リソースマスタ画面を作る

当面は、必要最低限の機能(受付申し込み、スタッフのチェック機能)を中心に作っていきます。これが終わり次第、レポート機能などを拡張していきましょう。

タスク内容機能など
v1開発DB定義、画面開発など受付申し込み、スタッフのチェック機能
v1.1検討機能検討レポート機能
v1.1開発DB定義、画面開発などレポート機能
v2検討携帯ショップを想定した機能の検討

ということで、まずはv1開発の「1つ目の画面」を作ってみます。

データが登録、更新、削除できるだけの画面をとして、こちらの画面を作ります。本来であればユーザがログインしていること、などの前提が必要ですが最初は何も制御をつけないでおきます。

環境構築についてはこちらまたは、RailsTutorialの時に使った環境を使いましょう。

プロジェクトの準備

まずはプロジェクトの準備をします。プロジェクト名はwaiting_appとします。

rails new waiting_app

Gemfileを開き、現時点でほぼ使うであろうgemを書き込んでおきます。

gem 'pg'
gem 'chronic'
gem 'rails-i18n'
gem 'kaminari'
gem 'bootstrap-sass', '~> 3.0'
bundle install
git init
git add -A
git commit -m "init"
git remote add origin git@bitbucket.org:?????????/waiting_app.git
git push -f origin master

githubでもよいですがrails tutorialの時のbitbucketにアカウントがあるのでbitbucketにプロジェクトを作って使うことにしました。

postgresqlに接続できるようにする

psql -U postgres
postgres=# create user waiting;
postgres=# create database waiting_db owner waiting;
postgres=# alter user waiting encrypted password 'waiting_pw';
postgres=# grant all privileges on all tables in schema public to waiting;
postgres=# alter role waiting createdb;
postgres=# alter role waiting superuser;

database.ymlを更新します。

default: &default
  adapter: postgresql
  database: waiting_db
  username: waiting
  password: waiting_pw
  encoding: utf8
development:
  <<: *default
test:
  <<: *default

モデルを作る

テーブル定義はよく参照しますので、手元に表として作成しておきましょう。今回はリソースというテーブルだけあればよいです。Resourceだと一般的すぎる名前でrailsの予約語と衝突しそうですからWaitingResourceということにしました。

rails g model WaitingResource name:string ref:string
rails db:migrate:reset

このコマンドが通れば、DBに接続が成功しテーブルが作成できています。

必要なファイルを移植する

まずは必要なファイルをRailsTutorialから移植してStaticなページを表示できるところまでを目指します。トップページはHelloRailsとでもしておきます。

rails g controller Static
app/controllers/static_controller.rb
class StaticController < ApplicationController
    include StaticHelper
    def index
        render 'static/index'
    end
end
application_helper.rb

module ApplicationHelper
    def full_title( page_title = '' )
        base_title = "ウェイティングリスト"
        if page_title.empty?
            base_title
        else
            page_title + " | " + base_title
        end
    end
end
_default-header.html.erb
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>

フッターはひとまずBlogへのリンクにしてあります。書くことがなければ空白でもよいかもしれません。

_footer.html.erb
<footer>
  <nav>
    <div class="footer">
      <ul>
        <li><%= link_to "Blog",    "https://itdkt.info" %></li>
      </ul>
    </div>
  </nav>
</footer>
_header.html.erb
<header>
  <div class="container">
    <nav class="navbar navbar-fixed-top bg-my-color" class="navbar navbar-fixed-top bg-my-color">
      <%= link_to "ウェイティングリスト", root_path, id: "logo", class: "navbar-brand" %>
      <div>
        <ul class="nav navbar-nav">

        </ul>
      </div>
    </nav>
  </div>
</header>
<script type = "text/javascript" >
$(document).ready(function(){
});
</script>
application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <title><%= full_title(yield(:title))  %></title>
    <%= render 'layouts/default-header' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container-fluid">
      <% flash.each do |msgtype, msg| %>
          <%= content_tag(:div, msg, class: "alert alert-#{msgtype}") %>
      <% end %>
      <div class="main">
        <%= yield %>
      </div>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>
routes.rb
Rails.application.routes.draw do
  root 'static#index'
end
application.js
↓追加
//= require bootstrap
custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";

body {
    padding-top: 70px;
}

次回

次回以降、リソースマスタ画面で使う、一覧形式での表示、更新反映するライブラリ(Handsontable)の導入と、画面作成に入っていく予定です。