Share
Welkom bij deel 1 van 3 in mijn kleine serie over het authenticeren van gebruikers met Titanium. 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 servertaal in deze tutorial en mijn database zal MySQL zijn.
Maak een nieuwe database of gebruik een bestaande database en open deze vervolgens. Om tijd te besparen bij deze stap, heb ik de SQL-code hieronder toegevoegd om de tabel voor u te maken. Ik noem het gewoon 'gebruikers'. Nadat de tabel is gemaakt, voegt u een nieuwe rij toe. Ik heb 'rondog' gekozen als mijn gebruikersnaam, '1234' als mijn wachtwoord, mijn echte naam en mijn e-mailadres. VERGEET NIET om de MD5-functie in het wachtwoordveld uit te voeren tijdens het invoegen. Als uw MySQL GUI niet de mogelijkheid biedt om de MD5-functie uit te voeren, gebruikt u deze md5-generator en kopieert / plakt u de 32-tekenreeks in het wachtwoordveld. Het is ook niet nodig om het veld 'id' in te vullen omdat het een veld is dat automatisch wordt verhoogd.
Accentsconagua
MAAK TAFEL 'users' ('id' int (11) NOT NULL AUTO_INCREMENT, 'gebruikersnaam' varchar (255) NOT NULL, 'password' varchar (32) NOT NULL, 'name' varchar (255) NOT NULL, 'email' varchar (255) NOT NULL, PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
Opmerking: deze SQL-instructie is geëxporteerd vanuit phpMyAdmin. Als u fouten krijgt bij het kopiëren / plakken van deze SQL-instructie, moet u de tabel en velden handmatig maken met behulp van de bovenstaande instellingen.
Open titanium en maak een nieuw project. De naam die u kiest, doet er niet toe voor deze zelfstudie. Nadat het project is gemaakt, bladert u naar het bestand Resources / app.js. Er zitten al veel dingen in die we niet nodig hebben. Ga je gang en verwijder alles, behalve de achtergrondkleur aan de bovenkant.
Nu moeten we 3 dingen maken:
We voegen het venster vervolgens toe aan het tabblad en het tabblad aan de groep en openen het vervolgens.
// Hiermee stelt u de achtergrondkleur in van de hoofd-UIView (als er geen vensters / tabbladgroepen op staan) 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", window: login); tabGroup.addTab (loginTab); tabGroup.open (); Ok, dus we hebben ons venster, tabblad en tabbladgroep gemaakt.
Opmerking: Voordat u compileert, let op de eigenschap URL in het venster. Maak in de map Resources een nieuwe map met de naam 'main_windows' en een nieuw JS-bestand met de naam login.js. De eigenschap URL vertelt de compiler om login.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:
Open login.js nadat je het hebt gemaakt. We voegen 2 tekstvelden en een knop toe.
var win = Titanium.UI.currentWindow; 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); win.add (gebruikersnaam); var password = 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); win.add (wachtwoord); var loginBtn = Titanium.UI.createButton (title: 'Login', top: 110, width: 90, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14 ); win.add (loginBtn);
Ga je gang en compileer en je interface zou er zo uit moeten zien. Hun zal nog geen functionaliteit zijn, maar je zult kunnen typen.
We moeten een klikgebeurtenislistener maken, maar voordat we gaan controleren of de gebruiker in de database bestaat, willen we een aantal foutcontroles uitvoeren op de velden. We zullen ook een HTTP-client maken via de createHTTPClient () -functie.
var loginReq = Titanium.Network.createHTTPClient (); loginBtn.addEventListener ('klik', functie (e) if (gebruikersnaam.value! = "&& password.value! =") loginReq.open ("POST", "http: // localhost: 8888 / post_auth.php "); var params = gebruikersnaam: gebruikersnaam.value, wachtwoord: Ti.Utils.md5HexDigest (wachtwoord.waarde); loginReq.send (params); else alert (" Gebruikersnaam / wachtwoord vereist "); ); Om het bovenstaande uit te leggen, controleren we eerst of een van de velden leeg is. Als dat het geval is, geven we een melding dat ze verplicht zijn. Als ze beiden waarden hebben, willen we ons PHP-bestand openen (we zullen dit volgende creëren) en een aantal waarden ernaar sturen. Let op Ik gebruik MD5-codering op de wachtwoordwaarde.
Dit bestand zal het PHP-bestand zijn waar onze app naar toe spreekt als hij op de login-knop drukt. De naam moet de naam weerspiegelen in onze methode loginReq.open () in de vorige stap. Ik heb de mijne post_auth.php genoemd. Vervang mijn mysql_connect- en mysql_select_db-instellingen met uw verbindingsinstellingen.
0) $ row = mysql_fetch_array ($ query); $ response = array ('logged' => true, 'name' => $ row ['name'], 'email' => $ row ['email']); echo json_encode ($ antwoord); else // Anders is de gebruikersnaam en / of het wachtwoord ongeldig! Maak een array, json_encode het en echo het uit $ response = array ('logged' => false, 'message' => 'Ongeldige gebruikersnaam en / of wachtwoord'); echo json_encode ($ antwoord); ?> Oké terug naar login.js. Laten we wat gegevens verwerken voor wanneer onze PHP iets retourneert. Plaats deze code onder var loginReq en boven onze klikgebeurtenis.
loginReq.onload = function () var json = this.responseText; var response = JSON.parse (json); if (response.logged == true) alert ("Welcome" + response.name + ". Uw e-mailadres is:" + response.email); else alert (response.message); ; JSON.parse () maakt deel uit van de Titanium API. Het parseert de json_encode () -reeks die we in ons PHP-bestand hebben gemaakt. Laten we het nu lanceren. Voer je gebruikersnaam of wachtwoord in. Afhankelijk van of u het correct invoert, ziet u het welkomstbericht of ziet u het ongeldige gebruikersnaam / wachtwoord-bericht. Probeer beide!
Als u een foutmelding krijgt in de Titanium-console dat de JSON-reeks niet kan worden geanalyseerd, betekent dit dat u geen verbinding kunt maken met de database of de database kunt selecteren. Probeer rechtstreeks naar uw bestand post_auth.php in uw browser te bladeren en te kijken wat de fout is. Ik zou naar de mijne zoeken via deze URL http: // localhost: 8888 / post_auth.php
In deel 1 van deze serie hebben we de database gemaakt 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 na succesvolle aanmelding heeft het onze naam en e-mail geretourneerd. Als inloggen niet lukte, hebben we een string geretourneerd met alleen een ongeldige gebruikersnaam en / of wachtwoord. Ik hoop dat je deze tutorial leuk vond en dat het niet moeilijk was om dit te volgen gezien we 3 verschillende technologieën gebruikten: PHP, MySQL en Titanium (Javascript)! Houd ons in de gaten voor deel 2 van deze serie, waar we een nieuw tabblad zullen maken waarmee uw gebruikers een account kunnen maken.
