Java & Java EE 1o Μέρος: Servlets και Java Server Pages. Κακαρόντζας Γεώργιος

Transcript

1 Java & Java EE 1o Μέρος: Servlets και Java Server Pages Κακαρόντζας Γεώργιος

2 Διάκριση μεταξύ Web και πλήρους προφίλ Στη Java EE υπάρχει η διάκριση μεταξύ web προφίλ και πλήρους προφίλ. Το Web προφίλ περιλαμβάνει όλα όσα χρειάζονται για τη δημιουργία εφαρμογών διαδικτύου χωρίς κάποια χαρακτηριστικά που έχουν σχέση με υπηρεσίες διαδικτύου (web services), απομακρυσμένη χρήση εφαρμογών (remoting), επικοινωνία μέσω μηνυμάτων (messaging) κ.α. Οι περισσότερες περιπτώσεις εφαρμογών διαδικτύου καλύπτονται από το web προφίλ, για μεγάλες εφαρμογές διαδικτύου όμως πολλές φορές απαιτείται το πλήρες προφίλ. Η Εικόνα δείχνει λεπτομερώς όλα εκείνα τα APIs που υποστηρίζονται στην μία και στην άλλη έκδοση Ειδικά τα Enterprise Java Beans 3.1 διαχωρίζονται και αυτά σε πλήρες και web προφίλ με κάποιες λειτουργίες να υποστηρίζονται μόνο στο πλήρες προφίλ. Για παράδειγμα τα Message Driven Beans (δηλαδή συστατικά που επικοινωνούν μέσω μηνυμάτων) υποστηρίζονται μόνο στο πλήρες προφίλ.

3 Δημιουργία έργου με το NetBeans Το NetBeans υποστηρίζει την δημιουργία έργων και των 2 αυτών προφίλ. Όταν δημιουργούμε ένα έργο με το NetBeans επιλέγουμε File->New Project Από τις διαθέσιμες κατηγορίες μπορούμε να επιλέξουμε Java Web (για το web προφίλ) ή Java EE (για το πλήρες προφίλ). Προς το παρόν θα επικεντρωθούμε στο web προφίλ.

4 Ο ρόλος των Java Server Pages Οι Java Server Pages (JSPs), από αρχιτεκτονική άποψη, ανήκουν στο επίπεδο της διασύνδεσης χρήστη. Είναι μία τεχνολογία που μπορεί να χρησιμοποιηθεί για την δημιουργία εφαρμογών διαδικτύου με παρόμοιο τρόπο με αυτόν της PHP. Συνηθέστερα όμως σε εφαρμογές JEE οι JSPs χρησιμοποιούνται ως η όψη (View) σε μία αρχιτεκτονική ModelView-Controller όπου: Μοντέλο (Model) είναι ένα Java Bean (μία κλάση Java που ακολουθεί κάποιες συμβάσεις) Όψη (View) είναι μία JSP, και Ελεγκτής (Controller) είναι ένα Servlet Για περισσότερες πληροφορίες για το αρχιτεκτονικό πρότυπο Model-View-Controller (MVC) δείτε το:

5 Παράδειγμα Java Server Pages Θα δημιουργήσουμε ένα web project με μία ιστοσελίδα (HTML) και μία JSP σελίδα. Η HTML ιστοσελίδα θα συγκεντρώνει κάποιες πληροφορίες από έναν χρήστη και αυτές τις πληροφορίες θα τις ανακτά η JSP και θα τις εμφανίζει. Η JSP απλά θα εμφανίζει το αποτέλεσμα αλλά θα μπορούσε να κάνει οτιδήποτε (π.χ. Θα μπορούσε να αποθηκεύσει αυτά τα στοιχεία στη ΒΔ). Κάνοντας αυτό το παράδειγμα θα συζητήσουμε και κάποιες νέες δυνατότητες του NetBeans για την δημιουργία εφαρμογών διαδικτύου. Η εφαρμογή αυτή αρχικά δεν θα ακολουθεί το πρότυπο MVC. Στη συνέχεια θα βάλουμε ένα Servlet και ένα Java Bean για να βελτιώσουμε την δομή της εφαρμογής και να υλοποιήσουμε το πρότυπο MVC

6 Δημιουργία του project Βήμα 1: Επιλογή τύπου project Για την δημιουργία του project επιλέγουμε File->New Project... Στο πλαίσιο διαλόγου 'New Project' επιλέγουμε Κατηγορία: Java Web Projects: Web Application Πατάμε το 'Next>' για το επόμενο βήμα του οδηγού.

