データを新規登録するフォームを作る
次に、先ほどrails consoleで行っていたレストランデータの新規登録がWebページ上で行えるようにページを作成しましょう。そのために準備されているルートは以下の部分です。
「データベースとmodelを理解する」の章で学んだ通り、データの保存は「①Restaurant.new
でインスタンスを作成(現時点で名前と住所の属性は空)」→「②そこにデータを入れて保存」という流れでした。まず新規登録に必要なフォームはhttp://localhost:3000/restaurants/newに設置します。
restaurants/new
にアクセスできるようにcontrollerとviewを準備してください。- newのviewページにレストランの名前と住所を入力するフォームを作ります。
- indexページから新規レストラン登録ができるようにリンクを作成してください。
<ヒント>
フォームは、インタラクティブなページ作成で使用したものをベースに作成するほか、「form_with」メソッドを使うとスマートにフォームを生成できます。
さらにbootstrap(WEBページを効率よく開発するためのWEBフレームワーク)のbootstrap_formを使うと、簡単に見た目も整ったフォームが生成可能です。この機会にbootstrapを導入してみましょう。
Gemfile
gem 'bootstrap_form' gem 'bootstrap', '~> 4.4.1' gem 'jquery-rails'
app/assets/javascripts/application.js ※app/assets/のフォルダ内にjavascriptフォルダを作成
//= require jquery3 //= require popper //= require bootstrap-sprockets
app/views/layouts/application.html.haml
= javascript_include_tag "application" %bodyタグとインデントは同じ高さで、ページの最下部に追加
app/assets/config/manifest.js
//= link application.js
app/assets/stylesheets/application.scss ※拡張子をcss
からscss
に変更
@import "bootstrap"; @import "rails_bootstrap_forms";