Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

РАЗРАБОТКА САЙТА КОНСАЛТИНГОВОЙ КОМПАНИИ В СФЕРЕ ИНФОРМАЦИОННЫХ ТЕХНОЛОНИЙ ООО «Геоаналитика»

Содержание:

ВВЕДЕНИЕ

Задачей курсового проекта является реализация Информационного, а так же аналитическое приложения, базой данной которого используется PostgreSQL, язык программирования серверной части приложения выбрал Python, фраемворк – Django.

Для реализации приложения были использованы следующие технологии: Среда разработки PyCharm Community, язык программирования Python3.6, фраемворк Django 1.11, СУБД pgAdmin и PostgreSQL.

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

Интернет развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Интернет превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей. Каждый из нас уже сейчас может сделать свой вклад в развитие Интернет. Для этого достаточно создать свой веб-сайт и разместить его в Интернет. Для создания сайта необходимо решить следующие частные задачи:

- ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;

- изучить программный инструментарий, применяемый для разработки и создания веб-сайтов;

- выявить и учесть методы и способы представления на веб-страницах различных видов информации, не препятствующие их доступности;

- ознакомиться с основными правилами и рекомендациями по разработке и созданию веб-сайтов и неукоснительно следовать им в своей практике;

- определиться со структурой веб-страниц;

- выбрать стратегию разработки и создания веб-сайта.

Информационные сайты являются одними из самых популярных в сети интернет, они предназначены для донесения до пользователя совершенно любой информации. Есть несколько видов информационных сайтов. В дипломном проекте необходимо разработать тематический спортивный информационный сайт. Тематические сайты - ресурсы, у которых практически все страницы посвящены одной определенной проблематике или теме, в свою очередь разно тематические сайты захватывают широкий круг информационной направленности и могут быть посвящены большому количеству тематик и направлений. Спрос на такие сайты очень велик и пользуются ими как крупные фирмы, так и простые веб-мастера.

Целью данного курсового проекта является разработка сайта консалтинговой компании в сфере информационных технологий ООО «Геоаналитика», который:

· предоставит пользователям информацию о районах Московской области;

· предоставит пользователям возможность загрузки собственных данных;

· предоставит пользователям возможность придачи собственной стилизации;

· предоставит пользователям информацию о конкретном районе Московской области;

ЧАСТЬ 1. Теоретическая часть

1.1 Язык программирования Python

В связи с наблюдаемым в настоящее время стремительным развитием персональной вычислительной техники, происходит постепенное изменение требований, предъявляемых к языкам программирования. Все большую роль начинают играть интерпретируемые языки, поскольку возрастающая мощь персональных компьютеров начинает обеспечивать достаточную скорость выполнения интерпретируемых программ. А единственным существенным преимуществом компилируемых языков программирования является создаваемый ими высокоскоростной код. Когда скорость выполнения программы не является критичной величиной, наиболее правильным выбором будет интерпретируемый язык, как более простой и гибкий инструмент программирования.

В связи с этим, определенный интерес представляет рассмотрение сравнительно нового языка программирования Python (пайтон), который был создан его автором Гвидо ван Россумом (Guido van Rossum) в начале 90-х годов. 

Общие сведения о Python. Достоинства и недостатки

Python является интерпретируемым, изначально объектно-ориентированным языком программирования. Он чрезвычайно прост и содержит небольшое число ключевых слов, вместе с тем очень гибок и выразителен. Это язык более высокого уровня нежели Pascal, C++ и, естественно C, что достигается, в основном, за счет встроенных высокоуровневых структур данных (списки, словари, тьюплы).

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

Следующая немаловажная черта - расширяемость языка, этому придается большое значение и, как пишет сам автор, язык был задуман именно как расширяемый. Это означает, что имеется возможность совершенствования языка всеми всеми заинтересованными программистами. Интерпретатор написан на С и исходный код доступен для любых манипуляций. В случае необходимости, можно вставить его в свою программу и использовать как встроенную оболочку. Или же, написав на C свои дополнения к Python и скомпилировав программу, получить "расширенный" интерпретатор с новыми возможностями.

Следующее достоинство - наличие большого числа подключаемых к программе модулей, обеспечивающих различные дополнительные возможности. Такие модули пишутся на С и на самом Python и могут быть разработаны всеми достаточно квалифицированными программистами. В качестве примера можно привести следующие модули:

  • Numerical Python - расширенные математические возможности, такие как манипуляции с целыми векторами и матрицами;
  • Tkinter - построение приложений с использованием графического пользовательского интерфейса (GUI) на основе широко распространенного на X-Windows Tk-интерфейса;
  • OpenGL - использование обширной библиотеки графического моделирования двух- и трехмерных объектов Open Graphics Library фирмы Silicon Graphics Inc. Данный стандарт поддерживается, в том числе, в таких распространенных операционных системах как Microsoft Windows 95 OSR 2, 98 и Windows NT 4.0.

Недостатки языка. 
Единственным недостатком, замеченным автором, является сравнительно невысокая скорость выполнения Python-программы, что обусловлено ее интерпретируемостью. Однако, на наш взгляд, это с лихвой окупается достоинствами языка при написании программ не очень критичных к скорости выполнения. 
 

Обзор особенностей

1. Python, в отличие от многих языков (Pascal, C++, Java, и т.д.), не требует описания переменных. Они создаются в месте их инициализации, т.е. при первом присваивании переменной какого-либо значения. Значит, тип переменной определяется типом присваиваемого значения. В этом отношении Python напоминает Basic. 
Тип переменной не является неизменным. Любое присваивание для нее корректно и это приводит лишь к тому, что типом переменной становится тип нового присваиваемого значения.

2. В таких языках как Pascal, C, C++ организация списков представляла некоторые трудности. Для их реализации приходилось хорошо изучать принципы работы с указателями и динамической памятью. И даже имея хорошую квалификацию, программист, каждый раз заново реализуя механизмы создания, работы и уничтожения списков, мог легко допустить трудноуловимые ошибки. Ввиду этого были созданы некоторые средства для работы со списками. Например, в Delphi Pascal имеется класс TList, реализующий списки; для С++ разработана библиотека STL (Standard Template Library), содержащая такие структуры как векторы, списки, множества, словари, стеки и очереди. Однако, такие средства имеются не во всех языках и их реализациях.

Одной из отличительных черт Python является наличие таких встроенных в сам язык структур как тьюплы (tuple), списки (list) и словари (dictionary), которые иногда называют картами (map). Рассмотрим их поподробней.

  1. Тьюпл. Он чем-то напоминает массив: состоит из элементов и имеет строго определенную длину. Элементами могут быть любые значения - простые константы или объекты. В отличие от массива, элементы тьюпла не обязательно однородны. А тем, что отличает тьюпл от списка (list) является то, что тьюпл не может быть изменен, т.е. мы не можем i-тому элементу тьюпла присвоить что-то новое и не можем добавлять новые элементы. Таким образом, тьюпл можно назвать списком-константой. Синтаксически тьюпл задается путем перечисления через запятую всех элементов, и все это заключено в круглые скобки:


(1, 2, 5, 8) 
(3.14, ‘ string ’, -4) 
Все элементы индексируются с нуля. Для получения i-го элемента необходимо указать имя тьюпла затем индекс i в квадратных скобках. Пример: 
t = (0, 1, 2, 3, 4) 
print t[0], t[-1], t[-3] 
Результат: 0 4 2 
Таким образом, тьюпл можно было назвать вектором-константой, если бы его элементы всегда были однородными.

  1. Список. Хорошим, частным примером списка может служить строка (string) языка Turbo Pascal. Элементами строки являются одиночные символы, ее длина не фиксирована, имеется возможность удалять элементы или, напротив, вставлять их в любом месте строки. Элементами же списка могут быть произвольные объекты не обязательно одного и того же типа. Чтобы создать список, достаточно перечислить его элементы через запятую, заключив все это в квадратные скобки:


[3, 5.14, ‘s’] 
[‘string’, (0,1,8), [1,1]] 
 В отличие от тьюпла, списки можно модифицировать по своему желанию. Доступ к элементам осуществляется также как и в тьюплах. Пример: 
