Проектирование интернет-приложений

Министерство образования и науки Российской Федерации

Уральский федеральный университет
имени первого Президента России Б.Н. Ельцина

Е.Г. Сысолетин, 
С.Д. Ростунцев

Проектирование 
интернет-приложений

Учебно-методическое пособие

Рекомендовано 
методическим советом УрФУ
для студентов, обучающихся по специальности
09.03.01 — Информатика и вычислительная техника

Москва
Издательство «ФЛИНТА»
Издательство Уральского университета
2017

2-е издание, стереотипное

УДК 004.4
ББК 32.973
         С95

Рецензенты:
кафедра «Электрооборудования и энергоснабжения» Российского государственного профессионально-педагогического университета (канд. 
пед. наук, доц. Н.В. Папуловская);
начальник информационно-аналитического отдела Екатеринбургской 
городской Думы А. Ю. Филимонов

Научный редактор — д-р техн. наук, проф. Л.Г. Доросинский

Сысолетин, Е.Г.
С95
Проектирование 
интернет-приложений 
[Электронный 
ресурс]: учеб.-метод. посо-бие / Е. Г. Сысолетин, С. Д. Ростунцев. — 
2-е изд., стер. — М. : ФЛИНТА : Изд-во Урал. ун-та, 2017. — 92 с.

ISBN 978-5-9765-3249-6 (ФЛИНТА)
ISBN 978-5-7996-1503-1 (Изд-во Урал. ун-та)

В учебно-методическом пособии раскрывается тема основ проектирования 
интернет-приложения. В первой части пособия содержатся теоретические положения: вводная информация об интернете и способах взаимодействия с ней; 
технологии построения интернет-приложений; особенности создания клиентской и серверной части приложения; особенности проектирования интернетприложений.
Во второй части пособия приводятся методические указания выполнения 
практических заданий для бакалавров, обучающихся по направлению 09.03.01 — 
Информатика и вычислительная техника. Практическая часть состоит из пяти 
лабораторных работ, которые содержат задание и вспомогательную информацию для выполнения заданий.

Библиогр.: 7 назв. Табл. 3. Рис. 10.

Подготовлено кафедрой информационных технологий
УДК 004.4
ББК 32.973

© Уральский федеральный
     университет, 2015

ISBN 978-5-9765-3249-6 (ФЛИНТА)
ISBN 978-5-7996-1503-1 (Изд-во Урал. ун-та)

Содержание

Введение ....................................................................................................5

Часть 1. Основы проектирования интернет-приложений ...............12
1.1. Основные понятия интернет-приложений .....................................12
1.1.1. Интернет и его особенности..................................................12
1.1.1.1. Адрес в интернете......................................................13
1.1.1.2. Имя в интернете ........................................................13
1.1.1.3. Службы (сервисы) .....................................................15
1.1.1.4. Сокета ........................................................................16
1.1.1.5. Протокол HTTP. Виды запросов ................................19
1.1.1.5.1. Структура запроса (Request) .....................22
1.1.1.5.2. Структура ответа (Response) .....................23
1.1.2. Интернет-приложения ..........................................................24
1.1.2.1. Web-приложения .......................................................24
1.1.2.2. Web-сервисы ..............................................................25
1.1.2.3. Особенности проектирования ..................................26
1.1.2.4. Особенности пользовательского интерфейса ..........28
1.2. Технологии построения интернет-приложений .............................30
1.2.1. Технология создания клиентской части ...............................31
1.2.1.1. HyperText Markup Language .......................................31
1.2.1.2. Cascading Style Sheets ................................................33
1.2.1.3. DOM (Document Object Model) ..................................35
1.2.1.4. JavaScript ...................................................................38
1.2.1.5. JQuery ........................................................................39
1.2.1.6. AJAX ...........................................................................40
1.2.2. Технологии создания серверной части .........................................41
1.2.2.1. Web-серверы ..............................................................41
1.2.2.2. Технология MVC ........................................................43
1.2.2.3. Технологии объектно-реляционных 
                отображений (ORM).................................................44

Часть 2. Технологии создания интернет-приложений .....................46
2.1. Лабораторная работа № 1 ...............................................................46
2.1.1. Цель работы ...........................................................................46
2.1.2. Теоретическая часть ..............................................................47
2.1.2.1. Описание класса Socket ............................................47
2.1.2.2. Основные методы класса Socket ...............................47
2.1.2.3. Описание класса ServerSocket ..................................48
2.1.2.4. Основные методы класса ServerSocket .....................48

Содержание

