Σεσνολογικό Δκπαιδεςηικό Ίδπςμα Κπήηηρ σολή Σεσνολογικών Δθαπμογών Σμήμα Μησανικών Πληποθοπικήρ

Σεσνολογικό Δκπαιδεςηικό Ίδπςμα Κπήηηρ σολή Σεσνολογικών Δθαπμογών Σμήμα Μησανικών Πληποθοπικήρ ΠΣΤΥΙΑΚΗ ΔΡΓΑΙΑ ΚΑΣΑΚΔΤΗ ΙΣΟΔΛΙΓΑ ΜΔ ΠΡΟΓΝΩΣΙΚΑ ΚΙΝΟ ΚΑΙ ΣΑΣΙΣΙΚΔ ΤΠΗΡΔΙΔ ΚΟΚΚΙΝΑΚΗ ΔΤΑΓΓΔΛΟ ΑΜ : 3744 ΡΔΘΔΜΙΩΣΑΚΗ ΠΑΝΣΔΛΗ ΑΜ : 2764 ΔΠΙΒΛΔΠΩΝ ΚΑΘΗΓΗΣΗ : ΠΑΠΑΓΑΚΗ ΝΙΚΟ -ΗΡΑΚΛΔΙΟ ΦΔΒΡΟΤΑΡΙΟ 2016-

ΔΤΥΑΡΙΣΙΔ Δπραξηζηψ ηνπο γνλείο κνπ γηα ηελ ππνζηήξημε ηνπο, επίζεο ηνλ επηβιέπνληα θαζεγεηή Dr.Παπαδάθε Νίθν γηα ηελ βνήζεηα θαη ηελ θαζνδήγεζε ηνπ, θαη ηνλ ζπλάδειθν κνπ Κνθθηλάθε Βαγγέιε γηα ηελ ζπλεξγαζία ηνπ θαη φζνπο κε ζηήξημαλ. Δπίζεο ζα ήζεια λα επραξηζηήζσ ηνπο θαζεγεηέο ηνπ Α.ΣΔΙ γηα ηηο γλψζεηο πνπ κνπ πξφζθεξαλ φια απηά ηα ρξφληα. Ρεζεκησηάθεο Παληειήο Θεξκέο επραξηζηίεο ζηνλ επηβιέπσλ θαζεγεηή Dr.Παπαδάθε Νίθν γηα ηελ θαζνδήγεζε θαη ηελ ππνζηήξημε πνπ καο πξφζθεξε γηα ηελ εθπφλεζε ηεο πηπρηαθήο εξγαζίαο. Δπίζεο επραξηζηψ ηνπο γνλείο κνπ γηα ηελ ππνζηήξημε θαη ηελ πνιχηηκε βνήζεηα ηνπο πξνθεηκέλνπ λα θέξσ εηο πέξαο ηηο ζπνπδέο κνπ. Δπραξηζηψ ηνλ ζπλάδειθν κνπ Ρεζεκησηάθε Παληειή γηα ηελ ζπλεξγαζία ηνπ ζηελ πηπρηαθή καο. Δπραξηζηψ φζνπο θαζεγεηέο απφ ηελ δεπηεξνβάζκηα εθπαίδεπζε κέρξη θαη ζήκεξα πνπ κνπ πξφζθεξαλ ηηο γλψζεηο ηνπο αιιά θαη ζπκβνπιέο πνπ απνδείρηεθαλ θαη απνδεηθλχνληαη ρξήζηκεο ζηελ δσή κνπ. Σέινο ζέισ λα επραξηζηήζσ ηνπο θίινπο κνπ πνπ κε ζηεξίμαλ εζηθά. Κνθθηλάθεο Δπάγγεινο Σελίδα -1

Abstract The purpose or our thesis is the creation of a website that gives on internet users the possibility to see live results Kino, statistics and results of previous draws with the possibility of choice the number of the draw. The members of this website will have the opportunity to test combinations and save history draws on this account. To become someone member needs to register on our site or make login with Facebook. Σελίδα -2

χλνςε θνπφο ηεο πηπρηαθήο εξγαζίαο απηήο είλαη ε δεκηνπξγία κηαο ηζηνζειίδαο πνπ δίλεη ζηνπο ρξήζηεο δηαδηθηχνπ ηελ δπλαηφηεηα λα δνπλ live απνηειέζκαηα Kino,ζηαηηζηηθέο θαη απνηειέζκαηα πξνεγνχκελσλ θιεξψζεσλ κε δπλαηφηεηα επηινγήο αξηζκνχ θιήξσζεο. Σα κέιε ηεο ηζηνζειίδαο ζα έρνπλ ηε δπλαηφηεηα λα δνθηκάζνπλ ζπλδπαζκφ θαη λα απνζεθεχζνπλ ην ηζηνξηθφ ησλ θιεξψζεσλ ζην ινγαξηαζκφ ηνπο.γηα λα γίλεη θάπνηνο κέινο ρξεηάδεηαη λα θάλεη εγγξαθή ζην site καο ε λα θάλεη login κέζσ Facebook. Σελίδα -3

ΠΙΝΑΚΑ ΠΔΡΙΔΥΟΜΔΝΩΝ Δπραξηζηίεο.. 1 Abstract 2 χλνςε..3 Κεθάιαην 1 : Δηζαγσγή 1.1: Πεξίιεςε 1.2: Κίλεηξν γηα ηελ δηεμαγσγή ηεο εξγαζίαο 1.3: θνπφο θαη ζηφρνη πηπρηαθήο 1.4: Γνκή εξγαζίαο Κεθάιαην 2: Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ 2.1: Xampp 2.1.1 Apache 2.1.2 MYSQL 2.1.3 PHP 2.1.4 PHPMYADMIN 2.2:html 2.3 css 2.4 javascript-jquery-ajax 2.5: XML Κεθάιαην 3: Μεζνδνινγία 3.1: Ρπζκίζεηο βάζεο δεδνκέλσλ 3.2: Πξνγξάκκαηα 3.3: Γνκή εθαξκνγήο Κεθάιαην 4 : ρεδίαζε θαη θαηαζθεπή Ιζηνζειίδαο 4.1:Δηζαγσγή 4.2: Δθθίλεζε Δθαξκνγήο 4.3: Αξρηθή ειίδα 4.3.1: Φφξκα Δγγξαθήο 4.3.2: Φφξκα Δηζφδνπ 4.3.3: Δίζνδν κε Facebook 4.3.4: Σειεπηαία θιήξσζε 4.3.5: Καιχηεξνη Υεηξφηεξνη Αξηζκνί Σελίδα -4

4.3.6: Αξηζκνί κε θαζπζηέξεζε 4.4: ηαηηζηηθέο ειίδα 4.5: Γνθηκή ζπλδπαζκψλ 4.6: ρεδηάγξακκα ηεο ηζηνζειίδαο-γηαδηθαζία Υξήζεο Κεθάιαην 5: Μειινληηθή ρξήζε θαη επέθηαζε 5.1 Απαηηήζεηο ζπζηήκαηνο Βηβιηνγξαθεία Σελίδα -5

Κεθάλαιο 1 Διζαγυγή 1.1:Πεπίλητη ηελ Πηπρηαθή Δξγαζία παξνπζηάδεηαη κηα ηζηνζειίδα πνπ παξνπζηάδεη ην ηπρεξφ παηρλίδη ΚΙΝΟ απφ ηνλ ΟΠΑΠ πνπ βξίζθεηαη ζε live εμέιημε. Σα απνηειέζκαηα δηαζεησληαη απφ ηνλ opap ζε κνξθή XML έλα ιεπηφ κεηα αθφηνπ παηρηεί ε θιεξσζε.με ηε ρξήζε ηεο γιψζζαο PHP δηαβάδνπκε ηα δεδνκέλα ηνπ XML θαη ηα εκθαλίδνπκε ζε κνξθή HTML θαη ηνπο δίλνπκε styles κεζσ CSS. Με ηα απνηειέζκαηα ν ρξήζηεο ζα κπνξεί λα : Παξαθνινπζήζεη ζε live εμέιημε ηελ ηειεπηαία θιήξσζε. Να δεη εκεξήζηα ηνπο θαιπηέξνπο θαη ηνπο ρεηξνηέξνπο αξηζκνχο Να δεη ηνπο αξηζκνχο πνπ έρνπλ θαζπζηεξήζεη λα βγνπλ δεκηνπξγήζεη ινγαξηαζκφ κέζσ θφξκαο ε κέζσ login with Facebook. δνθηκάζεη ζπλδπαζκφ θαη λα απνζεθεχζεη αλ έρεη θαλεη είζνδν αλαδήηεζε θιήξσζεο βάζε ηνλ αξηζκφ ηεο Η εθαξκνγή απηή έρεη πξνγξακκαηηζηεί κε ηελ γιψζζα PHP θαη γηα ηελ δηαρείξηζε ηεο βάζεο δεδνκέλσλ MYSQL.Σν πεξηερφκελν ηεο ηζηνζειίδαο HTML5 γηα ην style CSS3 θαη JAVASCRIPT- JQUERY γηα ηνλ πξνγξακκαηηζκφ ηεο ζπκπεξηθνξάο ηεο ηζηνζειίδαο. Η ηζηνζειίδα είλαη responsive. Ο OPAP παξέρεη θάπνηα web services γηα ηα απνηειέζκαηα ησλ παηρληδηψλ ηνπο. Σα web services ηνπ OPAP εηλαη κηα ηερλνινγία πνπ επηηξέπεη ζηηο εθαξκνγέο λα επηθνηλσλνχλ κεηαμχ ηνπο αλεμαξηήησο πιαηθφξκαο θαη γιψζζαο πξνγξακκαηηζκνχ. Σα services πνπ ρξεζηκνπνηήζακε είλαη: Απνηειέζκαηα ηεο πην πξφζθαηεο θιήξσζεο ε δηαγσληζκνχ Απνηειέζκαηα γηα ζπγθεθξηκέλε θιήξσζε ε δηαγσληζκφ Απνηειέζκαηα κε βάζεη εκεξνκελίαο Ο ρξήζηεο έρεη ηε δπλαηφηεηα εγγξαθήο ζηελ ηζηνζειίδα ε κέζσ login κε Facebook.Αθνχ έρεη θάλεη ζχλδεζε ζηελ ηζηνζειίδα ζην ηκήκα δνθηκήο ζπλδπαζκνχ κπνξεί λα απνζεθεχζεη ζηε βαζε δεδνκέλσλ ηελ δνθηκή ηνπ. Έπεηηα ε εθαξκνγή ζα θξαηάεη ηζηνξηθφ ησλ θιεξψζεσλ πνπ έρεη παίμεη. Σέινο ζηελ ελφηεηα ζηαηηζηηθέο ν ρξήζηεο έρεη ηε δπλαηφηεηα επηιέγνληαο ηελ εκεξνκελία ηελ εκθάληζε εκεξήζηνπ γξαθήκαηνο κε ζηαηηζηηθέο ππεξεζηεο,εκθαληζε φισλ ησλ εκεξήζησλ θιεξψζεσλ φπσο ηνπο θαιχηεξνπο θαη ηνπο ρεηξφηεξνπο αξηζκνχο. Σελίδα -6

1.2: Κίνηηπο για ηην διεξαγυγή ηηρ επγαζίαρ Πνιινί παίρηεο ηνπ Κηλν επηζπκνχλ λα δνπλ ηελ θιήξσζε Live απφ ην δηαδίθηπν φπσο επίζεο φπνην αξηζκφ θιεξψζεσλ έρνπλ παίμεη θαζψο θαη λα δνθηκάζνπλ ζπλδπαζκνχο θαη λα ηνπο απνζεθεχνπλ γηα κειινληηθή ρξεζε.απηεο νη δπλαηφηεηεο πξαγκαηνπνηνχληαη απφ ηελ ηζηνζειίδα καο κε ζθνπφ ηελ δηεπθφιπλζε ηνπ παίρηε λα θάλεη φια ηα παξαπάλσ: 1.3 : κοπόρ και ζηόσοι πηςσιακήρ Ο ζθνπφο ηεο πηπρηαθήο είλαη ε δεκηνπξγία website ζπκβαηνί γηα φιεο ηηο ζπζθεπέο (responsive), εκθάληζε απνηειεζκάησλ ηνπ ηπρεξνχ παηρληδηνχ KINO κε live κεηάδνζε ( θαζπζηέξεζε 1 ιεπηφ ) ζε πάλει ηνπο αξηζκνχο ΚΙΝΟ πνπ εκθαλίδνληαη θάζε 5 ιεπηά κέζα ζηα σξάξηα παηρληδηνχ ηνπ ΚΙΝΟ απφ ηνλ ΟΠΑΠ, ε δνθηκή ζπλδπαζκψλ, εκθάληζε ζηαηηζηηθψλ ππεξεζηψλ. ε θακία πεξίπησζε δελ έρνπκε ρξεκαηηθφ θέξδνο απφ ην site. Σν site θηηάρηεθε γηα πηπρηαθή εξγαζία. Σελίδα -7

1.4 Γομή Δπγαζίαρ Κεθάιαην 1 ->Απιή πεξηγξαθή γηα ην ζθνπφ θαη ζηφρν ηεο πηπρηαθήο. Κεθάιαην 2 ->Λίγα ιφγηα ηεο ηερλνινγίεο πνπ ρξεζηκνπνηήζακε, ηζηνξηθά γεγνλνηα-νξηζκνη θαη άιιεο ρξήζεηο Κεθάιαην 3 ->Γνκή εθαξκνγήο κεζνδνινγίαο βάζεο δεδνκέλσλ θαη πξνγξάκκαηα πνπ ρξεζηκνπνηήζεθαλ γηα ηελ πινπνίεζε ηνπ site. Κεθάιαην 4 ->ρεδίαζε, θαηαζθεπή θαη πινπνίεζε ηζηνζειηδαο.γεληθα θαη εμεηδηθεπκέλα πξάγκαηα γηα ηελ δεκηνπξγία ηνπ. ρεδηαγξάκκαηα θαη ηερληθέο. Κεθάιαην 5 ->πκπεξάζκαηα,πιενλεθηήκαηα/κεηνλεθηήκαηα ηεο εθαξκνγήο θαη κειινληηθή ρξεζηκφηεηα. Βηβιηνγξαθία Σελίδα -8

Κεθάλαιο 2 Σεσνολογίερ πος σπηζιμοποιήθηκαν 2.1 XAMPP To XAMPP είλαη έλα πξφγξακκα κε ειεχζεξν ινγηζκηθφ θαη ρσξίο πιαηθφξκα. Σν ίδην πεξηέρεη ην http Apache,ηε βάζε δεδνκέλσλ Μysql θαζψο θαη έλα δηεξκελέα γηα θψδηθα γξακκέλν ζε πξνγξακκαηηζηηθέο γιψζζεο PHP ΚΑΙ Perl ρσξίο θνζηνο. Σν XAMPP ρξεζηκνπνηείηαη γηα ηνλ ζρεδηαζκφ θαη ηελ πινπνίεζε ησλ ηζηνζειίδσλ. Δπηπιένλ, πεξηιακβάλεη ηξία εξγαιεία φπσο PHPMYADMNIN,FILEZILLA SERVER θαη MERCURY MAIL πνπ είλαη πνιχ ρξήζηκα. Δίλαη δσξεάλ απφ ηελ ζειίδα http://www.apachefriends.org θαη είλαη ζπκβαηφ ζε δηάθνξα ιεηηνπξγηθά φπσο Linux windows,solaris,mac.πκπεξηθεξεηαη ζαλ έλαο Web Server ρσξίο θφζηνο ηθαλφο λα θηινμελεί πνιιέο δπλακηθέο ζειίδεο. Σν XAMPP λα αλαβαζκηζηεί ζε λέεο εθδφζεηο πνπ εμππεξεηνχλ ηζηνζειίδεο http apache,ηεο mysql,php θαη perl. Πεξηέρεη ηα παθέηα ΟpenSSL θαη phpmyadmin. Ωζηφζν, γηα λα κπνξεί λα ρξεζηκνπνηεζεφ, πνιιέο ζεκαληηθέο ιεηηνπξγίεο αζθάιεηάο ηνπ έρνπλ απελεξγνπνηεζεί. πρλά ρξεζηκέπεη ζηελ αλάπηπμε ησλ ηζηνζειίδσλ, ππνζηεξίδεη ηε δεκηνπξγία θαη καο βνεζάεη λα δηαρεηξηδφκαζηε βάζεηο δεδνκέλσλ φπσο ε mysql θαη ε sqlite. ε πεξίπησζε εγθαηάζηαζεο ζε ηνπηθφ δίθηπν, ην XAMPP δηαρεηξίδεηαη ηνλ local host ζαλ έλαλ καθξπλφ θφκβν. Απηφο, σζηφζν, κπνξεί λα ζπλδεζεί κε ην πξσηφθνιιν πνπ κεηαθέξεη αξρεία FTP. Η ζχλδεζε κέζσ FTP ζην localhost γίλεηαη κε newuser θαη θσδηθφ xampp. Σέινο, φζνλ αθνξά ηελ MYSQL, ν ρξήζηεο "root" είλαη εθείλνο πνπ δελ ρξεηάδεηαη θάπνην θσδηθφ πξφζβαζεο. To φλνκα XAMPP ζεκαίλεη θαηά ιέμε ηα εμήο : X (ρηαζηή πιαηθφξκα) APache HTTP Server MySQL PHP Perl H εθαξκνγή Έρεη ζρεδηαζηεί έρνληαο σο βάζε ηελ κέγηζηε δπλαηή ιεηηνπξγηθφηεηα δειαδή: Μπνξεί λα εγθαηαζηαζεί ζε νπνηνδήπνηε ιεηηνπξγηθφ ζχζηεκα Πξνζπειάζηκε κέζσ νπνηνδήπνηε πεξηεγεηή Πιήξσο ζπνλδπισηή ζηελ δνκή ηεο Δχθνιε ζηελ δηαρείξηζε απφ ηνλ ππεχζπλν δηδάζθνληα Σελίδα -9

