Τεχνολογίες Web Απαραίτητες γνώσεις για την υλοποίηση της άσκησης

2 Client – Server μοντέλο στο Web (1) Requests Responses Client Server • Client: Συνήθως ο web browser (IE, Mozilla Firefox κλπ) • Server: Ένας web server (Apache, IIS κλπ) • Ο τρόπος επικοινωνίας μεταξύ client και server καθορίζεται από το πρωτόκολλο HTTP (Hypertext Transfer Protocol)

3 Client – Server μοντέλο στο Web (2) – “3 TIER MODEL” Client Server Requests Responses Data Data Warehouse • Data Warehouse: Κάποιο DBMS (SQL, XML κλπ) • Ο server πριν απαντήσει, χρειάζεται να πάρει δεδομένα από το DMBS, να τα επεξεργαστεί, τα μορφοποιεί κατάλληλα και στέλνει στο client Αναπαράσταση Δεδομένων ΕπεξεργασίαΑποθήκευση

4 Περιεχόμενα HTML Javascript PHP

5 HTML • HyperText Markup Language • Είναι η γλώσσα που καταλαβαίνουν οι web browsers για την αναπαράσταση των δεδομένων • Βασικό χαρακτηριστικό: η διασύνδεση με αλλά HTML έγγραφα

6 HTML Κείμενο 1 Κείμενο 2Κείμενο 3 Κείμενο 4Κείμενο 5

7 HTML – Σύνταξη • Βασικό δομικό στοιχείο η ετικέτα (tag) • Κάθε διακριτικό της HTML περικλείεται σε <> • Τα περισσότερα διακριτικά οµαδοποιούνται σε ζεύγη. Το πρώτο δείχνει την αρχή και το δεύτερο το τέλος επίδρασης του συγκεκριµένου διακριτικού. • Πχ …, Σχόλια:

8 Δομή σελίδας HTML Ο τίτλος του κειμένου Το κυρίως κείμενο

9 Tag Attributes • Δίνουμε επιπλέον χαρακτηριστικά σε κάποιο tag. • Το γράφουμε μέσα στον ορισμό του tag • • Πχ …

10 Απλό Παράδειγμα Παράδειγμα σελίδας HTML Πολύ Απλό Παράδειγμα 1η Παράγραφος 2η Παράγραφος

11 Τίτλος σελίδας Παρουσίαση

12 Tags Μορφοποίησης Επικεφαλίδα 1 Επικεφαλίδα 2 Επικεφαλίδα 3 Επικεφαλίδα 4 Επικεφαλίδα 5 Επικεφαλίδα 6 Έντονα γράμματα Πλάγια γράμματα Υπογραμμισμένα γράμματα Αλλαγή γραμμής Νέα Παράγραφος Στοίχιση στο κέντρο της σελίδας

13 Λίστες (1) item1 item2 item1 item2 item1 item2

14 Λίστες (2) Λίστα με Αρίθμηση Πρώτο θέµα Ορισµός 1ου θέµατος Δεύτερο θέµα Ορισµός 2ου θέµατος

15 Links – Το tag (1) Κείμενο • adrress : • Αναφορά σε αρχείο στο τοπικό σύστημα • Σχετικά: “./index.html”, “../pics/hello.html” • Απόλυτα: “/var/www/mysite/index.html”, “C:\program files\...” (BAD PRACTICE) • URL • “

16 Links – Το tag (2) • Θέλω να πάω σε συγκεκριμένο σημείο μέσα στο έγγραφο • Ονομάζω το σημείο • Titles • Φτιάχνω το link προς το σημείο • Πηγαίνετε στους Τίτλους • … • Attribute target: το link θα ανοίξει σε νέο παράθυρο •

17 Εικόνες • Tag • Δείτε •

18 Πίνακες Πίνακας:  Περιεχόμενα κελιού 1,1 Περιεχόμενα κελιού 1,2 Περιεχόμενα κελιού 2,1 Περιεχόμενα κελιού 2,2 Δείτε

19 Πίνακες <table width="100%" border="2" cellpadding="12" cellspacing="5" bordercolor="#ECE9D8"> hello hello hello

20 Πίνακες Όλο αυτό έχει φτιαχτεί με πίνακες

21 Άλλα στοιχεία της HTML • Οριζόντια γραμμή:  • Στοίχιση κειμένου:  Το κείμενο θα εμφανιστεί όπως είναι στοιχισμένο. • Ειδικοί χαρακτήρες:  >>  <<  &&  “"  (κενό)

22 Πλαίσια This web browser does not support frames.

23 Παράδειγμα

