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.

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

• Redesign – Πλήρης επανασχεδιασμός του look και της δομής της ιστοσελίδας
• Επιστροφή του forum
• Επανασχεδιασμός σχολίων, για πιο εύκολη συζήτηση πάνω στα άρθρα
• Νέα περιοχή μελών, με άμεση πρόσβαση σε όλα τα αρχεία
• Επανασχεδιασμός προσωπικής σελίδας συντακτών
• Αλλά και πολλά άλλα…

Blast to the Past

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

Previews

Κατά την διάρκεια του Ιουλίου, και μέχρι το τέλος του, θα αποκαλύπτονται εβδομάδα με την εβδομάδα screenshots από την νέα έκδοση του GreekTuts…

Κεντρική Σελίδα

Άρθρο σε Πλήρη Ανάπτυξη

Στατική Σελίδα

Σελίδα Επικοινωνίας

Διαβάστε περισσότερα για την νέα έκδοση στο άρθρο WordPress 3 που δημοσιεύτηκε κατά την διάρκεια του Μήνα WordPress

Πολύ σύντομα το GreekTuts θα “φορέσει” την νέα έκδοση, και θα είναι κοντά σας καλύτερο από ποτέ

Κατεβάστε και εσείς την νέα έκδοση WordPress 3 από εδώ

Μερικές φορές είναι βολικό να αναφερόμαστε στις στήλες και στους πίνακες της 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 είναι καλύτερη στο να βελτιστοποιεί εσωτερικά τέτοια ερωτήματα και έτσι εκτελούνται ταχύτερα.

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

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

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

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

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

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

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

Αν και κανένα 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.

Πως χρησιμοποιώ το Font Directory και το Font API;

To μόνο που έχουμε να κάνουμε είναι να συμπεριλάβουμε σαν stylesheet το font από το Google Directory στο <head> της σελίδας μας. Δείτε το παράδειγμα παρακάτω

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }
</style>
</head>
<body>
Hello World
</body>
</html>

Τι κερδίζουμε χρησιμοποιόντας το Font API;

1. Ελατωμένη χρήση bandwidth (το βάρος το επωμίζεται η Google)
2. Ταχύτητα λόγω Caching  (ίδια fonts που χρησιμοποιούνται σε ιστοσελίδες, αποθηκεύονται στους browser μας)
3. Γενικότερη ταχύτητα (Το Google’s CDN είναι γρηγορότερο από κάθε ιστοσελίδα)

Μπορείτε να βρείτε περισσότερες οδηγίες και την λίστα με τα διαθέσιμα fonts εδώ

Tο ASCOOS CMS είναι ένα εμπορικό σύστημα διαχείρισης περιεχομένου (CMS) που διανέμεται υπό την άδεια χρήσης ΑGL. Μπορείτε να χρησιμοποιήσετε το ASCOOS CMS για να υλοποιήσετε απλούς ως και σύνθετους ιστότοπους χωρίς να απαιτείται να έχετε ιδιαίτερες τεχνικές γνώσεις.

Η ονομασία ASCOOS είναι αρχικά των λέξεων Alexsoft Software Content Object-Oriented System, δηλαδή αντικειμενοστραφές σύστημα διαχείρισης περιεχομένου της AlexSoft Λογισμικό. Το τελικό κόστος του παραγόμενου ιστότοπου χρησιμοποιώντας το ASCOOS CMS, είναι κατά πολύ μικρότερο από άλλα CMS που  έχουν ανοικτό κώδικα, καταρρίπτοντας έτσι τον μύθο περί του ακριβού λογισμικού όταν αυτό διανέμεται κάτω από εμπορική άδεια χρήσης.

Επιφάνεια Εργασίας

Η ιστορία του ASCOOS CMS

Τον Μάιο του 2006, βλέποντας ότι στην αγορά τα προγράμματα διαχείρισης περιεχομένου που κυκλοφορούσαν περισσότερο δημιουργούσαν παρά έλυναν προβλήματα, γεννήθηκε η ιδέα ανάπτυξης ενός νέου cms φιλικού προς τον τελικό χρήστη.

Τον Ιούνιο του 2006, ανακοινώθηκε και επίσημα η ιδέα για την ανάπτυξη του νέου cms και άρχισε από έναν και μόνο προγραμματιστή, τον δημιουργό του, Δρογκίδη Χρήστο, η εξοντωτική διαδικασία αποτύπωσης των προδιαγραφών και λειτουργιών του νέου cms.  Αρχικώς επελέγη η ονομασία Delta CMS αλλά στην πορεία το όνομα αυτό πήρε την σημερινή του ονομασία.

Μετά από διάστημα σχεδόν ενός έτους, το καλοκαίρι του 2007, οριστικοποιήθηκε η σημερινή μορφή τουASCOOS CMS, και ξεκίνησε η διαδικασία δημιουργίας των προηγμένων προδιαγραφών του…προδιαγραφές που ακόμη και σήμερα αδυνατούν να προσεγγίσουν άλλα cms.