Απαιηήζειρ σαπακηηπιζηικά και εγκαηάζηαζη ηος XAMPP Σν ζπγθεθξηκέλν πξφγξακκα απαηηεί κφλν έλα αξρείν exe ε zip file πνπ ζα θαηεβάζεη θαη λα ηξέμεη επίζεο ε επηκέξνπο δηάξζξσζε ζηνηρείσλ πνπ ζπλζέηνπλ ην Web Server είλαη απαξαίηεηε. Η εθαξκνγή ελεκεξψλεηαη, θάλεη update πνιχ ζπρλά γηα λα εγθαηαζηήζεη ηηο ηειεπηαίεο εθδφζεηο πνπ ίζσο ππάξρνπλ ηνπ Apache/MySQL/PHP θαη Perl.Η εγθαηάζηαζε ηνπ XAMPP απαηηεί ιηγφηεξν ρξφλν απφ ηελ εγθαηάζηαζε θάζε ζηνηρείνπ ηνπ θάζε ζηνηρείνπ ηνπ μερσξηζηά. Πνιιαπιέο δηεξγαζίεο θαη παξνπζίεο ηνπ πξνγξάκκαηνο κπνξνχλ λα ππάξρνπλ ζε έλα ιεηηνπξγηθφ ζχζηεκα θαζψο επίζεο κπνξεί λα γίλεη αληηγξαθή απφ ην έλα ιεηηνπξγηθφ ζχζηεκα ζε έλα άιιν. Γηαζέηεηέ ζε δχν εθδψζεηο ηελ θαλνληθή έθδνζε θαη άιιε κία κηθξφηεξε. Γηα ηελ θαηαζθεπή ηεο ηζηνζειίδαο πνπ πξφθεηηαη λα δεκηνπξγήζνπκε ζα πξέπεη πξψηα λα θαηεβάζνπκε έλα ηνπηθφ Server φπσο ν Xampp.Μπνξνπκε λα θαηεβάζνπκε ην ζπγθεθξηκέλν πξφγξακκα είηε απφ ηελ δηεχζπλζε http://www.apachefriends.org/en/xampp.html είηε απφ θάπνηα άιιε πεγή. Μφιηο κπνχκε ζηελ ηζηνζειίδα επηιέγνπκε ηελ δεχηεξε επηινγή πνπ έρεη δειαδή <<XAMPP for Windows>> θαη μεθηλάεη ην download φπσο θαίλεηαη ζηελ παξαθάησ εηθφλα. Σελίδα -10

Αθνχ νινθιεξσζεί ην θαηέβαζκα εκθαλίδεηαη έλα αξρείν.exe ηνπ ζπγθεθξηκέλνπ πξνγξάκκαηνο ζηνλ ππνινγηζηή καο εθεί πνπ ην έρνπκε απνζεθεχζεη θαη κπνξνχκε έπεηηα λα πξνρσξήζνπκε ζηελ εγθαηάζηαζε ηνπ. Σελίδα -11

Δπηιέγνπκε next,next θαη έπεηηα φηαλ νινθιεξσζεί ε εγθαηάζηαζε αλνίγνπκε ην εηθνλίδην πνπ έρεη δεκηνπξγεζεί ζηελ επηθάλεηα εξγαζίαο θαη ζα καο εκθαλίζεη ηελ παξαθάησ εηθφλα : Με ην πνπ παηήζνπκε start ζα δεκηνπξγήζεη αξηζηεξά έλα εηθνλίδην φπνπ ζα ιέεη running. Σελίδα -12

Απηφ ζεκαίλεη φηη ν ηνπηθφο Server βξίζθεηαη ζε ιεηηνπξγία. εκαληηθφ ζηνηρείν επίζεο είλαη φηη καδί κε ην XAMPP εγθαζίζηαληαη απηφκαηα θαη ε εθαξκνγή phpmyadmin γηα ηελ δηαρείξηζε βάζεσλ δεδνκέλσλ Mysql.εκαληηθν επίζεο είλαη φηη γηα λα ηξέμνπκε ην πξφγξακκα πξέπεη λα έρνπκε δηθαηψκαηα δηαρεηξηζηή θαη φρη απινχ ρξήζηε. Έπεηηα φηαλ νινθιεξσζνχλ απηά ηα βήκαηα κπνξνχκε λα αλνίμνπκε έλαλ webbrowser θαη λα πεξηεγεζνχκε ζηνλ παξαθάησ ζχλδεζκν: http://localhost ηελ επηινγή status κπνξνχκε λα δηαθξίλνπκε πνηεο ππεξεζίεο είλαη ελεξγνπνηεκέλεο. ηελ επηινγή Security κπνξνχκε λα βάινπκε ηηο πξνηεηλφκελεο ξπζκίζεηο ψζηε λα απμήζνπκε ηελ αζθάιεηα ηνπ Server καο θαη έπεηηα κπνξνχκε λα μεθηλήζνπκε λα δηαρεηξηδφκαζηε ηνλ ηνπηθφ Server Σελίδα -13

Όηαλ ηξέμεη ε ππεξεζία ηνπ APACHE έρνπκε ζεθψζεη ην site καο ζην localhost πνπ βξηζθεηαη ζηνλ θάθειν htdocs ζην XAMPP. Σα default αξρεία ζηνλ θάθειν htdocs Σα αξρεία ηνπ site ζηνλ θάθειν htdocs. Σελίδα -14

2.1.1 Apache Ο Apache είλαη έλαο εμππεξεηεηήο ηνπ παγθνζκίνπ ηζηνχ(web).όπνηε επηζθεπηφκαζηε έλα site ν πινεγφο επηθνηλσλεί κε έλα δηαθνζκεηή http.ν APACHE είλαη απφ ηνπο πην δεκνθηιείο δηφηη ιεηηνπξγεί ζε πνιια ιεηηνπξγηθά ζπζηήκαηα νπσο είλαη ηα windows,to Linux to unix θαη ην mac OS X. Η πξψηε έθδνζε θπθινθφξεζε ην 1993 πνπ ήηαλ γλσζηή σο NCSA HTTPd θαη δεκηνπξγήζεθε απφ ηνλ Robert McCool.Έπαημε ζεκαληηθφ ξφιν ζηελ πξσηαξρηθή εμέιημε ηνπ ίληεξλεη.ήηαλ ε θχξηα επηινγή πνπ έθαλε ηελ εκθάληζε ηεο απέλαληη ζηνλ ζεξβεξ http ηεο Netscape θαη απφ ηφηε ππάξρεη αληαγσληζηηθφηεηα κε άιινπο εμππεξεηεηέο πνπ έρνπλ ζηεξηρηεί ζην Unix γηα ηελ ιεηηνπξγεία ηνπο θαη απφδνζε. O Apache είλαη έλα ειεχζεξν ινγηζκηθφ αλνηρηνχ θψδηθα. Μπνξνχκε λα ην θαηεβάζνπκε δσξεάλ καδί κε ηηο αλαβαζκίζεηο ηνπ. Έρνπκε πξφζβαζε ζην source code θαη κπνξνχκε λα ηνλ ηξνπνπνηήζνπκε αλάινγα κε ηηο αλάγθεο καο. Έηζη κπνξνχκε λα δηακνξθψζνπκε έλα Server φπσο αθξηβψο ζεινπκε.σν 2009 ηα site πνπ έθαλα ρξήζε ηνπ apache μεπέξαζαλ ηα εθαηφ εθαηνκκχξηα. Οη γιψζζεο πξνγξακκαηηζκνχ πνπ ππνζηεξίδεη είλαη ε perl,python θαη php.δρνπκε ηελ δπλαηφηεηα λα ιεηηνπξγνχκε πάλσ απφ έλα webserver φηαλ αληηζηνηρίζνπκε ηνλ θάζε Server κε ηε δηθηά ηνπ ζχξα θαη δηεχζπλζε. πλήζσο ε πξψηε ζχξα πνπ επηιέγεηαη είλαη ε ζχξα 80.Οηαλ ζα ηξέρνπκε ηνλ apache ζα δέρεηαη αηηήζεηο πνπ ζα έρνπλ πξννξηζκφ ηελ ζχξα πνπ έρνπκε νξίζεη θαζψο θαη ηελ δηεχζπλζε πνπ έρνπκε θαηαρσξήζεη. Πεξηέρεη δπν ζεκαληηθά αξρεία θαηαγξαθήο ην access_log θαη ην error_log.σν πξψην αξρείν είλαη ην αξρείν πνπ έρεη φιεο ηηο αηηήζεηο πνπ ζηέιλνληαη απφ ηνπο πειάηεο ζηνπο εμππεξεηεηεο.δπηζεο κπνξνχκε λα πάξνπκε πιεξνθνξίεο απφ ην access_log φπσο ε δηεχζπλζε ip ηνπ client ην φλνκα ηνπ εγγξάθνπ πνπ ζηάιζεθε,λα δνχκε ηελ θαηάζηαζε πνπ βξίζθεηαη ν http θψδηθαο ηελ ψξα πνπ ζπλέβε ε αίηεζε ηνπ αξρεηνπ.σν δεχηεξν αξρείν θαηαγξαθήο error_log πεξηέρεη πιεξνθνξίεο γηα ηελ ιεηηνπξγεία ηνπ Server. πλήζσο φηαλ πξνθχπηεη θάπνην πξφβιεκα ζην Server ζα πξέπεη λα αλαηξέμνπκε ζην αξρείν error_log ψζηε λα εληνπίζνπκε ην πξφβιεκα θαη λα πξνβνχκε ζηελ επίιπζε ηνπ. Σελίδα -15

O apache Web Server καο πξνζθέξεη πνιιέο δπλαηφηεηεο. Δάλ γίλεηαη ρξήζε ζε κεγάια θιηκάθηα ηφηε πξνθχπηνπλ αξθεηά πξνβιήκαηα φπσο γηα παξάδεηγκα ν αξηζκφο ησλ δηεξγαζηψλ κπνξεί λα ππεξθνξηψζεη ηνλ Server επεηδή ππάξρεη φξην κλήκεο θαη ζπλδέζεσλ.γηαηηζνληαη νξηζκέλεο νδεγίεο θαη επεμεγήζεηο γηα ηελ θαιχηεξε θαηαλφεζε,ξχζκηζε θαη πην ζσζηή ιεηηνπξγεία ησλ δηεξγαζηψλ θαη λεκαησλ.γηα λα έρνπκε θαιχηεξε αζθάιεηα κπνξνχκε λα εγθαηαζηήζνπκε ηε βηβιηνζήθε openssl. Έλαο Server ζα πξέπεη λα είλαη ζηαζεξφο λα είλαη δηαζέζηκνο θαη λα έρεη θαιή απνδνηηθνηεηα.γηα απηφ ζα πξέπεη λα επηιέμνπκε ην θαηάιιειν πιηθφ φπνπ ζα έρεη ήδε δνθηκαζηεί απφ άιινπο ψζηε λα ππάξρνπλ νη απαξαίηεηεο ζσζηέο ζπζηαζεηο.καηλνπξγηα πιηθά πνπ έρνπλ βγεη ζηελ αγνξα δελ καο ελδηαθέξνπλ θαη δελ δίλνπκε βάζε πνπ ππφζρνληαη πςειέο απνδφζεηο αιιά ζα πξέπεη λα ζπγθεληξσζνχκε ζηελ πνζφηεηα ηνπ πιηθνχ πνπ έρνπκε ζηε δηάζεζε καο θαζψο θαη ηελ ζπκβαηφηεηα ηνπ πιηθνχ γηα ηελ ζσζηή ιεηηνπξγεία. Έλαο ππνινγηζηήο πνπ έρεη ζαλ ζηφρν λα εμππεξεηεί άιινπο ππνινγηζηέο κπνξεί λα είλαη έλαο Server. Μπνξεί λα ρξεζηκνπνηεζεί απφ άιινπο ππνινγηζηέο πνπ ζα έρνπλ πξφζβαζε ζηε ρξήζε αξρεησλ.θα κπνξνχλ άιινη ππνινγηζηέο λα θάλνπλ θνηλή ρξήζε εθαξκνγψλ πνπ ζα είλαη εγθαηεζηεκέλνη ζην Server γηα θνηλή ρξήζε ησλ ρξεζηψλ άιισλ ππνινγηζηψλ πειαηψλ.μπνξεί λα είλαη Server ειεθηξνληθνχ ηαρπδξνκείνπ γηα ηελ εμππεξέηεζε ηνπ δηθηχνπ. Δπίζεο κπνξεί λα είλαη Server δηθηχσζεο ε Server δξνκνιφγεζεο δηαθφξσλ παθέησλ πιεξνθνξηψλ απφ ην έλα δίθηπν ζην άιιν ε λα δηαζθαιίδνπλ ηελ αζθάιεηα ηεο πιεξνθνξίεο κε κεζφδνπο θξππηνγξαθεζεο.δπηζεο ζα κπνξνχζε λα είλαη θαη vpn Server γηα απνκαθξπζκέλν έιεγρν ζε άηνκα πνπ ρξεηάδνληαη πξφζβαζε ζην Server αιιά είλαη αξθεηά καθξηά ιείπνπλ ηαμίδηα ε είλαη εθηφο γξαθείν θαη ρξεηάδνληαη έλα αζθαιή ηξφπν επηθνηλσλίαο κε ηνλ Server. εκαληηθφ παξάγνληα ζε έλα Server παίδεη θαη ν επεμεξγαζηήο ηνπ γηα ηελ ζσζηή ιεηηνπξγεία ηνπ. Δίλαη αλαγθαίνο έλαο θαιφο επεμεξγαζηήο γηα ηελ ηθαλνπνίεζε ησλ αηηεκάησλ θαη δηαθφξσλ ιεηηνπξγεηψλ πνπ ζα ζηέιλνληαη ζηνλ Server καο. Πξνζνρή αλ έρνπκε ζηε δηάζεζε καο πνιινχο επεμεξγαζηέο δελ ζα θέξεη αλάινγε ηαρχηεηα επεμεξγαζίαο δεδνκελσλ.πξνηεηλεηαη λα έρνπκε ππφςε πφζα λήκαηα ζπλήζσο ηξέρνπλ ζηνλ Server καο θαη ηηο πξφζζεηεο ιεηηνπξγίεο απφ ην ιεηηνπξγηθφ ζχζηεκα πνπ ζα επηβαξχλνπλ ηνλ Server φηαλ ζα έρνπκε πνιινχο επεμεξγαζηέο. ε έλα apache Web Server κπνξνχκε λα ξπζκίζνπκε ηηο δηεξγαζίεο θαη ηα λήκαηα πνπ ζα ηξέρνπλ. Ο ζθνπφο καο είλαη λα ζέζνπκε έλα κέγηζην αξηζκφ δηεξγαζηψλ θαη λεκάησλ ζηνλ Server. Ο apache Web Server δηαζέηεη ιεηηνπξγίεο θαηαγξαθήο ζπκβαλησλ.γειαδε κπνξνχκε λα θαηαγξάςνπκε πνηνη ρξήζηεο έρνπλ επηζθεθζεί ηελ ηζηνζειίδα καο ηελ δηεχζπλζε ip ηνπ ρξήζηε φπσο επίζεο θαη φια ηα αηηήκαηα ηνπ. ε έλα Server κπνξνχκε λα έρνπκε πνιιέο πιεξνθνξηεο.ζα πξέπεη λα γίλεη ζσζηή επηινγή ηεο πιεξνθνξίαο δειαδή πνηεο πιεξνθνξίεο ζέινπκε λα θαηαγξάςνπκε θαη ηελ κνξθή ησλ αξρείσλ πνπ ζα έρνπλ ηα αξρεία θαηαγξαθεο.γειάδε ζα πξέπεη λα ππάξρεη θάπνην πιάλν γηα ηηο πιεξνθνξίεο πνπ ζέινπκε λα θαηαγξάςνπκε θαη ηνπο θαλφλεο πνπ ζα εθαξκνζηνχλ γηα ηελ επεμεξγαζία θάζε πιεξνθνξίαο. Σελίδα -16

2.1.2 MySQL H MySQL είλαη έλα ζχζηεκα πνπ ρεηξίδεηαη ηε ζρεζηαθή βάζε δεδνκέλσλ (RDBMS) πνπ αιιεινεπηδξά κε ηνλ SQL (Structured Query Language), είλαη έλα εξγαιείν πνπ ρξεζηκνπνηείηαη γηα ηελ επεμεξγαζία δεδνκέλσλ θαη καο δίλεη πξφζβαζε ζε κηα βάζε δεδνκέλσλ. Μηιάκε ινηπφλ γηα έλα γξήγνξν ηξφπν δηακφξθσζεο βάζεσλ δεδνκέλσλ.h βάζε δεδνκέλσλ επηηξέπεη ηελ ηαμηλφκεζε ηελ αλαδήηεζε ηελ απνζήθεπζε θαη ηελ αλάθιεζε δεδνκέλσλ. Ο δηαθνζκεηήο MySQL είλαη εθείλνο πνπ βιέπεη θαη ρεηξίδεηαη ηελ πξφζβαζηκφηεηα ζηηο πιεξνθνξίεο. Με απηφ ηνλ ηξφπν πνιιαπινί ρξήζηεο ζα κπνξνχλ λα δνπιεχνπλ ηελ ίδηα ζηηγκή, ελψ ν δηαθνζκεηή ζα κπνξεί λα δίλεη εχθνιε πξφζβαζε θαη λα ηελ εμαζθαιίδεη κφλν ζηνπο εμνπζηνδνηεκέλνο θαη πηζηνπνηεκέλνπο ρξήζηεο. Η MySQL είλαη έλαο δηαθνκηζηήο ρξεζηψλ κε πνιιά λήκαηα. Υξεζηκνπνηεί ηελ SQL ( Structured Query Language ) ηελ ηππηθή γιψζζα εξσηεκάησλ γηα βάζεηο δεδνκέλσλ, παγθφζκηα. Η MySQL έρεη αξθεηνχο αληαγσληζηέο φπσο είλαη νη PostgreSQL,Microsoft SQL Server θαη Οracle.Η ΜΤSQL δηαθέξεη φκσο γηαηί έρεη ηα εμήο πιενλεθηήκαηα: Xρακειφ θφζηνο Μεηαθεξζηκφηεηα Τςειή απφδνζε Δχθνιε εθκάζεζε θαη δηακφξθσζε Γηαζέζηκνο ν θψδηθαο πξνέιεπζεο Τπνζηήξημε H MySQL απνηειείηαη απφ ηνλ MySQL Server, απφ θάπνηα πξνγξάκκαηα πνπ βνεζνχλ ζηελ δηαρείξηζε ησλ βάζεσλ δεδνκέλσλ ηεο θαη απφ άιιν ινγηζκηθφ ππνζηήξημεο ηνπ MySQL server O MySQL Server είλαη ν δηαρεηξηζηήο ηνπ ζπζηήκαηνο ηεο βάζεο δεδνκέλσλ. Υεηξίδεηαη φιεο ηηο εληνιέο ηεο βάζεο. Γηα λα δερζεί εληνιέο ν MySQL Server πξέπεη λα ηξέρεη θαη λα πεξηκέλεη αηηήζεηο. Γη απηφ ην ιφγν ν MySQL Server έρεη ξπζκηζηεί λα μεθηλά φηαλ ν ειεθηξνληθφο ππνινγηζηήο πνπ ηνλ θηινμελεί μεθηλάεη. Όιε ε αιιειεπίδξαζε κε ηε βάζε δεδνκέλσλ γίλεηαη ζηέιλνληαο κήλπκα ζηνλ MySQL Server. H απνζηνιή κελπκάησλ ζην MySQL server είλαη κέζσ ηεο ΡΗΡ.Η PHP ρξεζηκνπνηεί ζπγθεθξηκέλν ηξφπν γηα λα ζηείιεη εληνιέο ζηνλ MYSQL server.o server ζα πξέπεη λα είλαη ζε ζέζε λα θαηαιάβεη ηηο εληνιέο πνπ δέρεηαη. Σελίδα -17

Ιστορικά της MySQL. H ηζηνξία ηεο MYSQL αξρίδεη ην 1979 φηαλ δεκηνπξγήζεθε κηα βάζε δεδνκέλσλ κε ηελ νλνκαζία unireg απφ ηνλ Michael Monty γηα ηελ ζνπεδηθή εηαηξία ΣcX DataKonsultAB.H ζπγθεθξηκέλε βάζε δελ δνχιεπε κε ηελ απφδνζε πνπ απαηηνχληαλ έηζη ε εηαηξία άξρηζε λα ςάρλεη ελλαιαθηηθέο ιχζεηο. Γνθίκαζαλ ηηο msql πνπ δεκηνπξγήζεθαλ απφ ηνλ David Hughes, αιιά θαη απηή ε πξνζπάζεηα δελ επέθεξε ην επηζπκεηφ απνηέιεζκα. Έηζη ν Widenious απνθάζηζε λα δεκηνπξγήζεη έλαλ λέν server βάζεσλ δεδνκέλσλ, παξακεηνπνηεκέλν ζχκθσλα κε ηηο απαηηήζεηο ηνπ, ησλ νπνίν βάζηζε επάλσ ζηνλ msql. Απηφ ην ζχζηεκα θπθινθφξεζε ηνλ Μάην ηνπ 1996 σο MySQL L1.0. Έπεηηα κεηα απφ κεξηθνχο κήλεο θπθινθφξεζε σο δηαλνκή γηα Solaris.Η TcX θαζψο είρε θεξδίζεη ζε δεκνηηθφηεηα ε ΜySQL ηελ έθαλε ηδησηηθή εηαηξία θαη ζήκεξα ηηο αλήθεη ν πεγαίνο θψδηθαο ηνπ mysql server θαη είλαη ππεχζπλε γηα ηελ αλάπηπμε,ηελ πξνψζεζε θαη ηελ ζπληήξεζε ηνπ. Ta πιενλεθηήκαηα ηεο mysql είλαη αξθεηά φπσο φηη είλαη πην εχθνιε ζηε ρξήζε θαη πην θαηαλνεηή ζε ζρέζε κε άιια ζπζηήκαηα βάζεσλ δεδνκέλσλ, κπνξεί λα ππνζηεξίμεη κεγάιεο βάζεηο δεδνκέλσλ, είλαη ζπκβαηή(compatible) κε ηα πεξηζζφηεξα ιεηηνπξγηθά ζπζηήκαηα θαη είλαη δσξεάλ θαη ειεχζεξα δηαζέζηκε απφ ηελ GNU GPL (General Public License) θαη έρεη ηελ δπλαηφηεηα λα πξνζαξκνζηεί αλάινγα κε ηηο αηνκηθέο αλάγθεο θάζε ρξήζηε. Σα κεηνλεθηήκαηα είλαη φηη έρεη ζρεδηαζηεί κε ζθνπφ ηελ αλάθηεζε δεδνκέλσλ κε πνιχ γξήγνξνπο ξπζκνχο θαη απηή ε αξρηηεθηνληθή εκθάληζε θάπνηα κεηνλεθηήκαηα πνπ ηελ έθαλαλ λα κνηάδεη θησρή επηινγή γηα θάπνηνπο πξνγξακκαηηζηέο. Μηα βάζε δεδνκέλσλ ρξεζηκνπνηείηαη γηα δχν θπξίσο ελέξγεηεο, ηελ εηζαγσγή / ηξνπνπνίεζε δεδνκέλσλ θαη αλάθηεζε πιεξνθνξηψλ απφ ππάξρνληα δεδνκέλα. Οη άλζξσπνη πνπ ηελ έθηηαμαλ ζπγθεληξσζήθαλ ζε κηα αξρηηεθηνληθή πνπ ζπζηάδεη ηελ ηαρχηεηα ζηελ δηαδηθαζία εηζαγσγήο/ηξνπνπνίεζεο ψζηε λα απμεζεί ε ηαρχηεηα θαηά ηε δηάξθεηα ηεο αλάθηεζεο. H mysql φπσο είπακε θαη πξνεγνπκέλσο είλαη ελα πξφγξακκα server.πλήζσο ηξέρεη ζηνλ ίδην ππνινγηζηή κε ηνλ Αpache.ε κεγάια site ηξέρεη ζε δηαθνξεηηθή θπζηθή ηνπνζεζία γηα κεγαιχηεξε ζηαζεξφηεηα θαη αζθάιεηα. Η php ζπλδέεηαη ζηελ ΜySQL ζηέιλεη εξσηήκαηα ζε βάζεηο θαη δέρεηαη ηηο απαληήζεηο. Γεκηνπξγία Υξεζηψλ ζηελ MySQL Σελίδα -18

H MySQL φηαλ εγθαζίζηαηαη δεκηνπξγεί έλα user κε θσδηθφ root θαη ζπλζεκαηηθφ απηφ πνπ δίλεηαη ζηελ εγθαηάζηαζε. Ο Υξήζηεο απηφο είλαη νξηζκέλνο λα πξνζπειάζεη ηελ βάζε απφ ηνλ ηνπηθφ ππνινγηζηή (localhost). Αλ θαηά ηελ εγθαηάζηαζε δεηήζεηε λα έρεη πξνζπέιαζε απφ απνκαθξπζκέλνπο Η/Τ ηφηε ν root δελ έρεη φιεο ηηο δπλαηφηεηεο απφ ηνπο απνκαθξπζκέλνπο ειεθηξνληθνχο ππνινγηζηεοδηζη δεκηνπξγείηαη ην θαηλφκελν λα κελ κπνξνχλ λα ιεηηνπξγήζνπλ φιεο νη δπλαηφηεηέο ηνπ. Pegasus ERP απφ ηνπο απνκαθξπζκέλνπο ππνινγηζηεο.ζα πξέπεη ινηπφλ είηε λα νξίζνπκε ζηνλ root λα έρεη φιεο ηηο δπλαηφηεηεο εηηε λα δεκηνπξγήζνπκε ελα θαηλνχξγην ρξήζηε κε φιεο ηηο δπλαηφηεηεο. Θα ρξεηαζηνχκε έλαλ client γηα MySQL. Θα ρξεζηκνπνηήζνπκε ηνλ EMS MySQL Manager Lite, ηνλ νπνίν κπνξείηε λα ηνλ βξείηε ζηελ δηεχζπλζε http://sqlmanager.net/products/mysql/manager. Πξψην βήκα είλαη λα εγθαηαζηήζνπκε ηνλ MySQL Manager ζηνλ ππνινγηζηή πνπ είλαη θαη ν mysql server.μεηα πνπ ζα ηνλ εθηειέζνπκε νξίδνπκε ηε βάζε πνπ ζέινπκε απφ ηελ επηινγή database- >register a Database εηζη δεκηνπξγνχκε κηα γξακκή ζην δεμί παξάζπξν κε ηελ βάζε καο. Σελίδα -19

Έπεηηα αλνίγνπκε ηε βάζε επηιέγνπκε tools->user manager θαη εκθαλίδνληαη φινη νη ρξήζηεο πνπ ππάξρνπλ ζηε βάζε. Σελίδα -20

Γεκηνπξγνχκε έλαλ λέν κε θσδηθφ ERP θαη φηη ζπλζεκαηηθφ ζέινπκε θαη επίζεο ζηελ ζέζε ηνπ host ζα πξέπεη λα έρεη ην %(γηα λα πξνζπειάζεη ηε βάζε απφ φινπο ηνπο ππνινγηζηέο) φπσο θαίλεηαη ζην παξαθάησ ζρήκα. Κιεηλνπκε ην EMS. Σελίδα -21

Γεχηεξν βήκα είλαη λα ηξέμνπκε ην Pegasus ERP θαη λα επηιέμνπκε Τπνζηήξημε->Σνπηθνί Πίλαθεο Παξακεηξνπνίεζεο ERP φπσο επίζεο θαη ηνλ πίλαθα Παξάκεηξνη ζπζηήκαηνο. Σξνπνπνηνχκε ηελ παξάκεηξν ODBC Connection String (ζηελ 2ε εγγξαθή) ψζηε λα έρεη ζαλ ρξήζηε ηνλ λέν πνπ δεκηνπξγήζακε. server=[server];database=peg_elite;user=erp;password=[pswd];option=2097155;driver={mysql ODBC 3.51 Driver} ηνλ ζεξβεξ αθήλνπκε ην φλνκα ηνπ ζεξβεξ πνπ ερνπκε,ζην user δίλνπκε to ERP ε νπνηνλδήπνηε θσδηθφ βάιαηε ζην βήκα 1 θαη password δίλεηαη ην ζπλζεκαηηθφ πνπ επίζεο δψζαηε ζην ρξήζηε πνπ δεκηνπξγήζακε ζην βήκα 1 Σελίδα -22

2.1.3 PHP Ιζηνξηθή Αλαδξνκή: Η γιψζζα πξνγξακκαηηζκνχ php δεκηνπξγήζεθε ην 1994 απφ ηνλ θνηηεηή Rasmus Lerdorf. Με ηελ γιψζζα πξνγξακκαηηζκνχ C δεκηνχξγεζε έλα απιφ script κε φλνκα php.cgi. Η ρξεζηκφηεηα ηνπ script απηνχ είλαη λα θξαηάεη κία ιίζηα ζηαηηζηηθψλ γηα φζα άηνκα έβιεπαλ online ην βηνγξαθηθφ ηνπ. Αξγφηεξα έδσζε ην script απηφ ζηνπο θίινπο ηνπ νη νπνίνη ηνπ ιέγαλε λα πξνζζέζεη παξαπάλσ δπλαηφηεηεο. Η γιψζζα νλνκάζηεθε PHP/FI θαη ζηελ ζπλέρεηα ην 1997 βγήθε ε έθδνζε 2.0 θηάλνληαο ζε 50.000 ηζφηνπνπ πνπ ηελ ρξεζηκνπνηνχζαλ. Αξγφηεξα ηνλ ίδην ρξφλν ε γιψζζα δεκηνπξγήζεθε απφ ηελ αξρή βαζηζκέλε ζηελ έθδνζε 2.0 θαη δεκηνπξγήζεθε ε έθδνζε 3.0 πνπ κνηάδεη πνιχ κε ηελ ζεκεξηλή κνξθή ηεο. Σν 1998 αθνινχζεζε ε έθδνζε 4.0 θαη ην 2004 ε έθδνζε 5.0 θαη ζήκεξα ζήκεξα έρεη βγεη ε έθδνζε 7.0 αιιά νη πεξηζζφηεξνη ηζφηνπνη ρξεζηκνπνηνχλ ηηο εθδφζεηο 4.0 θαη 5.0 κέρη θαη ζήκεξα. Η php είλαη κία αληηθεηκελνζηξαθήο γιψζζα πξνγξακκαηηζκνχ γηα ηελ δεκηνπξγία ζειίδσλ. Η php πεξλάεη απφ έλαλ ζπκβαηφ server (πρ Apache) ψζηε λα δείρλεη απνηειέζκαηα ζηελ ηζηνζειίδα πνπ ζα απνζηαιζεί ζηνλ θπιινκεηξηηε ησλ users κε θψδηθα html ζηελ πξαγκαηηθφηεηα. Έλα αξρείν php πξέπεη λα έρεη ηελ ζσζηή επέθηαζε ( πρ *.php, *.php4, phtml θα). Δλψ ππάξρνπλ πάξα πνιιέο γιψζζεο πξνγξακκαηηζκνχ γηα πξνγξακκαηηζκφ ζειίδσλ (φπσο ε RUBY,ASP,JSP θαη άιιεο ) ε php είλαη ε πην επξέσο δηάζεκε γιψζζα γηαηί είλαη πην θηιηθή πξνο ηνλ ρξήζηε θαη πην εχθνιν λα κάζεη θάπνηνο λα πξνγξακκαηίδεη ζε php. Δπηπξφζζεηα ππάξρνπλ πνιιά άξζξα ζην δηαδίθηπν γηα ηνπο αξράξηνπο πνπ ζέινπλ λα κάζνπλ ηελ γιψζζα php.παξφια απηά είλαη ζρεηηθά δχζθνιν λα θαηαζθεπάζνπκε απν ηελ αξρή κε php κία δηαδηθηπαθή εθαξκνγή ε κηα ηζηνζειίδα κε php.δπηπρψο γηα εκάο ππάξρνπλ θνηλφηεηεο πνπ καο παξέρνπλ αμηφπηζηα php frameworks πνπ καο βνεζάλε. Ο ζπλδπαζκφο LINUX/APACHE/MySQL/PHP γλσζηφ σο LAMP είλαη ε πην γλσζηή πιαηθφξκα εθηέιεζεο. Παξφκνηα ην AMP (APACHE/MySQL/PHP) ρσξίο ην L πνπ αληηζηνηρεί ζε πιαηθφξκα ζηελ νπνία εγθαζηζηάηαη ν Apache, MySQL θαη ε php, κπνξεί λα εγθαηαζηαζεί ζε δηαθνξεηηθή πιαηθφξκα απν ηα linux ζε έηνηκα παθέηα εγθαηάζηαζεο φπσο ην ΥΑMP,γηα ηα windows (WAMP), MAC OS (MAMP) θαζψο ην θαηέβαζκα θαη ε ξχζκηζε ησλ πξνγξακκάησλ είλαη δχζθνιε. Ο ΟΠΑΠ δίλεη ηα απνηειέζκαηα ησλ θιεξψζεσλ ζε κνξθή XML. Σελίδα -23

