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

Η φόρμα επικοινωνίας είναι μια τυπική ιστοσελίδα που είναι διαθέσιμη σε κάθε ιστότοπο. Αυτό επιτρέπει στους επισκέπτες του ιστότοπου να επικοινωνήσουν με τους ιδιοκτήτες του ιστότοπου ή τους παρόχους υπηρεσιών που είναι υπεύθυνοι για τη συντήρηση αυτού του ιστότοπου. Σκεφτήκαμε λοιπόν γιατί να μην δημιουργήσουμε μια απλή φόρμα επικοινωνίας χρησιμοποιώντας Angularjs και php για να λαμβάνουμε μηνύματα από ιστότοπους, αναγνώστες ή/και χρήστες.

Χρησιμοποιούμε Angularjs για το μπροστινό μέρος και php στην πλευρά του διακομιστή. Θα γράψουμε κώδικα σε php που παίρνει δεδομένα από μια φόρμα Angular και τα στέλνει μέσω email στον διαχειριστή του ιστότοπου. Δημιουργήστε έναν φάκελο που ονομάζεται "φόρμα επικοινωνίας" στον κατάλογο της εφαρμογής web και δημιουργήστε ένα δείγμα σχεδίου σελίδες HTML– index.html. Τώρα αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο αρχείο index.html.

Επίδειξη - Απλή φόρμα επικοινωνίας με χρήση Angularjs και php Φόρμα επικοινωνίας με χρήση angularjs και PHP Το όνομά σας Μήνυμα email Αποστολή

Κωδικός php για αποστολή ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ

Δημιουργήστε μια σελίδα contact.php και αντιγράψτε επικολλήστε τον παρακάτω κώδικα. Παρακάτω είναι ο κώδικας php που θα ανακτήσει τα δεδομένα από τη γωνιακή φόρμα και θα τα στείλει μέσω email στην καθορισμένη διεύθυνση email.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->όνομα; echo "Email: " . $data->email; echo "Μήνυμα: " . $data->message; // έστειλε ένα email $to = $data->email; $subject = "Δοκιμαστική τοποθεσία επιστολής για δοκιμή φόρμας επικοινωνίας angularjs"; $message = $data->message; $headers = "Από: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //Λειτουργία αλληλογραφίας PHP για αποστολή email σε διεύθυνση email ($to, $subject, $message, $headers); ?>

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

Η απαιτούμενη παράμετρος, η οποία μερικές φορές χρησιμοποιείται για είσοδο, δεν λειτουργεί στον αρχαίο IE, ο οποίος απλά δεν μπορεί να μείνει έτσι. Οι συνταξιούχοι χρήστες που εξακολουθούν να χρησιμοποιούν IE6 θα πρέπει να έχουν την ίδια ευκολία χρήσης με τους χρήστες του ιστότοπού σας Google Chrome τελευταία έκδοση. Ποιος, εκτός από προγραμματιστές ιστού, μπορεί να τους φροντίσει.

Για οδυνηρά πράγματα, ω Internet Explorer

Για κανονικά προγράμματα περιήγησης, που περιλαμβάνουν Firefox, Opera και Google Chrome, αυτή η εργασία είναι σχετικά εύκολη. Ακόμη και παλαιότερες εκδόσεις αυτών των προγραμμάτων περιήγησης εμφανίζουν εξίσου καλά τον κώδικα HTML, εκτός εάν, φυσικά, χρησιμοποιούνται κάποιες νέες τεχνολογίες. Αλλά για να επιτευχθεί αυτό σε προγράμματα περιήγησης της οικογένειας του Internet Explorer, απαιτούνται απλώς Ηράκλειες προσπάθειες.

Κάθε έκδοση περιηγητής διαδυκτίουΟ Explorer έχει τη δική του μοναδική βλακεία. Αυτό που λειτουργεί στον IE6 ενδέχεται να μην λειτουργεί σωστά στον IE7 και το αντίστροφο. Η Microsoft δεν μπόρεσε να ξεπεράσει αυτόν τον ζωολογικό κήπο ακόμη και στην πιο πρόσφατη έκδοση του προγράμματος περιήγησής της.

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

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

Λοιπόν, πώς μπορώ να απαιτηθώ να εργαστώ σε παλαιότερες εκδόσεις του IE;

Ο JS έρχεται να μας βοηθήσει. Προηγουμένως, δεν το άντεχα, αλλά τώρα δεν βλέπω άλλο μονοπάτι χωρίς αυτό στην έκταση του "σωστού" ΙΣΤΟΣ.

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

Η συνάρτηση fnCheckFields() θα είναι υπεύθυνη για όλα. Τοποθετήστε τον κώδικα JS στον ιστότοπό σας:

function fnCheckFields(form_obj)( var error_msg = "Συμπληρώστε όλα τα απαιτούμενα πεδία."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("required") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; )

Συνήθως συνιστάται να το τοποθετείτε ανάμεσα στις ετικέτες HTML HEAD στην αρχή της σελίδας, αλλά θα συνιστούσα να το τοποθετήσετε στο κάτω μέρος της σελίδας πριν από την ετικέτα κλεισίματος BODY. Με αυτόν τον τρόπο το JS έχει μικρότερο αντίκτυπο στην ταχύτητα φόρτωσης της σελίδας.

Το παράθυρο εισαγωγής όπου πρέπει να εισαχθεί η απαιτούμενη παράμετρος θα πρέπει να μοιάζει με αυτό σε html:

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

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

Κοινοποιήστε στα μέσα κοινωνικής δικτύωσης δίκτυα

Κατά τη δημιουργία εφαρμογών Ιστού, είναι σημαντικό να λαμβάνετε σοβαρά υπόψη την ασφάλεια, ειδικά όταν έχετε να κάνετε με τη λήψη δεδομένων από χρήστες.

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

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

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

Επικύρωση φόρμας με χρήση HTML5

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

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

χαρακτηριστικό τύπου

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

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

Δοκιμάστε να παίξετε με τις τιμές των πεδίων email στην παρακάτω επίδειξη.

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

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

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

χαρακτηριστικό μοτίβο

Το χαρακτηριστικό μοτίβο πιθανότατα θα κάνει πολλούς προγραμματιστές front-end να πηδήξουν από χαρά. Αυτό το χαρακτηριστικό δέχεται μια τυπική έκφραση (παρόμοια με τη μορφή τυπικής έκφρασης JavaScript) που θα χρησιμοποιηθεί για τον έλεγχο της ορθότητας των δεδομένων που εισάγονται στο πεδίο.

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

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

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

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

Ας δούμε μερικά παραδείγματα χρήσης κανονικών παραστάσεων για την επικύρωση της τιμής των πεδίων εισαγωγής.

Τηλεφωνικοί αριθμοί

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

Για παράδειγμα, σε ορισμένες χώρες η μορφή των αριθμών τηλεφώνου αντιπροσωπεύεται ως xxxx-xxx-xxxx και η τηλεφωνικό νούμεροθα είναι κάπως έτσι: 0803-555-8205.

Η τυπική έκφραση που ταιριάζει αυτό το μοτίβο είναι: ^\d(4)-\d(3)-\d(4)$ . Σε κώδικα αυτό μπορεί να γραφτεί ως εξής:

Τηλεφωνικό νούμερο:

Αλφαριθμητικές τιμές Απαιτείται χαρακτηριστικό

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

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

Για παράδειγμα: ή (για συμβατότητα XHTML)

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

συμπέρασμα

Η υποστήριξη του προγράμματος περιήγησης για την επικύρωση φόρμας είναι αρκετά καλή και για τα παλαιότερα προγράμματα περιήγησης μπορείτε να χρησιμοποιήσετε polyfills.

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

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

Οδηγίες: Εδώ είναι ένας πίνακας με 49 αριθμούς - 25 σε μικρά γράμματα και 24 σε μεγάλα γράμματα. Πρέπει να αναζητήσετε αριθμούς με μικρά γράμματα από το 1 έως το 25 με αύξουσα σειρά και με μεγάλα γράμματα από το 24 έως το 1 με φθίνουσα σειρά. Αυτό πρέπει να γίνεται εναλλάξ: 1 - σε μικρά γράμματα, 24 - σε μεγάλα γράμματα, 2 - σε μικρά γράμματα, 23 - σε μεγάλα γράμματα, κ.λπ. Όταν βρείτε τον αριθμό, σημειώστε τον στο φύλλο δοκιμής μαζί με το γράμμα δίπλα του.

Χρόνος ολοκλήρωσης εργασίας - 5 λεπτά.

7η	4-ιντσών	15-v	8ωρη	11-κ	1-γρ	25η
14-sh	18-l	21-στ	15-z	3η	19-στ	17-z
7-στ	2	11η	10-s	23η	8ο	10-α
17-β	14-σελ	6-r	20-σελ	1 μ.μ.	23-sh	5-ετ
9-στ	3-l	22-β	1ος	16-γ	6-δ	13-n
2ο	4-ts	22-0	20-α	12	19-z	24η
24-γρ	18-s	12-t	9-κ	16-n	21-ημ	5-ο

Έντυπο ελέγχου:

Μεγάλο μέγεθος

Αποτελέσματα: . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Αξιολόγηση των αποτελεσμάτων (κατανομή και αλλαγή προσοχής):

Μεθοδολογία «Αναπαραγωγή γεωμετρικών σχημάτων» (μέση και μεγαλύτερη εφηβεία) Οδηγίες. Μέσα σε 10 δευτερόλεπτα, καλείστε να εξετάσετε προσεκτικά τα σχήματα που είναι εγγεγραμμένα στο 10ο τετράγωνο... Μέθοδος «Βρείτε το σφάλμα στις παροιμίες» Οδηγίες: Βρείτε το σφάλμα στις παροιμίες. Ο χρόνος για την ολοκλήρωση της εργασίας είναι 3 λεπτά. Με τη μορφή... Μεθοδολογία «αξιολόγηση της λειτουργικής οπτικής μνήμης» Η λειτουργική οπτική μνήμη του παιδιού και οι δείκτες της μπορούν να προσδιοριστούν χρησιμοποιώντας τα εξής...

Πρόσθεσε ένα σχόλιο

Υποχρεωτικό Επιλέξτε άλλο όνομα

Υποχρεωτικό Εισαγάγετε ένα έγκυρο e-mail

Αφγανιστάν Αλβανία Αλγερία Αργεντινή Αρμενία Αυστρία Αυστρία Αζερμπαϊτζάν Μπαχρέιν Μπαγκλαντές Λευκορωσία Βέλγιο Μπελίζ Βερμούδες Μπολιβαριανή Δημοκρατία της Βενεζουέλας Βολιβία Βοσνία-Ερζεγοβίνη Βραζιλία Μπρουνέι Νταρουσαλάμ Βουλγαρία Καμπότζη Καναδάς Καραϊβική Χιλή Κολομβία Κόστα Ρίκα Κροατία Τσεχία Δανία Δομινικανή Δημοκρατία Φινλανδία Φινλανδία Γεωργία Αίγυπτος Εκουαδόρ Ελ. Γερμανία Ελλάδα Γροιλανδία Γουατεμάλα Ονδούρα Χονγκ Κονγκ S.A.R. Ουγγαρία Ισλανδία Ινδία Ινδονησία Ιράν Ιράκ Ιρλανδία Ισλαμική Δημοκρατία του Πακιστάν Ισραήλ Ιταλία Τζαμάικα Ιαπωνία Ιορδανία Καζακστάν Κένυα Κορέα Κουβέιτ Κιργιζία Λάο P.D.R. Λετονία Λίβανος Λιβύη Λιχτενστάιν Λιθουανία Λουξεμβούργο Macao S.A.R. Μακεδονία (FYROM) Μαλαισία Μαλδίβες Μάλτα Μεξικό Μογγολία Μαυροβούνιο Μαρόκο Νεπάλ Ολλανδία Νέα Ζηλανδία Νικαράγουα Νιγηρία Νορβηγία Ομάν Παναμάς Παραγουάη Λαϊκή Δημοκρατία της Κίνας Περού Φιλιππίνες Πολωνία Πορτογαλία Πριγκιπάτο του Μονακό Πουέρτο Ρίκο Κατάρ Δημοκρατία των Φιλιππίνων Ρουμανία Ρωσία Ρουάντα Σερβία Σαουδική Αραβία Πρώην) Σιγκαπούρη Σλοβακία Σλοβενία ​​Νότια Αφρική Ισπανία Σρι Λάνκα Σουηδία Ελβετία Συρία Ταϊβάν Τατζικιστάν Ταϊλάνδη Τρινιδάδ και Τομπάγκο Τυνησία Τουρκία Τουρκμενιστάν Η.Α.Ε. Ουκρανία Ηνωμένο Βασίλειο Ηνωμένες Πολιτείες Ουρουγουάη Ουζμπεκιστάν Βιετνάμ Υεμένη Ζιμπάμπουε

Απαιτείται