l = [1, ‘s’, (2,8), [0,3,4]] 
print l[0], l[1], l[-2], l[-1][0] 
Результат: 1 s (2,8) 0

  1. Словарь. Напоминает тип запись (record) в Pascal или структуры (structure) в С. Однако, вместо схемы "поле записи"-"значение" здесь применяется "ключ"-"значение". Словарь представляет собой набор пар "ключ"-"значение". Здесь "ключ" - константа любого типа (но преимущественно применяются строки), он служит для именования (индексирования) некоторого соответствующего ему значения (которое можно менять).


Словарь создается путем перечисления его элементов (пар "ключ"-"значение", разделенных двоеточием), через запятую и заключения всего этого в фигурные скобки. Для получения доступа к некоторому значению необходимо, после имени словаря, в квадратных скобках записать соответствующий ключ. Пример: 
d = {'a': 1, 'b': 3, 5: 3.14, 'name': 'John'} 
d['b'] = d[5] 
print d['a'], d['b'], d[5], d['name'] 
Результат: 1 3.14 3.14 John 
Для добавления новой пары "ключ"-"значение" достаточно присвоить элементу с новым ключом соответствующее значение: 
d['new'] = 'new value' 
print d 
Результат: {'a':1, 'b':3, 5:3.14, 'name':'John', 'new':'new value'}

3. Python в отличие от Pascal, C, C++ не поддерживает работу с указателями, динамической памятью и адресную арифметику. В этом он похож на Java. Как известно, указатели служат источником трудноуловимых ошибок и работа с ними относится больше к программированию на низком уровне. Для обеспечения большей надежности и простоты они небыли включены в Python.

4. Одним из особенностей Python является то, как происходит присваивание одной переменной другой, т.е. когда по обе стороны от оператора "=" стоят переменные.

Следуя Тимоти Бадду ([1]), будем называть семантикой указателей случай, когда присваивание приводит лишь к присваиванию ссылки (указателя), т.е. новая переменная становится лишь другим именем, обозначающим тот же участок памяти, что и старая переменная. При этом изменение значения, обозначаемого новой переменной, приведет к изменению значения старой, т.к. они, фактически, означают одно и то же.

Когда же присваивание приводит к созданию нового объекта (здесь объект - в смысле участка памяти для хранения значения какого-либо типа) и копированию в него содержимого присваиваемой переменной, этот случай назовем семантикой копирования. Таким образом, если при копировании действует семантика копирования, то переменные по обе стороны от знака "=" будут означать два независимых объекта с одинаковым содержанием. И здесь последующее изменение одной переменной никак не скажется на другой.

Присваивание в Python происходит следующим образом: если присваеваемый объект является экземпляром таких типов как числа или строки, то действует семантика копирования, если же в правой части стоит экземпляр класса, список, словарь или тьюпл, то действует семантика указателей. Пример: 
a = 2; b = a; b = 3 
print ' семантика копирования: a=', a, 'b=', b 
a = [2,5]; b = a; b[0] = 3 
print ' семантика указателей: a=', a, 'b=', b 
Результат: 
семантика копирования: a= 2 b= 3 
семантика указателей: a= [3,5] b= [3,5]

Для тех из вас, кто хочет знать в чем тут дело, я приведу другой взгляд на присваивание в Python. Если в таких языках как Basic, Pascal, C/C++ мы имели дело с переменными-"емкостями", и хранимыми в них константами (числовыми, символьными, строковыми - не суть важно), а операция присваивания означала "занесение" константы в присваиваемую переменную, то в Python мы уже должны работать с переменными-"именами" и именуемыми ими объектами. (Замечаете некоторую аналогию с языком Prolog?) Что же такое объект в Python? Это все то, чему можно дать имя: числа, строки, списки, словари, экземпляры классов (которые в Object Pascal и называются объектами), сами классы (!), функции, модули и т.д. Так вот, при присваивании переменной некоторого объекта, переменная становится его "именем", причем таких "имен" объект может иметь сколько угодно и все они никак не зависят друг от друга.

Теперь, объекты делятся на модифицируемые (мутируемые) и неизменные. Мутируемые - те, которые могут изменить свое "внутреннее содержание", например, списки, словари, экземпляры классов. А неизменные - такие как числа, тьюплы, строки (да, строки тоже; можно переменной присвоить новую строку, полученную из старой, но саму старую строку модифицировать не получится).

Так вот, если мы пишем a = [2,5]; b = a; b[0] = 3, Python это интерпретирует так:

 дать объекту "список [2,5]" имя a ;

 дать этому объекту еще одно имя - b ;

 модифицировать нулевой элемент объекта.
Вот и получилась "псевдо" семантика указателей.

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

t = (1, 2, [7,5], 'string')

t[0] = 6 # так нельзя

del t[1] # тоже ошибка

t[2][1] = 0 # допустимо, теперь третья компонента - список [7,0]

t[3][0] = 'S' # ошибка: строки не мутируемы

5. Весьма оригинальным является то, как в Python группируются операторы. В Pascal для этого служат операторные скобки begin-end, в C, C++, Java - фигурные скобки {}, в Basic применяются закрывающие окончания конструкций языка (NEXT, WEND, END IF, END SUB). 
В языке Python все гораздо проще: выделение блока операторов осуществляется путем сдвига выделяемой группы на один или более пробелов или символов табуляции вправо относительно заголовка конструкции к которой и будет относиться данный блок. Например:

 if x > 0:

      print ‘ x > 0 ’

      x = x - 8

 else:

      print ‘ x <= 0 ’

      x = 0

Тем самым, хороший стиль записи программ, к которому призывают преподаватели языков Pascal, C++, Java и т.д., здесь приобретается с самого начала, поскольку, по-другому просто не получится.

1.2 Фраемворк Django

Что такое Django?

Django (/ˈdʒæŋɡoʊ/ джанго) — бесплатный и свободный фреймворк для веб-приложений, написанный на Python. Фреймворк — это набор компонентов, которые помогают разрабатывать веб-сайты быстро и просто.

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

К счастью для нас, другие люди обратили внимание на возникновение однотипных проблем при веб-разработке, так что они объединились и создали фреймворки (Django и другие), которые предлагают нам готовые шаблоны для использования.

Фреймворки существуют, чтобы облегчить процесс разработки и позволить нам не изобретать колесо.

Зачем нам нужен фреймворк?

Чтобы понять, для чего же нам нужен Django, нам нужно ближе познакомиться с серверами. Во-первых, сервер должен узнать о том, что мы ждём от него веб-страницу.

Представь себе почтовый ящик (порт), который проверяется на наличие новых писем (запросов). Это делает веб-сервер. Когда письмо приходит, сервер читает его и отправляет ответ с веб-страничкой. Однако чтобы что-то отправить, нам надо это что-то иметь. И Django как раз и отвечает за создание контента, который будет отправлен в ответе.

Что происходит, когда кто-то запрашивает веб-сайт у твоего сервера?

Когда на сервер приходит запрос, он переадресуется Django, который пытается сообразить, что же конкретно от него просят. Для начала он берет адрес веб-страницы и пробует понять — что же нужно сделать. Эту часть процесса в Django выполняет urlresolver (адрес веб-сайта называется URL — Uniform Resource Locator — Единый указатель ресурсов, так что название urlresolver, resolver == определитель, имеет определенный смысл). Он не слишком умён, поэтому просто берет список шаблонов и пытается сопоставить их с URL. Django сверяет шаблоны сверху вниз и, если что-то совпадает, он переправляет запрос соответствующей функции (которая называется view).

Представь себе почтальона с письмом. Она идет вниз по улице и сверяет номера домов с адресом на письме. Если они совпадают, то она оставляет письмо. Так же работает и urlresolver!

Но самые интересные вещи происходят в функции view: мы, например, можем обращаться к базе данных за определенной информацией. Может быть пользователь попросил изменить какую-нибудь информацию? Как будто в письме написано: "Пожалуйста, поменяйте описание моей работы." Функция view может проверить, имеете ли вы разрешение делать это, а затем обновит описание работы и отправит обратно ответ: "Готово!". Затем функция view сгенерирует ответ, и Django сможет отправить его веб-браузеру пользователя.

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

Так что вместо погружения в пучины нюансов мы просто начнем работать с Django и познакомимся со всеми важными особенностями по мере продвижения!

    1. Как устроено ВЕБ-приложение

