カテゴリテーブル　category table

1. サービスウィンドウ（Ctrl-5、⌘-5 Macの場合）で、カテゴリ テーブル ( )ノードを右クリックし、「 View Data(データ表示)」を選択します。SQL エディタが開き、下の領域内に category テーブルが GUI 表現で表示されます。テーブルが空で、データはまだ追加されていないことに注意してください。
   
   
   
   また、GUI 表現で生成され使用されるネイティブ SQL クエリはエディタの上部領域に表示されることに気づいて下さい： [ select * from category ]（カテゴリから＊（すべて）選択）。
2. 「'select * from category'」を削除し、次の SQL 文を入力してください：

   INSERT INTO `category` (`name`) VALUES ('dairy'),('meats'),('bakery'),('fruit & veg');

   この文は、4つの新しいレコードを挿入します。それぞれは [ name ] 列に一意のエントリを持っています。スキーマを作成するとき、id 列は、AUTO_INCREMENT に設定されているので、あなたが値を設定することを心配する必要はありません。
3. エディタのツールバーの「 Run SQL (sqlの実行)」( ) ボタンを押します。SQL ステートメントが実行されます。
4. データが追加されていることを確認するには、再度「select * from category」クエリを実行します。これを行うには、[ SQL History (SQL履歴)]ウィンドウが使用できます。エディタのツールバーの[ SQL History]( ) ボタンをクリックして、「select * from category」エントリーをダブルクリックします。[ SQL History ]ウィンドウには、最近のIDEで実行されたすべてのSQLステートメントが表示されています。

上記の手順を実行する方法を確認するために、下記のスクリーンキャストを見てください。IDE のコード補完や提案機能のうまい使い方も確認してください。

製品テーブル　product table

1. product テーブル ( )ノードで右クリックし、「Execute Command」(コマンド実行)」を選択します。「サービス」ウィンドウで「Execute Command」メニューのオプションを選択し IDE の SQL エディタを開きます。
2. エディタで、次の INSERT 文をコピーして貼り付けします。

   --
   -- Sample data for table `product`
   --
   
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('milk', 1.70, 'semi skimmed (1L)', 1);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('cheese', 2.39, 'mild cheddar (330g)', 1);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('butter', 1.09, 'unsalted (250g)', 1);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('free range eggs', 1.76, 'medium-sized (6 eggs)', 1);
   
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('organic meat patties', 2.29, 'rolled in fresh herbs<br>2 patties (250g)', 2);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('parma ham', 3.49, 'matured, organic (70g)', 2);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('chicken leg', 2.59, 'free range (250g)', 2);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('sausages', 3.55, 'reduced fat, pork<br>3 sausages (350g)', 2);
   
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('sunflower seed loaf', 1.89, '600g', 3);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('sesame seed bagel', 1.19, '4 bagels', 3);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('pumpkin seed bun', 1.15, '4 buns', 3);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('chocolate cookies', 2.39, 'contain peanuts<br>(3 cookies)', 3);
   
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('corn on the cob', 1.59, '2 pieces', 4);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('red currants', 2.49, '150g', 4);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('broccoli', 1.29, '500g', 4);
   INSERT INTO `product` (`name`, price, description, category_id) VALUES ('seedless watermelon', 1.49, '250g', 4);
   

   上記のコードを調べて、次の点に注意してください：

   • affablebean スキーマ生成スクリプト を調べてください。注意してください。product テーブルには、non-nullable（nullを許容しない、null非許容）で自動的にインクリメントされる主キーが含まれています。テーブルに新しいレコードを挿入するたびに（そして、明示的に主キーの値を設定しないでも）、SQLエンジンは主キーを設定します。また、注意してください。product テーブルの last_update 列には、デフォルト値として CURRENT_TIMESTAMP が適用されています。 SQL エンジンは、したがって、レコードが作成された時の「現在の日付と時刻」をこのフィールドに入れます。
     
     この別の方法では、もしあなたが INSERT 文を作る必要があり、その insert がどの列に影響を与えるかが分からない場合、あなたはすべての列を知る必要があります。この例では、デフォルトで指定された値をもつフィールドはSQLエンジンが自動処理するので、あなたは NULL を入力できます。たとえば、次のステートメントは、上記のコードの最初の行と同じ結果を引き出します：

     INSERT INTO `product` VALUES (NULL, 'milk', 1.70, 'semi skimmed (1L)', NULL, 1);

     ステートメントを実行した後、そのレコードに自動的にインクリメントされた主キーが入っているのが見えるでしょう。last_update 列には、現在の日付と時刻が入っています。
   • 最後の列、「 category_id 」は、category テーブルの id 列の中の値と一致する必要があります 。あなたは既に category テーブルに４つのレコードを追加しているので、あなたが挿入しようとしている product レコードは、これらの4つのレコードの一つを参照します。あなたが product レコードを挿入しようとするとまだ存在しない category_id を参照するので、外部キー制約により失敗します。

