素朴にWEB開発

パッケージ	確認方法
Java開発環境（JDK）	コマンドプロンプトを起動してコンパイラのバージョンを表示　 javac -version
VC++再頒布パッケージ（VC++ランタイム）	再頒布パッケージ（XAMPP1.8.1用）　 Microsoft Visual C++ 2008 Redistributable - x86 プログラム一覧に再頒布パッケージが存在するか確認（コントロールパネル）　 [プログラムの追加と削除](WinXP)／[プログラムのアンインストール](Win7)

Java開発環境がインストール済みの場合は、改めて最新バージョンをインストールする必要はありません。
VC++ランタイムは、XAMPPに含まれるPHPの動作に必要です。 PHPのバージョンによっては、違うバージョンの再頒布パッケージが要求されるかもしれません。再頒布パッケージのインストール後は、Windows Update で最新バージョンに更新することをおすすめします。

**ダウンロードページ（2013年4月29日現在）**
名称	ファイル名	ページ
Java開発環境 JDK（Java SE 7u21）	jdk-7u21-windows-i586.exe	http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html Java SE Development Kit 7u21　[Accept License Agreement] Windows x86 [jdk-7u21-windows-i586.exe]
VC++ 2008再頒布パッケージ	vcredist_x86.exe	http://www.microsoft.com/ja-jp/download/details.aspx?id=11895 vcredist_x86.exe　[ダウンロード]

**ダウンロードページ（2013年4月29日現在）**
名称	ファイル名	ページ
XAMPP ポータブル	xampp-portable-win32-1.8.1-VC9-installer.exe	http://www.apachefriends.org/jp/xampp-windows.html XAMPP portable lite 1.8.1　[EXE]
JDBCドライバ（MySQL接続用）	mysql-connector-java-5.1.24.zip	http://www-jp.mysql.com/downloads/connector/j/#downloads Platform independent（・・・）, ZIP Archive　[Download] ログインか、[No thanks, just start my download.]
タグライブラリ（JSTL 1.1）	jakarta-taglibs-standard-1.1.2.zip	http://tomcat.apache.org/taglibs/standard/ Standard 1.1 JSTL 1.1　[download] [binaries/]
テストデータ	jstestdata.zip	jstestdata.zip（約40K）

**ダウンロードページが消えてしまった時の参考に**
名称	TOPページ	選択
XAMPP ポータブル	http://www.apachefriends.org/jp/	最重要プロジェクト [XAMPP] － [XAMPP for Windows]
JDBCドライバ（MySQL接続用）	http://www-jp.mysql.com/	ダウンロード（GA）[MySQL Connectors] － [Connector/J]
タグライブラリ（JSTL 1.1）	http://jakarta.apache.org/	Ex-Jakarta [Taglibs] － [Apache Standard Taglib]
JDK（Java SE 7u21）	http://www.oracle.com/	DOWNLOADS [Java for Developers] Java SE 7u21 JDK [DOWNLOAD]

ダウンロードした jdk-7u21-windows-i586.exe をダブルクリックすると、最初にJDK、続けてJREのインストールが自動的に行われます。 PATHが長いと面倒なので、JDKのインストール先は変更します。

名称	インストール先	参考
JDK（Java開発環境）	C:\Java\jdk1.7\	[変更]　デフォルト(C:\Program Files\Java\jdk 1.7.0_21\) 環境変数の設定（Path,JAVA_HOME）で使用
JRE（Java実行環境）	C:\Program Files\Java\jre7\

ダウンロードした vcredist_x86.exe をダブルクリックしてインストールします。このパッケージをインストールした後は、Windows updateで最新の状態にすることをおすすめします。

ダウンロードした xampp-portable-win32-1.8.1-VC9-installer.exe を ダブルクリックしてインストールします。インストール先として、日本語やスペースを含むPATHは指定しないほうが無難です。
インストール後、XAMPPコントロールパネルのショートカットを作っておくと便利です。

