MySQLデータベースを使用した単純なWebアプリケーションの作成

このドキュメントでは、MySQLデータベース・サーバーに接続する単純なWebアプリケーションを作成する方法を説明します。また、JavaServer Pages (JSP)、JavaServer Pages標準タグ・ライブラリ(JSTL)、Java Database Connectivity (JDBC) API、2層のクライアント・サーバー・アーキテクチャなど、Web開発での基本的なアイデアやテクノロジも紹介します。このチュートリアルは、Web開発の基礎的な知識があり、MySQLデータベースを使用して知識を応用しようとしている初心者を対象としています。

MySQLは、その速さ、柔軟性および信頼性により、Webアプリケーションで一般的に使用されているポピュラなオープン・ソース・データベース管理システムです。MySQLは、データベース内のデータへのアクセスおよび処理にSQL (Structured Query Language)を使用しています。

このチュートリアルは、MySQL Databaseへの接続のチュートリアルの続きです。MyNewDatabaseという名前のMySQLデータベースを作成済で、NetBeans IDEで接続が登録されていることを前提としています。そのチュートリアルで使用した表データはifpwafcad.sqlに格納されており、このチュートリアルでも必要です。このSQLファイルによってSubjectおよびCounselorの2つの表が作成され、これらにサンプル・データが生成されます。必要に応じて、このファイルをコンピュータに保存し、NetBeans IDEで開いて、MyNewDatabaseという名前のMySQLデータベース上で実行します。

目次

このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース 必須バージョン
NetBeans IDE 7.2、7.3、7.4、8.0、Java EEバンドル版
Java Development Kit (JDK) バージョン7または8
MySQLデータベース・サーバー 5.x
MySQLコネクタ/J JDBCドライバ バージョン5.x
GlassFish Server Open Source Edition 3.xまたは4.x

注意:

  • NetBeans IDEのJavaダウンロード・バンドルを使用して、GlassFishサーバーをインストールできます。このチュートリアルを実施するには、GlassFishサーバーが必要になります。
  • MySQL Connector/J JDBCドライバは、JavaプラットフォームとMySQLデータベース・プロトコルとの間の通信に必要なもので、NetBeans IDEに組み込まれています。
  • プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、サンプル・アプリケーションをダウンロードできます。

構造の計画

単純なWebアプリケーションは、クライアントがサーバーと直接通信する2層アーキテクチャを使用して設計できます。このチュートリアルのJava Webアプリケーションは、Java Database Connectivity APIを使用してMySQLデータベースと直接通信します。基本的に、アプリケーション・サーバー(GlassFishサーバー)が認識するJavaコードと、SQL内の任意の内容、つまりデータベース・サーバー(MySQL)が認識する言語との間で通信を有効にするのは、MySQL Connector/J JDBCドライバです。

このチュートリアルでビルドするアプリケーションには、2つのJSPページの作成が含まれます。各ページで、HTMLとCSSを使用して単純なインタフェースを実装します。また、データベースに対して直接問合せを実行し、取得したデータを2つのページに挿入するロジックを実行するために、JSTLテクノロジを使用します。この2つのデータベース表はSubjectCounselorで、MySQLデータベースへの接続のチュートリアルで完成させるMySQLデータベースMyNewDatabaseに含まれています。次の2層方式のシナリオについて考えてみます。

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

ブラウザに表示されたindex.jsp

response.jsp

ブラウザに表示されたresponse.jsp

新規プロジェクトの作成

