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

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

16 Ноя 2020Категория : Django

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

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

По плану этот блок: блок под слайдером состоит из заголовка, текста под заголовком и двух изображений.

Создание проекта Django в PyCharm - урок 5

Так это выглядит в html.

Создание проекта Django в PyCharm - урок 5

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

Пишем модель для блока в файле models.py в приложении main, там где у нас модель Slider:

from django.db import models
from django.core.validators import MaxLengthValidator
from django.core.exceptions import ValidationError

def validate_only_one_instance(obj):
    model = obj.__class__
    if (model.objects.count() > 0 and obj.id != model.objects.get().id):
        raise ValidationError("Нельзя добавлять еще элементы, можно исправлять элемент: %s" % model.__name__)


class Slider...
...


class WelcomeBlock(models.Model):
    name = models.CharField(max_length=50, help_text='Название элемента или блока до 50 символов', verbose_name='Название блока')
    title = models.CharField(blank=True, max_length=100, help_text='Заголовок до 100 символов, заполнять необязательно', verbose_name='Заголовок')
    description = models.CharField(blank=True, max_length=200, help_text='Описание до 200 символов, заполнять необязательно', verbose_name='Описание')
    img_1 = models.ImageField(blank=False, upload_to='main/', help_text='Лучше использовать png', verbose_name='Добавить изображение - 1')
    alt_1 = models.CharField(blank=True, max_length=100, help_text='Атрибут ALT до 100 символов, заполнять необзательно', verbose_name='ALT - 1')
    img_2 = models.ImageField(blank=False, upload_to='main/', help_text='Лучше использовать png', verbose_name='Добавить изображение - 2')
    alt_2 = models.CharField(blank=True, max_length=100, help_text='Атрибут ALT до 100 символов, заполнять необзательно', verbose_name='ALT - 2')

    class Meta:
        verbose_name = 'Блок 1.1: Под слайдером'
        verbose_name_plural = 'Блок 1.1: Под слайдером'

    def __str__(self):
        return self.name

    def clean(self):
        validate_only_one_instance(self)

Для наглядности добавлю скриншоты:

Создание проекта Django в PyCharm - урок 5

Создание проекта Django в PyCharm - урок 5

Создание проекта Django в PyCharm - урок 5

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

from django.core.exceptions import ValidationError

def validate_only_one_instance(obj):
    model = obj.__class__
    if (model.objects.count() > 0 and obj.id != model.objects.get().id):
        raise ValidationError("Нельзя добавлять еще элементы, можно исправлять элемент: %s" % model.__name__)

В саму модель добавляем метод:


    def clean(self):
        validate_only_one_instance(self)

При добавлении еще одного элемента появится сообщение:

Создание проекта Django в PyCharm - урок 5

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

Создание проекта Django в PyCharm - урок 5

Подключаем нашу модель в админку:

Создание проекта Django в PyCharm - урок 5

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

Создание проекта Django в PyCharm - урок 5

Чтобы вывести объект модели:

welcome_block = WelcomeBlock.objects.first()

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

Чтобы получить запись конкретного поля:

welcome_block = WelcomeBlock.objects.first()
field_title = 'title'
field_object_title = WelcomeBlock._meta.get_field(field_title)
field_value_title = field_object_title.value_from_object(welcome_block)

Создание проекта Django в PyCharm - урок 5

В шаблоне используем эти значения.

Создание проекта Django в PyCharm - урок 5

Не забываем создать шаблон для templatetags.

Создание проекта Django в PyCharm - урок 5

Вставляем наши значения в шаблон.

Создание проекта Django в PyCharm - урок 5

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

Создание проекта Django в PyCharm - урок 5

Используем фильтр safe

Создание проекта Django в PyCharm - урок 5

Получаем результат:

Создание проекта Django в PyCharm - урок 5

Но так как предыдущий способ вывода информации в шаблон не очень удобный, так как кода пришлось написать много, то лучше сделать таким способом:

Создание проекта Django в PyCharm - урок 5

Так как мы вывели всего одну строку из базы данных таким способом (один объект, а не массив объектов)

welcome_block = WelcomeBlock.objects.first()

То получать значения можно без цикла, таким способом:

Создание проекта Django в PyCharm - урок 5

 

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

 

Создание проекта Django в PyCharm - урок 5

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

Создаем модель:

Создание проекта Django в PyCharm - урок 5

Добавим функцию, которая ограничивает добавление 3 элементов. Так как счет начинается с 0, то в условии функции ставим 2 (то есть 0, 1, 2 - всего 3 элемента).

Создание проекта Django в PyCharm - урок 5

После написания нашей модели выполняем следующие команды:

python manage.py makemigrations main

python manage.py migrate main

Далее переходим в файл admin.py в нашем приложении main и добавляем в него:

Создание проекта Django в PyCharm - урок 5

После этого заполняем данные в админке:

Создание проекта Django в PyCharm - урок 5

Далее выведем эти данные в шаблон через templatetags, как и прошлые блоки.

Создание проекта Django в PyCharm - урок 5

Только эта модель имеет при объекта, поэтому выводим их все разом, а в шаблоне мы выводим их циклом.

Создание проекта Django в PyCharm - урок 5

Добавляем тег в шаблон:

Создание проекта Django в PyCharm - урок 5

Получаем результат вывода:

Создание проекта Django в PyCharm - урок 5

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

Создание проекта Django в PyCharm - урок 5

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

Создание проекта Django в PyCharm - урок 5

В этом случае отлично подойдет использование встроенного шаблонного тега cycle.

В верстке каждый элемент выглядит следующим образом:

Создание проекта Django в PyCharm - урок 5

Нам надо оставить порядок для background-color. Но сначала создадим модель и выведем информацию в шаблон.

Создадим модель CountBlock в файле models.py в приложении main.

Создание проекта Django в PyCharm - урок 5

Создание проекта Django в PyCharm - урок 5

Выполняем команды:

python manage.py makemigrations main

python manage.py migrate main

Создание проекта Django в PyCharm - урок 5

Заполняем данные в админке:

Создание проекта Django в PyCharm - урок 5

Создаем снова тег:

Создание проекта Django в PyCharm - урок 5

Создание проекта Django в PyCharm - урок 5

Из нового в этом примере - это использование тега cycle. У нас есть 4 цвета для оформления блоков, они всегда стоят в одном порядке. И тег cycle выводит значения цветов в том же порядке. То есть, если бы мы выводили записи из блога, то для записей из блога мы можем ограничить количество выводимых записей например по 4. И так как у нас для каждого из четырех блоков имеется свой цвет, то тег cycle для первого элемента из цикла for выведет первое значение, для второго элемента - второе значение и так далее. Или например, если записей будет выводиться 4, а значений в тег cycle передали 2, то для третьего элемента в цикле тег отдаст первое значение, а для четвертого 2-е, и так далее.

Создание проекта Django в PyCharm - урок 5

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

  • 687

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

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