HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849

HTML-PHP Καμπέρης Άρης Α.Μ. 763Zaher Owda Α.Μ. 849

HTML εισαγωγή (1/2) • HyperText Markup Language είναι η γλώσσα προσδιορισμού ιστοσελίδων. • “Στατικές ιστοσελίδες” – το περιεχόμενο τους δεν αλλάζει σε απόκριση των εισερχόμενων δεδομένων του χρήστη. • Hypertext Transfer Protocol (HTTP) – είναι το κύριο πρωτόκολλο επικοινωνίας των web browsers και των web servers.

HTML εισαγωγή(2/2) • Ο webbrowser αναζητά μία ιστοσελίδα από τον web server στελνοντάς του ένα ΗΤΤP αίτημα αναζήτησης. • Ο web server απαντά στέλνοντας μία HTTP απάντηση πίσω στο browser.

HTML structure • Υπάρχουν 3 tags που περιγράφουν την δομή της σελίδας γενικότερα • <HTML> Δηλώνει ότι το αρχείο είναι τύπου html • <HEAD> Εισαγωγή του τίτλου και άλλων ιδοτήτων • <BODY> Το σώμα της html σελίδας μας Π.χ. <html> <head> <title>My first HTML Document</title> </head> <body> … </body> </html>

META tags • Οι <META> tags είναι οδηγίες της γλώσσας HTML οι οποίες περιέχουν πληροφορία για την πληροφορία • Κάθε ΜΕΤΑ tag αποτελείται από ένα ζεύγος NAME / CONTENT • Παραδείγματα • <META NAME="description" CONTENT="university of ioannina - greece"> • <META NAME="keywords" CONTENT=“university, greece,ioannina,students"> • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">

FRAMESET tag(1/2) • Χωρίζουν μια ιστοσελίδα σε τμήματα και κάθε τμήμα μπoρεί να εμφανίσει διαφορετική σελίδα • Με τα γνωρίσματα cols και rows δημιουργούμε στήλες και γραμμές για κάθε frameset. • <FRAMESET ROWS="20%,*"><FRAME NAME="UPPER" SRC="title.html"><FRAMESET COLS="25%,*"><FRAME NAME="FRAME1" SRC="contents.html"><FRAME NAME="FRAME2" SRC=“main.html"></FRAMESET></FRAMESET>

FRAMESET tag(2/2)

<FORM> tag • Ορίζει μία φόρμα για εισαγωγή δεδομένων από τον χρήστη. Μπορεί να περιέχει πεδία, κουμπιά, drop-down menus κ.ά. <form action="formaction.jsp" method="post” name="myform“> • METHOD: Ορίζει τον τρόπο αποστολής των δεδομένων • ACTION: Ορίζει το script το οποίο θα επεξεργαστεί τα δεδομένα. • NAME: Ορίζει το όνομα της φόρμας για επεξεργασία από τα script

<BODY> tag • Eπιλογή background (χρώμα ή εικόνα) <body bgcolor=”#009900”> <body background=”c:/images/εικόνα.jpg”> • Χρώμα του κειμένου που θα εμφανίζεται στην σελίδα <body text=”#009933”> • Χρώμα συνδέσμων πριν και μετά την επίσκεψη τους <body link=”#990000” vlink=”#993300”> • Περιθώρια από πάνω και αριστερά <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Links and Images • Δημιουργία συνδέσμου σε ένα άλλο έγγραφοή άλλη σελίδα <a href=“http://www.cs.uoi.gr”>home</a> • Εισαγωγή εικόνας από αρχείο <img src="c:\Τα έγγραφά μου\myphoto.bmp" width="300" height="300" border="1"> *υποστηρίζονται είναι αρχεία της μορφής .jpg, .gif, png ή .bmp

ΛΙΣΤΕΣ • Αριθμημένες Λίστες: Δημιουργούνται με το <οl>…</οl> • Λίστες με κουκίδες: Δημιουργούνται με το <ul>…</ul> • Οι γραμμές της λίστας ορίζονται με το tag <li>…</li> • Mε την ιδιότητα TYPE καθορίζουν το είδοςαρίθμησης ή κουκίδας που επιθυμείται <ol> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> </ul> </οl>

ΠΙΝΑΚΕΣ(1/2) • Το tag με το οποίο εισάγεται ένας πίνακας είναι το <table> ... </table> • Οι γραμμές εισάγονται με το <tr> ... </tr> • Οι στήλες με το <td> ... </td> • Οι επικεφαλίδες με</th> ... <th> • Με τις παραμέτρους bgcolorκαι backgroundμπορούμε να καθορίσουμε background για τον πίνακα αλλά και για κάθε κελί του πίνακα ξεχωριστά

ΠΙΝΑΚΕΣ(2/2) <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <tdbackground="desert.jpg">Second</td> <td>Row</td> </tr> </table>

HTML μορφοποίηση(1/4) • Μέγεθος γραμμάτων <font size="5"> μεγάλη γραμματοσειρά </font> <H1> Heading 1-6 </H1> • Χρώμα γραμμάτων <font color="red">εδώ γράφουμε το κείμενο</font> • Bold, italic, underlined <b>εδώ γράφουμε το κείμενο</b> <i>εδώ γράφουμε το κείμενο</i> <u>εδώ γράφουμε το κείμενο</u>

HTML μορφοποίηση(2/4) • Γραμματοσειρά <font face="Arial,Helvetica" size=+4</font> • Δημιουργία παραγράφων <p> … </p> • Αλλαγή γραμμής <br>χωρίς </br> • Εκθέτες και δείκτες <sup> superscript </sup> <sub> subscript</sub> <p> 3 <sup>2</sup>=9</p> <p> H <sub>2</sub>O=νερό </p>

HTML μορφοποίηση(3/4) • Στοίχιση <div align="center"> center </div> <div align="right"> right </div> <div align="left"> left </div> • Για πηγαίο κώδικα χρησιμοποιούμε <pre> for(i=0; i<0; i++){ x[i]=i*2; y[i]=I; } </pre>

HTML μορφοποίηση(4/4) • Διαχωριστική οριζόντια γραμμή <hr> • Σχόλια

PHP (Personal Home Page Hypertext preprocessor)

PHP (Πλεονεκτήματα) • Εκτελείται στην πλευρά του WebServer. • Δυνατότητα δημιουργίας δυναμικές ιστοσελίδες. • Ιστοσελίδες που δίνουν στο χρήστη την δυνατότητα αλληλεπίδρασης με το περιεχόμενό τους. • Παράγει HTML κώδικα. • Εύκολη διασύνδεση με βάσεις δεδομένων π.χ. MySQL. • Object Oriented προγραμματισμού (Classes και κληρονομικότητα) και συναρτήσεις. • Τρέχουσα έκδοση η 5.2.5 .

PHP tags (ετικέτες) • Ο κώδικας της PHP είναι χωρισμένος σε ετικέτες, που έχουν αρχή και τέλος και σας επιτρέπουν να μπείτε σε PHP mode : • XML Style : <?php ... ?> • Short Style : <? ... ?> • Script Style : <SCRIPT LANGUAGE=‘php’>... </SCRIPT> Σχόλια: /* … */ // … # …

Τύποι Δεδομένων • Έχει παρόμοιους τύπους δεδομένων με τις κλασικές γλώσσες προγραμματισμού. • Χωρίζονται σε υπέρ-καθολικές, σταθερές, καθολικές, τοπικές μεταβλητές. • Οι μεταβλητές δηλώνονται με το σύμβολο $ : • Integer – αριθμούς. • Float – πραγματικούς αριθμούς. • String – συμβολοσειρές χαρακτήρων. • Boolean – μεταβλητές true false. • Array – αποθήκευση πολλαπλών στοιχείων του ίδιου τύπου. • Resource- κρατούν αναφορές για ανοιχτά αρχεία, συνδέσεις με βάσεις δεδομένων ή καμβάδες εικόνων κ.λ.π. • Object – αντικείμενο κλάσης

