Лекция 7. Поддержка разработки web-приложений баз данных

**1-ый учебный вопрос: Идентификация web-ресурсов и протокол взаимодействия с web-ресурсами http.** Uniform Resource Identifiers (унифицированные идентификаторы ресурсов) – специальная схема, которая идентифицирует ресурсы, проиндексированные в сети Интернет. В качестве ресурсов выступают страницы Интернет, музыка, видео, картинки и т.д. Посредством сети Интернет может осуществляться доступ к данным, хранимым на серверах баз данных. Наиболее распространённый способ реализации URI – это url. Единый указатель ресурса (Uniform Resource Locator) - система унифицированных адресов электронных ресурсов, или единообразный определитель местонахождения ресурса. Ссылка, сформированная в виде url однозначно указывает на проиндексированное содержимое сети Интернет в виде файла, страницы html или иного формата, распространяемого с помощью сетевых протоколов. Примеры URI: http://msuniversity.ru (ссылка на web-приложение, размещенное в сети Интернет). mailto:smirnovmgupi@gmail.com. Данный URI указывает на адрес электронной почты одного из пользователей сети Интернет. Для обеспечения взаимодействия пользователя сети интернет и необходимых ему ресурсов используется web-сервер, предоставляющий доступ к ресурсам, браузер (программное приложение на стороне клиента, формирующее запросы на основании URI) и средство передачи сообщений от браузера к web-серверу. Такие средства называются протоколы передачи данных (TCP, IP, HTTP). Логика работы любого протокола: 1. Клиент (веб-браузер) отправит запрос (составленный в виде, требуемом выбранным протоколом передачи данных) веб-серверу. 2. Веб-сервер получит запрос, сформирует на него ответ и передаст обратно веб-браузеру клиента. 3. Клиент получит ответ, создаст новые запросы. Наиболее распространенным протоколом передачи данных в сети является протокол HTTP. HTTP (HyperText Transfer Protocol) - протокол прикладного уровня передачи данных. Разрабатывался для передачи гипертекстовых документов, закодированных в формате HTML, но со временем эволюционировал в способ передачи произвольных данных. Взаимодействие в рамках протокола HTTP делится на две фазы – кодирование запроса и кодирование ответа на запрос. Запросы формируются одним из следующих методов: OPTIONS, GET, HEAD, POST, PUT, PATCH, DELETE, TRACE, CONNECT. Ниже будет разобран пример запроса метода GET со стороны браузера пользователя Интернет. Строка запроса GET ~/index.html HTTP/2 GET: поле HTTP метода (GET, POST и т.д.), который веб-пользователь желает применить к данным на веб-сервере. ~/index.html: поле URI, по которому осуществляется доступ к объекту интернета. HTTP/2 – поле версии HTTP (актуальная версия HTTP/2, но в настоящее в ремя осуществляется внедрение следующей версии HTTP/3). Тип клиента: User-agent: Opera/... Типы принимаемых клиентом файлов: Accept: text/html, image/gif, image/jpg... Ответ – реакция веб-сервера на запрос со стороны браузера. Ниже будет разобран пример ответа на запрос метода GET. Строка статуса: HTTP/2 200 OK Версия HTTP: HTTP/2 Код статуса: 200 (варианты кодов статуса: 200 OK запрос успешен, 400 Bad Request запрос не может быть обработан сервером, 404 Not found запрошенный объект отсутствует на сервере, 505 HTTP Version not Supported) Дата создания (изменения) объекта: Last-Modified: Mon, 04 May 2020... Количество отправляемых байтов: Content-Length: 1024 Тип отправляемого объекта: Content-Type: image/jpg При взаимодействии с протоколом HTTP (в первую очередь на уровне веб-приложения для браузера) необходимо учитывать одну существенную особенность команд протокола HTTP. Протокол HTTP не отслеживает состояние (state) рабочей сессии веб-приложения. Данная особенность накладывает ряд ограничений на логику работы веб-приложения, а именно: - нет сессионности (не отслеживается начало и конец сессии), - протокол не запоминает предыдущих взаимодействий с веб-сервером (не сохраняется история действий пользователя), - максимальное упрощение прямого взаимодействия с приложением (за счет исключения отслеживания состояния методы HTTP короткие и очень быстро обрабатываются), - любая информация, требующая отслеживания состояния (логин/пароль пользователя, корзина заказов...) должна быть должна быть закодирована в каждом запросе и ответе HTTP. Очевидно, что в некоторых случаях, когда отслеживание состояния является ключевой функцией работы веб-приложения (например – веб-приложение интернет-магазина) необходимо решение, которое добавит возможность отслеживания состояния рабочей сессии (взаимодействия веб-приложения с веб-сервером). Способами решения отслеживания состояния в HTTP являются применение cookies и динамически создаваемые url на уровне веб-сервера. **2-ый учебный вопрос: Форматы веб-данных.** Основой форматирования и представления данных в сети Интернет являются два специальных формата: HTML и XML. HTML (HyperText Markup Language) - стандартизированный язык разметки документов в сети Интернет. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Особенности языка разметки HTML. 1. В качестве команд используются специальные тэги 2. Объект, подлежащий разметке, должен быть размещен между начальным тэгом и конечным тэгом, например: <HTML>...</HTML> или <UL>...</UL>… 3. Кодирование документа в формат HTML весьма тривиальная задача, поэтому чаще всего разметка создается в автоматическом режиме с помощью популярных прикладных программ (например, MS Word). Список команд HTML, которые размещают в тегах ограничен, и каждая команда выполняет свою функцию. Пример страницы, написанной с помощью HTML показан на рис. 1.  Еще одним инструментом формирования страниц сети Интернет является язык XML. XML (eXtended Markup Language) - язык с простым формальным синтаксисом, удобный для создания и обработки документов программами и одновременно удобный для чтения и создания документов человеком. Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах (в отличие от HTML): разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка. Благодаря гибкости системы тегов, с помощью инструментария XML можно передать любой массив данных вместе с его описанием. На каждую строку XML накладывается ряд условий и ограничений. XML чувствителен к пробелам. Начальный и конечный тэги должны быть одинаковыми. Начальный (открывающий) тэг: “<“ + название элемента + “>”. Конечный (закрывающий) тэг: “</“ + название элемента + “>”. Атрибуты – это дополнительная информация об элементах. Элемент может содержать несколько атрибутов, а может не содержать их вовсе: attribute_name=‘attribute_value’. Перечисление атрибутов разделяется пробелом. Так как рабочие тэги XML определяются пользователем и, вследствие чего, не являются строго регламентированными, контроль за правильностью документации XML возлагается на схему данных XML. DTD (Document Type Definition) – схема данных для документов XML позволяющая пользователю строго определить формальную структуру языка, а также проверить новые документы XML на соответствие требованиям этой формальной структуре. Схема данных DTD может быть как внутренней (прописывается внутри XML документа для каждого документа в отдельности), так и внешней (отдельный документ с DTD схемой, контролирующий валидность нескольких XML документов). На рис. 2 показан фрагмент внутренней схемы DTD для XML документа.  В верхней части рисунка показан фрагмент DTD схемы, а в нижней части показаны два варианта XML элемента, один из которых валидный (соответствующий требованиям DTD схемы), а другой – не валидный (не соответствующий требованиям DTD схемы). Требования DTD-схемы устанавливаются через элементы и/или регулярные выражения. Элемент DTD – объект, аналогичный элементам проверяемого XML. Имеет название, также может иметь ряд вложенных элементов (свойства объекта). Вложенными элементами для элемента DTD могут быть: - другие элементы, - #PCDATA - спарсенные (извлеченные, находящиеся в свободном доступе данные, хранящиеся на веб-сервере) символьные данные, - EMPTY – пустой объект, без содержимого, - ANY – любые данные, в любом формате, но без возможности проверки содержимого с помощью схемы DTD - регулярные выражения. Регулярные выражения DTD – элементы схемы DTD, регулирующие варианты допустимые варианты вхождений (количество) для объектов XML схемы. Ниже показаны вариации регулярных выражений DTD. - exp(1), exp(2), exp(3),...,exp(n) – список регулярных выражений, - exp*, опциональное выражение с нулем или позитивным числом вхождений (этот объект может не существовать вовсе или существовать в нескольких экземплярах), - exp+, опциональное выражение с одним или позитивным числом вхождений (этот объект должен существовать хотя бы в одном, а, возможно, и в нескольких экземплярах), - exp(1) | exp(2)...: разделение регулярных выражений **3-ый учебный вопрос: Трехуровневая архитектура веб-приложений. Клиентская программа (фронт-энд).** Наиболее распространенной формой архитектуры для популярных веб-приложений является трехуровневая (трехтировая) архитектура. Она представляет собой реализацию трех основных элементов обеспечения функционирования веб-приложения – клиентскую программу (приложение, реализованное на библиотеках веб-браузеров с GUI), сервер приложений или веб-сервер с скриптами cgi (бизнес-логика работы приложения, доступ к данным на веб-сервере) и сервер базы данных/веб-сервер (источник данных для веб-приложения). В общем виде, данная архитектура с примерами технологий реализации показана на рис. 3.  Далее будут рассмотрены ключевые технологии, применяемые на уровне клиентской программы и уровне сервера приложений. Клиентская программа – элемент веб-приложения, позволяющий пользователю с помощью графического интерфейса (GUI) реализовывать логику обработки данных, хранящихся на веб-сервере. Функционал и графический интерфейс клиентской программы может быть реализован различными способами. Одним из наиболее распространенных способов является построение HTML-форм с элементами JavaScript. HTML-форма - основной способ осуществления взаимодействия клиента с со средним уровнем архитектуры Общий вид формы (фрагмент HTML-документа, содержащего HTML-форму): <FORM ACTION=“page.jsp” METHOD=“GET” NAME=“LoginForm”> ... </FORM> Ключевые компоненты HTML-тэга HTML формы: - ACTION – указание на URI по которому находится объект, необходимый для работы формы, - METHOD – выбор HTTP метода, для реализации логики приложения (например методы GET или POST), - NAME – название формы, которое необходимо при запуске и реализации логики скриптов на стороне клиента. Пример HTML-формы реализующей логику авторизации клиента на веб-сервере (ввод userid, password и кнопка передачи input логина и пароля) приведен на рис. 4.  Следует отметить, что строгость и ограниченное количество тэгов HTML кода накладывает значительные ограничения на возможности программиста по реализации логики приложения с помощью HTML-форм. Как правило, этот инструмент используется только для формирования GUI клиентской части веб-приложения. Для расширения функциональности и возможностей HTML-формы применяются скрипты, написанные в одном из языков программирования. Чаще всего для этой цели применяется язык JavaScript. JavaScript - мультипарадигменный язык программирования, обычно используется как встраиваемый язык для программного доступа к объектам приложений. Цель применения во фронт-энде веб-приложения: добавить функциональности на уровне представления. Примеры скриптов, используемых в HTML-документах: - определить тип браузера и настроить (выбрать) оптимальную схему вывода html-документа под этот браузер, - проверить и подтвердить правильность заполнения html-формы пользователем (обработка исключений), - открытие новых окон браузера при взаимодействии пользователя с элементами GUI, поп-апы и т.д. Скрипты JavaScript обычно встраивается прямо в HTML-документ с тэгами <SCRIPT>...</SCRIPT>. Типовые атрибуты тега SCRIPT: LANGUAGE (язык скрипта), SRC (внешний файл с кодом скрипта). Например: <SCRIPT LANGUAGE=“JavaScript” SRC=“validate.js”></SCRIPT> (вызов кода скрипта validate.js на языке JavaScript). Пример скрипта без ссылки на файл скрипта в самом HTML: <SCRIPT LANGUAGE=“JavaScript”> <!— alert(Welcome to the jungle!”)//--> </SCRIPT> (вывод алерта при обращении к html-странице, содержащей этот скрипт). Еще одной возможностью расширения функционала HTML-форм является применение таблиц стилей (stylesheets). Таблица стилей – способ описания внешнего вида документов. Этих способов для одного документа может быть несколько, и применяться они могут в зависимости от условий вызова документа со стороны клиентского приложения (разные браузеры и т.д.). Таблица стилей формируется с помощью специальных языков в виде кода. Файл таблицы стилей всегда сопровождает на веб-сервере выводимый с помощью этой таблицы документ. Среди специальных языков таблицы стилей выделяются два наиболее распространенных: CSS и XSL. Cascading style sheets (CSS) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. Extensible stylesheet language (XSL) – средство описания внешнего вида веб-страниц для документов XML. Документ CSS может управлять множеством HTML документов, так, например, формат целого веб-сайта или веб-приложения можно изменить, просто исправив значения соответствующего CSS документа. Каждая строка CSS состоит из трех частей: selector {property: value}, где Selector - тэг с определенным форматом (из набора допустимых в CSS), Properly – атрибут выбранного тэга с устанавливаемым значением, Value - значение атрибута. Пример кода CSS-документа показан на рис. 5. В качестве цвета документа устанавливается желтый (yellow), размер кегля шрифта для заголовка первого уровня документа устанавливается 36 ед., цвет заголовка третьего уровня устанавливается как голубой (blue), абзац с отступом слева на 50 ед., красного цвета (red).  Вопросы для самостоятельного изучения по итогам лекции. 1. Как работает схема URI mailto? 2. В чем основные недостатки толстого и тонкого клиента при применении клиент-серверной архитектуры? 3. Перечислите актуальные на настоящий момент времени серверы приложений. 4. Какие еще кроме GET и POST существуют HTTP команды? Для чего они используются? 5. Посредством чего серверы приложений взаимодействуют с базами данных (СУБД)?