Различия

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

--- products:laboratory_iot:exp60 [2020/06/18 19:26] – [Программный код эксперимента] 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 по самоучителям, например вот этим
@@ Строка 36: / Строка 36: @@
 </file>
-Большинство тегов в HTML состоят из двух частей- открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>...</html>. Далее веб страница делится на заголовок <head>...</head> и тело страницы <body>...</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.
+<WRAP center round important 60%>
+Сохрани эту страницу в корне файловой системы микроконтроллера под именем page.html
+</WRAP>
+Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>...</html>. Далее веб страница делится на заголовок <head>...</head> и тело страницы <body>...</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.
-Внутри тела страницы мы создаем заголовок второго уровня <h2>...</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 123. Далее создаем форму с помощью тега <form>:
+Внутри тела страницы мы создаем заголовок второго уровня <h2>...</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега <form>:
 <code html[enable_line_numbers="2", start_line_numbers_at="6"]>
         <form action="/">
@@ Строка 65: / Строка 69: @@
 pwmLed = PWM(Led)
-wlan_id = "HUAWEI P10 lite"
+wlan_id = "Wi-Fi_Name"
-wlan_pass = "33947255"
+wlan_pass = "Wi-Fi_Password"
 wlan = network.WLAN(network.STA_IF)
@@ Строка 93: / Строка 97: @@
 </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")
@@ Строка 100: / Строка 108: @@
 </code>
-Оператор ''open'' открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора ''close''. Таким образом при обращении пользователя к нашему мини веб- серверу содержимое файла отправляется ему  в браузер.
+Оператор ''open'' открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора ''close''. Таким образом при обращении пользователя к нашему мини веб-серверу содержимое файла отправляется ему  в браузер.
 {{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}}
@@ Строка 108: / Строка 116: @@
 </WRAP>
-Теперь мы видим веб- страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и внем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную.
+Теперь мы видим веб-страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и в нем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную.
-Таким образом мы научились создавать простейшие веб- страницы с формой для отправки данных на сервер.
+Таким образом мы научились создавать простейшие веб-страницы с формой для отправки данных на сервер.