Компьютеры, подключенные к сети называются клиентами и серверами. Упрощенная схема того, как они взаимодействуют, может выглядеть следующим образом:

  • Клиенты являются обычными пользователями, подключенными к Интернету посредством устройств (например, компьютер подключен к Wi-Fi, или ваш телефон подключен к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
  • Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.

ЧАСТЬ 2. Практическая часть

2.1 Выбор сервера БД

PostgreSQL не просто реляционная, а объектно-реляционная СУБД. Это даёт ему некоторые преимущества над другими SQL базами данных с открытым исходным кодом, такими как MySQL, MariaDB и Firebird.

Фундаментальная характеристика объектно-реляционной базы данных — это поддержка пользовательских объектов и их поведения, включая типы данных, функции, операции, домены и индексы. Это делает Постгрес невероятно гибким и надежным. Среди прочего, он умеет создавать, хранить и извлекать сложные структуры данных. В некоторых примерах ниже вы увидите вложенные и составные конструкции, которые не поддерживаются стандартными РСУБД.
 

2.1.1 Структуры и типы данных


Существует обширный список типов данных, которые поддерживает Постгрес. Кроме числовых, с плавающей точкой, текстовых, булевых и других ожидаемых типов данных (а также множества их вариаций), PostgreSQL может похвастаться поддержкой uuid, денежного, перечисляемого, геометрического, бинарного типов, сетевых адресов, битовых строк, текстового поиска, xml, json, массивов, композитных типов и диапазонов, а также некоторых внутренних типов для идентификации объектов и местоположения логов. Справедливости ради стоит сказать, что MySQL, MariaDB и Firebird тоже имеют некоторые из этих типов данных, но только Постгрес поддерживает их все.

Давайте рассмотрим подробнее некоторые из них:
 

Сетевые адреса


PostgreSQL обеспечивает хранение разных типов сетевых адресов. Тип данных CIDR (бесклассовая маршрутизация интернет домена, Classless Internet Domain Routing) следует соглашению для сетевых адресов IPv4 и IPv6. Вот несколько примеров:

  • 192.168.100.128/25
  • 10.1.2.3/32
  • 2001:4f8:3:ba:2e0:81ff:fe22:d1f1/128
  • ::ffff:1.2.3.0/128


Также для хранения сетевых адресов доступен тип данных INET, используемый для IPv4 и IPv6 хостов, где подсети являются необязательными. Тип данных MACADDR может использоваться для хранения MAC-адресов для идентификации оборудования, таких как 08-00-2b-01-02-03.

У MySQL и MariaDB тоже есть INET функции для конвертации сетевых адресов, но они не предоставляют типы данных для внутреннего хранения сетевых адресов. У Firebird тоже нет типов для хранения сетевых адресов.
 

Многомерные массивы


Поскольку Постгрес — это объектно-реляционная база данных, массивы значений могут храниться для большинства существующих типов данных. Сделать это можно путём добавления квадратных скобок к спецификации типа данных для столбца или с помощью выражения ARRAY. Размер массива может быть задан, но это необязательно. Давайте рассмотрим меню праздничного пикника для демонстрации использования массивов:
 

-- создаем таблицу, у которой значения являются массивами

CREATE TABLE holiday_picnic (

holiday varchar(50) -- строковое значение

sandwich text[], -- массив

side text[] [], -- многомерный массив

dessert text ARRAY, -- массив

beverage text ARRAY[4] -- массив из 4-х элементов

);

-- вставляем значения массивов в таблицу

INSERT INTO holiday_picnic VALUES

('Labor Day',

'{"roast beef","veggie","turkey"}',

'{

{"potato salad","green salad","macaroni salad"},

{"chips","crackers"}

}',

'{"fruit cocktail","berry pie","ice cream"}',

'{"soda","juice","beer","water"}'

);


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

Геометрические данные


Геоданные быстро становятся основным требованием для многих приложений. PostgreSQL уже давно поддерживает множество геометрических типов данных, таких как точки, линии, круги и многоугольники. Один из этих типов – PATH, он состоит из множества последовательно расположенных точек и может быть открытым (начальная и конечная точки не связаны) или закрытым (начальная и конечная точки связаны). Давайте рассмотрим в качестве примера туристическую тропу. В данном случае туристическая тропа — это петля, поэтому начальная и конечная точки связаны, и, значит, мой путь является закрытым. Круглые скобки вокруг набора координат указывают на закрытый путь, а квадратные — на открытый.
 

-- создаем таблицу для хранения троп

CREATE TABLE trails (

trail_name varchar(250),

trail_path path

);

-- вставляем тропу в таблицу,

-- для которой маршрут определяется координатами в формате широта-долгота

INSERT INTO trails VALUES

('Dool Trail - Creeping Forest Trail Loop',

((37.172,-122.22261666667),

(37.171616666667,-122.22385),

(37.1735,-122.2236),

(37.175416666667,-122.223),

(37.1758,-122.22378333333),

(37.179466666667,-122.22866666667),

(37.18395,-122.22675),

(37.180783333333,-122.22466666667),

(37.176116666667,-122.2222),

(37.1753,-122.22293333333),

(37.173116666667,-122.22281666667)));


Расширение PostGIS для PostgreSQL дополняет существующие свойства геометрических данных вспомогательными пространственными типами, функциями, операторами и индексами. Оно обеспечивает поддержку местоположения и поддерживает как растровые, так и векторные данные. Оно также обеспечивает совместимость с множеством сторонних геопространственных инструментов (защищённых авторским правом и с открытым исходным кодом) для отображения, отрисовки и работы с данными.

Заметьте, что в MySQL 5.7.8 и в MariaDB, начиная с версии 5.3.3, были добавлены расширения типов данных для поддержки стандарта географической информации OpenGIS. Эта версия MySQL и последующие версии MariaDB предлагают хранение типов данных, аналогичное штатным геоданным Постгреса. Тем не менее, в MySQL и MariaDB значения данных сначала должны быть сконвертированы в геометрический формат простыми командами перед тем, как будут вставлены в таблицу. Firebird на данный момент не поддерживает геометрические типы данных.
 

Поддержка JSON


Поддержка JSON в PostgreSQL позволяет вам перейти к хранению schema-less данных в SQL базе данных. Это может быть полезно, когда структура данных требует определённой гибкости: например, если в процессе разработки структура всё ещё меняется или неизвестно, какие поля будет содержать объект данных.

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

В MySQL 5.7.8 и MariaDB 10.0.1 была добавлена поддержка встроенных объектов JSON. Но, хотя существует множество функций и операторов для JSON, которые теперь доступны в этих базах данных, они не индексируются так, как JSONB в PostgreSQL. Firebird пока что не присоединился к тренду и поддерживает объекты JSON только в виде текста.
 

Создание нового типа


Если вдруг так случится, что обширного списка типов данных Постгреса вам окажется недостаточно, вы можете использовать команду CREATE TYPE, чтобы создать новые типы данных, такие как составной, перечисляемый, диапазон и базовый. Рассмотрим пример создания и отправки запросов нового составного типа:
 

-- создаем новый составной тип "wine"

CREATE TYPE wine AS (

wine_vineyard varchar(50),

wine_type varchar(50),

wine_year int

);

-- создаем таблицу, которая использует составной тип "wine"

CREATE TABLE pairings (

menu_entree varchar(50),

wine_pairing wine

);

-- вставляем данные в таблицу при помощи выражения ROW

INSERT INTO pairings VALUES

('Lobster Tail',ROW('Stag''s Leap','Chardonnay', 2012)),

('Elk Medallions',ROW('Rombauer','Cabernet Sauvignon',2012));

/*

выборка из таблицы с использованием имени колонки

(используйте скобки, отделяемые точкой от имени поля

в составном типе)

*/

SELECT (wine_pairing).wine_vineyard, (wine_pairing).wine_type

FROM pairings

WHERE menu_entree = 'Elk Medallions';


Поскольку они не являются объектно-реляционными, MySQL, MariaDB и Firebird не предоставляют такую мощную функциональность.
 

2.1.2 Размеры данных


PostgreSQL может обрабатывать много данных. Текущие опубликованные ограничения перечислены ниже:

Максимальный размер базы данных

Неограничен

Максимальный размер таблицы

32 TB

Максимальный размер строки

1.6 TB

Максимальный размер поля

1 GB

Максимальное количество строк в таблице

Неограничено

Максимальное количество столбцов в таблице

250-1600 в зависимости от типа столбца

Максимальное количество индексов в таблице

Неограничено


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

