Проектування додатків з використанням інтерактивного інтерфейсу
Динамичні сайти працюють з Web-додатками, що знаходяться на серверах. Щоб користувач мав змогу змінювати дані в Web-додатках, потрібен інтерактивний інтерфейс. Він реалізується з допомогою HTML-форм. Web-додаток виконує роль обробника поданого в формі запита. Через форму користувач вказує URL Web-додатка, вводить дані і натискає кнопку відправлення даних на сервер. Далі браузер передає інформацію на Web-сервер. Web-сервер з'єднується з сервером Web-додатків, котрий знаходить і виконує замовлений сценарій згідно Web-додатку. Отриманий результат сервер додатків повертає зворотно Web-серверу, котрий формує тепер Web-сторінку , що має відображатись на екрані компьютера користувача.
Нижче наведені приклади Web-сторінок і пов'язаних з ними Web-додатків. Студентам пропонується виконати приклади і розкрити їх призначення.
Приклад 9.13. Даний приклад демонструє використання інтерактивного інтерфейсу в сценарії для розрахунку значень функції Y, яка обчислює вирази:
Y= A*Sin(x*t), якщо t>t0,
Y= A+e^(x*t) при t<=t0.
В разі інтерактивного інтерфейсу початкові дані вводяться в HTML-форму Web-сторінки. РНР-код сценарію має залишатися без змін. Тому поновлювати дані, які обробляє сценарій, можна швидше і скільки завгодно разів, що вигідно користувачу. Інтерфейс користувача стає більш простим і комфортним. HTML- код даної задачі наступний:
<html>
<head>
<title> Сценарій розгалуження </title>
</head>
<body>
<form action="myif1.php" method='get'>
Введіть значення А:<input type ="text" name="A" value=""><br>
Введіть значення x:<input type ="text" name="x" value=""><br>
Введіть значення t:<input type ="text" name="t" value=""><br>
Введіть значення t0:<input type ="text" name="t0" value=""><br>
<input type=submit value="НАДІСЛАТИ"><br>
</form>
</body>
</html>.
Основою інтерфейсу є форма. Вигляд вікна браузера з інтерфейсом показано на рис. 9.14. Інтерфейс забезпечує взаємодію користувача зі сценарієм.
Рис. 9.14. Вигляд вікна браузера з HTML-формою
Інтерактивність інтерфейсу (діалог) можна підсилити з допомогою вбудованих функцій empty() і exit(), наприклад так, як показано в наступному сценарії. Функція empty() перевіряє, чи заповнено поле вводу. Функція exit() виводить текст підказки.
Лістинг php-коду сценарію до даної задачі наступний:
<?php
if (empty($A))
{
exit(“Введіть А”);
echo "<br>";
exit(“Бажаю успіху!”);
echo "<br>";
}
if ($t>$t0)
{
$y=$A*Sin($x*$t);
echo "t>t0";
echo "<br>";
echo "y=", $y;
}
else
{
$y=$A+Exp($x*$t);
echo "t<=t0";
echo "<br>";
echo "y=", $y;
}
?>.
Дія інтерфейсу полягає в тому, що користувач запускає файл Web-сторінки командою http://localhost/myif(form).html, яка спричинить появу на екрані форми звернення до сценарію myif1.php. Користувач повинен ввести в форму потрібні дані і натиснути кнопку <НАДІСЛАТИ>. Сценарій виконає обробку даних і сформує Web-сторінку з результатом обробки, котрий повертає користувачу. Вікно браузера з результатом діалогу показано на рис. 9.14.
Рис. 9.14. Фрагмент діалогу
Нижче наведено ще декілька прикладів стосовно використання інтерактивного інтерфейсу.
Приклад 9.14. За даним прикладом php-сценарій виконує процес оформлення покупки в магазині.
Звернення до сценарію ілюструє рис 9.15.
Йому відповідає наступний HTML-код, котрий формує запит до сценарію:
<html>
<body>
<form action=chek2.php method='get'>
Введіть кількість покупок:<input type =text name="kolich" value="">
<br>
Введіть ціну:<input type =text name="cena" value="">
<br>
Введіть сплачену суму:<input type =text name="uplach" value="">
<br>
<input type=submit value="Обчислити"><br>
</form>
</body>
</html>.
Рис. 9.15. Оформлення покупки
Приклад 9.15. Цей приклад демонструє задачу розрахунку суми S вкладу в банку через ряд періодів за умови, що початкова сума внеску була V, процентна ставка p, кількість періодів I. В розрахунках використовується формула складного проценту:
S=V*(1+p)^І.
Інтерфейс матиме вигляд, який наведено на рис. 9.16.
Рис. 9.16. Вікно інтерфейсу до прикладу 9.3.15
HTML-код для вирішення задачі наступний:
<html>
<HEAD>
<TITLE> Вклад </TITLE>
</HEAD>
<body>
<form action=vklad.php method='get'>
Введіть значення V:<input type ="text" name="V" value=""><br>
Введіть значення p:<input type ="text" name="p" value=""><br>
Введіть значення i:<input type ="text" name="i" value=""><br>
<input type=submit value="Надіслати"><br>
</form>
</body>
</html>.
Приклад 9.16. Даний приклад відображує моделювання операцій простого калькулятора.
Інтерфейс моделі калькулятора вибрано такий, як показано на рис. 9.17.
Рис. 9.17. Інтерфейс моделі калькулятора
Файл, що формує інтерфейс має бути наступним:
<html>
<head>
<title> Калькулятор </title>
</head>
<body>
<form action=Kalculator1.php method='get'>
Введіть значення x:<input type =text name="x" value=""><br>
Введіть значення y:<input type =text name="y" value=""><br>
<input type="radio" name="opt" value="1" >додавання<br>
<input type="radio" name="opt" value="2" >віднімання<br>
<input type="radio" name="opt" value="3" >множення<br>
<input type="radio" name="opt" value="4" >ділення<br>
<input type="radio" name="opt" value="5" >функція<br>
<input type=submit value="вичислити"><br>
</form>
</body>
</html>.
РНР-код сценарію, що моделює операції калькулятора, наступний:
<?php
if ($opt=="1")
{
echo "Виконується додавання x+y";
echo "<br>";
echo $x+$y;
echo "<br>";
}
else if ($opt=="2")
{
echo "Виконується віднімання x-y";
echo "<br>";
echo $x-$y;
echo "<br>";
exit;
}
else if ($opt=="3")
{
echo "Виконується множення x*y";
echo "<br>";
echo $x*$y;
echo "<br>";
}
else if ($opt=="4")
{
echo "Виконується ділення x/y";
echo "<br>";
echo $x/$y;
echo "<br>";
}
else if ($opt=="5")
{
echo "Обчислюється функція sin(x-y)";
echo "<br>";
echo sin($x-$y);
echo "<br>";
}
?>.