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

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

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

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

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

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

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

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

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

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

Сохрани эту страницу в корне файловой системы микроконтроллера под именем page.html

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

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

  1.         <form action="/">
  2.             <input type="text" name="duty" value="512">
  3.             <input type="submit" value="Send">
  4.         </form>

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

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

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

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

Exp60.py
  1. from micropyserver import MicroPyServer
  2. import time
  3. from machine import Pin, PWM
  4. import network
  5. import gc
  6. _init()
  7. gc.collect()
  8.  
  9. Led = Pin(13, Pin.OUT)
  10. pwmLed = PWM(Led)
  11.  
  12. wlan_id = "Wi-Fi_Name"
  13. wlan_pass = "Wi-Fi_Password"
  14.  
  15. wlan = network.WLAN(network.STA_IF)
  16. wlan.active(True)
  17. wlan.connect(wlan_id, wlan_pass)
  18. time.sleep(1)
  19.  
  20. while wlan.isconnected() == False:
  21.     pass
  22.  
  23. print('Device IP:', wlan.ifconfig()[0])
  24.  
  25.  
  26. def index(request, params):
  27.     if ('duty' in params):
  28.         pwmLed.duty(int(params['duty']))
  29.     html_file = open("page.html")
  30.     html = html_file.read()
  31.     html_file.close()
  32.     server.send(html, content_type="Content-Type: text/html")
  33.  
  34.  
  35. server = MicroPyServer()
  36. server.add_route("/", index)
  37. server.start()

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

Главным отличием этой программы от предыдущего эксперимента является работа с файлом веб страницы. 

  1.     html_file = open("page.html")
  2.     html = html_file.read()
  3.     html_file.close()

Оператор open открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора close. Таким образом при обращении пользователя к нашему мини веб-серверу содержимое файла отправляется ему в браузер.

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

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

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