Εργαλεία ανάπτυξης εφαρμογών internet Ι

Transcript

1 IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής

2 4 φάσεις διαδικτυακών εφαρμογών 1.Εφαρμογές στατικής πληροφόρησης 2.Εφαρμογές με απλή αμφίδρομη επικοινωνία 3.Εφαρμογές με αμφίδρομη επικοινωνία κάνοντας χρήση βάσεων δεδομένων του αυτού κόμβου 4.Εφαρμογές με αμφίδρομη επικοινωνία κάνοντας χρήση βάσεων δεδομένων διαφόρων κόμβων

3 1. Εφαρμογές Στατικής Πληροφόρησης Στατική σελίδα Είναι αυτή της οποίας το περιεχόμενο και οι εικόνες είναι οι ίδιες για κάθε επισκέπτη και δεν αλλάζουν μέσω κάποιας αλληλεπίδρασης του επισκέπτη με το site. Το περιεχόμενο των στατικών σελίδων συνήθως δεν αλλάζει συχνά και όταν αυτό γίνει θα πρέπει να γίνει χειρωνακτικά και όχι αυτοματοποιημένα. Πολλοί υποστηρίζουν ότι οι στατικές ιστοσελίδες είναι παλαιού τύπου και τεχνολογίας. Αυτό όμως είναι μια λανθασμένη εντύπωση που έχει δημιουργηθεί. Μερικές από τις πιο μοντέρνες ιστοσελίδες σήμερα είναι στατικές!

4 Πλεονεκτήματα στατικής σελίδας Γρηγορότερη ανάπτυξη της ιστοσελίδας. Χαμηλότερο κόστος κατασκευής. Μικρότερες απαιτήσεις σε χώρο φιλοξενίας. Συνήθως φορτώνει πιο γρήγορα από μια δυναμική. Εύκολη πλοήγηση για μηχανές αναζήτησης. Γρήγορο κατέβασμα εικόνων, εγγράφων ακόμα και σε χαμηλότερες συνδέσεις. Η δομή του περιεχομένου της σελίδας φαίνεται στην προεπισκόπηση Μπορεί να αλλαχθεί η δομή της σελίδας με ευκολία όποτε αυτό είναι επιθυμητό Απευθείας έλεγχος στο περιεχόμενο

5 Μειονεκτήματα στατικής σελίδας Το περιεχόμενό της ανανεώνεται από γνώστη της ανάπτυξης ιστοσελίδων. Ο χρήστης δεν αλληλεπιδρά με την σελίδα. Συνήθως χρησιμοποιείται για σελίδες με μικρό περιεχόμενο που δεν χρειάζεται να ανανεώνεται συχνά (αυτό μπορεί να είναι και θετικό ανάλογα με τις απαιτήσεις της κάθε επιχείρησης) Μπορεί να κοστίζει περισσότερο, μακροπρόθεσμα, σε σχέση με τη συχνότητα των ενημερώσεων Οι αλλαγές απαιτούν μεγάλη διάρκεια καθώς, πολλές φορές, χρειάζεται να τις κάνει κάποιος website designer Δύσκολη η συντήρηση όταν το website γίνει αρκετά μεγάλο. Δύσκολο να διατηρηθεί συνεπής και ενημερωμένη.

6 Παραδείγματα στατικών σελίδων

7 2. Εφαρμογές με απλή αμφίδρομη επικοινωνία Δυναμική ιστοσελίδα Είναι αυτή που προσφέρει αλληλεπιδραστικά στοιχεία ανάμεσα στον χρήστη και την ίδια την σελίδα. Τα στοιχεία αυτά μπορεί να είναι links ή κουμπιά με συγκεκριμένη συμπεριφορά που ανταποκρίνονται όταν ο χρήστης αλληλεπιδράσει με αυτά. Για την δημιουργία ενός δυναμικού site χρειάζονται πολλές γραμμές κώδικα προγραμματισμού. Σε αυτού του τύπου τις σελίδες, το περιεχόμενο αλλάζει και ανανεώνεται δυναμικά και αυτοματοποιημένα ακόμη και από χρήστες που δεν έχουν γνώσεις προγραμματισμού.

8 Μειονεκτήματα δυναμικής σελίδας Η κατασκευή ενός δυναμικού site χρειάζεται περισσότερο χρόνο για να ολοκληρωθεί. Το κόστος της είναι μεγαλύτερο. Το κόστος φιλοξενίας είναι μεγαλύτερο (λόγω των μεγαλύτερων απαιτήσεων). Συνήθως φορτώνει αργότερα από μια στατική σελίδα.

9 Πλεονεκτήματα δυναμικής σελίδας Το περιεχόμενο μπορεί να ανανεώνεται από ανθρώπους που δεν γνωρίζουν προγραμματισμό. Είναι πιο εύκολο να ανανεώνεται πιο συχνά το περιεχόμενο.

