IP-адрес

IP - Internet Protocol - Сетевой адрес

IP-адрес - это просто набор из 32 нулей и единиц, который преобразовали в 10-ричную систему счисления и разбили на 4 части для удобства.

В стандарте IPv4 мы можем использовать только 4 294 967 296 адресов, что может не хватить. На замену ему потихоньку вводится IPv6 - число из 128 единиц и нулей, переведенный в 16-чную С.С. и разбитый на 8 частей. Тут доступно уже сильно больше вариантов…

Статическая И Динамическая Адресация

Статика - задается вручную и не меняется в ходе работы. Динамика - задается автоматически посредством DHCP-сервера из определенного ему пула IP.

Т.к. переход на IPv6 дорог, да и иметь всем конкретный IP не очень безопасно, придумали NAT (Network Address Translation) и его надстройку PAT (Port Address Translation). Суть в том, что много устройств могут выходить в сеть под “одним” белым (внешним) IP. Но есть нюанс, при маршрутизации трафика к белому IP добавляется порт, который уточняет, к какому именно устройству сети и с каким “внутренним” IP направить эти пакеты.

IPv6

При использовании IPv4 с 4 миллиардами адресов, в какой-то момент очевидно столкнулись с проблемой их нехватки. Даже создание PAT и использование локальной адресации не сильно спасло ситуацию.

Решением проблемы стало изобретение IP версии 6, где используется не 32 бита для кодирования адреса, а 128, при этом, увеличение количества бит на единицу, увеличивает кол-во доступных адресов ровно в два раза, следовательно, для 128 бит вакантных адресов примерно…

$$\large 340\ 282\ 366\ 920\ 938\ 463\ 463\ 374\ 607\ 431\ 768\ 211\ 456$$

Это много, даже очень.

IPv5 А что случилось с IPv5? Хороший вопрос … IP-версия 5 была использована для экспериментального проекта под названием “Протокол интернет-потока”. Он определен в RFC, если вас интересуют исторические причины: http://www.faqs.org/rfcs/rfc1819.html

Отличия IPv4 И IPv6

В чем же основная проблема перехода на IPv6? А в том, что нет совместимости протоколов для IPv4 и новых поколений.

• OSPF был обновлен с 2 (IPv4) до 3 (IPv6) версии.
• ICMP был обновлен до ICMP 6.
• ARP был заменен на NDP (Neighborhood Discovery Protocol).

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

Маршрутизация тоже сильно поменялась при переходе на новую версию:

1. RIP -> RIPng (RIP Next Generation)
2. BGP (Border Gateway Protocol) - протокол, объединяющий интернет вместе. MP-BGP - Multi-Protocol BGP, он может маршрутизировать IPv6. EIGRP также поддерживает IPv6.

Надо учитывать, что даже при условии поддержки OSPF и EIGRP адресации обоих версий, это два разных протокола. Из этого следует, что сначала надо поднять протокол для одной версии, а потом для другой. Использование двух версий IP называется двойным стеком.

Поскольку эти два протокола несовместимы, в будущем будет происходить переход с IPv4 на IPv6. Это означает, что вы будете запускать оба протокола в своей сети и, возможно, однажды вы сможете отключить IPv4, так как весь интернет будет настроен на IPv6.

Формат IPv6

2041:0000:140F:0000:0000:0000:875B:131B

Он сильно длиннее, чем IPv4, состоит из 8 частей, каждая часть состоит из 4 шестнадцатиричных чисел.

Таблица перевода шестнадцатиричных чисел в двоичные

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

1. Если есть несколько частей с нулями, то их можно убрать, заменив на :: 2041:0000:140F:0000:0000:0000:875B:131B -> 2041: 0000:140F:: 875B:131B
2. Если есть одиночный блок с нулями, то можно его заменить на один ноль 2041: 0000:140F:: 875B:131B -> 2041:0:140F:: 875B:131B
3. При наличии в блоке значащих чисел и нулями перед ними, нули можно опустить 2001:0001:0002:0003:0004:0005:0006:0007 -> 2001:1:2:3:4:5:6:7

При использовании IPv4 и нехватке адресов, люди начали адаптироваться, придумав частные сети и VLSM (сегментацию сети), использовали NAT и так далее. При переходе на IPv6 такой проблемы уже не будет, т.к. пула доступных адресов будет достаточно для снабжения адресами нескольких планет, таких, как Земля. Протокол IPv6 предлагает два варианта для одноадресной рассылки:

1. Global Unicast
2. Unique Local

Ранее, как отголосок IPv4 существовал третий диапазон адресов “site local”, который начинался с FEC0::/10. Он предназначался для использования во внутренних сетях (аналог 192.168.0.0/24), но был удален из стандарта IPv6.

Global Unicast передачи похожи на публичные IPv4 адреса. Каждая компания, желающая подключится к интернету, получает пул адресов, которые они, на своё усмотрение, делят на более мелкие префиксы, чтобы все устройства сети поулчили IPv6 адрес, притом уникальный во всем мире. Зарезервированный блорк называется префиксом глобальной маршрутизации.

Получение Префиксов

• IANA отвечает за распределение всех префиксов IPv6. Они будут назначать реестрам разные блоки, которыми будут управлять региональные компании.
• ISP, попадлающие под реестр региональной компании, заправшивает блок IPv6. Они получают свой пул адресов, которые могут распределять между провайдерами. !

Некоторые префиксы FD: Unique Local FF: Multicast FE80: Link-Local

Local И Link-Local

После получения клиентом от провайдера префикса, например, 2001: 828:105:: / 48, необходимо его разбить на подсети для различных VLAN и point-to-point соединений, которые могут быть. Поскольку адресное пространство настолько велико, все используют префикс /64 для подсетей. Не имеет смысла брать меньшие подсети. Когда мы используем IPv4, мы вынуждены, для подсетей, дробить хостовую часть!

Тогда, у нас, в целом, будет меньше хостов на подсеть.

 В IPv6 такой проблемы нет:

Префикс Global Routing был назначен провайдером. Последние 64 бита называются идентификатором интерфейса, это эквивалетно части хоста в IPv4.

Путем несложно математики, получается, что у нас 16 бит на подсети, а это около 65536 подсетей (как правило, этого более чем достаточно). В этой же схеме, на хосты в каждой подсети отводится около 18 квинтиллионов хостов.

Если клиент получил префикс 2001: 828: 105:: / 48, то он может создать такие подсети: 

