ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Η Τεχνολογία JSP (JavaServer Pages)
(Μέρος 4 - Προχωρημένα Θέματα)

 

Οι Αιτήσεις του Χρήστη (User Requests)

Θα δούμε τώρα πώς μπορούμε να συγκεντρώσουμε και να επεξεργαστούμε τις αιτήσεις του χρήστη (user requests). Οι αιτήσεις αυτές αποτελούνται από μηνύματα που περιέχουν πληροφορίες που αφορούν τους χρήστες και την αλληλεπίδρασή τους με τον φυλλομετρητή. Οι αιτήσεις δημιουργούνται από τον φυλλομετρητή και στέλνονται σ’ έναν JSP κώδικα για επεξεργασία σαν αποτέλεσμα κάποιων ενεργειών που μπορούν να κάνουν οι χρήστες καθώς αλληλεπιδρούν με τον φυλλομετρητή, όπως είναι το κλικ σ’ έναν υπερσύνδεσμο ή η υποβολή μιας φόρμας.

Οι πληροφορίες ενός request αφορούν τον χρήστη, το απομακρυσμένο μηχάνημα (server), το τοπικό μηχάνημα,  τα HTTP headers, το URL με το οποίο έγινε η κλήση, μερικές παραμέτρους της ιστοσελίδας και τα πεδία φόρμας (form fields) της HTML. Όλα αυτά τα στοιχεία είναι προσβάσιμα από ένα JSP μέσω του αντικειμένου request όταν καλείται ο κώδικας JSP. Το JSP χρησιμοποιεί το αντικείμενο request για να αποκτήσει πληροφορίες από τον φυλλομετρητή, τα cookies, τις επικεφαλίδες (headers) και τη σύνοδο του χρήστη (user session).

Θα δούμε πώς δημιουργείται ένα request από την αλληλεπίδραση ενός χρήστη μ’ έναν φυλλομετρητή. Το URL που δημιουργείται από τον φυλλομετρητή ανατέμνεται (αναλύεται) και χρησιμοποιούνται πολλές μέθοδοι για να αποκτήσουμε πληροφορίες για το URL με το οποίο έγινε η κλήση καθώς και το απομακρυσμένο (remote) και το τοπικό (local) μηχάνημα.

Μετά θα δούμε πώς μπορούμε να συμπεριλάβουμε ορίσματα (arguments) ή παραμέτρους (parameters) σ’ ένα request καθώς και πώς μπορούμε να τα επεξεργαστούμε. Τέλος, θα δημιουργήσουμε μια φόρμα σε HTML για να πάρουμε πληροφορίες από τον χρήστη και θα δούμε τον JSP κώδικα για να μπορέσουμε να τις επεξεργαστούμε.

 

Δημιουργία και Επεξεργασία των User Requests

Μια αίτηση (request) περιέχει πληροφορίες οι οποίες μεταβιβάζονται (περνιούνται) από έναν χρήστη (user) σ’ ένα JSP. Ένα μέρος από τη διαδικασία δημιουργίας ενός request είναι να δηλωθεί ή δημιουργηθεί ένα URL και θα δούμε πρώτα τα διάφορα μέρη ενός URL και τη σύνταξή του.

Ένα URL έχει την εξής γενική σύνταξη :

πρωτόκολλο://host:port/διαδρομή?queryString

Ακολουθεί ένα παράδειγμα ενός URL το οποίο καλεί ένα JSP μ’ ένα query string :

http://www.florina.gr:80/myJSP/Lesson1/request.jsp?p1=val1&p2=val2

Η διαδρομή (virtual path) του παραπάνω URL είναι ό,τι βρίσκεται ανάμεσα στη δήλωση της θύρας (port) και πριν από το query string, δηλαδή το: myJSP/Lesson1/request.jsp.

