スタッフ編集画面のHTMLを作成していきます。
前回のトップページでHTMLの共通化を行いました。htmlのhead、PageHeader、パンくず、外部Javascriptの読み込み部分は、今後作成していく他の画面も同じですね。ということで共通部分を雛形htmlファイルとして、作っておきます。保存場所はassets/tenmplate/template.htmlとしておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>Bookmin 管理</title> <base href="http://www-dev.bookmin.jp/"> <link rel="stylesheet" href="../assets/style.css" type="text/css" charset="utf-8"> </head> <body> <!-- Breadcrumbs --> <ul class="breadcrumb"> <li><a href="index.html">Home</a></li> </ul><!-- Breadcrumbs --> <!-- MainContents --> <!-- /MainContents --> <script src="../assets/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> <script src="../assets/js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <script src="../assets/template/template.js"></script> </body> </html>
それでは、スタッフ編集を作っていきましょう。
もう一度示しますが、画面イメージは下図の通りです。
まず、manager/master内にstaff_list.htmlファイルを作成します。中身は、template.htmlの中身をコピーします。
このように表示されます。
パンくずに現在の位置を追加
スタッフ編集はマスタ編集の中に含まれます。ですのでHomeから見た階層としてはHome / マスタ編集 / スタッフ編集となります。通常パンくずリストは最下の項目が自分自身を表し、それより上の階層の項目はLinkを伴いますし、しかしここでのマスタ編集はメニューのカテゴリーとしては存在しますが、Link先がありません。つまりHomeのみLinkがあるということになります。ソースは以下の通りです。
<!-- Breadcrumbs --> <ul class="breadcrumb"> <li><a href="index.html">Home</a></li> <li class="active">マスタ編集</li> <li class="active">スタッフ</li> </ul><!-- Breadcrumbs -->
このように表示されます。
一覧の表示件数の切り替えとスタッフ追加ボタン
一覧本体の上にある一覧の表示件数切り替えDropDownListとスタッフの新規追加モーダルウィンドウを開くボタンのタグを追記します。左端に表示件数切り替えDropDownList、右端に追加ボタンを配置します。この領域を１行と見ることもできますので、rowclassで１行とし、それを左右２分割します。そして追加ボタンを右端に移動します。
<!-- MainContents --> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <form id="ListRowsChange" class="form-inline"> <select id="MaxListNum" name="MaxListNum" class="form-control"> <option value="10">10</option> <option value="10">50</option> <option value="10">100</option> </select> 件 / ページ </form> </div> <div class="col-xs-6 text-right"> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#staffAdd"> 追加 </a> </div> </div> </div> <!-- /MainContents -->
新たに出てきたスタイルのを説明します。
<a><input><button>のどのタグでも同じように見た目がボタンになります。
btn-successbtn-dangerなどがあります。色が違うだけですが、アクションの種類によって使い分けるなど、サイト内のアクションを統一するのに役立つでしょう。独自に色を設定してバリエーションを作ることも有用でしょう。
追加ボタンの<a>タグ内にdata-toggle="modal"とdata-target="#staffAdd"があります、これは後で出てきますモーダルウィンドウの制御に関わってくる属性です。詳しい解説はモーダルウィンドウのところで解説します。
このように表示されます。
一覧本体を作成します。
まず、一覧のヘッダーとボディ１行分をtableを使って追記します。スタイルなしの状態です。
<div class="container-fluid"> <!-- 先に作った表示件数切り替えエリア--> <!-- StaffList --> <table> <thead> <tr> <th>ID (StaffCard)</th> <th>氏名 (編集)</th> <th>メールアドレス</th> <th>スタッフ</th> <th>管理</th> <th>有効</th> <th>Pwd登録</th> <th>作業履歴</th> </tr> </thead> <tbody> <tr> <td>1605058237104</td> <td>横溝 陽菜乃</td> <td>otoha8924@axgmdhlga.ko</td> <td>アルバイト</td> <td>管理補佐</td> <td>有効</td> <td>済み</td> <td>作業履歴</td> </tr> </tbody> </table> <!-- /StaffList --> <!-- Pagenation --> <!-- /Pagenation --> </div>
このように表示されましす。
単位換算、進数変換等の便利なWEBアプリ集
この中に擬似個人情報生成サービスもあります。
さて、このそっけないTableを整えていきます。
まず、tableタグにtableclassを追加します。
<table class="table">
たったこれだけでテーブル全体が画面いっぱいに広がり、ヘッダーとボディの間に区切り線が入り、列がそれなりに当分されています。次は各セルに枠線を設けましょう。
続いて各セルに枠線を付加します。
<table class="table table-bordered">
各セルに枠線ができました。この画面イメージはブラウザの横幅を狭めて表示しています。ブラウザを広げた場合、どのように見えるか試してましょう。ついでに、本体の行を幾つか追加します。
それなりに、バランスは取られていますが、
幅の割り振りを左から[2, 2, 3, 1, 1, 1, 1, 1]にしてみます。ついでに一覧ボディの偶数行と奇数行の背景色が交互に変わるようにし、行にマウスオーバーした際にその行の背景色を変え行にフォーカスされているようなスタイルも追加します。
列幅を指定するcol-xs-*classは<table>の最初の行だけに指定すれば良いので、<thead>内の<th>タグに書き入れます。
<table class="table table-bordered table-striped table-hover"> <thead> <tr> <th class="col-xs-2">ID (StaffCard)</th> <th class="col-xs-2">氏名 (編集)</th> <th class="col-xs-3">メールアドレス</th> <th class="col-xs-1">スタッフ</th> <th class="col-xs-1">管理</th> <th class="col-xs-1">有効</th> <th class="col-xs-1">Pwd登録</th> <th class="col-xs-1">作業履歴</th> </tr> </thead>
一覧ヘッダーにソートLinkを設ける
ヘッダー氏名(編集)のソースを以下の用に変更します。
<th class="col-xs-2"> <a href="master/staff-list.html"> 氏名 (編集) <i class="fa fa-sort fa-pull-right"></i> </a> </th>
項目名をクリックで、自分自身を再度読み込みます。PHPやJavaのプログラミングへ進んだ際にこのあたりのソースはJavascriptを絡めたものに変更します。現段階ではサーバーと連携しませんのでこのままとします。
項目名下の<i>タグはソートした際の三角アイコンです。デフォルトでは上下の三角アイコンで、
ソートを実行し、昇順降順に応じて上三角、下三角のアイコンへ変更します。これもサーバーと連携するようになった段階でソースを変更します。静的HTMLの段階では、見た目を整えるまでとします。
ちなみに上三角font(昇順)は
fa-sort-asc、下三角font(降順)はfa-sort-descを指定します。アイコンclassの切り替えはサーバー側で切り替え処理をしますので、ここでは上下三角fontの表示までとします。 同じように「スタッフ、管理、有効、Pwd登録」にもタグを追加します。
サーバー言語のプログラミングのステップに入った際に、この辺りのソースは変更します。どの項目がクリックされ、並び順は昇順か降順かという情報をサーバーに送信する必要がありますので、それが実現出来るように書き換えます。
一覧ボディにLinkを設ける
一覧のボディを作りこんでいきます。
その前に下の画像をコピーしbookmin/assets/images/staff-card/に保存しておいてください。スタッフ証イメージです。これもスタッフの追加登録時にサーバー側で自動生成します。
ということで、一覧ボディには以下の修正を行います。
- ID列にスタッフ証画像へのLinkを設ける
- 氏名列にスタッフ編集モーダルウィンドウへのアクションを設ける
- 有効列の表示文字をWebFontのチェックに変更する
- Pwd済列の表示文字をWebFontのチェックに変更する
- 作業履歴列に作業履歴一覧画面へのLinkを設ける
ソースは次のようになります。
<tr> <td><a href="../assets/images/staff-card/yokomizo.png" target="_blank">1605058237104</a></td> <td><a href="#" class="staff-name" data="1605058237104">横溝 陽菜乃</a></td> <td>otoha8924@axgmdhlga.ko</td> <td>アルバイト</td> <td>管理補佐</td> <td data="1"><i class="fa fa-circle-o" /></td> <td data="1"><i class="fa fa-check" /></td> <td><a href="master/staff-work-log.html">作業履歴</a></td> </tr>
このソースの中で、氏名の列では色々は書き方ができます。それぞれ特色があり要件によって使い分けられると良いでしょう。書きえるパターンの一部を紹介します。詳しくはJavascript言語の項目で詳しく紹介します。
- <a href="javascript:editStaffModal('1605058237104')">横溝 陽菜乃</a>
- <a href="javascript:void()" class="staffName" data="1605058237104">横溝 陽菜乃</a>
- <a href="javascript:editStaffModal(this)" data="1605058237104">横溝 陽菜乃</a>
- <a href="javascript:void(0)" onclick="editStaffModal(this);return false;" data="1605058237104">横溝 陽菜乃</a>
- <a onclick="editStaffModal(this)" data="1605058237104">横溝 陽菜乃</a>
- <a href="#" onclick="editStaffModal(this); return false;" data="1605058237104">横溝 陽菜乃</a>
管理と有効列の<td>タグが<td data="1">となっています。HTMLのルールでは<td>にdataという属性は規定されていません。ですが、HTMLは独自の属性を指定してもブラウザが無視をするだけで全く問題はありません。この属性はモーダルウィンドウを開いた際に、フォームにデータをセットするために使用します。このように後で必要になるデータをあらかじめHTMLに埋め込んでおくことで、一々サーバーからデータを取得する必要がなくなります。
他の行も同じように追加しましょう。その際、各行のデータに変化を加えてみましょう。よりそれらしく見えたり、思わぬ形で表示されたりします。データに変化を加えることはレイアウトを微調整するのに役立ちます。
最後の要素、Pagenationです。
<!-- Pagenation --> <nav class="text-center"> <ul class="pagination"> <li class="disabled"><a href="javascript:void(0)">前へ</a></li> <li class="active "><a href="javascript:void(0)">1</a></li> <li><a href="#" class="page-num" data="2">2</a></li> <li><a href="#" class="page-num" data="3">3</a></li> <li><a href="#" class="page-num" data="4">4</a></li> <li><a href="#" class="page-num" data="5">5</a></li> <li><a href="#" class="page-num" data="2">次へ</a></li> </ul> </nav> <!-- /Pagenation -->
現在のページが１ページ目だとすると、「前へ」と「１」はクリックして動作する必要がありませんので、それぞれ
href属性にjavascript:void(0)を指定して、クリックしても何も起こらないようにアクションを無効にしています。
その他のページ番号にはclassにpage-numを指定し、Javascriptからこの要素に対しイベントを設定する方法をとります。Javascriptに関しては後でサーバープログラミングのステップに入った時に詳しく解説します。
このように表示されます。
これで一覧HTMLソースが出来ました。