スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - | - | - |

CFメモ−ファイルアップロードと呼び出し・表示

 CFのソースコードサンプルその5です。ここでは画像のアップロードと表示を行います。
 それ以外のところはこれまでと同じ動きなのですが、ごちゃごちゃのソースが変数化によってまとまっていたりしますので、もし参考にして頂けるのであれば最新の記事のものが良いと思います。

 今回からはプログラム部分の記述が増えていくと思うので、ページ丸ごとのソースを記載します。
 また、これまで「番号」だった部分が「項目番号」と「会員番号」になっていますが、これは元々+GTDの再構築のためのソースであったためです。それをブログのメモ用に「番号」として書き換えていたのですが、もう面倒なので元のままで行きます(^^;)


*****************************************************************************************************


【MySQL】Navicatを使用


テーブル設計

テーブル設計
(クリックで拡大します)


テーブル

テーブル結果
(クリックで拡大します)


-----------------------------------------------------------------------------------------------------


【共通】config.cfm

 外部呼び出し用ファイル。


<cfset db_src = "honma_test_local">
<cfset local_path = "C:/ColdFusion8/wwwroot/workspace/schedule/img/">
<cfset server_path = "http://localhost:8500/workspace/schedule/img/">

DB、ローカルの画像保存ディレクトリ(一時保存用)のパス、サーバーの画像保存ディレクトリのパスをそれぞれ変数として定義


-----------------------------------------------------------------------------------------------------


【form】img_upl_form.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">

<cfset todayDate = dateFormat(Now(),"yyyy/mm/dd")>
<cfset timeNow = TimeFormat(Now(),"HH:mm:ss")>

今日の日付をtodayDate、現在時刻をtimeNowという変数として定義

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

<cfform action="img_upl_confirm.cfm" method="post" name="form1" enctype="multipart/form-data">
    項目番号<cfinput type="text" name="recno"><br />
    会員番号<cfinput type="text" name="uid"><br />
    日付:<cfinput type="text" name="sdate" value="#todayDate#" validate="date" mask="9999/99/99" required="yes" message="正しい日付を入力してください。"><br />
    時刻:<cfinput type="text" name="stime" value="#timeNow#" validate="time" mask="99:99:99" required="yes" message="正しい時刻を入力してください。"><br />
    タイトル<cfinput type="text" name="title" required="yes" message="タイトルを入力してください。"><br />
    画像登録<cfinput type="file" name="upimg"><br />
    内容<cfinput type="text" name="body" size="30"><br />
    登録日時<cfinput type="text" name="crtymd" value="#todayDate# #timeNow#" size="30"><br />
    更新日時<cfinput type="text" name="updymd" value="#todayDate# #timeNow#" size="30"><br />
<br />
    <cfinput type="submit" value="OK" name="submit"><br />
    <cfinput type="reset" value="Reset" name="reset"><br />
</cfform>

</body>
</html>
</cfprocessingdirective>


cffile→<input type="file">と同じ。ファイルアップロード用。


画面

formサンプル


-----------------------------------------------------------------------------------------------------


【confirm】img_upl_confirm.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">
   
<cfinclude template="config.cfm">

config.cfmを呼び出し。

<cfif #upimg# neq "">
    <cffile action="upload" filefield="upimg" destination="#local_path#" accept="image/jpeg,image/gif,image/png" nameconflict="overwrite" result="upimg_result" />
</cfif>

cfif→この場合は、「upimgが空でない場合(画像をアップロードしようとしている場合)は次の処理を行う」

cffile
・action→ファイルをアップロードする。
・filefield→ファイル選択時に使用したフィールドの名前。
・destination→アップロード先のディレクトリのパス名。
       この場合は一時保存用のローカルのパス。このページが開かれた時に処理が行われる。
・accept→許可するファイルの種類。ここではjpg、gif、pngを許可。
・nameconflict→アップロードするファイルの名前が、アップロード先のディレクトリ内のファイルと同じ場合に実行するアクション。ここでは上書き。
・result→cffileが実行したアクション・結果を変数化。

 ファイル形式がイメージ以外の場合はエラーメッセージを……と思ったのですが、なかなか上手く行かないので、その辺りはまた後日やってみようと思います。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