名称	インストール先	デフォルト(Destination)	参考	XAMPPコントロールパネルの実行ファイル名
XAMPPポータブル	C:\xampp	c:\xampp-portable	環境変数の設定（Path）で使用	C:\xampp\xampp-control.exe

ポータブル以外のXAMPPをインストールすると、XAMPPコントロールパネルのショートカットがデスクトップに作られます。その作業フォルダがインストール先と違っていると、Tomcatの起動に失敗します。

【XAMPPのメッセージについて（意訳）】

Warning: XAMPP (PHP) cannot work without the Microsoft Visual C++ 2008 Redistributable Package.
　警告：XAMPP（PHP）には、Microsoft Visual C++ 2008 再頒布可能パッケージが必要です。
Now open the Microsoft page for this download?
　これをダウンロードするためにマイクロソフトのページを開きますか？
This package is removable device compatible. All configuration files have relative paths.
　このパッケージは取り外し可能な記憶媒体(USBメモリなど)で使えます。すべての構成ファイルは相対パス指定をしています。
This package make no registry modifications and have no uninstaller.
　このパッケージはレジストリを変更しないし、アンインストールもありません。
Please remove the installation directory manually if you do not need it anymore.
　不要になったら、インストールしたディレクトリを削除してください。

ダウンロードしたJDBCドライバとタグライブラリを解凍して所定の場所に置きます。

用途	ファイル名	置き場所	ダウンロードファイル名
MySQL接続	mysql-connector-java-5.1.24-bin.jar	C:\xampp\tomcat\lib	mysql-connector-java-5.1.24.zip
タグライブラリ	jstl.jar	C:\xampp\tomcat\lib	jakarta-taglibs-standard-1.1.2.zip
タグライブラリ	standard.jar	C:\xampp\tomcat\lib	jakarta-taglibs-standard-1.1.2.zip

該当する環境変数がなければ作成し、既存の場合は値の最後にセミコロンを付けて追加します。

環境変数名	値に追加するパス	設定したらコマンドプロンプトで確認	補足
Path	C:\java\jdk1.7\bin	javac -version	Javaコンパイラなど
Path	C:\xampp\mysql\bin	mysql --version	MySQLコマンド類
JAVA_HOME	C:\java\jdk1.7\bin	set JAVA_HOME

環境変数設定ウインドウ
(WinXP)：[コントロールパネル]－[システム]－[詳細設定]－[環境変数]
(Win7) ：[コントロールパネル]－[システムとセキュリティ]－[システム]－[システムの詳細設定]－[環境変数]

ダウンロードしたテストデータを解凍して、所定の場所に置きます。他のフォルダは名前だけ作っておきます。
開発フォルダ配置図

**テストデータ（jstestdata.zip）の内容**
フォルダ	ファイル	用途
/csvdata	friend.csv, pet.csv	DB登録用サンプルデータ
/img	*.jpg	テストで使うサンプル画像

XAMPPコントロールを実行して、パネル画面から設定を行います。

C:\xampp\xampp-control.exe

パネル画面では、起動／停止・管理・設定・ログ表示などができます。 [Start] ボタンをクリックすると、該当モジュールの起動を開始します。無事に起動を完了すると、[Start]ボタンの表示が[Stop]に変わります。モジュールを停止する場合は、この [Stop] ボタンをクリックします。
XAMPP画面

Tomcatを起動すると、自動的に新しいコマンドプロンプトが起動します。このウインドウを閉じると、Tomcatも停止します。

**パネル画面の主な機能**
Action	処理	備考
Start/Stop	モジュール起動／停止	モジュール名背景色（黄：起動開始，緑：起動完了）
Admin	管理画面表示	http://localhost/～
Config	設定ファイル編集	notepad.exe 設定ファイル
Logs	ログファイル表示

Tomcat行の[Admin]で起動する「Tomcat Manager Application」のユーザーを登録します。

XAMPP Tomcat行　[Config] － [tomcat-users.xml]