Περισσότερα για την ιστορία του ASCOOS στην επίσημη ιστοσελίδα…

Δομή του ASCOOS CMS

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

2.1 Πυρήνας του CMS

Ο πυρήνας του ASCOOS CMS αποτελείται από δεκάδες κρυπτογραφημένα αρχεία, τα οποία είναι έτσι δομημένα ώστε να παράγουν ποιοτικό και γρήγορο κώδικα, καταναλώνοντας παράλληλα όσο το δυνατό λιγότερους πόρους του εξυπηρετητή. Τα αρχεία αυτά είναι προστατευμένα από εξωτερικές προσβάσεις.

2.2 Ασφάλεια προγράμματος

Στο ASCOOS CMS έχει υλοποιηθεί ένα εξειδικευμένο σύστημα προστασίας με την ονομασία ASS που φροντίζει να προστατεύει τόσο τον εαυτό του όσο και την ιστοσελίδα σας, πριν και κατά την διάρκεια φόρτωσης του πυρήνα του.

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

• Εικόνες ασφαλείας (captcha) με πρόσθετη επιβεβαίωση σωστής πληκτρολόγησης
• Προστασία από Attacks, XSS και SQL Injections.
• Προστασία Υπερχείλισης αιτημάτων
• Καταγραφέας κίνησης που καταγράφει όλες τις επιτυχημένες ή μη απόπειρες επίσκεψης, σύνδεσης και επιθέσεων στην ιστοσελίδα σας καθώς και των παραγόμενων σφαλμάτων.
• Η Απόκρυψη σελίδας εισόδου στο τμήμα διαχείρισης, θα κρύψει την σελίδα εισόδου από οποιονδήποτε άλλον εκτός του διαχειριστή της ιστοσελίδας ή τους εξουσιοδοτημένους χρήστες.
• Ενισχυμένη ασφάλεια και επιμελείς έλεγχοι των στοιχείων που εισάγονται στο σύστημα από τους επισκέπτες.

Παράθυρα

2.3 Προγράμματα συστήματος και χρήστη

Τα προγράμματα στο ASCOOS CMS χωρίζονται σε δύο κατηγορίες, συστήματος και χρήστη. Στη πρώτη όλα τα προγράμματα είναι ενσωματωμένα και απαραίτητα για την λειτουργία του ίδιου του ASCOOS CMS και δεν μπορούν να απεγκατασταθούν, ενώ τα προγράμματα χρήστη είναι προαιρετικά και μπορούν να εγκατασταθούν / απεγκατασταθούν οποιαδήποτε στιγμή το θελήσει ο ιδιοκτήτης της σελίδας.

Περισσότερα για την δομή του ASCOOS στην επίσημη ιστοσελίδα…

Τμήματα του ASCOOS CMS

• Τμήμα εμφάνισης ιστοσελίδας στους χρήστες (Frontend).
• Τμήμα διαχείρισης ιστοσελίδας (Frontend).
• Τμήμα διαχείρισης υπηρεσιών. (Services).

3.1 Τμήμα εμφάνισης ιστοσελίδας στους χρήστες (Frontend).

Το τμήμα αυτό υλοποίησης, αφορά την εμφάνιση της ιστοσελίδας μας στους χρήστες. Μέσω των προτύπων εμφάνισης (Templates) μπορούμε να διαμορφώσουμε τον τρόπο με τον οποίο θα εμφανιστούν τα δεδομένα μας στους χρήστες.   (Frontend).

Επεκτάσεις

3.2 Τμήμα διαχείρισης ιστοσελίδας (Frontend).

Στο τμήμα αυτό υλοποιείται η διαχείριση της ιστοσελίδας μας. Στο τμήμα αυτό έχουν πρόσβαση μόνο εξουσιοδοτημένοι χρήστες και αφορά την διαχείριση τόσο των δεδομένων (άρθρων, banners, μηνυμάτων κλπ) όσο και της συμπεριφοράς της ίδιας της ιστοσελίδας.

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

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

Μπορείτε να αλλάξετε την ταπετσαρία (Wallpaper) στην επιφάνεια εργασίας, να αλλάξετε ολόκληρο το θέμα του πίνακα διαχείρισης (wallpaper, εικονίδια, μορφή παραθύρων κλπ.), να αλλάξετε την εμφάνιση στην οθόνη σύνδεσης του περιβάλλοντος διαχείρισης κ.α.

Περισσότερα για τα τμήματα του ASCOOS στην επίσημη ιστοσελίδα…

Επίσημη Κυκλοφορία

Το ASCOOS CMS την παρούσα στιγμή βρίσκεται στα τελευταία στάδια πριν την πρώτη έκδοση alpha.

