ΥΔΓΙΑΜΟ, ΚΑΣΑΚΔΤΗ ΚΑΙ ΑΝΑΠΣΤΞΗ ΗΛΔΚΣΡΟΝΙΚΟΤ ΚΑΣΑΣΗΜΑΣΟ,ONLINE ΒΙΒΛΙΟΠΩΛΔΙΟ.

Transcript

1 Σ.Δ.Η ΘΔΑΛΟΝΗΚΖ ΥΟΛΖ ΣΔΥΝΟΛΟΓΗΚΩΝ ΔΦΑΡΜΟΓΩΝ ΣΜΖΜΑ ΠΛΖΡΟΦΟΡΗΚΖ ΥΔΓΙΑΜΟ, ΚΑΣΑΚΔΤΗ ΚΑΙ ΑΝΑΠΣΤΞΗ ΗΛΔΚΣΡΟΝΙΚΟΤ ΚΑΣΑΣΗΜΑΣΟ,ONLINE ΒΙΒΛΙΟΠΩΛΔΙΟ. Σεο θνηηήηξηαο Σζηγάξα Δπζπκία Αξ. Μεηξψνπ: 07/3198 Δπηβιέπσλ θαζεγεηήο Κεξακφπνπινο Δπθιείδεο Θεσσαλονίκη 2013

2 Δπραξηζηίεο Θα ήζεια λα επραξηζηήζσ φινπο φζνπο κε βνήζεζαλ, κε ζηήξημαλ, ζπκκεηείραλ θαη ζπλέβαιαλ ζηελ πξνζπάζεηα κνπ γηα ηελ νινθιήξσζε ηεο πηπρηαθήο κνπ εξγαζίαο. Ωο ειάρηζην δείγκα επγλσκνζχλεο ζέισ λα επραξηζηήζσ ηνλ επηβιέπνληα θαζεγεηή κνπ θ. Κεξακφπνπιν Δπθιείδε πνπ δέρζεθε θαη κνπ έδσζε ηελ επθαηξία λα αλαιάβσ ηελ εθπφλεζε απηήο ηεο πηπρηαθήο. Σνλ επραξηζηψ επίζεο γηα ηελ πνιχηηκε βνήζεηα θαη θαζνδήγεζε ηνπ, φπσο επίζεο θαη γηα ηελ άξηζηε ζπλεξγαζία πνπ είρακε. Δπίζεο ζέισ λα επραξηζηήζσ ηελ νηθνγέλεηα κνπ πνπ κε έρεη ζηεξίμεη φια απηά ηα ρξφληα, εζηθά θαη νηθνλνκηθά θαη πνπ είλαη πάληα δίπια κνπ ζε θάζε πξνζπάζεηα κνπ. Σελίδα 2 από 91

3 Πξφινγνο Σα ειεθηξνληθά θαηαζηήκαηα (e-shops) θεξδίδνπλ φιν θαη πεξηζζφηεξν ηνπο ρξήζηεο ηνπ δηαδηθηχνπ. Αλ θαη ζηελ αξρή νη άλζξσπνη ήηαλ θάπσο δηζηαθηηθνί κε ηηο αγνξνπσιεζίεο κέζσ ησλ ειεθηξνληθψλ θαηαζηεκάησλ ζήκεξα βιέπνπκε φιν θαη πεξηζζφηεξνπο ρξήζηεο λα ηα εκπηζηεχνληαη. Σα ειεθηξνληθά θαηαζηήκαηα πξνζθέξνπλ ρηιηάδεο πξντφληα ζε πνιχ ρακειέο ηηκέο θαη είλαη δηαζέζηκα ζηνπο πειάηεο ζε 24σξε βάζε θαη γηα 365 κέξεο εηεζίσο. Όπσο ραξαθηεξηζηηθά έρεη πεη ν Μπηι Γθέηηο: "Σν Γηαδίθηπν δελ είλαη απιψο άιιν έλα θαλάιη πσιήζεσλ. Θα κεηαζρεκαηίζεη ηελ επηρείξεζή ζαο. Ζ κειινληηθή επηρείξεζε ζα ιεηηνπξγεί κε έλα ςεθηαθφ λεπξηθφ ζχζηεκα". Με ιίγα ιφγηα: Πσιήζεηο ζε νπνηνλδήπνηε, νπνπδήπνηε, νπνηεδήπνηε. Σελίδα 3 από 91

4 Abstract The electronic shops (e-shops) are gaining more and more Internet users. Although at first the people were somewhat hesitant to buying and selling through online stores now seeing more and more users to trust them. Online stores offer thousands of products at very low prices and are available to customers 24 hours a day and 365 days a year. As features have been told by Bill Gates: "The Internet is not just another sales channel. Would transform your business.'s Future business will operate a digital nervous system." In a nutshell: Sales to anyone, anywhere,anytime. Σελίδα 4 από 91

5 Πίλαθαο πεξηερνκέλσλ Δπραξηζηίεο... 2 Πξφινγνο... 3 Abstract... 4 Κεθάιαην 1: Δηζαγσγή ηφρνο πηπρηαθήο εξγαζίαο Δπίηεπμε ζηφρνπ ηαηηθέο Ηζηνζειίδεο Γπλακηθέο Ηζηνζειίδεο Δπίινγνο ΚΔΦΑΛΑΗΟ 2 : HTML Ση είλαη ε HTML Ζ ηζηνξία ηεο HTML Δθδφζεηο ηεο HTML Ζ δνκή ηεο HTML Ση είλαη νη εηηθέηεο Βαζηθέο εηηθέηεο ηεο HTML Γεκηνπξγία αξρείσλ HTML Δπίινγνο Κεθάιαην 3 : CSS Ση είλαη ην CSS Ζ ηζηνξία ηνπ CSS χληαμε ηνπ CSS Δπίινγνο Σελίδα 5 από 91

6 Κεθάιαην 4: PHP Ση είλαη ε php Ζ ηζηνξία ηεο PHP Δθδφζεηο ηεο PHP Πσο ιεηηνπξγεί ε PHP Ση είλαη ν WAMP server Hypertext Transfer Protocol (HTTP) Δπίινγνο Κεθάιαην 5 : CMS Ση είλαη ην CMS Πιενλεθηήκαηα θαη κεηνλεθηήκαηα ηνπ CMS Σχπνη CMS Ζ ηζηνξία ηνπ CMS Πσο ιεηηνπξγεί ην CMS Δπίινγνο Κεθάιαην 6: Drupal Ση είλαη ην Drupal Ζ ηζηνξία ηνπ Drupal Ση είλαη απηφ πνπ θάλεη ην Drupal δηαθνξεηηθφ απφ ηα άιια CMS Γηαηί ην Drupal Δπίινγνο Κεθάιαην 7: Αλάιπζε ηεο εθαξκνγήο Δηζαγσγή Γεκηνπξγία ηνπ Theme Σελίδα 6 από 91

7 7.3 Μεηαηξέπνληαο ηνλ θψδηθα καο ζε δπλακηθφ Μνξθνπνίεζε ηεο ζειίδαο καο Δγθαηάζηαζε ηνπ Wamp Server θαη ηνπ Drupal Δγθαηάζηαζε βαζηθψλ Modules Δλεξγνπνίεζε Theme Δγθαηάζηαζε ηεο Ubercart Δηζαγσγή πξντφλησλ Γεκηνπξγία ζπιινγήο θσηνγξαθηψλ Αλαδήηεζε Γεκηνπξγία Log in θφξκαο Καιάζη αγνξψλ Γηαθνξεηηθνί ηχπνη ρξεζηψλ Πινήγεζε ζηελ εθαξκνγή Δπίινγνο Βηβιηνγξαθία Πεγέο Παξάξηεκα Πίνακας Εικόνων Δηθφλα 1: ηαηηθή Ηζηνζειίδα Δηθφλα 2: Σα ηξία επίπεδα κίαο ηζηνζειίδαο Δηθφλα 3 : Wamp Server Σελίδα 7 από 91

8 Δηθφλα 4: phpmyadmin Δηθφλα 5 : Δπηινγή πξνθίι ζην Drupal Δηθφλα 6 : Δπηινγή γιψζζαο ζην Drupal Δηθφλα 7: χλδεζε κε ηελ βάζε δεδνκέλσλ Δηθφλα 8: Δγθαηάζηαζε Drupal Δηθφλα 9: Σειεπηαίεο ξπζκίζεηο γηα ην Drupal Δηθφλα 10: Σέινο εγθαηάζηαζεο Δηθφλα 11 : Δκθάληζε ηεο ζειίδαο καο Δηθφλα 12: Ζ ζειίδα καο κεηά ηελ ελεξγνπνίεζε ησλ modules Δηθφλα 13: Ζ ζειίδαο καο κεηά ηελ ελεξγνπνίεζε ηνπ theme Δηθφλα 14: πιινγή θσηνγξαθηψλ Δηθφλα 15 : Δπηινγή πεδίσλ Δηθφλα 16: Γεκηνπξγία View Δηθφλα 17 : Γεκηνπξγία View Δηθφλα 18: Λεπηνκέξεηεο εηθφλαο Δηθφλα 19: Block πεξηνρέο Δηθφλα 20 : Απελεξγνπνηεκέλα Blocks Δηθφλα 21 : Φφξκα αλαδήηεζεο Δηθφλα 22 : Γεκηνπξγία Block Δηθφλα 23 : Γεκηνπξγία ζπλδέζκνπ Δηθφλα 24 : Απφθξπςε ηεο Shopping cart απφ ζπγθεθξηκέλεο ζειίδεο Δηθφλα 25 : Σχπνη ρξεζηψλ Δηθφλα 26 : Πξνζζήθε ξφισλ Δηθφλα 27 : Permissions Σελίδα 8 από 91

9 Δηθφλα 28 : Πξνζζήθε λένπ ρξήζηε Δηθφλα 29 : Αξρηθή ζειίδα ηεο εθαξκνγήο Δηθφλα 30 : Βηβιία Δηθφλα 31 : Δκθάληζε βηβιίσλ Δηθφλα 33 : Καιάζη αγνξψλ Δηθφλα 34 : Παξαγγειία Δηθφλα 35 : Έιεγρνο παξαγγειίαο Σελίδα 9 από 91

10 Κεθάιαην 1: Δηζαγσγή 1.1 ηόρνο πηπρηαθήο εξγαζίαο ηφρνο ηεο πηπρηαθήο εξγαζίαο είλαη ε δεκηνπξγία κίαο δπλακηθήο ηζηνζειίδαο, θαη ζπγθεθξηκέλα ηελ θαηαζθεπή ελφο ειεθηξνληθνχ θαηαζηήκαηνο πνπ πνπιάεη online βηβιία. Σν ειεθηξνληθφ θαηάζηεκα έρεη ζρεδηαζηεί γηα λα είλαη φζν ην δπλαηφ πην πξνζηηφ ζηνλ ρξήζηε, κε ζθνπφ λα ηνπ πξνζθέξεη αθξηβψο απηφ γηα ην νπνίν επηζθέθηεθε ην θαηάζηεκα, ρσξίο άζθνπεο πιεξνθνξίεο, πεξίπινθα κελνχ, θαη αδηέμνδα κνλνπάηηα ζηα νπνία ζα ράλεηαη. Θα κπνξεί κε απιέο θηλήζεηο λα πξαγκαηνπνηήζεη νπνηαδήπνηε αγνξά κε αζθάιεηα. Θα έρεη ηελ δπλαηφηεηα επίζεο λα αλαδεηήζεη βηβιία πνπ ηνλ ελδηαθέξνπλ, λα κάζεη ηελ πνιηηηθή πνπ θξαηάεη ε εηαηξία ζηνλ ηξφπν πιεξσκήο θαη επηζηξνθήο ησλ πξντφλησλ, φπσο επίζεο θαη ηελ δπλαηφηεηα επηθνηλσλίαο κε απηή. 1.2 Δπίηεπμε ζηόρνπ Με ηα θαηάιιεια εξγαιεία θαη κε έλα νινθιεξσκέλν ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ φπσο είλαη ην Drupal δεκηνπξγήζεθε έλα ειεθηξνληθφ θαηάζηεκα κε δπλακηθφ ραξαθηήξα. Υξεζηκνπνηήζεθε ε mysql θαη ε phpmyadmin γηα ηελ δηαρείξηζε ηεο βάζεο δεδνκέλσλ, ε html θαη css, φπσο επίζεο θαη ε php. 1.3 ηαηηθέο Ιζηνζειίδεο Οη ζηαηηθέο ηζηνζειίδεο φπσο καο πξντδεάδεη θαη ν φξνο, είλαη ζειίδεο ζην δηαδίθηπν νη νπνίεο είλαη «κφληκεο» δειαδή δελ αιιάδνπλ ζπρλά ην πεξηερφκελφ ηνπο. εκαίλεη φηη ην πεξηερφκελν ηεο θάζε ζειίδαο είλαη ζηαζεξφ θαη ζπγθεθξηκέλν. Πξφθεηηαη δειαδή γηα ζηαζεξά ειεθηξνληθά έγγξαθα. Ο ραξαθηεξηζκφο "ζηαηηθή", κπνξεί λα καο κπεξδεχεη θαη λα ζεσξνχκε φηη ηίπνηα ζηελ ζειίδα δελ θνπληέηαη, φκσο αληηζέησο κπνξεί λα Σελίδα 10 από 91

11 έρεη εθηφο απφ θείκελα θαη θσηνγξαθίεο, γξαθηθά, θηλνχκελα ζρέδηα (animated graphics), ζπλδέζκνπο, video, αξρεία γηα θαηέβαζκα. Μπνξνχλ λα ρξεζηκνπνηεζνχλ γηα δεκηνπξγία παξνπζηάζεσλ θαη πξνβνιή ζην δηαδίθηπν, κε ηελ πξνυπφζεζε φηη δελ ρξεηάδνληαη ζπρλά αιιαγέο θαη δελ ηξνπνπνηείηαη ην πεξηερφκελφ ηνπο. Γηα παξάδεηγκα, ζα κπνξνχζε λα ρξεζηκνπνηεζεί κηα ζηαηηθή ηζηνζειίδα γηα ηελ γεληθή παξνπζίαζε κηαο επηρείξεζεο θαη ησλ πξντφλησλ ή ππεξεζηψλ ηεο. Σν θχξην πξφβιεκα ηνπο είλαη φηαλ επηζπκνχκε ην πεξηερφκελν ηεο ηζηνζειίδαο λα αιιάδεη ζπρλά, π.ρ. ηνπιάρηζηνλ κία θνξά ηελ εβδνκάδα λα πξνζηίζεηαη θάπνην άξζξν, ή λα αιιάδνπλ ηα πξντφληα θηι. Απηφ ζπκβαίλεη γηαηί γηα λα ηξνπνπνηεζεί κηα ζηαηηθή ηζηνζειίδα, πξέπεη λα γίλνπλ επεκβάζεηο απεπζείαο πάλσ ζηελ ηζηνζειίδα, κε θάπνην ζρεηηθφ πξφγξακκα, κηα δηαδηθαζία πνπ πξέπεη λα γίλεη απφ άηνκν κε ζρεηηθή εκπεηξία. Μηα ζηαηηθή ζειίδα κπνξεί λα είλαη ρξήζηκε γηα κία επηρείξεζε ή έλα ηδηψηε πνπ απιά ζέιεη λα βξεζεί ζην δηαδίθηπν, κε ιίγεο κφλν ζειίδεο απφ πιεξνθνξίεο πνπ δελ αιιάδνπλ. Εικόνα 1: Σηαηική Ιζηοζελίδα Παξφιν πνπ γηα ηα ζεκεξηλά δεδνκέλα θαη απαηηήζεηο κπνξνχκε λα ηηο ραξαθηεξίζνπκε αλεπαξθείο, έρνπλ θάπνηα πιενλεθηήκαηα ζηα νπνία Σελίδα 11 από 91

12 νθείινπλ θαη ην γεγνλφο φηη δελ έρεη εγθαηαιεηθζεί ε ρξήζε ηνπο. Σα πην ζεκαληηθά πιενλεθηήκαηα είλαη: Υακειφηεξν θφζηνο θαηαζθεπήο. Σαρχηεξε δηεθπεξαίσζε. Απινχζηεξε δνκή. Υακειφηεξεο απαηηήζεηο hosting. Σαρχηεξε πεξηήγεζε αλάινγα κε ηνλ φγθν ησλ γξαθηθψλ. Παξφια απηά ππάξρνπλ θαη πνιχ ζεκαληηθά κεηνλεθηήκαηα: Απαηηείηαη παξέκβαζε πξνγξακκαηηζηή γηα ηελ ελεκέξσζή ηνπο. Αδπλακία αιιειεπίδξαζεο κε ηνλ επηζθέπηε (πεξηνξηζκέλν πεδίν ρξήζεο). Ζ δηαρείξηζε κεγάινπ αξηζκνχ ζηαηηθψλ ηζηνζειίδσλ δελ είλαη εχθνιε ρσξίο απηφκαηα εξγαιεία. ρεηηθή θαζπζηέξεζε ζηηο αλαλεψζεηο. 1.4 Γπλακηθέο Ιζηνζειίδεο Οη δπλακηθέο ηζηνζειίδεο, ζε αληίζεζε κε ηηο ζηαηηθέο ηζηνζειίδεο, δελ είλαη απιά HTML έγγξαθα, αιιά ζπκπεξηιακβάλνπλ πξνγξακκαηηζκφ (ζε κία γιψζζα πξνγξακκαηηζκνχ θαηάιιειε γηα ην δηαδίθηπν, φπσο π.ρ. είλαη ε php) θαη νπζηαζηηθά είλαη web εθαξκνγέο. Ζ θαηαζθεπή δπλακηθψλ ηζηνζειίδσλ είλαη πξνθαλψο πην πνιχπινθε απφ ηηο απιέο ζηαηηθέο ηζηνζειίδεο, θαη ν βαζκφο δπζθνιίαο ηνπο εμαξηάηαη θπζηθά απφ ηηο ιεηηνπξγίεο θαη ηηο δπλαηφηεηεο πνπ πεξηιακβάλεη ε εθάζηνηε web εθαξκνγή. ηηο δπλακηθέο ηζηνζειίδεο, ην πεξηερφκελν ηεο ηζηνζειίδαο, απνζεθεχεηαη θαη αληιείηαη δπλακηθά απφ κία ή πεξηζζφηεξεο βάζεηο δεδνκέλσλ (π.ρ. MySQL), ελψ δηαζέηνπλ εθηφο απφ ην frontend (user interface) θαη ην Σελίδα 12 από 91

13 backend (administration area) κέζσ ηνπ νπνίνπ γίλεηαη εχθνια ε δηαρείξηζε ηνπ πεξηερνκέλνπ ηεο ηζηνζειίδαο. Έηζη ζπλνιηθά ε web εθαξκνγή ζπλαληάηαη ζπλήζσο σο CMS (content managment system), δειαδή ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ. Σα πιενλεθηήκαηα ηεο ρξήζεο δπλακηθψλ ηζηνζειίδσλ είλαη: Γπλαηφηεηα άκεζεο επέκβαζεο θαη ηξνπνπνίεζεο πεξηερνκέλνπ ηζηνζειίδαο απφ ηνλ ηδηνθηήηε ή δηαρεηξηζηή ηεο. Γελ απαηηνχληαη ηδηαίηεξεο ππνινγηζηηθέο γλψζεηο γηα ηελ ζπληήξεζε πιηθνχ. Γελ ππάξρνπλ πεξηνξηζκνί ζηνλ φγθν πνπ κπνξεί λα απνθηήζεη έλαο ηζηφηνπνο. Δγθαηεζηεκέλε ηερλνγλσζία ζε παγθφζκην επίπεδν, αθνχ νη πιαηθφξκεο πνπ ρξεζηκνπνηνχληαη ζπλήζσο είλαη αλνηρηνχ θψδηθα. Διάρηζην θφζηνο ζπληήξεζεο. Σα κεηνλεθηήκαηα ησλ δπλακηθψλ ηζηνζειίδσλ είλαη: Τςειφ θφζηνο θαηαζθεπήο. Μεγάινο ρξφλνο θαηαζθεπήο. Γηα ηελ θαηαζθεπή ηεο απαηηεί πξνρσξεκέλεο γλψζεηο πξνγξακκαηηζκνχ. Μεγάιε πνιππινθφηεηα θψδηθα. Δπίινγνο Βιέπνπκε ινηπφλ φηη ππάξρνπλ νη ζηαηηθέο θαη νη δπλακηθέο ηζηνζειίδεο φπνπ ζηηο δπλακηθέο ππάξρεη ε δπλαηφηεηα απνζήθεπζεο ησλ δεδνκέλσλ ζε κηα βάζε δεδνκέλσλ. ην επφκελν θεθάιαην ζα αλαθεξζνχκε ζηελ γιψζζα ηελ νπνία ρξεζηκνπνηνχκε γηα ηελ ζπγγξαθή απηψλ ησλ ζειίδσλ. Σελίδα 13 από 91

