Σημειώσεις Εργαστηρίου ΑΔΕ

ΤΕΙ ΠΕΙΡΑΙΑ – Τμήμα Η/Υ ΣΥΣΤΗΜΑΤΩΝ

Ανάπτυξη Διαδικτυακών Εφαρμογών

Σημειώσεις Εργαστηρίου – 6η Έκδοση – Χειμερινό Εξάμηνο 2010-11

Π. Δ. Κεντερλής 12/10/2010

ΠΊΝΑΚΑΣ ΠΕΡΙΕΧΟΜΈΝΩΝ

Μάθημα 1ο: Διερεύνηση του Πρωτοκόλλου HTTP ................................................................................................ 1

Εργαστηριακές Εφαρμογές ............................................................................................................................... 6

Αιτήσεις GET ................................................................................................................................................. 6

Αιτήσεις HEAD ............................................................................................................................................... 7

Αιτήσεις POST ............................................................................................................................................... 7

Παράδειγμα προς Μελέτη -Διαδοχικές Επισκέψεις σε Ιστοσελίδα ............................................................. 9

Μάθημα 2ο: Εισαγωγή στη Δημιουργία και Δημοσίευση Στατικών Ιστοσελίδων με Απλά Εργαλεία ............... 13

Μάθημα 3ο: Δημιουργία Στατικών Ιστοσελίδων με το Adobe Dreamweaver...................................................... 17

Οδηγίες Ρύθμισης και Δημιουργίας ενός Site στο Dreamweaver .................................................................... 17

Ρύθμιση εξ ορισμού κωδικοσελίδας ........................................................................................................... 17

Δημιουργία Νέου Site Εργασίας ..................................................................................................................... 18

Βήμα 1ο ........................................................................................................................................................ 19

Βήμα 2ο ........................................................................................................................................................ 20

Βήμα 3ο ........................................................................................................................................................ 21

Βήμα 4ο ........................................................................................................................................................ 22

Βήμα 5ο ........................................................................................................................................................ 23

Βήμα 6ο ........................................................................................................................................................ 24

Δημιουργία Νέου Εγγράφου ........................................................................................................................ 25

Δημιουργία και Διαχείριση Ιστοτόπων με το Dreamweaver ........................................................................... 29

Εισαγωγή στη CSS .......................................................................................................................................... 31

Μάθημα 4ο: Εισαγωγή στις δυναμικές σελίδες με PHP (χωρίς Β.Δ.) .................................................................. 33

Χρήση Sessions για τη διαπίστευση ειδικών χρηστών .................................................................................. 33

Μάθημα 5ο: Δυναμικές Ιστοσελίδες με Βάσεις Δεδομένων και PHP .................................................................. 39

Ρυθμίσεις Navicat για σύνδεση με MySQL Server ............................................................................................ 40

Κεντρικό παράθυρο προγράμματος ........................................................................................................... 40

Δημιουργία νέας σύνδεσης ......................................................................................................................... 40

Εργασία με πίνακες .................................................................................................................................... 43

Εκτέλεση ερωτημάτων προς τη βάση δεδομένων ...................................................................................... 46

Δημιουργία Πινάκων στη Βάση Δεδομένων με Κατηγορίες και Προϊόντα Επιχείρησης ................................ 48

Δημιουργία Κλάσης για την Ευκολότερη Διαχείριση της Βάσης Δεδομένων ................................................. 50

Σελίδες Για Όλους τους Χρήστες ................................................................................................................... 54

Εμφάνιση Τιμοκαταλόγου Προϊόντων Ταξινομημένου κατά Κατηγορίες .................................................. 54

Σελίδες Διαχείρισης Εφαρμογής .................................................................................................................... 55

Πλήρης Εμφάνιση Τιμοκαταλόγου και Ενεργειών ...................................................................................... 56

Εισαγωγή, Επεξεργασία και Διαγραφή Προϊόντος .................................................................................... 59

ΜΑΘΗΜΑ

Το telnet είνκάποια εφαμπορεί να Απαιτείτενεπόρτα TCP σσύνδεσης ττερματικού Web Server,

Στα παραδhttp://www.επικοινωνία

Αφού ολοκλεπιλέγοντας

Α 1Ο: ΔΙΕΡ

ναι ένα πρόαρμογή που βρεθεί εγκαες παράμετρστην οποία ου telnet είμε το Serverθα ορίσετε ω

δείγματα ποchiark.greenας θα πρέπε

ληρωθούν ος το πλήκτρο

ΕΥΝΗΣΗ Τ

όγραμμα πουεκτελείται ατεστημένο ροι εκτέλεσηακούει η εφαίναι η 23 η r (remote termως πόρτα σ

ου ακολουθnend.org.uk/ει απαραίτητ

οι ρυθμίσειςο Save.

Εικ

ΤΟΥ ΠΡΩΤ

υ χρησιμοποσε κάποιονσε οποιονδης του telnetαρμογή με τοποία χρη

minal). Καθώύνδεσης την

θούν γίνετα~sgtatham/pτα να γίνουν

ς αυτές, θα

κόνα 1 Βασικέ

ΤΟΚΟΛΛΟ

οιείται για νν δικτυωμένδήποτε υποt είναι το όντην οποία θέσιμοποιείταώς η εφαρμον TCP πόρτα

αι χρήση τοputty/downloν οι ρυθμίσε

α πρέπει ν

ς ρυθμίσεις σ

Μάθημα 1ο

ΟΥ HTTP

να ‘μιλήσει’ο υπολογισλογιστή κανομα του Serέλουμε να μιαι για την εογή με την οπ

ου ελεύθεραoad.html. Γις που εμφα

α αποθηκευ

σύνδεσης στο

: Διερεύνηση

σε επίπεδοτή, ενώ σημι οποιοδήποrver ή η IP διλήσετε (Εικόεκτέλεση συποία πρόκει

α διαθέσιμοΓια λόγους ανίζονται στ

υτούν για ε

ση του Πρωτο

ο διαλόγου χμαντικό στοοτε λειτουριεύθυνση τοόνα 1). Η εξ υνεδρίας απιται να μιλήσ

ου προγράευκολίας

τα παρακάτω

εύκολη και

οκόλλου HTT

χαρακτήρωνοιχείο είναι ργικό σύστηυ, καθώς καορισμού πόρπομακρυσμένσετε είναι έν

μματος PUTκαι σωστ

ω σχήματα.

συνεχή χρή

ν με ότι μα. αι η ρτα νου νας

TTY τής

ήση

Ανάπτυξη Δι

αρακάτω εξε

ιαδικτυακών

ετάζονται οι

ν Εφαρμογών

Εικόνα

ι εξής περιπ

α 2 Ρυθμίσεις

ικόνα 3 Ρυθμίσ

πτώσεις:

ς απομακρυσμ

σεις σύνδεση

μένου τερματι

ς του TELNET

κού

Στηντην

Στηναπά

Στηνσχετ

Στηναπα

Στηνκεφα

ΣτηνPOST

ν Εικόνα 4 εαπάντηση τ

ν Εικόνα 5 εάντηση του S

ν Εικόνα 6 ετική απάντη

ν Εικόνα 7 αραίτητη κεφ

ν Εικόνα 8 αλίδα Host.

ν Εικόνα 9 ΑT στο HTTP/

εμφανίζεται του Web Serv

εμφανίζεταιServer.

εμφανίζεταιηση του Serve

εμφανίζεταφαλίδα Host

εμφανίζετα

Αίτηση POST/1.1 η οποία

ένας HTTPver.

ι η αίτηση τ

ι μια αίτησηer.

αι μια καλά .

ι μια αίτησ

T με δεδομέα αποστέλλε

Εικόνα 4 Α

διάλογος με

του ίδιου πό

η GET η οπο

ορισμένη α

ση GET στο

ένα φόρμας ει δεδομένα

Αίτηση GET υπ

Μάθημα 1ο

ε μια έγκυρη

όρου με μια

οία αναφέρε

αίτηση GET

HTTP/1.1 η

στον κορμόστον Web Se

αρκτού πόρο

η αίτηση τύπ

HTTP/1.0 H

εται σε ανύπ

στο HTTP/

οποία δεν

ό μηνύματοςerver προς επ

ση του Πρωτο

που GET στ

HEAD αίτηση

παρκτο πόρ

1.1 η οποία

διαθέτει τη

ς εμφανίζετπεξεργασία

οκόλλου HTT

ο HTTP/1.0

η και η σχετ

ρο καθώς κα

α διαθέτει

ην απαραίτη

ται μια αίτη.

και

τική

αι η

την

ητη

ηση

ΑΑνάπτυξη Διιαδικτυακώνν Εφαρμογών

Εικόνα 5 Αίτησ

ικόνα 6 Αίτησ

ση HEAD υπαρ

ση GET ανύπα

ρκτού πόρου

ρκτου πόρου

Εικόν

να 7 Αίτηση GE

α 8 Αίτηση GE

ET στο HTTP/

ET στο HTTP/1

Μάθημα 1ο

1.1 με πλήρη

1.1 με ελλιπή

στοιχεία

ση του Πρωτοοκόλλου HTT

Σκοπρανπαχρηανπαεπ

ΡΓΑΣΤΗΡΙΑ

οπός της ερρωτοκόλλου αλυθεί δεν εαρουσιαστεί ησιμοποιώναγνώστης θαραγωγής. πεξεργασίας

ΤΗΣΕΙΣ G

1. Συντάξhttp://απάντ

2. Συντάξκάνετεπροσθτην απ

3. ΣυντάθέσατεServer.καταγρπεριπτ

ΑΚΕΣ ΕΦΑ

ργαστηριακήHTTP το οπείναι άμεσαένας απλ

ντας εργαλείθα μπορεί Για κάθε βκειμένου, κα

ξτε και στε/weblab.teipiτηση του Servξτε και στείε χρήση της θέστε την κεφπάντηση τουάξτε και στεε την κεφαλ Επαναλάβράψτε την ατώσεις.

Εικόνα 9 Αίτησ

ΑΡΜΟΓΕΣ

ής αυτής άσποίο χρησιμοα ορατά στολός τρόποςία που μπορνα ελέγχει βήμα καταγαθώς επίση

είλτε μια αr.gr/investigver. ίλτε δυο αιτκεφαλίδας Hφαλίδα αίτηυ Server. Μετείλτε δυο αλίδα αίτησηςβετε έχοντααπάντηση τ

ση POST με δεδ

σκησης είναιοποιείται γιαν απλό χρήσς με τον ρούν να βρεθκαλύτερα τγράψτε τις ς και τις πα

αίτηση GETgations/http/

τήσεις GET σHost. Παρατησης Host τηρήστε τα byαιτήσεις GETς Connectionας θέσει τηου Server. Σ

δομένα φόρμα

ι η εξοικείωα τη διαχείρστη ενός υποποίο είναθούν σε οποτις εφαρμογαιτήσεις

αρατηρήσεις

στο HTTP//test1.txt. Κ

στο HTTP/1τηρήστε και ηρώντας τη ytes των πραT στο HTTPn: close. Παην κεφαλίδΣυγκρίνατε τ

ας στον κορμό

ωση με τις βριση του Worπολογιστή, σαι εφικτόςοιονδήποτε υγές του σε και τις απς σας.

1.0 ζητώνταΚατόπιν πα

.1 ζητώνταςκαταγράψτεσωστή σύνταγματικών δP/1.1 ζητώνρατηρήστε δα Connectiτη συμπεριφ

ό μηνύματος

βασικές έννοrld Wide Webστην εργαστο πειραμ

υπολογιστή. περιβάλλον

παντήσεις σ

ας από τοναρατηρήστε

ς τον παραπε την απάντταξη. Παρατεδομένων τητας τον πακαι καταγράon: keep-aφορά της σύ

οιες και λειτb. Καθώς όλτηριακή αυτήματισμός με Με τις γνών ανάπτυξησε κάποιο

ν Web Serveκαι κατα

πάνω πόρο.τηση του Serτηρήστε και ης απάντησαραπάνω πάψτε την απalive. Παρατύνδεσης TCP

τουργίες τουλα όσα έχουνή άσκηση θαε το HTTPσεις αυτές οης αλλά καπρόγραμμα

er τον πόρογράψτε την

. Αρχικά μηνrver. Κατόπινκαταγράψτεης. πόρο. Αρχικάπάντηση τουτηρήστε καP/IP στις δύο

υ ν α P, ο αι α

ν ν ε

ά υ αι ο

Μάθημα 1ο: Διερεύνηση του Πρωτοκόλλου HTTP

4. Συντάξτε και στείλτε μια αίτηση GET στα HTTP/1.0 και HTTP/1.1 ζητώντας από τον Web Server την εκτέλεση του προγραμματιδίου το οποίο βρίσκεται στη διεύθυνση http://weblab.teipir.gr/investigations/http/get_test01.php. Αυτό απαιτεί την αποστολή τριών μεταβλητών GET (a, b, f ) και επιστρέφει ως μέρος της απάντησης HTTP το αποτέλεσμα της πράξης: r = a f b, όπου f πρέπει να είναι ένα σύμβολο αριθμητικής πράξης (‘‘+’’, ‘‘-’’, ‘‘*’’, ‘‘/’’). Προσέξατε ιδιαίτερα ότι για τον ορισμό της μεταβλητής f θα πρέπει να κάνετε χρήση της κωδικοποίησης ISO-8859-7. Αν κάποια μεταβλητή δεν οριστεί σωστά το προγραμματίδιο θα επισημάνει το σφάλμα. Αναζητήστε και αναφέρετε το λόγο για τον οποίο απαιτείται η παραπάνω κωδικοποίηση.

ΑΙΤΗΣΕΙΣ HEAD

1. Επαναλάβατε τις διερευνήσεις αιτήσεων GET τροποποιώντας αυτές για να ανταποκρίνονται σε αιτήσεις HEAD. Παρατηρήστε και καταγράψτε τις απαντήσεις του Server. Δικαιολογήστε όποιες διαφορές υπάρχουν ανάμεσα στις δύο μεθόδους αιτήσεων.

ΑΙΤΗΣΕΙΣ POST

Προκειμένου να διερευνηθούν οι αιτήσεις POST πρέπει να γίνει αίτηση ενός πόρου ο οποίος θα μπορεί να επεξεργασθεί τα δεδομένα που αποστέλλονται μέσω της αίτησης. Για το σκοπό αυτό θα χρησιμοποιηθούν διάφορα εκτελέσιμα προγραμματίδια (executable scripts).

1. Στη διερεύνηση αυτή θα αποστείλετε αριθμητικά μόνο δεδομένα προς το Web Server. Το προγραμματίδιο το οποίο βρίσκεται στην ακόλουθη διεύθυνση http://weblab.teipir.gr/investigations /http/post_test01.php απαιτεί την αποστολή τριών μεταβλητών τύπου POST (a, b, c) και επιστρέφει ως μέρος της απάντησης HTTP το αποτέλεσμα της πράξης : r = a2 + b2 + c. Χρησιμοποιήστε την κεφαλίδα Content-Type: application/x-www-form-urlencoded. Τα POST δεδομένα αυτού του τύπου γράφονται ως μέρος του κορμού μηνύματος με τον ίδιο τρόπο που γράφονται ως GET δεδομένα (χωρίς το αρχικό ‘‘?’’). Φροντίστε ώστε να έχετε καταμετρήσει σωστά το μήκος των δεδομένων που αποστέλλονται μαζί με την αίτηση σας. Χρησιμοποιήστε τον αριθμό αυτό με την κεφαλίδα Content-Length. Δοκιμάστε να δώσετε λάθος αριθμό.

2. Στη διερεύνηση αυτή θα χρειαστεί να αποστείλετε μικρό κομμάτι κειμένου στο προγραμματίδιο που βρίσκεται στο Web Server στην ακόλουθη διεύθυνση http://weblab.teipir.gr/investigations /http/post_test02.php. Το προγραμματίδιο περιμένει να λάβει δεδομένα μέσω της POST μεταβλητής ‘‘keimeno’’. Ο Server θα απαντήσει με το αποτέλεσμα της επεξεργασίας του προγραμματιδίου. Για να στείλετε Ελληνικό κείμενο ή ειδικούς χαρακτήρες θα πρέπει να τους κωδικοποιήσετε κατάλληλα (Πίνακας 1).

ΑΑνάπτυξη Δι

Πίνακ

κας 1 URL Κωδ

δικοποίηση Χα

αρακτήρων κα

ατά ΕΛΟΤ 9288 (Windows Greeek)

ΠΑΡΑΔΕΙΓΜΑ ΠΡΟΣ ΜΕΛΕΤΗ -ΔΙΑΔΟΧΙΚΕΣ ΕΠΙΣΚΕΨΕΙΣ ΣΕ ΙΣΤΟΣΕΛΙΔΑ

