Добро пожаловать в четвертый и последний выпуск нашей серии, демонстрирующий создание приложения для заказа пиццы с помощью Titanium Mobile. В этом уроке мы будем создавать обработку заказов клиентов и отправлять результаты по электронной почте шеф-повару пиццы!
Шаг 1: Проверка на стороне клиента
Прежде чем мы вызовем наш PHP-файл, мы хотим немного проверить форму. Мы просто хотим проверить, являются ли поля пустыми, и, если они есть, предупредить пользователя, чтобы заполнить их.
Откройте файл details.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
|
//— Submit order.
order.addEventListener(‘click’,function() {
if (names.value == » || address1.value == » || address2.value == »)
{
alert(‘All fields are required’);
}
else
{
//— Disable fields and buttons before making our HTTP request
names.enabled = false;
address1.enabled = false;
address2.enabled = false;
order.enabled = false;
cancel.enabled = false;
//— Change this URL to where ever yours exists
orderReq.open(‘POST’,’http://yourserver.com/submit_order.php’);
var params = {
names: names.value,
address1: address1.value,
address2: address2.value,
crust: win.crust,
toppings: win.toppings
};
orderReq.send(params);
}
});
|
В предыдущем уроке мы создали файл details.js в который нужно поместить приведенный выше код. Мы определили переменную openReq в верхней части скрипта в последнем уроке, и эта переменная будет использоваться для связи между кодом на стороне клиента и файлом PHP на стороне сервера.
Если все поля заполнены, мы отключим все текстовые поля, чтобы пользователь не мог изменить их после отправки. Затем мы вызываем метод open() для нашей переменной orderReq . Это настроит файл, который мы собираемся открыть. Мы также создаем новый объект под названием params . Мы даем ему некоторые ключи и значения, к которым мы будем обращаться в скрипте PHP. Наконец, мы вызываем метод send() .
Важно отметить, что если бы этот сценарий был предназначен для работающего приложения, нам нужно было бы выполнить значительную проверку на стороне сервера в дополнение к проверке на стороне клиента, предоставленной выше. Мы пропустим этот шаг в этом руководстве и вместо этого сосредоточимся только на создании мобильного кода.
Шаг 2: Обработка заказа
Создайте новый файл с именем submit_order.php и вставьте следующее:
|
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
|
<?php
//— POST are variables from details.js
$names = $_POST[‘names’];
$address1 = $_POST[‘address1’];
$address2 = $_POST[‘address2’];
$crust = $_POST[‘crust’];
//— clean up the javascript array
$toppings = str_replace(‘»‘,»,substr(substr(stripslashes($_POST[‘toppings’]),1),0,-1));
$toppings = explode(«,\n», $toppings);
//— Where the order will be sent
$to = «yourEmail@yourserver.com»;
$subject = «Pizza Order!»;
$message = «A new order has been submitted.<br/>»;
$message .= $names<br/>»;
$message .= $address1 .
$message .= $address2 .
$message .= $crust .
$message .= «<ul>»;
if (strlen($toppings[0]) == 1)
{
$message .= «<li>Plain (cheese pizza)</li>»;
}
else
{
for ($i = 0; $i < count($toppings); $i++)
{
$message .= «<li>» .
}
}
$message .= «</ul>»;
//— The headers will let us send HTML code as an email
$headers = «From: noreply@thepizzaplace.com\r\n»;
$headers .= «MIME-Version: 1.0\r\n»;
$headers .= «Content-Type: text/html; charset=ISO-8859-1\r\n»;
//— if mail gets sent, return true, else return false.
if (mail($to,$subject,$message,$headers))
{
$response = array(‘mail’ => true);
}
else
{
$response = array(‘mail’ => false);
}
echo json_encode($response);
?>
|
Начиная сверху, мы помещаем наши переменные из объекта param мы создали в detais.js . Затем мы должны преобразовать массив Javascript в массив PHP. Массив Javascript был немного хитрым из-за разрывов строк, которые мы вставили в код (если вы, ребята, знаете лучший метод, опубликуйте его в комментариях!). Метод, который я придумал, был несколько чист и прост.
В следующей части мы выведем, как выглядит сообщение. Переменная $to — это то место, куда вы должны вставить адрес электронной почты, на который вы хотите отправить заказ. Затем мы проверяем длину начинки, чтобы определить, была ли это просто пицца с сыром или заказчик указал специальные начинки. Если у него действительно есть начинки, мы создадим список HTML для отображения начинки.
Далее мы устанавливаем заголовки. Это позволит электронной почте форматироваться в формате HTML при ее получении. Затем мы вызываем метод PHP mail() . Он имеет следующий формат: mail($to, $subject, $message, $headers) . В коде мы проверяем, будет ли отправлено письмо, установите для $response значение true, если это так, или false, если это не так. Наконец, json_encode($response) позволит файлу details.js прочитать объект обратно. Не забудьте загрузить этот файл на свой сервер!
Шаг 3: Обработка события onload
Давайте вернемся к details.js . Под нашим событием click для кнопки order нам нужно создать новое событие onload и пока мы здесь, давайте добавим наше событие onerror .
|
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
|
//— onLoad method for our http request
orderReq.onload = function()
{
var json = this.responseText;
var response = JSON.parse(json);
//— Mail was sent
if (response.mail == true)
{
var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Success’,
message: ‘Your order has been submitted (check the email you used in your submit_order.php file)’,
buttonNames: [‘OK’]
});
alertDialog.show();
alertDialog.addEventListener(‘click’,function(e)
{
Ti.App.fireEvent(‘resetApp’);
});
}
else
{
//— Mail failed
alert(«PHP failed to send the order to the email provided in submit_order.php. Are you sure you have a mail client on your server?»);
names.enabled = true;
address1.enabled = true;
address2.enabled = true;
order.enabled = true;
cancel.enabled = true;
}
};
//— Network error
orderReq.onerror = function(event)
{
alert(‘Network error: ‘ + JSON.stringify(event));
names.enabled = true;
address1.enabled = true;
address2.enabled = true;
order.enabled = true;
cancel.enabled = true;
};
|
Мы возвращаемся к нашему orderReq var и добавляем событие onload и onerror . Мы создаем новую this.responseText именем json и устанавливаем ее равной this.responseText . Это содержит данные, отправленные обратно из нашего файла PHP. Затем мы должны проанализировать строку json, вызвав JSON.parse(json) . Теперь мы можем отправить текст, если response.mail имеет значение true, что означает, что письмо было успешно отправлено. Если все прошло успешно, предупредите пользователя, что заказ отправлен. На этот раз мы хотим прослушать событие нажатия на кнопку «ОК», поэтому мы делаем предупреждение немного иначе, чем мы его использовали. Мы слушаем событие click и по щелчку resetApp новое пользовательское событие resetApp . Мы рассмотрим это на следующем шаге.
Мы надеемся, что onerror событие об onerror сообщит вам, если что-то пойдет не так. Если onload вернул false, скорее всего, ваш сервер не поддерживает mail() . Еще одна хорошая возможность, у вас есть неправильное написание. Попробуйте получить доступ к сценарию прямо в веб-браузере и посмотрите, нет ли в нем синтаксических ошибок.
Идите и попробуйте сейчас. Отправить заказ. Надеюсь, вы увидите нечто похожее на экран ниже:
Если вы получили сообщение об успехе, перейдите и проверьте адрес электронной почты, который вы указали в сценарии PHP. Вот как выглядело мое, проходящее через Gmail:
Шаг 4. Обработка события resetApp
Давайте снова main.js файл main.js Мы собираемся добавить наше окончательное пользовательское событие:
|
1
2
3
4
5
6
|
//— Have our app listen for our custom events
Ti.App.addEventListener(‘toppings’,openToppings);
Ti.App.addEventListener(‘cancelToppings’,openCrust);
Ti.App.addEventListener(‘details’,openDetails);
Ti.App.addEventListener(‘cancelDetails’,openToppings);
Ti.App.addEventListener(‘resetApp’,resetApp);
|
Теперь для обработки пользовательского события нам нужно создать новый метод с именем resetApp() .
|
1
2
3
4
5
6
|
//— This gets called after an order is submitted.
function resetApp()
{
details.close();
openCrust({});
}
|
После успешной отправки заказа приложение будет сброшено, и вы вернетесь на экран «Корки».
Вывод
Мы использовали наш orderReq var для обработки PHP-скрипта. Мы отправили некоторые переменные в PHP и проанализировали их, попытались отправить электронное письмо и обработали ответ скрипта. Надеюсь, вы все сделали это без проблем! Надеюсь, вам понравился этот сериал так же, как и мне. Это было забавное приложение для создания, и мы надеемся, что вы сможете использовать то, что вы узнали, и применить принципы к своим собственным приложениям!