Πώς να δημιουργήσετε μια φόρμα επικοινωνίας HTML5 / CSS3 που βασίζεται σε Ajax
Η φόρμα επικοινωνίας είναι θανατηφόρα ουσιώδης για κάθε ιστότοπο, καθώς λειτουργεί ως αγγελιοφόρος που διαβιβάζει τη γνώμη ή τις ερωτήσεις των επισκεπτών στον webmaster. Έχουν υπάρξει αμέτρητες φόρμες επικοινωνίας στο διαδίκτυο, αλλά δυστυχώς οι περισσότεροι από αυτούς δεν σας εξηγούν τα εσωτερικά μέρη εργασίας, οπότε έρχεται ένα λεπτομερές σεμινάριο για να σας διδάξουμε να δημιουργήσετε μια προηγμένη φόρμα επικοινωνίας από την αρχή με βάση την τεχνολογία pop, HTML5 και CSS3.
Λαμβάνοντας υπόψη τη φύση μιας ηλεκτρονικής φόρμας ηλεκτρονικής αλληλογραφίας, πρέπει επίσης να βυθίσουμε σε δύο ξεχωριστά πεδία εφαρμογής, ο οποίος είναι ο κώδικας backend PHP για την αποστολή μηνυμάτων ηλεκτρονικού ταχυδρομείου και λειτουργιών jQuery για πλούσιο περιβάλλον χρήστη. Μέχρι το τέλος θα μείνει με μια πλήρως δυναμική και λειτουργική φόρμα επικοινωνίας γραμμένη με μεταγενέστερη προσαρμογή στο μυαλό.
Ξεκινήστε τώρα να δημιουργήσετε τη δική σας προηγμένη φόρμα επικοινωνίας!
Συντόμευση προς:
- Επίδειξη - Πάρτε μια προεπισκόπηση του τι χτίζετε
- Λήψη - Λήψη όλων των αρχείων (php + css)
Δομή της εφαρμογής
Για να ξεκινήσετε θα χρειαστείτε κάποιο τύπο διακομιστή ιστού για να εργαστείτε. Εάν εκτελείτε ένα μηχάνημα των Windows το WAMP είναι ίσως η καλύτερη επιλογή σας. Οι χρήστες Mac έχουν ένα παρόμοιο πρόγραμμα με το όνομα MAMP το οποίο είναι εξίσου εύκολο να εγκατασταθεί.
Αυτά τα πακέτα θα δημιουργήσουν έναν τοπικό διακομιστή στο μηχάνημά σας με πλήρη πρόσβαση στην PHP. Εναλλακτικά, αν διαθέτετε χώρο στο διακομιστή ή έχετε πλήρη πρόσβαση σε διακομιστές σε μια απομακρυσμένη τοποθεσία, μπορείτε να χρησιμοποιήσετε αυτό αντί. Δεν θα χρειαστούμε βάσεις δεδομένων MySQL, οι οποίες θα πρέπει να απλουστεύσουν τα πράγματα λίγο.
Μόλις ο διακομιστής σας έχει ρυθμιστεί δημιουργήστε ένα νέο φάκελο για να φιλοξενήσετε την εφαρμογή. Μπορείτε να το ονομάσετε ό, τι θέλετε, καθώς δεν είναι επιβλαβές ή ακόμη και σχετίζεται με το τελικό προϊόν. Η δομή του φακέλου θα χρησιμοποιηθεί όταν έχετε πρόσβαση στα αρχεία σας σε ένα πρόγραμμα περιήγησης ιστού. Ένα απλό παράδειγμα θα ήταν http: //localhost/ajaxcontact/contact.php
Ας οικοδομήσουμε τα αρχεία μας!
Θα εργαστούμε μόνο μέσα σε 2 αρχεία πυρήνα. Θα χρειαστούμε πρώτα έναν πυρήνα .php αρχείο για να φιλοξενήσει όχι μόνο τη λογική της εφαρμογής μας, αλλά και το markup frontend HTML. Παρακάτω παρατίθεται δείγμα κώδικα από το αρχικό μας αρχείο.
Φόρμα επικοινωνίας με το jQuery HTML5 / CSS Ajax
Για να ξεκινήσουμε έχουμε γράψει μια απλή ενότητα τίτλου στο έγγραφό μας. Αυτό περιλαμβάνει έναν γενικό Δήλωση Doctype για HTML5 και ορισμένα στοιχεία εγγράφου HTML / XML. Αυτά δεν είναι ακριβώς απαραίτητα, αλλά θα διευκολύνουν τη διαδικασία απόδοσης σε παλαιότερα (και νεότερα) προγράμματα περιήγησης. Επίσης δεν πονάει ποτέ να προσφέρει περισσότερες πληροφορίες.
Λίγο πιο κάτω μπορούμε να δούμε 2 γραμμές ακριβώς πριν την ετικέτα κλεισίματος. Το πρώτο περιλαμβάνει μας δέσμη ενεργειών jQuery από το ηλεκτρονικό αποθετήριο κώδικα Google. Αυτό απαιτείται για να λειτουργήσουν τα σφάλματα δυναμικής σελίδας. Ακριβώς κάτω από αυτό έχουμε την ένταξη ενός βασικού Έγγραφο CSS που περιέχει όλα τα στυλ σελίδας μας.
Μέσα στο σώμα του εγγράφου μας έχουμε μερικές που περιέχουν τμήματα παρακρατώντας μια κύρια φόρμα επικοινωνίας. Αυτή φιλοξενεί 3 στοιχεία εισόδου για το όνομα χρήστη, διεύθυνση ηλεκτρονικού ταχυδρομείου, και προσωπικό μήνυμα. Το HTML markup είναι αρκετά πρότυπο και δεν πρέπει να μπερδεύει το μυαλό οποιουδήποτε ενδιαμέσου προγραμματιστή.
Το email σας στάλθηκε. Χουζά!
Εδώ έχουμε ένα βασικό Υποχρεωτικό κώδικα PHP ένθετα μέσα σε μερικά δοχεία σελίδων. Αυτό ελέγχει την καθορισμένη τιμή μιας μεταβλητής που ονομάζεται
$ emailSentκαι αν είναι ίση με αλήθεια, θα εμφανίσει ένα μήνυμα επιτυχίας.Μέσα στο HTML φόρμα μας
ο αλλού η δήλωση είναι τι θα τρέξει στη φόρτωση της πρώτης σελίδας δεδομένου ότι δεν θα υπάρξει περιεχόμενο που να στείλει αρχικά. Στο εσωτερικό θα συμπεριλάβουμε ένα σύντομη συλλογή στοιχείων μορφής και ένα κουμπί υποβολής.
Σφάλμα κατά την υποβολή της φόρμας
Μπορεί να έχετε παρατηρήσει ότι υπάρχει άλλη μπλοκ υπό όρους αμέσως μετά την αρχική φόρμα. Αυτό ελέγχει μια μεταβλητή που ονομάζεται $ hasError και θα εμφανίσει ένα μήνυμα σφάλματος κατά την επιβεβαίωση. Αυτή η εναλλακτική μέθοδος είναι χρησιμοποιείται μόνο εάν είναι απενεργοποιημένη η JavaScript στο πρόγραμμα περιήγησης και συνεπώς δεν μπορεί να δημιουργήσει δυναμικά σφάλματα.
Όλο το δρόμο μπορούμε να βρούμε μεμονωμένες μεταβλητές PHP ελέγχονται. Οι δηλώσεις ρυθμίζονται αν το έντυπο έχει ήδη υποβληθεί με μόνο μερικά ποσά δεδομένων που συμπληρώθηκαν. Αυτό είναι ένα άλλο σύστημα εναλλαγής που εμφανίζει το περιεχόμενο των πεδίων που έχουν ήδη συμπληρωθεί - ένα ωραίο τέχνασμα για την κατάλληλη εμπειρία του χρήστη!
Αμέσως μετά τη συμπλήρωση της φόρμας είναι οι λίγες λειτουργίες jQuery έχουμε γράψει. Θα τα συζητήσουμε πρώτα, αφού είναι η προεπιλεγμένη εφαρμογή στο pageload. Ωστόσο, εάν το πρόγραμμα περιήγησης δεν δέχεται JavaScript, τότε από προεπιλογή μπορούμε να βασιστούμε στον κώδικα PHP.
Άνοιγμα στο jQuery
Ο ευκολότερος τρόπος για να αρχίσετε να μιλάτε σε αυτό το θέμα θα ήταν να κάνετε κατάδυση δεξιά. Θα καταρρίψω μεμονωμένα μπλοκ γραμμικά με γραμματοσειρά, ώστε να μπορείτε να δείτε τι ακριβώς ελέγχει το σενάριο.
Ωστόσο, αν χαθείτε μόνο ανατρέξτε στα αρχεία κώδικα έργου. Όλα τα πλήρη μπλοκ είναι προ-γραμμένα και καλά τεκμηριωμένα στην ιστοσελίδα jQuery. Για να ξεκινήσετε ανοίγουμε τον κώδικα μας παρόμοιο με οτιδήποτε άλλο:
Εάν είστε εξοικειωμένοι με επανάκλησης μπορεί να παρατηρήσετε το Θέση() έχει μια ενσωματωμένη ομάδα παραμέτρων. Οι επανάκλησεις είναι μικρότερες λειτουργίες που καλούνται κατά την απάντηση των δεδομένων από άλλη λειτουργία.
Έτσι, για παράδειγμα, όταν μας jQuery.post () λειτουργεί με επιτυχία ένα ηλεκτρονικό ταχυδρομείο θα καλέσει τη δική του εσωτερική συνάρτηση για την εμφάνιση της κινούμενης κίνησης. Ολόκληρος αυτός ο κώδικας θα μπορούσε να γραφτεί στο δικό του μπλοκ και να μετακινηθεί αλλού. Ωστόσο, χάρη σε αυτό το σεμινάριο, είναι πολύ πιο εύκολο να γράψετε την επανάκληση ως λειτουργία inline.
Διαλείποντας το παρελθόν της PHP μας
Το τελευταίο εμπόδιο που πρέπει να αναφέρουμε είναι το λογική πίσω από τον επεξεργαστή μας PHP. Αυτό είναι το σύστημα backend που πραγματικά θα γίνει καλέστε μια λειτουργία αλληλογραφίας και στείλτε το μήνυμα. Όλος ο κώδικας που χρησιμοποιείται στα παρακάτω παραδείγματα μπορεί να βρεθεί απευθείας στην κορυφή της κύριας μας .php πριν από οποιαδήποτε έξοδο HTML.
Υπάρχουν επίσης μερικές εσωτερικές μορφές που φρεσκάρετε τη σελίδα. Δεν υπάρχει τίποτα συγκεκριμένα νέο εδώ, έτσι δεν θα πάμε σε καμία από τις λεπτομέρειες. Ωστόσο, το styles.css το έγγραφο περιλαμβάνεται στον κώδικα του έργου και περιέχει στοιχειώδεις τεχνικές CSS3.
Για να ξεκινήσουμε ανοίγουμε τη ρήτρα PHP και ελέγξουμε αν υποβληθεί ακόμη και το έντυπο. ο ΘΕΣΗ μεταβλητός “υποβλήθηκε” ήταν στην πραγματικότητα ένα κρυφό πεδίο εισαγωγής που προστέθηκε στο τέλος της φόρμας μας. Είναι ένας χρήσιμος τρόπος ελέγξτε αν ο χρήστης έχει υποβάλει οτιδήποτε αλλά δεν χάνουμε πόρους διακομιστών.
Μετά από αυτό έχουμε 3 ξεχωριστά αν / else έλεγχο ελέγχου για να δείτε εάν έχει συμπληρωθεί κάθε πεδίο εισαγωγής. Δεν θα συμπεριλάβω κάθε κομμάτι της λογικής εδώ, αφού όλα είναι πολύ επαναλαμβανόμενα στη φύση. Ωστόσο, για να σας δώσω ένα σύντομο παράδειγμα, έχω συμπεριλάβει τη ρήτρα επαλήθευσης ηλεκτρονικού ταχυδρομείου παρακάτω:
// χρειάζονται έγκυρα μηνύματα ηλεκτρονικού ταχυδρομείου αν (trim_ ($ _ POST ['email']) === ") $ emailError = 'Ξεχάσατε να εισάγετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][-z0-9_.-]*@[-z0-9.-]+\.[az]2,4$/i", trim ($) ($ Email = trim ($ _ POST ['e-mail']))))) $ emailError = 'Εισήγατε μια μη έγκυρη διεύθυνση ηλεκτρονικού ταχυδρομείου.Η PHP θα περικόψει όλα τα κενά από την τιμή και θα ελέγξει αν υπάρχει τίποτα. Αν ναι, έχουμε μια λεπτομερή Κανονική έκφραση (Regex) για να δείτε αν η συμβολοσειρά εισόδου του χρήστη ταιριάζει με ένα πρότυπο ηλεκτρονικού ταχυδρομείου.
Σίγουρα δεν χρειάζεται να καταλάβετε πώς
preg_match ()εργάζεται για να δημιουργήσει αυτό το σενάριο. Είναι χρήσιμη η λειτουργία καθορισμός κανόνων και απαιτήσεων για έναν επιτυχή τύπο δεδομένων, αλλά εντολές προηγμένης γνώσης προγραμματισμού για να κατανοήσουν πραγματικά. Σε αυτό το σενάριο εξασφαλίζουμε ότι ο χρήστης εισάγει μόνο μερικούς χαρακτήρες, περιλαμβάνει ένα @ ακολουθούμενο από το σύμβολο 2-4 χαρακτήρες που αντιπροσωπεύει ένα Τομέα ανωτάτου επιπέδου.Αφού περάσει όλη η λογική μας και δεν επιστρέψουμε λάθη, ήρθε η ώρα να στείλουμε το μήνυμά μας! Αυτό το κομμάτι κώδικα θα ορίσει μεμονωμένες μεταβλητές για να προσαρμόσετε το μήνυμα ηλεκτρονικού ταχυδρομείου μας και να ρυθμίσετε μερικά mail κεφαλίδες για τη διαδικασία.
// χωρίς σφάλματα αποτυχίας ας στείλουμε email τώρα! εάν (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Υποβληθέν μήνυμα από'. $ name; $ sendCopy = περικοπή ($ _ POST ['sendCopy']); $ body = "Όνομα: $ όνομα \ n \ nΕmail: $ email \ n \ nComments: $ σχόλια"; $ headers = 'Από:'. ' <'.$emailTo.'>'. "\ r \ n". 'Να απαντήσουν σε: ' . $ email; mail ($ emailTo, $ θέμα, $ σώμα, $ κεφαλίδες); // ρυθμίστε την τιμή ολοκλήρωσης boolean σε TRUE $ emailSent = true;Εάν αναρωτιέστε πώς ο κώδικας πρόκειται να καταλάβει τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας, αυτό είναι το μέρος για να συμπληρώσετε. Η πρώτη μεταβλητή στο σύνολο μας είναι ο τίτλος
$ emailToκαι θα πρέπει να περιέχει όποιο από τα δύο διεύθυνση ηλεκτρονικού ταχυδρομείου, η οποία πρόκειται να λάβει το μήνυμα.Στο εσωτερικό μας
$ bodyμεταβλητή επωφελούμενη από το\ nοριοθέτη για να προσθέσετε νέες γραμμές στο μήνυμα. Αυτό προσθέτει μικρές τοποθετήσεις για το όνομα του αποστολέα, διεύθυνση ηλεκτρονικού ταχυδρομείου, ακολουθούμενη από ένα διάλειμμα για τους περιεχομένου μηνυμάτων. Φυσικά θα μπορούσατε να περάσετε το χρόνο να γκρεμίσει την οθόνη, αλλά αυτή η δομή λειτουργεί καλά.συμπέρασμα
Αυτό κλείνει το σεμινάριό μας για μια προηγμένη φόρμα επικοινωνίας. Εάν θέλετε να διαμορφώσετε τα στοιχεία σας σε σχέση με το δικό μου, μπορείτε να δείτε το παράδειγμα μου styles.css εντός του κώδικα του έργου. Ωστόσο, η σελίδα είναι δομημένη αρκετά καλά ώστε να μπορείτε να σχεδιάσετε τη δική σας εμφάνιση και αίσθηση πολύ εύκολα.
Μη διστάσετε να κατεβάσετε τον πηγαίο κώδικα και να εξετάσετε τι έχω κάνει λίγο πιο κοντά. Είναι καλό να ακολουθήσετε ένα σεμινάριο, αλλά η άμεση πρόσβαση στην πηγή του έργου μπορεί να είναι ανεκτίμητη. Έχω επίσης συμπεριλάβει ένα σύντομο φύλλο στυλ για να κάνει προσαρμογές ένα αεράκι, ευχαριστώ για την άποψή σας!