- 2001:828:105:0000::/64;
      - 2001:828:105:0001::/64;
      - 2001:828:105:0002::/64;
      - 2001:828:105:0003::/64;
      - 2001:828:105:0004::/64;
      - 2001:828:105:0005::/64;
      - 2001:828:105:0006::/64;
      - 2001:828:105:0007::/64;
      - 2001:828:105:0008::/64;
      - 2001:828:105:0009::/64;
      - 2001:828:105:000A::/64;
      - 2001:828:105:000B::/64;
      - 2001:828:105:000C::/64;
      - 2001:828:105:000D::/64;
      - 2001:828:105:000E::/64;
      - 2001:828:105:000F::/64;
      - 2001:828:105:0010::/64;
      - 2001:828:105:0011::/64;
      - 2001:828:105:0012::/64;
      - 2001:828:105:0013::/64;
      - 2001:828:105:0014::/64;
      ...

TCP Vs UDP

Основные протоколы транспортного уровня модели OSI (L4).

TCP

• Transmission Control Protocol Перед передачей данных устанавливает соединение трехсторонним рукопожатием.

• SYN - отправка запроса на возможность передачи данных от отправителя.

• SYNACK - подтверждение получающей стороной.

• ACK - начало передачи данных.

После отправки части данных, получающая сторона отправляет подтверждение передачи.

Этот протокол надежный, но очень медленный.

TCP, как протокол, определен в RFC (Request For Comments) 793, выполняет функции, перечисленные в таблице ниже, через механизмы, предоставляемые конечными устройствами. Он полагается на IP для сквозной доставки данных, включая вопросы маршрутизации. Независимо от того, в каких условиях находятся ПК для передачи, TCP работает одинаково на своем уровне. 

Функционал TCP

Поля заголовка TCP

UDP

• User Datagram Protocol Просто бросается файлами в “сторону” получающей стороны. Может теряться часть данных, или их порядок. В случае с видео, звонками, мы можем позволить себе потерю данных.

Подсети и маска подсети

Маска подсети показывает, какая часть IPv4-адреса относится к сети, а какая — к хосту внутри этой сети.

Главное

IPv4-адрес состоит из 32 бит. Без маски нельзя однозначно понять, где заканчивается номер сети и начинается номер хоста.

Пример:

IP:    192.168.123.132
      Маска: 255.255.255.0
      CIDR:  /24

/24 означает, что первые 24 бита — сеть, оставшиеся 8 бит — хосты.

Для примера выше:

• адрес сети: 192.168.123.0;
• часть хоста: 0.0.0.132;
• маска: 255.255.255.0.

CIDR

CIDR-запись /N показывает количество единиц в маске.

Приватные IPv4-диапазоны

Эти адреса не маршрутизируются напрямую в публичном интернете и часто используются вместе с NAT:

• 10.0.0.0/8;
• 172.16.0.0/12;
• 192.168.0.0/16.

Loopback-диапазон:

• 127.0.0.0/8, чаще всего 127.0.0.1 как localhost.

Связи

• IP-адрес
• IPv6
• NAT
• Сетевые порты

NAT

При использовании IPv4 в какой-то момент возникла глобальная проблема нехватки IP-адресов, ведь количество устройств росло семимильными темпами, поэтому долгосрочным решением стал ввод IPv6, но это оказалось очень долго и дорого, поэтому спасением стала технология NAT - Network Assress Translation.

Сети, обычно, проектируются с учетом приватной адресации, например:

• 10.0.0.0/8
• 172.16.0.0/12
• 192.168.0.0/16

Эти адреса позволяют устройствам внутри сети общаться друг с другом, при этом не выводя каждое устройство в сеть на всеобщее обозрение. Чтобы локальному устройству “выйти” в сеть и связаться с внешними устройствами, нужно его внутренний приватный адрес “перевести” во внешний “белый” IP.

Как раз для этого и нужна технология NAT, она позволяет переводить частный адреса в публичные. Это не только позволило, в связке с частными IPv4, экономить адреса, но и добавляет конфиденциальность, т.к. за одним публичным IP могут скрываться десятки, сотни, а то и тысячи устройств.

Маршрутизаторы с поддержкой NAT могут быть настроены на один или несколько “белых” IP-адресов. Этот список называется пулом NAT. Когда устройство из внутренней сети отправляет трафик во внешнюю сеть, маршрутизатор переводит внутренний IP во внешний из пула. Для внешних устройств весь входящий и исходящий трафик выглядит, как имеющий общедоступный IP-адрес.

Маршрутизатор с NAT, обычно, работает на границе со Stub-сетью.

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

В терминах NAT внутренней сетью является набор сетей, подлежащий переводу. Внешняя сеть относится ко всем остальным сетям.

NAT включает 4 типа адресов:

1. Внутренний локальный адрес (Inside Local Address)
2. Внутренний глобальный адрес (Inside Global Address)
3. Внешний местный адрес (Outside local address)
4. Внешний глобальный адрес (Outside global address)

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

• Внутренний адрес (Inside address) - адрес устройства, которое транслируется NAT
• Внешний адрес (Outside address) - адрес устройства назначения
• Локальный адрес (Local address) - это любой адрес, который отображается во внутренней части сети
• Глобальный адрес (Global address) - это любой адрес, который отображается во внешней части сети

Типы NAT

1. Статическая адресная трансляция (Static NAT) - сопоставление один к одному между локальными и глобальными адресами.
2. Динамическая адресная трансляция (Dynamic NAT) - сопоставление многих ко многим между локальными и глобальными адресами.
3. Post Address Translation (PAT) - многоадресное сопоставление локальных и глобальных адресов с использованием портов. Также известен, как NAT Overload.

Static NAT

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

Таблица статического NAT

Dynamic NAT

Динамический, обратно статическому, автоматически назначает и освобождает внешние адреса. Занимаются они по принципу “кто первый пришел, то и занял”. Аналогично статике, требует достаточного количества адресов для удовлетворения общего количества одновременного использования всеми устройствами.

Таблица динамического NAT

Port Address Translation (PAT)

PAT - это совершенно иная по сути работы система. Тут происходит параллельная трансляция многих внутренних адресов на один или несколько внешних адресов. Такая схема чаще всего используется в домашних маршрутизаторах. Хитрость заключается в том, что адресация идет не только по адресам, но и для каждого внутреннего адреса, сопоставляется номер порта. Когда устройство инициирует сеанс TCP/IP, оно генерирует значение порта источника TCP или UDP для уникальной идентификации сеанса. Когда NAT-маршрутизатор получает пакет от клиента, он использует номер своего исходного порта, чтобы однозначно идентифицировать конкретный перевод NAT. PAT гарантирует, что устройства используют разный номер порта TCP для каждого сеанса. Когда ответ возвращается с сервера, номер порта источника, который становится номером порта назначения в обратном пути, определяет, какое устройство маршрутизатор перенаправляет пакеты.

Таблица PAT

А что относительно пакетов IPv4, содержащих данные, отличные от TCP или UDP?
Эти пакеты не содержат номер порта уровня 4. PAT переводит наиболее распространенные протоколы, переносимые IPv4, которые не используют TCP или UDP в качестве протокола транспортного уровня. Наиболее распространенными из них являются ICMPv4. Каждый из этих типов протоколов по-разному обрабатывается PAT. Например, сообщения запроса ICMPv4, эхо-запросы и ответы включают идентификатор запроса Query ID. ICMPv4 использует Query ID. для идентификации эхо-запроса с соответствующим ответом. Идентификатор запроса увеличивается с каждым отправленным эхо-запросом. PAT использует идентификатор запроса вместо номера порта уровня 4.

Связанные заметки

• Terraform — NAT-шлюзы и пулы IP-адресов — типовые сетевые ресурсы, которые Terraform декларативно управляет в облачной инфраструктуре (VPC, subnets)

DNS

DNS - Domain Name System Аналог: контактная книга в телефоне (сопоставление ФИО номеру телефона).

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

Далее идет обращение к локальному DNS серверу (для ПК это файл hosts).

Если ничего нет, то идет обращение к resolver (распознающий). Обычно, это сервер у хостинг-провайдера, но можно задать любой другой.

Тот ищет записи в своем кэше (если его пользователи часто ищут твой сайт) А если не находит, то идет к корневому root серверу, который отвечает за зону ..

Стоит отметить, что все доменные имена, на самом деле, имеют точку в конце адреса: youtube.com. vk.com. mephi.ru. За эту корневую точку и отвечают корневые сервера.

Тот не говорит IP-адрес, но говорит, кто может “подсказать”.

Он нас пересылает на TLD (Top Level Domain) сервер, который отвечает за свою верхнеуровневую доменную зону. Те делятся на:

1. gTLD (Generic Top Level Domain) - доменные зоны, не привязанные к стране.
   • .edu - образование
   • .com - коммерческие
   • .org - организации и некомерческие
2. ccTLD (Country Code Top Level Domain) - привязанные к стране:
   • .ru - Россия
   • .ua - Украина
   • .by - Беларусь
   • .us - США

Т.е. после корневого сервера, resolver пойдет к серверу верхнего уровня, но и тот не скажет ему, куда переходить, тот подскажет, к какому авторитарному серверу обратиться.

Авторитарный сервер или сервер авторитативных имен (Authoritative nameserver) - это сервер, отвечающий за конкретный пул адресов, как правило, такими выступают хостинг-провайдеры, которые регистрируют домены. Вот они как раз говорят, какое нужен ip-адрес.

В терминологии DNS существует 3 вида запросов:

1. Recursive (рекурсивный) - запрос IP-адреса по домену.
2. Iterative (итеративный) - запрос IP-адреса, либо авторитативного DNS сервера.
3. Inverse (обратный) - запрос доменного имени по IP-адресу.

HTTP, HTTPS и HTTP/3

HTTP (HyperText Transfer Protocol) — прикладной протокол для доступа к ресурсам WWW. Клиент и сервер обмениваются отдельными сообщениями: клиент отправляет HTTP-запрос, сервер возвращает HTTP-ответ.

Главное

• HTTP сам по себе не хранит состояние между запросами. Сессии поверх HTTP обычно поддерживаются через cookies или токены.
• HTTP/1.0 часто открывал новое TCP-соединение на каждый обмен запросом и ответом.
• HTTP/1.1 добавил постоянные соединения и конвейерную обработку.
• HTTP/2 использует бинарные фреймы, сжатие заголовков и мультиплексирование нескольких потоков в одном TCP-соединении.
• HTTPS — это HTTP поверх TLS. Он защищает конфиденциальность, целостность и аутентичность соединения.
• HTTP/3 переносит семантику HTTP на QUIC поверх UDP и уменьшает проблему head-of-line blocking.

HTTP-запрос

Стартовая строка запроса состоит из метода, цели запроса и версии протокола:

GET /index.html HTTP/1.1

Основные методы:

HTTP-сообщение

И запрос, и ответ имеют общую структуру:

1. Стартовая строка.
2. Заголовки.
3. Пустая строка.
4. Необязательное тело.

Заголовок записывается как Имя-Заголовка: значение. Имя не чувствительно к регистру.

Частые заголовки запроса:

• Host — конкретный домен или IP, к которому обращается клиент.
• User-Agent — сведения о клиенте: браузер, ОС, версия.
• Accept — какие типы данных клиент готов принять.
• Cookie — cookies клиента.
• Authorization — данные аутентификации, например Bearer-токен.

HTTP-ответ

Строка статуса ответа содержит версию протокола, код состояния и текстовое пояснение:

HTTP/1.1 200 OK

Классы кодов:

• 1xx — информационные.
• 2xx — успешная обработка.
• 3xx — перенаправление.
• 4xx — ошибка клиента.
• 5xx — ошибка сервера.

Частые коды:

• 200 OK — запрос успешно обработан.
• 302 Found — временное перенаправление.
• 400 Bad Request — некорректный запрос.
• 403 Forbidden — доступ запрещён.
• 404 Not Found — ресурс не найден.
• 500 Internal Server Error — внутренняя ошибка сервера.

HTTPS

HTTPS использует TLS поверх TCP-соединения. Порт по умолчанию — 443, у обычного HTTP — 80.

Базовый смысл TLS:

• сервер предъявляет сертификат;
• клиент проверяет сертификат через центр сертификации;
• стороны согласуют ключи;
• дальнейший трафик шифруется и защищается от подмены.

SSL — устаревшее название семейства протоколов, в современных системах фактически используется TLS, но термин “SSL-сертификат” всё ещё распространён.

HTTP/3

HTTP/3 работает поверх QUIC, а QUIC работает поверх UDP. QUIC объединяет надёжную доставку, шифрование TLS 1.3 и управление потоками.

Ключевые отличия:

HTTP/3 не меняет смысл методов, заголовков и кодов ответа. Меняется транспортный слой.

Связи

• TCP vs UDP
• IP-адрес
• DNS
• URI, URL, URN
• Сетевые порты

Сетевые порты

Сетевой порт — числовой идентификатор процесса или сервиса внутри одного IP-адреса. IP-адрес указывает хост, порт указывает приложение на этом хосте.

Главное