ην project καο κία απν ηηο πην βαζηθέο εληνιέο php γηα λα πάξνπκε ηα απνηειέζκαηα ησλ θιεξψζεσλ απφ ηνλ ΟΠΑΠ είλαη ε simplexml_load_file ε νπνία κεηαηξέπεη ην xml αξρείν ζε object πρ χληαμε <?php $xmlinfolast = simplexml_load_file("http://applications.opap.gr/drawsrestservices/kino/last.xml"); prinr_r($xmlinfolast);?> Σν απνηέιεζκα ζα είλαη: SimpleXMLElement Object ( [drawno] => 553745 [drawtime] => 2016-04-30T16:40:00+03:00 [result] => Array ( [0] => 20 [1] => 75 [2] => 18 [3] => 51 [4] => 64 [5] => 61 [6] => 16 [7] => 41 [8] => 48 [9] => 6 [10] => 62 [11] => 59 [12] => 22 [13] => 72 [14] => 40 [15] => 15 [16] => 46 [17] => 11 [18] => 17 [19] => 13 ) ) Σελίδα -24

2.1.4 PHPMYADMIN H phpmyadmin είλαη έλα δσξεάλ ιεηηνπξγηθφ εξγαιείν γξακκέλν ζε php.υξεζηκεχεη γηα λα ρεηξηδφκαζηε ηελ MySQL ζην δηαδίθηπν. Η phpmyadmin ππνζηεξίδεη πνιιέο επηινγέο ζηελ δηαρείξηζε ηεο MySQL θαη MariaDB.Οη ζπρλφηεξεο ιεηηνπξγείεο ηεο είλαη λα δηαρεηξίδεηαη βάζεηο δεδνκέλσλ, πίλαθεο, θειηά, ζπζρεηίζεηο, δείθηεο, δηθαηψκαηα user θαη ηα ινηπά. Όιεο απηέο νη ιεηηνπξγείεο κπνξνχλ λα εθηειεζηνχλ ζε πεξηβάιινλ ρξήζηε θαη έρεη ηελ δπλαηφηεηα ηαπηφρξνλα λα εθηειεί αιιαγέο(sql statement) απεπζείαο. Δπίζεο έρεη ηελ δπλαηφηεηα λα θάλεη εηζαγσγε δεδνκέλα απφ CSV θαη SQL.Δμαγσγή ζε CSV, SQL, XML,PDF,ISO/IEC 26300 θαη ζε πνιιέο άιιεο επεθηάζεηο. Σελίδα -25

2.2 HTML Ιζηνξηθή αλαδξνκή. Τπήξρε ην internet πξηλ απφ ην world wide web. Σν internet δεκηνπξγήζεθε ζηνλ ςπρξφ πφιεκν κε ζθνπφ λα ζηέιλεη πιεξνθνξίεο απφ ην έλα ππξεληθφ θαηαθχγην ζε έλα αιιν.σν 1969 ην δηαδίθηπν «θπθινθφξεζε» ζηνλ θφζκν. ηηο 12/11/1990 έλαο Άγγινο εθεπξέηεο θαη επηζηήκνλαο ππνινγηζηψλ o Tim Berners-lee πξφηεηλε έλα έγγξαθν πνπ απνθάιεζε ην world wide web.με απηήλ ηελ ηδέα πεξηγξάθεη έλα παγθφζκην δίθηπν ζπλδεδεκέλσλ ππνινγηζηψλ. Δπίζεο ν Tim Berners-lee δεκηνχξγεζε επίζεο κηα γιψζζα ζηελ νπνία ηα έγγξαθα γηα απηφ ην δίθηπν ζα κπνξνχζαλ λα δεκηνπξγεζνχλ απν φινπο ηνπο αλζξψπνπο. Η γιψζζα απηή νλνκάζηεθε HYPER TEXT MARKUP LANGUAGE (html).to Html ήηαλ πξσηνπνξηαθφ γηα ηελ επνρή ηνπ γηαηί ήηαλ κηα θαηαλνεηή γιψζζα. Η HTML 1, ε πξψηε έθδνζε ηεο HTML ήηαλ κηα ιηηή έθδνζε ρσξίο πνιινχο θαλφλεο θαη γεληθά δελ κπνξνχζεο λα θάλεηο πνιιά πξάγκαηα. Η ίδηα ε HTML δελ ήηαλ πξαγκαηηθά λέα ηδέα, Σελίδα -26

γηαηί ήδε ππήξρε ην SGML(STANDARD GERNERALIZED MARKUP LANGUAGE). ηελ πξαγκαηηθφηεηα δελ ππήξρε πνηέ HTML1. Η πξψηε επίζεκε έθδνζε ήηαλ ε HTML 2.0 γξακκέλν απν ην IETF (ΙΝΣΔΡΝΔΣ ENGINEERING TASK FORCE) ε πνιιά ζεκεία ε IETF ρξεζηκνπνίεζε απιά πξάγκαηα πνπ είραλ ήδε ρξεζηκνπνηεζεί γηα παξάδεηγκα ην ηφηε θχξην πξφγξακκα πεξηήγεζεο ην NCSA mosaic for ms Windows. Σν browser απηφ έδηλε ηελ δπλαηφηεηα ζηνπο πξνγξακκαηηζηέο λα πξνζζέηνπλ εηθφλεο κε img tag.h HTML 2 ην έθαλε απηφ απν πξνεπηινγή.ην IETF αληηθαηαζηάζεθε απφ ην W3C. Τπήξμε κηα απφθιηζε ηνπ πξντφληνο ζηελ Html 4.1. Μεηά απφ απηφ ην W3C επηθεληξψζεθε ζε θάηη πνπ νλνκάδεηαη XHTML 1.0. To XHTML 1.0 δελ έρεη λα πξνζζέζεη ηίπνηα θαηλνχξην ζηελ γιψζζα αιιά ηππνπνίεζε πνιιέο πξαθηηθέο πνπ ήδε ηζρχνπλ αλνίγνληαο ηνλ δξφκν γηα κηα πνιχ απζηεξφηεξε γιψζζα. Γειαδή πξηλ απφ απηφ ζα κπνξνχζε θάπνηνο κε 100 δηαθνξεηηθνχο ηξφπνπο λα θάλεη ην ίδην πξάγκα XHTML ήηαλ παξφκνηα κε ηελ HTML 4 αιιά απηφ ήηαλ ην πξψην βήκα γηα λα δεκηνπξγεζεί ε έθδνζε 1.1 ηνπ XHTML ε νπνία μεθίλεζε κηα δηαδηθαζία γηα λα κεηαηξέςεη ην HTML ζε πξαγκαηηθφ XML ε νπνία είλαη κία εληειψο δηαθνξεηηθή γιψζζα. Σφηε ήηαλ ε επνρή πνπ ν Internet explorer ήηαλ ην θπξίαξρν browser θαη είρε πνιιά πξνβιήκαηα ζηελ εκθάληζε ηνπ θψδηθα. ην κεηαμχ δηάθνξα άιια browser ηεο επνρήο κεηά απφ ζπδήηεζε θηηάμαλε κία νκάδα (WEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP) πνπ είλαη έλα αθφκα ζπλψλπκν ην ( WHATWG).Αξγφηεξα βγήθε ην html5 H html απνηειείηαη απφ εηηθέηεο νη νπνίεο πεξηθιείνληαη κέζα ζε ζχκβνια «κεγαιχηεξα απφ» θαη «κηθξφηεξα απφ» κέζα ζην πεξηερφκελν ηεο ηζηνζειίδαο. Γηα παξάδεηγκα «h1» θαη «h2» Αλάκεζα ζε απηέο ηηο εηηθέηεο νη πξνγξακκαηηζηέο ηζηνζειίδσλ κπνξνχλ λα βάινπλ θείκελν, πίλαθεο, εηθφλεο θηι. Ο ζθνπφο ελφο θπιινκεηξηηή είλαη λα δηαβάδεη ηα έγγξαθα HTML θαη λα ηα ηξνπνπνηεί ζε ζειίδεο πνπ κπνξεί θάπνηνο λα δηαβάζεη ε λα αθνχζεη. Ο θπιινκεηξεηήο δελ εκθαλίδεη ηηο εηηθέηεο HTML αιιά ηηο ρξεζηκνπνηεί γηα λα εξκελεχζεη ηα πεξηερφκελα ηεο ζειίδαο. Σελίδα -27

Γνκή HTML: <html> <head> <title>title goes here</title> </head> <body> Body goes here </body> </html> TAGS Σελίδα -28

Γηα λα νξίζνπκε ην κέγεζνο ηεο γξακκαηνζεηξάο αξθεί λα νξίζνπκε ην κέγεζνο πνπ ζέινπκε κε ην *</h1 h6> φπνπ </h1> είλαη κεγαιχηεξν ην κέγεζνο απφ ην </h2> πνπ είλαη κεγαιχηεξν απφ ην </h3> θαη νχησ θάζε εμήο. Γηα παξάδεηγκα: Paragraphs : Σελίδα -29

Οη παξάγξαθνη νξίδνληαη σο <p> <p>.δλδηάκεζα κπνξνχκε λα γξάςνπκε θείκελν ε νηηδήπνηε ζέινπκε λα θαίλεηαη σο παξάγξαθνο. Πνιιέο εηηθέηεο ππνζηεξίδνπλ ALIGN attributes.αλ ζέινπκε δειαδε θάηη λα θαίλεηαη ζην αξηζηεξφ πεξηζψξην ηεο ζειίδαο ε ζην θέληξν ε δεμηά ρξεζηκνπνηνχκε ην ραξαθηεξηζηηθφ Align ζηελ εηηθέηα αλνίγκαηνο πξηλ απφ ην > Πρ Emphasis : <em> Αληηπξνζσπεχεη ην stress ή ηελ έκθαζε ζην πεξηερφκελν ηνπ. Σν stress πνπ αλαθέξακε είλαη γισζζηθφ. Αλ θαιεζηεί κπνξεί λα αιιάμεη ηελ πξνθνξά ηεο ιέμεο θαη λα δίλεη έκθαζε ζε κία ιέμε πνπ κπνξεί λα αιιάμεη ην λφεκα κηαο πξφηαζεο. Strong <strong> Αληηπξνζσπεχεη θάηη πνπ ζέινπκε λα ηνλίζνπκε ζην πεξηερφκελν καο. Απφ πξνεπηινγή θάλεη ην πεξηερφκελν απηφ «bold». Anchor /link <a href= url > Αληηπξνζσπεχεη ηνλ ππεξζχλδεζκν ( hyperlink ). Κχξηα εληνιή πνπ δίλεη λφεκα ζηελ ιέμε «δηαδίθηπν». πκβνιίδνληαη κε ηελ εηηθέηα <a> ε νπνία ρξεζηκνπνηείηαη κε 2 ηξφπνπο: Να δεκηνπξγήζνπκε έλαλ ζχλδεζκν πνπ ζα καο πεγαίλεη ζε έλα άιιν έγγξαθν, ρξεζηκνπνηψληαο ην ζηνηρείν href Να δεκηνπξγήζνπκε ζειηδνδείθηεο ζε έλα έγγξαθν, ρξεζηκνπνηψληαο ην ζηνηρείν name χληαμε : <a href= url >LINK TEXT</a> Lists <ul> / <li> Σν ζηνηρείν <ul> αληηπξνζσπεχεη κία ιίζηα απφ αληηθείκελα πνπ ε ζεηξά ησλ αληηθεηκέλσλ δελ έρεη ζεκαζία Σν ζηνηρείν <li> αληηπξνζσπεχεη κηα ιίζηα απφ αληηθείκελα. Έλα li είλαη πάληα «child» κίαο ιίζηαο γηα παξάδεηγκα, ηνπ ul Σελίδα -30

Horizontal rule <hr> Απφ πξνεπηινγή θηηάρλεη κία νξηδφληηα γξακκή. Image <img src= url > Σν ζηνηρείν img αληηπξνζσπεχεη κία εηθφλα. ηεξίδεηαη ζε κεγάιν απφ ηα ραξαθηεξηζηηθά ηνπ, ην SRC. H alt είλαη εθεδξηθέο εηθφλεο αλ δελ εκθαλίδεηαη ε δηεχζπλζε URL ηεο εηθφλαο. Με ην width θαη ην height κπνξνχκε λα αιιάμνπκε ην κέγεζνο ηεο εηθφλαο. χληαμε : <img src="field.jpg" alt="field.com" width="104" height="142"> Καη ηέινο ην Division <div> To div ζηνηρείν ρσξίδεη ηα πεξηερφκελα. Γελ έρεη θακία ζεκαζηνινγηθή έλλνηά. Δμαηηίαο απηνχ είλαη πάξα πνιχ ρξήζηκε εληνιή φηαλ δεκηνπξγνχκε «visual layouts». Παξαθάησ βιέπνπκε κία αληηζηνίρηζε θψδηθα ζε κνξθή ηζηνζειίδαο Σελίδα -31

. Σελίδα -32

2.3 CSS Σν CSS είλαη κία γιψζζα πνπ καο ρξεζηκεχεη λα νξίζνπκε κε ζαθήλεηα θαη επειημία ηνλ ηξφπν πνπ ζα εκθαλίδνληαη δηάθνξα ζηνηρεία ζηελ ηζηνζειηδα.αλεθεη ζηελ θαηεγνξία γισζζψλ θχιισλ ζηπι θαη ρξεζηκνπνηείηαη γηα έιεγρν ηεο εκθάληζεο ελφο εγγξάθνπ πνπ έρεη γξαθηεί κε κηα γιψζζα ζήκαλζεο. Γεληθφηεξα δειαδή γηα έιεγρν ηεο εκθάληζεο ελφο ηζφηνπνπ/ ηζηνζειηδαο.γηα λα είλαη ε ηζηνζειίδα καο φκνξθε θαη θαιά ζρεδηαζκέλε είλαη απαξαίηεηε ε ρξήζε ηεο CSS. Βαζηθνί θαλφλεο ζχληαμεο : ε αληίζεζε κε ηηο γιψζζεο πξνγξακκαηηζκνχ ζην css ε αλάγθε γηα ζρφιηα δελ είλαη ηφζν επηηαθηηθε.μπνξνχκε λα βάινπκε ζρφιηα κέζα ζε /*...*/.Έλα παξάδεηγκα είλαη ην παξαθάησ: /* this is a comment */.Eλαο θαλφλαο css πεξηέρεη 2 κεξε.σνλ επηινγεα πνπ αθνξά ηηο ηδηφηεηεο πνπ αθνξνχλ πσο ζα κνξθνπνηεζεί θαη ην ηη ζα κνξθνπνηεζεί,ε ζχληαμε γίλεηαη σο εμήο: { Property1:value1; Property2:value2; Property3:value3;. } Σελίδα -33

