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

このチュートリアルでは、JSP を使用してサンプルプログラムを開発し、MVC アーキテクチャを実装する方法について説明します。

以下のプログラム例が開発されます。

ご登録はこちらから
ログインおよびログアウトフォーム
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>

コードの説明：

コード行 11: ここでは、アクションを持つフォーム名、つまりリクエストが処理されるサーブレットを取得します。サーブレット名は guru_register.java です。リクエストは POST メソッドを通じて処理されます。

コード行 14 ～ 16: ここでは入力タイプをテキストとして取り、名前は名です。

コード行 18 ～ 20: ここでは入力タイプをテキストとして受け取り、名前は姓です。

コード行 22 ～ 24: ここでは入力タイプをテキストとして取り、名前はユーザー名です。

コード行 26 ～ 28: ここでは、入力タイプをパスワードとして（これにより、入力時にパスワードが非表示になります）、名前をパスワードとして取得します。

コード行 30 ～ 32: ここでは、入力タイプをテキスト、名前をアドレスとして取得します。

コード行 34 ～ 36: ここでは、入力タイプをテキスト、名前を連絡先として取得します。

コード行 37: ここでは送信タイプのボタンを使用しており、値も送信です。このボタンをクリックすると、アクションは対応する guru_register サーブレットに移動し、すべてのパラメータ値がリクエストで渡されます。

例 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);
		}
	}

}

コードの説明：

コード行 14: ここでは、HttpServlet を拡張する guru_servlet を定義します。

コード行 18: このアクション doPost() 上記の JSP フォームのアクション属性に POST を指定した際に呼び出されるメソッドです。

コード行 20 ～ 25: ここでは、 request.getParameter を使用して、リクエストから値、つまり efirst_name 、 last_name 、ユーザー名、パスワード、アドレス、連絡先を取得しています。

コード行 27 ～ 32: ここでは、リクエストから取得したパラメータが空かどうかをチェックする if 条件を使用しています。いずれかのパラメータが空の場合、この状態になります (first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty())。 request オブジェクトを使用して RequestDispatcher オブジェクトを取得し、リクエストを register_1.jsp に転送します。ここにはリクエストオブジェクトとレスポンスオブジェクトも含まれています。

コード行 33 ～ 37: このケースは、パラメータのいずれかが空でない場合に実行されます。リクエストを register_2.jsp に転送するリクエストオブジェクトを使用して requestDispatcher オブジェクトをフェッチする必要があります。ここでは、リクエストオブジェクトとレスポンスオブジェクトを転送しています。

例 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>

コードの説明：

コード行 10: ここでは「ようこそユーザー」と言っています。この JSP は、すべてのパラメータが入力されると呼び出されます。

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

出力：

register_1.jspをクリックすると、名、姓、ユーザー名、パスワード、住所、連絡先などの詳細を含むフォームが表示されます。すべての詳細が入力されています。送信ボタンをクリックすると、「Welcome User」というメッセージが表示されます。

ログインおよびログアウトフォーム

登録フォームと同様に、ログインおよびログアウトフォームがあります。

この例では、「ユーザー名」と「パスワード」の XNUMX つのフィールドと送信ボタンのあるログインフォームを使用しています。

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

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

例 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>

コードの説明：

コード行 10: ここではアクションを持つフォーム名を取得しています。つまり、渡されるサーブレットは guru_login.java です。 POST を渡すメソッド。

コード行 13 ～ 16: ここでは、テキスト型の入力フィールド「ユーザー名」を取り上げます。

コード行 17 ～ 20: ここでは、パスワードタイプの入力フィールド「password」を取り上げます。

コード行 22: ここでは、値「Login」を持つ「送信」ボタンを取得し、クリックするとサーブレット guru_login に移動し、リクエストオブジェクトを使用して両方のフィールドが取得されます。

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);
		}
	}

}

コードの説明：

コード行 5 ～ 9: ここでは、コード内で必要なインポートをインポートしています。

コード行 14: ここでは、HttpServlet を拡張する guru_login サーブレットを使用します。

コード行 21: ここで使用しています doPost() フォームでは POST メソッドを使用しているため、メソッドは同じです。

コード行 23 ～ 24: ここでは、リクエストオブジェクト、つまりユーザー名とパスワードを使用してパラメータを取得します。

コード行 25 ～ 29: このようにして、ユーザー名とパスワードが空かどうかをチェックする「if」条件を採用しています。この場合、空の場合、リクエストとレスポンスのオブジェクトとともに register_3.jsp に転送する requestdispatcher オブジェクトを取得しています。

コード行 30 ～ 34: これは、両方が空でない場合に実行され、要求オブジェクトと応答オブジェクトを使用して要求を register_4.jsp に転送します。

例 2: 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>

コードの説明：

コード行 12: ここでは、文字列オブジェクト username 内のリクエストオブジェクトからパラメータ「username」を取得しています。

コード行 13: ここにはユーザー名を含むウェルカムメッセージがあります。

コード行 14: ここでは、register_3.jsp にリダイレクトするフォームをログアウトするためのリンクを示します。

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

出力：

ここで register_3.jsp をクリックすると、「ユーザー名」と「パスワード」という XNUMX つのフィールドが表示され、ログインボタンが表示されます。

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

ログアウトボタンをクリックするとログインページに戻ります

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

JSP フォーム処理:

フォームは Web 処理における一般的な方法です。情報を Web サーバーに送信し、その情報を送信する必要があります。

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

GETメソッド:

これは、ブラウザから Web サーバーに情報を渡すためのデフォルトの方法です。
?文字で区切られたエンコードされた情報を URL ページに付加して送信します。
サイズ制限もあり、リクエストで送信できる文字数は 1024 文字のみです。
GET メソッドを通じてパスワードや機密情報を送信することは避けるべきです。

POSTメソッド:

Post メソッドは、サーバーに情報を送信する最も信頼できる方法です。
情報を別のメッセージとして送信します。
URLの?以降の文字列として送信します。
機密情報を送信するためによく使用されます。

JSP は次のメソッドを使用してフォームデータ処理を処理します。

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

例：

この例では、「ユーザー名」と「パスワード」の XNUMX つのフィールドと送信ボタンのあるフォームを使用しています。

アクションフォーム.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

コード行 10: ここではフォームを定義し、それを通じてアクションを他のものに処理します。 JSP。アクションパラメータには、GET メソッドを通じて処理する必要がある JSP を追加します。

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

コード行 11 ～ 14: ここでは、ユーザー名やパスワードなどのテキストフィールドを取得し、ユーザーからの入力を取得しています。

この入力は、getParameter メソッドを使用して取得できます。また、フィールド値を action_form_process.jsp に渡すのに役立つ submit type の送信ボタンもあります。

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

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

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

出力：

action_form.jsp を実行すると、ユーザー名とパスワードの XNUMX つのフィールドと送信ボタンを含むフォームが表示されます。ユーザー名とパスワードを入力した後、送信をクリックすると、次のページに処理が進み、フォーム処理ページとして出力が表示されます。ウェルカムメッセージ。

よろしければ：

JSPを介した登録フォームの使用

関連記事

ログインおよびログアウトフォーム

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

JSP フォーム処理:

GETメソッド:

POSTメソッド: