| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = MySQLデータベースを使用した単純なWebアプリケーションの作成 |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: MySQLデータベースを使用した単純なWebアプリケーションの作成 - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, MySQLデータベースを使用した単純なWebアプリケーションの作成 |
| |
| 執筆: Troy Giunipero |
| |
| このドキュメントでは、MySQLデータベース・サーバーに接続する単純なWebアプリケーションを作成する方法を説明します。また、link:http://www.oracle.com/technetwork/java/overview-138580.html[+JavaServer Pages+] (JSP)、link:http://www.oracle.com/technetwork/java/index-jsp-135995.html[+JavaServer Pages標準タグ・ライブラリ+](JSTL)、link:http://docs.oracle.com/javase/tutorial/jdbc/overview/index.html[+Java Database Connectivity+] (JDBC) API、2層のクライアント・サーバー・アーキテクチャなど、Web開発での基本的なアイデアやテクノロジも紹介します。このチュートリアルは、Web開発の基礎的な知識があり、MySQLデータベースを使用して知識を応用しようとしている初心者を対象としています。 |
| |
| link:http://www.mysql.com[+MySQL+]は、その速さ、柔軟性および信頼性により、Webアプリケーションで一般的に使用されているポピュラなオープン・ソース・データベース管理システムです。MySQLは、データベース内のデータへのアクセスおよび処理にSQL (_Structured Query Language_)を使用しています。 |
| |
| このチュートリアルは、link:../ide/mysql.html[+MySQL Databaseへの接続+]のチュートリアルの続きです。`MyNewDatabase`という名前のMySQLデータベースを作成済で、NetBeans IDEで接続が登録されていることを前提としています。そのチュートリアルで使用した表データはlink:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%2520Web%252Fifpwafcad.sql[+ifpwafcad.sql+]に格納されており、このチュートリアルでも必要です。このSQLファイルによって`Subject`および`Counselor`の2つの表が作成され、これらにサンプル・データが生成されます。必要に応じて、このファイルをコンピュータに保存し、NetBeans IDEで開いて、`MyNewDatabase`という名前のMySQLデータベース上で実行します。 |
| |
| |
| image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"] |
| |
| |
| *このチュートリアルに従うには、次のソフトウェアとリソースが必要です。* |
| |
| |=== |
| |ソフトウェアまたはリソース |必須バージョン |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4、8.0、Java EEバンドル版 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン7または8 |
| |
| |link:http://dev.mysql.com/downloads/mysql/[+MySQLデータベース・サーバー+] |5.x |
| |
| |MySQLコネクタ/J JDBCドライバ |バージョン5.x |
| |
| |GlassFish Server Open Source Edition |3.xまたは4.x |
| |=== |
| |
| *注意: * |
| |
| * NetBeans IDEのJavaダウンロード・バンドルを使用して、GlassFishサーバーをインストールできます。このチュートリアルを実施するには、GlassFishサーバーが必要になります。 |
| * プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%2520Web%252FIFPWAFCAD.zip[+サンプル・アプリケーションをダウンロード+]できます。 |
| |
| |
| |
| [[planStructure]] |
| == 構造の計画 |
| |
| 単純なWebアプリケーションは、クライアントがサーバーと直接通信する_2層アーキテクチャ_を使用して設計できます。このチュートリアルのJava Webアプリケーションは、Java Database Connectivity APIを使用してMySQLデータベースと直接通信します。基本的に、アプリケーション・サーバー(GlassFishサーバー)が認識するJavaコードと、SQL内の任意の内容、つまりデータベース・サーバー(MySQL)が認識する言語との間で通信を有効にするのは、link:http://dev.mysql.com/downloads/connector/j/[+MySQL Connector/J JDBCドライバ+]です。 |
| |
| このチュートリアルでビルドするアプリケーションには、2つのJSPページの作成が含まれます。各ページで、HTMLとCSSを使用して単純なインタフェースを実装します。また、データベースに対して直接問合せを実行し、取得したデータを2つのページに挿入するロジックを実行するために、JSTLテクノロジを使用します。この2つのデータベース表は`Subject`と`Counselor`で、link:../ide/mysql.html[+MySQLデータベースへの接続+]のチュートリアルで完成させるMySQLデータベース`MyNewDatabase`に含まれています。次の2層方式のシナリオについて考えてみます。 |
| |
| image::images/ifpwafcad-structure.png[title="2層Webアプリケーションのサンプル構造"] |
| |
| 開始ページ(`index.jsp`)では、単純なHTMLフォームがユーザーに表示されます。ブラウザが`index.jsp`をリクエストすると、ページ内のJSTLコードが`MyNewDatabase`に対して問合せを開始します。`Subject`データベース表からデータを取得し、そのデータをページに挿入してからブラウザに送信します。ユーザーが開始ページのHTMLフォームから選択内容を送信すると、そのレスポンス・ページ(`response.jsp`)に対するリクエストが開始されます。ページ内のJSTLコードは、`MyNewDatabase`に対する問合せをもう一度開始します。今度は、`Subject`表と`Counselor`表の両方からデータが取得され、ページに挿入されます。これにより、ページがブラウザに返されたときに、ユーザーは自分の選択内容に基づいたデータを表示できます。 |
| |
| 前述のシナリオを実装するため、IFPWAFCAD (The International Former Professional Wrestlers' Association for Counseling and Development)という架空の企業向けに単純なアプリケーションを開発します。 |
| |
| |
| === index.jsp |
| |
| image::images/index-page.png[title="ブラウザに表示されたindex.jsp"] |
| |
| |
| == response.jsp |
| |
| image::images/response-page.png[title="ブラウザに表示されたresponse.jsp"] |
| |
| |
| |
| [[createProject]] |
| == 新規プロジェクトの作成 |
| |
| 最初に、IDEで新しいJava Webプロジェクトを作成します。 |
| |
| 1. メイン・メニューから「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択します。「Java Web」カテゴリを選択し、「Webアプリケーション」を選択します。「次」をクリックします。 |
| |
| image::images/new-project.png[title="IDEの新規プロジェクト・ウィザードを使用した新規プロジェクトの作成"] |
| |
| 新規プロジェクト・ウィザードを使用すると、標準的なIDEプロジェクト内に空のWebアプリケーションを作成できます。標準的なプロジェクトでは、IDEが生成したAntビルド・スクリプトを使用して、アプリケーションをコンパイル、デプロイおよび実行します。 |
| |
| |
| |
| . 「プロジェクト名」に「*IFPWAFCAD*」と入力します。また、コンピュータ上でのプロジェクトの場所を指定します。デフォルトでは、IDEはホーム・ディレクトリの`NetBeansProjects`フォルダにプロジェクトを配置します。「次」をクリックします。 |
| |
| |
| . 「サーバーと設定」パネルで、アプリケーションの実行に使用するサーバーとしてGlassFishサーバーを指定します。 |
| |
| *注意: *GlassFishサーバーは、Javaバージョンのlink:https://netbeans.org/downloads/index.html[+NetBeans IDE+]がインストールされている場合に、「サーバー」ドロップダウン・フィールドに表示されます。GlassFishサーバーはダウンロードに含まれているため、自動的にIDEに登録されます。このプロジェクトで他のサーバーを使用する場合は、「サーバー」ドロップダウン・フィールドの横にある「追加」ボタンをクリックし、他のサーバーをIDEに登録します。ただし、GlassFishサーバー以外のサーバーの操作については、このチュートリアルでは説明しません。 |
| |
| |
| |
| . 「Java EEバージョン」フィールドで「*Java EE 5*」を選択します。 |
| |
| image::images/server-settings.png[title="新規Webアプリケーション・ウィザードでのサーバー設定の指定"] |
| |
| Java EE 6およびJava EE 7 Webプロジェクトでは`web.xml`デプロイメント・ディスクリプタを使用する必要はなく、Java EE 6およびJava EE 7プロジェクトのNetBeansプロジェクト・テンプレートには`web.xml`ファイルは含まれていません。ただし、このチュートリアルでは、デプロイメント・ディスクリプタでデータ・ソースを宣言する方法について説明し、Java EE 6またはJava EE 7固有の機能に依存しないため、プロジェクトのバージョンをJava EE 5に設定できます。 |
| |
| *注意:*同様に、プロジェクトのバージョンをJava EE 6またはJava EE 7に設定し、`web.xml`デプロイメント・ディスクリプタを作成することもできます。これを行うには、新規ファイル・ウィザードから「Web」カテゴリを選択し、「標準のデプロイメント・ディスクリプタ」を選択します。 |
| |
| |
| |
| . 「終了」をクリックします。IDEでアプリケーション全体のプロジェクト・テンプレートが作成され、空のJSPページ(`index.jsp`)がエディタに表示されます。`index.jsp`ファイルはアプリケーションの開始ページとして動作します。 |
| |
| |
| [[prepareInterface]] |
| == Webインタフェースの準備 |
| |
| 最初に、開始ページ(`index.jsp`)とレスポンス・ページ(`response.jsp`)を準備します。開始ページには、ユーザーのデータを取り込むために使用するHTMLフォームを実装します。また、どちらのページにも、構造化された形でデータを表示するHTML表を実装します。この項では、両方のページの外観を整えるためのスタイル・シートも作成します。 |
| |
| * <<welcomePage,開始ページの設定>> |
| * <<responsePage,レスポンス・ページの作成>> |
| * <<stylesheet,スタイル・シートの作成>> |
| |
| |
| [[welcomePage]] |
| === 開始ページの設定 |
| |
| エディタで`index.jsp`が開いていることを確認します。ファイルがまだ開いていない場合、「プロジェクト」ウィンドウの「IFPWAFCAD」プロジェクトの「Webページ」ノードで「`index.jsp`」をダブルクリックします。 |
| |
| 1. エディタで、`<title>`タグ間のテキストを「`IFPWAFCAD Homepage`」に変更します。 |
| 2. `<h1>`タグ間のテキストを「`Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!`」に変更します。 |
| 3. メイン・メニューで「ウィンドウ」>「パレット」([Ctrl]-[Shift]-[8]、Macの場合は[⌘]-[Shift]-[8])を選択してIDEのパレットを開きます。ポインタをHTMLカテゴリの「表」アイコン上に置くと、項目のデフォルトのコード・スニペットが表示されます。 |
| |
| image::images/palette.png[title="項目の上にポインタを置いてコード・スニペットが表示されたパレット"] |
| |
| [tips]#「パレット」は好みにあわせて構成できます。「パレット」を右クリックして「大きなアイコンを表示」と「項目の名前を非表示」を選択すると、上のイメージのようになります。# |
| |
| |
| . `<h1>`タグのすぐ後ろの場所にカーソルを置きます。ここに、新しいHTML表を実装します。「パレット」で「表」アイコンをダブルクリックします。 |
| |
| |
| . 表示される「挿入表」ダイアログで次の値を指定し、「OK」をクリックします。 |
| |
| * *行*: 2 |
| * *列*: 1 |
| * *境界線のサイズ*: 0 |
| HTML表コードが生成され、ページに追加されます。 |
| |
| |
| . 次の内容を、表の見出しと、表の最初の行のセルに追加します(追加する内容は*太字*で表示)。 |
| |
| [source,xml] |
| ---- |
| |
| <table border="0"> |
| <thead> |
| <tr> |
| <th>*IFPWAFCAD offers expert counseling in a wide range of fields.*</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>*To view the contact details of an IFPWAFCAD certified former |
| professional wrestler in your area, select a subject below:*</td> |
| </tr> |
| ---- |
| |
| |
| . 表の最後の行にHTMLフォームを挿入します。そのためには、2番目のペアの`<td>`タグの間にカーソルを置き、パレットの「HTMLフォーム」(image:images/html-form-icon.png[])アイコンをダブルクリックします。「挿入フォーム」ダイアログで、「アクション」テキスト・フィールドに「`response.jsp`」と入力し、「OK」をクリックします。 |
| |
| image::images/insert-form.png[title="「挿入フォーム」ダイアログでのフォーム設定の指定"] |
| |
| |
| . `<form>`タグの間に次の内容を入力します(追加する内容は*太字*で表示)。 |
| |
| [source,xml] |
| ---- |
| |
| <tr> |
| <td> |
| <form action="response.jsp"> |
| *<strong>Select a subject:</strong>* |
| </form> |
| </td> |
| </tr> |
| ---- |
| |
| |
| . [Enter]を押して、追加したコンテンツの後に空の行を追加し、パレットで「ドロップダウン・リスト」をダブルクリックして、「ドロップダウンの挿入」ダイアログ・ボックスを開きます。 |
| |
| |
| . 「ドロップダウンの挿入」ダイアログの「名前」テキスト・フィールドに「`subject_id`」と入力し、「OK」をクリックします。ドロップダウン・リストのコード・スニペットがフォームに追加されます。 |
| |
| ドロップダウン・リストのオプションの数は、ここでは重要ではありません。チュートリアルの後の手順で、Subjectデータベース表から収集したデータに基づいてオプションを動的に生成するJSTLタグを追加します。 |
| |
| |
| |
| . 送信ボタン項目(image:images/submit-button.png[])を、先ほど追加したドロップダウン・リストの直後に追加します。これは、パレットを使用するか、前述のステップのようにエディタのコード補完を呼び出すことで操作できます。「挿入ボタン」ダイアログで、「ラベル」テキスト・フィールドと「名前」テキスト・フィールドの両方に「`submit`」と入力し、「OK」をクリックします。 |
| |
| |
| . コードをフォーマットするには、エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F]、Macの場合は[Ctrl]-[Shift]-[F])を選択します。コードが自動的にフォーマットされ、次のような外観になります。 |
| |
| [source,xml] |
| ---- |
| |
| <body> |
| <h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former |
| Professional Wrestlers' Association for Counseling and Development! |
| </h2> |
| |
| <table border="0"> |
| <thead> |
| <tr> |
| <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>To view the contact details of an IFPWAFCAD certified former |
| professional wrestler in your area, select a subject below:</td> |
| </tr> |
| <tr> |
| <td> |
| <form action="response.jsp"> |
| <strong>Select a subject:</strong> |
| <select name="subject_id"> |
| <option></option> |
| </select> |
| <input type="submit" value="submit" name="submit" /> |
| </form> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </body> |
| ---- |
| |
| このページをブラウザで表示するには、エディタで右クリックし、「ファイルを実行」([Shift]-[F6]、Macの場合は[Fn]-[Shift]-[F6])を選択します。これを実行すると、JSPページが自動的にコンパイルされ、サーバーにデプロイされます。デフォルト・ブラウザが開き、デプロイされた場所からページが表示されます。 |
| |
| image::images/browser-output.png[title="ブラウザに表示されたindex.jsp"] |
| |
| |
| [[responsePage]] |
| === レスポンス・ページの作成 |
| |
| `response.jsp`のインタフェースを準備するため、プロジェクト内にファイルを作成しておく必要があります。このページに表示される内容のほとんどが、JSPテクノロジを使用して動的に生成されます。そのため、次の手順では、後でJSPコードに置き換えるプレースホルダ(_placeholder_)を追加します。 |
| |
| 1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「新規」>「JSP」を選択します。新規JSPファイル・ウィザードが開きます。 |
| 2. 「JSPファイル名」フィールドに「`response`」と入力します。「場所」フィールドには現在「Webページ」が選択されています。これは、プロジェクトの`web`ディレクトリにファイルが作成されることを意味します。この場所は、開始ページ`index.jsp`がある場所と同じです。 |
| 3. その他のデフォルト設定を受け入れ、「終了」をクリックします。新しい`response.jsp`ページのテンプレートが生成され、エディタ内に表示されます。また、新しいJSPノードが「プロジェクト」ウィンドウの「Webページ」の下に表示されます。 |
| |
| image::images/response-jsp-node.png[title="「プロジェクト」ウィンドウに表示されたresponse.jspノード"] |
| |
| |
| . エディタで、タイトルを「`IFPWAFCAD - {placeholder}`」に変更します。 |
| |
| |
| . `<h1>Hello World!</h1>`行(`<body>`タグの間にあります)を除去し、次のHTML表をコピーしてページの本文に貼り付けます。 |
| |
| [source,xml] |
| ---- |
| |
| <table border="0"> |
| <thead> |
| <tr> |
| <th colspan="2">{placeholder}</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><strong>Description: </strong></td> |
| <td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td> |
| </tr> |
| <tr> |
| <td><strong>Counselor: </strong></td> |
| <td>{placeholder} |
| <br> |
| <span style="font-size:smaller; font-style:italic;"> |
| member since: {placeholder}</span> |
| </td> |
| </tr> |
| <tr> |
| <td><strong>Contact Details: </strong></td> |
| <td><strong>email: </strong> |
| <a href="mailto:{placeholder}">{placeholder}</a> |
| <br><strong>phone: </strong>{placeholder} |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| ---- |
| |
| このページをブラウザで表示するには、エディタで右クリックし、「ファイルを実行」([Shift]-[F6]、Macの場合は[Fn]-[Shift]-[F6])を選択します。コンパイルされたページがGlassFishサーバーにデプロイされ、デフォルトのブラウザで開かれます。 |
| |
| image::images/browser-response.png[title="ブラウザに表示されたresponse.jsp"] |
| |
| |
| [[stylesheet]] |
| === スタイル・シートの作成 |
| |
| Webページの見た目を整える単純なスタイル・シートを作成します。このチュートリアルは、スタイル・ルールの機能について、およびスタイル・ルールが`index.jsp`と`response.jsp`内の該当するHTML要素にどのように影響するかについて、実用的な知識がある方を対象としています。 |
| |
| 1. IDEのメイン・ツールバーで「新規ファイル」(image:images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「Web」カテゴリを選択し、「Cascading Style Sheet」を選択して「次」をクリックします。 |
| 2. 「CSSファイル名」に「`style`」と入力し、「終了」をクリックします。空のCSSファイルが作成され、`index.jsp`および`response.jsp`と同じプロジェクトの場所に配置されます。これで、`style.css`のノードが「プロジェクト」ウィンドウのプロジェクト内に表示されるようになり、ファイルがエディタに表示されます。 |
| 3. エディタで、次の内容を`style.css`ファイルに追加します。 |
| |
| [source,java] |
| ---- |
| |
| body { |
| font-family: Verdana, Arial, sans-serif; |
| font-size: smaller; |
| padding: 50px; |
| color: #555; |
| } |
| |
| h1 { |
| text-align: left; |
| letter-spacing: 6px; |
| font-size: 1.4em; |
| color: #be7429; |
| font-weight: normal; |
| width: 450px; |
| } |
| |
| table { |
| width: 580px; |
| padding: 10px; |
| background-color: #c5e7e0; |
| } |
| |
| th { |
| text-align: left; |
| border-bottom: 1px solid; |
| } |
| |
| td { |
| padding: 10px; |
| } |
| |
| a:link { |
| color: #be7429; |
| font-weight: normal; |
| text-decoration: none; |
| } |
| |
| a:link:hover { |
| color: #be7429; |
| font-weight: normal; |
| text-decoration: underline; |
| } |
| ---- |
| |
| |
| . スタイル・シートを`index.jsp`と`response.jsp`にリンクします。両方のページで、`<head>`タグの間に次の行を追加します。 |
| |
| [source,java] |
| ---- |
| |
| <link rel="stylesheet" type="text/css" href="style.css"> |
| ---- |
| [tips]#エディタで開かれているファイル間をすばやく移動するには、[Ctrl]-[Tab]を押して目的のファイルを選択します。# |
| |
| |
| |
| [[prepareCommunication]] |
| == アプリケーションとデータベース間の通信の準備 |
| |
| サーバーとデータベースとの間の通信を実装するための最も効率的な方法は、データベース_接続プール_を設定することです。クライアント・リクエストごとに新しい接続を作成すると、特にアプリケーションが大量のリクエストを継続的に受け取る場合は、かなり時間がかかる可能性があります。これを解決するため、接続プール内に多数の接続が作成されて管理されます。アプリケーションのデータ・レイヤーへのアクセスを要求する受信リクエストがあると、作成済の接続がプールから使用されます。同様に、リクエストが完了すると、その接続は閉じられずに、プールに返されます。 |
| |
| サーバー用のデータ・ソースと接続プールの準備ができたら、そのデータ・ソースを使用するようアプリケーションに指示する必要があります。これは通常、アプリケーションの`web.xml`デプロイメント・ディスクリプタ内にエントリを作成することで実行します。最後に、データベース・ドライバ(MySQL Connector/J JDBCドライバ)がサーバーにアクセスできることを確認する必要があります。 |
| |
| *重要: *これ以降では、`MyNewDatabase`という名前のMySQLデータベースが設定され、このデータベースにlink:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%2520Web%252Fifpwafcad.sql[+ifpwafcad.sql+]で提供されるサンプル・データが格納されている必要があります。このSQLファイルによって`Subject`および`Counselor`の2つの表が作成され、これらにサンプル・データが生成されます。これを実行していない場合、またはこの作業に関する支援が必要な場合は、作業を進める前に、link:../../docs/ide/mysql.html[+MySQLデータベースへの接続+]を参照してください。 |
| |
| また、このチュートリアルでデータ・ソースを作成してGlassFishサーバーで操作するために、データベースをパスワードで保護しておく必要があります。パスワードが設定されていないデフォルトのMySQL`root`アカウントを使用している場合は、コマンド行プロンプトからパスワードを設定できます。 |
| |
| このチュートリアルでは、パスワードの例として`nbuser`を使用します。パスワードを`_nbuser_`に設定するには、コマンド行プロンプトでMySQLのインストール・ディレクトリの`bin`ディレクトリに移動し、次のように入力します。 |
| |
| |
| [source,java] |
| ---- |
| |
| shell> mysql -u root |
| mysql> UPDATE mysql.user SET Password = PASSWORD('_nbuser_') |
| -> WHERE User = 'root'; |
| mysql> FLUSH PRIVILEGES; |
| ---- |
| |
| 詳細は、MySQL公式リファレンス・マニュアルのlink:http://dev.mysql.com/doc/refman/5.1/en/default-privileges.html[+初期MySQLアカウントの保護+]を参照してください。 |
| |
| |
| 1. <<setUpJDBC,JDBCデータ・ソースと接続プールの設定>> |
| 2. <<referenceDataSource,アプリケーションからのデータ・ソースの参照>> |
| 3. <<addJar,サーバーへのデータベース・ドライバのJARファイルの追加>> |
| |
| |
| [[setUpJDBC]] |
| === JDBCデータ・ソースと接続プールの設定 |
| |
| GlassFish Server Open Source Editionには、開発者に意識させることなく接続プール機能を提供する、DBCP (データベース接続プール)ライブラリがあります。このライブラリを利用するには、アプリケーションが接続プール用に使用できるサーバーのlink:http://docs.oracle.com/javase/tutorial/jdbc/overview/index.html[+Java Database Connectivity+] (JDBC)_データ・ソース_を構成する必要があります。 |
| |
| JDBCテクノロジの詳細は、link:http://docs.oracle.com/javase/tutorial/jdbc/basics/index.html[+Javaチュートリアル: JDBCの基本+]を参照してください。 |
| |
| データ・ソースは、GlassFishサーバーの管理コンソール内で直接構成するか、次に説明するように、アプリケーションが必要とするリソースを`glassfish-resources.xml`ファイル内で宣言できます。アプリケーションがデプロイされると、サーバーがリソース宣言を読み取り、必要なリソースを作成します。 |
| |
| 次の手順は、接続プールと、その接続プールに依存するデータ・ソースを宣言する方法です。NetBeansの新規JDBCリソース・ウィザードを使用すると、両方のアクションを実行できます。 |
| |
| 1. IDEのメイン・ツールバーで「新規ファイル」(image:images/new-file-btn.png[])ボタンを押して、新規ファイル・ウィザードを開きます。「GlassFish」サーバー・カテゴリを選択し、「JDBCリソース」を選択して「次」をクリックします。 |
| 2. ステップ2の「一般属性」で、「新規のJDBC接続プールを作成」オプションを選択し、「JNDI名」テキスト・フィールドに「*jdbc/IFPWAFCAD*」と入力します。 |
| |
| image::images/jdbc-resource-wizard.png[title="JDBCリソース・ウィザードでのデータ・ソース設定の指定"] |
| |
| [tips]#JDBCデータ・ソースは、link:http://www.oracle.com/technetwork/java/jndi/index.html[+JNDI+] (Java Naming and Directory Interface)に依存します。JNDI APIは、アプリケーションでデータ・ソースを検索、利用するための共通の手段を提供します。詳細は、link:http://docs.oracle.com/javase/jndi/tutorial/[+JNDIチュートリアル+]を参照してください。# |
| |
| |
| . (オプション)データ・ソースには説明を追加できます。たとえば、「`IFPWAFCADアプリケーション用のデータを提供するデータベースにアクセスします`」と入力します。 |
| |
| |
| . 「次」をクリックし、もう一度「次」をクリックして、ステップ3「追加のプロパティ」をスキップします。 |
| |
| |
| . ステップ4で「JDBC接続プール名」に「*IfpwafcadPool*」と入力します。「既存の接続から抽出」オプションが選択されていることを確認し、ドロップダウン・リストから「`jdbc:mysql://localhost:3306/MyNewDatabase`」を選択します。「次」をクリックします。 |
| |
| image::images/jdbc-resource-wizard2.png[title="JDBCリソース・ウィザードでの接続プール設定の指定"] |
| |
| *注意:* IDEで設定されたデータベース接続がある場合は、ウィザードで検出されます。そのため、この時点で`MyNewDatabase`データベースへの接続がすでに作成されている必要はありません。作成済の接続を確認するには、「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「データベース」カテゴリで接続ノード(image:images/connection-node-icon.png[])を検索します。 |
| |
| |
| . 手順5で、「リソースの型」ドロップダウン・リストで「`javax.sql.ConnectionPoolDataSource`」を選択します。 |
| |
| IDEは、前のステップで指定したデータベース接続から情報を抽出し、新規接続プール用の名前と値のプロパティを設定することに注意してください。 |
| |
| image::images/jdbc-resource-wizard3.png[title="選択したデータベース接続から抽出された情報に基づくデフォルト値"] |
| |
| |
| . 「終了」をクリックします。ウィザードによって`glassfish-resources.xml`ファイルが生成され、指定したデータ・ソースと接続プール用のエントリが格納されます。 |
| |
| 「プロジェクト」ウィンドウで、「サーバー・リソース」ノードに作成した`glassfish-resources.xml`ファイルを開くことができます。`<resources>`タグ内には、前に指定した値を持つデータ・ソースと接続プールが宣言されています。 |
| |
| 新しいデータ・ソースと接続プールが実際にGlassFishサーバーに登録されていることを確認するには、プロジェクトをサーバーにデプロイして、IDEの「サービス」ウィンドウ内でリソースを検索します。 |
| |
| 1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「デプロイ」を選択します。サーバーが起動し(実行されていない場合)、プロジェクトがコンパイルされ、そのサーバーにデプロイされます。 |
| 2. 「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「サーバー」>「GlassFish」>「リソース」>「JDBC」>「JDBCリソース」ノードおよび「接続プール」ノードを展開します。新しいデータ・ソースと接続プールが表示されます。 |
| |
| image::images/services-window-glassfish.png[title="「サービス」ウィンドウに表示された新しいデータ・ソースと接続プール"] |
| |
| |
| [[referenceDataSource]] |
| === アプリケーションからのデータ・ソースの参照 |
| |
| 構成したJDBCリソースをWebアプリケーションから参照する必要があります。これを行うには、アプリケーションの`web.xml`デプロイメント・ディスクリプタにエントリを作成します。 |
| |
| デプロイメント・ディスクリプタはXMLベースのテキスト・ファイルで、アプリケーションを特定の環境にデプロイメントする方法を記述した情報が含まれています。通常これらは、アプリケーション・コンテキスト・パラメータと動作パターンの指定、セキュリティ設定、およびサーブレット、フィルタ、リスナーのマッピングに使用されます。 |
| |
| *注意:*プロジェクトの作成時にJavaバージョンとしてJava EE 6またはJava EE 7を指定した場合は、新規ファイル・ウィザードで「Web」>「標準のデプロイメント・ディスクリプタ」を選択して、デプロイメント・ディスクリプタ・ファイルを作成する必要があります。 |
| |
| データ・ソースをアプリケーションのデプロイメント・ディスクリプタの中で参照するには、次の手順を実行します。 |
| |
| 1. 「プロジェクト」ウィンドウで「構成ファイル」フォルダを展開し、`web.xml`をダブルクリックしてエディタでこのファイルを開きます。 |
| 2. エディタの最上部にある「参照」タブをクリックします。 |
| 3. 「リソース参照」見出しを展開し、「追加」をクリックして「リソース参照を追加」ダイアログを開きます。 |
| 4. 「リソース名」に、前出のサーバーに対するデータ・ソースの構成時に付けたリソース名(`jdbc/IFPWAFCAD`)を入力します。 |
| 5. 「リソースの型」フィールドに「*`javax.sql.ConnectionPoolDataSource`*」と入力します。「OK」をクリックします。 |
| |
| 「説明」フィールドの入力はオプションですが、リソースに理解しやすい説明を入力できます(「`IFPWAFCADアプリケーションのデータベース`」など)。 |
| |
| image::images/add-resource-reference.png[title="「リソース参照の追加」ダイアログでのリソース・プロパティの指定"] |
| |
| 「リソース参照」見出しの下に新しいリソースが表示されます。 |
| |
| |
| |
| . リソースが`web.xml`ファイルに追加されたことを確認するには、エディタの最上部にある「ソース」タブをクリックします。次に示す<`resource-ref`> タグが含まれるようになりました。 |
| |
| [source,xml] |
| ---- |
| |
| <resource-ref> |
| <description>Database for IFPWAFCAD application</description> |
| <res-ref-name>jdbc/IFPWAFCAD</res-ref-name> |
| <res-type>javax.sql.ConnectionPoolDataSource</res-type> |
| <res-auth>Container</res-auth> |
| <res-sharing-scope>Shareable</res-sharing-scope> |
| </resource-ref> |
| ---- |
| |
| |
| [[addJar]] |
| === サーバーへのデータベース・ドライバのJARファイルの追加 |
| |
| データベース・ドライバのJARファイルの追加は、サーバーとデータベースが通信できるようにするために不可欠な、もう1つのステップです。通常、データベース・ドライバのインストール・ディレクトリを特定し、ドライバのルート・ディレクトリにある`mysql-connector-java-5.1.6-bin.jar`ファイルを、使用しているサーバーのライブラリにコピーします。IDEのサーバー管理では、JARファイルが追加されているかどうかをデプロイメント時に検出できます。追加されていない場合、これが自動的に行われます。 |
| |
| これを確認するため、サーバー・マネージャ(「ツール」>「サーバー」を選択)を開きます。IDEには、JDBCドライバのデプロイメント・オプションが用意されています。このオプションが有効化されている場合、サーバーのデプロイ対象アプリケーションに必要なドライバがあるかどうかを判断するための確認が開始されます。MySQLで、ドライバが必要だが見つからない場合は、IDEにバンドルされているドライバがサーバー上の適切な場所にデプロイされます。 |
| |
| 1. 「ツール」>「サーバー」を選択してサーバー・マネージャを開きます。左ペインでGlassFishサーバーを選択します。 |
| 2. メイン・ペインで、「JDBCドライバのデプロイメントを有効化」オプションを選択します。 |
| |
| image::images/servers-window.png[title="JDBCドライバのデプロイメント・オプションによる、ドライバの自動デプロイメントの有効化"] |
| |
| |
| . サーバー・マネージャを閉じる前に、「ドメイン・フォルダ」テキスト・フィールドに指定されたパスをメモします。IDEでGlassFishサーバーに接続すると、実際はアプリケーション・サーバーの_インスタンス_に接続されます。各インスタンスは一意のドメインでアプリケーションを実行し、「ドメイン名」フィールドはサーバーが使用しているドメインの名前を示します。上のイメージに示されているように、ドライバのJARファイルは`domain1`内に存在します。これは、GlassFishサーバーをインストールしたときに作成されたデフォルトのドメインです。 |
| |
| |
| . 「閉じる」をクリックしてサーバー・マネージャを終了します。 |
| |
| |
| . コンピュータ上で、GlassFishサーバーのインストール・ディレクトリに移動し、「`domains`」>「`domain1`」>「`lib`」サブフォルダに移動します。IFPWAFCADプロジェクトはすでにサーバーにデプロイされているため、「`mysql-connector-java-5.1.6-bin.jar`」ファイルが存在しているはずです。ドライバのJARファイルがない場合は、次のステップを実行します。 |
| |
| |
| . プロジェクトをサーバーにデプロイします。IDEの「プロジェクト」ウィンドウで、プロジェクト・ノードの右クリック・メニューから「デプロイ」を選択します。進捗状況は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。この出力に、GlassFishサーバーの場所にMySQLドライバがデプロイされることが示されます。 |
| |
| image::images/output-window.png[title="MySQLドライバがデプロイされたことを示す「出力」ウィンドウ"] |
| |
| ここでコンピュータ上の`domain1/lib`サブフォルダに戻ると、`mysql-connector-java-5.1.6-bin.jar`ファイルが自動的に追加されています。 |
| |
| |
| |
| [[addLogic]] |
| == 動的ロジックの追加 |
| |
| ここでは、以前にこのチュートリアルで作成した`index.jsp`プレースホルダと`response.jsp`プレースホルダに戻り、ページがユーザーの入力内容などに応じて_動的_にコンテンツを生成できるJSTLコードを実装します。これを行うには、次の3つのタスクを実行します。 |
| |
| 1. <<addJSTL,プロジェクトのクラスパスにJSTLライブラリを追加>> |
| 2. <<implementCode,JSTLコードの実装>> |
| |
| |
| [[addJSTL]] |
| === プロジェクトのクラスパスへのJSTLライブラリの追加 |
| |
| link:http://www.oracle.com/technetwork/java/index-jsp-135995.html[+JavaServer Pages標準タグ・ライブラリ+] (JSTL)を適用して、データベースから取得したデータにアクセスしたり、そのデータを表示したりできます。GlassFishサーバーには、デフォルトでJSTLライブラリが含まれています。これは、「プロジェクト」ウィンドウで「ライブラリ」ノードの下の「GlassFish Server」ノードを展開し、`javax.servlet.jsp.jstl.jar`ライブラリを検索することで確認できます。(古いバージョンのGlassFishサーバーでは、`jstl-impl.jar`ライブラリを使用します。)GlassFishサーバーのライブラリはプロジェクトのクラスパスにデフォルトで追加されているため、このタスクのために何か実行する必要はありません。 |
| |
| JSTLには、次の4つの基本的な機能領域が用意されています。 |
| |
| * `core`: 反復子や条件などの、フロー制御を処理するための共通の構造的タスク |
| * `fmt`: 国際化およびローカライズのメッセージ書式設定 |
| * `sql`: 単純なデータベース・アクセス |
| * `xml`: XMLコンテンツの処理 |
| |
| このチュートリアルでは、`コア`および`sql`タグ・ライブラリの使用方法を中心に説明します。 |
| |
| |
| [[implementCode]] |
| === JSTLコードの実装 |
| |
| ここでは、各ページでデータを動的に取得して表示するコードを実装します。どちらのページにも、このチュートリアルで以前に作成したデータ・ソースを利用するSQL問合せを実装する必要があります。 |
| |
| IDEにはデータベースに固有のJSTLスニペットがいくつか用意されており、パレット([Ctrl]-[Shift]-[8]、Macの場合は[⌘]-[Shift]-[8])から選択できます。 |
| |
| image::images/palette-db.png[title="パレットでのデータベース固有のJSTLスニペットの選択"] |
| |
| |
| ==== index.jsp |
| |
| `index.jsp`内のフォームの内容を動的に表示するには、`Subject`データベース表のすべての`name`にアクセスする必要があります。 |
| |
| 1. マウスをパレットの「DBレポート」項目の上に移動します。 |
| |
| image::images/db-report.png[title="「db」と入力した後の[Ctrl]-[Space]の押下による、データベース固有のJSTLスニペットへのアクセス"] |
| |
| 「DBレポート」項目は、`<sql:query>`タグを使用してSQL問合せを作成してから、`<c:forEach>`タグを使用して問合せの`resultset`をループし、取得したデータを出力します。 |
| |
| |
| |
| . `<%@page ... %>`宣言(行7)のすぐ上の行にカーソルを置き、パレットの「DBレポート」項目をダブルクリックします。表示されたダイアログに、次の詳細を入力します。 |
| * *変数名:* `subjects` |
| * *スコープ:* `page` |
| * *データ・ソース:* `jdbc/IFPWAFCAD` |
| * *問合せ文:* `SELECT subject_id, name FROM Subject` |
| |
| image::images/insert-db-report.png[title="「DBレポートの挿入」ダイアログを使用した、問合せ固有の詳細の指定"] |
| |
| |
| . 「OK」をクリックします。次の内容が`index.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。 |
| |
| [source,xml] |
| ---- |
| |
| *<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> |
| <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>* |
| <%-- |
| Document : index |
| Author : nbuser |
| --%> |
| |
| *<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD"> |
| SELECT subject_id, name FROM Subject |
| </sql:query> |
| |
| <table border="1"> |
| <!-- column headers --> |
| <tr> |
| <c:forEach var="columnName" items="${subjects.columnNames}"> |
| <th><c:out value="${columnName}"/></th> |
| </c:forEach> |
| </tr> |
| <!-- column data --> |
| <c:forEach var="row" items="${subjects.rowsByIndex}"> |
| <tr> |
| <c:forEach var="column" items="${row}"> |
| <td><c:out value="${column}"/></td> |
| </c:forEach> |
| </tr> |
| </c:forEach> |
| </table>* |
| |
| <%@page contentType="text/html" pageEncoding="UTF-8"%> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| ---- |
| 生成されたコンテンツで使用されるJSTLタグに必要な`taglib`ディレクティブ(`<sql:query>`および`<c:forEach>`)が、IDEによって自動的に追加されました。`taglib`ディレクティブは、JSPページがカスタム(つまり、JSTL)タグを使用することを宣言し、タグを定義するタグ・ライブラリおよびタグの接頭辞を指定します。 |
| |
| |
| . プロジェクトを実行し、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。 |
| |
| 「実行」を選択すると、IDEによってプロジェクトがGlassFishサーバーにデプロイされ、indexページがサーブレットにコンパイルされ、開始ページがデフォルトのブラウザに表示されます。「DBレポート」項目から生成されたコードによって、開始ページ内に次の表が作成されます。 |
| |
| image::images/db-report-table.png[title="「DBレポート」を使用した、データベース表のデータのプロトタイプの速やかな作成"] |
| |
| このように、「DBレポート」項目を使用すると、データベース接続をすばやくテストし、データベースの表データをブラウザで表示できるようになります。これは、プロトタイプを作成する場合に特に便利です。 |
| |
| 次の手順では、生成されたコードを、このチュートリアルで以前に作成したHTMLドロップダウン・リストに統合する方法について説明します。 |
| |
| |
| |
| . 生成されたコードの列データを確認します。2つの`<c:forEach>`タグが使用されており、1つがもう1つの入れ子になっています。これにより、JSPコンテナ(つまり、GlassFishサーバー)が表のすべての行でループを実行し、行ごとにすべての列をループします。この方法で、表全体のデータが表示されます。 |
| |
| |
| . 次のように、`<c:forEach>`タグをHTMLフォームに統合します。データベースに記録されているように、各項目の値は`subject_id`に、出力テキストは`name`になります。変更場所は*太字*で示されています。 |
| |
| [source,xml] |
| ---- |
| |
| <form action="response.jsp"> |
| <strong>Select a subject:</strong> |
| <select name="subject_id"> |
| *<c:forEach var="row" items="${subjects.rowsByIndex}"> |
| <c:forEach var="column" items="${row}">* |
| <option *value="<c:out value="${column}"/>"*>*<c:out value="${column}"/>*</option> |
| *</c:forEach> |
| </c:forEach>* |
| </select> |
| <input type="submit" value="submit" name="submit" /> |
| </form> |
| ---- |
| [tips]#別の簡易な方法として、次のように`<c:forEach>`タグをHTMLフォームに統合することもできます。# |
| |
| [source,xml] |
| ---- |
| |
| <form action="response.jsp"> |
| <strong>Select a subject:</strong> |
| <select name="subject_id"> |
| *<c:forEach var="row" items="${subjects.rows}">* |
| <option *value="${row.subject_id}"*>*${row.name}*</option> |
| *</c:forEach>* |
| </select> |
| <input type="submit" value="submit" name="submit" /> |
| </form> |
| ---- |
| |
| どちらの場合も、`<c:forEach>`タグはSQL問合せからすべての`subject_id`の値と`name`の値をループし、各ペアをHTMLの`<option>`タグに挿入します。この方法で、フォームのドロップダウン・リストがデータと一緒に生成されます。 |
| |
| |
| |
| . 「DBレポート」項目から生成された表を削除します。削除場所は*[.line-through]#取消し線#*で示されています。 |
| |
| [source,xml] |
| ---- |
| |
| <%@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 : Dec 22, 2009, 7:39:49 PM |
| Author : nbuser |
| --%> |
| |
| <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD"> |
| SELECT subject_id, name FROM Subject |
| </sql:query> |
| |
| *[.line-through]#<table border="1"> |
| <!-- column headers --> |
| <tr> |
| <c:forEach var="columnName" items="${subjects.columnNames}"> |
| <th><c:out value="${columnName}"/></th> |
| </c:forEach> |
| </tr> |
| <!-- column data --> |
| <c:forEach var="row" items="${subjects.rowsByIndex}"> |
| <tr> |
| <c:forEach var="column" items="${row}"> |
| <td><c:out value="${column}"/></td> |
| </c:forEach> |
| </tr> |
| </c:forEach> |
| </table>#* |
| |
| <%@page contentType="text/html" pageEncoding="UTF-8"%> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| ---- |
| |
| |
| . 変更を保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。 |
| |
| |
| . プロジェクトの開始ページをブラウザでリフレッシュします。 |
| |
| ブラウザのドロップダウン・リストに、データベースから取得されたサブジェクトが追加されています。 |
| |
| プロジェクトに対して「保存時にコンパイル」がデフォルトで有効になっているため、プロジェクトを再デプロイする必要はありません。つまり、ファイルを変更して保存するとファイルのコンパイルとデプロイが自動的に行われるので、プロジェクト全体を再コンパイルする必要はありません。プロジェクトの「プロパティ」ウィンドウの「コンパイル」カテゴリで、プロジェクトの「保存時にコンパイル」を有効または無効にできます。 |
| |
| |
| ==== response.jsp |
| |
| レスポンス・ページには、開始ページで選択したサブジェクトに対応したカウンセラの詳細情報が表示されます。作成する問合せでは、選択されたサブジェクト・レコードの`counselor_idfk`と一致する`counselor_id`を持つカウンセラ・レコードを選択する必要があります。 |
| |
| 1. `<%@page ... %>`宣言(行7)のすぐ上の行にカーソルを置き、パレットで「DB問合せ」をダブルクリックして、「DB問合せの挿入」ダイアログ・ボックスを開きます。 |
| 2. 「DB問合せの挿入」ダイアログ・ボックスで、次の詳細を入力します。 |
| * *変数名:* `counselorQuery` |
| * *スコープ:* `page` |
| * *データ・ソース:* `jdbc/IFPWAFCAD` |
| * *問合せ文:* `SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id=Subject.counselor_idfk AND Subject.subject_id=? <sql:param value="${param.subject_id}"/>` |
| |
| image::images/insert-db-query2.png[title="「DB問合せの挿入」ダイアログを使用した、問合せ固有の詳細の指定"] |
| |
| |
| . 「OK」をクリックします。次の内容が`response.jsp`ファイル内に生成されます。新しい内容は*太字*で表示しています。 |
| |
| [source,xml] |
| ---- |
| |
| *<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>* |
| <%-- |
| Document : response |
| Created on : Dec 22, 2009, 8:52:57 PM |
| Author : nbuser |
| --%> |
| |
| *<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD"> |
| SELECT * FROM Subject, Counselor |
| WHERE Counselor.counselor_id = Subject.counselor_idfk |
| AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/> |
| </sql:query>* |
| |
| <%@page contentType="text/html" pageEncoding="UTF-8"%> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| ---- |
| `<sql:query>`タグのために必要な`taglib`ディレクティブが、IDEによって自動的に追加されました。また、問合せ内で`<sql:param>`タグを直接使用しました。この問合せは`index.jsp`から送信される`subject_id`の値に依存しているため、`${param.subject_id}`形式の式言語(EL)文を使用してその値を抽出して`<sql:param>`タグに渡すことができます。実行時にはこの値が、SQL疑問符(`?`)のかわりに使用されます。 |
| |
| |
| . `<c:set>`タグを使用して、問合せから返される`resultset`の最初のレコード(つまり、行)に対応する変数を設定します。新しい内容は*太字*で表示しています。 |
| |
| [source,xml] |
| ---- |
| |
| <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD"> |
| SELECT * FROM Subject, Counselor |
| WHERE Counselor.counselor_id = Subject.counselor_idfk |
| AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/> |
| </sql:query> |
| |
| *<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>* |
| ---- |
| 問合せから返される`resultset`には本来1件のレコードのみが含まれますが、このページは式言語(EL)文を使用してレコードの値にアクセスする必要があるため、このステップが必要になります。`index.jsp`では、`<c:forEach>`タグを使用するのみで`resultset`の値にアクセスできました。ただし、`<c:forEach>`タグは、問合せに含まれる行に変数を設定することで動作します。そのため、EL文に行変数を含めることで値を抽出できます。 |
| |
| |
| . JSTL`コア`ライブラリ用の`taglib`ディレクティブをファイルの先頭に追加し、`<c:set>`タグが認識されるようにします。新しい内容は*太字*で表示しています。 |
| |
| [source,java] |
| ---- |
| |
| *<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>* |
| <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> |
| ---- |
| |
| |
| . HTMLマークアップで、すべてのプレースホルダを、`counselorDetails`変数に保持されているデータを表示するEL文のコードに置き換えます。変更場所は*太字*で示されています。 |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
| <link rel="stylesheet" type="text/css" href="style.css"> |
| <title>*${counselorDetails.name}*</title> |
| </head> |
| |
| <body> |
| <table> |
| <tr> |
| <th colspan="2">*${counselorDetails.name}*</th> |
| </tr> |
| <tr> |
| <td><strong>Description: </strong></td> |
| <td><span style="font-size:smaller; font-style:italic;">*${counselorDetails.description}*</span></td> |
| </tr> |
| <tr> |
| <td><strong>Counselor: </strong></td> |
| <td><strong>*${counselorDetails.first_name} ${counselorDetails.nick_name} ${counselorDetails.last_name}*</strong> |
| <br><span style="font-size:smaller; font-style:italic;"> |
| <em>member since: *${counselorDetails.member_since}*</em></span></td> |
| </tr> |
| <tr> |
| <td><strong>Contact Details: </strong></td> |
| <td><strong>email: </strong> |
| <a href="mailto:*${counselorDetails.email}*">*${counselorDetails.email}*</a> |
| <br><strong>phone: </strong>*${counselorDetails.telephone}*</td> |
| </tr> |
| </table> |
| </body> |
| </html> |
| ---- |
| |
| |
| |
| [[run]] |
| == 完成したアプリケーションの実行 |
| |
| これで、アプリケーションは完成です。アプリケーションをもう一度実行し、ブラウザでどのように表示されるかを確認します。NetBeansには「保存時にコンパイル」機能があるため、アプリケーションのコンパイルや再デプロイに気を遣う必要はありません。プロジェクトを実行すると、確実に最新の変更がデプロイメントに反映されます。 |
| |
| メイン・ツールバーの「プロジェクトの実行」(image:images/run-project-btn.png[])ボタンをクリックします。IDEのデフォルトのブラウザで`index.jsp`ページが開きます。 |
| |
| ブラウザに`index.jsp`が表示されたら、ドロップダウン・リストからサブジェクトを選択し、「`submit`」をクリックします。ここで`response.jsp`ページに移動します。ここには選択内容に対応する詳細が表示されます。 |
| |
| image::images/response-display.png[title="ブラウザに表示されたresponse.jsp (データベースから取得したデータの表示)"] |
| |
| これで「MySQLデータベースを使用した単純なWebアプリケーションの作成」は終わりです。このドキュメントでは、MySQLデータベースに接続する単純なWebアプリケーションの作成方法を説明しました。また、基本的な2層アーキテクチャを使用するアプリケーションの構築方法を説明し、データに動的にアクセスして表示する手段としてJSP、JSTL、JDBC、JNDIなど様々なテクノロジを利用しました。 |
| |
| |
| |
| [[troubleshoot]] |
| == トラブルシューティング |
| |
| チュートリアルのアプリケーションで発生する問題の多くは、GlassFish Server Open Source EditionとMySQLデータベース・サーバーとの間の接続に原因があります。アプリケーションが正しく表示されない場合、またはサーバー・エラーを受信する場合は、次の確認作業が役に立つ場合があります。 |
| |
| * <<access?,データベース・リソースは存在していますか。>> |
| * <<datasource?,接続プールとデータ・ソースはサーバー上に存在していますか。>> |
| * <<driver?,MySQL Connector/JドライバはGlassFishサーバーにアクセスできますか。>> |
| * <<password?,データベースはパスワードで保護されていますか。>> |
| * <<ping?,接続プールのプロパティは正しく設定されていますか。>> |
| |
| |
| [[access]] |
| === データベース・リソースは存在していますか。 |
| |
| IDEの「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])を使用して、MySQLサーバーが実行されていること、および`MyNewDatabase`がアクセス可能で適切な表データを含んでいることを確認します。 |
| |
| * MySQLデータベース・サーバーに接続するには、「MySQLサーバー」ノードを右クリックし、「接続」を選択します。 |
| * `MyNewDatabase`の接続ノード(image:images/db-connection-node.png[])が「サービス」ウィンドウに表示されない場合は、MySQLのドライバ・ノード(image:images/driver-node.png[])を右クリックし、「接続」を選択することで接続を作成できます。表示されたダイアログで、必要な詳細情報を入力します。 |
| |
| image::images/new-db-connection-dialog.png[title="「データベースの新規接続」ダイアログを使用したIDEでのデータベース接続の確立"] |
| |
| [tips]#「データベースの新規接続」ダイアログの各フィールドの値は、「JDBC URLを表示」オプションに入力するURL文字列が反映されます。したがって、URL (たとえば、`jdbc:mysql://localhost:3306/MyNewDatabase`)がわかっていれば、そのURLをコピーして「JDBC URLを表示」フィールドに貼り付けると、ダイアログにある残りのフィールドは自動的に入力されます。# |
| * `Subject`表と`Counselor`表が存在し、これらの表にサンプル・データが含まれていることを確認するには、「`MyNewDatabase`」接続ノード(image:images/db-connection-node.png[])を展開し、「`MyNewDatabase`」カタログ・ノード(image:images/db-catalog-node.png[])を見つけます。カタログ・ノードを展開し、既存の表を表示します。表ノードを右クリックして「データを表示」を選択すると、表のデータを確認できます。 |
| |
| image::images/services-window-view-data.png[title="データベース表ノードの右クリック・メニューから「データを表示」を選択することによる表データの表示"] |
| |
| |
| [[datasource]] |
| === 接続プールとデータ・ソースはサーバー上に存在していますか。 |
| |
| アプリケーションをGlassFishサーバーにデプロイしたら、プロジェクトに含まれる`glassfish-resources.xml`からサーバーに対して、JDBCリソースと接続プールを作成する指示を出すようにしてください。これらが存在しているかどうかの確認は、「サービス」ウィンドウの「サーバー」ノードからも実行できます。 |
| |
| * 「サーバー」>「GlassFish Server」>「リソース」ノードを展開します。「JDBCリソース」を展開し、「`glassfish-resources.xml`」から作成された「`jdbc/IFPWAFCAD`」データ・ソースを表示します。「接続プール」ノードを展開し、「`glassfish-resources.xml`」から作成された「`IfpwafcadPool`」接続プールを表示します。これについては<<view-connection-pool,以前に説明しています>>。 |
| |
| |
| [[driver]] |
| === MySQL Connector/JドライバはGlassFishサーバーにアクセスできますか。 |
| |
| MySQL Connector/JドライバがGlassFishサーバーにデプロイされていることを確認します。これについては、<<addJar,サーバーへのデータベース・ドライバのJARファイルの追加>>で説明しています。 |
| |
| * コンピュータ上でGlassFishサーバーのインストール・フォルダを探し、`GlassFish domains/domain1/lib`サブフォルダを表示します。このフォルダに、`mysql-connector-java-5.1.6-bin.jar`ファイルがあるはずです。 |
| |
| |
| [[password]] |
| === データベースはパスワードで保護されていますか。 |
| |
| このチュートリアルでGlassFishサーバーのデータ・ソースが正しく動作するためには、データベースをパスワードで保護しておく必要があります。パスワードが設定されていないデフォルトのMySQL`root`アカウントを使用している場合は、コマンド行プロンプトからパスワードを設定できます。 |
| |
| * パスワードを`_nbuser_`に設定するには、コマンド行プロンプトでMySQLのインストール・ディレクトリの`bin`ディレクトリに移動し、次のように入力します。 |
| |
| [source,java] |
| ---- |
| |
| shell> mysql -u root |
| mysql> UPDATE mysql.user SET Password = PASSWORD('_nbuser_') |
| -> WHERE User = 'root'; |
| mysql> FLUSH PRIVILEGES; |
| ---- |
| 詳細は、MySQL公式リファレンス・マニュアルのlink:http://dev.mysql.com/doc/refman/5.1/en/default-privileges.html[+初期MySQLアカウントの保護+]を参照してください。 |
| |
| |
| [[ping]] |
| === 接続プールのプロパティは正しく設定されていますか。 |
| |
| 接続プールがサーバーに対して正しく動作していることを確認します。 |
| |
| 1. 「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])を開き、「サーバー」ノードを展開します。 |
| 2. GlassFishサーバーのノードを右クリックし、「管理コンソールを表示」を選択します。 |
| 3. 要求された場合は、ユーザー名とパスワードを入力します。サーバー・マネージャで、ユーザー名とパスワードを表示できます。 |
| 4. コンソールの左側にあるツリーで、「リソース」>「JDBC」>「JDBC接続プール」>「`IfpwafcadPool`」ノードを展開します。「`IfpwafcadPool`」接続プールの詳細がメイン・ウィンドウに表示されます。 |
| 5. 「Ping」ボタンをクリックします。接続プールが正しく設定されている場合、「`Pingが成功しました`」というメッセージが表示されます。 |
| |
| image::images/ping-succeeded.png[title="GlassFishサーバーの管理コンソールでのPingのクリックによる接続プールのテスト"] |
| |
| |
| . Pingが失敗した場合は、「追加プロパティ」タブをクリックし、一覧表示されているプロパティの値が正しく設定されていることを確認します。 |
| |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Creating%20Web%20App%20MySQL[+ご意見をお寄せください+] |
| |
| |
| |
| [[seealso]] |
| == 関連項目 |
| |
| JavaによるWeb開発の詳細は、次のリソースを参照してください。 |
| |
| * *NetBeansの記事およびチュートリアル* |
| * link:../ide/mysql.html[+NetBeans IDEでのMySQLデータベースへの接続+]。IDEでMySQLデータベースを操作する方法の基礎を紹介しています。 |
| * link:jsf20-intro.html[+JavaServer Faces 2.x入門+]。Java WebプロジェクトでJSFフレームワークを使用する方法について説明したチュートリアルです。 |
| * link:quickstart-webapps-spring.html[+Spring Framework入門+]。Spring Frameworkを使用してMVC Webアプリケーションを作成する方法について説明したチュートリアルです。 |
| * *Java Database Connectivity (JDBC)* |
| * link:http://docs.oracle.com/javase/tutorial/jdbc/overview/index.html[+JDBCの概要+] |
| * link:http://download.oracle.com/javase/6/docs/technotes/guides/jdbc/getstart/GettingStartedTOC.fm.html[+JDBC API入門+] |
| * link:http://docs.oracle.com/javase/tutorial/jdbc/basics/index.html[+Javaチュートリアル: JDBCの基本+] |
| * *JavaServer Pages標準タグ・ライブラリ(JSTL)* |
| * link:http://www.oracle.com/technetwork/java/index-jsp-135995.html[+JavaServer Pages標準タグ・ライブラリ+] (公式製品ページ) |
| * *Java Naming and Directory Interface (JNDI)* |
| * link:http://www.oracle.com/technetwork/java/jndi-136720.html[+Java SEのコア・テクノロジ - Java Naming and Directory Interface+] |
| * link:http://docs.oracle.com/javase/jndi/tutorial/[+JNDIチュートリアル+] |
| * link:http://docs.oracle.com/javase/tutorial/jndi/index.html[+Javaチュートリアル: Java Naming and Directory Interface+] |
| |
| |
| |
