Как написать сайт на python

Теперь давайте создадим второй шаблон и назовём его index.html. Он будет наследовать элементы базового шаблона:

Этот шаблон переопределяет заголовок страницы и определяет контент, который будет отображаться на домашней странице: заголовок страницы Home и немного текста.

Используем HTML-шаблоны

Пришло время воспользоваться шаблонами. Изменим файл app.py и импортируем функцию render_template из библиотеки Flask, которая позволяет работать с шаблонами:

Изменим маршрут главной страницы и используем в нём новую функцию, чтобы отобразить шаблон index.html:

Сохраним изменения в файлах app.py, index.html и base.html, а затем снова запустим наше приложение:

Открываем браузер и переходим по адресу http://127.0.0.1:5000/. У нас отобразится содержимое шаблона index.html:

Подключаем базу данных

Чтобы вести блог, нужно куда-то сохранять все посты, картинки, видео и тому подобное. Куда-то — это в базу данных. Баз данных существует немало, мы даже написали про них отдельную статью. Но если коротко — база данных нужна, чтобы удобно хранить, обрабатывать и сохранять данные.

Мы будем использовать базу данных SQLite, потому что она занимает совсем немного места, легка в освоении и вообще клёвая. А главный плюс — её не нужно скачивать отдельно, потому что она сразу есть в Python.

Займёмся привычным делом — импортируем модуль SQLite3:

Теперь мы можем создать функцию, которая будет подключать нас к базе данных и возвращать объект подключения:

Эта функция создаст подключение к базе данных database.db и установит режим получения результатов запросов в виде словаря Row, что позволит обращаться к столбцам базы данных по их именам.

Другими словами — наши данные будут храниться в виде таблицы, где каждая строка — уникальный пост, а каждый столбец (или ячейка) — информация об этом посте, например, сам текст, количество лайков, автор и так далее.

Но ещё нам понадобится функция, которая будет закрывать подключение к базе данных:

Теперь мы можем использовать эти функции для выполнения запросов к базе данных внутри нашего приложения. Обновим функцию index(), чтобы она получала все записи из таблицы posts:

Здесь мы получаем подключение к базе данных с помощью функции get_db_connection(), выполняем запрос к таблице posts и получаем все записи, используя метод fetchall(). Затем мы закрываем подключение с помощью функции close_db_connection() и передаём полученные записи в шаблон index.html с помощью функции render_template().

Но перед тем как использовать базу данных, её нужно инициализировать и создать таблицу posts.

У нашего учебного поста будет три поля с данными: уникальный идентификатор (ID), заголовок и текст поста. Назовём их соответственно — id, title и content:

Функция execute() создаст нам таблицу posts с полями id, title и content. У каждого из этих полей будет собственный тип данных: целое число, строка и строка соответственно.

Мы задали полю id специальный параметр AUTOINCREMENT, чтобы при добавлении нового поста его айдишник автоматически увеличивался на 1. А параметр PRIMARY KEY нужен для уточнения, что строки в таблице уникальные и не пустые.

Инициализировать базу данных нужно в самом начале. Во Flask мы можем сделать это перед первым запросов к базе данных с помощью следующего кода:

Здесь мы используем декоратор @app.before_first_request, который указывает, что функция before_first_request() вызывается перед тем, как запустится рендер шаблонов.

Готово — наше приложение подключено к базе данных SQLite, а мы можем переходить дальше. Но сперва убедимся, что всё работает. Сохраняем изменения и запускаем приложение:

Если перейти по адресу http://127.0.0.1:5000/, то может показаться, что ничего не изменилось. Но если посмотреть в папку с файлами, то можно увидеть там новый файл — database.db. Это и есть наша база данных.

Создаём шаблон для поста

Настало время сделать новый и прекрасный шаблон — для постов. Он будет простым: заголовок, текст и ссылка на главную страницу. Создадим в папке templates файл post.html и добавим следующий код:

В момент рендеринга в эту HTML-страницу мы будем передавать пост, который достали из базы данных. У этого поста будут заголовок (title) и основной текст (content), а всё вместе будет лежать внутри объекта post.

Пока всё просто, но обратите внимание на новую функцию — url_for(). Она позволяет перейти на другой маршрут и отрисовать другую HTML-страницу. В нашем случае, если мы нажмём на ссылку Back to index, запустится функция index(), которая перенаправит нас на главную страницу (маршрут /) и отрисует шаблон index.html.

Теперь нам нужно сделать новый маршрут под один из постов в файле app.py:

Тут уже всё немного сложнее, но обо всём по порядку:

