Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Erstellen Sie ein Flash-Login-System mit PHP und MySQL - Teil 1

by
Difficulty:AdvancedLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In diesem Tutorial wird gezeigt, wie Sie ein einfaches, aber professionelles Flash-Login-System mit drei verschiedenen Programmiersprachen erstellen können. AS3, PHP und MySQL.  Fortgeschrittene Abschnitte wie Anwendungslogik, PHP und MYSQL Integration mit Flash werden unsere Hauptthemen sein.  Lassen Sie uns stecken bleiben!


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, klicken Sie einfach auf die Demo-Schaltfläche oben in diesem Tutorial.

Versuchen Sie, sich mit dem Benutzernamen admin und dem Passwort password oder mit dem Benutzernamen test1 und dem Passwort password1 anzumelden.  Sie sehen einen einfachen Text, der diesem Benutzer entspricht.

In diesem Teil wird die eigentliche Anmeldung ausgeführt. In Teil 2 lassen Sie die Benutzer sich über eine SWF-Datei registrieren.


Schritt 1: Holen Sie sich MAMP oder einen anderen lokalen Server

Wenn Sie keinen Webserver haben, der mysql-Datenbanken und PHP unterstützt, laden Sie MAMP (für Mac), WAMP (für Windows) oder einen anderen lokalen Server herunter.

MAMP ist ein lokaler Open-Source-Server, mit dem Sie PHP ausführen und Daten in MySQL-Datenbanken von Ihrer lokalen Festplatte erstellen und speichern können.  MAMP erstellt automatisch einen Server, wenn Sie ihn herunterladen, daher empfehle ich, ihn über andere lokale Server zu verwenden.

Sie können Ihren Webserver alternativ verwenden, wenn er mysql und php unterstützt.

Installieren Sie phpMyAdmin auf dem Server, wir werden es später verwenden.


Schritt 2: Importe

Hier sind die Dinge, die Sie benötigen, um das Endprodukt zu erstellen.

  • Ein Text- oder HTML-Editor (zum Beispiel Notepad oder Dreamweaver).
  • Flash CS3+

Jetzt haben wir alles, was wir brauchen. Es ist Zeit, unsere Dokumentenklasse einzurichten.


Schritt 3: AS3-Dokumentklassen-Setup

Erstellen Sie eine brandneue .as-Datei und eine AS3-.fla-Datei.  Speichern Sie die AS-Datei als main.as in einem neuen Ordner namens actions.

Speichern Sie die fla-Datei im Stammordner unserer Anwendung.  Geben Sie nun in unserer .fla-Datei den Hauptklassennamen (und den Klassenpfad) im Eigenschaftsfenster ein, wie unten angegeben:


Schritt 4: Erstellen des Basisklassencodes

Öffnen Sie Ihre Datei main.as und fügen Sie den folgenden Code hinzu:

Das wird Ihre Dokumentenklasse sein.  Drücken Sie ctrl+enter, um die SWF-Datei zu starten.

Wenn Sie eine Nachricht in der Ausgabe erhalten, haben Sie beide Dokumente erfolgreich verbunden und können weiterarbeiten.


Schritt 5: Erstellen unserer Datenbankverbindung - Teil 1

Um eine Verbindung zu unserer Datenbank herzustellen, müssen wir PHP verwenden.  Zuerst müssen Sie eine Datenbank auf Ihrem Server erstellen.  Nennen Sie es admin.  Sie können eine Datenbank mit phpMyAdmin auf Ihrem Server erstellen.  Das Bild unten ist die erste Seite, die Sie beim Öffnen von phpMyAdmin sehen.  Das ist die einzige Zeit, in der wir phpMyAdmin verwenden werden. Wir werden die Tabelle mit PHP erstellen.


Schritt 6: Erstellen unserer Datenbankverbindung - Teil 2

Wir benötigen eine Datei, die eine Verbindung zu unserer Datenbank herstellt.  Erstellen Sie einen neuen Ordner namens php.  Erstellen Sie ein neues Dokument mit der Erweiterung php und nennen Sie es connect.php

