Sochi419のブログ

プログラミング初学者です。Ruby, JavaScriptを学習中です。猫が好きです。フィヨルドブートキャンプというスクールの受講生です。

sinatraでwebページを立ち上げる手順

rails sinatra

railsを学ぶ前身として、railsほど複雑ではなくrailsより処理が軽い「Sinatra」を学習しました。「Sinatraでデータベース連携をしたwebページを立ち上げる手順」をまとめました。

前提

データベース: SQLITE

OS: mac

手順1. sinatra用のディレクトリを作成し、必要ライブラリを入れる。

bundle initで、Gemfileを入れる。

bundle init

入れたGemfileに、以下の項目を追記して、必要ライブラリを入れる。

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

# gem "rails"
gem "activerecord"
gem "sqlite3", "~> 1.4.4"
gem "sinatra"
gem "webrick"
gem 'sinatra-contrib'

Gemfileに記載したライブラリを、bundle installで入れる。

bundle install

注. rubyのverが最新じゃないと、bundle install失敗するので注意。 （ここでハマった👊）

手順2. データベースのテーブルを作る。

テーブルにデータを入れるための、命令文を書く。 名前は、ここでは命令文の名前をdbinit.sq3、テーブル名bbsdataとする。

↓dbinit.sq3↓

create table bbsdata (
  id integer primary key,
  name varchar(30),
  entry varchar(150)
);

insert into bbsdata values (1, 'Diplodocus', 'The first entry.');
insert into bbsdata values (2, 'Allosaurus', 'The second entry.');

その後、書いた命令書通りのデータを、テーブルに送る なお、bbs.dbはデータベースのファイル名である。

sqlite3 bbs.db < dbinit.sq3

データがテーブルに送られているか、確認。 まずは、sqlite操作画面に移動する。

sqlite3 bbs.db

以下のselect文で、bbsdataテーブルの全データを取得する。

sqlite> select * from bbsdata;
1|Diplodocus|The first entry.
2|Allosaurus|The second entry.

手順3. YAMLでデータベースとRUBYプログラムをつなぐ。

現状sqliteのデータベースファイルを作成したが、RUBYと関係のないデータベースファイルが、1つできただけなので、Rubyと結びつける🤝 Rubyファイルとデータベースファイルを関係づけるのがYAMLファイル。

database.ymlを作成し、以下を記入

development:
  adapter: sqlite3 #データベースサーバの種類
  database: bbs.db #データベースのファイル名

その後rubyファイルに以下のような記述をすると、database.ymlが読み込まれて、関連づけることができる。

# データベースを使う設定
ActiveRecord::Base.configurations = YAML.load_file('database.yml')
ActiveRecord::Base.establish_connection :development

上記の記述をどうrubyプログラムに書くかは、例文として後述。👇

これで下準備は完了。 あとは、rubyプログラムと、体裁を整えるerbファイルを作成するだけ🙌

手順4. webブラウザへ表示する。

例として、以下のようなwebページを作る。（表になっていて、空欄部分は入力可能）

image.png

まずは、rubyプログラムを作成する。 下記のように記述。 ※sinatraでwebページを立ち上げるのが目的なので、プログラムの内容については解説しない。

require 'sinatra'
require 'active_record'
require "sinatra/reloader" if development?

set :environment, :production

# データベースを使う設定
ActiveRecord::Base.configurations = YAML.load_file('database.yml')
ActiveRecord::Base.establish_connection :development

# bbsdataテーブルをBBSdataクラスとして、扱えるようにする
class BBSdata < ActiveRecord::Base
    self.table_name = 'bbsdata'
end

get '/' do
  t = BBSdata.all

  @h = ""
  t.each do |a|
    @h = @h + "<tr>"
    @h = @h + "<td>#{a.id}</td>"
    @h = @h + "<td>#{a.name}</td>"
    @h = @h + "<td>#{a.entry}</td>"

    @h = @h + "<form method=\"post\" action=\"/del\">"
    @h = @h + "<td><input type=\"submit\" value=\"/Delete\"></td>"
    @h = @h + "<input type=\"hidden\" name=\"id\" value=\"#{a.id}\">"
    @h = @h + "<input type=\"hidden\" name=\"_method\" value=\"delete\">"
    @h = @h + "</form>"

    @h = @h + "</tr>\n"
  end

  erb :index
end

post '/new' do
  s = BBSdata.new
  s.id = params[:id]
  s.name = params[:name]
  s.entry = params[:entry]
  s.save
  redirect '/'
end

delete '/del' do
  s = BBSdata.find(params[:id])
  s.destroy
  redirect '/'
end

viewsディレクトリを作成する。 こちらにはレイアウトを決めるlayout.erbと、ページ本体であるindex.erbを入れる。 最悪layout.erbは無くても表示はできる。 (layoutはテンプレートのような意味合いで、たくさんのerbファイルを修正するときに、 layout.erbが有用らしい👆)

  • index.erb↓
<table border>

<tr>
<th>ID</th>
<th>Name</th>
<th>Entry</th>
</tr>

<%= @h %>

<form method="post" action="/new">
<tr>
<td><input type="text" name="id"></td>
<td><input type="text" name="name"></td>
<td><input type="text" name="entry"></td>
<td><input type="submit" value="Go"></td>
</tr>
</form>

</table>

以下コマンドでwebページに出力する。

bundle exec ruby dbtest.rb -o 0.0.0.0
  • 実行結果

image.png

👏完了👏