連載:Visual Studio 2005でいってみようDBプログラミング

第11回 実践アプリケーションでもっと踏み込むASP.NET 2.0の世界

山田 祥寛(http://www.wings.msn.to/
2006/12/23
Page1 Page2 Page3 Page4

 前回は、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」は、クエリ情報をキーにして対応するデータベースから画像情報を取得し、バイナリ・データとして出力するための機能を提供します。詳細なコードについては後述します。


 INDEX
  Visual Studio 2005でいってみようDBプログラミング
  第11回 実践アプリケーションでもっと踏み込むASP.NET 2.0の世界
  1.掲示板アプリケーションに画像アップロード機能を追加する(1)
    2.掲示板アプリケーションに画像アップロード機能を追加する(2)
    3.掲示板の更新情報をRSSフィードで配信する
    4.アプリケーション・エラーに関する情報を管理者にメールで通知する
 
インデックス・ページヘ  「Visual Studio 2005でいってみようDBプログラミング」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間