Начало работы с Django: создание приложения-портфолио

Оглавление

• Изучайте Django
• Понять структуру веб-сайта на Django
• Создайте пример портфолио-проекта с помощью Django
  • Настройка среды разработки
  • Начните свой первый проект на Django
• Добавить приложение Pages
  • Создайте представление
  • Добавить маршрут
  • Добавьте Bootstrap в свое приложение
• Добавьте приложение "Проекты"
  • Определите модель
  • Погрузитесь в оболочку Django
  • Создайте представления
  • Создайте шаблоны
  • Добавьте маршруты
  • Используйте возможности сайта администратора Django
  • Загружать изображения
• Заключение
• Часто задаваемые вопросы

Django - это мощный веб-фреймворк на Python для создания сложных приложений. Он основан на архитектуре Model-View-Template (MVT) и включает встроенные функции, такие как аутентификация, интерфейс администратора и управление базами данных.

В этом руководстве вы шаг за шагом создадите приложение-портфолио, получая практический опыт работы с основными функциями Django. Попутно вы будете работать с моделями, представлениями, шаблонами и интерфейсом администратора для создания полнофункционального веб-приложения. Такой практический подход позволит прояснить структуру и функциональность Django.

К концу этого урока вы поймете, что:

• Проекты на Django начинаются с настройки среды разработки и создания структуры проекта.
• Изучение HTML и CSS перед использованием Django может помочь с оформлением шаблонов, но это не обязательно.
• Django используется для создания веб-приложений на Python, предлагая встроенные функции и масштабируемость.
• Реальным примером Django является веб-сайт-портфолио, который демонстрирует проекты и управляет контентом.

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

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

Изучайте Django

Существует бесконечное множество фреймворков для веб-разработки, так почему вы должны изучать Django, а не какой-либо другой? Прежде всего, он написан на Python, одном из самых читаемых и удобных для начинающих языков программирования.

Примечание: В этом руководстве предполагается среднее знание языка Python. Если вы новичок в программировании на Python, то ознакомьтесь с Основами изучения Python или вводным курсом.

Вторая причина, по которой вам следует изучать Django, - это широта его возможностей. При создании веб-сайта вам не нужно полагаться на какие-либо внешние библиотеки или пакеты, если вы выберете Django. Это означает, что вам не нужно учиться использовать что-либо еще, а синтаксис прост, потому что вы используете только один фреймворк.

Также есть дополнительное преимущество в том, что Django легко обновляется, поскольку основная функциональность находится в одном пакете. Если вам все же понадобится добавить дополнительные функции, есть несколько внешних библиотек, которые вы можете использовать для улучшения своего сайта.

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

Также существует фантастическое сообщество разработчиков Django, так что, если вы застряли, почти всегда есть способ продвинуться вперед, либо заглянув в документы, либо обратившись к сообществу.

Django - это высокоуровневый фреймворк для веб-приложений с множеством функций. Он отлично подходит для новичков в веб-разработке благодаря своей фантастической документации, и особенно хорош, если вы также знакомы с Python.

Понять структуру веб-сайта на Django

Веб-сайт Django состоит из одного проекта, который разделен на отдельные приложения. Идея заключается в том, что каждое приложение обрабатывает отдельную задачу, которую должен выполнять сайт. В качестве примера, представьте себе приложение, подобное Instagram. Существует несколько различных задач, которые оно должно выполнять:

• Управление пользователями: вход и выход из системы, регистрация и так далее
• Лента изображений: Загрузка, редактирование и отображение изображений
• Личные сообщения: Отправка сообщений между пользователями и предоставление уведомлений

Все это отдельные функциональные элементы, поэтому, если бы этот пример был сайтом на Django, то каждый функционал был бы отдельным приложением на Django внутри одного проекта на Django.

Примечание: Проект Django содержит как минимум одно приложение. Но даже если в проекте Django больше приложений, вы обычно называете проект Django веб-приложением .

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

Каждое приложение также имеет свои собственные URL-адреса, а также свои собственные HTML-шаблоны и статические файлы, такие как JavaScript и CSS.

Приложения Django структурированы таким образом, что существует разделение логики. Он поддерживает шаблон model-view-controller, который является архитектурой большинства веб-фреймворков. Основной принцип заключается в том, что каждое приложение включает в себя три отдельных файла, которые обрабатывают три основные логические части по отдельности:

• Модель определяет структуру данных. Обычно это описание базы данных и часто базовый уровень приложения.
• Просмотр отображает некоторые или все данные для пользователя с помощью HTML и CSS.
• Контроллер управляет взаимодействием базы данных и представления.

Если вы хотите узнать больше о шаблоне MVC, ознакомьтесь с Описанием Model-View-Controller (MVC) – с помощью Legos.

В Django архитектура немного отличается. Хотя она основана на шаблоне MVC, Django сам обрабатывает часть контроллера. Нет необходимости определять, как взаимодействуют база данных и представления. Все это сделано за вас!

Шаблон, который использует Django, называется шаблоном model-view-template (MVT). Все, что вам нужно сделать, это добавить несколько конфигураций URL-адресов, к которым будут привязаны представления, а Django сделает все остальное!

Примечание: Представление и шаблон в шаблоне MVT Django составляют представление в шаблоне MVC других веб-фреймворков.