Css selectors Μέζσ ησλ επηινγψλ css επηιέγνπκε πνηα ζηνηρεία ζα κνξθνπνηήζνπκε.ηελ νπζία πεξηέρνπλ θάπνηνπο θαλφλεο γηα λα κπνξέζεη λα θαηαιάβεη ν πεξηεγεηήο πνπ επηζπκνχκε λα εθαξκνζηνχλ φζα γξάθνπκε θάζε θνξά. Τπάξρνπλ αξθεηά πεξίπινθνη επηινγήο css ζην specification tou css νη νπνίνη πξνζθέξνπλ επειημία αιιά εκείο ζα δνχκε ηνπο βαζηθνχο γηα ινγνχο απινχζηεπζεο θαη επεηδή νη πεξηζζφηεξνη απφ ηνπο πεξίπινθνπο δελ ππνζηεξίδνληαη απφ φινπο ηνπο πεξηεγεηέο. Στοιτείο: Όηαλ ν cssselector απνηειείηαη απιά απφ ην φλνκα ελφο htmltag,ηφηε νη ηδηφηεηεο πνπ ζα γξάςνπκε ζε απηφλ ηνλ θαλφλα CSS εθαξκφδνληαη ζε θάζε ηέηνην ζηνηρείν html. Όνομα κλάσης: φηαλ ν επηινγάο πεξηιακβάλεη κηα ηειεηά ζηελ αξρή ηνπ ηφηε ν πεξηεγεηήο αλαδεηεί φζα ζηνηρεία πεξηιακβάλνπλ ζηελ ηζηνζειίδα καο ηελ ηδηφηεηα class θαη εθαξκφδεη ηηο ηδηφηεηεο πνπ ζα γξάςνπκε ζηνλ θαλφλα css απηφ ζε νπνηνδήπνηε ζηνηρείν πεξηέρεη ηελ θιάζε <νλνκα_θιαζεο> ζηελ ηδηφηεηα ηνπ class.γηα φλνκα θιάζεο κπνξνχκε λα βάινπκε απφ αξηζκνχο κέρξη νλφκαηα ραξαθηήξεο παχιεο θαη ραξαθηήξεο underscore(_) θαη λα μεθηλάεη κε γξακκα.οη θιάζεο γεληθά ρξεζηκεχνπλ γηα λα νκαδνπνηήζνπκε θάπνηα ζηνηρεία html γηα ηα νπνία δελ κπνξνχκε λα βξνχκε θάπνηνλ άιιν επηινγεα πνπ λα αθνξά φια απηά θαη κφλν απηά νπφηε ηνπο πξνζδίδνπκε κηα ζπγθεθξηκέλε θιάζε ψζηε λα έρνπκε ηε δπλαηφηεηα λα ηα κνξθνπνηήζνπκε θαη λα αλαθεξζνχκε κφλν ζε απηά. Στοιτειο.ονομα_κλασης: απνηειεί ζπλδπαζκφ ησλ παξαπάλσ δπν πνπ αλαιπζακε.γηλεηαη ρξήζε ζηα ζηνηρεία πνπ απνηεινχληαη απφ ην htm tag<element> θαη αλήθνπλ ζηελ θιάζε φλνκα θιάζεο. #όνομα_id:φηαλ ν επηινγεαο πεξηέρεη έλα ραξαθηήξα δίεζε ζηελ αξρή ηνπ ηφηε ν πεξηεγεηήο θάλεη ρξήζε ηηο ηδηφηεηεο πνπ ζα γξάςνπκε ζην ζηνηρείν ην νπνίν πεξηιακβάλεη ηελ ηδηφηεηα id= name_id.πξνζνρή δελ πξέπεη λα ππάξρνπλ πεξηζζφηεξα απφ δπν ζηνηρεία ζηελ ηζηνζειίδα καο κε ην ίδην id.σα ids κε ηηο θιάζεο δηεπνληαη απφ ηνπο ηδίνπο θαλφλεο νλνκαηνινγηαο.ηελ νπζία νηη κπνξνχκε λα θάλνπκε κε ηα ids γίλεηαη θαη κε ηελ ρξήζε θιάζεσλ αιιά είλαη πξνηηκφηεξν φηαλ ην ζηνηρείν πνπ ζέινπκε λα αιιάμνπκε είλαη κνλαδηθφ λα γίλεηαη ρξήζε ησλ ids. Στοιτείο[attribute= value ]:Δπέθηαζε ηνπ css selector πνπ αλαθέξζεθε ζηηο αξρέο ζπγθεθξηκέλνο επηινγέαο δίλεη ηελ δπλαηφηεηα ζηνλ πεξηεγεηή λα εθαξκφδεη ηηο ηδηφηεηεο πνπ ζα γξάςνπκε ζε θάζε ζηνηρείν κε tag<element> ην νπνίν έρεη ηελ ηηκή value ζηελ html ηδηφηεηα attribute. χλζεηνη επηινγεηο css selectors:επηινγεαο 1,επηινγεαο 2,επηινγεαο 3,επηινγεαο 4,...Οη ηδηφηεηεο πνπ ζα γξάςνπκε ζε απηφ ην θαλφλα ζα εθαξκνζηνχλ ζε θάζε ζηνηρείν πνπ πιεξνί ηεο πξνυπνζέζεηο επηινγήο ζε νπνηνδήπνηε επηινγεα.γηα παξάδεηγκα ν επηινγεαο input[type= text ] textarea ζα εθαξκνζηεί ζε θάζε πεδίν θεηκέλνπ πνπ ππάξρεη ζηελ ηζηνζειίδα καο είηε είλαη πνιιψλ γξακκψλ είηε γηα εηζαγσγή θεηκέλνπ κηαο γξακκήο. επηινγεαο 1,επηινγεαο 2,επηινγεαο 3,επηινγεαο 4..επηινγεαοn.Oi ηδηφηεηεο εθαξκφδνληαη ζε ζηνηρεία πνπ πιεξνχλ ηεο πξνυπνζέζεηο ηνπ επηινγεαn θαη πεξηέρνληαη κέζα ζε θάπνην ζηνηρείν πνπ πιεξνί ηηο πξνυπνζέζεηο ηνπ επηινγεαn-1 ην νπνίν είλαη κέζα ζε θάπνην ζηνηρείν πνπ πιεξνί ηηο πξνυπνζέζεηο επηινγεαn-2 θιπ. Σελίδα -34

ΔΙΑΓΩΓΗ CSS ΣΗΝ ΔΛΙΓΑ ΜΑ Inline CSS: Όηαλ ζέινπκε λα δηακνξθψζνπκε έλα ζηνηρείν κφλν θαη δελ πξφθεηηαη λα ρξεηαζηνχκε απηφ ην είδνο κνξθνπνίεζεο γηα ηίπνηε άιιν ζην site κπνξνχκε λα γξάςνπκε θαηεπζείαλ css properties κέζα ζην attribute style ην νπνίν πεξηέρεη θάζε ζηνηρείν html.αλ θάπνηεο ηδηφηεηεο πνπ ζα γξάςνπκε εληφο ηεο attributestyle ελφο ζηνηρείνπ «ζπγθξνχνληαη» κε θαλφλεο CSS ηφηε ν θπιινκεηξεηήο ζα επηιέμεη λα εθαξκφζεη απηά πνπ γξάςακε κέζα ζην attribute style. Css γηα ζπγθεθξηκέλε ζειηδα:οξηζκελεο θνξέο κπνξεί λα ρξεηαζηεί λα εθαξκφζνπκε θάπνηνπο θαλφλεο κνλν γηα ηε ζπγθεθξηκέλε ζειίδα θαη φρη γηα νιν ην site.έλαο ηξφπνο λα γίλεη απηφ είλαη λα βάινπκε εληνο ησλ tags <head> </head> ηεο ηζηνζειίδαο ηνπο θαλφλεο css κέζα ζε style tags φπσο θαίλεηαη ζην παξαπάλσ παξάδεηγκα πνπ θάλνπκε ην ρξψκα γξακκάησλ κηαο ζειίδαο γθξη: <style type= text/css > Body { } <style> Color:gray; Oηαλ μεθηλάκε κηα ηζηνζειίδα είλαη πην θαιφ λα ρξεζηκνπνηήζνπκε απηφ ην ηξφπν απφ ηελ αξρή κηαο θαη πξέπεη λα επεμεξγαδφκαζηε κφλν έλα αξρείν αληί γηα δπν. Δμσηεξηθφ αξρεην css: H πην ζσζηή ρξήζε ηνπ css θαη ζα έπξεπε λα είλαη ε πξψηε ιχζε ζηελ φπνηα ζα ηξεμνπκε.γηα λα γίλεη ρξήζε γξάθνπκε ηνπο θαλφλεο css ζε κε θαηάιεμε css(main.css) ζην αξρείν θαη ζην head ηεο θάζε ζειίδαο ηνπ site γξάθνπκε <link href= main.css type= text/css ε φπνην άιιν φλνκα έρνπκε γηα φλνκα αξρεηνπ.δρνπκε ηε δπλαηφηεηα λα ερνπκε πνιιά αξρεία css ζηελ ίδηα ζειίδα θαη απηφ πνπ έρεη γξαθηεί ηειεπηαίν έρεη θαη ηελ πην κεγάιε πξνηεξαηφηεηα. Σελίδα -35

Οπιζμόρ ηυν ζηςλ Δηζαγσγή ζηπι ζηελ ζειίδα: Body { Background-color: blue; } Με ην ζπγθεθξηκέλν ζηπι πνπ είδακε ξπζκίδνπκε ην ρξψκα θαη ηε γξακκαηνζεηξά ηεο ηζηνζειίδαο. Σξεηο θχξηνη ηξφπνη γηα λα νξίζνπκε έλα ζηπι ζε κηα ζειηδα. (Internal style sheet), (external) θαζψο θαη θαη μέζα ζηιρ εηικέηερ. Ο οπιζμόρ ηυν ζηςλ μέζα ζηη ζελίδα μαρ: Οξίδνπκε ην ζηπι ζην head ηεο ζειίδαο κε ηελ ρξήζε html εηηθέηαο. οπιζμόρ ηυν ζηςλ ζε εξυηεπικό απσείο: οπιζμόρ ζηςλ μέζα ζηιρ εηικέηερ: Σελίδα -36

Αλ ρξεζηκνπνηήζνπκε ηελ θνηλή ηδηφηεηα style ηεο html νξίδνπκε ην ζηπι ζηηο εηηθέηεο. Απηφ κπνξεί λα γίλεη ζε φιεο ηηο html εηηθέηεο ηεο ελφηεηαο body. Ωζηφζν, ην κεηνλέθηεκα απηήο ηεο δξαζηεξηφηεηαο είλαη φηη ράλνπκε ηελ ηθαλφηεηα ηεο css, δειαδή ηεο εχθνιεο δηαρείξηζεο ησλ ζηπι ησλ ζειίδσλ. Απηφ ζπκβαίλεη δηφηη ην ζηπι εθαξκφδεηαη κφλν ζηελ εηνηθέηα πνπ νξίδεηαη.. Σελίδα -37

ύγκπιζη ηπιών ηπόπυν οπιζμού ζηςλ: Σελίδα -38

Ο δεχηεξνο ηξφπνο είλαη ν πην πξαθηηθφο γηα ηνπο ιφγνπο φηη : Γηα λα δεκηνπξγήζνπκε έλα ζηπι ζε φιεο ηηο ζειίδεο ηνπ site, κε ην δεχηεξν ηξφπν, ηα ζηπι γξάθνληαη ζε εμσηεξηθφ αξρείν θαη έηζη κπνξνχκε λα εηζάγνπκε φζεο ζειίδεο ζέινπκε. Σελίδα -39

ν πεγαίνο θψδηθαο HTML ηεο ζειίδαο είλαη θαιχηεξνο, θαζψο φπσο πξναλαθέξζεθε δελ πεξηέρεη ηα ζηπι ζην ηκήκα head. Απηφ ζπκβαίλεη ζηνλ πξψην ηξφπν. Αληίζεηα ζηνλ ηξίην πεξηέρνληαη ηα ζηπι κέζα ζηηο εηηθέηεο. ην εμσηεξηθφ αξρείν πνπ έρεη ηα ζηπι, φπσο πξναλαθέξζεθε, απνζεθεχεηαη ζηελ πξνζσξηλή κλήκε ηνπ θπιινκεηξεηε. Έηζη φηαλ ν δηαρεηξηζηήο αλνίγεη πέξα απφ ηελ θεληξηθή ζειίδα, νπνηαδήπνηε άιιε, ν θπιινκεηξεηήο ζα δηαβάζεη ηα ζηπι απφ ηελ πξνζσξηλή κλήκε ηνπ. Με απηφ ηνλ ηξφπν κεηψλεηαη ν φγθνο ησλ δεδνκέλσλ απφ ηνλ server πνπ θηινμελείηαη ζηελ ζειίδα. Σελίδα -40

2.4 javascript-jquery-ajax JavaScript H javascript είλαη κία γιψζζα πξνγξακκαηηζκνχ γηα ππνινγηζηέο. Η ίδηα έρεη ηε δπλαηφηεηα λα ζπλδέεη ηνλ πειάηε κε ηνλ ρξήζηε ψζηε λα ππάξρεη δπλαηφηεηα αληαιιαγήο δεδνκέλσλ θαη πεξηερνκέλνπ κε βάζε ην αξρηθφ έγγξαθν. Μηιάκε γηα κία γιψζζα πξνγξακκαηηζκνχ, ζελαξίσλ κε αζζελείο ηχπνπο θαη έρεη σο ζπλαξηήζεηο αληηθείκελα πξψηεο ηάμεο. Η ζχληαμή ηεο είλαη εκπλεπζκέλε απν ηελ γιψζζα c. Σν ζηπι πξνγξακκαηηζκνχ πνπ ππνζηεξίδεη είλαη ε αληηθεηκελνζηξαθή, ην πξνζηαθηηθφ θαη ην ζπλαξηεζηαθφ. Σέινο, κπνξεί λα ρξεζηκνπνηεζεί ζε εθαξκνγέο (φπσο έγγξαθα pdf),desktop widgets (κηθξνεθαξκνγέο ηεο επηθάλεηαο εξγαζίαο). Ιζηνξηθα: ν Brendan Eich ηεο εηαηξίαο Netscape ηε δεκηνχξγεζε κε ηελ επσλπκία Mocha. Έπεηηα, απφ mocha πεξέ ηελ νλνκαζία Livescript. Δλ ηειεi κεηνλνκάζηεθε ζε Javascript. Απηφ ζπλέβε δηφηη είρε επεξεαζηεί πην πνιχ απφ ηελ γιψζζα πξνγξακκαηηζκνχ java. Απέθηεζε ηεξάζηηα επηηπρία γηα εθηέιεζε θψδηθα σο ηε γιψζζα ηνπ πειάηε(client-side).δίλαη απφ ηηο πην δεκνθηιέζηεξεο γιψζζεο πξνγξακκαηηζκνχ ζηνλ παγθφζκην ηζηφ. Moληειν εθηειεζεο: Η αξρηθή έθδνζε βαζίζηεθε ζηελ γιψζζα c αλ θαη έρεη αλαπηπρζεί παίξλνληαο ραξαθηεξηζηηθά απφ πην θαηλνχξγηεο γιψζζεο. Αξρηθά ρξεζηκνπνηήζεθε γηα πξνγξακκαηηζκφ απφ ηελ πιεπξά ηνπ πειάηε πνπ ήηαλ ν browser ηνπ ρξήζηε θαη ραξαθηεξίζζεθε ζαλ client side γιψζζα πξνγξακκαηηζκνχ ην νπνίν ζεκαίλεη φηη ε επεμεξγαζία ηνπ θψδηθα θαη ε παξαγσγή ηνπ ηειηθνχ πεξηερνκέλνπ html πξαγκαηνπνηείηαη ζην πξφγξακκα πεξηήγεζεο ησλ επηζθεπηψλ θαη νρη ζηνλ δηαθνκηζηή ελψ κπνξεί λα κπεη θαη ζε ζηαηηθέο ζειίδεο html ζε αληίζεζε κε άιιεο γιψζζεο φπσο ε php πνπ εθηεινχληαη ζηνλ δηαθνκηζηή. Γηα λα εκθαλίζνπκε έλα πιαίζην δηαιφγνπ κε ην θείκελν hello world γξάθνπκε ηνλ εμήο θψδηθα: <script type="text/javascript"> alert('hello world!'); </script> Αλ πεξηέρεη ν θψδηθαο παξαπάλσ απφ κηα εληνιέο ζα πξέπεη λα δηαρσξηζηνχλ κεηαμχ ηνπο κε ην,. Μηα άιιε βαζηθή εληνιή είλαη ε window.prompt ε νπνία δεηάεη απφ ηνλ ρξήζηε λα ζπκπιεξψζεη έλα θνκκάηη κηαο αίηεζεο απεπζείαο ψζηε λα γίλεη ρξήζε ησλ δεδνκέλσλ ζαλ θείκελν. <script> var FIRSTvariable = window.prompt("please FILL IN YOUR NAME") alert("your name is " + FIRSTvariable + ".") </script> Σελίδα -41

