«Реализация веб-приложения на Django»
жүктеу/скачать 0,8 Mb.
|
КР ОРСП Орлик ИСТД-31-
- Бұл бет үшін навигация:
- 2.1 Подготовка к работе
- 2.2 Реализация веб-приложения
2 Практическая частьИсходя из задания курсовой и представленного ранее материала, при создании приложения я должен буду выполнить следующие задачи: определиться с его назначением и функционалом; организовать рабочую среду (скачать ПО, необходимое для реализации); подготовить дизайн страниц приложения, позволяющий пользователю интуитивно понять его идею и принцип работы; сделать сайт, используя фрэймворк Джанго (изготовить backend и frontend; связать эти компоненты). Для начала сформулируем цель и принцип работы индивидуального проекта. Я буду создавать приложение для хранения записей о книгах - некий каталог карточек с информацией (автор, описание, жанр, возрастное ограничение). Приложение будет иметь несколько экранов: Главный (с кнопками добавления записи и просмотра имеющихся записей); Создания (редактирования) записи; Просмотра карточек с возможностью фильтрации. 2.1 Подготовка к работеДля реализации проекта понадобятся следующие программы: среда разработки - Visual Studio Code; интерпретатор Python последней версии (Python 3.9); пакетный менеджер pip; инструмент для изоляции проектов venv (для создания виртуального окружения); фрэймворк Django последней версии (Django 1.11), с помощью которого будет создаваться веб-сайт (устанавливаем фрэймворк в виртуальном окружении проекта); система контроля версий Git (нужна для сохранения истории разработки); графический редактор Figma для подготовки макетов. После того как все установлено, перейдем к созданию веб-сайта. 2.2 Реализация веб-приложенияСначала сделаем макеты страниц в Figma (рис.1, рис.2, рис.3). Для этого я взял дизайнерскую концепцию в стиле конструктивизма из своих старых работ по истории дизайна: Рис.1. Главный экран Рис.2. Экран добавления записи Рис.3. Страница просмотра записей картотеки с функционалом фильтрации Далее создаём виртуальное окружение и активируем его, устанавливаем Django, генерируем проект командой django-admin startproject my_django_project и выполняем следующие итерации: Создаём файл базы данных и применяем миграции к базе (сначала команда py manage.py runserver, затем py manage.py migrate); Создаём приложение командой py manage.py main_app. Структура проекта должна принять следующий вид: Регистрируем приложение (см. рис.4): Рис.4 Регистрация приложения в системе на строке 40 Добавляем в проект папку для шаблонов и указываем путь до неё в настройках (см. рис. 5). Рис.5 Настройка доступа к шаблонам в проекте на строке 58 Для хранения статических файлов (картинок, шрифтов, стилей) создадим папку static в директории проекта. Настроим путь до неё (см. рис. 6). Рис.6. Регистрация директории со статикой на строке 122 Скачиваем шрифт Konstruktor и картинку с галочкой (нужно для стилизации выбора чекбоксов и радиобоксов), добавляем это в директорию static в папки fonts и img соответственно. Добавляем файл style.css в директорию static (см. Рис.7). Рис. 7. Структура директории static Верстаем 4 страницы по нашим макетам: для главного экрана, для экрана добавления записи, для экрана редактирования записи и экрана просмотра всех записей. Добавляем их в папку templates (см. рис.8). Для подключения стилей используем инструкции на строках 1 и 9 (см. рис.9) Рис.8. Шаблоны проекта Рис.9. Подключение стилей к шаблону. Сейчас проект имеет следующую структуру (см. рис.10). Рис.10. Структура индивидуального проекта Связываем http-запрос с http-ответом в файле urls.py (рис.11). Рис.11 Маршрутизация http-запросов Прописываем логику приложения во views.py. Импортируем функцию рендера шаблонов и модель для работы с базой данных (см. рис.12) Рис.12 Импорт библиотек Создаём списки для хранения вариантов выбора жанра и возрастного ограничения (см. рис.13): Рис.13 Инициализация структур данных Реализуем view-функцию загрузки главной страницы (рис.14). Рис.14 Реализуем view-функцию для добавления записи (карточки книги с информацией об авторе, жанре, содержании и возрастном ограничении) в базу данных (рис. 15). Рис.15 Добавляем предикаты для реализации фильтра записей (рис.16). Рис.16 Добавляем view-функцию для отображения записей и работы с ними (рис. 17). Рис.17 Добавляем view-функцию с логикой редактирования карточки книги (рис.18). Рис.18 Реализуем view-функцию для удаления записи из базы данных (рис.19). Рис.19 Запускаем проект командой py manage.py runserver. Отображается главная страница – значит, мы всё сделали верно. жүктеу/скачать 0,8 Mb. Достарыңызбен бөлісу:
|