Conseil rapide créer un formulaire de contact avec des alertes SMS et par courrier électronique

Dans cette astuce, je vais vous montrer comment créer un formulaire de contact à l'aide de PHP et ActionScript 3. Nous apprendrons comment passer des variables de Flash à PHP et alerter le propriétaire en envoyant un courrier électronique ou un message texte SMS..


Étape 1: Configuration du document

La première chose à faire est de télécharger les fichiers source de ce tutoriel. Étant donné que ce tutoriel est une astuce, je vais ignorer les étapes de la mise en page. Une fois les fichiers téléchargés, ouvrez le fichier 'contactForm.fla'.

La mise en page SWF ressemble à ceci:


Étape 2: la classe de document

Créez un nouveau fichier "ActionScript" et enregistrez-le dans le même dossier que "contactForm.fla". Nommez le fichier 'contatForm.as.' Ensuite, liez le fichier Flash et le fichier ActionScript dans le panneau Propriétés. Pour plus d'informations sur la configuration de la classe Document, consultez ce guide rapide..


Étape 3: Les importations

Voici les instructions d'importation que nous allons utiliser pour ce fichier. Nous allons également créer deux variables globales. L'une consiste à utiliser pour un fichier en pièce jointe, et l'autre consiste à savoir si nous allons utiliser ce fichier ou non..

 package import fl.controls.ProgressBarMode; import fl.controls.RadioButton; import fl.controls.RadioButtonGroup; importer fl.controls.TextInput; import fl.core.UIComponent; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.FocusEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.external.ExternalInterface; import flash.net.FileFilter; import flash.net.FileReference; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.TextField; classe publique contactForm étend Sprite private var file: FileReference; attachement var privé: Boolean; fonction publique contactForm () init (); 

Étape 4: Commencer à coder

La première fonction que nous appelons est init (). Dans la fonction, nous définissons les étiquettes pour nos champs de texte. En outre, nous créons un tableau des fournisseurs de téléphonie cellulaire. Étant donné que je réside aux États-Unis, je n’utilise que les fournisseurs américains. Consultez cet article sur Wikipedia qui vous aidera avec les fournisseurs de téléphonie cellulaire dans votre pays.

 fonction privée init (): void var labelArray: Array = [[nameLabel, "From name:"], [subjectLabel, "Subject:"], [messageLabel, "Message:"], [emailLabel, "From email:" ], [toLabel, "To name:"], [addyLabel, "To email:"]]; var textArray: Array = [nameText, subjectText, messageText, emailText, toText, addyText]; var len: int = labelArray.length; attachement = faux; pBar.visible = false; pBar.minimum = 0; pBar.maximum = 100; pBar.mode = ProgressBarMode.MANUAL; combo.visible = false; pour (var i: int = 0; i 

Nous avons également mis en place les boutons radio.


Étape 5: Manipulation de la pièce jointe

La première chose qui nous préoccupe est la gestion de la pièce jointe. Depuis que j'utilise Flash CS3, nous allons attacher la méthode traditionnelle. Lorsque le bouton "attacher" est cliqué, nous allons instancier le FileReference variable que nous avons créée. Une chose importante à noter est que le FileReference variable doit être un global variable (c'est-à-dire non spécifique à une seule fonction) pour que les événements se déclenchent correctement.

Lorsque l'utilisateur aura sélectionné un fichier à télécharger, nous afficherons la barre de progression et écouterons les événements «progression» et «achèvement». Lorsque l'événement "complet" est déclenché, nous désactivons le bouton "joindre", définissons la variable de pièce jointe sur vrai et cacher la barre de progression.

 fonction privée onAttach (event: MouseEvent): void file = new FileReference (); file.addEventListener (Event.SELECT, onSelect); file.browse ([new FileFilter ("Images (* .jpg, * .jpeg, * .gif, * .png)", "* .jpg; * .jpeg; * .gif; * .png")]);  fonction privée onSelect (event: Event): void pBar.visible = true; file.addEventListener (ProgressEvent.PROGRESS, onProgress); file.addEventListener (Event.COMPLETE, onUpload); file.upload (nouvelle URLRequest ("upload.php"), "fichier");  fonction privée onProgress (event: ProgressEvent): void pBar.setProgress (int ((event.bytesLoaded / event.bytesTotal) * 100), 100);  fonction privée onUpload (événement: événement): void pBar.visible = false; attach.enabled = false; attachement = vrai; 

Étape 6: Le document de téléchargement

Passer à PHP. Tout d'abord, créez un nouveau document PHP et enregistrez-le sous le nom "upload.php". Créez maintenant un répertoire sur votre serveur Web appelé "temp". Ce sera le dossier que nous utilisons pour stocker le fichier téléchargé. Nous assignerons cet emplacement à une variable PHP appelée "dossier". Ensuite, nous utilisons la variable super globale '$ _FILES' pour obtenir le nom du fichier que nous avons chargé. Ensuite, nous créons une variable qui stocke le nom temporaire du fichier que nous venons de télécharger. Enfin, nous déplaçons le fichier dans notre répertoire 'temp'. Vous pouvez trouver un excellent tutoriel sur le téléchargement de fichiers avec PHP sur Nettuts+.

 