14 ΚΔΦΑΛΑΗΟ 2 : HTML 2.1 Ση είλαη ε HTML Ζ HTML είλαη κηα γιψζζα πνπ επηλνήζεθε γηα ηε δεκηνπξγία ηζηνζειίδσλ θαη πξνέξρεηαη απφ ηηο ιέμεηο Hyper Text Markup Language πνπ ζεκαίλεη γιψζζα ραξαθηεξηζκνχ ππεξθεηκέλνπ. Οπζηαζηηθά δελ είλαη γιψζζα πξνγξακκαηηζκνχ, αιιά γιψζζα πεξηγξαθήο ηδηνηήησλ ησλ ζηνηρείσλ πνπ απνηεινχλ κία ηζηνζειίδα. Δίλαη ζρεηηθά εχθνιε λα ηε κάζεη θαλείο, θαη αξθεηά ηζρπξή ζε φ, ηη καο επηηξέπεη λα δεκηνπξγήζνπκε. Ζ HTML απνηειείηαη απφ εηηθέηεο πνπ ζπρλά απνθαινχληαη tags θαη ρηίδνπλ ην πεξηερφκελν κηαο ηζηνζειίδαο. Ζ αλάθηεζε ησλ ηζηνζειίδσλ απφ ην internet γίλεηαη απφ ηνπο θπιινκεηξεηέο, φπνπ κε ηελ ζεηξά ηνπο θαη απηνί ιεηηνπξγνχλ ζαλ κνξθνπνηεηέο γηα ηελ HTML. Όηαλ έλαο θπιινκεηξεηήο αλαθηά κηα ζειίδα γξακκέλε ζε HTML, δηαβάδεη φιεο ηηο εηηθέηεο ηεο HTML, θαη κνξθνπνηεί ην θείκελν θαη ηηο εηθφλεο ζηελ νζφλε. Απηφ ζεκαίλεη φηη ε εκθάληζε ησλ ηζηνζειίδσλ γξακκέλεο ζε HTML δηαθέξεη απφ θπιινκεηξεηή ζε θπιινκεηξεηή θαη απφ ζχζηεκα ζε ζχζηεκα. Οη πξαγκαηηθέο πιεξνθνξίεο θαη νη ζχλδεζκνη πνπ πεξηέρνπλ νη ζειίδεο καο ζα είλαη πάληα εθεί αιιά ε εκθάληζε ηνπο ζα δηαθέξεη ζηελ νζφλε. 2.2 Η ηζηνξία ηεο HTML Ζ HTML (HyperText Markup Language) δεκηνπξγήζεθε ην 1980 απφ ηνλ επηζηήκνλα Tim Berners-Lee ν νπνίνο εξγαδφηαλ ζην ηκήκα πιεξνθνξηθήο ππεξεζηψλ ηνπ CERN. Γελ είρε ζθεθηεί φηη ε HTML ζα απνθηνχζε ηφζν κεγάιε δχλακε θαη ζα ρξεζηκνπνηνχληαλ παγθνζκίσο. Ζ ηδέα ηνπ ήηαλ λα κπνξνχλ νη εξεπλεηέο απφ νπνηνδήπνηε ζεκείν ζηνλ Σελίδα 14 από 91

15 θφζκν λα νξγαλψλνπλ θαη λα ζπγθεληξψλνπλ πιεξνθνξίεο. θέθηεθε ινηπφλ λα ππάξρνπλ παξαπνκπέο απφ κηα εξεπλεηηθή εξγαζία ζηελ άιιε θάλνληαο ρξήζε ππεξ-ζπλδέζκσλ (hypertext), φπνπ παηψληαο πάλσ ζε ζπγθεθξηκέλεο πεξηνρέο ζηελ νζφλε ζα κπνξνχζαλ λα κεηαβνχλ ζε άιιεο ζειίδεο. Πξηλ έξζεη ζην CERN, ν Tim Berners-Lee είρε ήδε εξγαζηεί γηα ηελ παξαγσγή εγγξάθσλ θαη ηελ επεμεξγαζία θεηκέλνπ, θαη είρε αλαπηχμεη ην πξψην ζχζηεκα ηνπ hypertext, «Enquire» ην 1980, γηα πξνζσπηθή ηνπ ρξήζε. Ζ HTML βαζίδεηαη ζηελ SGML φπνπ ηα αξρηθά ηεο ζεκαίλνπλ Standard Generalized Mark-up Language, είλαη κηα γιψζζα πξνζδηνξηζκνχ ηχπσλ εγγξάθσλ πνπ παξείρε ηελ δπλαηφηεηα πξνζδηνξηζκνχ ησλ δνκηθψλ ζηνηρείσλ πνπ ζπλζέηνπλ έλα έγγξαθν, φπσο κηα παξάγξαθν, ιίζηεο, επηθεθαιίδεο θα. Ζ SGML είλαη έλα δηεζλέο πξφηππν (ISO 8879:1986, information processing text and office systems) πνπ ζα κπνξνχζε λα εθαξκνζηεί ζε νπνηαδήπνηε κεραλή έρνληαο σο ζθνπφ ηελ επεμεξγαζία ηεο πιεξνθνξίαο ζε κνξθή θεηκέλνπ. Ο Tim Berners-Lee ηνλ επηέκβξην ηνπ 1991 κέζσ ηνπ δηαδηθηχνπ δεκηνχξγεζε κηα νκάδα ζπδήηεζεο φπνπ ιάηξεηο ηεο ηδέαο ηνπ ζα κπνξνχζαλ λα αληαιιάμνπλ ζθέςεηο θαη ηδέεο. Έλαο απφ απηνχο ήηαλ θαη ν Dave Raggett φπνπ δεκηνχξγεζε ηελ HTML+ κηα εμειηγκέλε κνξθή ηεο HTML. Μεηά ηελ HTML+ θαη HTML πνπ ζηακάηεζαλ λα ρξεζηκνπνηνχληαη ζηηο αξρέο ηνπ 1994, ην IETF δεκηνχξγεζε κηα νκάδα εξγαζίαο HTML ε νπνία ην 1995 νινθιήξσζε ηελ HTML 2.0. Απφ εθεί θαη πέξα ε εμέιημε ηεο HTML ήηαλ ξαγδαία, ην 2000 ε HTML γίλεηαη έλα δηεζλέο πξφηππν (ISO/IEC 15445:2000), θαη ζηα ηέιε ηνπ 1999 έρνπκε ηελ εκθάληζε ηεο HTML 4.01 κε θάπνηεο δηνξζψζεηο πνπ δεκνζηεχηεθαλ ην Ζ ηειεπηαία πξνδηαγξαθή ηεο HTML ε HTML5 δεκνζηεχζεθε απφ ην W3C (Word Wide web consortium ) ην Σελίδα 15 από 91

16 2.3 Δθδόζεηο ηεο HTML HTML 1.0 Ζ HTML 1.0 ήηαλ ε πξψηε έθδνζε ηνπ HTML ζηνλ θφζκν. Λίγνη ήηαλ νη άλζξσπνη εθείλε ηελ πεξίνδν πνπ αζρνιηφληνπζαλ κε ηελ δεκηνπξγία ηζηνζειίδσλ, κε απνηέιεζκα ε γιψζζα λα είλαη αξθεηά πεξηνξηζκέλε. Γελ ππήξραλ θαη πνιιά πξάγκαηα πνπ ζα κπνξνχζε λα θάλεηο θαλείο, απφ ην λα βάιεη έλα απιφ θείκελν ζην δηαδίθηπν. HTML 2.0 ηελ HTML 2.0 πεξηιακβάλνληαη ηα πάληα, απφ ηελ HTML 1.0, κε θάπνηα λέα ραξαθηεξηζηηθά. Ζ HTML 2.0 ήηαλ ην πξφηππν γηα ηελ ζρεδίαζε ηζηνζειίδαο κέρξη θαη ηνλ Ηαλνπάξην ηνπ 1997 φπνπ θαζνξηζηήθαλ πνιιά βαζηθά ραξαθηεξηζηηθά ηεο HTML γηα πξψηε θνξά. HTML 3.0 Μηα νκάδα εξγαζίαο HTML κε επηθεθαιή ηνλ Dave Raggett εηζήγαγαλ κηα λέα έθδνζε ηεο HTML, ηελ HTML 3.0, φπνπ πεξηιάκβαλε πνιιέο λέεο θαη βειηησκέλεο δπλαηφηεηεο γηα ηελ HTML, θαη ππφζρνληαλ πνιχ πην ηζρπξέο δπλαηφηεηεο γηα ηνπο webmasters γηα ηνλ ζρεδηαζκφ ζειίδσλ. Γπζηπρψο, νη browsers ήηαλ απειπίζηεθα αξγνί ζηελ εθηέιεζε νπνηαδήπνηε απφ ηηο βειηηψζεηο θαη έηζη ε HTML 3.0 εγθαηαιείθζεθε. HTML 3.2 Ζ HTML 3.2 είλαη κία πξνδηαγξαθή ηνπ W3C γηα ηελ HTML, ε νπνία αλαπηχρζεθε ζηηο αξρέο ηνπ 1996, κε ηελ βνήζεηα ησλ IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, θαη ηελ Sun Microsystems. Ζ HTML 3.2 πξνζζέηεη επηπιένλ ραξαθηεξηζηηθά, φπσο πίλαθεο, θαη ξνή θεηκέλνπ γχξσ απφ εηθφλεο, ελψ παξέρεη πιήξε ζπκβαηφηεηα κε ηελ έθδνζε ηεο HTML 2.0. Σελίδα 16 από 91

17 HTML 4.0 Ζ HTML 4.0 πξνηάζεθε απφ ην W3C ην Γεθέκβξην ηνπ 1997 θαη έγηλε επίζεκν πξφηππν ηνλ Απξίιην ηνπ Σελ ππνζηήξημε ηνπ πξνγξάκκαηνο πεξηήγεζεο ηελ αλέιαβε ε Microsoft κε ην πξφγξακκα πεξηήγεζεο Internet Explorer, κε απνηέιεζκα ηελ άξηζηε ππνζηήξημε γηα φια ζρεδφλ ηα ραξαθηεξηζηηθά θαη γηα φιεο ηηο λέεο εηηθέηεο. Ζ HTML 4.0 παξέρεη κηα ζεηξά απφ ζεκαληηθέο βειηηψζεηο ζε ζρέζε κε πξνεγνχκελεο εθδφζεηο ηεο γιψζζαο, ελψ έκθαζε δίλεη θαη ζηηο έλλνηεο ηεο πξνζβαζηκφηεηαο θαη ηεο δνκήο. Σνλ Γεθέκβξην ηνπ 1999, ε HTML 4.01 αληηθαηέζηεζε ηελ HTML 4.0 κε θάπνηεο κηθξέο ελεκεξψζεηο. XHTML 1.0 Σνλ Γεθέκβξην ηνπ 1998 δεκνζηεχηεθε απφ ην W3C έλα πξνζρέδην κε ηίηιν Αναδιαηύπφζη ηης HTML ζε XML. Απηφ είρε σο απνηέιεζκα κηα λέα γιψζζα πνπ βαζίδεηαη ζηελ HTML 4, αιιά ηεξεί ηνπο απζηεξνχο θαλφλεο ζχληαμεο ηνπ XML. Μέρξη ην Φεβξνπάξην ηνπ 1999, ην φλνκα ηεο πξνδηαγξαθήο είρε αιιάμεη ζε XHTML 1.0 θαη ηνλ Ηαλνπάξην ηνπ 2000 πηνζεηήζεθε επίζεκα σο ζχζηαζε ηνπ W3C. Γελ ππάξρνπλ πνιιέο λέεο εηηθέηεο θαη ραξαθηεξηζηηθά, αιιά θάπνηα πξάγκαηα έρνπλ αιιάμεη κε ζθνπφ λα απμεζεί ε πξνζβαζηκφηεηα θαη ε ιεηηνπξγηθφηεηα. HTML5 Ζ HTML5 είλαη κηα ζπλεξγαζία κεηαμχ ηνπ World Wide Web Consortium (W3C) θαη ηνπ Web Hypertext Application Technology Working Group (WHATWG). Σν WHATWG δνχιεπε κε θφξκεο θαη εθαξκνγέο, θαη ην W3C δνχιεπε κε ην XHTML 2.0. Σν 2006, απνθάζηζαλ λα ζπλεξγαζηνχλ θαη λα δεκηνπξγήζνπλ κηα λέα έθδνζε ηεο HTML, ηελ HTML5. Πξνζηέζεθαλ λέα ραξαθηεξηζηηθά θαη εηηθέηεο βειηηψλνληαο πάξα πνιχ ηελ ιεηηνπξγηθφηεηα. Ζ HTML5 έρεη ζρεδηαζηεί ηφζν γηα ην δηαδίθηπν, ηνπ ζήκεξα φζν ηνπ κέιινληνο. Απηφ ζεκαίλεη φηη ε εμέιημή ηεο ζα πξνρσξεί κε αξγνχο ξπζκνχο. Σελίδα 17 από 91

18 2.4 Η δνκή ηεο HTML Έλα αξρείν HTML αξρίδεη πάληα κε ηελ εηηθέηα <html>. Έρεη επηπιένλ άιιεο δχν εηηθέηεο ηελ θεθαιή (HEAD) θαη ην θπξίσο πεξηερφκελν (BODY) ή αιιηψο ζψκα ηεο ζειίδαο. Μηα απιή κνξθή δνκήο ηεο HTML είλαη ε παξαθάησ. <html> <head> <title>σίηινο ηεο ζειίδαο</title> </head> <body>... ζψκα ηεο ζειίδαο... </body> </html> Έλα αξρείν HTML ηειεηψλεη πάληα κε ηελ εηηθέηα </html> κε απηφλ ηνλ ηξφπν ελεκεξψλνπκε ηνλ browser φηη νη γξακκέο πνπ βξίζθνληαη αλάκεζα ζηηο εηηθέηεο <html> θαη </html> είλαη γξακκέλεο ζε γιψζζα HTML. Ζ θεθαιή αξρίδεη θαη ηειεηψλεη κε ηηο εηηθέηεο <head> θαη </head>, εθεί κπνξνχκε λα ζπκπεξηιάβνπκε κφλν θάπνηεο ζπγθεθξηκέλεο εηηθέηεο, φπσο ηελ <title> φπνπ γξάθεηε ν ηίηινο ηεο ζειίδαο καο. Μηα άιιε εηηθέηα πνπ κπνξνχκε λα έρνπκε ζηελ θεθαιή είλαη ε εηηθέηα <meta>, ε εηηθέηα απηή θάλεη πην εχθνιε ηελ αλαδήηεζε ηεο ηζηνζειίδαο απφ ηηο κεραλέο αλαδήηεζεο. Τπάξρνπλ δηάθνξεο εηηθέηεο <meta> ελδεηθηηθά θάπνηεο απφ απηέο παξνπζηάδνληαη παξαθάησ. < meta > name="description" content="this tutorial explains..."> Γίλεη ηελ πεξηγξαθή ηεο ζειίδαο φπνπ κεηά επηζηξέθεηαη απφ ηελ κεραλή αλαδήηεζεο. Σελίδα 18 από 91

19 <meta http-equiv="refresh" content="60;url=διεύθσνζη ιζηοζελίδας"> ε πεξίπησζε πνπ ζέινπκε ε ηζηνζειίδα καο λα αλαλεψλεηε θάζε έλα ιεπηφ, ρσξίο ν ρξήζηεο λα ρξεηάδεηαη λα παηάεη ην πιήθηξν "Refresh", ρξεζηκνπνηνχκε ηελ παξαπάλσ εληνιή. ην <body> βάδνπκε φια φζα ζέινπκε λα εκθαλίζνπκε ζηελ νζφλε, φπσο ζχλδεζκνη, εηθφλεο, θφξκεο, πίλαθεο θ.α. 2.5 Ση είλαη νη εηηθέηεο Οη εηηθέηεο ε φπσο αιιηψο ιέγνληαη tags είλαη ιέμεηο-θιεηδηά πνπ πεξηβάιινληαη απφ αγθχιεο (<>), είλαη δεχγε, φπνπ ε πξψηε εηηθέηα ζε έλα δεπγάξη είλαη ε εηηθέηα έλαξμεο, θαη ε δεχηεξε εηηθέηα είλαη ε εηηθέηα ηέινπο Ζ εηηθέηα ηέινπο είλαη γξακκέλε, φπσο ε εηηθέηα έλαξμεο, κε κηα θάζεην πξηλ απφ ην φλνκα ηεο εηηθέηαο. Οη εηηθέηεο έλαξμεο θαη ηέινπο νλνκάδνληαη αληίζηνηρα εηηθέηεο αλνίγκαηνο θαη θιεηζίκαηνο. 2.6 Βαζηθέο εηηθέηεο ηεο HTML Δηηθέηα επηθεθαιίδα Ζ εηηθέηα επηθεθαιίδα ρξεζηκνπνηείηε γηα ηνπο δηάθνξνπο ηίηινπο ηεο ζειίδαο καο. Τπάξρνπλ έμη επίπεδα επηθεθαιίδσλ απφ ην 1 κέρξη θαη ην 6 (h1, h2, h3, h4, h5, h6). Οη επηθεθαιίδεο δελ αξηζκνχληαη αιιά δηαθέξεη ε κία απφ ηελ άιιε σο πξνο ην κέγεζνο. Καζψο πεγαίλνπκε απφ ην h1ζην h6 ειαηηψλεηαη ην κέγεζνο ηνπ θεηκέλνπ. Δηηθέηα <p> Ζ εηηθέηα απηή ρσξίδεη ην θείκελν ζε παξαγξάθνπο. Με ηελ εηηθέηα παξαγξάθνπ πξνζζέηεηαη απηφκαηα έλα θελφ πξηλ θαη κεηά απφ θάζε ζηνηρείν <p>. Ζ εηηθέηα ηεο παξαγξάθνπ, δελ ρξεηάδεηαη εηηθέηα ηέινπο φπσο νη άιιεο. Σελίδα 19 από 91

20 Δηηθέηα <strong> Ζ εηηθέηα <strong> δίλεη έκθαζε ζε έλα θείκελν, κε άιια ιφγηα θάλεη πην έληνλν ην θείκελν. Δηηθέηα <br> Ζ εηηθέηα απηή ρσξίδεη ην θείκελν ζην ζεκείν πνπ ζα ηνπνζεηεζεί θαη ην θείκελν ζπλερίδεη ζηελ επφκελε γξακκή. Ζ εηηθέηα <br> δελ πξνζζέηεη επηπιένλ ρψξν πξηλ ή κεηά φπσο ε εηηθέηα παξαγξάθνπ. Δπίζεο, δελ έρεη εηηθέηα ηέινπο. Δηηθέηα <div> Ζ εηηθέηα <div> νξίδεη έλα ηκήκα ζην HTML έγγξαθν. Έλα ηκήκα νκαδνπνηεί ηα πεξηερφκελα πνπ είλαη κέζα ζηηο εηηθέηεο <div>...</div> ψζηε λα κπνξνχκε λα ρσξίζνπκε ηελ ζειίδα καο ζε ελφηεηεο. Δηηθέηα <img> Ζ εηηθέηα <img> εηζάγεη κηα εηθφλα ζηελ ζειίδα, θαη έρεη δχν βαζηθά ραξαθηεξηζηηθά ην src θαη ην alt. To src πεξηέρεη έλα URI πνπ δείρλεη ηελ ζέζε πνπ βξίζθεηε ε εηθφλα, θαη είλαη ππνρξεσηηθφ, γηαηί ρσξίο απηφ ην ραξαθηεξηζηηθφ ε εηθφλα δελ ζα εκθαληζηεί ζηελ νζφλε θαη ην ραξαθηεξηζηηθφ alt πνπ παξέρεη έλα ελαιιαθηηθφ θείκελν γηα ην πεξηερφκελν ηεο εηθφλαο, θαη σο εθ ηνχηνπ ζα πξέπεη λα πεξηγξάθεη αθξηβψο πνηα είλαη ε εηθφλα θαη ηη δείρλεη. Δπίζεο ζηελ εηηθέηα <img> ππάξρεη ε δπλαηφηεηα λα νξηζζεί ην πιάηνο θαη ην χςνο ηεο εηθφλα κε ηηο ιέμεηο width θαη height αληίζηνηρα. Δηηθέηα <a> Ζ εηηθέηα <a> νξίδεη κηα ππεξ-ζχλδεζε, ε νπνία ρξεζηκνπνηείηαη γηα ηε ζχλδεζε απφ ηε κία ζειίδα ζηελ άιιε. Σν πην ζεκαληηθφ ραξαθηεξηζηηθφ ηεο εηηθέηαο απηήο είλαη ην ραξαθηεξηζηηθφ href, ην νπνίν δείρλεη ηνλ πξννξηζκφ ηνπ ζπλδέζκνπ. Απφ πξνεπηινγή, νη ζχλδεζκνη ζα εκθαλίδνληαη σο εμήο ζε φινπο ηνπο browsers: Σελίδα 20 από 91

21 Μηα ζχλδεζε πνπ δελ ηελ επηζθεθηήθακε αθφκε είλαη ππνγξακκηζκέλε θαη έρεη ρξψκα κπιε. Μηα ζχλδεζε πνπ ηελ επηζθεθηήθακε είλαη ππνγξακκηζκέλε κε κνβ ρξψκα. Καη κηα ελεξγή ζχλδεζε είλαη ππνγξακκηζκέλε κε θφθθηλν ρξψκα. Δηηθέηα <table> Ζ εηηθέηα <table> νξίδεη έλαλ πίλαθα. Έλαο πίλαθαο απνηειείηαη απφ ην ζηνηρείν <table> θαη έλα ή πεξηζζφηεξα <tr>, <th>, θαη <td>. Σν ζηνηρείν <tr> νξίδεη κηα γξακκή ζηνλ πίλαθα, ην <th> ζηνηρείν νξίδεη κηα θεθαιίδα ζηνλ πίλαθα, θαη ην ζηνηρείν <td> νξίδεη έλα θειί ζηνλ πίλαθα. Δηηθέηα < script > Ζ εηηθέηα <script> ρξεζηκνπνηείηαη γηα λα θαζνξίζεη έλα client-side script, φπσο ε JavaScript. Σν ζηνηρείν <script> πεξηέρεη είηε δειψζεηο scripting, ή δείρλεη έλα εμσηεξηθφ αξρείν script κέζσ ηνπ ραξαθηεξηζηηθνχ src. Με ηελ JavaScript δεκηνπξγνχκε δηάθνξα εθέ ζηελ ζειίδα καο, θαη κπνξνχκε λα αιιάμνπκε δπλακηθά ην πεξηερφκελν ηεο ζειίδαο. Δηηθέηα <textarea> Ζ εηηθέηα <textarea> νξίδεη κία multi-line πεξηνρή εηζαγσγήο θεηκέλνπ. Μηα ηέηνηα πεξηνρή θεηκέλνπ κπνξεί λα πεξηέρεη έλαλ απεξηφξηζην αξηζκφ ραξαθηήξσλ, κε ζηαζεξφ πιάηνο θαη γξακκαηνζεηξά (ζπλήζσο Courier). Σν κέγεζνο ηνπ θαζνξίδεηε απφ ηηο ηδηφηεηεο rows θαη cols πνπ δειψλνπλ ηηο γξακκέο θαη ηηο ζηήιεο αληίζηνηρα. Απηφ βέβαηα κπνξεί λα γίλεη θαη κέζα απφ ηηο ηδηφηεηεο χςνπο θαη πιάηνπο ηνπ CSS. Δηηθέηα <form> Μία εηηθέηα <form> ρξεζηκνπνηείηε γηα ηε κεηαβίβαζε δεδνκέλσλ ζε έλαλ server. Υξεζηκνπνηείηε ζηελ πεξίπησζε πνπ απαηηείηαη εηζαγσγή ζηνηρείσλ απφ ηνλ ρξήζηε. Γχν απαξαίηεηα ραξαθηεξηζηηθά ηεο εηηθέηαο απηήο είλαη ηα ραξαθηεξηζηηθά action θαη method. Σν action δείρλεη πνηα Σελίδα 21 από 91

