Интернет-приложение файлового обмена с разграничением прав доступа
Дипломная
работа
Интернет-приложение
файлового обмена с разграничением прав доступа
Реферат
Список сокращений
Введение
Глава 1. Обзор использованных технологий
1.1 Технологии используемые на стороне сервера
.1.1 Язык python
.1.2 Основанный на языке python фреймворк Django
.1.3 ORM
1.1.4 MVC
1.1.5 JSON
1.1.6 СУБД MySQL
1.1.7 Веб-сервер Nginx
1.1.8 Операционная система Linux
.2 Технологии используемые на стороне клиента
1.2.1 HTML5
1.2.2 CSS3
1.2.3 JavaScript
1.2.4 jQuery
1.2.5 AJAX
Глава 2. Разработка online хранилища данных
2.1 Постановка задачи
.2 Реализация системы
2.2.1 Предметная область
2.2.2
Программная реализация предметной области
2.2.3 Функции представления
.2.4 Шаблоны вывода данных
Заключение
Список литературы
Приложения
Реферат
Список ключевых слов: python, Django, html5, css3, js, jquery, ajax, json, mysql, nginx, linux.
В курсовом проекте описывается процесс создания Веб-приложение для
хранения файлов.
В процессе выполнения курсового проекта были сделаны следующие выводы:
¾ Разработанное приложение является средством для хранения
данных.
¾ Есть возможность модернизации программы и внедрения, в какую
либо информационную систему.
¾ Хранения данных о пользователях и файлах следует осуществлять
в базе данных MySQL
Объем работы - 68 страниц, количество иллюстраций - 1. использовано 10
источников.
Список
сокращений
- язык разметки гипертекста.
CSS3 -
каскадные таблицы стилей.
AJAX -
асинхронный JavaScript и XML.
JSON -
текстовый формат обмена данными.
Введение
В настоящее время с развитием интернета и ростом скоростей существуют
множество ресурсов созданных для онлайн обмена и хранения файлов.
Была поставлена задача создание подобного ресурса.
Были поставлены задачи реализации модулей:
·
регистрация;
·
редактирование
профиля;
·
функции загрузки
файла незарегистрированным пользователем;
·
для
зарегистрированных пользователей:
1. Управление своими файлами.
2. Управление своими каталогами.
3. Функция показа списка файлов
пользователя.
4. Возможность скрывать отдельные файлы
и каталоги.
Для того чтобы внести уникальность в проект так же были реализованы
следующие возможности:
·
поиск;
·
раздел
администрирования с большим количеством функций;
·
ограничение
размера загрузки файлов для разных групп пользователей;
·
задержка при
отдаче файла.
Глава 1. Обзор использованных технологий
1.1 Технологии используемые на стороне сервера
1.1.1 Язык python
Python - высокоуровневый язык программирования общего назначения,
ориентированный на повышение производительности разработчика и читаемости кода.
Синтаксис ядра Python минималистичен. В то же время стандартная библиотека
включает большой объём полезных функций.поддерживает несколько парадигм
программирования, в том числе структурное, объектно-ориентированное,
функциональное, императивное и аспектно-ориентированное. Основные архитектурные
черты - динамическая типизация, автоматическое управление памятью, полная
интроспекция, механизм обработки исключений, поддержка многопоточных вычислений
и удобные высокоуровневые структуры данных. Код в Питоне организовывается в
функции и классы, которые могут объединяться в модули, которые в свою очередь
могут быть объединены в пакеты.
Эталонной реализацией Python является интерпретатор CPython,
поддерживающий большинство активно используемых платформ. Он распространяется
под свободной лицензией Python Software Foundation License, позволяющей
использовать его без ограничений в любых приложениях, включая проприетарные.
Есть реализации интерпретаторов для JVM (с возможностью компиляции), MSIL (с
возможностью компиляции), LLVM и других. Проект PyPy предлагает реализацию
Питона на самом Питоне, что уменьшает затраты на изменения языка и постановку
экспериментов над новыми возможностями[1].- активно развивающийся язык
программирования, новые версии (с добавлением/изменением языковых свойств)
выходят примерно раз в два с половиной года. Вследствие этого и некоторых
других причин на Python отсутствуют стандарт ANSI, ISO или другие официальные
стандарты, их роль выполняет CPython.
История Pythonбыл задуман в 1980-х годах, а его
создание началось в декабре 1989 года Гвидо ван Россумом в составе центра
математики и информатики в Нидерландах. Язык Python был задуман как потомок
языка программирования ABC, способный к обработке исключений и взаимодействию с
операционной системой Амёба. Ван Россум является основным автором Python-а и по
сей день продолжает выполнять центральную роль в принятии решений относительно
развития языка. Версия Python 2.0 была выпущена 16 октября 2000 года и включала
в себя много новых крупных функций таких как полный сборщик мусора и поддержка
Unicode. Однако, наиболее важным из всех изменений было изменение самого
процесса развития языка и переход на более прозрачный процесс его создания.
Первая версии Python 3.0 была выпущена 3 декабря 2008 года после длительного
периода тестирования. Многие функции в этой новой версии были совместимы с
Python 2.6 и Python 2.7. Стабильной версией на момент написания
квалификационной работы является Python
3.3 (на стадии тестирования Python
3.4) [7].
Из современных языков Python можно сравнить в первую очередь с Java и
Perl. Python выполняет все обещания, которые дала, но не выполнила Java. Python
очень хорошо переносим. Он работает на всех платформах, на которых есть Java, и
еще на многих. Мало найдется таких платформ, на которые Python не перенесен. Я
не говорю про UNIX и Windows, конечно - с точки зрения переносимости куда
интереснее такие платформы как Mac, Amiga, Palm, RiscOS, AS/400 и многие
другие. Для особых любителей Java есть Jython. Он состоит из двух частей: во-первых,
это интерпретатор Pyhon, написанный на Java, а во-вторых это компилятор Python
в байт-код Java. В сравнении с Perl - Python как язык ему совершенно
равномощен, но избавлен от великого множества неприятностей и неудобств,
присущих Perl. Python обладает богатой стандартной библиотекой, плюс великим
множеством модулей, доступных в Интернете. Для пользователей Windows есть пакет
win32, из которого доступны практически все функции Windows API, DDE, COM[1].
Основные структуры управления- вполне обычный, можно сказать,
"традиционный" язык программирования. Все привычные конструкции в
языке есть - условный оператор if, циклы for и while, функции, классы, модули,
пакеты (иерархические совокупности модулей). Нет цикла do-while и оператора
case.
Из менее традиционных операторов - возбуждение исключений raise и их
перехват try-except-else и try-finally. Впрочем, исключения начинают занимать
свое место и в других современных языках, так что чем-то революционным их
назвать нельзя.
Для многих становится неожиданным, что в Питоне блочная структура
обозначается отступами, а не словами begin/end (или скобками). К этому, однако,
быстро привыкаешь, и это становится очень удобно.
Модули - структурирование пространства имен
При создании больших программ или библиотек большим количеством людей
встает проблема коллизий имен. Питон решает эту проблему так же, как и
большинство современных языков - структурированием пространства имен с помощью
иерархически организованных модулей.
В Питоне 3 пространства имен: встроенное пространство имен (им можно
управлять с помощью модуля доступа к интерпретатору sys), локальное
пространство функции, и глобальное пространство модуля.
(Объектно-ориентированное программирование создает дополнительные пространства
классов и экземпляров классов, об этом ниже). Каждое пространство имен - это
список отображений имени в значение[1].
Модуль - это совокупность описаний, объединенных в общее пространство
имен - глобальное пространство модуля. Модули подключаются к программе (или
другому модулю) с помощью оператора import, после которого имена из
пространства имен модуля становятся доступными. Какие именно имена становятся
доступны, определяет оператор import: вариант import module делает доступным
ровно одно имя - имя модуля module, но зато через это имя можно использовать
все глобальные имена модуля в виде module.name. В варианте from module import
name из модуля импортируется указанное имя или список имен. В варианте from
module import * из модуля импортируются все имена. Хотя автор модуля может
ограничить этот список, а в отсутствии такого ограничения не импортируются
имена, начинающиеся с подчеркивания - считается, что это внутренние имена
модуля, не входящие в его публичный интерфейс.
Модуль может быть написан на Python, C или C++. Модули, написанные на
Питоне, позволяют создавать новые классы (об объектно-ориентированном
программировании речь будет идти ниже). Модули написанные на C и C++ позволяют
создавать новые типы данных. Модули, написанные на C/C++ могут быть встроенные
(builtin) или подгружаемые (DLL в Windows, разделяемые библиотеки в тех
вариантах UNIX, в которых формат выполняемых файлов ELF).
Модуль на Питоне - это текстовый файл с расширением .py, содержащий
описания переменных, функций и классов, плюс, выполняемый код, который
позволяет инициализировать модуль. Этот код выполняется при первом импорте
модуля, после чего интерпретатор запоминает, что модуль уже проимпортирован и
проинициализирован, и при последующих импортах этого же модуля код
инициализации не выполняется.
Изменяемые и неизменяемые объекты; адресная арифметика и ссылки
Объекты в Питоне бывают двух разновидностей - изменяемые и неизменяемые.
Списки, например - объекты изменяемые, их содержимое и длину можно менять.
Поскольку ключами словарей могут быть только неизменяемые объекты, в Питоне
есть специальный тип неизменяемых списков - кортежи. Числа, естественно,
объекты неизменяемые. Также неизменяемыми являются строки, в отличие от многих
других языков программирования. Хотя классы, написанные программистами,
порождают изменяемые объекты, у программиста есть возможность написать класс,
экземпляры которого могут быть ключами словаря[7].
Адресной арифметики в Питоне нет. Вообще. Поэтому разименовать нулевой
указатель просто невозможно. Ссылки (указатели) в Питоне есть, но манипулирование
ими осуществляется прозрачно для программиста. В действительности все
переменные в Питоне являются ссылками на объекты; поэтому, например, запись a =
b означает "в переменную a скопировать ссылку из переменной b ".
Также списки и словари хранят не объекты, а ссылки на объекты. Присваивание и
разыменование ссылок производится автоматически.
Каждый объект в Питоне хранит счетчик ссылок, и при таком копировании
ссылки этот счетчик увеличивается. Счетчик же ссылок того объекта, на который
переменная a указывала раньше - уменьшается. Когда счетчик достигает 0, объект
считается неиспользуемым, для него вызывается деструктор (если это экземпляр
класса с деструктором), и память объекта освобождается.
Такой механизм называется "синхронной сборкой мусора со счетчиком
ссылок". Помимо него, в Питоне есть асинхронный сборщик мусора,
достоинство которого в том, что он умеет распознавать циклические ссылки и
очищать объекты, на которые нет других ссылок (не из цикла). (Пример
циклических ссылок: l=[]; l.append(l)) [7]
Рассмотрим поподробнее питоновские ссылки. Создадим список и присвоим его
(на самом деле присвоим ссылку на него) в переменную a : a = [21, 12,
"str"]. Теперь присвоим ссылку из a в переменную b : a = b . Изменим
список, на который ссылается a , скажем, добавим в него содержимое другого
списка: a += [2000]. На какой список ссылается переменная b ? На тот же, что и
a - на список из 4 элементов. Происходит это потому, что b все еще хранит
ссылку на тот же список, что и a . А теперь присвоим в a новый список: a = [12,
21]. Что теперь будет в b ? А все тот же список из 4 элементов. Присваивание в
a разорвало связь между a и b . В переменной a теперь ссылка на новый список, а
в переменной b все та же ссылка на тот же список.
Если a - переменная, хранящая ссылку на список, и присваивание b = a
копирует только ссылку на тот же список, то можно ли скопировать сам список?
Короткий ответ - да, можно. Но не все так просто. Ведь и сам список хранит не
объекты, а ссылки на объекты. Должны ли копироваться эти ссылки или должны быть
продублированы и сами объекты? Питон дает два ответа на этот вопрос: можно
сделать и так, и эдак. Первый вариант копирования называется
"поверхностным", второй - "глубоким" копированием. Глубокое
копирование учитывает циклические ссылки. Классы, написанные программистом,
могут определять методы, участвующие в копировании, тем самым
"помогая" процессу копирования, для того чтобы не включать в
копирование лишней информации[1].
Манипуляции с неизменяемыми объектами осуществляются путем создания новых
объектов. Например, если в строке надо заменить символ, исходная строка
разбивается на две подстроки, и из них (плюс новый символ) создается новая
строка. Если в переменной a ссылка на цело число, то в результате операции a +=
1 в a окажется ссылка на новое число.
.1.2 Основанный на языке python
фреймворк Django
Django - свободный фреймворк для веб-приложений на языке Python,
использующий шаблон проектирования MVC. Проект поддерживается организацией
Django Software Foundation.
Сайт на Django строится из одного или нескольких приложений, которые
рекомендуется делать отчуждаемыми и подключаемыми. Это одно из существенных
архитектурных отличий этого фреймворка от некоторых других (например, Ruby on
Rails). Один из основных принципов фреймворка - DRY (англ. Don't repeat
yourself)
Также в отличие от других фреймворков обработчики URL в Django
конфигурируются явно при помощи регулярных выражений, а не выводятся
автоматически из структуры моделей контроллеров.
Для работы с базой данных Django использует собственный ORM, в котором
модель данных описывается классами Python, и по ней генерируется схема базы
данных[2].
Архитектура Django похожа на "Модель-Представление-Контроллер"
(MVC). Контроллер классической модели MVC примерно соответствует уровню,
который в Django называется Представление (англ. View), а презентационная
логика Представления реализуется в Django уровнем Шаблонов (англ. Template).
Из-за этого уровневую архитектуру Django часто называют
"Модель-Шаблон-Представление" (MTV).
Первоначальная разработка Django, как средства для работы новостных
ресурсов, достаточно сильно отразилась на его архитектуре: он предоставляет ряд
средств, которые помогают в быстрой разработке веб-сайтов информационного
характера. Так, например, разработчику не требуется создавать контроллеры и
страницы для административной части сайта, в Django есть встроенное приложение
для управления содержимым, которое можно включить в любой сайт, сделанный на
Django, и которое может управлять сразу несколькими сайтами на одном сервере.
Административное приложение позволяет создавать, изменять и удалять любые
объекты наполнения сайта, протоколируя все совершённые действия, и
предоставляет интерфейс для управления пользователями и группами (с пообъектным
назначением прав).
В дистрибутив Django также включены приложения для системы комментариев,
синдикации RSS и Atom, "статических страниц" (которыми можно
управлять без необходимости писать контроллеры и представления),
перенаправления URL и другое[2].
Рассмотрим небольшой пример, который демонстрирует разницу, который
предлагает среда разработки. Покажем как вы могли написать CGI код,
воспользовавшись возможностями Django (см.приложение 1)
Главной идеей в Django является разделение задач:
·
Файл models.py
содержит описание таблицы базы данных, представленное в виде класса Python.
Такой класс называется моделью. С помощью данного класса вы можете создавать,
получать, обновлять и удалять записи в таблице вашей базы данных, используя
простой код на языке Python вместо использования повторяющихся SQL команд.
·
Файл views.py
содержит логику отображения страницы в функции latest_books(). Такая функция
называется представлением.
·
Файл urls.py
определяет какое именно представление будет вызвано для URL, заданного в виде
шаблона. В данном случае URL /latest/ будет обработано функцией latest_books().
Другими словами, если имя вашего домена example.com, то любой доступ к
example.com/latest/ будет обработан функцией latest_books().
·
Файл
latest_books.html является HTML шаблоном, который описывает дизайн страницы. Он
использует шаблонный язык с основными логическими операторами - {% for book in
book_list %}.
Объединённые вместе, эти компоненты приложения следуют шаблону
Модель-Представление-Контроллёр (Model-View-Controller, MVC). Примем, что MVC
определяет способ разработки программного обеспечения при котором код для
определения и доступа к данным (модель) отделён от логики приложения
(управление), которая в свою очередь отделена от интерфейса пользователя
(представление).
Основное преимущество такого подхода заключается в свободе объединения
этих компонентов. Следовательно, каждая отдельная часть приложения, созданного
с помощью Django, имеет одно назначение и может быть изменена независимо, т.е.,
без влияния на остальные компоненты. Например, разработчик может изменить URL
для данной части приложения без изменения остального кода. Дизайнер может
изменить HTML страницы без внесения изменений в код, который отображает
страницу. Администратор базы данных может переименовать таблицу и определить
эти изменения в одном месте, вместо того, чтобы искать и вносить изменения во
множество файлов[2].
Веб-фреймворк Django используется в таких крупных и известных сайтах, как
Instagram, Disqus, Mozilla, The Washington Times, Pinterest и др.
Также Django используется в качестве веб-компонента в различных проектах,
таких как Graphite - система построения графиков и мониторинга, FreeNAS -
свободная реализация системы хранения и обмена файлами и др.
Архитектура Django похожа на "Модель-Представление-Контроллер"
(MVC). Контроллер классической модели MVC примерно соответствует уровню,
который в Django называется Представление (англ. View), а презентационная
логика Представления реализуется в Django уровнем Шаблонов (англ. Template).
Из-за этого уровневую архитектуру Django часто называют
"Модель-Шаблон-Представление" (MTV) [2].
Первоначальная разработка Django, как средства для работы новостных
ресурсов, достаточно сильно отразилась на его архитектуре: он предоставляет ряд
средств, которые помогают в быстрой разработке веб-сайтов информационного
характера. Так, например, разработчику не требуется создавать контроллеры и
страницы для административной части сайта, в Django есть встроенное приложение
для управления содержимым, которое можно включить в любой сайт, сделанный на Django,
и которое может управлять сразу несколькими сайтами на одном сервере.
Административное приложение позволяет создавать, изменять и удалять любые
объекты наполнения сайта, протоколируя все совершённые действия, и
предоставляет интерфейс для управления пользователями и группами (с пообъектным
назначением прав) [2] [7].
В дистрибутив Django также включены приложения для системы комментариев,
синдикации RSS и Atom, "статических страниц" (которыми можно
управлять без необходимости писать контроллеры и представления),
перенаправления URL и другое .
.1.3 ORM
ORM - технология программирования, которая связывает базы данных с
концепциями объектно-ориентированных языков программирования, создавая
"виртуальную объектную базу данных". Существуют как проприетарные,
так исвободные реализации этой технологии.
В объектно-ориентированном программировании объекты в программе
представляют объекты из реального мира. В качестве примера можно рассмотреть
адресную книгу, которая содержит список людей с нулём или более телефонов и
нулём или более адресов. В терминах объектно-ориентированного программирования
они будут представляться объектами класса "Человек", которые будут
содержать следующий список полей: имя, список (или массив) телефонов и список
адресов[3].
Суть задачи состоит в преобразовании таких объектов в форму, в которой
они могут быть сохранены в файлах или базах данных, и которые легко могут быть
извлечены в последующем, с сохранением свойств объектов и отношений между ними.
Эти объекты называют "хранимыми" (англ. persistent). Исторически
существует несколько подходов к решению этой задачи.
Для разработчиков программного обеспечения не является секретом, что в
мире хранения данных доминируют реляционные СУБД, тогда как объектный подход к
проектированию и программированию - в мире обработки данных. В рамках статьи мы
не будем обсуждать, почему так произошло и хороша ли сложившаяся ситуация, мы
примем ее за данность и постараемся найти средства разрешения. Для этого
проблему нужно вначале сформулировать, ведь, как известно, правильно
поставленная задача уже половина решения[3].
Объектная и реляционная модели ортогональны. Это значит, что они
моделируют одну и ту же сущность, но с разных сторон, под разными, я бы сказал
перпендикулярными углами зрения. Реляционная модель акцентирует свое внимание
на структуре и связях сущностей, объектная - на их свойствах и поведении. Цель
использования реляционной модели - информационное моделирование, выделение
существенных для нас атрибутов, сохранение их значений и последующего поиска,
обработки и анализа. Цель использования объектной - моделирование поведения,
выделение существенных для нас функций и последующего их использования. Между
моделями есть пересечение - структурные сущности, которые по-разному в этих
моделях отражаются. Для того, чтобы отобразить артефакты реляционной модели в
артефакты же объектной в наших программах и требуется средство
объектно-реляционной проекции - ОРП или широко распространенное англоязычное
обозначение - ORM (Object Relational Mapping).
Выражаясь более простым языком, объектно-реляционный проектор - ОРП -
теоретически позволяет программисту работать с таблицами, полями и связями
реляционной БД, как с объектами, свойствами и коллекциями (массивами), не
отвлекаясь на подробности более низкого уровня, такими, например, как порядок
выборки и сохранения модифицированных данных, вопросы переносимости и
особенностей диалекта SQL конкретной СУБД, генерации уникальных первичных
ключей, заполнения полей ссылок для моделирования связей[3] [7].
.1.4 MVC
Model-view-controller (MVC, "Модель-представление-поведение",
"Модель-представление-контроллер") - схема использования нескольких
шаблонов проектирования, с помощью которых модель данных приложения,
пользовательский интерфейс и взаимодействие с пользователем разделены на три
отдельных компонента так, что модификация одного из компонентов оказывает
минимальное воздействие на остальные. Данная схема проектирования часто
используется для построения архитектурного каркаса, когда переходят от теории к
реализации в конкретной предметной области.
Концепция MVC была описана в 1979 году Трюгве Реенскаугом (англ. Trygve
Reenskaug), тогда работающим над языком программирования Smalltalk в Xerox
PARC. Оригинальная реализация описана
в статье "Applications Programming in Smalltalk-80: How to use
Model-View-Controller". Затем Джим Алтофф с командой разработчиков реализовали версию MVC для
библиотеки классов Smalltalk-80.
В оригинальной концепции была описана сама идея и роль каждого из
элементов: модели, представления и контроллера. Но связи между ними были
описаны без конкретизации. Кроме того, различали две основные модификации:
1. Пассивная модель - модель не имеет никаких способов
воздействовать на представление или контроллер, и используется ими в качестве
источника данных для отображения. Все изменения модели отслеживаются
контроллером и он же отвечает за перерисовку представления, если это
необходимо. Такая модель чаще используется в структурном программировании, так
как в этом случае модель представляет просто структуру данных, без методов их
обрабатывающих.
2. Активная модель - модель оповещает представление о том, что в ней
произошли изменения, а представления, которые заинтересованы в оповещении,
подписываются на эти сообщения. Это позволяет сохранить независимость модели
как от контроллера, так и от представления.
Классической реализацией концепции MVC принято считать версию именно с
активной моделью[4].
С развитием объектно-ориентированного программирования и понятия о
шаблонах проектирования был создан ряд модификаций концепции MVC, которые при
реализации у разных авторов могут отличаться от оригинальной. Так, например,
Эриан Верми в 2004 году описал пример обобщенного MVC.
Основная цель применения этой концепции состоит в разделении
бизнес-логики (модели) от её визуализации (представления, вида). За счет такого
разделения повышается возможность повторного использования. Наиболее полезно
применение данной концепции в тех случаях, когда пользователь должен видеть те
же самые данные одновременно в различных контекстах и/или с различных точек
зрения. В частности, выполняются следующие задачи:
1. К одной модели можно присоединить несколько видов, при этом не
затрагивая реализацию модели. Например, некоторые данные могут быть
одновременно представлены в виде электронной таблицы, гистограммы и круговой
диаграммы.
2. Не затрагивая реализацию видов, можно изменить реакции на
действия пользователя (нажатие мышью на кнопке, ввод данных), для этого
достаточно использовать другой контроллер.
. Ряд разработчиков специализируется только в одной из областей:
либо разрабатывают графический интерфейс, либо разрабатывают бизнес-логику.
Поэтому возможно добиться того, что программисты, занимающиеся разработкой
бизнес-логики (модели), вообще не будут осведомлены о том, какое представление
будет использоваться[4].
Концепция MVC позволяет разделить данные, представление и обработку
действий пользователя на три отдельных компонента:
· Модель (англ. Model). Модель предоставляет знания: данные и
методы работы с этими данными, реагирует на запросы, изменяя своё состояние. Не
содержит информации, как эти знания можно визуализировать.
· Представление, вид (англ. View). Отвечает за отображение
информации (визуализацию). Часто в качестве представления выступает форма
(окно) с графическими элементами.
· Контроллер (англ. Controller). Обеспечивает связь между
пользователем и системой: контролирует ввод данных пользователем и использует
модель и представление для реализации необходимой реакции.
Важно отметить, что как представление, так и контроллер зависят от
модели. Однако модель не зависит ни от представления, ни от контроллера. Тем
самым достигается назначение такого разделения: оно позволяет строить модель
независимо от визуального представления, а также создавать несколько различных
представлений для одной модели.
Для реализации схемы Model-View-Controller используется достаточно
большое число шаблонов проектирования (в зависимости от сложности
архитектурного решения), основные из которых "наблюдатель",
"стратегия", "компоновщик" [4] [7].
Наиболее типичная реализация отделяет вид от модели путем установления
между ними протокола взаимодействия, используя аппарат событий
(подписка/оповещение). При каждом изменении внутренних данных в модели она
оповещает все зависящие от неё представления, и представление обновляется. Для
этого используется шаблон "наблюдатель". При обработке реакции
пользователя вид выбирает, в зависимости от нужной реакции, нужный контроллер,
который обеспечит ту или иную связь с моделью. Для этого используется шаблон "стратегия",
или вместо этого может быть модификация с использованием шаблона
"команда". А для возможности однотипного обращения с подобъектами
сложно-составного иерархического вида может использоваться шаблон
"компоновщик". Кроме того, могут использоваться и другие шаблоны
проектирования, например, "фабричный метод", который позволит задать
по умолчанию тип контроллера для соответствующего вида.
.1.5 JSON
JSON (англ. JavaScript Object Notation) - текстовый формат обмена
данными, основанный на JavaScript и обычно используемый именно с этим языком.
Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript, формат считается
языконезависимым и может использоваться практически с любым языком
программирования. Для многих языков существует готовый код для создания и
обработки данных в формате JSON.
За счёт своей лаконичности по сравнению с XML, формат JSON может быть
более подходящим для сериализации сложных структур. Если говорить о
веб-приложениях, в таком ключе он уместен в задачах обмена данными как между
браузером и сервером (AJAX), так и между самими серверами (программные
HTTP-интерфейсы).
Поскольку формат JSON является подмножеством синтаксиса языка JavaScript,
то он может быть быстро десериализован встроенной функцией eval(). Кроме того,
возможна вставка вполне работоспособных JavaScript-функций. Например в PHP,
начиная с версии 5.2.0, поддержка JSON включена в ядро в виде функций
json_decode() и json_encode(), которые сами преобразуют типы данных JSON в
соответствующие типы PHP и наоборот.строится на двух структурах:
· Набор пар ключ/значение. В различных языках это реализовано как объект,
запись, структура, словарь, хэш-таблица, список с ключом или ассоциативный
массив. Ключом может быть только строка, значением - любая форма.
· Пронумерованный набор значений. Во многих языках это
реализовано как массив, вектор, список или последовательность.
Это - универсальные структуры данных. Теоретически, все современные языки
программирования поддерживают их в той или иной форме. Так как JSON
используется для обмена данными между различными языками программирования, то
имеет смысл строить его на этих структурах[8].
В JSON используются их следующие формы:
· Объект - это неупорядоченное множество пар имя/значение, заключенное в
фигурные скобки { }. Между именем и значением стоит символ ": ", а
пары имя/значение разделяются запятыми.
· Массив (одномерный) - это множество значений, имеющих
порядковые номера (индексы). Массив заключается в квадратные скобки [ ].
Значения отделяются запятыми.
· Значение может быть строкой в двойных кавычках, числом,
значением true или false, объектом, массивом, или значением null. Эти структуры
могут быть вложены друг в друга.
· Строка - это упорядоченное множество из нуля или более
символов юникода, заключенное в двойные кавычки, с использованием
escape-последовательностей начинающихся собратной косой черты (backslash).
Символы представляются простой строкой.
· Имя - это строка.
Строка очень похожа на строку в языках С и Java. Число тоже очень похоже
на С или Java-число, за исключением того, что используется только десятичный
формат. Пробелы могут быть вставлены между любыми двумя символами[7].
Использование JSON в AJAX
Пример Javascript-кода (см.приложение 2) показывает, как браузер может
использовать XMLHttpRequest, чтобы запрашивать с сервера объект в формате JSON
(cерверная часть программы опущена; в ней должен быть размещён код,
отправляющий данные в формате JSON-строки в ответ на запросы по url).
Заметим, что данный пример применения XMLHttpRequest не является
универсальным для всех браузеров (для браузеров, основанных на Internet
Explorer, Opera, Safari и Mozilla, в коде должны быть те или иные отличия).
Возможности применения XMLHttpRequest ограничены из-за правила ограничения
домена (same origin policy): URL ответа на запрос должен находиться в том же
DNS домене, что и сервер, на котором находится страница, запрашивающая ответ. В
качестве альтернативы применяется подход JSONP, включающий в себя использование
закодированного вызова функции, передающегося между клиентом и сервером, чтобы
клиент мог загружать закодированные в JSON данные со сторонних доменов, и
уведомлять о завершении вызывающую сторону, хотя это приводит к некоторым
рискам для безопасности и дополнительным требованиям к серверу.
Как вариант, в коде страницы можно использовать элементы <iframe>
для асинхронного запроса JSON данных, или просто <form
action="url_to_cgi_script"
target="name_of_hidden_iframe"> . Эти подходы были распространены
до появления широкой поддержки XMLHttpRequest.
Также можно использовать для передачи JSON-данных динамические теги
<script>. С помощью этого метода можно обойти правило ограничения домена
(same origin policy), но он приводит к появлению уязвимого кода. В качестве
более безопасной альтернативы было предложено использовать JSONRequest.
.1.6 СУБД MySQL
MySQL - свободная реляционная система управления базами данных.
Разработку и поддержку MySQL осуществляет корпорация Oracle, получившая права
на торговую марку вместе с поглощённой Sun Microsystems, которая ранее приобрела
шведскую компанию MySQL AB. Продукт распространяется как под GNU General Public
License, так и под собственной коммерческой лицензией. Помимо этого,
разработчики создают функциональность по заказу лицензионных пользователей,
именно благодаря такому заказу почти в самых ранних версиях появился механизм
репликации.является решением для малых и средних приложений. Входит в состав
серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP.
Обычно MySQL используется в качестве сервера, к которому обращаются локальные
или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего
сервера, позволяющая включать MySQL в автономные программы.
Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов
таблиц: пользователи могут выбрать как таблицы типаMyISAM, поддерживающие
полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне
отдельных записей. Более того, СУБД MySQL поставляется со специальным типом
таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря
открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются
новые типы таблиц[5].
февраля 2008 года Sun Microsystems приобрела MySQL AB за $1 млрд., 27
января 2010 года Oracle приобрела Sun Microsystems за$7,4 млрд. и включила
MySQL в свою линейку СУБД.
Сообществом разработчиков MySQL созданы различные ответвления кода, такие
как Drizzle (англ.), OurDelta, Percona Server, и MariaDB. Все эти ответвления
уже существовали на момент поглощения компании Sun корпорацией Oracle.возникла
как попытка применить mSQL к собственным разработкам компании: таблицам, для
которых использовались ISAM - подпрограммы низкого уровня. В результате был
выработан новый SQL-интерфейс, но API-интерфейс остался в наследство от mSQL.
Откуда происходит название "MySQL" - доподлинно неизвестно.
Разработчики дают два варианта: либо потому, что практически все наработки
компании начинались с префикса My, либо в честь девочки по имени My, дочери
Майкла Монти Видениуса, одного из разработчиков системы.
Логотип MySQL в виде дельфина носит имя "Sakila". Он был выбран
из большого списка предложенных пользователями "имён дельфина". Имя
"Sakila" было отправлено Open Source-разработчиком Ambrose
Twebaze.имеет двойное лицензирование. MySQL может распространяться в
соответствии с условиями лицензии GPL. Однако по условиям GPL, если какая-либо
программа включает исходные коды MySQL, то она тоже должна распространяться по
лицензии GPL. Это может расходиться с планами разработчиков, не желающих открывать
исходные тексты своих программ. Для таких случаев предусмотрена коммерческая
лицензия, которая также обеспечивает качественную сервисную поддержку.
MySQL
портирована на большое количество платформ: AIX, BSDi, FreeBSD, HP-UX, Linux, Mac OS X, NetBSD, OpenBSD, OS/2 Warp, SGI IRIX, Solaris,
SunOS, SCO OpenServer,UnixWare, Tru64, Windows
95, Windows 98, Windows NT, Windows 2000, Windows XP, Windows
Server 2003, WinCE, Windows Vista и Windows 7. Существует также порт MySQL
кOpenVMS. Важно отметить, что на официальном сайте СУБД для свободной загрузки
предоставляются не только исходные коды, но и откомпилированные и
оптимизированные под конкретные операционные системы готовые исполняемые модули
СУБД MySQL.
MySQL
имеет API для языков Delphi, C, C++, Эйфель, Java, Лисп, Perl, PHP, Python, Ruby, Smalltalk, Компонентный Паскаль и Tcl, библиотеки для языков платформы .NET, а также обеспечивает поддержку для ODBC посредством ODBC-драйвера MyODBC.
.1.7 Веб-сервер Nginx
Nginx- веб-сервер и почтовый прокси-сервер, работающий на Unix-подобных
операционных системах (тестировалась сборка и работа на FreeBSD, OpenBSD,
Linux, Solaris, Mac OS X, AIX и HP-UX). Начиная с версии 0.7.52 появилась
бинарная сборка под Microsoft Windows.
Игорь Сысоев начал разработку в 2002-м году. Осенью 2004 года вышел
первый публично доступный релиз. По состоянию на 2013 год, поддержка и
доработка nginx продолжается[7].сервер
·
обслуживание
статических запросов, индексных файлов, автоматическое создание списка файлов,
кеш дескрипторов открытых файлов
·
акселерированное
проксирование без кэширования, простое распределение нагрузки и
отказоустойчивость
·
поддержка
кеширования при акселерированном проксировании и FastCGI
·
акселерированная
поддержка FastCGI и memcached серверов, простое распределение нагрузки и
отказоустойчивость
·
модульность,
фильтры, в том числе сжатие (gzip), byte-ranges (докачка), chunked ответы,
HTTP-аутентификация, SSI-фильтр
·
несколько
подзапросов на одной странице, обрабатываемые в SSI-фильтре через прокси или
FastCGI, выполняются параллельно
·
поддержка SSL
·
поддержка PSGI,
WSGI
·
экспериментальная
поддержка встроенного Perl
SMTP/IMAP/POP3-прокси сервер
·
перенаправление
пользователя на SMTP/IMAP/POP3-бэкенд с использованием внешнего HTTP-сервера
аутентификации
·
простая аутентификация
(LOGIN, USER/PASS)
·
поддержка SSL и
STARTTLS
В nginx рабочие процессы обслуживают одновременно множество соединений,
мультиплексируя их вызовами операционной системы select, epoll (Linux) и kqueue
(FreeBSD). Рабочие процессы выполняют цикл обработки событий от дескрипторов
(см. Событийно-ориентированное программирование). Полученные от клиента данные
разбираются с помощью конечного автомата. Разобранный запрос последовательно
обрабатывается цепочкой модулей, задаваемой конфигурацией. Ответ клиенту
формируется в буферах, которые хранят данные либо впамяти, либо указывают на
отрезок файла. Буферы объединяются в цепочки, определяющие последовательность,
в которой данные будут переданы клиенту. Если операционная система поддерживает
эффективные операции ввода-вывода, такие как writev и sendfile, то nginx
применяет их по возможности.
Конфигурация HTTP-сервера nginx разделяется на виртуальные серверы
(директива server). Виртуальные серверы разделяются на location’ы (location).
Для виртуального сервера возможно задать адреса и порты, на которых будут
приниматься соединения, а также имена, которые могут включать * для обозначения
произвольной последовательности в первой и последней части, либо задаваться
регулярным выражением.’ы могут задаваться точным URI, частью URI, либо
регулярным выражением. location’ы могут быть сконфигурированы для обслуживания
запросов из статического файла, проксирования на fastcgi/memcached сервер.
Для эффективного управления памятью nginx использует пулы. Пул - это
последовательность предварительно выделенных блоков динамической памяти. Длина
блока варьируется от 1 до 16 килобайт. Изначально под пул выделяется только
один блок. Блок разделяется на занятую область и незанятую. Выделение мелких
объектов выполняется путём продвижения указателя на незанятую область с учётом
выравнивания. Если незанятой области во всех блоках не хватает для выделения
нового объекта, то выделяется новый блок. Если размер выделяемого объекта
превышает значение константы NGX_MAX_ALLOC_FROM_POOL, либо длину блока, то он
полностью выделяется из кучи.
Таким образом, мелкие объекты выделяются очень быстро и имеют накладные
расходы только на выравнивание.содержит модуль географической классификации
клиентов по IP-адресу. В его основу входит база данных соответствия IP-адресов
географическому региону, представленная в виде Radix tree (сжатое префиксное
дерево или сжатый бор) в оперативной памяти. nginx предварительно распределяет
первые несколько уровней дерева, таким образом, чтобы они занимали ровно 1
страницу памяти. Это гарантирует, что при поиске IP-адреса для первых
нескольких узлов при трансляции адреса всегда найдётся запись в TLB[7].
1.1.8 Операционная система Linux
Linux , а также Ли́нукс - общее название Unix-подобных операционных
систем, основанных на одноимённом ядре. Ядро Linux и обычно использующиеся
вместе с ним компоненты создаются и распространяются в соответствии с моделью
разработки свободного и открытого программного обеспечения. Поэтому общее
название не подразумевает какой-либо единой "официальной"
комплектации Linux; они обычно распространяются (часто бесплатно) в виде
различных готовых дистрибутивов, имеющих свой набор прикладных программ и уже
настроенных под конкретные нужды пользователя.
На начальном этапе Linux бесплатно разрабатывался только
энтузиастами-добровольцами, но с успехом Linux и его массовым коммерческим
использованием дорабатывать ОС и вносить свой вклад стали и компании, со
временем став значительной силой. Подавляющее большинство ПО в современных
дистрибутивах по-прежнему доступно по свободным лицензиям, как правило за
исключением небольшого количества проприетарных компонентов. В 2008 году
расчёты показывали, что для того чтобы "с нуля" разработать систему,
аналогичную Fedora 9, потребовалось бы затратить 10,8 млрд долл. Совокупная
себестоимость ядра Linux оценена в более чем 1 млрд евро (около 1,4 млрд
долл.). Только за 2008 год себестоимость ядра Linux увеличилась на 225 млн
евро. В системе Linux воплощён труд в эквиваленте 73 тыс. человеко-лет.
В настоящее время системы Linux лидируют на рынках смартфонов (Android
занимает 64,1 % рынка), интернет-серверов (60 %), самых мощных суперкомпьютеров
(93,8 %), а также, согласно Linux Foundation, в дата-центрах и на предприятиях,
занимают половину рынкавстраиваемых систем, имеют значительную долю рынка
нетбуков (32 % на 2009 год). На рынке домашних компьютеров Linux прочно
занимает 3 место (по разным данным, от 1 до 5 %). Согласно исследованию Goldman
Sachs, в целом, рыночная доля Linux среди электронных устройств составляет около
42 %.
С тех пор, как ядро Linux было создано для x86-ПК, оно было портировано
на множество платформ, включая x86-64, PowerPC и ARM. Linux работает в
роутерах, телевизорах и игровых приставках. ОС на ядре продолжают быстро
совершенствоваться (например, новая версия ядра выпускается каждые 2-3 месяца,
с 2005 года в разработке ядра принимают участие более 7800 разработчиков из
более чем 800 различных компаний) и набирать популярность (за 9 месяцев с мая
2011 по январь 2012 доля Linux выросла на 64 %).
Согласно distrowatch, наиболее популярными дистрибутивами являются:
deb-based (Debian, Mint, Ubuntu), RPM-based (RedHat, Fedora, Mageia, OpenSUSE),
source-based (Slackware, Gentoo).
Собственные дистрибутивы Linux выпускаются различными компаниями и
энтузиастами со всего мира, в том числе, из России и Украины.
Операционные системы на основе GNU и Linux называют "Linux" или
"GNU/Linux". Первый вариант более популярен и чаще используется
сторонниками термина открытого ПО, второй - сторонниками свободного ПО.
Хотя в английском второй вариант пишется и звучит как
"GNU/Linux", это не всегда удобно в других языках. Поэтому, если
можно показать равноправность GNU и Linux лучшим способом - например, GNU+Linux
(гну плюс линукс), GNU-Linux (во французском), или GNU con Linux (в испанском),
лучше использовать его, чем "GNU Linux" ("гну ли́нукс"), подразумевающее, что
ядро Linux было разработано или принадлежит проекту GNU. Аналогичным образом
построены названия TCP/IP и Ogg/Vorbis.
Операционная система Unix была разработана в 1969 году в Bell
Laboratories компании AT&T в США Кеном Томпсоном, Деннисом Ритчи, Дугласом
Макилроем и Джо Осанной.первоначально была написана целиком на ассемблере, что
было обычной практикой того времени. Позже, в 1973-75 годах, она была
переписана на языке программирования Cи.
То, что операционная система была написана на языке высокого уровня,
позволило упростить её портирование на различные компьютерные платформы. Из-за
особенностей лицензии AT&T была вынуждена открывать исходный код
операционной системы всем обратившимся, что позволило Unix быстро развиться и
стать популярной во многих научных учреждениях и предприятиях.
В 1984 году Bell Labs отделилась от AT&T.
Избавившись от необходимости бесплатного лицензирования системы, Bell
Labs начала продажи Unix как проприетарного продукта[7].
.2 Технологии используемые на стороне клиента
.2.1 HTML5
HTML5 - язык для структурирования и представления содержимого для
всемирной паутины, а также основная технология, используемая в Интернете. Это
пятая версия HTML-стандарта (изначально созданного в 1990 году и последней
версией которого являлся HTML4, стандартизированный в 1997 году) и находится в
стадии разработки по состоянию на февраль 2013 года [1]. Основной её целью
является улучшить язык, поддерживающий работу с новейшими мультимедийными
приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность
исполнения для компьютеров и приспособлений ( веб-браузеры, синтаксические
анализаторы и т.д.).
Следуя по стопам своих предшественников HTML 4.01 и XHTML 1.1, HTML5
является ответом на тот факт, что HTML и XHTML при их использовании во
всемирной паутине оказываются на практике смесью особенностей, представленных
различными спецификациями, включая спецификации программных продуктов,
например, веб-браузеров, а также сложившихся общеупотребительных приёмов и
множества синтаксических ошибок в существующих веб-документах. HTML5 - также
попытка определить единый язык разметки, который мог бы использоваться в рамках
как HTML-, так и XHTML-грамматики. Он включает в себя детальные модели
обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет,
улучшает и рационализирует разметку документов, а также добавляет разметку и
API для сложных веб-приложений[6].
В HTML5 появляется множество синтаксических особенностей. Например,
элементы <video>, <audio> и <canvas>, а также возможность
использования SVG. Эти новшества разработаны для упрощения внедрения и
управления графическими и мультимедийными объектами в сети без необходимости
обращения к собственным плагинам и API. Другие новые элементы, такие как
<section>, <article>, <header> и <nav> разработаны для
того, чтобы обогащать семантическое содержимое документа (страницы). Новые
атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был
удален. Некоторые элементы, например, <a> <menu> и <cite>
были изменены, переопределены или стандартизированы. API и DOM являются
фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые
детали для обработки недопустимых документов, поэтому синтаксические ошибки
будут рассматриваться одинаково всеми совместимыми браузерами и другими
пользовательскими агентами.
Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб
(WHATWG) начала работу над новым стандартом в 2004 году, когда World Wide Web
Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01
не изменялся с 2000 года. В 2009 году W3C признал, что срок работы у рабочей
группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и
WHATWG работают вместе над разработкой HTML5.
Даже несмотря на то, что HTML5 был хорошо известен среди
веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в
апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс написал
публичное письмо, заголовок которого гласил: "мысли по поводу Flash",
где он заключил, что с разработкой HTML5 нет больше необходимости смотреть
видеоролики или использовать другие виды приложений с помощью Adobe Flash. По
этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые
намекали, что, хотя HTML5 и обеспечивает расширенную функциональность,
разработчики должны принимать во внимание различия браузеров и необходимость
поддержки различных частей стандартов, равно как и функциональные различия
между HTML5 и Flash[6].- это XML-сериализация языка HTML5. Документы XML должны
быть снабжены XML Internet media type, например, application/xhtml + xml или
application/xml. XHTML5 требует строгого и правильно оформленного синтаксиса
XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME/содержимого: тип
медиа, который вы выберете, определит, какой тип документа должен быть
использован. В HTML5 и XHTML5 doctype html необязателен и может быть просто
пропущен. HTML, который был написан, чтобы соответствовать техническим
требованиям и HTML и XHTML - и который производит то же DOM дерево, разбирающее
HTML или XML - назван многоязычным.
Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам),
так и к документам. Документы могут не всегда содержать корректный синтаксис,
но HTML5-совместимые браузеры, так же, как и их предшественники, применяют
алгоритмы разбора ошибок разметки в документах для построения правильной
объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с
целью достижения совместимости между браузерами разных производителей. Так же,
как и требования к синтаксису разметки документов с целью корректного
отображения их в различных браузерах. В старых версиях браузеров новые теги
HTML5 просто игнорируются.
Отличия от html4.01 и xhtml1.x
·
Изменён синтаксис
·
Встраивание SVG и
MathML в text/html
·
Новые элементы: article, aside, audio, canvas, command, datalist, details,
embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav,
output, progress, rp, rt, ruby, section, source, summary, time, video и т.д.
·
Новые компоненты ввода: date/time, email, url,
search, number, range, tel, color
·
Новые атрибуты: charset (в
meta), async (в script)
·
Глобальные
атрибуты, которые могут быть применены ко всем элементам: id,tabindex, hidden,
data-* (пользовательские атрибуты данных)
·
Элементы, которые
будут исключены: acronym, applet, basefont, big, center,
dir, font, frame,
frameset, isindex, noframes, strike, tt (см.приложение 3)
.2.2 CSS3
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) -
формальный язык описания внешнего вида документа, написанного с использованием
языка разметки.
Преимущественно используется как средство описания, оформления внешнего
вида веб-страниц, написанных с помощьюя зыков разметки HTML и XHTML, но может
также применяться к любым XML-документам, например, к SVG или XUL.используется
создателями веб-страниц для задания цветов, шрифтов, расположения отдельных
блоков и других аспектов представления внешнего вида этих веб-страниц. Основной
целью разработки CSS являлось разделение описания логической структуры
веб-страницы (которое производится с помощью HTML или других языков разметки)
от описания внешнего вида этой веб-страницы (которое теперь производится с
помощью формального языка CSS). Такое разделение может увеличить доступность
документа, предоставить большую гибкость и возможность управления его
представлением, а также уменьшить сложность и повторяемость в структурном
содержимом. Кроме того, CSS позволяет представлять один и тот же документ в
различных стилях или методах вывода, таких как экранное представление, печатное
представление, чтение голосом (специальным голосовым браузером или программой
чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах
стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей
могут располагаться как в самом веб-документе, внешний вид которого они
описывают, так и в отдельных файлах, имеющих формат CSS. По сути, формат CSS -
это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня
правил CSS и комментариев к ним.
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый
ими веб-документ четырьмя различными способами:
·
когда таблица
стилей находится в отдельном файле, она может быть подключена к веб-документу
посредством тега <link>, располагающегося в этом документе между тегами
<head> и </head>. (Тег <link> будет иметь атрибут href,
имеющий значением адрес этой таблицы стилей). Все правила этой таблицы
действуют на протяжении всего документа;
·
когда таблица
стилей находится в отдельном файле, она может быть подключена к веб-документу
посредством директивы @import, располагающейся в этом документе между тегами
<style> и </style> (которые, в свою очередь, располагаются в этом
документе между тегами <head> и </head>) сразу после тега
<style>, которая также указывает (в своих скобках, после слова url) на
адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении
всего документа; (см.приложение 4.2)
·
когда таблица
стилей описана в самом документе, она может располагаться в нём между тегами
<style> и </style> (которые, в свою очередь, располагаются в этом
документе между тегами <head> и </head>). Все правила этой таблицы
действуют на протяжении всего документа; (см.приложение 4.3)
·
когда таблица
стилей описана в самом документе, она может располагаться в нём в теле
какого-то отдельного тега (посредством его атрибута style) этого документа. Все
правила этой таблицы действуют только на содержимое этого тега. (см.приложение 4.4)
Как известно, HTML-документы строятся на основании иерархии элементов,
которая может быть наглядно представлена в древовидной форме. Элементы HTML
друг для друга могут быть родительскими, дочерними, элементами-предками,
элементами-потомками, сестринскими[6].
Элемент является родителем другого элемента, если в иерархической
структуре документа он находится сразу, непосредственно над этим элементом.
Элемент является предкомдругого элемента, если в иерархической структуре
документа он находится где-то выше этого элемента. Пускай, например, в
документе присутствуют два абзаца p, включающие в себя шрифт с полужирным
начертанием b. Тогда элементы b будут дочерними элементами своихродительских
элементов p, и потомками своих предков body. В свою очередь, для элементов p элемент
body будет являться только родителем. И кроме того, эти два элемента pбудут
являться сестринскими элементами, как имеющими одного и того же родителя -
body.
В CSS могут задаваться при помощи селекторов не только одиночные
элементы, но и элементы, являющиеся потомками, дочерними или сестринскими
элементами других элементов (см.приложение 4.5)
.2.3 JavaScript
JavaScript - прототипно-ориентированный сценарный язык программирования.
Является диалектом языка ECMAScript.обычно используется как встраиваемый язык
для программного доступа к объектам приложений. Наиболее широкое применение
находит в браузерах как язык сценариев для придания интерактивности
веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация,
автоматическое управление памятью, прототипное программирование, функции как
объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель
сделать язык похожим на Java, но при этом лёгким для использования
непрограммистами. Языком JavaScript не владеет какая-либо компания или
организация, что отличает его от ряда языков программирования, используемых в
веб-разработке.
Название "JavaScript" является зарегистрированным товарным
знаком компании Oracle Corporation.
В 1992 году компания Nombas (впоследствии приобретённая Openwave (англ.))
начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус),
который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы
заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не
составляло труда изучить его. Главным отличием от Си была работа с памятью. В
новом языке всё управление памятью осуществлялось автоматически: не было
необходимости создавать буферы, объявлять переменные, осуществлять
преобразование типов. В остальном языки сильно походили друг на друга: в
частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был
переименован в ScriptEase, поскольку исходное название звучало слишком
негативно, а упоминание в нём Си "отпугивало" людей[8].
На основе этого языка был создан проприетарный продукт CEnvi. В конце
ноября 1995 года Nombas разработала версию CEnvi, внедряемую в веб-страницы.
Страницы, которые можно было изменять с помощью скриптового языка, получили
название Espresso Pages - они демонстрировали использование скриптового языка
для создания игры, проверки пользовательского ввода в формы и создания
анимации. Espresso Pages позиционировались как демоверсия, призванная помочь
представить, что случится, если в браузер будет внедрён язык Cmm. Работали они
только в 16-битовом Netscape Navigator под управлением Windows.
Перед Бренданом Айком, нанятым в компанию Netscape 4 апреля 1995 года,
была поставлена задача внедрить язык программирования Scheme или что-то похожее
в браузер Netscape. Поскольку требования были размыты, Айка перевели в группу,
ответственную за серверные продукты, где он проработал месяц, занимаясь
улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду,
занимающуюся клиентской частью (браузером), где он немедленно начал
разрабатывать концепцию нового языка программирования. Менеджмент разработки
браузера, включая Тома Пакина (Tom Paquin), Михаэля Тоя (англ.), Рика Шелла
(Rick Schell), был убеждён, что Netscape должен поддерживать язык
программирования, встраиваемый в HTML-код страницы.
Помимо Брендона Айка в разработке участвовали сооснователь Netscape
Communications Марк Андрисин (англ.) и сооснователь Sun Microsystems Билл Джой:
чтобы успеть закончить работы над языком к релизу браузера, компании заключили
соглашение о сотрудничестве в разработке. Они ставили перед собой цель
обеспечить "язык для склеивания" составляющих частей веб-ресурса:
изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров
и программистов, не обладающих высокой квалификацией.
Первоначально язык назывался LiveScript и предназначался как для
программирования на стороне клиента, так и для программирования на стороне
сервера (там он должен был называться LiveWire). На синтаксис оказали влияние
языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря
1995 года LiveScript переименовали в JavaScript, получив соответствующую
лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun
состоялся накануне выпуска второйбета-версии Netscape Navigator. В нём
декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в
своих будущих продуктах JavaScript как объектный скриптовый язык с открытым
стандартом[8].
В 1996 году компания Microsoft выпустила аналог языка JavaScript,
названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым
браузером, поддерживающим эту реализацию, был Internet Explorer 3.0.
По инициативе компании Netscape была проведена стандартизация языка
ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript,
описывается стандартом ECMA-262. Первой версии спецификации соответствовал
JavaScript версии 1.1, а также языки JScript и ScriptEasy. [7] [8]
.2.4 jQuery
jQuery
- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к
любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM,
манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе
с AJAX.была одной из первых вещей, которую Джон Резиг освоил, когда он только
начал заниматься программированием. Резиг программировал на QBasic, когда один
его знакомый показал ему, как создать веб-страницу (используя Angelfire), а
также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда,
когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень
заинтересовали его.
Но страсть к JavaScript пришла значительно позже, примерно в 2004 году.
Тогда Резиг получал степень в области компьютерных наук и работал на полставки
в местной фирме Brand Logic. Он занимался дизайном сайта, в котором создавался
пользовательский скроллинг. Джон был разочарован и расстроен, особенно потому,
что использовал код других разработчиков, после чего решил серьёзно изучить
JavaScript. Изучив, пришел к выводам, что JavaScript - это простой, но изящный
язык, который является невероятно мощным для решения многих задач. В течение
ближайшей пары лет Джон создал множество различных JavaScript-приложений,
прежде чем закончить создание jQuery. Основной целью создания jQuery Резиг
видел возможность закодировать многоразовые куски кода, которые позволят
упростить JavaScript и использовать их так, чтобы не беспокоиться о
кросс-браузерных вопросах. Библиотека была представлена общественности на
компьютерной конференции "BarCamp" в Нью-Йорке в 2006 году.
Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery
отделяет поведение от структуры HTML. Например, вместо прямого указания на
обработчик события нажатия кнопки управление передаётся JQuery, которая
идентифицирует кнопки и затем преобразовывает его в обработчик события клика.
Такое разделение поведения и структуры также называется принципом ненавязчивого
JavaScript.
Библиотека jQuery содержит функциональность, полезную для максимально
широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась
задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это
привело бы к большому коду, бо́льшая часть которого не востребована.
Поэтому была реализована архитектура компактного универсального ядра библиотеки
и плагинов. Это позволяет собрать для ресурса именно ту
JavaScript-функциональность, которая на нём была бы востребована.
Вся работа с jQuery ведётся с помощью функции $. Если на сайте
применяются другие JavaScript библиотеки, где $ может использоваться для своих
нужд, то можно использовать её синоним - jQuery.
Работу с jQuery можно разделить на 2 типа:
· Получение jQuery-объекта с помощью функции $(). Например,
передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML,
попадающих под критерий и далее работать с ними с помощью различных методов
jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения,
он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов
методов согласно концепции текучего интерфейса.
· Вызов глобальных методов у объекта $, например, удобных
итераторов по массиву.
Типичный пример манипуляции сразу несколькими узлами DOM заключается в
вызове $ функции со строкой селектора CSS, что возвращает объект jQuery,
содержащий некоторое количество элементов HTML-страницы. Эти элементы затем
обрабатываются методами jQuery.
Основные особенности jQuery:
· Легко осуществляет визуальные эффекты;
· Работает с событиями;
· Обращается и манипулирует любой элемент DOM - объектной
модели документа;
· Кроссбраузерность;
· Предоставляет отличный API - интерфейс программирования
приложений, для работы с Ajax - технологией, позволяющей общаться с сервером
без перезагрузки страницы;
· Обладает большим количеством JavaScript плагинов, которые
предназначены для создания элементов интерфейсов пользователей;
· Имеет подробную документацию с массой оригинальных примеров и
подробными описаниями. [7] [8]
1.2.5 AJAX
AJAX- "асинхронный JavaScript и XML") - подход к построению
интерактивных пользовательских интерфейсов веб-приложений, заключающийся в
"фоновом" обмене данными браузера с веб-сервером. В результате, при
обновлении данных веб-страница не перезагружается полностью, и веб-приложения
становятся быстрее и удобнее. [7]- не самостоятельная технология, а концепция
использования нескольких смежных технологий. AJAX базируется на двух основных
принципах:
· использование технологии динамического обращения к серверу "на
лету", без перезагрузки всей страницы полностью, например:
· с использованием XMLHttpRequest (основной объект);
· через динамическое создание дочерних фреймов;
· через динамическое создание тега <script>.
· через динамическое создание тега <img>, как это
реализовано в google analytics.
· использование DHTML для динамического изменения содержания страницы;
Действия с интерфейсом преобразуются в операции с элементами DOM (англ.
Document Object Model), с помощью которых обрабатываются данные, доступные
пользователю, в результате чего представление их изменяется. Здесь же производится
обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные
таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают
согласованный внешний вид элементов приложения и упрощают обращение к
DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для
асинхронного взаимодействия с сервером, обработки запросов пользователя и
загрузки в процессе работы необходимых данных[8].
Три из этих четырех технологий - CSS, DOM и JavaScript - составляют DHTML
(англ. Dynamic HTML). По мнению некоторых специалистов средства DHTML,
появившиеся в1997 году, подавали большие надежды, но так и не оправдали их.
В качестве формата передачи данных могут использоваться фрагменты
простого текста, HTML-кода, JSON или XML.
Впервые термин AJAX был публично использован 18 февраля 2005 года в
статье Джесси Джеймса Гарретта (Jesse James Garrett) "Новый подход к
веб-приложениям". Гарретт придумал термин, когда ему пришлось как-то
назвать новый набор технологий, предлагаемый им клиенту.
Однако в той или иной форме многие технологии были доступны и
использовались гораздо раньше, например в подходе "Remote Scripting",
предложенном компанией Microsoft в 1998 году, или с использованием HTML
элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.стал особенно
популярен после использования его компанией Google в сервисах Gmail, Google
Maps и Google Suggest.
Преимущества:
Экономия трафика
Использование AJAX позволяет значительно сократить трафик при работе с
веб-приложением благодаря тому, что часто вместо загрузки всей страницы
достаточно загрузить только изменившуюся часть, как правило, довольно
небольшую.
Уменьшение нагрузки на серверпозволяет несколько снизить нагрузку на
сервер. К примеру, на странице работы с почтой, когда вы отмечаете прочитанные
письма, серверу достаточно внести изменения в базу данных и отправить
клиентскому скрипту сообщение об успешном выполнении операции без необходимости
повторно создавать страницу и передавать её клиенту.
Ускорение реакции интерфейса
Поскольку нужно загрузить только изменившуюся часть, пользователь видит
результат своих действий быстрее.
Обращения сайта к серверу не ограничиваются щелчками по ссылкам и
отправкой форм
Например, при вводе запроса в Google выводится подсказка. На многих
сайтах при регистрации пользователь вводит имя, и сразу же выводится, доступно
это имя или нет; это тоже AJAX. AJAX удобен для программирования чатов,
административных панелей и других инструментов, которые выводят меняющиеся со
временем данные.
Недостатки:
Отсутствие интеграции со стандартными инструментами браузера
Динамически создаваемые страницы не регистрируются браузером в истории
посещения страниц, поэтому не работает кнопка "Назад",
предоставляющая пользователям возможность вернуться к просмотренным ранее
страницам, но существуют скрипты, которые могут решить эту проблему. [7] [8]
[10]
Другой недостаток изменения содержимого страницы при постоянном URL
заключается в невозможности сохранения закладки на желаемый материал. Проблему
можно успешно решить с помощью History.pushState.
Динамически загружаемое содержимое недоступно поисковикам (если не
проверять запрос, обычный он или XMLHttpRequest)
Поисковые машины не могут выполнять JavaScript, поэтому разработчики
должны позаботиться об альтернативных способах доступа к содержимому сайта.
Старые методы учёта статистики сайтов становятся неактуальными
Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для
сайтов, страницы которых широко используют AJAX, такая статистика теряет
актуальность.
Усложнение проекта
Перераспределяется логика обработки данных - происходит выделение и
частичный перенос на сторону клиента процессов первичного форматирования
данных. Это усложняет контроль целостности форматов и типов. Конечный эффект
технологии может быть нивелирован необоснованным ростом затрат на кодирование и
управление проектом, а также риском снижения доступности сервиса для конечных
пользователей.
Требуется включенный JavaScript в браузереможет быть выключен из
соображений безопасности. И, конечно же, AJAX-страницы труднодоступны
неполнофункциональным браузерам, роботам и веб-архивам.
Низкая скорость при грубом программировании
Казалось бы, AJAX предназначен именно для повышения скорости. Но, когда
AJAX-запросов на одной странице много и, например, по каждому щелчку подгружается
список, AJAX-страница становится даже медленнее традиционной.
Риск фабрикации запросов другими сайтами
Таковая возможна, когда результат работы AJAX-запроса является
Javascript-кодом(в частности, JSON). XMLHttpRequest действует только в пределах
одного домена, а вот тэг<script> - нет. Если написать
<script type="text/javascript"
src="#"783780.files/image001.gif">
Рис.1. Схема работы веб-приложения
После того как пользователь запросил страницу нашего ресурса, системе,
необходимо знать какую функцию представления (обработчик) необходимо выполнить.
Информация о сопоставлении url-адресов и функции представлении содержится в
urls.py.
Набор функций представлений содержится в файле views.py. В процессе
выполнения конкретного обработчика необходимо производить действия над свойствами
и вызывать методы различных объектов.
Информация о методах и свойствах находится в файле models.py.
По завершении выполнения обработчик передает данные шаблонизатору для
вывода на интерфейс пользователя.
Таким образом, выполнение Веб-приложения сводится к выполнению конкретных
обработчиков по конкретным url-адресам.
2.2.4 Шаблоны вывода данных
Шаблоны вывода данных представляют собой файлы, содержащие html-шаблон вывода и исполняемый код
шаблонизатора.
Код шаблонизатора выполняется при формировании http-ответа. Шаблонизатор вгружает полученные на вход
данные в соответствующий html-шаблон,
а на выходе возвращает html-код.
Рассмотрим конкретные шаблоны нашего приложения:
· Main-page.htt - шаблон главной страницы.(см.
листинг 5)
· Files-page.htt - шаблон представлении файловой
системы (см. листинг 6)
· Rooms-page.htt - шаблон представление комнат(см.
листинг 7)
Заключение
В результате проведённой работы был разработан веб-ресурс, который
позволяет пользователям загружать файлы на сервер и обмениваться ими.
Данная система является удобным средством для хранения и транспортировки
данных.
Список
литературы
1.
Пэйн Дж., Начиная
с Python: Использование Python 2.6 и Python 3.1 / Д. Пэйн: Wiley Publishing,
2009. - 624 с.
2.
Головатый А.,
Django: Подробное руководство / Адриан Головатый, Джейкоб Каплан-Мосс :
Символ-Плюс, 2010. - 560 с.
3.
Фаулер М.,
Архитектура корпоративных программных приложений / Мартин Фаулер :
Адисон-Венсли, 2012. - 560 с.
4.
Фримен А.,
ASP.NET MVC 3 Framework с примерами на C# для профессионалов / Адам Фримен,
Стивен Сандерсон : Вильямс, 2012. - 667 с.
5.
Дюбуа П., MySQL / Поль Дюбуа; пер. с англ, Воронин
В.:Вильямс, 2007. -1168 с.
6.
Соколов, С. А.
HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа./ С.
А. Соколов. - М.: Вильямс, 2007.
7.
Википедия -
сводная энциклопедия [Электронный ресурс] // ru.wikipedia.org
8.
Блог
веб-разработчика - блог [Электронный ресурс] // true-coder.ru
9.
Школа XHTML - уроки [Электронный ресурс] //
xhtml.co.il/ru/
10.Уроки по AJAX - уроки [Электронный ресурс] // ajaxs.ru
Приложение 1
Простой CGI код на Python.
#!/usr/bin/env pythonMySQLdb"Content-Type:
text/html""<html><head><title>Книги</title></head>""<body>""<h1>Книги</h1>""<ul>"=
MySQLdb.connect(user='me', passwd='letmein', db='my_db')=
connection.cursor().execute("SELECT name FROM books ORDER BY pub_date DESC
LIMIT 10")row in cursor.fetchall():"<li>%s</li>" %
row[0]"</ul>""</body></html>".close()
Как можно написать предыдущий CGI код, воспользовавшись возможностями Django.
models.py:django.db import modelsBook(models.Model):=
models.CharField(max_length=50)_date = models.DateField().py:django.shortcuts
import render_to_responsemodels import Booklatest_books(request):_list =
Book.objects.order_by('-pub_date')[:10]render_to_response('latest_books.htt',
{'book_list': book_list}).py:django.conf.urls.defaults import *views=
patterns('',
(r'^latest/$', views.latest_books),
)_books.htt:
<html><head><title>Книги</title>
</head>
<body>
<h1>Книги</h1>
<ul>
{% for book in book_list %}
<li>{{ book.name }}</li>
{% endfor %}
</ul>
</body>
</html>
Приложение 2
the_object;http_request = new XMLHttpRequest();_request.open(
"GET", url, true );_request.send(null);_request.onreadystatechange =
function () {( http_request.readyState == 4 ) {( http_request.status == 200 )
{_object = JSON.parse(http_request.responseText);
} else {( "There was a problem with the URL." );
}_request = null;
}
};
Приложение 3
Пример веб-страницы HTML5
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<header>
<hgroup>
<h1>Заголовок "h1" из hgroup</h1>
<h2>Заголовок "h2" из hgroup</h2>
</hgroup>
</header>
<nav>
<a href=link2.html>Вторая ссылка из блока "nav"</a>
</nav>
<section>
<article>
<h1>Заголовок статьи из блока "article"</h1>
<p>Текст абзаца статьи из блока "article"</p>
<details>
<summary>Блок "details", текст тега "summary"</summary>
<p>Абзац из блока
"details"</p>
</details>
</article>
</section>
<footer>
<time>Содержимое тега "time" блока "footer"</time>
<p>Содержимое абзаца из блока "footer"</p>
</footer>
</body>
</html>
сервер операционный хранилище шаблон
Приложение 4
<head>
.....
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<head>
.....
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
<head>
.....
<style type="text/css">{: red;
}
</style>
</head>
<p style="font-size: 21px; color: green;">Рассказ</p>
Селекторы правила CSS могут быть:
· универсальный селектор;
* {margin:0; padding:0;}
· селекторами элементов;
p {font-family: Garamond, serif;}
· селекторами классов;
.note {color: red; background: yellow; font-weight: bold;}
· селекторами идентификаторов;
#paragraph1 {margin: 0;}
· селекторами атрибутов;
a[href="http://www.somesite.com"]{font-weight:bold;}
· селекторами потомков (контекстными селекторами);
div#paragraph1 p.note {color: red;}
· селекторами дочерних элементов;
p.note > b {color: green;}
· селекторами сестринских элементов;
h1 + p {font-size: 24pt;}
· селекторами псевдоклассов;
a:active {color:yellow;}
· селекторами псевдоэлементов.
p::first-letter {font-size: 32px;}
Листинг
1
Folder(models.Model): parent = models.ForeignKey('self',
null = True, blank = True) user = models.ForeignKey(User) name =
models.CharField(u'Имя', max_length = 32,
help_text = u'Имя папки') share = models.BooleanField(default=False) def
__unicode__(self): return self.name class Meta: db_table = 'folders'
Листинг
2
File(models.Model):
name = models.CharField(u'Имя', max_length = 32, help_text = u'Имя файла')
file = models.FileField(u'Файл для загрузки',
upload_to = 'uploads') size = models.IntegerField(u'Размер файла')
folder = models.ForeignKey(Folder, null = True) user = models.ForeignKey(User,
null = True) def __unicode__(self): return self.name class Meta: db_table =
'files'
Листинг
3
class Room(models.Model):
name = models.CharField(u'Имя', max_length = 32, help_text = u'Имя комнаты')
maker = models.ForeignKey(User) share = models.BooleanField(default=False) def
__unicode__(self): return self.name class Meta: db_table = 'room'
Листинг
4
class Room_Use(models.Model):
room = models.ForeignKey(Room) user = models.ForeignKey(User)
approve = models.BooleanField(default=False) def __unicode__(self): return
self.room class Meta: db_table = 'room_users'
Листинг
5
{% extends 'page.htt' %} {% block content %} <center
style="margin-top:20%;"> <a href="/door/">Вход</a> <a href="/register/">Регистрация</a> <div>Загрузить файл...</a>
</center> {% endblock %}
Листинг
6
{% extends 'page.htt' %}
{% block login_info %}
<div>
<img src="/media/user/{{ username }}.png"
width="50" height="50" />
<p>
<span>{{ username }}</span><br>
<a style="cursor:pointer;"
onClick="showPopup('ProfilePopup');">Профиль</a><br>
<a href="/logout/">Выйти</a>
</p>
</div>
{% endblock %}
{% block content %}
<table width="100%" height="100%"
id="createFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('createFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('createFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="167"><div>Это окно для
"Создать"
<INPUT type="text" name="new_folder"
id="folder_name" /><br><br><button
onClick="createFolder();">Создать</button>
</div></td>
<td
onClick="hidePopup('createFolderPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('createFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="renameFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('renameFolderPopup');"></td>
<td valign="middle" align="center" width="300"
height="167"><div>Это окно для "Переименовать"
<input type="text"
name="rename_folder"
id="renameInput"/><br><br><button
onClick="renameFolder();">Переименовать</button>
</div></td>
<td
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="moveFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('moveFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="380"><div>Это окно для
"Переместить"</div></td>
<td
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="uploadFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('uploadFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="167"><div>Это окно для
"Загрузить файл..."</div></td>
<td
onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
<tr>
<td colspan="3" onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="ProfilePopup" cellpadding="0" cellspacing="0"
border="1">
<tr>
<td colspan="3"
onClick="hidePopup('ProfilePopup');"></td>
</tr>
<tr>
<td onClick="hidePopup('ProfilePopup');"></td>
<td valign="middle" align="center"
width="300" height="427"><div>Это окно для
"Профиль"</div></td>
<td
onClick="hidePopup('ProfilePopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('ProfilePopup');"></td>
</tr>
</table>
<table width="960px" height="100%"
cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table id="tree-table" width="100%"
height="100%" cellpadding="0"
cellspacing="10">
<tr>
<td>
<input type="text" name="src"
placeholder="Поиск файлов..." />
</td>
</tr>
<tr>
<td>Файлы</a></td>
<td>Комнаты</a></td>
</tr>
<tr>
<td>
{% autoescape off %}
{{ tree }}
{% endautoescape %}
</td>
</tr>
<tr>
<td>Общий доступ</td>
<td>
</tr>
<tr>
<td>Создать</a></td>
<td>Удалить</a></td>
</tr>
<tr>
<td>Переименовать</a></td>
<td>Переместить</a></td>
</tr>
</table>
</td>
<td>
<table id="files" width="100%"
height="100%" cellpadding="0" cellspacing="10"
border="0">
<tr>
<td align="center">
<a>Загрузить файл...</a>
</td>
</tr>
<tr>
<td>
<article id="article">
</article>
</td>
</tr>
</table>
</td>
</tr>
</table>
{% endblock %}
Листинг
7
{% extends 'page.htt' %}
{% block login_info %}
<div>
<img src="/media/user/{{ username }}.png"
width="50" height="50" />
<p>
<span>{{ username }}</span><br>
<a style="cursor:pointer;"
onClick="showPopup('ProfilePopup');">Профиль</a><br>
<a href="/logout/">Выйти</a>
</p>
</div>
{% endblock %}
{% block content %}
<table width="100%" height="100%"
id="createRoomPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('createRoomPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('createRoomPopup');"></td>
<td valign="middle" align="center"
width="300" height="167"><div>Это окно для
"Создать"
<INPUT type="text" name="new_folder"
id="folder_name" /> <button
onClick="createRoom();">Создать</button>
</div></td>
<td
onClick="hidePopup('createRoomPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('createRoomPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="renameFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('renameFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="167"><div>Это окно для
"Переименовать"</div></td>
<td
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('renameFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="moveFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('moveFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="380"><div>Это окно для
"Переместить"</div></td>
<td
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('moveFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="uploadFolderPopup" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td colspan="3"
onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
<tr>
<td
onClick="hidePopup('uploadFolderPopup');"></td>
<td valign="middle" align="center"
width="300" height="167"><div>Это окно для
"Загрузить файл..."</div></td>
<td
onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
<tr>
<td colspan="3" onClick="hidePopup('uploadFolderPopup');"></td>
</tr>
</table>
<table width="100%" height="100%"
id="ProfilePopup" cellpadding="0" cellspacing="0"
border="1">
<tr>
<td colspan="3"
onClick="hidePopup('ProfilePopup');"></td>
</tr>
<tr>
<td onClick="hidePopup('ProfilePopup');"></td>
<td valign="middle" align="center"
width="300" height="427"><div>Это окно для
"Профиль"</div></td>
<td
onClick="hidePopup('ProfilePopup');"></td>
</tr>
<tr>
<td colspan="3"
onClick="hidePopup('ProfilePopup');"></td>
</tr>
</table>
<table width="960px" height="100%"
cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table id="tree-table" width="100%"
height="100%" cellpadding="0"
cellspacing="10">
<tr>
<td>
<input type="text" name="src"
placeholder="Поиск файлов..." />
</td>
</tr>
<tr>
<td>Файлы</a></td>
<td>Комнаты</a></td>
</tr>
<tr>
<td>
{% autoescape off %}
{{ tree }}
{% endautoescape %}
</td>
</tr>
<tr>
<td>Общий доступ</td>
<td>
</tr>
<tr>
<td>Создать</a></td>
<td>Удалить</a></td>
</tr>
<tr>
<td>Переименовать</a></td>
<td>Участники</a></td>
</tr>
</table>
</td>
<td>
<table id="files" width="100%"
height="100%" cellpadding="0" cellspacing="10"
border="0">
<tr>
<td align="center">
<a>Загрузить файл...</a>
</td>
</tr>
<tr>
<td>
<article id="article">
</article>
</td>
</tr>
</table>
</td>
</tr>
</table>
{% endblock %}