JSP-programmavoorbeelden: Registratie- en loginformulier

⚡ Slimme samenvatting

De JSP-programmavoorbeelden hier bouwen drie modules op: een registratieformulier, een inlog- en uitlogformulier en een pagina voor formulierverwerking. Elke module koppelt een JSP-weergave aan een servletcontroller, zodat de MVC-structuur ook voor beginners duidelijk blijft.

🔘 Registratiestroom: Register_1.jsp verzamelt zes velden en stuurt deze naar de guru_register-servlet, die pas doorverwijst naar een succespagina wanneer alle velden zijn ingevuld.
☑️ Inloggen en uitloggen: Register_3.jsp verstuurt de inloggegevens naar guru_login; Register_4.jsp begroet de gebruiker en linkt terug naar de inlogpagina om uit te loggen.
✅ MVC-rollen: JSP-pagina's fungeren als de weergave, de servlet als de controller en RequestDispatcher verplaatst het verzoek tussen beide.
🧪 Formulierverwerking: getParameter(), getParameterValues(), getParameterNames() en getInputStream() lezen de ingediende gegevens in een JSP of servlet.
️ GET versus POST: GET voegt gecodeerde waarden toe aan de URL en heeft een lengtebeperking; POST verzendt waarden in de request body, wat geschikt is voor wachtwoorden.
⚠️ Versie-opmerking: Deze codefragmenten importeren javax.servlet, waardoor ze werken op Tomcat 9 of ouder; voor Tomcat 10 en nieuwer zijn de jakarta.servlet-pakketten vereist.

Meer informatie

Deze uitgewerkte voorbeelden laten zien hoe je voorbeeldprogramma's met JSP ontwikkelt en hoe je de MVC-architectuur eromheen implementeert. Er worden drie modules in volgorde opgebouwd:

Registratie
In- en uitlogformulier
JSP-formulier

Hoe maak je een registratieformulier in JSP?

In een registratieformulier hebben we een veld om alle gegevens in te vullen, zoals naam, gebruikersnaam, wachtwoord, adres, telefoonnummer, enzovoort.

Dit formulier helpt ons bij de registratie voor de applicatie. Het verzamelt al onze gegevens en slaat ze op in een databank of cache.

In dit voorbeeld nemen we de “Guru Het registratieformulier bevat de volgende velden:

Vul hier uw voornaam in
Vul hier uw achternaam in
Gebruikersnaam
Wachtwoord
Adres
Nummer

Nadat we al deze gegevens hebben ingevuld, verschijnt er een verzendknop; door op die knop te klikken worden alle gegevens naar de servlet gestuurd.

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

Uitleg van de code:

Code Regel 11: Hier gebruiken we een formulier met een actie, namelijk de servlet waarnaar het verzoek wordt verzonden. De naam van de servlet is guru_register.java. Het verzoek wordt verwerkt via de POST-methode.

Code Lijn 14-16: Hier gebruiken we tekst als invoertype en de naam is first_name.

Code Lijn 18-20: Hier gebruiken we tekst als invoertype en de naam is last_name.

Code Lijn 22-24: Hier gebruiken we tekst als invoertype en de naam is gebruikersnaam.

Code Lijn 26-28: Hier gebruiken we het invoertype 'wachtwoord' (dit verbergt het wachtwoord tijdens het typen) en de naam als wachtwoord.

Code Lijn 30-32: Hier gebruiken we tekst als invoertype en adres als naam.

Code Lijn 34-36: Hier gebruiken we 'text' als invoertype en 'contact' als naam.

Code Regel 37: Hier gebruiken we een knop van het type 'submit' met de waarde 'Submit'. Wanneer op deze knop wordt geklikt, wordt de actie doorgestuurd naar de bijbehorende guru_register-servlet, waar alle parameterwaarden in het verzoek worden doorgegeven.

Let op: het tabelkenmerk in Code Regel 12 luidt: style="with: 50%"De juiste CSS-eigenschap is widthDe lijst wordt dus exact overgenomen zoals gepubliceerd, maar de tabel wordt pas opgemaakt nadat de typefout in uw eigen exemplaar is gecorrigeerd.

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

}

Uitleg van de code:

Code Regel 14: Hier definiëren we de guru_register servlet, die de HttpServlet-klasse uitbreidt.

Code Regel 18: Dit is de doPost()-methode, die wordt aangeroepen wanneer we POST als methodekenmerk specificeren in het bovenstaande JSP-formulier.

Code Lijn 20-25: Hier halen we de waarden uit het verzoek op, namelijk first_name, last_name, username, password, address en contact, met behulp van request.getParameter.

Code Lijn 27-32: Hier gebruiken we een if-voorwaarde om te controleren of een van de parameters die uit het verzoek zijn opgehaald leeg is. Als een parameter leeg is, wordt de volgende voorwaarde uitgevoerd (first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) en wordt een RequestDispatcher-object uit het verzoekobject opgehaald, dat het verzoek terugstuurt naar register_1.jsp. De verzoek- en antwoordobjecten zijn hier ook opgenomen.

Code Lijn 33-37: Deze tak wordt uitgevoerd wanneer geen van de parameters leeg is. We halen een RequestDispatcher-object op uit het request-object, dat het verzoek doorstuurt naar register_2.jsp. Hier sturen we de request- en response-objecten door.

Het verschil tussen de twee takken is van belang: include() voert register_1.jsp uit en geeft de controle terug aan de servlet, terwijl forward() Het verzoek wordt doorgegeven aan register_2.jsp en er komt geen reactie meer.

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

Uitleg van de code:

Code Regel 10: Hier tonen we het welkomstbericht. Deze JSP-pagina wordt aangeroepen zodra alle parameters zijn ingevuld.

Wanneer u de bovenstaande code uitvoert, krijgt u de volgende uitvoer.

Output:

De registratiepagina toont de zes gelabelde velden met één enkele verzendknop, zoals hieronder weergegeven.

Zodra alle velden zijn ingevuld en op 'Verzenden' is geklikt, stuurt guru_register je door naar register_2.jsp en verschijnt de succespagina.

Wanneer we op register_1.jsp klikken, krijgen we een formulier te zien met velden voor voornaam, achternaam, gebruikersnaam, wachtwoord, adres en contactgegevens. Nadat alle gegevens zijn ingevuld en op de verzendknop is geklikt, verschijnt de melding "Welkom gebruiker".

Hoe maak je een inlog- en uitlogformulier in JSP?

Net als het registratieformulier gaan we nu een inlog- en uitlogformulier maken.

In dit voorbeeld hebben we een inlogformulier gebruikt met twee velden, 'gebruikersnaam' en 'wachtwoord', en een verzendknop.

Als we op de verzendknop klikken, krijgen we een welkomstbericht met een knop om uit te loggen.

Als we op de knop 'uitloggen' klikken, keren we terug naar het inlogformulier.

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

Uitleg van de code:

Code Regel 10: Hier gebruiken we een formulier waarvan de actie de servlet guru_login.java is. De methode waarmee de gegevens worden doorgegeven is POST.

Code Lijn 13-16: Hier gebruiken we een invoerveld "gebruikersnaam", dat van het type tekst is.

Code Lijn 17-20: Hier nemen we een invoerveld "wachtwoord", dat van het type wachtwoord is.

Code Regel 22: Hier gebruiken we een "verzenden"-knop met de waarde "Inloggen". Bij het klikken hierop wordt de controle overgedragen aan de servlet guru_login, waar beide velden worden uitgelezen met behulp van het request-object.

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

}

Uitleg van de code:

Code Lijn 5-9: Hier importeren we de benodigde klassen in de code.

Code Regel 14: Hier declareren we de guru_login servlet, die de HttpServlet-klasse uitbreidt.

Code Regel 21: Hier gebruiken we de doPost()-methode, omdat het formulier de POST-methode gebruikt.

Code Lijn 23-24: Hier lezen we parameters uit het request-object, namelijk gebruikersnaam en wachtwoord.

Code Lijn 25-29: Op deze manier gebruiken we een "if"-voorwaarde die controleert of de gebruikersnaam en het wachtwoord leeg zijn. Als een van beide leeg is, krijgen we een RequestDispatcher-object dat de controle terugstuurt naar register_3.jsp met de aanvraag- en antwoordobjecten.

Code Lijn 30-34: Deze tak wordt uitgevoerd als beide objecten niet leeg zijn; vervolgens stuurt hij het verzoek door naar register_4.jsp met de verzoek- en antwoordobjecten.

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

Uitleg van de code:

Code Regel 12: Hier halen we de parameter "username" uit het request-object en plaatsen die in het String-object username. Dit werkt omdat forward() het oorspronkelijke verzoek, en dus ook de parameters ervan, intact laat.

Code Regel 13: Hier hebben we een welkomstbericht met de gebruikersnaam.

Code Regel 14: Hier zien we de uitloglink, die de gebruiker terugstuurt naar register_3.jsp.

Wanneer u de bovenstaande code uitvoert, krijgt u de volgende uitvoer.

Output:

Als je register_3.jsp opent, zie je de twee inlogvelden en een knop 'Inloggen'.

Nadat je op de knop 'Inloggen' hebt geklikt, krijg je onderstaand bericht te zien, samen met een link om uit te loggen.

Als u op de link 'Uitloggen' klikt, keert u terug naar de inlogpagina die hier wordt weergegeven.

Let op: Dit voorbeeld vergelijkt alleen lege waarden, dus elke gebruikersnaam die niet leeg is, wordt geaccepteerd. Een inlogomgeving in een productieomgeving moet de inloggegevens verifiëren aan de hand van een database en wachtwoorden moeten gehasht worden, nooit in platte tekst.

JSP-formulierverwerking met getParameter()

Formulieren zijn de meest gebruikte methode voor het verzamelen van invoer in webprocessen. We moeten informatie naar de webserver sturen en die informatie vervolgens aan de serverzijde weer uitlezen.

Er zijn twee veelgebruikte methoden om informatie naar de webserver te verzenden en terug te krijgen.

GET-methode:

Dit is de standaardmethode om informatie van browser naar webserver door te geven.
Het verzendt de gecodeerde informatie die aan de pagina is toegevoegd. URL, gescheiden door een ? teken.
Het heeft ook een groottelimiet; de klassieke richtlijn is ongeveer 1024 tekens per verzoek, hoewel de werkelijke limiet wordt bepaald door de browser en de server in plaats van door de HTTP-specificatie.
We moeten voorkomen dat we wachtwoorden en gevoelige informatie via de GET-methode versturen.

POST-methode:

POST is de meest betrouwbare methode om informatie naar de server te verzenden.
Het verzendt de informatie als een aparte berichttekst in plaats van in de adresbalk.
Omdat de waarden nooit na het vraagteken (?) in de URLZe worden niet opgeslagen in de browsergeschiedenis of serverlogboeken.
Het wordt vaak gebruikt om gevoelige informatie te verzenden.

JSP verwerkt formuliergegevens met behulp van de volgende methoden:

getParameter(): wordt gebruikt om de waarde van een enkele formulierparameter op te halen.
getParameterValues(): wordt gebruikt om de meerdere waarden van een parameter terug te geven.
getParameterNames(): wordt gebruikt om de namen van alle parameters op te halen.
getInputStream(): wordt gebruikt om de binaire gegevens te lezen die door de client worden verzonden.

Voorbeeld:

In dit voorbeeld hebben we een formulier genomen met twee velden, 'gebruikersnaam' en 'wachtwoord', en een verzendknop.

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>

Uitleg van de code: Action_form.jsp

Code Regel 10: Hier hebben we een formulier gedefinieerd waarvan de actie door een ander formulier wordt verwerkt. JSPIn het 'action'-attribuut voegen we de JSP toe waarnaar het formulier via de GET-methode moet worden verzonden.

Hier gebruiken we de GET-methode om de informatie, namelijk gebruikersnaam en wachtwoord, door te geven.

Code Lijn 11-14: Hier gebruiken we velden zoals gebruikersnaam en wachtwoord, dit zijn tekstvelden, en we ontvangen de invoer van de gebruiker.

Deze invoer kan worden opgehaald met de getParameter-methode. We hebben ook een verzendknop, die de veldwaarden doorgeeft aan action_form_process.jsp.

Action_form_process.jsp

Code Regel 14: Hier halen we de waarden van de invoervelden op uit action_form.jsp met behulp van de getParameter-methode van het request-object.

Wanneer we de bovenstaande code uitvoeren, krijgen we de volgende uitvoer.

Output:

Action_form.jsp rendert eerst het onderstaande formulier met twee velden.

Na het verzenden, geeft action_form_process.jsp de gebruikersnaam weer die is ontvangen met getParameter().

Wanneer we action_form.jsp uitvoeren, krijgen we een formulier met twee velden, gebruikersnaam en wachtwoord, en een verzendknop. Nadat we een gebruikersnaam en wachtwoord hebben ingevoerd, klikken we op verzenden en wordt het verzoek verwerkt door de volgende pagina, die de pagina 'Formulierverwerking' met een welkomstbericht weergeeft.

Versie-opmerking: Beide bovenstaande servlets importeren javax.servlet, wat correct is voor Tomcat 9 en eerdere versies. Jakarta EE 9 heeft de API hernoemd, dus vanaf Tomcat 10 wordt elke import van javax.servlet vervangen door jakarta.servlet, of de applicatie moet worden geconverteerd met de Apache Tomcat Migration Tool voor Jakarta EE.

Veelgestelde vragen

De beschrijvingen zijn gericht op Tomcat 9 en ouder, waar de API zich bevindt in javax.servlet. Jakarta EE 9 heeft de naamruimte hernoemd, dus Tomcat 10 en nieuwer vereisen imports van jakarta.servlet en een hercompilatie, of een uitvoering met de Tomcat Migration Tool.

Sla het nooit op als platte tekst. Hash het met een langzaam, gesalt algoritme zoals BCrypt of Argon2 voordat het de database bereikt, en vergelijk de hashes bij het inloggen. De voorbeeldservlet controleert alleen op lege waarden, dus hashing moet worden toegevoegd.

De `include()`-functie voert de doelbron uit en geeft de controle terug aan de aanroepende servlet, waardoor beide outputs verschijnen. De `forward()`-functie geeft het volledige verzoek door aan de doelbron en komt nooit meer terug, wat betekent dat de servlet de respons waarschijnlijk nog niet eerst heeft verwerkt.

De JSP-pagina's vormen de weergave, de servlet is de controller die parameters leest en bepaalt waarheen te gaan, en een database of bean-laag levert het model. RequestDispatcher is de verbinding tussen controller en weergave.

AI-assistenten kunnen validatietakken opstellen, ontbrekende null-controles in getParameter() opsporen, hashing-bibliotheken voorstellen en de stack uitleggen. tracBehandel elke suggestie als een concept: controleer de servlet-API-versie en test de gegenereerde code voordat u deze publiceert.ping het.

Copilot is goed in het uitvoeren van repetitieve standaardtaken zoals doPost-stubs, het uitlezen van parameters en het aanroepen van dispatchers. Het maakt vaak gebruik van oudere javax.servlet-imports, dus controleer de namespace, de validatielogica en de esca-code.ping van alle gebruikersinvoer die het genereert.

Voeg een JDBC-laag toe aan de servlet: open een pooled connection, gebruik een PreparedStatement voor de insert of het opzoeken van de referenties en sluit de resources in een finally-blok. Houd de SQL buiten de JSP, zodat de weergave puur presentatiegericht blijft.

Omdat guru_login alleen controleert of de velden leeg zijn. Een lege gebruikersnaam of een leeg wachtwoord zorgt ervoor dat de inlogpagina opnieuw wordt geladen in plaats van dat er wordt doorgestuurd. Dit fungeert als een zeer eenvoudige validatiecontrole in plaats van als echte authenticatie.

JSP-programmavoorbeelden: Registratie- en loginformulier

Hoe maak je een registratieformulier in JSP?

Hoe maak je een inlog- en uitlogformulier in JSP?

JSP-formulierverwerking met getParameter()

GET-methode:

POST-methode:

Veelgestelde vragen

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief

Hoe maak je een registratieformulier in JSP?

GERELATEERDE ARTIKELEN

Hoe maak je een inlog- en uitlogformulier in JSP?

JSP-formulierverwerking met getParameter()

GET-methode:

POST-methode:

Veelgestelde vragen

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief