ミッションたぶんPossible

どこにでもいるシステムエンジニアのなんでもない日記です。たぶん。

ColdFusionで一番最初にやっとくと勉強になるかもしれないアプリ(一覧&詳細画面)作成

 今回ColdFusionに取り組み始めた時に、取り敢えずこの位は出来ないと、と調査がてら作ったアプリのソースコードを公開しときます。


 作ったのは我がFC東京の選手一覧画面(list.cfm)と個別選手の詳細画面(player.cfm)。MySQLに登録された1テーブルから情報を引き出して表示する、というシンプルなものです。情報と画像はFC東京の公式サイトから拝借しました。著作権等はFC東京に帰属しますので、もし参考にされるのでしたら、あくまで個人使用に留めるようにして下さい。

list.cfm
<html>
	<head>
		<title>ColdFusion Sample</title>
	</head>
	<body width="600" align="center">

		<CFQUERY name="fctokyo" dataSource="CFSample">
			 select
			 	number,
			 	firstname,
			 	familyname,
			 	position 
			 from
			 	fctokyo
			 where
			 	number<>0;
		</CFQUERY>

		<table cellpadding="1" cellspacing="1">
		   <tr>
			  <td colspan="2" bgcolor="#f0f0f0">
				 <b><i>背番号</i></b>
			  </td>
			  <td bgcolor="#f0f0f0">
				 <b><i>選手名</i></b>
			  </td>
			  <td bgcolor="#f0f0f0">
				 <b><i>ポジション</i></b>
			  </td>
		   </tr>
			<CFOUTPUT query="fctokyo">

				<CFIF CurrentRow MOD 2 IS 0>
					<CFSET color="lavender">
				<CFELSE>
					<CFSET color="white">
				</CFIF>
				
				<tr>
					<td valign="top" bgcolor="ffffed">
						<b>#fctokyo.CurrentRow#</b>
					</td>

					<td valign="top" bgcolor="#color#">
						<font size="-1"><a href="player.cfm?no=#number#">#number#</a></font>
					</td>
					<td valign="top" bgcolor="#color#">
						<font size="-1"><a href="player.cfm?no=#number#">#familyname# #firstname#</a></font>
					</td>
					<td valign="top" bgcolor="#color#">
						<font size="-1"><a href="player.cfm?no=#number#">#position#</a></font>
					</td>
				</tr>
			</CFOUTPUT>
		</table>
	</body>
</html>
player.cfm
<html>

	<head>
		<title>ColdFusion Sample</title>
	</head>
	<body width="600" align="center">
		<cfparam name = "no" default = "39">
		<CFQUERY name="fctokyo" dataSource="CFSample">
			 select
			 	*
			 from
			 	fctokyo
			 where
			 	number=#no#;
		</CFQUERY>

		<table cellpadding="1" cellspacing="1">

			<CFOUTPUT query="fctokyo">

				<CFIF number LT 10>
					<CFSET jpgname="img/0#number#.jpg">
				<CFELSE>
					<CFSET jpgname="img/#number#.jpg">
				</CFIF>

				<tr><td rowspan="8"><img src="#jpgname#" width="120" height="170"/></td>
					<td colspan="2"><strong>#firstname# #familyname#</strong> (#firstkana# #familykana#)</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>背番号</strong></td>
					<td>#number#</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>ポジション</strong></td>
					<td>#position#</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>生年月日</strong></td>
					<td>#dateFormat(birthday,"yyyy年mm月dd日")# (#old#歳)</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>出身</strong></td>
					<td>#birth#</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>身長/体重</strong></td>
					<td>#height#cm / #weight#kg</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>血液型</strong></td>
					<td>#blood#型</td>
				</tr>
				<tr>
					<td bgcolor="lavender"><strong>前所属チーム</strong></td>
					<td>#lastteam#</td>
				</tr>
				<tr>
					<td colspan="4"><strong><a href="list.cfm"><<戻る</a></strong></td>
				</tr>
			</CFOUTPUT>
		</table>
	</body>
