Как связать html и python

Как связать html с Python?

У меня есть HTML код, который запускается как веб приложение на aiohttp(python). Как обратиться к данным, которые вводит пользователь? То есть мне необходимо интегрировать введенные данные в мой скрипт на языке Python, как это сделать?

const sendMessage = () =>

html < font-family: Verdana, "sans-serif"; >body < min-height: 100vh; background: black no-repeat; >h1 < text-align: center; color: white; text-shadow: 0 3px 5px rgba(150, 150, 150, 0.8); >#root < display: flex; flex-direction: column; align-items: center; >#messages < width: 70%; >.message < background-color: white; width: 100%; padding: 20px; border-radius: 10px; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box; margin-bottom: 10px; >.message:hover < -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5); >.message__created < font-size: 12px; color: darkgrey; text-align: right; >.message__text < font-size: 20px; color: black; margin-top: 5px; >.message__ratings < display: flex; justify-content: space-between; font-size: 16px; font-weight: 400; margin-top: 5px; >.form < width: 70%; margin-bottom: 20px; display: flex; flex-direction: column; gap: 20px; >.form__button < text-align: center; margin-top: 150px; background-color: white; cursor: pointer; >.form__input, .form__button < box-sizing: border-box; width: 100%; font-size: 18px; outline: none; border: none; padding: 20px; border-radius: 15px; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); >.form__input:focus, .form__button:hover

 
Port Scanner
 
 
  
Scan
 
 
 

Подключение внешних ресурсов и работа с формами

Это занятие начнем с рассмотрения способа подключения внешних ресурсов к шаблону HTML-документа. Наверное, многие из вас знают, что полноценные страницы сайта представляются не только файлом HTML с набором тегов, но и, например, каскадными таблицами стилей (CSS), JavaScript-программами, которые исполняются в браузере клиента и другими дополнительными внешними ресурсами.

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

о которой мы говорили на предыдущем занятии. Ее также можно вызывать непосредственно в шаблоне и она будет связана с текущим контекстом запроса, по которому берется шаблон. То есть, функция url_for корректно отработает и корректно возвратит запрашиваемый URL-адрес. Но что следует прописать первым аргументом у этой функции. Как мы говорили, там должно фигурировать имя функции-обработчика. Но здесь же нам нужен не обработчик а путь к внешнему файлу. Для этого во Flask для url_for зарезервировано специальный параметр

который означает, что нужно обратиться к подкаталогу ‘static’ и там взять файл, указанный в именованном параметре

Давайте подключим оформление к страницам сайта в шаблоне base.html, используя эту функцию:

link type="text/css" href=">" rel="stylesheet" />

В данном случае функция url_for возвратит путь:

и в шаблон будет подключен этот файл оформления страницы. Содержимое этого файла следующее (см. видео). Я не буду здесь подробно объяснять как работают эти стили, если вы не знакомы с CSS, то посмотрите это занятие.

Обновим страницу, увидим следующий результат:

Чтобы таблицы стилей были применены к соответствующим элементам HTML-документа, добавим следующие строчки (в base.html):

ul class="mainmenu"> … /ul> div class="clear">/div> div class="content"> … /div>

Теперь, при обновлении увидим такую страницу:

Далее, добавим ссылки нашим пунктам меню:

li>a href=">">{{m.name}}/a>/li>

А само меню в программе представим в виде списка словарей:

menu = [{"name": "Установка", "url": "install-flask"}, {"name": "Первое приложение", "url": "first-app"}, {"name": "Обратная связь", "url": "contact"}]

Теперь при обновлении страницы мы увидим полноценное меню.

Аналогичным образом можно подключать и другие внешние файлы.

Работа с формой (form)

Теперь, когда мы с вами разобрались как конструировать шаблоны страниц, пришло время познакомиться с обработкой form, которые есть практически в любом сайте. Что такое формы, я думаю, вы прекрасно знаете, например, очень часто можно встретить формы авторизации и регистрации:

• GET – в виде строки запроса: «/handler?name=Alex&old=18&profit=1000»;
• POST – в виде бинарных данных (используется для передачи больших объемов данных: изображений, звуков, документов и т.п., а также закрытых сведений: паролей, логинов и т.п.).

{% extends 'base.html' %} {% block content %} {{ super() }} form action="/contact" method="post" class="form-contact"> p>label>Имя: /label> input type="text" name="username" value="" requied /> p>label>Email: /label> input type="text" name="email" value="" requied /> p>label>Сообщение:/label> p>textarea name="message" rows=7 cols=40>/textarea> p>input type="submit" value="Отправить" /> /form> {% endblock %}

