Rails コース

CRUDを実装する(2)

次に、先ほどrails consoleで行っていたレストランデータの新規登録がWebページ上で行えるようにページを作成しましょう。そのために準備されているルートは以下の部分です。

「データベースとmodelを理解する」の章で学んだ通り、データの保存は「①Restaurant.newでインスタンスを作成(現時点で名前と住所の属性は空)」→「②そこにデータを入れて保存」という流れでした。まず新規登録に必要なフォームはhttp://localhost:3000/restaurants/newに設置します。

  1. restaurants/newにアクセスできるようにcontrollerとviewを準備してください。
  2. newのviewページにレストランの名前と住所を入力するフォームを作ります。
  3. 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";

この教材はメンバー専用です

メンバー専用の教材にアクセスするには、
ハッカーIDでログインしてください。

or