7 Δημιουργία του project Βήμα 2: Καθορισμός ονόματος του project Στο πεδίο 'Project Name' δίνουμε το όνομα του project. Για το project θα δημιουργηθεί ένας νέος φάκελος στον οποίο θα περιέχονται όλα τα αρχεία του project. Ο φάκελος αυτός θα δημιουργηθεί στον φάκελο 'Project Location' Ο υποφάκελος του project (Project Folder) θα έχει το όνομα που έχουμε δώσει στο project και θα περιέχεται στον φάκελο 'Project Location'. Όπως πληκτρολογείτε το όνομα του project αλλάζει και το 'Project Folder' Δώστε 'Project Name' το όνομα 'Questionnaire' και πατήστε 'Next>'

8 Δημιουργία του project Βήμα 3: Καθορισμός του εξυπηρετητή Αν και το NetBeans εξ ορισμού χρησιμοποιεί τον Glassfish application server μπορείτε να χρησιμοποιήσετε και άλλους εξυπηρετητές αν το επιθυμείτε. Για τους σκοπούς του δικού μας μαθήματος θα χρησιμοποιήσουμε τον Glassfish Server. Επίσης μπορούμε να καθορίσουμε και την έκδοση της Java EE στην οποία στοχεύουμε. Εξ ορισμού είναι η τελευταία έκδοση (εδώ η 7) Τέλος καθορίζουμε το context path που θα εμφανίζεται στο browser μετά την διεύθυνση του εξυπηρετητή για την εφαρμογή μας. Εξ ορισμού εδώ τοποθετείται το όνομα της εφαρμογής. Έτσι αν η εφαρμογή μας εκτελείται στον localhost και στη θύρα 8080 τότε η διεύθυνση της αρχικής σελίδας (index.html) στο browser θα είναι Κρατάμε τις εξ ορισμού ρυθμίσεις και πατάμε το πλήκτρο 'Next>'

9 Δημιουργία του project Βήμα 4: Καθορισμός πλαισίων Για τη Java EE έχουν δημιουργηθεί πολλά πλαίσια (frameworks) τα οποία έχουν ως στόχο την διευκόλυνση των προγραμματιστών για διάφορες λειτουργίες μιας τυπικής διαδικτυακής εφαρμογής. Προς το παρόν δεν θα χρειαστούμε κάποιο πλαίσιο οπότε εδώ δεν επιλέγουμε τίποτα και πατάμε το 'Finish' για να ολοκληρώσουμε τη δημιουργία της εφαρμογής.

10 Η καρτέλα των έργων και ο εκδότης Όπως φαίνεται από την Εικόνα στα αριστερά και στην καρτέλα του έργου ('Projects') εμφανίζεται το νέο έργο που δημιουργήθηκε. Η βασική σελίδα του έργου ανοίγει για επεξεργασία και ονομάζεται index.html. Όταν τρέχετε το έργο με το F6 αυτή η σελίδα θα φορτώνεται ως η αρχική σελίδα. Στα δεξιά έχει ανοίξει ο εκδότης των ιστοσελίδων και εμφανίζεται η σελίδα index.html την οποία μπορείτε να επεξεργαστείτε.

11 Αλλαγή τίτλου και εμφάνιση παλέτας Σαν ένα πρώτο βήμα θα αλλάξουμε τον τίτλο της σελίδας σε 'Εγγραφή Μουσικού' γράφοντας αυτό το κείμενο ανάμεσα από τις ετικέτες <title> και </title>. Επίσης μέσα στο <body> θα εισάγουμε την επικεφαλίδα <h1>σελίδα Εγγραφής Μουσικού</h1>. Επίσης θα εμφανίσουμε την παλέτα με τα εργαλεία για τη γρήγορη εισαγωγή ετικετών HTML που θα χρησιμοποιήσουμε στη συνέχεια. Για να εμφανίσουμε την παλέτα επιλέγουμε το μενού Window-->Palette ή πατάμε το συνδυασμό πλήκτρων Ctrl+Shift+8. Η παλέτα θα εμφανισθεί στα δεξιά του παραθύρου του εκδότη όπως φαίνεται στην εικόνα.

