JSP プログラムの例: 登録およびログインフォーム

⚡ スマートサマリー

ここに示すJSPプログラムの例では、登録フォーム、ログイン/ログアウトフォーム、フォーム処理ページという3つのモジュールを構築し、それぞれがJSPビューをサーブレットコントローラに接続することで、MVCの分割構造を初心者にも分かりやすく示しています。

🔘 登録の流れ： Register_1.jsp は 6 つのフィールドを収集し、それらを guru_register サーブレットに送信します。guru_register サーブレットは、すべてのフィールドが入力された場合にのみ成功ページに転送します。
☑️ ログインとログアウト： Register_3.jspは認証情報をguru_loginに送信します。Register_4.jspはユーザーに挨拶し、ログアウトするためにログインページへのリンクを表示します。
✅ MVCの役割: JSPページはビューとして機能し、サーブレットはコントローラーとして機能し、RequestDispatcherはそれらの間でリクエストを転送します。
🧪 フォーム処理: getParameter()、getParameterValues()、getParameterNames()、getInputStream() は、JSP またはサーブレット内で送信されたデータを読み取ります。
🛠️ GETとPOSTの違い： GET はエンコードされた値を URL また、長さに制限があります。POST はリクエスト本文に値を含めるため、パスワードに適しています。
⚠️ バージョンノート： これらのリストはjavax.servletをインポートするため、Tomcat 9以前のバージョンで動作します。Tomcat 10以降ではjakarta.servletパッケージが必要です。

プロフィール

これらの実例は、JSP を使用してサンプルプログラムを開発する方法と、それらを中心に MVC アーキテクチャを実装する方法を示しています。次の 3 つのモジュールが順番に構築されます。

ご登録はこちらから
ログインおよびログアウトフォーム
JSPフォーム

JSPで登録フォームを作成する方法

登録フォームには、名前、ユーザー名、パスワード、住所、連絡先番号など、すべての詳細情報を入力する欄があります。

このフォームは、アプリケーションへの登録に役立ちます。すべての詳細情報を取得し、データベースまたはキャッシュ。

この例では、「Guru 登録フォームには、以下の項目があります。

名
姓
パスワード
住所
お電話でのお問い合わせ

これらの詳細をすべて入力した後、送信ボタンが表示されます。そのボタンをクリックすると、すべての詳細がサーブレットに送信されます。

例 1: Register_1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Guru Registration Form</title>
</head>
<body>
<h1>Guru Register Form</h1>
<form action="guru_register" method="post">
			<table style="with: 50%">
				<tr>
					<td>First Name</td>
					<td><input type="text" name="first_name" /></td>
				</tr>
				<tr>
					<td>Last Name</td>
					<td><input type="text" name="last_name" /></td>
				</tr>
				<tr>
					<td>UserName</td>
					<td><input type="text" name="username" /></td>
				</tr>
					<tr>
					<td>Password</td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td>Address</td>
					<td><input type="text" name="address" /></td>
				</tr>
				<tr>
					<td>Contact No</td>
					<td><input type="text" name="contact" /></td>
				</tr></table>
			<input type="submit" value="Submit" /></form>
</body>
</html>

コードの説明：

Code ライン11： ここでは、リクエストが送信されるサーブレット（guru_register.java）を指定するアクションを持つフォームを使用します。リクエストはPOSTメソッドで処理されます。

Code 14〜16行目： ここでは入力タイプをテキストとし、名前をfirst_nameとしています。

Code 18〜20行目： ここでは入力タイプをテキストとし、名前をlast_nameとしています。

Code 22〜24行目： ここでは、入力タイプをテキスト、名前をユーザー名としています。

Code 26〜28行目： ここでは、入力タイプをpassword（入力中はパスワードが非表示になります）、名前をpasswordとしています。

Code 30〜32行目： ここでは、入力タイプをテキスト、名前を住所として扱います。

Code 34〜36行目： ここでは、入力タイプをテキスト、名前を連絡先として扱います。

Code ライン37： ここでは、値が「送信」である送信タイプのボタンを使用します。このボタンをクリックすると、対応するguru_registerサーブレットにアクションが渡され、そこですべてのパラメータ値がリクエストに渡されます。

注意： テーブル属性 Code 12行目にはこう書かれている style="with: 50%"正しいCSSプロパティは widthそのため、掲載内容は公開されたとおりに再現されますが、その誤字が修正されるまでは表のサイズは調整されません。

例2： Guru_register.java

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_register
 */