• @app.route(‘/<int:post_id>’) — задаём новый маршрут. Он будет выглядеть так: www.oursite.com/1. Единица будет указывать на индекс поста из базы данных. <int:post_id> — это ещё одно указание на то, что индекс поста должен быть целым числом (int), а не, например, строкой.
• get_post(post_id) — передаём айдишник поста, который как раз и «встанет» в URL-адрес и добавится к запросу к базе данных.
• post = conn.execute (‘SELECT * FROM posts WHERE ‘, (post_id,)).fetchone() — запрашиваем из базы данных пост по нашему айдишнику и берём одну строку функцией fetchone().
• return render_template (‘post.html’, post=post) — рендерим HTML-шаблон и передаём туда полученный пост.

Давайте убедимся, что всё работает корректно и страница отрисовывается. Временно напишем «костыль» и вручную добавим пост (исключительно для проверки):

Наш «костыль» — это четвёртая строка. Здесь мы сами вставляем новую строку в базу данных с помощью запроса INSERT. Теперь перейдём по адресу http://127.0.0.1:5000/1:

Круто — всё отрисовалось, кнопка «Назад» работает! Идём дальше и не забываем удалить «костыль».

Выводим все посты на главную

Дополним файл index.html и создадим список, в котором будут находиться все посты из базы данных:

Главный движ у нас происходит в теге <ul>: мы идём по всем элементам списка posts и для каждого создаём заголовок со ссылкой на пост. При нажатии на ссылку вызывается функция url_for(), а ей передаётся функция-рендер get_post() и ID поста.

Ещё мы немного декорировали заголовок самой страницы. Можете сравнить с прошлой версией.

Если перезапустить приложение, то мы не увидим новых постов, потому что их просто нет в базе данных. Но можно опять заполнить всё вручную. Изменим функцию index():

Правда, если перейти по ссылке, то ничего не отобразится, но и это мы со временем исправим.

Создаём новые посты

Отображение постов работает, осталось добавить возможность создавать новые посты. Для этого создадим новый HTML-шаблон и метод для рендеринга.

В папке templates создаём новый файл add_post.html:

Он будет наследовать файл base.html, а внутри содержать форму, где пользователь указывает заголовок и тело поста. Если он вдруг введёт некорректные данные, то мы покажем ему сообщение об ошибке с помощью флеш-сообщений (когда некорректно заполненное поле подсвечивается красным и у вас нет возможности отправить заполненную форму).

Теперь добавим новый маршрут в файл app.py:

Этот маршрут обрабатывает GET- и POST-запросы по адресу /new. Если запрос выполняется методом GET, то функция просто отображает форму для ввода данных с помощью шаблона add_post.html. А если запрос выполняется методом POST, мы достаём заголовок и тело поста из формы, а затем добавляем их в базу данных. В конце — редиректим (то есть перенаправляем) пользователя обратно на главную.

Подробнее об HTTP-запросах вы можете прочитать в нашей статье.

Чтобы все эти функции работали, мы также должны их импортировать в начале файла:

Теперь давайте сохраним свои наработки и запустим приложение:

Переходим по адресу http://127.0.0.1:5000/ и видим, что опять ничего не изменилось:

Попробуем перейти по адресу http://127.0.0.1:5000/new:

Ура! Мы видим нашу форму! Давайте впишем туда что-нибудь и нажмём Submit:

Нас перекинуло на главную страницу — и на ней находится наш новый пост. Ура! Всё наконец-то работает!

К тому же теперь мы можем перейти по ссылке и посмотреть пост целиком:

Но всё ещё есть проблема — нужно добавить кнопку Add new post, чтобы каждый раз не добавлять пост, вбивая в адресную строку наш URL. Для этого нам нужно добавить всего одну строчку в файл index.html:

Мы создали кнопку, нажав которую, мы перейдём на страницу со ссылкой для создания нового поста. Проверяем:

Кликаем — переходим куда нужно:

Добавили новый пост:

Получаем готовый сайт

Наше приложение приобрело следующую структуру:

В папке templates хранятся HTML-шаблоны: index.html, add_post.html, post.html и base.html. Файл app.py содержит основной код приложения Flask, в котором определены маршруты и функции для работы с базой данных. А файл database.db — это база данных SQLite.

Полный код каждого файла можно посмотреть ниже:

Что запомнить

Наш блог полностью готов к работе. В него можно добавлять новые функции (например, редактирование постов или систему авторизации), а также применять CSS-стили, чтобы он выглядел красивее. Но главное — мы заложили основу для бэкенда и разобрались, как это сделать на Flask.