12 Εισαγωγή HTML φόρμας Προκειμένου ένας μουσικός να εγγραφεί στην εφαρμογή μας θα πρέπει να δώσει κάποια βασικά στοιχεία (όνομα, μουσικά όργανα που παίζει κ.α.). Για να εισάγει αυτά τα στοιχεία θα χρειαστούμε μία φόρμα. Τραβάμε με το ποντίκι από την παλέτα το εργαλείο 'Form' (φόρμα) και το αφήνουμε κάτω από την επικεφαλίδα <h1>...</h1>. Θα εμφανισθεί ένα πλαίσιο διαλόγου στο οποίο δίνουμε τις τιμές που απεικονίζονται στην εικόνα.

13 Παραγόμενος HTML κώδικας για τη φόρμα Με το εργαλείο εισαγωγής φόρμας παράχθηκε αυτόματα ο κώδικας για τη φόρμα και εισάχθηκε στο κατάλληλο σημείο (εκεί όπου ήταν ο δρομέας κατά την εισαγωγή). Ο κώδικας σημαίνει πως όταν ο χρήστης κάνει την υποβολή της φόρμας τα στοιχεία θα αποσταλούν στη JSP σελίδα 'confirmation.jsp' (το στοιχείο 'action' της φόρμας) με τη μέθοδο αποστολής 'post'. Τη JSP σελίδα θα την κάνουμε αργότερα. Ανάμεσα από το <form> και </form> στη συνέχεια θα εισάγουμε τις κατάλληλες ετικέτες για την είσοδο των στοιχείων και την υποβολή της φόρμας.

14 Εισαγωγή πίνακα για τη στοίχιση των στοιχείων της φόρμας Ένας εύκολος τρόπος για να στοιχίσουμε τις ετικέτες και τα πεδία της φόρμας είναι να τα βάλουμε σε ένα HTML πίνακα. Σύρετε το εργαλείο εισαγωγής πίνακα (Table) από την παλέτα και αφήστε το ανάμεσα από το <form> και το </form>. Δώστε στα πεδία τις τιμές που φαίνονται στην πάνω εικόνα (Insert Table) και πατήστε 'OK' για να δημιουργήσετε έναν πίνακα με 7 γραμμές και 2 στήλες χωρίς γραμμές πλαισίου (Border Size=0). Ο HTML κώδικας του πίνακα θα είναι όπως εμφανίζεται στην κάτω εικόνα. Το <thead> στοιχείο δεν θα μας χρειαστεί οπότε σβήστε το και αφήστε μόνο το <tbody>.

15 Εισαγωγή πεδίου για το όνομα Για να εισάγουμε ένα πεδίο φόρμας για το όνομα θα χρησιμοποιήσουμε μία γραμμή (<tr>) και στο πρώτο κελί της γραμμής (<td>) θα βάλουμε την ετικέτα 'Όνομα'. Στο δεύτερο κελί της γραμμής (στο άλλο <td> του <tr>) θα τραβήξουμε ένα εργαλείο εισαγωγής 'Text input' από την παλέτα και θα δώσουμε τις τιμές που φαίνονται στην πάνω εικόνα. Η σημασία του κώδικα είναι πως το πεδίο υποδοχής της τιμής που θα εισαχθεί ονομάζεται 'fname', είναι πεδίο κειμένου και έχει πλάτος 15 χαρακτήρες.

16 Πρόσθετα πεδία κειμένου Παρομοίως προσθέστε πεδία κειμένου (Text Input) για το επώνυμο και το υποκοριστικό του μουσικού στις δύο επόμενες γραμμές με τις τιμές που φαίνονται στις δύο εικόνες.

17 Πλαίσια ελέγχου για τα μουσικά όργανα (1) Στην συνέχεια εισάγουμε την ετικέτα 'Κιθάρα' και στο διπλανό <td> εισάγουμε ένα πλαίσιο ελέγχου το οποίο θα επιλέξει ο μουσικός αν γνωρίζει κιθάρα. Το πλαίσιο ελέγχου εισάγεται με το εργαλείο 'Checkbox' από την παλέτα και τις τιμές που φαίνονται στην πάνω εικόνα. Ο κώδικας που παράγεται φαίνεται στην κάτω εικόνα.