Сайт на Django создается как проект, и вы создаете его с помощью нескольких приложений, каждое из которых выполняет отдельные функции. Каждое приложение соответствует шаблону model-view-template.

Теперь, когда вы знакомы со структурой сайта на Django, взгляните на то, что вы собираетесь создавать!

Создайте пример портфолио-проекта с помощью Django

Прежде чем приступить к любому проекту веб-разработки, рекомендуется составить план того, что вы собираетесь создавать. В этом руководстве вы создадите проект Django на примере следующих приложений:

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

• Проекты: Вы можете ознакомиться с предыдущими проектами веб-разработки здесь. Вы создадите страницу в стиле галереи с интерактивными ссылками на завершенные вами проекты.

Одна из замечательных особенностей Django заключается в том, что вам не нужно рассматривать внешние пакеты Python, потому что в Django включено так много функций. Однако вы должны включить Bootstrap, чтобы помочь вам стилизовать шаблоны.

Создавая эти два приложения, вы познакомитесь с основами моделей Django, функциями просмотра, шаблонами и сайтом администратора Django. Обладая знаниями об этих функциях, вы сможете создавать гораздо больше приложений. У вас также будут инструменты, позволяющие узнать еще больше и создавать сложные проекты на Django.

Настройка среды разработки

Всякий раз, когда вы начинаете новый проект веб-разработки, рекомендуется сначала настроить среду разработки. Создайте новый каталог, в котором будет находиться ваш проект, и cd в него:

$ mkdir rp-portfolio
$ cd rp-portfolio

Как только вы окажетесь внутри каталога rp-portfolio/, рекомендуется создать виртуальную среду для управления зависимостями. Выберите свою операционную систему ниже и используйте команду, зависящую от вашей платформы, для настройки виртуальной среды:

• Окна
• Linux + macOS

PS> python -m venv venv

$ python -m venv venv

Эта команда создаст папку venv в вашем рабочем каталоге. Внутри этого каталога вы найдете несколько файлов, включая копию стандартной библиотеки Python. Позже, когда вы установите новые зависимости, они также будут находиться в этом каталоге. Далее вам необходимо активировать виртуальную среду, выполнив следующую команду:

• Окна
• Linux + macOS

PS> .\venv\Scripts\activate
(venv) PS>

$ source venv/bin/activate
(venv) $

С помощью приведенных выше команд вы создаете и активируете виртуальную среду с именем venv, используя встроенный в Python модуль venv. Надпись в скобках (venv) перед приглашением означает, что вы успешно активировали виртуальную среду.

Теперь, когда вы создали и активировали виртуальную среду, пришло время установить Django. Вы можете сделать это с помощью pip:

(venv) $ python -m pip install Django

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

Начните свой первый проект на Django

Как вы видели в предыдущем разделе, веб-приложение Django состоит из проекта и входящих в него приложений. Убедитесь, что вы находитесь в каталоге rp_portfolio/ и что вы активировали свою виртуальную среду. Затем выполните следующую команду для создания проекта:

(venv) $ django-admin startproject personal_portfolio .

Не забудьте добавить точку (.) в конце приведенной выше команды. Точка не позволяет Django создавать вложенный каталог проектов для вашего портфолио-проекта. В противном случае у вас получится папка personal_portfolio/, содержащая подкаталог personal_portfolio/.

Выполнив команду startproject, как показано выше, вы указали Django создать одну папку personal_portfolio/ в каталоге rp-portfolio/. Ваша структура каталогов должна выглядеть примерно так:

rp-portfolio/
│
├── personal_portfolio/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
├── venv/
│
└── manage.py

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

(venv) $ python manage.py runserver

Затем в вашем браузере перейдите на страницу http://localhost:8000. Вы должны увидеть следующее:

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

Добавить приложение Pages

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

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

(venv) $ python manage.py startapp pages

При этом будет создан каталог pages/ с несколькими файлами:

• __init__.py указывает Python рассматривать каталог как пакет Python.
• admin.py содержит настройки для страниц администрирования Django.
• apps.py содержит настройки для настройки приложения.
• models.py содержит ряд классов, которые ORM Django преобразует в таблицы базы данных.
• tests.py содержит тестовые классы.
• views.py содержит функции и классы, которые обрабатывают данные, отображаемые в HTML-шаблонах.

После того, как вы создали приложение, вам необходимо установить его в свой проект. В rp-portfolio/personal_portfolio/settings.py добавьте следующую строку кода под INSTALLED_APPS:

personal_portfolio/settings.py

# ...

