Share
Bine ați venit la partea a 2-a din seria noastră de 3 părți privind autentificarea utilizatorilor cu Titanium Mobile. Titanium este un compilator încrucișat cu sursă deschisă, care vă permite să scrieți aplicații iPhone și Android (în curând să fie și!) Folosind Javascript. Nu este necesar obiectivul C! Vom folosi PHP ca cod de server și baza de date va fi MySQL. Pentru acest exemplu, folosesc MAMP pentru a se dezvolta local. Vă recomandăm insistent să treceți prin prima parte a acestei serii înainte de a continua, dacă nu ați făcut-o deja. Cu toate acestea, puteți să descărcați alternativ sursa din partea 1, să creați tabela de baze de date și să configurați conexiunile bazei de date PHP înainte de a trece peste acest tutorial dacă doriți.
În Partea 1, am setat baza de date pentru aplicația noastră și am adăugat un utilizator. Apoi am realizat interfața de conectare creând un grup tab, o filă și o fereastră. Apoi am dat butonul de conectare câteva acțiuni. Fișierul nostru PHP a interogat baza noastră de date și, după autentificare reușită, ne-a returnat numele și adresa de e-mail. Dacă autentificarea de conectare a eșuat, am returnat un șir pur și simplu afirmând numele de utilizator nevalid și / sau parola. În partea a doua, vom crea o filă nouă pe ecranul principal, care permite unui utilizator să creeze un cont nou și apoi să se conecteze.
Deschideți app.js și creați fereastra contului și fila sub scriptul filelor de conectare; De asemenea, rețineți că am eliminat proprietatea tabBarHidden din fereastra de conectare pe care am făcut-o în partea 1. Îndepărtarea acelei proprietăți ne permite să vedem filele din partea de jos a telefonului. De asemenea, am adăugat contul AccountTab la tabGroup.
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (title: 'Demo de autentificare utilizator', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fereastră: login); var account = Titanium.UI.createWindow (title: 'Cont nou', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'Cont nou', fereastră: cont); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
Proprietatea URL din contul var îi spune compilatorului să folosească account.js ca fereastră. Dacă ignorați această parte, Titanium va arunca o eroare roșie urâtă în emulator. După o compilare reușită, ecranul dvs. ar trebui să arate astfel:
În mod tradițional, ați vedea pictograma barei din partea de jos. Ei bine, cu Titanium, este și foarte ușor! Utilizați pur și simplu proprietatea icon din fiecare filă. De exemplu:
var accountTab = Titanium.UI.createTab (title: 'Cont nou', pictogramă: 'images / account_icon.png', fereastră: account);
Creați un fișier nou și denumiți-l pe account.js și salvați-l în folderul Resources / main_windows. Acesta este același loc în care salvăm fișierul login.js din partea 1.
var win = Titanium.UI.currentWindow; / * * Interfață * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', top: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (scrollView); var username = Titanium.UI.createTextField (color: '# 336699', top: 10, stanga: 10, lățimea: 300, înălțimea: 40, hintText: 'Username', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nume de utilizator); var parola1 = Titanium.UI.createTextField (color: '# 336699', top: 60, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Password', passwordMask: true, keyboardType: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (password1); var parola2 = Titanium.UI.createTextField (culoare: '# 336699', top: 110, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Parola din nou', parolaMask: 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, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Name', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nume); var email = Titanium.UI.createTextField (color: '# 336699', top: 210, stânga: 10, lățimea: 300, înălțimea: 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: 'Creare cont', top: 260, lățime: 130, înălțime: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 14); scrollView.add (createBtn);
Bine, acest blocaj de coduri este într-adevăr foarte ușor de înțeles, dar face atât de mult pentru noi. Doar privindu-ne numele variabilelor, este destul de ușor să descifrăm ceea ce se întâmplă aici. Am creat 5 câmpuri:
Am făcut, de asemenea, butonul nostru "crea cont".
Veți observa, de asemenea, var în partea de sus numit scrollView. Adăugarea obiectelor într-o vizualizare de derulare permite ca vizualizarea să fie derulantă astfel încât atunci când tastatura să alunece, nu se suprapune câmpurilor noastre de text.
Mergeți și compilați-vă. După o compilare reușită, ecranul ar trebui să arate așa după ce treceți la fila cont. Butonul de creare a contului nu face nimic încă, ci reda cu selectarea câmpurilor de text și pentru a vedea cum funcționează vizualizarea derulării.
Acum trebuie să creăm un ascultător de evenimente pe butonul nostru, astfel că atunci când dau clic pe "crea cont", trimite datele ca și unele validări.
Accentsconagua
Rezultatele testului; funcția de verificare a funcției (e-mailAddress) var str = emailAddress; var [= A-Za-z0-9 _ \ - \.]) + \ ([A-Za-z0-9] 2,4) $ /; dacă (filter.test (str)) testresults = true; altfel testresults = false; retur (rezultatele testului); ; var createReq = Titaniu.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "Inserare eșuată" || this.responseText == "Acest nume de utilizator sau e-mail există deja") createBtn.enabled = true; createBtn.opacity = 1; alert (this.responseText); altceva var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', mesaj: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ("clic", funcția (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ("clic", funcția (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Parolele nu se potrivesc"); altceva if (! checkemail (email.value)) alertă (" altfel alert ("Totul arata bine, asa ca trimiteti datele"); else alert ("Toate campurile sunt obligatorii");); Începând din partea de sus, metoda checkEmail () este o funcție simplă care folosește Expresia regulată pentru a verifica dacă e-mailul introdus de utilizator este format corect. Am creat un nou HTTPClient care va fi folosit pentru a trimite datele noastre în fișierul nostru PHP.
În evenimentul de clic, verificăm mai întâi dacă toate câmpurile sunt goale. Dacă sunt, avertizați-i spunând: "Toate câmpurile sunt obligatorii". Următorul nostru control este să vedem dacă cele două câmpuri de parolă sunt aceleași. Dacă nu sunt, avertizați-i spunând: "Parolele dvs. nu se potrivesc". Cecul nostru final este să verificăm dacă adresa de e-mail este validă. Dacă nu, alertați-i spunând: "Vă rugăm să introduceți un e-mail valid."
Odată ce formularul este validat, acesta va avertiza "Totul arată bine, așa că trimiteți datele". Mergeți mai departe și compilați și testați trimiterea formularului fără valori, parole care nu se potrivesc și un e-mail nevalid. La trimiterea unui formular valabil, veți vedea alerta de mai jos:
Mergeți mai departe și ștergeți linia "Totul arată bine, așa că trimiteți datele". Trebuie să o înlocuim cu metodele open () și send ().
createBtn.addEventListener ("clic", funcția (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Parolele nu se potrivesc"); altceva if (! checkemail (email.value)) alertă (" altul createBtn.enabled = false; createBtn.opacity = 0.3; createReq.open ("POST"; "http: // localhost: 8888 / post_register.php"); var params = username: username.value, password: Ti .Utils.md5HexDigest (parola1.value), nume: names.value, email: email.value; createReq.send (params); else alert ("Toate câmpurile sunt obligatorii");); Prin urmare, înlocuind această linie, dezactivați butonul "creați contul" și setați opacitatea la 30%. Apoi luăm HTTPClientul pe care l-am făcut și apelând metoda open () pe ea. Acesta indică un fișier PHP pe care îl vom face în pasul următor. Apoi vom crea un obiect params care să conțină toate datele formularului. Observați că execut o criptare MD5 în câmpul de parolă. Ultimul pas este de a apela metoda send () și de a ne transmite obiectul params.
Acest fișier va fi fișierul PHP la care vorbește aplicația atunci când apasă butonul "crea cont". Numele trebuie să reflecte numele în metoda noastră createReq.open () din pasul anterior. Am numit postul meu post_register.php. Înlocuiți setările mele mysql_connect și mysql_select_db cu setările de conectare.
0) echo "Acest nume de utilizator sau e-mail există deja"; altceva $ insert = "INSERT INTO utilizatori (nume de utilizator, parola, nume, email) VALUES (". $ username. ", $ email. ")"; $ interogare = mysql_query ($ insert); dacă ($ interogare) echo "Vă mulțumim pentru înregistrare. Acum vă puteți conecta"; altceva echo "Insert failed"; ?> Deci, aici ne conectăm la baza noastră de date și selectăm baza de date numită "test" (acest nume se va schimba în mod evident în funcție de numele bazei dvs. de date). Puteți vedea variabilele noastre $ _POST care reflectă numele pe care le-am setat în obiectul params în ultimul nostru pas. Această parte este crucială. Apoi vedem dacă numele de utilizator sau adresa de e-mail pe care au introdus-o deja există. Dacă nu, introduceți datele în baza de date. Bine, nu compilați încă! Vom promova următorul pas.
Bine înapoi la account.js. Să facem niște prelucrări de date când PHP ne întoarce ceva. Plasați acest cod sub var createReq și deasupra evenimentului nostru de clic:
createReq.onload = function () if (this.responseText == "Insert a eșuat" || this.responseText == "Acest nume de utilizator sau e-mail există deja") win.remove (overlay); alert (this.responseText); altceva var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', mesaj: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ("clic", funcția (e) win.tabGroup.setActiveTab (0);); ; Deci, atunci când PHP returnează ceva, dacă "this.responseText" este egal cu "Insert failed" sau "Acest nume de utilizator sau e-mail există deja", eliminați fereastra suprapusă (pentru a reintroduce informațiile și a le trimite) .responseText“.
După înregistrarea cu succes, anunță-le cu "Vă mulțumim pentru înregistrare. Acum vă puteți conecta" (definită în fișierul post_register.php). Adăugăm, de asemenea, un ascultător al evenimentului la butonul OK, astfel încât atunci când facem clic pe el, ne duce automat la ecranul de conectare.
În cazul în care alerta înapoi este un mesaj defect despre mysql_connect și / sau acces refuzat, atunci trebuie să verificați setările de conectare mysql în PHP.
În partea a doua a acestei serii, am adăugat în ferestrele cu file cu care puteți comuta între ele. Apoi am creat o nouă formă în care un utilizator poate introduce datele și le poate trimite. La trimitere am făcut o validare a formularului și apoi PHP a întors un mesaj bazat pe dacă datele erau în uz și dacă nu, l-am inserat cu succes. Sper că v-ați bucurat să citiți acest tutorial mini serie la fel de mult cum mi-a plăcut scrisul!