10 Παραδείγματα

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

12 Πλεονεκτήματα δυναμικής σελίδας με ΒΔ του αυτού κόμβου Μπορεί να περιέχει απεριόριστο αριθμό σελίδων άρα και πολύ περιεχόμενο. Εύκολη διαχείριση και έλεγχος του περιεχομένου Είναι εύκολη η διαχείριση χρηστών και διαχειριστών της ιστοσελίδας.

13 Μειονεκτήματα δυναμικής σελίδας με ΒΔ του αυτού κόμβου Μεγάλος αποθηκευτικός χώρος Μεγάλο κόστος παραγωγής Απαιτούνται πολιτικές ασφάλειας

14 Παραδείγματα

15 4. Εφαρμογές με αμφίδρομη επικοινωνία κάνοντας χρήση βάσεων δεδομένων διαφόρων κόμβων Δυναμικά websites που όμως οι πληροφορίες που εμφανίζει συνδυάζονται από βάσεις δεδομένων διαφορετικών sites.

16 Πλεονεκτήματα δυναμικής σελίδας με εξωτερικές ΒΔ Ελάχιστος χώρος για αποθήκευση του site Συνεχής ενημέρωση Λειτουργία ως portal και αναμεταδώτης πληροφορίας

17 Μειονεκτήματα δυναμικής σελίδας με εξωτερικές ΒΔ Δύσκολη υλοποίηση Δεν υπάρχει έλεγχος του περιεχομένου Αφαίρεση ή τροποποίηση του εξωτερικού περιεχομένου μπορεί να οδηγήσει σε ασυμβατότητες

18 Παραδείγματα

19 Στατική ή δυναμική Επιλέγουμε δυναμική σελίδα όταν Ο ιστότοπος είναι σχετικά μεγάλος (πάνω από 15 σελίδες). Θέλουμε να ανανεώνουμε το περιεχόμενο πολύ συχνά. Θέλουμε το περιεχόμενο να είναι κατηγοριοποιημένο και αρχειοθετημένο. Το περιεχόμενο θα ανανεώνεται από χρήστες χωρίς πολλές γνώσεις διαδικτυακών εφαρμογών. Θέλουμε να υπάρχουν διαφορετικοί χρήστες που θα χρησιμοποιούν το σύστημα με δικό τους κωδικό ο καθένας. Ο ιστότοπος είναι απαραίτητο να περιέχει στοιχεία που θα αλλάζουν δυναμικά (πχ. Τα νέα της εταιρίας κα.) Αν δεν ισχύει κάτι από τα παραπάνω τότε κατάλληλη είναι μια στατική ιστοσελίδα.

20 Τι είναι το client-server computing; Αναφέρεται σε μια βασική αλλαγή στο στυλ των υπολογιστών, την αλλαγή από τα συστήματα που βασίζονται στα μηχανήματα στα συστήματα που βασίζονται στον χρήστη. Είναι ένα σύστημα στο οποίο το δίκτυο ενώνει διάφορους υπολογιστικούς πόρους, ώστε οι clients (ή αλλιώς front end) να μπορούν να ζητούν υπηρεσίες από έναν server (ή αλλιώς back end), ο οποίος προσφέρει πληροφορίες ή επιπρόσθετη υπολογιστική ισχύ. Στο client-server μοντέλο, ο client θέτει μια αίτηση και ο server επιστρέφει μια ανταπόκριση ή κάνει μια σειρά από ενέργειες. Ο server μπορεί να ενεργοποιείται άμεσα για την αίτηση αυτή ή να προσθέτει την αίτηση σε μια ουρά. Η άμεση ενεργοποίηση για την αίτηση μπορεί, για παράδειγμα, να σημαίνει ότι ο server υπολογίζει έναν αριθμό και τον επιστρέφει αμέσως στον client. H τοποθέτηση της αίτησης σε μια ουρά μπορεί να σημαίνει ότι η αίτηση πρέπει να τεθεί σε αναμονή για να εξυπηρετηθεί. Ένα καλό παράδειγμα για αυτό είναι όταν εκτυπώνουμε ένα κείμενο σε ένα εκτυπωτή δικτύου. Ο server τοποθετεί την αίτηση σε μια ουρά μαζί με αιτήσεις εκτυπώσεων και από άλλους clients. Μετά επεξεργάζεται την αίτηση με βάση την σειρά προτεραιότητας, η οποία, σε αυτή την περίπτωση, καθορίζεται από τη σειρά με την οποία ο server παρέλαβε την απαίτηση.

21 Μοντέλο Επικοινωνίας στο Web Πελάτης: ένας browser Internet Explorer, Mozilla Firefox, Chrome Εξυπηρετητής: ένας web server IIS, Apache Ο τρόπος επικοινωνίας μεταξύ πελάτη-εξυπηρετητή καθορίζεται από το πρωτόκολλο HTTP (HyperTextTransfer Protocol)

22 Client vs server Ο client είναι ο αιτών των υπηρεσιών. Ο client δεν μπορεί παρά να είναι ένας υπολογιστής. Οι υπηρεσίες που ζητούνται από τον client μπορεί να υπάρχουν στους ίδιους σταθμούς εργασίας ή σε απομακρυσμένους σταθμούς εργασίας που συνδέονται μεταξύ τους μέσω ενός δικτύου. Ο client ξεκινάει πάντα την επικοινωνία. Μια client μηχανή πρέπει να μπορεί να κάνει τα ακόλουθα: Να τρέχει το λογισμικό των γραφικών διεπαφών χρηστών (GUIs). Να δημιουργεί τις αιτήσεις για πληροφορίες και να τις στέλνει στον server. Να αποθηκεύει τις επιστρεφόμενες πληροφορίες. Αυτές οι αιτήσεις καθορίζουν πόση μνήμη χρειάζεται, ποια ταχύτητα επεξεργασίας θα μπορούσε να βελτιώσει τον χρόνο ανταπόκρισης, και πόση χωρητικότητα αποθήκευσης απαιτείται. Ο server απαντάει στις αιτήσεις που γίνονται από τους clients. Ένας client μπορεί να ενεργεί ως server εάν λαμβάνει και επεξεργάζεται αιτήσεις όπως ακριβώς και τις στέλνει (για παράδειγμα, ένας σταθμός εργασίας που χρησιμοποιείται και ως server εκτυπώσεων από άλλους). Οι server δεν ξεκινάνε τις επικοινωνίες -περιμένουν τις αιτήσεις των clients. Μια server μηχανή πρέπει να μπορεί να κάνει τα ακόλουθα : Να αποθηκεύει, να ανακτά και να προστατεύει πληροφορίες. Να επιθεωρεί τις αιτήσεις των clients. Να δημιουργεί εφαρμογές διαχείρισης πληροφοριών, όπως δημιουργία αντιγράφων, ασφάλεια κτλ. Να διαχειρίζεται πληροφορίες.

23 Παράδειγμα Αλληλεπίδρασης Πελάτη- Εξυπηρετητή στο Web Ο χρήστης πληκτρολογεί ένα URL (π.χ. στο browser. Η αίτηση μεταφέρεται σε έναν DNS server. O DNS server επιστρέφει την IP διεύθυνση ( ) του εξυπηρετητή που φιλοξενεί τον ιστότοπο. Ο browser ζητάει την ιστοσελίδα από τον εξυπηρετητή χρησιμοποιώντας την IP διεύθυνση που επέστρεψε ο DNS server Ο εξυπηρετητής επιστρέφει την ιστοσελίδα στην IP διεύθυνση που καθόρισε η αίτηση του browser. Η ιστοσελίδα μπορεί να περιέχει συνδέσμους σε άλλα αρχεία (π.χ. εικόνες), τα οποία θα τα ζητήσει ο browser O browser συλλέγει όλη την πληροφορία και την εμφανίζει στο χρήστη με τη μορφή ιστοσελίδας

24 Το Πρωτόκολλο HTTP Πρωτόκολλο επικοινωνίας στηριζόμενο στο TCP/IP Κύρια μέθοδος μεταφοράς δεδομένων ανάμεσα σε εξυπηρετητή και πελάτη Χρησιμοποιείται για την πρόσβαση σε resources (ιστοσελίδες HTML, εικόνες, αποτελέσματα επερωτήσεων) στον Παγκόσμιο Ιστό (World Wide Web) Το πρωτόκολλο HTTP είναι: Connectionless Μετά την αίτηση, ο πελάτης αποσυνδέεται από τον εξυπηρετητή και αναμένει απάντηση Media-independent Οποιοσδήποτε τύπος δεδομένων μπορεί να μεταφερθεί, αρκεί να μπορούν να τον διαχειριστούν πελάτης και εξυπηρετητής Stateless Δε διατηρείται η κατάσταση μεταξύ διαδοχικών αιτήσεων Πελάτης Εξυπηρετητής Βάση δεδομένων

25 Βιβλιογραφία Καμμάς Σ., Διαδικτυακές σημειώσεις μαθήματος «Εργαλεία ανάπτυξης εφαρμογών Ιντερνέτ Ι», Πρέντζα Α., σημειώσεις μαθήματος «Προγραμματισμός Παγκόσμιου Ιστού», πανεπιστήμιο Πειραιώς www. w3schools.com Δουλκερίδης Χ., σημειώσεις μαθήματος «Εφαρμογές και υπηρεσίες Παγκόσμιου Ιστού» πανεπιστήμιο Πειραιώς 2010.