18 Πλαίσια ελέγχου για τα μουσικά όργανα (2) Στις επόμενες δύο γραμμές θα εισάγετε πλαίσια ελέγχου για το μπάσο και τα ντραμς. Οι τιμές φαίνονται στις δύο εικόνες. Παρατηρείστε πως για όλα τα πεδία χρησιμοποιούμε το ίδιο όνομα: instrument. Αυτό σημαίνει πως θα περαστεί στη JSP σελίδα υποδοχής ένας πίνακας από αλφαριθμητικά με το όνομα instrument. Αν ο χρήστης έχει επιλέξει την κιθάρα τότε ο πίνακας instrument θα περιέχει την τιμή 'guitar', αν έχει επιλέξει μπάσο την τιμή 'bass' και αν έχει επιλέξει ντραμς την τιμή 'drums'.

19 Εισαγωγή πλήκτρου υποβολής Στην τελευταία γραμμή και στο δεύτερο κελί εισάγετε ένα πλήκτρο υποβολής των στοιχείων της φόρμας (το πρώτο κελί το αφήνουμε κενό). Τραβήξτε και αφήστε το εργαλείο 'Button' από την παλέτα δίνοντας τις τιμές που φαίνονται στην πάνω Εικόνα. Ο κώδικας φαίνεται στην κάτω εικόνα. Όταν οι χρήστες πατήσουν το πλήκτρο με την ετικέτα 'Εγγραφή' τα στοιχεία της φόρμας θα αποσταλούν στη σελίδα 'confirmation.jsp' την οποία θα προγραμματίσουμε στη συνέχεια.

20 Εκτέλεση εφαρμογής Σε αυτό το σημείο μπορείτε να τρέξετε την εφαρμογή πατώντας το F6. Θα εμφανισθεί η ιστοσελίδα (βλ. Εικόνα). Μπορείτε να βάλετε τιμές αν θέλετε και να πατήσετε το πλήκτρο 'Εγγραφή' αν και σ' αυτό το σημείο αφού δεν έχουμε κάνει την 'confirmation.jsp' η υποβολή των στοιχείων της φόρμας θα οδηγήσει σε λάθος.

21 Ο ολοκληρωμένος κώδικας της ιστοσελίδας index.html <!DOCTYPE html> <html> <tr> 1 <td>κιθάρα:</td> <head> 2 <td><input type="checkbox" name="instrument" value="guitar" <title>εγγραφή Μουσικού</title> /></td> </tr> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <tr> </head> <td>μπάσο:</td> <body> <td><input type="checkbox" name="instrument" value="bass" /></td> <h1>σελίδα Εγγραφής Μουσικού</h1> </tr> <form action="confirmation.jsp" method="post"> <tr> <table border="0"> <td>ντραμς:</td> <tbody> <tr> <td>όνομα:</td> <td><input type="checkbox" name="instrument" value="drums" /></td> </tr> <td><input type="text" name="fname" value="" size="15" /></td> <tr> </tr> <td></td> <tr> <td><input type="submit" value="εγγραφή" /></td> <td>επώνυμο:</td> </tr> <td><input type="text" name="lname" value="" size="30" /></td> </tbody> </tr> </table> <tr> <td>υποκοριστικό:</td> <td><input type="text" name="nickname" value="" size="15" /></td> </tr> </form> </body> </html>

22 Διάκριση μεταξύ στατικών & δυναμικών σελίδων Η ιστοσελίδα index.html είναι στατική. Πάντοτε θα εμφανίσει το ίδιο ακριβώς περιεχόμενο και θα συμπεριφερθεί με τον ίδιο ακριβώς τρόπο. Αντιθέτως η confirmation.jsp είναι δυναμική. Θα χρειαστεί να εμφανίσει τα στοιχεία του χρήστη-μουσικού που εγγράφηκε. Αυτά τα στοιχεία φυσικά είναι μεταβλητά και ως εκ τούτου το αποτέλεσμα που θα εμφανισθεί θα πρέπει να παραχθεί δυναμικά κατά το χρόνο εκτέλεσης. Στο παράδειγμά μας θα εμφανίσει πάντα την ίδια φόρμα και θα στείλει πάντοτε τα στοιχεία που εισήγαγε ο χρήστης στη φόρμα, στην confirmation.jsp. Στο παράδειγμά μας θα ανακτήσει τα στοιχεία του μουσικού όπως το όνομα, επώνυμο κλπ. και θα τα εμφανίσει. Αλλά επειδή τα στοιχεία αυτά αλλάζουν κάθε φορά θα είναι μεταβλητές μιας γλώσσας προγραμματισμού η δυναμική εκτέλεση των εντολών της οποίας θα παράγει δυναμικά το επιθυμητό αποτέλεσμα κάθε φορά. Στην περίπτωση της Java Enterprise Edition και των δυναμικών σελίδων JSP οι εντολές αυτές είναι γραμμένες στη γλώσσα προγραμματισμού Java. Στην περίπτωση της PHP οι εντολές είναι γραμμένες στη γλώσσα PHP κ.ο.κ.