Υπερ-καθολικές Μεταβλητές • $_GLOBALS- Πίνακας καθολικών μεταβλητών. • $_SERVER– Oρισμός την θέση των include files. • $_COOKIE- Πίνακας από μεταβλητές cookie. • $_FILES- Πίνακας μεταβλητών που σχετίζονται με αποστολές αρχείων. • $_REQUEST- Πίνακας την είσοδου του χρήστη συμπεριλαμβανομένων των $_GET, $_POST και $_COOKIE. • $_SESSION- Πίνακας μεταβλητών συνόδου.

Δομές Ελέγχου στην ΡΗΡ • if (condition) expression1; else expression2; • If (condition) expression1; elseif (condition) expression2; else expression3; • Switch ($var) case 1 : expression; break; case 2 : expression; break; default : expression; break;

Παραδείγματα Παραδείγματα μεταβλητών : • $text = "Hello world!!! “; • $my_id = 34 Παραδείγματαif statement : • if ($my_id == 4 ) {echo “Hello world!! ";} • else {echo “Wrong ID!!";} Παραδείγματαloop : $i = 100;$sum = 0;while ($current < $i) {++$sum;echo "$sum<br>";}

Παραδείγματα • Παραδείγματαforeach <?php$arr = array(1, 2, 3, 4);foreach ($arr as &$value) { $value = $value * 2;} ?> // $arr is now array(2, 4, 6, 8)

Δυναμική αλλαγή είκονας • <?php $pics = array(‘mobile1.jpg’,’mobile2.jpg’,mobile3.jpg’); Shuffle ($pics); //αναδιάταξη εικόνων ?> …. <?php echo ’<img src= “ ‘; echo $pics[1]; ?>

Αποστολή mail • <?php $to = ‘css08323@example.com';$subject = 'the subject';$message = 'hello bro'; mail($to, $subject, $message);?> • Τα στοιχεία μπορούν να ληφθούν απο την φόρμα εισόδου αφού πρώτα γίνει ελεγχος ορθότητας του κάθε πεδίου. • Υπάρχουν διάφορες συναρτήσεις : explode(), implode()….

Κλάσεις και κληρονομικότητα(παράδειγμα) class Humans{ public function __construct($name) { /*...*/} public function eat() { /*...*/ } public function sleep() { /*...*/ } public function wakeup() { /*...*/ } } class Women extends Humans{ public function giveBirth() { /*...*/ } } class Men extends Humans{ public function snore() { /*...*/} }

ΡΗΡ script • <form> : Μία φόρμα χρησιμοποιείται για εισαγωγή δεδομένων από τον χρήστη, περιέχει πεδία, κουμπιά, drop-down menus κ.τ.λ • Έχει δύο attributes: • METHOD: Ένας browser έχει την δυνατότητα να στέλνει δεδομένα σε ένα script μέσω κάποιων μεθόδων • GET : τα δεδομένα πακετάρονται και στέλνονται στο τέλος του URL για το οποίο προορίζονται, έτσι γίνεται στην Google.com (πίνακα μεταβλητών $_GET) • POST: τα δεδομένα στέλνονται σαν μια ανεξάρτητη ροή δεδομένων. (πίνακα μεταβλητών $_POST ) • ACTION: Ορίζει το script το οποίο θα επεξεργαστεί τα δεδομένα

ΡΗΡ script • <INPUT>Tag: Καθορίζει την περιοχή στην οποία ο χρήστης εισάγει δεδομένα, εχει τους παρακάτω παραμέτρους: • Type: Ορίζει το είδος της περιοχής που αναφέρεται το input. • text για πεδία κειμένου. • Radiobutton για στρογγυλά κουμπιά. • submit για κουμπιά υποβολής φόρμας. • password για εισαγωγή συνθηματικού. • Name: Δίνει όνομα στο πεδίο εισόδου των δεδομένων ώστε να αναγνωρίζεται από το script που θα κάνει την επεξεργασία • Value: Ορίζει την τιμή του πεδίου π.χ. όνομα του κουμπιού.

HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849