Это старая версия документа!

Эксперимент 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>

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

Внутри тела страницы мы создаем заголовок второго уровня <h2>…</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 123. Далее создаем форму с помощью тега <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. import re
  7. _init()
  8. gc.collect()
  9.  
  10. Led = Pin(13, Pin.OUT)
  11. pwmLed = PWM(Led)
  12.  
  13. wlan_id = "HUAWEI P10 lite"
  14. wlan_pass = "33947255"
  15.  
  16. wlan = network.WLAN(network.STA_IF)
  17. wlan.active(True)
  18. wlan.connect(wlan_id, wlan_pass)
  19. time.sleep(1)
  20.  
  21. while wlan.isconnected() == False:
  22.     pass
  23.  
  24. print('Device IP:', wlan.ifconfig()[0])
  25.  
  26.  
  27. def index(request, params):
  28.     if ('duty' in params):
  29.         pwmLed.duty(int(params['duty']))
  30.     html_file = open("page.html")
  31.     html = html_file.read()
  32.     html_file.close()
  33.     server.send(html, content_type="Content-Type: text/html")
  34.  
  35.  
  36. server = MicroPyServer()
  37. server.add_route("/", index)
  38. server.start()

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

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

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