最初に、IDEで新しいJava Webプロジェクトを作成します。

  1. メイン・メニューから「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択します。「Java Web」カテゴリを選択し、「Webアプリケーション」を選択します。「次」をクリックします。
    新規プロジェクト・ウィザード

    新規プロジェクト・ウィザードを使用すると、標準的なIDEプロジェクト内に空のWebアプリケーションを作成できます。標準的なプロジェクトでは、IDEが生成したAntビルド・スクリプトを使用して、アプリケーションをコンパイル、デプロイおよび実行します。

  2. 「プロジェクト名」に「IFPWAFCAD」と入力します。また、コンピュータ上でのプロジェクトの場所を指定します。デフォルトでは、IDEはホーム・ディレクトリのNetBeansProjectsフォルダにプロジェクトを配置します。「次」をクリックします。
  3. 「サーバーと設定」パネルで、アプリケーションの実行に使用するサーバーとしてGlassFishサーバーを指定します。

    注意: GlassFishサーバーは、JavaバージョンのNetBeans IDEがインストールされている場合に、「サーバー」ドロップダウン・フィールドに表示されます。GlassFishサーバーはダウンロードに含まれているため、自動的にIDEに登録されます。このプロジェクトで他のサーバーを使用する場合は、「サーバー」ドロップダウン・フィールドの横にある「追加」ボタンをクリックし、他のサーバーをIDEに登録します。ただし、GlassFishサーバー以外のサーバーの操作については、このチュートリアルでは説明しません。

  4. 「Java EEバージョン」フィールドで「Java EE 5」を選択します。
    新規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」カテゴリを選択し、「標準のデプロイメント・ディスクリプタ」を選択します。

  5. 「終了」をクリックします。IDEでアプリケーション全体のプロジェクト・テンプレートが作成され、空のJSPページ(index.jsp)がエディタに表示されます。index.jspファイルはアプリケーションの開始ページとして動作します。

Webインタフェースの準備

最初に、開始ページ(index.jsp)とレスポンス・ページ(response.jsp)を準備します。開始ページには、ユーザーのデータを取り込むために使用するHTMLフォームを実装します。また、どちらのページにも、構造化された形でデータを表示するHTML表を実装します。この項では、両方のページの外観を整えるためのスタイル・シートも作成します。

開始ページの設定

エディタで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カテゴリの「表」アイコン上に置くと、項目のデフォルトのコード・スニペットが表示されます。
    項目の上にポインタを置いてコード・スニペットが表示されたパレット
    「パレット」は好みにあわせて構成できます。「パレット」を右クリックして「大きなアイコンを表示」と「項目の名前を非表示」を選択すると、上のイメージのようになります。
  4. <h1>タグのすぐ後ろの場所にカーソルを置きます。ここに、新しいHTML表を実装します。「パレット」で「表」アイコンをダブルクリックします。
  5. 表示される「挿入表」ダイアログで次の値を指定し、「OK」をクリックします。

    • : 2
    • : 1
    • 境界線のサイズ: 0
    HTML表コードが生成され、ページに追加されます。
  6. 次の内容を、表の見出しと、表の最初の行のセルに追加します(追加する内容は太字で表示)。
    <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>
  7. 表の最後の行にHTMLフォームを挿入します。そのためには、2番目のペアの<td>タグの間にカーソルを置き、パレットの「HTMLフォーム」(「HTMLフォーム」アイコン)アイコンをダブルクリックします。「挿入フォーム」ダイアログで、「アクション」テキスト・フィールドに「response.jsp」と入力し、「OK」をクリックします。
    「挿入フォーム」ダイアログ
  8. <form>タグの間に次の内容を入力します(追加する内容は太字で表示)。
    <tr>
        <td>
            <form action="response.jsp">
                <strong>Select a subject:</strong>
            </form>
        </td>
    </tr>
  9. [Enter]を押して、追加したコンテンツの後に空の行を追加し、パレットで「ドロップダウン・リスト」をダブルクリックして、「ドロップダウンの挿入」ダイアログ・ボックスを開きます。
  10. 「ドロップダウンの挿入」ダイアログの「名前」テキスト・フィールドに「subject_id」と入力し、「OK」をクリックします。ドロップダウン・リストのコード・スニペットがフォームに追加されます。

    ドロップダウン・リストのオプションの数は、ここでは重要ではありません。チュートリアルの後の手順で、Subjectデータベース表から収集したデータに基づいてオプションを動的に生成するJSTLタグを追加します。

  11. 送信ボタン項目(「送信」ボタン・アイコン)を、先ほど追加したドロップダウン・リストの直後に追加します。これは、パレットを使用するか、前述のステップのようにエディタのコード補完を呼び出すことで操作できます。「挿入ボタン」ダイアログで、「ラベル」テキスト・フィールドと「名前」テキスト・フィールドの両方に「submit」と入力し、「OK」をクリックします。
  12. コードをフォーマットするには、エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F]、Macの場合は[Ctrl]-[Shift]-[F])を選択します。コードが自動的にフォーマットされ、次のような外観になります。
    <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ページが自動的にコンパイルされ、サーバーにデプロイされます。デフォルト・ブラウザが開き、デプロイされた場所からページが表示されます。

    ブラウザに表示されたindex.jsp

