スタッフブログ

WEBベースの勤怠管理システムを作って見る  (2)

  • このエントリーをはてなブックマークに追加
007

こんにちは、Hal9000です。
今回は、前回に引き続き「WEBベースの勤怠管理システムを作って見る」と題して、実際にアプリケーションを作成しながら、WEBアプリ開発の実際をご紹介したい思います。

WEBベースの勤怠管理システムを作って見る (2)管理画面

さて、前回、WEBベースの勤怠管理システムの基本システムとして利用する為に、EC-CUBE 2.13.4をサーバーにインストールしましたが、今回は、このEC-CUBEをカスタマイズして、基本システムとして使用できる様にして見ます。

サーバーにインストールしたEC-CUBE 2.13.4のフロント側

34jpg

画像をクリックして拡大

 

サーバーにインストールしたEC-CUBE 2.13.4の管理画面側

35

画像をクリックして拡大

 

実際にカスタマイズを行う前に、まず、WEBアプリケーションの基本システムに必要な機能を確認してみます。
まず、ページ表示機能(フロント側及び管理画面)が必要です。
※実際には、これに付随してSESSION管理やSmartyのテンプレート管理それにログイン状態の管理等が必要です。
それに、管理機能として、マスターリスト管理や、ユーザー管理(一般ユーザー及び管理ユーザー)、そしてコンテンツマネージャーの機能等が有れば、WEBアプリケーションの基本システムとして使用する事が出来ます。
EC-CUBE 2.13.4は、幸いこれらの機能を殆ど備えています。
従って、勤怠管理システムの基本システムとしての使用に足りない機能だけを追加します。

それでは、まず、管理画面側からカスタマイズを進めて行きます。
まず、EC-CUBEの管理画面の外観をカスタマイズして、WEBベースの勤怠管理システムとして使用するのに都合の良い配置にします。

EC-CUBEの管理画面のグローバル ナビゲーション部分のテンプレートは/system/Smarty/templates/admin/main_frame.tplです。
Smartyで書かれて居ますが、基本的にはHTMLです。(※SmarytyはHTML内に書いた独自のタグ
をコンパイルする事によって動的部分を含んだphpのファイルを出力します。)

105行目からがグロナビの部分の記述です。
この部分を管理機能に必要な項目に書き換えます。
項目は、1. 管理画面TOP、 2. 基本情報 管理、 3. 法人 管理、 4. ユーザー 管理、 5. 勤怠状況 管理、 6. 管理ユーザー 管理、 7. コンテンツマネージャー、 8. システム設定 としました。
テンプレートを編集したら、当然スクリプト側も編集しないと、正しく動作しませんが、此処では、順を追って作業を進める為、取り敢えず、管理画面のグロナビ項目の見た目を修正しました。

以下の様にmain_frame.tplを修正しました

<!--{printXMLDeclaration}--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--{*
/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 */
*}-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />

<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="<!--{$TPL_URLPATH}-->img/common/favicon.ico" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/admin_contents.css" type="text/css" media="all" />
<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/admin_file_manager.css" type="text/css" media="all" />
<!--{if $tpl_mainno eq "basis" && $tpl_subno eq "index"}-->
<!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}-->
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>
<!--{else}-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--{/if}-->
<!--{/if}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/navi.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/win_op.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/site.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<!--{$TPL_URLPATH}-->js/admin.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/css.js"></script>
<script type="text/javascript" src="<!--{$TPL_URLPATH}-->js/file_manager.js"></script>
<title><!--{$smarty.const.ADMIN_TITLE}--></title>
<script type="text/javascript">//<![CDATA[
    <!--{$tpl_javascript}-->
    $(function(){
        <!--{$tpl_onload}-->
    });
//]]></script>

<script type="text/javascript">//<![CDATA[
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-51785286-1', 'koukyukaical.com');
  ga('send', 'pageview');
//]]></script>

<!--{$tpl_head_option|smarty:nodefaults}-->
</head>

<body class="<!--{if strlen($tpl_authority) >= 1}-->authority_<!--{$tpl_authority}--><!--{/if}-->"<!--{$fnOnLoad}-->>
<!--*{$GLOBAL_ERR}* -->
<noscript>
    <p>JavaScript を有効にしてご利用下さい.</p>
</noscript>

<div id="container">
<a name="top"></a>

<!--{if $smarty.const.ADMIN_MODE == '1'}-->
<div id="admin-mode-on">ADMIN_MODE ON</div>
<!--{/if}-->

