JSP-programeksempler: Registrerings- og loginformular

I denne vejledning vil jeg guide dig gennem udvikling af eksempelprogrammer med JSP og implementering af MVC-arkitekturen i denne øvelse.

Følgende programeksempler vil blive udviklet:

Tilmeldingsblanket
Log ind og logout formular
JSP-formular

Brug af registreringsformular gennem JSP

I registreringsformularen vil vi have en formular til at udfylde alle detaljer, som vil indeholde navn, brugernavn, adgangskode, adresse, kontaktnummer osv.

Denne formular hjælper os med at tilmelde os ansøgningen. De tager alle vores detaljer og gemmer dem i en database eller cache.

I dette eksempel vil vi tage "Guru-registreringsformular", som har følgende felter:

Fornavn
Efternavn
Brugernavn
Adgangskode
Adresse
Kontakt nummer

Efter at have udfyldt alle disse detaljer, har vi indsend-knappen, ved at klikke på den knap vil alle detaljer blive gemt.

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

Forklaring af koden:

Kodelinje 11: Her tager vi et formularnavn, som har handling, dvs. den servlet, som anmodningen vil blive behandlet til, og servletnavnet er guru_register.java. Anmodningen vil blive behandlet via POST-metoden.

Kodelinje 14-16: Her tager vi inputtype som tekst og navn er fornavn

Kodelinje 18-20: Her tager vi inputtype som tekst og navn er efternavn

Kodelinje 22-24: Her tager vi inputtype som tekst og navn er brugernavn

Kodelinje 26-28: Her tager vi inputtype som adgangskode (dette vil skjule adgangskoden, når den indtastes) og navn som adgangskode

Kodelinje 30-32: Her tager vi inputtype som tekst og navn som adresse

Kodelinje 34-36: Her tager vi inputtype som tekst og navn som kontakt

Kodelinje 37: Her tager vi en knap af typen submit og værdi er også submit. Ved klik på denne knap vil handlingen gå til den tilsvarende guru_register-servlet, hvor alle parameterværdier vil blive videregivet i anmodningen.

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

}

Forklaring af koden:

Kodelinje 14: Her definerer vi guru_servlet, som udvider HttpServlet.

Kodelinje 18: Denne handling doPost() metode, som vil blive kaldt, når vi nævner POST in action-attributten i ovenstående JSP-formular.

Kodelinje 20-25: Her henter vi værdierne fra request i.efirst_name, last_name , brugernavn, adgangskode, adresse og kontakt ved hjælp af request.getParameter.

Kodelinje 27-32: Her tager vi en betingelse, hvor vi kontrollerer nogen af de parametre, der hentes fra anmodning, som om de er tomme eller ej. Hvis nogen af parametrene er tomme, vil den indtaste denne betingelse (fornavn.isTom() || efternavn.isTom || brugernavn.isTom || password.isTom || adresse.isTom || kontakt.isTom()), og vi har at hente RequestDispatcher-objekt ved hjælp af request-objekt, som videresender anmodning til register_1.jsp. Her medtager vi også anmodnings- og svarobjekter.

Kodelinje 33-37: Denne sag udføres, når nogen af parametrene ikke er tomme. Vi bliver nødt til at hente requestDispatcher-objektet ved hjælp af request-objektet, som videresender anmodningen til register_2.jsp. Her videresender vi anmodnings- og svarobjekter.

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

Forklaring af koden:

Kodelinje 10: Her siger vi velkommen bruger. Denne JSP vil blive kaldt, når alle parametre er udfyldt.

Når du udfører ovenstående kode, får du følgende output:

Output:

Når vi klikker på register_1.jsp, får vi en formular, som vil have detaljer som fornavn, efternavn, brugernavn, adgangskode, adresse, kontakt. Alle detaljer er udfyldt. Når vi klikker på send-knappen, får vi beskeden som "Velkommen bruger"

Login og logout formular

Ligesom registreringsformularen vil vi have en login- og logoutformular.

I dette eksempel har vi taget Login-formularen, hvor vi har to felter "brugernavn" og "adgangskode" med en send-knap.

Når vi klikker på send-knappen, får vi en velkomstbesked med en logout-knap.

Når vi klikker på logout-knappen, vender vi tilbage til login-formularen.

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

Forklaring af koden:

Kodelinje 10: Her tager vi et formnavn, som har handling, dvs. den servlet, som den har passeret til, er guru_login.java. Metoden, hvorigennem den vil sende sin POST.

Kodelinje 13-16: Her tager vi et inputfelt "brugernavn", som er af typen tekst.

Kodelinje 17-20: Her tager vi et indtastningsfelt "adgangskode", som er af typen adgangskode.

Kodelinje 22: Her tager vi en "send" knap med værdien "Login", som vi klikker på, så går den til servlet guru_login, hvor begge felter tages ved hjælp af request object.

Guru_login.java(servlet)

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

}

Forklaring af koden:

Kodelinje 5-9: Her importerer vi nødvendige importer i koden.

Kodelinje 14: Her tager vi guru_login servlet som udvider HttpServlet.

Kodelinje 21: Her bruger vi doPost() metode som i den form, vi bruger POST-metoden.

Kodelinje 23-24: Her tager vi parametre ved hjælp af anmodningsobjekt, dvs. brugernavn og adgangskode.

Kodelinje 25-29: På denne måde tager vi "hvis"-tilstand, hvor vi tjekker brugernavn og adgangskode, om de er tomme eller ej. I dette tilfælde, hvis det er tomt, får vi requestdispatcher-objekt, som videresender til register_3.jsp med anmodnings- og svarobjekter.

Kodelinje 30-34: Dette vil blive udført, hvis begge ikke er tomme, så videresender den anmodningen til register_4.jsp med anmodnings- og svarobjekter.

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

Forklaring af koden:

Kodelinje 12: Her får vi parameter "brugernavn" fra anmodningsobjektet i strengobjektets brugernavn.

Kodelinje 13: Her har vi en velkomstbesked med brugernavnet.

Kodelinje 14: Her linker vi for at logge af formularen, som omdirigerer til register_3.jsp.

Når du udfører ovenstående kode, får du følgende output:

Output:

Her når vi klikker på register_3.jsp får vi to felter "brugernavn" og "adgangskode" med en login-knap.

Efter at have klikket på Log ind-knappen får du nedenstående besked med en knap Log ud.

Når du klikker på logout-knappen, går du tilbage til login-siden

JSP-formularbehandling ved hjælp af getParameter()

JSP-formularbehandling:

Formularer er den almindelige metode i webbehandling. Vi skal sende information til webserveren og den information.

Der er to almindeligt anvendte metoder til at sende og få information tilbage til webserveren.

GET metode:

Dette er standardmetoden til at videregive information fra browser til webserver.
Den sender den kodede information adskilt af "tegn" tilføjet til URL-siden.
Det har også en størrelsesbegrænsning, og vi kan kun sende 1024 tegn i anmodningen.
Vi bør undgå at sende adgangskode og følsomme oplysninger via GET-metoden.

POST metode:

Post-metoden er den mest pålidelige metode til at sende information til serveren.
Den sender information som separat besked.
Den sender som tekststreng efter ?i URL'en.
Det bruges almindeligvis til at sende oplysninger, der er følsomme.

JSP håndterer formdatabehandling ved at bruge følgende metoder:

getParameter(): Det bruges til at få værdien af formparameteren.
getParameterValues(): Det bruges til at returnere de flere værdier af parametrene.
getParameterNames(): Det bruges til at få navne på parametre.
getInputStream(): Det bruges til at læse de binære data sendt af klienten.

Eksempel:

I dette eksempel har vi taget en formular med to felter."brugernavn" og "adgangskode" med en send-knap

Action_form.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>

Action_form_process.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>

Forklaring af koden: Action_form.jsp

Kodelinje 10: Her har vi defineret en form, og hvorigennem vi har behandlet handlingen til en anden JSP. I handlingsparameter tilføjer vi den JSP, som den skal behandles til via GET-metoden.

Her bruger vi GET-metoden til at videregive oplysningerne, dvs. brugernavn og adgangskode.

Kodelinje 11-14: Her tager vi felter som brugernavn og adgangskode, som er tekstfelter, og vi får input fra brugeren.

Dette input kan hentes ved hjælp af getParameter-metoden. Vi har også submit-knap med typen submit type, som hjælper os med at overføre feltværdierne til action_form_process.jsp

Action_form_process.jsp

Kodelinje 14: Her får vi værdierne af inputfelterne fra action_form.jsp ved hjælp af anmodningsobjektets getParameter-metode.

Når vi udfører ovenstående kode, får vi følgende output:

Output:

Når vi udfører action_form.jsp, får vi en formular med to felter brugernavn og adgangskode og en indsend-knap. Efter indtastning af brugernavn og adgangskode kan vi derefter klikke på send, og den behandler til næste side, som giver output som formularbehandlingsside med en velkomstbesked.

JSP-programeksempler: Registrerings- og loginformular

Brug af registreringsformular gennem JSP

Login og logout formular

JSP-formularbehandling ved hjælp af getParameter()

JSP-formularbehandling:

GET metode:

POST metode:

Opsummer dette indlæg med:

Tilmeld dig nyhedsbrevet

Brug af registreringsformular gennem JSP

RELATEREDE ARTIKLER

Login og logout formular

JSP-formularbehandling ved hjælp af getParameter()

JSP-formularbehandling:

GET metode:

POST metode:

Opsummer dette indlæg med:

Tilmeld dig nyhedsbrevet