学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース

Ruby on RailsでWebアプリケーション開発その6 フォームの作成

<<前  [TOP]  次>>


「Puma」は、Railsを動かすためのWebサーバです。
ここからはこの「Puma」を起動して、変更を目で確認しながら進めていきます。


それでは、早速「Puma」を起動してみます。
コマンドプロンプトを立ち上げて「shop」フォルダに移動します。
そこで、「rails server」と入力して下さい。
起動完了するまで30秒くらいかかります。
f:id:MrRadiology:20180130114631p:plain


これで、Webサーバが起動しました。
Railsを開発するときは常にこの「Puma」を起動しておく必要があります。
更新ボタンを押すだけで変更が確認出来るようになりますので便利です。


ではブラウザで確認してみましょう。
ブラウザを開いてアドレスバーに「http://localhost:3000/」と入力して下さい。


下記のような画面にが表示されれば「Puma」が起動しているということになります。
f:id:MrRadiology:20180126142208p:plain


では自動で作成されたフォームを開いてみましょう。
モデル名はgoodsですので、ブラウザのアドレスバーに「http://localhost:3000/goods」と入力します。
f:id:MrRadiology:20180126144346p:plain
いきなりエラー画面がでました。
「application.html.erb」ファイルの7行目にエラーがあるようです。
「C:/Rails/work/shop/app/views/layouts/」フォルダにある「application.html.erb 」ファイルをテキストエディタで開いてみます。

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

これは、Rails で使われている CoffeeScript がアップデートされたために起きているようです。
スタイルシートを適用する時に問題になるので、ここで設定を修正して起きましょう。
一度「Puma」を止めます。「Ctrキー+C」で停止出来ます。
「shop」フォルダにある「Gemfile」というファイルを開いて、最後に「gem 'coffee-script-source', '1.8.0'」という記述を追加しましょう。
その後、コマンドプロンプトで「shop」フォルダに移動して「bundle update coffee-script-source」と入力します。
f:id:MrRadiology:20180129165252p:plain
これでこのエラーは出なくなります。
もう一度「Puma」を起動してブラウザで「http://localhost:3000/goods」を確認してみましょう。
f:id:MrRadiology:20180130115548p:plain
このようなindexページが表示されれば大丈夫です。


では、商品を登録してみましょう。
管理フォームの「New Good」リンクをクリックします。
すると、商品登録フォームが表示されますのですべての項目に情報を入力します。
一番最初の「Goods」のフィールドは、自動で作られたIDフィールドのようです。
テーブルを作った時に設定した「goods_id」ではなさそうです。
f:id:MrRadiology:20180130121214p:plain
全部入力したら、一番下にある「CreateGood」ボタンを押して入力を保存して下さい。
すると、推移した画面の一番上に「Good was successfully created.」と表示され、登録が出来たのを確認できます。
登録した商品の内容も表示されています。
f:id:MrRadiology:20180130121301p:plain
画面下の「Back」ボタンを押してみてください。
トップページに戻り、登録された商品のリストが表示されています。
f:id:MrRadiology:20180130121334p:plain
物品の右端には「Show」「Edit」「Destroy」の3つのボタンがあります。
そのボタンは、自動で作成されたもので、実際に機能します。
「Show」は内容の表示、「Edit」は編集、「Destroy」は破棄です。


商品登録フォームのフィールドで、もし追加したい項目が増えたり、削除したい項目が出たらどのようにすればよいかやってみます。
試しに「date」フィールドの削除をしてみましょう。
まずは「scaffold」を使用します。
ここで、「Puma」を一度止めておいた方がよいでしょう。


「db」フォルダの「migrate」フォルダにある「create_goods.rb」ファイルを一度削除します。
その後、コマンドプロンプトで「shop」フォルダに移動して以下のように入力します。
rails generate scaffold good goods_id:integer title:text description:text image_url:text price:integer maker:text category:text
最初に作成したときと違うのは、「date:text」が無いだけです。


f:id:MrRadiology:20180126161905p:plain
途中でファイルを上書きするか何度か聞いてきますので「y」と入力してすべて上書きしてください。


次にdevelopment.sqlite3データベースのgoodsテーブルからdateフィールドを削除します。
コマンドプロンプトで「db」フォルダに移動し、「sqlite3 development.sqlite3」と入力してdevelopment.sqlite3データベースに接続します。
SQLiteではフィールドのみの削除が出来ないので一旦テーブルごと削除します。
「drop table goods;」と入力します。
f:id:MrRadiology:20180126164355p:plain
「.q」で接続を解除します。


続いて「rake db:migrate」を実行します。
f:id:MrRadiology:20180126165048p:plain
もう一度development.sqlite3データベースに接続して「.schema」コマンドでテーブルの内容を見てみます。
f:id:MrRadiology:20180126165418j:plain
「date」フィールドがなくなっているのがわかります。


では「Puma」を起動してブラウザで「http://localhost:3000/goods」を開いてみます。
f:id:MrRadiology:20180130122246p:plain
商品を登録するフォームには、Dateフィールドが無くなりました。
これで削除作業は完了です。


では、次に今削除したdateフィールドを追加してみましょう。


一度「Puma」を止めます。
「db」フォルダの「migrate」フォルダにある「create_goods.rb」ファイルを削除します。
その後、コマンドプロンプトで「shop」フォルダに移動して以下のように入力します。
rails generate scaffold good goods_id:integer title:text description:text image_url:text price:integer date:text maker:text category:text
削除の時と違うのは、「date:text」が追加になっているだけです。


途中でファイルを上書きするか何度か聞いてきますので「y」と入力してすべて上書きしてください。
先ほどと同じです。


次に、development.sqlite3データベースの「goods」テーブルに「date」フィールドを追加します。
先程と同じようにテーブルごと削除して「rake db:migrate」を実行します。
f:id:MrRadiology:20180126170924p:plain


では「Puma」を起動して、ブラウザで「http://localhost:3000/goods」を開いてみます。
f:id:MrRadiology:20180130123048p:plain
無事Dateの項目が再び追加されました。


<<前  [TOP]  次>>