今回は前回までのまとめとして、Railsで足し算をするフォームを作っていきます。
Railsのインストールから始めて、『plus-app』フォルダを作成します。
エラーは出るので、sqlite3のバージョンが指定されていまいので指定します。plus-appに入っていることを確認して『bundle update』を書いてEnter。その後、calcsコントローラーを作成します。
calcsコントローラーにindexアクションを書きます。
routes.rbに『/plus』にアクセスすると、calcsコントローラーのindexアクションが実行されるようにします。
calcsコントローラーにrender plainを書いて確認します。
『/plus』にアクセスすると『足し算』を表示することができました。
calcsコントローラーのrender plainを消します。
ビューズのcalcsフォルダにindex.html.erbファイルを作成します。index.html.erbにh1タグを書きます。
h1タグを表示することができました。
index.html.erbにフォームタグを作成します。
フォームを作ることができました。
フォームを使って、データを送信するときにはpostを使います。『/calc_plus』にデータが飛んできて、calcsコントローラーのplusアクションが実行されます。
calcsコントローラーにアクションを書いていきます。前回も出てきましたがフォームから入力された数字は文字扱いになるので、『.to_i』を付けます。@sumというインスタンス変数に入れています。
plus.html.erbファイルを作成します。@sumを使って計算結果を表示するようにします。
『10』＋『20』で計算します。
『30』となり、計算結果を表示することができました。
デザインが寂しいので、ちょっとだけデザインを入れます。assetsフォルダの中のstylesheetsフォルダのapplication.cssを開きます。ユニバーサルセレクタで全体を中央揃えにします。
真ん中にすることができました。
次にBootstrapを使ってボタンにデザインを入れます。
Railsには jQueryはすでに入っているので、必要な上記の2つを入れます。
ビューズのlayoutsフォルダのapplication.html.erbを開きます。
Bootstrapを使うために必要なファイルを入れます。
CSSからボタンをクリックします。
青いボタンにしてみます。
index.html.erbに『class』を上記のように書きます。
ボタンを青くすることができました。
『13』＋『24』を計算します。
計算結果を表示できましたが、文字が小さいので大きくします。
plus.html.erbのpタグに『class=”result”』を書きます。
application.cssで『.result』のフォントのサイズを40pxにします。
計算結果を大きく表示することができました。
コメント