Мы здесь указали способ отправки данных в виде POST-запроса и обработчик «/contact», которому будут переданы данные из формы. Далее, пропишем следующее оформление формы (в файле styles.css):

.form-contact label { display: inline-block; min-width: 80px; } .form-contact p {margin: 10px 0 10px 0;} .form-contact input[type=submit], textarea { font-size: 16px; }

Запустим программу, откроем в браузере страницу http://127.0.0.1:5000/contact и увидим следующий результат: Если сейчас ввести в форму какие-либо данные и нажать на кнопку отправить, то сервер возвратит ошибку: 405 – запрет на прием данных (Method Not Allowed) Дело в том, что в обработчике мы должны явно указать: может ли он принимать данные методом POST. Для этого нужно прописать параметр methods со значением POST как элемент списка:

@app.route("/contact", methods=["POST"])

Или так, если хотим обрабатывать и POST и GET запросы:

@app.route("/contact", methods=["POST", "GET"])

Далее в обработчике проверим: пришел ли именно POST-запрос, а не какой-либо другой и выведем данные в консоль:

if request.method == 'POST': print(request.form)

А вначале импортируем этот объект:

from flask import Flask, render_template, request

Мы здесь используем объект request, который связан с данными текущего запроса и существует в пределах контекста запроса, как мы это отмечали на предыдущих занятиях. Далее, все данные формы доступны по свойству form, которое представляет своеобразный словарь, то есть, для доступа к конкретному полю можно использовать следующую запись:

print(request.form['username'])

Мы пока не будем нигде сохранять принятые данные, т.к. для этого следует использовать БД, о которой еще ничего не говорили. Главное, на этом этапе понимать, как происходит прием данных от формы и их представление в объекте request. На этом завершим это занятие. На следующем продолжим изучать функционал работы с формами.

CGI: пишем простой сайт на Python. Часть 1: Hello world

Проще всего создать динамические страницы на Python при помощи CGI-скриптов. CGI-скрипты — это исполняемые файлы, которые выполняются веб-сервером, когда в URL запрашивается соответствующий скрипт.

Сегодня я расскажу про то, как написать Hello world, как CGI-скрипт.

Настройка локального сервера

В Python уже есть встроенный CGI сервер, поэтому его настройка элементарна.

Для запуска из консоли (для любителей linux-систем). Запускать нужно из той папки, где мы хотим работать:

python3 -m http.server --cgi

Для сидящих на Windows чуть проще будет запуск Python файла (заметьте, что он должен находиться в той же папке, в которой мы планируем работать!):

Теперь откройте браузер и в адресной строке наберите localhost:8000

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

Hello world

Теперь в той папке, где мы запустили сервер, создаём папку cgi-bin (у меня она уже создана).

В этой папке создаём скрипт hello.py со следующим содержимым:

"Первая строка говорит о том, что это Python скрипт (CGI-скрипты можно не только на Python писать).

Вторая строка печатает заголовок. Он обозначает, что это будет html файл (бывает ещё css, javascript, pdf и куча других, и браузер различает их по заголовкам).

Третья строка (просто символ новой строки) отделяет заголовки от тела ответа.

Четвёртая печатает Hello world.

Теперь переходим на localhost:8000/cgi-bin/hello.py

Если у вас не работает, проверьте, установлены ли права на выполнение.

Также в консоли запущенного сервера появляются сообщения об ошибках. Например, убрал скобочку и обновил страницу:

В следующей части мы рассмотрим обработку данных форм и cookies.

Для вставки кода на Python в комментарий заключайте его в теги

body

         "> 
BG Colour
 
Background Color is to be changed.  

STATIC_URL = '/static/' STATIC_DIRS=[ os.path.join(BASE_DIR,'static') ] 

from django.conf import settings from django.contrib.staticfiles.urls import staticfiles_urlpatterns if settings.DEBUG: urlpatterns += staticfiles_urlpatterns() 

STATIC_URL = '/static/' if DEBUG: STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), '/static/', ] else: STATIC_ROOT = os.path.join(BASE_DIR, "static") 

## import this at the top from django.contrib.staticfiles.urls import staticfiles_urlpatterns ## bottom of the file `urls.py` if settings.DEBUG: urlpatterns += staticfiles_urlpatterns()