レスポンス・ページの作成

response.jspのインタフェースを準備するため、プロジェクト内にファイルを作成しておく必要があります。このページに表示される内容のほとんどが、JSPテクノロジを使用して動的に生成されます。そのため、次の手順では、後でJSPコードに置き換えるプレースホルダ(placeholder)を追加します。

  1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「新規」>「JSP」を選択します。新規JSPファイル・ウィザードが開きます。
  2. 「JSPファイル名」フィールドに「response」と入力します。「場所」フィールドには現在「Webページ」が選択されています。これは、プロジェクトのwebディレクトリにファイルが作成されることを意味します。この場所は、開始ページindex.jspがある場所と同じです。
  3. その他のデフォルト設定を受け入れ、「終了」をクリックします。新しいresponse.jspページのテンプレートが生成され、エディタ内に表示されます。また、新しいJSPノードが「プロジェクト」ウィンドウの「Webページ」の下に表示されます。
    「プロジェクト」ウィンドウに表示されたresponse.jspノード
  4. エディタで、タイトルを「IFPWAFCAD - {placeholder}」に変更します。
  5. <h1>Hello World!</h1>行(<body>タグの間にあります)を除去し、次のHTML表をコピーしてページの本文に貼り付けます。
    <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サーバーにデプロイされ、デフォルトのブラウザで開かれます。

    ブラウザに表示されたresponse.jsp

スタイル・シートの作成

Webページの見た目を整える単純なスタイル・シートを作成します。このチュートリアルは、スタイル・ルールの機能について、およびスタイル・ルールがindex.jspresponse.jsp内の該当するHTML要素にどのように影響するかについて、実用的な知識がある方を対象としています。

  1. IDEのメイン・ツールバーで「新規ファイル」(「新規ファイル」ボタン)ボタンを押して、新規ファイル・ウィザードを開きます。「Web」カテゴリを選択し、「Cascading Style Sheet」を選択して「次」をクリックします。
  2. 「CSSファイル名」に「style」と入力し、「終了」をクリックします。空のCSSファイルが作成され、index.jspおよびresponse.jspと同じプロジェクトの場所に配置されます。これで、style.cssのノードが「プロジェクト」ウィンドウのプロジェクト内に表示されるようになり、ファイルがエディタに表示されます。
  3. エディタで、次の内容をstyle.cssファイルに追加します。
    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;
    }
  4. スタイル・シートをindex.jspresponse.jspにリンクします。両方のページで、<head>タグの間に次の行を追加します。
    <link rel="stylesheet" type="text/css" href="style.css">
    エディタで開かれているファイル間をすばやく移動するには、[Ctrl]-[Tab]を押して目的のファイルを選択します。

アプリケーションとデータベース間の通信の準備

サーバーとデータベースとの間の通信を実装するための最も効率的な方法は、データベース接続プールを設定することです。クライアント・リクエストごとに新しい接続を作成すると、特にアプリケーションが大量のリクエストを継続的に受け取る場合は、かなり時間がかかる可能性があります。これを解決するため、接続プール内に多数の接続が作成されて管理されます。アプリケーションのデータ・レイヤーへのアクセスを要求する受信リクエストがあると、作成済の接続がプールから使用されます。同様に、リクエストが完了すると、その接続は閉じられずに、プールに返されます。

サーバー用のデータ・ソースと接続プールの準備ができたら、そのデータ・ソースを使用するようアプリケーションに指示する必要があります。これは通常、アプリケーションのweb.xmlデプロイメント・ディスクリプタ内にエントリを作成することで実行します。最後に、データベース・ドライバ(MySQL Connector/J JDBCドライバ)がサーバーにアクセスできることを確認する必要があります。


  1. JDBCデータ・ソースと接続プールの設定
  2. アプリケーションからのデータ・ソースの参照
  3. サーバーへのデータベース・ドライバのJARファイルの追加

JDBCデータ・ソースと接続プールの設定

GlassFish Server Open Source Editionには、開発者に意識させることなく接続プール機能を提供する、DBCP (データベース接続プール)ライブラリがあります。このライブラリを利用するには、アプリケーションが接続プール用に使用できるサーバーのJava Database Connectivity (JDBC)データ・ソースを構成する必要があります。

JDBCテクノロジの詳細は、Javaチュートリアル: JDBCの基本を参照してください。

データ・ソースは、GlassFishサーバーの管理コンソール内で直接構成するか、次に説明するように、アプリケーションが必要とするリソースをglassfish-resources.xmlファイル内で宣言できます。アプリケーションがデプロイされると、サーバーがリソース宣言を読み取り、必要なリソースを作成します。

次の手順は、接続プールと、その接続プールに依存するデータ・ソースを宣言する方法です。NetBeansの新規JDBCリソース・ウィザードを使用すると、両方のアクションを実行できます。

  1. IDEのメイン・ツールバーで「新規ファイル」(「新規ファイル」ボタン)ボタンを押して、新規ファイル・ウィザードを開きます。「GlassFish」サーバー・カテゴリを選択し、「JDBCリソース」を選択して「次」をクリックします。
  2. ステップ2の「一般属性」で、「新規のJDBC接続プールを作成」オプションを選択し、「JNDI名」テキスト・フィールドに「jdbc/IFPWAFCAD」と入力します。
    JDBCリソース・ウィザード、ステップ2: 一般属性
    JDBCデータ・ソースは、JNDI (Java Naming and Directory Interface)に依存します。JNDI APIは、アプリケーションでデータ・ソースを検索、利用するための共通の手段を提供します。詳細は、JNDIチュートリアルを参照してください。
  3. (オプション)データ・ソースには説明を追加できます。たとえば、「IFPWAFCADアプリケーション用のデータを提供するデータベースにアクセスします」と入力します。
  4. 「次」をクリックし、もう一度「次」をクリックして、ステップ3「追加のプロパティ」をスキップします。
  5. ステップ4で「JDBC接続プール名」に「IfpwafcadPool」と入力します。「既存の接続から抽出」オプションが選択されていることを確認し、ドロップダウン・リストから「jdbc:mysql://localhost:3306/MyNewDatabase」を選択します。「次」をクリックします。
    JDBCリソース・ウィザード、ステップ4: データベース接続を選択

    注意: IDEで設定されたデータベース接続がある場合は、ウィザードで検出されます。そのため、この時点でMyNewDatabaseデータベースへの接続がすでに作成されている必要はありません。作成済の接続を確認するには、「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「データベース」カテゴリで接続ノード(データベース接続ノード・アイコン)を検索します。
  6. 手順5で、「リソースの型」ドロップダウン・リストで「javax.sql.ConnectionPoolDataSource」を選択します。

    IDEは、前のステップで指定したデータベース接続から情報を抽出し、新規接続プール用の名前と値のプロパティを設定することに注意してください。

    JDBCリソース・ウィザード、ステップ5: 接続プール・プロパティの追加
  7. 「終了」をクリックします。ウィザードによってglassfish-resources.xmlファイルが生成され、指定したデータ・ソースと接続プール用のエントリが格納されます。

「プロジェクト」ウィンドウで、「サーバー・リソース」ノードに作成したglassfish-resources.xmlファイルを開くことができます。<resources>タグ内には、前に指定した値を持つデータ・ソースと接続プールが宣言されています。

新しいデータ・ソースと接続プールが実際にGlassFishサーバーに登録されていることを確認するには、プロジェクトをサーバーにデプロイして、IDEの「サービス」ウィンドウ内でリソースを検索します。

  1. 「プロジェクト」ウィンドウで「IFPWAFCAD」プロジェクト・ノードを右クリックし、「デプロイ」を選択します。サーバーが起動し(実行されていない場合)、プロジェクトがコンパイルされ、そのサーバーにデプロイされます。
  2. 「サービス」ウィンドウを開き([Ctrl]-[5]、Macの場合は[⌘]-[5])、「サーバー」>「GlassFish」>「リソース」>「JDBC」>「JDBCリソース」ノードおよび「接続プール」ノードを展開します。新しいデータ・ソースと接続プールが表示されます。
    「サービス」ウィンドウに表示された新しいデータ・ソースと接続プール

アプリケーションからのデータ・ソースの参照

構成した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アプリケーションのデータベース」など)。

    「リソース参照の追加」ダイアログ

    「リソース参照」見出しの下に新しいリソースが表示されます。

  6. リソースがweb.xmlファイルに追加されたことを確認するには、エディタの最上部にある「ソース」タブをクリックします。次に示す<resource-ref> タグが含まれるようになりました。
    <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>

サーバーへのデータベース・ドライバのJARファイルの追加

データベース・ドライバのJARファイルの追加は、サーバーとデータベースが通信できるようにするために不可欠な、もう1つのステップです。通常、データベース・ドライバのインストール・ディレクトリを特定し、ドライバのルート・ディレクトリにあるmysql-connector-java-5.1.6-bin.jarファイルを、使用しているサーバーのライブラリにコピーします。IDEのサーバー管理では、JARファイルが追加されているかどうかをデプロイメント時に検出できます。追加されていない場合、これが自動的に行われます。

これを確認するため、サーバー・マネージャ(「ツール」>「サーバー」を選択)を開きます。IDEには、JDBCドライバのデプロイメント・オプションが用意されています。このオプションが有効化されている場合、サーバーのデプロイ対象アプリケーションに必要なドライバがあるかどうかを判断するための確認が開始されます。MySQLで、ドライバが必要だが見つからない場合は、IDEにバンドルされているドライバがサーバー上の適切な場所にデプロイされます。

  1. 「ツール」>「サーバー」を選択してサーバー・マネージャを開きます。左ペインでGlassFishサーバーを選択します。
  2. メイン・ペインで、「JDBCドライバのデプロイメントを有効化」オプションを選択します。
    「サーバー」ウィンドウ - GlassFish Server 3.0.1
  3. サーバー・マネージャを閉じる前に、「ドメイン・フォルダ」テキスト・フィールドに指定されたパスをメモします。IDEでGlassFishサーバーに接続すると、実際はアプリケーション・サーバーのインスタンスに接続されます。各インスタンスは一意のドメインでアプリケーションを実行し、「ドメイン名」フィールドはサーバーが使用しているドメインの名前を示します。上のイメージに示されているように、ドライバのJARファイルはdomain1内に存在します。これは、GlassFishサーバーをインストールしたときに作成されたデフォルトのドメインです。
  4. 「閉じる」をクリックしてサーバー・マネージャを終了します。
  5. コンピュータ上で、GlassFishサーバーのインストール・ディレクトリに移動し、「domains」>「domain1」>「lib」サブフォルダに移動します。IFPWAFCADプロジェクトはすでにサーバーにデプロイされているため、「mysql-connector-java-5.1.6-bin.jar」ファイルが存在しているはずです。ドライバのJARファイルがない場合は、次のステップを実行します。
  6. プロジェクトをサーバーにデプロイします。IDEの「プロジェクト」ウィンドウで、プロジェクト・ノードの右クリック・メニューから「デプロイ」を選択します。進捗状況は、IDEの出力ウィンドウ([Ctrl]-[4]、Macの場合は[⌘]-[4])に表示されます。この出力に、GlassFishサーバーの場所にMySQLドライバがデプロイされることが示されます。
    MySQLドライバがデプロイされたことを示す「出力」ウィンドウ
    ここでコンピュータ上のdomain1/libサブフォルダに戻ると、mysql-connector-java-5.1.6-bin.jarファイルが自動的に追加されています。

