HTML, JavaScript & PHP

Download Report

Transcript HTML, JavaScript & PHP 

Τεχνολογίες Web
Απαραίτητες γνώσεις για την
υλοποίηση της άσκησης
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
Client – Server μοντέλο στο Web
(2) – “3 TIER MODEL”
Requests
Client
Responses
Αναπαράσταση
Δεδομένων
Data
Server
Επεξεργασία
Data
Warehouse
Αποθήκευση
• Data Warehouse: Κάποιο DBMS (SQL, XML κλπ)
• Ο server πριν απαντήσει, χρειάζεται να πάρει δεδομένα από
το DMBS, να τα επεξεργαστεί, τα μορφοποιεί κατάλληλα και
στέλνει στο client
3
Περιεχόμενα
HTML
Javascript
PHP
4
HTML
• HyperText Markup Language
• Είναι η γλώσσα που καταλαβαίνουν οι
web browsers για την αναπαράσταση
των δεδομένων
• Βασικό χαρακτηριστικό: η διασύνδεση
με αλλά HTML έγγραφα
5
HTML
Κείμενο 1
Κείμενο 2
Κείμενο 4
Κείμενο 3
Κείμενο 5
6
HTML – Σύνταξη
• Βασικό δομικό στοιχείο η ετικέτα (tag)
• Κάθε διακριτικό της HTML περικλείεται σε <>
• Τα περισσότερα διακριτικά οµαδοποιούνται σε ζεύγη.
Το πρώτο δείχνει την αρχή και το δεύτερο το τέλος
επίδρασης του συγκεκριµένου διακριτικού.
• Πχ <HTML>…</HTML>, <IMG />
Σχόλια:
<!-- Αυτό είναι ένα σχόλιο σε HTML -->
7
Δομή σελίδας HTML
<HTML>
<HEAD>
<TITLE>Ο τίτλος του κειμένου
</TITLE>
</HEAD>
<BODY>
Το κυρίως κείμενο
</BODY>
</HTML>
8
Tag Attributes
• Δίνουμε επιπλέον χαρακτηριστικά σε
κάποιο tag.
• Το γράφουμε μέσα στον ορισμό του tag
• < … όνομα_attribute=“τιμή” …>
• Πχ <BODY bgcolor="#FFFFFF" >…
9
Απλό Παράδειγμα
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html;charset=iso-8859-7“ />
<TITLE>Παράδειγμα σελίδας HTML </TITLE>
</HEAD>
<BODY>
<H1>Πολύ Απλό Παράδειγμα</H1>
<P>1η Παράγραφος</P>
<P>2η Παράγραφος</P>
</BODY>
</HTML>
10
Παρουσίαση
Τίτλος
σελίδας
11
Tags Μορφοποίησης
<h1>Επικεφαλίδα 1</h1>
<h2>Επικεφαλίδα 2</h2>
<h3>Επικεφαλίδα 3</h3>
<h4>Επικεφαλίδα 4</h4>
<h5>Επικεφαλίδα 5</h5>
<h6>Επικεφαλίδα 6</h6>
<b>Έντονα γράμματα</b>
<i>Πλάγια γράμματα</i>
<u>Υπογραμμισμένα
γράμματα</u>
<br>Αλλαγή γραμμής
<p>Νέα Παράγραφος</p>
<center>Στοίχιση στο κέντρο
της σελίδας</center>
12
Λίστες (1)
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<ul type="circle">
<li>item1</li>
<li>item2</li>
</ul>
<ul type="square">
<li>item1</li>
<li>item2</li>
</ul>
13
Λίστες (2)
<ol>
<li>Λίστα με </li>
<li>Αρίθμηση</li>
</ol>
<dl>
<dt> Πρώτο θέµα
<dd> Ορισµός 1ου θέµατος
<dt> Δεύτερο θέµα
<dd> Ορισµός 2ου θέµατος
</dl>
14
Links – Το tag <a> (1)
<A HREF=“adrress”>Κείμενο</Α>
• adrress:
•
Αναφορά σε αρχείο στο τοπικό σύστημα
• Σχετικά: “./index.html”, “../pics/hello.html”
• Απόλυτα: “/var/www/mysite/index.html”,
“C:\program files\...” (BAD PRACTICE)
•
URL
• “http://www.di.uoa.gr/”
15
Links – Το tag <a> (2)
• Θέλω να πάω σε συγκεκριμένο σημείο μέσα
στο έγγραφο
• Ονομάζω το σημείο
•
<a name=“titles” >Titles</a>
• Φτιάχνω το link προς το σημείο
•
•
<a href=“#titles”>Πηγαίνετε στους Τίτλους</a>
<a href=“htpp://mysite.gr/conv.html#titles”>…
• Attribute target: το link θα ανοίξει σε νέο
παράθυρο
•
<a … target="_blank" >
16
Εικόνες
• Tag <img>
• <IMG
SRC=“διαδρομή_προς_την_εικόνα
” HEIGHT=“100” WIDTH=“50”
align=“left” alt=“text” />
Δείτε
• http://www.w3schools.com/html/html_images.asp
17
Πίνακες
Πίνακας:

<TABLE border=‘1’>
<TR> <!– νέα γραμμή -->
<TD> Περιεχόμενα κελιού 1,1 </TD>
<TD> Περιεχόμενα κελιού 1,2 </TD>
</TR> <!- κλείσιμο γραμμής -->
<TR>
<TD> Περιεχόμενα κελιού 2,1 </TD>
<TD> Περιεχόμενα κελιού 2,2 </TD>
</TR>
</TABLE>
Δείτε
http://www.w3schools.com/html/html_tables.asp
18
Πίνακες
<table width="100%" border="2"
cellpadding="12"
cellspacing="5"
bordercolor="#ECE9D8">
<tr>
<td rowspan="2">hello</td>
<td width="20%">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>hello</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">hello</td>
</tr>
</table>
19
Πίνακες
Όλο αυτό έχει φτιαχτεί με πίνακες
20
Άλλα στοιχεία της HTML
• Οριζόντια γραμμή:

<hr>
• Στοίχιση κειμένου:

<pre>Το κείμενο θα εμφανιστεί όπως
είναι στοιχισμένο.</pre>
• Ειδικοί χαρακτήρες:





>
<
&
“
(κενό)
&gt;
&lt;
&amp;
&quot;
&nbsp;
21
Πλαίσια
<FRAMESET COLS="*,*">
<FRAME SRC="Cell1.html" NAME="left">
<FRAME SRC="Cell2.html" NAME="right">
</FRAMESET>
<NOFRAMES>
<P>This web browser does not support
frames.</P>
</NOFRAMES>
22
Παράδειγμα
23
Φόρμες
Χρησιμοποιούνται για την αποστολή πληροφορίας
από το client προς τον server.
Tag <form> (και </form>)
Attributes


Action: ορίζει σε ποια σελίδα θέλουμε να στείλουμε τα
δεδομένα
Method: ποια μέθοδο του πρωτοκόλλου HTTP θα
χρησιμοποιήσουμε για την αποστολή των δεδομένων - GET
ή POST (θα αναλυθεί παρακάτω)
 <form action="myAction.php" method="get">
Μέσα στη φόρμα βάζουμε πεδία, όπως textboxes με
το tag <input>
24
Στοιχεία φόρμας
input







text
password
checkbox
radio
button
submit
reset
textarea
select


multiple
option
25
Φόρμες - Input
text:

<input type=“text name=“myTextBox” value=“test
text”>
password:

<input type=“password” name=“myPasswd”>
checkbox:

<input type=“checkbox” name=“myCheckBox”
value=“yes”>
radio:

<input type=“radio” name=“myRadio” value=“yes”>
<input type=“radio” name=“myRadio” value=“no”>
26
Φόρμες – Input (2)
button:

<input type=“button” name=“MyButton”
value=“click me”>
submit:

<input type=“submit” name=“MySubmit”
value=“submit”>
reset:

<input type=“submit” name=“MyReset”
value=“reset”>
27
Φόρμες – Άλλα στοιχεία
textarea:

<textarea name=“myTextarea”>
Αυτό είναι ένα πεδίο Textarea</textarea>
select:

<select name=“mySelect”>
<option value=“1”>option 1</option>
<option value=“2”>option 2</option>
</select>
select (πολλαπλές τιμές):

<select name=“myMultiSelect” 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="myForm" action="myAction.php" method="get">
<br>Textbox:<input type="text" name="myTextBox" value="test text">
<br>Password:<input type="password" name="myPasswd">
<br><input type="checkbox" name="myCheckBox" value="yes" checked>Η τιμή θα
γίνει "yes".
<br><input type="radio" name="myRadio" value="yes" checked>Επέλεξε yes
<br><input type="radio" name="myRadio" value="no">Επέλεξε no
<br><input type="button" name="MyButton" value="click me">
<br><input type="submit" name="MySubmit" value="submit">
<br><input type="submit" name="MyReset" value="reset">
<br><textarea name="myTextarea">Αυτό είναι ένα πεδίο Textarea</textarea>
<br><select name="mySelect">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<br><select name="myMultiSelect" multiple>
<option value="1">multiple option 1</option>
<option value="2">multiple option 2</option>
<option value="3" selected>multiple option 3</option>
</select>
<br>
</form>
29
Παράδειγμα
30
HTTP GET/POST (1)
• Για κάθε πεδίο της φόρμας, ο browser
στέλνει στο server ζεύγη της μορφής
•
•
Όνομα_πεδίου=τιμή
Πχ αν έχω ένα textbox :<input
type="text" name="myTextBox“ />,
και βάλω την τιμή Hello
• myTextBox=Hello
31
HTTP GET/POST (2)
Ποια η διαφορά GET και POST ?
• POST: τα δεδομένα στέλνονται μέσα στα
ΗΤΤP μηνύματα που στέλνει ο browser, δεν
τα βλέπει ο χρήστης
• GET: τα δεδομένα προστίθενται στο url
•
http://www.di.uoa.gr/gr/anouncedept_detail.p
hp?anno=1725
32
Μερικές οδηγίες
Χρησιμοποιείτε το:

Edit (ή δεξί κλικ στη σελίδα) -> View Source
Στην html δεν γίνεται διάκριση πεζών και
κεφαλαίων γραμμάτων μέσα στα tags.
Δηλαδή τα:

<I>Πλάγια γράμματα</Ι>

<i>Πλάγια γράμματα</i>
είναι ισοδύναμα.
33
Περιεχόμενα
HTML
Javascript
PHP
34
Javascript
• http://www.w3schools.com/js/default.asp
• Scripting γλώσσα – no compilation
• Χρησιμοποιείται για να δώσει διαδραστικότητα μεταξύ
χρήστη και HTML εγγράφου
• Εκτελείται στο client από το browser (“κατεβαίνει”
μαζί με το HTML έγγραφο - ζητήματα ασφάλειας)
• Ενσωματώνεται σε HTML σελίδες με τη χρήση του
διακριτικού:

<script language=“Javascript”>
κώδικας
</script>
35
Παράδειγμα Συνάρτησης
function fact (n)
{
if (n <= 0)
return 1
return n * fact(n-1)
}
alert("fact(10)="+fact(10))
 Στην javascript δεν υπάρχει αυστηρός ορισμός τύπων
36
Πότε/που χρησιμοποιείται η
Javascript?
Η Javascript συνήθως χρησιμοποιείται:



για να επεξεργαστεί κάποιο συμβάν που
έγινε σε πεδίο φόρμας
για να καταχωρήσει μια φόρμα
για να κάνει απλούς ελέγχους σε πεδία
φόρμας
37
Βασικά Συμβάντα
onchange
Ένα πεδίο µιας φόρµας χάνει την εστίαση και η τιµή
του έχει µεταβληθεί.
onclick
Έχει γίνει κλικ σε ένα αντικείµενο.
ondbclick
Έχει γίνει διπλό-κλικ σε ένα αντικείµενο.
onerror
Η µεταφορά ενός εγγράφου ή εικόνας οδηγεί σε
σφάλµα.
onfocus
Ένα παράθυρο ή πλαίσιο ή frameset ή αντικείµενο
φόρµας λαµβάνει την εστίαση.
onkeydown
Ο χρήστης πιέζει και κρατά πιεσµένο ένα πλήκτρο.
onkeypress
Ο χρήστης πιέζει και απελευθερώνει ένα πλήκτρο.
onkeyup
Ο χρήστης απελευθερώνει ένα πλήκτρο.
38
Βασικά Συμβάντα - 2
onmousedown Ο χρήστης πιέζει και κρατά πιεσµένο το πλήκτρο
του ποντικιού.
onmousemove Ο χρήστης µετακινεί το ποντίκι.
onmouseout
Ο δείκτης του ποντικιού εξέρχεται από µια περιοχή
εικόνας ή συνδέσµου.
onmouseover
Ο δείκτης του ποντικιού περνά πάνω από ένα
αντικείµενο.
onmouseup
Ο χρήστης απελευθερώνει το πλήκτρο του
ποντικιού.
onreset
Ο χρήστης απελευθερώνει το πλήκτρο του
ποντικιού.
onselect
Ο χρήστης επιλέγει κείµενο σε ένα πλαίσιο
εισαγωγής κειµένου (µιας ή πολλαπλών γραµµών).
onsubmit
Ο χρήστης αποστέλλει τη φόρµα.
39
Παραδείγματα
<input type=“checkbox”
name=“myCheckBox” value=“yes”
onchange=“alert(‘άλλαξε η κατάστασή
μου!!!’)”>
<input type=“text name=“myTextBox”
value=“test text”
onchange=“if(this.value != ‘hello’)
alert(this.value)”>
40
Παραδείγματα (2)
• <input type=“button”
name=“MyButton” value=“click me”
onclick=“this.form.submit()”>
• Η συνάρτηση submit() είναι ορισμένη μέσα
στο έγγραφο. Μπορεί να ελέγχει όλα τα πεδία
μιας φόρμας.
• Παίρνουμε τα στοιχεία με συναρτήσεις
getelementbyName(‘όνομα_πεδίου_φόρμας’).value()
41
Παραδείγματα (3)
<script language="javascript">
function submit ()
{
var price = parseInt(document.testform.price_txtBox.value);
if ( price < 0 )
{
retval = false;
}
retrun retval;
}
</script>
…
<form name="testform" onsubmit="return submit()">
Price: <input type="text" name="price_txtBox" />
<input type="submit“ />
</form>
42
Περιεχόμενα
HTML
Javascript
PHP
43
PHP
• Hypertext Preprocessor (http://www.php.net)
• Γενικά, είναι μια scripting γλώσσα (μπορείτε να γράψετε php
προγράμματα που εκτελούνται στο pc σας)
• Στην περίπτωση των web εφαρμογών εκτελείται στη μεριά του
server
• Σκοπός, να παράγουμε με δυναμικό τρόπο τις HTML σελίδες (πχ,
δείξε μου τι καιρό κάνει τώρα…)
• Δημιουργία εφαρμογών και δυνατότητα αλληλεπίδρασης μέσα
από web interface
http://cgi.di.uoa.gr/~tsilochr/php_manual_el.chm το ΑΡΙ της PHP, σε μορφή chm στα ελληνικά
44
PHP
Requests
Responses
Data
Server
Data
Warehouse
1. O browser ζητά δεδομένα από το web server μέσω
HTML forms
2. O web server εκτελεί το php κωδικα
3. Ο web server ενδέχεται ζητήσει δεδομένα από κάποια
άλλη πηγή (3 tier)
4. Τα αποτελέσματα μορφοποιούνται σε HTML στο χρόνο
εκτέλεσης και στέλνονται στο client
45
PHP
1. Ο web server έχει το κατάλληλο module για να
2.
3.
εκτελέσει php κώδικα
Οι σελίδες έχουν κατάληξη .php
Γράφω κώδικα php μέσα στην html
<?php
//Κώδικας σε php
?>
ή φτιάχνω βιβλιοθήκες σε ξεχωριστό αρχείο και τις
εισάγω στην σελίδα
<? Php
include ‘my_library.php';
?>
46
PHP - Variables
• Οι μεταβλητές δεν έχουν αυστηρούς
τύπους
• Κάθε μεταβλητή ξεκινά με το
χαρακτήρα $
•
$myVar = “hello world!”;
• Εκτύπωση μεταβλήτων
•
echo $myVar;
47
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
$myVar = “hello world!”;
echo $myVar;
echo
“<br><b>".$myVar."</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
Do you like
Do you like
Do you like
*/
?>
red?
blue?
green?
yellow?
50
PHP – Δομές ελέγχου
• If
if ($a > $b)
print "a
} elseif ($a
print "a
} else {
print "a
}
{
is bigger than b";
== $b) {
is equal to b";
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
Διάβασμα μεταβλητών φόρμας
Μέθοδος GET:

$_GET[“(όνομα μεταβλητής)”]
Μέθοδος POST:

$_POST[“(όνομα μεταβλητής)”]
53
Παράδειγμα
<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"]; ?><br>
You are <?php echo $_GET["age"]; ?> years old!
Καταχώρηση Φόρμας
54
Προσπέλαση Αρχείων
Άνοιγμα Αρχείου:

<?php $file=fopen("welcome.txt","r"); ?>
Διάβασμα Αρχείου:

while(!feof($file))
{
echo fgets($file). "<br>";
}
Κλείσιμο Αρχείου:

fclose($file);
55
Sessions
• Χρειάζεται να κρατάμε πληροφορία για το ιστορικό
του client
•
•
•
Έχει κάνει login?
Με τι username?
Έχει προϊόντα στο καλάθι αγορών του?
• Ο web server διατηρεί για κάθε client (Ip
address/agent) ένα ξεχωριστό session με κάποιο ID
• Μπορούμε να αποθηκεύουμε πληροφορία
(μεταβλητές) στο session
• To πως δουλεύει κρύβεται από τον προγραμματιστή
•
Απλά το χρησιμοποιούμε
56
Sessions
1. Κάνουμε start το session (πχ κατά την είσοδο του
χρήστη μετά το login)
session_start();
2. Αποθηκεύουμε μια μεταβλητή
$_SESSION['views']=1;
3. Ελέγχουμε αν υπάρχει μια μεταβλητή στο session
if(isset($_SESSION['cart']))
4. Αφαίρεση μια μεταβλητής από το session
unset($_SESSION['views']);
5. Κλείσιμο του session (πχ κατά το log out)
session_destroy();
57
Χρήσιμοι Σύνδεσμοι
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/js/default.asp
http://www.w3schools.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