Εργασια 3

Μια μικρη περιγραφη του τι ακριβως υλοποιει η εργασια μου αρχικα που θα την βρειτε στην:

http://83.212.100.122:8080/flick/start

Αρχικα να πω οτι θα την δειτε καλυτερα με την χρηση του Chrome.

Η ιστοσελιδα αποθηκευει και τροποποιει τις φωτογραφιες που ανεβαζει ο χρηστης.

Αρχικα ο χρηστης ανεβαζει την φωτογραφια. Στην συνεχεια μπορει να προσθεσει και ενα description στην φωτογραφια του. Μολις ανεβει η φωτο, μπορει να την επεξεργαστει, “πειραζοντας” το υψος, το πλατος και το rotation της φωτογραφιας. Στην συνεχεια πατοντας το κουμπι αποθηκευει τις αλλαγες και μπορει να επιστεψει στην αρχικη σελιδα οπου φαινονται ολες οι φωτογραφιες του.

Να τονισω οτι γινετε ελεγχος για το τι αρχειο ανεβαζει ο χρηστης, και επισης στα καταλληλα πεδια που απαιτειται συμπληρωση(πχ διαστασεις) ετσι ωστε να αποφευγονται αστοχιες και λαθη. Το css ειναι τελειως ενδεικτικο, αφου ο κ.Βαβαλης ειπε να μην δωσουμε ιδιαιτερη σημασια.

Η υλοποιηση ειναι αρκετα ξεκαθαρη και περιγραφεται παρακατω:

Εχουμε δυο servlets με την ονομασια UploadServlet και GetImageServlet.

Την UploadServlet η οποια αναλαμβανει να ανεβασει και να αποθηκευσει την φωτογραφια στον server μου την πηρα και την επεξεργαστηκα απο εδω: http://www.tutorialspoint.com/servlets/servlets-file-uploading.htm

Στην κλαση αυτη, ανεβαζω το αρχειο στον server μου και τον αποθηκευω στον φακελο που εχω ορισει.Εχω την επιλογη να δωσω ή οχι περιγραφη στην φωτογραφια, Επισης δημιουργω xml αρχειο με τα καταλληλα περιεχομενα της φωτογραφιας(αρχικες διαστασεις και πειργραφη).

Στην αλλη κλαση, GetImageServlet, διαβαζω τα στοιχεια του xml αρχειου που αντιστοιχει στην φωτογραφια που επιλεγω για επεξεργασια. Βλεπουμε πολλαπλους ελεγχους για το εαν ο χρηστης εισαγει ή οχι στοιχεια και αφου πατησει να αποθηκευτουν οι αλλαγες στην ουσια ξαναγραφουμε το αρχειο xml με τις νεες τιμες.

Φυσικα υπαρχει και ενα αρχειο web.xml οπου κανω το mapping των servlets.

Τελος μεσα στον φακελο που εχω ανεβασει την εφαρμογη 2 αρχεια jsp που δημιουργουν το περιεχομενο τις σελιδας αλλα και 2 css αρχεια για την μορφωποιηση τους.

Τον κωδικα του project θα τον βρειτε στο παρακατω link:

Advertisements
By mchrisober

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s