Javascript Γπλαηφηεηεο javascript: Δθηέιεζε θάπνησλ πξάγκαησλ θαηα ηε δηάξθεηα ελφο γεγνλφηνο(φπσο είλαη φηαλ ν ρξήζηεο θάλεη θιηθ ζε έλα html ζηνηρείν λα εθηειείηαη θαπνην script θαη λα ιακβάλνπκε ηα αληίζηνηρα απνηειέζκαηα) Γηάβαζκα θαη αιιαγή πεξηερνκέλσλ ελφο html ζηνηρείνπ. Δπηθχξσζε θαη ρξεζηκνπνίεζε δεδνκέλσλ κηαο θφξκαο πξηλ ππνβιεζεί ζηνλ server. Δληνπηζκφο browser ηνπ επηζθέπηε Γεκηνπξγία cookies ΤΝΣΑΞΗ: Γηα λα εηζάγνπκε javascript ζε ελα html αξρείν ρξεζηκνπνηνχκε ηελ εηηθέηα script θαη γηα λα νξίζνπκε ηελ scripting γιψζζα πνπ ζα ρξεζηκνπνηήζνπκε κέζα ζηελ εηηθέηα απηή γίλεηαη ρξήζε ηνπ νξίζκαηνο type. Oη ηξφπνη εηζαγσγήο είλαη 2.Δζσηεξηθά κέζα ζην html αξρείν φπσο θαίλεηαη παξαθάησ: Σελίδα -42

H κπνξνχκε κέζα ζηελ εηηθέηα Σελίδα -43

External:Ο θψδηθαο κπνξεί λα γξαθηεί θαη μερσξηζηά απφ ην html αξρείν. Σα εμσηεξηθά αξρεία έρνπλ θαηάιεμε.js θαη δελ πξέπεη λα πεξηέρνπλ ηηο εηηθέηεο <script>.</script>. J-Query Σελίδα -44

Η J-Query είλαη βηβιηνζήθε javascript θαη είλαη έηζη ζρεδηαζκέλε γηα ηελ πινπνίεζε ζελαξίσλ ζηε πιεπξά ηνπ πειάηε ηεο html θαη ππνζηεξίδεη πνιιoχο browzers. Γίλεηαη ρξήζε ηεο ζε πάλσ απφ 15,000 ηζηφηνπνπο κε ηε κεγαιχηεξε επηζθεςεκφηεηα. Υαξαρηεξηζηηθα DOM element επηινγέο θάλνληαο ρξήζε ηνλ αλνηρηφ θψδηθα κεραλήο επηινγήο θπιινκεηξεηψλ sissle. DOM δηάζρηζε θαη ηξνπνπνίεζε Υεηξηζκφο DOM βαζηζκέλνο ζε css επηινγήο πνπ ρξεζηκνπνηεί ηα id kai class ζαλ θξηηήξηα γηα ηελ θαηαζθεπή ησλ επηινγψλ Events Ajax Κηλεηά ζηνηρεία θαη εθέ Δπεθηαζηκφηεηα κέζσ plug-ins Eεξγαιεία φπσο πιεξνθνξίεο user agent αλίρλεπζε ραξαθηεξηζηηθνχ Μεζφδνπο ζπκβαηφηεηαο πνπ είλαη εγγελψο δηαζέζηκα ζε ζπρξνλα πξνγξάκκαηα πεξηήγεζεο Τπνζηήξημε πνιιαπιψλ θπιινκεηξεηψλ Δίλαη αξθεηά δεκνθηιήο ηα ηειεπηαία ρξφληα θαη είλαη απαξαίηεηε ε ρξήζε ηεο αλ ζέινπκε λα θάλνπκε κηα θαιή,ρξεζηηθή θαη επράξηζηε ηζηνζειίδα. Λεηηνπξγεί ζε φινπο ηνπο πεξηεγεηέο ζσζηά νπφηε μέξνπκε φηη ζα παίδεη παληνχ φηη θηηάμνπκε θαη είλαη ειαθξηά. Μπνξνχκε λα θάλνπκε πνιιά ζηα sites καο φπσο: Γεκηνπξγεία θηλεζεο ζηα ζηνηρεία ηνπ html ajax αηηήκαηα κε κεγάιε επθνιία αιιαγή ηδηνηήησλ ζηελ html θαη ζην θψδηθα ηνπ css είλαη αξθεηά δεκνθηιήο Ajax(Asynchronous javascript and xml) Ajax είλαη κηα ηερλνινγία πνπ ρξεζηκνπνηεί θαη ηελ γιψζζα javascript ε νπνία ρξεζηκνπνηείηαη ζε sites θαη επηηξέπεη ηελ ακθίδξνκε επηθνηλσλία κεηαμχ ηνπ server θαη ηνπ client.δπηηξέπεη ηελ Σελίδα -45

αλαλέσζε ελφο κέξνπο ηεο ζειίδαο ρσξίο απηή λα ρξεηαζηεί λα γίλεη reload.ηελ νπζία ε ηερλνινγία απηή ζα επηθνηλσλήζεη κε ηνλ server κε ην πνπ θάλνπκε θάηη θαη φια απηά ρσξίο λα γίλεη αλαλέσζε ηεο ηζηνζειίδαο αιιά θαηεπζείαλ, αιιηψο ζα έπξεπε λα μαλαθνξηψζεη νιφθιεξε ηε ζειίδα. Όζεο ηζηνζειίδεο θάλνπλ ρξήζε ajax είλαη ηαρχηαηεο θαη πνιχ πην εμππεξεηηθέο γηα ηνλ ρξήζηε. Απνηειεί ηελ πην ζχγρξνλε ηερλνινγία ζηνλ πξνγξακκαηηζκφ ζην δηαδίθηπν, δίλνληαο δηαδξαζηηθέο δπλαηφηεηεο ζε κηα δπλακηθή ηζηνζειίδα,κεηαηξέπνληαο ην έλα απιφ site ζε κηα δηαδηθηπαθή εθαξκνγή. Η θχξηα γιψζζα πξνγξακκαηηζκνχ κε ηελ νπνία εθαξκφδεηαη ε ajax είλαη ε javascript.οπφηε θάπνηνο πνπ θάλεη ρξήζε ηεο javascript κπνξεί λα ηελ ρξεζηκνπνηήζεη γηα λα εθαξκφζεη ηε ηερλνινγία ajax. Η πινπνίεζε ηεο ηερληθήο ajax γίλεηαη κε ην ζπλδπαζκφ αληηθεηκέλνπ xmlhttprequest (πξαγκαηνπνίεζε αζχγρξνλεο επηθνηλσλίαο κε ην server),ηελ css (κνξθνπνίεζε δεδνκέλσλ),ηελ xml(γηα κεηαθνξά δεδνκέλσλ) θαη ηελ javascript/dom(αιιειεπίδξαζε κε ηα δεδνκέλα θαη εκθάληζε). Πιενλεθηήκαηα-κεηνλεθηήκαηα ηεο ηερλνινγίαο ajax: Σελίδα -46

ΠΛΔΟΝΔΚΣΗΜΑΣΑ: Γηαδξαζηηθφ interface (δελ είλαη αλαγθαίν λα θάλεη reload/refresh νιφθιεξε ε ζειίδα) Μπνξνχλ λα ρξεζηκνπνηεζνχλ πνιιαπιά connection threads γηα ηελ γξεγνξφηεξε κεηαθνξά ζε κηα θιαζηθή web εθαξκνγή φηαλ ν web server ζηέιλεη ηε ζειίδα ζην browser. Μείσζε ρξφλνπ αλακνλήο ε πεξίπησζε ζθάικαηνο επεξεάδεηαη κφλν ην ηκήκα πνπ έρεη ην ζθάικα θαη φρη ηα ππφινηπα κε ην θίλδπλν λα ραζνχλ θξίζηκα δεδνκέλα Η θίλεζε απν θαη πξνο ην server κεηψλεηαη ζεκαληηθά νπφηε έρνπκε θαη κείσζε ηεο ρξήζεο ηνπ bandwidth ΜΔΙΟΝΔΚΣΗΜΑΣΑ: Η αλάπηπμε κηαο ηέηνηαο εθαξκνγήο απαηηεί πεξηζζφηεξν ρξφλν θαη θφζηνο θαη είλαη πην δχζθνιε ζηελ αλάπηπμε ιφγσ ησλ πνιιψλ ηερλνινγηψλ πνπ ρξεζηκνπνηνχληαη. Αζαθήλεηα ζε απαληήζεηο ζε δηάθνξα δεηήκαηα αζθαιείαο Σα δεδνκέλα θνξηψλνληαη αζχγρξνλα ζε κηα ζειίδα αιιάδνληαο ηε κνξθή ηεο ρσξίο λα επαλαθνξησζεί. Έλαο απφ ηνπο ζεκαληηθνχο ιφγνπο φπνπ ν ajax δελ ρξεζηκνπνηείηαη πνιχ ζην κεγαιχηεξν πνζνζηφ sites πνπ βιέπνπκε ζην internet είλαη φηη δελ κπνξνχλ λα γίλνπλ indexed απφ ηηο κεραλέο αλαδήηεζεο. Τπνζηεξίδεηαη κφλν απφ πεξηεγεηέο νη νπνίνη ππνζηεξίδνπλ πιήξσο javascript κε έκθαζε ζην XMLHttpRequest αληηθείκελν. Όπνηε επηζθέπηεο κε παιηφηεξνπο browsers δελ ζα κπνξνχλ λα δνπλ απηέο ηηο εθαξκνγέο. Σν XMLHttpRequest αληηθείκελν εμαηηίαο πεξηνξηζκψλ αζθαιείαο κπνξνχκε λα έρνπκε πξφζβαζε κφλν ζην ζέξβεξ πνπ εμππεξέηεζε ε αξρηθή ζειίδα 2.5 XML Η XML έρεη πνιιέο νκνηφηεηεο κε ηελ HTML αθνχ θαη απηή πεξηέρεη ηδηφηεηεο, ηηκέο θαη εηηθέηεο. Η ΥΜL είλαη ζηελ νπζία κηα γιψζζα δεκηνπξγίαο άιισλ γισζζψλ. Υξεζηκνπνηείηαη πεξηζζφηεξν γηα ζρεδηαζκφ πξνζαξκνζκέλσλ γισζζψλ ζήκαλζεο, πην πνιιπ γηα κνξθνπνηήζε εγγξαθνπ. Η γιψζζα ζήκαλζεο πεξηέρεη δηάθνξεο εηηθέηεο νη νπνίεο πεξηγξάθνπλ ηα δεδνκέλα πνπ πεξηέρνπλ. Δπεηδή θάζε εηηθέηα ραξαθηεξίδεη ηα δεδνκέλα πνπ έρεη, απηά ηα δεδνκέλα γίλνληαη δηαζέζηκα θαη γηα άιιεο Σελίδα -47

ιεηηνπξγείεο, ηελ δνπιεηά απηή ηελ θάλεη ε ΥML.Έηζη ηα δεδνκέλα βξίζθνληαη ζε ζεκείν πνπ είλαη νξαηά θαη κπνξνχλ λα ρξεζηκνπνηεζνχλ νπνηαδήπνηε ζηηγκή. Δθαξκνγέο γιψζζαο XML. Web browsers internet Information retrieval(database) Ηιεθηξνληθφ εκπφξην Γεκηνπξγία λέσλ γισζζψλ φπσο είλαη ε γιψζζα WAP πνπ ρξεζηκεχεη ζηελ αλαπαξάζηαζε ηεο πιεξνθνξίαο ηνπ ίληεξλεη ζε θηλεηέο ζπζθεπέο(ηειέθσλα) Γπλαηφηεηα δηακνίξαζεο δεδνκέλσλ δηαθφξσλ εθαξκνγψλ Αληαιιαγή δεδνκέλσλ κεηαμχ κε ζπκβαηψλ ζπζηεκάησλ Γπλαηφηεηα απεηθφληζεο ησλ ίδησλ δεδνκέλσλ κε δηαθνξεηηθφ ηξφπν αλάινγα ην ζθνπφ ρξήζεο ηνπο εκαζία xml: extensible markup language νπνχ extensible. εκαίλεη φηη είλαη επεθηάζηκε δειαδή δελ έρεη πξνθαζνξηζκέλα tags αιιά αθήλεη λα δεκηνπξγήζεη ηα δηθά ηνπ ν ζπγγξαθέαο.markup:ζήκαλζε έρεη πνιιέο νκνηφηεηεο κε ηελ html.language: πεξηγξαθηθή γιψζζα φρη πξνγξακκαηηζηηθή γιψζζα. Η ΥΜL εμππεξεηεί δηάθνξνπο ζθνπνχο.έλαο απφ απηνχο είλαη φηη παξέρεη ηεξάζηηα ειεπζεξία ζηελ γξακκνγξάθεζε ησλ δεδνκέλσλ θαη φηη είλαη θαηάιιεια δνκεκέλε ψζηε λα κπνξεί λα δηαβαζηεί ηφζν απφ κεραλέο φζν θαη απφ ηνπο αλζξψπνπο.δπίζεο ν ηξφπνο γξακκνγξάθεζεο δεδνκέλσλ,πξφθεηηαη γηα πεξηγξαθή δεδνκέλσλ θαη φρη γηα γιψζζα κνξθνπνίεζεο ηνπ θεηκέλνπ. Η xml είλαη έλα ππνζχλνιν ηεο SGML,κηα πην απινπζηεπκέλε έθδνζε ηεο θαη δεκηνπξγήζεθε απφ ηα κέιε ηνπ w3c θαη εθδφζεθε ην Φεβξνπάξην ηνπ 1998.Δρεη πην απιή ζχληαμε απφ ηελ SGML.Πξέπεη ηξφπν αλαπαξάζηαζεο ηεο πιεξνθνξίαο ρσξίο λα ελδηαθέξεηαη γηα ηελ παξνπζίαζε ηεο θαη ζε ζπλδπαζκφ κε άιιεο ηερλνινγίεο φπσο είλαη ε XSL, JAVASCRIPT,CSS δίλεη ηεξάζηηεο δπλαηφηεηεο ελλαιαθηηθήο παξνπζίαζεο δεδνκέλσλ. Σελίδα -48