<cfdump var="#upimg_result#">

cfdump→デバッグ。ここでは以降のパラメータ確認のため使用。

<br />
<br />
これでOK?<br />
<br />
<cfoutput>
    項目番号:#recno#<br />
    会員番号:#uid#<br />
    日付:#sdate#<br />
    時刻:#stime#<br />
    タイトル:#title#<br />
<cfif isDefined("upimg_result")>
    画像:<img src = "#server_path##upimg_result.serverFile#"><br />
</cfif>
    内容:#body#<br />
    登録日時:#crtymd#<br />
    更新日時:#updymd#<br />
</cfoutput>

<cfform action="img_upl_entry.cfm" method="post" name="form1">
    <cfinput type="hidden" name="recno" value="#recno#">
    <cfinput type="hidden" name="uid" value="#uid#">
    <cfinput type="hidden" name="sdate" value="#sdate#">
    <cfinput type="hidden" name="stime" value="#stime#">
    <cfinput type="hidden" name="title" value="#title#">
<cfif isDefined("upimg_result")>
    <cfinput type="hidden" name="upimg" value="#upimg_result.clientFile#">
    <cfinput type="hidden" name="upimg_ext" value="#upimg_result.clientFileExt#">
</cfif>
    <cfinput type="hidden" name="body" value="#body#">
    <cfinput type="hidden" name="crtymd" value="#crtymd#">
    <cfinput type="hidden" name="updymd" value="#updymd#">
    <cfinput type="submit" value="OK" name="submit">
</cfform>

cfif
・isDefined→変数の存在を確認する関数。
 ここでは、「画像ファイルが一時保存されている場合は、そのファイル名と拡張子を送信」。

</body>
</html>
</cfprocessingdirective>


画面

confirmサンプル

 ひどいたんぽぽですね。

 突っ込んだら負けです。
 写真があったのですが、なぜかアップロードできなかったため、とりあえず絵です。原因はまたゆっくり探りたいと思います……。


-----------------------------------------------------------------------------------------------------


【entry】img_upl_entry.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">

<cfinclude template="config.cfm">

<cfset uuid = #createuuid()#>

#createuuid()#→UUIDを作成、変数化

<cfif isDefined("upimg")>
    <cffile action="rename" source="#local_path##upimg#" destination="#uuid#.#upimg_ext#">    
</cfif>

cffile
・rename→ファイルをリネーム
・source→リネームするファイルのパスを指定
・destination→変更先のファイルもしくはディレクトリを指定
 ここでは、ローカルに一時保存されたファイルをリネームしてDBに登録する。
 変数を値に戻して解釈すると、「C:/ColdFusion8/wwwroot/workspace/schedule/img/123.jpgを【作成されたUUID】.jpgにリネームする」。

<cfquery datasource="#db_src#" name="q1">
insert into SCHEDULE
        (recno,uid,sdate,stime,title,image,body,crtymd,updymd,
    <cfif isDefined("upimg")>
        img_name
    </cfif>)
values
        ('#recno#','#uid#','#sdate#','#stime#','#title#','#upimg#','#body#','#crtymd#','#updymd#',
    <cfif isDefined("upimg")>
        '#uuid#.#upimg_ext#'
    </cfif>)
</cfquery>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

登録完了。

</body>
</html>
</cfprocessingdirective>


 書き込み完了。


画面

entryサンプル

テーブル

レコード追加サンプル
(クリックで拡大します)


-----------------------------------------------------------------------------------------------------


【表示】img_upl_test.cfm

 今登録した画像をテスト表示。


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective suppresswhitespace="yes" pageencoding="utf-8">

<cfinclude template="config.cfm">

<cfquery datasource="#db_src#" name="q1">
select img_name from SCHEDULE
where recno = '9'
</cfquery>

DB「#db_src#(honma_test)」のテーブル「SCHEDULE」の「recnoが9」のレコードから、フィールド「img_name」の値を取り出す。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

<cfoutput>
    <cfif #q1.img_name# neq "">
        <img src="#server_path##q1.img_name#" /><br />
    <cfelse>
        画像がありません。
    </cfif>
</cfoutput>

</body>
</html>
</cfprocessingdirective>

