JSP-programexempel: Registrerings- och inloggningsformulär

⚡ Smart sammanfattning

JSP-programexemplen här bygger tre moduler – ett registreringsformulär, ett inloggnings- och utloggningsformulär och en formulärbehandlingssida – där varje moduler kopplar en JSP-vy till en servletkontroller så att MVC-uppdelningen förblir synlig för nybörjare.

🔘 Registreringsflöde: Register_1.jsp samlar in sex fält och skickar dem till servleten guru_register, som vidarebefordrar till en framgångssida endast när alla fält är ifyllda.
☑️ Inloggning och utloggning: Register_3.jsp skickar inloggningsuppgifter till guru_login; Register_4.jsp hälsar användaren välkommen och länkar tillbaka till inloggningssidan för att logga ut.
✅ MVC-roller: JSP-sidor fungerar som vy, servleten fungerar som kontrollant och RequestDispatcher flyttar begäran mellan dem.
🧪 Formulärbehandling: getParameter(), getParameterValues(), getParameterNames() och getInputStream() läser inskickad data i en JSP eller servlet.
🛠️ GET kontra POST: GET lägger till kodade värden till URL och är längdbegränsad; POST bär värden i förfrågningstexten, vilket passar lösenord.
⚠️ Versionsnotering: Dessa listningar importerar javax.servlet, så att de körs på Tomcat 9 eller tidigare; Tomcat 10 och senare kräver jakarta.servlet-paketen.

Läs mer

Dessa utförda exempel visar hur man utvecklar exempelprogram med JSP och hur man implementerar MVC-arkitekturen kring dem. Tre moduler är byggda i ordning:

ANMÄLNINGSBLANKETT
Inloggnings- och utloggningsformulär
JSP-formulär

Hur man skapar ett registreringsformulär i JSP

I ett registreringsformulär har vi ett formulär för att fylla i alla uppgifter, vilket inkluderar namn, användarnamn, lösenord, adress, kontaktnummer etc.

Det här formuläret hjälper oss att registrera oss i applikationen. Det tar alla våra uppgifter och lagrar dem i en databas eller cache.

I det här exemplet ska vi ta "Guru ”Anmälningsblankett”, som har följande fält:

Förnamn
Efternamn
Användarnamn
Lösenord
Adress
Kontaktnummer

Efter att vi har fyllt i alla dessa uppgifter har vi en skicka-knapp; när vi klickar på den knappen skickas alla uppgifter till servleten.

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

Förklaring av koden:

Code Linje 11: Här tar vi ett formulär som har en åtgärd, dvs. den servlet som begäran ska skickas till, och servletnamnet är guru_register.java. Begäran kommer att behandlas med POST-metoden.

Code Rad 14-16: Här tar vi inmatningstypen text och namnet är förnamn.

Code Rad 18-20: Här tar vi inmatningstypen text och namnet är efternamn.

Code Rad 22-24: Här tar vi inmatningstypen text och namnet är användarnamn.

Code Rad 26-28: Här tar vi inmatningstypen lösenord (detta döljer lösenordet medan det skrivs) och namnet som lösenord.

Code Rad 30-32: Här tar vi inmatningstypen som text och namnet som adress.

Code Rad 34-36: Här tar vi inmatningstypen som text och namnet som kontakt.

Code Linje 37: Här tar vi en knapp av typen submit vars värde också är Submit. När man klickar på den här knappen går åtgärden till motsvarande guru_register-servlet, där alla parametervärden skickas i begäran.

Obs: tabellattributet i Code Rad 12 läser style="with: 50%"Den korrekta CSS-egenskapen är width, så listan återges exakt som den publicerades, men tabellen kommer inte att ändra storlek förrän stavfelet har rättats i din egen kopia.

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

}

Förklaring av koden:

Code Linje 14: Här definierar vi servleten guru_register, som utökar HttpServlet.

Code Linje 18: Detta är doPost()-metoden, som anropas när vi anger POST som metodattribut i JSP-formuläret ovan.

Code Rad 20-25: Här hämtar vi värdena från förfrågan, dvs. förnamn, efternamn, användarnamn, lösenord, adress och kontakt, med hjälp av request.getParameter.

Code Rad 27-32: Här använder vi ett if-villkor där vi kontrollerar om någon av parametrarna som hämtats från begäran är tomma. Om någon parameter är tom, anger kontrollen detta villkor ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) och vi hämtar ett RequestDispatcher-objekt från request-objektet, vilket skickar tillbaka begäran till register_1.jsp. Här inkluderar vi även request- och response-objekten.

Code Rad 33-37: Denna gren körs när ingen av parametrarna är tomma. Vi hämtar ett RequestDispatcher-objekt från request-objektet, vilket vidarebefordrar förfrågan till register_2.jsp. Här vidarebefordrar vi request- och response-objekten.

Skillnaden mellan de två grenarna är viktig: include() kör register_1.jsp och returnerar kontrollen till servleten, medan forward() skickar begäran till register_2.jsp och kommer inte tillbaka.

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

