Добро пожаловать во вторую часть нашей серии из трех статей по аутентификации пользователей с помощью Titanium Mobile. Titanium — это кросс-компилятор с открытым исходным кодом, который позволяет вам писать приложения для iPhone и Android (скоро тоже будет Blackberry!) С использованием Javascript. Нет Objective-C требуется! Мы будем использовать PHP в качестве кода на стороне сервера, и моя база данных будет MySQL. В этом примере я использую MAMP для локальной разработки. Я настоятельно рекомендую вам пройти первую часть этой серии, прежде чем продолжить, если вы еще этого не сделали. Однако вы также можете загрузить исходный код из части 1, создать таблицу базы данных и самостоятельно настроить соединения с базой данных PHP, прежде чем переходить к этому учебному пособию, если хотите.
конспект
В первой части мы настроили базу данных для нашего приложения и добавили пользователя. Затем мы создали интерфейс входа в систему, создав группу вкладок, вкладку и окно. Затем мы дали нашей кнопке входа некоторые действия. Наш PHP-файл запрашивал нашу базу данных, и после успешного входа в систему он возвращал наше имя и адрес электронной почты. Если аутентификация при входе в систему не удалась, мы вернули строку, просто указав неверное имя пользователя и / или пароль. Во второй части мы создадим новую вкладку на главном экране, которая позволит пользователю создать новую учетную запись и затем войти в систему.
Шаг 1. Создание окна и вкладки учетной записи
Откройте app.js и создайте окно учетной записи и вкладку под нашим сценарием вкладки входа. Также обратите внимание, что я удалил свойство tabBarHidden в окне входа в систему, которое мы делали в части 1. Удаление этого свойства позволяет нам видеть вкладки в нижней части телефона. Мы также добавили учетную запись Tab во вкладку Group.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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»,
window:login
});
var account = Titanium.UI.createWindow({
title:’New Account’,
url:’main_windows/account.js’
});
var accountTab = Titanium.UI.createTab({
title:’New Account’,
window:account
});
tabGroup.addTab(loginTab);
tabGroup.addTab(accountTab);
tabGroup.open();
|
Свойство URL в учетной записи var указывает компилятору использовать account.js в качестве нашего окна. Если вы пропустите эту часть, Titanium выдаст ужасную красную ошибку в эмуляторе. После успешной компиляции ваш экран должен выглядеть следующим образом:
Традиционно на панели вкладок внизу есть значки. Ну, с Titanium это тоже супер просто! Просто используйте свойство icon на каждой вкладке. Например:
|
1
2
3
4
5
|
var accountTab = Titanium.UI.createTab({
title:’New Account’,
icon:’images/account_icon.png’,
window:account
});
|
Шаг 2: Создайте account.js
Создайте новый файл и назовите его account.js и сохраните его в папке Resources / main_windows. Это то же самое место, где мы сохранили наш файл login.js в первой части.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
var win = Titanium.UI.currentWindow;
/*
* Interface
*/
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,
left:10,
width:300,
height:40,
hintText:’Username’,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
scrollView.add(username);
var password1 = 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
});
scrollView.add(password1);
var password2 = Titanium.UI.createTextField({
color:’#336699′,
top: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′,
top: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(names);
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({
title:’Create Account’,
top:260,
width:130,
height:35,
borderRadius:1,
font:{fontFamily:’Arial’,fontWeight:’bold’,fontSize:14}
});
scrollView.add(createBtn);
|
Хорошо, этот элемент кода, который выглядит неприлично, действительно очень легко понять, но он так много для нас делает. Просто взглянув на наши имена переменных, довольно легко понять, что здесь происходит. Мы создали 5 полей:
- имя пользователя
- Password1
- password2
- имя
- Адрес электронной почты
Мы также сделали нашу кнопку «создать учетную запись».
Вы также заметите переменную вверху, называемую scrollView. Добавление объектов в представление с прокруткой позволяет прокручивать представление, поэтому, когда клавиатура перемещается вверх, она не перекрывает наши текстовые поля.
Идите вперед и скомпилируйте. После успешной компиляции ваш экран должен выглядеть следующим образом после перехода на вкладку учетной записи. Кнопка создания учетной записи еще ничего не делает, но поэкспериментируйте с выбором текстовых полей и посмотрите, как работает прокрутка.
Шаг 3: Добавление события Click к нашей кнопке
Теперь нам нужно создать прослушиватель событий на нашей кнопке, поэтому, когда они нажимают «создать учетную запись», она отправляет данные, а также некоторую проверку.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
var testresults;
function checkemail(emailAddress)
{
var str = emailAddress;
var filter = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (filter.test(str))
{
testresults = true;
}
else
{
testresults = false;
}
return (testresults);
};
var createReq = Titanium.Network.createHTTPClient();
createReq.onload = function()
{
if (this.responseText == «Insert failed» || this.responseText == «That username or email already exists»)
{
createBtn.enabled = true;
createBtn.opacity = 1;
alert(this.responseText);
}
else
{
var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Alert’,
message: this.responseText,
buttonNames: [‘OK’]
});
alertDialog.show();
alertDialog.addEventListener(‘click’,function(e)
{
win.tabGroup.setActiveTab(0);
});
}
};
createBtn.addEventListener(‘click’,function(e)
{
if (username.value != » && password1.value != » && password2.value != » && names.value != » && email.value != »)
{
if (password1.value != password2.value)
{
alert(«Your passwords do not match»);
}
else
{
if (!checkemail(email.value))
{
alert(«Please enter a valid email»);
}
else
{
alert(«Everything looks good so send the data»);
}
}
}
else
{
alert(«All fields are required»);
}
});
|
Начиная сверху, метод checkEmail () — это простая функция, которая использует регулярное выражение для проверки правильности формата электронного письма, введенного пользователем. Мы создали новый HTTPClient, который будет использоваться для отправки наших данных в наш файл PHP.
В событии click мы сначала проверяем, не заполнены ли какие-либо поля. Если они есть, предупредите их, говоря: «Все поля обязательны для заполнения». Наша следующая проверка — увидеть, совпадают ли два поля пароля. Если это не так, предупредите их, говоря: «Ваши пароли не совпадают». Наша последняя проверка заключается в проверке правильности адреса электронной почты. Если это не так, предупредите их, сказав: «Пожалуйста, введите действительный адрес электронной почты».
Как только форма проверена, она выдаст предупреждение «Все выглядит хорошо, поэтому отправьте данные». Идите вперед, скомпилируйте и протестируйте отправку формы без значений, несоответствующих паролей и неверного адреса электронной почты. После отправки действительной формы вы увидите предупреждение ниже:
Шаг 4: На самом деле отправить некоторые данные
Затем удалите строку «Все выглядит хорошо, поэтому отправьте данные». Нам нужно заменить это методами open () и send ().
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
createBtn.addEventListener(‘click’,function(e)
{
if (username.value != » && password1.value != » && password2.value != » && names.value != » && email.value != »)
{
if (password1.value != password2.value)
{
alert(«Your passwords do not match»);
}
else
{
if (!checkemail(email.value))
{
alert(«Please enter a valid email»);
}
else
{
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(password1.value),
names: names.value,
email: email.value
};
createReq.send(params);
}
}
}
else
{
alert(«All fields are required»);
}
});
|
Таким образом, заменяя эту строку, мы отключаем нашу кнопку «создать учетную запись» и устанавливаем непрозрачность 30%. Затем мы берем созданный нами HTTPClient и вызываем для него метод open (). Он указывает на файл PHP, который мы сделаем на следующем шаге. Затем мы создаем объект params, который будет содержать все данные формы. Обратите внимание, что я запускаю шифрование MD5 в поле пароля. Последний шаг — вызвать метод send () и передать его нашему объекту params.
Шаг 5: Создание нашего регистрационного PHP-файла
Этот файл будет файлом PHP, с которым наше приложение общается при нажатии кнопки «создать учетную запись». Имя должно отражать имя в нашем методе createReq.open () на предыдущем шаге. Я назвал мой post_register.php. Замените мои настройки mysql_connect и mysql_select_db настройками подключения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<?php
$con = mysql_connect(‘localhost’,’root’,’root’);
if (!$con)
{
echo «Failed to make connection.»;
exit;
}
$db = mysql_select_db(‘test’);
if (!$db)
{
echo «Failed to select db.»;
exit;
}
$username = $_POST[‘username’];
$password = $_POST[‘password’];
$names = $_POST[‘names’];
$email = $_POST[’email’];
$sql = «SELECT username,email FROM users WHERE username = ‘» .
$query = mysql_query($sql);
if (mysql_num_rows($query) > 0)
{
echo «That username or email already exists»;
}
else
{
$insert = «INSERT INTO users (username,password,name,email) VALUES (‘» . $username . «‘,'» . $password . «‘,'» . $names . «‘,'» . $email . «‘)»;
$query = mysql_query($insert);
if ($query)
{
echo «Thanks for registering. You may now login.»;
}
else
{
echo «Insert failed»;
}
}
?>
|
Итак, здесь мы подключаемся к нашей базе данных и выбираем базу данных с именем «test» (это имя будет меняться в зависимости от имени вашей базы данных, очевидно). Вы можете видеть, что наши переменные $ _POST отражают имена, которые мы установили в объекте params на нашем последнем шаге. Эта часть имеет решающее значение. Затем мы видим, существует ли уже введенное имя пользователя или адрес электронной почты. Если это не так, вставьте данные в базу данных. Ладно, пока не компилируй! Мы сделаем следующий шаг, обещаю.
Шаг 6: Получение данных в account.js
Хорошо, вернемся к account.js. Давайте сделаем некоторую обработку данных, когда наш PHP что-то возвращает. Поместите этот код в var createReq и выше нашего события click:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
createReq.onload = function()
{
if (this.responseText == «Insert failed» || this.responseText == «That username or email already exists»)
{
win.remove(overlay);
alert(this.responseText);
}
else
{
var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Alert’,
message: this.responseText,
buttonNames: [‘OK’]
});
alertDialog.show();
alertDialog.addEventListener(‘click’,function(e)
{
win.tabGroup.setActiveTab(0);
});
}
};
|
Поэтому, когда PHP возвращает что-то, если this.responseText равен «Вставить не удалось» ИЛИ «Имя пользователя или адрес электронной почты уже существует», удалите оверлейное окно (чтобы они могли повторно ввести информацию и отправить) и предупредите их с помощью этого .responseText.
После успешной регистрации предупредите их: «Спасибо за регистрацию. Теперь вы можете войти» (определено в нашем файле post_register.php). Мы также добавляем прослушиватель событий к кнопке ОК, поэтому при нажатии на нее она автоматически выводит нас на экран входа в систему.
Если возвращаемое предупреждение является искаженным сообщением о mysql_connect и / или отказе в доступе, то вам нужно проверить настройки подключения mysql в PHP.
Вывод
Во второй части этой серии мы добавили окна с вкладками, между которыми вы можете переключаться. Затем мы создали новую форму, в которую пользователь может вводить данные и отправлять их. После отправки мы выполнили некоторую проверку формы и затем заставили наш PHP вернуть сообщение, основанное на том, использовались ли данные, и, если нет, мы успешно вставили его. Я надеюсь, что вам понравилось читать этот урок мини-сериала так же, как мне понравилось писать!