Το query string είναι ό,τι βρίσκεται μετά από το σύμβολο ?, δηλαδή το: p1=val1&p2=val2. Το query string περιέχει μια λίστα από ζευγάρια με ονόματα και τιμές, τα οποία διαχωρίζονται με τον χαρακτήρα &. Η χρήση του query string θυμίζει το πέρασμα παραμέτρων στις κλήσεις των συναρτήσεων.

Ένας φυλλομετρητής δημιουργεί requests όταν ο χρήστης κάνει κλικ σ’ έναν υπερσύνδεσμο (hyperlink) ή υποβάλει μια HTML φόρμα, όπως θα δούμε αργότερα. Θα δούμε πρώτα τη δημιουργία ενός request μέσω ενός υπερσυνδέσμου. Ο παρακάτω HTML κώδικας δημιουργεί έναν υπερσύνδεσμο (hyperlink).

<html>

<head>

<title> Request JSP </title>

</head>

<body>

            Κάντε κλικ

<a href="request.jsp?p1=v1&p2=v2">εδώ</a>

για να στείλετε ένα request σ’ έναν JSP κώδικα

</body>

</html>

Όταν ο χρήστης κάνει κλικ στον υπερσύνδεσμο, ο φυλλομετρητής δημιουργεί ένα request το οποίο στέλνεται στην ιστοσελίδα request.jsp. Ο JSP κώδικας μπορεί να έχει πρόσβαση στα στοιχεία (πληροφορίες) του request μέσω του αντικειμένου request. Ο JSP κώδικας μπορεί να χρησιμοποιήσει το αντικείμενο request για να πάρει πληροφορίες για το URL που κάνει την κλήση, για το μηχάνημα του server και τις θύρες (ports).

Τα requests που δημιουργούνται από υπερσυνδέσμους (hyperlinks) είναι στατικά requests, δηλ. γράφονται όπως ακριβώς είναι κατά τη φάση της σχεδίασης της ιστοσελίδας σ’ ένα στατικό URL και περιέχουν πάντα τις ίδιες τιμές στο query string ανεξάρτητα από τον χρήστη που έκανε κλικ στον υπερσύνδεσμο. Αντίθετα, τα requests που δημιουργούνται από τις φόρμες της HTML είναι δυναμικά requests με την έννοια ότι ο χρήστης έχει τη δυνατότητα να συμπληρώσει κάποια στοιχεία στα πεδία της φόρμας.

Έτσι, όταν υποβάλλεται η φόρμα, δημιουργείται το URL με τις τιμές των πεδίων που έχει δώσει ο χρήστης, δηλ. το URL δημιουργείται δυναμικά κατά τη φάση της εκτέλεσης της εφαρμογής (runtime) όταν υποβάλλεται η φόρμα, και φυσικά θα περιέχει διαφορετικές τιμές κάθε φορά που γίνεται η υποβολή της φόρμας.

 

Οι Παράμετροι του Query String

Τα requests του χρήστη μπορούν να περιέχουν μια λίστα από ζευγάρια ονόματος/τιμής τα οποία μεταβιβάζονται ως ορίσματα (παράμετροι, arguments) στον JSP κώδικα που καλείται. Το καθένα από τα ορίσματα αυτά στη λίστα των ορισμάτων αναφέρεται ως παράμετρος (parameter).

Οι παράμετροι μεταβιβάζονται σαν μέρος του URL το οποίο καλεί το JSP. Αυτό γίνεται δηλώνοντας ένα query string και προσθέτοντας το σύμβολο ? και μετά τη λίστα των παραμέτρων με διαχωριστικό το σύμβολο &. Η γενική σύνταξη ενός URL για να κληθεί ένα JSP με μια λίστα παραμέτρων είναι η εξής :

URL?queryString

όπου το queryString έχει την εξής σύνταξη :

name1=value1[,value2, … valueN1][&name2=value1, [,value2,…valueN2]]

Παρατηρούμε ότι μια παράμετρος μπορεί να έχει και περισσότερες από μία τιμές. Επίσης, το κάθε ζευγάρι ονόματος/τιμής ξεχωρίζει από το σύμβολο & και ακόμη το σύμβολο ? δηλώνει την αρχή της λίστας  των παραμέτρων.