Πσο είλαη έλα έγγξαθν xml: <?xml version="1.0"?> <note> <to>chr</to> <from>pantelis-bagelis</from> <subject>reminder</subject> <body>prepare an XML presentation</body> </note> Πξφθεηηαη γηα ηα tags πνπ ρξεζηκεχνπλ σο αλαγλσξηζηηθά ζηελ xml.πξέπεη λα είλαη πάληα ζε δεχγε απηά πνπ νξίδνπλ ηα elements,λα είλαη case sensitive θαη είλαη κε ζσζηφ ηξφπν θσιηαζκέλα. Σα attributes ρξεζηκνπνηνχληαη γηα λα δψζνπλ επηπιένλ ραξαθηεξηζηηθά ζηα elements θαη πξέπεη λα έρνπλ θάπνηα ηηκή ε νπνία βξίζθεηαη πάληα κεηαμχ ε. Γελ ππάξρεη θαλφλαο γηα ηελ ρξήζε attributes ε elements αιιά είλαη πξνηηκφηεξν λα γίλεηαη ρξήζε ησλ elements δηφηη ηα attributes δελ κπνξνχλ λα πεξηέρνπλ πνιιαπιέο ηηκέο δελ κπνξνχλ λα εθθξάζνπλ δνκέο παηεξά-παηδηνχ θαη είλαη δπζθνιφηεξν λα επεμεξγαζηνχλ κε ηελ βνήζεηα θάπνηνπ xml parser.ηελ παξαθάησ εηθφλα βιέπνπκε εάλ παξάδεηγκα: <?xml version="1.0"?> <note> <date> <day>12</day> <month>11</month> <Year>99</> <to>chr</to> <from>pantelis-bagelis</from> <subject>reminder</subject> <body>prepare an XML presentation</body> </note> <?xml version- 1.0?> <note day= 12 month= 11 year= 99 > <to>chr</to> <from>pantelis-bagelis</from> <subject>reminder</subject> <body>prepare an XML presentation</body> </note> Σν DTD θαζνξίδεη σο έλα «πξφηππν» ην ηη κπνξεί λα ππάξρεη ζε έλα έγγξαθν XML επίζεο δελ είλαη ππνρξεσηηθφ, κπνξεί λα είλαη είηε εμσηεξηθφ είηε εζσηεξηθφ θαη έρεη σο ζηφρν λα πξνδηαγξάςεη ηα έγθπξα elements θαη attributes πνπ κπνξνχλ λα ρξεζηκνπνηεζνχλ ζε έλα έγγξαθν xml. Elements:βαζηθά δνκηθά ζηνηρεία ελφο εγγξάθνπ xml Attributes:ραξαθηεξηζηηθά ησλ elements entities Όηαλ έλα έγγξαθν ζπκκνξθψλεηαη κε ηνπο θαλφλεο (ζπληαθηηθνχο) ηεο xml ηφηε κπνξνχκε λα πνχκε φηη είλαη θαιψο νξηζκέλν θαη εηλαη έγθπξν φηαλ είλαη θαιψο νξηζκέλν θαη ζπκκνξθψλεηαη κε ηνπο θαλφλεο ελφο DTD. Σελίδα -49

Πσο νξίδεηαη έλα attribute:κπνξνχκε λα νξίζνπκε έλα attribute ρσξίο λα ππνρξεψζνπκε ηνλ ζπγγξαθέα λα ην ρξεζηκνπνηεζεη.πρ <!ATTLIST contact fax CDATA #IMPLIED>ην έγγξαθν XML ζα έρνπκε <contact fax="555-667788">.ην έγγξαθν XML κπνξνχκε λα έρνπκε <note priority= high"> ή κπνξνπκε λα ερνπκε <note priority= standard"> ή <note priority= low"> φπσο επίζεο θαη λα έρεη κηα ζηαζεξή ηηκή. Πσο νξίδεηαη έλα entity: <!ENTITY writer Albert Camus > <!ENTITY copyright Copyright 1962 >ην έγγξαθν XML κπνξνχκε λα έρνπκε <author>&writer;&copyright;</author> Πσο νξίδνπκε ελα element: <!ELEMENT element-name (element-content)> Παξάδεηγκα: Δπίζεο κπνξνχκε λα νξίζνπκε ηελ θπξηαξρία ησλ elements ζε έλα xml. <!ELEMENT note (to, from, subject, body)> <!ELEMENT to (#CDATA)> <!ELEMENT from (#CDATA)> <!ELEMENT subject (#CDATA)> <!ELEMENT body (#CDATA)> Οπσο επηζεο νξηδνληαο ζπλδπαζκνπο ησλ αλσηέξσ <!ELEMENT note (to+, from, subject, message*)>. Σελίδα -50

Κεθάλαιο 3 Μεθοδολογία 3.1: Ρςθμίζειρ βάζηρ δεδομένυν Η εθαξκνγή βαζίδεηε ζε κηα βάζε δεδνκέλσλ MYSQL, απφ ηελ νπνία θαηαρσξνχληαη δηάθνξεο εγγξαθέο. Η βάζε δεδνκέλσλ απνηειείηε απφ 2 tables. Σα ηξία tables εκθαλίδνληαη ζηελ παξαθάησ εηθφλα: 1. deltia πνπ εθεί απνζεθεχνληαη νη θιεξψζεηο πνπ έρνπλ παίμεη νη ρξήζηεο. 2. Σν table users φπνπ απνζεθεχνληαη νη ρξήζηεο φηαλ θάλνπλ εγγξαθή. Σελίδα -51

1. Table deltia Παξαθάησ ε εηθφλα απεηθνλίδεη ηελ δνκή ηνπ table deltia: ην table deltia φηαλ ν ρξήζηεο έρεη επηιέμεη λα απνζεθεπηή ε θιήξσζή ηνπ ηφηε εηζάγεηε κηα λέα εγγξαθή ζην table. Αλαιπηηθά ην table απνηειείηε απφ: id: Απνζεθεχεηε ν αχμσλ αξηζκφο γηα θάζε εγγξαθή φπνπ είλαη θαη κνλαδηθφο user_id: είλαη ν αχμσλ αξηζκφο ηνπ θάζε ρξήζηε draw_no: Δίλαη ν αξηζκφο θιήξσζεο πνπ έρεη επηιέμεη ν ρξήζηεο numbers: είλαη πνηνπο αξηζκνχο έρεη παίμεη ν ρξήζηεο polaplasiasths: Δίλαη ν πνιιαπιαζηαζηήο πνπ έρεη επηιέμεη ν ρξήζηεο sinexomenes: Δίλαη πφζεο ζπλερφκελεο θιεξψζεηο έρεη παίμεη bonus: Απνζεθεχεηε ε ηηκή 1 εάλ ν ρξήζηεο έρεη επηιέμεη kino bonus αιιηψο 0. total_paid: Δίλαη ηα ζπλνιηθά ρξήκαηα πνπ πιήξσζε ν ρξήζηεο γηα ηελ θιήξσζε total_won: Δίλαη ηα ζπλνιηθά ρξήκαηα πνπ θέξδηζε ν ρξήζηεο date: Απνζεθεχεηε ε εκεξνκελία πνπ έπαημε ηελ θιήξσζε Σελίδα -52

2. Table users Παξαθάησ ε εηθφλα απεηθνλίδεη ηελ δνκή ηνπ table deltia: ην table users απνζεθεχνληαη νη ρξήζηεο ηεο εθαξκνγήο. Όηαλ ν ρξήζηεο έρεη ζπκπιήξσζε ηελ θφξκα εγγξαθήο γίλεηε ε εηζαγσγή ησλ ζηνηρείσλ θαη φηαλ ν ρξήζηεο θάλεη πξνζπάζεηα εηζφδνπο ζηελ ηζηνζειίδα, ειέγρνληαη ηα ζηνηρεία πνπ εηζάγαγε κε απηά ηνπ table. Αλαιπηηθά ην table απνηειείηε απφ: id: Απνζεθεχεηε ν αχμσλ αξηζκφο γηα θάζε ρξήζηε φπνπ είλαη θαη κνλαδηθφο username: Δίλαη ην φλνκα ρξήζηε πνπ έρεη εηζάγεη ζηελ θφξκα password: Δίλαη ν θσδηθφο πνπ έρεη εηζάγεη ζηελ θφξκα salt: To salt είλαη επηπξφζζεηα δεδνκέλα ηα νπνία θάλνπλ ησλ θσδηθφ πξφζβαζεο πην δχζθνιν λα ηνλ απνθξππηνγξαθήζνπλ name: Δίλαη ην φλνκα πνπ έρεη εηζάγεη ζηελ θφξκα email: Δίλαη ην email πνπ έρεη εηζάγεη ζηελ θφξκα joined: Απνζεθεχεηε ε εκεξνκελία εγγξαθήο ηνπ ρξήζηε isactive: Αξρηθά θαηά ηελ εγγξαθή ηνπ ρξήζηε απνζεθεχεηε ε ηηκή 0 θαη κφιηο θάλεη επηβεβαίσζε email ε ηηκή 1 md5: Δίλαη κηα unique md5 ζπκβνινζεηξά φπνπ ρξεζηκνπνηείηε κφλν ζηελ επηβεβαίσζε ηνπ email Σελίδα -53

3.2: Ππογπάμμαηα Σα πξνγξάκκαηα γηα ηελ πινπνίεζε ηεο web εθαξκνγήο πνπ ρξεζηκνπνηήζεθαλ είλαη ηα εμήο: 1. XAMPP 1.1. APACHE (web server service) 1.2. PHP (server language) 1.3. MYSQL (database language) 1.4. PHPMYADMIN (database management) 2. SUBLIME TEXT 3 (text editor) 3. ADOBE PHOTOSHOP (photo editor) 3.3: Γομή εθαπμογήρ Η παξαθάησ εηθφλα εκθαλίδεη ηελ δνκή ηεο εθαξκνγήο : + assets + css + fonts + js + img + classes + Facebook + Functions + Pages index.php Σελίδα -54

Κεθάλαιο 4 σεδίαζη και καηαζκεςή Ιζηοζελίδαρ 4.1: Διζαγυγή Η εθαξκνγή είλαη responsive, ρξεζηκνπνηψληαο ην css framework bootstrap ( 1 ). Δπίζεο έρνπκε ρξεζηκνπνίεζε θάπνηα βνεζεηηθά php CLASSES γηα ηελ αλάπηπμε ηεο php ζηελ εθαξκνγή φπσο θαη γηα ηελ πινπνίεζε ηνπ login απφ κία ζεηξά video tutorials απφ ην θαλάιη ζην youtube.com CodeCourse ( 2 ). Σελ βηβιηνζήθε jquery γηα ηελ πινπνίεζε ηεο javascript ( 3 ). Γηα λα εκθαλίδεηε έλα εκεξνιφγην ζην πεδίν date ην πξφζζεην jqueryui( 4 ). Γηα λα δείμνπκε γξαθήκαηα ζηηο ζηαηηζηηθέο έρνπκε ρξεζηκνπνίεζε ην jquery plugin jquery.canvasjs( 5 ). Γηα ηελ ιεηηνπξγία ηεο εηζφδνπ κέζσ facebook ρξεζηκνπνηήζακε Facebook SDK v5 for PHP( 6 ). Σέινο ρξεζηκνπνηήζακε γηα εηθνλίδηα ηελ online γξακκαηνζεηξά font- awesome( 7 ). 4.2: Δκκίνηζη Δθαπμογήρ Σν πξψην αξρείν πνπ «εκτελείτε» θαη ζπκπεξηιακβάλεηε ζε φιεο ηηο ζειίδεο είλαη ην config.php φπνπ εθεί ζπκπεξηιακβάλνληαη (include) φια ηα απαξαίηεηα αξρεία θαη θαζνξίδνπκε θάπνηεο απαξαίηεηεο κεηαβιεηέο γηα ηελ ζσζηή ιεηηνπξγία ηεο εθαξκνγήο. π.ρ εάλ δελ ζέινπκε ην root ηνπ site λα κελ είλαη απιά ζην localhost/ ηφηε έρνπκε θαζνξίζεη ηελ κεηαβιεηή BASE_URL ζην root ηνπ site ψζηε λα θάλνπκε include αξρεία HTML,JS.. θαη λα κελ ραιάεη ε ηνπνζεζία define('base_url', 'http://localhost/ss/'); ψζηε ζηε HTML αξγφηεξα ζε φια ηα url αληί λα γξάθνπκε localhost θάλνπκε echo ηελ κεηαβιεηή απφ ην config.php BASE_URL έηζη δελ ραιάεη ε δηαδξνκή ηεο δηεχζπλζεο (url). <link rel="stylesheet" href="<?=base_url?>assets/css/main.css"> <a href="<?=base_url?>">αρτική</a></li> Όιεο νη ζειίδεο πνπ έρνπκε ζηελ εθαξκνγή είλαη δπλακηθέο. Γειαδή έρνπκε έλα αξρείν, ην index.php θαη κε απηφ ην αξρείν «υορτώνοσμε» ηελ αλάινγε ζειίδα, αλάινγα ην url. Δπεηδή έρνπκε έλα θνηλφ (ίδην) κελνχ πινήγεζεο θαη γηα λα κελ μαλαγξάθνπκε ζε θάζε ζειίδα πνπ ζα θηηάμνπκε απφ ην <hmtl><head> </head><body><nav>.</nav>.. </body></html> Έρνπκε εθκεηαιιεπηεί ηελ php superglobal $_GET θαη ζηελ δηθηά καο πεξίπησζε έρνπκε δψζεη φλνκα action $_GET["action"]. Δάλ δελ ππάξρεη ζηελ δηεχζπλζε ην $_GET action (διδ είλαη http://localhost) ζπκπεξηιακβάλνπκε ηελ ζειίδα home.php απφ ην θάθειν pages. Δάλ έρεη $_GET action (δειαδή είλαη http://localhost/index.php?action=contact) ηφηε ζπκπεξηιακβάλνπκε γηα πεξηερφκελν ηεο ζειίδαο ην αξρείν contact.php πνπ βξίζθεηε ζην θάθειν pages. Δάλ δελ ππάξρεη απηφ ην αξρείν δείρλνπκε κηα 404 not found ζειίδα. Σελίδα -55

4.3: Απσική ελίδα Όηαλ ν ρξήζηεο επηζθεθηεί ηελ αξρηθή ζειίδα ηεο εθαξκνγήο καο, βιέπεη ην κελνχ πινήγεζεο (navigation bar) φπνπ κπνξεί λα πινεγήζεη ζηηο ππφινηπεο ζειίδεο ηεο ηζηνζειίδαο, φπσο θαη λα κπεη ζηελ θφξκα εγγξαθήο ή εηζφδνπ). ην θχξην «περιετόμενο» ηεο ζειίδαο κπνξεί λα δεη: Σελ ηειεπηαία θιήξσζε ηνπ παηρληδηνχ ηνπ ΟΠΑΠ ΚΙΝΟ Σνπο θαιχηεξνπο ή ρεηξφηεξνπο αξηζκνχο ηεο ηειεπηαίαο εκέξαο Σνπο αξηζκνχο κε θαζπζηέξεζε ηεο ηειεπηαίαο εκέξαο πλνιηθνχο αξηζκνχο θιεξψζεσλ θαη ζπλνιηθνί αξηζκνί πνπ έρνπλ θιεξσζεί Παξαθάησ είλαη ε εηθφλα ηεο αξρηθήο ζειίδαο: Σελίδα -56

4.3.1: Φόπμα εγγπαθήρ Η θφξκα εγγξαθήο ηνπ ρξήζηε απνηειείηε απφ ηα παξαθάησ πεδία Όλνκα Email Όλνκα Υξήζηε Κσδηθφ Όηαλ ν ρξήζηεο ζπκπιεξψλεη ηελ θφξκα εγγξαθήο θαη ηελ ππνβάιεη ηφηε επικσρώνοσμε» - ειέγρνπκε ηα πεδία ηεο θφξκαο δειαδή εάλ έρνπλ ηα απαξαίηεηα ςεθία, έρνπλ ηελ θαηάιιειε κνξθή, ή εάλ δελ ππάξρεη ν ρξήζηεο ή ην email ζηελ βάζε. Όηαλ πεξάζεη ηελ επηθχξσζε ηφηε εηζάγνπκε ηελ εγγξαθή ηνπ ζηελ βάζε δεδνκέλσλ θαη έρνπκε έλαλ θαηλνχξγην ρξήζηε. Σα πεδία ζηελ βάζε δεδνκέλσλ κε έλαλ ρξήζηε Id Username Password Salt Name Email Joined isactive Md5 1 user11 e6f469543c9d2 6a572e5596ab5 4870fac789645 8b4a2dabce1fb 8f8168bc7f95 9ï ÿ 2 «õªœˆáb &võä- LÈ á Myname mymail@exa mple.com 01-08-2015 17:52:59 0 abd815286ba 1007abfbb84 15b83ae2cf ë$ü Καηά ηελ εγγξαθή ηνπ ρξήζηε παίξλνπκε εθηφο απφ ηα πεδία ηεο θφξκαο, ηελ ηφηε εκεξνκελία, θάλνπκε generate έλαλ ηπραίν md5 θαη βάδνπκε ηελ ηηκή 0 ζην πεδίν isactive ψζηε ν ρξήζηεο εμαξρήο λα κελ είλαη ελεξγνπνηεκέλν επηβεβαησκέλν account. Μεηά ηελ εγγξαθή ηνπ ρξήζηε θαη πξηλ ηελ πξψηε ηνπ είζνδν πξέπεη λα επηβεβαηψζνπκε ην email ηνπ. ηέιλνπκε έλα email ζην email πνπ έρεη ζπκπιεξψζεη ν ρξήζηεο έλα ζχλδεζκν επηβεβαίσζεο Παξάδεηγκα ζπλδέζκνπ: http://localhost/confirm.php?email=mymail@example.com&hash=abd815286ba1007abfbb8415b83a e2cf Σελίδα -57