2.1.2.5. Работа с входящим и исходящим потоком байт ......49
2.1.3. Порядок выполнения работы ................................................52
2.1.3.1. Подготовка рабочего места: .....................................52
2.1.3.2. Первая часть лабораторной работы .........................52
2.1.3.3. Вторая часть лабораторной работы .........................54
2.2. Лабораторная работа № 2 ...............................................................55
2.2.1. Цель работы ...........................................................................55
2.2.2. Теоретическая часть ..............................................................56
2.2.2.1. Hyper Text Transfer Protocol .......................................56
2.2.2.1.1. Структура HTTP-запросов и ответов .........56
2.2.2.1.2. Заголовки HTTP-запросов и -ответов .......58
2.2.2.2. Управление потоками ...............................................60
2.2.3. Порядок выполнения работы ................................................61
2.3. Лабораторная работа № 3 ...............................................................62
2.3.1. Цель работы ...........................................................................62
2.3.2. Теоретическая часть ..............................................................63
2.3.2.1. Создание клиентской части ......................................63
2.3.2.2. Таблицы каскадных стилей ......................................64
2.3.2.3. Отправка HTTP-запросов с помощью языка 
                JavaScript ..................................................................67
2.3.3. Порядок выполнения работы ................................................69
2.4. Лабораторная работа № 4 ...............................................................71

2.4.1. Цель работы ...........................................................................71
2.4.2. Теоретическая часть ..............................................................71
2.4.2.1. Создание конфигурации подключения к БД. ...........72
2.4.2.2. Создание класса-сущности .......................................75
2.4.2.3. Регистрация классов-сущностей ..............................77
2.4.2.4. Создание объекта в БД ..............................................77
2.4.2.5. Удаление объекта из БД. ...........................................78
2.4.2.6. Изменение объекта в БД ...........................................79
2.4.2.7. Чтение из БД ..............................................................79
2.4.2.8. Связи между таблицами ...........................................80
2.4.2.9. Связь many-to-one .....................................................80
2.4.3. Порядок выполнения работы ................................................83
2.5. Лабораторная работа № 5 ...............................................................84
2.5.1. Цель работы ...........................................................................84
2.5.2. Теоретическая часть ..............................................................84
2.5.3. Порядок выполнения работы ................................................88
2.6. Защита лабораторных работ ...........................................................88
2.6.1. Правила оформления отчета .................................................88

Библиографический список ....................................................................90

Введение

У

чебно-методическое пособие посвящено основам проектирования интернет-приложений. Разработано в рамках 
дисциплины «Проектирование интернет-приложений» для 
студентов-бакалавров направления 09.03.01 — Информатика и вычислительная техника.
Цель курса:
— ознакомление студентов с основными технологиями, необходимыми для создания интернет-приложений;
— получение практических навыков на основе выполнения лабораторных работ.
В настоящее время интернет является неотъемлемой частью 
жизни людей, без которой существование уже и не представляется 
возможным. Но для взаимодействия через интернет нужны приложения, позволяющие это осуществить, то есть интернет-приложения. Интернет-приложения можно встретить на любом современном 
устройстве: телефоне, планшете, компьютере. Чаще всего это приложения: браузеры, чаты, «облачные хранилища», игры — таких приложений безграничное множество. Но у всех этих приложений есть 
и другая сторона — серверная, которая и выполняет функцию хранения и обработки информации. Другими словами, интернет-приложения повсеместно применяются и для приложений уровня рабочей группы, уровня предприятия и т. д. Тому есть несколько причин.
— Отсутствие фазы развертывания приложения. Предположим, 
у нас есть 100 потенциальных участников некой информационной 
системы. В случае с классическим интерфейсом нам нужно было бы 
установить клиента на 100 рабочих мест. В случае с интернет-приложением достаточно развернуть его в одной точке — на сервере. Клиенты при этом получают возможность работы с приложением, просто набрав в браузере определенный адрес.

Введение

— Кросс-платформенность. Из указанных 100 человек некоторые 
вполне могли оказаться дизайнерами, для которых компьютер — это 
только название бренда, например, Apple, о существовании PC они 
могут и вообще не знать. В случае классического оформления приложения пришлось бы иметь две версии: одну для PC/Windows, другую — для Apple/Mac OS X.
— Отсутствие версионности. Web-организация взаимодействия 
с пользователями допускает просто замену приложения на сервере, 
после чего следующий пришедший запрос будет обработан уже новой 
версией приложения. Учитывая, что HTTP как протокол не поддерживает состояния сессии, описанное выше решение по замене версий 
вполне работоспособно и очень удобно в эксплуатации. Представим 
себе следующую ситуацию: на крупном предприятии установлена 
учетная система (ERP, Enterprise Resource Planning). Предприятие существует не само по себе, а в рамках государства и действующего законодательства, и обязано выполнять требование последнего. При 
достаточно кардинальном изменении — налогообложения, порядка 
расчета себестоимости или чего-нибудь еще — у разработчиков остается только один сценарий: выпуск новой версии программного обеспечения, и она должна быть установлена у всех работающих с данной системой сотрудников. Подобная ситуация случается на практике 
достаточно редко, тем не менее вызывает чуть ли не временный паралич работы предприятия: смена серверного программного обеспечения; необходимость настройки каждого клиентского приложения.
— Отсутствие хранения каких-либо данных на клиентской части. 
В ходе своей работы с системой пользователь может взаимодействовать с информацией разного рода: с документами, таблицами, графиками и т. д. Но вся информация обычно и хранится, и обрабатывается на серверной стороне. Из этого факта вытекают два следствия:
• 
пользователь не обязательно должен работать с одного 
и того же рабочего места. В классическом варианте, если пользователь пересаживается за соседний компьютер, то для него 
меняется все: становятся другими документы, таблицы и т. д. 
Более того, цвета и внешний вид окон так же могут оказаться разными. В случае с интернет-приложением пользователь 
получает доступ к тем же самым данным и с другого рабочего места, и с другого устройства. Например, с телефона или 
планшета;