Befolgen Sie die Code-Kommentare, um zu sehen, was vor sich geht.

Dann müssen Sie Ihre Dateien auf den Testserver hochladen.  Wenn Sie MAMP verwenden, kopieren Sie Ihren Ordner in den htdocs-Ordner im mamp-Anwendungsordner.

Wenn eine Verbindung erfolgreich ist, wird eine Erfolgsmeldung wie unten angezeigt und Sie haben sich mit Ihrer Datenbank verbunden.

Hinweis: Es ist wichtig, echo 'success' zu löschen; von Ihrem PHP danach.

Hinweis: Das Verzeichnis ist nicht dasselbe wie im Bild.  Ignorieren Sie den "Quelle"-Pfad.  Zum Beispiel http://localhost:8888/loginsystem/php/connect.php


Schritt 7: Erstellen der Benutzeroberfläche in Flash

Erstellen Sie zuerst zwei Textfelder - Eingabetext - damit der Benutzer seinen Namen und sein Passwort eingeben kann.

Dann positionieren Sie sie vertikal.  Geben Sie dem oberen Textfeld den Instanznamen "Benutzername" und das untere "Passwort" ein.  Beschriften Sie die beiden wie Sie wollen.

Dann zeichne ein Quadrat und füge ein anderes Textfeld ein, das darin "submit" schreibt.  Konvertieren Sie diese in einen Movieclip mit dem Instanznamen "submit_button".

Verteilen Sie alle verschiedenen Objekte auf Ebenen (Ändern > Zeitleiste > Auf Ebenen verteilen (Modify > Timeline > Distribute to Layers)).

Ihr Interface sollte ungefähr so aussehen:


Schritt 8: Knopfeingabe

Als Nächstes erstellen wir den Übergabebutton-Ereignishandler checkLogin(), der ausgeführt wird, wenn der Benutzer auf "submit" klickt.

Zuerst müssen wir flash.events importieren.*; in unserem Code.  Auf diese Weise können wir Flash-Ereignisse verwenden.  Befolgen Sie die Code-Kommentare.

Wenn die Ausgabe beim Klicken auf die Schaltfläche "Übergabe erfolgreich" anzeigt, wurde unser Button-Ereignis erfolgreich erstellt.


Schritt 9: Feldvalidierung

Jetzt werden wir prüfen, ob unsere Felder Daten haben.  Ersetzen Sie die aktuelle checkLogin-Funktion durch den folgenden Code.  Es ist für Ihre Bequemlichkeit ausführlich kommentiert.


Schritt 10: Erstellen der Datenbanktabelle

Daten werden in Tabellen in Datenbanken gespeichert.  Daher müssen wir eine Tabelle erstellen und wir verwenden dazu PHP.  Erstellen Sie ein neues php-Dokument im php-Ordner und rufen Sie es auf, was Sie wollen (es spielt keine Rolle, es ist nur temporär, um die Tabelle zu erstellen, wir müssen sie nicht weiter ausführen).  Dann füllen Sie es mit dem Code unten.

Danach laden Sie alle Ihre Dateien auf Ihren Server.  Geben Sie dann den Dateipfad in den Browser ein. Wenn die Tabelle erstellt wurde, wird eine Erfolgsmeldung angezeigt.  Wenn nicht, dann überprüfen Sie bitte Ihre Konfiguration.  Hinweis: Stellen Sie sicher, dass Sie diese Datei vom Server löschen, nachdem die Erfolgsmeldung angezeigt wurde.

Dann gehen Sie zu phpMyAdmin oder einer Alternative, um zu überprüfen, ob Ihre Tabelle hinzugefügt wurde.  Wenn es hinzugefügt wurde, sehen Sie unten ...


Schritt 11: Hinzufügen des ersten Benutzers

Jetzt haben wir unsere Tabelle erstellt, gehen wir voran und fügen Sie einen Benutzer hinzu.

Erstellen Sie ein neues php-Dokument und nennen Sie es wie Sie wollen, und legen Sie es in den php-Ordner.