INSTALLED_APPS = [
    "pages.apps.PagesConfig",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

# ...

Чтобы включить приложение в свой пример проекта на Django, вам необходимо добавить ссылку на его класс конфигурации в начале INSTALLED_APPS списка в settings.py.

Добавляя pages.apps.PagesConfig, вы даете Django знать, что приложение pages, которое вы только что создали, существует. Следующим шагом будет создание представления, чтобы вы могли что-то показать посетителю.

Создать представление

Представление в Django - это набор функций или классов внутри views.py файла в каталоге приложения. Каждая функция или класс обрабатывает логику, которую приложение обрабатывает каждый раз, когда пользователь переходит по другому URL-адресу.

Перейдите к файлу views.py в каталоге pages/ и добавьте приведенный ниже код:

pages/views.py

from django.shortcuts import render

def home(request):
    return render(request, "pages/home.html", {})

В этом фрагменте кода вы определяете функцию просмотра с именем home(). Когда вы вызовете эту функцию, она отобразит HTML-файл с именем home.html. Этот файл еще не существует, но вы скоро его создадите.

Примечание: Функция просмотра принимает как минимум один аргумент, request. Объект запроса создается при каждой загрузке страницы и содержит метаданные о запросе страницы. Вы можете узнать больше об объектах запроса в документации Django по объектам запроса и ответа .

Теперь, когда вы создали функцию просмотра, вам нужно создать HTML-шаблон для отображения пользователю. Функция render() ищет HTML-шаблоны в каталоге с именем templates/ в каталоге вашего приложения. Поскольку шаблоны разных приложений могут иметь одинаковые имена, рекомендуется также добавить подкаталог с названием приложения в каталог templates/.

Создайте каталог template/, подкаталог с именем pages/, а затем внутри него файл с именем home.html:

(venv) $ mkdir -p pages/templates/pages
(venv) $ touch pages/templates/pages/home.html

После того, как вы создали папки шаблонов и home.html, откройте HTML-файл в своем редакторе и добавьте следующие строки кода:

pages/templates/pages/home.html

<h1>Hello, World!</h1>

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

Добавить маршрут

Далее вам нужно ввести URL-адрес, чтобы вы могли перейти на только что созданную страницу. Ваша папка personal_portfolio/ содержит файл с именем urls.py. В этот файл вы добавите конфигурацию URL-адреса для приложения pages:

personal_portfolio/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("pages.urls")),
]

Добавляя еще path() к urlpatterns, вы создаете новый маршрут для вашего проекта-примера на Django. Всякий раз, когда вы переходите к корневому каталогу вашего проекта, загружаются маршруты приложения pages. Модуль pages.urls еще не существует, поэтому вам нужно его создать:

$ touch pages/urls.py

Внутри urls.py вам нужно импортировать объект path, а также модуль views приложения. Затем вы определяете список шаблонов URL-адресов, которые соответствуют различным функциям просмотра. На данный момент вы создали только одну функцию просмотра, поэтому вам нужно включить только один маршрут:

pages/urls.py

from django.urls import path
from pages import views

urlpatterns = [
    path("", views.home, name="home"),
]

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

(venv) $ python manage.py runserver

Затем перейдите на страницу http://localhost:8000, чтобы ознакомиться с созданным вами HTML-шаблоном:

Поздравляем! Вы создали свое первое приложение на Django и подключили его к своему проекту. Единственная проблема сейчас в том, что оно выглядит не очень красиво. В следующем разделе вы добавите немного стиля к своему проекту, чтобы сделать его красивее!

Добавьте Bootstrap в свое приложение

Если вы не добавите никакого стиля, то созданное вами приложение будет выглядеть не слишком привлекательно. Вместо того, чтобы углубляться в CSS-стилистику в этом руководстве, вы узнаете, как добавить внешний CSS-фреймворк в свой проект. Использование CSS-фреймворка позволит вам улучшить внешний вид сайта без особых усилий.

Одним из самых популярных CSS-фреймворков является Bootstrap:

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

После добавления в проект Bootstrap предоставляет базовые определения стилей для всех HTML-элементов. Результатом является единообразный внешний вид элементов prose, таблиц и форм во всех веб-браузерах. Кроме того, разработчики могут воспользоваться преимуществами классов CSS, определенных в Bootstrap, для дальнейшей настройки внешнего вида своего содержимого. (Источник)

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

Создайте каталог с именем templates/ в папке rp-portfolio/. Внутри этого нового каталога создайте файл с именем base.html:

(venv) $ mkdir templates/
(venv) $ touch templates/base.html

Как вы видели ранее, каждый проект Django может состоять из нескольких приложений, которые обрабатывают отдельную логику, и каждое приложение содержит свой собственный каталог templates/ для хранения HTML-шаблонов, связанных с приложением. Для шаблонов, которые используются совместно во всем проекте, рекомендуется создать каталог templates/ в корневом каталоге.

Вместо того, чтобы импортировать стили Bootstrap в каждое приложение, вы можете создать шаблон или набор шаблонов, которые будут использоваться совместно всеми приложениями. Если Django умеет искать шаблоны в этом новом общем каталоге, это может избавить от множества повторяющихся стилей.

Внутри base.html добавьте следующие строки кода:

templates/base.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="utf-8">
 5    <title>{% block title %}My Personal Portfolio{% endblock title %}</title>
 6    <link
 7        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
 8        rel="stylesheet"
 9    >
10</head>
11<body class="container">
12{% block page_content %}{% endblock page_content %}
13</body>
14</html>

С помощью приведенного выше кода вы создаете каркас допустимого HTML-документа. Вы также добавляете ссылку на сеть доставки контента Bootstrap (CDN) в строках с 7 по 10. Подобная ссылка - это все, что вам нужно для добавления внешних стилей CSS в ваш проект. Все будущие шаблоны, которые вы создадите, будут расширять base.html и наследовать стиль Bootstrap на каждой странице без необходимости повторного импорта стилей.

Еще одним интересным элементом в родительском шаблоне base.html является использование тегов шаблона {% block %} в строках 6 и 13. С помощью этого тега шаблона вы можете определить блоки содержимого, которые можно использовать или переопределять в дочерних шаблонах, расширяющих родительский шаблон.