下記の２行を追加します。ユーザー名とパスワードは任意の文字列を指定します。

tomcat-users.xml　（C:\xampp\tomcat\conf）

<tomcat-users>
   :
-->
  <role rolename="manager-gui"/>
  <user username="admin" password="pass" roles="manager-gui"/>
</tomcat-users>

サーバー側の文字セットをUTF-8にして、クライアント側にも同じ文字セットを指定します。

XAMPP MySQL行　[Config] － [my.ini]

下記のコメント（#）になっている２行を生かします。

my.ini　（C:\xampp\mysql\bin）

[mysqld]
   :
## UTF 8 Settings
#init-connect=\'SET NAMES utf8\'
#collation_server=utf8_unicode_ci
character_set_server=utf8
skip-character-set-client-handshake
#character_sets-dir="/xampp/mysql/share/charsets"

[mysqldump]
   :

セキュリティの設定は、ウェブブラウザのXAMPP管理画面から行います。

XAMPP  MySQL行　[Start]
      Apache行　[Start]
      Apache行　[Admin]　（http://localhost/xampp）

日本語を選んで、管理画面からXAMPPセキュリティに移動し、設定画面を表示します。

[セキュリティ]
[http://localhost/security/xamppsecurity.php]

この画面でセキュリティの設定を行います。

MySQLの"ROOT"パスワードを入力して [パスワードを変更しました。] をクリックします。この設定を行うと、SQL管理画面やMySQLコマンドを使うとき、 rootのパスワードを要求されるようになります。

ユーザとパスワードを入力して [安全なXAMPPディレクトリを作成してください。] をクリックします。この設定を行うと、XAMPP管理画面を開くとき、ユーザとパスワードの入力を要求されるようになります。

最後に、MySQLとApacheを停止してから、XAMPPコントロールパネルを終了します。

XAMPP  MySQL行　[Stop]
      Apache行　[Stop]
               　[Quit]

コントロールパネルを終了しても、モジュールは走り続けます。
モジュールをすべて停止してから、コントロールパネルを終了します。

MySQLには、最初から’TEST’という空のデータベースが存在します。そこに２つのテーブル(friend, pet)を作成して、テストデータを登録します。
この作業はSQL管理画面でもできますが、コマンドプロンプトでMySQLコマンドラインクライアント（mysql）を実行した方が簡単です。
ただし、コマンドプロンプトでは、UTF-8日本語表示ができないので、テーブル内容の確認はSQL管理画面を使用します。

コマンドプロンプト操作メモ
クリップボードの文字をコマンドラインに貼り付け：プロンプト画面上で右クリック[貼り付け]
プロンプト画面表示文字をクリップボードにコピー：プロンプト画面上で右クリック[範囲指定]ドラッグ、Enter
コマンドライン入力履歴をさかのぼって表示　　　：上矢印（↑）キー

XAMPPコントロールパネルで、MySQLを起動します。 MySQLの動作中でなければ、MySQLコマンドラインクライアントを使えません。

XAMPP MySQL行　[Start]

コマンドプロンプトを起動します。
テストデータを置いた場所に移動して、MySQLコマンドラインクライアント（mysql）を起動します。

C:\～ > cd \xweb\csvdata   ENTER 
C:\xweb\csvdata> mysql -u root -pパスワード   ENTER 
mysql>

パスワードには、「セキュリティの設定」で登録したrootパスワードを指定します。 "-p"に続けてスペースを入れずにパスワードを入力します。

全データベースに対してSELECT権限を持ち、パスワード（pass01）付きのユーザー（user01）を登録します。

mysql> grant select on *.* to 'user01'@'localhost' identified by 'pass01';

データベース’TEST’に２つのテーブル（friend, pet）を作成して、 CSVファイル（friend.csv, pet.csv）の内容をロードします。

mysql> use test;
mysql> create table friend
    -> (id int unique not null, name varchar(20) not null, pcode varchar(4));

mysql> create table pet
    -> (pcode varchar(4) unique not null, pname varchar(20) not null,
    -> type varchar(20), feature varchar(100), gazo varchar(20));

mysql> load data local infile "./friend.csv" into table friend
    -> fields terminated by ',' lines terminated by '\r\n' ignore 1 lines;

mysql> load data local infile "./pet.csv" into table pet
    -> fields terminated by ',' lines terminated by '\r\n' ignore 1 lines;

コマンドは必ずセミコロンで終了します。セミコロンを入力しないでエンターキーを押すと、続きの入力待ち（->）になります。

◆SQLコマンドメモ
ユーザー名表示　　：select host,user from mysql.user;
権限テーブル再読込：flush privileges;
ユーザー権限表示　：show grants for 'user01'@'localhost';
テーブル名表示　　：show tables;
テーブル項目表示　：show columns from friend;
文字セット表示　　：show variables like 'char%';
ユーザー削除　　　：drop user 'user01'@'localhost';

MySQLコマンドラインクライアントを終了して、コマンドプロンプトに戻ります。

mysql> quit　（exitでも終了）

XAMPPコントロールパネルで、ApacheとMySQLを起動してから、 SQL管理（phpMyAdmin）を実行して確認します。

XAMPP Apache行　[Start]
       MySQL行　[Start]
       MySQL行　[Admin]　（http://localhost/phpmyadmin）

言語（Language）に「日本語 - Japanese」を指定して、rootでログインします。
ログイン画面

左側のデータベースリストで[test]を選択して、確認するテーブル名をクリックします。
上部127.0.0.1をクリックすると最初のページに戻ります。
phpMyAdmin画面

次の内容で、テスト用のJavaサーブレットを作成します。

種類	名前	説明	補足
WEBアプリ名	jstest	フォルダ名	公開されるフォルダ
サーブレット名	jstst	任意の名前	設定（web.xml）内で使用
Javaクラス	JsTest	ソース内のクラス名	クラスファイル（JsTest.class）
URL	/java01	任意の文字列	http://localhost:8080/jstest以下

JavaサーブレットのWEB設定ファイルを作成します。

web.xml 【UTF-8】　（C:\xweb\jstest\war\WEB-INF）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4">
    <servlet>
        <servlet-name>jstst</servlet-name>
        <servlet-class>JsTest</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>jstst</servlet-name>
        <url-pattern>/java01</url-pattern>
    </servlet-mapping>
</web-app>

Javaサーブレットのソースファイルを作成します。

JsTest.java 【UTF-8】　（C:\xweb\jstest\src）

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.sql.*;

public class JsTest extends HttpServlet {
    public void doGet(HttpServletRequest req, HttpServletResponse res)
        throws IOException, ServletException
    {
        String db_param = "?useUnicode=true&characterEncoding=UTF-8";
        String db_name  = "test";
        String db_url   = "jdbc:mysql://localhost/" + db_name + db_param;
        String db_usr   = "user01";
        String db_pswd  = "pass01";

        res.setContentType("text/html; charset=UTF-8");
        req.setCharacterEncoding("UTF-8");
        PrintWriter out = res.getWriter();
        out.println("<html>");
        out.println("<head>");
        out.println("<title>MySQLデータ表示テスト</title>");
        out.println("</head>");
        out.println("<body>");
        out.println("<h1>友人リスト表示テスト</h1>");

        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            out.println("◆JDBCドライバのインスタンス作成に成功しました<br>");
            out.println("接続先    : " + db_url + "<br>");
            out.println("ユーザ名  : " + db_usr + "<br>");
            out.println("パスワード: " + db_pswd + "<br>");
            Connection con = DriverManager.getConnection(db_url, db_usr, db_pswd);
            out.println("◆DBに接続しました<br>");

            String query = "SELECT * FROM friend";
            out.println("実行クエリ: " + query + "<br>");
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery(query);

            out.println("ID NAME PCD<br>");

            while (rs.next()) {
                String str = "";
                str += rs.getString(1) + " ";
                str += rs.getString(2) + " ";
                str += rs.getString(3) + " ";
                out.println(str + "<br>");
            }
            stmt.close();
            rs.close();
            con.close();
            out.println("◆DBから切断しました<br>");

        } catch (SQLException e1) {
            out.println("SQLException: " + e1.getMessage() + "<br>");
            out.println("SQLState    : " + e1.getSQLState() + "<br>");
            out.println("VendorError : " + e1.getErrorCode() + "<br>");
            e1.printStackTrace(out);
            out.println("<br>");
        } catch (Exception e2) {
            e2.printStackTrace(out);
            out.println("<br>");
        }
        out.println("</body>");
        out.println("</html>");
        out.close();
    }
}