Wir haben jetzt einen Benutzer hinzugefügt, daher wird unsere Tabelle wie folgt aussehen:

Wir sollten alles daran setzen, unsere Anwendungslogik zu erstellen, die das Backend unseres SWFs antreibt.


Schritt 12: Senden einer Anfrage an PHP

Es müssen einige Variablen verarbeitet werden, um unsere Datenbankdaten zu erhalten.

Hier ist die abgeschlossene processLogin() -Funktion, um in unsere main.as-Datei zu gelangen (sie wird aufgerufen, wenn der Benutzer auf die Schaltfläche klickt).  Wir müssen die net-Klassen von Flash hier importieren.  Also, fügen Sie das oben hinzu: import flash.net.*;


Schritt 13: PHP Vars erklärt

Die erste Zeile:

wird später erklärt, wenn wir die Haupt-PHP-Steuerdatei erstellen.

Die nächsten zwei Zeilen:

Abrufen, was der Benutzer in die zwei Textfelder eingegeben und in PHP-Variablen umgewandelt hat.


Schritt 14: Ergebnis Textfeld

Erstellen Sie ein dynamisches Textfeld und weisen Sie ihm den Instanznamen "result_text" zu.

Legen Sie es unter das Login-Formular und senden Sie die Schaltfläche.  Das zeigt Informationen an, die vom Server abgerufen wurden.


Schritt 15: Haupt-PHP-Steuerdatei

Das ist die Datei, die mit php kommuniziert und einen Wert an flash zurückgibt.  Erstellen Sie eine neue PHP-Datei namens "controlpanel.php" und legen Sie sie im Ordner \php\ ab.


Schritt 16: Zeigen Sie das Ergebnis - Teil 1

Gehen wir zurück zu unserer Prozess-Login-Funktion und fügen Sie Folgendes hinzu:

Wenn das Formular beendet ist, ruft dieser Listener die Funktion showResult() auf.  Wir werden uns das jetzt ansehen.


Schritt 17: Zeigen Sie das Ergebnis - Teil 2

Hier ist die Funktion.  Es zeigt den Wert an, den wir in der Datei "controlpanel.php" ausgedruckt haben .

Die SWF erhält den Text, den wir in der PHP-Datei print, und zeigt ihn im Textfeld result_text an.


Schritt 18: Ein erfolgreiches Anmeldebeispiel

Wenn Sie eine erfolgreiche Anmeldung erstellt haben, sehen Sie Folgendes:

Jetzt werden wir einen zusätzlichen Benutzer hinzufügen, um zu testen, ob unser System für mehrere Benutzer funktioniert.


Schritt 19: Hinzufügen unseres zusätzlichen Benutzers

Öffnen Sie die Datei "adduser.php"  in unserem PHP-Ordner, den wir zuvor erstellt haben.

Ändern Sie einfach die Werte in der MySQL-Abfrage.

$ sql = "INSERT INTO Benutzer (Benutzername, Passwort, Benutzer_Bio) VALUES ('test1', 'password1', 'Das ist die zusätzliche Benutzerbiografie')";

Führen Sie das Skript auf dem Server aus, indem Sie einfach den Dateipfad in einem Webbrowser eingeben.


Schritt 20: Testen Sie unseren zusätzlichen Benutzer

Erfolg!  Wir haben ein erfolgreiches Flash-Anmeldesystem, das mehrere Benutzer unterstützt.  Hier ist das Ergebnis, wenn wir den zusätzlichen Benutzer anmelden.


Schritt 21: Der gesamte ActionScript-Code mit Kommentaren


Schlussfolgerung

Nun, das schließt Teil 1 unseres Flash-Login-System-Tutorials ab.  In Teil 2 werden wir ein Registrierungsformular erstellen, das Benutzer hinzufügen wird, ohne dass der Benutzer sie im Backend eingeben muss.  Danke, dass Sie dieses Tutorial gelesen haben.  Geniessen Sie es :)

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.