</html>
createFctokyo.sql
create table fctokyo(
	familyname varchar(12),
	firstname varchar(12),
	familykana varchar(12),
	firstkana varchar(12),
	position varchar(2),
	number int(2),
	birthday varchar(20),
	old int(2),
	birth varchar(10),
	height varchar(3),
	weight int(3),
	blood varchar(1),
	lastteam varchar(60),
	PRIMARY KEY (number)
)ENGINE=InnoDB DEFAULT CHARSET=sjis;
fctokyo.csv
鈴木,達也,すずき,たつや,FW,11,1982/8/1,28,神奈川県,171,68,O,柏レイソル
平山,相太,ひらやま,そうた,FW,13,1985/6/6,25,福岡県,190,85,B,ヘラクレス・アルメロ(オランダ)
,リカルジーニョ,,RICARDINHO,FW,16,1988/8/8,22,ブラジル,179,73,B,アトレチコパラナエンセ(ブラジル)
重松,健太郎,しげまつ,けんたろう,FW,24,1991/4/15,19,東京都,173,68,A,FC東京U-18
前田,俊介,まえだ,しゅんすけ,FW,32,1986/6/9,24,奈良県,172,72,,大分トリニータ
大黒,将志,おおぐろ,まさし,FW,39,1980/5/4,30,大阪府,178,73,B,横浜FC
米本,拓司,よねもと,たくじ,MF,7,1990/12/3,19,兵庫県,176,65,O,県立伊丹高校
松下,年宏,まつした,としひろ,MF,8,1983/10/17,26,鹿児島県,174,70,B,アルビレックス新潟
梶山,陽平,かじやま,ようへい,MF,10,1985/9/24,24,東京都,180,73,B,FC東京U-18
中村,北斗,なかむら,ほくと,MF,14,1985/7/10,25,長崎県,167,69,A,アビスパ福岡
石川,直宏,いしかわ,なおひろ,MF,18,1981/5/12,29,神奈川県,175,69,B,横浜F・マリノス
大竹,洋平,おおたけ,ようへい,MF,19,1989/5/2,21,埼玉県,166,63,A,FC東京U-18
羽生,直剛,はにゅう,なおたけ,MF,22,1979/12/22,30,千葉県,167,63,O,ジェフユナイテッド市原・千葉
田邉,草民,たなべ,そうたん,MF,27,1990/4/6,20,東京都,175,68,A,國學院久我山高校
幸野,志有人,こうの,しゅうと,MF,28,1993/5/4,17,東京都,179,66,O,JFAアカデミー福島
ソ,ヨンドク,SEO,YongDuk,MF,30,1989/9/10,21,大韓民国,175,63,,大宮アルディージャ
徳永,悠平,とくなが,ゆうへい,DF,2,1983/9/25,26,長崎県,180,76,A,早稲田大学
森重,真人,もりしげ,まさと,DF,3,1987/5/21,23,広島県,180,72,A,大分トリニータ
高橋,秀人,たかはし,ひでと,DF,4,1987/10/17,22,群馬県,182,74,O,東京学芸大学
今野,泰幸,こんの,やすゆき,DF,6,1983/1/25,27,宮城県,178,73,A,コンサドーレ札幌
平松,大志,ひらまつ,だいし,DF,15,1983/7/3,27,栃木県,176,70,B,水戸ホーリーホック
キム,ヨングン,KIM,YoungGwon,DF,17,1990/2/27,20,大韓民国,186,74,O,全州大学(大韓民国)
平出,涼,ひらいで,りょう,DF,25,1991/7/18,19,山梨県,176,69,B,FC東京U-18
椋原,健太,むくはら,けんた,DF,33,1989/7/6,21,東京都,172,64,A,FC東京U-18
塩田,仁史,しおた,ひとし,GK,1,1981/5/28,29,茨城県,185,80,B,流通経済大学
権田,修一,ごんだ,しゅういち,GK,20,1989/3/3,21,東京都,187,83,A,FC東京U-18
阿部,伸行,あべ,のぶゆき,GK,21,1984/4/27,26,東京都,185,77,A,流通経済大学

 dataSourceはColdFusionの管理画面から登録を行います。



 メニューから「データとサービス」→「データソース」をクリックしてデータソース管理画面を表示。
「データソース名」は何でも好きな名前を入力して、「ドライバ」は自分の使用するDBの種類を選択します。今回はMySQLを使用したので「MySQL(4/5)」を選びました。



 あとはDBのアドレス、ポート番号、ユーザー名、パスワードを入力すればOK。説明は書いても書かなくてもいいです。


 で、出来あがった画面がこちら。



 選手をクリックすると個別の選手ページに遷移します。URLパラメタで先週の背番号渡して、それをplayer.cfmでSELECT文呼ぶ時の条件に指定する形ですね。



 この位ならHTMLさえあらかじめ書いてあれば30分くらいで、HTML込みでも1時間くらいで書けちゃうんじゃないでしょうか。良かったら習作の参考にして下さい。