• Порт — число от 0 до 65535.
• Порты используются транспортными протоколами, прежде всего TCP и UDP.
• TCP-порт и UDP-порт с одинаковым номером не конфликтуют: это разные пространства портов.
• Для веба важно помнить: HTTP обычно использует TCP 80, HTTPS — TCP 443, альтернативный HTTP часто 8080.

Диапазоны

Частые порты

Связи

• HTTP, HTTPS и HTTP3
• TCP vs UDP
• IP-адрес
• NAT

Веб-аутентификация и авторизация

Идентификация, аутентификация и авторизация — разные этапы контроля доступа.

Термины

• Идентификация — пользователь сообщает, кто он: логин, email, номер телефона, ID.
• Аутентификация — система проверяет, что пользователь действительно тот, за кого себя выдаёт: пароль, одноразовый код, ключ, сертификат.
• Авторизация — система решает, что уже аутентифицированному пользователю разрешено делать.

Коротко: идентификация отвечает на вопрос “кто ты?”, аутентификация — “докажи”, авторизация — “что тебе можно?”.

HTTP-аутентификация

Распространённые схемы:

• Basic — логин и пароль передаются как base64-строка. Base64 не является шифрованием, поэтому Basic нельзя использовать без HTTPS для чувствительных данных.
• Digest — схема с хешированием, исторически безопаснее Basic, но сейчас используется реже.
• Bearer — клиент передаёт токен, обычно в заголовке Authorization.

Пример Bearer:

Authorization: Bearer eyJhbGciOi...

Bearer-токен даёт доступ тому, кто им владеет. Поэтому токены нужно хранить аккуратно, ограничивать срок их жизни и уметь отзывать.

Связи

• OAuth 2.0
• HTTP, HTTPS и HTTP3

OAuth 2.0

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

Где встречается

• вход на сайт через Google, GitHub, VK или другую внешнюю учётную запись;
• мобильное приложение получает доступ к данным в облаке;
• бот или интеграция получает доступ к API сервиса.

Главная идея

Пользователь подтверждает доступ на стороне сервиса-владельца данных. Клиентское приложение получает токен и использует его для запросов к API.

Пароль пользователя при этом остаётся у сервиса-источника, а стороннее приложение получает только ограниченное разрешение.

Участники

• Resource Owner — владелец ресурса, обычно пользователь.
• Client — приложение, которому нужен доступ.
• Authorization Server — сервер, который выдаёт токены.
• Resource Server — API, который принимает токен и отдаёт защищённые данные.

Токены

• Access token — используется для доступа к API.
• Refresh token — используется для получения нового access token без повторного входа пользователя.
• Scope — набор разрешений, ограничивающий действия клиента.

OAuth 2.0 — про авторизацию. Сам по себе он не обязан доказывать личность пользователя как протокол аутентификации; для входа поверх OAuth обычно используют OpenID Connect.

Связи

• Веб-аутентификация и авторизация
• HTTP, HTTPS и HTTP3

URI, URL, URN

URI, URL и URN — способы идентифицировать ресурс. Для экзамена важно различать: URL указывает, где и как получить ресурс; URN даёт устойчивое имя; URI — общее понятие.

URL

URL (Uniform Resource Locator) — адрес ресурса в сети и способ его получения.

Синтаксис:

схема://хост:порт/путь?параметры#фрагмент

Пример:

https://home.mephi.ru/study_groups?level=1&organization_id=1&term_id=20

Компоненты:

• схема — чаще всего http или https;
• хост — домен или IP-адрес;
• порт — необязателен, если используется порт по умолчанию;
• путь — расположение ресурса на сервере;
• query string — параметры после ?;
• фрагмент — часть документа после #, часто соответствует id HTML-элемента.

URN

URN (Uniform Resource Name) — имя ресурса без указания его сетевого расположения.

Синтаксис:

urn:NID:NSS

Пример:

urn:uuid:d5aa821e-52bb-4f7e-a782-7662ed5eaf5c

URN полезен, когда ресурс должен сохранять идентичность независимо от места хранения. Пример: ISBN книги.

URI

URI (Uniform Resource Identifier) — общий идентификатор ресурса. URI может быть URL, URN или совмещать оба подхода.

Синтаксис:

схема:[//[пользователь:пароль@]хост[:порт]][/]путь[?запрос][#фрагмент]

Главное правило: все URL являются URI, но не все URI являются URL.

Связи

• HTTP, HTTPS и HTTP3
• DNS
• IP-адрес

Основы HTML

HTML (Hypertext Markup Language) — язык разметки для структурирования и отображения веб-страниц.

Структура HTML-документа

Базовый шаблон (HTML5):

<!DOCTYPE html>
      <html lang="ru">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Заголовок страницы</title>
      </head>
      <body>
          <!-- Контент страницы -->
      </body>
      </html>

• <!DOCTYPE html> — объявление типа документа.
• <head> — метаданные (не отображаются в браузере).
• <body> — основное содержимое.

Метатег Viewport

Критичен для мобильных устройств. Позволяет контролировать масштаб.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Основные теги и семантика

Тег — элемент разметки, который говорит браузеру, что находится на странице: заголовок, абзац, ссылка, форма, таблица.

Обычно тег состоит из открывающей и закрывающей части:

<p>Текст абзаца</p>

Некоторые теги не имеют закрывающей пары:

<img src="cat.jpg" alt="Кот">
      <br>
      <input type="email" name="email">

Атрибуты уточняют поведение тега: - href — адрес ссылки. - src — путь к изображению или файлу. - alt — текстовое описание изображения. - class — CSS-класс для стилизации. - id — уникальный идентификатор элемента. - name — имя поля формы, с которым данные отправляются на сервер.

Блочные и строчные элементы

• Блочные элементы занимают всю доступную ширину и обычно начинаются с новой строки: <div>, <p>, <h1>, <section>, <form>.
• Строчные элементы находятся внутри строки текста и не ломают поток: <span>, <a>, <strong>, <em>, <code>.

<p>
        Это абзац с <strong>важным текстом</strong> и
        <a href="/about/">ссылкой</a>.
      </p>

Семантические теги

Семантика — это использование тегов по смыслу, а не только ради внешнего вида.

Например, <main> означает главный контент страницы, <nav> — навигацию, <article> — самостоятельный материал. Это помогает браузеру, поисковым системам, скринридерам и другим инструментам лучше понимать структуру страницы.

• <header> — верхняя часть страницы или секции: логотип, заголовок, навигация.
• <nav> — блок навигационных ссылок.
• <main> — основной контент страницы; обычно один на страницу.
• <section> — смысловой раздел страницы.
• <article> — самостоятельный материал: статья, пост, карточка новости.
• <aside> — дополнительный контент: боковая панель, подсказки, связанные ссылки.
• <footer> — нижняя часть страницы или секции.

<body>
        <header>
          <h1>Блог</h1>
          <nav>
            <a href="/">Главная</a>
            <a href="/about/">О проекте</a>
          </nav>
        </header>
      
        <main>
          <article>
            <h2>Что такое HTML</h2>
            <p>HTML описывает структуру веб-страницы.</p>
          </article>
      
          <aside>
            <h2>Похожие материалы</h2>
            <a href="/css/">Основы CSS</a>
          </aside>
        </main>
      
        <footer>
          <p>2026</p>
        </footer>
      </body>

Неправильно заменять всё на <div>, если есть более точный тег. <div> нужен как нейтральный контейнер, когда у блока нет отдельного смыслового значения.

Текст и форматирование

• Заголовки: <h1>…<h6>.
• Абзацы и переносы: <p>, <br>.
• Логическое выделение: <strong> (важное, жирный), <em> (акцент, курсив), <code> (код).
• Контейнеры: <div> (блочный), <span> (строчный).

Списки

• Маркированный: <ul> + <li>.
• Нумерованный: <ol> + <li>.

Ссылки и изображения

• Ссылка: <a href="URL" target="_blank">Текст</a>.
• Изображение: <img src="./path" alt="описание" width="500">.

Таблицы

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

Структура таблицы:

<table>
          <caption>Заголовок таблицы</caption>
          <thead>
              <tr>
                  <th>Заголовок столбца 1</th>
                  <th>Заголовок столбца 2</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Данные 1</td>
                  <td>Данные 2</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td>Итог 1</td>
                  <td>Итог 2</td>
              </tr>
          </tfoot>
      </table>

• Объединение ячеек: colspan (по горизонтали), rowspan (по вертикали).

Формы

Инструмент для сбора данных пользователя.

Базовая форма:

<form action="/handler-url/" method="post">
          <label for="username">Имя:</label>
          <input type="text" id="username" name="name" placeholder="Введите имя">
          
          <button type="submit">Отправить</button>
      </form>

Элементы управления:

• <input> — универсальное поле ввода. Поведение зависит от type.
• <select> + <option> — выпадающий список.
• <textarea> — многострочное поле для текста.
• <button> — кнопка отправки, сброса или обычного действия.
• <fieldset> + <legend> — группировка связанных полей с заголовком группы.

Основные type для <input>: - text — обычная строка. - password — поле пароля, символы скрываются. - email — email; браузер проверяет базовый формат адреса. - number — числовой ввод. - checkbox — независимый флажок: можно выбрать несколько вариантов. - radio — выбор одного варианта из группы с одинаковым name. - file — загрузка файла. - date — выбор даты. - hidden — скрытое поле, не видно пользователю, но отправляется с формой.

<label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      
      <label for="age">Возраст:</label>
      <input type="number" id="age" name="age" min="18" max="99">
      
      <label>
        <input type="checkbox" name="agreement" required>
        Согласен с условиями
      </label>
      
      <fieldset>
        <legend>Способ связи</legend>
      
        <label>
          <input type="radio" name="contact_method" value="email">
          Email
        </label>
      
        <label>
          <input type="radio" name="contact_method" value="phone">
          Телефон
        </label>
      </fieldset>
      
      <label for="city">Город:</label>
      <select id="city" name="city">
        <option value="moscow">Москва</option>
        <option value="spb">Санкт-Петербург</option>
      </select>
      
      <label for="comment">Комментарий:</label>
      <textarea id="comment" name="comment" rows="5"></textarea>

Атрибуты валидации:

• required — поле обязательно для заполнения.
• minlength — минимальная длина текста.
• maxlength — максимальная длина текста.
• min — минимальное значение для числа или даты.
• max — максимальное значение для числа или даты.
• pattern — регулярное выражение, которому должно соответствовать значение.
• type="email" — проверяет, что введён текст, похожий на email.
• type="url" — проверяет, что введён URL.

HTML-валидация работает в браузере до отправки формы. Она удобна для пользователя, но не заменяет проверку на сервере: данные можно отправить в обход браузера.

<form action="/register/" method="post">
        <label for="username">Логин:</label>
        <input
          type="text"
          id="username"
          name="username"
          required
          minlength="3"
          maxlength="20"
          pattern="[a-zA-Z0-9_]+"
        >
      
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
      
        <label for="age">Возраст:</label>
        <input type="number" id="age" name="age" min="18" max="99">
      
        <button type="submit">Зарегистрироваться</button>
      </form>

CSS: Основы и селекторы

CSS (Cascading Style Sheets) — язык таблиц стилей для оформления HTML-документов.

Подключение CSS

1. Внешняя таблица: <link rel="stylesheet" href="style.css">.
2. Внутренние стили: Тег <style> в <head>.
3. Встроенные (inline) стили: Атрибут style у тега.

Селекторы

• Универсальный: * — все элементы.
• По тегу: h1, p.
• По классу: .className.
• По ID: #idName.
• Потомки: div p (все p внутри div).
• Дочерние: div > p (только прямые наследники).
• Соседние: h1 + p (первый p после h1).
• По атрибуту: a[href^="https://"].

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

• :hover, :focus, :active.
• :nth-child(odd/even/n).
• ::before, ::after (используются с content).

Каскадность и Специфичность

Если правила конфликтуют, побеждает то, у которого выше специфичность: 1. Inline стили (1, 0, 0, 0) 2. ID (0, 1, 0, 0) 3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0) 4. Теги и псевдоэлементы (0, 0, 0, 1)

Блочная модель (Box Model)

Каждый элемент в CSS — это прямоугольный блок.

• Content: Содержимое (текст, изображение).
• Padding: Внутренние поля (между контентом и рамкой).
• Border: Рамка.
• Margin: Внешние отступы (между рамкой и соседями).

Box-sizing

• content-box (по умолчанию): width задает только ширину контента.
• border-box: width включает в себя padding и border.

Свойство display

• block: Занимает всю ширину, начинается с новой строки.
• inline: Ширина по контенту, не позволяет задавать width/height.
• inline-block: Строчный элемент, но с возможностью задавать размеры и отступы.
• none: Убирает элемент из документа.

Базовые свойства оформления

Текст и шрифты

• font-family, font-size, font-weight.
• text-align, text-transform (uppercase, capitalize).
• text-decoration (underline, none).
• line-height, letter-spacing.

Фон (Background)

• background-color.
• background-image: url(...).
• background-size: cover / contain.
• background-repeat: no-repeat.
• background-position: center.

Границы и тени

