ZANIN блог
Контакты
Крути вниз
Фильтр по:
Категории
//Post title

Разработка сайта на Django - урок 02

10 Дек 2019Категория : Django

Разработка сайта на Django - урок 02

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

Первый простенький тест пишем в файле test.py нашего приложения main.

Тестирование в Django - 1

Пишем в файле test.py следующий код:

from django.test import TestCase
# Импортируем класс TestCase, хотя в PyCharm он уже добавлен
# Создаем свой класс TestPage и наследуемся от импортированного класса TestCase
# Далее пишем метод класса test_home_page_works (имя можете писать для метода любое, главное, чтобы было понятно, если выскочит ошибка при тестировании, то в каком методе. То есть, у вас в приложении может быть много разных страниц, которые вы будете тестировать, поэтому лучше давать понятные имена.
 

class TestPage(TestCase):
        def test_home_page_works(self):
                response = self.client.get('/')
                self.assertEqual(response.status_code, 200)
                self.assertTemplateUsed(response, 'main/main.html')
                self.assertContains(response, 'BookTime')
                self.assertContains(response, 'Главная страница')

Тестирование в Django - 2

Тест пока не трогаем, а проведем еще некоторые работы. После мы переделаем главную страницу более правильным способом с более интересным шаблоном, чтобы в итоге получился красивый сайт с возможностью редактирования данных из аминки сайта. При этом в Django очень удобная система наследования шаблонов (ну или расширения шаблонов, кому как проще воспринять), и еще очень легко натянуть шаблон на Django, и по мне это даже быстрее, чем натянуть шаблон на Wordpress или на Yii2. Чуть ниже в статье я подключу свой покупной шаблон для главной страницы и подключу все стили к шаблону. 

Когда мы в папке templates/layout создаем общий файл base.html, в нем у нас будет header и footer, а также стили и скрипты. При этом в base.html есть элементы, которые есть необходимость редактировать из админки, и они должны также подключаться в шаблон. Например, телефон, email, логотип, и прочие данные. И вот на этом моменте я при начале изучения фреймворка немного завис, пока не нашел информацию про templatetags. Создание своих templatetags очень полезно, но не часто показывается в простых уроках, даже не во всех книгах это хорошо разбирается. Также не слишком часто можно найти хорошие примеры по созданию своих контекстных процессоров.

А пока объясню пару моментов, которые были в конце прошлой статьи, и показаны на скриншоте ниже.

Тестирование в Django - 3

На скриншоте показан код файла base.html

Не забываем прописать {% load static %}, чтобы статические файлы подключились к шаблону. Далее можете скопировать любой блок навигации с сайта bootstrap, я взял блок специально с классом nav-tabs, чтобы показать очень интересные возможности шаблонизатора Django (чуть ниже). В середине нашего файла, по сути между header и footer (для тех, кто знаком с фреймворком Yii2, то там тоже самое) подключается область контента, которая может также расширяться различными виджетами и сайдбарами. То есть когда у нас написаны строки {% block content %} сюда будет подгружаться контент из других шаблонов {% endblock content %}. Имена блока пишем, так как потом таких блоков может быть несколько.

Далее файл main.html

Тестирование в Django - 4

В нашем новом файле main.html первая строка {% extends 'путь к шаблону' %} - говорит какой шаблон мы будем расширять. То есть шаблон base.html будет расширяться (или если проще дополняться информацией из main.html) за счет текущего шаблона. Потом идут такие же блоки {% block content %}{% endblock content %} внутри них находится информация, которая будет загружена в шаблон base.html внутрь таких же блоков с такими же именами.

Теперь проверяем то, что у нас получилось в браузере (не забываем запустить сервер).

Тестирование в Django - 5

Я специально пометил на получившейся странице Title (BookTime) и заголовок H1(Главная страница), чтобы был понятен наш первый тест, код которого приведен выше. Запускаем наш тест командой python manage.py test

Тестирование в Django - 6

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

Тестирование в Django - 7

Но успешный тест не помогает понять, что же он делает. 

Разбираем наш тест и проводим эксперименты с ним.

response = self.client.get('/')
# объект response получает результат обращения к корневой странице нашего сайта (главной странице) self.assertEqual(response.status_code, 200)
# далее мы проверяем, есть ли у объекта response код ответа 200. То есть это стандартные коды HTTP
self.assertTemplateUsed(response, 'main/main.html')
# тут идет проверка того, какой шаблон должен подгружаться и подгружается ли он для отображения главной страницы

Теперь для эксперимента меняю в файле urls.py имя шаблона для главной страницы и запускаем наш тест снова.

Тестирование в Django - 8

Получаем ошибку.

Тестирование в Django - 9

Исправляем имя шаблона обратно, и идем дальше.

self.assertContains(response, 'BookTime')
self.assertContains(response, 'Главная страница')
# давайте попробуем в каком-нибудь из слов изменить всего лишь одну букву, например вместо "Главная" напишем "главная" - с маленькой буквы и запустим тест

Получаем результат - "главная страница" с маленькой буквы не найдена. Надеюсь общий смысл тестирования понятен. Далее будем пробовать писать еще тесты в процессе разработки.

Тестирование в Django - 10

Тестирование мы еще будем пробовать в процессе разработки, а сейчас добавим еще момент, который был на скриншоте в начале статьи. Вот на этом скриншоте у меня в навигации добавлена страница /about-us/ и использованы очень полезные приемы использования шаблонизатора Django. Создадим страницу "О компании".

Тестирование в Django - 3

Для создания этой страницы мы используем подход такой же, как был описан в первой статье. Кратко опишу пару шагов для ее создания, но опять же это краткий вариант, полноценно мы потом создадим под каждый раздел сайта приложение, чтобы была возможность редактирования данных из админки. Краткое создание страницы: создаем шаблон about.html, прописываем в файле urls.py обработку URL-адреса для этой страницы с использованием класса TemplateView.

