サンプルシステムを作ってみましょう２

作成日: 2009年12月1日
作成者:ハイミン・エンタープライズ（株）	千葉　博胤佐藤　弘一
最終更新日: 2009年12月1日

サンプルシステムを作ってみましょう２

　前回の第５回にて、プロジェクト管理システムの仕様を定義しました。さて、今回から本番です！今回の第６回～第８回にかけて、実際にプログラムを組んでみましょう。

■共通機能

まずは、各機能の実装よりも先に、全体で共通する部分を先に作っていきます。
以下の３つを共通化した部品とします。

共通機能	説明
メニュー	全ての画面でメニューを表示します。
プロジェクト検索機能	プロジェクト検索画面と工程登録画面にて、顧客名とプロジェクト名で検索します。
METAタグ	各画面で使用するMETAタグです。

　
メニュー

連載第１回のColdFusionのタグの紹介で、<cfmenu>/<cfmenuitem>を解説したのを覚えていますか？そこで解説した<cfmenu>/<cfmenuitem>を使ってメニューを作ります。
PJ管理、工程管理、マスタ管理をトップレベルのメニュー項目とし、その下にPJ登録と検索、工程登録、顧客マスタと社員マスタをサブメニューとして配置します。
　

[ header.cfm ]

　
プロジェクト検索機能

検索は顧客名とプロジェクト名で行う仕様です。この共通機能は検索キーを入力するテキストボックスと、検索を行う検索ボタンのみのプログラムになります。プロジェクト検索画面と工程登録画面でインクルードします。
なお、通常テキストボックスやボタンなどの配置などは、<table>タグを使用しますが、ここで使用するフォームオブジェクトは、<CFFORM>タグのFlashフォーマット使用しているので、第１回記事にて解説した<cfformgroup>タグを使用しています。
　　

[ cmn_search.cfm ]

　
メタタグ

ページキャッシュを無効にします。キャッシュしたくないページでインクルードします。

[ meta.cfm ]

■コンポーネント

コンポーネント　-　マスタデータ参照コンポーネント

各画面にて顧客マスタや社員マスタ、工程マスタなどの各種マスタを参照します。それらマスタからデータを取得するfunctionを１つのコンポーネントとしてまとめます。
このコンポーネントで定義するfunctionは以下の３つ（PJ登録・PJ検索で使用する分のみ）です。
　
・顧客マスタデータ取得（getCustomerMST）
顧客を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。
　
・営業データ取得（getSales）
担当営業を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。
　
・状況データ取得（getStatus）
プロジェクトの状況を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。また、次回解説する工程管理でも使用します。
　
masterData.cfcの中に、上記getCustomerMST、getSales、getStatusMstの３つのfunctionを作成しています。一部抜粋して、getCustomerMSTのコードを以下に示します。
※ソースの完全版は、ダウンロードしてください。
　

[ masterData.cfc - getCustomerMST ]

顧客マスタからデータを全件取得します。datasourceは、dsnameというApplication変数に格納しています。Application.cfcのonApplicationStartメソッドでセットしています。onApplicationStartは、Applicationが最初に起動する時に実行されるので、一度セットされるとApplicationが終了するまで保持されます。

<cfcomponent name="masterData">

<cffunction name="getCustomerMST" access="remote"
        displayname="顧客データ取得"
        hint="顧客マスタから全顧客のデータを取得する"
        output="false" returntype="query">

  <cfquery name="qGetCustomerMST" datasource="#Application.dsname#">
    SELECT *
    FROM M_CUSTOMER
    ORDER BY CUSTOMER_CD
  </cfquery>

  <cfreturn qGetCustomerMST>
</cffunction>

コンポーネント　-　プロジェクト情報用コンポーネント

プロジェクト情報登録、検索、修正画面で使用するfunctionをpjinfo.cfcにまとめます。
このコンポーネントで定義するfunctionは以下の４つです。

・プロジェクト登録（insProject）
画面で入力したプロジェクト情報を登録するfunctionです。
プロジェクト登録画面で使用します。