コンパイルのコマンドラインが長くなるので、バッチファイルを作成します。

jccu.bat 【Shift-JIS（ANSI）】　（C:\xweb\jstest\src）

javac -d ..\war\WEB-INF\classes -encoding UTF8 -classpath C:\xampp\tomcat\lib\servlet-api.jar %1.java

コマンドプロンプトを起動して、 Javaソースとコンパイル用バッチファイルを置いた場所に移動します。バッチを実行してコンパイルし、無事にクラスファイルが作られたら、アップロードデータのトップに移動します。アーカイバを実行して、作成されたアーカイブファイルをTomcat所定の位置にコピーします。アーカイブファイル（.war）はWEBアプリと同じ名前にします。

C:\～ > cd \xweb\jstest\src   ENTER 
C:\xweb\jstest\src> jccu JsTest   ENTER 
C:\xweb\jstest\src> cd ..\war   ENTER 
C:\xweb\jstest\war> jar cvf jstest.war *   ENTER 
C:\xweb\jstest\war> copy /Y jstest.war \xampp\tomcat\webapps   ENTER

Javaソース１行目の『不正な文字』でコンパイルが通らない場合は、 UTF-8のBOM　が参考になるかもしれません。

**上記のコマンドについて**
説明	コマンド	作成ファイル	ファイルが作られる場所
Javaソースのコンパイル	jccu（javac）	JsTest.class	C:\xweb\jstest\war\WEB-INF\classes
WEBアプリのアーカイブ	jar	jstest.war	C:\xweb\jstest\war
上書き確認なしのコピー	copy /Y	jstest.war	C:\xampp\tomcat\webapps