Тестирование в Django - 3

Расширяем шаблон base.html любым вашим шаблоном, я использовал просто такое

Тестирование в Django - 3

Запускаем сервер, переходим по адресу /about-us/ и получаем

Тестирование в Django - 3

В шаблоне base.html у меня для навигации использован список со стилями  <ul class="nav nav-tabs">, который очень наглядно показывает для чего написано вот это

Тестирование в Django - 3

Данный код

 <a class="nav-link {% if request.path == '/about-us/' %} active {% endif %}" href="/about-us/">О компании</a>

проверяет условие: если был запрос по адресу /about-us/, тогда к классу nav-link добавляется класс active. При переключении адресов ссылки в навигации за счет этого меняют стиль. При моем оформлении это не сильно заметно, но этот прием очень полезен, когда надо делать что-то подобное в реальной навигации, когда при переходе в раздел сайта по пункту меню, пункт в навигации выделяется (внешне).

Тестирование в Django - 3

Сейчас напишем еще пару тестов, а потом полноценно подключим шаблон.

 

Тестирование в Django - 3

Запускаем тест и видим успешное прохождение 2-х тестов

Тестирование в Django - 3

Сделаем неудачный тест для страницы "О компании". Сделаем опечатку в фразе

Тестирование в Django - 3

Запускаем тест и получаем результат: имя теста, в котором произошла ошибка. Поэтому, когда сайт огромный и тестом может быть много, то понятное название метода поможет быстрее найти то, где произошла ошибка. А если бы мы называли тесты именами test_1, test_2, test_50, то как то это не сильно ускорит поиск ошибки.

Тестирование в Django - 3

 

Подключим html шаблон и настроим его редактирование.

Вот такой шаблон будем настраивать.

Тестирование в Django - 3

 

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

01 блок (общий на всем сайте): это навигация, в этом блоке есть логотип (он должен меняться из админки), сама навигация должна добавляться автоматически, значок с количеством товара добавенного в корзину - это будем делать позже через создание контекстного процессора.

02 блок: это слайдер, и текст на нем. В данном блоке должны меняться следующие элементы: изображение слайда, заголовок на слайде, текст под заголовком на слайде. А так, как слайд часто используется для отображения акций, которые иногда повторяются, то есть смысл сделать возможность отключать/включать активность слайда, без его удаления.

03 блок: блок под слайдером состоит из заголовка, текста под заголовоком и два изображения.

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

05 блок: заголовок, текст под заголовком, изображение в центре, 3 элемента слева и справа от изображения, каждый элемент состоит из заголовка, текста и иконки.

06 блок: изображение слева, 2 заголовка, видео, изображение (превью для видео), текст под видео.

07 блок: 4 элемента, в каждом иконка, цифровой счетчик, небольшой текст, а также фон блока, который также можно сменить.

08 блок: 9 элементов в каждом из которых есть иконка, заголовок и текст.

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

10 блок: блок состоит из изображения, заголовка, текста, кнопки, которая состоит из надписи на кнопке и ссылки, ведь куда-то же кнопка должна вести пользователя при клике.

11 блок: это блок с отзывами. Изменять на главной странице сможем фоновое изображение и заголовок на блоке.

12 блок: в данном блоке будут выводится статьи из блога.

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

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

Вот план работ для полноценной разработки главной страницы. Начнем с создания моделей в файле models.py нашего приложения main.

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

Подключить покупной шаблон к Django - 1

Стандартно у нас в папке с нашим проектом лежит файл db.sqlite3 - это наша база данных, если вы самостоятельно не настраиваливи подключение в mysql или postgresql. Файл появился после создания миграций в самом начале. Пока что будем работать с этой базой данных.

В файле models.py мы создаем класс Slider, который наследуется от родительского класса Model. Отдельные поля модели: name, title, description, slideimg - это атрибуты класса.

Поле name будет просто названием слайда, например, если мы создаем какую-то акцию перед праздником, то этот слайд можно так и назвать для себя, на сайт это название выводить не нужно, на сайт уже будем выводить саму акцию, поэтому и создаем такое поле. Данное поле имеет тип CharField - это обычное текстовое поле, которое обязательно требует указать максимальную длину при помощи опции max_length. Далее я часто дописываю опцию help_text - он добавляет дополнительное описание к полю в админке, это очень полезно, если заботитесь при создании сайта об удобном администрировании для пользователя. Опция verbose_name - выводит название поля в админке.

Поле title и description точно такие же, но имеют дополнительную опцию blank=True, это означает, что title или description заполнять необязательно. А на слайде мы можем написать только заголовок без описания, или наоборот, поэтому использую такую опциональную возможность.

Последнее обязательное поле для слайдера, это сам файл изображения. Тип поля для изображения ImageField с его основной опцией upload_to, эта опция указывает в какую папку мы будем загружать файл для слайда. Опция будет работать только при настройке параметров MEDIA_ROOT и MEDIA_URL в файле settings.py, а также при установке библиотеки Pillow.

Далее мы описываем мета класс, в котором пишем названия для единственного (verbose_name) и множественного (verbose_name_plural) числа. Если не написать название для множественного числа, то там где должно быть множественное число в админке, название единственного числа будет оканчиваться на букву "s".

Последний метод пока не пишем, а произведем подготовку к миграции командой python manage.py makemigrations main

Подключить покупной шаблон к Django - 2

После этого вы должны получить следующее

Подключить покупной шаблон к Django - 3

Если ошибок не последовало, то далее производим команду

python manage.py migrate

Продолжение в следующем уроке.

  • 687

Готовы заказать проект?

© ZANIN 2019 / All rights reserved.
Контакты
Close