Создание веб-приложения для IoT. Урок 3.

В предыдущем уроке мы создали БД для будущего веб-приложения. Сегодня мы приступим к разработке интерфейса пользователя.

Интерфейс приложения — это HTML страница, которую мы видим в окне своего браузера, когда открываем в нём приложение. Эту страницу формирует сервер в ответ на наш запрос. Когда мы пишем в адресную строку браузера адрес приложения и нажимаем «Перейти» — браузер автоматически формирует запрос на сервер, к которому прилинкован этот адрес.

Когда мы просто переходим по адресу приложения мы попадаем на его стартовую страницу. По умолчанию сервер возвращает страницу «index.html» — которая является начальной страницей сайта и находится в его корневой директории.

Вместо файла «index.html» может быть «index.php» — это скрипт на языке PHP, который динамически формирует стартовую страницу.

Сервер обращается к стартовому скрипту всегда, кроме тех случаев, когда в запросе явно указан файл, который должен быть получен, или скрипт, который необходимо выполнить.

В нашем приложении стартовым будет скрипт «index.php», поскольку у нас  не просто статическая страница, а именно приложение.

Именно разработкой скрипта «index.php» мы сейчас и займёмся.

index.php

Заходим в «Файловый менеджер» через меню хостинга.

Переходим к папке «z925997t.beget.tech» (название будет совпадать с выданным доменным именем). Эта папка создана автоматически. В ней находится «public_html» — корневая папка вашего будущего приложения. К ней прилинковано доменное имя, которое Вам выдал хостинг.

Если набирать в браузере z925997t.beget.tech, браузер отправит запрос на сервер к этой папке. Там и должен лежать стартовый файл приложения «index.php».

Если Вам не нравится бесплатное доменное имя, можно купить домен с красивым именем, но это уже деньги…

Если Вы решили хранить приложение не на удалённом хостинге, а на своём сервере, тогда Ваше приложение будет доступно по его IP-адресу.

Итак, в корневой папке нашего приложения находится файл «index.php». Открываем его, удаляем всё, что там есть и копируем следующий код:

<?php

//—————————Настройки подключения к БД————————
$db_host = ‘localhost’;
$db_user = ‘z925997t_db’; //имя пользователя совпадает с именем БД
$db_password = ‘password’; //пароль, указанный при создании БД
$database = ‘z925997t_db’; //имя БД, которое было указано при создании
mysql_connect($db_host, $db_user, $db_password);
mysql_select_db($database) or die(«Cannot connect DB»);

//—————————————————————————————-
$id = 1;

//——————Получаем из БД все данные об устройстве——————-
$query = «SELECT * FROM DEVICE_TABLE WHERE DEVICE_ID = ‘$id'»;
$result = mysql_query($query);
if(mysql_num_rows($result) == 1)
{ //Если в БД есть данные о имени для этого устройства
$Arr = mysql_fetch_array($result);
$device_name = $Arr[‘NAME’];
} else { //Если в БД нет данных о имени для этого устройства
$device_name = ‘?’;
}

$query = «SELECT * FROM TEMPERATURE_TABLE WHERE DEVICE_ID = ‘$id'»;
$result = mysql_query($query);
if(mysql_num_rows($result) == 1)
{ //Если в БД есть данные о температуре для этого устройства
$Arr = mysql_fetch_array($result);
$temperature = $Arr[‘TEMPERATURE’];
$temperature_dt = $Arr[‘DATE_TIME’];
} else { //Если в БД нет данных о температуре для этого устройства
$temperature = ‘?’;
$temperature_dt = ‘?’;
}

$query = «SELECT * FROM OUT_STATE_TABLE WHERE DEVICE_ID = ‘1’»;
$result = mysql_query($query);
if(mysql_num_rows($result) == 1)
{ //Если в БД есть данные о реле для этого устройства
$Arr = mysql_fetch_array($result);
$out_state = $Arr[‘OUT_STATE’];
$out_state_dt = $Arr[‘DATE_TIME’];
} else { //Если в БД нет данных о реле для этого устройства
$out_state = ‘?’;
$out_state_dt = ‘?’;
}
//—————————————————————————————-

//——Проверяем данные, полученные от пользователя———————

if($_POST[‘button_on’]){
$date_today = date(«Y-m-d H:i:s»);
$query = «UPDATE COMMAND_TABLE SET COMMAND=’1′, DATE_TIME=’$date_today’ WHERE DEVICE_ID = ‘$id'»;
$result = mysql_query($query);
if(mysql_affected_rows() != 1) //Если не смогли обновить — значит в таблице просто нет данных о команде для этого устройства
{ //вставляем в таблицу строчку с данными о команде для устройства
$query = «INSERT COMMAND_TABLE SET DEVICE_ID=’$id’, COMMAND=’1′, DATE_TIME=’$date_today'»;
$result = mysql_query($query);
}
}

if($_POST[‘button_off’]){
$date_today = date(«Y-m-d H:i:s»);
$query = «UPDATE COMMAND_TABLE SET COMMAND=’0′, DATE_TIME=’$date_today’ WHERE DEVICE_ID = ‘$id'»;
$result = mysql_query($query);
if(mysql_affected_rows() != 1) //Если не смогли обновить — значит в таблице просто нет данных о команде для этого устройства
{ //вставляем в таблицу строчку с данными о команде для устройства
$query = «INSERT COMMAND_TABLE SET DEVICE_ID=’$id’, COMMAND=’0′, DATE_TIME=’$date_today'»;
$result = mysql_query($query);
}
}
//————————————————————————

//——-Формируем интерфейс приложения для браузера———————
echo’
<!DOCTYPE HTML>
<html>
<head><meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<title>MyApp</title>
</head>
<body>
<table>
<tr>
<td width=100px> Устройство:
</td>
<td width=40px>’.$device_name.’
</td>
</tr>
</table>

<table border=1>
<tr>
<td width=100px> Tемпература
</td>
<td width=40px>’.$temperature.’
</td>
<td width=150px>’.$temperature_dt.’
</td>
</tr>
<tr>
<td width=100px> Реле
</td>
<td width=40px>’.$out_state.’
</td>
<td width=150px> ‘.$out_state_dt.’
</td>
</tr>
</table>

<form>
<button formmethod=POST name=button_on value=1>Включить реле</button>
</form>
<form>
<button formmethod=POST name=button_off value=1>Выключить реле</button>
</form>

</body>
</html>’;
//———————————————————————-

?>

Скачать текст скрипта

В самом начале кода скрипта идут настройки подключения к БД. Подставьте туда свои данные, которые Вы использовали при создании БД.

Сохраняем скрипт.

Теперь вбиваем в браузере адрес нашего приложения «z925997t.beget.tech» и переходим.

В результате видим в окне браузера интерфейс нашего приложения. Обратите внимание, что в адресной строке браузер сам добавил к адресу «/index.php» серым шрифтом, т.к. по умолчанию запрос направляется к стартовому скрипту приложения.

Знаки «?» указывают на отсутствие данных о температуре и состоянии реле, т.к. устройство их ещё не передавало.

Разбираемся с кодом скрипта

Теперь пробежимся по коду скрипта, чтобы понять, как он работает.

В блоке «Настройки подключения к БД» задаются параметры подключения к базе данных. Затем командой «mysql_connect» подключаемся к MySQL, а командой «mysql_select_db» выбираем нашу БД (она у нас всего одна).

Далее идёт блок обращений к БД.

Вытаскиваем необходимые параметры устройства, направляя запросы к БД. Например, в запросе

«SELECT * FROM TEMPERATURE_TABLE WHERE DEVICE_ID = ‘$id'» мы обращаемся к таблице TEMPERATURE_TABLE и выбираем оттуда строчку с ID нашего устройства. В нашем случае устройство пока одно, но если их станет больше — можно будет запросить данные для каждого из них.

Затем командой «$result = mysql_query($query);» направляем этот запрос к БД. Результат будет в переменной $result.

Строчкой «mysql_num_rows($result) == 1» проверяем сколько строк вернула БД на наш запрос. Поскольку параметр DEVICE_ID уникальный, то может быть найдена только одна строка (или ни одной, если данных нет в БД).

