Share
Välkommen till del 2 i vår 3-serie om användarautentisering med Titanium Mobile. Titanium är en öppen källkors kompilator som låter dig skriva iPhone och Android (snart för att vara blackberry också!) Applikationer med Javascript. Ingen mål-C krävs! Vi använder PHP som serverns sidkod och min databas blir MySQL. För detta exempel använder jag MAMP för att utvecklas lokalt. Jag rekommenderar starkt att du går igenom den första delen av denna serie innan du fortsätter om du inte redan har det. Du kan dock alternativt hämta källan från del 1, skapa databastabellen och konfigurera PHP-databasanslutningarna på egen hand innan du hoppar över till den här handledningen om du vill.
I del 1 ställer vi upp databasen för vår app och lägger till en användare. Vi gjorde då vårt inloggningsgränssnitt genom att skapa en flikgrupp, en flik och ett fönster. Vi gav sedan vår inloggningsknapp några åtgärder. Vår PHP-fil frågade vår databas och, efter framgångsrik inloggning, returnerade vi vårt namn och e-postadress. Om inloggningsautentisering misslyckades returnerade vi en sträng som bara angav ogiltigt användarnamn och / eller lösenord. I del 2 skapar vi en ny flik på huvudskärmen som tillåter en användare att skapa ett nytt konto och sedan logga in.
Öppna app.js och skapa kontofönstret och fliken under vårt inloggningsflikt. Observera också att jag tog bort egenskapen tabBarHidden i inloggningsfönstret som vi gjorde i del 1. Genom att ta bort den här egenskapen kan vi se flikarna längst ner på telefonen. Vi har också lagt till kontoTab till tabGruppen.
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", fönster: login); var account = Titanium.UI.createWindow (title: 'Nytt konto', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', fönster: konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
URL-egenskapen på kontot var berättar för kompilatorn att använda account.js som vårt fönster. Om du hoppar över den här delen kommer Titanium att kasta ett fult rött fel i emulatorn. Efter en lyckad sammanställning ska din skärm se ut så här:
Traditionellt skulle du se att fliken i botten har ikoner. Tja, med Titanium, det är också mycket enkelt! Använd bara ikonegenskapen i varje flik. Till exempel:
var accountTab = Titanium.UI.createTab (title: 'New Account', ikon: 'images / account_icon.png', fönster: konto);
Skapa en ny fil och namnge den account.js och spara den i mappen Resources / main_windows. Det här är samma plats som vi sparade vår login.js-fil i del 1.
var vinna = Titanium.UI.currentWindow; / * * Gränssnitt * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', topp: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (scrollView); var användarnamn = Titanium.UI.createTextField (färg: '# 336699', topp: 10, vänster: 10, bredd: 300, höjd: 40, hintText: 'Användarnamn', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (användarnamn); var password1 = Titanium.UI.createTextField (färg: '# 336699', topp: 60, vänster: 10, bredd: 300, höjd: 40, hintText: 'Lösenord', lösenordMask: 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 (färg: '# 336699', topp: 110, vänster: 10, bredd: 300, höjd: 40, hintText: 'Lösenord igen', lösenordMask: true, keyboardType: Titanium.UI. KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password2); var namn = Titanium.UI.createTextField (färg: '# 336699', överst: 160, vänster: 10, bredd: 300, höjd: 40, hintText: 'Namn', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (namn); var email = Titanium.UI.createTextField (färg: '# 336699', överst: 210, vänster: 10, bredd: 300, höjd: 40, hintText: 'email', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (e-post); var createBtn = Titanium.UI.createButton (title: 'Skapa konto', överst: 260, bredd: 130, höjd: 35, borderRadius: 1, typsnitt: fontFamily: 'Arial', fontWeight: 14); scrollView.add (createBtn);
Okej, det här betyder att koden är riktigt super lätt att förstå, men det gör så mycket för oss. Bara genom att titta på våra variabla namn är det ganska lätt att dechiffrera vad som händer här. Vi skapade 5 fält:
Vi har också gjort vår "skapa konto" -knapp.
Du kommer också att märka varen längst upp kallad scrollView. Genom att lägga till objekten i en rullningsvy kan vyn rullas, så när tangentbordet glider upp överlappar inte våra textfält.
Fortsätt och kompilera. Efter en lyckad kompilering ska din skärm se ut så här efter att du bytte till kontot fliken. Skapa konto-knappen gör inte någonting än, men spelar runt med att välja textfält och se hur bläddringsvy fungerar.
Vi behöver nu skapa en händelseloggare på vår knapp, så när de klickar på "skapa konto" skickar den data och några valideringsuppgifter.
Accentsconagua
var testresultat; funktion checkemail (emailAddress) var str = emailAddress; var [= Za-za-z0-9 _ 2,4) $ /; om (filter.test (str)) testresultat = true; annat testresultat = false; returnera (testresultat); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Infoga misslyckades" || this.responseText == "Det användarnamnet eller e-posten finns redan") createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', meddelande: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klick', funktion (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('klick', funktion (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("dina lösenord matchar inte"); else if (! checkemail (email.value)) alert ("Vänligen ange ett giltigt e-postmeddelande"); annars alert ("Allt ser bra ut så skicka data"); else alert ("Alla fält är obligatoriska");); Från början är metoden checkEmail () en enkel funktion som använder Regular Expression för att kontrollera om e-postmeddelandet användarens inmatningar är rätt format. Vi skapade en ny HTTPClient som används för att skicka vår data till vår PHP-fil.
I klickhändelsen kontrollerar vi först om fälten är tomma. Om de är, varna dem och säga "Alla fält är obligatoriska." Vår nästa check är att se om de båda lösenordsfälten är desamma. Om de inte är, varna dem med att säga "Dina lösenord matchar inte." Vår sista kontroll är att kontrollera om e-postadressen är giltig. Om det inte är det, varna dem med att säga "Vänligen ange ett giltigt e-postmeddelande."
När formuläret är validerat kommer det att varna "Allt ser bra ut så skicka data." Fortsätt och kompilera och testa att skicka formuläret med inga värden, matchande lösenord och ett ogiltigt e-postmeddelande. När du skickar in en giltig blankett kommer du att se varningen nedan:
Gå vidare och ta bort "Allt ser bra ut så skicka data" -raden. Vi måste ersätta det med metoderna open () och send ().
createBtn.addEventListener ('klick', funktion (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("dina lösenord matchar inte"); else if (! checkemail (email.value)) alert ("Vänligen ange ett giltigt e-postmeddelande"); annars createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = användarnamn: användarnamn.värde, lösenord: Ti .Utils.md5HexDigest (password1.value), namn: names.value, email: email.value; createReq.send (params); else alert ("Alla fält är obligatoriska");); Så, när vi byter ut den linjen, inaktiverar vi vår "Skapa konto" -knapp och ställer opaciteten till 30%. Vi tar sedan HTTPClient som vi har gjort och kallar open () -metoden på den. Det pekar på en PHP-fil som vi kommer att göra i nästa steg. Vi skapar sedan ett paramsobjekt för att innehålla alla formulärdata. Lägg märke till att jag kör en MD5-kryptering i lösenordsfältet. Slutligt steg är att ringa metoden send () och skicka den till vårt paramsobjekt.
Den här filen kommer att vara den PHP-fil som vår app pratar om när du trycker på knappen "Skapa konto". Namnet måste spegla namnet i vår createReq.open () -metod i föregående steg. Jag har namngivit min post_register.php. Ersätt mina mysql_connect och mysql_select_db inställningar med dina anslutningsinställningar.
0) echo "Det användarnamnet eller e-posten finns redan"; andra $ insert = "INSERT INTO användarna (användarnamn, lösenord, namn, e-post) VÄRDEN (" "$ användarnamn." "," "$ lösenord." "," "$ namn. . $ email. "')"; $ query = mysql_query ($ insert); om ($ query) echo "Tack för att du registrerade. Du kan nu logga in."; else echo "Insert failed"; ?> Så här ansluter vi till vår databas och väljer databasen "test" (det namnet kommer att ändras beroende på namnet på din databas självklart). Du kan se våra $ _POST-variabler reflektera de namn vi satt i parameterns objekt i vårt sista steg. Den delen är avgörande. Vi ser sedan om användarnamnet eller e-postadressen de angav finns redan. Om det inte gör det, sätt in data i databasen. Okej, kompilera inte just ännu! Vi kommer nästa steg, lovar jag.
Okej tillbaka till account.js. Låt oss göra några datahantering för när vårt PHP returnerar något. Placera den här koden under var createReq och över vår klickhändelse:
createReq.onload = function () if (this.responseText == "Infoga misslyckades" || this.responseText == "Det användarnamnet eller e-posten finns redan") win.remove (overlay); alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', meddelande: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klick', funktion (e) win.tabGroup.setActiveTab (0);); ; Så när PHP returnerar något, om "this.responseText" är lika med "Insert failed" ELLER "Det användarnamnet eller e-postmeddelandet finns redan", ta bort överläggningsfönstret (så att de kan skriva in information och skicka in) och varna dem med "detta .responseText'.
Efter framgångsrik registrering, varna dem med "Tack för registrering. Du kan nu logga in" (definierad i vår post_register.php-fil). Vi lägger även till en händelseloggare på OK-knappen, så när du klickar på den tar det oss automatiskt till inloggningsskärmen.
Om varningen kommer tillbaka är det några skrämmande meddelanden om mysql_connect och / eller åtkomst nekad, då måste du kolla dina mysql-anslutningsinställningar i PHP.
I del 2 i denna serie lade vi till i flikar som du kan växla mellan. Vi gjorde då en ny blankett där en användare kan mata in data och skicka in den. Vid inlämning gjorde vi någon form validering och sedan fick vår PHP returnera ett meddelande baserat på om dataen användes och, om inte, vi införde det med framgång. Jag hoppas att du tyckte om att läsa den här mini-serien handledning så mycket som jag tyckte om att skriva den!
