Eksempler på JSP-program: Registrerings- og påloggingsskjema

I denne veiledningen vil jeg veilede deg gjennom utviklingenping eksempelprogrammer med JSP og implementering av MVC-arkitekturen i denne veiledningen.

Følgende programeksempler vil bli utviklet:

Registreringsskjema
Innloggings- og utloggingsskjema
JSP-skjema

Bruke registreringsskjema gjennom JSP

I registreringsskjemaet vil vi ha et skjema for å fylle ut alle detaljene som vil inneholde navn, brukernavn, passord, adresse, kontaktnummer, etc.

Dette skjemaet hjelper oss med å registrere oss i søknaden. De tar alle detaljene våre og lagrer dem i en database eller cache.

I dette eksemplet skal vi ta «Guru Registreringsskjema» som har følgende felt:

Fornavn
Etternavn
Brukernavn
Passord
Adresse
Kontaktnummer

Etter å ha fylt ut alle disse detaljene har vi send-knappen, ved å klikke på den knappen vil alle detaljene bli lagret.

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 av koden:

Code Linje 11: Her tar vi et skjemanavn som har handling, dvs. servleten som forespørselen vil bli behandlet til og servletnavnet er guru_register.java. Forespørselen vil bli behandlet med POST-metoden.

Code Linje 14-16: Her tar vi inndatatype som tekst og navn er fornavn

Code Linje 18-20: Her tar vi inndatatype som tekst og navn er etternavn

Code Linje 22-24: Her tar vi inputtype som tekst og navn er brukernavn

Code Linje 26-28: Her tar vi input type som passord (dette vil skjule passordet når det skrives) og navn som passord

Code Linje 30-32: Her tar vi inndatatype som tekst og navn som adresse

Code Linje 34-36: Her tar vi inputtype som tekst og navn som kontakt

Code Linje 37: Her tar vi en knapp av typen send og verdi er også send. Ved å klikke på denne knappen vil handlingen gå til tilsvarende guru_register-servlet hvor alle parameterverdiene vil bli sendt i forespørselen.

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 av koden:

Code Linje 14: Her definerer vi guru_servlet som utvider HttpServlet.

Code Linje 18: Denne handlingen doPost() metoden som vil bli kalt når vi nevner POST in action-attributtet i JSP-skjemaet ovenfor.

Code Linje 20-25: Her henter vi verdiene fra request i.efirst_name, last_name , brukernavn, passord, adresse og kontakt ved å bruke request.getParameter.

Code Linje 27-32: Her tar vi en tilstand hvor vi sjekker noen av parameterne som hentes fra forespørselen som om de er tomme eller ikke. Hvis noen av parameterne er tomme, vil den angi denne betingelsen (fornavn.isEmpty() || last_name.isEmpty || brukernavn.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) og vi har for å hente RequestDispatcher-objektet ved å bruke request-objektet som vil videresende forespørselen til register_1.jsp. Her inkluderer vi også forespørsels- og svarobjekter.

Code Linje 33-37: Denne saken vil utføres når noen av parameterne ikke er tomme. Vi må hente requestDispatcher-objektet ved å bruke forespørselsobjektet som vil videresende forespørselen til register_2.jsp. Her videresender vi forespørsels- 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 av koden:

Code Linje 10: Her sier vi velkommen bruker. Denne JSP vil bli kalt når alle parametere er fylt.

Når du kjører koden ovenfor, får du følgende utgang:

Utgang:

Når vi klikker på register_1.jsp, får vi et skjema som vil ha detaljer som fornavn, etternavn, brukernavn, passord, adresse, kontakt. Alle detaljene er fylt ut. Når vi klikker på send inn-knappen får vi meldingen som "Velkommen bruker"

Inn- og utloggingsskjema

I likhet med registreringsskjemaet vil vi ha et påloggings- og utloggingsskjema.

I dette eksemplet har vi tatt påloggingsskjema der vi har to felt "brukernavn" og "passord" med en send-knapp.

Når vi klikker på send inn-knappen får vi en velkomstmelding med en utloggingsknapp.

Når vi klikker på utloggingsknappen kommer vi tilbake til påloggingsskjemaet.

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 av koden:

Code Linje 10: Her tar vi et skjemanavn som har handling, dvs. servleten som den har gått til er guru_login.java. Metoden som den vil sende sin POST gjennom.

Code Linje 13-16: Her tar vi et inndatafelt "brukernavn" som er av typen tekst.

Code Linje 17-20: Her tar vi et inndatafelt "passord" som er av typen passord.

Code Linje 22: Her tar vi en "send"-knapp med verdien "Logg inn" som vi klikker på, så går den til servlet guru_login hvor begge feltene tas med 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 av koden:

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