Чтобы увидеть это наследование в действии, вам необходимо настроить шаблон home.html:

pages/templates/pages/home.html

{% extends "base.html" %}

{% block page_content %}
    <h1>Hello, World!</h1>
{% endblock page_content %}

Чтобы расширить родительский шаблон, необходимо использовать тег {% extends %} в начале дочернего шаблона.

Обратите внимание, что вы переопределяете только блок page_content, но не блок title. Если вы не переопределяете блок родительского шаблона, то содержимое родительского блока отображается в дочернем шаблоне.

Прежде чем вы сможете увидеть наследование и приложение в новом стиле в действии, вам нужно сообщить вашему проекту-примеру Django, что base.html существует. В настройках по умолчанию регистрируются templates/ каталога в каждом приложении, но не в самом корневом каталоге. В personal_portfolio/settings.py обновите TEMPLATES:

personal_portfolio/settings.py

# ...

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            BASE_DIR / "templates/",
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ]
        },
    }
]

# ...

Вы уже определили константу BASE_DIR в settings.py, и она указывает на корневой каталог вашего проекта. Затем вы соединяете путь с помощью оператора прямой косой черты (/) от pathlib, чтобы указать на templates/ каталог и добавьте его в список "DIRS".

Теперь, когда вы заходите на localhost:8000, вы можете видеть, что страница была отформатирована в несколько ином стиле. Благодаря Bootstrap стиль должен выглядеть одинаково, даже если вы загружаете страницу в другом браузере:

Вот, у вас есть Привет, Мир! сообщение, которое вы указали в home.html, а также заголовок "Мое личное портфолио", который вы указали в base.html. Это означает, что наследование шаблонов работает!

Всякий раз, когда вы хотите создать шаблоны или импортировать скрипты, которые вы собираетесь использовать во всех своих приложениях Django внутри проекта, вы можете добавить их в этот каталог уровня проекта и расширить их внутри шаблонов ваших приложений.

В этом разделе вы узнали, как создать приложение Django для базовых страниц. В следующем разделе вы создадите еще одно приложение для демонстрации проектов веб-разработки и узнаете все о моделях в Django!

Добавить приложение "Проекты"

Любому веб-разработчику, который хочет создать портфолио, нужен способ продемонстрировать проекты, над которыми он работал. Это то, что вы сейчас будете создавать. Вы создадите другое приложение Django с именем projects, которое будет содержать серию примеров проектов, которые вы хотите показать пользователю. Пользователи могут кликать на проекты и просматривать дополнительную информацию о вашей работе.

Убедитесь, что вы находитесь в каталоге rp-portfolio/ и выполните следующую команду в своей консоли:

(venv) $ python manage.py startapp projects

При этом будет создан каталог с именем projects/. Созданные файлы будут такими же, как и те, которые были созданы при настройке приложения pages.

После того, как вы создали приложение projects, вам необходимо установить его в свой проект. В rp-portfolio/personal_portfolio/settings.py добавьте следующую строку кода под INSTALLED_APPS:

personal_portfolio/settings.py

# ...

INSTALLED_APPS = [
    "pages.apps.PagesConfig",
    "projects.apps.ProjectsConfig",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

# ...

Эта строка кода означает, что вашему проекту теперь известно о существовании приложения projects. Далее вы улучшите приложение для портфолио и создадите свою первую модель Django.

Определите модель

Если вы хотите хранить данные для отображения на веб-сайте, вам понадобится база данных. Как правило, если вы хотите создать базу данных с таблицами, содержащими столбцы, вам нужно будет использовать SQL для управления базой данных. Но когда вы используете Django, вам не нужно изучать новый язык, потому что в него встроен объектно-реляционный картограф (ORM).

ORM - это программа, которая позволяет создавать классы, соответствующие таблицам базы данных. Атрибуты классов соответствуют столбцам, а экземпляры классов соответствуют строкам в базе данных. Таким образом, вместо того, чтобы изучать совершенно новый язык для создания вашей базы данных и ее таблиц, вы можете просто написать несколько классов Python.

При использовании ORM классы, представляющие таблицы базы данных, называются моделями. В Django они находятся в модуле models.py каждого приложения Django.

В вашем приложении projects вам понадобится только одна таблица для хранения различных проектов, которые вы будете показывать пользователю. Это означает, что вам нужно будет создать только одну модель в models.py.

Модель, которую вы создадите, будет называться Project и будет содержать следующие поля:

Название	Описание
title	Короткое строковое поле для хранения названия вашего проекта.
description	Увеличенное строковое поле для хранения более длинного фрагмента текста
technology	Поле для ввода строки, но его содержимое будет ограничено выбранным числом вариантов

Чтобы создать модель Project, вам нужно создать новый класс в models.py и добавить следующие поля:

projects/models.py

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)

Модели Django имеют множество встроенных типов полей модели. В этой модели вы использовали только два из них. Вы использовали CharField, который работает для коротких строк и указывает максимальную длину.

A TextField похож на a CharField, но вы можете использовать его для более длинного текста, поскольку у него нет ограничения по максимальной длине.

Теперь, когда вы создали свой класс Project, вам нужен Django для создания базы данных. По умолчанию ORM Django создает базы данных в SQLite, но вы можете использовать другие базы данных, использующие язык SQL, такие как PostgreSQL или MySQL, с помощью Django ORM.