24 Φόρμες Χρησιμοποιούνται για την αποστολή πληροφορίας από το client προς τον server. Tag (και ) Attributes  Action: ορίζει σε ποια σελίδα θέλουμε να στείλουμε τα δεδομένα  Method: ποια μέθοδο του πρωτοκόλλου HTTP θα χρησιμοποιήσουμε για την αποστολή των δεδομένων - GET ή POST (θα αναλυθεί παρακάτω)  Μέσα στη φόρμα βάζουμε πεδία, όπως textboxes με το tag

25 Στοιχεία φόρμας input  text  password  checkbox  radio  button  submit  reset textarea select  multiple  option

26 Φόρμες - Input text:  password:  checkbox:  radio: 

27 Φόρμες – Input (2) button:  submit:  reset: 

28 Φόρμες – Άλλα στοιχεία textarea:  Αυτό είναι ένα πεδίο Textarea select:  option 1 option 2 select (πολλαπλές τιμές):  multiple option 1 multiple option 2 multiple option 3

29 Παράδειγμα Textbox: Password: Η τιμή θα γίνει "yes". Επέλεξε yes Επέλεξε no Αυτό είναι ένα πεδίο Textarea option 1 option 2 multiple option 1 multiple option 2 multiple option 3

30 Παράδειγμα

31 HTTP GET/POST (1) • Για κάθε πεδίο της φόρμας, ο browser στέλνει στο server ζεύγη της μορφής • Όνομα_πεδίου=τιμή • Πχ αν έχω ένα textbox :, και βάλω την τιμή Hello • myTextBox=Hello

32 HTTP GET/POST (2) Ποια η διαφορά GET και POST ? • POST: τα δεδομένα στέλνονται μέσα στα ΗΤΤP μηνύματα που στέλνει ο browser, δεν τα βλέπει ο χρήστης • GET: τα δεδομένα προστίθενται στο url • hp?anno=1725

33 Μερικές οδηγίες Χρησιμοποιείτε το:  Edit (ή δεξί κλικ στη σελίδα) -> View Source Στην html δεν γίνεται διάκριση πεζών και κεφαλαίων γραμμάτων μέσα στα tags. Δηλαδή τα:  Πλάγια γράμματα είναι ισοδύναμα.

34 Περιεχόμενα HTML Javascript PHP

35 Javascript • • Scripting γλώσσα – no compilation • Χρησιμοποιείται για να δώσει διαδραστικότητα μεταξύ χρήστη και HTML εγγράφου • Εκτελείται στο client από το browser (“κατεβαίνει” μαζί με το HTML έγγραφο - ζητήματα ασφάλειας) • Ενσωματώνεται σε HTML σελίδες με τη χρήση του διακριτικού:  κώδικας

36 Παράδειγμα Συνάρτησης function fact (n) { if (n <= 0) return 1 return n * fact(n-1) } alert("fact(10)="+fact(10))  Στην javascript δεν υπάρχει αυστηρός ορισμός τύπων

37 Πότε/που χρησιμοποιείται η Javascript? Η Javascript συνήθως χρησιμοποιείται:  για να επεξεργαστεί κάποιο συμβάν που έγινε σε πεδίο φόρμας  για να καταχωρήσει μια φόρμα  για να κάνει απλούς ελέγχους σε πεδία φόρμας

38 Βασικά Συμβάντα onchangeΈνα πεδίο µιας φόρµας χάνει την εστίαση και η τιµή του έχει µεταβληθεί. onclickΈχει γίνει κλικ σε ένα αντικείµενο. ondbclickΈχει γίνει διπλό-κλικ σε ένα αντικείµενο. onerrorΗ µεταφορά ενός εγγράφου ή εικόνας οδηγεί σε σφάλµα. onfocusΈνα παράθυρο ή πλαίσιο ή frameset ή αντικείµενο φόρµας λαµβάνει την εστίαση. onkeydownΟ χρήστης πιέζει και κρατά πιεσµένο ένα πλήκτρο. onkeypressΟ χρήστης πιέζει και απελευθερώνει ένα πλήκτρο. onkeyupΟ χρήστης απελευθερώνει ένα πλήκτρο.

39 Βασικά Συμβάντα - 2 onmousedownΟ χρήστης πιέζει και κρατά πιεσµένο το πλήκτρο του ποντικιού. onmousemoveΟ χρήστης µετακινεί το ποντίκι. onmouseoutΟ δείκτης του ποντικιού εξέρχεται από µια περιοχή εικόνας ή συνδέσµου. onmouseoverΟ δείκτης του ποντικιού περνά πάνω από ένα αντικείµενο. onmouseupΟ χρήστης απελευθερώνει το πλήκτρο του ποντικιού. onresetΟ χρήστης απελευθερώνει το πλήκτρο του ποντικιού. onselectΟ χρήστης επιλέγει κείµενο σε ένα πλαίσιο εισαγωγής κειµένου (µιας ή πολλαπλών γραµµών). onsubmitΟ χρήστης αποστέλλει τη φόρµα.

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