22 εθαξκνγή ζα παξαιάβεη ηηο πιεξνθνξίεο ηεο θφξκαο, ελψ ην method δείρλεη ηνλ ηξφπν κεηαθνξάο, κε ηηκέο get ή post. Σν get βάδεη ηηο πιεξνθνξίεο ζην ηέινο ηνπ URL κεηά ην? ελψ ε post ηηο θξχβεη. Δηηθέηα <input> Ζ εηηθέηα <input> θαζνξίδεη έλα πεδίν εηζαγσγήο, φπνπ ν ρξήζηεο κπνξεί λα εηζάγεη ηα δεδνκέλα. Έλα πεδίν εηζαγσγήο κπνξεί λα πνηθίιιεη, αλάινγα κε ηνλ ηχπν δεδνκέλσλ πνπ εηζάγνληαη θάζε θνξά. Μπνξεί λα είλαη έλα θνπκπί γηα θάπνηα ελέξγεηα, έλα checkbox γηα πνιιαπιέο επηινγέο, έλα text γηα εηζαγσγή θεηκέλνπ κίαο γξακκήο, έλα password γηα ηελ εηζαγσγή θάπνηνπ θσδηθνχ πξφζβαζεο πνπ νη ραξαθηήξεο εκθαλίδνληαη κε * θαη πνιιά άιια. 2.7 Γεκηνπξγία αξρείωλ HTML. Γηα ηελ δεκηνπξγία ελφο αξρείνπ html αξθεί έλα απιφ αξρείν θεηκέλνπ (notepad) φπνπ ζα πεξηέρεη ηηο εληνιέο πνπ ζέινπκε θαη ζα έρεη ηελ θαηάιεμε.html. Δπίινγνο Ζ ηζηνξία ηεο δεκηνπξγίαο ηζηνζειίδσλ είλαη πνιχ κεγάιε θαη ε εμέιημε ήηαλ ξαγδαία. Βάζεη ηεο αλάπηπμεο ζηνλ ρψξν ησλ ηερλνινγηψλ, ην ζίγνπξν είλαη πσο ζα ππάξμεη αθφκε κεγαιχηεξε πξφνδνο ζην κέιινλ. Σελίδα 22 από 91

23 Κεθάιαην 3 : CSS 3.1 Ση είλαη ην CSS Μεξηθνί άλζξσπνη πηζηεχνπλ φηη κηα ηζηνζειίδα είλαη έλα επράξηζην κέζν, πνπ κπνξεί λα πεξηέρεη πιεξνθνξίεο πνπ είλαη ελδηαθέξνπζεο γηα ηνλ ζεαηή ή θαη φρη. Άιινη άλζξσπνη πηζηεχνπλ φηη κηα ηζηνζειίδα κπνξεί λα παξνπζηαζηεί σο έλα έγγξαθν ζηνπο αλαγλψζηεο κε έλαλ αηζζεηηθά επράξηζην ηξφπν. Απφ ηερληθή άπνςε, ε εξκελεία ηνπ εγγξάθνπ είλαη πην θαηάιιειε. Όηαλ εμεηάδνπκε ηα ζηνηρεία απφ ηα νπνία απνηειείηαη έλα ηέηνην έγγξαθν βιέπνπκε φηη ππάξρνπλ ηξία ζηξψκαηα ην πεξηερφκελν, ε παξνπζίαζε θαη ε ζπκπεξηθνξά φπσο απεηθνλίδνληαη παξαθάησ. Εικόνα 2: Τα ηρία επίπεδα μίας ιζηοζελίδας Σν ζηξψκα «πεξηερφκελν» ππάξρεη πάληα ζε κία ζειίδα, είλαη δειαδή αλαπφζπαζην θνκκάηη. Πεξηιακβάλεη ηα ζηνηρεία πνπ ν ζπγγξαθέαο επηζπκεί λα εκθαλίζεη ζηνπο ρξήζηεο. Σν κεγαιχηεξν κέξνο ηνπ πεξηερνκέλνπ ζην Web ζήκεξα είλαη ην θείκελν, κπνξεί επίζεο λα πεξηέρεη εηθφλεο, θηλνχκελεο εηθφλεο, ήρν, βίληεν, θαη φ,ηη άιιν επηζπκεί λα δεκνζηεχζεη ν ζπγγξαθέαο. Σν ζηξψκα «παξνπζίαζεο» θαζνξίδεη ην πψο ην πεξηερφκελν ηεο ζειίδαο ζα εκθαληζηεί ζηνλ ρξήζηε ν νπνίνο έρεη πξφζβαζε ζε απηφ. Ο ζπκβαηηθφο ηξφπνο γηα λα εκθαληζηεί κηα ηζηνζειίδα είλαη κε έλα θνηλφ πξφγξακκα πεξηήγεζεο ζην web, θπζηθά, απηή είλαη κφλν κία απφ ηηο πνιιέο πηζαλέο κεζφδνπο εκθάληζεο κηαο Σελίδα 23 από 91

24 ζειίδαο. Σν ζηξψκα «ζπκπεξηθνξά» πεξηιακβάλεη ηελ αιιειεπίδξαζε ηνπ ρξήζηε κε ην έγγξαθν ζε πξαγκαηηθφ ρξφλν. Απηφ ζπλήζσο επηηπγράλεηε κε ηελ γιψζζα πξνγξακκαηηζκνχ JavaScript. Ζ αιιειεπίδξαζε κπνξεί λα είλαη νηηδήπνηε, απφ ηελ ζπκπιήξσζε κηαο θφξκαο παξαγγειίαο πνπ κπνξεί λα ππνβιεζεί, κέρξη θαη εμειηγκέλεο εθαξκνγέο web πνπ ιεηηνπξγνχλ ζαλ ζπλήζε πξνγξάκκαηα desktop. Τπάξρεη δπλαηφηεηα λα ελζσκαησζνχλ θαη νη ηξεηο ζηξψζεηο κέζα ζην ίδην έγγξαθν, αιιά δηαηεξψληαο ηα ρσξηζηά καο δίλεηε έλα πνιχηηκν πιενλέθηεκα: λα κπνξνχκε λα ηξνπνπνηήζνπκε ή λα αληηθαηαζηήζνπκε νπνηνδήπνηε απφ ηα ζηξψκαηα ρσξίο λα ρξεηάδεηαη λα αιιάμνπκε ηα άιια. Οξηζκέλεο εθδφζεηο ησλ HTML θαη XHTML, πεξηέρνπλ ζηνηρεία γηα ηελ παξνπζίαζε ησλ ηχπσλ, δειαδή ζηνηρεία πνπ θαζνξίδνπλ ηελ εκθάληζε ηνπ πεξηερνκέλνπ, θαη είλαη αλεμάξηεηα απφ ηε δνκή θαη ηε ζεκαζηνινγία. Γηα παξάδεηγκα, ηα <b>,<i> κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα ηνλ έιεγρν ηεο παξνπζίαζεο ηνπ θεηκέλνπ, ελψ ην <hr> ζα εηζάγεη κηα νξηδφληηα επζεία ζηελ ζειίδα. Ωζηφζν, δεδνκέλνπ φηη απηνί νη ηχπνη ζηνηρείσλ ελζσκαηψλνληαη ζην ζηξψκα παξνπζίαζεο αλαηξεί θάζε πιενλέθηεκα πνπ έρνπκε ζην λα θξαηάκε ηα ζηξψκαηα μερσξηζηά. Σν CSS (Cascading Style Sheets), είλαη ν ζπληζηψκελνο ηξφπνο γηα λα ειέγρνπκε ην ζηξψκα παξνπζίαζεο ζε έλα έγγξαθν web. Σν θχξην πιενλέθηεκα ηεο CSS έλαληη ηεο κνξθνπνίεζεο κέζσ ησλ HTML ζηνηρείσλ είλαη φηη ε κνξθνπνίεζε κπνξεί λα είλαη ηειείσο αλεμάξηεηε απφ ην πεξηερφκελν. Γηα παξάδεηγκα, κπνξνχκε λα απνζεθεχζνπκε φιεο ηηο κνξθέο παξνπζίαζεο γηα κηα ηζηνζειίδα ζειίδσλ ζε έλα εληαίν αξρείν CSS. Σν CSS παξέρεη επίζεο πνιχ θαιχηεξν έιεγρν πάλσ ζηνλ ηξφπν εκθάληζεο απφ φ,ηη ε κνξθνπνίεζε κέζσ ηεο HTML. Σελίδα 24 από 91

25 Σν CSS πξνζθέξεη κηα ζεηξά απφ ζεκαληηθά νθέιε: - Σν πην πξνθαλέο είλαη λα έρνπκε κφλν έλα αξρείν css πνπ λα κνξθνπνηεί ζειίδεο. - Ο δηαρσξηζκφο ηνπ πεξηερνκέλνπ απφ ηελ παξνπζίαζε θαη ε ρξήζε ηνπ css γηα ηελ κνξθνπνίεζε καο δίλεη ηελ δπλαηφηεηα λα επαλαρξεζηκνπνηήζνπκε ην πεξηερφκελα θαη γηα άιινπο ζθνπνχο, φπσο γηα παξάδεηγκα RSS feeds. - Σέινο δελ ρξεηάδεηαη λα δεκηνπξγνχκε κηα εηδηθή έθδνζε ηεο θάζε ζειίδαο γηα εθηχπσζε, απιψο δεκηνπξγνχκε έλα αξρείν css πνπ ειέγρεη ηνλ ηξφπν εκθάληζεο ηεο ζειίδαο θαηά ηελ εθηχπσζε. 3.2 Η ηζηνξία ηνπ CSS Δίηε πξφθεηηαη γηα κία ζειίδα ή 100 ζειίδεο, ην CSS θάλεη ηελ κνξθνπνίεζε θάζε ζειίδαο πνιχ απιή. Με ην CSS, έλαο ζρεδηαζηήο έρεη ηελ δπλαηφηεηα λα πξνζζέζεη εηθφλεο, λα αιιάμεη ηε γξακκαηνζεηξά ή αθφκα θαη ην ρξψκα ηνπ θεηκέλνπ θαη ηνπ θφληνπ. Σν CSS ρξεζηκνπνηείηαη ζηηο γιψζζεο HTML θαη XHTML, αιιά έρεη πεξηνξηζκέλε ρξήζε ζε XML έγγξαθα. Ζ HTML θαη XHTML είλαη γιψζζεο πξνγξακκαηηζκνχ πνπ είλαη πην επξέσο ρξεζηκνπνηνχκελεο θαη ππνζηεξίδνληαη απφ ηηο πεξηζζφηεξεο κεραλέο αλαδήηεζεο. Σν CSS ρξεζηκνπνηείηαη ζρεδφλ ζε θάζε πηπρή ηεο ηζηνζειίδαο. Αλαπηχρζεθε απφ κηα νκάδα World Wide Web Consortium, κε επηθεθαιήο ηνλ Bert Bos θαη Håkon Lie. Ο ζθνπφο ηνπ έξγνπ ήηαλ λα δεκηνπξγεζεί κηα γιψζζα κνξθνπνίεζεο πνπ ζα κπνξνχζε λα ελζσκαησζεί κε ηελ HTML θαη XHTML γηα ηελ βειηίσζε ηεο εκθάληζεο ησλ ζειίδσλ. Σν CSS άξρηζε λα ρξεζηκνπνηείηε ηελ δεθαεηία ηνπ 1970, απφ ηφηε έρεη εμειηρζεί πάξα πνιχ θαη απηφ έγηλε κέζα απφ κειέηεο θαη δνθηκέο. Ήηαλ ζηα κέζα ηεο δεθαεηίαο ηνπ 1990 φηαλ ην CSS εηζήρζε ζην World Wide Web Consortium (W3C). Δθείλε ηελ επνρή, ηα κέιε ηνπ W3C Σελίδα 25 από 91

26 ζπλεξγάζηεθαλ γηα ηελ αλάπηπμή θαζψο θαη γηα ηελ βειηίσζε ηεο. ηα ηέιε ηεο δεθαεηίαο ηνπ 1990, ην CSS ήηαλ έηνηκν λα βγεη ζηελ αγνξά θαη ην Γεθέκβξην ηνπ 1996, ε ζχληαμε ηεο έγηλε επίζεκε. Αθφκε θαη κε ηελ ηεξάζηηα ππνζηήξημε απφ ην W3C, ν Internet Explorer 3, θπθινθφξεζε ην CSS ην 1996, κε πνιχ κηθξή ππνζηήξημε ζε ζρέζε κε ηελ εμαηξεηηθή ρξήζηκε ζχληαμε ηνπ. Σξία ρξφληα αξγφηεξα, ην CSS θπθινθφξεζε απφ ηνλ Internet Explorer 5 θαη είρε ζρεδφλ 100% ζπκβαηφηεηα θαη ππνζηήξημε γηα ην CSS. Όπσο κε θάζε λέα γιψζζα ζην δηαδίθηπν, έηζη θη εδψ δελ παχνπλ λα ππάξρνπλ, ζθάικαηα θαη αληηθάζεηο. Παξνπζηάδνληαο δηαθνξεηηθέο παξαιιαγέο ηνπ CSS, φπσο CSS1, CSS2 θαη CSS3, απνκάθξπλαλ ηηο ηδηφηεηεο πνπ νη browsers απιά δελ κπνξνχζαλ λα ππνζηεξίμνπλ. ηα ηέιε ηνπ Ηνπιίνπ ηνπ 2007 δεκηνπξγήζεθε ε CSS2.1. Μέρξη ην 2008, ε ηειεπηαία θαη κεγαιχηεξε έθδνζε ηνπ Internet Explorer, IE8, επέηξεςε ηελ πιήξε ππνζηήξημε ηεο ζχληαμεο CSS2.1 ζην web. ήκεξα εμαθνινπζνχλ αθφκε λα ππάξρνπλ πνιιέο ηδηνξξπζκίεο θαη ιάζε ζην CSS θαη νξηζκέλνη ζρεδηαζηέο ηζηνζειίδσλ ρξεζηκνπνηνχλ ζην CSS θίιηξα θαη hacks γηα λα ιχζνπλ ηηο αληηθάζεηο. Κξαηψληαο κηα νκνηφκνξθε εκθάληζε ζε φια ηα πξνγξάκκαηα πεξηήγεζεο ζην δηαδίθηπν θαη κε ηελ ζπλερή έξεπλα θαη ηηο δνθηκέο θαζνξίδνληαη νη λεφηεξεο θαη πην βειηησκέλεο εθδφζεηο ηνπ CSS. 3.3 ύληαμε ηνπ CSS Ο βαζηθφο ζηφρνο ηνπ CSS είλαη λα επηηξέςεη ζε έλα browser λα «δσγξαθίζεη» ηα ζηνηρεία ηεο ζειίδαο κε εηδηθά ραξαθηεξηζηηθά, φπσο ηα ρξψκαηα, ηελ ηνπνζέηεζε εηθφλσλ θ.α. Ζ ζχληαμε ελφο αξρείνπ CSS απνηειείηαη απφ ηξία κέξε: ηνλ επηινγέα, ηελ ηδηνθηεζία θαη κηα ηηκή: επιλογέας {ιδιοκτησία: τιμή} Σελίδα 26 από 91

27 Ο επηινγέαο είλαη ζπλήζσο έλα ζηνηρείν HTML (tag) πνπ ζέινπκε λα νξίζνπκε. Γηα παξάδεηγκα, κπνξνχκε λα θαζνξίζνπκε ζην CSS αξρείν καο: body {text-align: center} Απηή ε γξακκή ζα ζηνηρίζεη νιφθιεξν ην θείκελν πνπ βξίζθεηε ζηελ εηηθέηα <body> ζην θέληξν. Δπίζεο κπνξεί λα έρνπκε θαη ηελ παξαθάησ εληνιή: p {text-align: left} Δδψ νξίδνπκε ην θείκελν πνπ πεξηβάιιεηαη απφ ηελ παξάγξαθν (<p>) λα επζπγξακκηζηεί πξνο ηα αξηζηεξά. Δάλ ζέινπκε λα θαζνξίζνπκε ηηο ίδηεο παξακέηξνπο γηα πνιιαπιέο εηηθέηεο, κπνξνχκε απιά λα ηηο νκαδνπνηήζνπκε: p,h1,h2,h3 {color: red} Αλ νξίζνπκε απηή ηε γξακκή, φιν ην θείκελν ζε απηέο ηηο εηηθέηεο ζα γίλεη θφθθηλν. Σα παξαπάλσ, φκσο, είλαη πνιχ βαζηθά παξάδεηγκα ζε ζρέζε κε ηηο δπλαηφηεηεο πνπ καο δίλεη ην CSS. πλήζσο πνιχ πεξηζζφηεξεο απφ κία παξακέηξνπο κπνξνχκε λα νξίζνπκε ζε θάζε εηηθέηα. Έηζη έρνπκε: p { text-align: center; color: red; font-family: arial; } Σελίδα 27 από 91

28 Οη γξακκέο απηέο ζα θαζνξίζνπλ ηε ζηνίρηζε ζην θέληξν, ην ρξψκα θφθθηλν θαη ηε γξακκαηνζεηξά Arial ηνπ θεηκέλνπ ζε θάζε κηα απφ ηηο παξαγξάθνπο. Καηά ηε δηαδηθαζία δεκηνπξγίαο ηεο ηζηνζειίδαο καο, κπνξεί λα ζέινπκε λα έρνπκε πνιιαπιέο κνξθέο γηα θάζε εηηθέηα. Γηα παξάδεηγκα, κπνξεί λα ζέινπκε λα έρνπκε κηα παξάγξαθν πνπ είλαη επζπγξακκηζκέλε αξηζηεξά θαη ην ρξψκα ηεο λα είλαη ζε θφθθηλν θαη κία άιιε παξάγξαθν λα είλαη επζπγξακκηζκέλε πξνο ηα δεμηά θαη ην ρξψκα ηεο λα είλαη ζε κπιε. Γηα λα επηηεπρζεί απηφ ην απνηέιεζκα, ζα πξέπεη λα ρξεζηκνπνηήζνπκε θαηεγνξίεο. Γηα παξάδεηγκα, κπνξνχκε λα νξίζνπκε δχν θαηεγνξίεο κε ην φλνκα "my_left" θαη "my_right":.my_left.my_right { { text-align: left; text-align: right; color: red; color: blue; } } Αθνχ έρνπκε θάλεη απηφ, ζηνλ θψδηθα HTML καο, κπνξνχκε λα θαζνξίζνπκε ηελ ηδηφηεηα θαηεγνξίαο ησλ ζηνηρείσλ πνπ ζέινπκε λα δηακνξθψζνπκε κε απηφ ηνλ ηξφπν: <p class="my_left"> Παρϊγραφοσ ςτα αριςτερϊ με κόκκινο χρώμα. </p> <p class="my_right"> Παρϊγραφοσ ςτα δεξιϊ με μπλε χρώμα. </p> ε νξηζκέλεο πεξηπηψζεηο, σζηφζν, απηφ δελ είλαη αξθεηφ. Αο ππνζέζνπκε φηη ζα ζέιακε ηα θείκελα πνπ είλαη ζηνηρηζκέλα ζηα αξηζηεξά λα έρνπλ ηελ γξακκαηνζεηξά Arial. ε απηή ηελ πεξίπησζε, κπνξνχκε λα θαζνξίζνπκε έλαλ "επηινγέα id" ζην CSS αξρείν καο: Σελίδα 28 από 91

29 #arial {font-family: arial} Θα πξέπεη λα νξίζνπκε έλα HTML tag ζηνλ θψδηθα καο, σο εμήο: <p class="my_left" id="arial"> Το κεύμενο αυτό θα εύναι ςτοιχιςμϋνο αριςτερϊ, θα ϋχει κόκκινο χρώμα και γραμματοςειρϊ Arial </p> Απηά είλαη κφλν ηα πνιχ βαζηθά ηεο CSS πνπ πξέπεη λα μέξεη θαλείο γηα λα είλαη ζε ζέζε λα θάλεη απιέο αιιαγέο ζηνλ ηζηνρψξν. Σν CSS δίλεη κεγάιε ειεπζεξία γηα λα δεκηνπξγήζνπκε νηηδήπνηε ζέινπκε. ηελ πξαγκαηηθφηεηα, θάζε επίδξαζε ζρεδηαζκνχ κπνξεί λα επηηεπρζεί κε πνιινχο δηαθνξεηηθνχο ηξφπνπο. Δμαξηάηαη απφ εκάο πσο ζα νξγαλψζνπκε θαη ζα αλαπηχμνπκε ηελ ηζηνζειίδα καο κε έλαλ ηξφπν πνπ ζα εμππεξεηεί θαιχηεξα ηηο αλάγθεο καο. Δπίινγνο Βιέπνπκε ινηπφλ φηη κηα ζειίδα ρσξίδεηε ζε ηξία ζηξψκαηα ηα νπνία είλαη αλεμάξηεηα κεηαμχ ηνπο θαη απηφ έρεη σο πιενλέθηεκα λα κπνξνχκε λα κνξθνπνηνχκε ρηιηάδεο ζειίδεο κε κφλν έλα αξρείν CSS. Σελίδα 29 από 91

30 Κεθάιαην 4: PHP 4.1 Ση είλαη ε php H PHP είλαη ίζσο ε πην δεκνθηιήο scripting γιψζζα ζην δηαδίθηπν. Υξεζηκνπνηείηαη γηα λα εληζρχζεη ηηο ηζηνζειίδεο. Με ηελ PHP, κπνξνχκε λα θάλνπκε δηάθνξα πξάγκαηα φπσο λα νξίζνπκε έλα φλνκα ρξήζηε, λα δεκηνπξγήζνπκε ζειίδεο login κε θσδηθφ πξφζβαζεο, λα ειέγμνπκε ηα ζηνηρεία κηαο θφξκαο, λα δεκηνπξγήζνπκε έλα θφξνπκ, κηα γθαιεξί εηθφλσλ, λα θάλνπκε έξεπλεο, θαη έλα ζσξφ άιια. Ζ PHP είλαη γλσζηή σο διακομιζηής όυης γλώζζας. Απηφ ζπκβαίλεη γηαηί ε PHP δελ εθηειείηαη ζηνλ ππνινγηζηή καο, αιιά ζηνλ ππνινγηζηή απφ φπνπ δεηήζακε ηε ζειίδα. Σα απνηειέζκαηα ζηε ζπλέρεηα ζα παξαδνζνχλ ζε καο, θαη ζα εκθαληζηνχλ ζηνλ browser. Άιιεο γιψζζεο scripting πνπ ππάξρνπλ είλαη ε ASP, ε Python θαη ε Perl (Γελ ρξεηάδεηαη λα γλσξίδνπκε θάπνηα απφ απηέο γηα λα κάζνπκε απφ ηελ αξρή PHP). Ζ πην δεκνθηιήο εμήγεζε ηνπ ηη αθξηβψο ζεκαίλεη ε PHP πξνέξρνληαλ απφ ηηο ιέμεηο «Hypertext Pre-processor». Αιιά απηφ ζα δεκηνπξγνχζε ην HPP. Μηα ελαιιαθηηθή εμήγεζε είλαη φηη ηα αξρηθά πξνέξρνληαη απφ ηελ παιαηφηεξε έθδνζε ηνπ πξνγξάκκαηνο, ην νπνίν νλνκαδφηαλ Προζφπικά εργαλεία Αρτικής Σελίδας (Personal Home Page Tools), έηζη ινηπφλ έρνπκε ηελ php. 4.2 Η ηζηνξία ηεο PHP Ζ PHP φπσο είλαη γλσζηή ζήκεξα, είλαη ζηελ πξαγκαηηθφηεηα ν δηάδνρνο ελφο άιινπ πξντφλ πνπ νλνκάδεηαη PHP / FI. Γεκηνπξγήζεθε ην 1994 απφ ηνλ Rasmus Lerdorf, θαη ε πξψηε ελζάξθσζε ηεο PHP ήηαλ έλα απιφ ζχλνιν απφ ην Common Gateway Interface (CGI), γξακκέλν ζηε γιψζζα Σελίδα 30 από 91