Στις σελίδες που ακολουθούν εμφανίζονται τα HTTP μηνύματα που ανταλλάσσονται σε δυο διαδοχικές αιτήσεις της σελίδας http://weblab.teipir.gr. Παρατηρήστε τις αιτήσεις και τις αντίστοιχες απαντήσεις τους τόσο κατά την πρώτη, όσο και κατά τη δεύτερη επίσκεψη στην ίδια σελίδα. Καταγράψτε τις παρατηρήσεις σας και δικαιολογήστε όποιες διαφορές υπάρχουν.

Πρώτη Επίσκεψη GET / HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: text/xml,application/xml,application/xhtml+xml, text/html; q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.7,el;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 HTTP/1.x 200 OK Date: Sun, 11 Dec 2005 23:51:27 GMT Server: Apache X-Powered-By: PHP/4.4.0-pl1-gentoo with Hardening-Patch Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0,pre-check=0 Pragma: no-cache Content-Encoding: gzip Vary: Accept-Encoding Content-Length: 2273 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html; charset=ISO-8859-7 ---------------------------------------------------------- GET /site.css HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.7,el;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://weblab.teipir.gr/ Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 HTTP/1.x 200 OK Date: Sun, 11 Dec 2005 23:51:27 GMT Server: Apache Last-Modified: Thu, 08 Dec 2005 17:37:57 GMT Etag: "498a-1182-bab30740" Accept-Ranges: bytes Content-Length: 4482 Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Content-Type: text/css ---------------------------------------------------------- GET /images/nav/front_page.png HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.7,el;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://weblab.teipir.gr/

Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 HTTP/1.x 200 OK Date: Sun, 11 Dec 2005 23:51:28 GMT Server: Apache Last-Modified: Tue, 06 Dec 2005 22:37:17 GMT Etag: "f1c41-17d0-ad842140" Accept-Ranges: bytes Content-Length: 6096 Keep-Alive: timeout=15, max=98 Connection: Keep-Alive Content-Type: image/png

Δεύτερη Επίσκεψη GET / HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: text/xml,application/xml,application/xhtml+xml,text/html; q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.7,el;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 Cache-Control: max-age=0 HTTP/1.x 200 OK Date: Sun, 11 Dec 2005 23:52:32 GMT Server: Apache X-Powered-By: PHP/4.4.0-pl1-gentoo with Hardening-Patch Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0,pre-check=0 Pragma: no-cache Content-Encoding: gzip Vary: Accept-Encoding Content-Length: 2273 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html; charset=ISO-8859-7 ---------------------------------------------------------- GET /site.css HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.7,el;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://weblab.teipir.gr/ Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 If-Modified-Since: Thu, 08 Dec 2005 17:37:57 GMT If-None-Match: "498a-1182-bab30740" Cache-Control: max-age=0 HTTP/1.x 304 Not Modified Date: Sun, 11 Dec 2005 23:52:33 GMT Server: Apache Connection: Keep-Alive Keep-Alive: timeout=15, max=100 Etag: "498a-1182-bab30740" ---------------------------------------------------------- GET /images/nav/front_page.png HTTP/1.1 Host: weblab.teipir.gr User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Accept: image/png,*/*;q=0.5 Accept-Language: en-us,en;q=0.7,el;q=0.3

Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-7,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://weblab.teipir.gr/ Cookie: PHPSESSID=e01760d780ea7c304bc571d2ddcd30b7 If-Modified-Since: Tue, 06 Dec 2005 22:37:17 GMT If-None-Match: "f1c41-17d0-ad842140" Cache-Control: max-age=0 HTTP/1.x 304 Not Modified Date: Sun, 11 Dec 2005 23:52:33 GMT Server: Apache Connection: Keep-Alive Keep-Alive: timeout=15, max=99 Etag: "f1c41-17d0-ad842140"

ΜΑΘΗΜΑΙΣΤΟΣΕΛΙ

Στο δεύτεροαπλής στατ

Στα παραδ(http://wwwεγκαταστήσεγκατάστασείναι ενέργε

Στο σημείο “System variaεπιλέγετε τεντός των ογραμμή εντοτης γραμμήπου ζητά ναεπεξεργασίαπου χρησιμμεταξύ τωνσυνθήκες, θσύστημα, ή

Το πρόγραμεκτελέσει μ

Μάθημα 2ο: Ε

Α 2Ο: ΕΔΩΝ ΜΕ Α

ο αυτό μάθητικής ιστοσελ

δείγματα ποw.chiark.greenσει ήδη μαζση του προγειες που έχο

Εικόνα 10 Ρυ

“User variabables” τις μεη μεταβλητήοποίων αναζολών του λες εντολών να εκτελεστεα των περιεμοποιήθηκε ήδη αναγραθα πρέπει “;c:\Program

μμα PSFTP κια ασφαλή

Εισαγωγή στ

ΕΙΣΑΓΩΓΗΑΠΛΑ ΕΡΓ

ημα θα διδαχλίδας σε ένα

ου ακολουθnend.org.uk/ζί με το PUγράμματος, υν γίνει ήδη

υθμίσεις Συστ

les for …” τιεταβλητές πή με όνομα ζητά τα ονόμειτουργικού να μη χρειάί. Πατώνταςεχόμενων δεδγια την εγκαφόμενων κνα προσθέ

m Files (x86)\

κάνει χρήσηέκδοση του

τη Δημιουργ

ΣΤΗ ΓΑΛΕΙΑ

χτούν οι πλαν απομακρ

θούν γίνετα/~sgtatham/UTTY στον καθώς και για εσάς.

τήματος

ις μεταβλητπεριβάλλοντο

Path. Η μετματα αρχείωσυστήματος

άζεται να ανς το πλήκτρδομένων τηςκατάσταση αταλόγων τσετε τη συ

\Putty” για 64

η μιας κρυπυ πρωτοκόλ

γία και Δημο

ΔΗΜΙΟΥΡ

έον βασικέςυσμένο εξυπ

αι χρήση τputty/downlυπολογιστήη ρύθμιση τ

ές περιβάλλος του συστταβλητή Pathων εκτελέσιμς (Commandναγράφει καο “Edit”, εμφς μεταβλητήτου PUTTY,το χαρακτήρυμβολοσειρά4bit λειτουρ

πτογραφημένλλου διαχείρ

οσίευση Στατ

ΡΓΙΑ ΚΑ

ς τεχνικές γιπηρετητή.

ου ελεύθερoad.html). Τή σας. Στουτου συστήμα

Εικόν

λοντος του σήματος (γιαh περιέχει μμων προγραd Prompt). Δαι τον κατάφανίζεται ένής. Σε αυτή σ, χρησιμοπορα του ελληνά “;c:\Prograγικό σύστημ

νης σύνδεσηρισης απομα

τικών Ιστοσε

Ι ΔΗΜΟ

ια τη δημιου

ρα διαθέσιμΤο πρόγραμμυς υπολογισατος όπως

να 11 Μεταβλη

συνδεδεμένο όλους τουςμια λίστα απμμάτων, όταΔίνεται έτσι λογο στον ονα μικρό πασυμπληρώνεοιώντας ωςνικού ερωτηam Files\Putμα.

ης SSH (Secακρυσμένου

ελίδων με Απ

ΟΣΙΕΥΣΗ

υργία και δη

μου προγράμα αυτό έχεστές του επεριγράφετ

ητές Περιβάλ

ου χρήστη, ες χρήστες τοπό διαδρομαν αυτά συνη δυνατότηοποίο βρίσκράθυρο πουετε τη διαδρς χαρακτήραματικού “;”.

tty” για 32b

cure Shell) πσυστήματο

πλά Εργαλεί

ΣΤΑΤΙΚΩ

ημοσίευση μ

άμματος PSτε πιθανόταργαστηρίουται παρακάτ

λοντος

είτε στο σημου υπολογιστές καταλόγωντάσσονται στα στο χρήσκεται το αρχυ επιτρέπει ομή καταλόγα διαχωρισμΥπό κανονι

bit λειτουργ

προκειμένου ος αρχείων.

ιας

FTP ατα , η τω,

μείο τή), ων, στη στη χείο την γου μού ικές γικό

να Το

πρωτόκολλο αυτό επιτρέπει τη μεταφορά αρχείων από και προς έναν απομακρυσμένο εξυπηρετητή αρχείων (SFTP Server). Για τις ανάγκες του μαθήματος, ο εξυπηρετητής αυτός είναι ο ίδιος ο Web Server weblab.teipir.gr.

Ανοίγοντας ένα παράθυρο γραμμής εντολών του λειτουργικού συστήματος, είναι απαραίτητο να ορίσετε ως τοπικό κατάλογο λειτουργίας τον Z:\web_pages, τον κατάλογο που θα χρησιμοποιήσετε για την τοπική αποθήκευση των ιστοσελίδων που θα αναπτυχθούν εντός του εργαστηρίου. Αυτό επιτυγχάνεται ως ακολούθως. Το πρόγραμμα PSFTP προσφέρει τις παραμέτρους εκτέλεσης που παρουσιάζονται ακολούθως.

1: C:\>Z: 2: Z:\>cd web_pages 3: Z:\web_pages>psftp ‐? 4: PuTTY Secure File Transfer (SFTP) client 5: Release 0.60 6: Usage: psftp [options] [user@]host 7: Options: 8: ‐V print version information and exit 9: ‐pgpfp print PGP key fingerprints and exit 10: ‐b file use specified batchfile 11: ‐bc output batchfile commands 12: ‐be don't stop batchfile processing if errors 13: ‐v show verbose messages 14: ‐load sessname Load settings from saved session 15: ‐l user connect with specified username 16: ‐P port connect to specified port 17: ‐pw passw login with specified password 18: ‐1 ‐2 force use of particular SSH protocol version 19: ‐4 ‐6 force use of IPv4 or IPv6 20: ‐C enable compression 21: ‐i key private key file for authentication 22: ‐noagent disable use of Pageant 23: ‐agent enable use of Pageant 24: ‐batch disable all interactive prompts

Χρησιμοποιήστε τις παραμέτρους αυτές προκειμένου να εγκαθιδρύσετε μια συνεδρία SFTP με τον weblab.teipir.gr κάνοντας χρήση των στοιχείων του λογαριασμού χρήστη που σας έχουν δοθεί.

1: Z:\web_pages>psftp ‐l web_tue39 ‐pw notgonnatell weblab.teipir.gr 2: Using username "web_tue39". 3: Server refused our key 4: Remote working directory is / 5: psftp> ls 6: Listing directory / 7: drwxr‐xr‐x 3 root web 4096 Oct 11 18:52 . 8: drwxr‐xr‐x 3 root web 4096 Oct 11 18:52 .. 9: drwxr‐xr‐x 2 web_tue39 web 4096 Oct 11 18:52 web_pages 10: psftp> cd web_pages 11: Remote directory is now /web_pages 12: psftp> ls 13: Listing directory /web_pages 14: drwxr‐xr‐x 2 web_tue39 web 4096 Oct 11 18:52 . 15: drwxr‐xr‐x 3 root web 4096 Oct 11 18:52 .. 16: ‐rwxr‐xr‐x 1 web_tue39 web 343 Oct 11 18:52 index.html 17: psftp>

Η μετακίνηση στο δέντρο καταλόγων του απομακρυσμένου εξυπηρετητή γίνεται με τη χρήση της εντολής cd, ενώ η ίδια λειτουργία για το τοπικό σύστημα αρχείων γίνεται με την εντολή lcd. Στον τρέχον

Μάθημα 2ο: Εισαγωγή στη Δημιουργία και Δημοσίευση Στατικών Ιστοσελίδων με Απλά Εργαλεία

απομακρυσμένο κατάλογο μπορείτε να δημιουργήσετε έναν υποκατάλογο με την εντολή mkdir ακολουθείτενη από το επιθυμητό όνομα του νέου καταλόγου, όπως φαίνεται στη συνέχεια.

1: psftp> mkdir images 2: mkdir /web_pages/images: OK 3: psftp> ls 4: Listing directory /web_pages 5: drwxr‐xr‐x 3 web_tue39 web 4096 Oct 13 23:12 . 6: drwxr‐xr‐x 3 root web 4096 Oct 11 18:52 .. 7: drwxr‐xr‐x 2 web_tue39 Domain Users 4096 Oct 13 23:12 images 8: ‐rwxr‐xr‐x 1 web_tue39 web 343 Oct 11 18:52 index.html 9: psftp>

Στη συνέχεια, θα δημιουργήσετε το πρώτο αρχείο στατικής ιστοσελίδας. Κρατήστε το παράθυρο του PSFTP ανοικτό για μετέπειτα χρήση. Ανοίγοντας το Notepad του λειτουργικού συστήματος Windows (ή κάποιο άλλο απλό πρόγραμμα επεξεργασίας καθαρού κειμένου, όχι προγράμματα όπως το Word), πληκτρολογείστε τον ακόλουθο κώδικα XHTML. Εφόσον το επιθυμείτε, μπορείτε να εμπλουτίσετε το περιεχόμενο του εγγράφου αυτού προσθέτοντας έγκυρο κώδικα XHTML. Για τις ανάγκες του σημείου αυτού του μαθήματος, το μινιμαλιστικό αυτό έγγραφο αρκεί.

1: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">

2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 5: <title>My First Web Page</title> 6: </head> 7: <body> 8: <h1>Hello World</h1> 9: <p>Αυτή είναι η πρώτη μας στατική ιστοσελίδα </p> 10: </body> 11: </html>

Το νέο αυτό αρχείο θα πρέπει να αποθηκευθεί ως Z:\web_pages\index.html και κατόπιν θα πρέπει να μεταφερθεί στον κατάλογο /web_pages του διαθέσιμου απομακρυσμένου χώρου σας στο Web Server προκειμένου να δημοσιευθεί. Για το σκοπό αυτό, στο παράθυρο του PSFTP πρέπει να εκτελέσετε την εντολή put.

1: psftp> put index.html 2: local:index.html => remote:/web_pages/index.html 3: psftp>

Το έγγραφο αυτό μπορείτε πλέον να δείτε δημόσια με τη χρήση κάποιου Web Browser από τη διεύθυνση http://weblab.teipir.gr/~όνομα_ομάδας/index.html. Καθώς o Web Server έχει ρυθμιστεί ώστε να χρησιμοποιεί κατά σειρά προτεραιότητας τα αρχεία με όνομα index.html, index.php και login.php ως εξ ορισμού προσφερόμενα έγγραφα καταλόγου, το αρχείο index.html θα εμφανίζεται ακόμα και αν το παραλείψετε από το URL.

Κάνοντας χρήση του Web Browser σας, κατεβάστε τα ακόλουθα αρχεία εικόνας και αποθηκεύστε τα στον κατάλογο Z:\web_pages\images. Αν ο κατάλογος αυτός δεν υπάρχει, δημιουργήστε τον.

http://weblab.teipir.gr/projects/fastfood/fastfood_logo.jpg http://weblab.teipir.gr/projects/fastfood/sandwich.jpg http://weblab.teipir.gr/projects/fastfood/construction.gif

Το πρόγραμμα PSFTP παρέχει επιπλέον εντολές οι οποίες επιτρέπουν την πλήρη διαχείριση των καταλόγων και αρχείων του απομακρυσμένου εξυπηρετητή. Η πλήρη λίστα των εντολών αυτών εμφανίζεται στη συνέχεια.

1: psftp> help 2: ! run a local command 3: bye finish your SFTP session 4: cd change your remote working directory 5: chmod change file permissions and modes 6: close finish your SFTP session but do not quit PSFTP 7: del delete files on the remote server 8: dir list remote files 9: exit finish your SFTP session 10: get download a file from the server to your local machine 11: help give help 12: lcd change local working directory 13: lpwd print local working directory 14: ls list remote files 15: mget download multiple files at once 16: mkdir create directories on the remote server 17: mput upload multiple files at once 18: mv move or rename file(s) on the remote server 19: open connect to a host 20: put upload a file from your local machine to the server 21: pwd print your remote working directory 22: quit finish your SFTP session 23: reget continue downloading files 24: ren move or rename file(s) on the remote server 25: reput continue uploading files 26: rm delete files on the remote server 27: rmdir remove directories on the remote server 28: psftp>

Στη συνέχεια, τροποποιήστε το αρχείο index.html ώστε να περιέχει τις δυο πρώτες εικόνες στον κορμό του εγγράφου με τη χρήση ετικετών HTML img. Οι εικόνες, καθώς και η νέα έκδοση του index.html, θα πρέπει να μεταφερθούν στον Web Server στους κατάλληλους καταλόγους. Ο απομακρυσμένος κατάλογος images που πρέπει να τοποθετηθούν τα αρχεία εικόνας βρίσκεται στο ίδιο επίπεδο με το αρχείο index.html. Τα αρχεία εικόνας μπορούν να αναφερθούν στην ιδιότητα src των ετικετών img με κάποιο εκ των ακόλουθων τρόπων:

Με την πλήρη διεύθυνση URL, src="http://weblab.teipir.gr/~όνομα_ομάδας/sandwich.jpg" Με την πλήρη διαδρομή από τη ρίζα του Web Server, src="/~όνομα_ομάδας/images/sandwich.jpg" Με τη σχετική διαδρομή από το αρχείο αναφοράς (index.html), src="images/sandwich.jpg"

Οι δυο τελευταίοι τρόποι αναφοράς (addressing modes) είναι και οι πλέον προτιμότεροι.

Δημιουργήστε το αρχείο construction.html σύμφωνα με τα πρότυπα περιεχόμενα του αρχείου index.html και τοποθετήστε το στον ίδιο τοπικό και απομακρυσμένο κατάλογο με το δεύτερο. Τοποθετήστε την εικόνα construction.gif στο έγγραφο construction.html. Τοποθετήστε έναν υπερσύνδεσμο στο έγγραφο index.html (π.χ. στην εικόνα sandwich.jpg), ο οποίος, να οδηγεί στο έγγραφο construction.html χρησιμοποιώντας όποιον από τους παραπάνω τρόπους αναφοράς επιθυμείτε.

ΜΑΘΗΜΑ

ΟΔΗΓΙΕΣ

ΡΥΘΜΙΣΗ

Από το μενακόλουθες π

Στο σημείο αχρησιμοποιεUnicode (UT

Α 3Ο: ΔΗΜ

ΡΥΘΜΙΣΗ

ΕΞ ΟΡΙΣΜ

νού Edit > παραμέτρου

DeDeUssp

αυτό έχουμεείτενης κωδF-8).

ΜΙΟΥΡΓΙΑ Σ

ΗΣ ΚΑΙ ΔΗ

ΜΟΥ ΚΩΔ

Preferences υς και τιμές:

efault documefault encodse when opepecify an enc

ε ορίσει ότι όικοσελίδας,

Μάθημα 3ο: Δ

ΣΤΑΤΙΚΩΝ

ΜΙΟΥΡΓΙΑ

ΙΚΟΣΕΛΙΔ

επιλέγουμε

ment: ing: ning existingoding

όλα τα καινοθα ανοίγοντ

Δημιουργία

Ν ΙΣΤΟΣΕΛ

ΑΣ ΕΝΟΣ S

ΔΑΣ

ε την κατηγ

g files that d

ούρια έγγραται και απο

Στατικών Ισ

ΛΙΔΩΝ ΜΕ

SITE ΣΤΟ

γορία ρυθμί

PHP Unicod

on’t Tick

αφα αλλά καοθηκεύονται

στοσελίδων μ

Ε ΤΟ ADO

DREAMW

σεων New

de (UTF-8)

αι τα έγγραφαπό το Drea

με το Adobe

OBE DREA

WEAVER

Document. Α

φα που δεν φamweaver με

Dreamweave

MWEAVER

Αλλάζουμε

φέρουν δήλωε κωδικοσελ

τις

ωση λίδα

Πραυ

ΗΜΙΟΥΡΓΙ

ροκειμένου νυτό. Από το μ

ατόπιν πρέπ

Α ΝΕΟΥ S

να ξεκινήσετμενού Site εκ

ει να εκτελε

SITE ΕΡΓΑ

τε τη σχεδίακτελείτε την

εστούν τα ακ

ΣΙΑΣ

ση ενός Webεπιλογή New

κόλουθα έξι

b Site είναι σw Site.

βήματα.

σημαντική ηη δημιουργίαα ενός projec

ct για το Sitee

ΒΗΜΑ 1Ο

Στο πρώτο με διαφορετόνομα «Εργα

Είτε εργάζεSite http://wεργασίας στ

βήμα ορίζεττικά Sites οαστηριακή Ο

στε πάνω σweblab.teipir.την οποία αν

τε το όνομα οποιαδήποτεΟμάδα ΧΧΧ»,

στο Site εντό.gr/~usernamνήκετε.

του Site με τε στιγμή το όπου ΧΧΧ ε

ός, είτε εκτόme, όπου us

το οποίο θαεπιθυμείτείναι ο κωδικ

ός του εργασername είνα

α εργάζεστε.. Για εργασκός χρήστη π

στηρίου, θααι το όνομα χ

. Μπορείτε νσία εντός τοπου σας έχει

πρέπει να χρήστη που

με το Adobe

να επιλέξετεου εργαστηρι δοθεί.

δώσετε ως έχει ανατεθ

Dreamweave

ε να δουλέψρίου, δώστε

διεύθυνση τθεί στην ομά

ψετε το

του άδα

Στοεπχρή

ΗΜΑ 2Ο

ο βήμα αυτόπιλέγετε «Noήσιμες χωρί

ό, ζητείται , I do not waίς τις βασικέ

η επιλογή χant to use a sές γνώσεις π

χρήσης κάποerver technoπου θα αποκ

οιας τεχνολοology», καθώκτήσετε στο

ογίας ανάπτώς οι επιπλέεργαστήριο

τυξης εφαρμον δυνατότηο αυτό.

μογών. Στο ητες σχεδίασ

σημείο αυτόσης δεν είνα

ό αι

ΒΗΜΑ 3Ο

Στο βήμα αεντός του ερεργασία στταυτόχροναορίσετε να ε

υτό πρέπει ργαστηρίου,το σπίτι σαα ανάπτυξη κείναι αυτός

να ορίσετε, αυτός ο χώας, επιλέγετκαι δημοσίευπου αποθηκ

τον τοπικόώρος πρέπειτε οποιονδήυση στον τοπκεύονται τα

ό κατάλογο ι να είναι στποτε κατάλπικό υπολογαρχεία που

αποθήκευσητο δίσκο Z κάλογο του διγιστή σας, εδημοσιεύει

ης των σελίάτω από τονικού σας σκίναι προτιμο Web Serve

με το Adobe

ίδων του Sitν κατάλογο κληρού δίσκότερο ο κατ

er που χρησι

Dreamweave

te. Για εργαweb_pages. κου. Αν κάνάλογος πουμοποιείτε.

σία Για νετε θα

ΤοεργαπαπκαανSecεπ

Έχείνπλαπμέσ

ΗΜΑ 4Ο

βήμα αυτόγαστηριακούπομακρυσμένποθήκευσης θώς και τοτίστοιχα στcure FTP (SFTπικοινωνίας.

οντας συμπναι δυνατή ηλαίσιο διαλόποκόπτει τηνσω Proxy Se

ό είναι καθού μαθήματονο Web Servτων σελίδων μυστικό κτα πεδία FTPTP). Η σύνδε

πληρώσει ταη σύνδεση σόγου. Σε πν εξερχόμενηrver.

/web_pag

οριστικό γιαος. Θα πρer. Το όνομαων σας στοκωδικό πρόσP login και Fση με τον απ

α στοιχεία ασας με τον ερίπτωση ση πρόσβαση

α τη δημοσίρέπει να οα του Web Sν απομακρυσβασης πουFTP passwordπομακρυσμέ

αυτά, πατήσαπομακρυσσφάλματος η σε υπηρεσί

ίευση των σορίσετε το Server θα ορυσμένο Webυ έχει αποδd. Επιλέξτε ένο Web Serv

στε το πλήκσμένο Web Sβεβαιωθείτίες SSH (TCP

σελίδων σαςFTP ως π

ριστεί να είν Server είναδοθεί στην οτα πλαίσια ver γίνεται π

τρο Test Coerver. Επιτυτε ότι δεν P Port 22) ή ό

ς στο Internπρωτόκολλο ναι το weblaαι το /webpομάδα σας επιλογής μ

πάνω από κρ

onnection γιαχής σύνδεσβρίσκεστε πότι δεν έχετε

net για τις αεπικοινων

ab.teipir.gr. Οpages. Το όνθα πρέπει ε λεζάντες ρυπτογραφη

α να επιβεβση θα εμφανπίσω από ε πρόσβαση

ανάγκες τουνίας με τονΟ κατάλογοςνομα χρήστηνα εισάγετεSave και Useημένο κανάλ

βαιώσετε ότνίσει σχετικόfirewall που στο Interne

υ ν ς η ε e λι

τι ό υ et

ΒΗΜΑ 5Ο

Στο βήμα αυκαι επεξεργεργασίας, θ

υτό δίνεται ηγασία. Επειθα απαντήσε

η δυνατότητιδή δεν επιθετε με την επ

τα χρήσης τεθυμείτε την πιλογή «No,

εχνολογιών αυξημένη do not enab

πρόσβασης πολυπλοκότle check in a

σε πόρους ατητα που πnd check out

με το Adobe

από ομάδεςπροσφέρει αt».

Dreamweave

ς για ανάγνωαυτό το σχή

ωση ήμα

Στοαπ«D

ΗΜΑ 6Ο

ο βήμα αυτποδεχτείτε ήone».

τό το πρόγρή να τις τρ

ραμμα σας οποποιήσετ

πληροφορείτε. Αν είσασ

ί για τις επστε σίγουρο

πιλογές πουοι για τις ε

υ έχετε κάνεπιλογές σα

ει και περιας πατήστε

μένει να τιςτο πλήκτρο

Στο τέλος ταρχεία.

ΔΗΜΙΟΥΡ

Για να δημιBasic page ε

του βήματος

ΡΓΙΑ ΝΕΟΥ

ουργήσετε έπιλέγετε τη

ς 6, είναι ε

Υ ΕΓΓΡΑΦΟ

ένα νέο έγγρδημιουργία

μφανές το

ραφο, εκτελμιας βασική

νέο Site πο

λείτε την επής σελίδας τ

ου δημιουργή

ιλογή New ατύπου HTML

ήθηκε, χωρί

από το μενο.

με το Adobe

ίς όμως αυτ

ού File. Από

Dreamweave

τό να περιέ

την κατηγο

έχει

ρία

Ένμπ

α νέο παράπορεί να εμφ

άθυρο θα εμφανιστεί με τ

de Εμφά

sign Εμφά

t Ταυτεγγρ

μφανιστεί, ότρεις διαφορ

άνιση και επ

άνιση και οπ

τόχρονη εμράφου (Desig

όπου μπορείρετικούς τρό

πεξεργασία

πτική επεξερ

μφάνιση κώgn view)

ίτε να επεξεόπους:

σε επίπεδο

ργασία του

ώδικα HTML

εργαστείτε

καθαρού κώ

εγγράφου (W

L (Code vie

τη νέα σας

ώδικα HTML

WYSIWYG Edit

ew) και εμ

σελίδα. Η

μφανιζόμενο

σελίδα αυτή

Τελευταία κWeb Server χειρωνακτικ

Χειρωνακτικμπλε βέλος τα επιλεγμέχρήσιμη σε π

Αυτόματα, ενημερωμένποντικιού εμεμφανιζόμεμέρη αυτούδιαγραφεί.

Αφού έχετε η στιγμή γιαέχετε δημιου

κίνηση αποττου εργασ

κά, είτε αυτό

κά, θα πρέπαπό το πλαένα αρχεία περιπτώσει

η μεταφοράνες εκδόσειςμφανίζεται νο παράθυρ, την κατεύ

ολοκληρώσεα να δείτε δηυργήσει, θα

τελεί η μεταστηρίου. Τοόματα.

πει να επιλέξαίσιο αρχείωαπό τον απις που ο Web

ά περιλαμβάς. Επιλέγονταένα αναδυόρο επιλέγετεθυνση μετα

ει τη διαδικαημόσια τις σδώσετε το α

φορά και δηο Dreamwea

ξετε το αρχεων του Site πομακρυσμέb Server διαθ

άνει τον έλεας τους κατόμενο μενού ε την εφαρμφοράς (GET

ασία συγχροσελίδες σας.ανάλογο URL

ημοσίευση τaver δίνει τ

είο ή τα αρχε(PUT). Αντίσένο Web Serθέτει τις σωσ

εγχο του καταλόγους ή τεντολών απμογή του συγT ή PUT) καθ

ονισμού τοπ. Σύμφωνα μL στον Web B

ΑποθηκεύσαεπεξεργαστΑποφύγετε τWeb Server τστο λειτουρπροσοχή κααρχείου κμόνο πεζοπαράδειγμαindex.htmlεμφανίζετα

του Site πουτη δυνατότ

εία που θέλεστοιχα, πατver στον τοστές ή αναν

αταλόγου ήτα αρχεία ππό το οποίο γχρονισμού θώς και τον

ικού και απομε τη διαμόρBrowser σας.

ατε το τήκατε με τους ελληνικτου εργαστηργικό σύστηματά τη συγγαι χρησιμοπούς λατινια αυτό έχει για το αρχι στο πλαίσ

δημιουργήσητα διαχείρ

ετε να μεταφώντας το ππικό υπολοεωμένες εκδ

των αρχείωου επιθυμείτεπιλέγετε τσε όλο το Sτρόπο χειρ

ομακρυσμένρφωση του W.

με το Adobe

αρχείο κάποιο εύχκούς χαρακτηρίου μας είνμα Linux, δώγγραφή του ποιήστε καικούς χαρχρησιμοποιχείο, το οπσιο αρχείων τ

σατε στον αρισης του

φέρετε και νπράσινο βέλοογιστή (GET)δόσεις των σ

ων που έχετίτε, με το δεξτην εντολή SySite ή μόνο σρισμού αρχε

νου καταλόγWeb Server κ

Dreamweave

που μόχρηστο όνοτήρες. Καθώναι βασισμένώστε ιδιαίτεονόματος τ

ατά προτίμηακτήρες. Σιηθεί το όνοποίο πλέον του Web Site

απομακρυσμSite σας ε

να πατήσετεος, μεταφέρ. Η GET είσελίδων σας

τε επιλέξει ξί πλήκτρο τynchronize. Σστα επιλεγμέίων που έχο

ου, έχει φτάαι του Site π

όλις μα. ώς ο νος ερη του ηση Στο ομα θα

ένο είτε

ε το ρετε ίναι ς.

για του Στο ένα ουν

άσει που

Για

Πρσυγσελ

α το παράδε

ροσοχή: Σε κυγχρονίζετε ελίδες σας με

ειγμα μας έχ

κάθε σελίδαμε τον αποε τη χρήση ε

χει δοθεί το U

http:/

α που θα ολομακρυσμένοενός web bro

//weblab.teip

λοκληρώνετεο server καιowser.

pir.gr/~web_

τε ή θα θέλει παρακολου

_t31/index.h

λετε να ελέγξυθήστε τις

γξετε, θα πραλλαγές πο

ρέπει να φρου έχουν πρ

ροντίζετε ναροκύψει στις

α ις

Μάθημα 3ο: Δημιουργία Στατικών Ιστοσελίδων με το Adobe Dreamweaver

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΙΣΤΟΤΟΠΩΝ ΜΕ ΤΟ DREAMWEAVER

Στο εργαστηριακό αυτό μάθημα θα δημιουργήσετε ένα μικρό σύνολο σελίδων για το δικτυακό τόπο μιας μικρής επιχείρησης παρασκευής «γρήγορου φαγητού» (fast food) με δυνατότητα ηλεκτρονικής παραγγελίας και κατ’ οίκον παράδοσης.

Αρχικά θα ασχοληθείτε με το στήσιμο βασικών στατικών σελίδων, σελίδες δηλαδή οι οποίες, δεν θα περιλαμβάνουν εκτελέσιμο κώδικα και κατά συνέπεια θα είναι οι ίδιες για κάθε χρήστη που τις προσπελαύνει.

Αργότερα, σε επόμενα μαθήματα, θα εισαχθείτε στον τρόπο συγγραφής δυναμικών σελίδων με τη χρήση των στοιχείων PHP (γλώσσα προγραμματισμού) και MySQL (σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων). Κατά τη φάση αυτή, θα ασχοληθείτε περισσότερο με τη διαχείριση της επιχείρησης από την πλευρά των εργαζομένων σε αυτή (διαχειριστικό μέρος), καθώς και με λειτουργίες όπως η παραγγελιοδοσία που γίνεται από την πλευρά των απλών χρηστών-πελατών της επιχείρησης.

Στο ήδη υπάρχον έγγραφο index.html του web site σας αφαιρέστε τα περιεχόμενα της ετικέτας BODY. Γράψτε τον απαραίτητο κώδικα XHTML και εσωτερική δήλωση κώδικα CSS προκειμένου να δημιουργήσετε έναν πίνακα 2x2 με τις ακόλουθες διαστάσεις. Ορίστε την τιμή της ιδιότητας id του πίνακα ως “PageLayout”. Συγχωνεύστε τα δυο κελιά της πρώτης γραμμής ώστε να δημιουργούν ένα μόνο κελί με το συνολικό πλάτος των δυο αρχικών. Αρχικά ο πίνακας δεν θα έχει κάποιο περιεχόμενο.

Λογότυπο id=“SiteLogo” height: 66px – width: 900px Επιλογές id=“SiteOptions” width: 120px

Κύριος όγκος εγγράφου id=“PageBody” width: 780px

Στο διπλό-συγχωνευμένο κελί (SiteLogo), θα τοποθετήσετε το λογότυπο της επιχείρησης στην οποία ανήκει ο δικτυακός τόπος. Το λογότυπο αυτό θα αποτελείται από μια εικόνα, η οποία θα πρέπει να είναι στοιχισμένη στα αριστερά. Όλες τις εικόνες θα τις αποθηκεύετε στον κατάλογο με όνομα images, τον οποίο θα πρέπει να έχετε ήδη δημιουργήσει εντός του βασικού καταλόγου του δικτυακού σας τόπου. Μπορείτε να χρησιμοποιήσετε την εικόνα fastfood_logo.jpg που θα πρέπει ήδη να έχετε στον τοπικό και απομακρυσμένο κατάλογο images από προηγούμενο μάθημα. Αλλάξτε κατάλληλα τις διαστάσεις της εικόνας ώστε να έχει ύψος 65 pixels, κάνοντας χρήση των ιδιοτήτων height και width.

Στο αριστερό κελί του πίνακα (SiteOptions) θα τοποθετήσετε ένα μενού επιλογών υπό τη μορφή κειμένου. Κάθε μια επιλογή θα είναι μια παράγραφος η οποία θα περιέχει και από έναν υπερσύνδεσμο. Οι επιλογές που θα πρέπει να έχετε είναι στη φάση αυτή, οι εξής:

«Αρχική Σελίδα» και θα οδηγεί στη σελίδα index.html.

«Προϊόντα» και θα οδηγεί στη σελίδα construction.html.

«Προσφορές» και θα οδηγεί στη σελίδα construction.html.

«Επικοινωνία» και θα οδηγεί στη σελίδα contact.html.

Το κεντρικό κελί του πίνακα της σελίδας (PageBody), θα πρέπει να περιέχει απαραίτητα τα εξής στοιχεία:

Ένα έξυπνο διαφημιστικό σλόγκαν (σκεφτείτε ένα), στοιχισμένο στο κέντρο του κελιού και τύπου «Επικεφαλίδα 1» (Heading 1).

Μια φωτογραφία προϊόντος της επιχείρησης, στοιχισμένη στο κέντρο. Μπορείτε να χρησιμοποιήσετε την sandwich.jpg που ήδη διαθέτετε στον κατάλογο images.

Έναν υπερσύνδεσμο, ο οποίος θα ανοίγει τη σελίδα επικοινωνίας contact.html.

Η σελίδα contact.html αποτελεί αντίγραφο της σελίδας index.html ως προς τα κελιά SiteLogo και SiteOptions. Το κεντρικό κελί PageBody θα πρέπει να περιέχει ψεύτικες διευθύνσεις, καθώς και ψεύτικα τηλέφωνα επικοινωνίας για δυο καταστήματα της επιχείρησης. Τοποθετήστε αυτά τα στοιχεία σαν δυο διαφορετικές στήλες σε έναν άλλο πίνακα ο οποίος θα είναι στοιχισμένος στο κέντρο.

Η σελίδα construction.html αποτελεί αντίγραφο της σελίδας index.html ως προς τα κελιά SiteLogo και SiteOptions. Το κεντρικό κελί PageBody θα πρέπει να περιέχει μονάχα ένα γραφικό στοιχισμένο στο κέντρο αυτής, το οποίο θα υποδηλώνει ότι η σελίδα είναι υπό κατασκευή. Μπορείτε να χρησιμοποιήσετε την εικόνα construction.gif που ήδη διαθέτετε στον κατάλογο images.

Μάθημα 3ο: Δημιουργία Στατικών Ιστοσελίδων με το Adobe Dreamweaver

ΕΙΣΑΓΩΓΗ ΣΤΗ CSS

Η υποενότητα αυτή θα αφιερωθεί στην προσπάθεια να αναδημιουργήσετε τις σελίδες που δημιουργήσατε στις προηγούμενες σελίδες έτσι ώστε αυτές να αποκτήσουν ομοιόμορφη και κεντρικά (όσο το δυνατόν περισσότερο) ελεγχόμενη εμφάνιση.

Για το σκοπό αυτό, θα κάνετε χρήση της εξωτερικής δήλωσης κώδικα CSS. Πιο αναλυτικά, ακολουθήστε τα παρακάτω βήματα.

Δημιουργήστε ένα νέο κατάλογο κάτω από τον αρχικό κατάλογο αρχείων σας (root directory), εκεί δηλαδή που έχετε αποθηκεύσει και τη σελίδα index.html. Ο κατάλογος αυτός να έχει το όνομα stylesheets. Επιλέξτε τον με το ποντίκι σας πριν προχωρήσετε στο επόμενο βήμα.

Για να δημιουργήσετε ένα νέο έγγραφο CSS στον επιλεγμένο κατάλογο, εκτελείτε την επιλογή New από το μενού File. Από την κατηγορία Basic page επιλέγετε τη δημιουργία μιας βασικής σελίδας τύπου CSS. Δώστε το όνομα fastfood.css στο νέο σας αρχείο.

Ανοίξτε το αρχείο αυτό και προσθέστε τις παρακάτω δοκιμαστικές γραμμές.

/stylesheets/fastfood.css 1: body 2: background‐color: #FFFFFF; 3: font‐family: Verdana, Arial, Helvetica, sans‐serif; 4: font‐size: 12px; 5: line‐height: 16px; 6: margin‐top: 0; 7: margin‐bottom: 0; 8: margin‐left: 0; 9: margin‐right: 0; 10: color: #00000; 11: left: 0; 12: padding‐left: 0; 13: padding‐right: 0; 14: padding‐top: 0; 15: padding‐bottom: 0; 16: 17: 18: a color: #0C18F5; 19: a:visited color: #C2106F; 20: a:hover color: #147327; text‐decoration: underline; 21: 22: img border: 0; 23: 24: table 25: margin‐left: auto; 26: margin‐right: auto; 27: 28: 29: p 30: font‐family: Verdana, Arial, Helvetica, sans‐serif; 31: font‐size: 12px; 32: line‐height: 16px; 33: margin‐top: 0; 34: margin‐bottom: 0; 35: margin‐left: 0; 36: margin‐right: 0; 37: 38: 39: p.center text‐align:center;

40: 41: h1 42: font‐family: Verdana, Arial, Helvetica, sans‐serif; 43: font‐size: 18px; 44: color: #59594B; 45: margin‐top: 8; 46: margin‐bottom: 8; 47: margin‐left: 0; 48: margin‐right: 0; 49: 50: 51: .small_text 52: font‐family: Verdana, Arial, Helvetica, sans‐serif; 53: font‐size: 10px; 54: line‐height: 14px; 55: color: #00000 56:

Αναλύστε τις ιδιότητες που επηρεάζονται από τις παραπάνω γραμμές. Σε τι αντικείμενα XHTML μπορεί να εφαρμόζεται η small_text και πως;

Συνδέστε όλες τις σελίδες που σχεδιάσατε σε προηγούμενα μαθήματα και υποενότητες με το αρχείο CSS που μόλις δημιουργήσατε. Για να γίνει η σύνδεση αυτή πρέπει να αντιγράψετε στην περιοχή HEAD της κάθε σελίδας την ακόλουθη γραμμή:

Εφαρμόστε το style small_text στις διευθύνσεις των καταστημάτων της επιχείρησης.

<p class=”small_text”>Hello World</p>

Υπάρχει σύνδεση/συσχέτιση του small_text με την p και body; Αν ναι, τότε πως;

Συγχρονίστε το site σας με τον απομακρυσμένο server και παρακολουθήστε τις αλλαγές που έχουν προκύψει στις σελίδες σας με τη χρήση ενός web browser.

Χρησιμοποιείστε εξωτερική δήλωση κώδικα CSS προκειμένου να θέσετε ιδιότητες για τα κελιά με id τιμές SiteLogo, SiteOptions και PageBody. Δώστε διαστάσεις στα κελιά αυτά καθώς και στον πίνακα με id τιμή PageLayout. Αφαιρέστε τις διαστάσεις αυτές από τον καθαρό κώδικα XHTML.

Αφού έχετε δει τις σελίδες σας όπως αυτές πλέον έχουν αλλαχθεί από τον κώδικα CSS, αρχίστε να πειραματίζεστε με τις ιδιότητες και τις τιμές τους στο αρχείο fastfood.css.

Για την υπόλοιπη ώρα του εργαστηριακού μαθήματος, συνεχίστε τους πειραματισμούς σας.

Μάθημα 4ο: Εισαγωγή στις δυναμικές σελίδες με PHP (χωρίς Β.Δ.)

ΜΑΘΗΜΑ 4Ο: ΕΙΣΑΓΩΓΗ ΣΤΙΣ ΔΥΝΑΜΙΚΕΣ ΣΕΛΙΔΕΣ ΜΕ PHP (ΧΩΡΙΣ Β.Δ.)

Από το εργαστηριακό αυτό μάθημα και έως το τέλος του εξαμήνου, θα ασχοληθείτε με την ανάπτυξη δυναμικών σελίδων, σελίδων δηλαδή που στην πραγματικότητα είναι εκτελέσιμα προγράμματα (scripts), ενώ αυτό που εμφανίζεται στο Browser του χρήστη είναι το αποτέλεσμα της εκτέλεσης αυτών είτε στο Server (Server-Side execution), είτε στον ίδιο τον υπολογιστή του client (Client-Side execution). Τα προγράμματα αυτά θα γράφονται από εσάς στη γλώσσα PHP (Server-Side scripting language), η οποία θα πρέπει να σας έχει ήδη παρουσιαστεί στη θεωρία του μαθήματος.

ΧΡΗΣΗ SESSIONS ΓΙΑ ΤΗ ΔΙΑΠΙΣΤΕΥΣΗ ΕΙΔΙΚΩΝ ΧΡΗΣΤΩΝ

Το πρώτο αυτό μάθημα πάνω σε πραγματικό εκτελέσιμο κώδικα έχει ως σκοπό να σας εισαγάγει με γρήγορο τρόπο σε αρκετά μεγάλο αριθμό λειτουργιών και δυνατοτήτων της PHP μέσα από ένα αρκετά χρήσιμο παράδειγμα. Θα προσπαθήσετε στη φάση αυτή, και χωρίς τη χρήση βάσεων δεδομένων, να δημιουργήσετε μια απλούστατη υποδομή για τη διαπίστευση μερίδας χρηστών της διαδικτυακής σας εφαρμογής, η οποία έχει ελέγχους για τα δικαιώματα διαχείρισης λειτουργιών αυτής. Για τους σκοπούς του μαθήματος θα χρησιμοποιήσετε μεθόδους αναγνώρισης των χρηστών, οι οποίοι καλούνται να τοποθετήσουν τα στοιχεία σύνδεσης τους σε μια φόρμα δεδομένων και κατόπιν να αποστείλουν αυτά στο Server για την ταυτοποίηση και εξουσιοδότηση πρόσβασης.

Σε καμία περίπτωση το παράδειγμα αυτό δεν προτείνεται για πραγματικές εφαρμογές. Οι λογαριασμοί χρηστών θα πρέπει πάντα να αποθηκεύονται σε πίνακες σχεσιακών βάσεων δεδομένων, ενώ οι κωδικοί των χρηστών θα πρέπει να είναι κρυπτογραφημένοι, κατά προτίμηση με τη χρήση τεχνικών ενός δρόμου (trapdoor ή hashing functions). Μια αρκετά καλή και κοινά αποδεκτή κωδικοποίηση είναι η MD5 (Message Digest 5).

Δημιουργήστε τον κατάλογο admin μέσα στο βασικό σας κατάλογο (/admin).

Θα ξεκινήσετε την εργασία σας σχεδιάζοντας τη σελίδα εισαγωγής του ονόματος και του κωδικού του χρήστη. Για να δημιουργήσετε ένα νέο έγγραφο PHP στον επιλεγμένο κατάλογο, εκτελείτε την επιλογή New από το μενού File. Από την κατηγορία Dynamic page επιλέγετε τη δημιουργία μιας βασικής σελίδας τύπου PHP. Δώστε το όνομα login.php στο νέο σας αρχείο.

/admin/login.php 1: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 5: <title>Σύνδεση Διαπιστευμένου Χρήστη</title> 6: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 7: <style type="text/css"> 8: <!‐‐ 9: tr padding: 2px; 10: 11: td 12: margin: 2px; 13: padding: 2px; 14: border: 1px solid #000000; 15: 16: ‐‐> 17: </style> 18: </head> 19:

20: <body> 21: <?php 22: 23: if (isset($_GET["LoginError"])) 24: switch($_GET["LoginError"]) 25: case "Failed": 26: echo '<p class="red_text">Δώσατε λανθασμένα στοιχεία κατά την προσπάθεια σας

για είσοδο σε σελίδες διαχείρισης, παρακαλώ προσπαθήστε ξανά.</p>'; 27: break; 28: 29: case "Unauthorized": 30: echo '<p class="red_text">Αποσυνδεθήκατε γιατί δεν έχετε τα απαραίτητα

δικαιώματα για πρόσβαση στις αιτείτενες σελίδες.</p>'; 31: break; 32: 33: default: 34: echo '<p class="red_text">Άγνωστη εντολή.</p>'; 35: break; 36: 37: 38: 39: ?> 40: <p> </p> 41: <form name="LoginBox" id="LoginBox" method="post" action="login_check.php"> 42: 43: <table style="margin:auto;"> 44: <tr><td colspan="2"><p>Στοιχεία Χρήστη</p></td></tr> 45: <tr> 46: <td style="text‐align:right"><p>Όνομα:</p></td> 47: <td style="text‐align:left"><input type="text" name="UserName" id="UserName"

maxlength="12" /></td> 48: </tr> 49: <tr> 50: <td style="text‐align:right"><p>Κωδικός:</p></td> 51: <td style="text‐align:left"><input type="password" name="LoginPassword"

id="LoginPassword" size="8" maxlength="8" /></td> 52: </tr> 53: <tr> 54: <td colspan="2" style="text‐align:center"> 55: <p><input type="submit" name="LoginSubmit" id="LoginSubmit" value="Διαπίστευση"

/></p> 56: </td> 57: </tr> 58: </table> 59: 60: </form> 61: </body> 62: </html>

Το αρχείο login.php περιέχει μια φόρμα συμπλήρωσης και αποστολής των στοιχείων σύνδεσης των διαπιστευμένων χρηστών. Όταν ο χρήστης πατήσει το πλήκτρο με τίτλο «Διαπίστευση» τα δεδομένα που συμπληρώθηκαν θα αποσταλούν προς επεξεργασία από το εκτελέσιμο αρχείο login_check.php. Οι απαραίτητοι έλεγχοι επικύρωσης των στοιχείων που εισήγαγε ο χρήστης θα γίνει μέσω κώδικα PHP που θα εκτελεστεί από τον Web Server και βρίσκεται στο αρχείο-παραλήπτη login_check.php.

Στο αρχικό κομμάτι του παραπάνω κώδικα γίνεται έλεγχος μέσω κώδικα PHP αν η σελίδα login.php ζητήθηκε από το χρήστη έχοντας ορισμένη την τύπου GET μεταβλητή LoginError (συνάρτηση isset). Αν αυτό ισχύει, τότε ο κώδικας καλείται να επιλέξει μια λειτουργία η οποία εξαρτάται από την τιμή της μεταβλητής (switch-case). Ουσιαστικά, η μεταβλητή LoginError ελέγχεται από κώδικα που

θα αναλύσετε σε επόμενα σημεία των σημειώσεων, ενώ ο χρήστης δεν έχει κανένα λόγο και δεν θα πρέπει να την ορίζει ο ίδιος. Για λόγους όμως εκπαιδευτικούς, είναι θεμιτό να ελέγξετε τη λειτουργία του κώδικα σας δίνοντας στο Browser το URL της σελίδας login.php?LoginError=Failed και login.php?LoginError=Unauthorized αντίστοιχα. Παρατηρήστε τα αποτελέσματα της εκτέλεσης του κώδικα σας.

Στη συνέχεια, δημιουργήστε στον κατάλογο includes το αρχείο validate_user.php. Δώστε προσοχή στο γεγονός ότι το αρχείο αυτό είναι καθαρός κώδικας PHP και κατά συνέπεια δεν θα πρέπει να περιέχει καθόλου κώδικα XHTML. Μόλις δημιουργήσετε το νέο αρχείο, θα πρέπει να διαγράψετε τα περιεχόμενα του και να τα αντικαταστήσετε με τον ακόλουθο κώδικα.

/fastfood/includes/validate_user.php 1: <?php 2: 3: $USERS[‘panos’] = array("FirstName" => "Παναγιώτης", "LastName" => "Κεντερλής",

"Password" => "zebra123", "Position" => "Administrator"); 4: $USERS[‘xristina’] = array("FirstName" => "Χριστίνα", "LastName" => "Αυγερινού",

"Password" => "tango678", "Position" => "Administrator"); 5: $USERS[‘george’] = array("FirstName" => "Γιώργος", "LastName" => "Θεοδώρου",

"Password" => "foxtrot981", "Position" => "Sales"); 6: 7: 8: function getUser($username, $password) 9: global $USERS; 10: 11: if ((isset( $USERS[ $username ] ))

&& ($USERS[ $username ][‘Password’] == $password)) 12: return $USERS[$username]; 13: else 14: return null; 15: 16: 17: ?>

Το αρχείο αυτό περιέχει τις δηλώσεις για ένα διδιάστατο πίνακα, τον $USERS, όπου κλειδί της μιας διάστασης είναι το όνομα ενός χρήστη με πεζούς χαρακτήρες. Η επόμενη διάσταση διακρίνεται από τέσσερα διαφορετικά στοιχεία-ιδιότητες του κάθε χρήστη.

Η συνάρτηση getUser δέχεται ως ορίσματα το όνομα και τον κωδικό πρόσβασης του χρήστη και αναζητεί αυτό το χρήστη στον πίνακα $USERS, στον οποίο έχει πρόσβαση αφού τον έχει ορίσει ως global. Εφόσον βρει το χρήστη (υπαρκτός υποπίνακας με κλειδί το όνομα αυτού, μέσω της συνάρτησης isset) και οι κωδικοί πρόσβασης ταιριάζουν, επιστρέφει το μονοδιάστατο πίνακα που αφορά το συγκεκριμένο μόνο χρήστη. Αν ο χρήστης δεν υπάρχει ή ο κωδικός πρόσβασης αυτού δεν ταιριάζει με το δοσμένο από τη φόρμα, τότε η συνάρτηση επιστρέφει την ειδική τιμή null. Στο αρχείο αυτό, τροποποιήστε κατάλληλα τους πίνακες ορισμού των χρηστών και των στοιχείων τους, έτσι ώστε να περιέχουν τα στοιχεία των μελών της ομάδας σας.

Κατόπιν, δημιουργήστε το αρχείο functions.php μέσα στον κατάλογο includes. Τοποθετήστε μόνο τον ακόλουθο κώδικα στο αρχείο. Κανένα προηγούμενο περιεχόμενο του αρχείου δεν πρέπει να διατηρηθεί. Μέσα στο αρχείο αυτό ορίζονται δυο συναρτήσεις:

o Η isAdministrativeUser ελέγχει αν οι μεταβλητές συνεδρίας έχουν οριστεί και αν έχουν τις κατάλληλες τιμές ώστε να πιστοποιείται ο χρήστης της σελίδας ως συνδεδεμένος διαχειριστής της εφαρμογής.

o Η forceAdministrativePage κάνει χρήση της isAdministrativeUser και εφόσον ο χρήστης της σελίδας δεν είναι συνδεδεμένος διαχειριστής, τότε σταματάει την εκτέλεση της σελίδας,

ενώ στέλνει μέσω HTTP Headers την κεφαλίδα αυτόματης ανανέωσης της εμφανιζόμενης σελίδας μετά από χρονικό διάστημα 10 δευτερολέπτων. Η σελίδα που θα φορτωθεί μετά την παρέλευση του χρονικού αυτού διαστήματος είναι η σελίδα σύνδεσης διαπιστευμένων χρηστών της εφαρμογής (ανανέωση και άμεση εκτροπή).

/includes/functions.php 1: <?php 2: 3: @session_start(); 4: 5: function isAdministrativeUser() 6: if (isset($_SESSION['Authenticated']) && 7: ($_SESSION["Authenticated"]==true) && 8: ($_SESSION['Position']=="Administrator")) 9: return true; 10: else 11: return false; 12: 13: 14: 15: function forceAdministrativePage() 16: if (!isAdministrativeUser()) 17: header("Content‐Type: text/html; charset=utf‐8"); 18: header("Refresh: 10;url=/~όνομα_ομάδας/admin/login.php"); 19: die("Δεν έχετε δικαιώματα πρόσβασης στη σελίδα αυτή."); 20: 21: 22: 23: ?>

Στον κατάλογο admin δημιουργήστε ένα νέο αρχείο με όνομα login_check.php. Σε αυτό το αρχείο τοποθετήστε τα παρακάτω περιεχόμενα.

/admin/login_check.php 1: <?php 2: 3: if (isset($_POST['UserName']) && isset($_POST['LoginPassword'])) 4: include_once("../includes/validate_user.php"); 5: 6: $username = strtolower(trim($_POST['UserName'])); 7: $password = trim($_POST['LoginPassword']); 8: 9: $AuthUser = getUser($username, $password); 10: 11: if (isset($AuthUser)) 12: @session_start(); 13: $_SESSION['Authenticated'] = true; 14: $_SESSION['UserName'] = $username; 15: $_SESSION['FirstName'] = $AuthUser['FirstName']; 16: $_SESSION['LastName'] = $AuthUser['LastName']; 17: $_SESSION['Position'] = $AuthUser['Position']; 18: 19: header("Location: /~όνομα_ομαδας/admin/index.php"); 20: die(); 21: 22: 23: 24: header("Location: /~όνομα_ομαδας/admin/login.php?LoginError=Failed"); 25: 26: ?>

Το αρχείο αυτό είναι ο αποδέκτης των δεδομένων της φόρμας που ορίσατε στη σελίδα login.php. Όπως παρατηρείτε, στο αρχείο αυτό ενσωματώνεται το αρχείο validate_user.php μέσω της include_once. Σκοπός είναι να επιτραπεί στο εξωτερικό αυτό αρχείο να συνεισφέρει τις συναρτήσεις και τα δεδομένα του, παραμένοντας όμως ανεξάρτητο και έτοιμο προς χρήση από περισσότερες της μιας σελίδες. Για χρηστικούς λόγους, οι μεταβλητές τύπου POST για τα στοιχεία του χρήστη φιλτράρονται με τη χρήση των συναρτήσεων trim (αποκόπτει από τα άκρα μιας συμβολοσειράς τους κενούς, μη εκτυπώσιμους χαρακτήρες) και strtolower (μετατρέπει όλους τους χαρακτήρες μιας συμβολοσειράς σε πεζούς). Οι φιλτραρισμένες αυτές μεταβλητές δίδονται στη συνάρτηση getUser ως ορίσματα. Κατόπιν, γίνεται έλεγχος αν ταυτοποιήθηκε ο χρήστης με τα στοιχεία εισόδου της φόρμας. Αν τα στοιχεία που δόθηκαν από τη φόρμα αντιστοιχούν σε έναν έγκυρο χρήστη, δημιουργείται μια συνεδρία (session_start) και κατόπιν ορίζονται σε αυτή οι επιθυμητές μεταβλητές. Στη συνέχεια ο χρήστης εκτρέπεται προς τη σελίδα admin/index.php όπου θα πρέπει να είναι προσβάσιμη μόνο από διαπιστευμένους χρήστες. Η συνάρτηση die τερματίζει την εκτέλεση του κώδικα. Αν τα στοιχεία χρήστη δεν είναι έγκυρα, τότε ο επίδοξος χρήστης οδηγείται πίσω στη σελίδα της φόρμας σύνδεσης μαζί με την ειδοποίηση της ανεπιτυχούς σύνδεσης.

Δημιουργήστε κατόπιν το αρχείο logout.php, το οποίο θα πρέπει να περιέχει μόνο τις ακόλουθες γραμμές και τίποτα άλλο. Ο εμπεριεχόμενος κώδικας διαγράφει τη συνεδρία και το αντίστοιχο αρχείο αυτής από τον εξυπηρετητή, κατόπιν εξαναγκάζει την ανανέωση της σελίδας της εφαρμογής.

/admin/logout.php 1: <?php 2: session_start(); 3: session_unset(); 4: session_destroy(); 5: setcookie(session_name(), '', time()‐42000, '/'); 6: header("Location: /~όνομα_ομάδας/index.html"); 7: ?>

Δημιουργήστε το ακόλουθο αρχείο left.php και αντικαταστήστε σε όλα τα αρχεία του μαθήματος το περιεχόμενο του κελιού SiteOptions με τον κατάλληλο κώδικα PHP που θα ενσωματώνει το αρχείο left.php εντός του SiteOptions.

/includes/left.php 1: <p><a href="/~όνομα_ομάδας/index.html">Αρχική Σελίδα</a></p>2: <p><a href="/~όνομα_ομάδας/view_categories.php">Προϊόντα</a></p> 3: <p>Προσφορές</p> 4: <p><a href="/~όνομα_ομάδας/contact.html">Επικοινωνία</a></p> 5: <br /> 6: <?php 7: 8: include_once("functions.php"); 9: 10: if (!isAdministrativeUser()) 11: echo '<p><a href="/~όνομα_ομάδας/admin/login.php">Σύνδεση Διαχειριστή</a></p>'; 12: else 13: echo '<p><a href="/~όνομα_ομάδας/admin/index.php">Σελίδα Διαχείρισης</a></p>'; 14: echo '<p><a href="/~όνομα_ομάδας/logout.php">Αποσύνδεση</a></p>'; 15: 16: ?>

Στο αρχείο αυτό γίνεται χρήση κώδικα PHP, ο οποίος μας επιτρέπει να αναγνωρίσει η εφαρμογή αν ο χρήστης της είναι κάποιος πιστοποιημένος διαχειριστής ή απλός επισκέπτης. Στην πρώτη περίπτωση θα δείξει στον διαχειριστή έναν υπερσύνδεσμο προς την κεντρική σελίδα διαχείρισης,

καθώς και έναν υπερσύνδεσμο που οδηγεί στη σελίδα ασφαλούς αποσύνδεσης του χρήστη. Στη δεύτερη περίπτωση, ο επισκέπτης βλέπει μόνο έναν υπερσύνδεσμο που του επιτρέπει να δει τη σελίδα σύνδεσης και να πιστοποιήσει την ταυτότητα του.

Μέσα στον κατάλογο admin, δημιουργήστε ένα αρχείο με όνομα index.php και δώστε του το ακόλουθο περιεχόμενο.

/admin/index.php 1: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 5: <title>Σελίδα διαχείρισης</title> 6: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 7: </head> 8: <body> 9: <p><?php 10: 11: include_once("../includes/functions.php"); 12: 13: if (isAdministrativeUser()) 14: echo "Επιτυχής σύνδεση."; 15: var_dump($_SESSION); // αφαιρέστε μετά την επιβεβαίωση λειτουργίας 16: ?> 17: <h2 style="text‐align:center">Ενέργειες</h2> 18: <p style="text‐align:center"><a

href="/~όνομα_ομάδας/admin/show_products.php">Διαχείριση Καταλόγου Προϊόντων</a></p> 19: <p style="text‐align:center">Διαχείριση Κατηγοριών Προϊόντων</p> 20: <?php 21: else 22: echo "Δεν έχετε δικαίωμα πρόσβασης σε αυτή τη σελίδα."; 23: die(); /* Τερματισμός εκτέλεσης για αποφυγή πρόσβασης σε προστατευμένες σελίδες */ 24: 25: ?></p> 26: <!‐‐ Υπόλοιπη σελίδα ‐‐> 27: </body> 28: </html>

Η συνάρτηση var_dump εκτυπώνει τα περιεχόμενα του πίνακα που δέχεται ως όρισμα σε μορφή η οποία είναι ιδιαίτερα εύχρηστη όταν γίνεται αποσφαλμάτωση κώδικα (debugging). Στο σημείο αυτό χρησιμοποιείται απλά για να επιβεβαιώσετε την εγκαθίδρυση της συνεδρίας ανάμεσα σε Browser και Server.

Στο σημείο αυτό, θα πρέπει να έχετε ετοιμάσει όλες τις παραπάνω σελίδες και να μπορείτε επιτυχώς να δώσετε κάποια έγκυρα στοιχεία χρήστη και να αποκτάτε δικαιώματα διαπιστευμένης πρόσβασης στις σελίδες διαχείρισης της διαδικτυακής σας εφαρμογής. Με χρήση λανθασμένων στοιχείων σύνδεσης, θα πρέπει να εκτρέπεστε πίσω στη σελίδα σύνδεσης, λαμβάνοντας ενημέρωση για την αποτυχημένη προσπάθεια σας.

Με ελάχιστες τροποποιήσεις, ο κώδικας που εισαγάγατε στο αρχείο functions.php θα μπορεί να χρησιμοποιηθεί σε κάθε προστατευμένη σελίδα για να αποτρέπει την εμφάνιση της σε χρήστες που δεν έχουν κάνει επιτυχή διαπίστευση χρήστη. Όπου χρειάζεται να γίνει διαβαθμισμένη πρόσβαση, ο κώδικας αυτός μπορεί να εκτελεί έλεγχο για την τιμή της μεταβλητής $_SESSION[‘Position’] και ανάλογα να επιτρέπει ή να απαγορεύει την πρόσβαση στη σελίδα.

Μάθημα 5ο: Δυναμικές Ιστοσελίδες με Βάσεις Δεδομένων και PHP

ΜΑΘΗΜΑ 5Ο: ΔΥΝΑΜΙΚΕΣ ΙΣΤΟΣΕΛΙΔΕΣ ΜΕ ΒΑΣΕΙΣ ΔΕΔΟΜΕΝΩΝ ΚΑΙ PHP

Από το εργαστηριακό μάθημα αυτό θα ασχοληθείτε με πιο ανεπτυγμένες έννοιες και τεχνικές για τη δικτυακή μας εφαρμογή. Ολόκληρο το περιβάλλον αποθήκευσης και διαχείρισης δεδομένων θα μεταφερθεί από το απλοϊκό παράδειγμα με πίνακες της PHP, σε πίνακες σχεσιακών βάσεων δεδομένων MySQL. Το μοντέλο της επιχείρησης θα αναλυθεί και θα προσπαθήσετε να προτείνετε διαφορετικές υλοποιήσεις καθώς θα αποκτάτε μεγαλύτερη εξοικείωση και εμπειρία με τον προγραμματισμό και τα εργαλεία ανάπτυξης.

Εκτπλδεδ

Εντεμφ

ΥΘΜΙΣΕΙΣ

ΕΝΤΡΙΚΟ Π

τελώντας τολαίσια. Το δομένων, εν

τός της περφανιστεί το

ΗΜΙΟΥΡΓΙ

NAVICAT

ΠΑΡΑΘΥΡ

ο πρόγραμμαριστερό πώ τα περιεχ

ριοχής του διπλανό μεν

Α ΝΕΑΣ Σ

T ΓΙΑ ΣΥΝΔ

ΡΟ ΠΡΟΓΡΑ

α Navicat γιπλαίσιο περχόμενα του δ

αριστερού νού επιλογώ

ΣΥΝΔΕΣΗΣ

ΔΕΣΗ ΜΕ

ΑΜΜΑΤΟΣ

ια πρώτη φοριέχει τις δδεξιού πλαισ

πλαισίου, μών. Από αυτό

Ενεργοποίησ

Δημιουργία ν

Αφαίρεση υπ

Επεξεργασία(απαιτεί να

Άνοιγμα ή εξυπηρετητή

Εκτέλεση τεεπιπέδου επ

Μεταφορές δαρχείο.

Διαχείριση εξυπηρετητή

MYSQL S

ορά, θα εμφδιαφορετικέσίου αλλάζο

με μονό πάό, μπορείτε

ση τερματισμ

νέας σύνδεσ

πάρχουσας σ

α στοιχείωνείναι τερματ

δημιουργίαή.

ερματικής πικοινωνία μ

δεδομένων α

χρηστών ή).

φανιστεί έναές συνδέσειουν σύμφωνα

άτημα του δνα εκτελέσε

μός σύνδεση

σης με εξυπη

σύνδεσης με

ν σύνδεσης τισμένη η σύ

α μιας βάσ

σύνδεση μεμε τον εξυπη

από μια βά

(αν έχετε

α παράθυρο ς με τους α με την επι

δεξιού πλήκετε τις εξής

ης με τον εξυ

ηρετητή.

ε εξυπηρετητ

με τον επύνδεση με το

σης δεδομέ

ε τον εξυπρετητή βάσε

ση δεδομένω

δικαιώμα

σαν το κάτεξυπηρετη

ιλεγόμενη λε

κτρου του πδιαδικασίες

υπηρετητή.

πιλεγμένο εον εξυπηρετ

ένων στον

πηρετητή γσεως δεδομέν

ων σε άλλη

ατα διαχείρ

τωθι με κενάτές βάσεωςειτουργία.

ποντικιού θας:

εξυπηρετητήητή).

επιλεγμένο

για χαμηλούνων.

ή σε τοπικό

ρισης στον

Από το μεννέας σύνδεσεμφανιστεί

νού που παρσης με εξυπτο κάτωθι π

ρουσιάστηκεπηρετητή βπαράθυρο, σ

Μάθη

ε σε προηγοάσεως δεδοστο οποίο θα

ημα 5ο: Δυνα

ούμενη σελίομένων (Newα πρέπει να

αμικές Ιστοσ

ίδα, επιλέγοw Connectioσυμπληρωθ

σελίδες με Βά

ουμε τη λειτn…). Στην οθούν τα απα

άσεις Δεδομ

τουργία δημοθόνη του υαραίτητα στο

μένων και PH

μιουργίας μυπολογιστήοιχεία.

ιας θα

Πεδίο Τιμή Πεδίου Περιγραφή Connection Name: web_xxx Όνομα με το οποίο θα εμφανίζεται η σύνδεση με

τον εξυπηρετητή. Host name/IP address: weblab.teipir.gr FQDN όνομα ή IP διεύθυνση του εξυπηρετητή Port: 3306 TCP πόρτα επικοινωνίας με τον εξυπηρετητή

βάσεως δεδομένων User name: web_xxx Όνομα χρήστη (εργαστηριακή ομάδα) Password: xxxxxxxx Κωδικός χρήστη Save Password: Επιλεγμένο Αποθήκευση κωδικού χρήστη ώστε να μην ζητείται

σε επόμενες εκτελέσεις του προγράμματος ή συνδέσεις με τον εξυπηρετητή

Εφόσον έχετε συμπληρώσει σωστά τα στοιχεία σύνδεσης με τον εξυπηρετητή, η επιλογή του πλήκτρου «Test Connection» θα επιστρέψει ένα διαλογικό παράθυρο επιβεβαίωσης επιτυχούς επικοινωνίας. Σε περίπτωση αποτυχίας σύνδεσης, ελέγξτε τα στοιχεία και ξαναδοκιμάστε.

Στη συνέχεια θα πρέπει να οριστούν περισσότερο εξειδικευμένες ρυθμίσεις από το υπό-στοιχείο «Advanced Settings».

Πεδίο Τιμή Πεδίου Περιγραφή Settings Save Path: Z:\ Κατάλογος αποθήκευσης ρυθμίσεων σύνδεσης (για

εργασία σας εντός του χώρου του εργαστηρίου, το πεδίο αυτό θα πρέπει να έχει την εμφανιζόμενη τιμή)

Encoding: 65001 (UTF-8) Κωδικοσελίδα εμφάνισης/εισαγωγής δεδομένων Use MySQL character set: Μη Επιλεγμένο Επιλογή χρήσης της κωδικοσελίδας χαρακτήρων από τον

εξυπηρετητή (σε περίπτωση προβλήματος εμφάνισης των ελληνικών, η επιλογή αυτή μπορεί να απενεργοποιηθεί)

Use Compression: Επιλεγμένο Ενεργοποιεί τη συμπίεση των δεδομένων που ανταλλάσσονται με τον εξυπηρετητή

Auto Connect Επιλεγμένο Αυτόματη σύνδεση κατά την έναρξη του προγράμματος

ΕΡΓΑΣΙΑ Μ

Με την ολοκεμφανίζονταεμφανίζοντατις αφορούνπεριέχει η πίνακες.

ΕΜΦΆΝΙΣΗ

ΜΕ ΠΙΝΑΚ

κλήρωση τηαι στοιχεία αι οι διαθέσν. Από την βάση δεδομ

Η ΣΤΟΙΧΕΊ

ΚΕΣ

ς παραπάνπαρόμοια μσιμες στο χρυπό-επιλογμένων. Επά

ΊΩΝ ΠΊΝΑ

Μάθη

ω διαδικασίε αυτά του πρήστη βάσειγή Tables εμνω από το

ΑΚΑ

ίας θα πρέππαρακάτω εις δεδομένωφανίζεται σο δεξί πλαί

πει να έχουμεμφανιζόμενν και εντός στο δεξί πλασιο εμφανίζ

με μια νέα σνου παραθύαυτών, επιλαίσιο μια λίζονται λειτο

σύνδεση γιαρου. Στο αρλογές και λίστα με τουουργίες σχε

α την οποία ιστερό πλαίειτουργίες πυς πίνακες πετικές με το

θα ίσιο που που ους

Στιπετην

Μπτωτοσχ

ΦΑΡΜΟΓΗ

ις εμφανιζόριορισμό των εργασία μ

πορείτε να πων πεδίων αυυ φίλτρου. έσεις, θα χρ

ΦΙΛΤΡΟΥ

όμενες εγγραων εγγραφώνε τα φίλτρα

προσθέσετε/υτών από τοΑφού ορίσερειαστεί να

ΣΕ ΠΙΝΑΚ

αφές του πίν με βάση κά, θα πρέπει

/επιλέξετε το φίλτρο, καετε τα πεδία εκτελέσετε

ίνακα δύνατάποιες οριζόνα επιλεχθε

τα πεδία ποαθώς και τιςα εγγραφώνε το φίλτρο

ται να εφαρόμενες παραεί το πλήκτρ

ου θα χρησις τιμές των πν του φίλτρεπιλέγοντα

μοστεί ένα αμέτρους, σρο «Filter Wiz

μοποιηθούνπεδίων πουου, τις επιθας τη φράση

φίλτρο, το οσχετικές με τzard».

, να ορίσετεθα χρησιμοθυμητές τιμη «Click here

οποίο θα επτα πεδία του

ε τον τρόποοποιηθούν σμές και τις e (ctrl+r) to

πιτρέψει τονυ πίνακα. Για

διαχείρισηςσε συγκρίσειςμεταξύ τουςapply» ή να

ς ς ς α

πατήσετε τεφαρμογής

ΔΗΜΙΟΥΡ

Πολλές φορλειτουργίας

Στο παράθυαυτών. Οι πεδίων. Για

Εφόσον έχετλειτουργιώνοποίο θα απ

Αν όλα τα πίνακα που

το συνδυασμτου φίλτρου

ΓΙΑ ΝΕΟΥ

ρές θα χρειας από το κεν

υρο αυτό συμπαράμετροιτις τιμές αυ

τε ολοκληρών «Save» ή «Sποθηκευτεί σ

βήματα έχο δημιουργήσ

μό πλήκτρωνυ.

ΠΙΝΑΚΑ

στεί να δημτρικό παράθ

μπληρώνοντι αφορούν τυτές των πα

ώσει τη σχεδSave As». Ανστη βάση δε

υν διεξαχθεσατε.

Μάθη

ν Control+R

ιουργηθεί ήθυρο του πρ

ται σύμφωνατον τύπο κααραμέτρων π

ίαση του πίν δημιουργούδομένων σα

εί ομαλά, θα

R. Στο κάτω

να επεξεργρογράμματος

α με τα βέληαι τρόπο απρέπει να αν

νακα επιλέγύσατε καινοας με ένα πα

α πρέπει να

πλαίσιο θα

ασθεί ένας ς θα εμφανι

η οδηγιών ταποθήκευσηςνατρέξετε σ

γετε την απούριο πίνακααράθυρο διαλ

α μπορείτε

α εμφανιστο

πίνακας. Μεστεί ένα πα

α πεδία του ς και εμφάνσε σχετικό βι

οθήκευση τοα, τότε θα σαλόγου όπως

να δείτε στ

ούν τα αποτ

ε την επιλογαράθυρο σαν

πίνακα και νισης των διβλίο για τη

υ με τα εικοσας ζητηθεί τς το κάτωθι

το κεντρικό

τελέσματα τ

γή της σχετιν το ακόλουθ

οι παράμετδεδομένων τMySQL.

ονίδια επιλογτο όνομα μεεμφανιζόμεν

παράθυρο

της

κής θο.

τροι των

γής ε το νο.

τον

Απδεδπακει«R

Εφεμφ

ΚΤΕΛΕΣΗ

παραίτητη λδομένων. Η αράθυρο τουιμένου ο χρήun».

φόσον το ερώφανίσει τα α

ΕΡΩΤΗΜΑ

λειτουργία λειτουργία υ προγράμμαήστης εισάγ

ώτημα είναι αποτελέσμα

ΑΤΩΝ ΠΡΟ

αποτελεί ηαυτή ενεργατος. Στην οει το ερώτη

τύπου SELECατα του ερωτ

ΟΣ ΤΗ ΒΑΣ

η δυνατότητοποιείται εποθόνη θα εμφμα SQL προς

CT και έχει τήματος, όπ

ΣΗ ΔΕΔΟΜ

τα δοκιμαστπιλέγοντας φανιστεί ένας τη βάση, τ

συνταχθεί σπως στο παρ

ΜΕΝΩΝ

τικής εκτέλτο εικονίδιοα παράθυροτο οποίο εκτ

σωστά, το πράθυρο που

εσης ερωτηο λειτουργία όμοιο με τοτελεί πατών

παράθυρο θαεμφανίζετα

ημάτων πρας «Query» σο ακόλουθο. ντας το σχετ

α αλλάξει μαι ακόλουθα.

ος τη βάσηστο κεντρικόΣτο πλαίσιοτικό πλήκτρο

μορφή και θα.

η ό ο ο

Για ερωτήμπαράθυρο θερωτήματα

Προσοχή: Γιυποδιαστολ

ματα που δθα εμφανισμπορούν να

Για να γίνεταλή), τα σχετι

δεν επιστρέστεί για να α συνταχθού

αι επιτυχώςικά πεδία θα

Μάθη

έφουν εγγραενημερώσειν εφόσον τε

ς η αποθήκεα πρέπει να

αφές (π.χ. ι το χρήστηρματίζοντα

ευση αριθμηείναι τύπου

INSERT, UPDη για το απι με τον ελλη

ητικών τιμώνυ decimal.

DATE, REPLAποτέλεσμα τηνικό χαρακ

ών με δεκαδικ

ACE) ένα μιτης εκτέλεσκτήρα του ερ

ικό μέρος (ψ

ικρό διαλογσης. Πολλαπρωτηματικού

ψηφία μετά

γικό πλά ύ.

την

ΔΗΕΠ

ΠρπρΒά

Γιακα(prσχ

Ta1: 2: 3: 4: 5:

ΠρΛαΜιchaπρνεί

ΗΜΙΟΥΡΓΙΠΙΧΕΙΡΗΣΗ

ροκειμένου νροϊόντα (δηλση Δεδομένω

α την εφαρμτηγορίες τωroducts). Κάθετίζεται με

Χρησιμκώδικα

Όλα τ(αυτόμ

ble "categoriCREATE `id` `titl PRIMA) ENGIN

ροσοχή: Οι Ελατινικούς χαια ασφαλής

har/varchar, ωροέρχονται αίτερα των ερ

Α ΠΙΝΑΚΗΣ

να παρουσιάλαδή τα στοων.

μογή αυτή έων προϊόντωθε προϊόν μτην κατηγορ

μοποιώνταςα SQL. Και τα

τα πρωταρχματης αρίθμ

es" DDL TABLE `catint(10) un

le` varcharARY KEY (`NE=MyISAM D

Ελληνικοί χαραρακτήρες κας εκτίμηση αως το διπλάαπό παλαιόρωτημάτων

ΚΩΝ ΣΤΗ

άζεται δυναιχεία που α

χει επιλεχθεων (categoriμπορεί να ανρία (πεδίο ca

το Navicat,α δύο σας δ

χικά κλειδιησης).

tegories` nsigned NOTr(60) colla`id`) DEFAULT CHA

ρακτήρες σται τα σύμβοαπαιτεί τονάσιο των χαρότερη σχεδίαDDL.

ΒΑΣΗ Δ

μικά ο τιμοκαφορούν σε α

εί ένα απλόes), ενώ έννήκει σε μιαategories.id μ

δημιουργήσίνονται παρ

ά (Primary

( T NULL autate utf8_g

ARSET=utf8

την κωδικοσεολα (αριθμοίν καθορισμόρακτήρων ποίαση με διαφ

ΕΔΟΜΕΝΩ

κατάλογος ταυτά) να απ

ό σχήμα, σύνας άλλος πα μόνο κατημε πεδίο pro

στε τους πίρακάτω.

keys) είναι

o_incremeneneral_ci

COLLATE=u

σελίδα UTF8 αί, σημεία στίό του μήκουπου είναι επιφορετική κω

ΩΝ ΜΕ Κ

των προϊόντποθηκευθούν

μφωνα με τπίνακας περηγορία και φoducts.cat_id

ίνακες αυτο

ι τύπου int

nt, NOT NULL,

utf8_bin;

αποθηκεύοντίξης, κλπ), τυς των δεδοιθυμητό να αωδικοσελίδα

ΑΤΗΓΟΡΙΕ

των της επιν με κάποιο

το οποίο έναριέχει τα στφέρει το χαρ).

ούς είτε γρα

t(10) unsign

νται ως 2 bytτα οποία απδομένων (bytαποθηκεύει. α (ISO-8859-

ΕΣ ΚΑΙ Π

ιχείρησης, θο τρόπο σε μ

ας πίνακας στοιχεία τωνρακτηριστικό

αφικά, είτε

ned και aut

ytes, σε αντίθποθηκεύονταytes) ενός πεΤα νείτερα

-7). Χρησιμο

ΠΡΟΪΟΝΤΑ

α πρέπει ταμια Σχεσιακή

περιέχει τιςν προϊόντωνό κλειδί που

με τη χρήση

to incremen

ίθεση με τουςαι ως 1 byteπεδίου τύπουστις εικόνεςοποιείστε τα

ς ν υ

ς e. υ ς α

Table "produ1: CREAT2: `id3: `ca4: `ti5: `pr6: `de7: `av8: PRI9: ) ENG

Η τιψηφ

Δώσκαι

Προπίνα

ucts" DDL TE TABLE `pd` int(10) at_id` int(itle` varchrice` decimescription`vailable` eIMARY KEY GINE=MyISAM

μή του προϊφία.

στε ιδιαίτερηεισάγει τις δ

κειμένου ναακες με δοκι

products` unsigned N(10) unsighar(60) comal NOT NU` text chaenum('True(`id`) M DEFAULT C

ϊόντος που ο

η προσοχή σδυνατές τιμέ

α μπορέσετειμαστικά δεδ

Μάθη

( NOT NULL aned NOT NUllate utf8LL, racter set','False')

CHARSET=ut

ορίζεται μέσ

στη δημιουργές του (False

ε να εργαστδομένα σχετ

uto_incremULL, 8_general_c

utf8 NOT NOT NULL

f8 COLLATE

σα στο πεδίο

γία του πεδe, True) μέσω

τείτε ολοκληικά με το αν

ci NOT NULL

NULL, default 'T

E=utf8_bin;

ο products.p

δίου productsω του πλήκτ

ηρωμένα στντικείμενο.

True',

rice είναι τύ

s.available, τρου με τις τρ

η συνέχεια,

ύπου decima

το οποίο είνρεις τελείες

γεμίστε το

l με 2 δεκαδ

αι τύπου enς.

υς δύο αυτο

δικά

ούς

ΔΗΜΙΟΥΡΓΙΑ ΚΛΑΣΗΣ ΓΙΑ ΤΗΝ ΕΥΚΟΛΟΤΕΡΗ ΔΙΑΧΕΙΡΙΣΗ ΤΗΣ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ

Για λόγους ευκολίας και εξοικείωσης με τις δυνατότητες της PHP, θα δημιουργήσετε μια κλάση η οποία θα σας βοηθήσει ιδιαίτερα στη συγγραφή κώδικα για τις εφαρμογές του εργαστηρίου όπου γίνεται χρήση βάσεων δεδομένων. Μπορείτε να επεκτείνετε την κλάση αυτή όπως εσείς επιθυμείτε καλύτερα προκειμένου να δώσετε περισσότερες λειτουργίες και δυνατότητες. Το κομμάτι αυτό της εργαστηριακής άσκησης καλείται να σας διδάξει και απλή σχεδίαση κλάσεων και χρήση αντικειμένων με την PHP. Για τους σκοπούς του εργαστηρίου:

Δημιουργήστε τον κατάλογο includes στο βασικό κατάλογο της εφαρμογής σας.

Μέσα στον κατάλογο αυτό δημιουργήστε ένα νέο αρχείο με όνομα mydbclass.php. Στο αρχείο αυτό διαγράψτε το προηγούμενο περιεχόμενο του και τοποθετήστε τον κώδικα που ακολουθεί.

/includes/mydbclass.php 1: <?php 2: 3: class myDB 4: 5: private $dbUser = ''; 6: private $dbPassword = ''; 7: private $dbHost = ''; 8: private $dbName = ''; 9: private $dbLink = false; 10: 11: public function __construct($host, $user, $password) 12: $this‐>dbUser=$user; 13: $this‐>dbPassword=$password; 14: $this‐>dbHost=$host; 15: $this‐>Connect(); 16: 17: 18: 19: public function Connect() 20: $this‐>dbLink = mysql_connect($this‐>dbHost, $this‐>dbUser, $this‐

>dbPassword); 21: 22: if ($this‐>dbLink==false) 23: die('Could not connect: ' . mysql_error()); 24: 25: 26: 27: public function SelectDB($dbname) 28: $this‐>dbName=$dbname; 29: mysql_select_db($this‐>dbName) 30: or die('Could not select database: '.$this‐>dbName); 31: 32: 33: 34: public function Close() 35: mysql_close($this‐>dbLink); 36: 37: 38: 39: public function PrintQueryResults($query) 40: $result = $this‐>MakeQuery($query); 41: 42: echo "\n<table>\n"; 43:

44: echo "<thead>\n"; 45: echo "<tr>\n"; 46: echo "<th><strong>Α/Α</strong></th>\n"; 47: $fields = $this‐>GetFieldNames($result); 48: 49: foreach ($fields as $field_name) 50: echo "<th><strong>$field_name</strong></th>\n"; 51: 52: 53: echo "</tr>\n"; 54: echo "</thead>\n"; 55: 56: echo "<tbody>\n"; 57: $i=1; 58: 59: while ($record = $this‐>GetRecord($result)) 60: echo "<tr>\n"; 61: echo "<td valign=\"top\"><strong>$i.</strong></td>\n"; 62: 63: foreach ($record as $field_value) 64: echo "<td valign=\"top\">$field_value</td>\n"; 65: 66: 67: echo "</tr>\n"; 68: $i++; 69: 70: 71: echo "</tbody>\n"; 72: echo "</table>\n"; 73: 74: 75: 76: public function MakeQuery($query) 77: $result = mysql_query($query, $this‐>dbLink) or die("Query '$query' failed:

". mysql_error()); 78: return $result; 79: 80: 81: 82: public function GetRecord($result) 83: return mysql_fetch_array($result, MYSQL_ASSOC); 84: 85: 86: 87: public function GetFieldNames($result) 88: $fields = $this‐>GetFieldCount($result); 89: for ($i = 0; $i < $fields; $i++) 90: $FieldNames[]=mysql_field_name($result, $i); 91: 92: return $FieldNames; 93: 94: 95: 96: public function GetFieldCount($result) 97: return mysql_num_fields($result); 98: 99: 100: 101: public function GetRecordCount($result) 102: return mysql_num_rows($result); 103: 104:

105: 106: public function GetLastInsertID() 107: return mysql_insert_id($this‐>dbLink); 108: 109: 110: 111: public function GetAffectedRows() 112: return mysql_affected_rows($this‐>dbLink); 113: 114: 115: 116: public function GetResultAsArray($result) 117: while ($record = $this‐>GetRecord($result)) 118: $data[]=$record; 119: 120: return $data; 121: 122: 123: 124: ?>

Ακολούθως, δημιουργήστε το αρχείο mydbclass-test.php στον κατάλογο includes για να ελέγξετε τις δυνατότητες της κλάσης που μόλις γράψατε.

/includes/mydbclass-test.php 1: <?php 2: 3: include_once("mydbclass.php"); 4: 5: $db = new myDB('weblab.teipir.gr', 'web_mon11', 'xxxxx'); 6: $db‐>SelectDB('web_mon11'); 7: 8: $query="SELECT * FROM products"; 9: $db‐>PrintQueryResults($query); 10: 11: $query="SELECT * FROM products WHERE id=1"; 12: $result=$db‐>MakeQuery($query); 13: 14: $record=$db‐>GetResultAsArray($result); 15: $record=$db‐>GetRecord($result); 16: echo $record['product_name']; 17: 18: $query="SELECT * FROM products"; 19: $result=$db‐>MakeQuery($query); 20: $records=$db‐>GetResultAsArray($result); 21: 22: print_r($records); 23: echo $records[2]['product_name']; 24: 25: $db‐>Close(); 26: 27: ?>

Παρατηρήστε τα αποτελέσματα και πειραματιστείτε με τις δυνατότητες της κλάσης.

Προσοχή, δεν μπορείτε να εκτελέσετε δυο ή περισσότερα ερωτήματα στη βάση δεδομένων ταυτόχρονα (εξαιρούνται τα φωλιασμένα ερωτήματα). Κάθε κλήση της μεθόδου MakeQuery θα πρέπει να περιέχει ένα και μόνο ερώτημα.

Ακολουθούν τα περιεχόμενα του αρχείου dbconnect.php, το οποίο θα χρησιμοποιείται από όλες τις σελίδες σας που θα χρειάζονται πρόσβαση στη βάση δεδομένων. Ο ακόλουθος κώδικας δημιουργεί τη σύνδεση με τη βάση δεδομένων και επιλέγει τη βάση που αντιστοιχεί στο χρήστη της εργαστηριακής σας ομάδας.

/includes/ dbconnect.php 1: <?php 2: 3: include_once("mydbclass.php"); 4: 5: $db = new myDB('weblab.teipir.gr', 'web_mon11', 'xxxxx'); 6: $db‐>SelectDB('web_mon11'); 7: 8: ?>

Στη συνέχεια, κάθε κομμάτι κώδικα που επιθυμεί να εκτελέσει κάποια λειτουργία πάνω στους πίνακες της βάσης δεδομένων, θα πρέπει να χρησιμοποιεί τις μεθόδους-συναρτήσεις της κλάσης myDB.

ΣΕΛΙΔΕΣ ΓΙΑ ΌΛΟΥΣ ΤΟΥΣ ΧΡΗΣΤΕΣ

ΕΜΦΑΝΙΣΗ ΤΙΜΟΚΑΤΑΛΟΓΟΥ ΠΡΟΪΟΝΤΩΝ ΤΑΞΙΝΟΜΗΜΕΝΟΥ ΚΑΤΑ ΚΑΤΗΓΟΡΙΕΣ

Βασικός στόχος μιας επιχείρησης είναι να προωθήσει τα προϊόντα της. Ένας τρόπος να το επιτύχει είναι να κάνει γνωστό τον κατάλογο των προϊόντων της καθώς και τις τιμές αυτών. Θα δημιουργήσετε μια έκδοση του τιμοκαταλόγου όπου η εμφάνιση του απαιτεί δύο επίπεδα. Στο πρώτο επίπεδο, μια σελίδα εμφανίζει τις κατηγορίες των προϊόντων, όπου καλείται να επιλέξει μια ο επισκέπτης για να δει τα προϊόντα που ανήκουν σε αυτή στη σελίδα του δευτέρου επιπέδου.

Ακολουθεί ο κώδικας της σελίδας εμφάνισης των κατηγοριών προϊόντων (αρχείο view_categories.php).

/view_categories.php 1: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 5: <title>Κατηγορίες Προϊόντων</title> 6: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 7: </head> 8: 9: <body> 10: <h1>Κατάλογος Προϊόντων</h1> 11: <p>Παρακαλείτε επιλέξτε μια από τις παρακάτω κατηγορίες για να δείτε τα σχετιζόμενα

προϊόντα.</p> 12: <ol> 13: <?php 14: 15: require_once("includes/dbconnect.php"); 16: 17: $query = "SELECT * FROM categories ORDER BY title DESC"; 18: $result = $db‐>MakeQuery($query); 19: $categories = $db‐>GetResultAsArray($result); 20: 21: foreach ($categories as $category) 22: $query = "SELECT COUNT(*) AS ProductCount FROM products WHERE

cat_id=".$category['id']; 23: $result = $db‐>MakeQuery($query); 24: $record = $db‐>GetRecord($result); 25: 26: echo '<li><a

href="view_products.php?cat_id='.$category['id'].'">'.$category['title'].'</a> ('.$record['ProductCount'].')</li>';

27: 28: 29: ?> 30: </ol> 31: </body> 32: </html>

Τροποποιήστε τον παραπάνω κώδικα ώστε να παράγει το ίδιο αποτέλεσμα με την εκτέλεση ενός μόνο ερωτήματος στη βάση δεδομένων. Στη συνέχεια δίδεται ο κώδικας που εμφανίζει τα προϊόντα που ανήκουν στην κατηγορία που επιλέχθηκε από τον επισκέπτη του δικτυακού τόπου (αρχείο view_products.php).

/view_products.php

1: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">

2: <html xmlns="http://www.w3.org/1999/xhtml"> 3: <head> 4: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 5: <title>Προϊόντα Κατηγορίας</title> 6: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 7: </head> 8: 9: <body> 10: <table style="margin:auto"> 11: <tr> 12: <td style="border‐bottom:#990000 2px solid; text‐align:center">α/α</td> 13: <td style="border‐bottom:#990000 2px solid;">Ονομασία ‐ Περιγραφή</td> 14: <td style="border‐bottom:#990000 2px solid; text‐align:right">Τιμή</td> 15: </tr> 16: <?php 17: 18: require_once("includes/dbconnect.php"); 19: 20: $catid=$_GET['cat_id'] + 0; 21: 22: $query="SELECT * FROM products WHERE cat_id=’$catid’ ORDER BY title DESC"; 23: $result=$db‐>MakeQuery($query); 24: 25: if ($db‐>GetRecordCount($result)) 26: $products=$db‐>GetResultAsArray($result); 27: 28: $i=1; 29: 30: foreach ($products as $product) 31: echo '<tr style="margin:4px;">'; 32: echo '<td style="text‐align:center; vertical‐align:top; font‐size:110%; font‐

weight:bold;">'.$i.'.</td>'; 33: echo '<td valign="top">'; 34: echo '<p><strong>'.$product['title'].'</strong></p>'; 35: echo '<p class="small_text"><i>'.$product['description'].'</i></p>';

36: echo '</td>'; 37: echo '<td style="text‐align:right; vertical‐align:top;

color:#000099;"><strong>'; 38: if ($product['available']=='True') 39: echo sprintf("%01.2f", $product['price']); 40: else 41: echo '‐‐'; 42: echo ' €</strong></td>'; 43: echo '</tr>'; 44: $i++; 45: 46: else 47: echo '<tr><td colspan="4" style="text‐align:center">Δεν βρέθηκαν προϊόντα για την

κατηγορία αυτή</td></tr>'; 48: 49: 50: ?> 51: </table> 52: </body> 53: </html>

ΣΕΛΙΔΕΣ ΔΙΑΧΕΙΡΙΣΗΣ ΕΦΑΡΜΟΓΗΣ

ΠΛΗΡΗΣ ΕΜΦΑΝΙΣΗ ΤΙΜΟΚΑΤΑΛΟΓΟΥ ΚΑΙ ΕΝΕΡΓΕΙΩΝ

Βασική ανάγκη της εφαρμογής της επιχείρησης είναι η διαχείριση του τιμοκαταλόγου της. Αρχικά επιδιώκουμε να φτιάξουμε μια μονοεπίπεδη παρουσίαση του τιμοκαταλόγου (αρχείο show_products.php). Το αρχείο αυτό είναι ουσιαστικά η ένωση των αρχείων view_categories.php και view_products.php. Χρησιμοποιείτε μια φόρμα και μια λίστα στην οποία εμφανίζουμε τις κατηγορίες των προϊόντων. Όταν επιλέγει ο διαχειριστής μια κατηγορία διαφορετική από την ήδη επιλεγμένη, ενεργοποιείται το γεγονός onchange και εκτελείται ο κώδικας που συνδέεται με αυτό. Στη συγκεκριμένη περίπτωση, ο κώδικας document.getElementById(‘catselform’).submit(); εξαναγκάζει τον browser να αποστείλει τα δεδομένα της φόρμας στην ίδια σελίδα (δείτε action της φόρμας). Τα δεδομένα αυτά είναι ο κωδικός της επιλεγμένης κατηγορίας και χρησιμοποιείται αρχικά για να επιλέξει την κατηγορία στη λίστα (selected=”selected”) και κατόπιν να δείξει τα προϊόντα που αντιστοιχούν στην κατηγορία αυτή. Ο λόγος που επιλέγουμε την κατηγορία στη λίστα είναι για να εμφανίζεται επιλεγμένη και έτσι να δρα ως τίτλος, καθώς και για να μην υπάρχει περίπτωση να ενεργοποιηθεί το onchange για την ήδη εμφανιζόμενη κατηγορία. Το εξ ορισμού εμφανιζόμενο option της λίστας, έχει σημασία μόνο κατά την πρώτη εμφάνιση της σελίδας, όπου και δεν έχει γίνει ακόμα επιλογή κατηγορίας. Κατόπιν μπορεί να χρησιμοποιηθεί απλά για να εξαφανίσει τα προϊόντα από τη σελίδα καθώς δεν υπάρχει κατηγορία με κωδικό 0. Παρατηρήστε ότι η φόρμα αυτή δεν χρειάζεται κάποιο κουμπί υποβολής (submit), καθώς η λειτουργία αυτή γίνεται αυτόματα, προσδίδοντας την αίσθηση της «ζωντανής» σελίδας στο διαχειριστή.

/admin/show_products.php 1: <?php 2: include_once("../includes/functions.php"); 3: ForceAdministrativePage(); 4: ?> 5: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 6: <html xmlns="http://www.w3.org/1999/xhtml"> 7: <head> 8: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 9: <title>Προϊόντα Κατηγορίας</title> 10: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 11: </head> 12: 13: <body> 14: <?php require_once("../includes/dbconnect.php"); ?> 15: <form action="<?=$_SERVER['PHP_SELF']?>" method="get" name="catselform"

id="catselform" enctype="application/x‐www‐form‐urlencoded"> 16: <h2 style="text‐align:center">Κατηγορίες</h2> 17: <p style="text‐align:center" class="small_text">( <a href="index.php"

target="mainFrame">Κεντρική Σελίδα Διαχείρισης</a> )</p> 18: <p> </p> 19: <p style="text‐align:center"> 20: <select name="catid" id="catid"

onchange="document.getElementById('catselform').submit();"> 21: <option value="0">Επιλέξτε μια κατηγορία</option> 22: <?php 23: 24: $query="SELECT * FROM categories ORDER BY title DESC"; 25: $result=$db‐>MakeQuery($query); 26: $categories=$db‐>GetResultAsArray($result); 27: 28: if (isset($_GET['catid'])) 29: $catid=$_GET['catid'] + 0; 30: else 31: $catid=0; 32:

33: foreach ($categories as $category) 34: $query="SELECT COUNT(*) AS ProductCount FROM products WHERE

cat_id='".$category['id']. "'"; 35: $result=$db‐>MakeQuery($query); 36: $record=$db‐>GetRecord($result); 37: 38: if ($category['id']==$catid) 39: $selection='selected="selected"'; 40: else 41: $selection=''; 42: 43: echo '<option value="'.$category['id'].'" '.$selection.'>'.$category['title'].'

('.$record['ProductCount'].')</option>'; 44: 45: 46: ?> 47: </select> 48: </p> 49: </form> 50: <?php 51: 52: if ($catid!=0) 53: ?> 54: <p> </p> 55: <h2 style="text‐align:center">Προϊόντα</h2> 56: <p style="text‐align:center" class="small_text">( <a

href="product_edit.php?catid=<?=$catid?>">Προσθήκη Νέου Προϊόντος</a> )</p> 57: <p> </p> 58: <table style="margin:auto"> 59: <tr> 60: <td style="border‐bottom:#990000 2px solid; text‐align:center">α/α</td> 61: <td style="border‐bottom:#990000 2px solid;">Ονομασία ‐ Περιγραφή</td> 62: <td style="border‐bottom:#990000 2px solid; text‐align:right">Τιμή</td> 63: <td style="border‐bottom:#990000 2px solid; text‐align:right">Ενέργειες</td> 64: </tr> 65: <?php 66: 67: $query="SELECT * FROM products WHERE cat_id='$catid' ORDER BY title DESC"; 68: $result=$db‐>MakeQuery($query); 69: 70: if ($db‐>GetRecordCount($result)) 71: $products=$db‐>GetResultAsArray($result); 72: 73: $i=1; 74: 75: foreach ($products as $product) 76: echo '<tr style="margin:4px;">'; 77: echo '<td style="text‐align:center; vertical‐align:top; font‐size:110%;

font‐weight:bold;">'.$i.'.</td>'; 78: echo '<td>'; 79: echo '<p><strong>'.$product['title'].'</strong></p>'; 80: echo '<p class="small_text"><i>'.$product['description'].'</i></p>';

81: echo '</td>'; 82: echo '<td style="text‐align:right; vertical‐align:top; color:#000099;

padding‐left:10px; padding‐right:10px"><strong>'; 83: if ($product['available']=='True') 84: echo sprintf("%01.2f", $product['price']); 85: else 86: echo '‐‐'; 87: echo ' €</strong></td>'; 88: echo '<td style="padding‐left:10px"><a

href="product_edit.php?catid='.$catid.'&pid='.$product['id'].'">Επεξεργασία</a>';89: echo ' ‐ <a

href="product_db_action.php?action=delete&catid='.$catid.'&pid='.$product['id'].'" onclick="return confirmDelete();">Διαγραφή</a></td>';

90: echo '</tr>'; 91: $i++; 92: 93: else 94: echo '<tr><td colspan="4" style="text‐align:center">Δεν βρέθηκαν προϊόντα για

την κατηγορία αυτή</td></tr>'; 95: 96: 97: ?> 98: </table> 99: <? 100: 101: ?> 102: <script type="text/javascript" language="javascript"> 103: 104: function confirmDelete() 105: return confirm('ΠΡΟΣΟΧΗ!!!\n\n Είσαστε σίγουρος/η ότι θέλετε να διαγράψετε αυτό το

προϊόν;'); 106: 107: 108: </script> 109: </body> 110: </html>

Παρατηρήστε στις γραμμές 88-89 την ύπαρξη δυο υπερσυνδέσμων που οδηγούν σε δυο διαφορετικές σελίδες με παραμέτρους που προκύπτουν από τα στοιχεία του εμφανιζόμενου εκείνη τη στιγμή προϊόντος. Ο πρώτος υπερσύνδεσμος οδηγεί στη σελίδα επεξεργασίας των στοιχείων του προϊόντος, ενώ ο δεύτερος στη σελίδα διαγραφής του προϊόντος. Για να αποφύγουμε όσο το δυνατόν περισσότερο μια λανθασμένη διαγραφή, τοποθετείτε μέσα στο event onclick του δεύτερου υπερσυνδέσμου την αναφορά σε εκτέλεση του κώδικα JavaScript που βρίσκεται στις γραμμές 104-106. Η συνάρτηση confirm εμφανίζει ένα παράθυρο διαλόγου και ζητάει από το χρήστη να επιλέξει αν όντως θέλει να διαγράψει το προϊόν (επιστρεφόμενη τιμή true) ή να ακυρώσει τη διαγραφή (επιστρεφόμενη τιμή false). Μη ξεχάσετε να βάλετε τη δήλωση return στο event onclick, ειδάλλως η επιστρεφόμενη από τη συνάρτηση τιμή δεν θα αξιολογηθεί, άρα ότι και να επιλέξει ο διαχειριστής, ο browser θα εκτελεί το άλμα στη σελίδα διαγραφής του προϊόντος.

ΕΙΣΑΓΩΓΗ, ΕΠΕΞΕΡΓΑΣΙΑ ΚΑΙ ΔΙΑΓΡΑΦΗ ΠΡΟΪΟΝΤΟΣ

ΣΕΛΙΔΑ ΦΟΡΜΑΣ ΕΙΣΑΓΩΓΗΣ ΝΕΟΥ ΠΡΟΪΟΝΤΟΣ ΚΑΙ ΕΠΕΞΕΡΓΑΣΙΑΣ ΣΤΟΙΧΕΙΩΝ ΥΠΑΡΧΟΝΤΟΣ ΠΡΟΪΟΝΤΟΣ

Δημιουργήστε τη νέα σελίδα product_edit.php στον κατάλογο admin και αντιγράψτε σε αυτή τον παρακάτω κώδικα. Στις γραμμές 9-39 ορίζουμε βασικές μεταβλητές της φόρμας δεδομένων ώστε να μπορεί να εργαστεί σε δυο διαφορετικές καταστάσεις, που επιλέγονται με βάση την ύπαρξη η μη της μεταβλητής pid τύπου GET. Η πρώτη κατάσταση της επεξεργασίας υπάρχοντος προϊόντος γεμίζει τις μεταβλητές με τα στοιχεία του προϊόντος, ενώ παράλληλα ορίζει και ειδικές μεταβλητές όπως η $available_checked (HTML κωδικοποίηση της επιλογής ή όχι ενός checkbox) και η $tbgcolor (χρώμα φόντου του πίνακα της φόρμας). Η δεύτερη κατάσταση της δημιουργίας ενός νέου προϊόντος απλά θεωρεί ως μηδενικού μήκους τις συμβολοσειρές των μεταβλητών που γεμίζουν τη φόρμα. Επιπλέον, ορίζεται ως τιμή της $pid (κωδικός προϊόντος) η ειδική για τον κώδικα μας τιμή “new”. Αυτή η τιμή θα χρησιμοποιηθεί ως διακόπτης ροής εκτέλεσης σε επόμενη σελίδα για να επιλέξει μεταξύ UPDATE ή INSERT στη βάση δεδομένων. Ανάλογα σε ποια κατάσταση λειτουργίας της σελίδας βρισκόμαστε, το φόντο του πίνακα της φόρμας, ο τίτλος της σελίδας και του πίνακα μας πληροφορούν σχετικά.

/admin/ product_edit.php 1: <?php 2: 3: require_once("../includes/functions.php"); 4: 5: ForceAdministrativePage(); 6: 7: require_once("../includes/dbconnect.php"); 8: 9: if(isset($_GET['pid'])) 10: $page_title="Επεξεργασία Υπάρχοντος Προϊόντος"; 11: $query='SELECT * FROM products where id="'.$_GET['pid'].'"'; 12: $result=$db‐>MakeQuery($query); 13: $products=$db‐>GetResultAsArray($result); 14: $product=$products[0]; 15: 16: $product_title=$product['title']; 17: $product_description=$product['description']; 18: $pid=$product['id']; 19: $catid=$product['cat_id']; 20: $price=$product['price']; 21: $availability=$product['available']; 22: if ($availability=="True") 23: $available_checked='checked="checked"'; 24: else 25: $available_checked=''; 26: $tbgcolor="#CCFF99"; 27: else 28: $page_title="Εισαγωγή Νέου Προϊόντος"; 29: $product_title=''; 30: $product_description=''; 31: $pid='new'; 32: $catid=0; 33: $price=''; 34: $available_checked=''; 35: $tbgcolor="#FFFFFF"; 36: 37: 38: ?><!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">

39: <html xmlns="http://www.w3.org/1999/xhtml">40: <head> 41: <meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" /> 42: <title><?=$page_title?></title> 43: <link href="/~όνομα_ομάδας/stylesheets/fastfood.css" rel="stylesheet" type="text/css"

/> 44: <script type="text/javascript" language="javascript"> 45: 46: function ValidateForm() 47: if ((document.getElementById('product_title').value=="") 48: ||(document.getElementById('price').value=="")) 49: alert("ΠΡΟΣΟΧΗ!\n\nΔεν έχετε συμπληρώσει τα απαραίτητα πεδία."); 50: return false; 51: else 52: return true; 53: 54: </script> 55: <style type="text/css"> 56: <!‐‐ 57: tr padding: 2px; 58: 59: td 60: margin: 2px; 61: padding: 2px; 62: border: 1px solid #000000; 63: 64: ‐‐> 65: </style> 66: </head> 67: 68: <body> 69: <h1 style="text‐align:center"><?=$page_title?></h1> 70: <p style="text‐align:center" class="small_text">( <a href="index.php">Κεντρική Σελίδα

Διαχείρισης</a> )</p> 71: <p> </p> 72: <form action="product_db_action.php" method="post" name="LoginBox" id="LoginBox"

onsubmit="return ValidateForm()"> 73: <input type="hidden" name="pid" value="<?=$pid?>" /> 74: <table style="text‐align:center; border:thin solid #000000; background‐

color:<?=$tbgcolor?>;"> 75: 76: <tr bgcolor="#FFCC00"><td colspan="2"><p style="text‐align:center"><strong>Στοιχεία

Προϊόντος</strong></p></td></tr> 77: 78: <tr> 79: <td style="text‐align:right"><p>Όνομα:</p></td> 80: <td><input type="text" name="product_title" id="product_title"

value="<?=$product_title?>" maxlength="20"/></td> 81: </tr> 82: 83: <tr> 84: <td style="text‐align:right"><p>Κατηγορία:</p></td> 85: <td style="text‐align:left"><select name="catid"> 86: <?php 87: 88: $query='SELECT * FROM categories'; 89: $result=$db‐>MakeQuery($query); 90: $categories=$db‐>GetResultAsArray($result); 91: 92: foreach ($categories as $category) 93: if ($category['id']==$catid) 94: $category_selected='selected="selected"';

95: else 96: $category_selected=''; 97: echo '<option value="'.$category["id"].'" '.$category_selected.'>'.

$category["title"].'</option>'; 98: 99: 100: ?> 101: </select></td> 102: </tr> 103: 104: <tr> 105: <td style="text‐align:right"><p>Τιμη:</p></td> 106: <td><input type="text" name="price" id="price" value="<?=$price?>" maxlength="4"

size="4" /></td> 107: </tr> 108: 109: <tr> 110: <td style="text‐align:right"><p>Περιγραφή:</p></td> 111: <td><textarea rows="5" cols="15" name="description"

id="description"><?=$product_description?></textarea></td> 112: </tr> 113: 114: <tr> 115: <td style="text‐align:right"><p> </p></td> 116: <td style="text‐align:left"><input type="checkbox" name="available" id="available"

<?=$available_checked?> /> Διαθέσιμο</td> 117: </tr> 118: 119: <tr> 120: <td colspan="2" style="text‐align:center"> 121: <p><input type="submit" name="LoginSubmit" value="Ενημέρωση" /> 122: <input type="reset" name="rbutton" value="Καθαρισμός" /> 123: </p></td> 124: </tr> 125: </table> 126: </form> 127: </body> 128: </html>

ΣΕΛΙΔΑ ΕΙΣΑΓΩΓΗΣ, ΑΠΟΘΗΚΕΥΣΗΣ ΑΛΛΑΓΩΝ ΚΑΙ ΔΙΑΓΡΑΦΗΣ ΠΡΟΪΟΝΤΟΣ ΑΠΟ ΤΗ ΒΑΣΗ ΔΕΔΟΜΕΝΩΝ

Δημιουργήστε τη νέα σελίδα product_db_action.php στον κατάλογο admin και αντιγράψτε σε αυτή τον παρακάτω κώδικα. Η σελίδα αυτή έχει επίσης πολλαπλό ρόλο. Από τη μια πλευρά δέχεται δεδομένα τύπου POST από την προηγούμενη σελίδα με σκοπό να αποθηκεύσει αλλαγές σε ένα υπάρχον προϊόν ή να εισάγει ένα καινούριο. Από την άλλη πλευρά, δέχεται δεδομένα τύπου GET για να εκτελέσει τη διαγραφή του προϊόντος που ορίζει η μεταβλητή pid. Η GET μεταβλητή action χρησιμοποιείται για να επιλέξει ανάμεσα στους ρόλους αυτούς (διαγραφή ή εισαγωγή/ενημέρωση). Εντός του ρόλου της εισαγωγής/ενημέρωσης ενός προϊόντος, η POST μεταβλητή pid χρησιμοποιείται ως επιλογέας λειτουργίας. Για λόγους ευκολίας στη συγγραφή του κώδικα, λαμβάνουμε τις μεταβλητές pid και catid μέσω του υπερκαθολικού πίνακα $_REQUEST, χωρίς να χρειάζεται δηλαδή να ελέγξουμε αν παρελήφθησαν μέσω GET ή POST. Κατόπιν όμως, για λόγους ασφαλείας, φροντίζουμε να λαμβάνουμε τα δεδομένα από την αναμενόμενη προκαθορισμένη για αυτά πηγή.

/admin/product_db_action.php 1: <?php 2: 3: require_once("../includes/functions.php"); 4: ForceAdministrativePage(); 5: 6: $pid=$_REQUEST['pid']; 7: $catid=$_REQUEST['catid']; 8: 9: if (isset($_GET['action'])&&($_GET['action']=="delete")) 10: $query="DELETE FROM products WHERE id='".($pid+0)."'"; 11: else 12: if (isset($_POST['available'])) 13: $available='True'; 14: else 15: $available='False'; 16: 17: $product_title=$_POST['product_title']; 18: 19: $price=str_replace(",",".",trim($_POST['price'])); 20: $price=$price+0; 21: $description=$_POST['description']; 22: 23: if ($_POST[pid]=="new") 24: $query="INSERT INTO products(title, cat_id, price, description, available)

values('$product_title', $catid, '$price', '$description', '$available')"; 25: else 26: $query="UPDATE products SET title='$product_title', price='$price',

cat_id='$catid', description='$description', available='$available' WHERE id='".($pid+0). "'";

27: 28: 29: 30: require_once("../includes/dbconnect.php"); 31: $result=$db‐>MakeQuery($query); 32: 33: header("Location: show_products.php?catid=$catid"); 34: 35: ?>

Για λόγους χρηστικότητας και αντιμετώπισης πιθανών σφαλμάτων, η τιμή του προϊόντος δεν αποθηκεύεται απευθείας στη βάση δεδομένων. Αντιθέτως, λαμβάνει τις εξής επεξεργασίες:

1. Trim, αφαιρούνται τα επιπλέον κενά στην αρχή και το τέλος της συμβολοσειράς. 2. String Replace, αντικαθιστάται ο χαρακτήρας του κόμματος με αυτόν της τελείας, μιας και οι

δεκαδικοί αριθμοί αποθηκεύονται με την τελεία ως σημείο υποδιαστολής. 3. Εξαναγκασμένη μετατροπή σε αριθμό με προσθήκη του αριθμού 0. Ο αριθμός ο ίδιος δεν

επηρεάζεται, όμως πιθανοί αλφαβητικοί χαρακτήρες που ακολουθούν τον αριθμό θα αφαιρούνται, π.χ. η τιμή “2,34αβ” θα μετατραπεί σε 2.34, ενώ η “a3,14” θα μετατραπεί σε 0.

Σημειώσεις Εργαστηρίου ΑΔΕ

Documents

Transcript of Σημειώσεις Εργαστηρίου ΑΔΕ

Σημειώσεις Στατιστικήςmsc.actuar.aegean.gr/notes/statistics_with_calc_and_R...Σημειώσεις Στατιστικής + εφαρμογή με το LibreOffice

Διαπίστευση Εργαστηρίου κατά ISOIEC 15189 ή Πιστοποίηση Εργαστηρίου κατά ISO 9001_Αγερίδης

O ρόλος του Εργαστηρίου Τροφίμων στην διερεύνηση των τροφιμογενών επιδημιών

odysseia.cti.grodysseia.cti.gr/project_docs/archive/Odysseas_deliverable… · Web view1.3.6 Δημιουργία πειραματικού σχολικού εργαστηρίου

Σημειώσεις μαθήματος

σημειώσεις χημείας 1

Σημειώσεις εργαστηρίου (Flash MX 2004 Professional)

σημειώσεις SPSS

Επαναληπτικές Ασκήσεις Εργαστηρίου ... Questions.pdf · 2011-08-31 · Επαναληπτικές Ασκήσεις Εργαστηρίου 2 ¨Ορθότητα,

Σημειώσεις -Εθνικισμός

Σημειώσεις στρατηγικής

Παρουσίαση Εργαστηρίου Περιβαλλοντικής Χημείας και Βιοχημικών Διεργασιών

Οδηγός οργάνων και συσκευών Εργαστηρίου Φ.Ε.

Θερμοχημεία Σημειώσεις

HEYWOOD σημειώσεις

[ΑΔΕ Αντιφασιστική Δημοκρατική Ενωσις] - Πρακτικά της δίκης της Στενής Αυτοάμυνας ή ΟΠΛΑ Θεσσαλονίκης

σημειώσεις κρυπτογραφίας

σημειώσεις θεωρίας 1

Σημειώσεις ΤΣΥΠ

Αποστείρωση και Σκεύη εργαστηρίου