Вот некоторые важные вещи, которые стоит помнить при работе с фреймворком Flask:

• Flask — это микрофреймворк для создания веб-приложений на языке Python.
• Flask использует декораторы для связывания функций с URL-адресами и методами HTTP.
• Чтобы удобно отображать HTML-страницы, можно использовать шаблоны, которые упрощают разработку.
• Flask не имеет встроенной поддержки баз данных, но к нему всегда можно подключить сторонние — например, SQLite.
• Flask использует объект request для доступа к данным, отправленным пользователем через формы и URL-адреса.
• Flask использует флеш-сообщения для отображения сообщений об ошибках или на веб-странице.

Читайте также:

На Python пишут веб-приложения и нейросети, проводят научные вычисления и автоматизируют процессы. Язык просто выучить, даже если вы никогда не программировали. На курсе вы создадите Telegram-бота, полноценный магазин и аналог популярной соцсети для портфолио, а Центр карьеры поможет найти работу Python-разработчиком.

Узнать про курс

Профессии с трудоустройством

• Графический дизайнер
• Python-программист
• Инженер по тестированию
• Бизнес-аналитик
• Интернет-маркетолог 2023

Новости

+7 (499) 444-90-36 Отдел заботы о пользователях

Москва, Ленинский проспект, дом 6, строение 20

• Премии Рунета 2018, 2019, 2020

• Все направления

• О Skillbox

• Вебинары

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies ��

Мега-Учебник Flask, Часть 1: «Привет, Мир!»

Это первая статья в серии, где я буду документировать мой опыт написания веб-приложения на Python, используя микрофреймворк Flask.

Моя предыстория

Приложение

Приложение, которое я собираюсь разрабатывать как часть этого руководства, является сервером микроблогов, и я решил назвать его microblog. Довольно креативно, я знаю.

Во время нашего прогресса я затрону следующие темы:

• Управление пользователями, включая управление входами, сессиями, ролями пользователя, профилями и пользовательскими аватарами
• Управление базой данных, включая миграцию
• Поддержка форм, включая валидацию полей
• Пагинация длинных списков элементов
• Полнотекстовый поиск
• E-mail уведомления пользователей
• HTML шаблоны
• Поддержка нескольких языков
• Кеширование и другая оптимизация производительности
• Методы отладки для серверов разработки и продакшна
• Установка на продакшн сервер

Как видите, я весьма значительно берусь за все это. Надеюсь, что это приложение, когда я его закончу, станет чем-то вроде шаблона для написания других веб-приложений.

Требования

Если ваш компьютер поддерживает Python 2.6/2.7, то все, вероятно, пойдет хорошо. Приложение из руководства должно нормально работать на Windows, OS X и Linux.

Это руководство подразумевает, что вы знакомы с окном терминала (командной консолью в случае Windows), и вы знаете основные команды для работы с файлами вашей ОС. Если это не так, то перед тем как продолжить, я рекомендую вам ознакомиться с тем, как создавать директории, копировать файлы и т.д., используя консоль.

Наконец, вы должны чувствовать себя свободно в написании кода на Python. Знакомство с модулями и пакетами этого языка также не помешает.

Установка Flask

Ну что ж, приступим!
Если у вас еще не установлен Python 2.7, то берем его отсюда.

Теперь нам нужно установить Flask и несколько расширений, которые мы будем использовать. Я предпочитаю создание виртуального окружения, где все это будет установлено таким образом, что ваша основная установка Python затронута не будет. В качестве бонуса, вам не нужен будет root доступ для установки таким способом.

Итак, открываем терминал, выбираем место, где будет ваше приложение, и создаем новую папку, в которой оно будет содержаться. Назовем эту папку microblog .

Далее скачиваем virtualenv.py и кладем его внутрь новой папки.

Чтобы создать новое окружение введите следующую команду:

Эта команда создаст полноценное окружение Python внутри папки flask

Виртуальные окружения могут быть активированы и деактивированы по желанию. Активированное окружение добавляет путь своей папки bin в path системы, например, когда вы вызываете интерпретатор python, то получаете версию текущего окружения, а не системную. Лично я никогда не любил это свойство, поэтому ни разу не активировал ни одно из моих окружений, вместо этого я просто вызывал тот интерпретатор, который хотел, печатая его путь.

Прим. пер.: Перед тем как вы начнете вводить команды, хочу отметить, что в комментариях к девятой части отметится баг в flask-whooshalchemy, исправленную версию можнонужно скачать отсюда (репозиторий автора)