• border: 1px solid black;.
• border-radius: 5px; (скругление углов).
• box-shadow: x y blur spread color;.
• transition: 0.3s; (плавные переходы).

Адаптивная верстка

Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.

Медиазапросы (@media)

Синтаксис:

@media screen and (max-width: 768px) {
          /* Стили для планшетов и телефонов */
      }

• Mobile First: Сначала стили для мобильных, затем min-width.
• Desktop First: Сначала для десктопов, затем max-width.

Flexbox (Flexible Box Layout)

Одномерная модель раскладки (по одной оси).

• Контейнер: display: flex; / inline-flex;.
• Направление: flex-direction: row | column | row-reverse.
• Перенос: flex-wrap: wrap | nowrap.
• Выравнивание по главной оси: justify-content: flex-start | center | space-between | space-around.
• Выравнивание по поперечной оси: align-items: center | stretch.
• Свойства элементов:
  • flex-grow (коэффициент роста),
  • flex-shrink (сжатие),
  • flex-basis (базовый размер),
  • order (порядок отображения).

Grid Layout

Двумерная модель раскладки (строки + столбцы).

• Контейнер: display: grid;.
• Определение сетки:
  • grid-template-columns: repeat(3, 1fr); (3 колонки равной ширины).
  • grid-template-rows: auto 1fr;.
• Единица fr: Доля свободного пространства.
• Отступы: gap: 10px;.
• Размещение элементов:
  • grid-column: 1 / 3; (от 1-й до 3-й линии).
  • grid-row: 2 / span 2; (со 2-й линии на 2 ячейки).
• Именованные области:

.container {
          grid-template-areas: 
              "header header"
              "sidebar content"
              "footer footer";
      }
      header { grid-area: header; }

Сравнение Flex и Grid

• Flexbox: Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
• Grid: Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.

Django Модели и ORM

Django ORM (Object-Relational Mapping) — технология связи объектно-ориентированного кода и реляционной БД. Реализует паттерн Active Record.

Структура проекта

• manage.py: Утилита командной строки.
• settings.py: Конфигурация проекта (БД, INSTALLED_APPS).
• urls.py: Описание маршрутов.
• models.py: Определение таблиц БД.

project/
      ├── manage.py
      ├── project/
      │   ├── settings.py
      │   └── urls.py
      └── app/
          └── models.py

Определение моделей

from django.db import models
      
      class Person(models.Model):
          first_name = models.CharField("Имя", max_length=30)
          age = models.IntegerField(default=18)
          bio = models.TextField(blank=True)
          
          class Meta:
              verbose_name = "Человек"
              ordering = ["-first_name"]

Типы полей

• AutoField — автоинкрементный числовой первичный ключ.
• CharField(max_length=N) — короткая строка фиксированной максимальной длины.
• TextField — длинный текст без обязательного ограничения длины.
• IntegerField — целое число.
• DecimalField(max_digits, decimal_places) — точное десятичное число, удобно для денег и измерений.
• BooleanField — логическое значение True/False.
• DateField — дата без времени.
• DateTimeField — дата и время.
• EmailField — строка с валидацией email-адреса.
• FileField — путь к загруженному файлу.
• ImageField — файл изображения с дополнительной проверкой формата.

class Article(models.Model):
          id = models.AutoField(primary_key=True)
          title = models.CharField(max_length=200)
          body = models.TextField()
          views = models.IntegerField(default=0)
          price = models.DecimalField(max_digits=10, decimal_places=2)
          is_published = models.BooleanField(default=False)
          published_at = models.DateTimeField(null=True, blank=True)
          author_email = models.EmailField()
          attachment = models.FileField(upload_to="files/", blank=True)
          cover = models.ImageField(upload_to="covers/", blank=True)

Отношения

• ForeignKey(Target, on_delete=...) — связь “один ко многим”: у одной записи Target может быть много связанных записей текущей модели.
• OneToOneField(Target, on_delete=...) — связь “один к одному”: каждой записи соответствует максимум одна связанная запись.
• ManyToManyField(Target) — связь “многие ко многим”: записи обеих моделей могут ссылаться на несколько записей другой модели.

on_delete задаёт, что делать с текущей записью, если удаляется связанная запись Target: - CASCADE — удалить текущую запись вместе со связанной. - PROTECT — запретить удаление связанной записи, пока на неё есть ссылки. - SET_NULL — записать NULL в поле связи; требует null=True. - SET_DEFAULT — записать значение по умолчанию; требует default. - DO_NOTHING — ничего не делать на уровне Django, ответственность остаётся на БД и разработчике.

class Author(models.Model):
          name = models.CharField(max_length=100)
      
      
      class Profile(models.Model):
          author = models.OneToOneField(Author, on_delete=models.CASCADE)
          bio = models.TextField()
      
      
      class Book(models.Model):
          title = models.CharField(max_length=200)
          author = models.ForeignKey(Author, on_delete=models.PROTECT)
          co_authors = models.ManyToManyField(Author, related_name="coauthored_books", blank=True)

Миграции

Инструмент для синхронизации моделей с БД. - python manage.py makemigrations — создать файлы миграций. - python manage.py migrate — применить изменения в БД. - python manage.py showmigrations — список статусов миграций.

Работа с QuerySet (Запросы)

Django QuerySet ленивы (вычисляются только при обращении) и поддерживают цепочки методов.

Базовые CRUD операции

• Create: obj = Person.objects.create(name="Ivan") или obj.save().
• Read:
  • Person.objects.all() (все),
  • Person.objects.get(id=1) (один),
  • Person.objects.filter(age__gt=20) (фильтрация).
• Update: Person.objects.filter(id=1).update(age=25).
• Delete: obj.delete() или QuerySet.delete().

# Create
      person = Person.objects.create(first_name="Ivan", age=25)
      
      # Read
      people = Person.objects.all()
      person = Person.objects.get(id=1)
      adults = Person.objects.filter(age__gte=18)
      
      # Update
      Person.objects.filter(id=1).update(age=26)
      
      # Delete
      person.delete()

Поиск по полям (Field Lookups)

• exact, iexact (регистронезависимо).
• gt (>), gte (>=), lt (<), lte (<=).
• contains, icontains.
• in (список), range (диапазон).
• isnull=True.

Person.objects.filter(first_name__exact="Ivan")
      Person.objects.filter(first_name__iexact="ivan")
      Person.objects.filter(age__gt=18)
      Person.objects.filter(age__range=(18, 30))
      Person.objects.filter(first_name__icontains="iv")
      Person.objects.filter(id__in=[1, 2, 3])
      Person.objects.filter(bio__isnull=True)