Ακολουθεί ένα παράδειγμα ενός JSP κώδικα το οποίο μεταβιβάζεται με δύο παραμέτρους, τις lastName και firstName, με τις αντίστοιχες τιμές Papas και John.

http://serverflo:7001/myJSP/name.jsp?lastName=Papas&firstName=John

Οι παράμετροι με πολλές τιμές δηλώνονται παρέχοντας πολλές τιμές χωρισμένες με κόμματα για μια δεδομένη παράμετρο. Το επόμενο παράδειγμα εκχωρεί δύο τιμές στην παράμετρο colors .

http://localhost:7001/myJSP/myFlag.jsp?colors=blue&colors=white&country=Greece

Η λίστα των παραμέτρων στέλνεται στο JSP μέσω του αντικειμένου HttpServletRequest και γίνεται διαθέσιμη σ’ ένα JSP μέσω του στάνταρτ α-ντικειμένου request του JSP. Το αντικείμενο request παρέχει τρεις μεθόδους για να έχουμε πρόσβαση στις παραμέτρους που του μεταβιβάζονται, οι οποί-ες είναι οι εξής :

Για να δείξουμε τη διαδικασία της μεταβίβασης προς και της επεξεργασίας παραμέτρων από ένα JSP, δημιουργούμε μια απλή HTML σελίδα η οποία καλεί ένα JSP με μερικές παραμέτρους και μετά το JSP απλά εκτυπώνει τις παραμέτρους και τις τιμές τους.

Η HTML σελίδα που καλεί το JSP, δημιουργώντας ένα request με παραμέτρους στο query string, είναι η εξής :

<html>

<head>

<title> Κλήση ενός JSP με Παραμέτρους </title>

</head>

<body>

<a href="myFlag.jsp?country=Greece&colors=blue&colors=white">Κλήση του myFlag.jsp </a>

</body>

</html>

Όταν ο χρήστης κάνει κλικ στο παραπάνω link, οι παράμετροι country και colors θα πακεταριστούν σ’ ένα αντικείμενο HttpServletRequest και θα είναι διαθέσιμες στον JSP κώδικα της ιστοσελίδας myFlag.jsp μέσω του αντικειμένου request.

Ο JSP κώδικας θα μπορεί μετά να έχει πρόσβαση στις παραμέτρους και στις τιμές τους χρησιμοποιώντας τις μεθόδους του αντικειμένου request. Ακολουθεί μια ιστοσελίδα με JSP κώδικα, η myFlag.jsp, η οποία επεξεργάζεται τις παραμέτρους με τις μεθόδους getParameter() και getParameterValues().

<html>

<head>

<title> JSP Κώδικας για Επεξεργασία Παραμέτρων </title>

</head>

<body>

            Παράμετροι

            <ul>

            <li> Χώρα = <%= request.getParameter("country") %>

            <li> Χρώματα :

  <ul>

  <%! String[] colorValues=request.getParameterValues("colors");%>

<li> Χρώμα 1 = <%= colorValues[0] %>

<li> Χρώμα 2 = <%= colorValues[1] %>

              </ul>

            </ul>

</body>

</html>

 

Οι Φόρμες της HTML

Τα requests που δημιουργούνται από υπερσυνδέσμους (hyperlinks) έχουν έτοιμο (συγκεκριμένο) query string χρησιμοποιώντας το tag <a>. Οι φόρμες της HTML μάς δίνουν τη δυνατότητα να δημιουργήσουμε ένα URL μ’ ένα query string που δημιουργείται δυναμικά όταν ο χρήστης υποβάλει τη φόρμα. Τα ονόματα και οι τιμές του query string εξάγονται από τη φόρμα και δημιουργείται και προστίθεται στο URL η λίστα των ζευγαριών ονόματος/ τιμής.