Для сравнения, MySQL и MariaDB печально известны ограничением размера строк в 65 535 байт. Firebird также предлагает всего лишь 64Кб в качестве максимального размера строки. Обычно объём данных ограничивается максимальным размером файлов операционной системы. Поскольку PostgreSQL умеет хранить табличные данные в множестве файлов меньшего размера, он может обойти это ограничение. Но стоит отметить, что слишком большое количество файлов может негативно сказаться на производительности. MySQL и MariaDB поддерживают большее количество столбцов в таблице (до 4,096 в зависимости от типа данных) и большие индивидуальные размеры таблицы, чем PostgreSQL, но необходимость превысить существующие ограничения Постгреса возникает лишь в крайне редких случаях.
 

2.1.3 Целостность данных


Постгрес стремится соответствовать стандарту ANSI-SQL:2008, отвечает требованиям ACID (атомарность, согласованность, изолированность и надежность) и известен своей ссылочной и транзакционной целостностью. Первичные ключи, ограничивающие и каскадные внешние ключи, уникальные ограничения, ограничения NOT NULL, проверочные ограничения и другие функции обеспечения целостности данных дают уверенность, что только корректные данные будут сохранены.

MySQL и MariaDB больше работают на то, чтобы соответствовать стандарту SQL с движками таблиц InnoDB/XtraDB. Теперь они предлагают опцию STRICT с использованием режимов SQL, которая устанавливает проверки корректности используемых данных. Несмотря на это, в зависимости от того, какой режим вы используете, недостоверные и даже урезанные без вашего ведома данные могут быть вставлены или созданы при обновлении. Ни одна из этих баз данных сейчас не поддерживает CHECK ограничения. Кроме того, у них существует множество особенностей в отношении ограничений ссылочной целостности по внешним ключам. В дополнение к вышесказанному, целостность данных может существенно пострадать в зависимости от выбранного движка хранения. MySQL (и fork MariaDB) не делают секрета из того, что променяли целостность и соответствие стандартам на скорость и эффективность.
 

2.1.4 Подводя итоги


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

Если вам кажется, что PostgreSQL не соответствует вашим потребностям, или вы предпочитаете “стрелять от бедра”, тогда вам стоит обратить внимание на NoSQL базы данных, которые мы предлагаем в Compose, или подумать о других SQL базах данных, которые мы упоминали. У каждой из них есть свои преимущества. Compose твёрдо уверен, что очень важно выбрать правильную базу данных для конкретной задачи… иногда это означает, что нужно выбрать несколько баз данных!

2.2 АРХИТЕКТУРА ПРИЛОЖЕНИЯ

Основное дело приложений изображено на рисунке 1

C:\Users\petrov.pavel\Desktop\pic.png

Рисунок 1 – Архитектура приложения

Где приложение – это папка с файлами, реализующими логику одного раздела.

На рисунке 2 мы видим раскрытый раздел управления данными

C:\Users\petrov.pavel\Desktop\pic.png

Рисунок 2 – Архитектура приложения по управлению данными

На рисунке 3 изображен раскрытый раздел статических файлов приложение, а то есть файлов интерфейса: .css – стилизация интерфейса, .html расположение компонентов на сайте, .js – логика приложения.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 3 – Архитектура статических файлов приложения

ЧАСТЬ 3. Архитектура приложения

3.1 Создание БД

Все данные приложения хранятся в базе данных, база данных представляет собой набор из таблиц, а таблица – набор столбцов, хранящих значение.

На рисунке 4 изображен перечень используемый таблиц.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 4 – Перечень таблиц приложения

Таблица создается путем ввода SQL запроса.

CREATE TABLE public.auth_user

(

id integer NOT NULL DEFAULT nextval('auth_user_id_seq'::regclass),

password character varying(128) NOT NULL,

last_login timestamp with time zone,

is_superuser boolean NOT NULL,

username character varying(150) NOT NULL,

first_name character varying(30) NOT NULL,

last_name character varying(30) NOT NULL,

email character varying(254) NOT NULL,

is_staff boolean NOT NULL,

is_active boolean NOT NULL,

date_joined timestamp with time zone NOT NULL,

CONSTRAINT auth_user_pkey PRIMARY KEY (id),

CONSTRAINT auth_user_username_key UNIQUE (username)

)

CREATE TABLE public.map_viewer_project

(

id integer NOT NULL DEFAULT nextval('map_viewer_project_id_seq'::regclass),

name character varying(255) NOT NULL,

public boolean NOT NULL,

slug character varying(255) NOT NULL,

extent geometry(Polygon,3857),

preview character varying(100),

type character varying(1) NOT NULL,

cartometry_permission character varying(1),

dashboard_permission character varying(1),

tabviewer_download_permission character varying(1),

parameters text NOT NULL,

default_basemap_id integer,

owner_id integer,

diagram_permission character varying(1),

CONSTRAINT map_viewer_project_pkey PRIMARY KEY (id),

CONSTRAINT map_viewer_project_default_basemap_id_4fc3b3f2_fk_map_viewe FOREIGN KEY (default_basemap_id)

REFERENCES public.map_viewer_basemap (id) MATCH SIMPLE

ON UPDATE NO ACTION ON DELETE NO ACTION DEFERRABLE INITIALLY DEFERRED,

CONSTRAINT map_viewer_project_owner_id_e90851c7_fk_auth_user_id FOREIGN KEY (owner_id)

REFERENCES public.auth_user (id) MATCH SIMPLE

ON UPDATE NO ACTION ON DELETE NO ACTION DEFERRABLE INITIALLY DEFERRED,

CONSTRAINT map_viewer_project_slug_key UNIQUE (slug)

)

CREATE TABLE public.munobr

(

ogc_fid integer NOT NULL DEFAULT nextval('munobr_ogc_fid_seq'::regclass),

ogr_fid double precision,

namemo character varying,

descr character varying,

fcode double precision,

id double precision,

wkb_geometry geometry(MultiPolygon,3857),

CONSTRAINT munobr_pkey PRIMARY KEY (ogc_fid)

)

В данном разделе приведена структура основных таблиц приложения.

3.2 Интерфейс приложения

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

Модель клиентской части отображена на рисунке 5.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 5 – Модель пользовательской части приложения

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

Модель административной части отображена на рисунке 6.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 6 – Модель административной части приложения

ЧАСТЬ 4. Инструкция пользователя

4.1 Инструкция пользователя

Для осуществления доступа к приложения необходимо пройти авторизацию.

На рисунке 7 отображено окно авторизации.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 7 – Авторизация

Для перехода к разделу «Управления данными», в котором мы можем загружать новые данные для их визуализации, необходимо навести курсов мыши на кнопку «Проекты», в выпадающем списке выбрать «Управление данными». На рисунке 8 отображен раздел загрузки данных.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 8 – Раздел загрузки данных

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

На рисунке 9 изображен функционал настройки цвета загруженных данных.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 9 – Окно выбора цвета слоя

Завершающим этапом будет переход к проекту для просмотра нами загруженных данных. Для этого нам понадобится перейти в раздел «Проекты», после чего выбрать проект. После отображения на карте слоя, нам необходимо кликнуть в любое область окрашенного слоя и мы увидим информация по области окрашенной данным цветом.

На рисунке 10 мы видим информацию по области отделенной коричневым цветом.

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 10 – Информация по выделенной области

4.2 Инструкция администратора

Для входа в панель администрирования необходимо ввести логин пароль пользователя наделенного правами администратора.

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

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 11 – Окно для входа в панель администратора

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

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 12 – Панель администратора

Для работы с пользователями, мы кликаем по разделу «Пользователи», после чего перед нами раскрывается раздел для работы с пользователями. В данном разделе мы можем создавать новых пользователей, блокировать, редактировать существующие.

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

C:\Users\petrov.pavel\Desktop\Безымянный.png

Рисунок 13 – Панель работы с пользователями

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

Заключение

В процессе реализации курсового проекта было разработано техническое задание на разработку информационного сайта.

Данная работа включает в себя описание архитектуры сайта оператора и его файловой структуры.

Реализован набор таблиц БД, статические файлы интерфейса и файлы для работы серверной части приложения. БД находится в третьей нормальной форме (3НФ), что говорит о том, что таблицы связаны по ключу и зависят друг от друга только ключевыми полями.

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

