Τεχνολογίες Διαδικτύου

ECE_Y210 Εισαγωγή στην Επιστήμη του Ηλεκτρολόγου Μηχανικού Τεχνολογίες Διαδικτύου Νικόλαος Αβούρης hci.ece.upatras.gr/avouris 1

Αντικείμενο της ενότητας Η μελέτη τεχνολογιών ανάπτυξης εφαρμογών στο διαδίκτυο, χρησιμοποιώντας την python ως γλώσσα προγραμματισμού. - web: Σύντομη εισαγωγή στο πρωτόκολλο HTTP και στην HTML, τη γλώσσα συγγραφής υπερκειμένου - Διασύνδεση εφαρμογής python με web server μέσω του πρωτοκόλλου Web Server Gateway Interface WSGI - Ανάπτυξη διαδικτυακής εφαρμογής με Python, παραδείγματα 9

Το Διαδίκτυο o Είναι το παγκόσμιο σύστημα διασυνδεδεμένων δικτύων υπολογιστών που χρησιμοποιούν τα πρωτόκολλα TCP / IP. o Ο παγκόσμιος ιστός (www) είναι η πιο σημαντική υπηρεσία που χρησιμοποιεί το Διαδίκτυο, για αυτό ο όρος διαδίκτυο και παγκόσμιος ιστός συγχέονται. o Η χρήση του αυξήθηκε ραγδαία από τα μέσα της δεκαετίας του 1990 και σήμερα καλύπτει κάθε πτυχή της σύγχρονης ζωής. o Όχι κεντρική οργάνωση. Μόνο ο χώρος διευθύνσεων IP και Domain Name System (DNS), κατευθύνονται από την ICANN. o H τυποποίηση των βασικών πρωτοκόλλων συντονίζεται από την Internet Engineering Task Force (IETF) 2

Αρχιτεκτονική του διαδικτύου Ροή δεδομένων στα πρωτόκολλα διαδικτύου https://en.wikiversity.org/wiki/web_science/part1:_foundations_of_the_web 7

Ποσοστό του πληθυσμού online http://www.websitemagazine.com/images/blog/adayoftheinternet_info.png 8

HTTP(hyper-text transfer protocol) Πρωτόκολλο ανταλλαγής μηνυμάτων μεταξύ πελάτη (browser) και εξυπηρετητή (web server) για την εφαρμογή παγκόσμιου ιστού. Το πρωτόκολλο ορίστηκε το 1989 από τον Tim Berners-Lee Σήμερα στην έκδοση HTTP/2 Τα μηνύματα είναι δομημένα κείμενα Μηνύματα αιτήματα: GET ή POST Μηνύματα αποκρίσεις 10

GET To πιο συνηθισμένο αίτημα HTTP GET URI[?key1=value1&key2=value2] πρωτόκολλο GET /index.php?name=nikos HTTP/1.1[CRLF] Host: www.upatras.gr:80[crlf] Accept: image/gif, image/jpeg[crlf] User-Agent: Mozilla/4.0[CRLF] Connection: Keep-Alive[CRLF] [CRLF] 11

POST Χρησιμοποιείται για την αποστολή δεδομένων ή κωδικοποιημένων αρχείων προς τον Web Server. - Συχνά χρησιμοποιούμενη για επεξεργασία στοιχείων από φόρμες. POST /receiver.php HTTP/1.1[CRLF] Host: www.upatras.gr:80[crlf] Content-Type: application/x-www-form-urlencoded; charset=utf-8[crlf] Content-Length: 50[CRLF] [CRLF] ModuleCode=243607&FileID=2207&rndval=1286476333676[ CRLF] 12

Απόκριση συστήματος Έκδοση sp Κωδικός Κατάστασης sp Φράση cr lf Κεφαλίδα sp Τιμή cr lf... Γραμμές Κεφαλίδων cr Κεφαλίδα lf sp Τιμή cr lf Κείμενο Μηνύματος HTTP/1.x 200 OK Date: Sat, 08 Sep 2017 17:12:39 GMT Server: Apache Last-Modified: Sat, 08 Sep 2007 17:12:16 GMT Accept-Ranges: bytes Cache-Control: max-age=0 Expires: Sat, 08 Sep 2017 17:12:39 GMT Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 32 Content-Type: text/plain; charset=windows-1253 Connection: keep-alive Hello world! 13