Οι φόρμες της HTML παρέχουν πολλά είδη συστατικών GUI (graphical user interface) που λειτουργούν ως πεδία (fields) που μπορούμε να χρησιμοποιήσουμε για να δημιουργήσουμε φόρμες ώστε ο χρήστης να καταχωρίσει τιμές και να τις υποβάλει σε μια ιστοσελίδα με JSP κώδικα για περαιτέρω επεξεργασία.

Οι φόρμες δηλώνονται με το tag <form> ως εξής :

<form action="action" method=method>

                        … στοιχεία GUI για φόρμες …

</form>

Η παράμετρος action του tag <form> δηλώνει την ενέργεια που θα λάβει χώρα όταν θα υποβληθεί η φόρμα. Για τα JSPs, χρησιμοποιούμε το URL του JSP που θα καλέσουμε. Ένα query string προστίθεται στο URL. Τα ονόματα και οι τιμές των ζευγαριών ονόματος/τιμής στο query string δημιουργούνται δυναμικά από τα ονόματα των στοιχείων GUI και τις καταχωρίσεις του χρήστη στη φόρμα.

Η παράμετρος method του tag <form> δηλώνει την HTTP μέθοδο που θα χρησιμοποιηθεί για να σταλεί (post) το request στο JSP. Η τιμή της παραμέτρου αυτής μπορεί να είναι μια από τις GET, POST ή PUT. Για τα JSPs, χρησιμοποιούμε τη μέθοδο POST.

Μέσα στα tags της φόρμας, μπορούμε να δηλώσουμε όσα στοιχεία φόρμας θέλουμε χρησιμοποιώντας τα HTML tags <input>, <textarea> και <select>. Η απλή σύνταξη του tag <input> είναι η εξής :

<input type=type name=name value=defaultValue>

Η παράμετρος type μάς δίνει τη δυνατότητα να επιλέξουμε ένα από πολλά είδη στοιχείων, όπως text, checkbox, radio, image, reset και submit.

Η σύνταξη του tag <textarea> είναι η εξής :

<textarea name=name rows=rows cols=columns value=defaultText>

Το tag <textarea> δηλώνει μια περιοχή κειμένου όπου ο χρήστης μπορεί να καταχωρίσει κείμενο σε πολλές γραμμές. Η τιμή αυτού του tag είναι το κείμενο που έχει καταχωρίσει ο χρήστης.

Το tag <select> δηλώνει μια λίστα επιλογών απ’ όπου ο χρήστης μπορεί να επιλέξει είτε μία ή πολλές. Η τιμή αυτού του tag είναι η επιλογή που έχει κάνει ο χρήστης. Η σύνταξη του tag <select> είναι η εξής :

<select name=name [size=size multiple]>

<option [selected]> επιλογή </option>

            <option [selected]> επιλογή </option>

</select>

Βλέπουμε ότι όλα τα στοιχεία της φόρμας έχουν μια παράμετρο που καλείται name. Επίσης, ότι όλα τα στοιχεία της φόρμας έχουν μια τιμή που συσχετίζεται με το name και που ορίζεται είτε με καταχώριση από τον χρήστη ή από τον προγραμματιστή με μια προκαθορισμένη (default) τιμή που ορίζεται στην παράμετρο value. Τα ονόματα και οι τιμές των πεδίων της φόρμας χρησιμοποιούνται για να δημιουργηθεί το query string.

Όλες οι φόρμες θα πρέπει να διαθέτουν ένα πλήκτρο Submit (υποβολής) που να ενημερώνει τον φυλλομετρητή ότι η φόρμα έχει συμπληρωθεί και ότι το JSP θα πρέπει να κληθεί με το URL που καθορίζεται στην παράμετρο action του tag <form>.

Ακολουθεί ένα απλό παράδειγμα HTML κώδικα με μια φόρμα που δηλώνει δύο πεδία κειμένου και ένα πλήκτρο submit.

<html>

<head>

<title> Μια Απλή Φόρμα </title>

</head>

<body>

<form action="simpleForm.jsp" method=POST>