В ходе работы убедился, что такие средства, как язык программирования Python, фраемворк Django, а так же сервер БД PostgreSQL очень хорошо взаимодействуют и позволяет реализовать функциональные приложения.

Список использованной литературы

  1. Сафронов, М. Разработка веб-приложений в Yii 2 / М. Сафронов. - М.: ДМК, 2015. - 392 c.
  2. Дари, К. AJAX и PHP. Разработка динамических веб-приложений / К. Дари, Б. Бринзаре и друб. - М.: Символ, 2015. - 336 c.
  3. Миковски, М.С. Разработка одностраничных веб-приложений / М.С. Миковски, Д.К. Пауэлл. - М.: ДМК, 2014. - 512 c.
  4. Колисниченко, Д.Н. PHP и MySQL. Разработка веб-приложений. Профессиональное программирование / Д.Н. Колисниченко. - СПб.: BHV, 2015. - 592 c.
  5. Дари, К. AJAX и PHP. Разработка динамических веб-приложений / К. Дари, Б. Бринзаре, Ф. Черчез-Тоза, М. Бусика. - СПб.: Символ-плюс, 2015. - 336 c.
  6. Лукин, В.Н. Введение в проектирование баз данных / В.Н. Лукин. - М.: Вузовская книга, 2015. - 144 c.
  7. Лашина, М.В. Информационные системы и технологии в экономике и маркетинге: Учебное пособие / М.В. Лашина, Т.Г. Соловьев. - М.: КноРус, 2018. - 480 c.

Приложения

Приложение А. Исходные коды

*

{

margin:0;

padding:0;

outline:none;

}

body

{

background:#ECE9EB;

font:12px;

}

a

{

text-decoration:none;

}

#p1

{

font-size:18px;

color:#524E51;

margin-top:10px;

margin-left:5px;

font-weight:bold;

}

#p2

{

color:#D8D4D9;

margin-left:5px;

margin-bottom:10px;

}

#page_align

{

background:white;

width:1000px;

margin:35px auto;

box-shadow:0 1px 3px gray;

}

#header

{

height:95px;

border-bottom:3px solid #C7D4E1;

}

#header_nav

{

height:35px;

border-bottom:1px solid #A7A6A7;

box-shadow: 0px 1px gray;

}

#header_nav ul li

{

float:left;

line-height:35px;

}

#header_nav ul li:hover

{

background:#F5F0F4;

}

#header_nav ul li a

{

color:#C5C3C4;

font:12px Verdana, sens;

padding:0 7px;

border-right:1px solid #C5C3C4;

}

ul

{

list-style:none;

}

input[name=topsearch]

{

float:right;

height:22px;

margin:5px 1px;

width:145px;

background:#EAEAEA;

padding: 0 5px;

box-shadow: inset 2px 1px 3px gray;

}

#sitebar

{

width:195px;

float:left;

height:400px;

border-right:3px solid #9ED365;

background:red;

}

#content

{

width:800px;

height:500px;

float:right;

}

.header_buttons ul li

{

list-style:none;

float:left;

background:gray;

padding:8px;

padding-left:8px;

margin:2px;

}

.header_buttons ul li:hover

{

background:white;

}

.header_profile:hover

{

background:#C5C3C4;

}

.header_profile:hover ul

{

display:block;

}

.header_profile ul

{

list-style:none;

display:none;

}

.header_text

{

float:left;

margin-left:40px;

color:#515151;

margin-top:10px;

text-align:right;

}

.header_profile

{

float:left;

border-right:1px solid #f1f2f3;

padding-left:5px;

min-width:180px;

}

.header_right

{

float:right;

margin-top:5px;

margin-right:8px;

margin-bottom:2px;

width:600px;

height:48px;

border:1px solid gold;

}

.search_img

{

float:right;

margin:5px;

cursor:pointer;

}

.b3radius

{

border-radius:8px;

}

.clr