・プロジェクト更新（updProject）
画面で入力したプロジェクト情報を更新するfunctionです。
プロジェクト更新画面で使用します。

・プロジェクト情報取得（getProject）
顧客名、プロジェクト名でプロジェクト情報を取得します。
検索機能にて使用します。

・プロジェクト情報取得（getProjectInCode）
顧客コードでプロジェクト情報を取得します。
プロジェクト情報更新で使用します。また、次回解説する工程管理でも使用します。

[ pjinfo.cfc - insProject ]

プロジェクトコードを生成するために、まずプロジェクトテーブルの件数を取得して、その件数に1を加算してコードを生成しています。そして、NumberFormat関数にて4桁になるように0埋めしています。

<cfcomponent name="pjinfo">
<cffunction name="insProject" access="public" output="false" returntype="void">
    <cfargument name="project_nm" required="yes" type="string">
    <cfargument name="customer_cd" required="yes" type="string">
    <cfargument name="exp_start_dt" required="yes" type="string">
    <cfargument name="exp_end_dt" required="yes" type="string">
    <cfargument name="dlv_dt" required="yes" type="string">
    <cfargument name="acpt_dt" required="yes" type="string">
    <cfargument name="ov_view" required="yes" type="string">
    <cfargument name="sales_cd" required="yes" type="string">
    <cfargument name="status_cd" required="yes" type="string">
    <cfquery name="getPjcd" datasource="#Application.dsname#">
        select PROJECT_CD from T_PROJECT
    </cfquery>

    <cfset newProject_cd = NumberFormat(getPjcd.RecordCount + 1,'0000')>

    <cfquery name="qInsProject" datasource="#Application.dsname#">
        （Insert文）
    </cfquery>

</cffunction>

[ pjinfo.cfc - updProject ]

プロジェクトテーブルの更新処理で、ACTUAL_STARTとACTUAL_ENDは、引数に値がある場合はその値を、ない場合はNULLをセットしています。<cfquery>タグ内に<cfif>タグを記述する事ができますので、この方法で条件分岐しています。

<cfquery name="qUpdProject" datasource="#Application.dsname#">
  UPDATE T_PROJECT
  SET
      PROJECT_NM = '#Arguments.project_nm#',
      CUSTOMER_CD = '#Arguments.customer_cd#',
                        （略）

    <cfif Arguments.act_start_dt NEQ "">
        ACTUAL_START = '#Arguments.act_start_dt#',
    <cfelse>
        ACTUAL_START = NULL,
    </cfif>
    <cfif Arguments.act_end_dt NEQ "">
        ACTUAL_END = '#Arguments.act_end_dt#',
    <cfelse>
        ACTUAL_END = NULL,
    </cfif>

                        （略）
    </cfquery>

■プロジェクト登録

プロジェクト登録　-　登録画面：[ pjinfo01.cfm ]

先頭の<cfprocessingdirective >タグですが、これはページエンコーディングを指定します。
また、<cfsetting>タグのenablecfoutputonly=trueにて、<cfoutput>タグ内のみHTML出力されます。html出力をする前に（<html>タグより上に）、例えばクエリの呼び出しやColdFusionでの各種制御部分を出力しないようする際に使用します。出力といっても、ブラウザ上に出力されるわけではなく、ブラウザからソースの表示で見ると、ColdFusionの制御部分が空行で表示されています。

プロジェクト登録画面では、顧客名、営業担当、状況のプルダウンがあり、これらはマスタからデータを取得します。

まずは、<cfobject>タグでmasterDataコンポーネントのインスタンスを生成します。第３回記事のColdFusionコンポーネントの紹介の「cfcの使用方法」で解説した記法です。そして、<cfinvoke>タグを使用して各メソッドを呼び出します。

<body>タグの直下に、先に作成したメニューをインクルードします。これは全ての画面で共通してインクルードします。