41 Παραδείγματα (2) • • Η συνάρτηση submit() είναι ορισμένη μέσα στο έγγραφο. Μπορεί να ελέγχει όλα τα πεδία μιας φόρμας. • Παίρνουμε τα στοιχεία με συναρτήσεις getelementbyName(‘όνομα_πεδίου_φόρμας’).value()

42 Παραδείγματα (3) function submit () { var price = parseInt(document.testform.price_txtBox.value); if ( price < 0 ) { retval = false; } retrun retval; } … Price:

43 Περιεχόμενα HTML Javascript PHP

44 PHP • Hypertext Preprocessor ( • Γενικά, είναι μια scripting γλώσσα (μπορείτε να γράψετε php προγράμματα που εκτελούνται στο pc σας) • Στην περίπτωση των web εφαρμογών εκτελείται στη μεριά του server • Σκοπός, να παράγουμε με δυναμικό τρόπο τις HTML σελίδες (πχ, δείξε μου τι καιρό κάνει τώρα…) • Δημιουργία εφαρμογών και δυνατότητα αλληλεπίδρασης μέσα από web interface - το ΑΡΙ της PHP, σε μορφή chm στα ελληνικά

45 PHP Server Requests Responses Data Data Warehouse 1.O browser ζητά δεδομένα από το web server μέσω HTML forms 2.O web server εκτελεί το php κωδικα 3.Ο web server ενδέχεται ζητήσει δεδομένα από κάποια άλλη πηγή (3 tier) 4.Τα αποτελέσματα μορφοποιούνται σε HTML στο χρόνο εκτέλεσης και στέλνονται στο client

46 PHP 1. Ο web server έχει το κατάλληλο module για να εκτελέσει php κώδικα 2. Οι σελίδες έχουν κατάληξη.php 3. Γράφω κώδικα php μέσα στην html ή φτιάχνω βιβλιοθήκες σε ξεχωριστό αρχείο και τις εισάγω στην σελίδα

47 PHP - Variables • Οι μεταβλητές δεν έχουν αυστηρούς τύπους • Κάθε μεταβλητή ξεκινά με το χαρακτήρα $ • $myVar = “hello world!”; • Εκτύπωση μεταβλήτων • echo $myVar;

48 PHP - Variables

49 Παράδειγμα <?php $myVar = “hello world!”; echo $myVar; echo “ ".$myVar." "; ?>

50 Arrays "bar", 12 => true); echo $arr["foo"]; // bar echo $arr[12]; // 1 $colors = array('red', 'blue', 'green', 'yellow'); foreach ($colors as $color) { echo "Do you like $color?\n"; } /* output: Do you like red? Do you like blue? Do you like green? Do you like yellow? */ ?>

51 PHP – Δομές ελέγχου • If if ($a > $b) { print "a is bigger than b"; } elseif ($a == $b) { print "a is equal to b"; } else { print "a is smaller than b"; } • While $i = 1; while ($i <= 10): print $i; $i++; endwhile;

52 PHP - Functions

53 Διάβασμα μεταβλητών φόρμας Μέθοδος GET:  $_GET[“(όνομα μεταβλητής)”] Μέθοδος POST:  $_POST[“(όνομα μεταβλητής)”]

54 Παράδειγμα Name: Age: Welcome You are years old! Καταχώρηση Φόρμας

55 Προσπέλαση Αρχείων Άνοιγμα Αρχείου:  Διάβασμα Αρχείου:  while(!feof($file)) { echo fgets($file). " "; } Κλείσιμο Αρχείου:  fclose($file);

56 Sessions • Χρειάζεται να κρατάμε πληροφορία για το ιστορικό του client • Έχει κάνει login? • Με τι username? • Έχει προϊόντα στο καλάθι αγορών του? • Ο web server διατηρεί για κάθε client (Ip address/agent) ένα ξεχωριστό session με κάποιο ID • Μπορούμε να αποθηκεύουμε πληροφορία (μεταβλητές) στο session • To πως δουλεύει κρύβεται από τον προγραμματιστή • Απλά το χρησιμοποιούμε

57 Sessions 1. Κάνουμε start το session (πχ κατά την είσοδο του χρήστη μετά το login) session_start(); 2. Αποθηκεύουμε μια μεταβλητή $_SESSION['views']=1; 3. Ελέγχουμε αν υπάρχει μια μεταβλητή στο session if(isset($_SESSION['cart'])) 4. Αφαίρεση μια μεταβλητής από το session unset($_SESSION['views']); 5. Κλείσιμο του session (πχ κατά το log out) session_destroy();

58 Χρήσιμοι Σύνδεσμοι

59 Εργαλεία • bundle install, Apache, PHP etc • Appserv • • WAMP • • XAMP • • NVU (html editor) • • PHP Text DB API •