Чтобы начать процесс создания вашей базы данных, вам необходимо создать миграцию. Миграция - это файл, содержащий Migration класс с правилами, которые сообщают Django, какие изменения необходимо внести в базу данных. Чтобы выполнить перенос, введите в консоли следующую команду, убедившись, что вы находитесь в каталоге rp-portfolio/:

(venv) $ python manage.py makemigrations projects
Migrations for 'projects':
  projects/migrations/0001_initial.py
    - Create model Project

Вы должны увидеть, что создали migrations/ внутри projects/, и он включает в себя файл с именем 0001_initial.py. Этот файл содержит инструкции, которые Django должен выполнить с базой данных.

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

(venv) $ python manage.py migrate projects
Operations to perform:
  Apply all migrations: projects
Running migrations:
  Applying projects.0001_initial... OK

При выполнении обеих команд makemigrations и migrate вы добавили projects в свою команду. Это говорит о том, что Django должен просматривать только модели и миграции в приложении projects.

Если вы запустите makemigrations и migrate без флага projects, то будут созданы и применены все миграции для всех моделей по умолчанию в ваших проектах Django, поскольку Django поставляется с несколькими моделями уже сейчас. Это не проблема, но для целей данного раздела вам не нужны миграции для этих моделей.

После запуска миграции вы должны увидеть, что теперь в rp-portfolio/ есть файл с именем db.sqlite3. Это ваша база данных. Теперь вы можете создавать строки в своей таблице для различных проектов, которые вы хотите показать на сайте своего портфолио.

Погрузитесь в оболочку Django

Чтобы добавить новые записи в вашу таблицу базы данных Project, вам необходимо создать экземпляры вашего класса Project. Для этого вы собираетесь использовать оболочку Django.

Оболочка Django похожа на оболочку Python, но позволяет вам получать доступ к базе данных и создавать записи. Чтобы получить доступ к оболочке Django, вы используете другую команду управления Django:

(venv) $ python manage.py shell

После того, как вы получите доступ к командной строке, вы заметите, что в командной строке вместо знака доллара ($) появятся три каретки (>>>). Затем вы можете импортировать свою модель Project:

>>> from projects.models import Project

Затем вы можете создать экземпляр класса Project в оболочке Django:

>>> first_project = Project(
...     title="My First Project",
...     description="A web development project.",
...     technology="Django",
... )
>>> first_project.save()

После создания first_project в качестве нового экземпляра класса Project вам необходимо запустить метод .save(). Это создаст новую запись в вашей таблице проектов и сохранит ее в базе данных. Теперь вы добавили проект, который позже сможете разместить на сайте своего портфолио.

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

>>> second_project = Project(
...     title="My Second Project",
...     description="Another web development project.",
...     technology="Flask",
... )
>>> second_project.save()
>>> third_project = Project(
...     title="My Third Project",
...     description="A final development project.",
...     technology="Django",
... )
>>> third_project.save()
>>> exit()

После того, как вы создали эти два дополнительных проекта, вы запускаете exit(), чтобы выйти из оболочки Django. Затем вы возьмете проекты, которые вы добавили в базу данных, и создадите функцию просмотра, чтобы отображать их пользователям на веб-странице.

Создайте представления

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

В приложении projects вы создадите два разных представления:

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

Вы добавите оба представления в файл views.py, который Django уже создал для вас. Внутри views.py вам нужно будет импортировать класс Project из models.py и создать функцию project_index(), которая отображает шаблон с именем project_index.html. В теле этой функции вы создадите запрос Django ORM, чтобы выбрать все объекты в таблице Project:

projects/views.py

 1from django.shortcuts import render
 2from projects.models import Project
 3
 4def project_index(request):
 5    projects = Project.objects.all()
 6    context = {
 7        "projects": projects
 8    }
 9    return render(request, "projects/project_index.html", context)

В этом блоке кода довольно много всего происходит, так что вы можете его разобрать.

В строке 5 вы выполняете запрос. Запрос - это команда, которая позволяет создавать, извлекать, обновлять или удалять объекты (или строки) в вашей базе данных. В данном случае вы извлекаете все объекты из таблицы projects.

Запрос к базе данных возвращает коллекцию всех объектов, соответствующих запросу, известную как Набор запросов. В этом случае вам нужны все объекты в таблице, поэтому она вернет коллекцию из трех проектов, которые вы создали ранее.

В строке 6 приведенного выше блока кода вы определяете словарь с именем context. В словаре есть только одна запись, projects, которой вы присваиваете свой набор запросов, содержащий все проекты. Django использует словарь context для отправки информации в ваш шаблон.

В строке 9 вы добавляете context в качестве аргумента к render(). Любые записи в словаре context доступны в шаблоне, если вы передадите аргумент context в значение render(). Вам нужно будет создать контекстный словарь и передать его в render в каждой создаваемой вами функции просмотра.

Примечание: Вы также добавляете путь к шаблону с именем project_index.html в render(). Этот шаблон еще не существует. Пока не беспокойтесь об этом. В следующем разделе вы создадите шаблоны.

Далее вам нужно будет создать функцию просмотра project_detail(). Эта функция будет иметь первичный ключ проекта, который рассматривается как дополнительный аргумент:

projects/views.py

 1# ...
 2
 3def project_detail(request, pk):
 4    project = Project.objects.get(pk=pk)
 5    context = {
 6        "project": project
 7    }
 8    return render(request, "projects/project_detail.html", context)

В строке 4 вы выполняете другой запрос. Этот запрос возвращает проект с первичным ключом pk, равным аргументу функции. Первичный ключ - это уникальный идентификатор записи в базе данных. Если вам интересны запросы, которые вы используете в своих представлениях, вы можете нажать на раздел "Сворачиваемый" ниже, чтобы ознакомиться с ними:

 

Ранее вы использовали оболочку Django для создания записей в базе данных. Еще одно замечательное применение оболочки Django - это проверка запросов, которые вы используете в своих представлениях.

Как и раньше, запустите оболочку Django с помощью этой команды:

(venv) $ python manage.py shell

После запуска оболочки Django вы можете импортировать модель Project:

>>> from projects.models import Project

Затем вы можете опробовать запросы, которые вы использовали в project_index():

>>> Project.objects.all()
<QuerySet [<Project: Project object (1)>, <Project: Project object (2)>, ...]>

Набор запросов содержит три проекта, которые вы создали ранее. Число в круглых скобках является первичным ключом проекта. Вы можете использовать первичный ключ, чтобы получить запись в базе данных соответствующего проекта:

>>> project = Project.objects.get(pk=1)
>>> project.title
'My First Project'

>>> project.description
'A web development project.'

В приведенном выше примере вы запрашиваете у базы данных проект с первичным ключом 1 и присваиваете ему значение project. Как только вы получите запись в базе данных, вы сможете получить доступ к ее атрибутам, таким как .title или .description.

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

В строке 8 из views.py вы вводите шаблон с именем project_detail.html. Это еще один шаблон, который пока не существует. Читайте дальше, чтобы создать шаблоны для вашего проекта-портфолио.

Создайте шаблоны

Поскольку вы уже добавили стили начальной загрузки в свой проект, вы можете использовать некоторые предварительно разработанные компоненты, чтобы придать шаблонам привлекательный вид. Два шаблона, с которыми вы будете работать, называются project_index.html и project_detail.html. Создайте их в подпапке projects/ в папке templates/ вашего приложения projects:

(venv) $ mkdir -p projects/templates/projects
(venv) $ touch projects/templates/projects/project_index.html
(venv) $ touch projects/templates/projects/project_detail.html

Для шаблона project_index.html вы создадите сетку из загрузочных карточек, на каждой карточке будут отображаться подробные сведения о проекте. Конечно, количество выставляемых проектов будет меняться с течением времени.

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

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

{% for project in projects %}
   <!-- Do something -->
{% endfor %}

Теперь, когда вы знаете, как работают циклы for, создайте новый файл project_index.html в projects/templates/projects. Вы можете добавить в него следующий код:

projects/templates/projects/project_index.html

 1{% extends "base.html" %}
 2
 3{% block page_content %}
 4<h1>Projects</h1>
 5<div class="row">
 6{% for project in projects %}
 7    <div class="col-md-4">
 8        <div class="card mb-2">
 9            <div class="card-body">
10                <h5 class="card-title">{{ project.title }}</h5>
11                <p class="card-text">{{ project.description }}</p>
12                <a href="{% url 'project_detail' project.pk %}"
13                   class="btn btn-primary">
14                    Read More
15                </a>
16            </div>
17        </div>
18    </div>
19    {% endfor %}
20</div>
21{% endblock %}

Здесь много загрузочного HTML-кода, который не является предметом данного руководства. Не стесняйтесь пока скопировать и вставить его, а также ознакомиться с Bootstrap docs, если вам интересно узнать больше. Вместо того чтобы сосредотачиваться на начальной загрузке, вам следует обратить внимание на несколько моментов в этом блоке кода.

В строке 2 вы расширяете base.html так же, как вы это делали в pages приложении.

В строке 7 вы начинаете цикл for, в котором просматриваются все проекты, в которые передается словарь context.

Внутри этого цикла for вы можете получить доступ к каждому отдельному проекту. Чтобы получить доступ к атрибутам проекта, вы можете использовать точечную запись внутри двойных фигурных скобок. Например, чтобы получить доступ к названию проекта, вы используете {{ project.title }}. Вы можете использовать ту же запись для доступа к любому из атрибутов проекта.

И последнее, на что следует обратить внимание, - это ссылка на строку 13. Это ссылка на страницу project_detail. Доступ к URL-адресам в Django аналогичен доступу к статическим файлам. Код для URL-адреса имеет следующий вид:

{% url '<url path name>' <view_function_arguments> %}

В этом случае вы связываете URL-адрес с именем project_detail, который принимает целочисленные аргументы, соответствующие pk номеру проекта.

Примечание: Этот URL-адрес еще не существует. Вы создадите его в следующем разделе.

После создания шаблона project_index.html пришло время создать шаблон project_detail.html. Код для этого шаблона приведен ниже:

projects/templates/projects/project_detail.html

{% extends "base.html" %}

{% block page_content %}
<h1>{{ project.title }}</h1>
<div class="row">
    <div class="col-md-4">
        <h5>About the project:</h5>
        <p>{{ project.description }}</p>
        <br>
        <h5>Technology used:</h5>
        <p>{{ project.technology }}</p>
    </div>
