Создание Web сайтов на Python. Основы flask и HTML

Введение

Для создания веб сайта с «нуля» на сокетах необходимо проделать огромный пласт не особо нужной работы. В связи с этим, при разработки сайтов гораздо проще и правильнее использовать уже написанный ранее инструментарий для создания сайтов. На python — это фреймворки для создания веб-приложений django и flask

django представляет из себя громоздкий фреймворк, в то время как flask является микрофреймворком,
позволяющий создавать как маленькие простые, так и достаточно громоздкие интернет сайты. Введение в программирование сайтов на flask и будет приведено в данном уроке.

Введение в flask

Пустой простой сайт на flask

import flask

app = flask.Flask(__name__)

#Здесь будем дописывать сайт

# Добавим возможность "запуска файла"
if __name__ == "__main__":
    app.run(debug = True)

Не используйте для работы с flask файл с именем flask.py

Запуск сайта на flask

$ cd <flask application directory>
$ export FLASK_APP=<app_filename.py>
$ export FLASK_DEBUG=1
$ flask run
На Windows необходимо использовать set вместо export

После запуска перейдите на http://127.0.0.1:5000/ и увидите

Not Found

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

Что ожидаемо, поскольку сайт пуст.

Добавление главной страницы

Создадим главную страницу в нашем сайте (обычно запрашивается по / или /index.html):

@app.route('/')
@app.route('/index.html')
def index_page():
    return 'Это главная Страница сайта'

Обновив страницу, вы увидите ,обозначенный выше, текст.

Понятно, что каждый раз генерировать html целиком страницу, осуществлять передачу файлов и осуществлять другие стандартные действия ‒ лишняя работа, уже реализованная в flask.

Структура web приложения на flask:

При создании приложения на flask необходимо сразу организовать файловую структуру. Пример

flask_demo
├── flask_app
│   ├── config_base.py
│   ├── __init__.py
│   ├── static
│   │   └── css
│   │       └── base.css
│   └── templates
│       └── index.html
├── instance
│   └── config.py
└── run.sh

Здесь:

  • flask_demo ‒ Папка со всей информацией о сайте
  • flask_app ‒ Папка, содержащая непосредственно сайт: изменения в данной папке стоит фиксировать git-ом
  • config_base.py ‒ файл примера настроек сайта
  • __init__.py — Главный файл сайта на flask
  • static — Папка со статичными файлами (css, js, pdf, zip, прочие)
  • css — Статичная папка для хранения стилевых файлов (см. далее)
  • base.css — Базовый стилевой файл (см. далее)
  • templates — Папка шаблонов страниц сайта (см. далее)
  • index.html — шаблон главной страницы
  • instance ‒ Папка «текущего» сайта: на вашем компьютере содержит различные отладочные данные, на рабочем сервере содержит рабочие реальные данные
  • config.py — настройки «текущего» сайта
  • run.sh — Файл запуска сайта

Пример Вы можете скачать здесь

Рассмотрим его внимательнее.

Файл __init__.py

import flask


def create_app():
    '''
    Function: create_app
    Summary: Создание flask приложения
    '''

    app = flask.Flask(__name__,
                      instance_relative_config=True,
                      template_folder="templates",
                      static_folder="static")

    # загружаем настройки
    app.config.from_pyfile('config.py', silent=False)

    # Главная страница сайта
    @app.route('/')
    @app.route('/index.html')
    def index_page():
        return flask.render_template('index.html', var="some data")

    return app

Как Вы видите, файл содержит только create_app — функцию, по созданию flask приложения.

Отдельно рассмотрим строчку

app = flask.Flask(__name__,
              instance_relative_config=True,
              template_folder="templates",
              static_folder="static")

Здесь происходит создание пустого flask приложения, с указанием:

  • instance_relative_config — Настройки сайта располагаются в папке instance
  • template_folder — указание имени папки с шаблонами страниц. По умолчанию равно "templates" и может не задаваться
  • static_folder — указание имени папки со статичными файлами. По умолчанию равно "static" и может не задаваться

Теперь же рассмотрим строчку

return flask.render_template('index.html', var="some data")

Тут происходит возвращение шаблона index.html из папки с шаблонами в установкой параметра var в "some data". Имена и количество передаваемых параметров определяете самостоятельно.

Введение в HTML

Изучим содержание шаблонного файла index.html

<!DOCTYPE html>
<HTML>
<HEAD>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">
    <TITLE> Мой сайт на flask </TITLE>
</HEAD>
<BODY>
    Текст на первой странице
</BODY>
</HTML>

В первой строке расположена «особая» запись, поясняющая браузеру, что разметка страницы произведена на языке HTML 5. Сейчас заниматься изучением старых версий разметки (в том числе XHTML) не имеет смысла, в силу их неактуальности. Однако, лучше сообщить браузеру информацию, что Вы используете именно пятую версию HTML.

<!DOCTYPE html>

Далее идёт блок непосредственно всей страницы, окаймлённый открывающим <HTML> и закрывающим </HTML> тегами.

<HTML>
    …
</HTML>

Вся страница делиться на голову, содержащую различную вспомогательную информацию о странице,

<HEAD>
    …
</HEAD>

и тело, внутри которого располагается содержимое страницы