public class guru_register extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String first_name = request.getParameter("first_name");
		String last_name = request.getParameter("last_name");
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String address = request.getParameter("address");
		String contact = request.getParameter("contact");
		
		if(first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || 
				password.isEmpty() || address.isEmpty() || contact.isEmpty())
		{
			RequestDispatcher req = request.getRequestDispatcher("register_1.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_2.jsp");
			req.forward(request, response);
		}
	}

}

コードの説明：

Code ライン14： ここでは、HttpServlet を拡張する guru_register サーブレットを定義します。

Code ライン18： これはdoPost()メソッドで、上記のJSPフォームでメソッド属性としてPOSTを指定した場合に呼び出されます。

Code 20〜25行目： ここでは、request.getParameter を使用して、リクエストから値、つまり first_name、last_name、username、password、address、contact を取得します。

Code 27〜32行目： ここでは、if 条件を使用して、リクエストから取得したパラメータのいずれかが空かどうかをチェックしています。いずれかのパラメータが空の場合、制御はこの条件 (first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) に入り、リクエストオブジェクトから RequestDispatcher オブジェクトを取得して、リクエストを register_1.jsp に返します。ここでは、リクエストオブジェクトとレスポンスオブジェクトも含まれています。

Code 33〜37行目： この分岐は、パラメータがすべて正しい場合に実行されます。リクエストオブジェクトからRequestDispatcherオブジェクトを取得し、リクエストをregister_2.jspに転送します。ここでは、リクエストオブジェクトとレスポンスオブジェクトを転送しています。

この2つの部門の違いは重要です。 include() register_1.jsp を実行し、サーブレットに制御を戻します。 forward() リクエストをregister_2.jspに渡して、戻ってきません。

例 3: Register_2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Guru Success Page</title>
</head>
<body>
           <a><b>Welcome User!!!!</b></a>
</body>
</html>

コードの説明：

Code ライン10： ここではウェルカムメッセージを表示します。このJSPは、すべてのパラメータが入力されたときに呼び出されます。

上記のコードを実行すると、次の出力が得られます。

出力：

登録ページには、以下に示すように、ラベル付きの6つの入力欄と1つの送信ボタンが表示されます。

すべての項目が入力され、「送信」ボタンがクリックされると、guru_registerはregister_2.jspに転送され、成功ページが表示されます。

register_1.jspをクリックすると、名、姓、ユーザー名、パスワード、住所、連絡先を入力するフォームが表示されます。すべての情報を入力して送信ボタンをクリックすると、「ようこそ、ユーザー様」というメッセージが表示されます。

JSPでログインフォームとログアウトフォームを作成する方法

登録フォームと同様に、今度はログインフォームとログアウトフォームを作成します。

この例では、「ユーザー名」と「パスワード」という2つの入力欄と送信ボタンを備えたログインフォームを使用しています。

送信ボタンをクリックすると、ログアウトボタン付きのウェルカムメッセージが表示されます。

ログアウトボタンをクリックすると、ログインフォームに戻ります。

例 1: Register_3.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Guru Login Form</title>
</head>
<body>
<form action="guru_login" method="post">
		<table style="with: 50%">

			<tr>
				<td>UserName</td>
				<td><input type="text" name="username" /></td>
			</tr>
				<tr>
				<td>Password</td>
				<td><input type="password" name="password" /></td>
			</tr>
		</table>
		<input type="submit" value="Login" /></form>
</body>
</html>

コードの説明：

Code ライン10： ここでは、アクションがサーブレットguru_login.javaであるフォームを取り上げています。データの受け渡し方法はPOSTです。

Code 13〜16行目： ここでは、テキスト型の入力フィールド「username」を取り上げます。

Code 17〜20行目： ここでは、入力フィールド「password」を取り上げます。このフィールドの型はpasswordです。

Code ライン22： ここでは、「送信」ボタンに「ログイン」という値を設定しています。このボタンをクリックすると、制御はサーブレットguru_loginに移り、そこでリクエストオブジェクトを使用して両方のフィールドが読み取られます。

例2： Guru_login.java (サーブレット)

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_login
 */
public class guru_login extends HttpServlet {

    public guru_login() {
        super();
        // TODO Auto-generated constructor stub
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		if(username.isEmpty() || password.isEmpty() )
		{
			RequestDispatcher req = request.getRequestDispatcher("register_3.jsp");
			req.include(request, response);
		}
		else
		{
			RequestDispatcher req = request.getRequestDispatcher("register_4.jsp");
			req.forward(request, response);
		}
	}

}

コードの説明：

Code 5〜9行目： ここでは、必要なクラスをコードにインポートしています。

Code ライン14： ここでは、HttpServlet を継承する guru_login サーブレットを宣言しています。

Code ライン21： ここでは、フォームがPOSTメソッドを使用しているため、doPost()メソッドを使用しています。

Code 23〜24行目： ここでは、リクエストオブジェクトを使用してパラメータ（ユーザー名とパスワード）を読み取っています。

Code 25〜29行目： このように、「if」条件を使用して、ユーザー名とパスワードが空かどうかをチェックします。どちらかが空の場合は、リクエストオブジェクトとレスポンスオブジェクトとともにregister_3.jspに制御を戻すRequestDispatcherオブジェクトを取得します。

Code 30〜34行目： この分岐は、両方が空でない場合に実行され、リクエストオブジェクトとレスポンスオブジェクトとともにリクエストをregister_4.jspに転送します。

例 3: Register_4.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Guru Logged In</title>
</head>
<body>
	<table style="with: 50%">
	<tr><td>
	<% String username = request.getParameter("username"); %>
<a>Welcome   <% out.println(username); %> User!!!! You have logged in.</a></td></tr>
<tr></tr><tr><td></td><td></td><td><a href="register_3.jsp"><b>Logout</b></a></td></tr>
</table>
</body>
</html>

コードの説明：

Code ライン12： ここでは、リクエストオブジェクトからパラメータ「username」を取得し、Stringオブジェクトusernameに格納します。これは、forward()関数が元のリクエスト、ひいてはそのパラメータをそのまま保持するためです。

Code ライン13： ここにはユーザー名を含むウェルカムメッセージがあります。

Code ライン14： ここにはログアウトリンクがあり、クリックするとユーザーはregister_3.jspに戻ります。

上記のコードを実行すると、次の出力が得られます。

出力：

register_3.jspを開くと、2つの認証情報入力フィールドとログインボタンが表示されます。

ログインボタンをクリックすると、以下のメッセージとログアウトリンクが表示されます。

ログアウトリンクをクリックすると、ここに表示されているログインページに戻ります。

注意： この例では空の値のみを比較するため、空でないユーザー名はすべて受け入れられます。本番環境のログインでは、認証情報をストアと照合して検証し、パスワードはハッシュ化して保存し、平文で保存してはなりません。

getParameter() を使用した JSP フォーム処理

フォームは、Web処理において入力データを収集する一般的な方法です。情報をWebサーバーに送信し、サーバー側でその情報を読み取る必要があります。

Web サーバーに情報を送受信するために一般的に使用される方法が XNUMX つあります。

GETメソッド:

これは、ブラウザから Web サーバーに情報を渡すためのデフォルトの方法です。
エンコードされた情報をページに付加して送信します URL？文字で区切られています。
また、サイズ制限もあります。一般的にはリクエストあたり約1024文字とされていますが、実際の上限はHTTP仕様ではなく、ブラウザとサーバーによって決まります。
GETメソッドを使用してパスワードや機密情報を送信することは避けるべきです。

POSTメソッド:

POSTは、サーバーに情報を送信するより信頼性の高い方法です。
アドレスバーではなく、別のメッセージ本文として情報を送信します。
値は?の後には決して現れないため、 URLそれらはブラウザの履歴やサーバーのアクセスログには保存されません。
これは、機密性の高い情報を送信する際によく使用されます。

JSPは、以下の方法を用いてフォームデータの処理を行います。

getParameter(): 単一のフォームパラメータの値を取得するために使用されます。
getParameterValues(): パラメータの複数の値を返すために使用されます。
getParameterNames(): すべてのパラメータの名前を取得するために使用されます。
getInputStream(): クライアントから送信されたバイナリデータを読み取るために使用されます。

例：

この例では、「ユーザー名」と「パスワード」という2つの入力欄と送信ボタンを備えたフォームを使用しています。

アクションフォーム.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!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=ISO-8859-1">
<title>Guru Form</title>
</head>
<body>
<form action="action_form_process.jsp" method="GET">
UserName: <input type="text" name="username">
<br />
Password: <input type="text" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

アクションフォームプロセス.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<h1>Form Processing</h1>

<p><b>Welcome User:</b>
   <%= request.getParameter("username")%>
</p>

</body>
</html>

コードの説明: Action_form.jsp