</div>
{% endblock page_content %}

Код в этом шаблоне имеет ту же функциональность, что и каждая карточка проекта в шаблоне project_index.html. Единственным отличием является введение некоторых столбцов начальной загрузки.

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

Добавьте маршруты

Как только вы определите функции просмотра, вам нужно будет привязать их к URL-адресам. Начните с создания файла projects/urls.py, в котором будет храниться конфигурация URL-адреса для приложения projects. Этот файл должен содержать следующий код:

projects/urls.py

 1from django.urls import path
 2from projects import views
 3
 4urlpatterns = [
 5    path("", views.project_index, name="project_index"),
 6    path("<int:pk>/", views.project_detail, name="project_detail"),
 7]

В строке 5 вы подключаете корневой URL-адрес приложения projects к представлению project_index. Немного сложнее подключить представление project_detail. Вы хотите, чтобы URL-адрес был /1, /2, или любым другим числом, соответствующим первичному ключу проекта. Значение pk в URL-адресе совпадает с значением pk, передаваемым в функцию просмотра, поэтому вам нужно динамически генерировать эти URL-адреса в зависимости от того, какой проект вы хотите просмотреть. Для этого вы используете обозначение <int:pk>.

Это обозначение сообщает Django, что значение, передаваемое в URL, является целым числом, а имя его переменной равно pk. Это параметр вашей функции просмотра project_detail().

После настройки маршрутов вашего приложения projects вам необходимо привязать эти URL-адреса к URL-адресам основного проекта Django. В поле personal_portfolio/urls.py добавьте следующую выделенную строку кода:

personal_portfolio/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("pages.urls")),
    path("projects/", include("projects.urls")),
]

Эта строка кода содержит все URL-адреса в приложении projects, которые содержат префикс projects/. Теперь есть два полных URL-адреса, к которым вы можете получить доступ в своем проекте.

Если вы запустите сервер Django и зайдете на страницу http://localhost:8000/projects, то вы должны увидеть что-то вроде этого:

Если вы перейдете по ссылке на проект или перейдете непосредственно на страницу http://localhost:8000/projects/1, то увидите страницу подробных сведений о первом созданном вами проекте.

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

Используйте возможности сайта администратора Django

Возможно, вы уже заметили, что Django напомнил вам о некоторых неприменимых миграциях, когда вы запускали сервер разработки Django.

Теперь пришло время, наконец, применить эти уже существующие миграции:

(venv) $ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, projects, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying sessions.0001_initial... OK

Взглянув на список примененных миграций, вы получите представление о функциях, которыми уже оснащен Django. Например, у вас уже есть авторизация пользователей и сайт администратора Django.

Чтобы получить доступ к сайту администратора Django, вы должны сначала создать учетную запись администратора для себя:

(venv) $ python manage.py createsuperuser
Username (leave blank to use 'root'): admin
Email address: admin@example.com
Password: RealPyth0n
Password (again): RealPyth0n
Superuser created successfully.

При выполнении команды управления createsuperuser вам будет предложено выбрать имя пользователя, указать адрес электронной почты и установить пароль. Используйте свои собственные данные для заполнения этих полей и обязательно запомните их.

Снова запустите сервер разработки Django, перейдите по ссылке http://localhost:8000/admin и войдите в систему, используя свои учетные данные:

Это ваш личный кабинет администратора! Всего несколько настроек позволят вам управлять проектами вашего портфолио, не выходя из окна браузера, а не из оболочки Django.

Чтобы получить доступ к вашей модели Project на сайте администратора Django, вам необходимо сначала зарегистрировать модель. Откройте admin.py файл вашего projects приложения и добавьте приведенный ниже код:

projects/admin.py

from django.contrib import admin
from projects.models import Project

class ProjectAdmin(admin.ModelAdmin):
    pass

admin.site.register(Project, ProjectAdmin)

При повторном посещении http://localhost:8000/admin вы можете заметить, что ваши проекты отображаются на сайте администратора.

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

Загружать изображения

Рекомендуется продвигать свои проекты с помощью изображений, чтобы привлечь внимание посетителей. Для этого вы добавите новое поле в модель Project и загрузите изображения на сайт администратора Django.

Для начала откройте models.py и добавьте в него поле image:

projects/models.py

from django.db import models

class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)
    image = models.FileField(upload_to="project_images/", blank=True)

В вашей модели Project вы определяете FileField с вложенной папкой с именем project_images/. Именно там Django должен хранить изображения, когда вы их загружаете.

Вы также устанавливаете для blank значение True. Таким образом, ничего страшного, если проект не содержит изображения.

Примечание: Вы могли бы быть еще более откровенным и использовать символ ImageField для своих изображений. Если вы сделаете это, то сначала вам необходимо установить pillow в свою среду разработки.

Django создает путь к вашей папке загрузки, используя параметр MEDIA_ROOT и значение upload_to. Чтобы собрать все изображения в папку uploads/ и предоставить их с URL-адресом media/, добавьте эти две строки в settings.py:

personal_portfolio/settings.py

# ...

MEDIA_ROOT = BASE_DIR / "uploads/"
MEDIA_URL = "media/"

