Share
Velkommen til del 2 av våre 3-delerserier om brukerautentisering med Titanium Mobile. Titanium er en åpen kildekode kompilator som lar deg skrive iPhone og Android (snart for å være blackberry også!) Programmer som bruker Javascript. Ingen mål-C kreves! Vi skal bruke PHP som serverens sidekode og databasen min vil være MySQL. For dette eksempelet bruker jeg MAMP til å utvikle seg lokalt. Jeg anbefaler på det sterkeste at du går gjennom første del av denne serien før du fortsetter hvis du ikke allerede har det. Du kan imidlertid alternativt laste ned kilden fra del 1, opprette databasetabellen og sette opp PHP-databasetilkoblingene selv før du hopper over til denne opplæringen hvis du vil.
I del 1 installerer vi databasen for appen vår og legger til en bruker. Vi lagde deretter innloggingsgrensesnittet vårt ved å opprette en fanegruppe, en fane og et vindu. Vi ga deretter innloggingsknappen noen handlinger. Vår PHP-fil forespørte vår database, og etter vellykket innlogging returnerte den vårt navn og e-post. Hvis innloggingsautentisering mislyktes, returnerte vi en streng som bare angir ugyldig brukernavn og / eller passord. I del 2 vil vi opprette en ny fane på hovedskjermbildet som lar en bruker lage en ny konto og deretter logge inn.
Åpne app.js og opprett kontovinduet og fanen under vårt skript for påloggingsfane. Vær også oppmerksom på at jeg fjernet tabBarHidden-egenskapen på påloggingsvinduet som vi gjorde i del 1. Hvis du fjerner den egenskapen, kan vi se fanene nederst på telefonen. Vi har også lagt til kontoTab til 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", vindu: logg inn)); var account = Titanium.UI.createWindow (tittel: 'Ny konto', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (tittel: 'Ny konto', vindu: konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
Nettadressegenskapen på kontoen var forteller kompilatoren å bruke account.js som vårt vindu. Hvis du hopper over denne delen, vil Titanium kaste en stygg rød feil i emulatoren. Ved en vellykket kompilering bør skjermen se slik ut:
Tradisjonelt vil du se på fanebladet nederst, ha ikoner. Vel, med Titanium, det er også veldig enkelt! Bruk bare ikonegenskapen i hver kategori. For eksempel:
var accountTab = Titanium.UI.createTab (tittel: 'Ny konto', ikon: 'images / account_icon.png', vindu: konto);
Opprett en ny fil og gi den navnet account.js og lagre det i mappen Ressurser / main_windows. Dette er det samme stedet vi lagret vår login.js-fil i del 1.
var vinne = Titanium.UI.currentWindow; / * * Grensesnitt * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', topp: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (scrollView); var brukernavn = Titanium.UI.createTextField (color: '# 336699', topp: 10, venstre: 10, bredde: 300, høyde: 40, hintText: 'Brukernavn', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (brukernavn); var password1 = Titanium.UI.createTextField (color: '# 336699', topp: 60, venstre: 10, bredde: 300, høyde: 40, hintText: 'Passord', passordMask: 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 (color: '# 336699', topp: 110, venstre: 10, bredde: 300, høyde: 40, hintText: 'Passord igjen', passordMask: true, keyboardType: Titanium.UI. KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password2); var navn = Titanium.UI.createTextField (color: '# 336699'), topp: 160, venstre: 10, bredde: 300, høyde: 40, hintText: 'Name', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (navn); var email = Titanium.UI.createTextField (farge: '# 336699', topp: 210, venstre: 10, bredde: 300, høyde: 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: 'Opprett konto', topp: 260, bredde: 130, høyde: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); scrollView.add (createBtn);
Ok, dette mener kodenes blokk er veldig super lett å forstå, men det gjør så mye for oss. Bare ved å se på våre variabelnavn, er det ganske enkelt å dechifisere hva som skjer her. Vi opprettet 5 felt:
Vi har også laget vår "opprett konto" -knapp.
Du vil også merke varen øverst kalt scrollView. Hvis du legger til objektene i en rullevisning, kan visningen rulles, så når tastaturet glir opp, overlapper ikke tekstfeltene.
Gå videre og kompilere. Etter en vellykket kompilering, bør skjermen se slik ut etter at du har byttet til kontobladet. Opprett konto-knappen gjør ingenting ennå, men leker deg med valg av tekstfelt og se hvordan rullevisningen fungerer.
Vi trenger nå å lage en hendelselytter på knappen vår, så når de klikker på "opprett konto", sender den dataene og noen validering.
Accentsconagua
var testresultater; funksjonskontrollpost (emailAddress) var str = emailAddress; var [A-Za-z0-9 _ \ - \)] + \. ([A-Za-z] 2,4) $ /; hvis (filter.test (str)) testresultater = true; ellers testresultater = false; retur (testresultater); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Sett inn feil" || this.responseText == "Det brukernavnet eller e-posten eksisterer allerede") createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', melding: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klikk', funksjon (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('klikk', funksjon (e) if (brukernavn.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert («Passordene dine stemmer ikke overens»); else if (! checkemail (email.value)) alert ("Vennligst skriv inn en gyldig epost"); ellers alert ("Alt ser bra ut så send dataene"); else alert ("Alle felt er påkrevd");); Starte fra toppen, er metoden checkEmail () en enkel funksjon som bruker Regular Expression for å sjekke om e-posten brukerinngangene er riktig format. Vi opprettet en ny HTTPClient som vil bli brukt til å sende våre data til vår PHP-fil.
I klikkhendelsen kontrollerer vi først om feltene er tomme. Hvis de er, varsle dem med å si "Alle felt er påkrevd." Vår neste sjekk er å se om de to passordfeltene er de samme. Hvis de ikke er, varsl deg dem som sier "Passordene dine stemmer ikke overens." Vår siste sjekk er å sjekke om e-postadressen er gyldig. Hvis ikke, vær oppmerksom på at du sier "Vennligst skriv inn en gyldig epost."
Når skjemaet er validert, vil det varsle "Alt ser bra ut, så send dataene." Gå videre og kompilere og prøv å sende inn skjemaet uten verdier, ikke-matchende passord og en ugyldig e-post. Når du sender inn et gyldig skjema, vil du se varselet nedenfor:
Gå videre og slett "Alt ser bra ut så send data" -linjen. Vi må erstatte det med åpne () og send () metoder.
createBtn.addEventListener ('klikk', funksjon (e) if (brukernavn.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert («Passordene dine stemmer ikke overens»); else if (! checkemail (email.value)) alert ("Vennligst skriv inn en gyldig epost"); ellers createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = brukernavn: brukernavn.value, passord: Ti .Utils.md5HexDigest (password1.value), navn: names.value, email: email.value; createReq.send (params); else alert ("Alle felt er påkrevd");); Så, ved å bytte ut den linjen, deaktiverer vi vår "opprett konto" -knapp og setter opaciteten til 30%. Vi tar deretter HTTP-klienten vi laget og kaller den åpne () -metoden på den. Det peker på en PHP-fil som vi skal gjøre i neste trinn. Vi lager deretter et paramsobjekt for å inneholde alle skjemadataene. Legg merke til at jeg kjører en MD5-kryptering på passordfeltet. Endelig trinn er å ringe send () -metoden og sende den til vårt paramsobjekt.
Denne filen vil være PHP-filen vår app snakker til når du trykker på knappen "opprett konto". Navnet må gjenspeile navnet i vår createReq.open () -metode i det forrige trinnet. Jeg har kalt min post_register.php. Erstatt mine mysql_connect og mysql_select_db innstillinger med tilkoblingsinnstillingene.
0) echo "Det brukernavnet eller e-posten eksisterer allerede"; andre $ insert = "INSERT TIL brukere (brukernavn, passord, navn, e-post) VALUES ('". $ brukernavn. "', '". $ passord. "', '". $ navn. . $ email. "')"; $ query = mysql_query ($ insert); hvis ($ spørring) echo "Takk for registrering. Du kan nå logge inn."; else echo "Insert failed"; ?> Så her kobler vi til databasen vår og velger databasen som heter 'test' (det navnet vil endres avhengig av navnet på databasen din åpenbart). Du kan se våre $ _POST-variabler gjenspeile navnene vi angir i paramsobjektet i vårt siste trinn. Den delen er avgjørende. Vi ser da om brukernavnet eller e-postadressen de skrev inn, eksisterer allerede. Hvis ikke, legg inn dataene i databasen. Ok, ikke kompilere ennå! Vi vil neste skritt, jeg lover.
Ok, tilbake til account.js. La oss gjøre noe datahåndtering for når PHP returnerer noe. Plasser denne koden under var createReq og over klikk-hendelsen:
createReq.onload = function () if (this.responseText == "Sett inn feil" || this.responseText == "Det brukernavnet eller e-posten eksisterer allerede") win.remove (overlay); alert (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', melding: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klikk', funksjon (e) win.tabGroup.setActiveTab (0);); ; Så når PHP returnerer noe, hvis "this.responseText" er lik "Insert failed" ELLER "Det brukernavnet eller e-posten eksisterer allerede," fjern overleggsvinduet (slik at de kan skrive inn informasjon og sende inn) og varsle dem med "dette .responseText'.
Ved vellykket registrering, varsel dem med "Takk for registrering. Du kan nå logge inn" (definert i vår post_register.php-fil). Vi legger også til en hendelseslytter til OK-knappen, så når du klikker på den, tar den oss automatisk til påloggingsskjermen.
Hvis varselet kommer tilbake, er det noe ødelagt melding om mysql_connect og / eller tilgang nektet, da må du sjekke innstillingene for mysql-tilkoblingen i PHP.
I del 2 av denne serien har vi lagt til i faner som du kan bytte mellom. Vi laget en ny form der en bruker kan skrive inn data og sende den inn. Ved innsending gjorde vi noen form validering og deretter fikk PHP vår melding en melding basert på om dataene var i bruk, og hvis ikke, innførte vi det med hell. Jeg håper du likte å lese denne mini-serien opplæringen så mye som jeg likte å skrive den!
