slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849 PowerPoint Presentation
Download Presentation
HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849

Loading in 2 Seconds...

play fullscreen
1 / 30

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


  • 71 Views
  • Uploaded on

HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849. HTML εισαγωγή (1/2). HyperText Markup Language είναι η γλώσσα προσδιορισμού ιστοσελίδων. “ Στατικές ιστοσελίδες ” – το περιεχόμενο τους δεν αλλάζει σε απόκριση των εισερχόμενων δεδομένων του χρήστη.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849' - daw


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
HTML-PHP

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

html 1 2
HTML εισαγωγή (1/2)
  • HyperText Markup Language είναι η γλώσσα προσδιορισμού ιστοσελίδων.
  • “Στατικές ιστοσελίδες” – το περιεχόμενο τους δεν αλλάζει σε απόκριση των εισερχόμενων δεδομένων του χρήστη.
  • Hypertext Transfer Protocol (HTTP) – είναι το κύριο πρωτόκολλο επικοινωνίας των web browsers και των web servers.
html 2 2
HTML εισαγωγή(2/2)
  • Ο webbrowser αναζητά μία ιστοσελίδα από τον web server στελνοντάς του ένα ΗΤΤP αίτημα αναζήτησης.
  • Ο web server απαντά στέλνοντας μία HTTP απάντηση πίσω στο browser.
html structure
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
  • Οι <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
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>
form tag
<FORM> tag
  • Ορίζει μία φόρμα για εισαγωγή δεδομένων από τον χρήστη. Μπορεί να περιέχει πεδία, κουμπιά, drop-down menus κ.ά.

<form action="formaction.jsp" method="post” name="myform“>

    • METHOD: Ορίζει τον τρόπο αποστολής των δεδομένων
    • ACTION: Ορίζει το script το οποίο θα επεξεργαστεί τα δεδομένα.
    • NAME: Ορίζει το όνομα της φόρμας για επεξεργασία από τα script
body tag
<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
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

slide11
ΛΙΣΤΕΣ
  • Αριθμημένες Λίστες:

Δημιουργούνται με το <οl>…</οl>

  • Λίστες με κουκίδες:

Δημιουργούνται με το <ul>…</ul>

  • Οι γραμμές της λίστας ορίζονται με το tag <li>…</li>
  • Mε την ιδιότητα TYPE καθορίζουν το είδοςαρίθμησης ή κουκίδας που επιθυμείται

<ol>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

</ul>

</οl>

slide12
ΠΙΝΑΚΕΣ(1/2)
  • Το tag με το οποίο εισάγεται ένας πίνακας είναι το <table> ... </table>
  • Οι γραμμές εισάγονται με το <tr> ... </tr>
  • Οι στήλες με το <td> ... </td>
  • Οι επικεφαλίδες με</th> ... <th>
  • Με τις παραμέτρους bgcolorκαι backgroundμπορούμε να καθορίσουμε background για τον πίνακα αλλά και για κάθε κελί του πίνακα ξεχωριστά
slide13
ΠΙΝΑΚΕΣ(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
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
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
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
HTML μορφοποίηση(4/4)
  • Διαχωριστική οριζόντια γραμμή

<hr>

  • Σχόλια

<!--Αυτόείναι ένα σχόλιο -->

slide19
PHP (Πλεονεκτήματα)
  • Εκτελείται στην πλευρά του WebServer.
  • Δυνατότητα δημιουργίας δυναμικές ιστοσελίδες.
  • Ιστοσελίδες που δίνουν στο χρήστη την δυνατότητα αλληλεπίδρασης με το περιεχόμενό τους.
  • Παράγει HTML κώδικα.
  • Εύκολη διασύνδεση με βάσεις δεδομένων π.χ. MySQL.
  • Object Oriented προγραμματισμού (Classes και κληρονομικότητα) και συναρτήσεις.
  • Τρέχουσα έκδοση η 5.2.5 .
php tags
PHP tags (ετικέτες)
  • Ο κώδικας της PHP είναι χωρισμένος σε ετικέτες, που έχουν αρχή και τέλος και σας επιτρέπουν να μπείτε σε PHP mode :
    • XML Style : <?php ... ?>
    • Short Style : <? ... ?>
    • Script Style :

<SCRIPT LANGUAGE=‘php’>...

</SCRIPT>

Σχόλια:

/* … */

// …

# …

slide21
Τύποι Δεδομένων
  • Έχει παρόμοιους τύπους δεδομένων με τις κλασικές γλώσσες προγραμματισμού.
  • Χωρίζονται σε υπέρ-καθολικές, σταθερές, καθολικές, τοπικές μεταβλητές.
  • Οι μεταβλητές δηλώνονται με το σύμβολο $ :
    • Integer – αριθμούς.
    • Float – πραγματικούς αριθμούς.
    • String – συμβολοσειρές χαρακτήρων.
    • Boolean – μεταβλητές true false.
    • Array – αποθήκευση πολλαπλών στοιχείων του ίδιου τύπου.
    • Resource- κρατούν αναφορές για ανοιχτά αρχεία, συνδέσεις με βάσεις δεδομένων ή καμβάδες εικόνων κ.λ.π.
    • Object – αντικείμενο κλάσης
slide22
Υπερ-καθολικές Μεταβλητές
  • $_GLOBALS- Πίνακας καθολικών μεταβλητών.
  • $_SERVER– Oρισμός την θέση των include files.
  • $_COOKIE- Πίνακας από μεταβλητές cookie.
  • $_FILES- Πίνακας μεταβλητών που σχετίζονται με αποστολές αρχείων.
  • $_REQUEST- Πίνακας την είσοδου του χρήστη συμπεριλαμβανομένων των $_GET,

$_POST και $_COOKIE.

  • $_SESSION- Πίνακας μεταβλητών συνόδου.
slide23
Δομές Ελέγχου στην ΡΗΡ
  • 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;

slide24
Παραδείγματα

Παραδείγματα μεταβλητών :

  • $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>";}

slide25
Παραδείγματα
  • Παραδείγματαforeach

<?php$arr = array(1, 2, 3, 4);foreach ($arr as &$value) { $value = $value * 2;}

?> // $arr is now array(2, 4, 6, 8)

slide26
Δυναμική αλλαγή είκονας
  • <?php

$pics = array(‘mobile1.jpg’,’mobile2.jpg’,mobile3.jpg’);

Shuffle ($pics); //αναδιάταξη εικόνων

?>

….

<?php

echo ’<img src= “ ‘;

echo $pics[1];

?>

slide27
Αποστολή mail
  • <?php

$to      = ‘css08323@example.com';$subject = 'the subject';$message = 'hello bro';

mail($to, $subject, $message);?>

  • Τα στοιχεία μπορούν να ληφθούν απο την φόρμα εισόδου αφού πρώτα γίνει ελεγχος ορθότητας του κάθε πεδίου.
    • Υπάρχουν διάφορες συναρτήσεις :

explode(), implode()….

slide28
Κλάσεις και κληρονομικότητα(παράδειγμα)

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
ΡΗΡ script
  • <form> : Μία φόρμα χρησιμοποιείται για εισαγωγή δεδομένων από τον χρήστη, περιέχει πεδία, κουμπιά, drop-down menus κ.τ.λ
  • Έχει δύο attributes:
    • METHOD: Ένας browser έχει την δυνατότητα να στέλνει δεδομένα σε ένα script μέσω κάποιων μεθόδων
      • GET : τα δεδομένα πακετάρονται και στέλνονται στο τέλος του URL για το οποίο προορίζονται, έτσι γίνεται στην Google.com

(πίνακα μεταβλητών $_GET)

      • POST: τα δεδομένα στέλνονται σαν μια ανεξάρτητη ροή δεδομένων.

(πίνακα μεταβλητών $_POST )

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