Параметр MEDIA_ROOT определяет папку, в которой будут храниться медиафайлы в вашей файловой системе. MEDIA_URL - это доступный пользователю URL-адрес медиапапки, которую вы предоставляете посетителям.

Чтобы успешно обслуживать медиафайлы, вам также необходимо зарегистрировать статические маршруты к вашим медиафайлам в urls.py внутри personal_portfolio/:

personal_portfolio/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("pages.urls")),
    path("projects/", include("projects.urls")),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

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

(venv) $ python manage.py makemigrations projects
Migrations for 'projects':
  projects/migrations/0002_project_image.py
    - Add field image to project

(venv) $ python manage.py migrate projects
Operations to perform:
  Apply all migrations: projects
Running migrations:
  Applying projects.0002_project_image... OK

Посетите http://localhost:8000/admin и перейдите к Проектам. Когда вы нажмете на проект, вы увидите новое поле Изображение и возможность выбрать файл:

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

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

Как только все ваши проекты будут содержать изображения, вы можете добавлять их в свои шаблоны. Начните с project_index.html:

projects/templates/projects/project_index.html

 1{% extends "base.html" %}
 2
 3{% block page_content %}
 4<h1>Projects</h1>
 5<div class="row">
 6{% for project in projects %}
 7    <div class="col-md-4">
 8        <div class="card mb-2">
 9            {% if project.image %}
10                <img class="card-img-top" src="{{ project.image.url }}">
11            {% endif %}
12            <div class="card-body">
13                <h5 class="card-title">{{ project.title }}</h5>
14                <p class="card-text">{{ project.description }}</p>
15                <a href="{% url 'project_detail' project.pk %}"
16                   class="btn btn-primary">
17                    Read More
18                </a>
19            </div>
20        </div>
21    </div>
22    {% endfor %}
23</div>
24{% endblock %}

В строках с 10 по 12 вы проверяете, содержит ли проект изображение. Если изображение проекта существует, вы загружаете URL-адрес изображения и показываете его посетителю. Перейдите по ссылке http://localhost:8000/projects/ и убедитесь в этом сами:

Наконец, вы можете добавить изображение в шаблон project_detail.html. Как и раньше, вы поместите тег image в условие if:

projects/templates/projects/project_detail.html

{% extends "base.html" %}

{% block page_content %}
<h1>{{ project.title }}</h1>
<div class="row">
    <div class="col-md-8">
        {% if project.image %}
            <img src="{{ project.image.url }}" width="100%">
        {% endif %}
    </div>
    <div class="col-md-4">
        <h5>About the project:</h5>
        <p>{{ project.description }}</p>
        <br>
        <h5>Technology used:</h5>
        <p>{{ project.technology }}</p>
    </div>
</div>
{% endblock page_content %}

С помощью другого HTML-элемента и класса столбцов Bootstrap вы размещаете изображение слева от информации о проекте. Вы можете увидеть макет в действии, посетив страницу с подробными сведениями о проекте. Например, взгляните на http://localhost:8000/projects/1/:

Наличие изображения для каждого проекта действительно придает блеск вашему портфолио. Отличная работа!

Включение изображений в приложение projects было последним шагом в этом руководстве для вашего проекта Django portfolio. Если вы хотите сравнить свой код с окончательным кодом этого руководства, вы можете перейти по ссылке ниже:

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

Заключение

Поздравляем, вы дошли до конца урока! Вы уже многое изучили, поэтому продолжайте практиковаться и создавать. Чем больше вы будете создавать, тем понятнее это будет становиться и тем реже вам придется возвращаться к этому уроку. Вы также можете ознакомиться с другими учебными пособиями по Django для веб-разработки пути обучения.

В этом руководстве вы должны:

• Узнал о преимуществах использования Django
• Исследовал архитектуру сайта на Django
• Настройка нового проекта Django с использованием нескольких приложений
• Построенные модели и виды
• Созданы и подключены Шаблоны Django
• Загруженные изображения на ваш сайт Django

Кроме того, вы ознакомились с сайтом администратора Django и подключили свои представления и шаблоны к настройкам URL-адресов, чтобы создать свой собственный сайт-портфолио.

Часто задаваемые вопросы

Теперь, когда у вас есть некоторый опыт работы с примерами проектов Django на Python, вы можете использовать приведенные ниже вопросы и ответы, чтобы проверить свое понимание и резюмировать то, что вы узнали.

• Django - это веб-фреймворк высокого уровня на Python, который обеспечивает быструю разработку и чистый, прагматичный дизайн. Он включает встроенные функции, такие как аутентификация, интерфейс администратора и управление базами данных, что позволяет разработчикам сосредоточиться на создании приложений, а не на выполнении повторяющихся задач.
• Вы начинаете с Django, настраивая виртуальную среду, устанавливая Django с помощью pip, а затем создаете новый проект с помощью django-admin startproject. После настройки вашего проекта вы создаете в нем приложения для работы с различными функциональными возможностями.
• Перед изучением Django может пригодиться базовое понимание HTML и CSS, но это не обязательно. Это полезно, поскольку позволяет эффективно разрабатывать интерфейс ваших веб-приложений.
• Реальным примером Django является веб-сайт-портфолио, на котором вы можете продемонстрировать свои проекты. В этом руководстве вы создали такой веб-сайт, демонстрирующий возможности Django по эффективному управлению моделями, представлениями и шаблонами.

Вернуться на верх