Напишем приложение сложение двух чисел на HTML, где сложение двух чисел происходит на стороне сервера.
Эта статья из цикла статей Клиент-серверные приложения.
Статья из цикла «Сложение двух чисел». Для меня минимальное освоение любой системы программирования начинается с возможности создания такой программы. Если можно написать приложение, в которой пользователь может ввести два числа, считать их, провести с ними какие-то действия, а потом вывести результат, то, значит, базовое владение имеется. И много задач именно из области программирования, алгоритмики можно будет решать, зная, как в конкретной системе программирования запрограммировать такую программу.
Содержание
Постановка задачи
В статье показан пример приложения на HTML + javaScript по сложению двух чисел. И там сложение двух чисел происходило в самом приложении, что логично. Серверной части там нет.
В статье показа пример приложения, где клиентская и серверная часть объединены в одном php скрипте.
А в этом приложении мы из полей ввода считаем два числа и отправим их на сервер, который сложит два числа, отправит нам ответ, и мы этот ответ отобразим в текстовом поле. То есть у нас клиентская и серверная часть разделены между собой.
На сервер поступает HTTP запрос с двумя переменными a и b. Переменные a и b передаются через GET параметры, то есть через адресную строку. Пример такого запроса:
http://[путь с скрипту]?a=2&b=3
Серверная часть
У вас должен быть сервер, доступный из интернета, к которому можно обращаться.
В статье приведен пример серверной части на Java.
В статье приведен пример серверной части на PHP.
В статье буду использовать PHP скрипт, который я расположил по адресу http://demo.harrix.org/demo0011 (если перейти по ссылке без параметров, то должно выдаваться error).
Пример запроса к серверу http://demo.harrix.org/demo0011?a=2&b=3 (а вот тут должно появиться число 5)
Создание болванки
Создаем текстовой документ под именем index.html.
Закинем в него простую болванку HTML5 документа:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Программа сложения двух чисел</title> </head> <body> </body> </html> |
Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет – это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.
Наполнение HTML
Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа <body></body> разместим такую форму.
1 2 3 4 |
<form> <input name="a" type="text" value="2"><br> <input name="b" type="text" value="3"><br> </form> |
Каждое поле имеет своё имя name (не id) с названием переменной a и b. Также они имеют начальное наполнение.
Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit.
1 |
<input type="submit" value="Сложить 2 два числа"> |
У нас сложение двух чисел будет происходить не на стороне клиента, а на стороне сервера. Поэтому форме нужно указать адрес сервера, куда мы отправим запрос.
1 |
<form action="http://demo.harrix.org/demo0011/" method="get"> |
Общий документ будет иметь вид:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Программа сложения двух чисел</title> </head> <body> <form action="http://demo.harrix.org/demo0011/" method="get"> <input name="a" type="text" value="2"><br> <input name="b" type="text" value="3"><br> <input type="submit" value="Сложить 2 два числа"> </form> </body> </html> |
Если мы сохраним документ и его откроем, то получим следующее:
Если нажмем на кнопку, то мы перейдем на страницу сервера, где будет отображен результат работы сервера.