Оптимизация запросов

• select_related('field') — заранее подтягивает связанную запись через JOIN. Подходит для ForeignKey и OneToOneField, когда у объекта есть одна связанная запись.
• prefetch_related('field') — делает отдельный запрос за связанными объектами и собирает их в Python. Подходит для ManyToManyField и обратных связей, где связанных записей может быть много.
• Проблема N+1 — ситуация, когда Django делает один запрос за списком объектов, а потом ещё по одному запросу на каждый объект в цикле.

# select_related: книга + её автор загружаются одним SQL-запросом
      books = Book.objects.select_related("author")
      
      for book in books:
          print(book.title, book.author.name)

# prefetch_related: авторы загружаются отдельно, затем Django связывает их с книгами
      books = Book.objects.prefetch_related("authors")
      
      for book in books:
          print(book.title, [author.name for author in book.authors.all()])

Агрегация и аннотация

• aggregate(Avg('rating')) — считает одно итоговое значение по всей выборке: среднее, сумму, минимум, максимум, количество. Возвращает словарь, а не QuerySet.
• annotate(total=Count('entries')) — добавляет вычисляемое поле к каждому объекту в выборке.

from django.db.models import Avg, Count
      
      # aggregate: одно итоговое значение по всей таблице книг
      result = Book.objects.aggregate(avg_rating=Avg("rating"))
      print(result["avg_rating"])
      
      # annotate: вычисляемое поле для каждого автора
      authors = Author.objects.annotate(total_books=Count("books"))
      
      for author in authors:
          print(author.name, author.total_books)

Логические условия

• Q-объекты нужны для сложных условий в filter(): OR (|), AND (&), NOT (~).
• F-выражения позволяют сравнивать и изменять поля прямо на стороне БД, не загружая значение в Python.

from django.db.models import F, Q
      
      # Q: рейтинг выше 4 или название содержит Django
      books = Book.objects.filter(
          Q(rating__gt=4) | Q(title__icontains="Django")
      )
      
      # F: увеличить счётчик просмотров прямо в БД
      Book.objects.filter(id=1).update(views=F("views") + 1)

Django: Представления, шаблоны и CBV

Маршрутизация (URL Routing)

• Описывается в urlpatterns с помощью path() и re_path().
• Конвертеры: <int:pk>, <slug:slug>, <uuid:id>.
• Включение других файлов: path('blog/', include('blog.urls')).
• Реверсирование: {% url 'name' %} в шаблонах или reverse('name') в Python.

Конвертеры вытаскивают часть URL, проверяют её тип и передают во view как аргумент: - <str:name> — непустая строка без /; используется по умолчанию. - <int:pk> — целое положительное число. - <slug:slug> — строка для человекочитаемого URL: буквы, цифры, _, -. - <uuid:id> — UUID, например 075194d3-6885-417e-a8a8-6c931e272f00. - <path:subpath> — строка, которая может содержать /.

Маршрутизация связывает URL с view-функцией или view-классом. Имя маршрута (name) нужно, чтобы не хардкодить URL в коде и шаблонах.

# project/urls.py
      from django.urls import include, path
      
      urlpatterns = [
          path("blog/", include("blog.urls")),
      ]

# blog/urls.py
      from django.urls import path
      
      from . import views
      
      app_name = "blog"
      
      urlpatterns = [
          path("", views.post_list, name="post_list"),
          path("<int:pk>/", views.post_detail, name="post_detail"),
          path("tag/<slug:slug>/", views.posts_by_tag, name="posts_by_tag"),
          path("files/<path:subpath>/", views.file_detail, name="file_detail"),
      ]

def post_detail(request, pk):
          # pk уже int
          ...
      
      
      def posts_by_tag(request, slug):
          # slug — строка из URL
          ...

from django.urls import reverse
      
      url = reverse("blog:post_detail", kwargs={"pk": 1})

Представления (Views)

Views принимают HttpRequest и возвращают HttpResponse.

View — это точка входа для запроса. В ней обычно читают данные из БД, проверяют условия и возвращают HTML, JSON, редирект или ошибку.

Функциональные представления (FBV)

FBV — обычная функция. Удобна, когда логика короткая и нестандартная.

from django.shortcuts import render, get_object_or_404
      
      def index(request):
          latest_items = Model.objects.all()[:5]
          return render(request, "app/index.html", {"items": latest_items})

from django.shortcuts import get_object_or_404, render
      
      from .models import Post
      
      def post_detail(request, pk):
          post = get_object_or_404(Post, pk=pk)
          return render(request, "blog/detail.html", {"post": post})

Классовые представления (CBV)

Абстрагируют типичные задачи. Вызываются в URL через .as_view().

• TemplateView: Отображение статического шаблона.
• ListView: Автоматический список объектов (данные в object_list).
• DetailView: Детальная информация об одном объекте (ищет по pk или slug).

CBV — класс с готовым поведением. Django сам вызывает нужные методы класса: например, get() для GET-запроса или get_queryset() для получения списка объектов.

Пример ListView:

from django.views.generic import DetailView, ListView, TemplateView
      
      from .models import Post
      
      
      class AboutView(TemplateView):
          template_name = "blog/about.html"
      
      
      class PostListView(ListView):
          model = Post
          template_name = "blog/list.html"
          context_object_name = "posts"
          paginate_by = 10
      
          def get_queryset(self):
              return Post.objects.filter(is_published=True).order_by("-created_at")
      
      
      class PostDetailView(DetailView):
          model = Post
          template_name = "blog/detail.html"
          context_object_name = "post"

# blog/urls.py
      from django.urls import path
      
      from .views import AboutView, PostDetailView, PostListView
      
      app_name = "blog"
      
      urlpatterns = [
          path("about/", AboutView.as_view(), name="about"),
          path("", PostListView.as_view(), name="post_list"),
          path("<int:pk>/", PostDetailView.as_view(), name="post_detail"),
      ]

Шаблоны (Templates)

Используют Django Template Language (DTL).

Синтаксис

• Переменные: {{ var.attr }}.
• Теги: {% if %}, {% for %}, {% url %}, {% csrf_token %}.
• Фильтры: {{ date|date:"Y-m-d" }}, {{ list|length }}, {{ text|lower }}.

Шаблон получает контекст из view. Например, если view передала {"posts": posts}, в шаблоне доступна переменная posts.

{% for post in posts %}
        <article>
          <h2>
            <a href="{% url 'blog:post_detail' post.pk %}">
              {{ post.title|upper }}
            </a>
          </h2>
      
          {% if post.is_published %}
            <p>{{ post.created_at|date:"Y-m-d" }}</p>
          {% endif %}
        </article>
      {% empty %}
        <p>Постов нет.</p>
      {% endfor %}