31 πξνγξακκαηηζκνχ C. Αξρηθά ρξεζηκνπνηήζεθε γηα ηελ παξαθνινχζεζε ησλ επηζθέςεσλ ζε απεπζείαο ζχλδεζε, νλνκάδνληαο ηελ ζειίδα ηνπ "Personal Home Page Tools ", ζπρλά φκσο αλαθεξφηαλ ζε απηή σο "PHP Tools". Με ηελ πάξνδν ηνπ ρξφλνπ, επηζπκνχζε κεγαιχηεξε ιεηηνπξγηθφηεηα, έηζη ν Rasmus μαλάγξαςε ην "PHP Tools", δεκηνπξγψληαο κηα πνιχ κεγαιχηεξε θαη πην πινχζηα εθαξκνγή. Απηφ ην λέν κνληέιν ήηαλ ηθαλφ λα αιιειεπηδξάζεη κε βάζεηο δεδνκέλσλ, παξέρνληαο έλα πιαίζην ζην νπνίν νη ρξήζηεο ζα κπνξνχζαλ λα αλαπηχμνπλ απιέο δπλακηθέο εθαξκνγέο ζην web, φπσο βηβιία επηζθεπηψλ. Σνλ Ηνχλην ηνπ 1995, ν Rasmus θπθινθφξεζε ηνλ πεγαίν θψδηθα ηεο PHP Tools γηα ην θνηλφ, ην νπνίν επέηξεςε ζηνπο πξνγξακκαηηζηέο λα ην ρξεζηκνπνηνχλ. Απηφ επέηξεπε επίζεο, θαη ελζάξξπλε ηνπο ρξήζηεο λα παξέρνπλ δηνξζψζεηο γηα ηα ζθάικαηα ζηνλ θψδηθα, θαη γεληθφηεξα ηελ βειηίσζε ηνπ. Σνλ επηέκβξην ηνπ ίδηνπ έηνπο, ν Rasmus κείσζε ην φλνκα ηεο PHP. Σψξα κε αλαθνξά ζηα εξγαιεία, φπσο FI (κηθξή γηα "Μνξθέο Γηεξκελέαο»), ε λέα εθαξκνγή πεξηιακβάλεη κεξηθέο απφ ηηο βαζηθέο ιεηηνπξγίεο ηεο PHP, φπσο ηελ γλσξίδνπκε ζήκεξα. Δίρε ελζσκαησκέλεο Perl-like κεηαβιεηέο, απηφκαηε δειαδή εξκελεία ησλ κεηαβιεηψλ θφξκαο θαη ελζσκαησκέλε ζχληαμε ζηελ HTML. Ζ ίδηα ε ζχληαμε ήηαλ παξφκνηα κε εθείλε ηεο Perl, αλ θαη πνιχ πην πεξηνξηζκέλε, θαη θάπσο αζπλεπήο. ηελ πξαγκαηηθφηεηα, γηα λα ελζσκαηψζνπλ ηνλ θψδηθα ζε έλα αξρείν HTML, νη πξνγξακκαηηζηέο έπξεπε λα ρξεζηκνπνηήζνπλ HTML ζρφιηα. Αλ θαη ε κέζνδνο απηή δελ ήηαλ απνιχησο θαιή ζπλέρηζε λα απνιακβάλεη ηελ αλάπηπμε θαη ηελ απνδνρή σο CGI εξγαιείν, αιιά αθφκα δελ είλαη αξθεηή σο γιψζζα. Ωζηφζν, απηφ άξρηζε λα αιιάδεη ηνλ επφκελν κήλα. Σνλ Οθηψβξην ηνπ 1995, ν Rasmus θπθινθφξεζε κηα πιήξεο επαλεγγξαθή ηνπ θψδηθα. Δπαλαθέξνληαο ην φλνκα PHP, ήηαλ ηψξα (ελ ζπληνκία) κε ην φλνκα "Personal Home Page Construction Kit", θαη ήηαλ ε πξψηε έθδνζε, εθείλε ηελ επνρή, πνπ ζεσξνχληαλ κηα πξνεγκέλε δηεπαθή scripting. Ζ γιψζζα είρε ζθφπηκα ζρεδηαζηεί γηα λα κνηάδεη ζηελ Σελίδα 31 από 91

32 δνκή ηεο C, γεγνλφο πνπ ηελ θαζηζηά εχθνιε έθδνζε γηα ηνπο πξνγξακκαηηζηέο πνπ είλαη εμνηθεησκέλνη κε ηελ C, Perl, θαη παξφκνηεο γιψζζεο. Ο θψδηθαο βειηηψζεθε αθφκα πεξηζζφηεξν, ηνλ Απξίιην ηνπ 1996, ζπλδπάδνληαο ηα νλφκαηα ησλ πξνεγνχκελσλ εθδφζεσλ, ν Rasmus εηζήγαγε ηελ PHP / FI. Έηζη ινηπφλ ε PHP / FI άξρηζε λα εμειίζζεηαη απφ κηα ζεηξά απφ εξγαιεία PHP ζε κηα γιψζζα πξνγξακκαηηζκνχ απφ κφλε ηεο. Πεξηιάκβαλε ελζσκαησκέλε ππνζηήξημε γηα DBM, mysql θαη Postgres95, cookies, θαη πνιιά άιια. Απηφ ηνλ Ηνχλην, έρνπκε ηελ έθδνζε 2.0 γηα ηελ PHP / FI. Έλα ελδηαθέξνλ γεγνλφο γηα απηφ, είλαη φηη ππήξρε κφλν κία πιήξεο έθδνζε ηεο PHP 2.0. Όηαλ ηειηθά βγήθε απφ ηελ beta θαηάζηαζε, ην Ννέκβξην ηνπ 1997, ε βαζηθή κεραλή αλάιπζεο είρε ήδε μαλαγξαθηεί εμ νινθιήξνπ. Αλ θαη έδεζε κηα ζχληνκε πξνγξακκαηηζηηθή δσή, ζπλέρηζε λα απνιακβάλεη κηα απμαλφκελε δεκνηηθφηεηα ζηελ αλάπηπμε ηζηνζειίδσλ. Σν 1997 θαη ην 1998, ε PHP / FI ιαηξεχηεθε απφ αξθεηέο ρηιηάδεο ρξήζηεο ζε φιν ηνλ θφζκν. Μηα έξεπλα απφ ηελ Netcraft ηνλ Μάην ηνπ 1998, έδεημε φηη πεξίπνπ domains αλαθέξζεθαλ φηη πεξηέρνπλ θεθαιίδεο "PHP", πνπ έδεηρλαλ φηη ν δηαθνκηζηήο ππνδνρήο δελ είρε πξάγκαηη εγθαηαζηαζεί. Απηφο ν αξηζκφο ηζνδπλακεί κε πεξίπνπ 1% ηνπ ζπλφινπ ησλ ηνκέσλ ζην Γηαδίθηπν θαηά ηε ρξνληθή ζηηγκή. Παξά ηα εληππσζηαθά ζηνηρεία, ε σξίκαλζε ηεο PHP / FI ήηαλ θαηαδηθαζκέλε. Δλψ ππήξραλ δηάθνξεο δεπηεξεχνπζεο βνήζεηεο, ήηαλ πνιχ δχζθνιν λα αλαπηπρζεί απφ έλα κφλν άηνκν. 4.3 Δθδόζεηο ηεο PHP PHP3 Ζ PHP 3.0 ήηαλ ε πξψηε έθδνζε πνπ έκνηαδε πνιχ κε ηελ PHP φπσο είλαη ζήκεξα. Ζ PHP / FI 2.0 ήηαλ αλεπαξθείο θαη ζηεξνχληαλ Σελίδα 32 από 91

33 ραξαθηεξηζηηθά πνπ απαηηνχληαλ γηα ηελ δεκηνπξγία κηαο εθαξκνγήο ειεθηξνληθνχ εκπνξίνπ, έηζη νη Andi Gutmans θαη Zeev Suraski ζην Σει Αβίβ, ηνπ Ηζξαήι, άξρηζαλ κηα πιήξεο επαλεγγξαθή ηεο γιψζζαο ην πκκεηέρνληαο θαη ν Rasmus ζε απεπζείαο ζχλδεζε, ζπδεηήζεθαλ δηάθνξεο πηπρέο ηεο ηξέρνπζαο εθαξκνγήο θαη ηελ αλάπιαζε ηεο PHP. ε κηα πξνζπάζεηα γηα ηε βειηίσζε ηεο ππάξρνπζαο PHP / FI νη Andi, Rasmus, θαη Zeev απνθάζηζαλ λα ζπλεξγαζηνχλ γηα ηελ αλάπηπμε κηαο λέαο, αλεμάξηεηεο γιψζζαο πξνγξακκαηηζκνχ. Απηή ε εληειψο λέα γιψζζα θπθινθφξεζε κε έλα λέν φλνκα, πνπ κεηνλνκάζηεθε απιά ζε «PHP», κε ηελ έλλνηα λα γίλεη έλα αθξσλχκην ηνπ PHP: Hypertext Preprocessor. Έλα απφ ηα κεγαιχηεξα πιενλεθηήκαηα ηεο PHP 3.0 ήηαλ ε δπλαηφηεηα επεθηαζηκφηεηαο ηεο. Δθηφο απφ ηελ παξνρή ζηνπο ρξήζηεο, ελφο πεξηβάιινληνο κε πνιιαπιέο βάζεηο δεδνκέλσλ, πξσηφθνιια, θαη APIs, ε επθνιία ηεο επέθηαζεο ηεο ίδηαο ηεο γιψζζαο πξνζέιθπζε δεθάδεο πξνγξακκαηηζηέο πνπ ππέβαιαλ κηα ζεηξά απφ modules. Αλακθίβνια, απηφ ήηαλ ην θιεηδί γηα ηελ ηεξάζηηα επηηπρία ηεο PHP 3.0. Σνλ Ηνχλην ηνπ 1998, κε πνιινχο λένπο πξνγξακκαηηζηέο απφ φιν ηνλ θφζκν, πνπ έλσζαλ ηηο δπλάκεηο ηνπο, αλαθνίλσζαλ φηη ε PHP 3.0 είλαη επίζεκα δηάδνρνο ηεο PHP / FI 2.0. Ζ ελεξγή αλάπηπμε ηεο PHP / FI 2.0, ζηακάηεζε απφ ην Ννέκβξην ηνπ Μεηά απφ πεξίπνπ ελλέα κήλεο θαη αθνχ ε αλαγγειία ηεο επίζεκεο έθδνζεο ηεο PHP 3.0 ήηαλ γεγνλφο, είρε ήδε εγθαηαζηαζεί ζε πάλσ απφ domains αλά ηνλ θφζκν. PHP4 Απφ ην ρεηκψλα ηνπ 1998, θαη ιίγν κεηά απφ ηελ επίζεκε θπθινθφξεζε ηεο PHP 3.0 νη Andi Gutmans θαη Zeev Suraski είραλ ήδε αξρίζεη λα εξγάδνληαη γηα ηελ επαλεγγξαθή ηεο PHP. Οη ζηφρνη ήηαλ λα βειηηψζνπλ ηηο επηδφζεηο ησλ ζχλζεησλ εθαξκνγψλ, θαη λα βειηηψζνπλ ηελ πξνζαξκνζηηθφηεηα ηεο βάζεο ζηνλ θψδηθα ηεο PHP. Οη εθαξκνγέο απηέο Σελίδα 33 από 91

34 έγηλαλ δπλαηέο κε ηα λέα ραξαθηεξηζηηθά ηεο PHP 3.0 πνπ ππνζηήξηδε κηα επξεία πνηθηιία απφ βάζεηο δεδνκέλσλ θαη APIs, αιιά ε PHP 3.0 δελ είρε ζρεδηαζηεί γηα λα ρεηξίδεηαη απνηειεζκαηηθά ηέηνηεο πνιχπινθεο εθαξκνγέο. Ο λένο θηλεηήξαο, πνπ νλνκάζηεθε «Zend Engine» (πνπ απνηειείηαη απφ ηα κηθξά ηνπο νλφκαηα, Zeev θαη Andi), ηθαλνπνίεζε απηνχο ηνπο ζηφρνπο επηηπρψο, θαη έγηλε γλσζηφο γηα πξψηε θνξά ζηα κέζα ηνπ Ζ PHP 4.0, κε βάζε απηφ ηνλ θηλεηήξα, θαη ζε ζπλδπαζκφ κε έλα επξχ θάζκα πξφζζεησλ λέσλ ραξαθηεξηζηηθψλ, θπθινθφξεζε επίζεκα ην Μάην ηνπ 2000, ζρεδφλ δχν ρξφληα κεηά ηνλ πξνθάηνρφ ηεο. Δθηφο απφ ηελ εμαηξεηηθά βειηησκέλε απφδνζε ηεο έθδνζεο απηήο, ζηελ PHP 4.0 πεξηιακβάλνληαη θαη άιια βαζηθά ραξαθηεξηζηηθά φπσο ε ππνζηήξημε γηα πνιινχο πεξηζζφηεξνπο web servers, HTTP ζπλεδξίεο, πην αζθαιείο ηξφπνπο ρεηξηζκνχ εηζφδνπ ηνπ ρξήζηε θαη αξθεηέο λέεο γισζζηθέο δνκέο. PHP5 Ζ PHP 5 θπθινθφξεζε ηνλ Ηνχιην ηνπ 2004 κεηά απφ καθξά πεξίνδν αλάπηπμεο θαη δηάθνξεο πξν-εθδφζεηο. Ζ νκάδα αλάπηπμεο ηεο PHP πεξηιακβάλεη δεθάδεο developers, θαζψο θαη δεθάδεο άιινπο πνπ εξγάδνληαη γηα ηελ ππνζηήξημε ζρεδίσλ ηεο PHP, θαη πάλσ απφ εθαηφ κεκνλσκέλνπο web servers ζε έμη απφ ηηο επηά επείξνπο ηνπ θφζκνπ. Αλ θαη κφλν κηα εθηίκεζε βαζίδεηαη ζε ζηαηηζηηθέο απφ ηα πξνεγνχκελα ρξφληα, είλαη αζθαιέο λα ππνζέζνπκε φηη ε PHP ζα είλαη εγθαηεζηεκέλε ζε δεθάδεο ή ίζσο αθφκε θαη εθαηνληάδεο εθαηνκκχξηα ρξήζηεο ζε φιν ηνλ θφζκν. 4.4 Πωο ιεηηνπξγεί ε PHP Ο θαιχηεξνο ηξφπνο γηα λα εμεγήζνπκε πψο ιεηηνπξγεί ε PHP είλαη ζπγθξίλνληάο ηελ κε ην πξφηππν HTML. Φαληαζηείηε λα πιεθηξνινγήζεηε κία δηεχζπλζε ελφο εγγξάθνπ HTML ( Σελίδα 34 από 91

35 ζηε γξακκή δηεχζπλζεο ηνπ πξνγξάκκαηνο πεξηήγεζεο. Με απηφ ηνλ ηξφπν έρoπκε δεηήζεη κηα ζειίδα HTML. Θα κπνξνχζε λα απεηθνληζζεί σο εμήο: Όπσο κπνξείηε λα δείηε, ν server ζηέιλεη απιά έλα αξρείν HTML ζηνλ πειάηε. Αιιά αλ πιεθηξνινγήζνπκε ην ζα έρνπκε δεηήζεη κηα ζειίδα PHP, ν server ηψξα έρεη ηεζεί ζε εθαξκνγή: Σελίδα 35 από 91

36 Ο δηαθνκηζηήο δηαβάδεη πξψηα ην αξρείν PHP πξνζεθηηθά γηα λα δεη αλ ππάξρνπλ εξγαζίεο πνπ πξέπεη λα εθηειεζηνχλ. Μφλν φηαλ ν δηαθνκηζηήο ηειεηψζεη κε απηφ πνπ πξέπεη λα θάλεη, ην απνηέιεζκα απνζηέιιεηαη ζηνλ πειάηε. Δίλαη ζεκαληηθφ λα θαηαλνήζνπκε φηη ν πειάηεο βιέπεη κφλν ην απνηέιεζκα ηεο εξγαζίαο ηνπ server, θαη φρη ηηο πξαγκαηηθέο νδεγίεο. Απηφ ζεκαίλεη φηη αλ θάλνπκε θιηθ ζηελ επηινγή "Πξνβνιή πξνέιεπζεο" ζε κηα ζειίδα PHP, δελ κπνξνχκε λα δνχκε ηνλ θψδηθα ηεο PHP, απηφ πνπ βιέπνπκε είλαη κφλν ηα βαζηθά HTML tags. Ωο εθ ηνχηνπ, δελ κπνξνχκε λα δνχκε πψο κηα ζειίδα PHP έρεη δεκηνπξγεζεί. 4.5 Ση είλαη ν WAMP server Σν WAMP είλαη έλα αξθηηθφιεμν πνπ ζρεκαηίδεηαη απφ ηα αξρηθά ηνπ ιεηηνπξγηθνχ ζπζηήκαηνο Microsoft Windows θαη ηα θχξηα ζπζηαηηθά ηνπ παθέηνπ: Apache, MySQL θαη έλα απφ ηα PHP, Perl ή Python. Σν Apache είλαη έλαο web server, ε MySQL είλαη έλα open-source ζχζηεκα δηαρείξηζεο βάζεσλ δεδνκέλσλ θαη ε PHP, Perl θαη Python είλαη scripting γιψζζεο πνπ κπνξνχλ λα ρεηξηζηνχλ πιεξνθνξίεο πνπ πεξηέρνληαη ζε κηα βάζε δεδνκέλσλ θαη λα δεκηνπξγήζνπλ δπλακηθά ηζηνζειίδεο. Άιια πξνγξάκκαηα πνπ κπνξεί επίζεο λα πεξηιακβάλνληαη ζην WAMP, είλαη ην phpmyadmin ην νπνίν παξέρεη κηα γξαθηθή δηεπαθή ρξήζηε γηα ην δηαρεηξηζηή ηεο βάζεο δεδνκέλσλ MySQL. 4.6 Hypertext Transfer Protocol (HTTP) Σν HTTP (Hypertext Transfer Protocol) είλαη έλα ζχλνιν θαλφλσλ γηα ηε κεηαθνξά αξρείσλ (φπσο θείκελν, γξαθηθά, ήρν, βίληεν θαη άιια αξρεία πνιπκέζσλ) ζην World Wide Web. Μφιηο έλαο ρξήζηεο αλνίγεη έλα πξφγξακκα πεξηήγεζεο ζην Web, ν ρξήζηεο θάλεη έκκεζα ηε ρξήζε ηνπ HTTP. Σν HTTP είλαη έλα πξσηφθνιιν εθαξκνγήο πνπ ηξέρεη ζηελ θνξπθή ηεο ζνπίηαο TCP/IP πξσηνθφιισλ. Ζ HTTP έλλνηεο πεξηιακβάλνπλ, ηελ ηδέα φηη ηα αξρεία κπνξεί λα πεξηέρνπλ αλαθνξέο ζε άιια αξρεία ησλ νπνίσλ ε επηινγή ζα πξνθαιέζεη πξφζζεηεο αηηήζεηο κεηαθνξάο. Κάζε κεράλεκα δηαθνκηζηή Web, εθηφο απφ ηα αξρεία ηεο ηζηνζειίδαο κπνξεί λα εμππεξεηήζεη, έλα δαίκνλα HTTP, έλα πξφγξακκα Σελίδα 36 από 91

37 πνπ έρεη ζρεδηαζηεί γηα λα πεξηκέλεη θαη λα ρεηξίδεηαη αηηήζεηο HTTP. Πξφγξακκα πεξηήγεζεο ζην Web είλαη έλαο HTTP πειάηεο, πνπ ζηέιλεη αηηήζεηο ζηηο κεραλέο δηαθνκηζηή. Όηαλ ν ρξήζηεο ηνπ πξνγξάκκαηνο πεξηήγεζεο εηζάγεη εληνιέο είηε κε "άλνηγκα" ελφο αξρείνπ Web (πιεθηξνιφγεζε ζε έλα Uniform Resource Locator ή URL) ή θάλνληαο θιηθ ζε έλα ζχλδεζκν ππεξθεηκέλνπ, ην πξφγξακκα πεξηήγεζεο ρηίδεη κηα αίηεζε HTTP θαη ζηέιλεη ηε δηεχζπλζε IP πνπ ππνδεηθλχεηαη απφ ην URL. Ο HTTP ζηνλ εμππεξεηεηή πξννξηζκνχ ιακβάλεη ηελ αίηεζε θαη ζηέιλεη πίζσ ην αηηνχκελν αξρείν ή ηα αξρεία πνπ ζρεηίδνληαη κε ηελ αίηεζε. (Μηα ηζηνζειίδα ζπλήζσο απνηειείηαη απφ πεξηζζφηεξα απφ έλα αξρεία.) Δπίινγνο ην θεθάιαην απηφ είδακε ηελ ζεκαζία θαη ηελ αμία ηεο php. Όπσο είδακε είλαη κηα γιψζζα πξνγξακκαηηζκνχ γηα δεκηνπξγία δπλακηθψλ ζειίδσλ, πνπ πεξλάλε απφ επεμεξγαζία απφ ηνλ δηαθνκηζηή φπνπ εθεί δεκηνπξγείηε ην ηειηθφ πεξηερφκελν ηεο ζειίδαο, θαη ζηέιλεηε ζην πξφγξακκα πεξηήγεζεο ζε κνξθή HTML θψδηθα. ην επφκελν θεθάιαην ζα κηιήζνπκε γηα ην CMS. Σελίδα 37 από 91

38 Κεθάιαην 5 : CMS 5.1 Ση είλαη ην CMS Έλα ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ (CMS) είλαη έλα ζχζηεκα πνπ ρξεζηκνπνηείηαη γηα ηε δηαρείξηζε ηνπ πεξηερνκέλνπ ελφο δηθηπαθνχ ηφπνπ. πλήζσο, έλα CMS απνηειείηαη απφ δχν ζηνηρεία: ηελ εθαξκνγή δηαρείξηζεο πεξηερνκέλνπ (CMA) θαη ηελ εθαξκνγή δηαλνκήο πεξηερνκέλνπ (CDA). Σν ζηνηρείν CMA επηηξέπεη ζηνλ δηαρεηξηζηή ηνπ πεξηερνκέλνπ ή ζπγγξαθέα, ν νπνίνο κπνξεί λα κελ γλσξίδεη Hypertext Markup Language (HTML), λα δηαρεηξίδεηαη ηε δεκηνπξγία, ηελ ηξνπνπνίεζε, θαη ηελ αθαίξεζε πεξηερνκέλνπ απφ κηα ηνπνζεζία Web ρσξίο λα ρξεηάδεηαη ηελ εκπεηξία ελφο Webmaster. Σν ζηνηρείν CDA ρξεζηκνπνηεί θαη ζπγθεληξψλεη ηηο πιεξνθνξίεο απηέο γηα λα καο ελεκεξψζεη γηα ηελ ηνπνζεζία Web. Σα ραξαθηεξηζηηθά ελφο ζπζηήκαηνο CMS πνηθίιινπλ. αιιά ηα πεξηζζφηεξα πεξηιακβάλνπλ ηελ Web-based έθδνζε, φπνπ δηαρεηξίδεηαη ηελ κνξθή, ηνλ έιεγρν αλαζεψξεζεο, ηελ αλαδήηεζε θαη ηελ αλάθηεζε. Ζ Web-based έθδνζε επηηξέπεη ζηα άηνκα λα ρξεζηκνπνηήζνπλ έλα πξφηππν ή έλα ζχλνιν απφ πξφηππα πνπ έρνπλ εγθξηζεί απφ ηνλ νξγαληζκφ, θαζψο θαη ηνπο νδεγνχο θαη άιια εξγαιεία γηα λα δεκηνπξγνχλ ή λα ηξνπνπνηνχλ ην πεξηερφκελν ζειίδσλ. Ζ δπλαηφηεηα δηαρείξηζεο κνξθήο επηηξέπεη έγγξαθα, φπσο είλαη ηα ειεθηξνληθά έγγξαθα Legacy θαη ηα ζαξσκέλα έγγξαθα ζε ραξηί λα κνξθνπνηεζνχλ ζε HTML ή ζε κνξθή Portable Document Format (PDF) γηα ηελ ηνπνζεζία Web. Ζ δπλαηφηεηα ειέγρνπ αλαζεψξεζεο επηηξέπεη ζην πεξηερφκελν λα ελεκεξσζεί κε κηα λεφηεξε έθδνζε ή ηελ επαλαθνξά ζε κηα πξνεγνχκελε έθδνζε. Ζ αλαζεψξεζε ηνπ ειέγρνπ, παξαθνινπζεί επίζεο ηηο αιιαγέο πνπ έγηλαλ ζηα αξρεία απφ ηα άηνκα. Έλα επηπιένλ ραξαθηεξηζηηθφ είλαη ε αλαδήηεζε θαη ε αλάθηεζε. ε έλα ζχζηεκα CMS φια ηα δεδνκέλα είλαη νξγαλσκέλα. Σα άηνκα κπνξνχλ λα ςάμνπλ δεδνκέλα ρξεζηκνπνηψληαο ιέμεηο-θιεηδηά, ηα νπνία ην ζχζηεκα CMS ηα αλαθηά. Σελίδα 38 από 91

39 Έλα ζχζηεκα CMS κπνξεί επίζεο λα παξέρεη εξγαιεία γηα ην one-to-one marketing. Σν one-to-one marketing είλαη ε ηθαλφηεηα ελφο Web site λα πξνζαξκφζεη ην πεξηερφκελφ ηνπ θαη ηε δηαθήκηζε ησλ ηδηαίηεξσλ ραξαθηεξηζηηθψλ ηνπ ρξήζηε, ρξεζηκνπνηψληαο πιεξνθνξίεο πνπ παξέρνληαη απφ ην ρξήζηε ή ζπιιέγνληαη απφ ηελ πεξηνρή ηεο ζειίδαο. Γηα παξάδεηγκα, αλ επηζθεθζείηε κηα κεραλή αλαδήηεζεο θαη θάλεηε κηα αλαδήηεζε γηα "ςεθηαθή θσηνγξαθηθή κεραλή," ηα δηαθεκηζηηθά banners ζα δηαθεκίζνπλ ηηο επηρεηξήζεηο πνπ πσινχλ ςεθηαθέο θσηνγξαθηθέο κεραλέο, αληί ησλ επηρεηξήζεσλ πνπ πσινχλ πξντφληα θήπνπ. Γχν παξάγνληεο πξέπεη λα ιεθζνχλ ππφςε πξηλ έλαο νξγαληζκφο απνθαζίζεη λα επελδχζεη ζε έλα CMS. Ο πξψηνο είλαη ην κέγεζνο ηνπ νξγαληζκνχ θαη ν άιινο ε πνηθηιία ησλ ειεθηξηθψλ εληχπσλ πνπ ρξεζηκνπνηνχληαη απφ ηνλ νξγαληζκφ. 5.2 Πιενλεθηήκαηα θαη κεηνλεθηήκαηα ηνπ CMS Πιενλεθηήκαηα ηνπ CMS Οη ζειίδεο επεμεξγάδνληαη online κέζσ ελφο θνηλνχ browser. Οη αιιαγέο πνπ γίλνληαη θαίλνληαη ακέζσο. Ο ηδηνθηήηεο ηεο ζειίδαο κπνξεί εχθνια λα επεμεξγάδεηαη, λα πξνζζέηεη ή λα δηαγξάθεη ζειίδεο. Με ειάρηζηε εθπαίδεπζε, ν ηδηνθηήηεο ηνπ site κπνξεί λα είλαη ζε ζέζε λα πξνζζέηεη λέα ζηνηρεία φπσο κελνχ, θφξκεο, γξαθηθά θ.α. Οη πξφζζεηεο ιεηηνπξγίεο πξνζηίζεληαη κέζσ ησλ plugins. Σα plugins είλαη (ή πξέπεη λα είλαη) επξέσο δηαζέζηκα. Πεξηερφκελν πνιιψλ δηαθνξεηηθψλ ηχπσλ κπνξνχλ λα νξγαλσζνχλ θαη λα παξνπζηάδνληαη κε πνιινχο δηαθνξεηηθνχο ηξφπνπο. Σν πεξηερφκελν είλαη πιήξσο δηαρσξηζκέλν απφ ηελ παξνπζίαζε, πξάγκα πνπ ζεκαίλεη φηη ην πεξηερφκελν ηεο ζειίδαο δελ επεξεάδεη ηε δηάηαμή. Σελίδα 39 από 91

40 Σν 75% ησλ ζρεδηαζηψλ ηζηνζειίδσλ δελ κπνξνχλ λα γξάςνπλ αθφκε έγθπξν θψδηθα ζε HTML (ή δελ κπνξνχλ λα κπνπλ ζηνλ θφπν λα κάζνπλ). Σν CMS δίλεη ηελ δπλαηφηεηα λα ζρεδηάδνπλ κηα ζειίδα αθφκε θαη κε ειάρηζηεο γλψζεηο πξνγξακκαηηζκνχ. Μεηνλεθηήκαηα ηνπ CMS. Έλα CMS πξέπεη λα έρεη έλαλ webmaster γηα λα επηβιέπεη ηελ αζθάιεηα θαη ζέκαηα ιεηηνπξγηθφηεηαο. Γελ είλαη ζαλ κηα HTML ηζηνζειίδα πνπ απνηειείηαη απφ ζηαηηθέο ζειίδεο, πνπ κπνξεί λα εγθαηαζηαζεί θαη ζηε ζπλέρεηα λα αθεζεί. Ο webmaster πξέπεη λα αλαβαζκίζεη ην CMS, φηαλ νη ελεκεξσκέλεο εθδφζεηο ζε θψδηθα αζθαιείαο θπθινθνξήζνπλ ή φηαλ ζθάικαηα δηνξζψλνληαη. Ζ ηζηνζειίδα δελ κπνξεί λα εγθαηαζηαζεί θαη ζηε ζπλέρεηα λα αθεζεί. Πξέπεη λα δίλεηε κεγάιε πξνζνρή ζηα ρξψκαηα πνπ ρξεζηκνπνηνχκε ζην κέγεζνο ηεο γξακκαηνζεηξάο θαη γεληθά ζηελ ζρεδίαζε ηνπ πεξηερνκέλνπ ηεο ζειίδαο καο, δηφηη ν επηζθέπηεο δελ ζα ελδηαθεξζεί λα ηελ δηαβάζεη. Σα πεξηερφκελα ηεο ζειίδαο καο ζα πξέπεη λα είλαη πνιχ θαινγξακκέλα ψζηε λα δηαβαζηνχλ θαη απφ ηηο κεραλέο αλαδήηεζεο ρσξίο πξνβιήκαηα. 5.3 Σύπνη CMS Σα ζπζηήκαηα δηαρείξηζεο πεξηερνκέλνπ κπνξνχλ λα δηαηξεζνχλ ζε πνιιά δηαθνξεηηθά είδε, γηα αξθεηνχο δηαθνξεηηθνχο ζθνπνχο. Πξψηνλ, ππάξρνπλ ηζηνζειίδεο κε CMS θαη ηζηνζειίδεο ρσξίο CMS. Οη πξψηεο έρνπλ ζρεδηαζηεί γηα λα εμππεξεηνχλ πεξηερφκελν ζην Γηαδίθηπν, ελψ νη ηειεπηαίεο γηα λα πεξηέρνπλ θαη λα νξγαλψλνπλ πιεξνθνξίεο κηαο επηρείξεζεο ζε έλα ηδησηηθφ πεξηβάιινλ. Μπνξνχκε λα πνχκε φηη ππάξρνπλ 5 θαηεγνξίεο CMS πνπ είλαη: Δπηρεηξεζηαθά CMS (Enterprise CMS - ECMS) Σελίδα 40 από 91

41 πζηήκαηα δηαρείξηζεο Web πεξηερνκέλσλ CMS (Web CMS - WCMS) πζηήκαηα δηαρείξηζεο εγγξάθσλ (Document management system - DMS) πζηήκαηα δηαρείξηζεο πεξηερνκέλσλ ζπζηαηηθψλ (Component content management system - CCMS) πζηήκαηα δηαρείξηζεο πεξηερνκέλσλ θνξεηψλ ζπζθεπψλ (Mobile content management system) 5.4 Η ηζηνξία ηνπ CMS Σα ζπζηήκαηα δηαρείξηζεο πεξηερνκέλνπ (CMS) είλαη κηα θξάζε πνπ αλαθέξεηαη ζε νπνηαδήπνηε ηξφπν κε ηνλ νπνίν έλαο ρξήζηεο κπνξεί λα νξγαλψζεη ειεθηξνληθά πιεξνθνξίεο. Σα CMS ρξεζηκνπνηνχληαη απφ webmasters γηα λα δηαρεηξηζηνχλ θαη λα ελεκεξψζνπλ εχθνια ηελ ηζηνζειίδα ηνπο θαη λα είλαη κηα θαιή επηινγή γηα ηνπο αλζξψπνπο πνπ δελ μέξνπλ πνιιά απφ θσδηθφ. Ζ ηζηνξία ηνπ CMS είλαη ελδηαθέξνπζα θαη δείρλεη ηελ εμέιημε ηνπ Γηαδηθηχνπ φπσο ην γλσξίδνπκε ζήκεξα. Σφηε, ε θξάζε «CMS» ήηαλ έλαο ηξφπνο γηα λα αλαθέξνληαη ζε δηαθνξεηηθά ζπζηήκαηα / ινγηζκηθφ πνπ ζα επέηξεπαλ ζηνπο ρξήζηεο λα δεκηνπξγνχλ, λα δηαρεηξίδνληαη, λα επεμεξγάδνληαη θαη λα δεκνζηεχνπλ πιεξνθνξίεο γηα ηηο online ηζηνζειίδεο ηνπο. Σα πξψηα θχξηα παθέηα CMS είραλ θπθινθνξήζεη απφ ηε Microsoft θαη Lotus ζηηο αξρέο ηεο δεθαεηίαο ηνπ Ήηαλ πεξίπνπ ην 1996 φηαλ αλαπηχρζεθε έλα CMS πνπ έκνηαδε κε απηφ πνπ έρνπκε ζήκεξα. Ζ Vignette εηαηξεία θπθινθφξεζε ην παθέην ινγηζκηθνχ "StoryServer". Σν CMS έγηλε δεκνθηιήο γηα ην θνηλφ θαη γηα ηα επφκελα ρξφληα πνιιέο εηαηξείεο ην αλέπηπμαλ θαη θπθινθφξεζαλ ην δηθφ ηνπο ινγηζκηθφ. Σα έηε 2000 έσο 2005 ην δηαδίθηπν πέξαζε δχζθνιεο ζηηγκέο. Πνιιέο ηζηνζειίδεο πνπ είραλ κεγάιε επηηπρία, άξρηζαλ λα θαηαξξένπλ. Απφ ηελ Σελίδα 41 από 91

42 άιιε πιεπξά, άιιεο ηζηνζειίδεο φπσο ην Amazon απνγεηψζεθαλ θαη ζπγρσλεχηεθαλ κε άιιεο επηρεηξήζεηο. Πνιιέο εηαηξείεο πνπ είραλ δεκηνπξγήζεη CMS παθέηα είραλ πέζεη ζε πηψρεπζε, ή ζπγρσλεχηεθαλ, ή θαηέξξεπζαλ. Ωο απνηέιεζκα απηψλ ησλ πξαγκάησλ, πνιιά απφ ηα CMS έπεζαλ ζε ζχγρπζε θαη δελ ππνζηεξίδνληαλ πιένλ. Καηά ηελ πεξίνδν , ην δηαδίθηπν άξρηζε λα αλαπηχζζεηε πάιη θαη άξρηζε λα επηζηξέθεη ζην παιηφ ηνπ εαπηφ. Καηά ην δηάζηεκα απηφ, αξθεηέο εμειίμεηο ζην CMS έγηλαλ. Σν CMS εμειίρηεθε ζε έλαλ ηνκέα ηφζν κεγάιν, ψζηε ηα CMS παθέηα ζα έπξεπε πξαγκαηηθά λα ρσξηζηνχλ ζε ηξεηο νκάδεο. Ζ πξψηε κπνξεί λα ραξαθηεξηζηεί σο Μνληάδ ινγηζκηθνχ. Λνγηζκηθφ πνπ εκπίπηεη ζηελ θαηεγνξία απηή επηηξέπεη ζηνπο ρξήζηεο λα ρξεζηκνπνηήζνπλ ην ινγηζκηθφ πνπ έρεη εγθαηαζηαζεί ζε ζθιεξνχο δίζθνπο γηα ηελ επηθαηξνπνίεζε ειεθηξνληθψλ δεδνκέλσλ ρσξίο ζχλδεζε. Ζ δεχηεξε νκάδα κπνξεί λα ραξαθηεξηζηεί σο online επεμεξγαζία. Αληί νη ρξήζηεο λα έρνπλ πξφζβαζε ζε απηφ ην ινγηζκηθφ κέζσ ζθιεξψλ δίζθσλ, κπνξνχζαλ λα ζπλδεζνχλ ζην Internet. Όια ηα δεδνκέλα αλαλεψλνληαλ θαη επεμεξγάδνληαλ ζε απεπζείαο ζχλδεζε. Ζ ηέηαξηε νκάδα, ε νπνία είρε ραξαθηεξηζηεί σο "Hybrid", επέηξεπε ζηνπο ρξήζηεο λα εξγάδνληαη ζε απεπζείαο ζχλδεζε, ή offline. Σν CMS ζήκεξα είλαη αξθεηά απαηηεηηθφ, ηδίσο γηα εκπνξηθέο επηινγέο. Έλα παξάδεηγκα ελφο εκπνξηθνχ παθέηνπ είλαη ην CMS E360 ηεο ΝΕ. Πεξηιακβάλεη πνιιέο πηπρέο ηνπ κάξθεηηλγθ δηαδηθηχνπ, φπσο ην κάξθεηηλγθ ειεθηξνληθνχ ηαρπδξνκείνπ θαη CRM ζε έλα παθέην. Σν κέιινλ ηνπ CMS θαίλεηαη θαιφ. Καζψο εμειίζζεηε φιν θαη πεξηζζφηεξν θαη γίλεηαη φιν θαη πην ηζρπξφ ην ινγηζκηθφ, κε απνηέιεζκα νη webmasters λα έρνπλ αθφκε πεξηζζφηεξε δχλακε γηα λα δεκηνπξγήζνπλ θαληαζηηθέο ηζηνζειίδεο γηα λα ηηο απνιαχζνπλ φινη. Σελίδα 42 από 91

43 5.5 Πωο ιεηηνπξγεί ην CMS Σν CMS ιεηηνπξγεί κε ηελ απνζήθεπζε ηνπ πεξηερνκέλνπ ηεο ζειίδαο ζε κηα ζρεζηαθή βάζε δεδνκέλσλ (MySQL, SQL Server) πνπ θαηεγνξηνπνηεί ηηο ζειίδεο θαη ηα αξρεία. Όηαλ έλα άηνκν δεκνζηεχεη ην πεξηερφκελν κηαο ζειίδαο, κηα θπζηθή cache ηνπ πεξηερνκέλνπ δεκηνπξγείηαη θαη απνζεθεχεηαη ζηνλ αληίζηνηρν θαηάινγν. Σα HTML θαη ηα PHP templates ρξεζηκνπνηνχληαη γηα λα εμαζθαιίζνπλ ηνλ έιεγρν ηεο πνηφηεηαο θαη ηα πξφηππα ζρεδηαζκνχ ζε φιε ηελ ηζηνζειίδα. Γελ ππάξρεη φξην ζην ζηπι γξαθηθψλ απφ απηά ηα πξφηππα θαη δελ ππάξρεη φξην ζηνλ αξηζκφ ησλ δηαθνξεηηθψλ πξνηχπσλ πνπ κπνξνχλ λα ρξεζηκνπνηεζνχλ. Γηαθνξεηηθέο εκθαλίζεηο ζε φιε ηελ ζειίδα κπνξνχλ λα επηηεπρζνχλ κε ηελ εθαξκνγή δηαθφξσλ πξνηχπσλ. Δπίινγνο Σν CMS ινηπφλ είλαη έλα πνιχ ρξήζηκν εξγαιείν δεκηνπξγίαο ηζηνζειίδσλ θαη γη απηνχο πνπ μέξνπλ πξνγξακκαηηζκφ αιιά θαη γη απηνχο πνπ δελ γλσξίδνπλ. ην επφκελν θεθάιαην ζα αλαθεξζνχκε γηα έλα ζπγθεθξηκέλν CMS ην Drupal. Σελίδα 43 από 91

44 Κεθάιαην 6: Drupal 6.1 Ση είλαη ην Drupal Σν Drupal είλαη έλα δσξεάλ θαη open-source πιαίζην δηαρείξηζεο πεξηερνκέλνπ (CMS), γξακκέλν ζε PHP πνπ δηαλέκεηαη απφ ηελ General Public License. Δίλαη έλα ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ (πνπ αλαθέξεηαη επίζεο σο CMS), πνπ ρξεζηκνπνηείηαη γηα ηε δηαρείξηζε πεξηερνκέλνπ γηα ελεκεξσηηθνχο ηζηφηνπνπο, ηζηνζειίδεο θνηλσληθήο δηθηχσζεο, εθαξκνγέο web θαη ζε πνιιά άιια. Γηα λα θπξηνιεθηήζνπκε ην Drupal δελ είλαη έλα CMS, αιιά κηα πιαηθφξκα ζηελ νπνία δηάθνξεο ελφηεηεο κπνξνχλ λα ζπλδεζνχλ θαη λα ζπλδπαζηνχλ γηα λα παξέρνπλ έλα CMS πξνζαξκνζκέλν ζηηο αλάγθεο καο. Τπάξρνπλ ελφηεηεο γηα πνιινχο ζθνπνχο, γηα παξάδεηγκα, ηελ απνζήθεπζε δηαθνξεηηθψλ εηδψλ πεξηερνκέλνπ, ηελ αλάθηεζε ηνπ πεξηερνκέλνπ κε βάζε θξηηήξηα, ηελ εκθάληζε θαη πνιιά άιια. Παξά ην γεγνλφο φηη ην Drupal πξνζθέξεη έλα εθιεπηπζκέλν πεξηβάιινλ πξνγξακκαηηζκνχ γηα ηνπο πξνγξακκαηηζηέο, δελ απαηηνχληαη γλψζεηο πξνγξακκαηηζκνχ γηα ηε βαζηθή εγθαηάζηαζε θαη δηαρείξηζε ηζηνηφπσλ. Σν Drupal ηξέρεη ζε νπνηαδήπνηε ππνινγηζηηθή πιαηθφξκα πνπ ππνζηεξίδεη ηφζν έλα web server πνπ κπνξεί λα ιεηηνπξγεί PHP (ζπκπεξηιακβαλνκέλσλ ησλ Apache, IIS, Lighttpd, Hiawatha, Cherokee ή Nginx) φζν θαη κηα βάζε δεδνκέλσλ (φπσο MySQL, MongoDB, MariaDB, PostgreSQL, SQLite, ή ην Microsoft SQL Server ) γηα ηελ απνζήθεπζε ηνπ πεξηερνκέλνπ θαη ησλ ξπζκίζεσλ. Σν Drupal 6 απαηηεί ηελ PHP ή λεφηεξε έθδνζε ηεο, ελψ ην Drupal 7 απαηηεί PHP ή λεφηεξε έθδνζε ηεο. Σελίδα 44 από 91

45 6.2 Η ηζηνξία ηνπ Drupal Αξρηθά ην Drupal γξάθηεθε απφ ηνλ Dries Buytaert σο έλαο πίλαθαο κελπκάησλ, ην 2001 ιφγσ ηεο κεγάιεο απήρεζεο πνπ είρε έγηλε έλα έξγν αλνηθηνχ θψδηθα. Σν Drupal είλαη κηα αγγιηθή απφδνζε ηεο νιιαλδηθήο ιέμεο "druppel", πνπ ζεκαίλεη "ζηαγφλα" ην φλνκα πάξζεθε απφ ηελ ηψξα ηζηνζειίδα Drop.org, ηνπ νπνίνπ ν θσδηθφο ζηγά-ζηγά εμειίρζεθε ζε Drupal. Ο Buytaert ήζειε λα νλνκάζεη ηελ ηνπνζεζία "dorp" (ηα νιιαλδηθά ζήκαηλε "ρσξηφ"), αιιά απφ ιάζνο ζηελ πιεθηξνιφγεζε φηαλ έγξαθε ην φλνκα ηνπ domain name έγξαςε Drupal. Σν ελδηαθέξνλ γηα ην Drupal απμήζεθε πνιχ ην 2003, φηαλ ρξεζηκνπνηήζεθε γηα ηελ θαηαζθεπή ηεο ηζηνζειίδαο "DeanSpace» ηνπ Υάνπαξλη Νηηλ, έλαο απφ ηνπο ππνςεθίνπο γηα ηηο πξνεδξηθέο εθινγέο ηηο ΖΠΑ ηνπ Σα κέιε ηεο νκάδαο ηνπ web ζπλέρηζαλ λα δείρλνπλ ην ελδηαθέξνλ ηνπο γηα ηελ αλάπηπμε απηήο ηεο πιαηθφξκαο, ε νπνία ζα κπνξνχζε λα βνεζήζεη ηνλ πνιηηηθφ αθηηβηζκφ, κε ηε έλαξμε ηνπ CivicSpace Labs ηνλ Ηνχιην ηνπ Σν Drupal αλαπηχρζεθε απφ κηα θνηλφηεηα, θαη ε δεκνηηθφηεηά ηνπ απμάλεηαη κε ηαρείο ξπζκνχο. Απφ ηνλ Ηνχιην ηνπ 2007 έσο ηνλ Ηνχλην ηνπ 2008, ην Drupal ην είραλ θαηεβάζεη απφ ηελ ηζηνζειίδα Drupal.org πεξηζζφηεξεο απφ 1,4 εθαηνκκχξηα θνξέο, κηα αχμεζε πεξίπνπ 125% απφ ην πξνεγνχκελν έηνο. Σν Γεθέκβξην ηνπ 2012, πεξηζζφηεξεο απφ ηζηνζειίδεο άξρηζαλ λα ην ρξεζηκνπνηνχλ. Κάπνηεο απφ απηέο ηηο ηζηνζειίδεο είλαη αξθεηά γλσζηέο νξγαλψζεηο, ζπκπεξηιακβαλνκέλσλ ησλ εηαηξεηψλ, ησλ κέζσλ ελεκέξσζεο, εθδνηηθέο εηαηξείεο, θπβεξλήζεηο, ζρνιεία, θ.α. Σν Drupal θέξδηζε επίζεο πνιιά Packt Open Source Awards CMS θαη θέξδηζε ην Webware 100 ηξεηο θνξέο ζπλερφκελα. Σελίδα 45 από 91

46 6.3 Ση είλαη απηό πνπ θάλεη ην Drupal δηαθνξεηηθό από ηα άιια CMS Σν EPiServer, ην SiteVision, ην Sitecore, ην Polopoly θαη ην Escenic είλαη θάπνηα παξαδείγκαηα ηεο πξψηεο γεληάο ζπζηεκάησλ δηαρείξηζεο πεξηερνκέλνπ. Σα παξαπάλσ CMS ραξαθηεξίδνληαλ απφ ην γεγνλφο φηη νη λέεο ή πξνζαξκνζκέλεο ιεηηνπξγίεο πνπ είραλ, είραλ πξνζηεζεί κέζσ ηεο αλάπηπμεο λέσλ κνλάδσλ πνπ είραλ πξνγξακκαηηζηεί ζε Java ή.net πιαηθφξκα. Απηφ ήηαλ ρξνλνβφξν θαη απαηηνχζε ηελ βνήζεηα απφ εηδηθνχο. Σν Drupal, απφ ηελ άιιε πιεπξά, είλαη κηα δεχηεξε γεληά CMS. Απηφ ζεκαίλεη φηη πνιιέο λέεο ή πξνζαξκνζκέλεο ιεηηνπξγίεο δεκηνπξγνχληαλ απφ ην πεξηβάιινλ εξγαζίαο ηνπ ρξήζηε, ρσξίο πξνγξακκαηηζκφ, θαη ρσξίο βέβαηα απηφ λα είλαη απφιπην. Με απηφλ ηνλ ηξφπν δελ έπαηξλε πνιχ ρξφλν θαη κπνξνχζε λα γίλεη απφ έλαλ έκπεηξν πξνγξακκαηηζηή. 6.4 Γηαηί ην Drupal To Drupal είλαη κηα open source πιαηθφξκα γηα ηελ νηθνδφκεζε ηζρπξψλ, θαη επέιηθησλ ηζηνζειίδσλ. Υξεζηκνπνηείηαη απφ ρηιηάδεο νξγαληζκνχο θαη επηρεηξήζεηο ζε φιν ηνλ θφζκν. Παξαθάησ βιέπνπκε κεξηθνχο ιφγνπο πνπ θάλνπλ ην Drupal κηα ζσζηή επηινγή γηα ηελ δεκηνπξγία κηαο ζειίδαο. Δύρξεζην Σν Drupal είλαη έλα χζηεκα Γηαρείξηζεο Πεξηερνκέλνπ (CMS), ην νπνίν επηηξέπεη ζηνπο ρξήζηεο λα πξνζζέηνπλ θαη λα ελεκεξψλνπλ ηηο ηζηνζειίδεο ρσξίο ηερληθή βνήζεηα. Απηνί απιά πξνζαξκφδνπλ ην Drupal γηα λα ηαηξηάδεη ζηηο αλάγθεο, θαη ζηελ ξνή εξγαζίαο ηνπο. Παγθόζκην Γελ είλαη κφλν φηη ην Drupal ππνζηεξίδεηαη απφ κηα παγθφζκηα θνηλφηεηα αλάπηπμεο, είλαη επίζεο ε ηδαληθή επηινγή γηα νξγαληζκνχο κε παγθφζκηα Σελίδα 46 από 91

47 εκβέιεηα. Σν Drupal κπνξεί λα εγθαηαζηαζεί ζε πνιιέο γιψζζεο, επηηξέπνληαο θαη ζηνπο δηαρεηξηζηέο θαη ζηνπο ρξήζηεο λα πξνβάινπλ ηελ ηζηνζειίδα ζηε γιψζζα ηεο επηινγήο ηνπο. Δπεθηάζηκν Σν Drupal είλαη κηα πξνζαξκφζηκε πιαηθφξκα. Ζ δνπιεηά καο είλαη λα πξνζαξκφζνπκε ην Drupal ζηηο αλάγθεο ηνπ νξγαληζκνχ καο κε ηελ ελζσκάησζή ηνπ ζην πεξηερφκελφ καο. Αζθαιέο Με κηα ηέηνηα κεγάιε βάζε ζηήξημεο, ην Drupal ζπλερψο παξαθνινπζείηαη γηα ζέκαηα αζθάιεηαο. Καζψο ε ηερλνινγία εμειίζζεηαη ζην δηαδίθηπν, ε θνηλφηεηα ηνπ Drupal παξάγεη ηηο επηδηνξζψζεηο θαη ηηο ελεκεξψζεηο πνπ απαηηνχληαη γηα λα θξαηήζεη αζθαιέο ηνλ ηζηφρσξν καο. State-of-the-art Με απιά ιφγηα, ην Drupal είλαη αηρκή. Κάζε θνξά πνπ αθνχηε γηα ην "next best thing" ζην web design, νη πηζαλφηεηεο είλαη φηη Drupal είλαη ήδε εθεί. Οη ιάηξεηο ηνπ Drupal πνηέ δελ ζηακαηνχλ λα αλαδεηνχλ ηξφπνπο γηα λα θάλνπλ ην Drupal αθφκε θαιχηεξν. Δπίινγνο Δίδακε ινηπφλ πφζν ρξήζηκν είλαη ην Drupal θαη πφζν καο βνεζάεη ζηελ αλάπηπμε ηζηνζειίδσλ. Ζ ηζηνξία έδεημε φηη ην Drupal απνθηά φιν θαη πεξηζζφηεξν έδαθνο θαη ηείλεη λα γίλεη ε πξψηε επηινγή γηα ηνπο πεξηζζφηεξνπο πξνγξακκαηηζηέο ηζηνζειίδσλ. ην επφκελν θεθάιαην ζα κηιήζνπκε πψο αθξηβψο αλαπηχρζεθε ην E-shop απηήο ηεο πηπρηαθήο. Σελίδα 47 από 91

48 Κεθάιαην 7: Αλάιπζε ηεο εθαξκνγήο 7.1 Δηζαγωγή ε απηφ ην θεθάιαην ζα αλαιχζνπκε βήκα βήκα πσο αλαπηχρζεθε ε ζειίδα απηή κε ηελ βνήζεηα ηνπ Drupal. Θα μεθηλήζνπκε λα δείμνπκε πψο έγηλε ην theme απφ ηελ αξρή, πσο θάλνπκε εγθαηάζηαζε ηνπ Drupal, πσο δεκηνπξγήζακε ηελ βάζε δεδνκέλσλ, πψο εηζάγακε βηβιία, πψο θηηάμακε ην θαιάζη αγνξψλ θαη ηελ login θφξκα. 7.2 Γεκηνπξγία ηνπ Theme Αξρηθά λα πνχκε φηη έλα theme (ζέκα) καο επηηξέπεη λα αιιάμνπκε ηελ εκθάληζε θαη ηελ αίζζεζε ηνπ Drupal site καο. Μπνξνχκε λα ρξεζηκνπνηήζνπκε ζέκαηα πνπ ήδε έρεη ην Drupal ή λα θαηεβάζνπκε θάπνηα έηνηκα theme (δσξεάλ ή επί πιεξσκή) ή λα δεκηνπξγήζνπκε έλα theme απφ ην κεδέλ. Δκείο ζα δείμνπκε πψο κπνξνχκε λα θηηάμνπκε έλα theme απφ ηελ αξρή. Αξρηθά απηφ πνπ πξέπεη λα θάλνπκε είλαη λα αξρίζνπκε λα γξάθνπκε ζε HTML θψδηθα πψο ζα ζέιακε λα θαίλεηαη ε ζειίδα καο ζην web. Οπζηαζηηθά απηφ πνπ ζέινπκε λα θάλνπκε είλαη λα ρσξίζνπκε ηηο ζειίδα καο ζε πεξηνρέο, ρσξίο λα βάινπκε θαη ην πεξηερφκελν πνπ ζα ζέιακε λα πεξηέρεη θάζε πεξηνρή (φπσο θείκελα, εηθφλεο, θφξκεο θ.ιπ.), απηά ζα κπνπλ δπλακηθά κε ηελ βνήζεηα ηνπ Drupal. Υξεηαδφκαζηε έλα Notepad++ γηα λα αξρίζνπκε λα γξάθνπκε ηνλ HTML θψδηθα καο. Αξρηθά ζα δείμνπκε ηνλ HTML θψδηθα πνπ ζα κπεη ην header ηεο ζειίδαο καο. <div class="art-header"> <div class="art-header-position"> <div class="art-header-wrapper"> <div class="cleared"></div> Σελίδα 48 από 91

49 <div class="art-header-inner"> <div class="art-headerobject"></div> <div class="art-logo"> <h1 class="art-logo-name"><a href="#"> </a></h1> <h2 class="art-logo-text"> </h2> </div> </div> </div> </div> </div> Βιέπνπκε ινηπφλ φηη θαηά θχξην ιφγν ζην header καο ζέινπκε λα έρνπκε ην φλνκα ηνπ θαηαζηήκαηνο (δειαδή ην logo ) θαη έλα slogan. Γηα λα ηα κνξθνπνηήζνπκε απηά ρξεηαδφκαζηε δχν θιάζεηο κηα γηα ην θαζέλα πνπ ζα κνξθνπνηεζνχλ έπεηηα κέζσ ηνπ CSS. ηελ ζπλέρεηα δεκηνπξγνχκε ηφζα <div> φζα καο ρξεηάδνληαη γηα λα έρνπκε ην απνηέιεζκα πνπ επηζπκνχκε. Κάπνηα <div> πνπ ρξεζηκνπνηνχκε είλαη γηα λα ζέζνπκε ηελ ζέζε ηνπ header, ην ηη ζα πεξηέρεη κέζα ην header, ην κέγεζνο ηνπ θ.α. <div class="art-bar art-nav"> <div class="art-nav-outer"> <div class="art-nav-wrapper"> <div class="art-nav-inner"> <div class="art-hmenu"> <div class="art-hmenu-extra1"></div> </div> </div> </div> </div> </div> Σελίδα 49 από 91

50 Ο παξαπάλσ θψδηθαο είλαη ν θψδηθαο γηα ην κελνχ πινήγεζεο ή ην navigation menu φπσο ιέγεηε ζην Drupal. Δπίζεο εδψ νξίδνπκε κηα επηπιένλ πεξηνρή ηελ extra1 πνπ ζα είλαη ζην header ηεο ζειίδαο καο. <div class="art-box art-block"> <div class="art-box-body art-block-body"> <div class="art-bar art-blockheader"> </div> <div class="art-box art-blockcontent"> <div class="art-box-body art-blockcontent-body"> <div class="cleared"></div> </div> </div> <div class="cleared"></div> </div> </div> Σνλ παξαπάλσ θψδηθα ηνλ ρξεζηκνπνηνχκε γηα λα νξίζνπκε έλα block, δειαδή ηελ πεξηνρή πνπ ζέινπκε λα βξίζθεηε ην θχξην κελνχ κε ηηο θαηεγνξίεο ησλ βηβιίσλ. Σέινο ζα δείμνπκε ηνλ θψδηθα γηα ην footer ηεο ζειίδαο καο, πνπ είλαη θη απηφο κε ηελ ίδηα ινγηθή. <div class="art-footer"> <div class="art-footer-body"> <div class="art-footer-center"> <div class="art-footer-wrapper"> <div class="art-footer-text"> <div class="cleared"></div> </div> </div> </div> <div class="cleared"></div> </div> Σελίδα 50 από 91

51 7.3 Μεηαηξέπνληαο ηνλ θώδηθα καο ζε δπλακηθό Γηα λα κπνξέζνπκε λα εηζάγνπκε ην theme καο ζην Drupal ζα πξέπεη λα κεηαηξέςνπκε ηνλ HTML θψδηθα ζε δπλακηθφ. Απηφ θπζηθά γίλεηαη κε ηελ php. Ο παξαθάησ θψδηθαο δείρλεη ηελ κεηαηξνπή ηνπ HTML θψδηθα πνπ αληηζηνηρεί ζην header ζε δπλακηθφ. <div class="art-header"> <div class="art-header-position"> <div class="art-header-wrapper"> <div class="cleared reset-box"></div> <div class="art-header-inner"> <div class="art-headerobject"></div> <div class="art-logo"> <?php if (!empty($site_name)) { echo '<h1 class="art-logo-name"><a href="'.check_url($front_page).'" title = "'.$site_name.'">'.$site_name.'</a></h1>'; }?> <?php if (!empty($site_slogan)) { echo '<h2 class="art-logo-text">'.$site_slogan.'</h2>'; }?> </div> </div> </div> </div> Όπσο αλαθέξακε θαη πξηλ φηαλ δεκηνπξγνχκε ηνλ HTML θψδηθα δελ βάδνπκε θαη ην πεξηερφκελν πνπ ζέινπκε λα εκθαληζηεί, απηφ ζα γίλεη δπλακηθά κε ηελ βνήζεηα ηνπ Drupal. Με ηελ php νξίδνπκε ζε πνην ζεκείν ζα κπεη ην πεξηερφκελν πνπ ζέινπκε. Δδψ νξίδνπκε δπλακηθά ην φλνκα θαη ην slogan ηνπ θαηαζηήκαηνο καο. Οη κεηαβιεηέο πνπ ρξεζηκνπνηνχκε ζηελ php κέζα ζηηο ζπλζήθεο είλαη νη κεηαβιεηέο πνπ φηαλ ηηο δεη ην Drupal ζα θαηαιάβεη φηη αλαθεξφκαζηε ζην φλνκα θαη ζην slogan. Σελίδα 51 από 91

52 <?php if (!empty($navigation)!empty($extra1)!empty($extra2)):?> <div class="art-bar art-nav"> <div class="art-nav-outer"> <div class="art-nav-wrapper"> <div class="art-nav-inner"> <?php if (!empty($extra1)) :?> <div class="art-hmenu-extra1"><?php echo render($extra1);?></div> <?php endif;?> <?php if (!empty($navigation)) :?> <?php echo render($navigation);?> <?php endif;?> </div> </div> </div> </div> Παξαπάλσ βιέπνπκε ηνλ αληίζηνηρν θψδηθα ζε php γηα ην κελνχ πινήγεζεο. Αθνχ ινηπφλ κεηαηξέςνπκε ηνλ HTML θψδηθα ζε δπλακηθφ απηφ πνπ ζα πξέπεη λα θάλνπκε είλαη λα απνζεθεχζνπκε ην αξρείν καο κε ην φλνκα page.tpl.php. ηελ ζπλέρεηα ζα κνξθνπνηήζνπκε ηελ ζειίδα καο, κε ην CSS. 7.4 Μνξθνπνίεζε ηεο ζειίδαο καο Σν επφκελν ζηάδην είλαη ε κνξθνπνίεζε ηεο ζειίδαο καο. Όπσο θαη λα ζέινπκε λα εκθαλίδεηε ε ζειίδα καο ζην web ην CSS είλαη απηφ πνπ ζα καο βνεζήζεη λα ην πεηχρνπκε. Αο δνχκε ινηπφλ πσο κπνξνχκε λα κνξθνπνηήζνπκε ην header καο. Σελίδα 52 από 91

53 div.art-header { margin: 0 auto; position: relative; z-index: -5; width:100%; height: 330px; margin-top: 0; margin-bottom: 0; } Αο εμεγήζνπκε αξρηθά κεξηθέο ηδηφηεηεο πνπ ρξεζηκνπνηνχκε ζηνλ παξαπάλσ θψδηθα. margin : Δίλαη ην πεξηζψξην πνπ δίλνπκε ζην html ζηνηρείν καο απφ ηελ έμσ κεξηά. Μπνξνχκε λα νξίζνπκε λα έρεη πεξηζψξην απφ αξηζηεξά (margin-left), απφ δεμηά (margin-rght), απφ επάλσ (margin-top), θαη απφ θάησ (margin-bottom). position : Οξίδεη ην πψο ν θπιινκεηξεηήο ηνπνζεηεί ην ζηνηρείν κέζα ζηελ ζειίδαο καο. Μπνξεί λα ιάβεη ηηο αθφινπζεο ηηκέο : o relative : Σν ζηνηρείν είλαη ηνπνζεηεκέλν ζε ζρέζε κε ηελ θαλνληθή ηνπ ζέζε. o absolute : Σν ζηνηρείν είλαη ηνπνζεηεκέλν ζε ζρέζε κε ηελ πξψηε ζέζε ηνπ ζηνηρείνπ πξφγνλνο. z-index : Ζ z-index θαζνξίδεη ηε ηάμε ελφο ζηνηρείνπ. Έλα ζηνηρείν κε κεγαιχηεξε ηάμε είλαη πάληα κπξνζηά απφ έλα ζηνηρείν κε κία θαηψηεξε ζεηξά ηάμεο. Έηζη ινηπφλ κε ηνλ παξαπάλσ θψδηθα δίλνπκε ηα πεξηζψξηα πνπ ζέινπκε λα έρεη ην header καο, ην πιάηνο θαη ην χςνο, φπσο επίζεο θαη ηελ ζέζε ηνπ. Σελίδα 53 από 91

54 .art-header:after { position: absolute; z-index:-1; display:block; top: 0; width:100%; height: 330px; background-image: url('images/header.jpg'); background-repeat: no-repeat; background-position: center center; } Με ηνλ παξαπάλσ θψδηθα νξίδνπκε ηελ εηθφλα πνπ ζέινπκε λα εκθαλίδεηαη σο θφλην ζην header καο. Απηφ γίλεηε κε ηελ ηδηφηεηα background-image. Με ην background-repeat : no-repeat νξίδνπκε λα κελ επαλαιακβάλεηε ε εηθφλα, ελψ κε ην background-position νξίδνπκε ηελ ζέζε ηεο εηθφλαο ζην θέληξν..art-logo-name { display: block; text-align: left; font-family: "Kristen ITC",Arial, Helvetica, Sans-Serif; font-size: 42px; padding: 0; margin: 0; color: #EA0B3F!important; } Σελίδα 54 από 91

55 .art-logo-text { display: block; text-align: left; font-size: 24px; padding: 0; margin: 0; color: #39AC56!important; } Παξαπάλσ βιέπνπκε ηελ κνξθνπνίεζε ηνπ ηίηινπ θαη ηνπ slogan ηνπ θαηαζηήκαηνο καο. Αο εμεγήζνπκε νξηζκέλεο ηδηφηεηεο πνπ ρξεζηκνπνηνχκε: font-family : Ζ font-family ηδηφηεηα θαζνξίδεη ηε γξακκαηνζεηξά γηα έλα ζηνηρείν. font-size: Ζ font-size ηδηφηεηα θαζνξίδεη ην κέγεζνο ηεο γξακκαηνζεηξάο. display: Σν display θαζνξίδεη πψο έλα ζπγθεθξηκέλν ζηνηρείν HTML πξέπεη λα εκθαλίδεηαη. Κάπνηεο απφ ηηο ηηκέο πνπ κπνξεί λα πάξεη είλαη : o block : Σν ζηνηρείν εκθαλίδεηαη σο έλα ζηνηρείν επηπέδνπ κπινθ (φπσο νη παξάγξαθνη θαη νη ηίηινη) o inline : Απηή είλαη ε πξνεπηινγή. Σν ζηνηρείν εκθαλίδεηαη σο έλα ελζσκαησκέλν ζηνηρείν επηπέδνπ. o list-item : Σν ζηνηρείν εκθαλίδεηαη σο κηα ιίζηα, ην νπνίν ζεκαίλεη φηη έρεη κηα θνπθίδα κπξνζηά ηνπ. text-align : Ζ text-align ηδηφηεηα θαζνξίδεη ηελ νξηδφληηα ζηνίρηζε ηνπ θεηκέλνπ ζε έλα ζηνηρείν. Κάπνηεο απφ ηηο ηηκέο πνπ κπνξεί λα πάξεη είλαη: o left : ηνηρίδεη ην θείκελν πξνο ηα αξηζηεξά. o right : ηνηρίδεη ην θείκελν πξνο ηα δεμηά. o center : ηνηρίδεη ην θείκελν ζην θέληξν. Σελίδα 55 από 91

56 padding : Σν padding είλαη ην πεξηζψξην πνπ δίλνπκε απφ ηε κέζα κεξηά ηνπ ζηνηρείνπ καο. Όπσο ζην margin έηζη θη εδψ κπνξνχκε λα νξίζνπκε λα έρεη πεξηζψξην απφ αξηζηεξά (padding -left), απφ δεμηά (padding -rght), απφ επάλσ (padding -top), θαη απφ θάησ (padding -bottom). Αθνχ ινηπφλ θάλνπκε φιεο ηηο κνξθνπνηήζεηο καο ζπλερίδνπκε κε ην ζηήζηκν ηνπ server. 7.5 Δγθαηάζηαζε ηνπ Wamp Server θαη ηνπ Drupal Αξρηθά θαηεβάδνπκε ην Wamp Server απφ ηελ ζειίδα θάλνπκε δηπιφ θιηθ ζην αξρείν πνπ θαηεβάζακε θαη αθνινπζνχκε ηηο νδεγίεο. Σα πάληα είλαη απηφκαηα. Σν παθέην WampServer ζα εγθαηαζηαζεί κε ηηο ηειεπηαίεο εθδφζεηο ησλ Apache, MySQL θαη PHP. Σν αξρείν καο έρεη εγθαηαζηαζεί ζηνλ ηνπηθφ δίζθν (C:). Έπεηηα θαηεβάδνπκε ην Drupal απφ ηελ ζειίδα θαηεβάδνληαο ηελ ηειεπηαία έθδνζε πνπ ππάξρεη. Αθνχ θαηεβάζνπκε ην αξρείν, θαη έζησ φηη ην κεηνλνκάδνπκε ζε EshopBook ην ηνπνζεηνχκε ζην wamp θαη ζπγθεθξηκέλα κέζα ζηνλ θάθειν www (ε δηαδξνκή είλαη C:\wamp\www). Αλνίγνπκε έλαλ browser θαη πιεθηξνινγνχκε ζην url ην φπνπ ζα καο εκθαληζηεί ην παξαθάησ: Σελίδα 56 από 91

57 Εικόνα 3 : Wamp Server ηελ ζπλέρεηα ζα δεκηνπξγήζνπκε ηελ βάζε δεδνκέλσλ θάλνληαο θιηθ ζην phpmyadmin, φπνπ ζα εκθαληζηεί ην παξαθάησ παξάζπξν. Εικόνα 4: phpmyadmin Σελίδα 57 από 91

58 ηε δεκηνπξγία λέαο βάζεο πιεθηξνινγνχκε ην φλνκα ηεο βάζεο καο θαη ζηελ χλζεζε βάδνπκε ηελ επηινγή utf8-general-ci, έηζη ψζηε λα δέρεηαη θαη ειιεληθνχο ραξαθηήξεο, θαη παηάκε ην θνπκπί Γεκηνπξγία. Ζ βάζε καο δεκηνπξγήζεθε κε επηηπρία. Ξαλά επηζηξέθνπκε πίζσ ζην localhost φπνπ ζα μεθηλήζνπκε ηελ εγθαηάζηαζε ηνπ Drupal. Κάησ απφ ην Your Projects ζα δνχκε ην φλνκα ηνπ αξρείνπ ηνπ Drupal πνπ έρνπκε θαηεβάζεη θάλνληαο θιίθ επάλσ ηνπ ζα πξέπεη λα εκθαληζηεί ην παξαθάησ παξάζπξν : Εικόνα 5 : Επιλογό προφύλ ςτο Drupal Δδψ επηιέγνπκε ην πξνθίι ηεο ζειίδαο καο, θαη έρνπκε δχν επηινγέο ην Standard θαη ην Minimal. Ζ επηινγή "Standard" δελ είλαη ππνρξεσηηθή, αιιά πξνηείλεηαη ζπλήζσο γηαηί ε εγθαηάζηαζε ηνπ ινγηζκηθνχ είλαη πην νινθιεξσκέλε. Δκείο ζα επηιέμνπκε ηελ Minimal επηινγή. Σελίδα 58 από 91

59 Εικόνα 6 : Επιλογό γλώςςασ ςτο Drupal ην ζεκείν απηφ επηιέγνπκε ηελ γιψζζα πνπ πξνηηκάκε, έρνπκε ηελ δπλαηφηεηα λα επηιέμνπκε θαη ηελ ειιεληθή εθφζνλ εθηειέζνπκε θάπνηεο ελέξγεηεο, αιιά δελ ζπληζηάηε δηφηη ε κεηάθξαζε δελ είλαη θαη ηφζν θαιή, θαη έρεη σο απνηέιεζκα λα καο κπεξδέςεη παξά λα καο βνεζήζεη. Σελίδα 59 από 91

60 Εικόνα 7: Σύνδεςη με την βϊςη δεδομϋνων Δδψ γίλεηε ε ζχλδεζε κε ηελ βάζε δεδνκέλσλ. Δπηιέγνπκε ην MySQL, MariaDB, or equivalent θαη ζην Database name βάδνπκε ην φλνκα ηεο βάζεο πνπ δεκηνπξγήζακε πην πξηλ. ην Database username βάδνπκε root θαη ζην Database password δελ βάδνπκε ηίπνηα, ην αθήλνπκε θελφ, ν ιφγνο πνπ ην θάλνπκε απηφ είλαη επεηδή δνπιεχνπκε ηνπηθά. Αλ αλεβάδακε ηελ ζειίδα καο εμ αξρήο ζε έλαλ Server (φρη ζε ηνπηθφ) ζηα πεδία Database username θαη Database password ζα πιεθηξνινγνχζακε ην username θαη ηνλ θσδηθφ πνπ ζα είρακε γηα ηε βάζε καο. Σελίδα 60 από 91

61 Εικόνα 8: Εγκατϊςταςη Drupal Δδψ είκαζηε ζην ζηάδην φπνπ γίλεηε ε εγθαηάζηαζε ηνπ Drupal. Έλα κφιηο βήκα πξηλ ηελ νινθιήξσζε ηεο εγθαηάζηαζεο. ην επφκελν βήκα ζα νξίζνπκε ηνπο θσδηθνχο πξφζβαζεο θαη νξηζκέλεο άιιεο ιεπηνκέξεηεο. Σελίδα 61 από 91

62 Εικόνα 9: Τελευταύεσ ρυθμύςεισ για το Drupal Δίκαζηε ζην ζηάδην Configure Site. ην site name βάδνπκε ηελ νλνκαζία πνπ ζα έρεη ε ζειίδα καο, αιιά είλαη θάηη πνπ κπνξνχκε λα αιιάμνπκε θαη κεηά. πκπιεξψλνπκε ην , ην νπνίν ζα έρεη άκεζε ζρέζε κε ηε ζειίδα καο, θαζψο username θαη password. ηα Server Settings επηιέγνπκε Greece θαη ηελ ειιεληθή δψλε ψξαο. Οη εηδνπνηήζεηο είλαη πξναηξεηηθέο. Save and continue... Σελίδα 62 από 91

63 Εικόνα 10: Τϋλοσ εγκατϊςταςησ Ζ εγθαηάζηαζε έρεη νινθιεξσζεί κε επηηπρία θαη είκαζηε έηνηκνη λα δηαρεηξηζηνχκε ηελ ζειίδαο καο ζαλ admin θάλνληαο θιηθ ζην Visit your new site. Ζ ζειίδα καο ζα κνηάδεη θάπσο έηζη: Σελίδα 63 από 91

64 Εικόνα 11 : Εμφϊνιςη τησ ςελύδασ μασ 7.6 Δγθαηάζηαζε βαζηθώλ Modules Σα modules είλαη ζαλ plugins γηα ην site καο. Οη ελφηεηεο πνπ καο επηηξέπνπλ λα πξνζζέζνπκε δηαθνξεηηθέο ιεηηνπξγίεο ζηελ ηζηνζειίδα καο, φπσο δεκνζθνπήζεηο, πεδία αλαδήηεζεο, δηάθνξεο κνξθέο επηθνηλσλίαο θαη πνιιά άιια. Σν πξψην πξάγκα πνπ ζα πξέπεη λα θάλνπκε είλαη λα ελεξγνπνηήζνπκε ηα βαζηθά modules πνπ ζα καο δηεπθνιχλνπλ ζηελ δεκηνπξγία ηεο ζειίδαο καο. Γηα λα ελεξγνπνηήζνπκε θάπνηα modules αθνινπζνχκε ηα εμήο βήκαηα. Κάλνπκε θιηθ ζην «Administration» πνπ βξίζθεηε αξηζηεξά ζηελ ζειίδα θαη ακέζσο κεηά θάλνπκε θιηθ ζην «Modules». Απφ ην παξάζπξν πνπ καο εκθαλίζηεθε ελεξγνπνηνχκε ηα παξαθάησ modules. Block : Διέγρεη ηα νπηηθά δνκηθά ζηνηρεία κηαο ζειίδαο. Σα Block είλαη θνπηηά ηνπ πεξηερνκέλνπ πνπ παξέρνληαη ζε κηα πεξηνρή ή πεξηθέξεηα, κηαο ηζηνζειίδαο. Field UI : Γηεπαθή ρξήζηε γηα ην API Field File : Οξίδεη έλα ηχπν πεδίνπ αξρείνπ. Image : Παξέρεη εξγαιεία επεμεξγαζίαο εηθφλαο. Σελίδα 64 από 91

65 Menu : Δπηηξέπεη ζηνπο δηαρεηξηζηέο λα πξνζαξκφζνπλ ην κελνχ πινήγεζεο ζηελ ζειίδα. Path : Δπηηξέπεη ζηνπο ρξήζηεο λα κεηνλνκάδνπλ URLs. Shortcut : Δπηηξέπεη ζηνπο ρξήζηεο λα δηαρεηξίδνληαη ζπληφκεπζεο θαηαιφγσλ. Taxonomy : Δπηηξέπεη ηελ θαηεγνξηνπνίεζε ηνπ πεξηερνκέλνπ. Toolbar : Παξέρεη κηα γξακκή εξγαιείσλ πνπ δείρλεη ηα ζηνηρεία ηνπ κελνχ δηαρείξηζεο θαη ηηο ζπλδέζεηο απφ άιιεο ελφηεηεο. Options : Οξίδεη ηελ επηινγή, checkbox θαη radio button γηα ην θείκελν θαη αξηζκεηηθά πεδία. Αθνχ ελεξγνπνηήζακε ηα βαζηθά Modules ε ζειίδα καο ζα θαίλεηε θάπσο έηζη : Εικόνα 12: Η ςελύδα μασ μετϊ την ενεργοπούηςη των modules 7.7 Δλεξγνπνίεζε Theme Γηα λα ελεξγνπνηήζνπκε ην theme πνπ είρακε θάλεη πην πξηλ ζα πξέπεη λα κεηαθέξνπκε ηνλ θάθειν καο κέζα ζηνλ θάθειν ηνπ Drupal, πην ζπγθεθξηκέλα ζα πξέπεη λα αθνινπζήζνπκε ηελ εμήο δηαδξνκή : C:\wamp\www\EshopBook\sites\all\themes. Έπεηηα αλ θάλνπκε θιηθ ζην «Appearance» ζα δνχκε φηη ππάξρεη ην theme καο θαη θάλνληαο «Enable Σελίδα 65 από 91

66 and set default» ε ζειίδαο καο πιένλ ζα έρεη ηελ εκθάληζε πνπ ζέινπκε. Πξηλ παηήζνπκε φκσο απνζήθεπζε ζηα settings πνπ ππάξρνπλ θάησ επηιέγνπκε έλα ζέκα γηα ην πψο ζα εκθαλίδνληαη νη ζειίδεο δηαρείξηζεο ηνπ Drupal, φπσο επίζεο επηιέγνπκε θαη ην «Use the administration theme when editing or creating content» πνπ καο επηηξέπεη λα ρξεζηκνπνηήζνπκε ην ζέκα δηαρείξηζεο θαηά ηελ επεμεξγαζία ή ηε δεκηνπξγία πεξηερνκέλνπ. Ζ ζειίδα καο ζα κνηάδεη θάπσο έηζη : Εικόνα 13: Η ςελύδασ μασ μετϊ την ενεργοπούηςη του theme Γηα λα βάινπκε slogan ζηελ ζειίδα καο πεγαίλνπκε ζην «Configuration > Site information» θαη ζην slogan βάδνπκε απηφ πνπ ζέινπκε. 7.8 Δγθαηάζηαζε ηεο Ubercart Ζ Ubercart είλαη ε πην δεκνθηιήο πιαηθφξκα πψιεζεο πξντφλησλ γηα ηζηνζειίδεο. Τινπνηεί φια φζα ρξεηάδεζηε γηα ηελ πψιεζε πξντφλησλ ζε απεπζείαο ζχλδεζε. Γηα ηελ εγθαηάζηαζε ηεο Ubercart ζα ρξεηαζηνχκε λα ηελ θαηεβάζνπκε απφ ηελ δηεχζπλζε εθηφο φκσο απφ ηελ Ubercart ζα πξέπεη λα θαηεβάζνπκε ηα modules, Rules, Ctools, Entity API θαη Entity tokens, απφ ηελ ζειίδα ηνπ Drupal. Σα Σελίδα 66 από 91

67 modules απηά φπσο θαη ηελ Ubercart ζα πξέπεη λα ηα βάινπκε κέζα ζηνλ θάθειν modules ηνπ Drupal, ε δηαδξνκή είλαη ε αθφινπζε : C:\wamp\www\EshopBook\sites\all\modules. Ζ δηαδηθαζία πνπ ζα αθνινπζήζνπκε γηα ηελ ελεξγνπνίεζε ηνπο είλαη ε ίδηα κε ησλ πξνεγνχκελσλ modules πνπ αλαθέξακε θαη πην πξηλ. Έλα επηπιένλ module πνπ ζα πξέπεη λα ελεξγνπνηήζνπκε είλαη ην catalog φπνπ καο επηηξέπεη λα εκθαλίδνπκε ηηο θαηεγνξίεο ησλ πξντφλησλ καο, θαη κέζσ απφ ην Structure > Blocks κπνξνχκε λα νξίζνπκε ζε πην ζεκείν ζα ζέιακε λα εκθαληζηνχλ νη θαηεγνξίεο ησλ πξντφλησλ καο. ηελ ζπλέρεηα κε ηελ βνήζεηα ηνπ Taxonomy κπνξνχκε λα δεκηνπξγήζνπκε δηάθνξεο θαηεγνξίεο αλάινγα κε ην ηη ζέινπκε λα θάλνπκε, εκείο ζα θάλνπκε κηα θαηεγνξία «Βηβιία», απφ ην Structure > Taxonomy > Add vocabulary. Αθνχ δεκηνπξγήζνπκε ηελ θαηεγνξία ζα πξνζζέζνπκε ζε απηή ηηο ππνθαηεγνξίεο ησλ βηβιίσλ καο (φπσο ινγνηερληθά βηβιία, νηθνλνκηθά, παηδηθά, εθπαηδεπηηθά θ.α.) θάλνληαο θιηθ ζην add terms, δίλνπκε έλα φλνκα ζηελ θαηεγνξία θαη έπεηηα παηάκε απνζήθεπζε. 7.9 Δηζαγωγή πξνϊόληωλ Γηα λα εηζάγνπκε πξντφληα ζα πξέπεη απφ ην add content λα θάλνπκε θιηθ ζην Product. Απφ ην παξάζπξν πνπ έρεη εκθαληζηεί κπνξνχκε λα εηζάγνπκε ην φλνκα ηνπ πξντφληνο καο, ζηελ πξνθεηκέλε πεξίπησζε ηνλ ηίηιν ηνπ βηβιίνπ, επίζεο κπνξνχκε λα πξνζζέζνπκε κηα εηθφλα, κηα πεξηγξαθή ηνπ πεξηερνκέλνπ ηνπ βηβιίνπ, απφ ην catalog κπνξνχκε λα επηιέμνπκε ζε πνηα θαηεγνξία ζα αλήθεη ην βηβιίν, φπσο επίζεο κπνξνχκε λα εηζάγνπκε ζην SKU ησλ θσδηθφ ηνπ βηβιίνπ (πνπ είλαη κνλαδηθφο), ηελ ηηκή ηνπ, θαη θάπνηα πξφζζεηα ραξαθηεξηζηηθά φπσο είλαη ην βάξνο, ην κήθνο ην πιάηνο θ.α. Σελίδα 67 από 91

68 7.10 Γεκηνπξγία ζπιινγήο θωηνγξαθηώλ Γηα λα δεκηνπξγήζνπκε κηα ζπιινγή θσηνγξαθηψλ φπσο θαίλεηε θαη ζηελ παξαθάησ εηθφλα ζα πξέπεη λα αθνινπζήζνπκε θάπνηα ζπγθεθξηκέλα βήκαηα. Εικόνα 14: Συλλογό φωτογραφιών Αξρηθά ζα πξέπεη λα δεκηνπξγήζνπκε έλα θαηλνχξγην content type, απφ ην Structure > Content types > Add content type, δίλνπκε έλα φλνκα φπσο γηα παξάδεηγκα photos θαη έπεηηα παηάκε «save and add fields». Εικόνα 15 : Επιλογό πεδύων ηελ ζπλέρεηα ζα καο εκθαληζηεί ην παξαπάλσ παξάζπξν φπνπ κπνξνχκε λα νξίζνπκε πνία πεδία ζέινπκε λα έρεη ην Content type. Δδψ ζα επηιέμνπκε λα έρεη θσηνγξαθίεο, ζην «Add new field» ζα βάινπκε έλα Σελίδα 68 από 91

69 φλνκα γηα ην πεδίν καο φπσο image θαη ζην «Type of data to store.» επηιέγνπκε ηνλ ηχπν ηνπ πεδίνπ καο, δειαδή «Image» θαη παηάκε save. Έπεηηα ζα εηζάγνπκε ηηο θσηνγξαθίεο πνπ ζέινπκε λα εκθαλίζνπκε, απφ ην Add Content > image. Απφ ην Structure > Views > Add new view ζα δεκηνπξγήζνπκε έλα θαηλνχξγην View δίλνληαο ηνπ έλα φλνκα, φπσο Photo Gallery. Εικόνα 16: Δημιουργύα View ην Show επηιέγνπκε ην Content θαη ζην of type ην φλνκα ηνπ Content type πνπ είρακε δεκηνπξγήζεη, δειαδή ην photos. Λίγν πην θάησ επηιέγνπκε ζην Display format ην Grid of fields, κε απηή ηελ επηινγή νξίδνπκε νη θσηνγξαθίεο καο λα είλαη ζε πιέγκα. Εικόνα 17 : Δημιουργύα View Σελίδα 69 από 91

70 Δπίζεο ζην «items display» κπνξνχκε λα νξίζνπκε πφζεο θσηνγξαθίεο ζα ζέιακε λα εκθαλίδνληαη ζηελ νζφλε καο. Παηάκε «Continue & edit». Εικόνα 18: Λεπτομϋρειεσ εικόνασ Απφ ην Fields > add επηιέγνπκε ην «content type : photos» θαη έπεηηα απνζεθεχνπκε. Αλ νη ελέξγεηεο πνπ πεξηγξάςακε νινθιεξσζνχλ κε επηηπρία ζα έρνπκε κηα ζπιινγή θσηνγξαθείσλ γηα ηελ ζειίδα καο Αλαδήηεζε Σν Drupal καο πξνζθέξεη κηα κεγάιε πνηθηιία απφ modules. Έλα απφ απηά είλαη θαη ε «Αλαδήηεζε». Με ηελ αλαδήηεζε βνεζάκε ην ρξήζηε λα ςάμεη απηφ πνπ ζέιεη ρσξίο λα ρξεηάδεηαη λα ζπαηαιήζεη ρξφλν αλαδεηψληαο ην ζε φιε ηελ ηζηνζειίδα. Γηα λα πξνζζέζνπκε κηα θφξκα αλαδήηεζεο ζηελ ζειίδα καο ζα πξέπεη απιά λα ελεξγνπνηήζνπκε απφ ηα Modules ην Search, θαη έπεηηα απφ ην Structure>Blocks λα επηιέμνπκε ζε πνηα πεξηνρή ηεο ζειίδαο καο ζα ζέιακε λα εκθαλίδεηε ε αλαδήηεζε. Σν παξάζπξν Blocks ζα κνηάδεη θάπσο έηζη: Σελίδα 70 από 91

71 Εικόνα 19: Block περιοχϋσ ηελ αξρή βιέπνπκε φιεο ηηο δπλαηέο πεξηνρέο ηεο ζειίδαο καο, θαη ζην ηέινο φια ηα modules πνπ είλαη αθφκε απελεξγνπνηεκέλα. Εικόνα 20 : Απενεργοποιημϋνα Blocks Δκείο ινηπφλ επηιέγνπκε ε αλαδήηεζε λα εκθαλίδεηαη ζηελ πεξηνρή «extra1», κηα πεξηνρή πνπ δεκηνπξγήζακε ζε πξνεγνχκελε ελφηεηα. Σελίδα 71 από 91

72 Αθνχ ινηπφλ επηιέμνπκε ηελ πεξηνρή «extra1» θαη παηήζνπκε απνζήθεπζε, ε ζειίδα καο ζα κνηάδεη θάπσο έηζη: Εικόνα 21 : Φόρμα αναζότηςησ Βέβαηα γηα λα έρεη απηή ηελ κνξθή ε αλαδήηεζε ζα πξέπεη λα ηελ κνξθνπνηήζνπκε κε ηελ βνήζεηα ηνπ CSS. Ο θψδηθαο πνπ ζα γξάςνπκε ζα κπεη ζην αξρείν CSS πνπ είρακε θηηάμεη ζηελ αξρή γηα ηελ κνξθνπνίεζε ηεο ζειίδα. Δλδεηθηηθά έλα θνκκάηη θψδηθα πνπ ρξεηάζηεθε γηα απηή ηελ κνξθνπνίεζε αθνινπζεί παξαθάησ. art-button { display: inline-block; height: 41px; margin: 10px 5px 0 0; max-width: 1728px; padding: 0; position: relative; vertical-align: middle; width: auto;} Σελίδα 72 από 91

73 7.12 Γεκηνπξγία Log in θόξκαο Γηα λα εηζάγνπκε κηα log in θφξκα ζα πξέπεη λα αθνινπζήζνπκε αθξηβψο ηελ ίδηα δηαδηθαζία πνπ θάλακε γηα λα εηζάγνπκε θαη ηελ θφξκα αλαδήηεζεο. Δκείο φκσο επηιέμακε λα βάινπκε ηελ log in θφξκα λα εκθαλίδεηαη ζε κηα θαηλνχξγηα ζειίδα, φπνπ θάλνληαο θιηθ ζε έλα link ζα καο νδεγεί ζε απηή. Αξρηθά ινηπφλ ζα θηηάμνπκε έλα link κε φλνκα «Δίζνδνο/Δγγξαθή» φπνπ ζα εκθαλίδεηε ζε φιεο ηηο ζειίδεο ηνπ site καο κέρξηο φηνπ ν ρξήζηεο λα ζπλδεζεί. Απφ ην Structure>Blocks>Add block δεκηνπξγνχκε έλα θαηλνχξγην block. Εικόνα 22 : Δημιουργύα Block ην Block title βάδνπκε ηνλ ηίηιν πνπ ζέινπκε λα εκθαλίδεηαη πάλσ απφ ηελ θφξκα καο, ζε πεξίπησζε πνπ δελ ζέινπκε λα εκθαλίδεηε θάηη βάδνπκε <none>. ην Block description πεξηγξάθνπκε κε ιίγεο ιέμεηο γηα πνην ιφγν δεκηνπξγνχκε απηφ ην Block, ελψ ζην Block body γξάθνπκε ην φλνκα πνπ ζέινπκε λα έρεη ην link (Δίζνδνο/Δγγξαθή). Έπεηηα ην επηιέγνπκε καξθάξνληάο ην, θαη παηάκε ην θνπκπί «χλδεζκνο» πνπ είλαη αθξηβψο επάλσ. Με απηφ ηνλ ηξφπν θάλνπκε έλα απιφ θείκελν, ζχλδεζκν. Σελίδα 73 από 91

74 Εικόνα 23 : Δημιουργύα ςυνδϋςμου Γηαιέγνπκε ζηνλ Τύπος Σσνδέζμοσ «URL», Πρφηόκολλο « θαη ζην URL βάδνπκε ηελ δηεχζπλζε πνπ ζα νδεγεί ζηελ log in θφξκα. Παηάκε «ΟΚ». ηελ ζπλέρεηα ζα κνξθνπνηήζνπκε ην link, ζέηνληαο ηνπ θάπνηα ραξαθηεξηζηηθά, φπσο γξακκαηνζεηξά, κέγεζνο, ρξψκα, θαη θάπνηα πεξηζψξηα πνπ ζα ζέιακε λα έρεη. Παηψληαο ζην θνπκπί «HTML θψδηθαο» γξάθνπκε ηνλ θψδηθα κε ηνλ νπνίν ζα κνξθνπνηήζνπκε ην link, θπζηθά απηφ ζα γίλεη κε CSS. Παξαθάησ αθνινπζεί ν θψδηθαο πνπ ρξεζηκνπνηήζακε. <p style="font-size:22px; font-family:monotype Corsiva,Halvetica,Sans-Serif; margin-left:-180px; margin-top:-43px;"> <a href=" style="color:#ffffff; text-decoration:none;">δίζνδνο/δγγξαθή</a></p> Σελίδα 74 από 91

75 Σέινο πξηλ παηήζνπκε «Save» ζην «Region Settings» ζα επηιέμνπκε ηελ πεξηνρή πνπ ζέινπκε λα εκθαληζηεί ην link, Δκείο επηιέμακε ηελ «extra1», έηζη ην link ζα ηνπνζεηεζεί αθξηβψο δίπια απφ ηελ θφξκα αλαδήηεζεο Καιάζη αγνξώλ Σν θαιάζη αγνξψλ είλαη έλα παθέην ινγηζκηθνχ πνπ επηηξέπεη ζε έλα ειεθηξνληθφ θαηάζηεκα λα πνπιά πξντφληα ζε απεπζείαο ζχλδεζε. Γίλεη ηε δπλαηφηεηα ζηνπο ρξήζηεο ηνπ δηαδηθηχνπ λα βιέπνπλ ηα πξντφληα πνπ δηαηίζεληαη πξνο πψιεζε, λα ηα αλαδεηνχλ, λα ηα επηιέγνπλ θαη, ηέινο, λα ηα αγνξάδνπλ θάλνληαο online πιεξσκή κέζσ πηζησηηθήο θάξηαο ή ηξαπεδηθνχ ινγαξηαζκνχ. Όιε ε παξαπάλσ δηαδηθαζία είλαη αζθαιείο θαη ζπλήζσο ηα ζηνηρεία ηεο πηζησηηθήο θάξηαο δελ απνζεθεχνληαη απφ ηελ εθαξκνγή θαιάζη αγνξψλ. Έλα θαιάζη αγνξψλ είλαη κηα δπλακηθή εθαξκνγή web, πνπ δηαβάδεη ηα πξντφληα πνπ είλαη απνζεθεπκέλα ζηε βάζε δεδνκέλσλ θαη ηα εκθαλίδεη ζηελ ηζηνζειίδα. Γηα λα βάινπκε έλα θαιάζη αγνξψλ ζηελ ηζηνζειίδα ζα πξέπεη απφ ην «Structure>Blocks» λα νξίζνπκε ηελ πεξηνρή πνπ ζέινπκε λα εκθαλίδεηαη ηo θαιάζη καο «Shopping cart». Έπεηηα απφ ην «configure» επηιέγνπκε ην «All pages except those listed», γξάθνληαο ζην textarea πνπ ππάξρεη αθξηβψο απφ θάησ ζε πνηεο ζειίδεο δελ ζέινπκε λα εκθαλίδεηε ην θαιάζη αγνξψλ καο. Σελίδα 75 από 91

76 Εικόνα 24 : Απόκρυψη τησ Shopping cart από ςυγκεκριμϋνεσ ςελύδεσ 7.14 Γηαθνξεηηθνί ηύπνη ρξεζηώλ Σν Drupal έρεη έλα ηζρπξφ ζχζηεκα δηαρείξηζεο ρξεζηψλ πνπ καο επηηξέπεη λα δεκηνπξγήζνπκε πνιινχο δηαθνξεηηθνχο ηχπνπο ρξεζηψλ γηα δηάθνξνπο ζθνπνχο. Ζ δηαρείξηζε ρξεζηψλ πξαγκαηνπνηείηαη ζηελ θαξηέια «People» πνπ βξίζθεηαη ζηε γξακκή εξγαιείσλ δηαρεηξηζηή, φπνπ θάλνληαο θιηθ πάλσ ηνπ ζα εκθαληζηεί ην παξαθάησ παξάζπξν. Εικόνα 25 : Τύποι χρηςτών Έρνπκε ηελ δπλαηφηεηα λα θηιηξάξνπκε ηνπο ρξήζηεο αλάινγα κε ζπγθεθξηκέλα δηθαηψκαηα ξφινπο, ή αλάινγα κε ηελ θαηάζηαζε ηνπο Σελίδα 76 από 91

77 (ελεξγνί ή αλελεξγνί). Δπηπιένλ κπνξνχκε λα πξνζζέζνπκε ρξήζηεο θαη λα δψζνπκε θάπνηα δηθαηψκαηα ζε απηνχο. Ζ ιίζηα ρξεζηψλ πνπ βξίζθεηαη αθξηβψο απφ θάησ εκθαλίδεη θάπνηεο ρξήζηκεο πιεξνθνξίεο θαη επηινγέο. Μπνξνχκε λα δνχκε ην φλνκα ελφο ρξήζηε, ηελ θαηάζηαζε (αλ είλαη ελεξγφο ή αλελεξγφο), πφζν θαηξφ είλαη κέινο ζην site, ηελ ηειεπηαία θνξά πνπ επηζθέθηεθε ηελ ηζηνζειίδα, αιιά θαη ηελ δπλαηφηεηα λα επεμεξγαζηνχκε ηνλ ρξήζηε. Πξηλ πνχκε πψο κπνξνχκε λα πξνζζέζνπκε ρξήζηεο, είλαη θαιχηεξν πξψηα λα θαηαλνήζνπκε ηνπο ξφινπο θαη ηα δηθαηψκαηα. Roles (Ρόινη) θεθηείηε ηνπο ξφινπο σο «δηθαηψκαηα νκάδσλ". Απφ πξνεπηινγή, ην Drupal έρεη ηξεηο ξφινπο: Anonymous User (Αλψλπκνο Υξήζηεο) - Έλαο ρξήζηεο ρσξίο ινγαξηαζκφ. Authenticated User (Πηζηνπνηεκέλνη ρξήζηεο) - Έλαο ρξήζηεο πνπ έρεη έλα ινγαξηαζκφ. Administrator (Γηαρεηξηζηήο) - Ο δηαρεηξηζηήο ηνπ site. Κάζε ξφινο κπνξεί λα έρεη κνλαδηθά δηθαηψκαηα πνπ έρνπλ νξηζηεί γηα φινπο ηνπο ρξήζηεο ζε απηφλ ηνλ ξφιν. Απηφ είλαη πνιχ ρξήζηκν ζηελ πεξίπησζε πνπ ζέινπκε νη αλψλπκνη ρξήζηεο γηα παξάδεηγκα λα κελ έρνπλ πξφζβαζε ζε ζπγθεθξηκέλεο ζειίδεο. Πξνζζήθε ξόιωλ Μπνξνχκε λα πξνζζέζνπκε θαη άιινπο ξφινπο ζην Drupal, εθηφο απφ απηνχο πνπ ήδε ππάξρνπλ εάλ ην ζέινπκε. Γηα λα πξνζζέζνπκε έλα ξφιν, πξέπεη απφ ην κελνχ «People», λα θάλνπκε θιηθ ζηελ θαξηέια «Permissions», θαη ζηε ζπλέρεηα λα θάλνπκε θιηθ ζην θνπκπί «Roles». Σελίδα 77 από 91

78 Εικόνα 26 : Προςθόκη ρόλων Πιεθηξνινγνχκε έλα φλνκα γηα ην ξφιν καο, γηα παξάδεηγκα "user", θαη ζηελ ζπλέρεηα παηάκε «Add role». Μφιηο δεκηνπξγήζνπκε ηνλ λέν ξφιν, κπνξνχκε λα νξίζνπκε ζπγθεθξηκέλα δηθαηψκαηα γηα ην ζπγθεθξηκέλν ηχπν ρξήζηε. Γηθαηώκαηα (Permissions) Με ηα δηθαηψκαηα νξίδνπκε ηα δηάθνξα θαζήθνληα πνπ κπνξεί λα έρεη θάπνηνο ξφινο. Γηα λα κεηαβνχκε ζην παξάζπξν κε ηα δηθαηψκαηα, θάλνπκε θιηθ ζηελ θαξηέια «Permissions». Βιέπνπκε, φηη ππάξρεη κηα ζηήιε κε φια ηα δηθαηψκαηα, ζπκπεξηιακβαλνκέλνπ έλαλ ηίηιν, κηα πεξηγξαθή, θαη έλα πιαίζην ειέγρνπ γηα θάζε ξφιν. Γίπια ππάξρεη κηα άιιε ζηήιε ζηελ νπνία εκθαλίδνληαη φινη νη ξφινη πνπ ππάξρνπλ ζηελ ζειίδα καο. Εικόνα 27 : Permissions Σελίδα 78 από 91

79 Πξνζζήθε ρξεζηώλ ηε πεξίπησζε πνπ ζέινπκε λα πξνζζέζνπκε έλαλ λέν ρξήζηε, ζα πξέπεη, απφ ηελ ελφηεηα «People», λα θάλνπκε θιηθ ζηνλ ζχλδεζκν «+Add user». Απφ ην παξάζπξν πνπ εκθαλίδεηαη κπνξνχκε λα νξίζνπκε θάπνηεο πιεξνθνξίεο ζρεηηθά κε απηφλ ηνλ ρξήζηε. Μπνξνχκε λα νξίζνπκε έλα φλνκα, έλα , θαη κηα θαηάζηαζε «Blocked» ή «Active». Μπνξνχκε επίζεο λα νξίζνπκε ηη ξφιν (νπο) ζα έρεη απηφο ν ρξήζηεο. Εικόνα 28 : Προςθόκη νϋου χρόςτη 7.15 Πινήγεζε ζηελ εθαξκνγή Ζ πξψηε ζειίδα πνπ ζα αληηθξίζεη ν ρξήζηεο ηελ πξψηε θνξά πνπ ζα επηζθεθηεί ην site θαίλεηαη ζηελ παξαθάησ εηθφλα. Σελίδα 79 από 91

80 Εικόνα 29 : Αρχικό ςελύδα τησ εφαρμογόσ Βιέπνπκε ινηπφλ ζην header λα ππάξρεη κηα θφξκα αλαδήηεζεο, έλα θαιάζη αγνξψλ, θαη έλα link γηα είζνδν θαη εγγξαθή. Τπάξρεη ην βαζηθφ κελνχ, θαη θάπνηα πξνηεηλφκελα βηβιία γηα κηθξνχο θαη κεγάινπο. Σελίδα 80 από 91

81 Παηψληαο ην κελνχ «Βηβιία», ν ρξήζηεο έρεη ηελ δπλαηφηεηα λα δεη φια ηα βηβιία πνπ ππάξρνπλ ζην θαηάζηεκα ρσξηζκέλα ζε νκάδεο. Εικόνα 30 : Βιβλύα Αξηζηεξά βιέπνπκε ηνλ «Καηάινγν βηβιίσλ» φπνπ ηα βηβιία είλαη ρσξηζκέλα ζε θαηεγνξίεο, φπσο θαη θάζε εηθφλα απνηειεί κηα θαηεγνξία βηβιίνπ απφ κφλε ηεο. Αθξηβψο απφ θάησ ππάξρεη ην θαιάζη αγνξψλ, φπνπ εκθαλίδνληαη ηα βηβιία πνπ έρεη επηιέμεη ν ρξήζηεο θαη δεμηά ππάξρνπλ «Σα 10 πην δεκνθηιή βηβιία». Αλ ινηπφλ ν ρξήζηεο Σελίδα 81 από 91

82 ελδηαθέξεηαη λα αγνξάζεη ινγνηερληθά βηβιία, επηιέγεη ηελ θαηεγνξία «Λνγνηερλία» είηε απφ ηνλ «Καηάινγν βηβιίσλ» είηε απφ ηελ εηθφλα πνπ αληηζηνηρεί ζηελ θαηεγνξία απηή, θαη ηνπ εκθαλίδεηαη ε ζειίδα κε φια ηα ινγνηερληθά βηβιία πνπ ππάξρνπλ ζην θαηάζηεκα. Εικόνα 31 : Εμφϊνιςη βιβλύων Σα βηβιία εκθαλίδνληαη ζε κηα ιίζηα φπνπ γηα θάζε βηβιίν ππάξρεη κηα εηθφλα, έλαο θσδηθφο, έλαο ηίηινο θαη κηα ηηκή. Παηψληαο πάλσ ζηνλ ηίηιν ελφο βηβιίνπ ν ρξήζηεο βιέπεη θάπνηεο επηπιένλ πιεξνθνξίεο, φπσο ηνλ ζπγγξαθέα ηνπ βηβιίνπ, ηνλ εθδνηηθφ νίθν, ηηο ζειίδεο, ην έηνο έθδνζεο, θαη κηα κηθξή πεξηγξαθή γηα ην ηη πεξηέρεη. Ο ρξήζηεο κπνξεί λα πξνζζέζεη ην βηβιίν ζην θαιάζη αγνξψλ παηψληαο ην θνπκπί «Πξνζζήθε ζην θαιάζη». Σελίδα 82 από 91

83 Εικόνα 32 : Καλϊθι αγορών Έρεη ηελ δπλαηφηεηα λα αθαηξέζεη ην βηβιίν απφ ην θαιάζη ή λα απμήζεη ηελ πνζφηεηα ηνπ ή λα ζπλερίζεη ζηελ νινθιήξσζε ηεο αγνξάο. Πξηλ γίλεη απηφ βέβαηα ν ρξήζηεο ζα πξέπεη λα ζπλδεζεί. Αθνχ ινηπφλ ζπλδεζεί θαη παηήζεη ην θνπκπί «Οινθιήξσζε αγνξάο» ζα εκθαληζηεί ην παξάζπξν παξαγγειίαο. Δθεί ν ρξήζηεο βιέπεη πνία βηβιία έρεη επηιέμεη, ηελ πνζφηεηα θαη ηελ ζπλνιηθή ηηκή. Έπεηηα πιεθηξνινγεί ηα ζηνηρεία παξάδνζεο, θαη ρξέσζεο, θαη ζηελ ζπλέρεηα επηιέγεη έλαλ ηξφπν πιεξσκήο είηε κε αληηθαηαβνιή είηε κε ηαρπδξνκηθή επηηαγή. Μπνξεί επίζεο λα εηζάγεη θάπνηα ζρφιηα ζηελ παξαγγειία ηνπ, θαη λα ζπλερίζεη παηψληαο ην θνπκπί «Παξαγγειία». Σελίδα 83 από 91

84 Εικόνα 33 : Παραγγελύα Σελίδα 84 από 91

85 ην επφκελν ζηάδην ν ρξήζηεο ζα πξέπεη λα ειέγμεη ηα ζηνηρεία πνπ έδσζε, αλ είλαη φια ζσζηά ζπλερίδεη κε ηελ ππνβνιή ηεο παξαγγειίαο, αιιηψο επηζηξέθεη πίζσ γηα λα δηνξζψζεη ηα ιάζε. Εικόνα 34 : Έλεγχοσ παραγγελύασ Αλ φια πήγαλ θαιά ε παξαγγειία καο ζα έρεη νινθιεξσζεί κε επηηπρία. Έρνπκε ηελ δπλαηφηεηα λα δνχκε ηελ ηξέρνπζα θαηάζηαζε ηεο παξαγγειίαο καο φπσο επίζεο λα αλνίμνπκε έλα παξάζπξν κε ην απνδεηθηηθφ ηεο αγνξάο καο. Δπίινγνο Δίδακε ινηπφλ ζην ηειεπηαίν θεθάιαην απηήο ηεο πηπρηαθήο πψο κπνξνχκε λα θηηάμνπκε κηα ηζηνζειίδα απφ ην κεδέλ, κε ηελ βνήζεηα ηνπ Drupal. Γεκηνπξγνχκε αξρηθά ην HTML αξρείν καο θαη έπεηηα ην θάλνπκε δπλακηθφ κε ηελ βνήζεηα ηεο php. Δίδακε πσο κπνξνχκε λα εγθαηαζηήζνπκε ην WampServer θαη ην Drupal. Σν Drupal έρεη απεξηφξηζηεο δπλαηφηεηεο πνπ καο θαιεί λα ηεο αλαθαιχςνπκε. Σελίδα 85 από 91