Étape 7: le document de message

Créez un nouveau document PHP et enregistrez-le sous le nom 'message.php'. Dans ce fichier, nous recevrons les variables de Flash. La première chose que nous faisons est d’utiliser la variable super globale '$ _POST' pour définir tous les champs de courrier électronique tels que 'vers' et 'depuis'. Ensuite, nous définissons notre variable 'en-têtes'. En PHP, nous utilisons '.' au lieu de '+' pour concaténer. Sur notre variable "en-têtes", vous remarquerez ". =" Qui fonctionne de la même manière que "+ =" dans ActionScript. Après chaque concaténation, nous ajoutons deux retours à la ligne. Ceci est important et sans cela notre email pourrait ne pas être envoyé.

Enfin, une fois tous nos en-têtes et champs prêts à être utilisés, nous appelons la fonction 'mail'. Si le courrier réussit, nous vérifions s'il existe un fichier associé au courrier. Si la variable 'file' est définie, alors nous supprimons simplement ce fichier de notre serveur en utilisant la fonction 'unlink'.

 '; $ address = $ _POST ['email']; $ message = $ _POST ['message']; $ subject = $ _POST ['subject']; $ name = $ _POST ['name']; $ from = $ _POST ['from']; $ headers = "De: $ de <$address>\ r \ n "; $ headers. =" Chemin de retour: $ address \ r \ n "; $ headers. =" Répondre-à: $ address \ r \ n "; $ headers. =" X-Mailer: PHP ". phpversion ()." \ r \ n "; $ headers. =" Version de MIME: 1.0 \ r \ n "; // FILE ATTACHMENT GOES HERE $ headers. =" Content-type: text / plain; charset = utf-8 \ r \ n "; if (mail ($ to, $ sujet, $ message, $ en-têtes)) if (isset ($ fichier)) unlink ($ fichier); echo 1; autre echo 0;?>

Étape 8: Ajout de la pièce jointe

Voici le code que nous utilisons pour envoyer une pièce jointe. Si vous souhaitez inclure ce type de fonctionnalité dans votre application, il vous suffit d'insérer ce code où il est indiqué "L'ATTACHEMENT DE FICHIER VA ICI". La première chose que nous faisons est de vérifier si la variable 'fichier' a été publiée. Nous vérifions également si la variable 'bool' est 'true'. Cela permettra de vérifier que l'utilisateur n'essaie pas d'envoyer une pièce jointe sous forme de message texte. Bien que vous puissiez envoyer des fichiers en pièces jointes à un téléphone portable, les dimensions maximales ne sont que de 640x480. Cela demanderait un peu plus de logique pour redimensionner l'image et sort du cadre de ce petit conseil. N'hésitez pas à l'essayer vous-même, cependant!

De retour sur la bonne voie, nous allons créer une variable 'fichier' pour conduire à l'emplacement du fichier que nous avons téléchargé. De plus, après avoir remplacé quelques simples chaînes, nous vérifions l'extension du fichier. Enfin, nous modifions notre variable 'headers' pour inclure le fichier ainsi que toutes les informations nécessaires pour le joindre..

 if (isset ($ _ POST ['fichier']) && $ bool === 'vrai') $ fichier = 'temp /'. $ _POST ['fichier']; $ ext = $ _POST ['ext']; $ name = str_replace ($ ext, ", $ _POST ['fichier']); $ ext = str_replace ('.',", $ ext); $ attachment = chunk_split (base64_encode (file_get_contents ($ file))); commutateur ($ ext) case 'jpg': case 'jpeg': $ ext = 'image / jpeg'; Pause; case 'gif': $ ext = 'image / gif'; Pause; case 'png': $ ext = 'image / png'; Pause;  $ mime_boundary = md5 (time ()); $ headers. = "Content-Type: multipart / mixed; boundary = \" $ mime_boundary \ "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; $ headers. = "Type de contenu: $ ext; name = \" ". $ name." \ "\ r \ n"; $ headers. = "Codage de transfert de contenu: base64 \ r \ n"; $ headers. = "Content-Disposition: attachment; nom_fichier = \" ". $ _POST ['fichier']." \ "\ r \ n"; $ en-têtes. = "\ n"; $ headers. = $ pièce jointe. "\ r \ n"; $ headers. = "- $ mime_boundary \ r \ n"; 

Étape 9: Retour en flash