3. Run SQL ( )ボタンをエディタのツールバーで押します。
   
   

   注： 出力ウィンドウ（Ctrl-4; ⌘-4 Macの場合）のViewに、、実行結果の入ったログファイルが表示されます。

4. product テーブル( )ノードを右クリックし、[ View Data データ表示] を選択します。あなたは16個の新しいレコードがテーブルに記載されているのを見ることができます。
   
   
   
   

   データベーステーブルのNetBeans GUI サポート

   [サービス]ウィンドウで、テーブル( )ノードを右クリックし、「 View Data　データ表示」を選択すると、IDE が、テーブルとそれに含まれるデータをの視覚表現します。（上記のイメージに表示されています）。また、追加、変更、およびテーブルデータの削除に、この GUI サポートを使用することができます。

   • 新しいレコードの追加：　新しいレコードを追加するには、「Insert Record」(レコードを挿入) ( )ボタンをクリックします。「Insert Record」ダイアログウィンドウが表示されま、新しいレコードを入力できるようになります。[OK]をクリックした時、新しいデータがデータベースにコミットされ、テーブルの GUI 表示が自動的に更新されます。
     
     

     ダイアログウィンドウ内の [Show SQL] ボタンをクリックして、その操作を始める時に適用されるSQL文を見ることができます。

   • Modify records(レコードの変更)：　あなたが既存のレコードを変更することができます。テーブルのセルを直接ダブルクリックし、フィールドのエントリを編集します。変更されたエントリは、green text(緑色文字） で表示されます。データ編集を完了するときに、[Commit Record(コミットレコード)]( )ボタンをクリックして、実際のデータベースへの変更をコミットします。（同様に、 [Cancel Edits(編集キャンセル)]( )ボタンはあなたがすでに行った編集をキャンセルします）。
   • 個々のレコード削除：　テーブルの行をクリックして、 [Delete Selected Record (選択したレコード削除)]( )ボタンを押します。また、選択した行をクリックしながらCtrlキー（⌘ Macの場合）を同時に押して複数の行を選び、削除することができます。
   • レコードをすべて削除： テーブル内のすべてのレコードを削除することを、テーブルを truncating(切り捨て) すると呼びます。[Truncate Table] ( )ボタンをクリックして、表示されたテーブルの全レコードを削除します。

   表示されたデータが実際のデータベースと再び同期することが必要な場合、「Refresh Records」(レコード更新)( )ボタンをクリックすればできます。上記に記述された機能の多くは、GUI エディタの右クリックメニューからアクセスすることができます。

   
   

コネクションプールへ ping する

1. GlassFish サーバーが既に実行中か確認します。サービスウィンドウ（Ctrl-5、⌘-5　Macの場合）でサーバーノードを展開します。GlassFish アイコン ( )の横にある小さな緑色の矢印に注意してください。
   
   （サーバーが未実行の場合、サーバーノードを右クリックして、[ Start (開始)]を選択します。 ）
2. サーバーノードを右クリックし、[ View Admin Console()管理コンソールの表示 ] を選択します。 GlassFish の管理コンソールがブラウザに開きます。
3. 管理コンソールにログインします。デフォルトのユーザ名/パスワードは： admin/adminadmin。
4. 左側のコンソールツリーで、 リソース　>　JDBC　>　コネクションプールノードを展開し、 AffableBeanPool をクリックします。メインウィンドウに、選択したコネクションプール用の [ Edit Connection Pool ]インターフェイスが表示されます。
5. ping ボタンをクリックします。 ping が成功した場合、 GlassFish サーバーは MySQL サーバ上の affablebean データベースへの接続ができています。
   
   
   
   （もしpingに失敗するときは、 トラブルシューティングを参照してください。後の章にあります。）

データソースへのリソース参照を作成する

1. プロジェクトウィンドウで、Configuration Files (設定ファイル)フォルダを展開し、web.xml をダブルクリックします。IDE のメインウィンドウでそのファイル用のグラフィカルなインターフェイスが表示されます。
2. エディタの上部にある [References参照]タブをクリックします。Resource References (リソースの参照)見出しを展開して、[ Add ] をクリックします。[ Add Resource Reference(リソースリファレンスの追加)]ダイアログが開きます。
3. ダイアログに以下の情報を入力してください：
   • Resource Name: jdbc/affablebean
   • Resource Type: javax.sql.DataSource
   • Authentication: Container
   • Sharing Scope: Shareable
   • Description: (Optional) Connects to database for AffableBean application

   

4. [OK] をクリックします。新しいリソースが Resource References (リソース参照) 見出しの下に追加されます。
   
   
   
   ここで、エディタの上部に並んでいる [XML]タブをクリックし、そのリソースが web.xml ファイルに追加されていることを確認します。<resource-ref> タグが入っていることに注意します。：

   <resource-ref>
       <description>Connects to database for AffableBean application</description>
       <res-ref-name>jdbc/affablebean</res-ref-name>
       <res-type>javax.sql.DataSource</res-type>
       <res-auth>Container</res-auth>
       <res-sharing-scope>Shareable</res-sharing-scope>
   </resource-ref>

JSPページからデータベースへのクエリ

1. 新しいJSPページを作成しデータソースをテストします。 [New File (新規ファイル)] ( )ボタンを押します。 （または、 Ctrl-n、 ⌘-N Mac ）。
2. 、Web カテゴリーを選択し、JSP ファイルタイプを選択し、 [Next 次へ]クリックします。
3. [ファイル名] に、「 testDataSource 」、[フォルダ] フィールドに「 test 」と入力します 。
   
   
   
   

   プロジェクトの Web ページには、まだ test という名前のフォルダがありません （つまり、web フォルダ内に）。[Folder フォルダ]フィールドに [ test ] と入力すると、IDE はウィザードを完了する時に、そのフォルダを作成します。

4. [ Finish ] をクリックします。 IDE が新しい testDataSource.jsp ファイルを生成し、プロジェクト内の新しい test フォルダにそれを配置します。
5. エディタで、新しい testDataSource.jsp ファイルの中の <h1> タグを含む行の末尾にカーソルを置きます ( 17行 ） 。Return キーを押し、次に Ctrl-Space しコード補完を呼び出します。オプションの一覧から「 DB Report 」を選択します。
   
   
   
   

   行番号が表示されない場合は、エディタの左余白を右クリックし「 Show Line Numbers (行番号表示)」を選択します。

6. 「 Insert DB Report（DBレポートの挿入）」ダイアログボックスで、データソースを指定し、実行しようとする SQL クエリを変更します。：
   • Data Source:　jdbc/affablebean
   • Query Statement:　 SELECT * FROM category, product WHERE category.id = product.category_id

   
7. 「OK」をクリックします。ダイアログは taglib ディレクティブ(指令)を JSTL/core と sql ライブラリの両方のファイルの先頭に追加します：
   
   

   <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

   ダイアログは、HTML テーブルにクエリの結果を表示するテンプレートコードを生成します：
   
   

   <sql:query var="result" dataSource="jdbc/affablebean">
       SELECT * FROM category, product
       WHERE category.id = product.category_id
   </sql:query>
   
   <table border="1">
       <!-- column headers -->
       <tr>
           <c:forEach var="columnName" items="${result.columnNames}">
               <th><c:out value="${columnName}"/></th>
           </c:forEach>
       </tr>
       <!-- column data -->
       <c:forEach var="row" items="${result.rowsByIndex}">
           <tr>
               <c:forEach var="column" items="${row}">
                   <td><c:out value="${column}"/></td>
               </c:forEach>
           </tr>
       </c:forEach>
   </table>

8. ブラウザでファイルを実行する前に、あなたはNetBeans GlassFish サポートの JDBC ドライバの展開オプションを有効にしていることを確認します。 [ツール] >[サーバー] を選び、サービスウィンドウを開きます。左側の列で、あなたが配置している GlassFish サーバーを選択します。メインの列で、「 Enable JDBC Driver Deployment 」オプションが選択されて、いることを確認し、[Close 閉じる]をクリックします。
   
   
   
   データベースに接続する Java アプリケーションでは、サーバーは JDBC ドライバ を必要とし、それによりSQL と Java 言語間の通信ブリッジを作成します。 MySQL の場合は、[ Connector/J J という JDBC ドライバを使用します。通常、ドライバ JAR ファイルをサーバーの lib ディレクトリに手動で配置する必要があります。 [Enable JDBC Driver Deployment ](JDBC ドライバの配置を有効にする)オプションを選択すると、サーバーはドライバが必要どうかをチェックします。もし必要なら IDE はドライバをサーバーに配置します。
9. エディタで右クリックし、[ Run File (ファイル実行)] (Shift-F6; fn-Shift-F6 on Mac) を選択します。 testDataSource.jsp ファイルがサーブレットにコンパイルされ、サーバーに配置されブラウザで実行されます。
10. 出力ウィンドウを開きます（ Ctrl-4、 ⌘ -4 Macの場合）。[ AffableBean(run) ]タブをクリック。「ドライバ JARファイル (mysql-connector-java-5.1.6-bin.jar) が配置されました。」という出力が表示されます。
    
    
11. ブラウザで testDataSource.jsp を調べます。あなたは、HTMLテーブル一覧のデータにcategory と product テーブルが含まれているのを確認します。
    
    
    
    （サーバーエラーが発生する場合は、 トラブルシューティングの提案を参照してください。 後の章。）

${initParam.productImagePath}broccoli.png

${initParam.productImagePath}${product.name}.png

index page　インデックスページ

1. プロジェクトウインドウで、index.jsp ノードをダブルクリックし、index.jsp をエディターに開きます。（すでに開いている場合は、Ctrl-Tab を押しエディターにそれを選びます）。
2. ファイルの先頭で、最初の <div> タグの前で、カーソルを空白行に置き、 「db」 を入力し、Ctrl-Space を押します。コード補完ポップアップウインドウが表示されるので、[ DB Query ] を選択します。
   
   
3. [Insert DB Query(DBクエリー挿入)]ダイアログの中で、以下の詳細を入力します。：
   • Variable Name: categories
   • Scope: page
   • Data Source: jdbc/affablebean
   • Query Statement: SELECT * FROM category

   
4. [ OK ]をクリックします。ダイアログは JSTL <sql:query> タグを使い SQL クエリを生成します。また、注意する必要があります。 そのディレクティブ(指示)が必要とした参照はページの先頭に自動的に挿入されています。（変更箇所は太字で表示されています。 ）

   <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
   <%--
       Document   : index
       Created on : Sep 5, 2009, 4:32:42 PM
       Author     : nbuser
   --%>
   
   <sql:query var="categories" dataSource="jdbc/affablebean">
       SELECT * FROM category
   </sql:query>
   
               <div id="indexLeftColumn">
                   <div id="welcomeText">
                       <p>[ welcome text ]</p>
                       

   SQLクエリは categories 変数に格納された結果セットを作成します。あなたは、EL構文（すなわち ${categories} ) を使用して結果セットにアクセスできます（下記参照）。
5. [ <div id="indexRightColumn"> ] の末尾にカーソルを置き( 22行目)、return キーを押し、[ jstl ]と入力して、Ctrl - Spaceを押し、「 JSTL For Each 」を選択します。
   
   
6. ［ Insert JSTL For Each ］ダイアログで、次の詳細を入力してください：
   • Collection: ${categories.rows}
   • Current Item of the Iteration: category

   
7. [ OK ] をクリックします。ダイアログは <c:forEach> タグを使い、forEach ループ用の構文をセットアップします。また、注意する必要があります。core taglib ディレクティブ（指令）へ必要とされる参照が、自動的にページの先頭に挿入されています。（変更箇所は太字で表示されます。）

   <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
   
       ...
   
       <div id="indexRightColumn">
           <c:forEach var="category" items="categories.rows">
           </c:forEach>
           <div class="categoryBox">

   
   

   「 rows 」が生成されたコード中の何を参照しているかわからない場合は、 categories 変数が結果セットを表していることを思い出してください。具体的には、 categories は javax.servlet.jsp.jstl.sql.Result インターフェイスを実装したオブジェクトを参照しています。このオブジェクトは、行、列名にアクセスするためのプロパティと、クエリの結果セットのサイズを提供しています。上記の例のようにドット表記法を使用する時、「 categories.rows 」は Java で「categories.getRows() 」に変換されます

8. <c:forEach> タグをページの中に統合します。<div class="categoryBox"> タグを forEach ループの中にネストすることができます。そうして、HTMLマークアップが4つのカテゴリそれぞれに生成されます。EL構文を使用して、category テーブルの id と、4つのレコードそれぞれの name 列の値を抽出します。forEach ループ外に存在する他の<div class="categoryBox"> タグを確実に削除してください。完了したときの完全な index.jsp ファイルは 次のようになります。（<c:forEach> タグと内容は太字で表示されています。）

   <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
   <%--
       Document   : index
       Created on : Sep 5, 2009, 4:32:42 PM
       Author     : nbuser
   --%>
   
   <sql:query var="categories" dataSource="jdbc/affablebean">
       SELECT * FROM category
   </sql:query>
   
               <div id="indexLeftColumn">
                   <div id="welcomeText">
                       <p>[ welcome text ]</p>
   
                       <!-- test to access context parameters -->
                       categoryImagePath: ${initParam.categoryImagePath}
                       productImagePath: ${initParam.productImagePath}
                   </div>
               </div>
   
               <div id="indexRightColumn">
                   <c:forEach var="category" items="${categories.rows}">
                       <div class="categoryBox">
                           <a href="category?${category.id}">
   
                               <span class="categoryLabelText">${category.name}</span>
   
                               <img src="${initParam.categoryImagePath}${category.name}.jpg"
                                    alt="${category.name}">
                           </a>
                       </div>
                   </c:forEach>
               </div>

9. [ Run Project(プロジェクトを実行)] ( )ボタンをクリックします。プロジェクトのインデックスページがブラウザで開きます。あなたは4つのカテゴリの名前と画像を確認して下さい。
   
   
10. ブラウザで4つのイメージのいずれかをクリックします。カテゴリページが表示されます。
    
    
    
    インデックスとカテゴリのページ間でどのようにリンクが行われるかを理解するには、 forEach ループ内にある HTML アンカータグを再度見直します：

    <a href="category?${category.id}">

    ユーザーが'ブラウザのイメージリンクをクリックする時、category へのリクエストがサーバー上のアプリケーションのコンテキストルートへ送信されます。あなたの開発環境で、URLは：

    http://localhost:8080/AffableBean/category

    以下のように説明することができます：

    • http://localhost:8080：コンピュータ上のGlassFishサーバーのデフォルトの場所
    • /AffableBean：配置されたアプリケーションのコンテキストルート
    • /category: 　リクエストへのパス

    ページビューとコントローラサーブレットの準備の中を思い出して下さい。あなたは /category に対するリクエストを ControllerServlet へマッピングしました。現在、ControllerServlet は内部的にリクエストを /WEB-INF/view/category.jsp へ転送します。それが、イメージリンクをクリックするとカテゴリページが表示される理由です。
    
    

    あなたはプロジェクトウィンドウの[ Configuration Files(構成ファイル)]のノードを展開してアプリケーションのコンテキストルートを確認することができます。 sun-web.xml ファイルを開きます。sun-web.xml ファイルは、GlassFishに固有のデプロイメント記述子です。

    
    また、注意して下さい。疑問符 (?) と category ID がリクエストURLに追加されます。
    
    

    <a href="category?${category.id}">

    これは query string(クエリ文字列)でできています。次の章でデモするとおり、あなたは、(pageContext.request.queryString}を利用してリクエストからクエリ文字列の値を抽出することができます。次に、クエリ文字列からのカテゴリIDを使い、どのカテゴリーの詳細をレスポンスに入れる必要があるか決定します。

カテゴリページ

カテゴリページの３つの外観を動的に処理する必要があります。左の列は選択されたカテゴリを表示し、テーブル見出しには選択されたカテゴリの名前を表示し、テーブルには選択されたカテゴリに属する製品の詳細情報リストを表示する必要があります。そのために、 JSTL を使用してこれらの外観を実装するために、以下の単純な２ステップのパターンを使うことができます：

1. JSTL sql タグライブラリーを使いデータベースからデータを取得します。
2. JSTL core ライブラリーと ＥＬ構文を使い、データを表示します。

各3つのタスクに個別に取り組む

左の列に選択されたカテゴリを表示する

1. プロジェクトウィンドウで、category.jsp ノードをダブルクリックし エディタでそれを開きます。（既に、開いている場合エディタでそれを選択するために Ctrl - Tab を押します。）
2. ファイルの先頭に次のSQLクエリを追加します。

   <sql:query var="categories" dataSource="jdbc/affablebean">
       SELECT * FROM category
   </sql:query>

   上記で述べたように、 [ Insert DB Query(挿入DBのクエリ)] ダイアログボックスを使用するか、または、入力中にCtrl - Space キーを押してエディタのコード提案と補完機能を使用します。

3. <div id="categoryLeftColumn"> タグの間で、既存の静的なプレースホルダのコンテンツを、次の<c:forEach> ループに置き換えます。
   
   

   <div id="categoryLeftColumn">
   
       <c:forEach var="category" items="${categories.rows}">
   
           <c:choose>
               <c:when test="${category.id == pageContext.request.queryString}">
                   <div class="categoryButton" id="selectedCategory">
                       <span class="categoryText">
                           ${category.name}
                       </span>
                   </div>
               </c:when>
               <c:otherwise>
                   <a href="category?${category.id}" class="categoryButton">
                       <div class="categoryText">
                           ${category.name}
                       </div>
                   </a>
               </c:otherwise>
           </c:choose>
   
       </c:forEach>
   
   </div>

   上記のスニペットでは、'pageContext.request.queryString' を使用してリクエストのクエリ文字列にアクセスします。 [ pageContext ] は別の暗黙オブジェクト で、JSP 式言語で定義されています。EL 式は PageContext を使用して、現在のリクエスト（ HttpServletRequest オブジェクト）にアクセスします。HttpServletRequest から、getQueryString() メソッドが呼び出され、リクエストのクエリ文字列の値を取得します。
4. JSTL core と sql taglib ディレクティブをページの先頭へ確実に追加してください 。（これはエディタのコード提案と補完機能を使用した時には自動的に行われます。）

   <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

5. プロジェクトを実行します。ブラウザで、カテゴリページへ行き、左の列のカテゴリボタンをクリックします。クリックするたびに、ページが更新され、選択されたカテゴリをハイライトします。
   
   
   
   また、注意して下さい。選択されたカテゴリの ID はページの URL に表示されます。（上の画像では、bakery(パン)のカテゴリが選択され、ブラウザのナビゲーションツールバーのURLに 　’3' 　が追加されています。 ）
   
   

   あなたのサーブレットコンテナ（すなわち、 GlassFish は）は、JSP ページをサーブレットに変換します。変換はプロジェクトの一部としてプロジェクトを実行する前に行われます。あなたは JSP ページ用に生成されたサーブレットを表示することができます。プロジェクトウィンドウでページのノードを右クリックし、「 View Servlet (サーブレットを見る)」を選びます。もちろん、最初にプロジェクトを実行する必要があります。そうしてサーブレットが生成されます。例として、 index.jsp ファイルを取り上げます。あなたが View Servlet (サーブレットを見る)を選択したとき、IDE は生成されたサーブレット、つまり index_jsp.java の読み取り専用コピーをエディターに表示します。 サーブレットはサーバー上のここにあります：

   <gf-install-dir>/glassfish/domains/domain1/generated/jsp/AffableBean/org/apache/jsp/index_jsp.java.

製品テーブルの上にある見出しを表示する

1. ファイルの先頭で、あなたがまさにインプリメントしたクエリーの下に、以下の SQL クエリーを追加します。（新しいクエリは太字で表示されています。）

   <sql:query var="categories" dataSource="jdbc/affablebean">
       SELECT * FROM category
   </sql:query>
   
   <sql:query var="selectedCategory" dataSource="jdbc/affablebean">
       SELECT name FROM category WHERE id = ?
       <sql:param value="${pageContext.request.queryString}"/>
   </sql:query>

2. JSPのEL構文を使用してクエリからカテゴリ名を抽出し、それをページに表示します。<p id="categoryTitle"> 要素に以下のように変更します。（太字で表示されています。）

   <p id="categoryTitle">${selectedCategory.rows[0].name}</p>

   [ selectedCategory ] クエリの結果には、1つのアイテムだけが入っています。（つまり、 ユーザはただ一つのカテゴリを選択できます）。「 selectedCategory.rows[0] 」を使い、結果セットの最初の行を取り出すことができます。例えば、ユーザーが「 'meats(肉)'」カテゴリを選択した場合、返される式は「'{name=meats}'」になります。その後はカテゴリ名 「 ${selectedCategory.rows[0].name} 」でアクセスできます。

3. ファイルに加えた変更を保存します（ Ctrl - S 、 ⌘ - S Mac）。
4. ブラウザに戻り、カテゴリページを更新します。今選択したカテゴリの名前が製品テーブルの上に表示されます。
   
   
   
   

   注： 　これと前の手順で示したように、あなたは明示的に再コンパイル、配置する必要はありません。あなたはコードベースを変更するたびにプロジェクトを実行します。 IDE は「 a Deploy on Save(保存と配置）」機能を提供しています。この機能は Java Webプロジェクトではデフォルトで有効になっています。この機能が有効になっているか確認するには、プロジェクトウィンドウで、プロジェクトノードを右クリックし、[プロパティ]を選択します。プロジェクトプロパティ ウィンドウで、 [Run category]をクリックし、[ 'Deploy on Save'] オプションを調べます。

テーブル内で製品の詳細を表示する

1. あなたが前に実装したクエリーの下で、そのファイルの先頭に次のSQLクエリを追加します。（新しいクエリは太字で表示されています。）

   <sql:query var="categories" dataSource="jdbc/affablebean">
       SELECT * FROM category
   </sql:query>
   
   <sql:query var="selectedCategory" dataSource="jdbc/affablebean">
       SELECT name FROM category WHERE id = ?
       <sql:param value="${pageContext.request.queryString}"/>
   </sql:query>
   
   <sql:query var="categoryProducts" dataSource="jdbc/affablebean">
       SELECT * FROM product WHERE category_id = ?
       <sql:param value="${pageContext.request.queryString}"/>
   </sql:query>

2. <table id="productTable"> タグの間で、既存の静的テーブルの行のプレースホルダ (<tr> タグ) を以下の<c:forEach> ループに置き換えます。（変更は太字で表示されています。）

   <table id="productTable">
   
       <c:forEach var="product" items="${categoryProducts.rows}" varStatus="iter">
   
           <tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
               <td>
                   <img src="${initParam.productImagePath}${product.name}.png"
                       alt="image of ${product.name}">
               </td>
               <td>
                   ${product.name}
                   <br>
                   <span class="smallText">${product.description}</span>
               </td>
               <td>
                   &euro; ${product.price} / unit
               </td>
               <td>
                   <form action="addToCart" method="post">
                       <input type="hidden"
                              name="productId"
                              value="${product.id}">
                       <input type="submit"
                              value="add to cart">
                   </form>
               </td>
           </tr>
   
       </c:forEach>
   
   </table>

   注。上記のスニペットの EL 式はテーブルの行の背景色を決定するために使用されます：

   class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}"

   <c:forEach> タグの API ドキュメントには、「varStatus 属性は LoopTagStatus インターフェイスを実装するオブジェクトを表す。」と書かれています。したがって、iter.index は現在の一連のイテレーション（繰り返し）のインデックスを取得します。継続式で、 (iter.index % 2) == 0) は、 iter.index を2 で割った時の余りを評価し、結果に基づいたブール値（True, False)を返します。最後に、 ELの条件演算子 (? :) は、もし true の場合、返される値を「 'lightBlue' 」に設定するために使用されます。それ以外の場合は「 'white'」に設定します。
   
   

   JSP 式言語の演算子の説明については、 Java EE 5のチュートリアル： JavaServer Pages Technology > Unified Expression Language > Operators　を見てください。