{

clear:both;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link href="main.css" type="text/css" rel="stylesheet">

<title>Первый сайт</title>

</head>

<body>

<div id="page_align" class = "b3radius">

<div id="header">

<div id="header_nav">

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Новости</a></li>

<li><a href="#">Статьи</a></li>

<li><a href="#">Халява</a></li>

<li><a href="#">Смешно</a></li>

<li><a href="#">Спорт</a></li>

<li><a href="#">Сообщества</a></li>

<li><a href="#" style="border:none">Погода</a></li>

</ul>

<form>

<img src="picture.png" width="18" alt="Поиск" class="search_img">

<input type="text" name="topsearch" placeholder="Чем могу помочь?" class="b3radius">

</form>

</div>

<p id="p1"><span style="color:#9CD562">web</span>theory</p>

<div id="p2"><p>Бесплатные видео уроки</p></div>

<div class="header_right">

<div class="header_profile">

<div class="header_text">

<b>Nickname</b><br>

<span style="font-size:10px;color:#B6B6B6;">Новых сообщений: 0</span>

</div>

<div style="border:3px solid #AFDFD8;float:right;margin-right:3px;">

<img src="avatar.png" width="38" class="b3radius">

</div>

<ul>

<li>E</li>

<li>E</li>

<li>E</li>

<li>E</li>

<li>E</li>

</ul>

</div>

<div class="header_buttons b3radius">

<ul>

<li><a href="#">Правила на сайте</a></li>

<li><a href="#">Добавить материал на сайт</a></li>

</ul>

</div>

</div>

</div>

<div id="sitebar"></div>

<div id="content"></div>

<div class="clr"></div>

</div>

</body>

</html>

*

{

margin:0;

padding:0;

}

body

{

background:#16191A;

color:#DAFFFF;

font-size:14px;

font-family:Tahoma;

}

#header

{

float:left;

display:block;

}

#headerImageLeft

{

position:absolute;

}

#headerImageMiddle

{

position:absolute;

left:133px;

}

#headerImageRight

{

position:absolute;

left:1260px;

}

#sitebar

{

border-top:2px solid red;

width:1120px;

position:relative;

top:163px;

left:140px;

}

#sitebar ul li a

{

color:white;

text-decoration:none;

}

#sitebar ul li

{

list-style:none;

float:left;

padding:0 24px;

font:16px Tahoma;

text-transform:uppercase;

padding-top:10px;

}

#sitebar ul

{

background:black;

height:40px;

}

#sitebar a:hover

{

color:#606060;

}

#ImageMiddle

{

position:relative;

top:162px;

left:141px;

}

#content

{

width:800px;

word-spacing:1px;

}

#contentAbout

{

position:relative;

top:190px;

left:140px;

}

#contentAboutZaglavie

{

position:relative;

top:220px;

left:0px;

font-size:24px;

color:red;

font-weight:bold;

}

#contentAboutZaglavie2

{

position:relative;

top:230px;

left:150px;

display:block;

font-size:24px;

color:red;

font-weight:bold;

}

#contentText1

{

position:relative;

top:240px;

left:140px;

text-indent:30px;

letter-spacing:1px;

}

#contentText2

{

position:relative;

top:240px;

left:140px;

text-indent:30px;

letter-spacing:1px;

}

#contentAboutZaglavie3

{

position:relative;

top:260px;

left:140px;

display:block;

font-size:24px;

color:red;

font-weight:bold;

}

#contentText3

{

position:relative;

top:270px;

left:140px;

text-indent:30px;

letter-spacing:1px;

}

#contentText4

{

position:relative;

top:270px;

left:140px;

text-indent:30px;

letter-spacing:1px;

}

.zaglavie

{

color:#DAFFFF;

font-size:30px;

letter-spacing:1px;

text-transform:uppercase;

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link type="text/css" href="aboutBox.css" rel="stylesheet">

<title>О боксе</title>

</head>

<body>

<div id="header">

<div id="headerImageLeft">

<img src="headerLeft.png" width="140px">

</div>

<div id="headerImageMiddle">

<a href="index.html"><img src="headerMiddle.png"></a>

</div>

<div id="headerImageRight" >

<img src="headerRight.png" width="100px">

</div>

</div>

<div id="sitebar">

<ul>

<li><a href="aboutClub.html">О клубе</a></li>

<li><a href="#contentAbout">О Боксе</a></li>

<li><a href="treners.html">Тренеры</a></li>

<li><a href="champions.html">Чемпионы</a></li>

<li><a href="contacts.html">Контакты</a></li>

<li><a href="rospistrena.html">Расписание тренеровок</a></li>

<li><a href="ecipbox.html">Экипировка боксера</a></li>

</ul>

</div>

<div id="content">

<span id="ImageMiddle"><img src="middle.png" width="1119px"></span>

<span id="contentAbout" class="zaglavie">о боксе</span>

<span id="contentAboutZaglavie">«КУЛАЧНЫЙ БОЙ – ДУШЕ РАЗГУЛ»</span>

<span id="contentAboutZaglavie2">ИСТОРИЯ КУЛАЧНОГО БОЯ НА РУСИ</span>

<span id="contentText1">

<p>

Русский человек всегда не прочь помахать руками за правое дело или ради забавы. Так уж повелось ещё издревле, и благодарить за

это мы должны наших предков. Первое упоминание о таком явлении, как кулачный бой появилось ещё в XI веке. Записи были сделаны

Нестором летописцем в

«Повести временных лет». Тем временам сопутствовали постоянные войны и набеги. Редкий год выдавался спокойным и некровопролитным.

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

поэтому так важно было иметь хоть какую-то подготовку. Со временем она стала обязательной для всех представителей мужского пола. В специальных

лагерях с самого детства мальчишки путём различных активных игр нарабатывали навыки самообороны. Одними из традиционных на тот момент были

: «царь горы» и «кучемала». Эти игры вырабатывали в детях решительность, волю и физические качества. Когда же мальчишки подрастали, то

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

серьёзного опыта. Русская армия, в свою очередь, владела кулачным боем практически в совершенстве, тогда как в Европе эта практика только

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

Шведы в той битве потеряли в 6 раз больше солдат и потерпели разгромное поражение.

</p>

</span>

<br>

<span id="contentText2">

<p>

Со временем кулачный бой стал не только необходимостью, но и развесёлой забавой, устраиваемой

на различные славянские праздники. Ни одно Рождество и ни одна масленица не проходила без «кулачков».

Многие очевидцы утверждали, что в этих сражениях могло участвовать до 500 человек. Кулачные бои, или,

как их называли в народе «кулачки», имели несколько разновидностей, основной из которых была «стенка».

В этой забаве обычно участвовали соседние улицы, деревни или слободы. Суть заключалась в том, что две

живые стенки сходились в оговорённом месте в рукопашном сражении. Целью каждой из них было разорвать

цепь противника и обратить его в бегство, или хотя бы заставить отступать. В таких игрищах были чёткие правила

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

жестоко карался самими бойцами, которые свято хранили и почитали традиции «кулачков». Бой проводился голыми

руками или в рукавицах. В рукавицы нельзя было ничего подкладывать. Так же нельзя было ничего зажимать в руке для усиления удара.

Запрещалось бить лежачих и присевших, хватать за одежду и делать подножки. Так же нельзя было бить ногами в голову и добивать соперника.

Первыми стенкой на стенку шли дети, за ними неженатые молодые люди, а дальше уже тяжёлая артиллерия – взрослые.

У каждой стенки был свой атаман, который поднимал боевой дух бойцов. Так же существовало множество тактик, направленных

на разрыв цепи противника. Среди прочих, в составе каждой команды были так называемые бойцы надежды, которые

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

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

Ещё одним видом «кулачков» был поединок, который назывался «сам на сам». Такие мероприятия могли проводиться,

как с предварительной подготовкой, так и стихийно. В "сам на сам» участвовало два бойца, которые дрались

исключительно на кулаках, без применения какого-либо оружия. Бить лежачего запрещалось, а так же нельзя

было добивать соперника с кровотечением. Бывали случаи, когда такие бои случались не только ради забавы,

но и с целью доказательства правоты ответчиком в суде. Однако такая практика просуществовала недолго.

</p>

</span>

<span id="contentAboutZaglavie3">ИСТОРИЯ СОВЕТСКОГО БОКСА</span>

<span id="contentText3">

<p>

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

Некоторые страны, такие как Англия и США, практически с момента зарождения этого

вида спорта стали являть на свет прекрасных боксёров. В СССР же ситуация сложилась немного иначе.

К нам бокс приехал из Парижа в лице известного тренера и чемпиона Э. Лусталло.

В 1887 году он начал преподавать эту дисциплину в Санкт-Петербурге. Немного позже,

в 1894 году, открывается первая боксёрская школа в Москве, которая и кладёт начало развитию

этого вида спорта в наших широтах. Своим появлением данное заведение обязано офицеру гвардии

Кистеру. Надо отметить, что с момента появления бокса у нас, он моментально стал пользоваться

огромной популярностью. Впрочем, это не удивительно, так как кулачные бои на Руси считаются

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

Дело в том, что в Древней Руси одним из способов решения конфликтных ситуаций являлся кулачный бой

«сам-на-сам». Этот вариант использовался в случае, если органы власти не могли разобраться в ситуации,

и заключался в том, что победивший в поединке оказывался прав, а проигравший – виновен. Однако, вернёмся

к советскому боксу. После открытия школы в Москве, её аналоги стали плодиться по территории СССР со скоростью света.

Открывались школы в Харькове, Севастополе, Одессе, Смоленске, Мариуполе и многих других городах.

В Киеве одним явным фанатом этого вида спорта было организовано сразу несколько секций бокса.

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

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

Одним из таких стал клерк Иван Бальцерович Граве, уехавший на кровно- заработанные в Лондон,

где обучался у чемпиона Великобритании Ламберта. Вернувшись на родину, он через местные газеты дал объявление,

что готов сразиться с любым боксёром-любителем за звание «первой перчатки» России. Так был проведён

первый чемпионат по боксу в СССР. Он состоялся в 1913 году. В нём принимали участие 4 боксёра, включая самого

Граве. Стоит отметить, что тот чемпионат выиграл именно он, даже не смотря на то, что соперники превосходили

его по различным параметрам. За этим последовали ещё два чемпионата 1915 и 1916 годов. Бокс набирал обороты.

Однако, как и любого активного течения, у него были свои сторонники и противники. Последние считали, что бокс –

это атрибут буржуазии. Они добились запрета на проведение соревнований практически во всех городах России.

В 1925 году состоялась затяжная дискуссия на тему, может ли бокс быть включён в программу общего физического

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

спортивного комитета, а так же глав профсоюза и работников медицины, утвердила его в программе. Были разработаны

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

Соревнования проходили в нескольких весовых категориях, где было определено 4 победителя. С тех пор соревнования

стали устраиваться регулярно. Даже Вторая мировая война не повлияла на проведение ежегодных чемпионатов Москвы.

</p>

</span>

<br>

<span id="contentText4">

<p>

Стоит отметить, что наши ребята показывали хорошие результаты не только

на внутренней арене, но и на международных соревнованиях. В дебютных для

советских боксёров Олимпийских играх, они завоевали 2 серебряные и 4 бронзовые медали.

А уже на следующих сразу трое наших спортсменов стали чемпионами. С тех пор показатели

только улучшались: наша команда стала второй в мире по результативности, уступив только

американцам, которые участвовали на Олимпиаде на 50 лет дольше. Советская школа бокса была

одной из сильнейших в мире, а имена наших боксёров знали повсюду.

</p>

</span>

</div>

</body>

</html>

*

{

margin:0;

padding:0;

}

body

{

background:#16191A;

color:#DAFFFF;

font-size:14px;

font-family:Tahoma;

}

#header

{

float:left;

display:block;

}

#headerImageLeft

{

position:absolute;

}

#headerImageMiddle

{

position:absolute;

left:133px;

}

#headerImageRight

{

position:absolute;

left:1260px;

}

#sitebar

{

border-top:2px solid red;

width:1120px;

position:relative;

top:163px;

left:140px;

}

#sitebar ul li a

{

color:white;

text-decoration:none;

}

#sitebar ul li

{

list-style:none;

float:left;

padding:0 24px;

font:16px Tahoma;

text-transform:uppercase;

padding-top:10px;

}

#sitebar ul

{

background:black;

height:40px;

}

#sitebar a:hover

{

color:#606060;

}

#ImageMiddle

{

position:relative;

top:162px;

left:141px;

}

#content

{

width:750px;

word-spacing:1px;

}

#contentAbout

{

position:relative;

top:180px;

left:140px;

}

#contentText1

{

position:relative;

top:200px;

left:140px;

text-indent:30px;

letter-spacing:1px;

}

#contentCeli

{

position:relative;

top:220px;

left:140px;

color:red;

}

#contentOl

{

position:relative;

top:230px;

left:150px;

}

ol li

{

padding-bottom:10px;

letter-spacing:1px;

}

#CMOlLi1

{

list-style-image:url(1.png);

}

#CMOlLi2

{

list-style-image:url(2.png);

}

#CMOlLi3

{

list-style-image:url(3.png);

}

#CMOlLi4

{

list-style-image:url(4.png);

}

#contentPlace

{

position:relative;

top:240px;

left:140px;

color:red;

}

#contentText2

{

position:relative;

top:250px;

left:140px;

letter-spacing:1px;

text-indent:30px;

}

#contentImage1

{

position:relative;

top:250px;

left:140px;

}

#contentText3

{

position:relative;

top:250px;

left:140px;

}

#contentImage2

{

position:relative;

top:270px;

left:140px;

}

#contentText4

{

position:relative;

top:270px;

left:140px;

}

#contentImage3

{

position:relative;

top:290px;

left:140px;

}

.zaglavie

{

color:#DAFFFF;

font-size:30px;

letter-spacing:1px;

text-transform:uppercase;

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link type="text/css" href="aboutClub.css" rel="stylesheet">

<title>О клубе</title>

</head>

<body>

<div id="header">

<div id="headerImageLeft">

<img src="headerLeft.png" width="140px">

</div>

<div id="headerImageMiddle">

<a href="index.html"><img src="headerMiddle.png"></a>

</div>

<div id="headerImageRight" >

<img src="headerRight.png" width="100px">

</div>

</div>

<div id="sitebar">

<ul>

<li><a href="#contentAbout">О клубе</a></li>

<li><a href="aboutBox.html">О Боксе</a></li>

<li><a href="treners.html">Тренеры</a></li>

<li><a href="champions.html">Чемпионы</a></li>

<li><a href="contacts.html">Контакты</a></li>

<li><a href="rospistrena.html">Расписание тренеровок</a></li>

<li><a href="ecipbox.html">Экипировка боксера</a></li>

</ul>

</div>

<div id="content">

<span id="ImageMiddle"><img src="middle.png" width="1119px"></span>

<span id="contentAbout" class="zaglavie">о клубе</span>

<span id="contentText1"><p>Клуб бокса "Торпедо" уже на протяжении 75 лет является одной из сильнейших школ любительского бокса не только в России, но и в мире. «Торпедо» сохраняет традиции. Боксёров клуба "Торпедо" можно найти как в юношеской, молодежной так и в главной сборных командах России.</p><br>

<p>Руководителем боксерского клуба «Торпедо» является Меньшиков Олег Владимирович старший тренер команды юниоров сборной Российской Федерации, заслуженный тренер России, заслуженный работник физической культуры Российской Федерации (2013).</p><br>

<p>Юные спортсмены в возрасте от 7 лет начинают свою спортивную карьеру в детской-юношеской школе «Торпедо», являющейся ГБОУ ДОДСН СДЮСШОР «МГФСО» Москомспорта. Ученики школы участвуют в соревнованиях различного уровня, от районных, до общероссийских, получают спортивные разряды, а самые выдающиеся, отбираются в юношескую сборную Российской Федерации по боксу.</p><br>

<p>Закончив детскую-юношескую школу «Торпедо» многие её выпускники продолжают занятия и спортивную карьеру, принимают участие в международных соревнованиях по боксу, в чемпионатах России Европы, Мира и Олимпийских играх.</p><br>

</span>

<span id="contentCeli" class="zaglavie">цели клуба</span>

<span id="contentOl">

<ol id="CMOlLi1">

<li>Популяризация Бокса в России</li>

</ol>

<ol id="CMOlLi2">

<li>Вовлечение максимального числа детей и подростков в систему спортивной подготовки по боксу, направленную на гармоническое развитие физических качеств, общей физической подготовки и изучение базовой техники бокса, волевых и морально-этических качеств личности, формирования потребности к занятиям спортом и ведению здорового образа жизни.</li>

</ol>

<ol id="CMOlLi3">

<li>Воспитание мужественных качеств — настойчивость, инициативность, целеустремленность, выдержка, уверенность в своих силах, смелость и решительность</li>

</ol>

<ol id="CMOlLi4">

<li>Воспитание спортсменов высокой квалификации, потенциального резерва сборных команд страны, субъектов федерации и защитников нашей Родины</li>

</ol>

</span>

<span id="contentPlace" class="zaglavie">Место занятий</span>

<span id="contentText2">

<p>Боксерский клуб «Торпедо» находится в Южном округе Москвы в пешей доступности от станций метро "Автозаводская" и "Дубровка",

а также недалеко от м. "Пролетарская", "Коломенская" и "Волгоградский проспект".</p>

<br>

<p>Секция бокса занимает отдельное двухэтажное здание на территории многофункционального

спортивного комплекса «Торпедо» имени Эдуарда Стрельцова, где на первом этаже находится

тренажерный зал с силовыми тренажерами, а весь второй этаж занимает просторный хорошо

освещенный спортзал для тренировок с рингом для проведения тренировочных боев.</p>

<br>

</span>

<span id="contentImage1"><img src="contentImage1.png"></span>

<span id="contentText3">

<p>

Для занимающихся в секциях предоставляются раздевалки, душевые, туалеты и парковочные стоянки (въезд автомобилей на территорию Спорткомплекса платный)

</p>

</span>

<span id="contentImage2"><img src="contentImage2.png"></span>

<span id="contentText4">

<p>

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

</p>

</span>

<span id="contentImage3"><img src="contentImage3.png"></span>

</div>

</body>

</html>

*

{

margin:0;

padding:0;

}

body

{

background:#16191A;

color:#DAFFFF;

font-size:14px;

font-family:Tahoma;

}

#header

{

float:left;

display:block;

}

#headerImageLeft

{

position:absolute;

}

#headerImageMiddle

{

position:absolute;

left:133px;

}

#headerImageRight

{

position:absolute;

left:1260px;

}

#sitebar

{

border-top:2px solid red;

width:1120px;

position:relative;

top:163px;

left:140px;

}

#sitebar ul li a

{

color:white;

text-decoration:none;

}

#sitebar ul li

{

list-style:none;

float:left;

padding:0 24px;

font:16px Tahoma;

text-transform:uppercase;

padding-top:10px;

}

#sitebar ul

{

background:black;

height:40px;

}

#sitebar a:hover

{

color:#606060;

}

#ImageMiddle

{

position:relative;

top:162px;

left:141px;

}

#content

{

width:750px;

word-spacing:1px;

}

#contentAbout

{

position:relative;

top:200px;

left:140px;

}

#contentText1

{

position:relative;

top:220px;

left:140px;

}

#contentText2

{

position:relative;

top:220px;

left:140px;

}

#contentZaglavie1

{

position:relative;

top:240px;

left:140px;

}

#contentImage1

{

position:relative;

top:260px;

left:140px;

}

#contentZaglavie2

{

position:relative;

top:300px;

left:140px;

}

#contentImage2

{

position:relative;

top:320px;

left:140px;

}

.zaglavie

{

color:#DAFFFF;

font-size:30px;

letter-spacing:1px;

text-transform:uppercase;

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link type="text/css" href="champions.css" rel="stylesheet">

<title>Чемпионы</title>

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="headerImageLeft">

<img src="headerLeft.png" width="140px">

</div>

<div id="headerImageMiddle">

<a href="index.html"><img src="headerMiddle.png"></a>

</div>

<div id="headerImageRight" >

<img src="headerRight.png" width="100px">

</div>

</div>

<div id="sitebar">

<ul>

<li><a href="aboutClub.html">О клубе</a></li>

<li><a href="aboutBox.html">О Боксе</a></li>

<li><a href="treners.html">Тренеры</a></li>

<li><a href="#contentAbout">Чемпионы</a></li>

<li><a href="contacts.html">Контакты</a></li>

<li><a href="rospistrena.html">Расписание тренеровок</a></li>

<li><a href="ecipbox.html">Экипировка боксера</a></li>

</ul>

</div>

<div id="content">

<span id="ImageMiddle"><img src="middle.png" width="1119px"></span>

<span id="contentAbout" class="zaglavie">наши чемпионы</span>

<span id="contentText1">

<p>

"ТОРПЕДО" — единственный клуб в России, боксеры которого становились участниками

четырех Олимпийских игр подряд с 2000 по 2012 г. (в Сиднее, Афинах, Пекине и Лондоне)!

</p>

</span>

<br>

<span id="contentText2">

<p>

Клуб бокса "Торпедо" воспитал большое количество чемпионов по боксу Российского и Мирового уровня, вот некоторые из них:

</p>

</span>

<span id="contentZaglavie1" class="zaglavie">действующие чемпионы</span>

<span id="contentImage1"><img src="nowchamp.png"></span>

<span id="contentZaglavie2" class="zaglavie">завершили спортивную карьеру</span>

<span id="contentImage2"><img src="endchamp.png"></span>

</div>

*

{

margin:0;

padding:0;

}

body

{

background:#16191A;

color:#DAFFFF;

font-size:14px;

font-family:Tahoma;

}

#header

{

float:left;

display:block;

}

#headerImageLeft

{

position:absolute;

}

#headerImageMiddle

{

position:absolute;

left:133px;

}

#headerImageRight

{

position:absolute;

left:1260px;

}

#sitebar

{

border-top:2px solid red;

width:1120px;

position:relative;

top:163px;

left:140px;

}

#sitebar ul li a

{

color:white;

text-decoration:none;

}

#sitebar ul li

{

list-style:none;

float:left;

padding:0 24px;

font:16px Tahoma;

text-transform:uppercase;

padding-top:10px;

}

#sitebar ul

{

background:black;

height:40px;

}

#sitebar a:hover

{

color:#606060;

}

#ImageMiddle

{

position:relative;

top:162px;

left:141px;

}

#content

{

width:750px;

word-spacing:1px;

}

#contentZaglavie1

{

position:relative;

top:200px;

left:140px;

}

#contactImage1

{

position:relative;

top:210px;

left:140px;

display:block;

}

#contentText1

{

position:relative;

top:20px;

left:175px;

}

#contentText2

{

position:relative;

top:40px;

left:175px;

display:block;

}

#contentText3

{

position:relative;

top:45px;

left:175px;

display:block;

}

#contentText4

{

position:relative;

top:88px;

left:175px;

}

#contentText5

{

position:relative;

top:132px;

left:55px;

}

#mapImage

{

position:relative;

top:-90px;

left:650px;

}

.zaglavie

{

color:#DAFFFF;

font-size:30px;

letter-spacing:1px;

text-transform:uppercase;

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<link type="text/css" href="contacts.css" rel="stylesheet">

<title>Контакты</title>

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="headerImageLeft">

<img src="headerLeft.png" width="140px">

</div>

<div id="headerImageMiddle">

<a href="index.html"><img src="headerMiddle.png"></a>

</div>

<div id="headerImageRight" >

<img src="headerRight.png" width="100px">

</div>

</div>

<div id="sitebar">

<ul>

<li><a href="aboutClub.html">О клубе</a></li>

<li><a href="aboutBox.html">О Боксе</a></li>

<li><a href="treners.html">Тренеры</a></li>

<li><a href="champions.html">Чемпионы</a></li>

<li><a href="#contentText5">Контакты</a></li>

<li><a href="rospistrena.html">Расписание тренеровок</a></li>

<li><a href="ecipbox.html">Экипировка боксера</a></li>

</ul>

</div>

<div id="content">

<span id="ImageMiddle"><img src="middle.png" width="1119px"></span>

<span id="contentZaglavie1" class="zaglavie">Контакты</span>

<span id="contactImage1"><img src="contactImage.png"></span>

<span id="contentText1">Москва, ул. Восточная, дом 4А, строение 12.</span>

<span id="contentText2">Вблизи станции метро "Автозаводская" и "Дубровка", на </span>

<span id="contentText3">территории стадиона "Торпедо" им. Эдуарда Стрельцова</span>

<span id="contentText4">+7(495)228 14 88</span>

<span id="contentText5">torpedo@boxers.ru</span>

<span id="mapImage"><img src="map.png"></span>

</div>

</div>

</body>

</html>

*

{

margin:0;

padding:0;

}

body

{

background:#16191A;

color:#DAFFFF;

font-size:14px;

font-family:Tahoma;

}

#header

{

float:left;

display:block;

}

#headerImageLeft

{

position:absolute;

}

#headerImageMiddle

{

position:absolute;

left:133px;

}

#headerImageRight

{

position:absolute;

left:1260px;

}

#sitebar

{

border-top:2px solid red;

width:1120px;

position:relative;

top:163px;

left:140px;

}

#sitebar ul li a

{

color:white;

text-decoration:none;

}

#sitebar ul li

{

list-style:none;

float:left;

padding:0 24px;

font:16px Tahoma;

text-transform:uppercase;

padding-top:10px;

}

#sitebar ul

{

background:black;

height:40px;

}

#sitebar a:hover

{

color:#606060;

}

#ImageMiddle

{

position:relative;

top:162px;

left:141px;

}

#content

{

width:850px;

word-spacing:1px;

}

#contentAbout

{

position:relative;

top:200px;

left:140px;

}

#contentZaglavie1

{

position:relative;

top:210px;

left:140px;

}

#contentText1

{

position:relative;

top:220px;

left:160px;

line-height:30px;

}

#contentZaglavie2

{

position:relative;

top:240px;

left:140px;

}

#contentText2

{

position:relative;

top:250px;

left:160px;

line-height:30px;

}

#contentZaglavie3

{

position:relative;

top:250px;

left:140px;

padding-bottom:10px;

border-bottom:1px solid red;

}

#contentText3

{

position:relative;

top:260px;

left:140px;

text-transform:uppercase;

display:block;

}

#boxPerImage1

{

float:left;

position:relative;

top:265px;

left:140px;

}

#contentText4

{

position:relative;

top:260px;

left:140px;

display:block;

padding-bottom:40px;

border-bottom:1px solid red;

}

#contentText5

{

position:relative;

top:270px;

left:140px;

text-transform:uppercase;

display:block;

}

#snarPerImage2

{

float:left;

position:relative;

top:275px;

left:140px;

}

#contentText6

{

position:relative;

top:275px;

left:140px;

display:block;

padding-bottom:100px;

border-bottom:1px solid red;

}

#contentText7

{

position:relative;

top:280px;

left:142px;

text-transform:uppercase;

display:block;

}

#shlemImage3

{

float:left;

position:relative;

top:285px;

left:140px;

}

#contentText8

{

position:relative;

top:285px;

left:140px;

display:block;

padding-bottom:40px;

border-bottom:1px solid red;

}

#contentText9

{

position:relative;

top:290px;

left:142px;

text-transform:uppercase;

display:block;

}

#boxerkiImage4

{

float:left;

position:relative;

top:295px;

left:140px;

}

#contentText10

{

position:relative;

top:295px;

left:140px;

display:block;

padding-bottom:60px;

border-bottom:1px solid red;

}

#contentText11

{

position:relative;

top:300px;

left:142px;

text-transform:uppercase;

display:block;

}

#bintsImage5

{

float:left;

position:relative;

top:305px;

left:140px;

}

#contentText12

{

position:relative;

top:305px;

left:140px;

display:block;

padding-bottom:80px;

border-bottom:1px solid red;

}

#contentText13

{

position:relative;

top:310px;

left:142px;

text-transform:uppercase;

display:block;

}

#kappaImage6

{

float:left;

position:relative;

top:315px;

left:140px;

}

#contentText14

{

position:relative;

top:315px;

left:140px;

display:block;

padding-bottom:40px;

border-bottom:1px solid red;

}

#contentText15

{

position:relative;

top:320px;

left:142px;

text-transform:uppercase;

display:block;

}

#formaImage7

{

float:left;

position:relative;

top:325px;

left:140px;

}

#contentText16

{

position:relative;

top:325px;

left:140px;

display:block;

padding-bottom:40px;

border-bottom:1px solid red;

}

#contentText17

{

position:relative;

top:330px;

left:142px;

text-transform:uppercase;

display:block;

}

#bandajImage8

{

float:left;

position:relative;

top:335px;

left:140px;

}

#contentText18

{

position:relative;

top:335px;

left:140px;

display:block;

}

.zaglavie

{

color:#DAFFFF;

font-size:30px;

letter-spacing:1px;

text-transform:uppercase;

}

.zaglavieRed

{

color:red;

text-transform:uppercase;

font-size:28px;

display:block;

}