Απόκριση συστήματος: κωδικός κατάστασης cr Έκδοση sp Κωδικός Κατάστασης sp Φράση cr lf Κεφαλίδα lf sp Τιμή cr lf... Γραμμές Κεφαλίδων Ακέραιος αριθμός τριών δεκαδικών ψηφίων Κεφαλίδα sp Τιμή cr lf Το πρώτο ψηφίο καθορίζει την κατηγορία της απάντησης: 1xx: μήνυμα πληροφορίας HTTP/1.x 200 OK Date: Sat, 08 Sep 2017 17:12:39 GMT Server: Apache Last-Modified: Sat, 08 Sep 2007 17:12:16 GMT Κείμενο Μηνύματος Accept-Ranges: bytes 2xx: κατάσταση επιτυχούς επεξεργασίας Cache-Control: max-age=0 Expires: Sat, 08 Sep 2017 17:12:39 GMT Vary: Accept-Encoding 3xx: προώθηση του Client σε διαφορετικό URL Content-Encoding: gzip Content-Length: 32 4xx: σφάλμα προερχόμενο από τον Client Content-Type: text/plain; charset=windows-1253 Connection: keep-alive 5xx: σφάλμα προερχόμενο Hello world! από τον Server 14

Τεχνολογίες Διαδικτύου μέρος #2 Hyper Text Markup Language (HTML) 15

Δομή ιστοσελίδας 16

Βασικές ετικέτες html <h1> </h1>, <h2>,... <h6> Επικεφαλίδα <p> </p> Παράγραφος <ul> </ul> Μη διατεταγμένη λίστα <ol> </ol> Διατεταγμένη λίστα (1.,2.,3. ) <div> </div> Oρισμός μπλοκ κειμένου, με αλλαγή γραμμής στο τέλος <span> </span> ορισμός μικρής περιοχής κειμένου <hr> οριζόντια γραμμή (horizontal ruler) <br> break, αλλαγή γραμμής 17

Διαμόρφωση πινάκων 18

Εισαγωγή εικόνας-ήχου-βίντεο <img src="url" width="x" height="y" alt="abc" title="defg" /> <audio src= "url" autoplay loop > controls <video src="walking_video.mp4" > </video> 19

Παράδειγμα εισαγωγή εικόνας - ήχου 20

Υπερσύνδεσμοι <a> (άγκυρα) Ετικέτα που επιτρέπει τη διασύνδεση μέσω υπερσυνδέσμου (href) <a href= http://www.ece.upatras.gr > Visit us </a> 21

Φόρμες 23

Φόρμες 24

Javascript (JS): η γλώσσα προγραμματισμού στον browser Δεν θα ασχοληθούμε σε αυτή την ενότητα, βλέπε μάθημα 5ου έτους. 25

Τεχνολογίες Διαδικτύου μέρος #3 Προγραμματισμός στον server με Python 26

Αρχιτεκτονική wsgi (Web Server Gateway Interface) client server browser GET / HTTP/1.0 HTTP/1.0 200 OK Web server process WSGI request WSGI response Environment variables WSGI script (Python) data base HTML CSS JS 27

Παράδειγμα wsgi Η συνάρτηση αυτή παίρνει 2 ορίσματα Το environ που περιέχει πληροφορίες από το περιβάλλον του web server και την start_response που είναι η συνάρτηση που θα κληθεί για να λάβει ο server την κεφαλίδα της απάντησης Η start_response παίρνει 2 ορίσματα: HTTP response code και λίστα από header names/values. Δημιουργεί web server με socket localhost, 8080, που καλεί την app όταν δέχεται αιτήματα Η συνάρτηση επιστρέφει το περιεχόμενο του μηνύματος HTTP (εδώ κώδικας HTML), ως ακολουθία από byte strings. 28

Παράδειγμα wsgi /η παράμετρος environ Η environ είναι ένα λεξικό με τις παραμέτρους του περιβάλλοντος του web server, μπορούμε να τον τυπώσουμε στην html

Άσκηση 1 Γράψτε ένα πρόγραμμα που διαβάζει ένα λεξικό με ονόματα και ηλικίες και τυπώνει σε πίνακα τα ονόματα και τις αντίστοιχες ηλικίες τους Άσκηση 2 Γράψτε ένα πρόγραμμα που τυπώνει τους 50 μικρότερους πρώτους αριθμούς. Οι πρώτοι αρχίζουν από 2,3,5... 30

Τεχνολογίες Διαδικτύου μέρος #4 Διαδικτυακές εφαρμογές Python 31

Παράδειγμα wsgi /πολλαπλές σελίδες Έστω ότι θέλουμε ο server να εξυπηρετήσει 2 σελίδες: την /index.html και την /one.html για να γίνει αυτό αρκεί να εξετάσουμε την τιμή της παραμέτρου PATH_INFO στο λεξικό environ και ανάλογα να επιστρέψουμε την κατάλληλη σελίδα 32

Παράδειγμα wsgi /φόρμες Το περιεχόμενο της φόρμας (ζευγάρια μεταβλητής/ τιμής) γίνονται μέρος του URL, και μεταφέρονται στην κεφαλίδα του HTTP χωρισμένα με &. /?first=nikos&last=nikolaou <form method=get> <ul> <li>όνομα: <input name='first'></li> <li>επίθετο: <input name='last'></li> </ul> <input type='submit' value='υποβολή'> </form> method=post Το περιεχόμενο της φόρμας (ζευγάρια μεταβλητής/ τιμής) μεταφέρονται στο σώμα του μηνύματος HTTP χωρισμένα με & 33

