lectures/django/lecture_2/2016-04-12.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "__Attention!__ Чтобы следить за ходом лекции нужно работать с данной версией репозитория: 175f928d6e9ff72501cc6b1d2b1d38c9f986d426"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Шаблоны\n",
    "\n",
    "Познакомимся поподробнее с шаблонами.\n",
    "Первое дело: тэг `{% include %}`\n",
    "\n",
    "В наших шаблонах присутствует повторяющийся HTML. Это например контейнер `<head>`, подключение обертка (_wrapper_) вокруг контента, _footer_.\n",
    "Философия Django утверждает, что ничто не должно повторяться и быть неудобным. \n",
    "Поэтому существует простой инструмент для того, чтобы исправить ситуацию."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Создадим в __`communities/templates`__ шаблон __`base.html`__ и поместим туда скелет любой нашей страницы.\n",
    "\n",
    "```html\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ru\">\n",
    "<head>\n",
    "\n",
    "\t<script src=\"//code.jquery.com/jquery-1.11.3.min.js\"></script>\n",
    "\t\n",
    "    <title></title>\n",
    "    <meta name=\"description\" content=\"\">\n",
    "</head>\n",
    "<body>\t\n",
    "\t<header>\n",
    "\t\t<div  class=\"container\">\n",
    "\t\t</div>\n",
    "\t</header>\n",
    "\t<div>\n",
    "\t\t<div  class=\"container\">\n",
    "\t\t\t<div id=\"messages\">\n",
    "\t\t\n",
    "\t\t\t</div>\n",
    "\t\t    <div class=\"content\">\n",
    "\n",
    "\t\t\t</div>\n",
    "\t\t</div>\n",
    "\t</div>\n",
    "\t<footer class=\"push\">\n",
    "\t\t<div class=\"container\">\n",
    "\t\t</div>\n",
    "\t</footer>\n",
    "</body>\n",
    "</html>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Сразу подключаем __jquery__. Именно в контейнере _head_ мы будем подключать все внешние скрипты, таблицы стилей. Там же мы указываем необходимое для опознания нашего сайта поисковыми системами: _title_ и _description_ - имя и описание страницы.\n",
    "\n",
    "Этот код будет скелетом. Мы должны указать куда в нём будет \"подставляться\" контент определенной страницы.\n",
    "\n",
    "```html\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"ru\">\n",
    "<head>\n",
    "\n",
    "\t<script src=\"//code.jquery.com/jquery-1.11.3.min.js\"></script>\n",
    "\t\n",
    "    <title>{% block title %}{% endblock %}</title>\n",
    "    <meta name=\"description\" content=\"{% block description %}{% endblock %}\">\n",
    "</head>\n",
    "<body>\t\n",
    "\t<header>\n",
    "\t\t<div class=\"container navbar\">\n",
    "\t\t</div>\n",
    "\t</header>\n",
    "\t<div>\n",
    "\t\t<div  class=\"container\">\n",
    "\t\t\t<div id=\"messages\">\n",
    "\t\t\n",
    "\t\t\t</div>\n",
    "\t\t    <div class=\"content\">\n",
    "\t\t    \t{% block content %}{% endblock %}\n",
    "\t\t\t</div>\n",
    "\t\t</div>\n",
    "\t</div>\n",
    "\t<footer class=\"push\">\n",
    "\t\t<div class=\"container\">\n",
    "\t\t</div>\n",
    "\t</footer>\n",
    "</body>\n",
    "</html>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Далее откроем наш существующий шаблон __community_list.html__ и изменим его на следующее.\n",
    "```html\n",
    "{% extends \"base.html\" %}\n",
    "{% block title %}MAI COMMUNITIES{% endblock %}\n",
    "{% block description %}\n",
    "Curated list of MAI student communities.\n",
    "{% endblock %}\n",
    "{% block content %}\n",
    "    <div class=\"communities-list\">\n",
    "        {% for community in community_list %}\n",
    "            <div class=\"community\">\n",
    "                <br/>\n",
    "                <h3><a href=\"{% url 'communities:community_detail' community.pk %}\">{{ community.title }}</a></h3>\n",
    "                <p>{{ community.description }}</p>\n",
    "                <p><a href=\"{{ community.vk_link }}\">{{ community.vk_link }}</a></p>\n",
    "                <p>{{ community.contacts }}</p>\n",
    "                <br/>\n",
    "            </div>\n",
    "        {% endfor %}\n",
    "    </div>\n",
    "    {% if community_list.paginator.num_pages > 1 %}\n",
    "        <div class=\"pagination\">\n",
    "            {% if community_list.has_previous %}\n",
    "                <a href=\"?page={{ community_list.previous_page_number }}\">←</a>\n",
    "            {% endif %}\n",
    "\n",
    "            {% for num in community_list.paginator.page_range %}\n",
    "                {% if num == community_list.number %}\n",
    "                    <span class=\"current\"><b>{{ num }}</b></span>\n",
    "                {% else %}\n",
    "                    <a href=\"?page={{ num }}\"> {{ num }}</a>\n",
    "                {% endif %}\n",
    "            {% endfor %}\n",
    "\n",
    "            {% if community_list.has_next %}\n",
    "                <a href=\"?page={{ community_list.next_page_number }}\">→</a>\n",
    "            {% endif %}\n",
    "        </div>\n",
    "    {% endif %}\n",
    "{% endblock  %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Итак, что произойдет, если _Django_ в ответ на запрос пользователя \"отрисует\" шаблон __community_list.html__?\n",
    "1. Из-за тэга _extends_ за основу будет взят указанный шаблон (\"__base.html__\"). \n",
    "2. Блоки основного шаблона (_title_, _description_, _content_) буду заполнены содержимым из шаблона __community_list__.\n",
    "Например в тэг `<title>` в контейнере `<head>` будет записана строка _\"MAI COMMUNITIES\"_.\n",
    "\n",
    "Это дает нам определенные плюсы: мы не переписываем HTML код и в каждом шаблоне определяем только какой будет выводиться контент.\n",
    "\n",
    "Однако это не всё. Сейчас код отрисовки одного сообщества в *community_list* и в *community_detail* совпадает. Совпадает значит повторяется. Это плохо.\n",
    "\n",
    "Нам было бы удобно вынести его в отдельный шаблон, чтобы мы могли подавать ему на вход объект _community_ и получать отрисовку одного сообщества. Плюс такого решения в том, что мы могли бы использовать один и тот же шаблон несколько раз в разных местах не переписывая его. К тому же так просто красивее. Так же стоит поступать с пагинацией - вынести её в отдельный шаблон.\n",
    "\n",
    "В этом нам поможет тэг `{% include %}`.\n",
    "\n",
    "Создадим новый шаблон __community_card.html__\n",
    "```html\n",
    "<div class=\"community-card\">\n",
    "    <h3><a href=\"{% url 'communities:community_detail' community.pk %}\">{{ com.title }}</a></h3>\n",
    "    <p>{{ com.description }}</p>\n",
    "    <p><a href=\"{{ com.vk_link }}\">{{ com.vk_link }}</a></p>\n",
    "    <p>{{ com.contacts }}</p>\n",
    "</div>\n",
    "```\n",
    "Да, это весь код, который должен в нём содержаться."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Теперь изменим __community_list.html__\n",
    "\n",
    "```html\n",
    "{% extends \"base.html\" %}\n",
    "{% block title %}MAI COMMUNITIES{% endblock %}\n",
    "{% block description %}\n",
    "Curated list of MAI student communities.\n",
    "{% endblock %}\n",
    "{% block content %}\n",
    "    <div class=\"communities-list\">\n",
    "        {% for community in community_list %}\n",
    "            {% include \"community_detail.html\" with com=community %}    \n",
    "        {% endfor %}\n",
    "    </div>\n",
    "    {% if community_list.paginator.num_pages > 1 %}\n",
    "        <div class=\"pagination\">\n",
    "            {% if community_list.has_previous %}\n",
    "                <a href=\"?page={{ community_list.previous_page_number }}\">←</a>\n",
    "            {% endif %}\n",
    "\n",
    "            {% for num in community_list.paginator.page_range %}\n",
    "                {% if num == community_list.number %}\n",
    "                    <span class=\"current\"><b>{{ num }}</b></span>\n",
    "                {% else %}\n",
    "                    <a href=\"?page={{ num }}\"> {{ num }}</a>\n",
    "                {% endif %}\n",
    "            {% endfor %}\n",
    "\n",
    "            {% if community_list.has_next %}\n",
    "                <a href=\"?page={{ community_list.next_page_number }}\">→</a>\n",
    "            {% endif %}\n",
    "        </div>\n",
    "    {% endif %}\n",
    "{% endblock  %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Мы вынесли кусок кода в отдельный шаблон и вставляем его через `{% include %}`, передавая ему переменную _community_.\n",
    "Заметьте конструкцию `{% include \"community_detail.html\" with com=community %}`.\n",
    "В данном случае `with com=community` означает \"передать в шаблон пемеренную community и записать её значение в локальную переменную _com_\". Однако если мы заменим com на community в шаблоне __community_card.html__ нам не потребуется указывать `with`: Джанго атвоматически передаст значение переменной _community_ потому что она имеет одинаковое имя в обоих шаблонах. \n",
    "\n",
    "Аналогино создадим шаблон __pagination.html__\n",
    "```html\n",
    "{% if paginated_list.paginator.num_pages > 1 %}\n",
    "    <div class=\"pagination\">\n",
    "        {% if paginated_list.has_previous %}\n",
    "            <a href=\"?page={{ paginated_list.previous_page_number }}\">←</a>\n",
    "        {% endif %}\n",
    "\n",
    "        {% for num in paginated_list.paginator.page_range %}\n",
    "            {% if num == paginated_list.number %}\n",
    "                <span class=\"current\"><b>{{ num }}</b></span>\n",
    "            {% else %}\n",
    "                <a href=\"?page={{ num }}\"> {{ num }}</a>\n",
    "            {% endif %}\n",
    "        {% endfor %}\n",
    "\n",
    "        {% if paginated_list.has_next %}\n",
    "            <a href=\"?page={{ paginated_list.next_page_number }}\">→</a>\n",
    "        {% endif %}\n",
    "    </div>\n",
    "{% endif %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "И вставим его на место пагинации.\n",
    "```html\n",
    "{% extends \"base.html\" %}\n",
    "{% block title %}MAI COMMUNITIES{% endblock %}\n",
    "{% block description %}\n",
    "Curated list of MAI student communities.\n",
    "{% endblock %}\n",
    "{% block content %}\n",
    "    <div class=\"communities-list\">\n",
    "        {% for community in community_list %}\n",
    "            {% include \"community_detail.html\" with com=community %}  \n",
    "        {% endfor %}\n",
    "    </div>\n",
    "    {% include \"pagination.html\" with paginated_list=community_list %}  \n",
    "{% endblock  %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Так же изменим шаблон __community_detail.html__:\n",
    "```html\n",
    "{% extends \"base.html\" %}\n",
    "{% block title %}MAI COMMUNITY {{community.name}}{% endblock %}\n",
    "{% block description %}\n",
    "{{community.description}}\n",
    "{% endblock %}\n",
    "{% block content %}\n",
    "    {% include \"community_card.html\" %}\n",
    "{% endblock  %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Заметье, что теперь мы используем динамические значения блоков _title_ и _description_: туда подставляется название сообщества и его описание. \n",
    "\n",
    "Итак мы сократили код примерно вдвое."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Небольшое задание для запрепления:\n",
    "\t\n",
    "1. Создайте страницу \"__about.html__\" со статичной текстовой информацией о сайте. Заполните её чем угодно. Для создания страницы необходимо создать новый вид, шаблон и добавить ссылку на вид в __website/urls.py__. Бонусные очки если вы создадите файл __views.py__ и папку _templates_ в проекте _website_. Функционал страницы _about_ не относится к студенческим сообществам - он относится к проекту, поэтому будет разумно расположить его в _website_, а не в приложении _communities_.\n",
    "\n",
    "2. Создайте шаблон \"__navbar.html__\" который будет содержать список (`<ul>`) из двух ссылок: на страницу _about_ и на страницу _home_ (_index_). Вставьте этот шаблон в __base.html__ через `{% include %}`, чтобы навигационная панель выводилась на любой странице сайта."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Добавим свой CSS, интегрируем Bootstrap.\n",
    "\n",
    "Чтобы сделать сайт красивым или хотя бы читабельным нам нужны таблицы стилей, то есть CSS.\n",
    "\n",
    "Чтобы добавлять CSS, JS и другие статичные файлы добавим директорию для статичных файлов в __settings.py__ нашего проекта, а так же ссылка по которой эти файлы будут доступны.\n",
    "```python\n",
    "STATIC_URL = '/static/'\n",
    "PROJECT_DIR = os.path.dirname(__file__)\n",
    "STATICFILES_DIRS = (\n",
    "    os.path.join(PROJECT_DIR, 'staticfiles'),\n",
    ")\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Теперь создадим в папке __website/website__ директорию __staticfiles__, а в ней файл __theme.css__.\n",
    "\n",
    "Добавим в этот файл стиль для демонстрации:\n",
    "```css\n",
    "h3 {\n",
    "  font-style:bold;\n",
    "  font-size:20pt;\n",
    "}\n",
    "```\n",
    "Осталось только подключить файл."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Добавим в шаблон \"__base.html__\", в контейнер _head_ следующую конструкцию:\n",
    "\n",
    "```html\n",
    "{% load static %}\n",
    "<link href=\"{% static 'css/theme.css' %}\" rel=\"stylesheet\"></link>\n",
    "```\n",
    "\n",
    "Заголовки сообществ стали заметно больше, а мы подключили свой первый стиль."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Однако нам не нужно создавать дизайн сайта прописывая все стили самим. Существует комплект полезных компонентов - __Bootstrap__ - который сделает это за нас.\n",
    "\n",
    "Установим его как пакет Python. \n",
    "В командной строке введем:\n",
    "```\n",
    "pip install django-bootstrap3\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Теперь просто добавим его название в website/website/settings.py INSTALLED_APPS\n",
    "\n",
    "```python\n",
    "INSTALLED_APPS = [\n",
    "    'django.contrib.admin',\n",
    "    'django.contrib.auth',\n",
    "    'django.contrib.contenttypes',\n",
    "    'django.contrib.sessions',\n",
    "    'django.contrib.messages',\n",
    "    'django.contrib.staticfiles',\n",
    "    'communities',\n",
    "    'bootstrap3'\n",
    "]\n",
    "```\n",
    "\n",
    "И добавим его в контейнер `<head>` в base.html\n",
    "\n",
    "```html\n",
    "{% load bootstrap3 %}\n",
    "{% bootstrap_css %}\n",
    "{% bootstrap_javascript %}\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Мы ещё ничего не сделали, а сайт уже выглядит лучше.\n",
    "Теперь мы можем использовать компоненты Bootstrap чтобы навести красоту\n",
    "\n",
    "http://getbootstrap.com/css/\n",
    "\n",
    "Красивые кнопки, кроссбраузерность, автоматическая адаптация под мобильные телефоны и многое другое."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Задание на дом:\n",
    "\n",
    "1. Сделать коммит изменений с созданием страницы _about_ и шаблона _navbar_. Оформить _pull request_ в основной репозиторий Лямбда, чтобы изменения были синхронизированы.\n",
    "\n",
    "2. Оформить _navbar_ с помощью компонентов Bootstrap - http://getbootstrap.com/components/#navbar\n",
    "\t\t\n",
    "\n",
    "3. Оформить __community_card.html__ с помощью панелей Bootstrap - http://getbootstrap.com/components/#panels\n",
    "\t\t\n",
    "\n",
    "4. Оформить __pagination.html__ с помощью пагинации Bootstrap - http://getbootstrap.com/components/#pagination\n",
    "\n",
    "5. Сделать так, чтобы на странице _about_ кнопка перехода на эту страницу в _navbar_ светилась ярко синим цветом, а на странице _home_ светилась кнопка _home_. Иначе говоря необходимо:\n",
    "    - Создать стиль `.active` в __theme.css__\n",
    "    - Применять этот стиль к кнопке активной страницы в __navbar.html__\n",
    "\n",
    "6. __Дополнительное задание__\n",
    "Сделать возможным [загрузку одного изображения](http://stackoverflow.com/questions/5871730/need-a-minimal-django-file-upload-example) для каждого сообщества. Сделать вывод этого изображения в панелях сообществ.\n",
    "\n",
    "Как всегда, все изменения нужно закомитить в свой репозиторий, а затем оформить pull request в основной репозиторий Лямбда!\n",
    "\n",
    "Если вам что-то непонятно вы всегда можете спросить в рабочем чате в телеграмм."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}