【Tomcatの動作】

Tomcat所定の位置(C:\xampp\tomcat\webapps)にアーカイブファイル(*.war)を置くと、 Tomcatが自動的に展開して拡張子抜きの名前のフォルダを作成します。
アーカイブファイルを削除すると、Tomcatが作成したフォルダも自動的に消えます。
ただし、Tomcatが作成したフォルダの内容を変更した場合は、それより新しく作られたアーカイブファイルが置かれるまで削除されません。

XAMPPコントロールパネルで、MySQLとTomcatとApacheを起動します。、

XAMPP  MySQL行　[Start]
      Tomcat行　[Start]
      Apache行　[Start]

ウェブブラウザを起動してURLを入力します。

http://localhost:8080/jstest/java01

結果を確認します。
友人リスト表示テスト画面

次の内容で、Javaサーブレットを同じWEBアプリ（jstest）に追加します。

種類	名前	説明	補足
サーブレット名	java02	任意の名前	設定（web.xml）内で使用
Javaクラス	JsList	ソース内のクラス名	クラスファイル（JsList.class）
URL	/neko/java02/	任意の文字列	http://localhost:8080/jstest以下

WEB設定ファイルにサーブレットを追加します。

web.xml 【UTF-8】　（C:\xweb\jstest\war\WEB-INF）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4">
    <servlet>
        <servlet-name>jstst</servlet-name>
        <servlet-class>JsTest</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>jstst</servlet-name>
        <url-pattern>/java01</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>java02</servlet-name>
        <servlet-class>JsList</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>java02</servlet-name>
        <url-pattern>/neko/java02/</url-pattern>
    </servlet-mapping>

