===== Эксперимент 60. Веб-страница и веб-форма ===== В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб-приложениях такого не происходит. Для удобства пользователя предусмотрены веб-формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму. Ранее мы уже выводили пользователю в браузер различные строки. Это были просто строки обычного текста, полноценной веб-страницей назвать их нельзя. Чтобы создавать полноценные веб-страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое. Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб-страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить число прямо в адресной строке. Если у тебя есть желание, то можно изучить HTML по самоучителям, например вот этим * [[http://htmlbook.ru/samhtml]] * [[https://msiter.ru/tutorials/html-nachalnogo-urovnya]] ==== Схема эксперимента ==== Схема не изменилась по сравнению с прошлым экспериментом {{ :products:esp-iot:exp31_mon.png?direct&600 |}} //Рисунок 1. Монтажная схема эксперимента// ==== Программный код эксперимента ==== Сначала создадим файл веб страницы ''page.html''. Мы могли бы загрузить файл в память контроллера, но так как он достаточно короткий мы просто добавим его содержимое в основную программу.

Input led duty between 0 and 1023

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

...

с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега
:
Форма имеет атрибут ''action'' с адресом, куда отправлять данные. Текстовое поле ввода создается тегом . Атрибут type="number" означает тип поля, в данном случае это число. Атрибут name="duty" устанавливает имя поля, а атрибут value="512" устанавливает значение поля по умолчанию. Кнопка отправки формы создаются также тегом input, но с типом type="submit". Теперь код программы: #include #include #define WIFI_NAME "WiFi_Name" #define WIFI_PASSWORD "WiFi_Password" #define PIN_LED 13 ESP8266WebServer server(80); void indexPage() { if (server.hasArg("duty")) analogWrite(PIN_LED, server.arg("duty").toInt()); String page = ""; page += ""; page += ""; page += ""; page += ""; page += "

Input led duty between 0 and 1023

"; page += R"(
)"; page += R"()"; page += R"()"; page += "
"; page += ""; page += ""; server.send(200, "text/html", page); } void setup() { Serial.begin(9600); Serial.println(); pinMode(PIN_LED, OUTPUT); analogWriteRange(1024); analogWrite(PIN_LED, 0); Serial.print("Connecting to WiFi"); WiFi.mode(WIFI_STA); WiFi.begin(WIFI_NAME, WIFI_PASSWORD); while (WiFi.status() != WL_CONNECTED) { Serial.print("."); delay(500); } Serial.println(); Serial.println("WiFi connected"); Serial.print("IP address: "); Serial.println(WiFi.localIP()); server.on("/", indexPage); server.begin(); } void loop() { server.handleClient(); } Первым делом в коде программы нужно заменить ''WiFi_Name'' на имя нужной сети, а ''WiFi_Password'' на пароль от нее. Главным отличием этой программы от предыдущего эксперимента является то, что мы теперь отправляем целиком веб-страницу записанную в переменную ''page''. server.send(200, "text/html", page); Таким образом при обращении пользователя к нашему мини веб-серверу содержимое веб-страницы в виде html-разметки отправляется ему в браузер, который преобразует html-разметку в веб-страницу. {{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}} На скриншоте видно IP адрес, который получил микроконтроллер во время эксперимента у нас в лаборатории. В твоем случае это будет другой IP адрес. После установки соединение с сетью микроконтроллер выводит его в терминал. Именно по нему и нужно обращаться. Теперь мы видим веб-страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и в нем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную. Таким образом мы научились создавать простейшие веб-страницы с формой для отправки данных на сервер.