Питон. 2022лр5_python_web. Методические указания для выполнения лабораторной работы 5 по курсу Webтехнологии

• Название: Методические указания для выполнения лабораторной работы 5 по курсу Webтехнологии
• Анкор: Питон
• Дата: 06.12.2022
• Размер: 294.1 Kb.
• Имя файла: 2022лр5_python_web.docx
• Тип: Методические указания; #831023

Методические указания для выполнения

лабораторной работы № 5 по курсу «Web-технологии»
Серверные сценарии. Форма и обработка get и post запросов.
Цель работы: получение опыта написания и применения серверных сценариев для обработки данных, введенных пользователем.
Задание на лабораторную работу

На основе приведенных примеров подготовить веб-страницу, на которой пользователь вводит несколько значений и отправляет их на сервер. После отправки на сервер введенные данные печатаются на странице. Вариант определяет вид запроса, отправляемого на сервер (get или post) и внешний вид отображаемых данных. Кроме того, в варианте указан дополнительный элемент формы, который необходимо самостоятельно освоить и включить в форму.

Вопросы анкеты должны отражать тему сайта, выбранную в лабораторной работе № 1. Обязательные поля формы для анкеты: полностью ФИО, список с выбором значений, набор флажков (checkbox), набор переключателей (radio).

Серверный сценарий написан на языке python.

При использовании метода get в отчет следует включить содержимое адресной строки после получения ответа от сервера.

Страница должна быть встроена в сайт, подготовленный в предыдущих работах.
Порядок выполнения

1. 
   Установить оболочку языка python
   
2. 
   Из листинга 1 сформировать файл python (расширение .py) и записать его в основной каталог оболочки python. Из оболочки python запустить сервер. Сервер работает постоянно.
   
3. 
   Подготовить веб-страницу с формой (расширение .htm) по образцу Листинга 2. Веб-страница должна находиться в том же каталоге, что и файл с сервером. Вызывается в адресной строке браузера следующим образом: http://localhost/forma.htm Редактировать страницу можно в блокноте, а для проверки работы обновлять окно браузера.
   
4. 
   Подготовить файл с серверным сценарием (расширение .py) по образцу Листингов 3, 4 или 5 в зависимости от варианта. Файл должен быть записан в каталог cgi-bin, кодировка utf-8. Вызывается сервером после нажатия кнопки на форме. Редактировать этот файл тоже можно в блокноте.
   
5. 
   После завершения работы остановить сервер.
   

Содержание отчета

1. 
   титульный лист;
   
2. 
   цель работы;
   
3. 
   вариант задания: тема сайта и вариант по работе № 5
   
4. 
   при использовании метода get: адресная строка после получения ответа от сервера.
   
5. 
   скриншоты: исходная страница и страница, сформированная веб-сервером.
   
6. 
   листинги двух файлов (веб-страница с формой и серверный сценарий)
   
7. 
   выводы по работе.
   

Работа с языком питон
Простейшую оболочку редактора языке питон можно загрузить с сайта https://www.python.org/downloads/, выбирайте версию 3.х . При работе в этой оболочке используется два окна: окно интерпретатора (рис. 1) и редактор текста (рис. 2). В окне интерпретатора в строке с приглашением (>>>) можно писать операторы питона. При выполнении программы в этом окне происходит вывод на экран.

Окно редактора текста запускается командой меню File/New file (рис. 2). В это окно следует скопировать текст веб-сервера из листинга 1. В питоне функцию открывающих и закрывающих скобок в составных операторах выполняют отступы от начала строки. Поэтому все операторы кода из листинга 1 обязательно должны находиться строго с начала строки. Сохраните файл с расширением .py и запустите его из редактора текста (кнопка F5). В окне интерпретатора (рис. 3) будут появляться сообщения о работе сервера. Сервер работает постоянно.



Рис. 1 окно интерпретатора для языка питон.


Рис. 2. Окно редактора текста

Листинг 1. Веб-сервер на языке python. Файл serwerpy.py
import os, sys

from http.server import HTTPServer, CGIHTTPRequestHandler

webdir = '.' # каталог с файлами HTML и подкаталогом cgi­bin для сценариев

port = 80 # http://servername/ если 80, иначе http://servername:xxxx/

if len(sys.argv) > 1: webdir = sys.argv[1] # аргументы командной строки

if len(sys.argv) > 2: port = int(sys.argv[2]) # иначе по умолчанию ., 80

print('webdir "%s", port %s' % (webdir, port))

os.chdir(webdir) # перейти в корневой веб­каталог

srvraddr = ('', port) # имя хоста, номер порта

srvrobj = HTTPServer(srvraddr, CGIHTTPRequestHandler)

srvrobj.serve_forever() # обслуживать клиентов до завершения



Рис. 3. Сообщения веб-сервера в окне интерпретатора.
Комментарии к листингу 2
Форма
Формы – это элемент веб-страницы. Она служат для оправки данных на веб-сервер. Форма заключается в парный тег

