Share
Bienvenue dans la deuxième partie de notre série de trois articles sur l’authentification des utilisateurs avec Titanium Mobile. Titanium est un compilateur croisé open source qui vous permet d'écrire des applications pour iPhone et Android (bientôt sur le BlackBerry!) En utilisant Javascript. Aucun objectif-C requis! Nous utiliserons PHP comme code côté serveur et ma base de données sera MySQL. Pour cet exemple, j'utilise MAMP pour développer localement. Je vous recommande fortement de parcourir la première partie de cette série avant de continuer si vous ne l'avez pas déjà fait. Cependant, vous pouvez également télécharger le source à partir de la partie 1, créer la table de base de données et configurer vous-même les connexions à la base de données PHP avant de passer à ce tutoriel si vous le souhaitez..
Dans la première partie, nous avons configuré la base de données pour notre application et ajouté un utilisateur. Nous avons ensuite créé notre interface de connexion en créant un groupe d'onglets, un onglet et une fenêtre. Nous avons ensuite donné quelques actions à notre bouton de connexion. Notre fichier PHP a interrogé notre base de données et, une fois la connexion établie, il a renvoyé notre nom et notre adresse électronique. Si l'authentification de la connexion échouait, nous renvoyions une chaîne indiquant simplement un nom d'utilisateur et / ou un mot de passe non valide. Dans la partie 2, nous allons créer un nouvel onglet sur l’écran principal qui permet à un utilisateur de créer un nouveau compte puis de se connecter..
Ouvrez app.js et créez la fenêtre de compte et l'onglet sous notre script d'onglet de connexion. Notez également que j'ai supprimé la propriété tabBarHidden de la fenêtre de connexion que nous avons utilisée dans la partie 1. Supprimer cette propriété nous permet d'afficher les onglets au bas du téléphone. Nous avons également ajouté le compteTab à l'ongletGroupe.
Accentsconagua
Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var login = Titanium.UI.createWindow (titre: 'Démo d'authentification d'utilisateur', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fenêtre: login); var account = Titanium.UI.createWindow (titre: 'Nouveau compte', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (titre: 'Nouveau compte', fenêtre: compte); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open (); La propriété URL du compte var indique au compilateur d'utiliser account.js comme fenêtre. Si vous ignorez cette partie, Titanium émettra une erreur rouge laide dans l'émulateur. Après une compilation réussie, votre écran devrait ressembler à ceci:
Traditionnellement, la barre d'onglets en bas avait des icônes. Eh bien, avec Titanium, c’est très facile aussi! Utilisez simplement la propriété icon dans chaque onglet. Par exemple:
var accountTab = Titanium.UI.createTab (titre: 'Nouveau compte', icône: 'images / account_icon.png', fenêtre: compte);
Créez un nouveau fichier, nommez-le account.js et enregistrez-le dans votre dossier Resources / main_windows. C’est le même endroit où nous avons sauvegardé notre fichier login.js dans la partie 1.
var win = Titanium.UI.currentWindow; / * * Interface * / var scrollView = Titanium.UI.createScrollView (contentWidth: 'auto', contentHeight: 'auto', en haut: 0, showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false); win.add (scrollView); var nom d'utilisateur = Titanium.UI.createTextField (color: '# 336699', haut: 10, gauche: 10, width: 300, hauteur: 40, hintText: 'Username', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (nom d'utilisateur); var password1 = Titanium.UI.createTextField (color: '# 336699', haut: 60, left: 10, width: 300, height: 40, hintText: 'Password', passwordMask: true, type de clavier: Titanium.UI.KEYBOARD_DEFAULT , returnKeyType: Titanium.UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (mot_de_passe1); var password2 = Titanium.UI.createTextField (color: '# 336699', haut: 110, left: 10, width: 300, height: 40, hintText: 'Password Again', passwordMask: 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', haut: 160, left: 10, width: 300, height: 40, hintText: 'Name', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (noms); var email = Titanium.UI.createTextField (color: '# 336699', top: 210, left: 10, width: 300, height: 40, hintText: 'email', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium .UI.RETURNKEY_DEFAULT, borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED); scrollView.add (email); var createBtn = Titanium.UI.createButton (titre: 'Créer un compte', haut: 260, largeur: 130, hauteur: 35, borderRadius: 1, fonte: fontFamily: 'Arial', fontWeight: 'gras', fontSize: 14); scrollView.add (createBtn);
D'accord, ce bloc de code à la recherche est vraiment très facile à comprendre, pourtant il fait tellement pour nous. En regardant simplement nos noms de variables, il est assez facile de déchiffrer ce qui se passe ici. Nous avons créé 5 champs:
Nous avons également créé notre bouton "Créer un compte".
Vous remarquerez également la var au sommet appelée scrollView. L'ajout des objets à une vue de défilement permet de faire défiler la vue. Ainsi, lorsque le clavier glisse vers le haut, il ne chevauche pas nos champs de texte..
Allez-y et compilez. Après une compilation réussie, votre écran devrait ressembler à ceci après avoir basculé sur l’onglet Compte. Le bouton Créer un compte ne fait rien encore, mais vous pouvez jouer avec la sélection des champs de texte et voir comment fonctionne la vue de défilement.
Nous devons maintenant créer un écouteur d'événements sur notre bouton. Ainsi, lorsqu'ils cliquent sur «Créer un compte», il envoie les données ainsi qu'une validation..
résultats de test var; function checkemail (emailAddress) var str = emailAddress; var filtre = / ^ ([A-Za-z0-9 _ \ - \.]) + \ @ ([A-Za-z0-9 _ \ - \.]) + \. ([A-Za-z] 2,4) $ /; if (filter.test (str)) testresults = true; else testresults = false; return (résultats de test); ; var createReq = Titanium.Network.createHTTPClient (); createReq.onload = function () if (this.responseText == "L'insertion a échoué" || this.responseText == "Ce nom d'utilisateur ou cet email existe déjà") createBtn.enabled = true; createBtn.opacity = 1; alerte (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', message: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('clic', fonction (e) win.tabGroup.setActiveTab (0);); ; createBtn.addEventListener ('click', fonction (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Vos mots de passe ne correspondent pas"); else if (! checkemail (email.value)) alert ("Veuillez saisir un e-mail valide") else alert ("Tout semble aller, envoyez les données"); else alert ("Tous les champs sont obligatoires");); En commençant par le haut, la méthode checkEmail () est une fonction simple qui utilise une expression régulière pour vérifier si le courrier électronique saisi par l'utilisateur est au format correct. Nous avons créé un nouveau HTTPClient qui sera utilisé pour envoyer nos données dans notre fichier PHP.
Dans l'événement click, nous vérifions d'abord si des champs sont vides. Si c'est le cas, alertez-les en leur disant "Tous les champs sont obligatoires". Notre prochaine vérification consiste à vérifier si les deux champs de mot de passe sont identiques. Si ce n'est pas le cas, avertissez-les en leur disant "Vos mots de passe ne correspondent pas". Notre dernière vérification consiste à vérifier si l'adresse e-mail est valide. Si ce n'est pas le cas, avertissez-les en leur disant: "Veuillez saisir un email valide."
Une fois le formulaire validé, il alertera "Tout est beau, alors envoyez les données". Continuez, compilez et testez la soumission du formulaire sans valeur, sans mot de passe correspondant et avec un email invalide. Après avoir soumis un formulaire valide, vous verrez l'alerte ci-dessous:
Allez-y et supprimez la ligne "Tout est bon, envoyez les données". Nous devons remplacer cela par les méthodes open () et send ().
createBtn.addEventListener ('click', fonction (e) if (username.value! = "&& password1.value! =" && password2.value! = "&& names.value! =" && email.value! = ") if (password1.value! = password2.value) alert ("Vos mots de passe ne correspondent pas"); else if (! checkemail (email.value)) alert ("Veuillez saisir un e-mail valide") else createBtn.enabled = false; createBtn.opacity = 0,3; createReq.open ("POST", "http: // localhost: 8888 / post_register.php"); var params = nomutilisateur: nomutilisateur.valeur, mot de passe: Ti .Utils.md5HexDigest (password1.value), noms: names.value, email: email.value; createReq.send (params); else alert ("Tous les champs sont obligatoires");); Donc, en remplaçant cette ligne, nous désactivons notre bouton "Créer un compte" et fixons l'opacité à 30%. Nous prenons ensuite le HTTPClient que nous avons créé et appelons la méthode open () dessus. Il pointe vers un fichier PHP que nous allons créer dans la prochaine étape. Nous créons ensuite un objet params pour contenir toutes les données du formulaire. Notez que j'utilise un cryptage MD5 sur le champ du mot de passe. La dernière étape consiste à appeler la méthode send () et à lui transmettre notre objet params..
Ce fichier sera le fichier PHP auquel notre application s'adresse lorsque vous cliquez sur le bouton "Créer un compte". Le nom doit refléter le nom dans notre méthode createReq.open () à l'étape précédente. J'ai nommé le mien post_register.php. Remplacer mes paramètres mysql_connect et mysql_select_db par vos paramètres de connexion.
0) echo "Ce nom d'utilisateur ou cet email existe déjà"; else $ insert = "INSERT INTO utilisateurs (nom d'utilisateur, mot de passe, nom, email) VALEURS ('". $ nom d'utilisateur. "',". $ mot de passe. "'," ". noms de noms."', "" . $ email. "')"; $ query = mysql_query ($ insert); if ($ query) echo "Merci de votre inscription. Vous pouvez maintenant vous connecter."; else echo "L'insertion a échoué"; ?> Nous nous connectons donc ici à notre base de données et sélectionnons la base de données nommée 'test' (ce nom changera évidemment en fonction du nom de votre base de données). Vous pouvez voir que nos variables $ _POST reflètent les noms que nous avons définis dans l'objet params lors de notre dernière étape. Cette partie est cruciale. Nous voyons alors si le nom d'utilisateur ou l'adresse e-mail qu'ils ont entré existe déjà. Si ce n'est pas le cas, insérez les données dans la base de données. D'accord, ne pas compiler pour l'instant! Nous allons prochaine étape, je promets.
Bon retour à account.js. Laissons faire quelques manipulations de données pour quand notre PHP retourne quelque chose. Placez ce code sous var createReq et au-dessus de notre événement click:
createReq.onload = function () if (this.responseText == "L'insertion a échoué" || this.responseText == "Ce nom d'utilisateur ou cet email existe déjà") win.remove (superposition); alerte (this.responseText); else var alertDialog = Titanium.UI.createAlertDialog (title: 'Alert', message: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('clic', fonction (e) win.tabGroup.setActiveTab (0);); ; Ainsi, lorsque PHP renvoie quelque chose, si 'this.responseText' est égal à "L'insertion a échoué" OU "le nom d'utilisateur ou l'adresse e-mail existe déjà", supprimez la fenêtre de superposition (afin qu'ils puissent ré-entrer des informations et l'envoyer) et les alerter avec .responseText '.
Après une inscription réussie, avertissez-les avec "Merci pour votre inscription. Vous pouvez maintenant vous connecter" (défini dans notre fichier post_register.php). Nous ajoutons également un écouteur d'événement au bouton OK. Ainsi, lorsque vous cliquez dessus, cela nous amène automatiquement à l'écran de connexion..
Si l'alerte qui se présente est un message tronqué concernant mysql_connect et / ou un accès refusé, vous devez vérifier vos paramètres de connexion mysql dans PHP.
Dans la partie 2 de cette série, nous avons ajouté des fenêtres à onglets dans lesquelles vous pouvez basculer. Nous avons ensuite créé un nouveau formulaire dans lequel un utilisateur peut entrer des données et les soumettre. Lors de la soumission, nous avons procédé à une validation du formulaire, puis notre PHP a renvoyé un message indiquant si les données étaient utilisées et, dans le cas contraire, nous l'avons inséré avec succès. J'espère que vous avez apprécié la lecture de ce mini-didacticiel autant que le plaisir de l'écrire!