ην αξρείν confirm.php ειέγρνπκε ηηο κεηαβιεηέο ζην url, email θαη hash ψζηε λα είλαη ίδηεο κε απηέο ζηελ βάζε δεδνκέλσλ θαη ηφηε θάλνπκε mysql UPDATE ην πεδίν isactive 1 ψζηε ην account ηνπ ρξήζηε λα γίλεη ελεξγνπνηεκέλν. 4.3.2: Φόπμα ειζόδος Η θφξκα εηζφδνπ έρεη ηα παξαθάησ πεδία: 1. Όλνκα ρξήζηε 2. Κσδηθφ Όηαλ ν ρξήζηεο πιεθηξνιφγεζε ην φλνκα ρξήζηε, ηνλ θσδηθφ πξφζβαζε θαη ππνβάιεη ηελ θφξκα ηφηε ην πξψην πξάγκα πνπ ειέγρνπκε είλαη εάλ ηα ζηνηρεία πνπ έρεη δψζεη είλαη ίδηα ηαηξηάδνπλ κε απηά ηεο βάζεο δεδνκέλσλ κεηά ειέγρνπκε είλαη εάλ ν ινγαξηαζκφο ηνπ είλαη ελεξγνπνηεκέλνο (εάλ ην πεδίν isactive είλαη 1) θαη ζέηνπκε SESSION - ηνλ θάλνπκε είζνδν. 4.3.3: Δίζοδο με Facebook Σν Facebook SDK αθφηνπ έρνπκε θηηάμεη έλα Facebook app θαη έρνπκε ηα app_id, app_secret, default_graph_version, κπνξνχκε λα θάλνπκε εθθίλεζε ηνπ script θαη λα καο δψζεη ηνλ ζχλδεζκν γηα ηελ είζνδν ζηελ ηζηνζειίδα κέζσ facebook.com Αθνχ γίλεη ε είζνδν κέζσ Facebook κε επηηπρία, ν ρξήζηεο καο έρεη δψζεη ην email, θαη ην νλνκαηεπψλπκν πνπ έρεη βάιεη ζην Facebook. Δκείο παίξλνπκε ην email ηνπ θαη ειέγρνπκε εάλ δελ ππάξρεη ζηελ βάζε δεδνκέλσλ θαη θάλνπκε εηζαγσγή λέαο εγγξαθήο ζηελ βάζε - λένπ ρξήζηε. Σελίδα -58

4.3.4 Σελεςηαία κλήπυζη κίνο Έλα απφ ηα web services ηνπ ΟΠΑΠ είλαη λα καο δίλεη έλαλ ζχλδεζκν γηα ηα απνηειέζκαηα ηεο πην πξφζθαηεο θιήξσζεο 1 ιεπηφ αξγφηεξα απφ ηα πξαθηνξεία. http://applications.opap.gr/drawsrestservices/kino/last.xml H Μνξθή ηνπ XML είλαη: drawno είλαη ν αξηζκφο ηεο ηειεπηαίαο θιήξσζεο drawtime είλαη ε εκεξνκελία θαη ψξα ηεο θιήξσζεο result είλαη νη αξηζκνί πνπ έρνπλ θεξδίζεη ζε απηήλ-ηειεπηαία θιήξσζε Με ηελ γιψζζα πξνγξακκαηηζκνχ php παίξλνπκε ην πεξηερφκελν ηνπ xml ζε κηα κεηαβιεηή. ην hmtl αληί λα δείρλνπκε κφλν ηνπο αξηζκνχο πνπ θέξδηζαλ, δείρλνπκε φινπο ηνπο αξηζκνχο απφ ην 1 κέρξη θαη ην 80 θαη απιά φηαλ ν αξηζκφο έρεη θεξδίζεη ην html element παίξλεη έλα class (ηνλ θάλεη θίηξηλν) θαη ηνλ ηειεπηαίν αξηζκφ απφ ην xml πνπ είλαη ην Kinobonus (ηνλ θάλεη θφθθηλν). Σελίδα -59

4.3.5: Καλύηεποι Υειπόηεποι ημεπήζιοι απιθμοί Έλα άιιν απφ ηα web services ηνπ ΟΠΑΠ είλαη λα καο δίλεη έλαλ ζχλδεζκν γηα απνηειέζκαηα βάζεη εκεξνκελίαο, εκείο παίξλνπκε απφ ηελ ηειεπηαία θιήξσζε ηελ ηηκή drawtime ηελ εκεξνκελία, θαη βάζεη απηήο δείρλνπκε ηνπο θαιχηεξνπο θαη ρεηξφηεξνπο εκεξήζηνπο αξηζκνχο. http://applications.opap.gr/drawsrestservices/kino/drawdate/28-12-2015.xml H Μνξθή ηνπ XML είλαη: Σελίδα -60

draws είλαη φιεο νη θιεξψζεηο ηεο ζπγθεθξηκέλεο εκεξνκελίαο draw είλαη κηα-κηα νη θιεξψζεηο drawno είλαη ν αξηζκφο ηεο ηειεπηαίαο θιήξσζεο drawtime είλαη ε εκεξνκελία θαη ψξα ηεο θιήξσζεο result είλαη νη αξηζκνί πνπ έρνπλ θεξδίζεη ζε απηήλ-ηειεπηαία θιήξσζε Με ηελ γιψζζα πξνγξακκαηηζκνχ php παίξλνπκε ην πεξηερφκελν ηνπ xml ζε κηα κεηαβιεηή. ην html παίξλνπκε ηα ζχλνια ησλ αξηζκψλ απφ ην xml θαη δείρλνπκε ηνπο αξηζκνχο πνπ θέξδηζαλ θαη ην ζχλνιν ησλ εκθαλίζεσλ εκεξεζίσο. 4.3.6: Απιθμοί με καθςζηέπηζη Σν ίδην web service κε ηνπο θαιχηεξνπο-ρεηξφηεξνπο αξηζκνχο (ηεο ηειεπηαίαο εκέξαο) ρξεζηκνπνηνχκε θαη ζην λα δείμνπκε ηνπο αξηζκνχο κε θαζπζηέξεζε. ηνπο αξηζκνχο κε θαζπζηέξεζε παίξλνπκε ηελ ηειεπηαία εκεξνκελία θιήξσζεο θαη παίξλνπκε ηα δεδνκέλα κε php απφ ην xml ηνπ ΟΠΑΠ αλά εκεξνκελία θαη δείρλνπκε ηνπο αξηζκνχο κε θαζπζηέξεζε πάλσ απφ 8 θνξέο, δειαδή έρνπλ λα θεξδίζνπλ πάλσ απφ 8 θνξέο ζήκεξα. Σελίδα -61

4.4: ηαηιζηικέρ ελίδα Η ειίδα ησλ ζηαηηζηηθψλ δίλνπκε ζην ρξήζηε λα επηιέμεη κηα εκεξνκελία πνπ έρεη παίμεη ην θίλν θαη λα ηνπ δείμνπκε ηα παξαθάησ: 1. Όιεο ηηο θιεξψζεηο ηεο ζπγθεθξηκέλεο εκεξνκελίαο 2. ε έλα δηάγξακκα ηνπο αξηζκνχο ηεο εκεξνκελίαο πνπ έρεη επηιέμεη 3. Σνπο θαιχηεξνπο θαη ρεηξφηεξνπο αξηζκνχο ηεο εκεξνκελίαο πνπ έρεη επηιέμεη Παξαθάησ εκθαλίδεηε ε εηθφλα ηεο ζειίδαο κε ηα ζηαηηζηηθά Σελίδα -62

4.5: Γοκιμή ζςνδςαζμών Η ειίδα κε ηελ δνθηκή ζπλδπαζκψλ δίλνπκε ηελ δπλαηφηεηα ζηνλ ρξήζηε λα δεη εάλ θέξδηζε ζην δειηίν πνπ έρεη παίμεη ή θαη λα δνθηκάζεη θάπνηνπο αξηζκνχο ζε θάπνηα ζπγθεθξηκέλε θιήξσζε θαη ηνπ εκθαλίδνπκε αλαιπηηθά ηα θέξδε ηνπ. Έρνπκε θηηάμεη κία HTML θφξκα πνπ δεηάκε ζην ρξήζηε ηα παξαθάησ πεδία: 1. Αξηζκφ θιήξσζεο 2. Αξηζκνχο επηινγήο ηνπ 3. Πνιιαπιαζηαζηή 4. πλερφκελεο θιεξψζεηο 5. Δάλ επηζπκεί kino bonus Σελίδα -63

Η κνξθή ηεο θφξκαο γηα ηελ εκθαλίζνπκε πην «υιλική» πξνο ηνλ ρξήζηε έρνπκε ρξεζηκνπνίεζε CSS. Ο θάζε έλαο αξηζκφο απφ ηελ παξαπάλσ θφξκα είλαη HTML tag <checkbox> πνπ ην θάζε έλα έρεη θαη ην <label> ηνπ. Παξαθάησ είλαη ην HTML ηνπ αξηζκνχ 26 : <input id="26" type="checkbox" class="kino-numbers-class" name="numbers[]" value="26"> <label for="26">26</label> Δάλ έρνπκε βάιεη ην for attribute ζην element <label> ηφηε εάλ θάλνπκε θιηθ πάλσ ζην label ην checkbox επηιέγεηε. Έηζη έρνπκε εθκεηαιιεπηή απηήλ ηελ δπλαηφηεηα θαη έρνπκε θάλεη display:none ηα input elements φισλ ησλ checkbox θαη έρνπκε αθήζεη κφλν ηα label απηψλ λα θαίλνληαη ζηελ ηζηνζειίδα θαη έρνπκε κνξθνπνίεζε ηα labels λα δείρλνπλ θνπηάθηα. Σψξα εάλ θάλεη θάπνηνο θιίθ έλα label ην αλάινγν checkbox ζα επηιερηεί, θαη κε ην advanced css selector + ηνπ ιέκε φηαλ είλαη ην checkbox επηιεγκέλν λα βάιεη background ζην θνπηάθη ηνπ label ψζηε λα θαίλεηαη επηιεγκέλν. Css selector πνπ βάιακε:.deltio-labels input: checked + label { } background: rgba(43, 53, 134, 0.94); color: #FFF; Καηά ηελ ππνβνιή ηεο θφξκαο δνθηκήο αξηζκψλ ηα απνηειέζκαηα κε δείρλνπκε κε (Asynchronous JavaScript and XML). Ajax ην αξρείν php πνπ δίλνπκε ηα δεδνκέλα απφ ηελ θφξκα, θάλνπκε έιεγρν εάλ θέξδηζε ηελ/ηηο θιεξψζεηο πνπ έρεη επηιέμεη ν ρξήζηεο. Σελίδα -64

4.6 σεδιάγπαμμα ηηρ ιζηοζελίδαρ-γιαδικαζία Υπήζηρ Παξαθάησ είλαη ε δηαδηθαζία πνπ γίλεηε γηα ηελ εκθάληζε νπνηαζδήπνηε ζειίδαο ηεο εθαξκνγήο. Σα αξρεία ησλ θαθέισλ functions γίλνληαη include ζην config.php, ηα αξρεία ηνπ θαθέινπ classes θνξηψλνληαη απηφκαηα εάλ νπνπδήπνηε ζην script θαιέζνπκε θάπνην απφ απηά, θαη απφ ην θάθειν Facebook γίλεηε Include ην autoload πνπ έρεη ην Facebook SDK for PHP. Functions classes Facebook config.php Tν αξρείν config.php ΠΡΔΠΔΙ λα κπαίλεη ζε θάζε αξρείν ηεο εθαξκνγήο καο δηφηη εθεί θαινχληαη φια ηα απαξαίηεηα πξάγκαηα γηα λα ηξέμεη ζσζηά ε εθαξκνγή. ην Αξρείν config.php επίζεο έρνπκε θξνληίζεη λα ππάξρεη κηα κεηαβιεηή γηα λα έρνπκε φιεο ηηο ξπζκίζεηο ηνπ site ψζηε φηαλ ζειήζνπκε λα αιιάμνπκε πρ ηνλ θσδηθφ γηα ηελ βάζε δεδνκέλσλ λα έρνπκε απηέο ηηο πιεξνθνξίεο ζε έλα αξρείν, θαη ζηα αξρεία πνπ ζα δεκηνπξγήζνπκε αξγφηεξα λα ρξεζηκνπνηνχκε ηελ κεηαβιεηή global config : $GLOBALS['config'] = array( 'mysql' => array( 'host' => localhost', 'username' => root, 'password' => mypassword', 'db' => 'onomabashs_dedomenon' ), 'session' => array( 'session_name' => 'usersz', 'token_name' => 'tokens' ), 'facebook' => array( 'app_id' => '579166775571933', 'app_secret' => '30cf87b6d5926f181yb5d1fa117a6d3c', 'default_graph_version' => 'v2.5' ) ); Σελίδα -65

ρεδηάγξακκα ζειίδαο: database Φακζλοι functions classes Facebook config.php pages... index.php Φυλομετρητής (Τελική ιστοσελίδα) Σελίδα -66

Κεθάλαιο 5 Μελλονηική σπήζη και επέκηαζη Η ζπγθεθξηκέλε πηπρηαθή εξγαζία κπνξεί λα θαλεί ρξήζηκε ζε νπνηνλδήπνηε πνπ ζέιεη λα δεκηνπξγήζεη θάπνην site είηε νπνηνλδήπνηε ζειήζεη λα μεθηλήζεη απφ κηα ηδεα λα δεκηνπξγήζεη ην δηθφ ηνπ site.δπίζεο κπνξεί λα ρξεζηκνπνηεζεί επαγγεικαηηθά κε δηάθνξεο ηξνπνπνηήζεηο πξνζθέξνληαο λέεο δπλαηφηεηεο. Δπίζεο ζην κέιινλ ίζσο ππάξρεη δπλαηφηεηα λα κπνξεί ν παίρηεο λα παίμεη online ην ηπρεξφ παηρλίδη Kino θαη λα ρξεψλεηαη κέζσ πηζησηηθήο θάξηαο,paypal θιπ...έηζη ν παίρηεο δελ ρξεηάδεηαη λα πεγαίλεη ζην πξαθηνξείν γηα λα παίμεη ην ηπρεξφ παηρλίδη αιιά ζα κπνξεί απφ φπνην ρψξν βξίζθεηαη αξθεί λα έρεη ηε δπλαηφηεηα ζχλδεζεο ζην δηαδίθηπν. 5.1 Απαιηήζειρ ζςζηήμαηορ Σαρχηεηα 128 kb/s θαη άλσ Ram 128 mb θαη άλσ Φπιινκεηξηηή Mozilla Firefox, google chrome, internet explorer ( ελεκεξσκέλνπο ) Σελίδα -67

ΒΙΒΛΙΟΓΡΑΦΙΑ [1] 1) CSS FRAMEWORK BOOTSTRAP http://getbootstrap.com/, ρξεζηκνπνηήζεθε γηα ην style ηεο ηζηνζειίδαο θαη ην responsive. 2) PHP CLASSES απφ ην θαλάιη Codecourse https://www.youtube.com/channel/ucpoiuw62tnjttpwfabxwz8g 3) jquery (javascript βηβιηνζήθε) http://jquery.com/ 4) jqueryui (jquery addon) http://jqueryui.com/ 5) jquery canvasjs - jquery plugin http://canvasjs.com/ 6) PHP Facebook SDK v5 https://developers.facebook.com/docs/reference/php 7) Font awesome http://fortawesome.github.io/font-awesome/ 8) YouTube http://www.youtube.com/ 9) Google https://www.google.gr/ 10) http://el.wikipedia.org/wiki/php 11) http://en.wikipedia.org/wiki/phpmyadmin 12) http://el.wikipedia.org/wiki/css 13) http://el.wikipedia.org/wiki/mysql 14) https://el.wikipedia.org/wiki/html 15) http://www.davesite.com/webstation/html 16) Σελίδα -68