Code ライン10： ここでは、別のフォームによって処理される動作を定義しました。 JSPaction属性には、GETメソッドでフォームを送信する必要のあるJSPを追加します。

ここでは、GETメソッドを使用して、ユーザー名とパスワードなどの情報を渡しています。

Code 11〜14行目： ここでは、ユーザー名やパスワードといったテキストフィールドを取り上げ、ユーザーから入力を受け取ります。

この入力値はgetParameterメソッドを使用して取得できます。また、送信ボタンがあり、このボタンをクリックするとフィールド値がaction_form_process.jspに渡されます。

アクションフォームプロセス.jsp

Code ライン14： ここでは、リクエストオブジェクトのgetParameterメソッドを使用して、action_form.jspから入力フィールドの値を取得します。

上記のコードを実行すると、次の出力が得られます。

出力：

Action_form.jspはまず、以下に示す2つの入力フィールドを持つフォームを表示します。

送信後、action_form_process.jsp は getParameter() で読み取ったユーザー名を出力します。

action_form.jspを実行すると、ユーザー名とパスワードの2つの入力欄と送信ボタンを備えたフォームが表示されます。ユーザー名とパスワードを入力して送信ボタンをクリックすると、リクエストが次のページで処理され、ウェルカムメッセージが表示されたフォーム処理ページが返されます。

バージョンノート： 上記の2つのサーブレットはどちらもjavax.servletをインポートしていますが、これはTomcat 9以前のバージョンでは正しい動作です。Jakarta EE 9ではAPI名が変更されたため、Tomcat 10以降ではすべてのjavax.servletインポートがjakarta.servletに変更されるか、またはApache Tomcat Migration Tool for Jakarta EEを使用してアプリケーションを変換する必要があります。

よくあるご質問

このリストは、APIがjavax.servletに存在するTomcat 9以前のバージョンを対象としています。Jakarta EE 9では名前空間の名前が変更されたため、Tomcat 10以降ではjakarta.servletをインポートして再コンパイルするか、Tomcat移行ツールを実行する必要があります。

決してプレーンテキストとして保存しないでください。データベースに送信する前に、BCryptやArgon2などの低速でソルト付きのハッシュアルゴリズムでハッシュ化し、ログイン時にハッシュ値を比較してください。サンプルサーブレットは空の値のみをチェックするため、ハッシュ化処理を追加する必要があります。

include() はターゲットのリソースを実行し、呼び出し元のサーブレットに制御を戻すため、両方の出力が表示されます。forward() はリクエスト全体をターゲットに渡し、二度と戻ってこないため、サーブレットは先にレスポンスをコミットしていてはいけません。

JSPページはビュー、サーブレットはパラメータを読み取って処理先を決定するコントローラ、データベースまたはBeanレイヤーはモデルを提供します。RequestDispatcherはコントローラとビューをつなぐ役割を果たします。

AIアシスタントは、検証ブランチを作成したり、getParameter() の null チェックの欠落を検出したり、ハッシュライブラリを提案したり、スタックの説明をしたりできます。 trac例：すべての提案を下書きとして扱い、サーブレットAPIのバージョンを確認し、出荷前に生成されたコードをテストしてください。ping ボーマンは

Copilotは、doPostスタブ、パラメータ読み取り、ディスパッチャ呼び出しなどの反復的な定型処理に優れています。多くの場合、古いjavax.servletインポートをデフォルトで使用するため、名前空間、検証ロジック、およびエスカレーションを確認してください。ping ユーザー入力のすべてに対して。

サーブレットにJDBCレイヤーを追加します。接続プールを開き、挿入または認証情報の検索にはPreparedStatementを使用し、finallyブロックでリソースを閉じます。SQLはJSPから分離し、ビューは表示専用となるようにします。

guru_loginは、フィールドが空かどうかのみをテストするためです。ユーザー名またはパスワードが空の場合、転送せずにログインページが再度読み込まれるため、これは実際の認証ではなく、非常に単純な検証ガードとして機能します。

JSP プログラムの例: 登録およびログインフォーム

JSPで登録フォームを作成する方法

JSPでログインフォームとログアウトフォームを作成する方法

getParameter() を使用した JSP フォーム処理

GETメソッド:

POSTメソッド:

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

JSPで登録フォームを作成する方法

関連記事

JSPでログインフォームとログアウトフォームを作成する方法

getParameter() を使用した JSP フォーム処理

GETメソッド:

POSTメソッド:

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する