3. ファイルに加えた変更を保存します。（ Ctrl - S、 ⌘ - S　Mac）
4. ブラウザに戻り、カテゴリページを更新します。製品の詳細が選択したカテゴリのテーブルに表示されます。
   
   

あなたは今、このチュートリアルの単元を完了したところです。その中で、以下のことを調査しました。サーバー上にコネクションプールとデータソースを設定して、アプリケーションとデータベースを接続する方法、そしてアプリケーションからデータソースを参照しました。また、いくつかのコンテキストパラメータを作成し、どのように JSP ページからそれらにアクセスするかを学びました。最後に、アプリケーションの Web ページに JSTL タグを実装しました。それにより、データベースのデータを動的に取得し表示できました。

もしあなたがあなたの作業とプロジェクトのソリューションを比較したい場合、あなたはダウンロードして調べることができます。 AffableBean_snapshot3.zip。
プロジェクトの完成版には、提供された画像をすべて適切に表示する HTML マークアップとスタイルシートの機能強化が含まれています。それはまた、ウェルカムページのテキストとそのページフッターに基本的な実装を提供しています。

NetBeans　リソース

• MySQL データベースへの接続
• Web アプリケーション開発入門
• MySQL データベースを使用した単純な Web アプリケーションの作成
• スクリーンキャスト：NetBeans 6.5 用のデータベースサポートの改善
• NetBeans Java エディタ 6.8 リファレンスカード

