Share
Willkommen zu Teil 2 unserer 3-teiligen Serie zur Benutzerauthentifizierung mit Titanium Mobile. Titan ist ein Open-Source-Cross-Compiler, mit dem Sie mit Javascript iPhone- und Android-Anwendungen (bald auch Blackberry!) Schreiben können. Kein Objective-C erforderlich! Wir werden PHP als serverseitigen Code verwenden und meine Datenbank wird MySQL sein. Für dieses Beispiel verwende ich MAMP, um lokal zu entwickeln. Ich empfehle Ihnen dringend, den ersten Teil dieser Serie durchzugehen, bevor Sie fortfahren, wenn Sie dies nicht bereits getan haben. Sie können die Quelle jedoch alternativ aus Teil 1 herunterladen, die Datenbanktabelle erstellen und die PHP-Datenbankverbindungen selbst einrichten, bevor Sie zu diesem Lernprogramm springen, wenn Sie möchten.
In Teil 1 richten wir die Datenbank für unsere App ein und fügen einen Benutzer hinzu. Wir haben dann unsere Anmeldeschnittstelle erstellt, indem wir eine Registerkartengruppe, eine Registerkarte und ein Fenster erstellt haben. Wir haben dann unserem Login-Button einige Aktionen gegeben. Unsere PHP-Datei hat unsere Datenbank abgefragt und bei erfolgreichem Login den Namen und die E-Mail-Adresse zurückgegeben. Wenn die Anmeldeauthentifizierung fehlgeschlagen ist, haben wir eine Zeichenfolge mit der Angabe eines ungültigen Benutzernamens und / oder Kennworts zurückgegeben. In Teil 2 erstellen wir auf dem Hauptbildschirm eine neue Registerkarte, auf der ein Benutzer ein neues Konto erstellen und sich anmelden kann.
Öffnen Sie app.js und erstellen Sie das Kontofenster und die Registerkarte unter unserem Anmeldeskriptskript. Beachten Sie auch, dass ich die tabBarHidden-Eigenschaft im Anmeldefenster entfernt habe, die wir in Teil 1 vorgenommen haben. Wenn Sie diese Eigenschaft entfernen, können wir die Registerkarten am unteren Rand des Telefons sehen. Wir haben auch das accountTab zur tabGroup hinzugefügt.
Accentsconagua
Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo zur Benutzerauthentifizierung', URL: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", Fenster: login); var account = Titanium.UI.createWindow (title: 'New Account', URL: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', Fenster: Konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open (); Die URL-Eigenschaft der Kontovariable weist den Compiler an, account.js als unser Fenster zu verwenden. Wenn Sie diesen Teil überspringen, wirft Titanium einen hässlichen roten Fehler im Emulator ab. Nach erfolgreichem Kompilieren sollte Ihr Bildschirm folgendermaßen aussehen:
Normalerweise sehen Sie in der Tab-Leiste am unteren Rand Symbole. Nun, mit Titan ist das auch super einfach! Verwenden Sie einfach die icon -Eigenschaft in jeder Registerkarte. Zum Beispiel:
var accountTab = Titanium.UI.createTab (title: 'New Account', Symbol: 'images / account_icon.png', Fenster: Konto);
Erstellen Sie eine neue Datei, nennen Sie sie account.js und speichern Sie sie in Ihrem Ordner Resources / main_windows. Dies ist derselbe Ort, an dem wir unsere login.js-Datei in Teil 1 gespeichert haben.
var win = Titanium.UI.currentWindow; / * * Interface * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', top: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (scrollView); var username = Titanium.UI.createTextField (Farbe: '# 336699', oben: 10, links: 10, Breite: 300, Höhe: 40, Hinweistext: 'Benutzername', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (Benutzername); var password1 = Titanium.UI.createTextField (Farbe: '# 336699', oben: 60, links: 10, Breite: 300, Höhe: 40, Hinweistext: 'Kennwort', Kennwortmaske: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password1); var password2 = Titanium.UI.createTextField (Farbe: '# 336699', oben: 110, links: 10, Breite: 300, Höhe: 40, HintText: 'Password Again', PasswortMask: true, keyboardType: Titanium.UI. KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password2); var names = Titanium.UI.createTextField (Farbe: '# 336699', oben: 160, links: 10, Breite: 300, Höhe: 40, Hinweistext: 'Name', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titan .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (Namen); var email = Titanium.UI.createTextField (Farbe: '# 336699', Oberseite: 210, links: 10, Breite: 300, Höhe: 40, HinweisText: 'E-Mail', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titan .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (E-Mail); var createBtn = Titanium.UI.createButton (title: 'Create Account', oben: 260, Breite: 130, Höhe: 35, borderRadius: 1, Schriftart: fontFamily: 'Arial', fontWeight: 'fett', fontSize: 14); scrollView.add (createBtn);
Okay, dieser gemein aussehende Codeblock ist wirklich sehr einfach zu verstehen, aber er tut so viel für uns. Wenn Sie nur unsere Variablennamen betrachten, können Sie leicht erkennen, was hier vor sich geht. Wir haben 5 Felder erstellt:
Wir haben auch unsere Schaltfläche "Konto erstellen" erstellt.
Sie werden auch die var am oberen Rand mit dem Namen scrollView bemerken. Durch das Hinzufügen der Objekte zu einer Bildlaufansicht kann die Ansicht gescrollt werden. Wenn sich die Tastatur nach oben bewegt, überlappt sie nicht unsere Textfelder.
Mach weiter und kompiliere. Nach erfolgreichem Kompilieren sollte Ihr Bildschirm nach dem Wechsel zur Registerkarte Konto so aussehen. Die Schaltfläche "Konto erstellen" hat noch keine Funktion, aber Sie müssen mit der Auswahl von Textfeldern herumspielen und sehen, wie die Bildlaufansicht funktioniert.
Wir müssen jetzt einen Ereignis-Listener auf unserer Schaltfläche erstellen. Wenn Sie auf "Konto erstellen" klicken, werden die Daten sowie einige Überprüfungen gesendet.
var Testergebnisse; Funktion checkemail (emailAddress) var str = emailAddress; var filter = / ^ ([A-Za-z0-9 _ \ - \.]) + (@ A-Za-z0-9 _ \ - \.]) + (@ A-Za-z] 2,4) $ /; if (filter.test (str)) Testergebnisse = wahr; else testresults = false; return (Testergebnisse); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Einfügen fehlgeschlagen" || this.responseText == "Dieser Benutzername oder diese E-Mail existiert bereits") createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', Nachricht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', Funktion (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('click', Funktion (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Ihre Passwörter stimmen nicht überein"); else if (! checkemail (email.value)) alarm ("Bitte geben Sie eine gültige E-Mail ein"); else alert ("Alles sieht gut aus, also senden Sie die Daten"); else alert ("Alle Felder sind erforderlich");; Die checkEmail () -Methode ist eine einfache Funktion, die mithilfe des regulären Ausdrucks überprüft, ob die vom Benutzer eingegebene E-Mail das richtige Format hat. Wir haben einen neuen HTTPClient erstellt, der verwendet wird, um unsere Daten an unsere PHP-Datei zu senden.
Im Click-Event prüfen wir zunächst, ob Felder leer sind. Wenn dies der Fall ist, weisen Sie sie darauf hin, dass alle Felder ausgefüllt werden müssen. Als nächstes prüfen wir, ob die beiden Passwortfelder gleich sind. Wenn dies nicht der Fall ist, weisen Sie sie darauf hin, dass Ihre Passwörter nicht übereinstimmen. Unsere letzte Prüfung ist zu überprüfen, ob die E-Mail-Adresse gültig ist. Wenn dies nicht der Fall ist, benachrichtigen Sie sie, dass "Bitte geben Sie eine gültige E-Mail-Adresse ein."
Sobald das Formular überprüft wurde, wird eine Warnmeldung ausgegeben. "Alles sieht gut aus, also senden Sie die Daten." Kompilieren und testen Sie das Senden des Formulars ohne Werte, nicht übereinstimmende Kennwörter und eine ungültige E-Mail. Nach dem Absenden eines gültigen Formulars sehen Sie die folgende Warnung:
Löschen Sie die Zeile "Alles sieht gut aus, senden Sie die Daten". Wir müssen das durch die Methoden open () und send () ersetzen.
createBtn.addEventListener ('click', Funktion (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Ihre Passwörter stimmen nicht überein"); else if (! checkemail (email.value)) alarm ("Bitte geben Sie eine gültige E-Mail ein"); else createBtn.enabled = false; createBtn.opacity = 0,3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = Benutzername: Benutzername.Wert, Kennwort: Ti .Utils.md5HexDigest (password1.value), Namen: names.value, email: email.value; createReq.send (params); else alert ("Alle Felder sind erforderlich");; Wenn Sie diese Zeile ersetzen, deaktivieren Sie die Schaltfläche "Konto erstellen" und legen die Deckkraft auf 30% fest. Wir nehmen dann den von uns erstellten HTTPClient und rufen die open () -Methode auf. Es zeigt auf eine PHP-Datei, die wir im nächsten Schritt erstellen werden. Wir erstellen dann ein Params-Objekt, das alle Formulardaten enthält. Hinweis Ich verwende eine MD5-Verschlüsselung für das Kennwortfeld. Als letzten Schritt rufen Sie die send () -Methode auf und übergeben sie unser params-Objekt.
Diese Datei ist die PHP-Datei, mit der unsere App spricht, wenn Sie auf die Schaltfläche "Konto erstellen" klicken. Der Name muss den Namen in unserer createReq.open () -Methode im vorherigen Schritt enthalten. Ich habe meine post_register.php genannt. Ersetzen Sie meine Einstellungen für mysql_connect und mysql_select_db durch Ihre Verbindungseinstellungen.
0) echo "Dieser Benutzername oder diese E-Mail-Adresse existiert bereits"; else $ insert = "INSERT INTO-Benutzer (Benutzername, Kennwort, Name, E-Mail-Adresse) WERTE ('". $ Benutzername. "", "". $ Kennwort. "", "". $ Namen. "", "" . $ email. "')"; $ query = mysql_query ($ insert); if ($ query) echo "Danke für Ihre Registrierung. Sie können sich jetzt anmelden."; else echo "Einfügen fehlgeschlagen"; ?> Hier stellen wir eine Verbindung zu unserer Datenbank her und wählen die Datenbank mit dem Namen 'test' aus (dieser Name ändert sich natürlich je nach Name Ihrer Datenbank). Sie sehen, dass unsere $ _POST-Variablen die Namen widerspiegeln, die wir in unserem letzten Schritt im Params-Objekt festgelegt haben. Dieser Teil ist entscheidend. Wir sehen dann, ob der eingegebene Benutzername oder die angegebene E-Mail-Adresse bereits vorhanden ist. Wenn dies nicht der Fall ist, fügen Sie die Daten in die Datenbank ein. Okay, kompiliere noch nicht! Wir werden den nächsten Schritt machen, versprochen.
Okay, zurück zu account.js. Lassen Sie uns einige Daten behandeln, wenn unser PHP etwas zurückgibt. Platzieren Sie diesen Code unter var createReq und über unserem Click-Ereignis:
createReq.onload = function () if (this.responseText == "Einfügen fehlgeschlagen" || this.responseText == "Dieser Benutzername oder diese E-Mail existiert bereits") win.remove (overlay); alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', Nachricht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', Funktion (e) win.tabGroup.setActiveTab (0);); ; Wenn PHP also etwas zurückgibt, wenn "this.responseText" gleich "Einfügen fehlgeschlagen" ODER "Dieser Benutzername oder diese E-Mail-Adresse ist bereits vorhanden" ist, entfernen Sie das Overlay-Fenster (damit die Informationen erneut eingegeben und gesendet werden können), und alarmieren Sie sie mit diesem Befehl .responseText '.
Benachrichtigen Sie nach erfolgreicher Registrierung "Danke für die Registrierung. Sie können sich jetzt anmelden" (definiert in unserer Datei post_register.php). Außerdem fügen wir der Schaltfläche OK einen Ereignis-Listener hinzu. Wenn Sie darauf klicken, gelangen Sie automatisch zum Anmeldebildschirm.
Wenn der zurückkommende Alarm eine verstümmelte Meldung über mysql_connect und / oder den Zugriff verweigert wird, müssen Sie die Einstellungen für die mysql-Verbindung in PHP überprüfen.
In Teil 2 dieser Serie haben wir in Registerkarten hinzugefügt, zwischen denen Sie wechseln können. Wir haben dann ein neues Formular erstellt, in das ein Benutzer Daten eingeben und senden kann. Nach dem Absenden haben wir eine Formularvalidierung durchgeführt und dann haben wir von PHP eine Nachricht zurückgegeben, die darauf basiert, ob die Daten verwendet wurden, und falls nicht, haben wir sie erfolgreich eingefügt. Ich hoffe, Sie haben dieses Mini-Serie-Tutorial so gerne gelesen, wie ich es auch geschrieben habe!
