Client Server Web 1 Requests Client Responses Server

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

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

Απλό Παράδειγμα <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859 -7“ /> <TITLE>Παράδειγμα σελίδας HTML </TITLE> </HEAD> <BODY> <H 1>Πολύ Απλό Παράδειγμα</H 1> <P>1η Παράγραφος</P> <P>2η Παράγραφος</P> </BODY> </HTML> 10

Λίστες (1) <ul> <li>item 1</li> <li>item 2</li> </ul> <ul type="circle"> <li>item 1</li> <li>item 2</li> </ul> <ul type="square"> <li>item 1</li> <li>item 2</li> </ul> 13

Εικόνες • Tag <img> • <IMG SRC=“διαδρομή_προς_την_εικόνα ” HEIGHT=“ 100” WIDTH=“ 50” align=“left” alt=“text” /> Δείτε • http: //www. w 3 schools. com/html_images. asp 17

Πίνακες <table width="100%" border="2" cellpadding="12" cellspacing="5" bordercolor="#ECE 9 D 8"> <tr> <td rowspan="2">hello</td> <td width="20%">  </td> <td>  </td> </tr> <tr> <td>hello</td> <td>  </td> </tr> <tr> <td>  </td> <td colspan="2">hello</td> </tr> </table> 19

Πλαίσια <FRAMESET COLS="*, *"> <FRAME SRC="Cell 1. html" NAME="left"> <FRAME SRC="Cell 2. html" NAME="right"> </FRAMESET> <NOFRAMES> <P>This web browser does not support frames. </P> </NOFRAMES> 22

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

Φόρμες - Input text: n <input type=“text name=“my. Text. Box” value=“test text”> password: n <input type=“password” name=“my. Passwd”> checkbox: n <input type=“checkbox” name=“my. Check. Box” value=“yes”> radio: n <input type=“radio” name=“my. Radio” value=“yes”> <input type=“radio” name=“my. Radio” value=“no”> 26

Φόρμες – Input (2) button: n <input type=“button” name=“My. Button” value=“click me”> submit: n <input type=“submit” name=“My. Submit” value=“submit”> reset: n <input type=“submit” name=“My. Reset” value=“reset”> 27

Φόρμες – Άλλα στοιχεία textarea: n <textarea name=“my. Textarea”> Αυτό είναι ένα πεδίο Textarea</textarea> select: n <select name=“my. Select”> <option value=“ 1”>option 1</option> <option value=“ 2”>option 2</option> </select> select (πολλαπλές τιμές): n <select name=“my. Multi. Select” multiple> <option value=“ 1”>multiple option 1</option> <option value=“ 2”>multiple option 2</option> <option value=“ 3”>multiple option 3</option> </select> 28

Παράδειγμα <form name="my. Form" action="my. Action. php" method="get"> Textbox: <input type="text" name="my. Text. Box" value="test text"> Password: <input type="password" name="my. Passwd"> <input type="checkbox" name="my. Check. Box" value="yes" checked>Η τιμή θα γίνει "yes". <input type="radio" name="my. Radio" value="yes" checked>Επέλεξε yes <input type="radio" name="my. Radio" value="no">Επέλεξε no <input type="button" name="My. Button" value="click me"> <input type="submit" name="My. Submit" value="submit"> <input type="submit" name="My. Reset" value="reset"> <textarea name="my. Textarea">Αυτό είναι ένα πεδίο Textarea</textarea> <select name="my. Select"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select name="my. Multi. Select" multiple> <option value="1">multiple option 1</option> <option value="2">multiple option 2</option> <option value="3" selected>multiple option 3</option> </select> </form> 29

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

Παραδείγματα <input type=“checkbox” name=“my. Check. Box” value=“yes” onchange=“alert(‘άλλαξε η κατάστασή μου!!!’)”> <input type=“text name=“my. Text. Box” value=“test text” onchange=“if(this. value != ‘hello’) alert(this. value)”> 40

Παραδείγματα (3) <script language="javascript"> function submit () { var price = parse. Int(document. testform. price_txt. Box. value); if ( price < 0 ) { retval = false; } retrun retval; } </script> … <form name="testform" onsubmit="return submit()"> Price: <input type="text" name="price_txt. Box" /> <input type="submit“ /> </form> 42

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

PHP - Variables <? php $bool = TRUE; // a boolean $str = "foo"; // a string $int = 12; // an integer echo gettype($bool); // prints out "boolean" echo gettype($str); // prints out "string" // If this is an integer, increment it by four if (is_int($int)) { $int += 4; } // If $bool is a string, print it out // (does not print out anything) if (is_string($bool)) { echo "String: $bool"; } ? > 48

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

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

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

PHP - Functions <? php function square ($num) { return $num * $num; } echo square (4); // outputs '16'. ? > 52

Παράδειγμα <form action="welcome. php" method="get"> Name: <input type="text" name="name"> Age: <input type="text" name="age"> <input type="submit"> </form> Welcome <? php echo $_GET["name"]; ? > You are <? php echo $_GET["age"]; ? > years old! Καταχώρηση Φόρμας 54

Χρήσιμοι Σύνδεσμοι http: //www. w 3 schools. com/html/default. asp http: //www. w 3 schools. com/js/default. asp http: //www. w 3 schools. com/php/default. asp http: //www. php. net/manual/en/ 58

Εργαλεία • bundle install, Apache, PHP etc • Appserv • http: //www. appservnetwork. com/index. php • WAMP • http: //www. wampserver. com/en/ • XAMP • http: //www. apachefriends. org/en/xampp. html • NVU (html editor) • http: //nvudev. com/index. php • PHP Text DB API • http: //www. c-worker. ch/txtdbapi/index_eng. php 59