Προγραμματισμός Παγκόσμιου Ιστού

Transcript

1 Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 11 η Διάλεξη Δημοσθένης Κυριαζής Τρίτη 23 Μαΐου 2017

2 Σημερινή διάλεξη Client-server programming HTML5 CSS Layouts Javascript PHP Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 2

3 Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική Διεπαφή Client Database Server PowerBuilder Visual Basic Visual C++ Access Paradox Oracle Sybase Informix MS SQLServer Ethernet Token Ring TCP/IP Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 3

4 Μοντέλο client server Client side Sever side 1. Request 3. Response 2. Data Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 4

5 Μεταφορά εφαρμογών στο server Φυσική αρχιτεκτονική Web Browser HTTP Web Server Application Server Data base HTML Pages Τεχνική αρχιτεκτονική Any Computer Any Network Server Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 5

7 Παράδειγμα εγγράφου HTML Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 7

8 Βασική δομή σελίδας HTML5 (1/2) <header> <nav> <article> <aside> <section> <section> <section> <footer> 8

9 Βασική δομή σελίδας HTML5 (2/2) <body> <article> <header> <nav> <section> <section> <aside> <footer> <article> <header> <nav> <section> <section> <aside> <footer> 9

10 Παράδειγμα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 10

11 Παράδειγμα DOM Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 11

12 Σύνδεσμοι - Links Attribute target καθορίζει εάν ο σύνδεσμος ανοίγει στην ίδια ή σε νέα σελίδα <a href= target= _blank >University of Piraeus</a> χρήση του ίδιου ονόματος ορίζει τη συγκεκριμένη σελίδα ως target για όλες τις νέες σελίδες Link σε συγκεκριμένα σημεία σελίδων <a href="#c4">see also Chapter 4</a> <h2><a id="c4">chapter 4</a></h2> ή <h2 id="c4">chapter 4</h2> Image Links <a href= > <img src= map.gif alt= Map of Greece title= A Map /> </a> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 12

13 «Εικόνες» και περιγραφές (1/2) Το νέο figure element επιτρέπει την προσθήκη εικόνας και της σχετικής της περιγραφής Πριν την HTML5, χρειαζόταν div και στη συνέχεια προσθήκη της περιγραφής (χωρίς σχέση μεταξύ των 2) Το figure element δε χρειάζεται να περιλαμβάνει εικόνες Μπορεί να περιλαμβάνει κώδικα, ηχητικά μέρη, βίντεο, κλπ Σύνταξη <figure> </figure> <img alt= University of Piraeus src= unipi_logo.jpeg width= 100 height= 100 /> <figcaption> University of Piraeus </figcaption> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 13

14 Λίστες Κάθε λίστα αποτελείται από το αναγνωριστικό της και το List Item tag <li> Οι λίστες υποστηρίζουν εσωτερικά HTML στοιχεία και ιδιαίτερα Paragraph tags για τον διαχωρισμό του κειμένου Τύποι Ordered List Ξεκινάει με το <ol> tag και τελειώνει με το </ol> tag Για κάθε στοιχείο χρησιμοποιείται το <li> tag Unordered ή Bulleted List Χρησιμοποιούνται αντίστοιχα τα <ul>, </ul> tag Definition Lists Χρησιμοποιούνται για συνδυασμό description/term Τα αντίστοιχα tag είναι: <dl>, <dd> και <dt> Υπάρχουν επιπλέον attributes π.χ. <ol start= 7 > 14

15 Πίνακες Caption πίνακα <caption>table caption</caption> Συγχώνευση κελιών σε πίνακες Γραμμών - rowspan <tr> </tr> <tr> </tr> <tr> </tr> Στηλών - colspan <tr> </tr> <tr> </tr> <tr> </tr> <th>.. </th> <td rowspan="2">merged</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>.. </td> <th colspan="2">just 1 Heading</th> <td>.. </td> <td>.. </td> 15

16 Φόρμες (1/2) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή Υπάρχουν 3 τύποι tags για δημιουργία πεδίων <textarea> <select> <input> Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 16

17 Φόρμες (2/2) Το tag form οριοθετεί την αρχή της φόρμας Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους Δύο βασικά attributes Action: Ορίζει την URL που θα τα λάβει Method: Λαμβάνει δύο δυνατές τιμές Παράδειγμα post στέλνει όλη την πληροφορία χωριστά από την URL get συνδέει την πληροφορία στο τέλος της URL Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν <form method="post" action="/cgi-bin/my_script">...</form> 17

18 <input> (1/4) Επιτρέπει διάφορες επιλογές εισόδου περιεχομένου Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 18

19 <input> (2/4) Τα πιο κοινά attributes για το <input> tag είναι τα εξής: type ορίζει τον τύπο του input field name το όνομα για τα δεδομένα Υποχρεωτικό για όλους τους τύπους εκτός από τα submit και reset size μέγεθος του πεδίου σε πλήθος χαρακτήρων maxlength μέγιστο πλήθος χαρακτήρων value έχει διάφορες σημασίες text ή password field: το default κείμενο που παρουσιάζεται check box ή radio button: την τιμή που επιστρέφεται submit και reset buttons: το κείμενο που παρουσιάζεται checked καθιστά ένα check box ή radio button ενεργό Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 19

20 <input> (3/4) text Παρουσιάζει μια απλή γραμμή κειμένου Attributes: name, size, maxlength, value password Παρουσιάζει τους χαρακτήρες που πληκτρολογούνται ως bullets Attributes: name, size, maxlength, value checkbox Attributes: name, value, checked radio Αποτελεί μια πιο περίπλοκη εκδοχή του check box επιτρέποντας σε ένα μόνο στοιχείο από το σύνολο να επιλεγεί Η ομαδοποίηση γίνεται με χρήση του name attribute Attributes: name, value, checked 20

21 <input type= radio > reset Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή submit Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server Παράδειγμα <form> <input type="radio" name="choice" value="choice1" checked= checked"> Yes. <input type="radio" name="choice" <br> value="choice2"> No. <input type="submit" value="next"> <input type="reset"> 21 </form>

22 <select> Ομαδοποίηση επιλογών σε αντικείμενα επιλογής - optgroup Τίτλοι ομαδοποίησης label <select multiple name="network" size="6"> <optgroup label="ethernet"> <option value="ethernet"> Ethernet 4 <option selected ="selected" value="ethernet"> Ethernet 8 <option value="ethernet"> Ethernet 12 </optgroup> <optgroup label="token Ring"> <option value="token16"> Token Ring - 16mb <option value="token4"> Token Ring - 4mb </optgroup> <option value="localtalk"> LocalTalk <option value="other"> Other... </select> 22

23 Εμπλουτισμένα attributes Νέα attributes έχουν προστεθεί στην HTML5 Autofocus <input type="text" id="phone" name="phone" value="210" autofocus /> Required <input type="text" id="first_name" name="first_name" required="required" /> Placeholder <input type="text" id="first_name" name="first_name" placeholder="please enter your first name" /> Maxlength <textarea id="addr" name="addr" rows="10" cols="10" maxlength="200"></textarea> Pattern <input type="text" id="phone" name="phone" class="large" value="210" autofocus maxlength="15" pattern="[0-9]{4}" title="4 digits please"/>

24 Ημερολόγιο και ώρα Δεν απαιτείται πλέον η χρήση JavaScript λόγω νέων μεθόδων εισαγωγής Input type date Επιλογή ημέρας από ημερολόγιο Π.χ. <input type="date" name="birthday"> Input type datetime Επιλογή ημερομηνίας και ώρας (βάσει UTC) Π.χ. <input type="datetime" name="bdaytime"> Input type datetime-local Επιλογή ημερομηνίας και ώρας (βάσει τοπικής ώρας) Input type month / week Επιλογή μήνα / εβδομάδας Π.χ. <input type="month" name="bdaymonth"> Χρήση attributes min και max για τον ορισμό ελάχιστων / μέγιστων τιμών (στη μορφή YYYY-MM-DD) Π.χ. <input type="date" name="birthday" min=" "> 24

25 Επιλογή αριθμών (1/2) Νέο input type number για την εισαγωγή / επιλογή αριθμού Δεν επιτρέπεται η εισαγωγή μη αριθμητικών χαρακτήρων Με τα min και max attributes μπορεί να ορισθεί συγκεκριμένο εύρος τιμών Με το step attribute μπορεί να ορισθεί το βήμα Π.χ. <input type="number" id="numberitem" name="numberitem" min="1" max="10" step="2" /> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 25

26 Επιλογή αριθμών (2/2) Νέο input type range για την επιλογή αριθμού Δεν υπάρχει πεδίο εισαγωγής αριθμού min, max, and step attributes. Εμφάνιση Περιορισμένες επιλογές (εμφάνιση κυρίως βάσει των browser) Εισαγωγή τιμών height και width Π.χ. Εάν το height είναι μεγαλύτερο του width εμφανίζεται κατακόρυφα HTML: <input type="range" id="range" name="range" min="0" max="10" step="1" /> CSS: #range { -webkit-appearance: slider-vertical; width: 20px; height: 100px; } Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 26

27 Επιπλέον input types Νέο input type color για την επιλογή βασικών χρωμάτων Π.χ. <input type="color" id="color" name="color" /> Νέο input type url για την εισαγωγή URL (επικύρωση κατά την αποστολή των δεδομένων) Π.χ. <input type="url" name="homepage"> Νέο input type color για την εισαγωγή τηλεφώνου Π.χ. <input type="tel" name="usrtel"> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 27

28 Datalist element Νέο element της HTML5 για την πρόταση «προεπιλογών» σε κάποιο πεδίο Σε συνδυασμό με το list attribute μπορεί να υλοποιήσει μια «autocomplete» λύση Συγκριτικά με το select element, ο χρήστης μπορεί να εισάγει επιπλέον δεδομένα (εκτός των προτεινόμενων) Π.χ. <input list="playerlist" type="text" id="favplayer" name="favplayer" /> <datalist id="playerlist" width="500px"> <option value="messi" /> <option value="ronaldo" /> </datalist> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 28

29 Meter element Χρησιμοποιείται για να προσδιορίσει την ποσοστιαία μεταβολή μιας τιμής Υποστηρίζει διάφορα attributes Value: Η μοναδική που απαιτείται καθώς ορίζει την τιμή που θα εμφανιστεί στο meter Min / max: Προεπιλεγμένες τιμές στο 0 και 1.0 Low / high / optimum: Χρησιμοποιούνται για να ορίσουν κομμάτια για τα συγκεκριμένα σημεία του meter Παραδείγματα <p>course completion status: <meter value="0.80">80%</meter></p> <p>lectures completed: <meter min="0" max="10" value="8">8 out of 10</meter></p> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 29

30 Audio element To audio element χρησιμοποιείται για την εισαγωγή ηχητικών αποσπασμάτων στις σελίδες Οι browsers επιτρέπουν την αναπαραγωγή συγκεκριμένων μορφών Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται). Μπορούν να οριστούν συγκεκριμένα στοιχεία μέσω JavaScript autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το αρχείο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το αρχείο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί 30

31 Video element To video element χρησιμοποιείται για την εισαγωγή αποσπασμάτων βίντεο στις σελίδες Υποστηρίζει διάφορα attributes src: Ορίζει το αρχείο αναπαραγωγής poster: Ορίζει την εικόνα που θα εμφανίζεται όσο «κατεβαίνει» το βίντεο ή μέχρι ο χρήστης να επιλέξει την αναπαραγωγή του width, height: Ορίζουν το μέγεθος του player σε pixels controls: Ορίζει αν θα εμφανίζονται στοιχεία ελέγχου (προεπιλογή να μην εμφανίζονται) autoplay: Ορίζει αν θα αρχίσει αυτόματα η αναπαραγωγή loop: Ορίζει αν θα επαναλαμβάνεται η αναπαραγωγή όταν ολοκληρωθεί preload: Ορίζει τι να κάνει ο browser αν δεν έχει επιλεγεί autoplay. Μπορεί να λάβει τιμές: none: Ο browser δεν αναπαράγει το βίντεο μέχρι ο χρήστης να το επιλέξει auto: Ο browser «κατεβάζει» το βίντεο όταν «φορτώσει» η σελίδα metadata: Ο browser απλά αποθηκεύει πληροφορία αναφορικά με το μέγεθος, την πρώτη εικόνα και τη διάρκεια 31

33 Σύνταξη CSS Η σύνταξη CSS αποτελείται από 3 τμήματα: selector, property και value selector {property:value} Ο selector είναι το element/tag που επιθυμούμε να ορίσουμε, το property είναι η παράμετρος που θέλουμε να αλλάξουμε και τέλος, το value η τιμή της Σχόλια σε /* Αυτό είναι ένα σχόλιο */ Εισαγωγή CSS σε url("layout.css"); Παραδείγματα: body {background-color:black} p {font-family:"sans serif";} "" εάν υπάρχουν περισσότερες λέξεις p {text-align:center; color:red;} ; εάν υπάρχουν περισσότερες παράμετροι h1,h2,h3,h4,h5,h6 {color:green;} ομαδοποίηση στοιχείων Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 33

34 Fonts font-family: Μια λίστα με fonts για την περίπτωση όπου κάποιο font δεν είναι διαθέσιμο στο σύστημα του χρήστη π.χ. p {font-family:"times New Roman", Times, serif;} font-style: Το στυλ του font π.χ. p.normal {font-style:normal;} ή p.italic {font-style:italic;} font-size: Το μέγεθος του font. Μπορεί να πάρει και τιμές xx-small xx-large, smaller, larger π.χ. p {font-size:14px;} ή h1 {font-size:2.5em;} font-weight: Πόσο σκούρο είναι το font. Μπορεί να πάρει και τιμές , bolder, lighter π.χ. p.bold {font-weight:bold;} font-variant: Σε κάποιες γραμματοσειρές επιτρέπεται το small-caps π.χ. p.var {font-variant:small-caps;} Shortcut: font { font: style weight variant size font-family } π.χ. p {font: oblique bold small-caps 1.5em Verdana, Arial, sans-serif;} 34

35 Κείμενο text-align: Στοίχιση του κειμένου σε left, right, center, justify π.χ. p {text-align: justify;} text-transform: Μετατροπή του κειμένου σε uppercase, lowercase, capitalize π.χ. p.uppercase {text-transform:uppercase;} text-decoration: Παρουσίαση του κειμένου σε none, underline, overline, line-through π.χ. h2 {text-decoration:line-through;} letter-spacing, word-spacing: Αποστάσεις ανάμεσα στους χαρακτήρες και τις λέξεις αντίστοιχα text-indent: Διάστημα κειμένου από border π.χ. p#par1 { text-indent: 2em; } π.χ. p#par2 { text-indent: 25%; } π.χ. p#par3 { text-indent: -35px; } 35

