経緯

さて、第一回の記事では、WebSphere Application ServerとDB2をBluemixでささっと用意いただきました。
テーブル作成も行ったところですので、今回はローカル環境での作業になります。

#レシピ
前回から引き続き同じです。

IBM Bluemixアカウント
Ecilpse
保存したい画像

#作り方
手順の概要のおさらいです。

　1. Bluemix上にWebサーバーとDBサーバーを用意（第一回）
　2. Javaアプリを用意（第二回）←いまここ
　3. BluemixのDBサーバーに画像をアップロード（第三回）
　4. libertyサーバーをBluemixにプッシュ（第四回）

1.Dynamic WebServicesのプロジェクトの作成

File > New > Project > Web > Dynamic Web Project を選択。

プロジェクト名を入れてあげます。さらにターゲット・ランタイムは
WebSphere Application Server Liberty Profileにしました。。
ひとまずローカルのサーバーで確認するためです。

尚、このWebSphere Application Server Liberty ProfileはBluemix Pluginを入れると
インストールされます。

もし、ランタイムに存在しない場合、こちらのdevelopserworksの記事
を参考にしてローカルサーバーを準備してください。

Nextを押したら、このままスルーでFinish!

Project Exploerに以下のようなライブラリができたはずです。

2.プログラム作成

さて、ここからがプログラミンの本番です。次の3つを作成していきましょう。

Upload.jsp（画像をアップロードするためのインターフェース）
FileUploadDBServer.java（メインのソースコード）
Message.jsp（アップロード結果を返す）

2.1 Upload.jsp

作成したプロジェクトのフォルダで右クリックし、File > New > Jsp File

WebContent直下にjspファイルを作成します。作成したらコードを書いていきます。以下の通り。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload to Database Demo</title>
</head>
    <center>
        <h1>File Upload to Database Demo</h1>
        <form method="post" action="uploadServlet" enctype="multipart/form-data">
            <table border="0">
                <tr>
                    <td>First Name: </td>
                    <td><input type="text" name="firstName" size="50"/></td>
                </tr>
                <tr>
                    <td>Last Name: </td>
                    <td><input type="text" name="lastName" size="50"/></td>
                </tr>
                <tr>
                    <td>Portrait Photo: </td>
                    <td><input type="file" name="photo" size="50"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Save">
                    </td>
                </tr>
            </table>
        </form>
    </center>
</body>
</html>

2.2 FileUploadDBServer.java

続いてJavaのクラスファイルを作成していきましょう。
プロジェクトのフォルダで右クリックし、New > Class を選択。
Package名をcom.ibm.upimage2dbなどにします。Classの名前をFileUploadDBServerにしてFinish!

肝心の中身ですが、環境に合わせて変更してください。本当はもっと賢いやり方がありますが、データベースの情報をベタ打ちしてます。「//please mod!」と表記された箇所は皆様がBluemixで立てたデータベースの値に合わせます。後ほど解説と共に変更します。

package com.ibm.upload;


import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.sql.DataSource;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.annotation.Resource;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

@WebServlet("/uploadServlet")
@MultipartConfig(maxFileSize = 16177215)    // upload file's size up to 16MB
public class FileUploadDBServer extends HttpServlet {
    //String url = "jdbc:db2://xx.xxx.xxx.xxx:50000/SQLDB"; //please mod!
    //String user = "xxxxxxxx"; //please mod!
    //String pass = "xxxxxxxx"; //please mod!
    
    @Resource(lookup = "jdbc/mz-jvdb220150923-test-sqldb") //please mod!
	DataSource ds;
    
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // gets values of text fields
        String firstName = request.getParameter("firstName");
        String lastName = request.getParameter("lastName");
         
        InputStream inputStream = null; // input stream of the upload file
         
        // obtains the upload file part in this multipart request
        Part filePart = request.getPart("photo");
        if (filePart != null) {
            // prints out some information for debugging
            System.out.println(filePart.getName());
            System.out.println(filePart.getSize());
            System.out.println(filePart.getContentType());
             
            // obtains input stream of the upload file
            inputStream = filePart.getInputStream();
        }
         
        Connection conn = null; // connection to the database
        String message = null;  // message will be sent back to client

    	
    	
        try {
        	
        	System.out.println("Trying!");
            // connects to the database
        	conn = ds.getConnection();
        	System.out.println("Conecting dataSource!");
        	
        	//conn = DriverManager.getConnection(url, user, pass);
            //DriverManager.registerDriver(new com.mysql.jdbc.Driver());
            //conn = DriverManager.getConnection(url, user, pass);
 
            // constructs SQL statement
            String sql = "INSERT INTO CONTACTS (first_name, last_name, photo) values (?, ?, ?)";
            PreparedStatement statement = conn.prepareStatement(sql);
            statement.setString(1, firstName);
            statement.setString(2, lastName);
             
            if (inputStream != null) {
                // fetches input stream of the upload file for the blob column
                statement.setBlob(3, inputStream);
            }
 
            // sends the statement to the database server
            int row = statement.executeUpdate();
            if (row > 0) {
                message = "File uploaded and saved into database";
            }
        } catch (SQLException ex) {
            message = "ERROR: " + ex.getMessage();
            ex.printStackTrace();
        } finally {
            if (conn != null) {
                // closes the database connection
                try {
                    conn.close();
                } catch (SQLException ex) {
                    ex.printStackTrace();
                }
            }
            // sets the message in request scope
            request.setAttribute("Message", message);
             
            // forwards to the message page
            getServletContext().getRequestDispatcher("/Message.jsp").forward(request, response);
        }
    }

}

###2.3 Message.jsp

先ほどのjspファイルと同様にWebContent直下に作成して以下のコードを記載。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
        <h3><%=request.getAttribute("Message")%></h3>
    </center>
</body>
</html>

3. 解説

FileUploadDBServer.javaの中のServletの記載で、データソースのJNDIを定義している箇所がありますので、こちらの情報はBluemixから値をコピペしてきます。

@WebServlet("/uploadServlet")
@MultipartConfig(maxFileSize = 16177215)    // upload file's size up to 16MB
public class FileUploadDBServer extends HttpServlet {
    //String url = "jdbc:db2://xx.xxx.xxx.xxx:50000/SQLDB"; //please mod!
    //String user = "xxxxxxxx"; //please mod!
    //String pass = "xxxxxxxx"; //please mod!
    
    @Resource(lookup = "jdbc/mz-jvdb220150923-test-sqldb") //please mod!
	DataSource ds;

Bluemixのダッシュボードから、アプリケーションを選択。環境変数を選択すると、右側のVCAP_SERVICESに"name"があります。

その値を元に、データソースのリソースをlookupできるように以下のようにlookup属性のアノテーションを使用します。

    @Resource(lookup = "jdbc/MasterDBServer01-mz-sqldb")
    DataSource ds;

データソースの定義をWebSphere Application Server Liverty側で次回の記事で登録していきます。

4. 次回予告

さて、ここで少しこのあとのステップイメージを共有します。以下の①、②、③のステップでそれぞれ稼働確認していこうと思います。

①Eclipse環境内（ローカル環境）のLivertyにアプリケーションをデプロイし、Bluemix（クラウド環境）のDBに接続した状態でアプリケーションを稼働させる。

②Eclipse環境内（ローカル環境）で確認が取れたアプリケーションを、Bluemix上にデプロイし同様にアプリケーションを稼働させる。

③ローカル環境のLivertyサーバーをBluemix（クラウド環境）にプッシュして同様に稼働確認。

ということで、第三回はLiverty側の設定を行っていきます!!

関連リンク

　1. IBM Bluemix上のSQLDB（DB2）に画像を格納するJavaアプリ（第一回）