Το widget

Το widget μας θα είναι ένα κομματάκι JavaScript που θα προσθέτει μια ετικέτα div στο σημείο κλήσης του και μετά με ajax θα φορτώνει την πρώτη σελίδα, αυτήν της εγγραφής δηλαδή. Εδώ συναντάμε και την πρώτη σημαντική δυσκολία: το φόρτωμα με ajax περιεχόμενου από διαφορετικό domain… Πολλάααα λίτρα μελάνης έχουν χυθεί στην αναφορά των θεμάτων ασφάλειας που κάτι τέτοιο θα δημιουργούσε. Για το λόγο αυτό ακολουθούμε την μέθοδο CORS (Cross Origin Resource Sharing) me με απλή προσθήκη του

Header set Access-Control-Allow-Origin "*"

στο .htaccess μας εφόσον έχουμε ενεργοποιήσει το mod_headers με την εντολή

a2enmod headers

στον εξυπηρετητή apache2.

Εδώ είναι σημαντικό να θυμίσουμε πως πρέπει να φορτωθεί στην ιστοσελίδα που θα φιλοξενήσει την έξοδο του widget (ξενιστής ή host) και το css stylefile μας αλλά και ένα ακόμα JavaScript script που θα περιέχει τις συναρτήσεις που θα χρειαστούμε μετά.

Έτσι λοιπόν το αρχείο newsletter_widget.js περιέχει ό,τι απαιτείται για να φορτώσει το περιβάλλον εγγραφής & διαγραφής στο newsletter με την απλή προσθήκη της γραμμής

στην ιστοσελίδα που θα το φιλοξενήσει.

Η σελίδα εγγραφής

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

Η σελίδα αυτή δεν έχει κάποια ιδιαιτερότητα καθώς είναι μια ετικέτα form με πεδία το όνομα, το επώνυμο, τη διεύθυνση email του προς εγγραφή χρήστη και φυσικά το λειτουργικό μέρος με το captcha. Στο σημείο αυτό, κι για όσους αναρωτιούνται την αναγκαιότητα επιβεβαίωσης πως ο εγγραφόμενος είναι άνθρωπος και όχι μηχανή σε μια λίστα newsletter, σας θυμίζουμε, όπως έχουμε αναφέρει και σε προηγούμενή μας ανάρτηση, πως μας νοιάζει να γίνεται χρήση της form μας όπως για τους λόγους που τη σχεδιάσαμε.

Το μόνο μη συνηθισμένο στην φόρμα είναι πως η αποστολή των δεδομένων γίνεται μεν με post αλλά όχι με κουμπί submit που τα προωθεί σε ότι δηλώνει η ιδιότητα action του form, καθώς κάτι τέτοιο θα φόρτωνε τη σελίδα στόχο και έτσι η αίσθηση του προσθήματος που δεν αλληλεπιδρά με τη σελίδα ξενιστή θα … εξαφανίζονταν!

Για τους λόγους αυτούς λοιπόν ετοιμάζουμε μια κλάση css που να παρουσιάζει ένα πεδίο input ως κουμπί και στην δράση OnClick καλούμε τη συνάρτηση που επιβεβαιώνει τα δεδομένα εισόδου και εφόσον είναι ok τα αποστέλλει στη σελίδα στόχο με ajax.

Τέλος, προσθέτουμε κι ένα σύνδεσμο για τη σελίδα αποχώρησης που πάλι με ajax φορτώνει την σελίδα unregister.php.

Η τελική εικόνα μοιάζει κάπως έτσι:

Η σελίδα παραλαβής των δεδομένων εγγραφής

Στη σελίδα αυτή (receive_registration.php) αρχικά γίνεται καθαρισμός (δεδομένα εισόδου χωρίς καθαρισμό = πηγή πολλών δεινών) και επιβεβαίωση των δεδομένων και του captcha. Στη συνέχεια επιβεβαιώνεται πως η διεύθυνση email που καταχωρίθηκε δεν είναι ήδη στη ΒΔ και τότε καταχωρείται, ενώ αν ήδη είναι καταχωριμένη επιστρέφεται μήνυμα λάθους.

Στην υλοποίηση που επισυνάπτεται του άρθρου αποφασίσαμε η πληροφορία που επιστρέφεται από την σελίδα παραλαβής των δεδομένων εγγραφής να είναι κωδικοποιημένη κατά το εξής πρότυπο: «τύπος μηνύματος»:«id πεδίου που πρέπει να καθαριστεί»:«μήνυμα για το χρήστη» όπου

• ο τύπος μηνύματος δέχεται τις τιμές
  • «error», για εμφάνιση ενημέρωσης αποτυχίας
  • «success», για εμφάνιση ενημέρωσης επιτυχίας
  • το πεδίο «id πεδίου που πρέπει να καθαριστεί» δέχεται τις τιμές
    • «all», για καθαρισμό όλων των πεδίων της φόρμας
    • «none», για καθαρισμό κανενός των πεδίων της φόρμας
    • το id ενός πεδίου που πρέπει να καθαριστεί

Σελίδες αποχώρησης & παραλαβής των δεδομένων αποχώρησης

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

Η τελική εικόνα μοιάζει κάπως έτσι:

Στη σελίδα παραλαβής των δεδομένων αποχώρησης (receive_unregistration.php) όμοια με τη σελίδα παραλαβής των δεδομένων εγγραφής γίνεται καθαρισμός & επιβεβαίωση δεδομένων εισόδου και captcha και στη συνέχεια εφόσον η διεύθυνση email χρήστη υπάρχει, αφαιρούνται τα ευαίσθητα στοιχεία του χρήστη και κωδικοποιείται κατά md5 η διεύθυνση email του, ενώ στην περίπτωση που η διεύθυνση email δεν είναι ήδη καταχωριμένη επιστρέφεται μήνυμα λάθους ακλουθώντας το πρότυπο που προαναφέρθηκε.

Αποστολή στη λίστα

Το σενάριο χρήσης που παρουσιάστηκε ως τώρα θεωρεί πως το backend κομμάτι του κώδικα μπορεί να βρίσκεται σε οποιοδήποτε εξυπηρετητή (κατά προτίμηση που ελέγχουμε) ενώ η προσθήκη του widget θα λειτουργήσει σε οποιαδήποτε σελίδα οποιουδήποτε domain. Ωστόσο, και για απλούστευση του σεναρίου θα θεωρήσουμε πως το backend κομμάτι τρέχει σε έναν εξυπηρετητή σας ενώ σε κάθε σελίδα σας προσθέτετε κι ένα τέτοιο widget ώστε να αυξήσετε τις πιθανότητες να θεαθεί και να εγγραφεί κάποιος στο newsletter σας.

Έτσι η αποστολή ενός newsletter στις διευθύνσεις email της λίστας newsletter σας που δεν είναι κάτι ιδιαίτερο: Χρησιμοποιώντας την πανταχού παρούσα βιβλιοθήκη αποστολής email PHPMailer για κάθε μια από τις εγγραφές της βάσεις… στέλνετε κι από ένα μήνυμα email.

Στην συνημμένη υλοποίηση εκτός των προτύπων κειμένου (templates) για τα μηνύματα θα βρείτε και

• μια υπερ-απλή διεπαφή ενημέρωσης της κατάστασης αποστολής του μηνύματος για όλες τις χρησιμοποιούμενες διευθύνσεις
• ρυθμιζόμενη χρονοκαθυστέρηση μεταξύ των αποστολών μιας και πολλοί εξυπηρετητές την απαιτούν
• την εφαρμογή διαδικτυακής διαχείρισης βάσεων δεδομένων sqlite που βρίσκεται στη διε΄ύθυνση db/adminer.php (και που πρέπει για λόγους ασφάλειας μετά τις δοκιμές σας να διαγράψετε!)

Προσοχή: Η σελίδα πρέπει να παραμένει ανοικτή μέχρι να ολοκληρωθεί η αποστολή!

Μελλοντικές επεκτάσεις

Το εύρος στο οποίο μπορείτε να επεκτείνετε την πρότασή μας είναι δύσκολα περιορίσιμο. Ιδού δύο από τις σημαντικότερες ιδέες μας:

• Επέκταση της ΒΔ ώστε να περιέχει και ως οντότητες το newsletter και να μπορείτε να καταγράψετε πότε στάλθηκε σε ποιόν και τι,
• Επέκταση των λιστών ώστε να φιλοξενείτε και τις λίστες newsletter των φίλων σας,
• Βελτίωση των μηνυμάτων χρήστη από alert της JavaScript σε πολύ πιο φιλικά html,
• πολλά πολλά άλλα.

Επίλογος

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

Ξέρουμε πως θα κάνετε το σωστό 🙂
Πηγαίος κώδικας
Newsletter widget & mail sending source