Эксперимент 60. Веб-страница и веб-форма

В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб-приложениях такого не происходит. Для удобства пользователя предусмотрены веб-формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму.

Ранее мы уже выводили пользователю в браузер различные строки. Это были просто строки обычного текста, полноценной веб-страницей назвать их нельзя. Чтобы создавать полноценные веб-страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое.

Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб-страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить число прямо в адресной строке.

Если у тебя есть желание, то можно изучить HTML по самоучителям, например вот этим

Схема эксперимента

Схема не изменилась по сравнению с прошлым экспериментом Рисунок 1. Монтажная схема эксперимента

Программный код эксперимента

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

page.html
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     </head>
  5.     <body>
  6.         <h2>Input led duty between 0 and 1023</h2>
  7.         <form action="/">
  8.             <input type="number" name="duty" min="0" max="1023" value="512">
  9.             <input type="submit" value="Send">
  10.         </form>
  11.     </body>
  12. </html>

Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>…</html>. Далее веб страница делится на заголовок <head>…</head> и тело страницы <body>…</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.

Внутри тела страницы мы создаем заголовок второго уровня <h2>…</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега <form>: 

  1.         <form action="/">
  2.             <input type="number" name="duty" min="0" max="1023" value="512">
  3.             <input type="submit" value="Send">
  4.         </form>

Форма имеет атрибут action с адресом, куда отправлять данные.

Текстовое поле ввода создается тегом <input>. Атрибут type=«number» означает тип поля, в данном случае это число. Атрибут name=«duty» устанавливает имя поля, а атрибут value=«512» устанавливает значение поля по умолчанию.

Кнопка отправки формы создаются также тегом input, но с типом type=«submit».

Теперь код программы:

Exp60.ino
  1. #include <ESP8266WiFi.h>
  2. #include <ESP8266WebServer.h>
  3.  
  4. #define WIFI_NAME     "WiFi_Name"
  5. #define WIFI_PASSWORD "WiFi_Password"
  6. #define PIN_LED 13 
  7.  
  8. ESP8266WebServer server(80);
  9.  
  10. void indexPage() {
  11.   if (server.hasArg("duty")) analogWrite(PIN_LED, server.arg("duty").toInt());
  12.  
  13.   String page = "<!DOCTYPE html>";
  14.   page += "<html>";
  15.   page += "<head>";
  16.   page += "</head>";
  17.   page += "<body>";
  18.   page += "<h2>Input led duty between 0 and 1023</h2>";
  19.   page += R"(<form action="/">)";
  20.   page += R"(<input type="number" name="duty" min="0" max="1023" value="512">)";
  21.   page += R"(<input type="submit" value="Send">)";
  22.   page += "</form>";
  23.   page += "</body>";
  24.   page += "</html>";
  25.  
  26.   server.send(200, "text/html", page); 
  27. }
  28.  
  29. void setup() {
  30.   Serial.begin(9600);
  31.   Serial.println();
  32.   pinMode(PIN_LED, OUTPUT);
  33.   analogWriteRange(1024);
  34.   analogWrite(PIN_LED, 0);
  35.  
  36.   Serial.print("Connecting to WiFi"); 
  37.   WiFi.mode(WIFI_STA);                                         
  38.   WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  39.   while (WiFi.status() != WL_CONNECTED) {
  40.     Serial.print(".");
  41.     delay(500);
  42.   }
  43.   Serial.println();
  44.   Serial.println("WiFi connected");
  45.   Serial.print("IP address: ");
  46.   Serial.println(WiFi.localIP());
  47.  
  48.   server.on("/", indexPage);
  49.   server.begin(); 
  50. }
  51. void loop() {
  52.   server.handleClient(); 
  53. }

Первым делом в коде программы нужно заменить WiFi_Name на имя нужной сети, а WiFi_Password на пароль от нее.

Главным отличием этой программы от предыдущего эксперимента является то, что мы теперь отправляем целиком веб-страницу записанную в переменную page. 

  1.   server.send(200, "text/html", page);

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

На скриншоте видно IP адрес, который получил микроконтроллер во время эксперимента у нас в лаборатории. В твоем случае это будет другой IP адрес. После установки соединение с сетью микроконтроллер выводит его в терминал. Именно по нему и нужно обращаться.

Теперь мы видим веб-страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и в нем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную.

Таким образом мы научились создавать простейшие веб-страницы с формой для отправки данных на сервер.