ColdFusionカフェテリア
SAMURAIZ

 

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

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

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

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

■共通機能

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

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

 
メニュー

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

[ header.cfm ]

<cfmenu type="horizontal" selectedItemColor="##66AAEE">
  <cfmenuitem name="menu1" display="PJ情報">
    <cfmenuitem name="menu1-1" display="PJ登録" href="pjinfo01.cfm" />
    <cfmenuitem name="menu1-2" display="検索" href="pjsearch01.cfm" />
  </cfmenuitem>
  <cfmenuitem name="menu2" display="工程管理">
    <cfmenuitem name="menu2-1" display="工程登録&" href="processmng01.cfm" />
  </cfmenuitem>
  <cfmenuitem name="menu3" display="マスタ管理">
    <cfmenuitem name="menu3-1" display="顧客マスタ" href="customer01.cfm" />
    <cfmenuitem name="menu3-2" display="社員マスタ" href="employee01.cfm" />
  </cfmenuitem>
</cfmenu>

 
プロジェクト検索機能

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

[ cmn_search.cfm ]

<cfformgroup type="Panel" label="検索" >
  <cfformgroup type="horizontal" width="300">
    <cfinput type="text" name="search_customer_nm" size="20" maxlength="40"
        label="顧客名">
    <cfformitem type="spacer" height="10" />
    <cfinput type="text" name="search_project_nm" size="20" maxlength="40"
        label="プロジェクト名">
  </cfformgroup>
  <cfformgroup type="horizontal" width="300" height="80">
      <cfformitem type="spacer" width="190" />
      <cfinput type="submit" name="entry" value="検 索" height="50"width="80">
  </cfformgroup>
</cfformgroup>

 
メタタグ

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

[ meta.cfm ]

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

 

■コンポーネント

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

各画面にて顧客マスタや社員マスタ、工程マスタなどの各種マスタを参照します。それらマスタからデータを取得するfunctionを1つのコンポーネントとしてまとめます。
このコンポーネントで定義するfunctionは以下の3つ(PJ登録・PJ検索で使用する分のみ)です。
 
・顧客マスタデータ取得(getCustomerMST)
顧客を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。
 
・営業データ取得(getSales)
担当営業を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。
 
・状況データ取得(getStatus)
プロジェクトの状況を選択するプルダウンのデータを取得するfunctionです。
プロジェクト登録画面、更新画面で使用します。また、次回解説する工程管理でも使用します。
 
masterData.cfcの中に、上記getCustomerMST、getSales、getStatusMstの3つの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は以下の4つです。
 
・プロジェクト登録(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の制御部分が空行で表示されています。

<cfprocessingdirective pageencoding="utf-8" />
<cfsetting enablecfoutputonly="true" />
 
            (略)
 
<cfsetting enablecfoutputonly="false" />
<html>
 

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

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

<cfobject component="pjmng.cmp.masterData" name="objMasterData">
 
<!--- 顧客情報取得 --->
<cfinvoke component="#objMasterData#" method="getCustomerMst"
       returnvariable="retCustomer" />
 

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

<body>
<cfinclude template="./common/header.cfm">
 

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

<cfselect name="customer_cd" query="retCustomer" value="customer_cd"
      display="customer_nm" queryposition="below"
      required="true" message="顧客を選択して下さい。">
  <option name="0"></option>
</cfselect>

 

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

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

<cfobject component="pjmng.cmp.pjinfo" name="objPjinfo">
 
<!--- プロジェクト登録 --->
<cfinvoke component="#objPjinfo#" method="insProject">
  <cfinvokeargument name="customer_cd" value="#form.customer_cd#">
  <cfinvokeargument name="project_nm" value="#form.project_nm#">
  <cfinvokeargument name="exp_start_dt" value="#form.exp_start_dt#">
  <cfinvokeargument name="exp_end_dt" value="#form.exp_end_dt#">
  <cfinvokeargument name="dlv_dt" value="#form.dlv_dt#">
  <cfinvokeargument name="acpt_dt" value="#form.acpt_dt#">
  <cfinvokeargument name="ov_view" value="#form.ov_view#">
  <cfinvokeargument name="sales_cd" value="#form.sales_cd#">
  <cfinvokeargument name="status_cd" value="#form.status_cd#">
</cfinvoke>

 

■プロジェクト検索

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

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

<cfform name="frm1" action="pjsearch02.cfm" format="flash">
 
    <cfinclude template="./common/cmn_search.cfm">
</cfform>

 

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

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

<cfobject component="pjmng.cmp.pjinfo" name="objPjinfo">
 
<!--- プロジェクト情報取得 --->
<cfinvoke component="#objPjinfo#" method="getProject" returnvariable="retProject">
  <cfinvokeargument name="customer_nm" value="#form.search_customer_nm#">
  <cfinvokeargument name="project_nm" value="#form.search_project_nm#">
</cfinvoke>

 

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変数)をキーに、プロジェクトテーブルからデータを取得します。