36 Σύνδεσμοι Στα link μπορεί να αλλάζει η εμφάνιση των καταστάσεων που βρίσκονται a:link {color:#ff0000;} /* unvisited link */ a:visited {color:#00ff00;} /* visited link */ a:hover {color:#ff00ff;} /* mouse over link */ for rollover effects a:active {color:#0000ff;} /* selected link */ Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 36

37 Pseudo-elements Elements που παρέχουν συγκεκριμένη λειτουργία όπου εφαρμόζονται :first-line color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height :first-letter Color, font, text-decoration, text-transform, vertical-align, text-transform, background, margin, padding, border, float, letter-spacing, word-spacing :first-child :lang() π.χ. p:first-letter {font-size: 300%; color: orange;} π.χ. a:hover {color: maroon; text-decoration: underline; background-color: #C4CEF8; } <a href=" of Piraeus, Department of Digital Systems</a> 37

38 Backgrounds background-color: Το χρώμα του background π.χ. body {background-color:#b0c4de;} background-image: Μια εικόνα σαν background που μάλιστα μπορεί και να επαναλαμβάνεται π.χ. body {background-image: url('gradient.png'); background-repeat: repeat-x;} background-position: Η θέση του background. Μπορεί να πάρει τιμές left, center, right, top, bottom, ποσοστά και τιμές σε pixels π.χ. { background-position: 200px 50px; } Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 38

39 Εισαγωγή CSS σε HTML Εξωτερικό style sheet (χαμηλή προτεραιότητα) Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το web site ή για διαφορετικούς λόγους (screen, media, handheld, κλπ) Το CSS «φορτώνεται» με το <link> tag στο <head> της σελίδας <head> <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" media="print"/> </head> Εσωτερικό style sheet - στο head (μεσαία προτεραιότητα) <head> <style type="text/css > h1 {color:black} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> Inline style (υψηλή προτεραιότητα) <p style="color:black;margin-left:20px">this is a paragraph.</p> 39

40 Ιεραρχία στα CSS Μπορούμε να δημιουργήσουμε πιο πολύπλοκα CSS που να αναφέρονται σε συγκεκριμένα στοιχεία της σελίδας Παράδειγμα.aclass h3 { } Aφορά όλα τα <h3> elements κάτω από element με class= aclass table.aclass tr {magrin:20px;} Aφορά όλα τα <tr> elements κάτω από element <table> με class= aclass Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 40

41 CSS Selectors Selector Σημασία Παράδειγμα Universal Selector Όλα τα elements της σελίδας * {} Type Selector Συγκεκριμένα elements της σελίδας h1, h2, h3 {} Class Selector Όλα τα elements (ή τα elements τύπου) που έχουν το συγκεκριμένο class attribute.note {} p.note {} ID Selector Όλα τα elements που έχουν το συγκεκριμένο attribute #introduction {} Child Selector Descendant Selector Μόνο τα elements που είναι «απ ευθείας παιδιά» ενός άλλου element (σε πρώτο επίπεδο) Όλα τα elements συγκεκριμένου τύπου που είναι «απόγονοι» ενός άλλου element li>a {} p a {} Adjacent Sibling Selector Το πρώτο element που ακολουθεί ένα άλλο element h1+p {} General Sibling Selector Όλα τα elements συγκεκριμένου τύπου που ακολουθούν ένα άλλο element h1~p {} Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 41

42 Προτεραιότητα Εάν δύο selectors είναι ίδιοι, τότε εφαρμόζεται μόνο ο τελευταίος ( last one listed wins ) Εάν ένας selector είναι πιο συγκεκριμένος από κάποιον άλλο, τότε ο πιο συγκεκριμένος είναι αυτός που εφαρμόζεται π.χ. το h1 είναι πιο συγκεκριμένο από το * Εάν στο τέλος κάποιας ιδιότητας προσθέσουμε το!important, τότε η ιδιότητα αυτή θεωρείται πιο σημαντική από άλλους κανόνες που σχετίζονται με το συγκεκριμένο element. Cascading? Για την περίπτωση των conflicts! h1 {color: green!important;} <h1 style="color:yellow">cascading case</h1> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 42

43 CSS Box Model Αν θεωρήσουμε κάθε ένα html element σαν ένα κουτί (box) τότε στο css μπορούμε να ορίζουμε αντίστοιχα τις ακόλουθες παραμέτρους Margin : Η περιοχή γύρω από το border. Είναι διαφανή / transparent Border : Το πλαίσιο γύρω από το padding και το content Padding : Η περιοχή γύρω από το content. Έχει το χρώμα του background Content : Εδώ εμφανίζεται το κείμενο και οι εικόνες Παράδειγμα: width:250px; padding:10px; border:5px solid gray; margin:10px; Total width= 300px!! Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 43

45 Position position:static: Η standard επιλογή των browsers όπου το περιεχόμενο ακολουθεί το ένα το άλλο position:relative: Τοποθετεί το περιεχόμενο σε σχέση με εκεί που θα έπρεπε με βάση την static επιλογή. Το αρχικό σημείο παραμένει κενό π.χ. div.content {position: relative; top:10px; left:100px; background-color: fuchsia;} position:absolute: Το περιεχόμενο δεν ακολουθεί τη ροή και δεν επηρεάζει τα άλλα στοιχεία της σελίδας π.χ. h1 { position: absolute; top: 0px; left: 500px;} position:fixed: Το περιεχόμενο τοποθετείται σε συγκεκριμένο σημείο του παραθύρου π.χ. h1 { position:fixed ; top: 0px; left: 0px;} Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 45

46 Float To float χρησιμοποιείται για να τοποθετούμε περιεχόμενο δεξιά (float:right) ή αριστερά (float:left) στη σελίδα μας και το υπόλοιπο περιεχόμενο να το «περικυκλώνει» Η επιλογή clear σταματά τα element να συνεχίσουν γύρω από ένα floating element, όπως για παράδειγμα όταν θέλω να έχω μια νέα γραμμή p#end {clear: left;} <p id="end"> </p> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 46

47 Absolute Τα αντικείμενα μετακινούνται «εκτός» της κανονικής ροής της σελίδας (όπως έχει οριστεί από το HTML) Με τη χρήση absolute τα αντικείμενα δεν συνδέονται πλέον με τη ροή του εγγράφου Άλλα αντικείμενα καλύπτουν το χώρο που μένει κενός από ένα αντικείμενο με absolute positioning Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 47

48 Relative To αντικείμενο τοποθετείται σε σχέση με την τρέχουσα τοποθεσία του στην κανονική ροή του εγγράφου Άλλα αντικείμενα ΔΕΝ γεμίζουν το χώρο που μένει κενός στη ροή του εγγράφου Αυτός ο χώρος μένει κενός Left:250px Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 48

49 Responsive Web Design Το responsive web design στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές 1 website για όλες τις συσκευές desktop, tablets, smartphones Διαμόρφωση του layout της σελίδας ανά ανάλυση οθόνης Ιδανικό για sites με μικρή πολυπλοκότητα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 49

50 Adaptive Web Design To adaptive web design αναγνωρίζει τις διαφορετικές συσκευές του χρήστη. Όπως και το responsive design, επίσης στοχεύει στη βελτιστοποίηση της παρουσίασης για διαφορετικές συσκευές Διαφορετικά website για desktop και mobile συσκευές Αναγνωρίζει τη συσκευή του χρήστη, όχι την ανάλυση της οθόνης Ιδανικό για website με μεγάλη λειτουργικότητα 50

51 Τεχνικές για RWD 3 βασικές τεχνικές: Flexible, grid-based layouts Τα sites υλοποιούνται με χρήση ποσοστών για τα πλάτη Media queries Χρήση CSS3 Flexible media & images Όταν αλλάζει η οθόνη, τα media/εικόνες προσαρμόζονται αντίστοιχα στο μέγεθος της οθόνης Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 51

52 Fluid grids / layouts στόχος ολικός χώρος = αποτέλεσμα Τίτλος στόχος = 700px 700px 988px = *100 =70.85% Ολικό πλάτος = 988px Στόχος 1 στήλης = 329px 329px 988px = 33.29% Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 52

53 Viewport Meta Tag Χρήση του viewport meta tag στο <head> Υπάρχουν 2 τρόποι για την προσθήκη του viewport tag Χρήση του CSS Σχετικά νέο και γενικά δεν υποστηρίζεται /* CSS Document {width: 480px; zoom: 1;} Χρήση του viewport meta tag Υποστηρίζεται <meta name="viewport" content="width=device-width, initial-scale=1 > Προσαρμογή στο πλάτος της συσκευής Χωρίς zoom Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 53

54 Τεχνικές για RWD: Media queries Τα πολλαπλά viewport υλοποιούνται με χρήση πολλαπλών τιμών ιδιοτήτων σε ένα query συνδέοντας τις τιμές με το and <link rel="stylesheet" media="only screen and (min-width:200px) and (maxwidth: 500px)" href= small.css"> <link rel="stylesheet" media="only screen and (min-width:501px) and (maxwidth: 1100px)" href= large.css"> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 54

55 Τεχνικές για RWD: Media queries Ο παρακάτω κώδικας θα εμφανίσει το μέγεθος των γραμμάτων στο 100% εάν το πλάτος είναι τουλάχιστον screen and (min-width: 1024px) { body {font-size: 100%;} } Ο παρακάτω κώδικας ελέγχει τον προσανατολισμό και το πλάτος της screen and (min-device-width: 480px) and (orientation: landscape) { body { font-size: 100%; } } Οι λογικοί τελεστές μπορούν να προσαρμοστούν Το and μπορεί να αντικατασταθεί με το not Ο προσανατολισμός portrait μπορεί να αντικατασταθεί με το landscape Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 55

56 Τεχνικές για RWD: Flexible media και εικόνες Προσαρμογή HTML Αφαίρεση ιδιοτήτων height και width CSS img { max-width: 100%; height: auto; } Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 56

57 Τεχνικές για RWD: Flexible media και εικόνες Παράδειγμα #logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; only screen and (max-device-width: 480px) { #logo { background: url(images/logo_mobile.png); width: 440px; } } Προσαρμογή logo για μικρό viewport Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 57

58 Σύνδεσμοι τηλεφώνου και μηνυμάτων Τηλέφωνο SMS <a href="tel: ">call </a> Πολλοί browsers θα κάνουν την αντίστοιχη κλήση όταν πατηθεί ο σύνδεσμος <a href="sms: ">text </a> Πολλοί browsers θα εκκινήσουν την εφαρμογή γραπτών μηνυμάτων όταν πατηθεί ο σύνδεσμος Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 59

60 JavaScript και HTML Ο κώδικας JavaScript περιλαμβάνεται σε <script> tags <script type="text/javascript"> document.write("<h1>hello World!</h1>") ; </script> O παραπάνω κώδικας έχει το ίδιο αποτέλεσμα με <h1>hello World!</h1> H JavaScript μπορεί να χρησιμοποιηθεί και σε HTML objects, όπως για παράδειγμα ένα button Ο κώδικας JavaScript θα εκτελεστεί μόλις το object χρησιμοποιηθεί Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 60

61 Που τοποθετείται η JavaScript (1/3) Scripts στο τμήμα Head Τα scripts που πρέπει να εκτελεσθούν όταν κληθούν ή όταν προκαλείται ένα συμβάν (event) τοποθετούνται στο τμήμα head. Όταν τοποθετούμε ένα script στο τμήμα head, τότε είναι σίγουρο ότι αυτό θα φορτωθεί πριν χρησιμοποιηθεί. <html> <head> <script language="javascript"> εντολές </script> </head> <body> </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 61

62 Που τοποθετείται η JavaScript (2/3) Scripts στο τμήμα Body: Τα scripts που πρέπει να εκτελεσθούν όταν φορτώνεται η σελίδα τοποθετούνται στο τμήμα body. Όταν τοποθετούμε ένα script στο τμήμα body, τότε αυτό συμμετέχει στη διαμόρφωση του περιεχομένου της σελίδας. <html> <head> </head> <body> <script language="javascript"> εντολές </script> </body> </html> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 62

63 Που τοποθετείται η JavaScript (3/3) Τα εξωτερικά scripts είναι αρχεία που περιέχουν κώδικα JavaScript, χωρίς το tag <script>, και έχουν επέκταση.js. Τα ενσωματώνουμε σε μια ιστοσελίδα με το tag <script> και το χαρακτηριστικό src, ως εξής: <html> <head> </head> <body> <script src="file01.js"> </script> </body> </html> Τοποθετούμε το εξωτερικό script εκεί ακριβώς που θα γράφαμε κανονικά το script Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 63

64 Blocking: φόρτωση HTML και scripts Η λειτουργία του browser συνοψίζεται ως έξης Φορτώνει το έγγραφο HTML (που περιέχει και scripts) Ξεκινά την ανάγνωση / συντακτική ανάλυση («parsing» ) του εγγράφου. Συναντά το tag <script>: Σταματά τη συντακτική ανάλυση του εγγράφου HTML Ζητά και φορτώνει το «εξωτερικό» αρχείο με το JavaScript script Εκτελεί το script Συνεχίζει τη συντακτική ανάλυση του εγγράφου HTML Αν συναντήσει και πάλι το tag < script > εκτελεί από το βήμα 3. Η συμπεριφορά αυτή αναφέρεται ως Blocking Behavior Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 64

65 Τύποι δεδομένων Πρωτογενείς Τύποι Δεδομένων number, string, boolean, function, object, null, undefined Υποστηρίζονται λειτουργικά από προκαθορισμένα αντικείμενα/μεθόδους Number, String, Boolean, Function, Object, Array Επιπλέον προκαθορισμένα βοηθητικά αντικείμενα/μέθοδοι Math, Date, RegExp Τα strings περιλαμβάνονται σε μονά ( ) ή διπλά ( ) εισαγωγικά Τα strings μπορούν να περιλαμβάνουν \n (newline), \" (double quote),.. Οι boolean παίρνουν τιμές true ή false Κάθε συνάρτηση/μέθοδος είναι και αντικείμενο 65

66 Ειδικοί τύποι και τιμές undefined: ο τύπος κάθε μεταβλητής της γλώσσας που δεν έχει οριστεί. ακόμα και αν αυτή έχει δηλωθεί! το undefined είναι επίσης «οντότητα» της γλώσσας, με τύπο undefined null: είναι ειδικό αντικείμενο με τύπο null Τελεστής typeof () επιστρέφει συμβολοσειρά με τον τύπο «οντότητας» To undefined είναι πιο όμοιο με το null της Java, παρά το null Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 66

67 Μεταβλητές Οι μεταβλητές ορίζονται με το var statement var pi = , x, y, name = Giorgos Οι μεταβλητές πρέπει να ξεκινούν με γράμμα ή underscore ( _ ) Τα ονόματα των μεταβλητών είναι case-sensitive Οι μεταβλητές δεν έχουν τύπο (untyped) και μπορούν να αποθηκευόσουν δεδομένα οποιουδήποτε τύπου Η λέξη var είναι προαιρετική αλλά η χρήση της συνιστάται Οι μεταβλητές που ορίζονται μέσα σε συναρτήσεις είναι τοπικές και μπορούν να χρησιμοποιηθούν μόνο μέσα στην συνάρτηση Οι μεταβλητές που ορίζονται εκτός συναρτήσεων είναι γενικές (global) Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 67

68 String Έχουν την ιδιότητα length: επιστρέφει το μήκος της συμβολοσειράς Κάποιες από τις διαθέσιμες μεθόδους charat ( idx ): χαρακτήρας στη θέση idx indexof ( chr ): πρώτη θέση με τον χαρακτήρα chr lastindexof ( chr ): τελευταία θέση με τον χαρακτήρα chr substing (from, to): υποσυμβολοσειρά από τη θέση from έως και to-1 tolowercase ( ) touppercase ( ) Υπάρχουν ακόμα μέθοδοι που αφορούν την εμφάνιση big ( ) small ( ) bold ( ) fontsize ( sz ). Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 68

69 Σύνταξη Αριθμητικοί τελεστές + - * / % Τελεστές σύγκρισης < <= ==!= >= > Λογικοί τελεστές &&! Τελεστές ανάθεσης = += -= *= /= %= Τελεστής String + Τα σχόλια είναι όπως στην C και στην Java Μεταξύ // και του τέλους της γραμμής Μεταξύ /* και */ Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 69

70 Τελεστές Σύγκρισης, < == και == Οι τελεστές == και! = μας είναι (συντακτικά) οικείοι από Java, C, C++. Τους αποφεύγουμε, εκτός αν είμαστε σίγουροι για το αποτέλεσμα Η JavaScript εισάγει δύο ακόμα τελεστές σύγκρισης: === και!== Αυτοί οι «νέοι» τελεστές σύγκρισης δουλεύουν όπως αναμένουμε Αποτιμώνται σε: true (===) και false (!==) αν αντίστοιχα: οι δύο τελεστέοι είναι του ίδιου τύπου αναπαριστούν την ίδια τιμή (σύνθετη, εφόσον πρόκειται για αντικείμενα) 70

71 Statements (1/2) Τα περισσότερα JavaScript statements έχουν δανειστεί από την C Ανάθεση τιμής greeting = "Hello, " + name; Σύνθετα statement { statement;...; statement } If statements if (condition) statement; if (condition) statement; else statement; Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 71

72 Statements (2/2) If statements (συν). switch(choice) { // choice is a string case "1" : statement; break; case "2": statement; break; default: statement; break; } Loop statements while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement; for ( var i = 1; i <= 100; ++i ) {/*...*/} Μην ξεχνάτε να χρησιμοποιείτε το var (εκτός - ίσως - αν το ί έχει ήδη δηλωθεί) 72

73 Αντικείμενα Στην JavaScript δεν δηλώνουμε τον τύπο των αντικειμένων Υπάρχουν αντικείμενα που δηλώνονται με την παρακάτω σύνταξη: { name1 : value1,..., namen : valuen } Παράδειγμα: circle = {centerx: 10, centery: 15, diameter: Length, perimeter: getperimeter(10,15)} Τα πεδία είναι centerx, centery, diameter και perimeter Τα 10 και 15 θεωρούνται numbers Το getperimeter είναι κλήση συνάρτησης Το Length είναι μεταβλητή που έχει οριστεί προηγούμενα Παράδειγμα document.write( H perimetros einai: + circle.diameter); Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 73

74 Δημιουργία αντικειμένων Με αρχικοποίηση var course = { members: "7", name=" Web Technologies" } Με την δημιουργία κενού αντικειμένου και προσθήκη πεδίων αργότερα var course = new Object(); course.members = "7"; course.name = Web Technologies"; Με την χρήση constructor: function Course(n, t) { this.members = n; this.name = t; } var course = new Course("7", "Web Technologies"); Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 74

75 Αλληλεπίδραση με HTML Η JavaScript μπορεί να έχει πρόσβαση στην HTML σελίδα και να αλλάξει, να προσθέσει ή να αφαιρέσει κάθε element ή attribute σε element Η πρόσβαση γίνεται μέσω του HMTL DOM (Document Object Model) document.documentelement όλο το HTML document.body το body document.getelementbyid( mydiv ) element με το συγκεκριμένο id document.myform φόρμα με το συγκεκριμένο όνομα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 75

76 Ανάκτηση HTML στοιχοίων του εγγράφου (1/2) Όνομα Ιδιότητας Επιστρέφει getelementbyld(<id>) Αντικείμενο τύπου HTMLEIement getelementsbyclassname(<dass>) Array αντικειμένων, HTMLEIement [ ] getelementsbyname(<name>) Array αντικειμένων, HTMLEIement [ ] getelementsbytagname(<tag>) Array αντικειμένων, HTMLEIement [ ] queryselector(<selector>) To 1 ο στοιχείο με τον δεδομένο CSS selector q ueryselectorall (<selector>) Array αντικειμένων, HTMLEIement [ ] Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 49

77 Ανάκτηση HTML στοιχοίων του εγγράφου (2/2) Όνομα Ιδιότητας Επιστρέφει activeelement HTMLEIement που έχει το «focus» body HTMLEIement που αναπαριστά το «σώμα» forms HTMLCollection (όλες οι φόρμες) head HTMLHeadElement (και τύπου HTMLEIement) images HTMLCollection (όλες οι εικόνες <img>) links HTMLCollection (όλοι οι σύνδεσμοι <a>) scripts HTMLCollection (όλα τα στοιχεία <script>) Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 50

78 Επεξεργασία των attibutes Στο ακόλουθο παράδειγμα: <a id= mylink href= title= Link to my university >Press Here</a> Tα attributes αλλάζουν ως εξής document.getelementbyid( mylink ).href = ; document.getelementbyid( mylink ).title = a new title ; document.getelementbyid( mylink ).innerhtml = Πατήστε εδώ ; Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 78

79 Event handlers Είναι ο τρόπος με τον οποίο συνδέουμε events με JS functions Μοιάζουν με τα συνήθη HTML attributes Ξεκινούν με την λέξη «on» ακολουθούμενη από το event name π.χ. onmouseover = myonmouseover(); π.χ. onmouseover = alert(some message); Οι event handlers μπορεί να αναφέρονται σε τρία επίπεδα ολόκληρου του εγγράφου μιας φόρμας ενός στοιχείου μιας φόρμας Στην HTML5 event handlers μπορούν να προστεθούν σε οποιοδήποτε element Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 79

80 Events Window Events onload onunload Form Events onchange onsubmit onreset onselect onblur onfocus Η HTML5 έχει εισάγει πολλά νέα events! eventattributes.asp Keyboard Events onkeydown onkeypress onkeyup Mouse Events onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup 27

81 Event handlers σε φόρμες Τα elements της φόρμας μπορούν να χειρίζονται διάφορα events focus Αποκτά το focus (π.χ. ο κέρσορας σε ένα textfield) blur χάνει το focus change αλλάζει το value Το option tag δεν δημιουργεί τα παραπάνω συμβάντα Όλοι οι τύποι button έχουν click event handlers με τη χρήση του onclick attribute Παράδειγμα: <form name="myform"> <input type="radio" name="payment" value="1" checked onclick="insok()"> Personal Check <input type="radio" name="payment" value= "2" onclick="insok()"> Gold Bullion </br> <input type= "checkbox" name= "insurance" > Insurance? </form> Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 81

82 Επικύρωση πεδίου για πλήθος χαρακτήρων <html><head> <script> function validate() { x=document.myform; input=x.myinput.value; if (input.length>5) { alert("όχι περισσότερους από 5 χαρακτήρες"); return false } else { return true } } </script></head> <body> <form name="myform" action="submitpage.html" onsubmit="return validate()"> Μην γράψετε περισσότερους από 5 χαρακτήρες : <input type="text" name="myinput"> <input type="submit" value="send input"> </form> </body></html> 82

84 Client-Server & PHP Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 84

85 Βασική σύνταξη ΡΗΡ Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 85

86 Μεταβλητές (2/5) <?php $txt="hello World!"; $x=5; $y=10.5;?> Υποστηρίζονται οι τύποι δεδομένων int: 5, 7 15 float, double, real: 0.56, 3.14 string: "Hello", "Red 15" bool, boolean: true/false array: ["Fiat", "Mercedes", "Nissan"] οbject: τύπος αντικειμένου για σύνθετα αντικείμενα NULL: «όχι τιμή» 86

87 Πίνακες Ένα array αποθηκεύει πολλαπλές τιμές σε μία μοναδική μεταβλητή Τρεις τύποι πινάκων Array με δείκτες - Πίνακες με αριθμητικό δείκτη Associative array - Πίνακες με κλειδιά ονομάτων Πολυδιάστατα arrays - Πίνακες που περιέχουν μία ή περισσότερες συστοιχίες Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 87

88 Associative arrays Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 88

89 Συμβολοσειρές Διπλά εισαγωγικά > αντικατάσταση Μονά εισαγωγικά > μη-αντικατάταση Συνένωση με τον τελεστή τελεία Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 89

90 Βρόχος foreach Διευκολύνει την πρόσβαση στις τιμές ενός array Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 90

91 Superglobals (2/2) Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 91

92 Προκαθορισμένες τιμές ορισμάτων Μπορούμε να θέσουμε μια προκαθορισμένη τιμή σε ένα ή περισσότερα ορίσματα, ώστε αν δεν αποστείλουμε τιμή να λαμβάνει αυτή Ορισμός με προκαθορισμένα ορίσματα Παράδειγμα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 92

93 Επιστροφή τιμής Η συνάρτηση μπορεί επίσης να μας επιστρέφει κάποια τιμή. Αυτό γίνεται με την εντολή return Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 93

94 Αντικείμενα Δήλωση κλάσεων με τη λέξη-κλειδί class Προσοχή: τα ονόματα των κλάσεων είναι case-sensitive Ενσωματωμένη συνάρτηση print_r: εκτυπώνει πληροφορίες για το αντικείμενο σε αναγνώσιμη μορφή 94

95 Δημιουργία αντικειμένων Με τη λέξη-κλειδί new $object = new User; $object = new User('John Doe', 'j0hnd03'); Μια κλάση μπορεί να απαιτεί ή να απαγορεύει τα ορίσματα στην αρχικοποίηση Μπορεί επίσης να τα επιτρέπει, αλλά να μην τα απαιτεί Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 95

96 Πρόσβαση σε αντικείμενα (1/2) Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 96

97 Πρόσβαση σε αντικείμενα (2/2) Πρόσβαση στην (public) ιδιότητα property αντικειμένου $object με: $object->property και όχι με $object-> $property Με παρόμοιο τρόπο καλούμε μεθόδους: $object->save_user(); Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 97

98 Κλωνοποίηση αντικειμένων Έξοδος Έξοδος Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 98

99 Χειρισμός φορμών Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 99

100 Χρήση της Superglobal μεταβλητής $_REQUEST Χρησιμοποιείται για την πρόσβαση δεδομένων φόρμας που έχουν αποσταλεί είτε με μέθοδο GET είτε με μέθοδο POST Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 100

101 Διαδικασία Σύνδεση στον διακομιστή (server) του ΣΔΒΔ Επιλογή Βάσης Δεδομένων από τον διακομιστή Πολλές ΒΔ μπορεί να είναι διαθέσιμες στον ίδιο διακομιστή Δημιουργία συμβολοσειράς ερωτήματος προς τη ΒΔ Εκτέλεση ερωτήματος προς τη ΒΔ Ανάκτηση αποτελεσμάτων ερωτήματος και προβολή σε HTML Αποσύνδεση από το διακομιστή του ΣΔΒΔ Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 101

102 Σύνδεση με διακομιστή ΒΔ Το ΣΔΒΔ προσβαίνεται μέσω διακομιστή Για σύνδεση σε αυτόν χρησιμοποιείται η (ενσωματωμένη) κλάση mysqli: $conn = new mysqli($host, $uname, $passwd, $db); Ορίσματα $host: διεύθυνση του διακομιστή ΣΔΒΔ $uname: όνομα χρήστη στον διακομιστή ΣΔΒΔ $passwd: κωδικός χρήστη στον διακομιστή ΣΔΒΔ $db: όνομα βάσης στην οποία θέλουμε να εργαστούμε Αν δε θέλουμε να δηλώσουμε βάση, παραλείπουμε το όρισμα $db $conn = new mysqli($host, $uname, $passwd); Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 102

103 Δημιουργία ΒΔ Κατόπιν σύνδεσης στο ΣΔΒΔ Δημιουργούμε νέα βάση δεδομένων με τη μέθοδο mysqli::query // Create database $sql = "CREATE DATABASE mydb"; if ($conn->query($sql) === TRUE) { echo "DB created successfully"; } else { echo "Error creating DB: ". $conn->error; } Η μέθοδος mysql::query εκτελεί ερωτήσεις SQL προς το ΣΔΒΔ Επιστρέφει το αποτέλεσμα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 103

104 Παράδειγμα Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 104

105 Δημιουργία πίνακα στη ΒΔ (SQL statement) Ερώτημα SQL CREATE TABLE phonebook ( ) id INT NOT NULL, PRIMARY KEY(id), lname VARCHAR(20) NOT NULL, fname VARCHAR(20), address VARCHAR(30), age INT, phone VARCHAR(1O) Παρατήρηση Επιλέγεται το πεδίο id σαν πρωτεύον κλειδί Θα πρέπει η τιμή του να διαφέρει σε κάθε εγγραφή 105

106 Ανάκτηση δεδομένων: 1-1 πεδίο Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 106

107 Ανάκτηση δεδομένων: 1-1 εγγραφή Προγραμματισμός Παγκόσμιου Ιστού, 11η Διάλεξη 107