Различия

Показаны различия между двумя версиями страницы.

--- products:laboratory_iot:exp60 [2020/06/18 18:28] – labuser29
+++ products:laboratory_iot:exp60 [2024/12/06 21:52] (текущий) – labuser30
@@ Строка 1: / Строка 1: @@
-===== Эксперимент 60. Веб- страница и веб- форма =====
+===== Эксперимент 60. Веб-страница и веб-форма =====
-В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб- приложениях такого не происходит. Для удобства пользователя предусмотрены веб- формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму.
+В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб-приложениях такого не происходит. Для удобства пользователя предусмотрены веб-формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму.
-Ранее мы уже выводили пользователю в браузер разничные строки. Это были просто строки обычного текста, полноценной веб- страницей назвать их нельзя. Чтобы создавать полноценные веб- страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое.
+Ранее мы уже выводили пользователю в браузер различные строки. Это были просто строки обычного текста, полноценной веб-страницей назвать их нельзя. Чтобы создавать полноценные веб-страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое.
-Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб- страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить цисло прямо в адресной строке.
+Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб-страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить число прямо в адресной строке.
 Если у тебя есть желание, то можно изучить HTML по самоучителям, например вот этим
@@ Строка 27: / Строка 27: @@
     </head>
     <body>
+        <h2>Input led duty between 0 and 1023</h2>
         <form action="/">
             <input type="text" name="duty" value="512">
@@ Строка 35: / Строка 36: @@
 </file>
+<WRAP center round important 60%>
+Сохрани эту страницу в корне файловой системы микроконтроллера под именем page.html
+</WRAP>
+Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>...</html>. Далее веб страница делится на заголовок <head>...</head> и тело страницы <body>...</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.
+Внутри тела страницы мы создаем заголовок второго уровня <h2>...</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега <form>:
+<code html[enable_line_numbers="2", start_line_numbers_at="6"]>
+        <form action="/">
+            <input type="text" name="duty" value="512">
+            <input type="submit" value="Send">
+        </form>
+</code>
+Форма имеет атрибут ''action'' с адресом, куда отправлять данные.
+Текстовое поле ввода создается тегом <input>. Атрибут type="text" означает тип поля, в данном случае это текстовое поле. Атрибут name="duty" устанавливает имя поля, а атрибут value="512" устанавливает значение поля по умолчанию.
+Кнопка отправки формы создаются также тегом input, но с типом type="submit".
+Теперь код программы:
+<file python Exp60.py[enable_line_numbers="2", start_line_numbers_at="1"]>
+from micropyserver import MicroPyServer
+import time
+from machine import Pin, PWM
+import network
+import gc
+_init()
+gc.collect()
+Led = Pin(13, Pin.OUT)
+pwmLed = PWM(Led)
+wlan_id = "Wi-Fi_Name"
+wlan_pass = "Wi-Fi_Password"
+wlan = network.WLAN(network.STA_IF)
+wlan.active(True)
+wlan.connect(wlan_id, wlan_pass)
+time.sleep(1)
+while wlan.isconnected() == False:
+    pass
+print('Device IP:', wlan.ifconfig()[0])
+def index(request, params):
+    if ('duty' in params):
+        pwmLed.duty(int(params['duty']))
+    html_file = open("page.html")
+    html = html_file.read()
+    html_file.close()
+    server.send(html, content_type="Content-Type: text/html")
+server = MicroPyServer()
+server.add_route("/", index)
+server.start()
+</file>
+<WRAP center round important 60%>
+Первым делом в коде программы нужно заменить ''Wi-Fi_Name'' на имя нужной сети, а ''Wi-Fi_Password'' на пароль от нее.
+</WRAP>
+Главным отличием этой программы от предыдущего эксперимента является работа с файлом веб страницы.
+<code python[enable_line_numbers="2", start_line_numbers_at="29"]>
+    html_file = open("page.html")
+    html = html_file.read()
+    html_file.close()
+</code>
+Оператор ''open'' открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора ''close''. Таким образом при обращении пользователя к нашему мини веб-серверу содержимое файла отправляется ему  в браузер.
+{{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}}
+<WRAP center round important 60%>
+На скриншоте видно IP адрес, который получил микроконтроллер во время эксперимента у нас в лаборатории. В твоем случае это будет другой IP адрес. После установки соединение с сетью микроконтроллер выводит его в терминал. Именно по нему и нужно обращаться.
+</WRAP>
+Теперь мы видим веб-страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и в нем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную.
+Таким образом мы научились создавать простейшие веб-страницы с формой для отправки данных на сервер.