次に、getCustomerMstで取得したクエリ結果をプルダウンにセットします。
<cfselect>タグのquery属性に、<cfinvoke >タグの戻り値「retCustomer」を、display属性にプルダウンで表示する値、display属性にプルダウンのvalue値をセットします。queryposition属性は、クエリで取得したデータ以外にプルダウンに表示する項目を追加する場合に指定します。belowで、クエリ項目の上に、aboveで下に配置します。
営業担当、状況のプルダウンも同様に記述します。

プロジェクト登録　-　登録完了画面：[ pjinfo02.cfm ]

登録画面で入力されたデータを登録完了画面でデータベースに登録します。プロジェクト情報を登録するには、pjinfo.cfcのinsProjectを使用します。insProjectの引数に、POSTされてきた各データをセットします。

■プロジェクト検索

プロジェクト検索　-　検索画面：[ pjsearch01.cfm ]

この画面は検索用フォーム画面ですが、検索機能は共通化しているので、そのcfmファイルをインクルードするだけです。
共通機能のところで作成した検索機能に顧客名かプロジェクト名を入力し、検索ボタンをクリックすると、pjsearch01.cfmへ遷移します。

プロジェクト検索　-　結果画面：[ pjsearch02.cfm ]

検索共通部品からPOSTされた顧客名もしくはプロジェクト名を引数に、プロジェクト情報を取得します。

getProjectで取得したプロジェクト情報をプロジェクト一覧として表示します。getProjectの戻り値のretProjectを<cfoutput>タグで指定します。

<table width="650" class="table2">
  <tr>
    <td class="th2">修正</td>
    <td class="th2">顧客名</td>
    <td class="th2">プロジェクト名</td>
    <td class="th2">開始予定日</td>
    <td class="th2">終了予定日</td>
    <td class="th2">状況</td>
  </tr>
  <cfoutput query="retProject">
    <tr>
      <td class="td2"><a href="./pjinfo03.cfm?project_cd=#PROJECT_CD#"
                                                class="hmn_other">Edit</a></td>
      <td class="td2">#CUSTOMER_NM#</td>
      <td class="td2">#PROJECT_NM#</td>
      <td class="td2">#DateFormat(EXPECTED_START,"yyyy/mm/dd")#</td>
      <td class="td2">#DateFormat(EXPECTED_END,"yyyy/mm/dd")#</td>
      <td class="td2">#STATUS_NM#</td>
    </tr>
  </cfoutput>
</table>

プロジェクト登録　-　更新画面：[ pjinfo03.cfm ]

検索結果画面にプロジェクト一覧が表示されるので、そこからプロジェクトのリンク経由で該当するプロジェクトの更新画面に遷移します。
プロジェクト更新画面では、リンクに付加されたプロジェクトコード（url変数）をキーに、プロジェクトテーブルからデータを取得します。

プロジェクトテーブルから取得したデータを更新画面にセットします。以下のように該当するブロックを<cfoutput>タグ（query属性でgetProjectInCodeの戻り値を指定）で囲みます。

プロジェクト検索　-　プロジェクト修正画面：[ pjinfo04.cfm ]

更新画面で入力されたデータを更新完了画面でデータベースに更新します。プロジェクト情報を更新するには、pjinfo.cfcのupdProjectを使用します。updProjectの引数に、POSTされてきた各データをセットします。

■ダウンロード

テーブルを作成するスクリプトとマスタの初期データを登録するスクリプト、プログラムソースは以下からダウンロードして下さい。

	ファイル名	サイズ	サイズ
Download	31_script.zip	2kb	DBのテーブル、マスタデータ作成用のスクリプト
Download	31_source.zip	12kb	プログラムソース

■さいごに

いかがですか？思ったよりも簡単に１機能ができてしまったのではないでしょうか。掲載スペースの都合上、あまり詳しく解説できませんでしたが、おおまかな感じはつかんでいただけたのではないでしょうか。
今回は、プロジェクトの登録そして、そのプロジェクトを検索して修正する機能を解説しました。次回は、この機能に工程管理機能を加えてみます。