Μετά την ολοκλήρωση της έκδοσης alpha, θα ακολουθήσουν σε πολύ μικρό χρονικό διάστημα οι εκδόσεις alpha/2 και Beta με την οποία θα ολοκληρωθούν οι δοκιμαστικές εκδόσεις και θα δοθεί στην δημοσιότητα το DEMO, ώστε να μπορείτε να αξιολογήσετε το προϊόν.

Που θα βρώ περισσότερα για το ASCOOS;

Μπορείτε να μάθετε περισσότερα για το ASCOOS CMS στην επίσημη ιστοσελίδα του το ascoos.com

Θέλουμε να ευχαριστήσουμε τον Χρήστο Δρογκίδη, δημιουργό του ASCOOS για την άδεια του να γράψουμε το παρόν άρθρο.

Η HTML5 είναι η νέα έκδοση της γνωστής γλώσσας προγραμματισμού HTLM. Η προηγούμενη έκδοση, η οποία χρησιμοποιούμε ακόμα σήμερα, βγήκε το 1999. Από τότε όμως έχουν αλλάξει πολλά στον παγκόσμιο ιστό, και έτσι η ανάγκη για standards και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) να συνεργαστούν και να δημιουργήσουν την νέα αυτή γλώσσα. Η HTML5 είναι ακόμα υπό ανάπτυξη, αλλά μερικοί browsers υποστηρίζουν από τώρα κάποια χαρακτηριστικά της και κάποιες λειτουργίες της.

Κάποιοι βασικοί κανόνες που έχουν οριστεί για την HTML5 είναι:

• Βάση για τα νέα χαρακτηριστικά να είναι οι HTML, CSS, DOM, και η JavaScript
• Ελαχιστοποίηση των plugins (όπως το Flash)
• Καλύτερη λειτουργία εντοπισμού λαθών
• Περισσότερο markup για να αντικατασταθεί το scripting
• Πλήρη συμβατότητα ανεξαρτήτως συσκευής

Νέα Χαρακτηριστικά

Κάποια από τα νέα χαρακτηριστικά της HTML5 είναι:

• Το στοιχείο canvas για το drawing
• Τα στοιχεία video και audio για αναπαραγωγή πολυμέσων
• Νέα στοιχεία περιεχομένου όπως τα footer, header, nav και section
• Νέα στοιχεία δημιουργίας φόρμας όπως τα calendar, date, time, email, url και search

Video στην HTML5

Μέχρι σήμερα, για να παίξουμε ένα video σε έναν browser χρειαζόμαστε κάποιο plugin (πρόσθετο) όπως το Flash ή το QuickTime.

H HTML5 μας καθορίζει έναν νέο τρόπο, και αυτός είναι με την χρήση του στοιχείου video. Ας δούμε πως χρησιμοποιείται

Το μόνο που χρειάζεται να γράψουμε για να εμφανίσουμε το video μας είναι:

<video src="movie.ogg" controls="controls">
</video>

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να δούνε το video μας από κάποιον browser που δεν υποστηρίζει το στοιχείο video της HTML5 γράφουμε

<video src="movie.ogg" width="320" height="240"  controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο video της HTML5.
</video>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου video είναι η εξής:

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Υποστηριζόμενα Video Files/Browsers

Ιδιότητες

• autoplay: To video θα ξεκινήσει αυτόματα μόλις φορτώσει
• controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play
• height:  To ύψος σε pixels
• loop: Αν θα επαναλαμβάνεται το video μετά το τέλος του
• preload: Το video θα φορτώνεται μαζί με την σελίδα
• src: Το URL του video
• width: To πλάτος σε pixels

Audio στην HTML5

Ότι ισχύει σε σχέση με τα videos και τα plugins, ισχύει και για τα audio clips. Έτσι η HTML5 μας ορίζει το στοιχείο audio για την αναπαραγωγή ήχων.

Το μόνο που χρειάζεται να γράψουμε για να αναπαράγουμε τον ήχο μας είναι:

<audio src="song.ogg" controls="controls">
</audio>

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να ακούσουν τον ήχο μας από κάποιον browser που δεν υποστηρίζει το στοιχείο audio της HTML5 γράφουμε

<audio src="song.ogg" controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο audio της HTML5.
</audio>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου audio είναι η εξής:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Υποστηριζόμενα Audio Files/Browsers

Ιδιότητες

autoplay: ο ήχος θα ξεκινήσει αυτόματα μόλις φορτώσει

controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play

loop: Αν θα επαναλαμβάνεται ο ήχος μετά το τέλος του

preload: Ο ήχος θα φορτώνει μαζί με την σελίδα

src: To URL του ηχητικού κομματιού μας

Ευχαριστούμε πολύ τα W3Schools για αυτό το βοήθημα

Στο  δεύτερο μέρος της εισαγωγής στην HTML5 θα δούμε το στοιχείο Canvas και τα tags της HTML5