Наследование шаблонов

Позволяет избежать дублирования HTML-кода. - Базовый шаблон (base.html): Определяет блоки {% block content %}{% endblock %}. - Дочерний шаблон: Использует {% extends "base.html" %} и переопределяет блоки.

<!-- templates/base.html -->
      <!doctype html>
      <html lang="ru">
        <head>
          <title>{% block title %}Сайт{% endblock %}</title>
        </head>
        <body>
          <main>
            {% block content %}{% endblock %}
          </main>
        </body>
      </html>

<!-- templates/blog/list.html -->
      {% extends "base.html" %}
      
      {% block title %}Посты{% endblock %}
      
      {% block content %}
        <h1>Посты</h1>
      
        {% for post in posts %}
          <a href="{% url 'blog:post_detail' post.pk %}">
            {{ post.title }}
          </a>
        {% endfor %}
      {% endblock %}

Статические файлы (Static)

• Подключаются через {% load static %}.
• Настройки в settings.py: STATIC_URL, STATICFILES_DIRS.
• В продакшне используется команда python manage.py collectstatic.

Статика — это CSS, JavaScript, изображения и другие файлы, которые не генерируются view.

# settings.py
      STATIC_URL = "static/"
      STATICFILES_DIRS = [BASE_DIR / "static"]

{% load static %}
      
      <link rel="stylesheet" href="{% static 'css/app.css' %}">
      <script src="{% static 'js/app.js' %}"></script>

python manage.py collectstatic

Django: Работа с формами и CUD

CUD (Create, Update, Delete) — операции изменения данных: создать, обновить, удалить.

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

Типы форм

• forms.Form — обычная форма, не привязанная к модели. Подходит для поиска, обратной связи, фильтров, отправки email.
• forms.ModelForm — форма на основе модели. Django сам создаёт поля формы по полям модели и умеет сохранять объект через form.save().

Если данные не нужно сохранять в таблицу напрямую — чаще подходит forms.Form. Если форма создаёт или редактирует модель — проще использовать forms.ModelForm.

from django import forms
      
      from .models import Blog
      
      
      class BlogForm(forms.ModelForm):
          class Meta:
              model = Blog
              fields = ["name", "tagline"]
              widgets = {
                  "name": forms.TextInput(attrs={"class": "form-control"})
              }

Жизненный цикл формы в представлении

Обычно view работает так: 1. При GET создаёт пустую форму и показывает страницу. 2. При POST создаёт форму из request.POST. 3. Проверяет данные через is_valid(). 4. Если данные корректные — выполняет действие и делает redirect. 5. Если есть ошибки — снова показывает форму с ошибками.

from django.shortcuts import redirect, render
      
      
      def contact_view(request):
          if request.method == "POST":
              form = ContactForm(request.POST)
      
              if form.is_valid():
                  data = form.cleaned_data
                  send_email(data["email"], data["message"])
                  return redirect("success")
          else:
              form = ContactForm()
      
          return render(request, "contact.html", {"form": form})

Валидация и очистка данных

• is_valid() — запускает проверку формы. После него появляются form.cleaned_data и form.errors.
• Автоматическая очистка — Django превращает строки из HTML-формы в Python-типы: число в int, дату в date, email в строку после проверки формата.
• clean_<fieldname>() — проверка одного конкретного поля.
• clean() — проверка всей формы, когда нужно сравнить несколько полей между собой.

from django import forms
      
      
      class RegisterForm(forms.Form):
          username = forms.CharField(max_length=50)
          password = forms.CharField(widget=forms.PasswordInput)
          password_repeat = forms.CharField(widget=forms.PasswordInput)
      
          def clean_username(self):
              username = self.cleaned_data["username"]
      
              if username.lower() == "admin":
                  raise forms.ValidationError("Это имя нельзя использовать")
      
              return username
      
          def clean(self):
              cleaned_data = super().clean()
              password = cleaned_data.get("password")
              password_repeat = cleaned_data.get("password_repeat")
      
              if password and password_repeat and password != password_repeat:
                  raise forms.ValidationError("Пароли не совпадают")
      
              return cleaned_data

Generic Editing Views (CBV для CUD)

Django предоставляет готовые классы для типовых страниц редактирования: - CreateView — создать объект. - UpdateView — изменить объект; обычно ищет его по pk из URL. - DeleteView — удалить объект; требует подтверждения через POST.

Главная идея: вместо ручной обработки GET, POST, is_valid() и save() можно описать модель, форму, шаблон и URL после успеха.

from django.urls import reverse_lazy
      from django.views.generic import CreateView, DeleteView, UpdateView
      
      from .forms import BlogForm
      from .models import Blog
      
      
      class BlogCreateView(CreateView):
          model = Blog
          form_class = BlogForm
          template_name = "blog/blog_form.html"
          success_url = reverse_lazy("blog_list")
      
      
      class BlogUpdateView(UpdateView):
          model = Blog
          form_class = BlogForm
          template_name = "blog/blog_form.html"
          success_url = reverse_lazy("blog_list")
      
      
      class BlogDeleteView(DeleteView):
          model = Blog
          template_name = "blog/blog_confirm_delete.html"
          success_url = reverse_lazy("blog_list")

Отображение в шаблоне

• {{ form.as_p }} — быстро вывести поля формы в <p>.
• {{ form.as_table }} — вывести поля как строки таблицы.
• Ручное управление нужно, когда важна HTML-разметка, CSS-классы или отдельный вывод ошибок.

<form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Сохранить</button>
      </form>

<form method="post">
        {% csrf_token %}
      
        {% for field in form %}
          <div>
            {{ field.label_tag }}
            {{ field }}
            {{ field.errors }}
          </div>
        {% endfor %}
      
        <button type="submit">Сохранить</button>
      </form>

CSRF-токен

CSRF (Cross-Site Request Forgery) — атака, при которой чужой сайт пытается отправить запрос от имени уже авторизованного пользователя.

Пример: пользователь залогинен в Django-приложении. Он открывает вредную страницу, а она незаметно отправляет POST-запрос на удаление объекта. Без защиты браузер приложит cookies пользователя, и сервер может принять запрос как настоящий.

{% csrf_token %} добавляет в форму скрытое поле с защитным токеном:

<input type="hidden" name="csrfmiddlewaretoken" value="...">

При POST Django сверяет токен из формы с токеном пользователя. Если токена нет или он неправильный, запрос отклоняется.

Короткое правило: во все HTML-формы с method="post" добавлять {% csrf_token %}.