Code Linje 14: Her tar vi guru_login servlet som utvider HttpServlet.

Code Linje 21: Her bruker vi doPost() metode som i skjemaet vi bruker POST-metoden.

Code Linje 23-24: Her tar vi parametere ved å bruke forespørselsobjektet, dvs. brukernavn og passord.

Code Linje 25-29: På denne måten tar vi "hvis"-tilstanden der vi sjekker brukernavn og passord om de er tomme eller ikke. I dette tilfellet hvis det er tomt, får vi requestdispatcher-objektet som videresender til register_3.jsp med forespørsels- og responsobjekter.

Code Linje 30-34: Dette vil bli utført hvis begge ikke er tomme, så videresender den forespørselen til register_4.jsp med forespørsels- 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 av koden:

Code Linje 12: Her får vi parameter "brukernavn" fra forespørselsobjektet i strengobjektets brukernavn.

Code Linje 13: Her har vi en velkomstmelding med brukernavnet.

Code Linje 14: Her lenker vi for å logge ut skjemaet som omdirigerer til register_3.jsp.

Når du kjører koden ovenfor, får du følgende utgang:

Utgang:

Her når vi klikker på register_3.jsp får vi to felt "brukernavn" og "passord" med en påloggingsknapp.

Etter å ha klikket på Logg inn-knappen får du meldingen nedenfor med en knapp for Logg ut.

Når du klikker på utloggingsknappen går du tilbake til påloggingssiden

JSP-skjemabehandling ved hjelp av getParameter()

JSP-skjemabehandling:

Skjemaer er den vanlige metoden i webbehandling. Vi må sende informasjon til webserveren og den informasjonen.

Det er to vanlige metoder for å sende og få tilbake informasjon til webserveren.

GET-metode:

Dette er standardmetoden for å overføre informasjon fra nettleseren til nettserveren.
Den sender den kodede informasjonen atskilt med ?tegnet lagt til URL side.
Den har også en størrelsesbegrensning, og vi kan bare sende 1024 tegn i forespørselen.
Vi bør unngå å sende passord og sensitiv informasjon gjennom GET-metoden.

POST-metode:

Post-metoden er en mest pålitelig metode for å sende informasjon til serveren.
Den sender informasjon som egen melding.
Den sender som tekststreng etter ?i URL.
Det brukes ofte til å sende informasjon som er sensitiv.

JSP håndterer skjemadatabehandling ved å bruke følgende metoder:

getParameter(): Den brukes til å få verdien av skjemaparameteren.
getParameterValues(): Den brukes til å returnere de flere verdiene til parameterne.
getParameterNames(): Den brukes til å hente navn på parametere.
getInputStream(): Den brukes til å lese de binære dataene som sendes av klienten.

Eksempel:

I dette eksemplet har vi tatt et skjema med to felt."brukernavn" og "passord" med en send-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>

Forklaring av koden: Action_form.jsp

Code Linje 10: Her har vi definert et skjema og gjennom hvilken vi har behandlet handlingen til en annen JSP. I handlingsparameter legger vi til den JSP-en som den må behandles til gjennom GET-metoden.

Her bruker vi GET-metoden for å sende informasjonen, dvs. brukernavn og passord.

Code Linje 11-14: Her tar vi felt som brukernavn og passord som er tekstfelt, og vi får innspill fra brukeren.

Denne inngangen kan hentes ved hjelp av getParameter-metoden. Vi har også send-knapp med type submit-type som hjelper oss med å overføre feltverdiene til action_form_process.jsp

Action_form_process.jsp

Code Linje 14: Her henter vi verdiene til inndatafeltene fra action_form.jsp ved å bruke forespørselsobjektets getParameter-metode.

Når vi kjører koden ovenfor, får vi følgende utgang:

Utgang:

Når vi kjører action_form.jsp får vi et skjema med to felt brukernavn og passord og en send-knapp. Etter å ha skrevet inn brukernavn og passord kan vi klikke på send, og det går videre til neste side som gir utdata som skjemabehandlingsside med en velkomstmelding.

Eksempler på JSP-program: Registrerings- og påloggingsskjema

Bruke registreringsskjema gjennom JSP

Inn- og utloggingsskjema

JSP-skjemabehandling ved hjelp av getParameter()

JSP-skjemabehandling:

GET-metode:

POST-metode:

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet

Bruke registreringsskjema gjennom JSP

RELATERTE ARTIKLER

Inn- og utloggingsskjema

JSP-skjemabehandling ved hjelp av getParameter()

JSP-skjemabehandling:

GET-metode:

POST-metode:

Oppsummer dette innlegget med:

Registrer deg for nyhetsbrevet