Förklaring av koden:

Code Linje 10: Här visar vi välkomstmeddelandet. Denna JSP anropas när alla parametrar är ifyllda.

När du kör ovanstående kod får du följande utdata.

Produktion:

Registreringssidan visar de sex märkta fälten med en enda Skicka-knapp, som visas nedan.

När alla fält är ifyllda och du har klickat på Skicka, vidarebefordrar guru_register till register_2.jsp och sidan för att lyckas visas.

När vi klickar på register_1.jsp får vi upp ett formulär med förnamn, efternamn, användarnamn, lösenord, adress och kontaktuppgifter. Efter att alla uppgifter har fyllts i och skicka-knappen har klickats får vi meddelandet "Välkommen användare".

Hur man skapar ett inloggnings- och utloggningsformulär i JSP

Precis som registreringsformuläret ska vi nu skapa ett inloggnings- och utloggningsformulär.

I det här exemplet har vi tagit ett inloggningsformulär med två fält, "användarnamn" och "lösenord", och en skicka-knapp.

När vi klickar på skicka-knappen får vi ett välkomstmeddelande med en utloggningsknapp.

När vi klickar på utloggningsknappen kommer vi tillbaka till inloggningsformuläret.

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

Förklaring av koden:

Code Linje 10: Här använder vi ett formulär vars åtgärd är servleten guru_login.java. Metoden genom vilken data skickas är POST.

Code Rad 13-16: Här tar vi inmatningsfältet "användarnamn", vilket är av typen text.

Code Rad 17-20: Här tar vi inmatningsfältet "lösenord", vilket är av typen lösenord.

Code Linje 22: Här tar vi en "submit"-knapp med värdet "Login". När man klickar på den går kontrollen till servleten guru_login, där båda fälten läses med hjälp av request-objektet.

Exempel 2: 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);
		}
	}

}

Förklaring av koden:

Code Rad 5-9: Här importerar vi de nödvändiga klasserna till koden.

Code Linje 14: Här deklarerar vi servleten guru_login, som utökar HttpServlet.

Code Linje 21: Här använder vi doPost()-metoden, eftersom formuläret använder POST-metoden.

Code Rad 23-24: Här läser vi parametrar med hjälp av request-objektet, dvs. användarnamn och lösenord.

Code Rad 25-29: På så sätt använder vi ett "if"-villkor som kontrollerar om användarnamn och lösenord är tomma. Om något av dem är tomt får vi ett RequestDispatcher-objekt som skickar kontrollen tillbaka till register_3.jsp med request- och response-objekten.

Code Rad 30-34: Denna gren körs om båda inte är tomma; den vidarebefordrar sedan begäran till register_4.jsp med objekten request och response.

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

Förklaring av koden:

Code Linje 12: Här hämtar vi parametern "användarnamn" från request-objektet till String-objektets användarnamn. Detta fungerar eftersom forward() behåller den ursprungliga requesten, och därmed dess parametrar, intakta.

Code Linje 13: Här har vi ett välkomstmeddelande med användarnamnet.

Code Linje 14: Här har vi utloggningslänken, som skickar användaren tillbaka till register_3.jsp.

När du kör ovanstående kod får du följande utdata.

Produktion:

När register_3.jsp öppnas visas de två autentiseringsuppgifterna och en inloggningsknapp.

Efter att du klickat på knappen Logga in får du meddelandet nedan tillsammans med en länk för att logga ut.

Om du klickar på länken Logga ut kommer du tillbaka till inloggningssidan som visas här.

Obs: Det här exemplet jämför endast för tomma värden, så alla användarnamn som inte är tomma accepteras. En produktionsinloggning måste verifiera inloggningsuppgifterna mot en butik och hålla lösenorden hashade, aldrig i klartext.

JSP-formulärbearbetning med getParameter()

Formulär är den vanliga metoden för att samla in indata i webbbehandling. Vi behöver skicka information till webbservern och sedan läsa tillbaka den informationen på serversidan.

Det finns två vanliga metoder för att skicka och få tillbaka information till webbservern.

GET-metod:

Detta är standardmetoden för att skicka information från webbläsare till webbserver.
Den skickar den kodade informationen som läggs till sidan URL, separerade med ett ?-tecken.
Den har också en storleksbegränsning; den klassiska riktlinjen är ungefär 1024 tecken per begäran, även om det verkliga taket ställs in av webbläsaren och servern snarare än av HTTP-specifikationen.
Vi bör undvika att skicka lösenord och känslig information via GET-metoden.

POST-metod:

POST är den mer pålitliga metoden för att skicka information till servern.
Den skickar informationen som en separat meddelandetext snarare än i adressfältet.
Eftersom värdena aldrig visas efter ? i URL, de lagras inte i webbläsarhistoriken eller serveråtkomstloggarna.
Det används ofta för att skicka känslig information.

JSP hanterar formulärdatabehandling med följande metoder:

getParameter(): används för att hämta värdet för en enskild formparameter.
getParameterValues(): används för att returnera flera värden för en parameter.
getParameterNames(): används för att hämta namnen på alla parametrar.
getInputStream(): används för att läsa binärdata som skickas av klienten.

Exempel:

I det här exemplet har vi tagit ett formulär med två fält, "användarnamn" och "lösenord", och en skicka-knapp.

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>

Förklaring av koden: Action_form.jsp

Code Linje 10: Här har vi definierat en form vars handling bearbetas av en annan JSPI action-attributet lägger vi till den JSP som formuläret måste skickas till via GET-metoden.

Här använder vi GET-metoden för att skicka informationen, dvs. användarnamn och lösenord.

Code Rad 11-14: Här tar vi fält som användarnamn och lösenord, vilka är textfält, och vi får indata från användaren.

Denna indata kan hämtas med metoden getParameter. Vi har också en skicka-knapp som skickar fältvärdena till action_form_process.jsp.

Action_form_process.jsp

Code Linje 14: Här hämtar vi värdena för inmatningsfälten från action_form.jsp med hjälp av request-objektets getParameter-metod.

När vi kör ovanstående kod får vi följande utdata.

Produktion:

Action_form.jsp renderar först formuläret med två fält som visas nedan.

Efter att ha skickat, ekar action_form_process.jsp användarnamnet som lästes med getParameter().

När vi kör action_form.jsp får vi ett formulär med två fält, användarnamn och lösenord, och en skicka-knapp. Efter att ha angett ett användarnamn och lösenord klickar vi på skicka, och begäran behandlas av nästa sida, som returnerar sidan Formulärbearbetning med ett välkomstmeddelande.

Versionsnotering: båda servlets ovan importerar javax.servlet, vilket är korrekt för Tomcat 9 och tidigare. Jakarta EE 9 döpte om API:et, så i Tomcat 10 eller senare blir varje javax.servlet-import jakarta.servlet, eller så måste applikationen konverteras med Apache Tomcat Migration Tool för Jakarta EE.

Vanliga frågor

Listningarna riktar sig till Tomcat 9 och tidigare, där API:et finns i javax.servlet. Jakarta EE 9 har bytt namnrymd, så Tomcat 10 och senare behöver jakarta.servlet-importer och en omkompilering, eller en körning genom Tomcat Migration Tool.

Lagra det aldrig som vanlig text. Hasha det med en långsam, saltad algoritm som BCrypt eller Argon2 innan det når databasen, och jämför hashvärden vid inloggning. Exempelservleten kontrollerar bara tomma värden, så hashing måste läggas till.

include() kör målresursen och returnerar kontrollen till den anropande servleten, så båda utdata visas. forward() lämnar hela begäran till målet och kommer aldrig tillbaka, så servleten får inte ha compiterat svaret först.

JSP-sidorna är vyn, servleten är kontrollenheten som läser parametrar och bestämmer vart den ska gå, och en databas eller ett bönlager skulle tillhandahålla modellen. RequestDispatcher är länken mellan kontrollenheten och vyn.

AI-assistenter kan utarbeta valideringsgrenar, upptäcka saknade nullkontroller på getParameter(), föreslå hashbibliotek och förklara stackar. traces. Behandla alla förslag som ett utkast: verifiera servlet-API-versionen och testa den genererade koden innan leverans.ping det.

Copilot är bra på repetitiva standardinställningar som doPost-stubbar, parameterläsningar och dispatcher-anrop. Den använder ofta äldre javax.servlet-importer som standard, så kontrollera namnrymden, valideringslogiken och esca.ping av all användarinmatning den producerar.

Lägg till ett JDBC-lager i servleten: öppna en poolad anslutning, använd en PreparedStatement för insert- eller credential-sökningen och stäng resurser i ett finally-block. Håll SQL-koden borta från JSP:n så att vyn förblir endast presentation.

Eftersom guru_login bara testar om fälten är tomma. Ett tomt användarnamn eller lösenord inkluderar inloggningssidan igen istället för att vidarebefordra, vilket fungerar som en mycket enkel valideringsfunktion snarare än verklig autentisering.

JSP-programexempel: Registrerings- och inloggningsformulär

Hur man skapar ett registreringsformulär i JSP

Hur man skapar ett inloggnings- och utloggningsformulär i JSP

JSP-formulärbearbetning med getParameter()

GET-metod:

POST-metod:

Vanliga frågor

Sammanfatta detta inlägg med:

Anmäl dig till nyhetsbrevet

Hur man skapar ett registreringsformulär i JSP

RELATERADE ARTIKLAR

Hur man skapar ett inloggnings- och utloggningsformulär i JSP

JSP-formulärbearbetning med getParameter()

GET-metod:

POST-metod:

Vanliga frågor

Sammanfatta detta inlägg med:

Anmäl dig till nyhetsbrevet