Share
Välkommen till del 1 av 3 i min lilla serie om autentiserande användare med Titanium. 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 språk i denna handledning och min databas blir MySQL.
Skapa en ny databas eller använd en befintlig, öppna sedan den. För att spara tid på detta steg har jag inkluderat SQL-koden nedan för att skapa bordet för dig. Jag har kallat det helt enkelt "användare". När bordet är skapat lägger du till en ny rad. Jag har valt 'rondog' som mitt användarnamn, '1234' som mitt lösenord, mitt riktiga namn och min e-postadress. Glöm inte att köra MD5-funktionen i lösenordsfältet när du lägger in. Om din MySQL GUI inte erbjuder möjligheten att köra MD5-funktionen, använd den här md5-generatorn och kopiera / klistra in 32 teckensträngen i lösenordsfältet. Också det är inte nödvändigt att fylla i fältet 'id' eftersom det är ett autokrementeringsfält.
Accentsconagua
CREATE TABLE 'users' ('id' int (11) INTE NULL AUTO_INCREMENT, 'användarnamn' varchar (255) INTE NULL, "lösenord" varchar (32) INTE NULL, "namn" varchar (255) INTE NULL, "email" varchar (255) INTE NULL, PRIMÄR KEY ('id')) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Obs! Denna SQL-sats exporterades från phpMyAdmin. Om du får fel vid kopiering / klistra in i SQL-satsen måste du manuellt skapa tabellen och fälten med inställningarna ovan.
Öppna titan och skapa ett nytt projekt. Namnet du väljer spelar ingen roll för den här handledningen. När projektet är skapat, bläddra till filen Resources / app.js. Deras är mycket saker i det redan som vi inte behöver. Fortsätt och ta bort allt utom bakgrundsfärgslinjen längst upp.
Nu behöver vi skapa 3 saker:
Vi lägger sedan till fönstret till fliken och fliken till gruppen och öppnar sedan den.
// detta ställer bakgrundsfärgen på master UIView (när det inte finns några fönster / flikgrupper på den) Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', tabBarHidden: true, url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fönster: login); tabGroup.addTab (loginTab); tabGroup.open (); Ok, så vi har gjort vårt fönster, flik och flikgrupp.
Obs! Innan du sammanställer, märka URL-egenskapen i fönstret. I mappen Resurser ska du skapa en ny mapp som heter main_windows och en ny JS-fil som heter login.js. URL-egenskapen berättar att kompilatorn använder login.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:
Öppna login.js när du har skapat det. Vi lägger till 2 textfält och en knapp.
var vinna = Titanium.UI.currentWindow; 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); win.add (användarnamn); var lösenord = 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); win.add (lösenord); var loginBtn = Titanium.UI.createButton (title: 'Logga in', topp: 110, bredd: 90, höjd: 35, borderRadius: 1, typsnitt: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14 ); win.add (loginBtn);
Fortsätt och kompilera och ditt gränssnitt ska se ut så här. Deras funktionalitet är ännu inte, men du kommer att kunna skriva.
Vi behöver skapa en klickhändelseloggare, men innan vi går och kolla om användaren finns i databasen vill vi göra en del felkontroll på fälten. Vi skapar också en HTTP-klient via funktionen createHTTPClient ().
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('klick', funktion (e) if (användarnamn.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = användarnamn: användarnamn.värde, lösenord: Ti.Utils.md5HexDigest (password.value); loginReq.send (params); else alert (" Användarnamn / lösenord krävs "); ); För att förklara ovanstående kontrollerar vi först om någon av fälten är tomma. Om de är så presenterar vi en alert som säger att de är nödvändiga. Om de båda har värden vill vi öppna vår PHP-fil (vi kommer att skapa det här nästa) och skicka några värden till det. Lägg märke till att jag kör MD5-kryptering på lösenordet.
Den här filen kommer att vara den PHP-fil som appen pratar om när du trycker på inloggningsknappen. Namnet måste spegla namnet i vår loginReq.open () -metod i föregående steg. Jag har namngivit min post_auth.php. Ersätt mina mysql_connect och mysql_select_db inställningar med dina anslutningsinställningar.
0) $ row = mysql_fetch_array ($ query); $ response = array ('logged' => true, 'name' => $ rad ['namn'], 'email' => $ rad ['email']); echo json_encode ($ response); else // Annars var användarnamnet och / eller lösenordet ogiltigt! Skapa en array, json_enkoda den och echo den ut $ response = array ('logged' => false, 'message' => 'Ogiltigt användarnamn och / eller lösenord'); echo json_encode ($ response); ?> Okej tillbaka till login.js. Låt oss göra viss datahantering för när vårt PHP returnerar någonting. Placera den här koden under var loginReq och över vår klickhändelse.
loginReq.onload = function () var json = this.responseText; var respons = JSON.parse (json); om (response.logged == true) alert ("Welcome" + response.name + ". Din e-postadress är:" + response.email); annars alert (response.message); ; JSON.parse () är en del av Titanium API. Det analyserar den json_encode () -sträng som vi skapade i vår PHP-fil. Låt oss starta det nu. Ange ditt användarnamn eller lösenord. Beroende på om du anger det korrekt eller inte, kommer du antingen att se välkomstmeddelandet eller om du kommer att se felaktigt användarnamn / lösenordsmeddelande. Prova båda!
Om du får ett fel i Titanium-konsolen om du inte kan analysera JSON-strängen betyder det att du inte kan ansluta till databasen eller välja databasen. Prova att bläddra direkt till din post_auth.php-fil i din webbläsare och se vad felet är. Jag skulle bläddra till min via denna URL http: // localhost: 8888 / post_auth.php
I del 1 i denna serie skapade vi databasen och lade 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-postmeddelande. Om inloggningen misslyckades returnerade vi en sträng som bara angav ogiltigt användarnamn och / eller lösenord. Jag hoppas att du haft denna handledning och att det inte var svårt att följa med tanke på att vi använde 3 olika tekniker: PHP, MySQL och Titanium (Javascript)! Håll dig uppdaterad för del 2 i denna serie där vi kommer att skapa en ny flik som gör att dina användare kan skapa ett konto.
