include_tag
で */assets/javascripts にあるファイルを全部呼び出します。ですので、
application.html.erb
のheadタグは、titleだけ書き換えておいてく ださい。次はbodyタグです。 application.html.erb には以下のコードがあります。
<%= yield %>
これが、ページの中身を差し込むためのメソッドです。これは消してはいけません。
この部分がBookの情報を差し込まれる部分になります。 まず、
books.html
の bodyタグの中身を丸ごとapplication.html.erb
にコピーし、以下の部分を削除 して <%= yield %> に置き換えてください。<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p id="notice">メッセージをここに表示します。</p>
</div>
<h2 class="sub-header">Books</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>タイトル</th>
<th>著者</th>
<th>出版年月</th>
<th>発売</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>吾輩は猫である</td>
<td>夏目漱石</td>
<td>1905年08月</td>
<td>不可</td>
<td>詳細</td>
<td>編集</td>
<td>削除</td>
</tr>
<tr>
<td>怪人二十面相</td>
<td>江戸川乱歩</td>
<td>1936年01月</td>
<td>不可</td>
<td>詳細</td>
<td>編集</td>
<td>削除</td>
</tr>
<tr>
<td>Rubyist Magazine</td>
<td>日本Rubyの会</td>
<td>2004年09月</td>
<td>可能</td>
<td>詳細</td>
<td>編集</td>
<td>削除</td>
</tr>
</tbody>
</table>
</div>
<br>
<a class="btn btn-default" href="#">新規登録</a>
<!DOCTYPE html>
<html>
<head>
<title>Monka</title>
<%= stylesheet_link_tag 'application', media:
'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle
collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Monka</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign out</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Books</a></li>
<li><a href="#">Tags</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<%= yield %>
</div>
</div>
</div>
<script src="bootstrap.min.js"></script>
まだリンクの設定ができていないところもありますが、あとで設定していきますので今はこ のままで大丈夫です。この状態でwebページを見ると、次のようになります。トップのナ ビゲーションバーとサイドメニューができました。
あとは、各ページの中身を整えていきます。先ほどyieldに置き換えるために削除した
<div class="alert alert-success alert-dismissible" role="alert">
から
<a class="btn btn-default" href="#">新規登録</a>
までの部分を、
app/views/books/index.html.erbへコピーしていきます。そのとき、
もともとあるコードとよく見比べながらそれぞれのタグやclassを移してください。移し 終えたあとの index.html.erb は次のとおりです。
<% if notice %>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close"><span aria-hidden="true">
×</span></button>
<p id="notice"><%= notice %></p>
</div>
<% end %>
<h2 class="sub-header">Books</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>タイトル</th>
<th>著者</th>
<th>出版年月</th>
<th>発売</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @books.each do |book| %>
<tr>
<td><%= book.title %></td>
<td><%= book.author %></td>
<td><%= book.published_on %></td>
<td><%= book.showing %></td>
<td><%= link_to '詳細', book %></td>
<td><%= link_to '編集', edit_book_path(book) %></td>
<td><%= link_to '削除', book, method: :delete,
data: { confirm: '本当に削除してもいいですか？' } %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<br>
<%= link_to '新規登録', new_book_path, class: 'btn btn-default' %>
<%= notice %> は、何かメッセージがあるときだけ表示すればいいので、<% if
同じような使い方をする alert というflashもあります。この2つの名前は変数などに使 わないようにしてください。最後の行は、もともとaタグでしたが、link_toメソッドに置 き換えています。aタグでも動作をしますが、hrefでアドレスをそのまま記述すると、ルー ティングの修正があった場合の対応が大変になります。極力、Railsの*_pathで表現さ れるルーティング機能を使用しましょう。
ここまでで、以下のような画面になっていればOKです。
commit
(2) . 商品マスタの作成
ここまででBookの一覧が表示されましたが、データがないので本来の見え方が確認でき ません。ここで商品のデータを用意して、画面の構成と画面遷移を実装していきましょう。