LotosLabo

プログラミング技術とか気になった情報を載せていきます

Ruby on Rails 4.0について4

Webページのデザインと項目の追加をしていきます。

まず全体のテンプレートの編集をしていきます。

共通テンプレートの編集


app/views/layouts/application.html.erb を編集していきます。

f:id:lo25131:20140221174903j:plain


中身はこのように色々と書いてますが、コレに追加していきます。


f:id:lo25131:20140221174909j:plain


ではまず、ページの上部にロゴ画像のようなものを配置します。

ロゴ画像の追加


タグの下に

<%= image_tag "logo.png" %>

と記述します。 "logo.png"は画像の名前です。

f:id:lo25131:20140221175428j:plain


画像ファイルは

assets/images に入れておきます。

f:id:lo25131:20140221182304j:plain


背景色を変える


今回はCSSファイルを編集していきます。

app/assets/stylesheets/application.css を編集します。


body {
background-color: #eee;
}


f:id:lo25131:20140221181444j:plain


このようにするとWebページがの背景色が変わります。



ルーティングの内容を確認

rake routes

ルーティングを確認することが出来ます。


f:id:lo25131:20140221181856j:plain


リンクを設定


HOMEというリンクを作成していきます。リンク先は先ほどのルーティングの画像を参考にして、
index、TOPページに戻るように作成します。


app/views/layouts/application.html.erb を編集します


これを追加します。

<%= link_to "Home", projects_path %>


f:id:lo25131:20140221182438j:plain



f:id:lo25131:20140221182634j:plain



プロジェクトの詳細

まずはindex画面には今 Project というタイトル名しか入っていないので下に項目を追加します。

コンソール画面より、

rails console

と入力します。

こうするとインタラクティブに作成することが出来ます。


要求されたら、項目を作成します。

Project.create(title: "p1")

Project.create(title: "p2")

を入力します。

これはrailsのプロジェクトタイトルにp1とp2という項目を追加するということです。


このように追加されると思います。

f:id:lo25131:20140221191244j:plain



そして続いて先ほどのp1とp2にリンクを作成し、サブページを作成していきます。

今度はindex(TOP)ではなく、showという部分を作成していきます。


app/assets/views/projects/index.html.erb を編集します。


f:id:lo25131:20140221191414j:plain

このようにプロジェクトタイトル=先ほどのp1とp2にリンクを作成します。



次に、app/assets/controllers/projects.controller.rb を編集します。

f:id:lo25131:20140221191614j:plain



ここではコントローラーにshowという項目を追加しています。


そして最後に、app/assets/views/projects/show.html.erb を作成します。


f:id:lo25131:20140221191702j:plain


これを追加すると、リンクが飛べるようになります。


f:id:lo25131:20140221194232j:plain