Команда «$Arr = mysql_fetch_array($result);» превращает результат в ассоциативный массив. Из этого массива получаем интересующие нас параметры, в данном случае температуру и метку времени, и сохраняем их в переменные:

$temperature = $Arr[‘TEMPERATURE’];
$temperature_dt = $Arr[‘DATE_TIME’];

Точно так же узнаём из БД остальные данные о устройстве: имя, состояние реле.

Временно пропустим блок «Проверяем данные, полученные от пользователя» и рассмотрим его чуть позже.

Далее следует блок «Формируем интерфейс приложения для браузера». Тут скрипт формирует код в формате HTML, который будет возвращён браузеру. В этот код подставляются значения параметров устройства (имя, температура, состояние реле), полученные из БД.

Браузер превращает HTML-код в страницу интерфейса, которую видит пользователь.

Посмотрим внимательнее на HTML-код кнопок «включить реле» и «выключить реле»:

<form>
<button formmethod=POST name=button_on value=1>Включить реле</button>
</form>
<form>
<button formmethod=POST name=button_off value=0>Выключить реле</button>
</form>

Каждая из кнопок заключена в теги <form></form> — это форма. В нашем примере на форме только кнопка, но в общем случае там могут быть другие элементы для ввода значений. Всё что есть на форме передаётся на сервер при нажатии на кнопку. В нашем случае — это только сама кнопка.

При нажатии на кнопку браузер сформирует следующий запрос:

Заголовки запроса можно увидеть с помощью «Инструментов разработчика» (встроенные есть в Mozilla Firefox и Google Chrome). Как видно из картинки, вместе с кучей заголовков браузер передал данные формы, то есть кнопку ( а именно её атрибуты name и value): «button_on: 1».  При нажатии на кнопку «Выключить реле» браузер передаст «button_off: 0».

Данный запрос имеет тип POST (указан в атрибуте кнопки formmethod=POST). То же самое можно было бы сделать запросом GET. Тогда все параметры были бы в URL запроса, вот так:

http://z925997t.beget.tech/index.php?button_on=1 HTTP/1.1

Запрос, содержащий данные формы, по умолчанию запускает на сервере тот скрипт, который сформировал страницу, содержащую эту форму, то есть скрипт index.php.

Данные формы, переданные запросом типа POST попадают на сервере в глобальный массив $_POST.

Теперь вернёмся к коду скрипта в блок «Проверяем данные, полученные от пользователя». Когда мы просто открываем страницу приложения, мы не передаём никаких параметров скрипту, соответственно массив $_POST пуст и данный блок пропускается.

При нажатии на кнопку «Включить реле» мы передаём параметры в массив $_POST, поэтому сработает код под IF-ом:

if($_POST[‘button_on’]){
$date_today = date(«Y-m-d H:i:s»); //получаем метку времени

//Формируем запрос на обновление данных в БД
$query = «UPDATE COMMAND_TABLE SET COMMAND=’1′, DATE_TIME=’$date_today’ WHERE DEVICE_ID = ‘$id'»;
$result = mysql_query($query);
if(mysql_affected_rows() != 1) //Если не смогли обновить — значит в таблице просто нет данных о команде для этого устройства
{ //вставляем в таблицу строчку с данными о команде для устройства
$query = «INSERT COMMAND_TABLE SET DEVICE_ID=’$id’, COMMAND=’1′, DATE_TIME=’$date_today'»;
$result = mysql_query($query);
}

Этот код обновляет команду для реле устройства в БД и ставит метку времени. При следующем обращении устройства на сервер, оно «заберёт» эту команду и выполнит.

Точно так же работает кнопка «Выключить реле», только она заносит значение «0»  в столбец COMMAND для этого устройства в БД.

Попробуйте нажимать кнопки и убедитесь, что при этом меняется соответствующее значение в БД.

Заключение

В этом уроке мы научились показывать пользователю значения параметров из БД и обрабатывать команды пользователя. На этом мы заканчиваем урок. Если у Вас возникли вопросы, задавайте их в комментариях. В следующий раз мы расскажем, как с сервером взаимодействует передающее устройство, и попробуем управлять им с помощью веб-интерфейса. Следите за обновлениями на LAZY SMART.