cfelse→cfifタグの直下にある条件を満たさない時に行う処理。「その他の場合」。
 ここでは、「recnoが9のフィールドが空でない場合(画像ファイルがある場合)は画像を表示、そうでない場合は『画像がありません』というメッセージを表示」。


表示(上の表はデバッグ結果)

表示サンプル
くみっち | ColdFusion | 17:32 | comments(0) | trackbacks(0) | - | - |

CFメモ−とりあえずデータ全件表示

 CFのソースコードサンプルその4です。

 その2で新規登録・その3で更新したスケジュール(っぽいもの)を、簡単なテーブルで一覧表示します。順序としてはおかしいのですが(^^;)
 詳細に条件を絞り込んで表示したり、ここからどれかを選んで更新・削除したりといった処理は、正直に言うとまだできませんのでとりあえず表示のみです。


*****************************************************************************************************


■SQL

<cfquery datasource="testdb" name="q1">
select
*
from
SCHEDULE
order by
recno ASC
</cfquery>

○order by 列名/式 ASC/DESC
・ASC→昇順
・DESC→降順
 ここでは、recnoの数字の小さい順で表示。


-----------------------------------------------------------------------------------------------------


■head部分(任意)

<style type="text/css">
body {
    font-size: 12px;
}

table {
    width: 748px;
    background-color: #999999;
}