Введение 

• 
в случае поломки компьютера пользователя вопрос восстановления занимает минимум времени, никакие данные при этом 
не будут потеряны. Конечно же, сервер — это тоже компьютер и он тоже может ломаться. Но обеспечить (и аппаратно, 
и программно) резервирование на одном сервере значительно проще и дешевле, чем сделать то же самое на ста рабочих станциях. Стоимость рабочей станции при таком подходе уменьшается, на ней находится минимум необходимого 
программного обеспечения, необходимо только устройство 
с операционной системой и браузером, и он сможет продолжать свою работу. Другими словами, разработанное приложение становится значительно доступнее и надежнее.
— Современные средства позволяют разработать пользовательский интерфейс для интернет-приложений, не уступающий классическому подходу ни в красоте исполнения, ни в функциональности, 
ни в эргономике.
Можно также отметить и недостатки интернет-приложений. За указанные выше преимущества приходится платить спецификой разработки: как большим объемом, так и появлением на стадии разработки 
специфичных для web-фаз дизайна и верстки. При разработке классического приложения внутри операционной системы эти две фазы практически полностью отсутствуют: верстка не нужна совсем, а дизайн 
обычно используется тот, который предоставляется самой операционной системой. Кроме того, в классическом подходе достаточно владеть 
каким-то одним языком программирования. Например, C++. В случае 
web-подхода, как правило, одного языка для реализации серверной и клиентской части недостаточно. Более того, кроме языков программирования как таковых при разработке web-приложения используются и специфичные технологии: язык разметки HTML, каскадные стили CSS и т. д.
Есть еще один фактор, который нельзя обойти вниманием при 
обсуждении web-приложения, — это серверное окружение. Обычно 
для работы web-приложения нужно некое внешнее обрамление: есть 
один или несколько HTTP-серверов, сам контейнер, в котором выполняется приложение, сервер базы данных и т. д.
Таким образом, разработка web-ориентированного приложения 
выглядит более сложным процессом по сравнению с классическим 
вариантом, то есть приложением, выполняющимся под управлением операционной системы.

Введение

Выбор того или другого подхода зачастую рассматривается с экономической точки зрения. Например, если планируемое приложение 
имеет десяток возможных потребителей, то, скорее всего, будет принято решение разрабатывать его по классическому пути. При большом количестве возможных участников системы снижение эксплуатационных расходов будет настолько существенным, что есть смысл 
увеличить затрат этапа разработки, то есть разрабатывать приложения с помощью web-технологий.
Таким образом, web-подход к разработке приложений приобретает в последнее время все большую популярность. Цель курса «Проектирование интернет-приложений», а также цикла лабораторных 
работ — познакомиться с общими принципами построения интернет-приложений, на практических примерах показать входящие в них 
компоненты и взаимодействие этих компонентов между собой.
Для изучения данного материала у читателя уже должны быть 
сформированы знания в области объектно-ориентированного программирования, без этих знаний понимание читателем курса может 
быть затруднительным и неэффективным (табл. 1).
Книга разделена на две основных части.
В первой части читатель сможет познакомиться с теоретической 
частью интернет-приложений, его аспектами и возможными вариантами работы приложений в интернете.
Во второй части предложено пять лабораторных работ с теоретической основой, позволяющей решить предложенные задачи. Все 
практические задания связаны между собой и являются логическим 
продолжением друг друга; их необходимо выполнять на объектноориентированном языке программирования Java. Также использованы некоторые библиотеки, позволяющие взаимодействовать с базой данных по технологиям ORM (object-relational mapping).

Критерий оценок

Критерий оценок

Таблица 1
Критерий оценок по дисциплине «Проектирование интернет-приложений»

Тип
занятия

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

Лекционные занятия

Посещение лекций (18)
Присутствие на всем протяжении лекции