Επώνυμο : <input type=text name=lastName value="Παπαδόπουλος"<br>

Όνομα : <input type=text name=firstName value="Αντώνιος"<br>

<input type=submit value="Υποβολή">

</form>

</body>

</html>

Αν ο χρήστης κάνει κλικ στο πλήκτρο Submit, που περιέχει τον τίτλο (λεζάντα) Υποβολή, χωρίς να έχει γράψει κάτι στα πεδία κειμένου, ο φυλλομετρητής θα καλέσει την ιστοσελίδα simpleForm.jsp με το εξής URL :

simpleForm.jsp?lastName=Παπαδόπουλος&firstName=Αντώνιος

Φυσικά, αν ο χρήστης γράψει κάτι μέσα στα πεδία κειμένου, το URL θα περιέχει τις τιμές αυτών των πεδίων. Το query string πακετάρεται σ’ ένα request και στέλνεται στο JSP. Το JSP επεξεργάζεται το request με το αντικείμενο request για να αναλύσει τις παραμέτρους του query string.

 

Ένα Παράδειγμα με HTML Φόρμα και JSP Κώδικα

Για να δείξουμε πώς μπορούμε να επεξεργαστούμε τα περιεχόμενα μιας φόρμας μ’ ένα JSP, θα αναπτύξουμε μια εφαρμογή η οποία θα δέχεται στοιχεία μιας πιστωτικής κάρτας και θα υποβάλλεται στη συνέχεια σ’ έναν JSP κώδικα.

Ο JSP κώδικας θα επεξεργασθεί τα δεδομένα της φόρμας και θα δημιουργήσει μια σελίδα που θα περιέχει τις πληροφορίες που ο χρήστης υπέβαλε για επιβεβαίωση. Θα δούμε πρώτα τον HTML κώδικα της ιστοσελίδας που θα περιέχει την φόρμα για την καταχώριση των στοιχείων της πιστωτικής κάρτας.

<html>

<head>

<title> Φόρμα Στοιχείων Πιστωτικής Κάρτας </title>

</head>

<body>

<form action="creditCardForm.jsp" method=POST>

Στοιχεία Πιστωτικής Κάρτας

<p>Όνομα :<input type="text" name="name" size="25">

<p> Αριθμός Πιστωτικής Κάρτας :<input type="text" name="number" size="25">

<p> Είδος Πιστωτικής Κάρτας :

<select name="type">

<option> Visa </option>

<option> Master Card </option>

<option selected> Diners </option>

            </select>

            <p> Μήνας Λήξης :

<select name="month">

            <option selected> 01 </option>

            <option> 02 </option>

            <option> 03 </option>

            <option> 04 </option>

            <option> 05 </option>

            <option> 06 </option>

            <option> 07 </option>

            <option> 08 </option>

            <option> 09 </option>

            <option> 10 </option>

            <option> 11 </option>

            <option> 12 </option>

            </select>

<p> Έτος Λήξης :

<select name="year">

<option> 2006 </option>

<option selected> 2007 </option>

<option> 2008 </option>

<option> 2009 </option>

<option> 2010 </option>

            </select>

<p>

<input type="reset" name="Reset" value="Μηδενισμός">

<input type="submit" name="Submit" value="Υποβολή">

</form>

</body>

</html>

Τώρα θα γράψουμε την ιστοσελίδα που θα περιέχει τον JSP κώδικα για την επεξεργασία των στοιχείων της φόρμας. Τα ονόματα των πεδίων που θα υποβληθούν είναι τα name, number, type, month και year. Για να πάρουμε τις τιμές αυτών των πεδίων, θα πρέπει να περάσουμε τα ονόματα των πεδίων σαν ορίσματα στη μέθοδο getParameter() του αντικειμένου request.

Η ιστοσελίδα έχει όνομα αρχείου creditCardForm.jsp και ο κώδικάς της είναι ο εξής :

<html>

<head>

<title> JSP Κώδικας για Επεξεργασία Στοιχείων Φόρμας

