Share
Ce tutoriel montrera comment créer un système de connexion Flash simple mais professionnel en utilisant trois langages de programmation différents; AS3, PHP et MYSQL. Les sections avancées telles que la logique d’application, l’intégration de PHP et de MYSQL avec Flash seront nos principaux sujets de discussion. Restons coincés!
Jetons un coup d'œil au résultat final, il suffit de cliquer sur le bouton de démonstration en haut de ce tutoriel..
Essayez de vous connecter avec le nom d'utilisateur admin et mot de passe mot de passe, ou le nom d'utilisateur test1 et mot de passe mot de passe1. Vous verrez un simple morceau de texte correspondant à cet utilisateur.
Dans cette partie, les informations de connexion réelles fonctionneront. Dans la partie 2, les utilisateurs pourront s’enregistrer via un fichier SWF..
Si vous n'avez pas de serveur Web prenant en charge les bases de données mysql et php, téléchargez MAMP (pour Mac), WAMP (pour Windows) ou un autre serveur local..
MAMP est un serveur local open source qui vous permet d'exécuter php, de créer et de stocker des données dans des bases de données mysql à partir de votre disque dur local. MAMP crée automatiquement un serveur lorsque vous le téléchargez, par conséquent, je vous recommande de l'utiliser sur d'autres serveurs locaux..
Vous pouvez aussi utiliser votre serveur web s'il supporte mysql et php.
Installez phpMyAdmin sur le serveur, nous l'utiliserons plus tard.
Voici ce dont vous aurez besoin pour créer le produit final.
Maintenant que nous avons tout ce dont nous avons besoin, il est temps de configurer notre classe de documents..
Créez un nouveau fichier .as flamboyant et un fichier .fla AS3. Enregistrez le fichier .as en tant que main.as dans un nouveau dossier appelé actes.
Enregistrez le fichier FLA dans le dossier racine de notre application. Maintenant, dans notre fichier .fla, entrez le nom de la classe principale (et classpath) dans le panneau des propriétés, comme indiqué ci-dessous:
Ouvrez votre fichier main.as et ajoutez le code suivant:
Accentsconagua
les actions de package / * étendent toujours une classe en utilisant movieclip au lieu de sprite lors de l'utilisation de flash. * / import flash.display.MovieClip; / * crée notre classe * / public classe main étend MovieClip public function main (): void trace ("success"); Ce sera votre classe de document. Appuyez sur ctrl + entrée pour exécuter le fichier SWF..
Si vous recevez un message dans la sortie, vous avez réussi à connecter les deux documents et vous pouvez continuer.
Pour créer une connexion à notre base de données, nous devons utiliser php. Vous devez d’abord créer une base de données sur votre serveur. Appelez-le admin. Vous pouvez créer une base de données en utilisant phpMyAdmin sur votre serveur. L'image ci-dessous est la première page que vous voyez lors de l'ouverture de phpMyAdmin. C’est la seule fois où nous utiliserons phpMyAdmin; nous allons créer la table en utilisant php.
Nous avons besoin d'un fichier qui se connectera à notre base de données. Créez un nouveau dossier appelé php. Créez un nouveau document avec l'extension php et appelez-le connect.php
Suivez les commentaires du code pour voir ce qui se passe.
/ * Tout le code à l'intérieur de ces balises sera reconnu en tant que code php. * /
Ensuite, vous devez télécharger vos fichiers sur le serveur de test. Si vous utilisez MAMP, copiez votre dossier dans le dossier htdocs du dossier de l'application mamp..
Si la connexion est établie, le message de réussite ci-dessous s'affiche et vous êtes connecté à votre base de données..
Remarque: Il est important de supprimer echo 'succès'; depuis votre PHP ensuite.
Remarque: Le répertoire ne sera pas le même que dans l'image. Ignorer le chemin "source". Par exemple, http: // localhost: 8888 / loginsystem / php / connect.php
Créez d'abord deux zones de texte - Texte saisi - pour permettre à l'utilisateur de saisir son nom et son mot de passe.
Puis positionnez-les verticalement. Donnez à la zone de texte supérieure le nom d’instance "username" et celle du bas "mot de passe". Étiquette les deux comme tu veux.
Ensuite, dessinez un carré et insérez une autre zone de texte dans laquelle vous écrivez "submit". Convertissez-les en clip avec le nom d'occurrence "submit_button".
Distribuer tous les différents objets dans les calques (Modifier> Scénario> Distribuer dans les calques).
Votre interface devrait ressembler à ceci:
Ensuite, nous allons créer notre gestionnaire d’événements de bouton de soumission, checkLogin (), à exécuter lorsque l'utilisateur clique sur "submit".
Nous devons d’abord importer flash.events. *; dans notre code. De cette façon, nous pouvons utiliser des événements Flash. Suivez les commentaires du code.
les actions de package / * étendent toujours une classe en utilisant movieclip au lieu de sprite lors de l'utilisation de flash. * / import flash.display.MovieClip; importer flash.events. *; / * crée notre classe * / public classe main étend MovieClip fonction publique main (): void / * buttonMode donne un bouton de survol au bouton d'envoi * / submit_button.buttonMode = true; / * Cela dit, quand on appuie sur notre bouton, la fonction checkLogin sera exécutée * / submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); / * définit les valeurs initiales du champ de texte * / username.text = ""; password.text = ""; / * la fonction à vérifierLogin * / fonction publique checkLogin (e: MouseEvent): void trace ("soumission réussie"); Si la sortie affiche "Soumission réussie" lorsque vous cliquez sur le bouton, notre événement de bouton a été créé avec succès..
Nous allons maintenant vérifier si nos champs ont des données. Remplacez la fonction checkLogin actuelle par le code ci-dessous. C'est thoroghly commenté pour votre commodité.
/ * la fonction pour vérifier la connexion * / fonction publique checkLogin (e: MouseEvent): void / * vérifier les champs avant d'envoyer la demande à php * / if (username.text == "" || password.text == "") / * si les champs nom d'utilisateur ou mot de passe sont vides, définissez les messages d'erreur * / if (nomutilisateur.text == "") username.text = "Entrez votre nom d'utilisateur"; if (password.text == "") password.text = "Entrez votre mot de passe"; else / * fonction init pour traiter la connexion * / processLogin ();
Les données sont stockées dans des tables dans des bases de données. Par conséquent, nous devrons créer une table et nous utiliserons php pour le faire. Créez un nouveau document php dans le dossier php et appelez-le comme vous voulez (cela n'aura pas d'importance, c'est temporaire pour créer la table, nous n'aurons pas besoin de continuer à l'exécuter). Puis remplissez-le avec le code ci-dessous.
Après cela, téléchargez tous vos fichiers sur votre serveur. Ensuite, entrez le chemin du fichier dans le navigateur. Si la table a été créée, un message de réussite apparaîtra. Sinon, veuillez vérifier votre configuration.. Remarque: Assurez-vous de supprimer ce fichier du serveur après l'affichage du message de réussite..
Ensuite, allez à phpMyAdmin ou à une alternative pour vérifier si votre table a été ajoutée. Si cela a été ajouté, c'est ce que vous verrez ci-dessous…
Maintenant, nous avons créé notre table allons-y et ajoutons un utilisateur.
Créez un nouveau document php et appelez-le comme vous voulez, puis placez-le dans le dossier php.
Nous avons maintenant ajouté un utilisateur, donc notre table ressemblera à ceci:
Nous devrions être prêts à commencer à créer notre logique d'application, qui alimentera le backend de notre fichier SWF..
Il y a quelques variables à traiter pour obtenir les données de notre base de données.
Voici le terminé processLogin () function, pour aller dans notre fichier main.as (il sera appelé lorsque l'utilisateur cliquera sur le bouton). Nous devons importer des Flash net classes ici. Alors, ajoutez ceci en haut: importer flash.net. *;
/ * fonction pour traiter notre login * / fonction publique processLogin (): void / * variables que nous envoyons au fichier php * / var phpVars: URLVariables = new URLVariables (); / * nous créons une variable URLRequest. Cela obtient le chemin du fichier php. * / var phpFileRequest: URLRequest = new URLRequest ("php / controlpanel.php"); / * Cela nous permet d'utiliser la fonction post dans php * / phpFileRequest.method = URLRequestMethod.POST; / * attache les variables php à l'URLRequest * / phpFileRequest.data = phpVars; / * crée un nouveau chargeur pour charger et envoyer notre requête url * / var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, showResult); / * permet maintenant de créer les variables à envoyer au fichier php * / phpVars.systemCall = "checkLogin"; phpVars.username = nomutilisateur.text; phpVars.password = password.text; / * Ceci démarrera la communication entre flash et php * / phpLoader.load (phpFileRequest); La première ligne:
phpVars.systemCall = "checkLogin";
sera expliqué plus tard lorsque nous créerons le fichier de contrôle principal php.
Les deux lignes suivantes:
phpVars.username = nomutilisateur.text; phpVars.password = password.text;
récupérer ce que l'utilisateur a entré dans les deux champs de texte et les convertir en variables php.
Créez une zone de texte dynamique et attribuez-lui le nom "result_text"..
Placez-le sous le formulaire de connexion et envoyez le bouton. Cela affichera les informations extraites du serveur.
C'est le fichier qui communiquera avec php et renverra une valeur à clignoter. Créez un nouveau fichier php appelé "controlpanel.php" et placez-le dans le dossier \ php \.
0) / * nous utilisons une boucle while pour obtenir la bio de l'utilisateur. mysql_fetch_array récupère toutes les données du champ pour un enregistrement particulier. * / while ($ data = mysql_fetch_array ($ query)) / * obtient la valeur user_bio de l'enregistrement sélectionné * / $ userbio = $ data ["user_bio"]; / * utilise la fonction d'impression pour renvoyer les valeurs au format flash * / print "systemResult = $ userbio"; else print "systemResult = Les informations de connexion ne correspondent pas à nos informations."; ?>
Revenons à notre fonction de connexion au processus et ajoutons ceci:
phpLoader.addEventListener (Event.COMPLETE, showResult);
Lorsque le formulaire est terminé, cet auditeur appelle le Afficher le résultat() une fonction. Nous allons regarder cela maintenant.
Voici la fonction. Il affiche la valeur que nous avons imprimée dans le fichier "controlpanel.php".
/ * fonction pour afficher le résultat de la connexion * / public function showResult (event: event): void / * this redimensionne automatiquement le champ de texte ***** Vous devrez importer les classes de texte de flash. Vous pouvez le faire en ajoutant: import flash.text. *;… À votre liste d'instructions d'importation * / result_text.autoSize = TextFieldAutoSize.LEFT; / * cela récupère le résultat et l'affiche dans le champ de résultat * / result_text.text = "" + event.target.data.systemResult;
Le SWF reçoit le texte que nous impression dans le php et l'afficher dans le textfield result_text.
Si vous avez créé une connexion réussie, voici ce que vous verrez:
Nous allons maintenant ajouter un utilisateur supplémentaire pour vérifier si notre système fonctionne pour plusieurs utilisateurs..
Ouvrez le fichier "adduser.php" dans notre dossier php créé précédemment.
Changer simplement les VALEURS dans la requête mysql.
$ sql = "INSERT INTO utilisateurs (nom d'utilisateur, mot de passe, user_bio) VALEURS ('test1', 'mot de passe1', 'Ceci est la bio de l'utilisateur supplémentaire')";
Ensuite, exécutez le script sur le serveur en entrant simplement le chemin du fichier dans un navigateur Web..
Succès! Nous avons un système de connexion flash efficace qui prend en charge plusieurs utilisateurs. Voici le résultat lorsque nous connectons l'utilisateur supplémentaire.
les actions de package / * étendent toujours une classe en utilisant movieclip au lieu de sprite lors de l'utilisation de flash. * / import flash.display.MovieClip; importer flash.events. *; importer flash.net. *; importer flash.text. *; / * crée notre classe * / public classe main étend MovieClip fonction publique main (): void / * buttonMode donne un bouton de survol au bouton d'envoi * / submit_button.buttonMode = true; / * Cela dit, quand on appuie sur notre bouton, la fonction checkLogin sera exécutée * / submit_button.addEventListener (MouseEvent.MOUSE_DOWN, checkLogin); / * définit les valeurs initiales du champ de texte * / username.text = ""; password.text = ""; / * la fonction pour vérifier la connexion * / fonction publique checkLogin (e: MouseEvent): void / * vérifier les champs avant d'envoyer la demande à php * / if (nomutilisateur.text == "" || mot de passe.text == "" ) / * si les champs nom d'utilisateur ou mot de passe sont vides, définissez les messages d'erreur * / if (nomutilisateur.text == "") nomutilisateur.text = "Entrez votre nom d'utilisateur"; if (password.text == "") password.text = "Entrez votre mot de passe"; else / * fonction init pour traiter la connexion * / processLogin (); / * fonction pour traiter notre login * / fonction publique processLogin (): void / * variables que nous envoyons au fichier php * / var phpVars: URLVariables = new URLVariables (); / * nous créons une variable URLRequest. Cela obtient le chemin du fichier php. * / var phpFileRequest: URLRequest = new URLRequest ("php / controlpanel.php"); / * Cela nous permet d'utiliser la fonction post dans php * / phpFileRequest.method = URLRequestMethod.POST; / * attache les variables php à l'URLRequest * / phpFileRequest.data = phpVars; / * crée un nouveau chargeur pour charger et envoyer notre requête url * / var phpLoader: URLLoader = new URLLoader (); phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; phpLoader.addEventListener (Event.COMPLETE, showResult); / * permet maintenant de créer les variables à envoyer au fichier php * / phpVars.systemCall = "checkLogin"; phpVars.username = nomutilisateur.text; phpVars.password = password.text; / * Ceci démarrera la communication entre flash et php * / phpLoader.load (phpFileRequest); / * fonction pour afficher le résultat de la connexion * / public function showResult (event: event): void / * this redimensionne automatiquement le champ de texte ***** Vous devrez importer les classes de texte de flash. Vous pouvez le faire par: import flash.text. *; * / result_text.autoSize = TextFieldAutoSize.LEFT; / * cela récupère le résultat et l'affiche dans le champ de résultat * / result_text.text = "" + event.target.data.systemResult; Voilà qui conclut la première partie de notre tutoriel sur le système de connexion Flash. Dans la partie 2, nous allons créer un formulaire de registre qui ajoutera des utilisateurs sans que celui-ci ne l'ait entré dans le backend. Merci d'avoir lu ce tutoriel. Profitez-en :)