.list-t {
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

.list-u {
    text-align: left;
    background-color: #ffffff;
}

.list-uc {
    text-align: center;
    background-color: #ffffff;
}
</style>


■body部分

<table border="0" cellpadding="5" cellspacing="1">
  <tr class="list-t">
    <td width="50">番号</td>
    <td width="98">日付</td>
    <td width="98">時刻</td>
    <td width="98">タイトル</td>
    <td width="116">内容</td>
    <td width="140">登録日時</td>
    <td width="140">更新日時</td>
  </tr>
<cfoutput query="q1">
  <tr class="list-u">
    <td width="50" class="list-uc">#recno#</td>
    <td width="98">#DateFormat(date,"yyyy/mm/dd")#</td>
    <td width="98">#TimeFormat(time,"HH:mm:ss")#</td>
    <td width="98">#title#</td>
    <td width="116">#body#</td>
    <td width="140">#crtymd#</td>
    <td width="140">#updymd#</td>
  </tr>
</cfoutput>
</table>

○cfoutput query→データを取り出すクエリを指定。

○##ffffff→変数扱いにならないよう、HTMLのプログラムが絡む部分のカラーコードはこのように表記。
 上記のようにCSSを使用する場合は必要ないらしく、##にするとスタイルが効かなくなる。


-----------------------------------------------------------------------------------------------------


 以上で、DBの内容がこのように表示されます。

データのテーブル表示
(クリックで拡大します)
くみっち | ColdFusion | 09:01 | comments(0) | trackbacks(0) | - | - |

CFメモ−DBからの呼び出しと更新

 CFのソースコードサンプルその3です。

 日付や時刻をわざわざ打ち込む必要があるという、ユーザーには非常に使いづらいシステムのソースですが、まだ私に大した技術がありませんゆえ……。そのうちセレクタを使用したものを作りたいと思います。
 DBへの書き込み(新規列生成)はこちらです。


*****************************************************************************************************


 SQLのテーブルは以下のようになっています。
 uidと2列目以降は、今回のサンプルソースには使用しておりませんので無視してください。

SQLテーブルサンプル
(クリックで拡大します)


-----------------------------------------------------------------------------------------------------


【form】


■SQL

<cfquery datasource="testdb" name="q1">
select
*
from
TESTTABLE
</cfquery>

○select→DBからテーブルの値を呼び出し

○*→テーブルの全ての列

○from→テーブル名を指定


■フォーム

<cfform action="updconfirm.cfm" method="post" name="form2">
番号:<cfoutput>#q1.recno#</cfoutput>
<cfinput type="hidden" name="recno" value="#q1.recno#">
日付:<cfinput type="text" name="date" value="#DateFormat(q1.date,"yyyy/mm/dd")#" validate="date" mask="9999/99/99" required="yes" message="正しい日付を入力してください。">
時刻:<cfinput type="text" name="time" value="#TimeFormat(q1.time,"HH:mm:ss")#" validate="time" mask="99:99:99" required="yes" message="正しい時刻を入力してください。">
タイトル:<cfinput type="text" name="title" required="yes" message="タイトルを入力してください。" value="#q1.title#">
内容:<cfinput type="text" name="body" size="30" value="#q1.body#">

登録日時:<cfoutput>#q1.crtymd#</cfoutput>
<cfinput type="hidden" name="crtymd" value="#q1.crtymd#">
更新日時:<cfoutput>#q1.updymd#</cfoutput>
<cfinput type="hidden" name="updymd" value="#dateFormat(Now(),"yyyy-mm-dd")# #TimeFormat(Now(),"HH:mm:ss")#">

<cfinput type="submit" value="確認" name="submit">
<cfinput type="reset" value="リセット" name="reset">
</cfform>

○番号と登録日時は表示のみだが、値をconfirmへ投げるためにhiddenで送信。

○#DateFormat(q1.date,"yyyy/mm/dd")#→dateの値を指定の形式で表示。timeも同様(日付・時刻関数についてはこちら)。

○datefield以外でのmask→ここでは全て数字のため、9を使用。
・A=A〜Z、a〜z
・X=A〜Z、a〜z、0〜9
・9=0〜9
・?=任意の文字
・上記以外=リテラル文字


-----------------------------------------------------------------------------------------------------


【confirm】


これでOK?

<cfoutput>
番号:#recno#
日付:#date#
時刻:#time#
タイトル:#title#
内容:#body#
登録日時:#crtymd#
</cfoutput>

<cfform action="updentry.cfm" method="post" name="form2">
<cfinput type="hidden" name="date" value="#date#">
<cfinput type="hidden" name="time" value="#time#">
<cfinput type="hidden" name="title" value="#title#">
<cfinput type="hidden" name="body" value="#body#">
<cfinput type="hidden" name="updymd" value="#updymd#">
<cfinput type="submit" value="登録" name="submit">
</cfform>

○上書きする値を送信。


-----------------------------------------------------------------------------------------------------


【entry】(SQL)


<cfquery datasource="testdb" name="q1">
update TESTTABLE set date='#date#', time='#time#', title='#title#', body='#body#', updymd='#updymd#'
where recno='1';
</cfquery>

○update 更新を行うテーブル名 set 項目名1='#項目1に書き出す値#', 項目名2='#項目2に書き出す値#',……
 where 条件指定(ここではrecnoが1の列に更新)


 更新完了。

くみっち | ColdFusion | 15:06 | comments(1) | trackbacks(0) | - | - |

ColdFusion Report Builder−画面作成時のバグまとめ

 ColdFusion Report Builderとは、名前の通り、ColdFusionレポートファイルを作成できるソフトです。
 レポートをFlashPaper・PDF・Excel形式で出力することができます。弊社ではこれを、弊社が開発を担当する会社様の業務システムに利用しております。
 詳細はAdobe公式サイトのReport Builderページをご覧ください。

 ……と言っても、私がこれをいじるのはまだデザイン部分のみですので、プログラム部分の詳細は説明することができません。
 とりあえず自分でメモしておきたいということと、これからReport Builderを使用してレポートを作成したいという方ができるだけ快適に作業できるように、私の見つけた限りのReport Builderのバグを明記したいと思います。

 なぜわざわざそんなことをするのかと言いますと、Report Builderはバグの塊だからです。
 私にはソフトウェア開発経験はありませんが、利用者の立場から見ますと、一体どこをどうすればこんなことになるのかというレベルのバグです。少なくとも画面を作る上では致命的です。
 とにかく出力・印刷を繰り返しながらの、非常に根気のいる作業になります。参考までに、私はB6サイズの小さな伝票を1枚作成するのに丸一日かかりました。


*****************************************************************************


○取り消しが効かないことがある
 取り消しボタンやCtrl+Zを押しても前の状態に戻らないことがあります。また、2作業以上前の状態には戻るのに、直前の状態に戻すことだけできなかったりします。
 元に戻す術はありません。一つ一つの作業を慎重に行う必要があります。

○勝手に上書きされる
 上書きした覚えがなく、自動上書き機能もないのに、いつの間にか勝手に上書き保存されます。
 元に戻す術はありません。一つ一つの作業を慎重に行う必要があります。

○保存されていないことがある
 確かに保存したのに、一度ファイルを閉じて開き直すと、以前の状態に戻ってしまっていることがあります。
 元に戻す術は(以下省略)。諦めて再度やり直すしかありません。

○勝手にレポートサイズが変わっていることがある
 「サイズが合っていません」という旨のエラーが出る時はこれを疑います。
 ファイルを開き直すと、なぜかものすごく下に伸びて(広がって)いたりします。

○覚えのないずれが発生する
 出力すると、パーツが勝手におかしな場所に飛んでいることがあります。
 ファイルを開き直すと、やはり飛んでしまっています。正確に出力されるまで、調整して保存して開き直して……の繰り返しになります。

○まっすぐ引いたはずの線が傾いている
 デザイン作成画面ではまっすぐのはずの線が、出力したり印刷したりすると傾いていることがあります。
 作成時に線をあえて傾かせて、出力結果がまっすぐになるまで確認しながら微調整を続けるという地獄の作業になります。
 しかしファイルを一旦閉じて開き直すと、稀にまっすぐに戻っていることがあります。

 以下、出力時のサンプルです。矩形パーツは右に飛び、線もめちゃくちゃになっています。

ColdFusion Report Builderバグサンプル

○線の長さが変わっている
 出力すると、線の長さが勝手に変わっていることがあります。

○プロパティインスペクタで線の太さを変えても、画面上での変化がない
 適用はされているので、出力すると変更後の太さになっています。
 画面上では、ファイルを開き直すとほとんどの場合は正確に表示されます。

○パーツを素早く複数選択すると、パーツがずれる
 一つ一つゆっくり選択しないと、大抵3つ目で1つ目と2つ目のパーツが勝手にずれます。

○狙った場所にペーストできない
 微妙にずらす必要があります。
 貼りつけてみないとわからないので、ペーストとクリアの繰り返しになります。

○コピー&ペーストすると線が傾くことがある
 パーツを4倍ズームの状態でペーストすると、高確率で線が傾きます。
 非常にやりづらいですが、等倍もしくは2倍ズームで貼り付けると傾きません。

○プロパティインスペクタで入力した数値と実際の位置が異なることがある
 例えば、パーツがページの左端から100pxの位置にあったとします。これを120pxに変更すると、通常は右に移動しますよね。
 しかし、これがなぜか左に移動することがあります。右から120pxという訳でもなく、単純に現在の位置から左に+20px移動するのです。
 そして再度120pxと入力すると、さらに左にずれたりして訳がわからなくなります。一度100pxに戻しても、元の位置に戻らないこともあります。
 線においても、1px変更しただけでも画面上では大幅に変化してしまうことがあります。
 取り消しを試すか、パーツをクリアして作り直した方が早いです。


*****************************************************************************


 改めて……これはひどいですね(^^;)
 フリーとはいえ、これは公式に配布されているプログラムとしてどうなのだろうと思いましたが、デザインがメインではないのと、現在これに勝るプログラムがないのですから仕方ないですね。
 ColdFusionが日本でもっとメジャーになれば、開発してくれる人が出てくるかもしれませんが……なんて、人任せです(笑)。

 ちなみにここでは、一応「〜ことがある」という書き方をしていますが、実際は発生率が非常に高いです。特に線の傾きなどは5割〜8割程度の確率です、ご注意ください。
 今後も発見次第、随時追記していきます。この他のバグをご存知の方は、こちらに掲載していきたいと思いますので、お教え頂けますと幸いです。


*****************************************************************************


 最後に、とにかくやった方が良いことを書いておきます。

○たとえ線の1本でも、とりあえず一つ作業をしたら上書き保存する。
 正確に保存されるかどうかはわかりませんが、上手く作成できたと思ったら即保存ボタンを押しておいた方が後々の面倒が少ないです。

○方向キーでの移動はかなり大雑把なので、プロパティインスペクタから数値入力で調整するのが吉。
 これも正確に表示されないことが多々ありますが、パーツを作り直すよりは早いです。
 ただし複数のパーツを選択した場合、数値入力をすると大変なことになる(選択したパーツが全て同じ形・位置になってしまう)ので、マウスで地味にコピペする必要があります。

○元々ずれるものだと思って、開き直って作業する。
 最重要事項です。


 ……以上です。
くみっち | ColdFusion | 17:07 | comments(0) | trackbacks(0) | - | - |

CFメモ−フォームその2とDBへの書き込み

 CFのソースコードメモその2です。

 相変わらず、「コピペしていじる用」としか言いようのないただのメモですが。
 今回からは、ごくごく簡単なスケジュールシステム(っぽいもの)を作ります。

 MySQLに関しては、「ちょっとだけ仕組みがわかるような気がする」レベルで、かつNavicatを使用しておりますので、ここには本当に最低限のソースしか書いておりません。
 最近良さそうな本を見つけたので、一から勉強していきたいと思います。


*****************************************************************************************************


 フォームその1はこちら


【共通】(entryには不要)

<cfset crtymd = "#dateFormat(Now(),"yyyy/mm/dd")# #TimeFormat(Now(),"HH:mm:ss")#">

○cfset→値を定義
 ここでは、crtymdに以下の関数を割り当てている。

○#dateFormat(Now(),"yyyy/mm/dd")# →日付関数。ここでは現在の日付を「西暦/月/日(例:2010/12/28)」の形式で表示。

○#TimeFormat(q1.time,"HH:mm:ss")#→時刻関数。ここでは現在の時刻を「時:分:秒の形式(例:12:00:00)」で表示。
 hhが小文字の場合は12時間表示、大文字の場合は24時間表示。


-----------------------------------------------------------------------------------------------------


【form】


<cfform action="confirm.cfm" method="post" name="form1">
番号:<cfinput type="text" name="recno">
日付:<cfinput type="datefield" daynames="S" mask="yyyy-mm-dd" name="date" required="yes" message="正しい日付を入力してください。">
時刻:<cfinput type="text" name="time" required="yes" validate="time" mask="99:99:99" message="正しい時刻を入力してください。">
内容:<cfinput type="text" name="body" size="30">
登録日時:<cfoutput>#crtymd#</cfoutput>
<cfinput type="submit" value="確認" name="submit">
<cfinput type="reset" value="リセット" name="reset">
</cfform>

○cfinput type
・datefield→カレンダー入力。
・daynames→カレンダーの先頭の曜日を指定。ここでは日曜。
・mask→入力パターンを制御。ここでは日付の項目では西暦-月-日、時刻の項目では時:分:秒。


-----------------------------------------------------------------------------------------------------


【confirm】


これでOK?

<cfoutput>
番号:#recno#
日付:#date#
時刻:#time#
内容:#body#
登録日時:#crtymd#
<br />
</cfoutput>

<cfform action="entry.cfm" method="post" name="form1">
<cfinput type="hidden" name="recno" value="#recno#">
<cfinput type="hidden" name="date" value="#date#">
<cfinput type="hidden" name="time" value="#time#">
<cfinput type="hidden" name="body" value="#body#">
<cfinput type="hidden" name="crtymd" value="#crtymd#">
<cfinput type="submit" value="確認" name="submit">
</cfform>


-----------------------------------------------------------------------------------------------------


【entry】


<cfquery datasource="testdb" name="q1">
insert into TESTTABLE (recno,date,time,title,crtymd)
values ('#recno#','#uid#','#time#','#body#','#crtymd#')
</cfquery>

○cfquery
・datasource→データを取得するためのデータソースを指定


↓以下SQL↓

○insert into 行を挿入するテーブル名 (項目名1,項目名2,……)
 values ('項目1に書き出す値','項目2に書き出す値',……)


 登録完了。
くみっち | ColdFusion | 17:42 | comments(0) | trackbacks(0) | - | - |

CFメモ−フォームその1

 僭越ながら、JUGEMテーマにColdFusionを追加させて頂きました。テーマページはこちらです。
 JUGEMをご利用でCFに関する記事を書かれる方は、ぜひご選択ください。

 ロゴはそのままの使用はもちろん、忠実に作ってもアウトかもしれないということで、1分で作ったやっつけアイコンです。
 もっとおしゃれにしても良いかもしれませんね。


 これからちょこちょことCFに関することを書いていこうと思っておりますが、基本的に私のCF記事は自分用メモです。つまり、HTMLはわかるがCFは全くわからない初心者向けということになります。
 CFユーザーの方には「今更」な内容となりますのでご注意くださいませ。
 本当にメモ書きの形で書いていきますが、公開することで、自分のためだけでなく誰かのお役に立てたらと思います。


*****************************************************************************************************


+++++フォーム+++++

フォームは、form(フォーム)→confirm(入力確認)→entry(送信完了)の3段階からなる。


-----------------------------------------------------------------------------------------------------


【共通・文字化け対策】

<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">
<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>

○suppresswhitespace→ブロック内の空白文字を削除するかどうかを指定


↑↑ここまで、DOCTYPE宣言の前に記述(ページの最初から4096バイト内に配置する必要がある)↑↑

↓↓ここから、htmlの閉じタグの後につける↓↓


</cfprocessingdirective>


-----------------------------------------------------------------------------------------------------


【form】


■cfform

<cfform action="confirm.cfm" method="post" name="form1">

○action→遷移先。ここでは確認画面。

○cfform method
・post→大量のデータ転送が可能、データの内容が見えない。
・get→データ容量に制限あり、データの内容が見られる。

○name→要素名。必須。


■cfinput

・お名前:<cfinput type="text" name="simei" required="yes" message="お名前を入力してください。" size="25" />
・メールアドレス:<cfinput type="text" name="email" validate="email" required="yes" message="メールアドレスを入力してください。" size="30" />
・お問い合わせ内容:<cftextarea name="cnt" cols="50" rows="10" wrap="hard" required="yes" message="内容を入力してください。"></cftextarea>

○type→入力形式。

○required→フィールドにデータが必要かどうか。

○message→required="yes"の場合、フィールドに何も入力されなかった際に表示するメッセージ。

○validate→データ形式を制限。

○wrap→行の折り返し設定。


<cfinput name="submit" type="submit" value="確認" />
<cfinput name="reset" type="reset" value="リセット" />

</cfform>


-----------------------------------------------------------------------------------------------------


【confirm】


○#〜#で囲まれる値は変数。


■cfoutput→変数・関数の処理結果を出力

<cfoutput>
・お名前:#simei#
・メールアドレス:#email#
・お問い合わせ内容:#cnt#
</cfoutput>


○以下は変数の定義・遷移用。フォームはボタン以外見えない。

<cfform action="entry.cfm" method="post" name="form1">
<cfinput type="hidden" name="simei" value="#simei#" />
<cfinput type="hidden" name="email" value="#email#" />
<cfinput type="hidden" name="cnt" value="#cnt#" />
<cfinput type="submit" name="submit" value="送信" />
<cfinput type="reset" name="back" value="戻る" onclick="history.back()" />
</cfform>


-----------------------------------------------------------------------------------------------------


【entry】


■cfmail

↓↓ここからDOCTYPE宣言の前に記述↓↓

↓↓送信者への確認メール内容↓↓

<cfmail from="moto@test.jp" to="#email#" subject="メール内容" charset="iso-2022-jp">
<cfoutput>#simei#</cfoutput>様

○from→ここではほぼサイトマスターのアドレス

○charset="iso-2022-jp"→電子メールの文字コード。固定。

/////////////////////////////////////////////

【お問い合わせ内容】

<cfoutput>#cnt#</cfoutput>

/////////////////////////////////////////////

お問い合わせありがとうございました。

</cfmail>


↓↓問い合わせ先へのメール内容↓↓

<cfmail from="#email#" to="saki@test.jp" subject="お問い合わせ内容" charset="iso-2022-jp">

<cfoutput>#simei#</cfoutput>様からのお問い合わせ

/////////////////////////////////////////////

【お問い合わせ内容】

<cfoutput>
・お名前:#simei#
・E-Mail:#email#
・お問い合わせ内容:#cnt#
</cfoutput>

/////////////////////////////////////////////

</cfmail>


○body内には「送信完了、確認メールを送信しました」表示のみ。

くみっち | ColdFusion | 17:35 | comments(0) | trackbacks(0) | - | - |
1/1PAGES | |

06
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--