17,4 тыс подписчиков

🐍🎸 Курс Django: Портфолио разработчика

31 января 202431 янв 2024

6 мин

Оглавление

Обзор проекта
Ход работы
Установка Django, Pillow и настройки проекта

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

← Часть 2

ORM и основы работы с базами данных

Обзор проекта

Приложение состоит из 3 основных разделов – главной страницы, резюме и секции «Контакты». На главной странице выводятся все работы, перечень услуг (со списками используемых инструментов), и отзывы заказчиков:

Раздел «Обо мне», по сути, является резюме владельца портфолио – здесь можно разместить подробные сведения об образовании, опыте работе и уровне профессиональных навыков:

В разделе «Контакты» перечислены всевозможные способы связи с владельцем портфолио, но самое главное – там еще есть форма для отправки сообщения:

Подробная информация о реализации проекта выводится на отдельной странице. Здесь можно написать о ходе разработки, особенностях проекта и его технологическом стеке:

А теперь расскажем, как это все сделать.

🐍 Библиотека питониста

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека питониста»

🐍🎓 Библиотека собеса по Python

Подтянуть свои знания по Python вы можете на нашем телеграм-канале«Библиотека собеса по Python»

🧩🐍 Библиотека задач по Python»

Интересные задачи по Python для практики можно найти на нашем телеграм-канале«Библиотека задач по Python»

Ход работы

Весь код есть в репозитории: просто скопируйте, если что-то не получается.

Установка Django, Pillow и настройки проекта

Для хранения ссылок на изображения (и автоматической загрузки изображений в папку media) нужна библиотека Pillow – установите ее сразу после Django:

Добавьте приложение portfolio в INSTALLED_APPS в config/settings.py:

Также добавьте в config/settings.py настройки для вывода сообщений:

И пути к папкам static и media:

Для удобства еще можно изменить язык админки на русский, а время – на московское:

Чтобы Django мог работать с папками static и media, нужно добавить эти пути в файл config/urls.py:

Создание базы данных и аккаунта админа

Инициализируйте базу и создайте аккаунт суперпользователя:

Теперь можно приступить к созданию нужных таблиц в БД. Сохраните эти модели в файле portfolio/models.py:

А затем подготовьте и примените миграции (изменения в структуре БД):

Чтобы с БД можно было работать в админке, модели нужно зарегистрировать в файле portfolio/admin.py:

Разберемся, что и как определяют эти модели.

Skill – навыки. Название и уровень навыка позволяют рендерить на фронтенде эти данные:

Визуализацией навыков занимается Bootstrap

Данные из Category используются не только для указания категории, к которой принадлежит проект, но и для фильтрации работ с помощью плагина Isotope.js:

Work, как и модели Author и Testimony, использует ImageField для автоматической загрузки изображений в соответствующие поддиректории media, а также для создания и хранения ссылок на эти изображения. Работу ImageField обеспечивает библиотека Pillow:

Для хранения ссылок на готовые сайты используется поле URLField.

В модели Service хранятся виды услуг. Поскольку в оформлении портфолио используются иконки BoxIcons, в поле icon нужно сохранять название нужной иконки в этом наборе, например, bx bx-laptop. При использовании другого набора, скажем, Font Awesome, нужно вводить названия иконок в соответствующем этому набору формате.

Item – вид инструмента, относящегося к конкретному виду услуг. С помощью данных из Item стек инструментов можно рендерить в виде списка с иконками:

Другой способ отрендерить список в нужном стиле – сохранить список с HTML-тегами и Bootstrap стилями в базе, и вывести его в шаблоне с помощью тега |safe:

Message сохраняет и показывает (в админке) все полученные сообщения. Чтобы получать сообщения на почту, нужно подключить собственный (сложнее) или сторонний (гораздо проще) SMTP-сервер. Здесь показано, как получать сообщения с помощью SMTP Яндекса.

Отзывы заказчиков сохраняются в таблице Testimony, а данные о владельце портфолио – в Author.

Статья по теме

🐍🚀 Создаем рекрутинговый портал на Django: часть 1

Представления и маршруты

Все представления в этом проекте – функциональные. Написание представлений на основе классов мы рассмотрим в одной из последующих статей. Эти представления нужно сохранить в файле portfolio/views.py:

Представление index передает в шаблон index.html все записи, сохраненные в таблицах Work, Category, Service и Testimony, потому что на главной странице выводятся все данные, без сокращений. Если портфолио объемное, имеет смысл ограничить количество работ с помощью среза works = Work.objects.all()[:3], а все работы вывести на отдельной странице с пагинацией. В следующем проекте, посвященном разработке блога, мы разберем процесс создания пагинации.

В таблице Author хранится всего одна запись, поэтому для ее извлечения используется запрос author = Author.objects.get(). В случае создания некой платформы для размещения портфолио, где авторов множество, в эту функцию нужно передавать id или username конкретного владельца.

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

Благодаря использованию слага, ссылка выглядит как http://site.com/work/design-studio/, а при использовании id она бы выглядела как http://site.com/work/5/.

Представление contact обеспечивает обработку данных из контактной формы. В проекте используется обычная HTML-форма, которая самостоятельно отслеживает заполнение полей при помощи тега required. В Django есть отличный модуль для работы с формами, который предоставляет всю возможную функциональность для валидации данных (однако оформление формы разработчику все равно придется делать самостоятельно). В одном из последующих проектов мы разберем использование Django-форм и все способы придания им привлекательного внешнего вида.

Чтобы Django мог обработать конкретную форму (в случае, если их на странице несколько), нужно добавить ссылку на нужное представление в form action:

Кроме того, Django обязательно нужен токен внутри формы:

Все представления приводятся в действие маршрутами. Сохраните эти маршруты в portfolio/urls.py:

И не забудьте включить маршруты portfolio в config/urls.py:

Шаблоны

Для вывода данных на фронтенде портфолио использует несколько шаблонов:

base.html – основной шаблон проекта. Здесь определены навигация и футер (поскольку они выглядят одинаково на всех страницах сайта), а также подключены все нужные скрипты на JavaScript, HTML/CSS-стили Bootstrap, шрифт Google, favicon и т. д.
index.html – как и все последующие шаблоны, наследует все стили base.html с помощью тега {% extends 'base.html' %}. Выводит данные обо всех проектах, услугах, категориях и отзывах.
work_detail.html – показывает подробности реализации каждого проекта.
about.html – резюме владельца.
contact.html – все контакты разработчика и форма для отправки сообщений.

Подведем итоги

При желании готовое портфолио можно экспортировать в статические HTML/CSS/JS-файлы с помощью django-distill, а для обработки контактной формы подключить сервис вроде Formspree. В таком виде портфолио можно будет разместить на GitHub Pages. В одном из последующих проектов мы рассмотрим процесс преобразования динамического Django-сайта в статический.

***