Δυναμικές Ιστοσελίδες Προγραμματισμός στην πλευρά του client

Transcript

1 ΕΣΔ516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Προγραμματισμός στην πλευρά του client Περιεχόμενα Περιεχόμενα Η Διεπίπέδη αρχιτεκτονική (2-tier architecture) Η τριεπίπεδη αρχιτεκτονική (3-tier architecture) Αντικειμενοστραφής Γλώσσες προγραμματισμού βασισμένες σε γεγονότα Javascript vs PHP Βιβλιογραφία N. Chapman, J. Chapman [2009]: Web Design: A complete introduction, Chapter 7, eds: J. Wiley & Sons, ISBN: R. Nixon [2009]: Learning PHP, MySQL and Javascript, Chapter 14, O Reilly Media Inc., ISBN:

2 Εισαγωγή Δυναμικές Ιστοσελίδες: Υποστηρίζουν κάποιας μορφής διαδραστικότητα με το χρήστη (αλλάζουν τη συμπεριφορά τους ανάλογα με τις ενέργειες του χρήστη) η μεταβάλλεται το περιεχόμενο τους στον Web browser του χρήστη (π.χ. απενεργοποίηση του history of navigation) Παραδείγματα: Ησυμπλήρωσημιαςφόρμαςγιααγορά ενός αεροπορικού εισιτηρίου Online ερωτηματολόγια / δημοσκοπήσεις Quiz αυτό αξιολόγησης Η διεπίπεδη αρχιτεκτονική Η επικοινωνία με ένα ιστότοπο με στατικό περιεχόμενο περιλαμβάνει δύο επίπεδα: Επίπεδο πελάτη (web-browser) Επικοινωνεί με τον DNS server με τον οποίο συνεργάζεται για την αντιστοίχηση μιας διαδικτυακής διεύθυνσης (π.χ. σε μια διεύθυνση IP ( ) Ζητά από τον Web server στην IP διεύθυνση που έχει παραλάβει από τον DNS server ( ) μια συγκεκριμένη ιστοσελίδα (π.χ. index.html) και εφόσον την παραλάβει αναγνωρίζει τι άλλα συστατικά στοιχεία απαιτούνται για την απεικόνιση της (π.χ. Stylesheets, λογότυπα, εικόνες και άλλα πολυμεσικά δεδομένα όπως flash animations, video, ήχους κλπ) Ζητά από τον web-server ένα προς ένα τα πιο πάνω στοιχεία Απεικονίζει την ιστοσελίδα ολοκληρωμένη Επίπεδο εξυπηρετητή (web server): Αναμένει στην πόρτα 80 για εισερχόμενες κλήσεις από κάποιον web-browser που ζητά συγκεκριμένη ιστοσελίδα ή συστατικά στοιχεία Εντοπίζει στον τοπικό δίσκο την ιστοσελίδα ή το συστατικό στοιχείο που ζητά οweb- browser Στέλνει στον web-browser την ιστοσελίδα ή συστατικό στοιχείο που ζήτησε 2

3 Η διεπίπεδη αρχιτεκτονική σχηματικά 1. Εισάγεις τη διεύθυνση στο πεδίο διεύθυνσης του web browser. 2. O Web-browser επικοινωνεί με τον DNS server για να βρει την IP διεύθυνση που αντιστοιχεί στον server.com. 3. Αφού την βρει ζητά την κύρια σελίδα (π.χ. index.html) από την IP διεύθυνση που βρήκε στο βήμα 2 4. Το αίτημα διασχίζει το Internet και φτάνει στον υπολογιστή με όνομα server.com 5. Ο web server στον υπολογιστή αυτό αναζητεί στον τοπικό δίσκο την ιστοσελίδα index.html 6. Αφού την εντοπίσει την επιστρέφει στον web-browser 7. O web-browser εμφανίζει την ιστοσελίδα στην οθόνη Η τριεπίπεδη αρχιτεκτονική Η υλοποίηση μιας διαδικτυακής εφαρμογής συνήθως υλοποιείται μέσω μιας τριεπίπεδης αρχιτεκτονικής (3-tier architecture) Πρώτο επίπεδο: Πελάτης (Client tier) Εξασφαλίζει τη διαπροσωπεία (interface) προς την εφαρμογή (μέσω συνήθως ενός web-browser) Δεύτερο επίπεδο: Web server, script processor (Middle tier) Περιλαμβάνει στην ουσία όλη τη λογική και φιλοσοφία της εφαρμογής Ελέγχει την πρόσβαση των χρηστών στην εφαρμογή, τον έλεγχο των δεδομένων που εισάγονται, τη διατύπωση μέσω συνδέσεων δικτύου των ερωτημάτων προς τη βάση, κ.ο.κ Ο Apache server και η PHP αποτελούν το middle tier στις εφαρμογές που αναπτύσσουμε Τρίτο επίπεδο: Database server (database tier) Παρέχει τα δεδομένα μέσω των βάσεων που έχουν σχεδιαστεί και αναπτυχθεί καθώς και το σύστημα διαχείρισης των βάσεων ώστε να επιτρέπεται εκτέλεση ερωτημάτων, εισαγωγή δεδομένων, δεικτοδότηση δεδομένων και διασφάλιση της ακεραιότητας τους Στα παραδείγματα μας ο database tier είναι ο MySQL server 3

4 Εκτέλεση διαδικτυακών εφαρμογών Στο πιο κάτω σχήμα παρουσιάζεται το υλικό, λογισμικό και η μεταξύ τους αλληλεπικοινωνία για την εκτέλεση διαδικτυακών εφαρμογών. Βήμα προς βήμα λειτουργία της τριεπίπεδης αρχιτεκτονικής 1. Εισάγεις τη διεύθυνση URL στο πεδίο διεύθυνσης του web browser. 2. O Web-browser επικοινωνεί με τον DNS server για να βρει την IP διεύθυνση που αντιστοιχεί στο URL 3. Αφού την βρει ζητά την κύρια σελίδα (π.χ. index.html) από την IP διεύθυνση που βρήκε στο βήμα 2 4. Το αίτημα διασχίζει το Internet και φτάνει στον υπολογιστή με όνομα server.com 5. Ο web server στον υπολογιστή αυτό αναζητεί στον τοπικό δίσκο την ιστοσελίδα index.html 6. Αφού την εντοπίσει διαπιστώνει ότι περιλαμβάνει εντολές PHP και την προωθεί στον PHP Interpreter 7. O PHP Interpreter εκτελεί τις εντολές PHP 4

5 Βήμα προς βήμα λειτουργία της τριεπίπεδης αρχιτεκτονικής (2) 1. Μερικές από τις εντολές PHP περιέχουν SQL κώδικα με αποτέλεσμα να προωθηθούν στην MySQL για εκτέλεση 2. Η MySQL για εκτελεί τις εντολές και επιστρέφει τα αποτελέσματα στον PHP Interpreter 3. O PHP Interpreter επιστρέφει τα αποτελέσματα αυτά μαζί τα αποτελέσματα της εκτέλεσης των υπόλοιπων εντολών PHP στον Web server 4. O Web server επιστρέφει την ιστοσελίδαμεόλατααποτελέσματα της εκτέλεσης των εντολών PHP και SQL στον web-browser 5. O web-browser εμφανίζει την ιστοσελίδα στην οθόνη Παράδειγμα εκτέλεσης διαδικτυακής εφαρμογής Στο πιο κάτω σχήμα παρουσιάζεται η αναζήτηση κάποιου προϊόντος από τη ιστοσελίδα ενός διαδικτυακού τόπου που ασχολείται με διαδικτυακό εμπόριο. Η σχετική ιστοσελίδα ονομάζεται shop.php 5

6 Αντικειμενοστραφής Η Javascript είναι μια γλώσσα προγραμματισμού που βασίζεται σε αντικείμενα (όπως είναι η Java, η C++, κ.ο.κ). Στο πλαίσιο της Javascript (αλλά και οποιασδήποτε άλλης αντικειμενοστραφούς γλώσσας προγραμματισμού) τα πάντα θεωρούνται αντικείμενα (καρέ, movie clips, buttons, μαθηματικές συναρτήσεις, κ.ο.κ) Οι κλάσεις (class) καθορίζουν τα αντικείμενα: Για παράδειγμα η κλάση σκύλους καθορίζει όλες τις ιδιότητες που μπορεί να έχει ένας σκύλος (μουσούδα, τρίχωμα, ουρά) και τις δράσεις που μπορεί να κάνει (τρέξιμο, κούνημα ουράς, γαύγισμα). Συγκεκριμένα σκυλιά (Max, Azor, Lassie) αποτελούν υποδείγματα (instances) της κλάσης σκύλος και παρότι μοιράζονται κοινές ιδιότητες (π.χ. τρίχωμα) έχουν διαφορετικές τιμές για τις ιδιότητες αυτές (Max => γκρι τρίχωμα, Azor => καφέ) Η κλάση σκύλος είναι μια κατηγορία της κλάσης «ζώο». Ως τέτοιο κληρονομεί και όλες τις ιδιότητες της κλάσης «ζώο» (4 πόδια, κεφάλι, κ.ο.κ) Αντικειμενοστραφής (2) Κάθε αντικείμενο στην Javascript χαρακτηρίζεται από: Τις ιδιότητες του (properties) Τα πράγματα τα οποία μπορεί να κάνει (methods) Τις ενέργειες στις οποίες αντιδρά (events) 6

7 Ιδιότητες (properties) Ιδιότητες => Τα χαρακτηριστικά που έχει ένα αντικείμενο: Movieclip, position (θέση ενός συγκεκριμένου movie clip) Μπορούμε να έχουμε πρόσβαση στις ιδιότητες ενός υποδείγματος κάποιου αντικειμένου (δηλαδή ενός συγκεκριμένου movieclip το οποίο έχει συγκεκριμένο όνομα). Δεν μπορούμε, για παράδειγμα, να ρωτήσουμε πόσο ύψος έχει ο άνθρωπος, διότι η απάντηση θα είναι ποιος από όλους τους ανθρώπους; Μπορούμε όμως να ρωτήσουμε «πόσο ύψος έχει ο Κώστας Χ.;» Κάθε υπόδειγμα μιας κλάσης έχει ένα όνομα το οποίο καθορίζεται από την ιδιότητα Instance Name. Μέθοδοι (methods) Μέθοδοι => Τι μπορεί να κάνει ένα αντικείμενο: Movieclip, stop (σταμάτημα του movie clip) Μπορούμε να δώσουμε εντολή σε ένα αντικείμενο να κάνει κάτι (π.χ. somemovieclip.stop(), somemovieclip.gotoandplay) 7

8 Γεγονότα (events) Events => Δράσειςστιςοποίεςένααντικείμενοαντιδρά Τα γεγονότα συνήθως αντικατοπτρίζουν μια ενέργεια του χρήση όπως αυτή διαβιβάζεται μέσω του ποντικιού (MouseEvent.CLICK, MouseEvent.OVER) ή του πληκτρολογίου (KeyboardEvent.KEY_DOWN) Για να αντιδράσει ένα αντικείμενο σε ένα event χρειάζεται: Να μπορεί να το ακούσει (someobject.addeventlistener (someevent, someeventhandler)) Να οριστεί ο τρόπος αντίδρασης (μέσω της συνάρτησης someeventhandler) Scripting Languages: Scripting Languages Ονομάζονται οι γλώσσες προγραμματισμού που βασίζονται σε γεγονότα (events). Δηλαδή προγραμματίζουν την αντίδραση του συστήματος (π.χ. ιστοσελίδας) σε κάποια γεγονότα (π.χ. Click ποντικιού σε μια εικόνα) Στοχεύουν στη διαδραστικότητα Παραδείγματα scripting languages Javascript Actionscript 8

9 Javascript: Javascript vs PHP Προγραμματισμός εφαρμογών που εκτελούνται στον Web browser (π.χ. Quiz αυτοαξιολόγησης) Διεπίπεδη αρχιτεκτονική PHP Προγραμματισμός εφαρμογών που εκτελούνται στον server (π.χ. εφαρμογές ηλεκτρονικού εμπορίου, online ερωτηματολόγια) Τριεπίπεδη αρχιτεκτονική Παράδειγμα Να μελετήσετε τον ιστότοπο και να: 1. Εξηγήσετε με παράδειγμα τη λειτουργία της διεπίπεδης αρχιτεκτονικής 2. Εξηγήσετε με παράδειγμα τη λειτουργία της τριεπίπεδης αρχιτεκτονικής 3. Να ορίσετε τις μορφές διαδραστικότητας που παρέχει η συγκεκριμένη ιστοσελίδα 4. Να εξηγήσετε για ποιο λόγο η ιστοσελίδα αυτή χρησιμοποιεί μια βάση δεδομένων. Ποια στοιχεία αποθηκεύονται στη βάση; Γιαποιακύριααντικείμενα; 9