</web-app>

少しそれらしいプログラムを「UTF-8」で作成します。

JsList.java 【UTF-8】　（C:\xweb\jstest\src）

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.sql.*;


public class JsList extends HttpServlet {
    private static final String WEB_HOME = "/jstest";

    public void doGet(HttpServletRequest req, HttpServletResponse res)
        throws IOException, ServletException
    {

    	String db_param = "?useUnicode=true&characterEncoding=UTF-8";
        String db_name  = "test";
        String db_url   = "jdbc:mysql://localhost/" + db_name + db_param;
        String db_usr   = "user01";
        String db_pswd  = "pass01";

        res.setContentType("text/html; charset=UTF-8");
        req.setCharacterEncoding("UTF-8");
        PrintWriter out = res.getWriter();
        out.println("<html>");
        out.println("<head>");
        out.println("<title>MySQLデータ表示テスト２</title>");
        out.println("</head>");
        out.println("<body>");

        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            Connection con = DriverManager.getConnection(db_url, db_usr, db_pswd);

            String query = "SELECT * FROM friend INNER JOIN pet ON friend.pcode = pet.pcode";
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery(query);

            out.println("<table border=\"1\">");
            out.println("<caption>ペットを飼っている友人リスト</caption>");
            out.println("<tr><th>ID</th><th>名前</th><th>ペット名</th><th>写真</th>");
            out.println("<th>種類</th><th>説明</th></tr>");

            while (rs.next()) {
                out.println("<tr>");
                out.println("<td>" + rs.getInt("id")         + "</td>");
                out.println("<td>" + rs.getString("name")    + "</td>");
                out.println("<td>" + rs.getString("pname")   + "</td>");
                out.println("<td><img src=\"" + WEB_HOME + "/img/" + rs.getString("gazo") + "\"></td>");
                out.println("<td>" + rs.getString("type")    + "</td>");
                out.println("<td>" + rs.getString("feature") + "</td>");
                out.println("</tr>");

            }
            out.println("</table>");

            stmt.close();
            rs.close();
            con.close();

        } catch (SQLException e1) {
            out.println("SQLException: " + e1.getMessage() + "<br>");
            out.println("SQLState    : " + e1.getSQLState() + "<br>");
            out.println("VendorError : " + e1.getErrorCode() + "<br>");
            e1.printStackTrace(out);
            out.println("<br>");
        } catch (Exception e2) {
            e2.printStackTrace(out);
            out.println("<br>");
        }
        out.println("</body>");
        out.println("</html>");
        out.close();
    }
}

コマンドプロンプトを起動して、コンパイル・アーカイブ・コピーを行います。

C:\～ > cd \xweb\jstest\src   ENTER 
C:\xweb\jstest\src> jccu JsList   ENTER 
C:\xweb\jstest\src> cd ..\war   ENTER 
C:\xweb\jstest\war> jar cvf jstest.war *   ENTER 
C:\xweb\jstest\war> copy /Y jstest.war \xampp\tomcat\webapps   ENTER

アーカイブファイル（.war）を作らないで、クラスファイル（.class）だけコピーした場合は、 Tomcatを再起動するまで結果が反映されません。

XAMPPコントロールパネルで、MySQLとTomcatとApacheを起動します。

ウェブブラウザを起動してURLを入力します。

http://localhost:8080/jstest/neko/java02/

結果を確認します。
ペットを飼っている友人リスト

次の内容で、WEBアプリ（jstest）にJSP（JavaServer Pages）を追加します。

種類	名前	説明
リソース名	jdbc/TestDB	MySQLアクセス用（任意の名前）
JSPファイル	JspBase.jsp	ソース／実行ファイル（コンパイル不要）
設定ファイル	context.xml	リソース設定

WEBアプリ設定ファイルを作成して、データベースの情報を記述します。