<!--{* ▼HEADER *}-->
<div id="header">
  <div id="head" style="width:100%;height:40px;background:#000000;display:block;">
    <div id="logo" style="width:332px;height:40px;background:#000000">
      <img src="<!--{$smarty.const.ROOT_URLPATH}-->user_data/packages/default/img/common/user_logo.gif" align="left"  alt="logo" width="332" height="40"  />
    </div>
        <div id="site-check">
            <!--{assign var="auth" value=$list_datas.authority}-->
            <p class="info"><span>権限&nbsp;:&nbsp;<!--{* 権限 *}--><!--{$arrAUTHORITY[$auth]|h}--></span></p>
            <p class="info"><span>名前&nbsp;:&nbsp;<!--{* 名前 *}--><!--{$list_datas.name|h}--></span><!--{if $list_datas.name|h}-->&nbsp;様&nbsp;<!--{/if}--></p>
            <p class="info" style="width:200px;"><span>所属&nbsp;:&nbsp;<!--{* 所属 *}--><!--{$arrCompanys[$company_id]}--></span></p>
            <p class="info"><span>ログインID&nbsp;:&nbsp;<!--{* ログイン名 *}--><!--{$smarty.session.login_id|h}--></span></p>
            <ul>
        <li><a href="#bottom" class="btn-tool-format"><span>ページ下部へ</span></a></li>
                <li><a href="<!--{$smarty.const.HTTP_URL}--><!--{$smarty.const.DIR_INDEX_PATH}-->" class="btn-tool-format" target="_blank"><span>サイトを見る</span></a></li>
                <li><a href="<!--{$smarty.const.ADMIN_LOGOUT_URLPATH}-->" class="btn-tool-format">ログアウト</a></li>
            </ul>
        </div>
    </div>
</div>
<!--{* ▲HEADER *}-->

<!--{* ▼NAVI *}-->
  <div id="navi-wrap">
    	<ul id="navi" class="clearfix">
        	<li id="navi-basis" class="<!--{if $tpl_mainno eq "home"}-->on<!--{/if}-->">
        	<a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->home.php">
        <span class="level1">
          管理画面TOP
        </span>
        </a>
        	</li>
 			<!--{if $list_datas.authority=="0"}-->
        	<li id="navi-basis" class="<!--{if $tpl_mainno eq "basis"}-->on<!--{/if}-->">
            	<a><span class="level1">基本情報 管理</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`basis/subnavi.tpl"}-->
        	</li>
      <!--{/if}-->
      <!--{if $list_datas.authority=="0" || $list_datas.authority=="1"}-->
        	<li id="navi-company" class="<!--{if $tpl_mainno eq "company"}-->on<!--{/if}-->">
            	<a><span>法人 管理</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`company/subnavi.tpl"}-->
        	</li>
      <!--{/if}-->
      		<li id="navi-customer" class="<!--{if $tpl_mainno eq "customer"}-->on<!--{/if}-->">
            	<a><span>ユーザー 管理</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`customer/subnavi.tpl"}-->
        	</li>
         	<li id="navi-daylyreport" class="<!--{if $tpl_mainno eq "daylyreport"}-->on<!--{/if}-->">
            	<a><span>勤怠状況 管理</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`daylyreport/subnavi.tpl"}-->
        	</li>
        	<li id="navi-total" class="<!--{if $tpl_mainno eq "contents"}-->on<!--{/if}-->">
            	<a><span>設定</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`contents/subnavi.tpl"}-->
        	</li>
         	<li id="navi-daylyreport" class="<!--{if $tpl_mainno eq "user"}-->on<!--{/if}-->">
            	<a><span>管理ユーザー管理</span></a>
            	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`user/subnavi.tpl"}-->
        	</li>
      <!--{if $list_datas.authority=="0" }-->
          	<li id="navi-design" class="<!--{if $tpl_mainno eq "design"}-->on<!--{/if}-->">
    	    	    <a><span>コンテンツ マネージャー</span></a>
        	    	<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`design/subnavi.tpl"}-->
       		 	</li>
        		<li id="navi-system" class="<!--{if $tpl_mainno eq "system"}-->on<!--{/if}-->">
            		<a><span>システム 設定</span></a>
            		<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`system/subnavi.tpl"}-->
        		</li>
      <!--{/if}-->
    	</ul>
  </div>
<!--{* ▲NAVI *}-->

<div class="clearfix" >
  <!--{if $tpl_subtitle}-->
  <h1><span class="title"><!--{$tpl_maintitle|h}--><!--{if strlen($tpl_maintitle) >= 1 && strlen($tpl_subtitle) >= 1}-->><!--{/if}--><!--{$tpl_subtitle|h}--></span></h1>
  <!--{/if}-->
  <!--{* ▼CONTENTS *}-->
  <div id="contents" class="clearfix" >
    	<!--{include file=$tpl_mainpage}-->
  </div>
</div>
<!--{* ▲CONTENTS *}-->
<div id="bottom"></div>
<!--{* ▼FOOTER *}-->
<div id="footer">
    <div id="footer-contents">
    <div id="topagetop"><a href="#top" class="btn-tool-format">PAGE TOP</a></div>
        <div id="copyright">
      Copyright &copy; 2000-<!--{$smarty.now|date_format:"%Y"}--> <!--{$arrSiteInfo.shop_name_eng|default:$arrSiteInfo.shop_name|h}--> All Rights Reserved.
    </div>
    </div>
</div>
<!--{* ▲FOOTER *}-->

</body>
</html>

編集の結果 以下の様に表示されます。

005

画像をクリックして拡大

 

上の画像では、管理画面の”見た目”も編集して居ますが、機能的な外観に成る様にデザインも見直してみましょう。
取りあえず、今回はここまで。
次回は、変更した、管理画面のグロナビ項目に合わせてスクリプト側を編集・追加して見ます。

 

 

  • このエントリーをはてなブックマークに追加

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>