23 Δημιουργία της confirmation.jsp: 1ο βήμα Για την δημιουργία της confirmation.jsp επιλέγουμε από το μενού File --> New File... και από την κατηγορία 'Web' επιλέγουμε 'JSP' ως τύπο αρχείου (file type) στο πρώτο βήμα του οδηγού δημιουργίας νέου αρχείου όπως δείχνει η εικόνα. Στην συνέχεια πατάμε το πλήκτρο 'Next>'

24 Δημιουργία της confirmation.jsp: 2ο βήμα Στο 2ο βήμα στο όνομα αρχείου δίνουμε confirmation χωρίς επέκταση (θα μπει αυτόματα η επέκταση jsp από το NetBeans. Παρατηρείστε πως προσδιορίζεται και το project αφού αυτό είναι ανοιχτό κατά την δημιουργία. Επίσης το αρχείο JSP θα δημιουργηθεί στον υποφάκελο 'web' στον φάκελο του project (βλ. Created File) Το αρχείο θα μπορούσε να δημιουργηθεί με την χρήση του όχι και τόσο δημοφιλούς XML συντακτικού (XML syntax) αντί για του πρότυπου συντακτικού (Standard Syntax). Εδώ επιλέξαμε το πρότυπο συντακτικό. Επίσης θα μπορούσαμε να δημιουργήσουμε ένα τμήμα μιας JSP (JSP segment) για συμπερίληψη σε πολλές σελίδες. Αυτό είναι κάτι που θα εξετάσουμε σε επόμενο μάθημα.

25 Δημιουργία της confirmation.jsp: 3ο βήμα Τελικά πατώντας Finish δημιουργείται η confirmation.jsp η οποία εμφανίζεται στον φάκελο Web Pages στον Project explorer (εκεί όπου τοποθετούνται και οι HTML σελίδες). Κάποιος αρχικός σκελετός της JSP παράγεται αυτόματα και εμφανίζεται στον εκδότη του αρχείου προς επεξεργασία.

26 Ρύθμιση του Glassfish για UTF-8 Πριν συνεχίσουμε και προκειμένου να μπορεί ο εξυπηρετητής εφαρμογών Glassfish να χειριστεί Ελληνικά θα πρέπει να κάνουμε επίσης το εξής: Κάνετε δεξί κλικ στο έργο και επιλέξτε 'New-->Other', και από την κατηγορία GlassFish επιλέξτε Glassfish Descriptor. Ο επεξεργαστής του Glassfish Descriptor θα εμφανισθεί. Πηγαίνετε στη καρτέλα 'XML' και προσθέστε την γραμμή <parameter-encoding default-charset="utf-8" /> στο σημείο που φαίνεται στην εικόνα.

27 Συγγραφή της confirmation.jsp contenttype="text/html" pageencoding="utf-8"%> 1 2 <li> <!DOCTYPE html> Ψευδώνυμο: <%= request.getparameter("nickname") %> <html> </li> <head> <% <meta http-equiv="content-type" String[] instruments = content="text/html; charset=utf-8"> <title>επιβεβαίωση Στοιχείων</title> </head> request.getparametervalues("instrument"); if (instruments!= null) { for (String instrument:instruments) <body> <h1>επιβεβαίωση Στοιχείων</h1> Ευχαριστούμε για την εγγραφή σας. Δώσατε τα ακόλουθα στοιχεία: <ul> %> <li>μουσικό όργανο: <%= instrument%></li> <% } <li> Όνομα: <%=request.getparameter("fname")+" "+ request.getparameter("lname")%> </li> { } %> </ul> </body> </html>

28 Εκτέλεση της εφαρμογής Τρέχοντας την εφαρμογή (F6) θα εμφανισθεί και πάλι η index.html στην οποία θα συμπληρώσουμε τη φόρμα και θα πατήσουμε το πλήκτρο Εγγραφή. Στην συνέχεια θα εμφανισθεί η confirmation.jsp που θα ανακτήσει τα στοιχεία της φόρμας και θα τα εμφανίσει όπως φαίνεται και στις δύο εικόνες.

29 Ερωτήσεις;