前回は、ASP.NET 2.0＋SQL Server 2005を利用した応用アプリケーションの例として「掲示板アプリケーション」の基本機能を実装しました。ここまでの内容で、記事の投稿／返信から参照までの基本的な機能が動作することが確認できたと思います。
今回は引き続き、この掲示板アプリケーションに対して、画像データのアップロード機能やRSSフィードの出力機能、エラー発生時の管理者へのメール通知機能など、付随的な機能を追加してみます。
今回作成するサンプル・プログラムのダウンロード（vs2005db_11.zip）
掲示板アプリケーションに画像アップロード機能を追加する
それではさっそく、前回のアプリケーションに対して手を加えていくことにしましょう。まずは、新規投稿／返信投稿画面に画像のアップロード機能を、個別記事表示画面にアップロードした画像を表示するための機能を、それぞれ実装します。
次の画面は新規投稿画面で添付画像を指定して記事を投稿し、その記事を個別記事表示画面で確認しているところです。
添付画像を指定して［投稿］ボタンをクリック
個別記事表示画面で投稿した記事を参照
|
| 図1 掲示板アプリケーションに追加した画像アップロード機能 |
任意の画像を新規投稿／返信投稿画面で指定してアップロードすることができる。
| |
 |
アップロードする画像を添付画像として指定する。 |
| |
 |
アップロードされた画像。 |
|
なお、本機能を動作させるに当たっては、前回作成したBbsテーブル（記事情報テーブル）に対して、画像データを格納するためのidataフィールドを追加しておく必要があります。修正したBbsテーブルのフィールド・レイアウトは以下のとおりです。
| フィールド名 |
データ型 |
概要 |
| id |
INT |
投稿コード（主キー／自動連番） |
| subject |
VARCHAR(255) |
記事の件名 |
| nam |
VARCHAR(50) |
投稿者名 |
| body |
VARCHAR(MAX) |
記事の本文 |
| idata |
VARBINARY(MAX) |
画像情報 |
| passwd |
VARCHAR(15) |
削除用パスワード |
| deleted |
BIT |
削除済みか |
| parent |
INT |
親の投稿コード（親がない場合は0） |
| last_modified |
DATETIME |
投稿日時 |
|
| 表1 修正したBbsテーブルのフィールド・レイアウト |
| 画像データを格納するためのidataフィールドを追加する。 |
それではさっそく、具体的な手順を追っていくことにしましょう。
［1］BbsShow.aspxのテンプレート・レイアウトを修正する
前回は、BbsShow.aspxに対して以下の3つを追加しました。
- 「個別記事参照」画面（ItemTemplateテンプレート）
- 「記事返信」画面（EditItemTemplateテンプレート）
- 「新規投稿」画面（InsertTemplateテンプレート）
今回は、これらテンプレートに対して画像アップロード用のFileUploadコントロールと画像を表示するためのImageコントロールを追加しておきます（図2〜4）。FileUploadコントロールは、テキストボックスとボタンの2つの要素で構成されるコントロールです。
|
| 図2 ItemTemplateテンプレートのレイアウト（「個別記事参照」画面） |
| |
|
Imageコントロール（img）を追加。 |
|
|
| 図3 EditItemTemplateテンプレートのレイアウト（「記事返信」画面） |
| |
|
FileUploadコントロール（upload）を追加。 |
|
|
| 図4 InsertItemTemplateテンプレートのレイアウト（「新規投稿」画面） |
| |
|
FileUploadコントロール（upload）を追加。 |
|
また、ItemTemplateテンプレートのImageコントロール、および、前回配置したSqlDataSourceコントロール（sds）に対して、表2の要領でプロパティ情報を設定／修正します（SqlDataSourceコントロールの修正部分は太字）。
| コントロール |
プロパティ |
設定値 |
| Image（img） |
ImageUrl |
Eval("id","BbsImage.aspx?id={0}") |
| Height |
50px |
| Width |
70px |
| Visible |
FALSE |
SqlDataSource
（sds） |
InsertCommand |
INSERT INTO Bbs(nam, subject, body, passwd, deleted, parent, last_modified, idata) VALUES (@nam, @subject, @body, @passwd, 0, 0, CURRENT_TIMESTAMP, @idata) |
| SelectCommand |
SELECT id, nam, subject, REPLACE(body, CHAR(13) + CHAR(10), '<br />') AS body, passwd, deleted, parent, last_modified, idata FROM Bbs WHERE (id = @id) AND (deleted = 0) |
| UpdateCommand |
INSERT INTO Bbs(nam, subject, body, passwd, deleted, parent, last_modified, idata) VALUES (@nam, @subject, @body, @passwd, 0, @id, CURRENT_TIMESTAMP, @idata) |
|
| 表2 Image／SqlDataSourceコントロールのプロパティ情報 |
| SqlDataSourceコントロールの修正部分は太字で示している。 |
ただし、ImageUrlプロパティのようにデータバインド式を設定したい場合には、プロパティ・ウィンドウからは入力できません。コントロール右上のタスク・メニューから［DataBindingsの編集］を選択し、表示された［＜コントロール名＞ DataBindings］ダイアログから［カスタム式］−［コード欄］に該当する式を入力してください。
ImageUrlプロパティに指定されたデータバインド式中の「BbsImage.aspx」は、クエリ情報をキーにして対応するデータベースから画像情報を取得し、バイナリ・データとして出力するための機能を提供します。詳細なコードについては後述します。
Insider.NET 記事ランキング
本日
月間
