Primjeri JSP programa: Obrazac za registraciju i prijavu
⚡ Pametni sažetak
Primjeri JSP programa ovdje grade tri modula - obrazac za registraciju, obrazac za prijavu i odjavu te stranicu za obradu obrazaca - od kojih svaki povezuje JSP pogled sa servlet kontrolerom tako da MVC podjela ostane vidljiva početnicima.
Ovi radni primjeri pokazuju kako razviti primjere programa s JSP-om i kako implementirati MVC arhitekturu oko njih. Tri modula su izgrađena redom:
- Obrazac za prijavu
- Obrazac za prijavu i odjavu
- JSP obrazac
Kako kreirati obrazac za registraciju u JSP-u
U registracijskom obrascu imamo obrazac za popunjavanje svih podataka koji uključuju ime, korisničko ime, lozinku, adresu, kontaktni broj itd.
Ovaj obrazac nam pomaže da se registriramo u aplikaciji. Uzima sve naše podatke i pohranjuje ih u baza podataka ili predmemorija.
U ovom primjeru uzet ćemo "Guru „Obrazac za registraciju“, koji ima sljedeća polja:
- Ime
- Prezime
- Korisničko ime
- Lozinka
- Adresa
- Kontakt broj:
Nakon što unesemo sve ove podatke, imamo gumb za slanje; klikom na taj gumb svi se podaci šalju servletu.
Primjer 1: Registar_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>
Objašnjenje koda:
Code Redak 11: Ovdje uzimamo obrazac koji ima akciju, tj. servlet kojem će se zahtjev poslati, a naziv servleta je guru_register.java. Zahtjev će se obraditi putem POST metode.
Code Redak 14-16: Ovdje uzimamo tip unosa kao tekst, a ime je ime_ime.
Code Redak 18-20: Ovdje uzimamo tip unosa kao tekst, a ime je prezime_ime.
Code Redak 22-24: Ovdje uzimamo tip unosa kao tekst, a ime je korisničko ime.
Code Redak 26-28: Ovdje kao vrstu unosa uzimamo lozinku (ovo skriva lozinku dok se tipka) i ime kao lozinku.
Code Redak 30-32: Ovdje uzimamo tip unosa kao tekst, a ime kao adresu.
Code Redak 34-36: Ovdje uzimamo vrstu unosa kao tekst, a ime kao kontakt.
Code Redak 37: Ovdje uzimamo gumb tipa submit čija je vrijednost također Submit. Klikom na ovaj gumb radnja se prenosi na odgovarajući servlet guru_register, gdje se sve vrijednosti parametara prosljeđuju u zahtjevu.
Bilješka: atribut tablice u Code Redak 12 glasi style="with: 50%"Ispravno CSS svojstvo je width, pa se popis reproducira točno onako kako je objavljen, ali tablica neće biti dimenzionirana dok se ta tipografska pogreška ne ispravi u vašoj vlastitoj kopiji.
Primjer 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); } } }
Objašnjenje koda:
Code Redak 14: Ovdje definiramo servlet guru_register, koji proširuje HttpServlet.
Code Redak 18: Ovo je metoda doPost() koja se poziva kada u gornjem JSP obrascu navedemo POST kao atribut metode.
Code Redak 20-25: Ovdje dohvaćamo vrijednosti iz zahtjeva, tj. ime, prezime, korisničko ime, lozinka, adresa i kontakt, koristeći request.getParameter.
Code Redak 27-32: Ovdje koristimo if uvjet gdje provjeravamo jesu li neki od parametara dohvaćenih iz zahtjeva prazni. Ako je bilo koji parametar prazan, kontrola unosi ovaj uvjet ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) i dohvaćamo objekt RequestDispatcher iz objekta zahtjeva, koji šalje zahtjev natrag na register_1.jsp. Ovdje također uključujemo objekte zahtjeva i odgovora.
Code Redak 33-37: Ova se grana izvršava kada nijedan parametar nije prazan. Dohvaćamo objekt RequestDispatcher iz objekta zahtjeva, koji prosljeđuje zahtjev na register_2.jsp. Ovdje prosljeđujemo objekte zahtjeva i odgovora.
Razlika između dvije grane je važna: include() pokreće register_1.jsp i vraća kontrolu servletu, dok forward() predaje zahtjev register_2.jsp-u i ne vraća se.
Primjer 3: Registar_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>
Objašnjenje koda:
Code Redak 10: Ovdje prikazujemo poruku dobrodošlice. Ovaj JSP se poziva kada su svi parametri ispunjeni.
Kada izvršite gornji kod, dobit ćete sljedeći izlaz.
Izlaz:
Stranica za registraciju prikazuje šest označenih polja s jednim gumbom Pošalji, kao što je prikazano dolje.
Nakon što su sva polja ispunjena i klikne se na Pošalji, guru_register prosljeđuje na register_2.jsp i pojavljuje se stranica s potvrdom uspješnosti.
Kada kliknemo na register_1.jsp, dobivamo obrazac s imenom, prezimenom, korisničkim imenom, lozinkom, adresom i kontaktom. Nakon što su svi podaci ispunjeni i kliknemo na gumb za slanje, dobivamo poruku „Dobrodošli korisniče“.
Kako stvoriti obrazac za prijavu i odjavu u JSP-u
Kao i obrazac za registraciju, sada ćemo izraditi obrazac za prijavu i odjavu.
U ovom primjeru uzeli smo obrazac za prijavu s dva polja, „korisničko ime“ i „lozinka“, te gumb za slanje.
Kada kliknemo gumb za slanje, dobivamo poruku dobrodošlice s gumbom za odjavu.
Kada kliknemo gumb za odjavu, vraćamo se na obrazac za prijavu.
Primjer 1: Registar_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>
Objašnjenje koda:
Code Redak 10: Ovdje uzimamo obrazac čija je akcija servlet guru_login.java. Metoda putem koje se podaci prosljeđuju je POST.
Code Redak 13-16: Ovdje uzimamo polje za unos „korisničko ime“ koje je tipa tekst.
Code Redak 17-20: Ovdje uzimamo polje za unos „lozinka“, koje je tipa password.
Code Redak 22: Ovdje uzimamo gumb "pošalji" s vrijednošću "Prijava". Klikom na njega, kontrola ide na servlet guru_login, gdje se oba polja čitaju pomoću objekta zahtjeva.
Primjer 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); } } }
Objašnjenje koda:
Code Redak 5-9: Ovdje uvozimo potrebne klase u kod.
Code Redak 14: Ovdje deklariramo servlet guru_login, koji proširuje HttpServlet.
Code Redak 21: Ovdje koristimo metodu doPost() jer obrazac koristi metodu POST.
Code Redak 23-24: Ovdje čitamo parametre koristeći objekt zahtjeva, tj. korisničko ime i lozinku.
Code Redak 25-29: Na ovaj način koristimo uvjet "ako" koji provjerava jesu li korisničko ime i lozinka prazni. Ako je bilo koji od njih prazan, dobivamo objekt RequestDispatcher koji šalje kontrolu natrag u register_3.jsp s objektima zahtjeva i odgovora.
Code Redak 30-34: Ova se grana izvršava ako obje nisu prazne; zatim prosljeđuje zahtjev na register_4.jsp s objektima zahtjeva i odgovora.
Primjer 3: Registar_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>
Objašnjenje koda:
Code Redak 12: Ovdje dobivamo parametar "korisničko_ime" iz objekta zahtjeva u objekt String korisničko_ime. To funkcionira jer forward() čuva izvorni zahtjev, a time i njegove parametre, netaknutima.
Code Redak 13: Ovdje imamo poruku dobrodošlice s korisničkim imenom.
Code Redak 14: Ovdje imamo poveznicu za odjavu koja korisnika vraća na register_3.jsp.
Kada izvršite gornji kod, dobit ćete sljedeći izlaz.
Izlaz:
Otvaranjem register_3.jsp datoteke prikazuju se dva polja za vjerodajnice i gumb za prijavu.
Nakon što kliknete gumb Prijava, dobit ćete donju poruku zajedno s poveznicom Odjava.
Klikom na poveznicu Odjava vraćate se na stranicu za prijavu prikazanu ovdje.
Bilješka: Ovaj primjer uspoređuje samo prazne vrijednosti, tako da se prihvaća svako korisničko ime koje nije prazno. Prijava u produkciju mora provjeriti vjerodajnice u trgovini i držati lozinke hashirane, nikada u običnom tekstu.
Obrada JSP obrasca pomoću getParameter()
Obrasci su uobičajena metoda prikupljanja ulaznih podataka u web obradi. Moramo poslati informacije web poslužitelju, a zatim te informacije pročitati natrag na strani poslužitelja.
Postoje dvije najčešće korištene metode za slanje i vraćanje informacija na web poslužitelj.
GET metoda:
- Ovo je zadana metoda za prijenos informacija iz preglednika na web poslužitelj.
- Šalje kodirane informacije dodane stranici URL, odvojeni znakom ?.
- Također ima ograničenje veličine; klasična smjernica je otprilike 1024 znaka po zahtjevu, iako stvarnu gornju granicu postavljaju preglednik i poslužitelj, a ne HTTP specifikacija.
- Trebali bismo izbjegavati slanje lozinki i osjetljivih informacija putem GET metode.
POST metoda:
- POST je pouzdanija metoda slanja informacija na poslužitelj.
- Šalje informacije kao zasebno tijelo poruke, a ne u adresnoj traci.
- Budući da se vrijednosti nikada ne pojavljuju nakon znaka ? u URL, ne pohranjuju se u povijest preglednika ili zapisnike pristupa poslužitelju.
- Obično se koristi za slanje osjetljivih informacija.
JSP obrađuje podatke iz obrazaca koristeći sljedeće metode:
- getParameter(): koristi se za dobivanje vrijednosti jednog parametra obrasca.
- getParameterValues(): koristi se za vraćanje više vrijednosti parametra.
- getParameterNames(): koristi se za dobivanje imena svih parametara.
- getInputStream(): koristi se za čitanje binarnih podataka koje šalje klijent.
Primjer:
U ovom primjeru uzeli smo obrazac s dva polja, „korisničko ime“ i „lozinka“, te gumbom za slanje.
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>
Objašnjenje koda: Action_form.jsp
Code Redak 10: Ovdje smo definirali obrazac čiju akciju obrađuje drugi JSPU atributu akcije dodajemo JSP kojem se obrazac mora poslati putem GET metode.
Ovdje koristimo GET metodu za prosljeđivanje informacija, tj. korisničkog imena i lozinke.
Code Redak 11-14: Ovdje uzimamo polja poput korisničkog imena i lozinke, koja su tekstualna polja, i dobivamo unos od korisnika.
Ovaj unos se može dohvatiti pomoću metode getParameter. Također imamo gumb za slanje koji prosljeđuje vrijednosti polja u action_form_process.jsp.
Action_form_process.jsp
Code Redak 14: Ovdje dobivamo vrijednosti ulaznih polja iz action_form.jsp pomoću metode getParameter objekta zahtjeva.
Kada izvršimo gornji kod, dobivamo sljedeći izlaz.
Izlaz:
Action_form.jsp prvo iscrtava obrazac s dva polja prikazan dolje.
Nakon slanja, action_form_process.jsp pomoću getParameter() ponavlja korisničko ime koje je pročitao.
Kada izvršimo action_form.jsp, dobivamo obrazac s dva polja, korisničkim imenom i lozinkom te gumbom za slanje. Nakon unosa korisničkog imena i lozinke kliknemo na slanje, a zahtjev obrađuje sljedeća stranica koja vraća stranicu za obradu obrasca s porukom dobrodošlice.
Napomena o verziji: Oba servleta iznad uvoze javax.servlet, što je ispravno za Tomcat 9 i starije verzije. Jakarta EE 9 je preimenovao API, tako da na Tomcatu 10 ili novijim verzijama svaki uvoz javax.servlet postaje jakarta.servlet ili se aplikacija mora pretvoriti pomoću alata Apache Tomcat Migration Tool za Jakarta EE.