動的ロジックの追加

ここでは、以前にこのチュートリアルで作成したindex.jspプレースホルダとresponse.jspプレースホルダに戻り、ページがユーザーの入力内容などに応じて動的にコンテンツを生成できるJSTLコードを実装します。これを行うには、次の3つのタスクを実行します。

  1. プロジェクトのクラスパスにJSTLライブラリを追加
  2. JSTLコードの実装

プロジェクトのクラスパスへのJSTLライブラリの追加

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タグ・ライブラリの使用方法を中心に説明します。

JSTLコードの実装

ここでは、各ページでデータを動的に取得して表示するコードを実装します。どちらのページにも、このチュートリアルで以前に作成したデータ・ソースを利用するSQL問合せを実装する必要があります。

IDEにはデータベースに固有のJSTLスニペットがいくつか用意されており、パレット([Ctrl]-[Shift]-[8]、Macの場合は[⌘]-[Shift]-[8])から選択できます。

パレットから利用できるデータベース・スニペット

index.jsp

index.jsp内のフォームの内容を動的に表示するには、Subjectデータベース表のすべてのnameにアクセスする必要があります。

  1. マウスをパレットの「DBレポート」項目の上に移動します。
    パレットから利用できるデータベース・スニペット

    「DBレポート」項目は、<sql:query>タグを使用してSQL問合せを作成してから、<c:forEach>タグを使用して問合せのresultsetをループし、取得したデータを出力します。

  2. <%@page ... %>宣言(行7)のすぐ上の行にカーソルを置き、パレットの「DBレポート」項目をダブルクリックします。表示されたダイアログに、次の詳細を入力します。
    • 変数名: subjects
    • スコープ: page
    • データ・ソース: jdbc/IFPWAFCAD
    • 問合せ文: SELECT subject_id, name FROM Subject
    「DBレポートの挿入」ダイアログ
  3. 「OK」をクリックします。次の内容がindex.jspファイル内に生成されます。新しい内容は太字で表示しています。
    <%@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)タグを使用することを宣言し、タグを定義するタグ・ライブラリおよびタグの接頭辞を指定します。
  4. プロジェクトを実行し、ブラウザでどのように表示されるかを確認します。「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。

    「実行」を選択すると、IDEによってプロジェクトがGlassFishサーバーにデプロイされ、indexページがサーブレットにコンパイルされ、開始ページがデフォルトのブラウザに表示されます。「DBレポート」項目から生成されたコードによって、開始ページ内に次の表が作成されます。

    Subjectデータベース表のデータを含む表が表示されたブラウザ

    このように、「DBレポート」項目を使用すると、データベース接続をすばやくテストし、データベースの表データをブラウザで表示できるようになります。これは、プロトタイプを作成する場合に特に便利です。

    次の手順では、生成されたコードを、このチュートリアルで以前に作成したHTMLドロップダウン・リストに統合する方法について説明します。

  5. 生成されたコードの列データを確認します。2つの<c:forEach>タグが使用されており、1つがもう1つの入れ子になっています。これにより、JSPコンテナ(つまり、GlassFishサーバー)が表のすべての行でループを実行し、行ごとにすべての列をループします。この方法で、表全体のデータが表示されます。
  6. 次のように、<c:forEach>タグをHTMLフォームに統合します。データベースに記録されているように、各項目の値はsubject_idに、出力テキストはnameになります。変更場所は太字で示されています。
    <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>
    別の簡易な方法として、次のように<c:forEach>タグをHTMLフォームに統合することもできます。
    <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>タグに挿入します。この方法で、フォームのドロップダウン・リストがデータと一緒に生成されます。

  7. 「DBレポート」項目から生成された表を削除します。削除場所は取消し線で示されています。
    <%@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>
    
    <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">
  8. 変更を保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
  9. プロジェクトの開始ページをブラウザでリフレッシュします。

    ブラウザのドロップダウン・リストに、データベースから取得されたサブジェクトが追加されています。

    プロジェクトに対して「保存時にコンパイル」がデフォルトで有効になっているため、プロジェクトを再デプロイする必要はありません。つまり、ファイルを変更して保存するとファイルのコンパイルとデプロイが自動的に行われるので、プロジェクト全体を再コンパイルする必要はありません。プロジェクトの「プロパティ」ウィンドウの「コンパイル」カテゴリで、プロジェクトの「保存時にコンパイル」を有効または無効にできます。

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}"/>
    「DB問合せの挿入」ダイアログ
  3. 「OK」をクリックします。次の内容がresponse.jspファイル内に生成されます。新しい内容は太字で表示しています。
    <%@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疑問符(?)のかわりに使用されます。
  4. <c:set>タグを使用して、問合せから返されるresultsetの最初のレコード(つまり、行)に対応する変数を設定します。新しい内容は太字で表示しています。
    <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文に行変数を含めることで値を抽出できます。
  5. JSTLコアライブラリ用のtaglibディレクティブをファイルの先頭に追加し、<c:set>タグが認識されるようにします。新しい内容は太字で表示しています。
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
  6. HTMLマークアップで、すべてのプレースホルダを、counselorDetails変数に保持されているデータを表示するEL文のコードに置き換えます。変更場所は太字で示されています。
    <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>

完成したアプリケーションの実行

これで、アプリケーションは完成です。アプリケーションをもう一度実行し、ブラウザでどのように表示されるかを確認します。NetBeansには「保存時にコンパイル」機能があるため、アプリケーションのコンパイルや再デプロイに気を遣う必要はありません。プロジェクトを実行すると、確実に最新の変更がデプロイメントに反映されます。

メイン・ツールバーの「プロジェクトの実行」(「プロジェクトの実行」ボタン)ボタンをクリックします。IDEのデフォルトのブラウザでindex.jspページが開きます。

ブラウザにindex.jspが表示されたら、ドロップダウン・リストからサブジェクトを選択し、「submit」をクリックします。ここでresponse.jspページに移動します。ここには選択内容に対応する詳細が表示されます。

ブラウザに表示されたresponse.jsp (データベースから取得したデータの表示)

これで「MySQLデータベースを使用した単純なWebアプリケーションの作成」は終わりです。このドキュメントでは、MySQLデータベースに接続する単純なWebアプリケーションの作成方法を説明しました。また、基本的な2層アーキテクチャを使用するアプリケーションの構築方法を説明し、データに動的にアクセスして表示する手段としてJSP、JSTL、JDBC、JNDIなど様々なテクノロジを利用しました。


トラブルシューティング

チュートリアルのアプリケーションで発生する問題の多くは、GlassFish Server Open Source EditionとMySQLデータベース・サーバーとの間の接続に原因があります。アプリケーションが正しく表示されない場合、またはサーバー・エラーを受信する場合は、次の確認作業が役に立つ場合があります。

データベース・リソースは存在していますか。

IDEの「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])を使用して、MySQLサーバーが実行されていること、およびMyNewDatabaseがアクセス可能で適切な表データを含んでいることを確認します。

  • MySQLデータベース・サーバーに接続するには、「MySQLサーバー」ノードを右クリックし、「接続」を選択します。
  • MyNewDatabaseの接続ノード(「データベース」接続ノード)が「サービス」ウィンドウに表示されない場合は、MySQLのドライバ・ノード(「データベース」ドライバ・ノード)を右クリックし、「接続」を選択することで接続を作成できます。表示されたダイアログで、必要な詳細情報を入力します。
    「データベースの新規接続」ダイアログ
    「データベースの新規接続」ダイアログの各フィールドの値は、「JDBC URLを表示」オプションに入力するURL文字列が反映されます。したがって、URL (たとえば、jdbc:mysql://localhost:3306/MyNewDatabase)がわかっていれば、そのURLをコピーして「JDBC URLを表示」フィールドに貼り付けると、ダイアログにある残りのフィールドは自動的に入力されます。
  • Subject表とCounselor表が存在し、これらの表にサンプル・データが含まれていることを確認するには、「MyNewDatabase」接続ノード(「データベース」接続ノード)を展開し、「MyNewDatabase」カタログ・ノード(「データベース」カタログ・ノード)を見つけます。カタログ・ノードを展開し、既存の表を表示します。表ノードを右クリックして「データを表示」を選択すると、表のデータを確認できます。
    「サービス」ウィンドウ - データベース表ノードの右クリック・メニュー

接続プールとデータ・ソースはサーバー上に存在していますか。

アプリケーションをGlassFishサーバーにデプロイしたら、プロジェクトに含まれるglassfish-resources.xmlからサーバーに対して、JDBCリソースと接続プールを作成する指示を出すようにしてください。これらが存在しているかどうかの確認は、「サービス」ウィンドウの「サーバー」ノードからも実行できます。

  • 「サーバー」>「GlassFish Server」>「リソース」ノードを展開します。「JDBCリソース」を展開し、「glassfish-resources.xml」から作成された「jdbc/IFPWAFCAD」データ・ソースを表示します。「接続プール」ノードを展開し、「glassfish-resources.xml」から作成された「IfpwafcadPool」接続プールを表示します。これについては以前に説明しています

MySQL Connector/JドライバはGlassFishサーバーにアクセスできますか。

MySQL Connector/JドライバがGlassFishサーバーにデプロイされていることを確認します。これについては、サーバーへのデータベース・ドライバのJARファイルの追加で説明しています。

  • コンピュータ上でGlassFishサーバーのインストール・フォルダを探し、GlassFish domains/domain1/libサブフォルダを表示します。このフォルダに、mysql-connector-java-5.1.6-bin.jarファイルがあるはずです。

データベースはパスワードで保護されていますか。

このチュートリアルでGlassFishサーバーのデータ・ソースが正しく動作するためには、データベースをパスワードで保護しておく必要があります。パスワードが設定されていないデフォルトのMySQLrootアカウントを使用している場合は、コマンド行プロンプトからパスワードを設定できます。

  • パスワードをnbuserに設定するには、コマンド行プロンプトでMySQLのインストール・ディレクトリのbinディレクトリに移動し、次のように入力します。
    shell> mysql -u root
    mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
        ->     WHERE User = 'root';
    mysql> FLUSH PRIVILEGES;
    詳細は、MySQL公式リファレンス・マニュアルの初期MySQLアカウントの保護を参照してください。

接続プールのプロパティは正しく設定されていますか。

接続プールがサーバーに対して正しく動作していることを確認します。

  1. 「サービス」ウィンドウ([Ctrl]-[5]、Macの場合は[⌘]-[5])を開き、「サーバー」ノードを展開します。
  2. GlassFishサーバーのノードを右クリックし、「管理コンソールを表示」を選択します。
  3. 要求された場合は、ユーザー名とパスワードを入力します。サーバー・マネージャで、ユーザー名とパスワードを表示できます。
  4. コンソールの左側にあるツリーで、「リソース」>「JDBC」>「JDBC接続プール」>「IfpwafcadPool」ノードを展開します。「IfpwafcadPool」接続プールの詳細がメイン・ウィンドウに表示されます。
  5. 「Ping」ボタンをクリックします。接続プールが正しく設定されている場合、「Pingが成功しました」というメッセージが表示されます。
    GlassFishサーバーの管理コンソール - 接続プールの表示
  6. Pingが失敗した場合は、「追加プロパティ」タブをクリックし、一覧表示されているプロパティの値が正しく設定されていることを確認します。


関連項目

JavaによるWeb開発の詳細は、次のリソースを参照してください。

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo