CSS σημαίνει Cascading Style Sheets. Και τι σημαίνει αυτό; Ας το πάρουμε από την αρχή.

Η γνωστή σε όλους μας γλώσσα προγραμματισμού ιστοσελίδων και εφαρμογών, η HTML, χρησιμοποιείται για την δημιουργία και την περιγραφή στοιχείων σε μια ιστοσελίδα. Όταν λοιπόν εμείς διαβάζουμε ένα κείμενο, όπως αυτό που διαβάζεται αυτήν την στιγμή, o browser μας, δεν το “διαβάζει” όπως και εμείς. Συνήθως τα κείμενα που βρίσκονται σε μια ιστοσελίδα, είναι περιτρυγυρισμέμα σε paragraph tags. Τα Tags είναι ο τρόπος που χρησιμοποιείται για να περιγράψουμε αντικείμενα. Έτσι, ότι βρίσκεται ανάμεσα σε tags, παίρνει και τις αντίστοιχες ιδιότητες.

Αν λοιπόν το κείμενο “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” το γράψουμε <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, αυτό θα πάρει τις ιδιότητες της παραγράφου, ενώ αν το γράψουμε <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> θα γίνει bold.

Ωραία ως εδώ. Τι γίνεται όμως όταν θέλουμε αυτό το κείμενο να έχει μεγαλύτερο μέγεθος από κάποιο άλλο στοιχείο paragraph στην ιστοσελίδα μας; H ακόμα χειρότερα άμα θέλουμε να έχουμε 8 διαφορετικά είδη παραγράφων και τίτλων; Εδώ έρχονται και συμπληρώνουν τα CSS. Μέσα από τους selectors (επιλογέας) μπορούμε να “στοχεύσουμε ” στοιχεία στην HTML σελίδα, και να τους δώσουμε στυλ.

Σύνταξη – Δομή

Για να στοχεύσουμε λοιπόν τα διάφορα στοιχεία στην σελίδα μας, πρέπει να γνωρίζουμε την δομή και την σύνταξη μιας CSS εντολής. Ας δούμε καλύτερα σε ένα γράφιμα

Το παραπάνω παράδειγμα, “στοχεύει” όλα τα στοιχεία H1 στην ιστοσελίδα μας. H1 είναι ο μεγαλύτερος σε μέγεθος τίτλος σε ένα κείμενο. Αρχίζοντας λοιπόν, σαν selector, χρησιμοποιούμε το όνομα του tag που θέλουμε να αλλάξουμε. Αφήνουμε ένα κενό, και  ανοίγουμε αγκύλες. Ότι περιέχεται μέσα στις αγκύλες είναι η δήλωση μας . Χρησιμοποιόντας την ιδιότητα (property) color στοχεύουμε το χρώμα του κειμένου. Αμέσως μετά την ιδιότητα βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή μας. Για να κλείσουμε την πρώτη δήλωση, χρησιμοποιούμε το ελληνικό ερωτηματικό (semicolon). Στην δεύτερη δήλωση, χρησιμοποιούμε την ιδιότητα font-size, η οποία αλλάζει το μέγεθος του κειμένου. Βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή που θέλουμε να έχει σε pixels. Κλείνουμε με ελληνικό ερωτηματικό, και με την ανάποδη αγκύλη.

Χρησιμοποιόντας λοιπόν τα CSS μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας, και να τους δώσουμε ζωή. Δείτε τον κώδικα ζωντανά μέσω του w3scholls.com χρησιμοποιόντας τον σύνδεσμο που ακολουθεί

Id και Class

Επειδή τα tags της HTML είναι περιορισμένα, τα CSS μας δίνουν την δυνατότητα να δηλώσουμε τα δικά μας μοναδικά ή μη στοιχεία, και να τους δώσουμε στύλ. Αυτό το κάνουμε χρησιμοποιόντας μέσα στα division tags της HTML (τα γνωστά divs) , ID και CLASS. Πως το κάνουμε αυτό; Ας δούμε ένα γράφιμα.

Στα παραπάνω παραδείγματα, βλέπουμε πως μπορούμε να “τυλίξουμε” την παράγραφο μας μέσα σε divs, και να επιλέξουμε ακριβώς αυτό που θέλουμε για να του δώσουμε στύλ. Στην πρώτη περίπτωση μπορεί να θέλουμε να βάλουμε το κείμενο στο κέντρο αλλά να μην θέλουμε το ίδιο για όλα τα <p> tags της σελίδας μας. Έτσι γράφουμε

.test { color: black; text-align:center;}

Αυτό θα επιλέξει όλο το div και θα μετακινίσει το κείμενο του στο κέντρο, χωρίς να επιρεάσει άλλα paragraphs στην σελίδα.

Αν θέλουμε να επιλέξουμε την παράγραφο που υπάρχει μέσα στο div, γράφουμε

.test p { color: black; text-align:left;}

Γενικότερα, όταν θέλουμε να επιλέξουμε στοιχεία μέσα σε divs, γράφουμε αναλυτικά όλο το “μονοπάτι” μέχρι να φτάσουμε σε αυτά. Ας δούμε για παράδειγμα το 3 κώδικα στο γράφιμα παραπάνω. Έχουμε ένα paragraph μέσα σε ένα div μέσα σε ένα id. Για να επιλέξουμε και να δώσουμε στυλ μόνο στην παράγραφο, γράφουμε

#test .test p { color:white; }

Παρατηρήστε ότι έχουμε το ίδιο όνομα στο class και στο id μας. Αυτό δεν πειράζει καθόλου. Τα ID και τα Classes είναι διαφορετικά στοιχεία και έτσι επιτρέπεται να έχουν το ίδιο όνομα.

ΠΡΟΣΟΧΗ: Το σωστό είναι όταν χρησιμοποιούμε ID να μην εμφανίζουμε το ίδιο στοιχείο πάνω από μια φορά στην σελίδα μας. Τα ID δηλώνουν μοναδικά στοιχεία. Το αντίθετο συμβαίνει με τα Classes. Μπουρούμε να έχουμε απεριόριστα αντίγραφα του class μέσα στην σελίδα μας.

Cascading

Και τι πάει να πεί Cascading; Είναι αναφορά στο φαινόμενο του καταράχτη, και ουσιαστικά δείχνει την κληρονομικότητα που έχουν τα στοιχεία των CSS. Και πως εφαρμόζεται αυτό;

Στο τρίτο παράδειγμα που γράψαμε παραπάνω, αν γράψουμε

#test .test p { color:white; }

θα “στοχεύσουμε” την παράγραφο κατευθείαν, και θα της δώσουμε στύλ συγκεκριμένα. Αν όμως δώσουμε στύλ στο ID τι θα συμβεί;

#test { color:white; }

Ακριβώς το ίδο. Όλα τα στοιχεία που περιέχονται μέσα στο ID αυτό θα κληρονομίσουν την ιδιότητα να έχουν λευκό χρώμα στα γράμματα.

Στο επόμενο μέρος…

Αφού κάναμε μια εισαγωγή στα CSS, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τις επιλογές, τα Ids και τα Classes, και θα ξεκινήσουμε να δίνουμε στύλ σε στοιχεία. Μέχρι τότε, περιμένουμε να ακούσουμε τις απόψεις σας και τις πρακτικές σας πάνω σε θέματα χρήσης των CSS.

Καταρχάς θα χρειαστούμε μια φόρμα την οποία πρέπει να συμπληρώσει ο χρήστης για να προχωρήσει στην εγγραφή του .

Ο παρακάτω κώδικας είναι μια απλή φόρμα με λίγο κώδικα της php ο οποίος θα μας χρησιμεύσει αργότερα για την εμφάνιση μηνυμάτων.

forma.php
<?php
session_start();
?>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Φόρμα Εισαγωγής στοιχείων</title>
</head>
<body>
<pre>
<form action="register.php" method="get" >
Όνομα : <input name="name" style="background:#3281C0" /><br />
Κωδικός:<input name="name" style="background:#3281C0"  /><br />
Email : <input name="email"  style="background:#3281C0"  />
<br />
<input value="Καταχωρηση" />
<?php
if (isset($_SESSION['errors'])){
echo $_SESSION['errors'];
}
else
echo $_SESSION['error2']; ?>
</pre>
</form>
</body>
</html>

Η Βάση Δεδομένων

Έπειτα θα χρειαστούμε μια βάση δεδομένων στην οποία θα καταχωρήσουμε τα στοιχειά που θα εισάγουν οι χρήστες

Ας δούμε λοιπόν πως θα δημιουργήσουμε αυτή την βάση :

Δημιουργία βάσης :

CREATE DATABASE `Greektuts` ;

έπειτα αφού επιλέξουμε την βάση δημιουργούμε έναν πίνακα:

Δημιουργία πίνακα:

CREATE TABLE `Greektuts`.`Register` (

`Name` VARCHAR( 40 ) NOT NULL ,
`Password` VARCHAR( 40 ) NOT NULL ,
`Email` VARCHAR( 60 ) NOT NULL ,
PRIMARY KEY ( `Name` )

) ENGINE = MYISAM ;

Έτσι έχουμε δημιουργήσει την βάση μας και τον πίνακα μας .

Διαχείρηση Δεδομένων

Τώρα το κομμάτι του κώδικα που θα διαχειριστεί τα δεδομένα:

Δημιουργούμε ένα αρχείο php με όνομα register.php

Για αρχή θα δημιουργήσουμε μια function για να διαχειριζόμαστε την σύνδεση μας με την βάση

<?php
function db_con(){
$connection=mysql_connect("$localhost","$db_username","db_password") or die("Δεν επιτεύχθηκε η σύνδεση");
$db_selct=mysql_select_db($db_name,$connection) or die("Δεν επιτεύχθηκε η σύνδεση με τον πίνακα ");
}
?>

Λοιπόν δημιουργήσαμε μια μέθοδο για να μπορούμε να την καλούμε όποτε εμείς θέλουμε

Ας δούμε αναλυτικά τι κάναμε μέχρι στιγμής

Είναι ο κώδικας σύνδεσης στην βάση

$connection=mysql_connect("$localhost","$db_username","db_password") or die("Δεν επιτεύχθηκε η σύνδεση");

Σημαντικό*

Αντικαταστήστε το $localhost,$db_username,$db_password και παρακάτω το $db_name

με τα δικά σας στοιχειά ένα παράδειγμα :

$connection=mysql_connect("localhost","root","") or die("Δεν επιτεύχθηκε η σύνδεση");

Η σύνδεση αυτή καθορίζει το όνομα της βάσης την οποία θέλουμε να επιλέξουμε

$db_selct=mysql_select_db($db_name,$connection) or die("Δεν επιτεύχθηκε η σύνδεση με τον πίνακα ");

Έπειτα προχωράμε παρακάτω :

<?php
session_start();
$name = $_POST['name'];
$pass = $_POST['password'];
$email = $_POST['email'];
if(isset($_POST['submit'])){
unset($_SESSION['errors']);
if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί ";
}
if(empty($pass)){
$_SESSION['errors'].=" Το πεδιο κωδικός θα πρέπει να συμπληρωθεί ";
}
if(empty($email)){
$_SESSION['errors'].=" Το πεδιο email θα πρεπει να συμπληρωθει ";
}

Εδώ απλά κάνουμε έναν έλεγχο απλό για το αν έχουν εισαχθεί δεδομένα στην φόρμα που είχαμε δημιουργήσει προηγουμένως.

Ας το πάρουμε κομμάτι κομμάτι

session_start();

αυτή η μέθοδος θα μας χρησιμεύσει αργότερα για την επιστροφή μηνυμάτων στον χρήστη .

Ο παρακάτω κώδικας ελέγχει αν έχει “πατηθεί “ το κουμπί Καταχώρησε αν όντως έχει “πατηθεί”

τότε βγάζει όλα τα δεδομένα από το $_SESSION['errors'] ώστε να μην έχουμε κολλήματα αργότερα

if(isset($_POST['submit'])){
unset($_SESSION['errors']);

Εδώ κάνουμε έναν έλεγχο από τους πιο απλούς που θα μπορούσατε να κάνετε

ελέγχουμε αν το πεδίο όνομα είναι άδειο αν ναι τότε εκχωρούμε μέσα στο $_SESSION  το ακόλουθο μήνυμα. Το ίδιο γίνετε για όλα τα πεδία τα οποία θέλουμε να ελέγξουμε.

if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί ";
}

Παρατήρηση στο δεύτερο έλεγχο και ούτω κάθε ξης βάζουμε μια . πριν το =

Τέλος προσθέτουμε λίγο ακόμη έλεγχο και είμαστε έτοιμοι

if(!isset($_SESSION['errors'])){
db_con();
$query=mysql_query("SELECT * FROM register where Name='$name' ") or die("Κάτι πήγε στραβά");
$check=mysql_num_rows($query);
if($check >0){
$_SESSION['error2']="Το όνομα χρήστη $name υπάρχει ήδη στην βάση ";
header( "Location: forma.php" );
}
else {
$query=("INSERT INTO register (Name, Password,Email) VALUES ('$name', '$pass', '$email')");
$insert=mysql_query($query);
}
}
else {
header( "Location: forma.php" );
}
}

Ελέγχουμε αν υπάρχουν errors αν όχι τότε προχωράμε στον επόμενο έλεγχο ο οποίος είναι η ύπαρξη του ονόματος που εισαχθεί μέσα στην βάση μας. Εάν υπάρχει τότε δηλώνουμε το μήνυμα σε μια μεταβλητή και στέλνουμε τον χρήστη πίσω στην φόρμα εκεί θα του επιστρέφουν τα ανάλογα μηνύματα.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ



Όπως είπα παραπάνω, ο έμπειρος προγραμματιστής έχει μια σειρά τρόπων για να κατανοεί τη σπουδαιότητα μιας γλώσσας προγραμματισμού. Ένα πολύ πρακτικός τρόπος, που αποτελεί και γενική πρακτική, είναι η αξιολόγηση των εφαρμογών που έχουν υλοποιηθεί κάνοντας χρήση της γλώσσας αυτής.

Ο Chuck Norris και η Python

Ο Chuck Norris αποτελεί πλέον persona – φαινόμενο χάρη στο διαδικτυακό καλαμπούρι που ξεκίνησε στις τάξεις των geeks του διαδικτύου (http://www.chucknorrisfacts.com/). Αποτελεί δηλαδή ένα παράδειγμα χαρακτήρα που, ενώ η πρωταρχική του ιδιότητα θα μπορούσε να χαρακτηρισθεί αδιάφορη, η χρήση του σε ένα πετυχημένο (και παράλληλα έξυπνο) project, όχι μόνον τον έφερε και πάλι στο προσκήνιο, αλλά εκτίναξε και το «κασέ» του, στα ύψη.

Με παρόμοιο τρόπο η Python αντλεί μεγάλη δύναμη μέσα από τις εφαρμογές για την υλοποίηση των οποίων έχει χρησιμοποιηθεί. Προφανώς η Python, σαν γλώσσα προγραμματισμού, έχει κάποια δυνατά σημεία και κάποιες αδυναμίες. Και οι δύο αυτές κατηγορίες σημείων όμως, κατά την προσωπική μου άποψη, περιλαμβάνουν ζητήματα υποκειμενικά. Μία εφαρμογή αντίθετα, χαρακτηρίζεται από χαρακτηριστικά όπως λειτουργικότητα, ορθότητα (ύπαρξη κατά το δυνατό λιγότερων λαθών), φορητότητα (υποστήριξη διαφορετικών λειτουργικών συστημάτων, κλπ. Αυτά τα χαρακτηριστικά, όντας εύληπτα από τους περισσότερους χρήστες, έμπειρους και μη, διευκολύνουν την αξιολόγηση της ίδιας της γλώσσας προγραμματισμού (κρίση δια του αποτελέσματος) μέσα από μία, θεωρώ, αντικειμενικότερη ματιά.

Αν λοιπόν η επιτυχία του Chuck Norris εκτινάχθηκε στα ύψη από την δημοσιοποίηση ενός καλοστημένου project σκεφθείτε που πρέπει να κατατάξουμε την γλώσσα Python μετά την παρουσίαση όχι μιας, ούτε δύο αλλά 4 + 1 εκπληκτικών εφαρμογών.

Έχετε δίπλα σας την κούπα με τον αγαπημένο καφέ ή τσάι; Ας ξεκινήσουμε…

Mercurial: Δουλέψτε ευκολότερα, δουλέψτε ταχύτερα

Αποτελεί εργαλείο που απευθύνεται κυρίως σε ανθρώπους που ασχολούνται με την ανάπτυξη λογισμικού. Πρόκειται για μια εφαρμογή ανοικτού λογισμικού (δηλαδή ο κώδικας διατίθεται ελεύθερα προς χρήση και τροποποίηση) η οποία λειτουργεί σε Windows, Mac OS X και στα περισσότερα συστήματα τύπου UNIX. Αποστολή του είναι η ομαδική ανάπτυξη ενός έργου λογισμικού με ταυτόχρονη παρακολούθηση, καταγραφή και τήρηση ιστορικού των αλλαγών που γίνονται από τους προγραμματιστές που συμμετέχουν στο έργο. Παρακολουθούνται αρχεία τύπου text αλλά και binary αρχεία.

Η εφαρμογή διατίθεται κάτω από άδεια GNU GPL ενώ ο δημιουργός και κύριος προγραμματιστής του έργου είναι ο Matt Mackall. Η υλοποίησή της βασίζεται στις γλώσσες Python και C.

Επίσημη ιστοσελίδα: http://mercurial.selenic.com/

Gwibber: Microblogging Freedom

Η εφαρμογή gwibber αποτελεί μια δωρεάν εφαρμογή πελάτη για τη διαχείριση γνωστών ιστοσελίδων κοινωνικής δικτύωσης (Twitter, Identi.ca, StatusNet, Facebook, FriendFeed, Digg, Flickr, Qaiku). Είναι φτιαγμένη για εμφανίζει στον χρήστη, ανά πάσα στιγμή, διαφορετικές ροές. Απευθύνεται σε λειτουργικά συστήματα Linux (είναι μάλιστα προεγκατεστημένη στην έκδοση 10.04 της διανομής Ubuntu).

Επίσημη ιστοσελίδα: http://gwibber.com/

Emesen: An IM for the WLM^TM network

Πρόκειται για μία από τις αγαπημένες μου εφαρμογές για λειτουργικά συστήματα Linux. Αντικαθιστά επάξια το MSN των Windows.

Αποστολή του είναι να «αντιγράψει» τις ιδιότητες του MSN προσφέροντας στον χρήστη Linux Λειτουργικών συστημάτων ένα εύχρηστο αλλά παράλληλα οικείο περιβάλλον αποστολής προσωπικών μηνυμάτων.

Λειτουργεί άψογα με λογαριασμούς Microsoft και φυσικά διατίθεται δωρεάν με άδεια GNU GPL.

Όπως και πριν, το Emesen είναι γραμμένο σε Python.

Επίσημη ιστοσελίδα: http://www.emesene.org/

Trac: Integrated SCM & Project Management

Ακόμη ένα εξαιρετικό εργαλείο για ανάπτυξη και εκσφαλμάτωση λογισμικού γραμμένο αποκλειστικά σε Python. Διατίθεται δωρεάν και αποτελεί λογισμικό ανοικτού κώδικα. Η αρχική του ονομασία ήταν svntrac λόγω της ικανότητάς του να συνεργάζεται με το Subversion.

Επίσημη ιστοσελίδα: http://trac.edgewall.org/

(+1) Django: Web framework για τελειομανείς με deadlines

Το Jango αποτελεί στην κυριολεξία ένα trend της εποχής. Πρόκειται για ένα Web Framework που διατίθεται δωρεάν κάτω από BSD License και φυσικά ο κώδικάς του είναι ανοικτός. Η μυστήρια ονομασία του προέρχεται από τον τσιγγάνο κιθαρίστα Django Reinhardt. Είναι γραμμένο εξ’ ολοκλήρου σε Python.

Επίσημη ιστοσελίδα: http://www.djangoproject.com

Για όσους από εσάς λοιπόν δεν είναι ξεκάθαρο το πόσο σημαντική γλώσσα είναι η Python, οι παραπάνω εφαρμογές έρχονται να «ξεκαθαρίσουν» το τοπίο, κάνοντας σαφές με τον καλύτερο τρόπο ότι κάποιος που γνωρίζει καλά Python, μπορεί να υλοποιήσει μια μεγάλη γκάμα πραγμάτων, που εμπίπτουν σε ποικιλία τεχνολογιών.

Μέχρι την επόμενη λοιπόν φορά που θα τα πούμε…

…να είστε καλά και να προσέχετε τον εαυτό σας.

Στο τέλος του οδηγού θα μπορούμε:

• Να κάνουμε χρήση των κλασικών JQuery selectors
• Να κάνουμε χρήση των ιεραρχικών JQuery selectors

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.

Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)

Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

• Τις δύο εκδόσεις της JQuery
• Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

• Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
• Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Τι είναι οι JQuery Selectors;

Αναρωτηθήκατε ποτέ γιατί η JQuery ονομάστηκε έτσι; Πολλοί από εσάς ίσως αναγνωρίζουν το J σαν συντομογραφία της JavaScript αλλά, το Query που κολλάει;

Θα σας βοηθήσω. Η έννοια query είναι γνωστότερη στην περιοχή των βάσεων δεδομένων όπου περιγράφει μία ερώτηση, μία αναζήτηση αν θέλετε, του χρήστη ως προς τη βάση δεδομένων με σκοπό να του επιστραφεί το σύνολο των εγγραφών, των στοιχείων δηλαδή της βάσης δεδομένων, που ικανοποιούν το ερώτημα αυτό. Σε μία βάση δεδομένων με τα δημογραφικά στοιχεία μιας χώρας για παράδειγμα ενδεικτικά queries θα μπορούσαν να είναι: «Αναζητώ όλους τους άνδρες με ηλικία άνω των 50 ετών», ή «Αναζητώ όλους τους κατοίκους της περιοχής Άνω Πόλη» ή «Αναζητώ γυναίκες μεταξύ 25 και 35 ετών που είναι ανύπαντρες» (ΟΚ το τελευταίο ακούγεται κάπως αλλά εν πάση περιπτώσει αντιλαμβάνεστε πως λειτουργεί ένα query).

Στην JQuery ένα query λειτουργεί με παρόμοιο τρόπο. Αναλαμβάνει να συλλέξει ένα σύνολο από τα στοιχεία που βρίσκονται στην υπό ανάπτυξη ιστοσελίδα ώστε να μπορέσει στη συνέχεια, ο προγραμματιστής, να επέμβει σε αυτά (είτε αισθητικά, είτε λειτουργικά). Τον ρόλο των queries στην JQuery βιβλιοθήκη παίζουν δύο ομάδες συναρτήσεων που ονομάζονται Selectors και Filters αντίστοιχα. Σήμερα θα ασχοληθούμε με τους Selectors.

Κάτι μου θυμίζει…

Αν η παραπάνω συζήτηση σας φαίνεται γνώριμη τότε μάλλον έχετε παρακολουθήσει κάποιο από τα άρθρα που συνιστούμε ως προαπαιτούμενα στην αρχή του άρθρου. Σε αυτά τα δύο άρθρα, ο Παναγιώτης Γρηγορόπουλος έχει περιγράψει το μεγαλύτερο μέρος των βασικών σημείων της βιβλιοθήκης της JQuery και, όπως είναι φυσικό, έχει ασχοληθεί και με το θέμα των Selectors. Σε αυτό εδώ το άρθρο, θα δούμε το ζήτημα αυτό αναλυτικότερα και θα παρουσιάσουμε εξειδικευμένα παραδείγματα. Ακόμη και αν έχετε διαβάσει τα παραπάνω άρθρα, μείνετε μαζί μας. Σας υπόσχομαι ότι δεν θα βαρεθείτε J

JQuery selectors. Πλοηγηθείτε στα στοιχεία της ιστοσελίδας σας.

Για την καλύτερη κατανόηση των εννοιών που παρουσιάζουμε σε αυτό το άρθρο έχω ετοιμάσει ένα δείγμα ιστοσελίδας στο οποίο και θα δουλεύουμε για λίγο καιρό. Το αποτέλεσμα, όταν το ανοίξουμε με τον αγαπημένο μας browser μοιάζει κάπως έτσι:

Αντίστοιχα ο κώδικας του αρχείου χωρίς το κομμάτι της JQuery είναι ο ακόλουθος:

<html>

<head>

<title>JQuery Selectors | GreekTuts.net</title>

</head>

<body>

<h1 id="header">Μια επικεφαλίδα</h1>

<p>Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου.</p>

<p id="secondparagraph">Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος.</p>

<table>

<tr>

<td>Δεδομένο 1.1</td>

<td>Δεδομένο 1.2</td>

<td>Δεδομένο 1.3</td>

</tr>

<tr>

<td>Δεδομένο 2.1</td>

<td>Δεδομένο 2.2</td>

<td>Δεδομένο 2.3</td>

</tr>

<tr>

<td>Δεδομένο 3.1</td>

<td>Δεδομένο 3.2</td>

<td class="someclass">Δεδομένο 3.3</td>

</tr>

</table>

<p>3η παράγραφος...</p>

<p>4η <b>παράγραφος...</b> ( μπορεί να γίνεται <b>κουραστικό</b> αλλά είναι για καλό σκοπό   )</p>

</body>

</html>

Ας πάμε να εμπλουτίσουμε τον κώδικά μας με λίγο JQuery και να δούμε πως μπορούμε να επιλέξουμε κάποια από τα στοιχεία στην ιστοσελίδα μας. Υπενθυμίζω ότι ο κώδικας JQuery μπαίνει στο τμήμα <head> … </head> της ιστοσελίδας μας και αρχίζει πάντοτε με την συμπερίληψη της βιβλιοθήκης JQuery.

<script src="jquery-1.4.2.min.js"></script>

Στη συνέχεια πρέπει να δηλώσουμε στον browser ότι θέλουμε ο JQuery κώδικάς μας να εκτελεστεί όταν φορτώνεται η ιστοσελίδα. Για τον λόγο αυτό δηλώνουμε την παρακάτω συνάρτηση μέσα στην οποία θα πειραματιστούμε (τώρα και σε όλα τα υπόλοιπα άρθρα της σειράς)

<script>

$("document").ready(function() {

//κώδικας

});

</script>

Μερικοί απλοί selectors

Πριν ξεκινήσουμε 1 – 2 διευκρινήσεις:

• HTML tag: Ένα html tag είναι μια λέξη κλειδί (εντολή) της html. Π.χ. <body>, <p>, <li>, <b>, κλπ.
• .css(…): Συνάρτηση της JQuery που επεμβαίνει στο CSS του στοιχείου που προηγείται της τελείας και επιδρά με τον τρόπο που περιγράφουν τα ορίσματα της παρένθεσης. Στο σημερινό άρθρο θα συναντήσετε την δήλωση css(“border”, “thin solid red”). Αυτό που πρακτικά κάνει είναι να περικλείει το / τα επιλεγμένο(α) στοιχείο(α) σε ένα κόκκινο πλαίσιο ώστε να μπορείτε να δείτε το αποτέλεσμα του JQuery κώδικα κάθε φορά. Θα σας πρότεινα να αγνοήσετε τον τρόπο που λειτουργεί για την ώρα. Επικεντρωθείτε στους selectors.
• Σχόλια JQuery ( // ): Όπως σε κάθε γλώσσα προγραμματισμού έτσι και στην JQuery υπάρχει η δυνατότητα δήλωσης σχολίων. Αυτή γίνεται με την προσθήκη των χαρακτήρων // μπροστά από τη γραμμή που θέλουμε να προσδιορίσουμε ως σχόλιο. Στο σημερινό παράδειγμά μας (που μπορείτε να κατεβάσετε στο τέλος του άρθρου) θα βρείτε συγκεντρωμένους όλους τους selectors που θα παρουσιάσουμε. Για να μην μπερδευτείτε, τους δίνουμε υπό μορφή σχολίων. Κάθε φορά που θέλετε να δοκιμάσετε κάποιον το μόνο που έχετε να κάνετε είναι να αφαιρέσετε το // μπροστά από τη γραμμή που σας ενδιαφέρει (και φυσικά να προσθέσετε // σε όλες τις υπόλοιπες) ώστε να είναι ενεργοποιημένος μόνον ένας selector κάθε φορά.

Επιλογή όμοιων tags

$("p").css("border", "thin solid red")

Ο παραπάνω selector θα επιλέξει όλα τα στοιχεία <p> που βρίσκονται στην ιστοσελίδα μας. Όπως παρατηρείτε ο selector δεν είναι τίποτε άλλο παρά το σήμα κατατεθέν της JQuery (δηλαδή το $) ακολουθούμενο από τον προσδιοριστή που θέλουμε, στην περίπτωσή μας το p κλεισμένο σε παρενθέσεις και διπλά εισαγωγικά. Παρατηρήστε ότι βάζουμε την περιγραφή του tag μόνο, χωρίς τα < > στα οποία περικλείεται κανονικά.

Επιλογή στοιχείων με ίδια κλάση

$(".someclass").css("border", "thin solid red")

Πολλές φορές ρυθμίζουμε την εμφάνιση συγκεκριμένων στοιχείων κάνοντας χρήση κλάσεων CSS. Με τον selector $(“.myClass”) μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας που ανήκουν σε αυτήν την κλάση.

Επιλογή στοιχείου με βάση το id

$("#header").css("border", "thin solid red")

Ένας άλλος μηχανισμός που προσφέρεται από τα CSS είναι τα ids. Ο selector $(“#id”) μας επιτρέπει να διαχειριστούμε στοιχεία με ids μέσω της JQuery.

Επιλογή στοιχείων με βάση το tag και την κλάση

$("td.someclass").css("border", "thin solid red")

Είναι εφικτό να υπάρξουν συνδυαστικοί selectors. Ο παραπάνω επιλέγει όλα τα tags τύπου td που όμως ανήκουν στην κλάση someclass.

Επιλογή στοιχείων με βάση το tag, το id και την κλάση

$("p#secondparagraph.someclass").css("border", "thin solid red")

Σε αυτόν τον πολύ συγκεκριμένο selector γίνεται χρήση των μηχανισμών του id και της κλάσης. Πιο συγκεκριμένα θα επιλεγεί εκείνο το στοιχείο με id secondparagraph και κλάση someclass.

Selectors ιεραρχίας

Εκτός από τους παραπάνω selectors υπάρχει και μία ομάδα selectors που σχετίζονται  με την ιεραρχία των στοιχείων μέσα με μια ιστοσελίδα. Ας τους δούμε έναν – έναν.

Επιλογή στοιχείων παιδιών

$("tr > td").css("border", "thin solid red")

Ο selector $(“a > b”) επιλέγει όλα τα tags τύπου b που αποτελούν παιδιά του tag a (βρίσκονται δηλαδή ακριβώς ένα επίπεδο κάτω από το b). Στην προκειμένη περίπτωση θα επιλεγούν όλα τα td tags που είναι άμεσα παιδιά ενός tr tag (μην βιαστείτε να σκεφθείτε… «μα ένα td πάντα περιέχεται σε ένα tr» γιατί τα μάτια μου έχουν δει πολλά J ).

Επιλογή απογόνων

$("p b").css("border", "thin solid red")

Λειτουργεί όπως και ο a > b selector με τη διαφορά ότι δεν περιορίζεται σε άμεσα παιδιά. Με τον selector $(“a b”) μας επιστρέφεται μία λίστα με όλα τα tags b που αποτελούν απογόνους του a όσα επίπεδα κάτω και αν βρίσκονται από το a.

Επιλογή επομένου στοιχείου

$("table + p").css("border", "thin solid red")

Ο selector $(“a + b”) επιστρέφει το αμέσως επόμενο tag τύπου b που βρίσκεται μετά το tag a. Στο παράδειγμά μας θα επιστραφεί η αμέσως επόμενη παράγραφος μετά τον πίνακα.

Επιλογή συγγενικού στοιχείου (ή αδερφού κόμβου)

$("table ~ p").css("border", "thin solid red")

Ο selector $(“a ~ b”) επιστρέφει όλους τους αδερφούς κόμβους του a που είναι τύπου b. Στο συγκεκριμένο παράδειγμα θα επιστραφούν όλες οι παράγραφοι που αποτελούν συγγενικούς κόμβους του πίνακα της ιστοσελίδα μας.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε. Ως την επόμενη συνάντησή μας…

Να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Μερικές φορές είναι βολικό να αναφερόμαστε στις στήλες και στους πίνακες της MySQL με διαφορετικά ονόματα. Θα δούμε ένα παράδειγμα μιας βάσης δεδομένων που χρησιμοποιείται στο σύστημα κρατήσεων online μιας αεροπορικής εταιρείας. Για να παρουσιάσει τις πτήσεις που προσφέρονται από την εταιρεία, η βάση δεδομένων περιέχει τους εξής δύο πίνακες : Flights και Cities.
Η κάθε καταχώρηση στον πίνακα Flights παριστάνει μια πραγματική πτήση ανάμεσα σε δύο πόλεις, την αρχή και τον προορισμό της πτήσης. Προφανώς, οι Origin και Destination θα αποτελούν στήλες του πίνακα Flights, μαζί μ’ άλλες στήλες για πράγματα όπως η ημερομηνία και η ώρα της πτήσης, ο τύπος του αεροσκάφους, ο αριθμός της πτήσης και τα διάφορα ναύλα.
Ο πίνακας Cities περιέχει μια λίστα όλων των πόλεων προς τις οποίες πετάει η εταιρεία. Έτσι, και οι δύο στήλες Origin και Destination στον πίνακα Flights θα πρέπει να περιέχουν κωδικούς (ID’s) για να αναφέρονται στις καταχωρήσεις του πίνακα Cities. Θα δούμε τώρα μερικά ερωτήματα (queries).
Για να πάρουμε μια λίστα όλων των πτήσεων με τις πόλεις προέλευσής τους :

mysql> SELECT Flights.Number, Cities.Name
-> FROM Flights, Cities
-> WHERE Flights.Origin = Cities.ID;
+--------+-----------+
| Number | Name      |
+--------+-----------+
| CP110  | Montreal  |
| CP226  | Sydney    |

| QF2026 | Melbourne |
...      ...

Για να πάρουμε μια λίστα όλων των πτήσεων με τις πόλεις προορισμού τους :

mysql> SELECT Flights.Number, Cities.Name
-> FROM Flights, Cities
-> WHERE Flights.Destination = Cities.ID;
+--------+----------+
| Number | Name     |
+--------+----------+
| CP110  | Sydney   |
| CP226  | Montreal |
| QF2026 | Sydney   |
...      ...

Τι μπορούμε να κάνουμε τώρα αν θέλουμε να εμφανίσουμε την προέλευση και τον προορισμό της κάθε πτήσης μ’ ένα μόνο ερώτημα; Ένα ερώτημα που μπορεί να σκεφθούμε να χρησιμοποιήσουμε είναι το εξής :

mysql> SELECT Flights.Number, Cities.Name, Cities.Name
-> FROM Flights, Cities
-> WHERE Flights.Origin = Cities.ID
-> AND Flights.Destination = Cities.ID;
Empty set (0.01 sec)

Το παραπάνω ερώτημα δεν δουλεύει επειδή λέμε στην MySQL να ενώσει (join) τους πίνακες Flights και Cities και να εμφανίσει τον αριθμό πτήσης, το όνομα της πόλης και το όνομα της πόλης ξανά όλων των καταχωρήσεων που επιστρέφονται αν ταιριάξουμε το Origin με το City ID και το Destination με το City ID.
Μ’ άλλα λόγια, οι στήλες Origin, Destination και City ID πρέπει να είναι ίσες μεταξύ τους. Αυτό έχει σαν αποτέλεσμα μια λίστα όλων των πτήσεων όπου η προέλευση και ο προορισμός είναι ίδιοι. Δεν θα υπάρχουν λοιπόν καθόλου καταχωρήσεις που να ταιριάζουν με την παραπάνω περιγραφή και έτσι είχαμε το αποτέλεσμα “Empty set”.
Αυτό που χρειαζόμαστε είναι ένας τρόπος να μπορούμε να επιστρέψουμε δύο διαφορετικές καταχωρήσεις από τον πίνακα Cities, μια για την προέλευση και μια για τον προορισμό, για κάθε αποτέλεσμα. Αν είχαμε δύο αντίγραφα του πίνακα, ένα με όνομα Origins και ένα με όνομα Destinations, αυτό θα ήταν πολύ εύκολο να γίνει, αλλά γιατί να έχουμε δύο πίνακες που να περιέχουν την ίδια ακριβώς λίστα των πόλεων;
Η λύση είναι να δώσουμε στον πίνακα Cities δύο διαφορετικά προσωρινά ονόματα (ψευδώνυμα, aliases) για τους σκοπούς αυτού του ερωτήματος (query). Αν γράψουμε μετά από το όνομα ενός πίνακα την έκφραση AS Alias στο τμήμα FROM του ερωτήματος SELECT, μπορούμε να του δώσουμε ένα προσωρινό όνομα με το οποίο να αναφερόμαστε σ’ αυτό οπουδήποτε στο ερώτημα. Ακολουθεί το παραπάνω ερώτημα ξανά, αλλά αυτή τη φορά έχουμε δώσει στον πίνακα Cities το ψευδώνυμο (alias) Origins.

mysql> SELECT Flights.Number, Origins.Name
-> FROM Flights, Cities AS Origins
-> WHERE Flights.Origin = Origins.ID;

Αναφερόμενοι στον πίνακα Cities δύο φορές, χρησιμοποιώντας δύο διαφορετικά ψευδώνυμα (aliases), μπορούμε να χρησιμοποιήσουμε μια ένωση (join) τριών πινάκων, όπου οι δύο από τους πίνακες θα είναι ουσιαστικά ίδιοι, για να πάρουμε το αποτέλεσμα που θέλουμε :

mysql> SELECT Flights.Number, Origins.Name,
->        Destinations.Name
-> FROM Flights, Cities AS Origins,
->      Cities AS Destinations
-> WHERE Flights.Origin = Origins.ID
-> AND Flights.Destination = Destinations.ID;
+--------+-----------+----------+
| Number | Name      | Name     |
+--------+-----------+----------+
| CP110  | Montreal  | Sydney   |
| CP226  | Sydney    | Montreal |
| QF2026 | Melbourne | Sydney   |
...      ...         ...

Μπορούμε επίσης να ορίσουμε ψευδώνυμα για τα ονόματα στηλών. Θα μπορούμε να το χρησιμοποιήσουμε αυτό, για παράδειγμα, για να διαχωρίσουμε τις δύο στήλες “Name” στον παραπάνω πίνακα αποτελεσμάτων :

mysql> SELECT F.Number, O.Name AS Origin,
->        D.Name AS Destination
-> FROM Flights AS F, Cities AS O, Cities AS D
-> WHERE F.Origin = O.ID AND F.Destination = D.ID;
+--------+-----------+-------------+
| Number | Origin    | Destination |
+--------+-----------+-------------+
| CP110  | Montreal  | Sydney      |
| CP226  | Sydney    | Montreal    |
| QF2026 | Melbourne | Sydney      |
...      ...         ...

Η Έκφραση GROUP BY

Στα προηγούμενα, είχαμε δει το παρακάτω query, το οποίο μας εμφανίζει πόσα jokes είναι αποθηκευμένα στον πίνακα Jokes :

mysql> SELECT COUNT(*) FROM Jokes;
+----------+
| COUNT(*) |
+----------+
|        4 |
+----------+

Η συνάρτηση COUNT() της MySQL ανήκει σε μια ειδική κατηγορία συναρτήσεων άθροισης (summary functions) ή συναρτήσεων ομαδοποίησης (group-by functions). Σ’ αντίθεση μ’ άλλες συναρτήσεις οι οποίες επηρεάζουν τις καταχωρήσεις στο αποτέλεσμα του ερωτήματος SELECT, οι συναρτήσεις άθροισης ομαδοποιούν μαζί όλα τα αποτελέσματα και επιστρέφουν ένα μόνο αποτέλεσμα.
Στο παραπάνω παράδειγμα, η συνάρτηση COUNT() επιστρέφει τον συνολικό αριθμό των γραμμών του αποτελέσματος.
Ας υποθέσουμε ότι θέλουμε να εμφανίσουμε μια λίστα των συγγραφέων με τον αριθμό των jokes που αντιστοιχεί στον καθένα. Η πρώτη μας σκέψη θα ήταν να πάρουμε μια λίστα των ονομάτων και των ID’s όλων των συγγραφέων και μετά να χρησιμοποιήσουμε τη συνάρτηση COUNT() για να μετρήσουμε τον αριθμό των αποτελεσμάτων όταν κάνουμε SELECT στα jokes με το ID του κάθε συγγραφέα. Ο PHP κώδικας θα είναι ως εξής :

// Μια λίστα όλων των συγγραφέων
$authors = mysql_query( "SELECT Name, ID FROM Authors" );
// Επεξεργασία του κάθε συγγραφέα
while ($author = mysql_fetch_array($authors)) {
$name = $author["Name"];
$id = $author["ID"];
// Μέτρηση των jokes που ανήκουν σ' αυτόν τον συγγραφέα
$result = mysql_query(
"SELECT COUNT(*) AS NumJokes ".
"FROM Jokes WHERE AID=$id" );
$row = mysql_fetch_array($result);
$numjokes = $row["NumJokes"];
// Εμφάνιση του συγγραφέα και του αριθμού των jokes
echo("<P>$name ($numjokes jokes)</P>");
}

Χρησιμοποιήσαμε το AS στο δεύτερο query παραπάνω για να δώσουμε ένα φιλικότερο όνομα (NumJokes) στο αποτέλεσμα της COUNT(*). Η τεχνική αυτή θα δουλέψει αλλά θα χρειασθεί n+1 ξεχωριστά ερωτήματα, όπου n είναι ο αριθμός των συγγραφέων στη βάση δεδομένων. Υπάρχει, όμως, μια λύση σ’ αυτό.
Προσθέτοντας την έκφραση GROUP BY σ’ ένα ερώτημα SELECT, μπορούμε να πούμε στην MySQL να ομαδοποιήσει (group) τα αποτελέσματα του ερωτήματος σε σύνολα που να έχουν την ίδια τιμή στις στήλες που έχουμε καθορίσει. Οι συναρτήσεις άθροισης, όπως είναι η COUNT(), επενεργούν μετά σ’ αυτές τις ομάδες και όχι στο συνολικό αποτέλεσμα.
Το ακόλουθο query, για παράδειγμα, εμφανίζει τον αριθμό των jokes που έχουν αποδοθεί σε κάθε συγγραφέα στη βάση δεδομένων :

mysql> SELECT Authors.Name, COUNT(*) AS NumJokes
-> FROM Jokes, Authors
-> WHERE AID = Authors.ID
-> GROUP BY AID;
+-----------------+----------+
| Name            | NumJokes |
+-----------------+----------+
| Kevin Yank      |        3 |
| Joan Smith      |        1 |
| Ted E. Bear     |        5 |
+-----------------+----------+

Ομαδοποιώντας τα αποτελέσματα ως προς το ID του συγγραφέα (AID), παίρνουμε μια ταξινόμηση των αποτελεσμάτων για τον κάθε συγγραφέα. Θα μπορούσαμε να είχαμε χρησιμοποιήσει και την έκφραση GROUP BY Authors.ID και να πάρουμε το ίδιο αποτέλεσμα.

Η Έκφραση LEFT JOIN

Μπορούμε να δούμε από τα παραπάνω αποτελέσματα ότι ο Kevin Yank έχει τρία jokes στο όνομά του, ο Joan Smith έχει ένα και ο Ted E. Bear έχει πέντε. Αυτό που δεν δείχνουν αυτά τα αποτελέσματα είναι ότι υπάρχει ένας τέταρτος συγγραφέας, η Amy Mathieson, που δεν έχει κανένα joke στο όνομά της. Εφόσον δεν υπάρχουν καταχωρήσεις στον πίνακα Jokes με AID’s που να ταιριάζει το δικό της ID, δεν θα υπάρχουν αποτελέσματα που να ικανοποιούν την έκφραση WHERE στο παραπάνω ερώτημα γι’ αυτήν και συνεπώς θα αποκλειστεί από τον πίνακα των αποτελεσμάτων.
Η MySQL παρέχει μια άλλη μέθοδο για την ένωση (joining) πινάκων, δηλ. την εμφάνιση πληροφοριών από πολλούς πίνακες ταυτόχρονα, που απoκαλείται left join, και είναι σχεδιασμένη γι’ αυτήν ακριβώς την κατάσταση. Για να κατανοήσουμε πώς διαφέρουν τα left joins από τα standard joins, πρέπει πρώτα να θυμηθούμε πώς δουλεύουν τα standard joins.
Η MySQL εκτελεί ένα standard join δύο πινάκων εμφανίζοντας όλους τους δυνατούς συνδυασμούς των γραμμών αυτών των πινάκων. Σε μια απλή περίπτωση, ένα standard join δύο πινάκων με δύο γραμμές για τον καθένα θα περιέχει τέσσερις γραμμές. Αφού υπολογισθούν οι γραμμές του αποτελέσματος, η MySQL μετά κοιτάει την έκφραση WHERE για να πάρει οδηγίες για το ποιες γραμμές πρέπει να εμφανισθούν, όπως για παράδειγμα εκείνες που η στήλη AID του πίνακα 1 θα ταιριάζει με τη στήλη ID του πίνακα 2.
Ο λόγος που το παραπάνω δεν ικανοποιεί τους σκοπούς μας είναι ότι θα θέλαμε να συμπεριλάβουμε επίσης και τις γραμμές του πίνακα 1 (Authors) που δεν έχουν κάποιες γραμμές που να ταιριάζουν στον πίνακα 2 (Jokes). Ένα left join κάνει ό,τι ακριβώς χρειαζόμαστε, αναγκάζοντας μια γραμμή να εμφανισθεί στα αποτελέσματα για κάθε γραμμή του πρώτου (αριστερού) πίνακα, ακόμη κι αν δεν βρεθούν καταχωρήσεις που να ταιριάζουν στον δεύτερο (δεξιό) πίνακα. Αυτές οι καταχωρήσεις παίρνουν τιμές NULL γι’ όλες τις στήλες του δεξιού πίνακα.
Για να κάνουμε ένα left join ανάμεσα σε δύο πίνακες στην MySQL, διαχωρίζουμε τα ονόματα των δύο πινάκων στην έκφραση FROM με το LEFT JOIN αντί με κόμμα. Γράφουμε μετά το όνομα του δεύτερου πίνακα με ON <συνθήκη>, όπου η <συνθήκη> καθορίζει τα κριτήρια ταιριάσματος των γραμμών στους δύο πίνακες. Ακολουθεί το αναθεωρημένο ερώτημα για την εμφάνιση των συγγραφέων με τον αριθμό των jokes που τους έχει αποδοθεί :

mysql> SELECT Authors.Name, COUNT(*) AS NumJokes
-> FROM Authors LEFT JOIN Jokes
-> ON AID = Authors.ID
-> GROUP BY AID;
+---------------+----------+
| Name          | NumJokes |
+---------------+----------+
| Amy Mathieson |        1 |
| Kevin Yank    |        3 |
| Joan Smith    |        1 |
| Ted E. Bear   |        5 |
+---------------+----------+

Πρέπει να έχουμε υπόψη μας ότι η συνάρτηση COUNT(*) μετράει τον αριθμό των γραμμών που επιστρέφονται για κάθε συγγραφέα. Αν κοιτάξουμε στα μη ομαδοποιημένα αποτελέσματα του LEFT JOIN, θα δούμε τα εξής :

mysql> SELECT Authors.Name, Jokes.ID AS JokeID
-> FROM Authors LEFT JOIN Jokes
-> ON AID = Authors.ID;
+---------------+--------+
| Name          | JokeID |
+---------------+--------+
| Kevin Yank    |      1 |
| Kevin Yank    |      2 |
| Kevin Yank    |      4 |
| Joan Smith    |      3 |
| Ted E. Bear   |      5 |
| Ted E. Bear   |      6 |
| Ted E. Bear   |      7 |
| Ted E. Bear   |      8 |
| Ted E. Bear   |      9 |
| Amy Mathieson |   NULL |
+---------------+--------+

Τώρα η Amy Mathieson έχει μια γραμμή με τιμή NULL. Το ότι η τιμή του Joke ID είναι NULL δεν επηρεάζει την συνάρτηση COUNT(*) αυτή το μετράει σαν μια γραμμή. Αν αντί για το *, προσδιορίσουμε το όνομα μιας στήλης, όπως Jokes.ID, θα αγνοήσει τις τιμές NULL αυτής της στήλης και θα μας δώσει το αποτέλεσμα που ψάχνουμε :

mysql> SELECT Authors.Name, COUNT(Jokes.ID) AS NumJokes
-> FROM Authors LEFT JOIN Jokes
-> ON AID = Authors.ID
-> GROUP BY AID;
+---------------+----------+
| Name          | NumJokes |
+---------------+----------+
| Amy Mathieson |        0 |
| Kevin Yank    |        3 |
| Joan Smith    |        1 |
| Ted E. Bear   |        5 |
+---------------+----------+

Η Έκφραση HAVING

Τι γίνεται, όμως, αν θελήσουμε μια λίστα μόνο εκείνων των συγγραφέων που δεν έχουν κανένα joke στο όνομά τους; Ας δούμε πρώτα το ερώτημα που θα επέλεγαν οι περισσότεροι χρήστες :

mysql> SELECT Authors.Name, COUNT(Jokes.ID) AS NumJokes
-> FROM Authors LEFT JOIN Jokes
-> ON AID = Authors.ID
-> WHERE NumJokes = 0
-> GROUP BY AID;
ERROR 1054: Unknown column 'NumJokes' in 'where clause'

Ο λόγος που η έκφραση WHERE NumJokes = 0 δεν μας έκανε τη δουλειά είναι επειδή οι συνθήκες στην έκφραση WHERE επηρεάζουν τις καταχωρήσεις που έχουν επιλεγεί πριν ομαδοποιηθούν σύμφωνα με την έκφραση GROUP BY.
Έτσι, αν θελήσουμε να αποκλείσουμε από το μέτρημα τα jokes που περιέχουν τη λέξη “chicken”, θα μπορούσαμε να χρησιμοποιήσουμε την έκφραση WHERE, όμως εφόσον η στήλη NumJokes δεν υπάρχει πριν επενεργήσει η GROUP BY, θα πρέπει να χρησιμοποιήσουμε μια διαφορετική μέθοδο για να ορίσουμε συνθήκες.
Οι συνθήκες που επηρεάζουν τα αποτελέσματα αφού έχει γίνει η ομαδοποίηση (grouping) πρέπει να εμφανισθούν σε μια ειδική έκφραση HAVING. Έτσι λοιπόν, το σωστό ερώτημα είναι το εξής :

mysql> SELECT Authors.Name, COUNT(Jokes.ID) AS NumJokes
-> FROM Authors LEFT JOIN Jokes
-> ON AID = Authors.ID
-> GROUP BY AID
-> HAVING NumJokes = 0;
+---------------+----------+
| Name          | NumJokes |
+---------------+----------+
| Amy Mathieson |        0 |
+---------------+----------+

Μερικές συνθήκες εργάζονται και στις δύο εκφράσεις HAVING και WHERE. Για παράδειγμα, αν θελήσουμε να αποκλείσουμε έναν συγκεκριμένο συγγραφέα με το όνομά του, θα μπορούσαμε να χρησιμοποιήσουμε το Authors.Name != “AuthorName” σε μια από τις εκφράσεις WHERE ή HAVING, επειδή αν φιλτράρουμε τον συγγραφέα πριν ή μετά από την ομαδοποίηση, θα πάρουμε τα ίδια αποτελέσματα.
Σε μερικές περιπτώσεις, είναι πάντα καλύτερο να χρησιμοποιούμε την έκφραση WHERE, επειδή η MySQL είναι καλύτερη στο να βελτιστοποιεί εσωτερικά τέτοια ερωτήματα και έτσι εκτελούνται ταχύτερα.

Στο τέλος του οδηγού θα μπορούμε:

• Να αναγνωρίζουμε τη διαφορά μεταξύ των δύο εκδόσεων της JQuery και
• να τεκμηριώσουμε, σε πιθανό JQuery debate μεταξύ geek φίλων, τις εκάστοτε επιλογές μας

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.
Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)
Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

•    Τις δύο εκδόσεις της JQuery
•    Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

•    Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
•    Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Επιλέγοντας τη σωστή έκδοση της βιβλιοθήκης JQuery (…και γιατί αυτό δεν είναι βίτσιο)

Όσοι από εσάς είχατε προηγούμενη εμπειρία με την βιβλιοθήκη JQuery, ή απλά διαβάσατε τα άρθρα που αναφέραμε ως «προαπαιτούμενα» νωρίτερα στο παρόν άρθρο, διαπιστώσατε ότι η JQuery έρχεται σε δύο εκδόσεις (production και development).

Από τα ονόματα και μόνο, αντιλαμβάνεται κανείς τον τρόπο χρήσης. Development κατά την διαδικασία ανάπτυξης, Production όταν δημοσιεύσουμε τη δουλειά μας. Στις τάξεις των προγραμματιστών κυκλοφορεί συχνά η θεωρία «Αν δουλεύει, άστο όπως είναι!». Η φιλοσοφία αυτή δουλεύει άψογα όταν αναλαμβάνουμε να τροποποιήσουμε μια εφαρμογή του ελληνικού δημοσίου (!) . Δεν είναι όμως πανάκια.

Πολλές φορές είναι καλό να χρησιμοποιούμε τα σωστά εργαλεία για τις σωστές δουλειές. Η προσωπική μου συμβουλή λοιπόν, όσον αφορά την JQuery προτιμήστε να αναπτύσσετε κάνοντας χρήση της έκδοσης development και να δημοσιεύεται κάνοντας χρήση της έκδοσης production.

Μα γιατί; Αφού δουλεύει!

Ας δούμε μερικές διαφορές μεταξύ των δύο εκδόσεων…

JQuery – Production

Η επίσημη έκδοση της JQuery για χρήση στον server, δηλαδή αφότου η ιστοσελίδα μας έχει δημοσιευθεί. Όπως πιθανότατα παρατηρήσατε και στην εικόνα που παραθέσαμε νωρίτερα στο άρθρο, το μέγεθός της είναι μόλις 24 kilobytes και αποτελεί μία minified έκδοση. Είναι κατασκευασμένη έτσι ώστε να διευκολύνει την εκτέλεση στο περιβάλλον των διαφόρων servers, ταχύτερα από ότι η development έκδοση. Θα μπορούσαμε να πούμε ότι βελτιστοποιεί την εκτέλεση σε επίπεδο server.

JQuery – Development

Και αυτή επίσημη έκδοση :p της JQuery όμως για τη φάση της ανάπτυξης. Αν και σαν μέγεθος αρχείου δεν μπορεί να θεωρηθεί μεγάλο (155 kilobytes), είναι περίπου 6,5 φορές η production έκδοση. Η ειδοποιός διαφορά με την production έκδοση θα έλεγα ότι έγκειται στον κώδικά τους. Όπως μπορείτε να δείτε στην εικόνα που ακολουθεί, η development έκδοση είναι γραμμένη με τρόπο κατανοητό από κάποιον που γνωρίζει JavaScript σε αντίθεση με την production έκδοση, της οποίας τον κώδικα δεν θα χαρακτηρίζαμε υπερβολικά «αναγνώσιμο».

Ας το πιστέψουμε… Πως χρησιμοποιώ τις διαφορετικές εκδόσεις στην πραγματικότητα;

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

Εάν κατεβάσετε αυτή τη στιγμή το .rar αρχείο που βρίσκεται στο τέλος του σημερινού μας άρθρου, και αφού το αποσυμπιέσετε, θα δείτε ότι περιλαμβάνει έναν φάκελο jquery_tuts_versions. Μέσα του μπορείτε να βρείτε τις τελευταίες εκδόσεις της JQuery:

•    jquery-1.4.2.js για την development
•    jquery-1.4.2.min.js για την προduction (το min από το minified)

Ανάλογα με το αν αναπτύσσετε ή δημοσιεύετε τη δουλειά σας, κρατάτε το αντίστοιχο αρχείο στον κατάλογο που είναι τοποθετημένη η ιστοσελίδα σας.

Όσον αφορά τον κώδικα της ιστοσελίδας σας τώρα. Σε περίπτωση που βρίσκεστε σε φάση ανάπτυξης (επομένως έχετε κρατήσει το jquery-1.4.2.js στον κατάλογό σας) ο κώδικας μιας hello world ιστοσελίδας που κάνει χρήση του JQuery θα μοιάζει με τον παρακάτω:

<html>
<head>
<title>Development phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα βρίσκεται σε φάση ανάπτυξης");
});
</script>
</head>
<body>
…
</body>
</html>