1 посещение лекционного 
занятия = 
1 балл
Домашняя работа № 1 (Разработка технического задания 
для проектирования интернетприложения)

Своевременная сдача домашней работы.
4
Логичный ход выполнения задания
5
Студент применил для выполнения задачи, нестандартный метод решения
4

Оформление домашней работы соответствует необходимым требованиям
3

Домашняя работа № 2 (Проектирование 
структуры клиентской части 
приложения)

Своевременная сдача домашней работы
4
Логичный ход выполнения задания
5
Студент применил для выполнения задачи, нестандартный метод решения
4

Оформление домашней работы соответствует необходимым требованиям
3

Домашняя работа № 3 (Проектирование 
структуры серверной части 
приложения)

Своевременная сдача домашней работы
4
Логичный ход выполнения задания
5
Студент применил для выполнения задачи, нестандартный метод решения
4

Оформление домашней работы соответствует необходимым требованиям
3

Контрольная 
работа № 1 
(Принципы построения клиентской части)

В контрольной работе, даны понятийные 
ответы на знания дисциплины или присутствует небольшой процент неверных ответов (не больше 60 % от всех вопросов 
в контрольной работы)

1–5

В контрольной работе, дан четко структурированный ответ без лишних объяснений или присутствуют незначительные неточности в ответах (не более 80 % 
от всех вопросов в контрольной работы)

6–10

Введение

Тип
занятия

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

Лекционные занятия

В контрольной работе, дан четко структурированный ответ с дополнительной информацией демонстрирующие отличные 
знания темы дисциплины. Работа выполнена без ошибок

11–16

Контрольная 
работа № 2 
(Принципы построения серверной части)

В контрольной работе, даны понятийные 
ответы на знания дисциплины или присутствует небольшой процент неверных ответов (не больше 60 % от всех вопросов 
в контрольной работы)

1–8

В контрольной работе, дан четко структурированный ответ без лишних объяснений или присутствуют незначительные неточности в ответах (не более 80 % 
от всех вопросов в контрольной работы)

9–13

В контрольной работе, дан четко структурированный ответ с дополнительной информацией демонстрирующие отличные 
знания темы дисциплины. Работа выполнена без ошибок

14–18

Лабораторные работы

Посещение 
лабораторных 
занятий (18)

Присутствие на всем протяжении лабораторного занятия

1 посещение лабораторной 
работы = 
1 балл

Выполнение
лабораторной 
работы № 1–4

Правильно выполненная работа в соответствии с требованиями в методическом материале
3

Самостоятельно выполненная работа 
(не присутствуют элементы чужой 
работы)
3

Имеет нестандартный подход к решению 
задачи, подход который не отражен в методическом материале
2

Правильные ответы на вопросы по выполненной работе
3

Продолжение табл. 1

Критерий оценок

Тип
занятия

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

Лабораторные работы

Выполнение
лабораторной 
работы № 5

Правильно выполненная работа в соответствии с требованиями в методическом материале
3

Самостоятельно выполненная работа 
(не присутствуют элементы чужой работы)
4

Имеет нестандартный подход к решению 
задачи, подход который не отражен в методическом материале
3

Правильные ответы на вопросы по выполненной работе
3

Вовремя сданная лабораторная работа (5)
Работа сдана в указанный срок.
1 отчет = 
3 балла

Написание отчета по лабораторной работе (5)

Оформление отчета по лабораторным работам в соответствии с методическими 
указаниями

1 отчет = 
2 балл

Окончание табл. 1

Часть 1.  
Основы проектирования интернет-приложений

1.1. Основные понятия интернет-приложений

В данной главе рассмотрены основные определения, связанные 
с интернет-приложениями.

1.1.1. Интернет И егО ОсОбеннОстИ
И

нтернет — Interconnected Networks — объединенные сети, 
глобальная телекоммуникационная сеть информационных и вычислительных ресурсов. В разгар холодной войны, 
4 октября 1957 года, СССР запустил первый искусственный спутник 
Земли, тем самым получив преимущество в космосе. В США решили, 
что деньги, отпущенные Пентагоном на научные исследования, тратятся впустую, поэтому было принято решение создать единую научную организацию под покровительством Министерства обороны — 
ARPA (Advanced Research Projects Agency). Один из разрабатываемых 
передовых проектов — это распределенная децентрализованная вычислительная сеть, способная пережить даже ядерную войну. Существующие в то время телефонные сети не обеспечивали достаточной 
надежности: выход из строя одного крупного узла мог разделить сеть 
на изолированные участки. В декабре 1969 года была создана экспериментальная сеть, построенная на принципах цифровой коммутации пакетов и соединяющая 4 узла:
— калифорнийский университет в Лос-Анджелесе;
— калифорнийский университет в Санта-Барбаре;
— исследовательский университет Стенфорда;
— университет штата Юта.