介護 X ITO 

福祉の業界に携わりながら、IT(プログラム)を0から使用してソフトを作成しようと思っています。その他に介護、プログラムの出来事を発信しています。

【勤怠開発】自力で勤怠システムを作成しよう その4

トップページを作成していきます。

 

目次

 

 

トップページを作成しよう。

最初に、ブランチの切り替えをします。

  • git checkout -b static-pages

-bのオプションでブランチの作成と切り替えを同時に行うことがru出来る。

 

ルーティングにgetリクエストを追加します。

  • get  'static_pages/home'

これでrails shomeにアクセスすると表示されます。

 

 

gitに切り替えたブランチをpushしよう

  •  git add -A
  •  git commit -m "Add a Static Pages controller"
  •  git push -u origin static-pages

一度指定すれば、2回目以降は、gitpushのみで反映されます。

 

 

 

 

タイトルを表示しよう

上部のホーム|勤怠システムと表示されている部分がタイトルになります。

f:id:aroma99959:20190507090916p:plain

タイトル

 

 

どのように表示しているか、コードを確認してみます。

 

 

 home.html.erb

f:id:aroma99959:20190507092833p:plain

/kintai_app/app/views/static_pages/home.html.erb

provideメソッドにてyieldを使用し呼び出していますが、今の状態だと、ページを作成する度に、上記のコードを入れなければいけません。それを解消するためapplication.html.erbにコードを差し替えます。

 

 

application.html.erb

f:id:aroma99959:20190507093943p:plain

app/views/layouts/application.html.erb

差し替えることにより、一カ所で表示できるようになりました。

 

 

続いて、タイトルが空白になった場合でも表示されるようにするために、ヘルパーメソッドを使用し、表示されるようにします。

 

 

helpers/application_helper.rb

f:id:aroma99959:20190507091632p:plain

/kintai_app/app/helpers/application_helper.rb

作成したら、このコードに差し替えます。

 

 

 application.html.erb

f:id:aroma99959:20190507091811p:plain

/kintai_app/app/views/layouts/application.html.erb

これで、タイトルが空白の場合でも表示されるようになります。

 

 

最終的なhome.html.erbのコードを見てみましょう。

 

 

 home.html.erb

f:id:aroma99959:20190507091205p:plain

/kintai_app/app/views/static_pages/home.html.erb


差し替えたことにより、ここまでスッキリしました。

 

以上になります。

 

 

 

 

 

それでは、さらばーゆ。