Share
Welkom bij deel 2 van onze 3-delige serie over gebruikersauthenticatie met Titanium Mobile. Titanium is een opensource cross-compiler waarmee je iPhone- en Android-apps (die binnenkort ook BlackBerry-achtig zijn) kunt schrijven met Javascript. Geen doelstelling-C vereist! We zullen PHP gebruiken als de server side code en mijn database zal MySQL zijn. Voor dit voorbeeld gebruik ik MAMP om lokaal te ontwikkelen. Ik raad ten zeerste aan om het eerste deel van deze serie door te nemen voordat je doorgaat als je dat nog niet hebt gedaan. U kunt echter ook de bron van deel 1 downloaden, de databasetabel maken en de PHP-databaseverbindingen zelf instellen voordat u naar deze tutorial gaat als u dat wilt..
In deel 1 hebben we de database voor onze app opgezet en een gebruiker toegevoegd. Vervolgens hebben we onze inloginterface gemaakt door een tabbladgroep, een tabblad en een venster te maken. We hebben toen onze login-knop een aantal acties gegeven. Ons PHP-bestand heeft onze database opgevraagd en bij succesvolle aanmelding onze naam en e-mail teruggestuurd. Als de aanmeldingsverificatie is mislukt, hebben we een string geretourneerd met alleen een ongeldige gebruikersnaam en / of wachtwoord. In deel 2 zullen we een nieuw tabblad op het hoofdscherm maken waarmee een gebruiker een nieuw account kan maken en vervolgens kan inloggen.
Open app.js en maak het accountvenster en tabblad onder ons inlogtabbladscript. Merk ook op dat ik de eigenschap tabBarHidden in het inlogvenster verwijderde dat we in deel 1 hebben gedaan. Door die eigenschap te verwijderen, zien we de tabbladen aan de onderkant van de telefoon. We hebben ook het accountTab toegevoegd aan de tabGroup.
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", window: login); var account = Titanium.UI.createWindow (title: 'Nieuw account', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'Nieuw account', venster: account); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
De URL-eigenschap op de account var vertelt de compiler om account.js als ons venster te gebruiken. Als je dit onderdeel overslaat, gooit Titanium een lelijke rode fout in de emulator. Na een succesvolle compilatie zou je scherm er als volgt uit moeten zien:
Traditioneel gezien zou je zien dat de tabbalk onderaan pictogrammen heeft. Nou, met Titanium is dat ook super makkelijk! Gebruik eenvoudig de pictogrameigenschap op elk tabblad. Bijvoorbeeld:
var accountTab = Titanium.UI.createTab (title: 'Nieuw account', pictogram: 'images / account_icon.png', venster: account);
Maak een nieuw bestand en noem het account.js en sla het op in de map Resources / main_windows. Dit is dezelfde plaats waar we ons login.js-bestand in deel 1 hebben opgeslagen.
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 gebruikersnaam = Titanium.UI.createTextField (color: '# 336699', top: 10, links: 10, width: 300, height: 40, hintText: 'Username', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (gebruikersnaam); var password1 = Titanium.UI.createTextField (color: '# 336699', top: 60, left: 10, width: 300, height: 40, hintText: 'Password', passwordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (wachtwoord1); var password2 = Titanium.UI.createTextField (color: '# 336699', top: 110, left: 10, width: 300, height: 40, hintText: 'Password Again', passwordMask: 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 (color: '# 336699', top: 160, left: 10, width: 300, height: 40, hintText: 'Name', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (namen); var email = Titanium.UI.createTextField (color: '# 336699', top: 210, links: 10, width: 300, height: 40, hintText: 'email', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (e-mail); var createBtn = Titanium.UI.createButton (title: 'Create Account', top: 260, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); scrollView.add (createBtn);
Oké, dit gemene blok van code is echt super gemakkelijk te begrijpen, maar het doet zoveel voor ons. Alleen al door naar onze variabele namen te kijken, is het vrij eenvoudig om te ontcijferen wat hier gebeurt. We hebben 5 velden gemaakt:
We hebben ook onze knop 'account maken' gemaakt.
Je ziet ook de var bovenaan genaamd scrollView. Door de objecten aan een schuifweergave toe te voegen, kan de weergave schuifbaar worden, dus wanneer het toetsenbord omhoog schuift, overlapt het onze tekstvelden niet.
Ga je gang en compileer. Na een geslaagde compilatie ziet uw scherm er na het overschakelen naar het accounttabblad er als volgt uit. De knop account maken doet nog niets, maar speel rond met het selecteren van tekstvelden en kijk hoe de schuifweergave werkt.
We moeten nu een gebeurtenislistener op onze knop maken, dus wanneer ze klikken op 'account maken', worden de gegevens en enige validatie verzonden.
Accentsconagua
var testresultaten; functie checkemail (emailAddress) var str = emailAddress; var filter = / ^ ([A-Za-z0-9 _ \ - \.]) + \ @ ([A-Za-z0-9 _ \ - \.]) + \. ([A-Za-z] 2,4) $ /; if (filter.test (str)) testresults = true; else testresults = false; terug (testresultaten); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Invoegen mislukt" || this.responseText == "Die gebruikersnaam of e-mail bestaat al") createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', bericht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klik', functie (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('klik', functie (e) if (gebruikersnaam.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Uw wachtwoorden komen niet overeen"); else if (! checkemail (email.value)) alert ("Vul een geldig e-mailadres in"); else alert ("Alles ziet er goed uit dus stuur de gegevens"); else alert ("Alle velden zijn verplicht");); Vanaf de bovenkant is de methode checkEmail () een eenvoudige functie die de reguliere expressie gebruikt om te controleren of de e-mail die de gebruiker invoert, de juiste indeling heeft. We hebben een nieuwe HTTPClient gemaakt die zal worden gebruikt om onze gegevens naar ons PHP-bestand te verzenden.
In de klikgebeurtenis controleren we eerst of er velden leeg zijn. Als ze dat zijn, waarschuw ze dan: "Alle velden zijn verplicht." Onze volgende controle is om te zien of de twee wachtwoordvelden hetzelfde zijn. Als dit niet het geval is, waarschuwt u hen door te zeggen: "Uw wachtwoorden komen niet overeen." Onze laatste controle is om te controleren of het e-mailadres geldig is. Als dit niet het geval is, waarschuwt u hen: "Voer een geldig e-mailadres in."
Nadat het formulier is gevalideerd, wordt het bericht 'Alles ziet er goed uit, dus verzend de gegevens'. Ga je gang en compileer en test het indienen van het formulier zonder waarden, niet-overeenkomende wachtwoorden en een ongeldige e-mail. Na het verzenden van een geldig formulier, ziet u de onderstaande melding:
Ga je gang en verwijder de regel 'Alles ziet er goed uit, dus stuur de gegevens'. We moeten dat vervangen door de methoden open () en send ().
createBtn.addEventListener ('klik', functie (e) if (gebruikersnaam.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Uw wachtwoorden komen niet overeen"); else if (! checkemail (email.value)) alert ("Vul een geldig e-mailadres in"); else createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = gebruikersnaam: gebruikersnaam.value, wachtwoord: Ti .Utils.md5HexDigest (wachtwoord1.value), namen: names.value, email: email.value; createReq.send (params); else alert ("Alle velden zijn verplicht");); Bij het vervangen van die regel schakelen we onze knop 'account maken' uit en stelt u de dekking in op 30%. Vervolgens nemen we de HTTPClient die we hebben gemaakt en noemen we de methode open () erop. Het verwijst naar een PHP-bestand dat we in de volgende stap gaan maken. We maken vervolgens een object params om alle formuliergegevens te bevatten. Let op Ik gebruik een MD5-codering op het wachtwoordveld. Laatste stap is om de methode send () aan te roepen en dit door te geven aan ons object params.
Dit bestand is het PHP-bestand waar onze app naar toe spreekt wanneer de knop 'account maken' wordt aangeraakt. De naam moet de naam weerspiegelen in onze createReq.open () -methode in de vorige stap. Ik heb de mijne post_register.php genoemd. Vervang mijn mysql_connect- en mysql_select_db-instellingen met uw verbindingsinstellingen.
0) echo "Die gebruikersnaam of e-mail bestaat al"; else $ insert = "INSERT INTO gebruikers (gebruikersnaam, wachtwoord, naam, e-mailadres) VALUES ('". $ gebruikersnaam. "', '". $ wachtwoord. "', '". $ namen. "', '" . $ email. "')"; $ query = mysql_query ($ insert); if ($ query) echo "Bedankt voor de registratie. U kunt nu inloggen."; else echo "Insert failed"; ?> Dus hier maken we verbinding met onze database en selecteer de database met de naam 'test' (die naam zal uiteraard veranderen afhankelijk van de naam van je database). U kunt onze $ _POST-variabelen zien als de namen die we in de laatste stap in het object params hebben ingesteld. Dat deel is cruciaal. We kijken vervolgens of de gebruikersnaam of het e-mailadres dat ze hebben ingevoerd al bestaat. Als dit niet het geval is, plaatst u de gegevens in de database. Oké, compileer nog niet! We zullen de volgende stap zetten, dat beloof ik.
Oké terug naar account.js. Laten we wat gegevens afhandelen voor wanneer onze PHP iets retourneert. Plaats deze code onder var createReq en boven onze klikgebeurtenis:
createReq.onload = function () if (this.responseText == "Insert failed" || this.responseText == "Die gebruikersnaam of email bestaat al") win.remove (overlay); alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', bericht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klik', functie (e) win.tabGroup.setActiveTab (0);); ; Dus als PHP iets retourneert, als 'this.responseText' gelijk is aan 'Insert failed' OF 'Die gebruikersnaam of email bestaat al', verwijder dan het overlay-venster (zodat ze informatie opnieuw kunnen invoeren en verzenden) en waarschuw hen met 'this .responseText'.
Na succesvolle registratie, meldt u hen met "Bedankt voor de registratie. U kunt nu inloggen" (gedefinieerd in ons bestand post_register.php). We voegen ook een gebeurtenislistener toe aan de OK-knop. Als u hierop klikt, worden we automatisch naar het inlogscherm geleid.
Als de waarschuwing terugkomt is een verminkt bericht over mysql_connect en / of toegang geweigerd, dan moet je je mysql-verbindingsinstellingen in de PHP controleren.
In deel 2 van deze serie hebben we tabbladen toegevoegd waar je tussen kunt schakelen. Vervolgens hebben we een nieuw formulier gemaakt waarin een gebruiker gegevens kan invoeren en verzenden. Bij het inzenden hebben we wat formuliervalidatie uitgevoerd en vervolgens heeft onze PHP een bericht geretourneerd op basis van of de gegevens in gebruik waren en, als dat niet het geval was, hebben we het met succes ingevoerd. Ik hoop dat je deze mini-serie tutorial net zo leuk vond als ik het leuk vond om het te schrijven!
