Βάσεις Δεδομένων Κωδικός Μαθήματος: MK741 Είδος Μαθήματος: Επιλογής-Εργαστηριακό Εξάμηνο: 7o Διδάσκων: Κοντογιάννης Σωτήριος Email: skontog@gmail.com, skontog@cc.uoi.gr Dept. Of Mathematics University of Ioannina
Περίγραμμα Ύλης Μαθήματος Βασικές αρχές σχεδίασης μιας Διαδικτυακής εφαρμογής Κανόνες σύνταξης της γλώσσας HTML/XHTML και βασικά στοιχεία της γλώσσας μορφοποίησης CSS Βασικά στοιχεία της γλώσσα προγραμματισμού SQL για τις Βάσεις Δεδομένων και υλοποίησης πινάκων Δημιουργία ερωτημάτων και ορισμού σχέσεων πινάκων πάνω σε Βάσεις Δεδομένων Βασικά στοιχεία της γλώσσας JavaScript και Διαδικτυακού προγραμματισμού σε γλώσσα PHP Επικοινωνία διαδικτυακού προγράμματος σε PHP με SQL Βάσεις Δεδομένων, ανάλυση και επεξεργασία δεδομένων Μαθηματικές δυνατότητες της PHP/HTML 2
Περίγραμμα Ύλης Εργαστηρίου 3
Περίγραμμα Ύλης Εργαστηρίου 4
Βιβλία του μαθήματος 5
Βιβλία του μαθήματος 6
Βιβλιογραφία 1. Βιβλίο [Κ. Ευδόξου: 22694245]: Συστήματα Διαχείρισης Βάσεων Δεδομένων, 3η Έκδοση, Ramakrishnan Raghu, Gehrke Joahannes. 2. Βιβλίο [Κ. Ευδόξου: 12535833]: Συστήματα Βάσεων Δεδομένων 6η Έκδοση, Abraham Silberschatz, Henry F. Korth, S. Sudarshan. 3. Βιβλίο [Κ. Ευδόξου: 12527844]: Ανάπτυξη Web Εφαρμογών με PHP και MySQL, 4η Έκδοση, Welling Luke, Thomson Laura, ISBN: 978-960-512617-9, Εκδόσεις Γκιούρδα. 4. Βιβλίο [K. Ευδόξου: 13690]: ΕΙΣΑΓΩΓΗ ΣΤΙΣ PHP 6 & MYSQL 5 ΜΕ ΕΙΚΟΝΕΣ, LARRY ULLMAN 5. Π.Σ. spooky.math.uoi.gr http://spooky.math.uoi.gr/files (micro-12345), Φάκελος Baseis_Dedomenon. 7
Εξέταση Μαθήματος - 3ωρη Εξέταση στο εργαστήριο Υλοποίηση μικρής εφαρμογής ή τμημάτων εφαρμογής (μέγιστο 3 ασκήσεις (HTML/PHP/JavaScript). Σύνολο Βαθμολογίας 100% 1. Χρόνος εργαστηριακής εξέτασης (3 ώρες) Απαλλακτική εργασία που θα δοθεί στα μέσα του εξαμήνου (πριν τις Διακοπές των Χριστουγέννων). Σύνολο Βαθμολογίας 100% 1. Θα δοθούν ατομικές υλοποίησης μιας μικρής Διαδικτυακής εφαρμογής 2. Η εργασία θα υλοποιηθεί αποκλειστικά κι μόνο στο πληροφοριακό σύστημα του kalipso όπου θα δοθεί πρόσβαση σε όλους τους φοιτητές του μαθήματος 3. Η εργασία εκτός από την υλοποίηση θα περιλαμβάνει παραδοτέο 5-10 σελίδων που θα περιγράφονται οι λειτουργίες της εφαρμογής (capabilities συνοπτικά) και o τρόπος χρήσης της/εγκατάστασης. 4. Για κάθε εργασία θα ακολουθήσει και προφορική παρουσίαση στο τέλος του εξαμήνου 5. Η δήλωση εργασιών θα γίνεται προσωπικά 8
Εξέταση Μαθήματος-Εργαστηριακή παρουσία - Σύνολο Εργαστηρίων το Εξάμηνο:13 Υποχρεωτική Εργαστηριακή παρουσία - Μέγιστος αριθμός απουσιών για να συμμετέχει στην τελική εξέταση του μαθήματος - (2-20% των παραδόσεων) Μέγιστος αριθμός απουσιών για να πάρει κανείς εργασία (1) Εξαιρούνται οι ειδικές περιπτώσεις και λόγοι υγείας. 9
Αρχιτεκτονική Συστήματος kalipso Client: Φυλλομετρητής ιστοσελίδων Firefox/IE/Chrome Application service: Εξυπηρετητής ιστοσελίδων (Apache-PHP) Database service: Βάση Δεδομένων (MySQL-MariaDB) 10
Εξυπηρετητές ιστοσελίδων - Web Servers (1) Ο Web Server είναι μια υλοποίηση του HTTP Η απόδοση δυναμικού περιεχομένου Web απαιτεί προγραμματισμό στην πλευρά του Server (Serverside) Πιο γνωστοί Web Servers στην αγορά: Apache 1.3 & 2.0 Microsoft Internet Information Server (IIS) 11
Εξυπηρετητές ιστοσελίδων - Web Servers (2) To HTTP πρωτόκολλο: Το Πρωτόκολλο Μεταφοράς Υπερκειμένου (HyperText Transfer Protocol, HTTP) είναι ένα πρωτόκολλο επικοινωνίας. Αποτελεί το κύριο πρωτόκολλο που χρησιμοποιείται στους φυλλομετρητές του Παγκοσμίου Ιστού για να μεταφέρει δεδομένα ανάμεσα σε έναν διακομιστή (server) και έναν πελάτη (client) (Πηγή Wikipedia). 12
Διευθύνσεις Ονόματα περιοχής Domain Name Service Διευθύνσεις - Ονόματα Περιοχής Οι Η/Υ έχουν ένα μοναδικό (ευ-μνημόνευτο από ανθρώπους) όνομα στο Διαδίκτυο (που αντιστοιχίζεται στην IP διεύθυνσή του) Kalipso.math.uoi.gr (αντιστοιχεί στην IP διεύθυνση 195.130.112.215) - Το πρώτο τμήμα δηλώνει έναν ειδικό Η/Υ (kalipso) - Το υπόλοιπο είναι το όνομα περιοχής (domain name), που δηλώνει τον οργανισμό (math.uoi.gr) - Το τελευταίο τμήμα (πρόσφυμα, suffix) κάθε ονόματος περιοχής συνήθως υποδηλώνει τον τύπο του οργανισμού ή τη χώρα 13
Web Server Εξυπηρετητής Ιστοσελίδων 14
Σύνδεση στον εξυπηρετητή Ιστοσελίδων web service Οι εντολές του χρήστη (σελίδες που θέλει να δεί) μεταφέρονται μέσω του φυλλομετρητή στον εξυπηρετητή (θύρα 80-TCP) με τη χρήση ενός πρωτοκόλλου (HTTP) 15
HyperText Transfer Protocol - ΗΤΤP Ελληνική Απόδοση: Πρωτόκολλο Μεταφοράς Υπερκειμένου - Τι είναι το Υπερκείμενο; Μια ειδική κατηγορία αρχείων-βάσεων δεδομένων που στηρίζεται σε έγγραφα κειμένου. 16
Πόροι που διαχειρίζεται το HTTP Ένας πόρος είναι ένα κομμάτι πληροφορίας που μπορεί να αναγνωριστεί από ένα χαρακτηριστικό, ονομαζόμενο URL (Universal Resource Locator, Παγκόσμιος Τοποθετητής Πόρου) Ένας πόρος μπορεί να είναι: 1. Ένα αρχείο (π.χ. έγγραφο υπερκειμένου) 2. Δεδομένα που δημιουργούνται από την εκτέλεση ενός προγράμματος στον Web Server (βλ. δυναμικές ιστοσελίδες) 3. Κάθε εμφανιζόμενο στοιχείο στον φυλλλομετρητή του πελάτη μπορεί να αποτελείται από ένα συνδυασμό πόρων - links 17
Παγκόσμιοι Τοποθετητές Δείκτες Πόρων URL (Universal Resource Locator) - URI (Universal Resource Identifier) Παγκόσμια ονοματοδότηση και ενσωματωμένος εντοπισμός της τοποθεσίας αποθήκευσης ενός πόρου URIs identify and URLs locate; however, locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs URL Examples: http://example.com/mypage.html ftp://example.com/download.zip mailto:user@example.com file:///home/user/file.txt tel:1-888-555-5555 http://example.com/resource?foo=bar#fragment /other/link.html (A relative URL, only useful in the context of another URL) URI not URL: urn:isbn:0451450523 data:,hello%20world 18
Δομή ενός URL Kalipso.math.uoi.gr 19
Μορφοποίηση URLs Χαρακτήρες όπως &, +, % και ο κενός χαρακτήρας (space) κωδικοποιούνται ως "%xx" όπου xx είναι η τιμή ASCII σε δεκαεξαδική μορφή, π.χ. & = "%26 Οι παράμετροι δίδονται σαν λίστα παραμέτρων και τιμών που ενώνονται και διαχωρίζονται με το & (προφέρεται ampersand): var1=value1&var2=value2&var3=value3 20
Μορφοποίηση χαρακτήρων ώς παράμετροι URL 21
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος GET: 22
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος HEAD: 23
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος PUT: 24
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος POST: 25
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος TRACE=Diagnostic ping: 26
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος HTTP OPTIONS - DIRECTORY: 27
Το πρωτόκολλο HTTP - Μέθοδοι: Μέθοδος DELETE: 28
Εξυπηρετητές ιστοσελίδων Web servers παγκοσμίως! Πηγή:netcraft.org 29
Αριθμός web-sites παγκοσμίως 30
Γλώσσα υπερκειμένου HTML H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίηση υπερκειμένου) και είναι η βασική γλώσσα δόμηση σελίδων του World Wide Web (ή απλά ιστού: Web) Η γλώσσα χρησιμοποιεί ένα αριθμό από tags για την μορφοποίηση κειμένου, για την δημιουργία συνδέσμων (links) μετάβασης ανάμεσα των σελίδα, για την εισαγωγή εικόνων, ήχου κ.α. Όταν ένας Web Browser ανοίγει ένα αρχείο HTML τα στοιχεία (tags) μεταφράζονται σε κατάλληλα χαρακτηριστικά με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας. Η δημιουργία αρχείων HTML είναι πολύ απλή. Αρκεί να τρέξουμε έναν οποιοδήποτε διορθωτή κειμένου text, όπως το Notepad των Windows. Να γράψουμε τον κώδικα HTML που επιθυμούμε και να το αποθηκεύσουμε (σώσουμε) σε ένα αρχείο με κατάληξη.htm ή.html. Συνήθως αποθηκεύουμε με επέκταση.html όταν θα δημοσιεύσουμε τα αρχεία μας σε διακομιστή Unix. 31
HTML Ιστορική αναδρομή 1 από 4 Το 1990 ο Tim Berners-Lee από το Cern, το εργαστήριο φυσικής της Γενεύης, δημιούργησε ένα νέο πρωτόκολλο με το οποίο θα μπορούσαν να μεταφέρονται κάθε είδος αρχείων και αντικειμένων μέσα από το Internet. Το πρωτόκολλο αυτό ονομάστηκε HTTP (HyperText Transfer Protocol) και σηματοδότησε την αρχή του WWW όπως το ξέρουμε σήμερα. Οι σελίδες που ήταν η βάση του WWW ήτας γραμμένες στην πρώτη έκδοση της γλώσσα HTML. Το 1989-1990, ο Tim Berners-Lee πρότεινε ένα σύνολο πρωτοκόλλων και λογισμικού (τον πρώτο web browser και editor με την ονομασία World Wide Web) που επέτρεψε στους υπολογιστές να αναζητήσουν πληροφορίες στο Διαδίκτυο και ανέπτυξε το πρώτο του web server που ονομάζεται HyperText Transfer Protocol Deamon (httpd). Ήταν το πρώτο που συνδυάζει την επικοινωνία στο Διαδίκτυο με το υπερκείμενο και ήταν επίσης υπεύθυνο για την πρώτη ιστοσελίδα που τέθηκε online τον Αύγουστο του 1991. Εκείνη την εποχή υπήρχε μόνο ένας διακομιστής Web που βρισκόταν στο CERN, αλλά μέχρι το τέλος του 1992, πάνω από 50 διακομιστές web λειτουργούσαν στον κόσμο, κυρίως στα πανεπιστήμια και σε ερευνητικά κέντρα. 32
Ο πρώτος εξυπηρετητής ιστοσελίδων 33
HTML Ιστορική αναδρομή 2 από 4 Στην αρχή, ο σχεδιασμός ιστοσελίδων ήταν ελάχιστων δυνατοτήτων, αλλά όπως το Web προχώρησε, η HTML έγινε πιο πολύπλοκη και ευέλικτη, επιτρέποντας στους χρήστες να προσθέσουν εικόνες και πίνακες στις ιστοσελίδες. Με την εφεύρεση του Cascading Style Sheets (CSS) και την τεχνολογία web server, όπου δινόταν η δυνατότητα να προσαρμοστεί η σελίδα με βάση τις απαιτήσεις του χρήστη (server-side scripting), ο σχεδιασμός ιστοσελίδων γνώρισε μια ραγδαία εξέλιξη. Το 1993, το πρώτο πρόγραμμα περιήγησης στο Internet, το Mosaic, επέτρεψε στους χρήστες να σερφάρουν στο Internet σε έναν γραφικό τρόπο και άνοιξε το Web για το ευρύ κοινό. Κυκλοφόρησε από το Εθνικό Κέντρο για εφαρμογές υπερ-υπολογιστών (NCSA). Το πρόγραμμα περιήγησης κατέστησε δυνατό για τους χρήστες να δουν κείμενο και γραφικά, αλλά μέσα από ένα πολύ περιορισμένο layout.. 34
HTML Ιστορική αναδρομή 3 από 4 Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από ένα διεθνή οργανισμό (Internet Engineering Task Forse). Το 1994, ιδρύθηκε το W3C με σκοπό να τεθούν πρότυπα και κατευθύνσεις της μελλοντικής ανάπτυξης της HTML έτσι ώστε να δοθεί η ικανότητα παροχής δυναμικού περιεχομένου μέσω του διαδικτύου. H επόμενη έκδοση η 3.0 (1995) δεν έγινε αποδεκτή από τις Microsoft και Netscape οπότε γρήγορα αντικαταστάθηκε από την έκδοση 3.2 (1996). Η τελευταία περιελάμβανε πολλές από τις σημάνσεις (tags) που είχαν εισάγει οι δύο εταιρίες. Η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του 1997 και έγινε το επίσημο πρότυπο τον Απρίλιο του 1998. Την υποστήριξη της HTML 4.0 στο φυλλομετρητή ανέλαβε εκπληκτικά σοβαρά η Microsoft στο πρόγραμμα περιήγησης Internet Explorer, και η ηγετική θέση στην αγορά IE5 (και νυν διάδοχός IE6) έχοντας εξαιρετική υποστήριξη για σχεδόν όλες τις νέες ετικέτες και χαρακτηριστικά. Σε σύγκριση, το τρομερά λανθασμένο Netscape Navigator 4,7 ήταν ανίκανο, όταν ήρθε η HTML 4.0 ακόμη και για τις βασικές λειτουργίες των CSS (Προάγγελος του Firefox- Cathedral & 35 Bazaar).
WWC Concortium Headed by Lee Members of the World Wide Web Consortium at the MIT site. From left to right are Henrick Frystyk Neilsen, Anselm Baird-Smith, Jay Sekora, Rohit Khare, Dan Connolly, Jim Gettys, Tim Berners-Lee, Susan Hardy, Jim Miller, Dave Raggett, Tom Greene, Arthur Secret, Karen MacArthur. 36
HTML Ιστορική αναδρομή 4 από 4 To W3C εξέδωσε την XHTML 1.0 ως σύσταση. Από τις 26 Ιανουαρίου 2000 είναι κοινό πρότυπο με την HTML 4.01. Η XHTML σηματοδοτεί την απομάκρυνση από τον τρόπο με τον οποίο τα νέα χαρακτηριστικά έχουν χρησιμοποιηθεί. Είναι μια εντελώς νέα εκδοχή της HTML, ενσωματώνοντας τις ακαμψίες της XML, έτσι ώστε ο κωδικός πρέπει να είναι σωστά γραμμένος, εάν θέλει να τρέξει μόλις φτάσει στο φυλλομετρητή του αναγνώστη. Δεν υπήρχαν πολλές νέες ή συνιστώμενες ετικέτες και χαρακτηριστικά σε XHTML, αλλά κάποια πράγματα άλλαξαν με σκοπό να αυξηθεί η προσβασιμότητα και η δυς-λειτουργικότητα. Μετά από την 4,01 HTML και την XHTML 1.0, αυτοί που είχαν τον έλεγχο της κατεύθυνσης της HTML άρχισαν να εργάζονται σε μια νέα πρόταση, την XHTML 2. Η διαδρομή που έπαιρνε η XHTML 2 άρχισε να δείχνει τόσο βαρετή και μη ρεαλιστική, και έγινε αρκετά σαφές ότι απαιτείται μια νέα προσέγγιση. το W3C αποφάσισε ότι η HTML ήταν ακόμα το μέλλον του διαδικτύου. Η XHTML 2 διεκόπη και το HTML5 έγινε η νέα προδιαγραφή. Η HTML5 έχει σχεδιαστεί για το διαδίκτυο, τόσο του παρόντος όσο και του μέλλοντος. Αυτό σημαίνει ότι μέσα στην επόμενη δεκαετία θα υπάρξουν σχετικά 37 αργά βήματα ανάπτυξης νέων βελτιώσεων.
HTML -4 co-editor Dave Raggett, co-editor of the HTML 4 specification, at work composing at the keyboard at his home in Boston. 38
Web-server ->Application server IP address: 195.130.112.215 FQDN:kalipso.math.uoi.gr Domain name:math.uoi.gr Web Service: Apache 2.4 TCP Port: 80 SSL TCP Port:443 PHP parser connected to A.S.: PHP 7.0 PHP includes module for handling Database requests Database: MariaDB 10.0 MySQL Port: 3306 39
Web server -> Application server Ο χρήστης συνδέεται στον A.S. χρησιμοποιώντας μία υπηρεσία απομακρυσμένης σύνδεσης τερματικού SSH port 22 -putty Ο χρήστης έχει στο πληροφοριακό σύστημα kalipso τo δικό του χώρο Ο χρήστης μπορεί να δημιουργήσει τα αρχεία του στον A.S. χρησιμοποιώντας τον κειμενογράφο pico Ο χρήστης μπορεί να επεξεργαστεί τα αρχεία του στον προσωπικό του υπολογιστή και μετά να τα ανεβάσει στον εξυπηρετητή μέσω SSH filezilla, 40 WinSCP.
To πρώτο μου πρόγραμμα σε HTML Χρησιμοποιεί εικόνα clouds.jpg που πρέπει να ανεβάσω στον εξυπηρετητή! 41
Πρόγραμμα απομακρυσμένης σύνδεσης SSH Kalipso.math.uoi.gr Putty download page: http://kalipso.math.uoi.gr~ma9634/index.html (ssh user@kalipso.math.uoi.gr) Φάκελος public_html 42
Πρόγραμμα απομακρυσμένης σύνδεσης SSH Βασικές Εντολές Τερματικού: cd [folder] -> μετακίνηση σε φάκελο (/ γονικός φάκελος) cd.. -> μετακίνηση ένα φάκελο πίσω cd public_html -> Ο φάκελος που επικοινωνεί με τον A.S. που περιλαμβάνονται οι σελίδες-αρχεία του χρήστη pico index.html -> Η κεντρική σελίδα για κάθε χρήστη που αναζητά ο εξυπηρετητής 43
Βασικές εντολές τερματικού: Εμφάνιση περιεχομένων φακέλου. $ΗΟΜΕ==Γονικός φάκελος χρήστη 44
Βασικές εντολές τερματικού (συν.):.. 45
Πρόγραμμα απομακρυσμένης μεταφοράς αρχείων - WinSCP https://winscp.net/eng/download.php Συνδεόμαστε μέσω sftp (File Transfer Protocol) Το δεξί παράθυρο βλέπει τον φάκελο του χρήστη ($ΗΟΜΕ) στην kalipso Το αριστερό παράθυρο δείχνει σε έναν φάκελο του υπολογιστή του χρήστη Drag and drop για τη μεταφορά αρχείων. 46
Πρόγραμμα απομακρυσμένης μεταφοράς αρχείων - WinSCP https://winscp.net/eng/download.php Συνδεόμαστε μέσω sftp (File Transfer Protocol) Το δεξί παράθυρο βλέπει τον φάκελο του χρήστη ($ΗΟΜΕ) στην kalipso Το αριστερό παράθυρο δείχνει σε έναν φάκελο του υπολογιστή του χρήστη Drag and drop για τη μεταφορά αρχείων. 47