<cfobject component="pjmng.cmp.pjinfo" name="objPjinfo">
 
<!--- プロジェクト情報取得 --->
<cfinvoke component="#objPjinfo#" method="getProjectInCode"
         returnvariable="retProjectInCode">
    <cfinvokeargument name="project_cd" value="#url.project_cd#">
</cfinvoke> 

 

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

<cfformgroup type="Panel" label="プロジェクト登録">
   <cfoutput query="retProjectInCode">
      <cfformgroup type="HBox" width="700" height="50">
         <cfformgroup type="HBox" width="100">
            <cfformitem type="text">顧客名</cfformitem>
         </cfformgroup>
      <cfformgroup type="HBox">
         <cfselect name="customer_cd" query="retCustomer" value="customer_cd"
                  display="customer_nm" queryposition="below"
                  required="true" message="顧客を選択して下さい。"
                  selected="#CUSTOMER_CD#">
            <option name="0"></option>
         </cfselect>

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

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

<cfobject component="pjmng.cmp.pjinfo" name="objPjinfo">
 
<!--- プロジェクト情報更新 --->
<cfinvoke component="#objPjinfo#" method="updProject">
   <cfinvokeargument name="project_cd" value="#url.project_cd#">
   <cfinvokeargument name="customer_cd" value="#form.customer_cd#">
   <cfinvokeargument name="project_nm" value="#form.project_nm#">
   <cfinvokeargument name="exp_start_dt" value="#form.exp_start_dt#">
   <cfinvokeargument name="exp_end_dt" value="#form.exp_end_dt#">
   <cfinvokeargument name="act_start_dt" value="#form.act_start_dt#">
   <cfinvokeargument name="act_end_dt" value="#form.act_end_dt#">
   <cfinvokeargument name="dlv_dt" value="#form.dlv_dt#">
   <cfinvokeargument name="acpt_dt" value="#form.acpt_dt#">
   <cfinvokeargument name="ov_view" value="#form.ov_view#">
   <cfinvokeargument name="sales_cd" value="#form.sales_cd#">
   <cfinvokeargument name="status_cd" value="#form.status_cd#">
</cfinvoke>

 

■ダウンロード

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

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

 

■さいごに

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

 

ColdFusionの各種情報の配信


最新情報
■2017/6/26
『ColdFusion 実験室』
実験6

■2017/3/27
ColdFusion 2016 対応
インストール セットアップ情報
CFサーバーのインストール
CFビルダーのインストール

■2016/9/20
『ColdFusion 2016 リリース
Enterprise Edition 活用資料』
記事一覧

■2016/3/30
『ColdFusion 実験室』
実験4、実験5

■2015/8/10 〜
『ColdFusion クリニック』
記事一覧(随時更新中)

■2015/4/8
『JasperReportsによる帳票出力』
2. JasperReportsによる帳票出力【後編】

■2015/3/12
アップクロス株式会社
西元 貞昭様
『JasperReportsによる帳票出力』
1. JasperReportsによる帳票出力【前編】


■2015/2/25
『ColdFusionでエクセルを使いこなそう!』
4. 【上級】ColdFusionのエクセル機能を利用したPDF帳票の紹介

ColdFusionトレーニング


ColdFusionユーザーグループ
ColdFusionユーザーグループ
Copyright 2012 Samuraiz Corporation. All Rights Reserved.