Eksempler på JSP-program: Registrerings- og påloggingsskjema
I denne opplæringen vil jeg lede deg gjennom å utvikle eksempelprogrammer med JSP og implementere MVC-arkitekturen i denne opplæringen.
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:
Kodelinje 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.
Kodelinje 14-16: Her tar vi inndatatype som tekst og navn er fornavn
Kodelinje 18-20: Her tar vi inndatatype som tekst og navn er etternavn
Kodelinje 22-24: Her tar vi inputtype som tekst og navn er brukernavn
Kodelinje 26-28: Her tar vi input type som passord (dette vil skjule passordet når det skrives) og navn som passord
Kodelinje 30-32: Her tar vi inndatatype som tekst og navn som adresse
Kodelinje 34-36: Her tar vi inputtype som tekst og navn som kontakt
Kodelinje 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:
Kodelinje 14: Her definerer vi guru_servlet som utvider HttpServlet.
Kodelinje 18: Denne handlingen doPost()
metoden som vil bli kalt når vi nevner POST in action-attributtet i JSP-skjemaet ovenfor.
Kodelinje 20-25: Her henter vi verdiene fra request i.efirst_name, last_name , brukernavn, passord, adresse og kontakt ved å bruke request.getParameter.
Kodelinje 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.
Kodelinje 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:
Kodelinje 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:
Kodelinje 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.
Kodelinje 13-16: Her tar vi et inndatafelt "brukernavn" som er av typen tekst.
Kodelinje 17-20: Her tar vi et inndatafelt "passord" som er av typen passord.
Kodelinje 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:
Kodelinje 5-9: Her importerer vi nødvendige importer i koden.
Kodelinje 14: Her tar vi guru_login servlet som utvider HttpServlet.
Kodelinje 21: Her bruker vi doPost()
metode som i skjemaet vi bruker POST-metoden.
Kodelinje 23-24: Her tar vi parametere ved å bruke forespørselsobjektet, dvs. brukernavn og passord.
Kodelinje 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.
Kodelinje 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:
Kodelinje 12: Her får vi parameter "brukernavn" fra forespørselsobjektet i strengobjektets brukernavn.
Kodelinje 13: Her har vi en velkomstmelding med brukernavnet.
Kodelinje 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 ?tegn lagt til URL-siden.
- 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-en.
- 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
Kodelinje 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.
Kodelinje 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
Kodelinje 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.