Если вы пользователь Linux, OS x или Cygwin, установите flask и расширения, вводя следующие команды одну за одной:

Эти команды скачают и установят все пакеты, которые мы будем использовать в нашем приложении.
Учтите, что мы собираемся использовать Flask 0.9, а не последнюю версию. Flask 0.10 не было довольно долго и некоторые расширения не готовы для работы с данной версией. Также есть несколько несовместимостей между пакетами и последней версией pip , которые решены использованием конкретных версий для установки.

Windows пользователей ждет еще один шаг. Наблюдательный читаель заметит, что в списке команд для Windows отсутствует flask-mail . Это расширение не устанавливается чисто на Windows, поэтому мы пойдем обходным путем:

Я не буду вдаваться в подробности, поэтому если вы хотите узнать больше, прочтите документацию к flask-mail.

Если установка всех пакетов прошла успешно, вы можете удалить virtualenv.py , поскольку файл нам больше не понадобится.

«Hello, World!» в Flask

Теперь у вас есть подпапка flask , в вашей папке microblog , содержащая интерпретатор Python и фреймворк Flask с расширениями, которые мы будем использовать в этом приложении. Настало время написать наше первое веб-приложение!

После того как вы переместились папку microblog , давайте создадим основную структуру папок для нашего приложения:

В папку app мы поместим само наше приложение. Подпапка static нужна для хранения статики, такой как картинки, javascript файлы и таблицы стилей. Подпапка templates , очевидно, предназначена для хранения наших шаблонов.

Давайте начнем с создания простого скрипта инициализации нашего пакета app (файл app/__init__.py )

Скрипт выше просто создает объект приложения (наследуя Flask ), затем импортирует модуль представлений, который мы еще не написали.

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

Напишем нашу первую функцию представления (файл app/views.py )

Это весьма простое представление, которое просто возвращает строку для отображения в пользовательском браузере. Два декоратора route создают привязку адресов / и /index к этой функции.

Последним шагом для получения полностью работающего веб-приложения будет создание скрипта, который стартует веб-сервер нашего приложения. Давайте назовем скрипт run.py и положим его в корневой каталог ( microblog/ ):

Скрипт просто импортирует переменную app из нашего пакета app и вызывает метод run для того, чтобы запустить сервер. Помните, что переменная app — экземпляр класса Flask , мы создали его выше.

Для запуска вашего приложения просто запустите скрипт. На OS X, Linux и Cygwin вам следует пометить файл исполняемым перед тем как вы сможете его запустить.

Тогда скрипт может быть вызван просто:

В Windows процесс немного отличается. Нет необходимости помечать файл исполняемым. Вместо этого вам нужно запустить скрипт как аргумент интерпретатора Python:

После старта сервер будет прослушивать порт 5000, ожидая соединений. Теперь откроем браузер и введем следующий URL в адресную строку:

Или же вы можете использовать эту ссылку:

Теперь вы увидели маршрутизацию в действии? Первый URL привязан к / , в то время как второй к /index . Оба маршрута ассоциированы с нашей функцией представления, поэтому они дают одинаковый результат. Если вы введете любой другой маршрут, то получите ошибку, так как только эти два были привязаны к функции представления.

Когда вы закончите играть с сервером вы можете просто нажать Ctrl-C, чтобы остановить его.

И этим я хочу закончить первую часть этого руководства.

Те из вас, кто поленился печатать, могут скачать код из этого руководства ниже:

Обратите внимание, что вам нужно установить Flask, чтобы запустить приложение из архива выше.

Что дальше

В следующей части серии мы изменим наше маленькое приложение для использования HTML шаблонов.

Name already in use

Work fast with our official CLI. Learn more about the CLI.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

introduction to website development with python

• setup your python environment
• build a simple website using python and flask
• use database
• rsync your code to your server
• setup the website to be served under nginx

setup your python environment

From Ubuntu ver 16 check that you have Python 3.5

Setting Up a Virtual Environment

Virtual environments enable you to have an isolated space on your computer for Python projects, ensuring that each of your projects can have its own set of dependencies that won’t disrupt any of your other projects.

Create a folder for your python environments:

Now install python3 pip

By using source bin/activate you have activated your virtual environment and can work on your python project.

build a simple website using python and flask

Start by installing Flask

Now create the app.py file

Now, let us extend the code with some links

Follow the guide here to learn more about python and Flask development

Start by installing Sqlite

Next session we will deploy the website to the server and setup an nginx server hosting our python web application

rsync your code to your server

setup the website to be served under nginx

In the folder «First website» you will be able to find the structure for a flask website project.