MySQL リソース

• MySQL コミュニティ　ライブラリー
• MySQL 5.1 リファレンスマニュアル
• MySQL と Java
• MySQL フォーラム

JSP ＆ EL リソース

• 製品ページ： JavaServer Pages テクノロジー
• 仕様のダウンロード： JSR 245: JSP と EL 2.2 メンテナンスリリース
• APIのドキュメント： JavaServer Pages 2.1 API ドキュメント
• Java EE 5 チュートリアル -第5章：JavaServer Pagesテクノロジー ドキュメント サポート： Java EE 5 チュートリアル - 第5章: JavaServer Pages テクノロジー
• シンタックスリファレンス： JavaServer Pages 2.0 構文のリファレンス
• 公式フォーラム： Web 層 API - JavaServer Pages (JSP) と JSTL

JSTL リソース

• JavaServer Pages　標準タグライブラリ 製品ページ： JavaServer Pages 標準タグ　ライブラリー
• 仕様のダウンロード: JSR 52: JSTL 1.2 メンテナンスリリース
• 実装のダウンロード： GlassFish JSTL プロジェクトダウンロード
• タグライブラリ　ドキュメント: JSTL 1.1 タグ　リファレンス
• API ドキュメント: JSTL 1.1 API リファレンス

技術記事とリファレンスカード

• JavaServer Pages 2.0で Web アプリケーションの開発 　Developing Web Applications With JavaServer Pages 2.0
• Java EE 5 で ウェブ層へ行く：JSP 2.1 新機能の概要　Web Tier to Go With Java EE 5: Summary of New Features in JSP 2.1 Technology
• 統一式言語　Unified Expression Language
• 実用的なJSTL、第1回　Practical JSTL, Part 1
• JavaServer Pages v2.0 の構文カード　JavaServer Pages v2.0 Syntax Card
• エッセンシャル JSP 式言語のリファレンスカード　Essential JSP Expression Language Reference Card