. Внутри этого тега помещаются элементы интерфейса пользователя – кнопки, поля ввода и т.п. Элементы интерфейса пользователя могут находиться и вне формы – в этом случае для того, чтобы интерфейс был полезен, к элементам прикрепляется сценарий на языке javascript.

Пример первого тега формы:

Основные атрибуты формы: action, name, method.

action – содержит адрес (url) файла, который получает данные из формы. В примере это файл на языке питон tutor5.py, расположенный в каталоге cgi-bin.

name – имя формы.

method – содержит название метода (get или post) передачи данных на веб-сервер. Данные передаются в виде пары: имя_элемента_name = значение_элемента_value через разделитель &.

В описании элемента «переключатель» :



имя элемента задано атрибутом name, а значение атрибутом value.
Метод get передает данные из формы внутри url, этот вариант означает, что передаваемые данные открыты и доступны всем, поскольку отображаются в адресной строке браузера. Пример передачи данных из формы при выполнении запроса get:

http://localhost/cgi-bin/horiztable.py?name=Аделина&shoesize=маленький&job=студент&language=Python&comment=люблю+программировать
Чтобы получить читаемый текст при использовании кириллицы, надо зайти на один из сайтов, которые выполняют кодировку/расшифровку url с кириллицей (например, https://www.design-sites.ru/utility/url-encoding.php) и преобразовать текст.
Метод post передает данные в виде отдельного файла. Рекомендуется использовать именно его.

Форма будет передавать данные после нажатия кнопки типа submit. Атрибут value здесь содержит надпись на кнопке. Пример кнопки:



Создать элемент интерфейса можно разными способами: с помощью непарного тега , в котором через атрибут type задается тип элемента, и с помощью специальных тегов. Все элементы интерфейса имеют атрибуты name и value.

Атрибут name – имя элемента интерфейса, необходимо для обращения к элементу при отправке данных на веб-сервер. Атрибут value – значение элемента. Для элемента text – значение по умолчанию, для кнопки – надпись на ней.
Создание интерфейса через тег <input>
Основные атрибуты: type, src.
Атрибут type – задает вид элемента интерфейса. Варианты значений:
button - кнопка,

checkbox - флажок,

file – текстовое поле для ввода имени файла, есть кнопка для открытия диалогового окна выбора файла.

hidden – невидимый элемент, но его данные можно передать на сервер,

image – графическая кнопка типа «submit»; атрибут src содержит имя графического файла,

password – текстовое поле для ввода пароля, аналогично элементу text; все символы при печати скрыты.

radio - переключатель,

reset – кнопка для установки значений по умолчанию,

submit – кнопка, которая отправляет данные формы на сервер,

text – текстовое поле ввода.
Примеры элементов управления из Листинга 3:







Другие теги для элементов интерфейса
В парном теге кнопки могут размещаться другие теги (текст, изображение, таблица). Для указания типа кнопки используется атрибут type со значениями: button – обычная кнопка, reset – отмена всех изменений в элементах формы, submit – оправка данных формы, внутри которой находится кнопка, на веб-сервер.
Раскрывающийся список создается через парный тег , внутри которого размещаются теги , содержащие пункты списка.


студент преподаватель библиотекарь

другое
Область ввода текста - поле для ввода многострочного текста, может содержать полосы прокрутки. Атрибуты cols и rows определяют размер поля в количестве символов по горизонтали и вертикали.<br /><textarea name=comment cols=30 rows=2><br /><br />Для аккуратного размещения элементов интерфейса используется невидимая таблица.<br /><br /><b><span id='Листинг_2._Файл_forma.htm_с_формой.'>Листинг 2. Файл forma.htm с формой.</span></b><br />Запуск файла: http://localhost/forma.htm при работающем веб-сервере<br /><HTML><br /><br /><body><br /><br /><h2>Анкета пользователя</h2><br /><br /><HR><br /><br /><FORM method="POST" action="/cgi-bin/tutor5.py"><br /><br /><h3>Заполните форму и нажмите кнопку</h3><br /><br /><br /><table><br /><br /><tr><br /><br /><TH align=right>Имя:<br /><br /><td> <input type=text name=name><br /><br /><tr><br /><br /><TH align=right>Размер обуви:<br /><br /><td><table><br /><br /><td><input type=radio name=shoesize value=маленький>Маленький<br /><br /><td><input type=radio name=shoesize value=средний>Средний<br /><br /><td><input type=radio name=shoesize value=большой>Большой<br /><br /></table><br /><br /><tr><br /><br /><TH align=right>Должность:<br /><br /><td><select name=job><br /><br /><option>студент<br /><br /><option>преподаватель<br /><br /><option>библиотекарь<br /><br /><option>другое<br /><br /></select><br /><br /><tr><br /><br /><TH align=right>Любимый язык:<br /><br /><td><table><br /><br /><td><input type=checkbox name=language value=Python>Python<br /><br /><td><input type=checkbox name=language value=C>C<br /><br /><td><input type=checkbox name=language value=php>php<br /><br /></table><br /><br /><tr><br /><br /><TH align=right>Комментарий:<br /><br /><td><textarea name=comment cols=30 rows=2><br /><br />введите текст