Σε περίπτωση που η ιστοσελίδα σας είναι έτοιμη να δημοσιευθεί θα χρησιμοποιήσετε το αρχείο jquery-1.4.2.min.js και ο κώδικάς σας, σε σχέση με τον προηγούμενο θα είναι αλλαγμένος κατά μία γραμμή:

<html>
<head>
<title>Production phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα έχει δημοσιευθεί");
});
</script>
</head>
<body>

</body>
</html>

Σε αυτό το άρθρο αντιμετωπίσαμε το φιλοσοφικό ερώτημα, ελαφρώς ευκολότερο από το αίνιγμα της Σφίγγας, ποια έκδοση της JQuery μας ταιριάζει. Αν και τεχνικά, το δίλλημα αυτό δε λέει πολλά, ωστόσο, έχω την άποψη πως ότι μαθαίνουμε ένα προγραμματιστικό εργαλείο, οι λεπτομέρειες μπορεί να είναι σημαντικές. Σε περιπτώσεις όπως η JQuery, η χρήση της οποίας είναι συνυφασμένη με ανάπτυξη ιστοσελίδων για το διαδίκτυο, η τεκμηρίωση της παραπάνω θέσης είναι περιττή.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε ως την επόμενη συνάντησή μας…

Μην ξεχνάτε,