Παράδειγμα wsgi /φόρμες GET Έστω ότι θέλουμε ο server να εξυπηρετήσει μία φόρμα, τα στοιχεία της οποίας υποβάλλονται στον εξυπηρετητή με τη μέθοδο GET Τα στοιχεία μεταφέρονται στον server μέσω του URL με τη μορφή query string: Πχ. http://localhost:8080/?first=nikos&last=nikolaou Ευρίσκονται στην παράμετρο environ[ query_string ] 34

Παράδειγμα wsgi /φόρμες GET Αντικαθιστά το %s στο αρχείο index.html με το περιεχόμενο του στοιχείου του λεξικού environ 35

Παράδειγμα wsgi /φόρμες POST Στην περίπτωση αυτή ελέγχουμε αν το μήνυμα περιέχει περιεχόμενο, δηλαδή η CONTENT_LENGTH έχει τιμή διάφορη του 0. Τότε διαβάζουμε από την environ[ wsgi.input ] το περιεχόμενό της. http://pwp.stevecassidy.net/wsgi/more-wsgi.html 36

Παράδειγμα επεξεργασίας στοιχείων Φόρμας με χρήση του cgi To module cgi είναι ένα παλιότερο πρωτόκολλο που χρησιμεύει για σύνδεση προγραμμάτων python με web server. Η βιβλιοθήκη cgi περιέχει το αντικείμενο FieldStorage το οποίο όταν κληθεί ως εξής: FieldStorage(fp=environ['wsgi.input'], environ=environ, keep_blank_values=1) Μας παρέχει με κλήση της μεθόδου getvalue() πρόσβαση στα στοιχεία της φόρμας, είτε η φόρμα έχει κληθεί με POST είτε με GET http://pwp.stevecassidy.net/wsgi/more-wsgi.html 37

Παράδειγμα επεξεργασίας στοιχείων Φόρμας με χρήση του cgi

Web frameworks Λογισμικά που έχουν σκοπό την υποστήριξη ανάπτυξης εφαρμογών web, βασισμένων σε τυπικές εργασίες που απαιτούνται. Περιλαμβάνουν βιβλιοθήκες για σύνδεση με βάσεις δεδομένων (συχνά με τη μορφή ORM object-relational mapping), βιβλιοθήκες για templating (διαμόρφωση περιεχομένου ιστοσελίδων), διαχείριση session, URL mapping, ενώ φροντίζουν για θέματα ασφάλειας, cashing κλπ. PHP: CakePHP, Yii2, Lavarel, Synfony Python: Django, TurboGears, Flask, CherryPy 39

ένα web μframework για την Python Δημιουργήθηκε από τον Αυστριακό Armin Ronacher (2010). Εξαιρετικά απλό, κατάλληλο για εισαγωγή στα frameworks. Χρησιμοποιεί την template engine Jinja2, τη βιβλιοθήκη Werkzeug για υλοποίηση της WSGI, και την ORM (Object-Relational Mapping) βιβλιοθήκη SQLAlchemy για σύνδεση στη βάση δεδομένων. 40

Μεγάλες ιστοσελίδες όπως το pinterest instagram, mozilla κλπ έχουν βασιστεί στο django. Πλούσια βιβλιογραφία Το πιο δημοφιλές python web framework Πρώτη έκδοση το 2005. Χρησιμοποιεί την WSGI για σύνδεση με Apache ή NGINX Σύνδεση με βάσεις δεδομένων : PostgreSQL, MySQL, SQLite, Oracle. Fork django-nonrel για μή SQL βάσεις δεδομένων 41

Άσκηση 3 Να κατασκευαστεί φόρμα που όταν υποβάλλεται να παρουσιάζει τα δεδομένα υπό μορφή πίνακα. 42

Άσκηση 4. Να σχεδιάσετε μια σελίδα, στην οποία ο χρήστης δίνει μια τιμή θερμοκρασίας, και επιλέγει κλίμακα (Κελσίου, Φαρενάιτ ή Κέλβιν). Η θερμοκρασία υπολογίζεται και εμφανίζεται η τιμή της στις άλλες 2 κλίμακες. Επιλογή κλίμακας είτε με radiobutton είτε listbox 43

Θέματα ατομικών εργασιών 1. Να κάνετε συγκριτική μελέτη των 5 κυριότερων web framework της python. 2. Να περιγράψετε την τεχνολογία ORM και να δώσετε παραδείγματα εφαρμογής της σε python web frameworks. 3. Να αναφέρετε τα κυριότερα πλεονεκτήματα της Python έναντι άλλων γλωσσών προγραμματισμού στην πλευρά του εξυπηρετητή διαδικτυακών εφαρμογών. 4. Να περιγράψετε την τεχνολογία templating και να δώσετε παραδείγματα εφαρμογής της σε python web frameworks. 5. Να περιγράψετε την βασική αρχιτεκτονική του flask μέσω ενός παραδείγματος χρήσης του framework. 44