Lorsque le bouton "expéditeur" est cliqué, nous appelons la fonction "onClick ()". Nous effectuons quelques vérifications pour voir s’il s’agit d’un courrier électronique ou d’un message texte que l’utilisateur tente d’envoyer. S'il s'agit d'un message texte, nous allons formater un peu le numéro de téléphone, vérifier si l'utilisateur a sélectionné un fournisseur et nous assurer que le numéro est valide. Après avoir validé toutes les informations de l'utilisateur, nous chargerons le document 'message.php', lui enverrons toutes nos variables et écouterons l'événement 'complete'..

 fonction privée onClick (event: MouseEvent): void var textArray: Array = [nameText, messageText, subjectText]; var len: int = textArray.length; if (! emailRadio.selected) addyText.text = addyText.text.replace (/ [() - \ s \. \ +] / g, "");  pour (var i: int = 0; i 

Étape 10: Les gestionnaires d'événements

Lorsque l'événement "complete" est déclenché, nous allons simplement analyser le nombre entier que PHP nous envoie. Outre l'événement 'complete', vous trouverez ci-dessous le reste des fonctions de gestionnaire d'événements utilisées dans ce projet..

La fonction 'onChange' activera la visibilité de la liste déroulante et appellera la fonction 'handleAddy'. La fonction 'onText' déterminera le focus du champ de texte lorsque l'utilisateur cliquera sur l'étiquette - comme en HTML. Enfin, la fonction 'onLabel' gérera la mise en surbrillance du champ de texte lorsque la souris le survolera..

 fonction privée onComplete (event: Event): void var num: int = parseInt (event.target.data); if (num) ExternalInterface.call ("alert", "le message a été envoyé");  else ExternalInterface.call ("alert", "Une erreur s'est produite");  fonction privée onChange (event: Event): void switch (event.target.selection) case emailRadio: combo.visible = false; attach.visible = true; addyLabel.dyText.text = "Pour envoyer un email:"; handleOffset (false); Pause; case textRadio: attachment = false; combo.visible = true; attach.visible = false; addyLabel.dyText.text = "Pour numéroter:"; handleOffset (true); Pause;  handleAddy ();  fonction privée onText (event: MouseEvent): void commutateur (event.type) case MouseEvent.ROLL_OVER: event.target.drawFocus (true); Pause; case MouseEvent.ROLL_OUT: event.target.drawFocus (false); Pause;  fonction privée onLabel (event: MouseEvent): void var nomEtiquette: String = event.currentTarget.name.replace ("Label", "Texte"); var tf: UIComponent; if (labelName === "messageText") tf = TextArea (this.getChildByName (labelName));  else tf = TextInput (this.getChildByName (labelName));  switch (event.type) case MouseEvent.ROLL_OVER: tf.drawFocus (true); Pause; case MouseEvent.ROLL_OUT: tf.drawFocus (false); Pause; case MouseEvent.CLICK: tf.setFocus (); Pause;  fonction privée onFocus (event: FocusEvent): void event.target.text = ""; 

Étape 11: Le reste des fonctions

Ce sont les fonctions finales qui gèreront la vérification des champs de texte pour s’assurer qu’ils ne sont pas vides ainsi que le décalage causé par la sélection du bouton radio..

 fonction privée handleOffset (bool: Boolean): void var ch: Number = combo.height + 10; switch (bool) case true: nameLabel.y + = ch; subjectLabel.y + = ch; messageText.y + = ch; messageLabel.y + = ch; subjectText.y + = ch; expéditeur.y + = ch; nameText.y + = ch; rule.y + = ch; emailLabel.y + = ch; emailText.y + = ch; règle2.y + = ch; Pause; case false: messageText.y - = ch; messageLabel.y - = ch; subjectText.y - = ch; subjectLabel.y - = ch; expéditeur.y - = ch; nameLabel.y - = ch; nameText.y - = ch; règle.y - = ch; emailLabel.y - = ch; emailText.y - = ch; règle2.y - = ch; Pause;  private function handleString (string: String): Boolean if (string.toLowerCase (). search (/ [a-z0-9] / g)! = -1) return true;  else return false;  private function handleEmail (string: String): Boolean // this RegExp est utilisé pour vérifier si l'utilisateur a entré un modèle var d'adresse électronique valide: RegExp = / [a-z0-9! # $% & '* + \ / =? ^ _ '| ~ -] + (?: \. [a-z0-9! # $% &' * + \ / =? ^ _ '| ~ -] +) * @ ( ?: [a-z0-9] (?: [a-z0-9 -] * [a-z0-9])??.) + [a-z0-9] (?: [a-z0-9 -] * [a-z0-9])? / g; if (pattern.exec (string)! = null) retourne vrai;  else return false;  fonction privée numéro_fichier (chaîne: chaîne de caractères): Boolean if (chaîne.search (/ [0-9] /) === -1) retour false;  else // vous devrez peut-être modifier cette logique en fonction de la longueur des // numéros de téléphone mobile de votre pays si (string.length < 11)  return false;  else  return true;   return false;  private function handleAddy():void  addyText.addEventListener(FocusEvent.FOCUS_IN, onFocus); if(!emailRadio.selected)  addyLabel.text = "To email:"; addyText.text = "";  else  addyLabel.text = "To number:"; addyText.text = "Starting with country code";  

Conclusion

Dans cette astuce, vous avez appris à utiliser Flash et AS3 pour envoyer non seulement des variables de texte simples, mais également des images, et pas seulement par courrier électronique, mais également par SMS. Ces techniques peuvent être utilisées de différentes manières. Continuez à expérimenter et n'oubliez pas de vous abonner au fil Tuts +. Merci d'avoir lu!