context.xml 【UTF-8】　（C:\xweb\jstest\war\META-INF）

<?xml version="1.0" encoding="UTF-8"?>
<Context>
    <Resource name="jdbc/TestDB"
        removeAbandoned="true"
        removeAbandonedTimeout="60"
        logAbandoned="true"
        auth="Container"
        type="javax.sql.DataSource"
        maxActive="20"
        maxIdle="60"
        maxWait="1000"
        username="user01"
        password="pass01"
        driverClassName="com.mysql.jdbc.Driver"
        url="jdbc:mysql://localhost/test"
    />
</Context>

【WEBアプリ設定ファイルについて】

この設定は、{WEBアプリ名}.xml というファイル名で、Tomcat設定ディレクトリに置くこともできます。
　C:\xampp\tomcat\conf\Catalina\localhost\jstest.xml
設定内容はTomcat再起動後に反映されます。
※ここに設定ファイルを作っても、webappsのアーカイブ(.war)を書き換えると自動的に削除されます。

SELECT文を少し変えて、猫を飼っている友人だけ表示するJSPを作成します。

JspBase.jsp 【UTF-8】　（C:\xweb\jstest\war\jsp）

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.sql.*, javax.sql.*, javax.naming.*" %>

<%
  Context initCon = new InitialContext();
  DataSource ds = (DataSource)initCon.lookup("java:comp/env/jdbc/TestDB");
  Connection con = ds.getConnection();
  Statement stmt = con.createStatement();
  String query = "SELECT * FROM friend INNER JOIN pet ON friend.pcode = pet.pcode";
         query = query + " where pet.type = '猫'";          
  ResultSet rs = stmt.executeQuery(query);
%>

<html>
<head><title>JSPでスッキリ</title></head>
<body>

<table border="1">
  <caption>ネコを飼っている友人リスト</caption>
  <tr>
    <th>ID</th><th>名前</th><th>ペット名</th><th>写真</th>
    <th>説明（模様など）</th>
  </tr>

  <%
    while (rs.next()) {
  %>

  <tr>
    <td> <%= rs.getInt("id") %></td>
    <td> <%= rs.getString("name") %></td>
    <td> <%= rs.getString("pname") %></td>
    <td><img src="../img/<%= rs.getString("gazo")%>"></td>
    <td> <%= rs.getString("feature") %></td>
  </tr>

  <%
    }
    con.close();
    initCon.close();
  %>
</table>

</body>
</html>

WEBアプリ設定ファイル（C:\xweb\jstest\war\META-INF\context.xml）を下記のフォルダにコピーします。
C:\xampp\tomcat\webapps\jstest\META-INF

JSPファイル（C:\xweb\jstest\war\jsp\JspBase.jsp）を下記のフォルダにコピーします。
C:\xampp\tomcat\webapps\jstest\jsp

【配置について】

JSPファイルは、WEBアプリのホームポジション(webapps\{WEBアプリ名})の下であれば、好きな場所に置けます。ホーム直下か、ホームにサブディレクトリを作って、そこに置くのが一般的です。
Javaサーブレットは規則に従って各ファイルを決められたディレクトリに配置し、設定ファイル(web.xml)に指定したURLで呼び出しますが、 JSPはコンパイル不要の単独ファイルで、比較的自由に配置できます。 URLには、WEB領域(webapps)からのパスを指定します。
最初からJSPファイルを所定の場所に作成しないのは、開発環境とWEB領域を区別するためです。実際にWEBアプリを公開する時には、WEB領域にアーカイブファイル(.war)をアップロードします。 JavaサーブレットやJSPファイルをまとめて一つのファイルにすることで、アップロードを簡単にしています。

XAMPPコントロールパネルで、MySQLとTomcatとApacheを起動します。 Tomcat起動中の場合は、一度停止してから再起動します。

ウェブブラウザを起動してURLを入力します。大文字と小文字を正しく入力する必要があります。

http://localhost:8080/jstest/jsp/JspBase.jsp

