Παραδείγματα προγράμματος JSP: Φόρμα εγγραφής και σύνδεσης
⚡ Έξυπνη Σύνοψη
Τα παραδείγματα προγραμμάτων JSP εδώ δημιουργούν τρεις ενότητες — μια φόρμα εγγραφής, μια φόρμα σύνδεσης και αποσύνδεσης και μια σελίδα επεξεργασίας φόρμας — καθεμία από τις οποίες συνδέει μια προβολή JSP σε έναν ελεγκτή servlet, ώστε το split MVC να παραμένει ορατό στους αρχάριους.
Αυτά τα επεξεργασμένα παραδείγματα δείχνουν πώς να αναπτύξετε δείγματα προγραμμάτων με JSP και πώς να εφαρμόσετε την αρχιτεκτονική MVC γύρω από αυτά. Τρεις ενότητες έχουν δημιουργηθεί με τη σειρά:
- Φόρμα Εγγραφής
- Φόρμα σύνδεσης και αποσύνδεσης
- Έντυπο JSP
Πώς να δημιουργήσετε μια φόρμα εγγραφής σε JSP
Σε μια φόρμα εγγραφής, έχουμε μια φόρμα για να συμπληρώσουμε όλα τα στοιχεία, τα οποία περιέχουν όνομα, όνομα χρήστη, κωδικό πρόσβασης, διεύθυνση, αριθμό επικοινωνίας κ.λπ.
Αυτή η φόρμα μας βοηθά να εγγραφούμε στην αίτηση. Λαμβάνει όλα τα στοιχεία μας και τα αποθηκεύει σε ένα βάσεις δεδομένων ή κρυφή μνήμη.
Σε αυτό το παράδειγμα, θα πάρουμε το "Guru Φόρμα Εγγραφής», η οποία έχει τα ακόλουθα πεδία:
- ΟΝΟΜΑ
- ΕΠΩΝΥΜΟ
- Επωνυμία Φαρμακείου
- Κωδικός Πρόσβασης
- Διεύθυνση
- Τηλέφωνο επικοινωνίας
Αφού συμπληρώσουμε όλες αυτές τις λεπτομέρειες, έχουμε ένα κουμπί υποβολής. Κάνοντας κλικ σε αυτό το κουμπί, όλες οι λεπτομέρειες αποστέλλονται στο servlet.
Παράδειγμα 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>
Επεξήγηση του κώδικα:
Code Γραμμή 11: Εδώ παίρνουμε μια φόρμα που έχει μια ενέργεια, δηλαδή το servlet στο οποίο θα υποβληθεί το αίτημα, και το όνομα του servlet είναι guru_register.java. Το αίτημα θα υποβληθεί σε επεξεργασία μέσω της μεθόδου POST.
Code Γραμμή 14-16: Εδώ λαμβάνουμε τον τύπο εισόδου ως κείμενο και το όνομα είναι first_name.
Code Γραμμή 18-20: Εδώ λαμβάνουμε τον τύπο εισόδου ως κείμενο και το όνομα είναι last_name.
Code Γραμμή 22-24: Εδώ λαμβάνουμε τον τύπο εισόδου ως κείμενο και το όνομα είναι όνομα χρήστη.
Code Γραμμή 26-28: Εδώ λαμβάνουμε τον τύπο εισόδου ως κωδικό πρόσβασης (αυτό αποκρύπτει τον κωδικό πρόσβασης ενώ πληκτρολογείται) και το όνομα ως κωδικό πρόσβασης.
Code Γραμμή 30-32: Εδώ λαμβάνουμε τον τύπο εισόδου ως κείμενο και το όνομα ως διεύθυνση.
Code Γραμμή 34-36: Εδώ λαμβάνουμε τον τύπο εισόδου ως κείμενο και το όνομα ως επαφή.
Code Γραμμή 37: Εδώ παίρνουμε ένα κουμπί τύπου submit του οποίου η τιμή είναι επίσης Submit. Κάνοντας κλικ σε αυτό το κουμπί, η ενέργεια μεταβαίνει στο αντίστοιχο servlet guru_register, όπου όλες οι τιμές των παραμέτρων διαβιβάζονται στο αίτημα.
Σημείωση: το χαρακτηριστικό πίνακα στο Code Η γραμμή 12 διαβάζεται style="with: 50%"Η σωστή ιδιότητα CSS είναι width, επομένως η καταχώριση αναπαράγεται ακριβώς όπως δημοσιεύτηκε, αλλά ο πίνακας δεν θα διαστασιολογηθεί μέχρι να διορθωθεί αυτό το τυπογραφικό λάθος στο δικό σας αντίγραφο.
Παράδειγμα 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); } } }
Επεξήγηση του κώδικα:
Code Γραμμή 14: Εδώ ορίζουμε το servlet guru_register, το οποίο επεκτείνει το HttpServlet.
Code Γραμμή 18: Αυτή είναι η μέθοδος doPost(), η οποία καλείται όταν καθορίζουμε το POST ως το χαρακτηριστικό μεθόδου στην παραπάνω φόρμα JSP.
Code Γραμμή 20-25: Εδώ ανακτούμε τις τιμές από το αίτημα, δηλαδή first_name, last_name, username, password, address και contact, χρησιμοποιώντας την εντολή request.getParameter.
Code Γραμμή 27-32: Εδώ χρησιμοποιούμε μια συνθήκη if όπου ελέγχουμε αν κάποια από τις παραμέτρους που ανακτώνται από το αίτημα είναι κενή. Εάν κάποια παράμετρος είναι κενή, ο έλεγχος εισάγει αυτήν τη συνθήκη ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) και ανακτούμε ένα αντικείμενο RequestDispatcher από το αντικείμενο αιτήματος, το οποίο στέλνει το αίτημα πίσω στο register_1.jsp. Εδώ συμπεριλαμβάνουμε επίσης τα αντικείμενα αιτήματος και απόκρισης.
Code Γραμμή 33-37: Αυτός ο κλάδος εκτελείται όταν καμία από τις παραμέτρους δεν είναι κενή. Λαμβάνουμε ένα αντικείμενο RequestDispatcher από το αντικείμενο request, το οποίο προωθεί το αίτημα στο register_2.jsp. Εδώ προωθούμε τα αντικείμενα request και response.
Η διαφορά μεταξύ των δύο κλάδων έχει σημασία: include() εκτελεί την εντολή register_1.jsp και επιστρέφει τον έλεγχο στο servlet, ενώ forward() παραδίδει το αίτημα στο register_2.jsp και δεν επιστρέφει.
Παράδειγμα 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>
Επεξήγηση του κώδικα:
Code Γραμμή 10: Εδώ εμφανίζουμε το μήνυμα καλωσορίσματος. Αυτό το JSP καλείται όταν συμπληρωθούν όλες οι παράμετροι.
Όταν εκτελείτε τον παραπάνω κώδικα, λαμβάνετε την ακόλουθη έξοδο.
Παραγωγή:
Η σελίδα εγγραφής εμφανίζει τα έξι πεδία με ετικέτα με ένα μόνο κουμπί Υποβολής, όπως φαίνεται παρακάτω.
Μόλις συμπληρωθούν όλα τα πεδία και γίνει κλικ στην επιλογή Υποβολή, το guru_register προχωρά στο register_2.jsp και εμφανίζεται η σελίδα επιτυχίας.
Όταν κάνουμε κλικ στο register_1.jsp, εμφανίζεται μια φόρμα με όνομα, επώνυμο, όνομα χρήστη, κωδικό πρόσβασης, διεύθυνση και στοιχεία επικοινωνίας. Αφού συμπληρωθούν όλα τα στοιχεία και πατηθεί το κουμπί υποβολής, εμφανίζεται το μήνυμα "Καλώς ήρθες χρήστης".
Πώς να δημιουργήσετε μια φόρμα σύνδεσης και αποσύνδεσης σε JSP
Όπως και με τη φόρμα εγγραφής, θα δημιουργήσουμε τώρα μια φόρμα σύνδεσης και αποσύνδεσης.
Σε αυτό το παράδειγμα, έχουμε λάβει μια φόρμα σύνδεσης με δύο πεδία, "όνομα χρήστη" και "κωδικό πρόσβασης", και ένα κουμπί υποβολής.
Όταν κάνουμε κλικ στο κουμπί υποβολής, λαμβάνουμε ένα μήνυμα καλωσορίσματος με ένα κουμπί αποσύνδεσης.
Όταν κάνουμε κλικ στο κουμπί αποσύνδεσης, επιστρέφουμε στη φόρμα σύνδεσης.
Παράδειγμα 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>
Επεξήγηση του κώδικα:
Code Γραμμή 10: Εδώ παίρνουμε μια φόρμα της οποίας η ενέργεια είναι το servlet guru_login.java. Η μέθοδος μέσω της οποίας διαβιβάζονται τα δεδομένα είναι η POST.
Code Γραμμή 13-16: Εδώ παίρνουμε ένα πεδίο εισαγωγής "όνομα χρήστη", το οποίο είναι τύπου κειμένου.
Code Γραμμή 17-20: Εδώ παίρνουμε ένα πεδίο εισαγωγής "password", το οποίο είναι του τύπου password.
Code Γραμμή 22: Εδώ παίρνουμε ένα κουμπί «υποβολής» με την τιμή «Σύνδεση». Κάνοντας κλικ σε αυτό, ο έλεγχος μεταφέρεται στο servlet guru_login, όπου και τα δύο πεδία διαβάζονται χρησιμοποιώντας το αντικείμενο request.
Παράδειγμα 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); } } }
Επεξήγηση του κώδικα:
Code Γραμμή 5-9: Εδώ εισάγουμε τις απαραίτητες κλάσεις στον κώδικα.
Code Γραμμή 14: Εδώ δηλώνουμε το servlet guru_login, το οποίο επεκτείνει το HttpServlet.
Code Γραμμή 21: Εδώ χρησιμοποιούμε τη μέθοδο doPost(), επειδή η φόρμα χρησιμοποιεί τη μέθοδο POST.
Code Γραμμή 23-24: Εδώ διαβάζουμε παραμέτρους χρησιμοποιώντας το αντικείμενο αιτήματος, δηλαδή όνομα χρήστη και κωδικό πρόσβασης.
Code Γραμμή 25-29: Με αυτόν τον τρόπο χρησιμοποιούμε μια συνθήκη "if" που ελέγχει εάν το όνομα χρήστη και ο κωδικός πρόσβασης είναι κενά. Εάν κάποιο από τα δύο είναι κενό, λαμβάνουμε ένα αντικείμενο RequestDispatcher που στέλνει τον έλεγχο πίσω στο register_3.jsp με τα αντικείμενα request και response.
Code Γραμμή 30-34: Αυτός ο κλάδος εκτελείται εάν και οι δύο δεν είναι κενές. Στη συνέχεια, προωθεί το αίτημα στο register_4.jsp με τα αντικείμενα request και response.
Παράδειγμα 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>
Επεξήγηση του κώδικα:
Code Γραμμή 12: Εδώ λαμβάνουμε την παράμετρο "username" από το αντικείμενο αιτήματος στο όνομα χρήστη του αντικειμένου String. Αυτό λειτουργεί επειδή η συνάρτηση forward() διατηρεί το αρχικό αίτημα και, επομένως, τις παραμέτρους του άθικτες.
Code Γραμμή 13: Εδώ έχουμε ένα μήνυμα καλωσορίσματος με το όνομα χρήστη.
Code Γραμμή 14: Εδώ έχουμε τον σύνδεσμο αποσύνδεσης, ο οποίος στέλνει τον χρήστη πίσω στο register_3.jsp.
Όταν εκτελείτε τον παραπάνω κώδικα, λαμβάνετε την ακόλουθη έξοδο.
Παραγωγή:
Ανοίγοντας το register_3.jsp εμφανίζονται τα δύο πεδία διαπιστευτηρίων και ένα κουμπί Σύνδεσης.
Αφού κάνετε κλικ στο κουμπί Σύνδεση, θα λάβετε το παρακάτω μήνυμα μαζί με έναν σύνδεσμο Αποσύνδεσης.
Κάνοντας κλικ στον σύνδεσμο Αποσύνδεση, επιστρέφετε στη σελίδα σύνδεσης που εμφανίζεται εδώ.
Σημείωση: Αυτό το παράδειγμα συγκρίνεται μόνο για κενές τιμές, επομένως γίνεται δεκτό οποιοδήποτε μη κενό όνομα χρήστη. Μια σύνδεση παραγωγής πρέπει να επαληθεύει τα διαπιστευτήρια σε σχέση με ένα κατάστημα και να διατηρεί τους κωδικούς πρόσβασης κατακερματισμένους, ποτέ σε απλό κείμενο.
Επεξεργασία φόρμας JSP με χρήση getParameter()
Οι φόρμες είναι η συνηθισμένη μέθοδος συλλογής δεδομένων εισόδου στην επεξεργασία ιστού. Πρέπει να στείλουμε πληροφορίες στον διακομιστή ιστού και στη συνέχεια να διαβάσουμε αυτές τις πληροφορίες πίσω στην πλευρά του διακομιστή.
Υπάρχουν δύο κοινά χρησιμοποιούμενες μέθοδοι για την αποστολή και ανάκτηση πληροφοριών στον διακομιστή web.
Μέθοδος GET:
- Αυτή είναι η προεπιλεγμένη μέθοδος για τη μετάδοση πληροφοριών από το πρόγραμμα περιήγησης στον διακομιστή ιστού.
- Στέλνει τις κωδικοποιημένες πληροφορίες που προσαρτώνται στη σελίδα URL, χωρισμένα με τον χαρακτήρα ?.
- Έχει επίσης έναν περιορισμό μεγέθους. Η κλασική οδηγία είναι περίπου 1024 χαρακτήρες ανά αίτημα, αν και το πραγματικό όριο ορίζεται από το πρόγραμμα περιήγησης και τον διακομιστή και όχι από την προδιαγραφή HTTP.
- Θα πρέπει να αποφεύγουμε την αποστολή κωδικών πρόσβασης και ευαίσθητων πληροφοριών μέσω της μεθόδου GET.
Μέθοδος POST:
- Το POST είναι η πιο αξιόπιστη μέθοδος αποστολής πληροφοριών στον διακομιστή.
- Στέλνει τις πληροφορίες ως ξεχωριστό σώμα μηνύματος και όχι στη γραμμή διευθύνσεων.
- Επειδή οι τιμές δεν εμφανίζονται ποτέ μετά το ? στο URL, δεν αποθηκεύονται στο ιστορικό του προγράμματος περιήγησης ή στα αρχεία καταγραφής πρόσβασης διακομιστή.
- Χρησιμοποιείται συνήθως για την αποστολή ευαίσθητων πληροφοριών.
Το JSP χειρίζεται την επεξεργασία δεδομένων φόρμας χρησιμοποιώντας τις ακόλουθες μεθόδους:
- getParameter(): χρησιμοποιείται για να λάβει την τιμή μιας μεμονωμένης παραμέτρου φόρμας.
- getParameterValues(): χρησιμοποιείται για την επιστροφή των πολλαπλών τιμών μιας παραμέτρου.
- getParameterNames(): χρησιμοποιείται για να λάβει τα ονόματα όλων των παραμέτρων.
- getInputStream(): χρησιμοποιείται για την ανάγνωση των δυαδικών δεδομένων που αποστέλλονται από τον πελάτη.
Παράδειγμα:
Σε αυτό το παράδειγμα, έχουμε λάβει μια φόρμα με δύο πεδία, "όνομα χρήστη" και "κωδικό πρόσβασης", και ένα κουμπί υποβολής.
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>
Επεξήγηση του κώδικα: Action_form.jsp
Code Γραμμή 10: Εδώ έχουμε ορίσει μια μορφή της οποίας η ενέργεια υποβάλλεται σε επεξεργασία από μια άλλη JSPΣτο χαρακτηριστικό action προσθέτουμε το JSP στο οποίο πρέπει να υποβληθεί η φόρμα μέσω της μεθόδου GET.
Εδώ χρησιμοποιούμε τη μέθοδο GET για να περάσουμε τις πληροφορίες, δηλαδή όνομα χρήστη και κωδικό πρόσβασης.
Code Γραμμή 11-14: Εδώ λαμβάνουμε πεδία όπως όνομα χρήστη και κωδικό πρόσβασης, τα οποία είναι πεδία κειμένου, και λαμβάνουμε την εισαγωγή από τον χρήστη.
Αυτή η είσοδος μπορεί να ανακτηθεί χρησιμοποιώντας τη μέθοδο getParameter. Έχουμε επίσης ένα κουμπί υποβολής, το οποίο μεταβιβάζει τις τιμές των πεδίων στο action_form_process.jsp.
Action_form_process.jsp
Code Γραμμή 14: Εδώ λαμβάνουμε τις τιμές των πεδίων εισόδου από το action_form.jsp χρησιμοποιώντας τη μέθοδο getParameter του αντικειμένου request.
Όταν εκτελούμε τον παραπάνω κώδικα, λαμβάνουμε την ακόλουθη έξοδο.
Παραγωγή:
Το Action_form.jsp αποδίδει πρώτα τη φόρμα δύο πεδίων που φαίνεται παρακάτω.
Μετά την υποβολή, η εντολή action_form_process.jsp επαναλαμβάνει το όνομα χρήστη που διάβασε με την εντολή getParameter().
Όταν εκτελούμε την εντολή action_form.jsp, λαμβάνουμε μια φόρμα με δύο πεδία, όνομα χρήστη και κωδικό πρόσβασης, και ένα κουμπί υποβολής. Αφού εισαγάγουμε ένα όνομα χρήστη και έναν κωδικό πρόσβασης, κάνουμε κλικ στην επιλογή υποβολής και το αίτημα υποβάλλεται σε επεξεργασία από την επόμενη σελίδα, η οποία επιστρέφει τη σελίδα Επεξεργασίας Φόρμας με ένα μήνυμα καλωσορίσματος.
Σημείωση έκδοσης: Και τα δύο παραπάνω servlets εισάγουν το javax.servlet, το οποίο είναι σωστό για το Tomcat 9 και παλαιότερες εκδόσεις. Το Jakarta EE 9 μετονόμασε το API, επομένως στο Tomcat 10 ή νεότερη έκδοση κάθε εισαγωγή javax.servlet γίνεται jakarta.servlet, διαφορετικά η εφαρμογή πρέπει να μετατραπεί με το Apache Tomcat Migration Tool για το Jakarta EE.