να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Αναλυτικότερα θα δούμε :

• Τις βασικές αρχές
• Την σύνταξη
• Τις κλάσσεις και τα IDs
• Πως δίνουμε στύλ με τα CSS
• Την επεξήγηση του Box Model

Σε κάθε άρθρο θα έχουμε πληθώρα παραδειγμάτων κώδικα, αλλά και όλα τα αρχεία παραδειγμάτων ΔΩΡΕΑΝ προς κατέβασμα για όλους τους αναγνώστες μας.

Tέλος για τους συνδρομητές μας, όλα τα βοηθήματα, θα παρέχονται και σε βίντεο !

Μείνετε μαζί μας, και γίνετε και εσείς ένας CSS Super Hero !!!

Παρακαλουθήστε τα άθρα καθώς αυτά δημοσιεύνται

Βασικές Αρχές

Στο τέλος του οδηγού θα μπορούμε:

• Να ορίσουμε συναρτήσεις με σταθερές τιμές παραμέτρων
• Να ορίσουμε συναρτήσεις με παραμέτρους που αποτελούν λέξεις – κλειδιά
• Να ορίσουμε συναρτήσεις με λίστες για παραμέτρους
• Να δημιουργήσουμε ανώνυμες συναρτήσεις τύπου lambda
• Να τεκμηριώνουμε σωστά τις συναρτήσεις μας

Για την καλύτερη κατανόηση αυτού του αντικειμένου ο συγκεκριμένος οδηγός χωρίστηκε σε δύο τμήματα…

Προαπαιτούμενα

Μαθαίνοντας Python:  Μέρος Ι, Μέρος  ΙΙ, Μέρος ΙΙΙ, Μέρος IV, Μέρος V

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.

Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)

Παράδειγμα κώδικα

Στο τέλος του αρχείου θα βρείτε συνημμένο ένα python script που περιέχει συγκεντρωμένα όλα τα παραδείγματα.

Για να τα χρησιμοποιήσετε, αντιγράφετε το εκάστοτε παράδειγμα σε ένα νέο αρχείο python και το εκτελείτε (βλ. Μαθαίνοντας Python – Μέρος 1ο ). Τα παραδείγματα είναι φτιαγμένα με τέτοιον τρόπο ώστε να τυπώνουν τα αποτελέσματα στην οθόνη ώστε να μπορείτε να πιστοποιήσετε εύκολα τη λειτουργικότητά τους. Για διευκόλυνσή σας έχουμε χωρίσει τα παραδείγματα με σχόλια που δίνουν μια μικρή περιγραφή του τι επιχειρούμε κάθε φορά.

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Συντάσσοντας μια συνάρτηση

def triangle_area(a, b):

area = a * b / 2

print("Το εμβαδό του τριγώνου είναι:", area)

Παραπάνω μπορείτε να δείτε την βασική δήλωση της συνάρτησης υπολογισμού του εμβασδού τριγώνου. Αρχικά δηλώνουμε τη συνάρτηση χρησιμοποιώντας την δεσμευμένη λέξη def ακολουθούμενη από το όνομα της συνάρτησης (στην προκειμένη περίπτωση triangle_area). Σε παρένθεση τοποθετούνται οι απαιτούμενες παράμετροι (a, b) που στην προκειμένη περίπτωση υποδηλώνουν την βάση και το ύψος του τριγώνου αντίστοιχα). Στη συνέχεια μια νέα μεταβλητή ορίζεται, η μεταβλητή area, στην οποία θα ανατεθεί το αποτέλεσμα της φόρμουλας υπολογισμού του εμβαδού του τριγώνου (βάση * ύψος / 2). Τέλος η συνάρτηση αναλαμβάνει να εκτυπώσει το αποτέλεσμα στην οθόνη.

Κλήση συνάρτησης

Η κλήση μιας συνάρτησης σε Python γίνεται γράφοντας απλά το όνομα της συνάρτησης και περικλείοντας μέσα σε παρένθεση τις τιμές των παραμέτρων (εφόσον χρειάζεται). Έτσι για να χρησιμοποιήσουμε την συνάρτηση που ορίσαμε λίγο νωρίτερα χρησιμοποιούμε την παρακάτω γραμμή κώδικα.

triangle_area(66, 2010)

Προφανώς η ύπαρξη παραμέτρων σε μία συνάρτηση δεν είναι υποχρεωτική. Ας δούμε μαζί την δήλωση της παρακάτω απλής συνάρτησης που τυπώνει ένα συγκεκριμένο μήνυμα στην κονσόλα όταν κληθεί:

def no_params_function():

print("Αυτή η συνάρτηση δε δέχεται παραμέτρους...")

Όπως παρατηρείτε η παρένθεση δεν περιέχει τίποτε, δηλαδή δεν έχουν δηλωθεί παράμετροι. Η κλήση αυτής της συνάρτησης γίνεται ως εξής…

no_params_function()

και όπως θα δείτε αν το δοκιμάσετε, δουλεύει άψογα παρόλη την απουσία των παραμέτρων.

Αναθέτοντας μια συνάρτηση σε μια μεταβλητή

Ναι! Είναι εφικτό. Στην Python μια συνάρτηση μπορεί να ανατεθεί σε μια μεταβλητή (ακόμη ένα σημείο που υποδηλώνει τη δύναμη της συγκεκριμένης γλώσσας προγραμματισμού.

aVariable = triangle_area

aVariable(5,8)

Αν τρέξετε τον παραπάνω κώδικα θα διαπιστώσετε ότι θα πάρετε τα ίδια αποτελέσματα με αυτά που θα παίρνατε αν χρησιμοποιούσατε την αρχική συνάρτηση triangle_area(x,y) που δημιουργήσαμε νωρίτερα. Ας δούμε όμως αναλυτικότερα τις δύο αυτές γραμμές.

Στην πρώτη γραμμή αναθέτουμε την συνάρτησή μας στην μεταβλητή aVariable. Δώστε προσοχή στην απουσία παραμέτρων. Αυτό συμβαίνει γιατί δεν θέλουμε να γίνει ανάθεση της συνάρτησής μας για δύο συγκεκριμένες τιμές αλλά του μηχανισμού της.

Έτσι, στην δεύτερη γραμμή, συμπεριφερόμαστε στην μεταβλητή aVariable σαν να είναι η συνάρτησή μας. Για αυτόν τον λόγο και η το όνομα της μεταβλητής μας ακολουθείται από την παρένθεση με τις παραμέτρους που θα ορίζαμε αν τρέχαμε την αρχική μας συνάρτηση. Δοκιμάστε το και θα διαπιστώσετε ότι το αποτέλεσμα είναι σωστό.

Επιστροφή του αποτελέσματος αντί για εκτύπωση

Ας δούμε άλλη μια εκδοχή της αγαπημένης μας συνάρτησης υπολογισμού του εμβαδού τριγώνου J.

def triangle_area_return(a, b):

area = a * b / 2

return area

Σε αυτήν την εκδοχή της συνάρτησής μας ο προσεκτικός αναγνώστης παρατηρεί (εκτός από το διαφορετικό όνομα της συνάρτησης) μία ακόμη σημαντική διαφορά. Αντί για τη γραμμή εκτύπωσης του αποτελέσματος, χρησιμοποιούμε την δεσμευμένη λέξη return. Αυτή η αλλαγή έχει σαν αποτέλεσμα η τιμή του αποτελέσματος να επιστρέφεται αντί να εκτυπώνεται.

Έτσι, αν θέλουμε να εμφανίσουμε το αποτέλεσμα της συνάρτησης αυτής θα πρέπει να εκτελέσουμε την παρακάτω γραμμή κώδικα:

print( triangle_area_return( 5, 5 ) )

Δοκιμάστε να εκτελέσετε την ίδια γραμμή χωρίς να περικλείεται από την εντολή print( ) και θα διαπιστώσετε ότι τίποτε δε συμβαίνει.

Πως το χρησιμοποιώ πραγματικά;

Οι συναρτήσεις χρησιμοποιούνται συνήθως για να υλοποιούν συχνά χρησιμοποιούμενες διαδικασίες. Πολύ συχνά το αποτέλεσμα μιας συνάρτησης χρειάζεται να τροφοδοτήσει μία άλλη. Αυτό επιτυγχάνεται με τη χρήση της return. Ας το δούμε στην πράξη:

Υπενθυμίζω την τελευταία έκδοση της συνάρτησής μας:

def triangle_area_return(a, b):

area = a * b / 2

return area

Δημιουργούμε μία δεύτερη, πολύ απλή συνάρτηση η οποία λαμβάνει στην είσοδο ένα εμβαδό και τυπώνει ένα ειδικά διαμορφωμένο μήνυμα…

def print_triangle_area_return(data):

print("Το εμβαδό του τριγώνου που διάβασα είναι:", data)

…στην τιμή myData ανατίθεται το αποτέλεσμα της συνάρτησης υπολογισμού του εμβαδού…

myData = triangle_area_return(2, 155)

…τέλος τροφοδοτούμε το περιεχόμενο του myData στην συνάρτηση εκτύπωσης:

print_triangle_area_return(myData)

Σε αυτό το άρθρο πήραμε μία γεύση από τα σημαντικότερα σημεία ορισμού και διαχείρισης συναρτήσεων σε Python. Μείνετε συντονισμένη για τη συνέχεια του οδηγού στον οποίο και θα ολοκληρωθεί το αντικείμενο αυτό.

Μέχρι τότε,

να είστε καλά και να φροντίζεται τον εαυτό σας.

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Αν και κανένα joke δεν είναι πιθανό να είναι τόσο μεγάλο που να χρειάζεται περισσότερες από μία σελίδες, πολλά content-driven sites περιέχουν μεγάλο περιεχόμενο που είναι συχνά καλύτερο να παρουσιασθεί διασπασμένο σε σελίδες. Υπάρχει μια ακόμη συνάρτηση στην PHP που το κάνει αυτό πολύ εύκολα. Η split() είναι μια συνάρτηση που δέχεται μια κανονική έκφραση και ένα string κειμένου και χρησιμοποιεί ταιριάσματα για την κανονική έκφραση για να διασπάσει το κείμενο σ’ έναν πίνακα (array). Ας δούμε το ακόλουθο παράδειγμα :

$regexp="[ \n\r\t]+";   // Ένας ή περισσότεροι whitespace characters
$text="This is a test.";
$textarray=split($regexp, $text);
echo("$textarray[0]<BR>");         // Εμφανίζει "This<BR>"
echo("$textarray[1]<BR>");         // Εμφανίζει "is<BR>"
echo("$textarray[2]<BR>");         // Εμφανίζει "a<BR>"
echo("$textarray[3]<BR>");         // Εμφανίζει "test.<BR>"

Αν αντί να αναζητούμε έναν whitespace character αναζητούμε ένα [PAGEBREAK] tag και αντί να εμφανίζουμε όλα τα κομμάτια του κειμένου εμφανίσουμε μόνο τη σελίδα που μας ενδιαφέρει, η οποία δείχνεται από μια μεταβλητή $page που μεταβιβάζεται μαζί με την αίτηση για τη σελίδα (page request), για παράδειγμα, μπορούμε να διαιρέσουμε το περιεχόμενο σε σελίδες.

// Αν δεν έχει καθορισθεί κάποια σελίδα, default είναι η
// πρώτη σελίδα ($page = 0)
if (!isset($page)) $page = 0;
// Διαιρούμε το κείμενο σ’ έναν πίνακα (array) από σελίδες
$textarray=split("\[PAGEBREAK]", $text);
// Επιλέγουμε τη σελίδα που θέλουμε
$pagetext=$textarray[$page];
$regexp="[ \n\r\t]+";   // Ένας ή περισσότεροι whitespace characters
$text="This is a test.";
$textarray=split($regexp, $text);
echo("$textarray[0]<BR>");         // Εμφανίζει "This<BR>"
echo("$textarray[1]<BR>");         // Εμφανίζει "is<BR>"
echo("$textarray[2]<BR>");         // Εμφανίζει "a<BR>"
echo("$textarray[3]<BR>");         // Εμφανίζει "test.<BR>"

Αν αντί να αναζητούμε έναν whitespace character αναζητούμε ένα [PAGEBREAK] tag και αντί να εμφανίζουμε όλα τα κομμάτια του κειμένου εμφανίσουμε μόνο τη σελίδα που μας ενδιαφέρει, η οποία δείχνεται από μια μεταβλητή $page που μεταβιβάζεται μαζί με την αίτηση για τη σελίδα (page request), για παράδειγμα, μπορούμε να διαιρέσουμε το περιεχόμενο σε σελίδες.

// Αν δεν έχει καθορισθεί κάποια σελίδα, default είναι η
// πρώτη σελίδα ($page = 0)
if (!isset($page)) $page = 0;
// Διαιρούμε το κείμενο σ’ έναν πίνακα (array) από σελίδες
$textarray=split("\[PAGEBREAK]", $text);
// Επιλέγουμε τη σελίδα που θέλουμε
$pagetext=$textarray[$page];

Φυσικά, θα θελήσουμε να έχουμε κάποιον τρόπο μετακίνησης ανάμεσα στις σελίδες. Θα τοποθετήσουμε έναν σύνδεσμο (link) προς την προηγούμενη σελίδα στην κορυφή της τρέχουσας σελίδας και έναν σύνδεσμο προς την επόμενη σελίδα στη βάση της τρέχουσας σελίδας. Αν αυτή είναι η πρώτη σελίδα δεν θα χρειασθούμε ένα link προς την προηγούμενη σελίδα. Γνωρίζουμε ότι βρισκόμαστε στην πρώτη σελίδα αν το $page είναι ίσο με 0. Παρόμοια, δεν χρειαζόμαστε ένα link προς την επόμενη σελίδα όταν βρισκόμαστε στην τελευταία σελίδα.

Για να είμαστε σίγουροι ότι βρισκόμαστε στην τελευταία σελίδα, χρειαζόμαστε μια συνάρτηση της PHP με όνομα count(), η οποία δέχεται έναν πίνακα (array) και επιστρέφει τον αριθμό των στοιχείων του πίνακα. Αν μεταβιβάσουμε τον πίνακα των σελίδων, η count() θα μας πει πόσες σελίδες υπάρχουν. Αν υπάρχουν 10 σελίδες, τότε το $textarray[9] θα περιέχει την τελευταία σελίδα. Έτσι, γνωρίζουμε ότι βρισκόμαστε στην τελευταία σελίδα αν το $page είναι ίσο με count($textarray) – 1.

Ο κώδικας για τα links μετάβασης ανάμεσα στις σελίδες είναι ο εξής :

if ($page != 0) {
$prevpage = $page - 1;
echo("<P><A HREF=\"$PHP_SELF?id=$id&page=$prevpage\">".
"Προηγούμενη Σελίδα</A></P>");
}
// Το περιεχόμενο της σελίδας εμφανίζεται εδώ …
if ($page < count($textarray) - 1) {
$nextpage = $page + 1;
echo("<P><A HREF=\"$PHP_SELF?id=$id&page=$nextpage\">".
"Επόμενη Σελίδα</A></P>");
}

Ολόκληρος ο κώδικας για την εμφάνιση του κειμένου του joke είναι ως εξής :

<!-- joke.php -->
...
// Παίρνουμε (get) το κείμενο του joke από τη βάση δεδομένων
$joke = mysql_query("SELECT JokeText FROM Jokes ".
"WHERE ID=$id");
$joke = mysql_fetch_array($joke);
$joketext = $joke["JokeText"];
// Φιλτράρουμε τον HTML κώδικα
$joketext = htmlspecialchars($joketext);
// Αν δεν έχει καθορισθεί κάποια σελίδα, default είναι η πρώτη σελίδα
($page = 0)
if (!isset($page)) $page = 0;
// Διαιρούμε το κείμενο σ’ έναν πίνακα (array) από σελίδες
$textarray=split("\[PAGEBREAK]",$joketext);
// Επιλέγουμε τη σελίδα που θέλουμε
$joketext=$textarray[$page];
// Bold και italics
$joketext = eregi_replace("\[b]","<B>", $joketext);
$joketext = eregi_replace("\[eb]","</B>", $joketext);
$joketext = eregi_replace("\[i]","<I>", $joketext);
$joketext = eregi_replace("\[ei]","</I>", $joketext);
// Παράγραφοι και αλλαγές γραμμών
$joketext = ereg_replace("\r", "", $joketext);
$joketext = ereg_replace("\n\n", "<P>", $joketext);
$joketext = ereg_replace("\n", "<BR>", $joketext);
// Υπερσύνδεσμοι (Hyperlinks)
$joketext = ereg_replace(
"\[L]([-_./a-zA-Z0-9!&%#?,'=:~]+)\[EL]",
"<A HREF=\"\\1\">\\1</A>", $joketext);
$joketext = ereg_replace(
"\[L=([-_./a-zA-Z0-9!&%#?,'=:~]+)]".
"([-_./a-zA-Z0-9 !&%#?,'=:~]+)\[EL]",
"<A HREF=\"\\1\">\\2</A>", $joketext);
if ($page != 0) {
$prevpage = $page - 1;
echo("<P><A HREF=\"$PHP_SELF?id=$id&page=$prevpage\">".
"Προηγούμενη Σελίδα</A></P>");
}
echo( "<P>$joketext" );
if ($page < count($textarray) - 1) {
$nextpage = $page + 1;
echo("<P><A HREF=\"$PHP_SELF?id=$id&page=$nextpage\">".
"Επόμενη Σελίδα</A></P>");
}
...

Αυτόματη Υποβολή Περιεχομένου

Θα δούμε τώρα πώς μπορούμε να δεχόμαστε jokes αλλά να μην εμφανίζονται αμέσως στο site. Θα προσθέσουμε μια νέα στήλη στον πίνακα Jokes με όνομα Visible η οποία θα δέχεται μόνο μία από δύο τιμές : ‘Y’ και ‘N’. Τα νέα jokes που θα υποβάλλονται θα γίνονται ίσα με Visible=’N’ αυτόματα και δεν θα μπορούν να αποκλειστούν από το να εμφανισθούν στο site, προσθέτοντας απλά την έκφραση WHERE Visible=’Y’ σ’ ένα ερώτημα (query) του πίνακα Jokes για το οποίο τα αποτελέσματα προορίζονται για κοινή θέα.

Τα jokes που έχουν τη στήλη Visible=’N’ θα βρίσκονται στη βάση δεδομένων περιμένοντας τροποποίηση από έναν content manager, ο οποίος θα μπορεί να τα τροποποιήσει πριν τα κάνει ορατά ή απλά να τα διαγράψει αμέσως. Η δημιουργία μιας στήλης που μπορεί να περιέχει μία από δύο τιμές, η μια από τις οποίες είναι η προκαθορισμένη (default), έχει να κάνει μ’ ένα νέο είδος στήλης της MySQL που αποκαλείται ENUM :

mysql> ALTER TABLE Jokes ADD COLUMN
-> Visible ENUM('N', 'Y') NOT NULL;

Η πρώτη τιμή που υπάρχει στις παρενθέσεις, δηλ. το ‘N’ στην προκειμένη περίπτωση, είναι η προκαθορισμένη (default) τιμή, η οποία εκχωρείται στις νέες καταχωρήσεις αν δεν έχει καθορισθεί μια τιμή στην εντολή INSERT.

Προχωρημένη SQL

Καθώς έχουμε δουλέψει με το παράδειγμα ενός Internet Joke Database website, είχαμε την ευκαιρία να εξερευνήσουμε τις περισσότερες πλευρές της Structured Query Language (SQL), από την βασική μορφή του ερωτήματος CREATE TABLE μέχρι τους δύο τρόπους σύνταξης των ερωτημάτων INSERT. Θα δούμε τώρα μερικά ακόμα τρικ της SQL που δεν τα έχουμε συναντήσει.

Ταξινόμηση με την ORDER BY

Η Order By είναι μια προαιρετική έκφραση σ’ ένα ερώτημα SELECT με την οποία μπορούμε να καθορίσουμε μια στήλη (column) για να ταξινομήσουμε τον πίνακα των αποτελεσμάτων. Για παράδειγμα, για να ταξινομήσουμε με βάση τη στήλη Name του πίνακα Authors, δίνουμε την εξής εντολή :

mysql> SELECT Name, eMail FROM Authors ORDER BY Name;

+-----------------+----------------------+
| Name            | eMail                |
+-----------------+----------------------+
| Antonopoulos Antonis| ant@hellas.gr |
| Basileiadis Basileios| bas@hellas.gr|
| Konstantinou Konstantinos| kon@hellas.gr |
| Papadopoulos Nikolaos|pap@hellas.gr |
+-----------------+----------------------+

Αν προσθέσουμε τη λέξη κλειδί DESC μετά από το όνομα της στήλης ταξινόμησης, τα αποτελέσματα θα εμφανισθούν σε φθίνουσα σειρά, ως εξής :

mysql> SELECT Name, eMail FROM Authors ORDER BY Name DESC;

+-----------------+----------------------+
| Name            | eMail                |
+-----------------+----------------------+
| Papadopoulos Nikolaos | pap@hellas.gr|
| Konstantinou Konstantinos | kon@hellas.gr|
| Basileiadis Basileios| bas@hellas.gr|
| Antonopoulos Antonis|ant@hellas.gr|
+-----------------+----------------------+

Μπορούμε να ταξινομήσουμε και με βάση περισσότερες από μία στήλες, χωρίζοντάς τες με κόμμα στην έκφραση ORDER BY, οπότε η MySQL θα ταξινομήσει τις καταχωρήσεις με βάση την πρώτη στήλη, μετά με βάση τη δεύτερη στήλη όπου υπάρχουν ίδιες τιμές στην πρώτη στήλη κοκ. Μπορούμε να χρησιμοποιήσουμε τη λέξη κλειδί DESC σε όποια στήλη θέλουμε στην έκφραση ORDER BY για να αντιστρέψουμε τη σειρά ταξινόμησης.

Η Έκφραση LIMIT

Συχνά θα εργαζόμαστε μ’ έναν μεγάλο πίνακα μιας βάσης δεδομένων, αλλά θα μας ενδιαφέρουν λίγες μόνο καταχωρήσεις του. Ας υποθέσουμε ότι θέλουμε να παρακολουθούμε τη δημοτικότητα των διάφορων jokes στο site. Θα μπορούμε να προσθέσουμε μια στήλη με όνομα TimesViewed στον πίνακα Jokes.

Ξεκινώντας με μια τιμή 0 για τα καινούργια jokes και προσθέτοντας το 1 στην τιμή του joke που ζητήθηκε κάθε φορά που εμφανίζεται η σελίδα του joke, θα μπορούμε να παρακολουθούμε πόσες φορές έχει διαβασθεί το κάθε joke στη βάση δεδομένων.

Ο PHP κώδικας για το query που αυξάνει κατά 1 τη στήλη TimesViewed ενός joke μ’ ένα δεδομένο ID, είναι ως εξής :

$sql = "UPDATE Jokes SET TimesViewed=TimesViewed+1 ".
"WHERE ID=$id";
if (!mysql_query($sql)) {
echo("<P > Λάθος στην πρόσθεση ".
"γι' αυτό το joke! </P>\n");
}

Μια κοινή χρήση αυτού του μετρητή θα ήταν για να παρουσιάσουμε μια λίστα των “Top 10 Jokes” στην πρώτη σελίδα του site, για παράδειγμα. Μπορούμε να χρησιμοποιήσουμε την έκφραση ORDER BY TimesViewed DESC για να εμφανίσουμε τα jokes από τις υψηλότερες προς τις χαμηλότερες τιμές της στήλης TimesViewed. Θα πρέπει απλά να επιλέξουμε τις 10 πρώτες τιμές από την κορυφή της λίστας.

Με την έκφραση (clause) LIMIT μπορούμε να καθορίσουμε ότι θέλουμε έναν μόνο συγκεκριμένο αριθμό αποτελεσμάτων. Σύμφωνα με το παραπάνω παράδειγμα, χρειαζόμαστε μόνο τα 10 πρώτα :

$sql = "SELECT * FROM Jokes ORDER BY TimesViewed
DESC LIMIT 10";

Επίσης, θα μπορούμε να αποφύγουμε τη λέξη κλειδί DESC και να εμφανίσουμε τα 10 λιγότερο δημοφιλή jokes. Το επόμενο query θα εμφανίσει από το 21^ο έως το 25^ο πιο δημοφιλή jokes :

$sql = "SELECT * FROM Jokes ORDER BY TimesViewed
DESC LIMIT 20, 5";

Πρέπει να έχουμε υπόψη μας ότι η πρώτη καταχώρηση στη λίστα των αποτελεσμάτων έχει αριθμό 0 και έτσι η 21^η καταχώρηση της λίστας θα έχει αριθμό 20.

Οι Εκφράσεις LOCK και UNLOCK

Στο ερώτημα UPDATE που χρησιμοποιήσαμε παραπάνω, υπάρχει ένας μικρός κίνδυνος. Τι θα συμβεί αν τη στιγμή που αλλάζει η τιμή της στήλης TimesViewed, κάποιος άλλος χρήστης εμφανίσει το ίδιο joke; Το PHP script θα εκτελεσθεί για δεύτερη φορά για την καινούργια αίτηση (request). Όταν εκτέλεσε το SELECT για να πάρει την τρέχουσα τιμή της στήλης TimesViewed, θα πήρε την ίδια τιμή με το πρώτο script, επειδή η τιμή δεν έχει ακόμη ενημερωθεί.

Και τα δύο scripts θα προσθέσουν μετά το 1 στην ίδια τιμή και θα γράψουν την καινούργια τιμή στον πίνακα. Το αποτέλεσμα θα είναι ότι δύο χρήστες είδαν το joke, αλλά ο μετρητής TimesViewed αυξήθηκε μόνο κατά 1. Για να αποφύγουμε προβλήματα όπως το παραπάνω, μπορούμε να κλειδώσουμε έναν ή περισσότερους πίνακες με τους οποίους εργαζόμαστε σ’ ένα ερώτημα και να έχουμε έτσι αποκλειστική πρόσβαση σ’ αυτούς για όσο διαρκεί το ερώτημα. Η σύνταξη για το κλείδωμα ενός πίνακα είναι ως εξής :

LOCK TABLES tblName { READ | WRITE }

Όταν κλειδώνουμε έναν πίνακα, πρέπει να καθορίσουμε αν θέλουμε ένα “read lock” ή ένα “write lock”. Το πρώτο εμποδίζει άλλες διεργασίες από το να κάνουν αλλαγές στον πίνακα αλλά επιτρέπει σ’ άλλες να διαβάσουν τον πίνακα. Το δεύτερο απαγορεύει όλες τις προσβάσεις στον πίνακα.

Όταν τελειώσουμε την εργασία μας μ’ έναν πίνακα που έχουμε κλειδώσει, πρέπει να απελευθερώσουμε το κλείδωμα για να μπορέσουν να έχουν οι άλλες διεργασίες πρόσβαση στον πίνακα ξανά :

UNLOCK TABLES

Ακολουθεί ένα παράδειγμα ενός PHP κώδικα :

mysql_query("LOCK TABLES inventory WRITE, shipping WRITE");
// … εντολές …
mysql_query("UNLOCK TABLES");

Η γλώσσα προγραμματισμού ASP (Active Server Pages) έχει το ιδιαίτερο χαρακτηριστικό ότι ο κώδικάς της πρώτα μεταγλωττίζεται στον server και μετά φορτώνεται σαν ένα κανονικό html έγγραφο, χωρίς ο χρήστης να είναι σε θέση να δει τον αρχικό κώδικα. Με την τεχνολογία της ASP μπορούμε να δημιουργήσουμε δυναμικές ιστοσελίδες (dynamic web pages).

Ανταγωνιστικές της τεχνολογίας ASP είναι η τεχνολογία Php (HyperText PreProcessor) καθώς και η τεχνολογία CFML (ColdFusion Markup Language).

Τι Είναι ένα Αρχείο ASP

• Ένα αρχείο ASP είναι ακριβώς το ίδιο όπως ένα αρχείο HTML.
• Ένα αρχείο ASP μπορεί να περιέχει κείμενο, HTML tags και scripts.
• Τα scripts σ’ ένα αρχείο ASP εκτελούνται στον server.
• Ένα αρχείο ASP έχει την επέκταση .asp.

Πώς Δουλεύει ένα Αρχείο ASP

• Όταν ένας φυλλομετρητής ζητάει ένα αρχείο HTML, ο server επιστρέφει το αρχείο.
• Όταν ένας φυλλομετρητής ζητάει ένα αρχείο ASP, ο server καλεί την ASP.
• Η ASP διαβάζει το αρχείο ASP και εκτελεί τα scripts που περιέχει.
• Τέλος, το αρχείο ASP επιστρέφεται στον φυλλομετρητή σαν ένα απλό αρχείο HTML.

Τι Μπορεί να Κάνει η ASP για μας

• Να τροποποιήσει δυναμικά το περιεχόμενο μιας ιστοσελίδας.
• Να απαντά σε ερωτήσεις χρήστη ή σε δεδομένα που υποβάλλονται από φόρμες HTML.
• Να έχει πρόσβαση σε δεδομένα ή σε βάσεις δεδομένων και να επιστρέφει τα αποτελέσματα σ’ έναν φυλλομετρητή.
• Να προσαρμόζει μια ιστοσελίδα ώστε να την κάνει πιο χρήσιμη στους χρήστες.
• Τα πλεονεκτήματα από την χρήση της ASP αντί για την CGI και την Perl είναι η απλότητα και η ταχύτητα.
• Παρέχει ασφάλεια εφόσον ο ASP κώδικάς μας δεν μπορεί να ειδωθεί από τον φυλλομετρητή.
• Εφόσον τα αρχεία ASP επιστρέφονται σαν απλή HTML, μπορούν να ειδωθούν από οποιονδήποτε φυλλομετρητή.
• Ο έξυπνος ASP προγραμματισμός μπορεί να ελαχιστοποιήσει την κυκλοφορία στο δίκτυο (network traffic).

Σύνταξη της ASP

Δεν μπορούμε να δούμε τον ASP κώδικα σ’ έναν φυλλομετρητή, αλλά μόνο την έξοδο από την ASP, που είναι απλή HTML. Και αυτό γιατί τα scripts εκτελούνται στον server πριν σταλεί το αποτέλεσμα στον φυλλομετρητή.

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

Εμφάνιση Κειμένου

Πώς να γράψουμε κάποιο κείμενο στο τμήμα <body> του HTML εγγράφου με την ASP.

<html>
<body>
<%
response.write"Hello World!"
%>
</body>
</html>

Κείμενο και HTML tags

Πώς να μορφοποιήσουμε το κείμενο με HTML tags.

<html>
<body>
<%
response.write("<h2> Hello World! <br> Αυτή η πρόταση χρησιμοποιεί
HTML tags για να μορφοποιήσει το κείμενο!
</h2>")
%>
</body>
</html>

Ο Βασικός Κανόνας Σύνταξης της ASP

Ενα αρχείο ASP περιέχει κανονικά HTML tags, όπως ένα κανονικό αρχείο HTML. Επιπλέον, ένα αρχείο ASP μπορεί να περιέχει server scripts, που περικλείονται από τους οριοθέτες (delimiters) <% και %>. Τα server scripts εκτελούνται στον server και μπορούν να περιέχουν οποιεσδήποτε εκφράσεις, εντολές, διαδικασίες ή τελεστές που είναι έγκυροι για τη γλώσσα συγγραφής που χρησιμοποιούμε.

Το Αντικείμενο Response

Η μέθοδος Write του αντικειμένου Response της ASP χρησιμοποιείται για να σταλεί περιεχόμενο (content) στον φυλλομετρητή. Για παράδειγμα, η επόμενη εντολή στέλνει το κείμενο Hello World στον φυλλομετρητή :

Response.Write("Hello World")

Η VBScript

Στην ASP μπορούμε να χρησιμοποιήσουμε διάφορες γλώσσες συγγραφής (scripting languages). Η προκαθορισμένη είναι η γλώσσα VBScript, όπως φαίνεται στο επόμενο παράδειγμα :

<html>
<body>
<%
response.write("Hello World!")
%>
</body>
</html>

Το παράδειγμα αυτό χρησιμοποιεί τη συνάρτηση response.write για να εμφανίσει το μήνυμα Hello World! στο τμήμα <body> του HTML εγγράφου.

Η JavaScript

Για να χρησιμοποιήσουμε την JavaScript σαν την προκαθορισμένη γλώσσα συγγραφής, εισάγουμε την εξής εντολή (language specification) στην κορυφή της σελίδας :

<%@ language="javascript" %>
<html>
<body>
<%
Response.Write("Hello World!")
%>
</body>
</html>

Πρέπει να έχουμε υπόψη μας ότι σ’ αντίθεση με την VBScript, η JavaScript ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Ετσι, θα πρέπει να γράψουμε τον ASP κώδικα με κεφαλαία ή πεζά γράμματα ανάλογα με τις απαιτήσεις της γλώσσας.

Αλλες Γλώσσες Συγγραφής (Scripting Languages)

Η ASP δίνεται με τις γλώσσες συγγραφής VBScript και JavaScript. Αν θέλουμε να γράψουμε κώδικα σε μια άλλη γλώσσα, όπως Perl, REXX ή Python, θα πρέπει να εγκαταστήσουμε τις αντίστοιχες μηχανές συγγραφής (scripting engines). Επειδή τα scripts εκτελούνται στον server, ο φυλλομετρητής που ζητάει το αρχείο ASP δεν είναι ανάγκη να υποστηρίζει scripting.