</title>

</head>

<body>

Επιβεβαίωση Στοιχείων Πιστωτικής Κάρτας

<ul>

            <li> Όνομα = <%= request.getParameter("name") %>

            <li> Αριθμός = <%= request.getParameter("number") %>

            <li> Είδος = <%= request.getParameter("type") %>

            <li> Λήξη = <%= request.getParameter("month") %>/

                                    <%= request.getParameter("year") %>

</ul>

</body>

</html>

 

Δημιουργία Δυναμικής Απάντησης στον Χρήστη

Μέχρι τώρα είδαμε πώς μπορούμε να επεξεργαστούμε τα requests του χρήστη χρησιμοποιώντας το αντικείμενο request. Παρόμοια, μπορούμε να χρησιμοποιήσουμε ένα αντικείμενο response για να δημιουργήσουμε μια δυναμική απάντηση στον χρήστη. Ένα από τα μεγάλα πλεονεκτήματα των JSPs είναι η ικανότητά τους να δημιουργούν δυναμικό περιεχόμενο (dynamic content). Τα JSPs δημιουργούν δυναμικές ιστοσελίδες χρησιμοποιώντας τις δομές ελέγχου της Java, όπως είναι οι βρόχοι for και οι εντολές if. Για παράδειγμα, ένα JSP μπορεί να εμφανίσει ένα συγκεκριμένο μήνυμα κειμένου πολλές φορές χρησιμοποιώντας έναν βρόχο for.

Παρόμοια, τα JSPs μπορούν να δημιουργήσουν πίνακες με δυναμικό αριθμό γραμμών και στηλών επαναλαμβάνοντας τα κατάλληλα tags μέσα σ’ έναν βρόχο. Και οι φόρμες μπορούν να δημιουργηθούν δυναμικά ακολουθώντας κάποια συγκεκριμένη λογική διάταξη (layout). Η δημιουργία δυναμικού περιεχομένου (dynamic content) στις εφαρμογές του Web είναι σημαντική όταν το περιεχόμενο πρέπει να εκφράζει (παριστάνει) τα πιο καινούργια δεδομένα και προσωπικές πληροφορίες. Ένα παράδειγμα μιας τέτοιας εφαρμογής είναι ένα online χαρτοφυλάκιο για το χρηματιστήριο.

Ένα χαρτοφυλάκιο για το χρηματιστήριο δίνει τη δυνατότητα στους χρήστες να παρακολουθούν τις πληροφορίες online, όπως είναι οι τρέχουσες τιμές των μετοχών και οι μέγιστες και ελάχιστες καθημερινές τιμές. Μια τυπική ιστοσελίδα μιας τέτοιας εφαρμογής θα πρέπει να περιέχει έναν πίνακα που να εμφανίζει μια ποικιλία πληροφοριών του χρηματιστηρίου σε ξεχωριστές γραμμές, οι οποίες θα δημιουργούνται από έναν JSP κώδικα.

Η κάθε μετοχή θα έχει μια δική της γραμμή και κάθε φορά που ο χρήστης θα επισκέπτεται τη σελίδα, ο πίνακας θα διαφέρει, επειδή η JSP έχει πρόσβαση στις πιο πρόσφατες πληροφορίες και δημιουργεί τον πίνακα στον αέρα (on-the-fly). Η σελίδα θα μπορεί επίσης να περιέχει συνδέσμους (links) και πλήκτρα εντολών (buttons) για να μπορούμε να κάνουμε τροποποιήσεις στον πίνακα, όπως προσθήκη ή αφαίρεση μιας γραμμής ή ταξινόμηση του πίνακα σύμφωνα με κάποια στήλη.

Άλλα παραδείγματα εφαρμογών που χρησιμοποιούν δυναμικό περιεχόμενο είναι σελίδες ειδήσεων, πληροφορίες για τον καιρό και εξατομικευμένοι (προσωπικοί) δικτυακοί τόποι.

 

back.gif (9867 bytes)

Επιστροφή