Статьи из цикла

Напишем приложение сложение двух чисел на HTML, где сложение двух чисел происходит на стороне сервера.

Постановка задачи

В статье показан пример приложения на HTML + JavaScript по сложению двух чисел. И там сложение двух чисел происходило в самом приложении, что логично. Серверной части там нет.

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

А в этом приложении мы из полей ввода считаем два числа и отправим их на сервер, который сложит два числа, отправит нам ответ, и мы этот ответ отобразим в текстовом поле. То есть у нас клиентская и серверная часть разделены между собой.

На сервер поступает HTTP запрос с двумя переменными a и b. Переменные a и b передаются через POST параметры.

Серверная часть

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

В статье приведен пример серверной части на Java.

В статье приведен пример серверной части на PHP.

В статье буду использовать PHP скрипт, который я расположил по адресу https://harrix.dev/blog/2017/add-2-num-php-post/demo/ (если перейти по ссылке без параметров, то должно выдаваться error).

Создание болванки

Создаем текстовой документ под именем index.html.

Закинем в него простую болванку HTML5 документа:

<!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> разместим такую форму:

<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:

<input type="submit" value="Сложить 2 два числа">

У нас сложение двух чисел будет происходить не на стороне клиента, а на стороне сервера. Поэтому форме нужно указать адрес сервера, куда мы отправим запрос. Обратите внимание на то, что параметр method принимает значение post:

<form action="https://harrix.dev/blog/2017/add-2-num-php-post/demo/" method="post">

Общий документ будет иметь вид:

<!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="https://harrix.dev/blog/2017/add-2-num-php-post/demo/" method="post">
    <input name="a" type="text" value="2"><br>
    <input name="b" type="text" value="3"><br>
    <input type="submit" value="Сложить 2 два числа">
  </form>
</body>

</html>

Если мы сохраним документ и его откроем, то получим следующее:

Получившаяся HTML страница

Если нажмем на кнопку, то мы перейдем на страницу сервера, где будет отображен результат работы сервера:

Результат выполнения программы<ul><li>HTML5 logo and wordmark.svg by W3C / (2019-02-24)</li></ul>