Webアプリ開発エンジニアのための技術情報サイト「テックスコア」

3. 図書管理サイトの作成

この資料はバージョン0.9に対応しています。

バージョン0.8に対応する資料はこちら

2006.09.13 株式会社四次元データ 里見玲爾

Tuigwaaの大きな特徴のひとつとして、データベースと連携したWebアプリケーションを簡単に作成できるということがあります。 この章では図書管理サイトを作成しましょう。社内にある技術書などの図書をテーブルに保存し、 その貸出の状態を管理するようなサイトです。
さらに貸出状態の変更や新しい図書の登録、図書の検索もできるようにします。

3.1. サイトの設定

2章と同じように、次のように設定してサイトを作成します。

「スキン設定」はデフォルトの「basic」にして、「保存」でサイトを作成したら「閲覧」からトップページに移動しましょう。

3.2. 図書データベースの作成

まず図書を保存するためのテーブルを作成しましょう。新規テーブルの作成は「データベース」タブの「新規テーブル」から行います。
テーブルの設定画面になるので、次のように設定します。

0.9では2択で「チェック式」と「選択式」のどちらかを選べます。
設定して「作成」ボタンを押すとテーブル一覧画面になり、いま作成した図書データベースが作成されていることが確認できます。

このままでは図書が1冊もない状態なので、「データ閲覧」からテーブルの詳細画面に移動し、 「新規データ入力」から図書を登録します。ここでは「ゼロからはじめるJAVA」と「Apache Struts アプリケーション開発入門」の2冊を 「貸出可」として登録します。

3.3. 図書データベースの表示

ではトップページにテーブルの内容を表示しましょう。トップページに移動し、「ページ」タブから「編集」を選択します。


はじめから書かれている内容はとりあえずすべて消すことにします。

テーブル内容を表示するには右側のプラグインのリストの「基本データベースプラグイン」の「テーブルの挿入」という部分を 使います。そこに次のように入力、選択します。

「テーブルの選択」は使用するテーブル名です。「アクションをつける」では表示されるデータから何らかのアクションをするときに 使用します。詳細ページや編集ページは別のページにすることができ、その際のページ名をテキストエリアで指定します。 もし存在しないページを入力した場合、実際に作成したページのリンクを選択するとページ編集画面になります。 「既存」ボタンはこのページ指定ですでに存在するページを指定したいときに使用します。 他の部分に関しての詳細はここではとりあげず、後述することにします。

入力したらテキストエリアの挿入する部分を一度クリックしてから「挿入」ボタンを押します。そうすると

#table(図書データベース, ,ed, ,編集ページ)

と表示されます。この文はデータベースを表示するための文です。この状態で「作成」ボタンを押すと、トップページに 図書データベースの内容が表の形で表示されます(下図)。データの行の最後の「編集」はデータの内容を編集するために使います。 ここでは図書の貸出状態を変更するためにあとで使用します。「削除」はデータの削除で、ここでは図書を廃棄するときなどに使います。

3.4. 図書登録フォームの挿入

ページ上からも新しい図書を登録できるようにしましょう。

「基本データベースプラグイン」の「フォームの挿入」から、「テーブルの選択」で「図書データベース」を選択して 「フォーム入力後のページ」に「トップページ」を指定して本文に挿入します。

「作成」を押してトップページに戻ると以下のようになり、新しい図書をサイト上から登録できるようになりました。

3.5. 貸出状態の変更

3.4節までで図書の状態の確認と新しい図書の登録ができるようになりました。この節では図書を借りるときや返却するときなどに サイト上で貸出状態を変更できるようにしましょう。今回はテーブルの編集機能を使います。表中の「ゼロからはじめるJAVA」の 「編集」を選択して「編集ページ」を作成します。
編集ページには図書のデータを変更するためのフォームを挿入します。3.4節と同様に「フォームの挿入」でテーブルに 図書データベースを選択し「フォーム入力後のページ」には「既存」から「トップページ」を選択して「挿入」ボタンで フォームを挿入します。

この状態で「作成」ボタンを押すと、「ゼロからはじめるJAVA」のデータが入ったフォームが以下のように表示されます。

状態を「貸出中」にして「送信」ボタンを押し、トップページに戻ると「ゼロからはじめるJAVA」の状態が「貸出中」に 変更されていることが確認できます。このように、トップページの表から「編集」を押すとそのデータ内容を編集することが できるようになりました。図書管理をする人は、図書の「編集」から状態を変更することでテーブル上の図書の状態を変更することが できます。

3.6. カスタムフォームとデータ挿入

前節で状態変更ができるようになりました。しかし今のやり方ではタイトルも編集できてしまうことになり、 誤ってタイトルを消してしまうなどがあると、またもう一度タイトルを入力し直すことになってしまいます。

そこで、先ほどの編集ページにはカスタムフォームという機能を使うように変更しましょう。 カスタムフォームとはあるカラムだけ入力できるようなフォームなど、特殊なフォームを作成する機能です。

カスタムフォームはテーブルごとに作成する機能です。新しくカスタムフォームを作成するには「データベース」タグから 「テーブル一覧」で図書データベースの「データ閲覧」を選択し、左のバーの中からカスタムフォームの「追加」ボタンを押します。 するとカスタムフォームの作成画面になるので、今回は次のように入力して「保存」ボタンを押します。

カスタムフォームの欄に「状態変更」が表示されたことを確認したら「編集ページ」の編集画面に移動します。 「フォームの挿入」の「カスタムフォーム」に「状態変更」を選択し入力後にトップページに戻るようにして、 3.4節で挿入したフォームの代わりにこのカスタムフォームを挿入します。挿入すると次のように表示されます。

#cform(図書データベース,状態変更,トップページ)

これで状態変更のみのフォームの挿入は完了です。状態変更しようとしている図書のタイトルは表示されないようになっているので、 タイトルを表示できるようにしましょう。
「基本データベースプラグイン」の「データの挿入」で、カラムの内容を挿入することができます。この機能は「編集」「詳細」 リンクのようにテーブルからデータが渡されるようなページで使用できます。
カスタムフォームの上に「図書データベース」の「タイトル」を挿入すると、以下のような文が挿入されます。

&data(図書データベース,タイトル);

これで「作成」ボタンを押し、一度トップページに戻って「編集」で「編集ページ」に移動してみましょう。すると以下のように、 上にタイトルが表示されその下に状態変更のみのフォームが表示されているのが確認できます。

3.7. 検索フォームの挿入

この節では登録した図書の検索フォームを作成しましょう。先ほどのカスタムフォームと同じように検索フォームは各テーブルごとに 作成します。「テーブル一覧」から「図書データベース」のページに移動し、左のバーから「検索フォーム」の「追加」ボタンを 押して検索フォーム作成画面で次のように入力します。

検索フォームの欄で「図書検索」が追加されたことを確認したら、トップページの編集画面で検索フォームを挿入します。 「フォームの挿入」で「検索フォーム」に「図書検索」を指定し、入力後にトップページに戻るように指定したら、 あとはデフォルトのまた「挿入」ボタンを押します。すると次のような文が本文に挿入されます。

#sform(図書データベース,図書検索,トップページ,10,)

検索を行うときには検索結果を表示する表が必要です。この表は「テーブルの挿入」で「検索結果の表示」にチェックを入れて 挿入します。

#table(図書データベース,_SRESULT_)

上のような文が挿入されたことを確認したら、「作成」を押してトップページから実際に図書を検索してみましょう。 検索フォームに「ゼロ」を入力して送信すると「ゼロからはじめるJAVA」が見つかり、フォームの下に表示されます(下図)。

3.8. まとめ

以上で図書管理サイトが出来上がりました。このサイトでは図書の貸出状態の確認、図書の登録、図書検索が可能です。 出来上がったサイトを確認してみましょう。

1.トップページの上部には現在社内にある図書を表示します。

2.図書の状態を変更するときは変更する図書の「編集」から貸出状態を変更することができます。

3.トップページのフォームから新規図書登録ができます。

4.トップページの検索フォームから図書の検索を行えます。

5.検索の結果はフォームの下部に表示されます。



前のページへ TECHSCOREのTOPページへ  
techscore(トップページへ)
TECHSCORE書店
TECHSCOREトップページJavaSQLXMLリッチクライアントモデリングセマンティックWebその他技術Tuigwaa