結果を確認します。
ネコを飼っている友人リスト

次の内容で、WEBアプリ（jstest）にタグライブラリを使ったJSPを追加します。

種類	名前	説明
リソース名	jdbc/TestDB	MySQLアクセス用（context.xmlで指定した名前）
JSPファイル	JspTags.jsp	ソース／実行ファイル（コンパイル不要）

SELECT文を少し変えて、猫以外のペットを飼っている友人だけ表示するJSPを作成します。

JspTags.jsp 【UTF-8】　（C:\xweb\jstest\war\jsp）

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<sql:query var="rs" dataSource="jdbc/TestDB">
	SELECT * FROM friend INNER JOIN pet ON friend.pcode = pet.pcode
                 WHERE pet.type <> '猫'
</sql:query>

<html>
<head><title>タグライブラリでもっとスッキリ</title></head>
<body>

<table border="1">
  <caption>ネコ以外を飼っている友人リスト</caption>
  <tr>
    <th>ID</th><th>名前</th><th>ペット名</th><th>写真</th>
    <th>タイプ</th><th>説明</th>
  </tr>

  <c:forEach var="row" items="${rs.rows}">
    <tr>
      <td>${row.id}</td>
      <td>${row.name}</td>
      <td>${row.pname}</td>
      <td><img src="../img/${row.gazo}"></td>
      <td>${row.type}</td>
      <td>${row.feature}</td>
    </tr>
  </c:forEach>
</table>

</body>
</html>

これが最後なので、アーカイブを行って、WEB領域のアーカイブファイルを最新にしておきます。
コマンドプロンプトを起動して、アーカイブとコピーを行います。

C:\～ > cd \xweb\jstest\war   ENTER 
C:\xweb\jstest\war> jar cvf jstest.war *   ENTER 
C:\xweb\jstest\war> copy /Y jstest.war \xampp\tomcat\webapps   ENTER

自動展開したjstestフォルダに、作成したJspTags.jspが存在することを確認します。

XAMPPコントロールパネルで、MySQLとTomcatとApacheを起動します。

ウェブブラウザを起動してURLを入力します。大文字と小文字を正しく入力する必要があります。

http://localhost:8080/jstest/jsp/JspTags.jsp

結果を確認します。
ネコ以外を飼っている友人リスト

他の端末がLANで接続中の場合は、その端末で呼び出してみます。
最初に、XAMPPをインストールしたパソコンのホスト名とIPアドレスを確認しておきます。

XAMPPコントロールパネルで、MySQLとTomcatとApacheを起動して、TOMCAT管理画面を表示します。

右側の [Server Status] をクリックして、前述の『各種設定』で登録したTOMCAT管理ユーザーでログインします。
Tomcat管理画面
サーバ情報のホスト名（Hostname）とIPアドレス（IP Address）を確認します。

他の端末で、ウェブブラウザを起動してURLを入力します。 localhostの代わりにホスト名かIPアドレスを指定します。

http://xxx.xxx.xxx.xxx:8080/jstest/jsp/JspTags.jsp

実行テストと同じ内容が表示されるはずです。

XAMPPをインストールした後、PHP開発環境を設定します。

php.ini　（C:\xampp\php）

[PHP]
       :
       :
; PHP's default character set is set to empty.
; http://php.net/default-charset
default_charset = "UTF-8"
       :
       :
[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = Asia/Tokyo
       :
       :
[mbstring]
; language for internal character representation.
; http://php.net/mbstring.language
mbstring.language = Japanese

; internal/script encoding.
; Some encoding cannot work as internal encoding.
; (e.g. SJIS, BIG5, ISO-2022-*)
; http://php.net/mbstring.internal-encoding
mbstring.internal_encoding = UTF-8
       :
       :

PHPファイルは、C:\xampp\htdocs\ の下に置いて http://localhost/～.php で実行します。
PHP専用のサブディレクトリを作って、まとめて置いといたほうがいいかもしれません。