LXF168:Web-разработка. Django
|
|
|
Каркас для web-приложений. Программирование в Django.
Содержание |
Введение в Django
Джоно Бэкон применяет Twitter Bootstrap для украшения проектов Django.
Два урока мы занимались созданием мощных сайтов с помощью популярного фреймворка Django. В предыдущих частях мы рассмотрели такие темы, как создание баз данных, добавление данных, использование форм и другие. Все это было очень... функционально, но, к сожалению, выглядело довольно уродливо.
На этом уроке мы узнаем, как немного приукрасить ваши приложения. Django добивается многого малым объемом кода. Мы создадим простую шаблонную программу и затем поэкспериментируем с набором различных возможностей, чтобы создать привлекательный сайт, совместимый с большинством браузеров. Приступим к делу.
Современная эпоха
Скажу для новичков в web-программировании: для создания тем и стилей web-страниц используется специальный язык CSS (Cascading Style Sheets – каскадные таблицы стилей). С ним можно взять HTML-код страницы и изменить ее визуальное наполнение, например, цвета и контуры, а также расположение текста на странице. Увы, ветераны web-программирования хорошо знают, что CSS чертовски сложен, не с точки зрения языка, а из-за всех этих уловок и приемов, требуемых для корректного отображения содержимого страницы в различных браузерах, поскольку в каждом из них то там, то здесь есть отличия. По существу, понимание CSS – это отдельный навык, а написание красивого CSS – настоящее искусство.
В былые времена CSS для сайтов приходилось писать вручную, и в итоге наплодили безобразных сайтов. К счастью, времена изменились, и хотя вручную писать никто не запрещает, большинство людей пользуются клиентскими фреймворками, оборачивающими всю эту сложность в набор кирпичиков «Лего» для сборки дизайна страницы. Иначе говоря, вам достаточно знать, как применять кирпичики, а они сделают всю работу по отображению должного CSS в любом браузере, которым вы пользуетесь.
Существует масса фреймворков, каждый со своими достоинствами и недостатками. В качестве фреймворка нам обычно нужно нечто гибкое (включающее разнообразные возможности для различных требований к интерфейсу пользователя), приятное на вид (соответствующее выбранному вами дизайну), небольшое по размеру (большие страницы увеличивают нагрузку на канал) и лицензированное так, как вам нужно (в данном случае, доступное свободно). Я исследовал множество различных фреймворков, и мне больше всех прочих понравился Bootstrap, созданный в Twitter.
- Метамодернизм в позднем творчестве В.Г. Сорокина
- ЛитРПГ - последняя отрыжка постмодерна
- "Ричард III и семиотика"
- 3D-визуализация обложки Ridero создаем обложку книги при работе над самиздатом.
- Архитектура метамодерна - говоря о современном искусстве, невозможно не поговорить об архитектуре. В данной статье будет отмечено несколько интересных принципов, характерных для построек "новой волны", столь притягательных и скандальных.
- Литература
- Метамодерн
- Рокер-Прометей против изначального зла в «Песне про советскую милицию» Вени Дркина, Автор: Нина Ищенко, к.ф.н, член Союза Писателей ЛНР - перепубликация из журнала "Топос".
- Как избавиться от комаров? Лучшие типы ловушек.
- Что делать если роблокс вылетает на windows
- Что делать, если ребенок смотрит порно?
- Почему собака прыгает на людей при встрече?
- Какое масло лить в Задний дифференциал (мост) Visco diff 38434AA050
- О чем может рассказать хвост вашей кошки?
- Верветки
- Отчетность бюджетных учреждений при закупках по Закону № 223-ФЗ
- Срок исковой давности как правильно рассчитать
- Дмитрий Патрушев минсельхоз будет ли преемником Путина
- Кто такой Владислав Поздняков? Что такое "Мужское Государство" и почему его признали экстремистским в России?
- Как правильно выбрать машинное масло в Димитровграде?
- Как стать богатым и знаменитым в России?
- Почему фильм "Пипец" (Kick-Ass) стал популярен по всему миру?
- Как стать мудрецом?
- Как правильно установить FreeBSD
- Как стать таким как Путин?
- Где лучше жить - в Димитровграде или в Ульяновске?
- Почему город Димитровград так называется?
- Что такое метамодерн?
- ВАЖНО! Временное ограничение движения автотранспортных средств в Димитровграде
- Тарифы на электроэнергию для майнеров предложено повысить
Bootstrap обладает фантастическим набором возможностей. Он поддерживает различные гарнитуры шрифтов, виды кнопок, иконки, вкладки, модальные диалоги, гибкие структуры компонентов и другое. Он приятен на вид, настраиваем, снабжен прекрасную документацию и лицензирован по свободной лицензии Apache. К счастью, подключить его к Django просто, и это дает нам впечатляющие возможности по изменению внешнего вида сайта.
Создаем шаблон
Начнем с создания простого шаблонного проекта Django, и затем мы сможем посмотреть, как работают различные компоненты Bootstrap. Я пробегусь по созданию проекта довольно быстро, так как почти все это должно быть вам знакомо.
Сначала создается проект Django:
django-admin.py startproject homepage
Затем зададим настройки в settings.py. Сперва зададим «шаблонный» поиск проекта в верхней части файла:
import os
ROOT_PROJECT = os.path.join(os.path.split(__file__)[0], “..”)
Настроим базу данных:
‘ENGINE’: ‘django.db.backends.sqlite3’
‘NAME’: ‘homepage.db’
В Django есть понятие местоположения «статических» файлов. Сюда мы поместим файлы тем Bootstrap. По умолчанию это каталог static проекта. Настроим его – для этого укажите следующий параметр:
STATIC_URL = ‘/static/’
Свяжем с этим каталогом параметр STATICFILES_DIRS:
STATICFILES_DIRS = (
os.path.join(ROOT_PROJECT, ‘static’),
)
Как и в предыдущих проектах, мы помещаем шаблоны в каталог ‘templates’ проекта. Задайте следующий параметр:
TEMPLATE_DIRS = (
“templates”,
)
Создадим в проекте приложение mainapp:
python manage.py startapp mainapp
Наконец, добавьте следующие параметры в раздел INSTALLED_APPS файла settings.py. В нашем приложении-шаблоне будет три страницы: домашняя, страница с информацией о программе и страница с контактами. В urls.py добавьте следующие параметры:
url(r’^$’, ‘mainapp.views.index’),
url(r’^about/$’, ‘mainapp.views.about’),
url(r’^contact/$’, ‘mainapp.views.contact’),
Теперь добавьте представление в views.py:
from django.shortcuts import render
from mainapp.models import Contact
from mainapp.forms import ContactForm
from django.template import RequestContext
from django.shortcuts import render_to_response
def index(request):
return render(request, ‘mainapp/index.html’)
def about(request):
return render(request, ‘mainapp/about.html’)
def contact(request):
form = ContactForm(request.POST or None)
if form.is_valid():
cmodel = form.save()
cmodel.save()
return redirect(index)
return render_to_response(‘mainapp/contact.html’, {‘contact_form’: form}, context_instance=RequestContext(request))
Этот код просто выводит страницы – кроме страницы с контактами, на которой выводится форма из модели Contact data. Добавим эту модель в models.py:
class Contact(models.Model):
name = models.CharField(max_length=200)
email = models.CharField(max_length=200)
query = models.TextField(blank=True, null=True)
def __unicode__(self):
return self.name
Потом добавим файл forms.py для отображения ModelForm:
from django.forms import ModelForm
from mainapp.models import Contact
class ContactForm(ModelForm):
class Meta:
model = Contact
За исключением шаблонов (в которые мы будем добавлять информацию о теме), наш шаблонный проект готов. Теперь создадим базу данных:
python manage.py syncdb
- Метамодернизм в позднем творчестве В.Г. Сорокина
- ЛитРПГ - последняя отрыжка постмодерна
- "Ричард III и семиотика"
- 3D-визуализация обложки Ridero создаем обложку книги при работе над самиздатом.
- Архитектура метамодерна - говоря о современном искусстве, невозможно не поговорить об архитектуре. В данной статье будет отмечено несколько интересных принципов, характерных для построек "новой волны", столь притягательных и скандальных.
- Литература
- Метамодерн
- Рокер-Прометей против изначального зла в «Песне про советскую милицию» Вени Дркина, Автор: Нина Ищенко, к.ф.н, член Союза Писателей ЛНР - перепубликация из журнала "Топос".
- Как избавиться от комаров? Лучшие типы ловушек.
- Что делать если роблокс вылетает на windows
- Что делать, если ребенок смотрит порно?
- Почему собака прыгает на людей при встрече?
- Какое масло лить в Задний дифференциал (мост) Visco diff 38434AA050
- О чем может рассказать хвост вашей кошки?
- Верветки
- Отчетность бюджетных учреждений при закупках по Закону № 223-ФЗ
- Срок исковой давности как правильно рассчитать
- Дмитрий Патрушев минсельхоз будет ли преемником Путина
- Кто такой Владислав Поздняков? Что такое "Мужское Государство" и почему его признали экстремистским в России?
- Как правильно выбрать машинное масло в Димитровграде?
- Как стать богатым и знаменитым в России?
- Почему фильм "Пипец" (Kick-Ass) стал популярен по всему миру?
- Как стать мудрецом?
- Как правильно установить FreeBSD
- Как стать таким как Путин?
- Где лучше жить - в Димитровграде или в Ульяновске?
- Почему город Димитровград так называется?
- Что такое метамодерн?
- ВАЖНО! Временное ограничение движения автотранспортных средств в Димитровграде
- Тарифы на электроэнергию для майнеров предложено повысить
Загрузим и добавим в проект тему Bootstrap. Для этого сначала создайте каталог static в корне проекта. Зайдите на http://twitter.github.com/bootstrap и загрузите последнюю версию Bootstrap. В загруженном архиве есть каталог bootstrap с тремя подкаталогами css, img и js. Распакуйте эти три подкаталога в свой каталог static. Теперь все необходимое для проекта готово, но мы пока не можем его запустить, поскольку нет шаблонов. Ну так мы их добавим!
Темы и шаблоны
Чтобы воспользоваться Bootstrap, нужно добавить в шаблоны код, который загружает библиотеку bootstrap; после этого в шаблоне можно будет пользоваться специальными командами для отображения содержимого различными способами. Раньше у нас было по одному шаблону на страницу, и все было просто. Для нашего сегодняшнего проекта в шаблонах нужно загружать существующий код, формирующий общую структуру сайта, а также код, загружающий библиотеку bootstrap.
Настроить расположение компонентов на странице с помощью Bootstrap можно по-разному, но для простоты мы ограничимся панелью навигации вверху и двумя колонками на странице – основным содержимым (col1) и боковой колонкой (col2). Сначала создадим базовый файл шаблона, который будут загружать все остальные. В этом файле мы загрузим тему Bootstrap и сформируем вышеупомянутую схему из двух колонок.
Хотя сейчас в нашем проекте Django всего одно приложение (mainapp), в будущем их может стать несколько, а мы хотим, чтобы в них во всех использовалась одна и та же тема. Итак, создадим наш базовый шаблон вне приложения mainapp, чтобы он мог совместно использоваться всеми приложениями.
Для начала создайте каталог templates в корневом каталоге проекта, и в нем – файл base.html. Начнем добавлять содержимое. Сначала добавим несколько мета-тэгов шаблона:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>My Homepage [Моя домашняя страница]</title>
<meta name=”viewport” content=”width=devicewidth, initial-scale=1.0”>
<meta name=”description” content=””>
<meta name=”author” content=””>
Затем загрузим главный CSS-файл Bootstrap. Он живет в static/css, поэтому воспользуемся специальным тэгом шаблона Django, чтобы сослаться на каталог static:
<link href=”Шаблон:STATIC URL/css/bootstrap.css” rel=”stylesheet”>
Теперь добавим дальнейшее содержимое – это несколько блоков CSS, которые введут небольшие зазоры вверху и внизу страницы:
<style type=”text/css”>
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
Далее добавим CSS-код Bootstrap, отвечающий за дизайн страницы. С ним страница будет правильно отображаться на планшетах, телефонах и других устройствах. Хотя на данном уроке мы этого не обсуждаем, код все равно добавим, чтобы при желании обратиться к нему в будущем:
<link href=”Шаблон:STATIC URL/css/bootstrapresponsive.css”rel=”stylesheet”>
<link rel=”shortcut icon” href=”../assets/ico/favicon.ico”>
<link rel=”apple-touch-icon-precomposed”sizes=”144x144” href=”../assets/ico/apple-touch-icon-144-precomposed.png”>
<link rel=”apple-touch-icon-precomposed”sizes=”114x114” href=”../assets/ico/apple-touch-icon-114-precomposed.png”>
<link rel=”apple-touch-icon-precomposed”sizes=”72x72” href=”../assets/ico/apple-touch-icon-72-precomposed.png”>
<link rel=”apple-touch-icon-precomposed”href=”../assets/ico/apple-touch-icon-57-precomposed.png”>
</head>
<body>
- Метамодернизм в позднем творчестве В.Г. Сорокина
- ЛитРПГ - последняя отрыжка постмодерна
- "Ричард III и семиотика"
- 3D-визуализация обложки Ridero создаем обложку книги при работе над самиздатом.
- Архитектура метамодерна - говоря о современном искусстве, невозможно не поговорить об архитектуре. В данной статье будет отмечено несколько интересных принципов, характерных для построек "новой волны", столь притягательных и скандальных.
- Литература
- Метамодерн
- Рокер-Прометей против изначального зла в «Песне про советскую милицию» Вени Дркина, Автор: Нина Ищенко, к.ф.н, член Союза Писателей ЛНР - перепубликация из журнала "Топос".
- Как избавиться от комаров? Лучшие типы ловушек.
- Что делать если роблокс вылетает на windows
- Что делать, если ребенок смотрит порно?
- Почему собака прыгает на людей при встрече?
- Какое масло лить в Задний дифференциал (мост) Visco diff 38434AA050
- О чем может рассказать хвост вашей кошки?
- Верветки
- Отчетность бюджетных учреждений при закупках по Закону № 223-ФЗ
- Срок исковой давности как правильно рассчитать
- Дмитрий Патрушев минсельхоз будет ли преемником Путина
- Кто такой Владислав Поздняков? Что такое "Мужское Государство" и почему его признали экстремистским в России?
- Как правильно выбрать машинное масло в Димитровграде?
- Как стать богатым и знаменитым в России?
- Почему фильм "Пипец" (Kick-Ass) стал популярен по всему миру?
- Как стать мудрецом?
- Как правильно установить FreeBSD
- Как стать таким как Путин?
- Где лучше жить - в Димитровграде или в Ульяновске?
- Почему город Димитровград так называется?
- Что такое метамодерн?
- ВАЖНО! Временное ограничение движения автотранспортных средств в Димитровграде
- Тарифы на электроэнергию для майнеров предложено повысить
<a class=”brand” href=”/”>My Homepage</a>
<a href=”” class=”btn btn-small btn-primary”>Sign In</a>
- <a href=”/”>Home</a>
- <a href=”/about”>About</a>
- <a href=”/contact”>Contact</a>
В этом блоке мы сперва создаем внешнюю панель навигации (navbar), закрепленную в верхней части страницы (navbar-fixed-top), а затем добавляем компоненты к внутренней части панели (navbar-inner). Затем мы добавляем ссылку с названием сайта класса brand.
Далее добавляется кнопка Sign In [Войти] в виде ссылки с классами btn, btn-small и btn-primary. Это три различных класса; btn отображает ссылку в виде кнопки, btn-small уменьшает ее размер, а btn-primary выделяет ее синим, как важный элемент пользовательского интерфейса. Это хороший пример форматирования страниц с Bootstrap.
Наконец, с помощью тэга nav мы добавляем маркированный список с тремя элементами; они форматируются как кнопки навигационной панели. Теперь добавим код в тело страницы. Он создает две колонки:
{% block col1 %}
{% endblock %}
{% block col2 %}
{% endblock %}
<footer>
© Jono Bacon 2012
</footer>
<script src=”../assets/js/jquery.js”></script>
<script src=”../assets/js/bootstrap-transition.js”></script>
<script src=”../assets/js/bootstrap-alert.js”></script>
<script src=”../assets/js/bootstrap-modal.js”></script>
<script src=”../assets/js/bootstrap-dropdown.js”></script>
<script src=”../assets/js/bootstrap-scrollspy.js”></script>
<script src=”../assets/js/bootstrap-tab.js”></script>
<script src=”../assets/js/bootstrap-tooltip.js”></script>
<script src=”../assets/js/bootstrap-popover.js”></script>
<script src=”../assets/js/bootstrap-button.js”></script>
<script src=”../assets/js/bootstrap-collapse.js”></script>
<script src=”../assets/js/bootstrap-carousel.js”></script>
<script src=”../assets/js/bootstrap-typeahead.js”></script>
</body>
</html>
Наш базовый шаблон готов; теперь создадим шаблон страницы, чтобы проверить дизайн. Для этого загрузим шаблоны внутри приложения. Чтобы все шаблоны использовали одну и ту же тему, создайте каталог mainapp в каталоге templates и затем файл base.html в каталоге mainapp. Добавьте в него всего одну строку:
{% extends “base.html” %}
Она загружает наш главный файл base.html с кодом CSS, который применяется ко всем приложениям. Теперь создадим шаблон страницы. В каталоге templates/mainapp создайте файл index.html и добавьте в него следующий код:
{% extends “mainapp/base.html” %}
{% block col1 %}
Welcome To My Homepage! [Добро пожаловать на мою домашнюю страницу!]
This is my very own homepage. Feel free to take a look around! [Я сам ее сделал. Смотрите, не стесняйтесь!]
{% endblock %}
{% block col2 %}
{% endblock %}
В этом блоке мы загружаем базовый шаблон и добавляем два блока, которые мы определили в главной структуре. В первом блоке (col1), то есть в теле страницы, мы просто добавляем заголовок и немного текста; второй блок пока оставляем пустым. Теперь страница должна выглядеть так, как показано на рис. 1.
Создаем раскладку
Теперь погрузимся в возможности Bootstrap, которые придают ему такую мощь. Во-первых, сейчас в боковой колонке ничего нет. Добавим во второй блок немного информации о нашей домашней странице:
{% block col2 %}
The Technology
Этот сайт создан при помощи Django и темы Bootstrap.
{% endblock %}
Здесь с помощью класса well элемента<a href=”https://www.djangoproject.com/”class=”btn”>Django</a>
<a href=”http://twitter.github.com/”class=”btn”>Bootstrap</a>
Ну вот, у нас есть красивые кнопки, вид которых изменяется при наведении курсора мыши. Существуют и другие классы, с помощью которых можно менять внешний вид кнопок. Например, чтобы изменить размер кнопок, воспользуйтесь классами btn-large, btn-small и btn-mini. Для этого просто добавьте их в код справа от первого класса. Например:
<a href=”http://twitter.github.com/” class=”btn btnsmall”>Bootstrap</a>
Кнопки выглядят вполне мило, но лучше будет объединить их в группу, например, так:
<a href=”https://www.djangoproject.com/” class=”btn”>Django</a>
<a href=”http://twitter.github.com/” class=”btn”>Bootstrap</a>
Таблицы
Таблицы в Bootstrap тоже форматируются просто. Те ужасные таблицы HTML, которые вы знали и любили (ненавидели), ушли в прошлое. Вот пример таблицы с приятным контуром, созданным с помощью класса table-bordered:
Name | Age | Location |
---|---|---|
Steve Harris | 55 | London, England |
Nicko McBrain | 52 | Florida, USA |
Еще одна приятная возможность Bootstrap – набор иконок, которыми можно быстро и легко воспользоваться. Забыты дни, когда нужно было встраивать собственные иконки, чтобы придать привлекательность сайту.
С каждой иконкой связан собственный класс. Давайте добавим по иконке на каждую из добавленных кнопок:
<a href=”https://www.djangoproject.com/”class=”btn”> Django</a>
<a href=”http://twitter.github.com/” class=”btn”> Bootstrap</a>
Здесь мы добавили пустой тэг и просто указали класс для загрузки нужной иконки; при этом иконка будет показана на каждой кнопке с правильными отступами. Чтобы увидеть полный список доступных иконок, зайдите на домашнюю страницу Bootstrap – http://twitter.github.com/.
Есть и прекрасная документация. Беритесь за дело и экспериментируйте с различными возможностями оформления в собственных проектах. Удачи! |