<BODY>
    …
</BODY>

Заголовок сайта (печатается на вкладке браузера)

<TITLE> Мой сайт на flask </TITLE>

Подключение таблицы стилей (см. ниже) при помощи тега, не требующего закрытия, и с тремя параметрами rel, type и href:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">

Конструкция {{ url_for('static', filename='css/base.css') }} даёт понять «отрисовщику» шаблона, что на данное место сайта необходимо вставить результат работы python функции url_for (находиться в модуле flask). Данная функция возвращает адрес статического (static) файла css/base.css.

По аналогии с этим, конструкция {{ var }} вставит в сайт значение var, переданное функции render_template как именованный параметр.

Некоторые HTML теги

Ниже будет приведена таблица HTML тегов. В ней:

  1. Тег — название тега
  2. З — вид тега
    1. ⧾ — тег необходимо открыть (<тег>) и закрыть (</тег>)
    2. ⧿ — тег закрывать не надо
  3. Параметры — некоторые параметры тега
Тэг З Описание параметры
HTML ⧾ Основной тег содержания сайта  
HEAD ⧾ Заголовок сайта  
BODY ⧾ Основное содержание страницы

bgcolor ‒ фон страницы

text ‒ цвет текста
P ⧾ «абзац» align ‒ выравнивание текста
A ⧾ Гиперссылка href ‒ адрес гиперссылки
IMG ⧿ Вставка картинки

src ‒ адрес картинки

alt ‒ описание картинки
BR ⧿ Разрыв строки  
HR ⧿ Разрыв строки горизонтальной линией

color ‒ цвет

size ‒ толщина

width ‒ ширина
SPAN ⧾ Сам по себе ничего не делает, используется для пометки текстов  
DIV ⧾ Выделяет блок align
STYLE ⧾ Определение стилей (см. далее)  
H1 – H6 ⧾ Определяет заголовок 1 – 6 уровня align
UL ⧾ Маркированный список

type ‒ вид маркера

disc •, circle ◦, square ▪
OL ⧾ Нумерованный список

type ‒ вид маркера (A, a, I, i, 1)

reversed ‒ убывание

start ‒ стартовый номер
LI ⧾ Элемент списка UL и OL type, start
B ⧾ жирный текст  
i ⧾ наклонный  
U ⧾ подчёркнутый  
TABLE ⧾ Таблица

cellpadding ‒ Отступ от рамки до содержимого ячейки.

cellspacing ‒ Расстояние между ячейками.
TR ⧾ Строка таблицы align, bgcolor
TD ⧾ Ячейка таблицы align, bgcolor

Параметры, которые можно использовать в любом теге:

Параметр Описание
style изменение стиля (см. далее) тега
id определение идентификатора (подразумевается, что он уникален)
class определение принадлежности классу

Больше тегов и их параметры можно посмотреть здесь

CSS (каскадные таблицы стилей)

HTML позволяет определять стили для любых тегов. Использование стилей позволяет изменять поведение и отображение тегов до неузнаваемости. Определять стиль можно: #. Внутри тега STYLE; #. В отдельном css файле; #. Внутри тега через параметр style.

Принцип определения стиля в отдельном файле совпадает с определением внутри тега STYLE

Пример:

<!-- определим свои стили -->
<style>
/* Так выглядят комментарии здесь */
a
/*
    далее внутри фигурных скобок
    определяем стиль для тега "a"
*/
{
    color: white; /* определяем цвет текста - белый */
    background-color: rgba(255, 127, 0, 0.5);
        /*
            цвет фона по составляющим:
               красный - 255 (максимум)
               зелёный - 127
               синий - 0 (минимум)
               прозрачность - 50%
        */
}

.red_text /* определяем стиль для класса "red_text" */
{
    color: rgb(255,0,0);
}
.blue_text{

}
.red_text, .blue_text /* определяем стиль для двух классов */
{
    text-shadow: 5px -10px 2px black; /* добавляем тексту тень */
    padding: 5px; /* внутренний отступ от границ */
}
</style>

Тут <a href="?">ссылка на текущую страницу</a>.
А тут — <span class="red_text">красный текст</span>.
Это — <a href="?" class="red_text">красная ссылка </a>.
Здесь <span style="font-size:2em">Определяем стиль внути тега</span>.

Результат:

Стилевых параметров значительное количество. Наиболее адекватно — изучить их здесь

Важно Все размеры в css необходимо задавать вместе с размерностью. Иначе результат может быть неправильным.

сокращение описание обозначения размерности
px Размер в пикселях экрана
pt Пункт (1/72 дюйма) (обычная величина измерения размера шрифта)
pc Пика (1pc ≡ 12pt)
cm Сантиметры
mm Миллиметры
in Дюймы
% Размер в процентах (зачастую не самыю удобный вид размера)
em Текущий размер шрифта
rem Базовый размер шрифта
vw Процент ширины окна браузера
vh Процент высоты окна браузера

Способы передачи данных между сайтом и браузером рассмотрим на следующей неделе.

Задача

  1. Разработайте структуру персонального сайта-визитки на flask
  2. Создайте сайт на flask и напишите обработчики для, определённых вами, страниц
  3. Напишите соответствующие страницы на языке HTML