JSP-programmavoorbeelden: Registratie- en loginformulier

In deze tutorial laat ik je zien hoe je voorbeeldprogramma's ontwikkelt met JSP en hoe je de MVC-architectuur implementeert.

De volgende programmavoorbeelden worden ontwikkeld:

Registratie
In- en uitlogformulier
JSP-formulier

Via het registratieformulier via JSP

In het registratieformulier vindt u een formulier waarop u alle gegevens moet invullen, zoals uw naam, gebruikersnaam, wachtwoord, adres, telefoonnummer, enz.

Dit formulier helpt ons om ons te registreren bij de applicatie. Ze nemen al onze gegevens en slaan deze op in een databank of cache.

In dit voorbeeld nemen we het "Guru-registratieformulier" dat de volgende velden bevat:

Voornaam
Achternaam
Gebruikersnaam
Wachtwoord
Adres
Whatsapp nummer

Nadat u alle gegevens hebt ingevuld, klikt u op de knop Verzenden. Als u op deze knop klikt, worden alle gegevens opgeslagen.

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:

Coderegel 11: Hier nemen we een formuliernaam die actie heeft, dat wil zeggen de servlet waarnaar het verzoek zal worden verwerkt en de servletnaam is guru_register.java. Het verzoek wordt verwerkt via de POST-methode.

Coderegel 14-16: Hier nemen we het invoertype als tekst en naam is voornaam

Coderegel 18-20: Hier nemen we het invoertype als tekst en naam is achternaam

Coderegel 22-24: Hier nemen we het invoertype als tekst en naam is gebruikersnaam

Coderegel 26-28: Hier nemen we het invoertype als wachtwoord (dit verbergt het wachtwoord wanneer het wordt getypt) en de naam als wachtwoord

Coderegel 30-32: Hier nemen we het invoertype als tekst en naam als adres

Coderegel 34-36: Hier nemen we het invoertype als tekst en naam als contactpersoon

Coderegel 37: Hier nemen we een knop van het type indienen en de waarde is ook indienen. Als u op deze knop klikt, gaat de actie naar de corresponderende guru_register-servlet waar alle parameterwaarden in het verzoek worden doorgegeven.

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:

Coderegel 14: Hier definiëren we guru_servlet, een uitbreiding van HttpServlet.

Coderegel 18: Deze actie doPost() methode die zal worden aangeroepen als we het POST in action-attribuut vermelden in het bovenstaande JSP-formulier.

Coderegel 20-25: Hier halen we de waarden op van verzoek i.efirst_name, last_name , gebruikersnaam, wachtwoord, adres en contact met request.getParameter.

Coderegel 27-32: Hier nemen we de if-voorwaarde waarbij we controleren of de parameters die uit het verzoek worden opgehaald, leeg zijn of niet. Als een van de parameters leeg is, wordt deze voorwaarde ingevoerd ( first_name.isEmpty() || last_name.isEmpty || gebruikersnaam.isEmpty || wachtwoord.isEmpty || adres.isEmpty || contact.isEmpty()) en we hebben om het RequestDispatcher-object op te halen met behulp van het request-object dat het verzoek doorstuurt naar register_1.jsp. Hier nemen we ook verzoek- en antwoordobjecten op.

Coderegel 33-37: Deze case wordt uitgevoerd wanneer een van de parameters niet leeg is. We zullen het requestDispatcher-object moeten ophalen met behulp van het request-object dat het verzoek doorstuurt naar register_2.jsp. Hier sturen we request- en response-objecten door.

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:

Coderegel 10: Hier zeggen we: welkom gebruiker. Deze JSP wordt aangeroepen als alle parameters zijn ingevuld.

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

Output:

Wanneer we klikken op register_1.jsp, krijgen we een formulier met details zoals voornaam, achternaam, gebruikersnaam, wachtwoord, adres, contact. Alle details zijn ingevuld. Wanneer we klikken op de knop verzenden, krijgen we het bericht "Welcome User"

In- en uitlogformulier

Net als het registratieformulier hebben we een in- en uitlogformulier.

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

Wanneer we op de knop Verzenden klikken, krijgen we een welkomstbericht met een uitlogknop.

Wanneer we op de uitlogknop klikken, komen we terug op 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:

Coderegel 10: Hier nemen we een formuliernaam die actie heeft, dwz de servlet waaraan deze is doorgegeven is guru_login.java. De methode waarmee de POST wordt doorgegeven.

Coderegel 13-16: Hier nemen we een invoerveld “gebruikersnaam” van het type tekst.

Coderegel 17-20: Hier nemen we een invoerveld “wachtwoord” dat van het type wachtwoord is.

Coderegel 22: Hier nemen we een knop "verzenden" met de waarde "Inloggen" waarop we klikken en vervolgens gaat deze naar servlet guru_login waar beide velden worden ingevuld met behulp van het verzoekobject.

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:

Coderegel 5-9: Hier importeren we de noodzakelijke invoer in de code.

Coderegel 14: Hier gebruiken we guru_login servlet die HttpServlet uitbreidt.

Coderegel 21: Hier gebruiken we doPost() methode zoals in de vorm waarin we de POST-methode gebruiken.

Coderegel 23-24: Hier nemen we parameters met behulp van een verzoekobject, dwz gebruikersnaam en wachtwoord.

Coderegel 25-29: Op deze manier nemen we de 'if'-voorwaarde waarbij we de gebruikersnaam en het wachtwoord controleren of ze leeg zijn of niet. Als het in dit geval leeg is, krijgen we het requestdispatcher-object dat doorstuurt naar register_3.jsp met request- en response-objecten.

Coderegel 30-34: Dit wordt uitgevoerd als beide niet leeg zijn en stuurt het verzoek door naar register_4.jsp met verzoek- en antwoordobjecten.

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

Uitleg van de code:

Coderegel 12: Hier krijgen we parameter “gebruikersnaam” van het verzoekobject in de gebruikersnaam van het stringobject.

Coderegel 13: Hier hebben we een welkomstbericht met de gebruikersnaam.

Coderegel 14: Hier linken we naar het formulier om uit te loggen dat doorverwijst naar register_3.jsp.

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

Output:

Als we hier op register_3.jsp klikken, krijgen we twee velden "gebruikersnaam" en "wachtwoord" met een login-knop.

Nadat u op de knop Inloggen heeft geklikt, krijgt u het onderstaande bericht met een knop Uitloggen.

Wanneer u op de uitlogknop klikt, gaat u terug naar de inlogpagina

JSP-formulierverwerking met getParameter()

JSP-formulierverwerking:

Formulieren zijn de gebruikelijke methode bij webverwerking. We moeten informatie naar de webserver en die informatie sturen.

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 gescheiden door een ?teken toegevoegd aan de URL-pagina.
Er is ook een beperking in de grootte en we kunnen slechts 1024 tekens in het verzoek meesturen.
We moeten vermijden dat we wachtwoorden en gevoelige informatie verzenden via de GET-methode.

POST-methode:

De postmethode is de meest betrouwbare methode om informatie naar de server te verzenden.
Het verzendt informatie als afzonderlijk bericht.
Het verzendt als tekstreeks na ?in de URL.
Het wordt vaak gebruikt om gevoelige informatie te verzenden.

JSP verwerkt formuliergegevens met behulp van de volgende methoden:

getParameter(): Het wordt gebruikt om de waarde van de formulierparameter op te halen.
getParameterValues(): Het wordt gebruikt om de meerdere waarden van de parameters te retourneren.
getParameterNames(): Het wordt gebruikt om de namen van parameters op te halen.
getInputStream(): Het wordt gebruikt om de binaire gegevens te lezen die door de client zijn verzonden.

Voorbeeld:

In dit voorbeeld hebben we een formulier genomen met twee velden: 'gebruikersnaam' en 'wachtwoord' met 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

Coderegel 10: Hier hebben we een vorm gedefinieerd en waarmee we de actie naar iemand anders kunnen verwerken JSP. In actieparameter voegen we de JSP toe waaraan deze moet worden verwerkt via de GET-methode.

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

Coderegel 11-14: Hier nemen we velden zoals gebruikersnaam en wachtwoord, dit zijn tekstvelden, en we krijgen de invoer van de gebruiker.

Deze invoer kan worden opgehaald met de getParameter-methode. We hebben ook een verzendknop met het type verzendtype waarmee we de veldwaarden kunnen doorgeven aan action_form_process.jsp

Action_form_process.jsp

Coderegel 14: Hier krijgen we de waarden van de invoervelden van 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:

Wanneer we action_form.jsp uitvoeren, krijgen we een formulier met twee velden gebruikersnaam en wachtwoord en een verzendknop. Nadat we gebruikersnaam en wachtwoord hebben ingevoerd, kunnen we op verzenden klikken en het wordt verwerkt naar de volgende pagina die uitvoer geeft als formulierverwerkingspagina met een Welkoms bericht.

Je houdt misschien van:

Via het registratieformulier via JSP

GERELATEERDE ARTIKELEN

In- en uitlogformulier

JSP-formulierverwerking met getParameter()

JSP-formulierverwerking:

GET-methode:

POST-methode: