Целью работы является изучение технологий программирования клиентских и сервер-

ЛАБОРАТОРНАЯ РАБОТА 1
ПРОГРАММИРОВАНИЕ КЛИЕНТСКИХ И СЕРВЕРНЫХ СЦЕНАРИЕВ
WEB-ПРИЛОЖЕНИЙ
1. Цель работы
Целью работы является изучение технологий программирования клиентских и серверных сценариев Web-приложений.
2. Задачи
Задачами лабораторной работы являются овладение навыками построения Webстраниц и объединения их в Web-приложения и освоение программных технологий разработки клиентских и серверных сценариев.
3. Теоретическая часть
Web-приложения. Web-приложения представляют собой особый тип программ, построенных по архитектуре «клиент-сервер» (рис. 1). Особенность их заключается в том,
что само Web-приложение находится и выполняется на сервере. Клиент при этом получает только результаты работы.
Рисунок 1 – Клиент-серверная архитектура Web-приложений
За счет наличия исполняемой части, Web-приложения способны выполнять практически те же операции, что и обычные Windows-приложения, с тем лишь ограничением, что
код исполняется на сервере, в качестве интерфейса системы выступает браузер, а в качестве среды, посредством которой происходит обмен данными, – Интернет.
Обращение браузера к серверу называется запросом, а ответ сервера браузеру – откликом.
Архитектура Web-приложения. В общем виде функционирование Web-приложений
определяется работой трех основных компонентов:
• Web-сервера;
• Web-браузера;
• HTTP-протокола.
Web-сервер – это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Современные Web-серверы предоставляют широкий ассортимент сервисов. Они способны
1
обрабатывать как статические HTML-файлы, так и запросы страниц, содержащих код, который выполняется на сервере.
Web-серверы поддерживают сохранение данных запросов, что позволяет связывать
Web-страницы в Web-приложения. Представление о Web-сервере как о компоненте, закрывающем соединение после отправки Web-браузеру единственной страницы, считается
устаревшим. Теперь Web-серверы поддерживают постоянные соединения с Webбраузерами, непрерывно ожидая дополнительные запросы.
Web-браузер – это независимое от платформы средство отображения Web-страниц,
написанных на языке HTML. HTML-код пластичен – текст, если необходимо, перераспределяется в окне браузера, подстраиваясь под его размер.
Каждый запрос Web-страницы, отправленный Web-серверу, приводит к очистке окна
Web-браузера и отображению новой Web-страницы. Визуализация HTML-кода в окне
клиентского браузера называется рендерингом.
Протокол HTTP. Web-браузеры и Web-серверы «общаются» по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста). HTTP, или протокол передачи текстовых данных по сети, применяется для запроса Web-страниц у Web-браузера и
возврата откликов браузеру. HTTP-сообщения обычно передаются между Web-сервером и
Web-браузером через порт 80, а при использовании защищенного HTTP (HTTPS) – через
порт 443.
Работа по протоколу HTTP происходит следующим образом: программа-клиент (браузер) устанавливает TCP-соединение с сервером (стандартный номер порта – 80) и выдает
ему HTTP-запрос. Сервер обрабатывает этот запрос и выдает HTTP-ответ клиенту.
Статические и динамические сайты. Web-сайт, состоящий просто из набора HTML
файлов, ссылающихся друг на друга, просто создать, он неприхотлив в обслуживании,
надежен и не требует от сервера большой вычислительной мощности. Такие Web-сайты
называют статическими. Динамический Web-сайт в ответ на запросы Web-браузера пользователя может не просто выдавать заранее подготовленные страницы HTML, а создавать
страницы «динамически», на основе записей в базе данных. Такой подход к созданию сайта позволяет также отделить его содержимое от внешнего вида, появляется возможность
быстро менять оформление сайта или даже предлагать пользователям несколько вариантов оформления на выбор.
Клиентские и серверные сценарии. Сценарий – это специальная программа, написанная на особом языке программирования (скриптовом языке, языке сценариев), расширяющая функциональные возможности Web-страницы по сравнению с обычным HTMLдокументом.
Серверные сценарии хранятся и работают на сервере и передают в браузер пользователя только результат своей работы. Серверные технологии создания Web-приложений не
предъявляют никаких особенных требований к Web-браузеру пользователя, браузер получает только итоговый результат обработки данных уже в конечном виде. Но на сервер ложится значительная вычислительная нагрузка, с которой он может просто не справиться
при наплыве пользователей.
Клиентские сценарии загружаются в браузер пользователя вместе с текстом Webстраницы и исполняются в самом браузере. Достоинства клиентских технологий ясны –
нет необходимости загружать Web-сервер и перекачивать с него лишние объемы информации. Однако дополнительные вычисления нагружают компьютер пользователя, особенно если он не слишком быстр, кроме того, сам браузер должен уметь работать с этими
клиентскими технологиями.
Серверные и клиентские технологии создания динамических сайтов не соперничают, а
успешно дополняют друг друга при создании действительно современных динамических
сайтов.
2
Клиентские и серверные элементы управления. Web-страница, которая передается
в браузер пользователя, в самом общем виде может быть представлена как множество
элементов управления, размещенных на пустой Web-странице. При этом большинство
элементов, которые используются на Web-странице, очень похожи на те, что используются в Windows-приложениях.
Общепринятым является деление веб-элементов на две группы: клиентские HTMLэлементы и серверные элементы. Серверные элементы мощнее, потому что они привязаны
не к разметке, а к функциональности, которую нужно обеспечить.
Серверный элемент управления программируется с помощью серверного кода, обрабатывающего события этого элемента. В промежутках между обращениями к серверу серверные элементы управления автоматически поддерживают (сохраняют) свое состояние.
Применение HTML-элементов целесообразно, если для элементов управления требуется собственный клиентский сценарий, связанный с событиями элемента управления. В
остальных случаях следует применять более мощные серверные элементы управления.
В конечном итоге, после рендеринга, серверные элементы управления генерируют тот
же самый HTML-код, что и клиентские элементы управления HTML.
Технология Active Server Pages (ASP/ASP.NET). Active Server Pages (ASP) — это
серверная технология для разработки и выполнения динамических интерактивных Webприложений. Средства ASP позволяют объединить возможности HTML-страниц, команд
сценариев и компонентов COM в интерактивных Web-страницах и мощных Webприложениях, делают удобным и легким процесс их создания и изменения.
Выполнение кода ASP поддерживается ISAPI-расширением сервера (ISAPI – Internet
Server Application Programming Interface), которое позволяет использовать DLLбиблиотеки вместо исполняемых файлов. Код DLL постоянно находится в памяти и для
каждого запроса создает не процессы, а нити исполнения, которые используют один и тот
же программный код.
«Родная» среда ASP – Web-сервер Internet Information Services (IIS), работающий под
управлением Windows. Код ASP встраивается в HTML-код в виде специальных тегов
(обычно <% код %>) и представляет собой инструкции, написанные на скриптовых языках
(чаще всего – на JavaScript и VBScript). Создать ASP-страницы можно как в любом визуальном HTML-редакторе, так и в простом текстовом редакторе, например, в «Блокноте».
Расширение таких страниц – asp.
ASP.NET – это не продолжение ASP. Это концептуально новая технология Microsoft,
созданная в рамках идеологии .NET Framework. Microsoft .NET Framework – это платформа для создания, развертывания и запуска Web-сервисов и приложений. Она предоставляет высокопроизводительную, основанную на стандартах, многоязыковую среду, которая
позволяет интегрировать существующие приложения с приложениями и сервисами следующего поколения, а также решать задачи развертывания и использования Webприложений. .NET Framework состоит из трех основных частей – общеязыковой среды
выполнения (common language runtime), иерархического множества унифицированных библиотек классов и компонентной версии ASP – ASP.NET.
Web-страница ASP.NET имеет расширение .aspx и состоит из трех разделов:
– директивы страницы – используются для настройки и определяют, как должна обрабатываться страница. Например, в такой секции можно импортировать пространства имен
и загружать сборки.
– код – код обработки событий, генерируемых страницей или ее элементами управления. Код размещается в теге <script>.
– разметка страницы – это HTML-код страницы, включающий HTML-тег body и его
содержимое. Там же размещаются клиентские и серверные элементы управления, а также
простой текст.
Для разработки приложений ASP.NET чаще всего используется среда Microsoft Visual
Studio, однако такие страницы можно создавать и в текстовом редакторе.
3
Теоретически под ASP.NET можно писать программы на любом языке, для которого
имеется соответствующий компилятор. Однако на практике для создания ASP.NETприложений используются главным образом Visual Basic.NET и C#.
Одной из ключевых особенностей технологии ASP.NET является возможность использования серверных элементов управления. Для их обозначения используются теги с префиксом asp и атрибут runat со значением server.
Функции работы с базами данных. Деятельность большинства Web-приложений сосредоточена на извлечении, отображении и модификации данных, иными словами, ориентирована на использование баз данных.
Для работы с базами данных в ASP.NET используется библиотека ADO.NET. Она
предоставляет классы для подключения к источникам данных практически любого формата, выполнения запросов к этим источникам и получения результата. ADO.NET предоставляет как поставщики данных для конкретных СУБД (например, Microsoft SQL Server),
так и общедоступный OLE DB. Основные классы ADO.NET, предусмотренные этими поставщиками, приведены в таблице 1.
Важной особенностью ADO.NET является возможность его автономной работы с базами данных, без постоянного соединения с сервером. Можно выполнить запрос к базе
данных, сохранить в кэше результаты запроса, а потом закрыть соединение с базой данных.
Таблица 1
Классы ADO.NET взаимодействия с базами данных в ASP.NET-приложениях
Название класса
Описание класса
Соединение с источником данных
Connection
(SqlConnection,
OleDbConnection и др.)
Command (SqlCommand, Запрос к источнику данных
OleDbCommand и др.)
Хранение возвращаемых запросом записей (только чтение)
DataReader
(SqlDataReader,
OleDbDataReader и др.)
Таблица для представления результатов запроса в форме строк
DataTable
(DataRow) и столбцов (DataColumn) (чтение и запись)
DataSet
Совокупность объектов DataTable, автономный набор данных из
результатов запроса
DataAdapter
Связующее звено между объектом DataSet и базой данных, обеспечивает синхронизацию данных
(SqlDataAdapter,
OleDbDataAdapter и др.)
Технология PHP. Язык РНР (PHP: Hypertext Preprocessor) представляет собой язык
сценариев, которые внедряются в страницы HTML для исполнения на стороне сервера.
Как правило, для отделения PHP-кода от кода HTML используются символы <?php код ?>,
реже – <? код ?> и <script language="php">код</script>, а также инструкции «в стиле ASP» – <%
код %>.
Web-страница PHP имеет расширение .php и состоит из трех разделов:
– директивы страницы – используются для настройки и определяют, как должна обрабатываться страница. Например, так можно задать подключение внешних файлов.
– код – программный код, реализующий выполняемые на сервере операции.
– разметка страницы – это HTML-код страницы, включающий тег body и его содержимое.
Поддержка PHP обеспечивается многими серверами, но традиционно такие Webприложения функционируют на Web-сервере Apache.
4
Для разработки PHP-страниц можно использовать как текстовые редакторы (например,
«Блокнот»), так и более «продвинутые» визуальные HTML-редакторы.
Функции работы с базами данных. Приложения PHP, использующие для хранения
информации базу данных, как правило, работают с системой управления базами данных
MySQL. Для работы с базами данных PHP располагает достаточно широким набором
функций (табл. 2) – от установки соединения с базой данных до извлечения отдельных
значений, полученных в результате выполнения запроса.
Таблица 2
Функции взаимодействия с базами данных в PHP-приложениях (СУБД MySQL)
Название класса
Описание класса
Соединение с источником данных
mysql_connect
Выбор базы данных для дальнейшей работы
mysql_select_db
Отправка SQL-запросов серверу
mysql_query
Представление результата запроса в виде ассоциативного массива
mysql_fetch_array
Доступ к отдельному полю записи результата запроса
mysql_result
Технология Java Server Pages (JSP). Технология Java Server Pages (JSP) позволяет
разработчикам и дизайнерам Web-приложений быстро разрабатывать и легко сопровождать динамические Web-страницы.
В основе технологии JSP лежит концепция сервлетов Java. Сервлет является Javaпрограммой, выполняющейся на стороне сервера и расширяющей функциональные возможности сервера. Прежде чем JSP-документ будет использован, специальная процедура
преобразует его в соответствующий сервлет.
После компиляции JSP-кода в сервлет, он обрабатывается механизмом обработки
сервлетов так же, как и любой. Обработчик сервлетов с помощью загрузчика классов загружает класс этого сервлета и исполняет его код, чтобы создать динамическую HTMLстраницу, которая будет передана браузеру. В следующий раз, когда запрашивается страница (если она не изменилась), обработчик JSP выполняет уже загруженный сервлет.
Код JSP встраивается в HTML-страницу и отделяется от ее кода символами <% код %>.
Файл страницы JSP имеет расширение .jsp. В общем виде структура JSP-страницы представлена тремя компонентами:
– директивы. Отделяются от HTML-кода тегами <%@ page %> и используются для подключения внешних классов и библиотек. Директивы «говорят» серверу делать что-либо,
когда они преобразуются из JSP в сервлет;
– сценарии. Собственно, JSP-код, размещенный между тегами <% и %>. Это и есть код
скриплета;
– разметка, определяющая иерархию HTML-элементов страницы.
Для исполнения страниц JSP нужен Web-сервер с Web-контейнером, совместимым со
спецификациями технологий JSP и сервлетов. Web-контейнер работает на Web-сервере и
управляет выполнением всех страниц JSP и сервлетов, запускающихся на этом сервере.
Обычно в качестве Web-сервера используется свободно распространяемый сервер Apache
Tomcat, который предоставляет реализацию спецификаций Java и JSP.
Для разработки приложений JSP чаще всего используется среда Eclipse (Eclipse
Europe), однако такие страницы можно создавать и в текстовом редакторе.
Функции работы с базами данных. Технология JSP предоставляет широкий набор с
разными типами баз данных – от Microsoft Access и MySQL до Microsoft SQL Server и Oracle. В таблице 3 приведены основные функции, которые позволяют JSP-приложению
«общаться» с базой данных. Эти функции представляют собой методы класса драйверов
соответствующих СУБД. Для этого на JSP-страницы выполняется загрузка класса заданного драйвера и генерируется его экземпляр.
5
Таблица 3
Функции взаимодействия с базами данных в PHP-приложениях (СУБД MySQL)
Название класса
Описание класса
Установка соединения с базой данных
Connection
Выполнение запроса к базе данных
Statement
Хранение результатов запроса к базе данных
ResultSet
4. Порядок выполнения работы
Предварительные замечания
В рамках лабораторной работы должно быть разработано Web-приложение «Успеваемость студентов», состоящее из двух Web-страниц. На первой странице «Default» пользователь должен выбирать факультет, специальность и студенческую группу из соответствующих раскрывающихся списков (рис. 2, а). Передача выбранных пользователем параметров на сервер выполняется нажатием на ссылку «Просмотр». В результате выполняется переход на страницу «Browse», где отображается информация об успеваемости выбранной студенческой группы (рис. 2, б).
а
б
Рисунок 2 – Web-приложение «Успеваемость студентов»
6
Для реализации Web-приложения используются язык гипертекстовой разметки HTML,
таблицы стилей CSS и клиентские сценарии JavaScript. Программирование серверных
сценариев выполняется с помощью технологий, соответствующих варианту, заданному
преподавателем.
При разработке Web-приложения используется реляционная база данных University. В
зависимости от варианта база данных реализуется с помощью системы управления базами
данных Microsoft SQL Server (для технологии ASP.NET) или MySQL (для технологий PHP
и JSP). Программный код Transact-SQL создания базы данных и внесения в нее тестовой
информации приведен в приложении к работе и должен быть запущен на выполнение из
соответствующей визуальной среды.
Вариант А. Технология ASP.NET и СУБД Microsoft SQL Server
1. Создать новый Web-сайт:
Пуск | Программы | Microsoft Visual Studio 2005 | Microsoft Visual Studio 2005
ф. Microsoft Visual Studio | File → New → Web Site… → ф. New Web Site → Visual Studio Installed Templates → выбр. ASP.NET Web Site →
Location → выбр. HTTP → http://имя_сервера(например, localhost)/Lab1_ASP
Language → выбр. Visual C#
2. Перейти на страницу ввода программного кода:
ф. Lab1_ASP → Default.aspx → Source | удалить весь код, расположенный между открывающим и закрывающим тегами элемента BODY
3. Задать заголовок страницы Default.aspx. Для этого между открывающим и закрывающим
тегами элемента HEAD ввести следующий код:
<TITLE>Успеваемость студентов</TITLE>
4. Создание CSS-таблицы стилей
4.1. Создать новый файл в текстовом редакторе «Блокнот»
4.2. Определить стиль представления на HTML-странице горизонтальной линии:
.line {
HEIGHT: 2px; BORDER: #cbd1e0 2px solid
}
4.3. Создать стиль представления на HTML-страницы основной таблицы:
.pageborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid; BACKGROUND: none
transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid; COLOR: #000000; BORDERBOTTOM: #cbd1e0 2px solid
}
4.4. Построить стиль представления на HTML-странице текста «Успеваемость» в заголовке страницы:
.text1 {
FONT-SIZE: 16pt; COLOR: #0066cc; FONT-VARIANT: small-caps; FONT-FAMILY: 'Century
Schoolbook'
}
4.5. Задать стиль представления на HTML-странице текста «студентов» в заголовке
страницы:
.text2 {
FONT-SIZE: 24pt; TEXT-TRANSFORM: uppercase; COLOR: #0000cc; FONT-FAMILY: 'Century
Schoolbook'
7
}
4.6. Задать стиль представления текста .text3 на основе стиля .text1 с размером шрифта
13pt.
4.7. Задать стиль представления таблицы .headborder на основе стиля .pageborder с шириной правой и нижней границ, равной 2 px.
.headborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid;
BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid;
COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid
}
4.8. Аналогичным образом задать стиль представления таблицы .textborder на основе
стиля .headborder без верхней границы.
4.8. Задать стиль представления текста .headtext на основе стиля .text1 без малых прописных букв и с размером шрифта 13pt.
4.10. Задать стиль представления текста .tabletext с размером шрифта 10pt.
4.11. Сохранить файл под названием style.css и поместить его в папку images, размещенную в каталоге с Вашим веб-приложением.
5. Задать ссылку на таблицу стилей в файле Default.aspx. Для этого между открывающим и
закрывающим тегами элемента HEAD ввести следующий код:
<LINK href="images/style.css" rel="stylesheet" type="text/css"/>
6. Создать форму для отправки данных серверу.
6.1. Создать серверный элемент FORM. Для этого между открывающим и закрывающим тегами элемента BODY ввести следующий код:
<FORM>
</FORM>
6.2. Задать идентификатор формы. Для этого в качестве атрибута элемента FORM
указать:
id="form"
6.3. Указать, что форма является серверным элементом управления. Для этого в качестве атрибута элемента FORM указать:
runat="server"
6.4. Указать метод (POST) формы и страницу, на которую будут направлены данные формы. Для этого в элемент FORM ввести следующие атрибуты:
action="Browse.aspx" method="post"
7. Сформировать структуру Web-страницы Default.aspx в форме одноколоночной таблицы
из двух строк
7.1. Создать «каркас» таблицы шириной 600 px, к которой применен стиль pageborder:
<TABLE class="pageborder" border="0" width="600">
</TABLE >
7.2. Создать «заголовочную» строку «Успеваемость студентов».
7.2.1. Создать новую строку таблицы. Внутри строки задать единственный столбец,
ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%) Для это8
го между открывающим и закрывающим тегами элемента TABLE (см. п. 7.1) ввести следующий код:
<TR>
<TD width="100%">
</TD>
</TR>
7.2.2. Ввести текстовую строку «Успеваемость» и применить к ней стиль text1:
<SPAN class="text1">Успеваемость</SPAN>
7.2.3. Ввести новую текстовую строку « студентов» с использованием стиля text2:
<BR/>
<SPAN class="text2">            студентов</SPAN>
7.2.4 Создать две горизонтальные линии и применить к ним стиль line. Ширина
второй линии – 70%, выравнивание – по левому краю:
<BR/>
<HR class="line"/><HR class="line" width="70%" align="left"/>
8. Создать управляющие элементы отправки запросов формы серверу.
8.1. Создать новую строку таблицы. Внутри строки задать единственный столбец,
ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%), а текст
внутри столбца имеет размер 17 px и выровнен по правому краю. Для этого между открывающим и закрывающим тегами элемента TABLE (см. п. 7.1) после строки из п. 7.2 ввести
следующий код:
<TR>
<TD style="height: 17px; text-align: right;" width="100%">
</TD>
</TR>
8.2. Создать текстовый фрагмент «Выбор», к которому применен следующий
стиль: цвет текста – RGB-код #ff0000, размер шрифта – 13 pt, шрифт – Century Schoolbook:
<SPAN style="color: #ff0000; font-size:13pt; font-family: 'Century Schoolbook'">Выбор
  </SPAN>
8.3. Создать элемент управления LinkButton «Выбор», к которому применен следующий стиль: цвет текста – RGB-код #669999, размер шрифта – 13 pt, шрифт – Century
Schoolbook:
<SPAN style="color: #669999; font-size:13pt; font-family: 'Century Schoolbook'">
<asp:LinkButton ID="LinkButton1" runat="server" style="text-decoration: none">
Просмотр</asp:LinkButton></SPAN>
9. Создать столбцы-параметры запроса.
9.1. Создать новую двухколоночную таблицу в новой строке таблицы из п. 7.1.
Таблица должна быть выровнена по центру и иметь ширину 550 px.
<TR>
<TD><BR/>
<TABLE align="center" width="550">
</TABLE>
</TD>
</TR>
9.2. Создать строку для запроса параметра «Факультет».
9
9.2.1. Создание новой строки таблицы (п. 9.1) шириной 50 px с верхним вертикальным выравниванием:
<TR height="50px" valign="top">
</TR>
9.2.2. Создать первый столбец строки из п. 9.2.1. К тексту «Факультет» столбца
применить стиль text3:
<TD style="width: 163px"><SPAN class="text3">Факультет</SPAN></TD>
9.2.3. Создать второй столбец с серверным элементом управления DropDownList
(раскрывающийся список) шириной 350 px с идентификатором faculty:
<TD>
<asp:DropDownList style="width: 350px" ID="faculty" runat="server">
<asp:ListItem Selected="True">Выбор факультета...</asp:ListItem>
</asp:DropDownList>
</TD>
9.3. Создать строки для запроса параметров «Специальность» и «Группа» (аналогично строке из п. 9.2). Идентификаторы соответствующих элементов управления –
«spec» и «gr».
10. Заполнить серверные элементы DropDownList информацией о факультетах, специальностях и группах, полученной из базы данных
10.1. Подключить библиотеки для работы с базами данных (System.Data, System.Data.SqlTypes, System.Data.SqlClient). Для этого после строки программного кода
<%@ Page Language="C#" AutoEventWireup="true"
its="_Default"%>
CodeFile="Default.aspx.cs" Inher-
Добавить следующие строки:
<%@Import Namespace="System.Data"%>
<%@Import Namespace="System.Data.SqlTypes"%>
<%@Import Namespace="System.Data.SqlClient"%>
10.2. Создать серверную функцию Page_Load, выполняемую при загрузке страницы:
<script language="C#" runat="server">
void Page_Load(object sender, EventArgs e)
{
}
</script>
10.3. Создать текстовую переменную conn, задающую параметры соединения с базой данных. Для этого между открывающей и закрывающей фигурными скобками функции Page_Load ввести следующий код:
string conn = "Data Source=GULYA;Initial Catalog=University;Integrated Security=True";
10.4. Создание текстовой переменной f_query, содержащей запрос к таблице Faculty
(Факультет):
string f_query = "select '0' as id, 'Выбор факультета...' as name from Faculty union select *
from Faculty";
10.5. Выполнение запроса на извлечение данных и сохранение результата в экземпляре класса SqlDataSource:
10
SqlDataSource f_source = new SqlDataSource(conn, f_query);
10.6. Заполнить раскрывающийся список с идентификатором faculty результатом запроса (п. 10.5). Список должен отображать названия факультетов (поле name), а в качестве
выбранных значений, передаваемых серверу, использовать их идентификаторы (поле id):
faculty.DataSource = f_source;
faculty.DataTextField = "name";
faculty.DataValueField = "id";
faculty.DataBind();
10.7. Аналогичным образом заполнить раскрывающиеся списки специальностей и
групп.
11. Разработать клиентский сценарий проверки введенных пользователем данных check().
11.1. Определить обработчик события отправки формы на сервер (submit). Для этого в
открывающем теге элемента FORM (из п. 6) задать атрибут:
onsubmit="javascript:check()"
11.2. Создать клиентский сценарий check(), введя следующий код после описания серверного сценария Page_Load:
<script language="javascript">
function check()
{
f = document.getElementById('faculty').value;
s = document.getElementById('spec').value
g = document.getElementById('gr').value;
if(f=='0' || s=='0' || g=='0')
{
alert('Один из параметров не был выбран!');
}
}
</script>
12. Создать новую страницу Web-сайта:
Lab1_ASP - Microsoft Visual Studio |
ф. Solution Explorer | кл. пр. кн. мыши на названии проекта → Add New Item…
ф. Add New Item | → Visual Studio Installed Templates → выбр. Web Form →
Name → ввести «Browse.aspx»
Language → выбр. Visual C#
13. Перейти на страницу ввода программного кода:
ф. Lab1_ASP → Browse.aspx → Source | удалить весь код, расположенный между открывающим и закрывающим тегами элемента FORM
14. Сформировать заголовок и основную структуру таблицы Browse.aspx, аналогичную
странице Default.aspx (см. пп. 3, 5, 7).
15. Создать новую таблицу во второй строке таблицы (п. 14) для вывода информации об
успеваемости студентов выбранной группы.
15.1. Создать «каркас» таблицы. Для этого между открывающим и закрывающим
тегами элемента TD (п. 3) ввести теги элемента TABLE. Задать ширину таблицы равной 500
px, выравнивание по центру и использование стиля headborder:
<TABLE width="500" align="center" class="headborder">
</TABLE>
11
15.2. Создать строку таблицы с четырьмя столбцами-заголовками информации об
успеваемости. Первый два столбца должны занимать по 30% от общей ширины таблицы, а
последние два – по 20%. К ячейкам таблицы применить стиль представления текста
headtext:
<TR>
<TD width="30%"><SPAN class="headtext">Студент</SPAN></TD>
<TD width="30%" align="center"><SPAN class="headtext">Дисциплина</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Дата</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Оценка</SPAN></TD>
</TR>
15.3. Аналогичным образом создать таблицу того же формата (п. 15.1), к которой
применен стиль textborder. Задать одну строку, аналогичную строке из п. 15.2, ячейки которой не содержат никаких данных.
15.4. Создать экземпляр класса GridView для отображения результатов запроса к базе
данных
15.4.1. Задать открывающий и закрывающий теги серверного элемента asp:GridView
с идентификатором usp, выровненного по центру, использующего стиль textborder, шириной 500 px, с «отключенными» свойствами AutoGenerateColumns и ShowHeader.
<asp:GridView ID="usp" align="center" runat="server"
cssclass="textborder" AutoGenerateColumns="false" width="500" ShowHeader="false">
</asp:GridView>
15.4.2. Определить стиль представления строк элемента GridView – tabletext:
<RowStyle CssClass="tabletext"/>
15.4.3. Определить столбцы элемента GridView и описать его привязку к данным,
полученным в результате запроса к базе данных:
<Columns>
<asp:BoundField DataField="fio" ItemStyle-Width="30%"/>
<asp:BoundField
DataField="subject"
ItemStyle-Width="30%"
ItemStyleHorizontalAlign="Center"/>
<asp:BoundField DataField="data" ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField
DataField="ocenka"
ItemStyle-Width="20%"
ItemStyleHorizontalAlign="Center"/>
</Columns>
16. Выполнить подключение библиотек для работы с базами данных, аналогично тому,
как были подключены библиотеки в странице Default.aspx (п. 10.1).
17. Создать серверную функцию Page_Load, выполняемую при загрузке страницы (см. п.
10.2).
18. Создать строковую переменную gr и записать в нее значения параметра gr, переданного
со страницы Default.aspx:
string gr = Request.QueryString["gr"].ToString();
19. Создать строковую переменную query для хранения текста запроса к базе данных, для
извлечения информации об успеваемости студентов заданной переменной gr группы:
string query = "select rtrim(fio) as fio, rtrim(subject) as subject, rtrim(ocenka) as ocenka, CONVERT(CHAR(25),data,104) as data from Student inner join Uspev on Student.zk=Uspev.student and
gr="+gr;
12
20. Создать переменную conn – экземпляр класса SqlConnection для соединения с базой
данных:
SqlConnection conn = new SqlConnection("Data
log=University;Integrated Security=True");
Source=Имя_сервера;Initial
Cata-
21. Открыть соединение с базой данных:
conn.Open();
22. Создать переменную cmd – экземпляр класса SqlCommand выполнения запроса к базе
данных:
SqlCommand cmd = new SqlCommand(query, conn);
23. Выполнить запрос и переть результат переменной reader – экземпляру класса SqlDataReader:
SqlDataReader reader = cmd.ExecuteReader();
24. Создать переменную dt – экземпляр класса DataTable и загрузить в нее данные из объекта SqlDataReader:
DataTable dt = new DataTable();
dt.Load(reader);
25. Создать переменную dv – экземпляр класса DataView с загрузкой данных из объекта
DataTable:
DataView dv = new DataView(dt);
26. Загрузить результаты запроса в объект GridView для отображения результатов на странице:
usp.DataSource = dv;
usp.DataBind();
27. Проверить работоспособность созданного Web-приложения. Для этого перейти на
страницу Lab1_ASP - Microsoft Visual Studio | Default.aspx и нажать сочетание клавиш [Ctrl+F5].
Вариант Б. Технология PHP и СУБД MySQL
1. Создать директорию, в которой будут размещены файлы Web-приложения, и назвать ее
Lab1_PHP. Разместить созданную папку по адресу C:/Program Files/EasyPHP/WWW.
2. В текстовом редакторе (например, в «Блокноте») создать новый файл и сохранить его
под именем Index.php.
3. Открыть файл Index.php в текстовом редакторе (например, в «Блокноте»).
4. Ввести открывающий и закрывающий теги корневого элемента HTML:
<HTML>
</HTML>
5. Задать заголовок страницы Index.php. Для этого между открывающим и закрывающим
тегами элемента HEAD ввести следующий код:
<TITLE>Успеваемость студентов</TITLE>
6. Создание CSS-таблицы стилей
6.1. Создать новый файл в текстовом редакторе «Блокнот»
6.2. Определить стиль представления на HTML-странице горизонтальной линии:
.line {
HEIGHT: 2px; BORDER: #cbd1e0 2px solid
13
}
6.3. Создать стиль представления на HTML-странице основной таблицы:
.pageborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid; BACKGROUND: none
transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid; COLOR: #000000; BORDERBOTTOM: #cbd1e0 2px solid
}
6.4. Построить стиль представления на HTML-странице текста «Успеваемость» в заголовке страницы:
.text1 {
FONT-SIZE: 16pt; COLOR: #0066cc; FONT-VARIANT: small-caps; FONT-FAMILY: 'Century
Schoolbook'
}
6.5. Задать стиль представления на HTML-странице текста «студентов» в заголовке
страницы:
.text2 {
FONT-SIZE: 24pt; TEXT-TRANSFORM: uppercase; COLOR: #0000cc; FONT-FAMILY: 'Century
Schoolbook'
}
6.6. Задать стиль представления текста .text3 на основе стиля .text1 с размером шрифта
13pt.
6.7. Задать стиль представления таблицы .headborder на основе стиля .pageborder с шириной правой и нижней границ, равной 2 px.
.headborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid;
BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid;
COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid
}
6.8. Аналогичным образом задать стиль представления таблицы .textborder на основе
стиля .headborder без верхней границы.
6.9. Задать стиль представления текста .headtext на основе стиля .text1 без малых прописных букв и с размером шрифта 13pt.
6.10. Задать стиль представления текста .tabletext с размером шрифта 10pt.
6.11. Сохранить файл под названием style.css и поместить его в папку images, размещенную в каталоге с Вашим веб-приложением
7. Задать ссылку на таблицу стилей в файле Index.php. Для этого между открывающим и
закрывающим тегами элемента HEAD ввести следующий код:
<LINK href="images/style.css" rel="stylesheet" type="text/css"/>
8. Задать тип содержимого для корректного отображения и передачи текстовых данных,
содержащих кириллические символы. Для этого между открывающим и закрывающим
тегами элемента HEAD ввести следующий код:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
9. Создать «тело» документа. Для этого после закрывающего тега элемента HEAD и до закрывающего тега элемента BODY ввести следующий код:
14
<BODY>
</BODY>
10. Создать форму для отправки данных серверу.
10.1. Создать серверный элемент FORM. Для этого между открывающим и закрывающим тегами элемента BODY ввести следующий код:
<FORM>
</FORM>
10.2. Задать имя формы. Для этого в качестве атрибута элемента FORM указать:
name="form1"
10.3. Указать метод (POST) формы и страницу, на которую будут направлены данные формы. Для этого в элемент FORM ввести следующие атрибуты:
action="Browse.php" method="post"
11. Сформировать структуру Web-страницы Index.php в форме одноколоночной таблицы из
двух строк
11.1. Создать «каркас» таблицы шириной 600 px, к которой применен стиль pageborder:
<TABLE class="pageborder" border="0" width="600">
</TABLE >
11.2. Создать «заголовочную» строку «Успеваемость студентов».
11.2.1. Создать новую строку таблицы. Внутри строки задать единственный столбец, ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%). Для
этого между открывающим и закрывающим тегами элемента TABLE (см. п. 7.1) ввести следующий код:
<TR>
<TD width="100%">
</TD>
</TR>
11.2.2. Ввести текстовую строку «Успеваемость» и применить к ней стиль text1:
<SPAN class="text1">Успеваемость</SPAN>
11.2.3. Ввести новую текстовую строку « студентов» с использованием стиля text2:
<BR/>
<SPAN class="text2">            студентов</SPAN>
11.2.4. Создать две горизонтальные линии и применить к ним стиль line. Ширина
второй линии – 70%, выравнивание – по левому краю:
<BR/>
<HR class="line"/><HR class="line" width="70%" align="left"/>
12. Создать управляющие элементы отправки запросов формы серверу.
12.1. Создать новую строку таблицы. Внутри строки задать единственный столбец,
ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%), а текст
внутри столбца имеет размер 17 px и выровнен по правому краю. Для этого между открывающим и закрывающим тегами элемента TABLE (см. п. 11.1) после строки из п. 11.2 ввести следующий код:
<TR>
<TD style="height: 17px; text-align: right;" width="100%">
15
</TD>
</TR>
12.2. Создать текстовый фрагмент «Выбор», к которому применен следующий
стиль: цвет текста – RGB-код #ff0000, размер шрифта – 13 pt, шрифт – Century Schoolbook:
<SPAN style="color: #ff0000; font-size:13pt; font-family: 'Century Schoolbook'">Выбор
  </SPAN>
12.3. Создать элемент управления А (гиперссылка), к которому применен следующий стиль: цвет текста – RGB-код #669999, размер шрифта – 13 pt, шрифт – Century
Schoolbook. В качестве реакции на выбор гиперссылки определить отправку формы на
сервер:
<SPAN style="color: #669999; font-size:13pt; font-family: 'Century Schoolbook'">
<A
href="javascript:document.form1.submit();"
style="text-decoration:
none">Просмотр</A></SPAN>
13. Создать столбцы-параметры запроса.
13.1. Создать новую двухколоночную таблицу в новой строке таблицы из п. 11.1.
Таблица должна быть выровнена по центру и иметь ширину 550 px.
<TR>
<TD><BR/>
<TABLE align="center" width="550">
</TABLE>
</TD>
</TR>
13.2. Создать строку для запроса параметра «Факультет».
13.2.1. Создание новой строки таблицы (п. 11.1) шириной 50 px с верхним вертикальным выравниванием:
<TR height="50px" valign="top">
</TR>
13.2.2. Создать первый столбец строки из п. 13.2.1. К тексту «Факультет» столбца
применить стиль text3:
<TD style="width: 163px"><SPAN class="text3">Факультет</SPAN></TD>
13.2.3. Создать второй столбец с элементом управления SELECT (раскрывающийся
список) шириной 350 px с именем faculty:
<TD>
<select name="faculty" style="width: 350px">
<option selected="selected">Выбор факультета...</option>
</select>
</TD>
13.3. Создать строки для запроса параметров «Специальность» и «Группа» (аналогично строке из п. 13.2). Имена соответствующих элементов управления – spec и gr.
14. Заполнить раскрывающиеся списки SELECT информацией о факультетах, специальностях и группах, полученной из базы данных.
14.1. Установить соединение с базой данных MySQL. Для этого создать сценарий PHP и
разместить его, к примеру, до всего HTML-кода страницы Index.php:
<?php
16
$link = @mysql_connect("localhost", "root") or die("Невозможно соединиться с сервером");
$db=@mysql_select_db("university") or die("Нет такой базы данных");
?>
14.2. Установить кириллическую кодировку (cp-1251) для корректной передачи и получения данных из базы данных. Для этого в сценарий PHP из предыдущего пункта ввести
следующий код:
@mysql_query("SET SESSION character_set_results = cp1251;");
@mysql_query("SET SESSION Character_set_client = cp1251;");
@mysql_query("SET SESSION Character_set_results = cp1251;");
@mysql_query("SET SESSION Collation_connection = cp1251_general_ci;");
@mysql_query("SET SESSION Character_set_connection = cp1251;");
14.3. Выполнить запрос к таблице Faculty (Факультет) для получения данных о факультетах из базы данных. Для этого ввести в сценарий PHP следующий код:
$f_query="select * from `faculty`";
$f=mysql_query($f_query);
$f_count = mysql_num_rows($f);
14.4. Аналогичным образом выполнить запросы информации о специальностях и группах.
14.5. Заполнить раскрывающийся список Faculty информацией о факультетах. Для этого в
соответствующем элементе SELECT построить цикл по результату выборки из базы данных. После закрывающего тега элемента OPTION родительского элемента SELECT ввести
следующий код:
<?php
for($i=0;$i<$f_count;$i++)
{
?>
<option value="
<?php
echo mysql_result($f,$i,`id`)
?>
">
<?php
echo mysql_result($f,$i,`name`)
?>
</option>
<?php
}
?>
14.6. Аналогичным образом заполнить списки специальностей и групп.
15. Разработать клиентский сценарий проверки введенных пользователем данных check().
15.1. Определить обработчик события отправки формы на сервер (submit). Для этого в
открывающем теге элемента FORM (из п. 10) задать атрибут:
onsubmit="javascript:check()"
15.2. Создать клиентский сценарий check(), введя следующий код между открывающим
и закрывающим тегами элемента HEAD:
<script language="javascript">
function check()
17
{
f = document.getElementById('faculty').value;
s = document.getElementById('spec').value
g = document.getElementById('gr').value;
if(f=='0' || s=='0' || g=='0')
{
alert('Один из параметров не был выбран!');
}
}
</script>
16. В папку Lab1_ASP, содержащую файлы Web-приложения, добавить новый файл с именем Browse.php.
17. Открыть файл Browse.php в текстовом редакторе (например, в «Блокноте»), ввести корневой HTML-элемент, элементы HEAD и TITLE (см. п. 4, 5), присоединить стилевой файл
CSS (см. п. 7), элемент BODY (см. п. 9).
18. Сформировать заголовок и основную структуру таблицы Browse.php, аналогичную
странице Index.php (см. пп. 11, 12).
19. Создать новую таблицу во второй строке таблицы (п. 18) для вывода информации об
успеваемости студентов выбранной группы.
19.1. Создать «каркас» таблицы. Для этого между открывающим и закрывающим
тегами элемента TD (п. 3) ввести теги элемента TABLE. Задать ширину таблицы равной 500
px, выравнивание по центру и использование стиля headborder:
<TABLE width="500" align="center" class="headborder">
</TABLE>
19.2. Создать строку таблицы с четырьмя столбцами-заголовками информации об
успеваемости. Первый два столбца должны занимать по 30% от общей ширины таблицы, а
последние два – по 20%. К ячейкам таблицы применить стиль представления текста
headtext:
<TR>
<TD width="30%"><SPAN class="headtext">Студент</SPAN></TD>
<TD width="30%" align="center"><SPAN class="headtext">Дисциплина</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Дата</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Оценка</SPAN></TD>
</TR>
19.3. Аналогичным образом создать таблицу того же формата (п. 91), к которой
применен стиль textborder. Задать одну строку, аналогичную строке из п. 19.2, ячейки которой не содержат никаких данных.
20. Выполнить запрос к базе данных на получение информации об успеваемости студенческой группы.
20.1. Установить соединение с базой данных и кодировку запросов и ответов (см. п. 14) в
сценарии PHP.
20.2. Создать переменную gr и записать в нее значения параметра gr, переданного со страницы Index.php:
$gr = $_POST['gr'];
20.3. Создать переменную usp_query для хранения текста запроса к базе данных, для извлечения информации об успеваемости студентов заданной переменной gr группы:
18
$usp_query="SELECT `fio`, `subject`, `ocenka`, `data`
FROM `uspev`, `student`
WHERE `uspev`.`student`= `student`.`zk` AND `gr`=".$gr;
20.4. Выполнить запрос к базе данных:
$usp=mysql_query($usp_query);
20.5. Вычислить количество строк, полученных в результате выполнения запроса:
$usp_count = mysql_num_rows($usp);
21. Создать таблицу для вывода на страницу информации об успеваемости заданной студенческой группы.
21.1. Создать новую таблицу, аналогичную той, что была построена в предыдущем пункте. Применить к таблице стиль textborder.
<TABLE width="500" align="center" class="textborder">
</TABLE>
21.2. Организовать цикл по результатам выборки информации об успеваемости из базы
данных. На каждой итерации цикла создавать новую строку:
<?php
for($i=0;$i<$usp_count;$i++)
{
?>
<TR>
</TR>
<?php
}
?>
21.3. В строке (п. 21.2) задать столбец для отображения информации о фамилии, имени и
отчестве (ФИО) студента (первое поле из результата запроса):
<TD width="30%">
<SPAN class="tabletext">
<?php
echo mysql_result($usp,$i,0)
?>
</SPAN></TD>
21.4. Аналогичным образом определить столбцы для представления информации о предметах (второе поле в запросе), датах (четвертое поле) и оценках (третье поле).
22. Проверить работоспособность созданного Web-приложения. Для этого в окне браузера
(к примеру, Internet Explorer) набрать HTTP-адрес виртуального каталога (например,
http://localhost/Lab1_PHP/Index.php).
19
Вариант В. Технология JSP и СУБД MySQL
1. Запустить визуальную среду Eclipse Europe
Пуск | Программы | Eclipse
2. Создать новый проект
File → New → Web → Dynamic Web Project
3. Присвоить проекту имя Lab1_JSP
name → Lab1_JSP
4. Настроить Web-сервер для нового Web-приложения
Вкладка Servers → кл. пр. кн. мыши | выбр. New → Server →
ф. New Server | выбр. Apache Tomcat Server → кн. Finish
5. Добавить в проект новую JSP-страницу
ф. Project Explorer | Lab1_JSP | кл. пр. кн. мыши → выбр. New → JSP |
ф. New JavaServer Page | File name ← Default | удалить весь код элемента HTML
6. Ввести открывающий и закрывающий теги корневого элемента HTML:
<HTML>
</HTML>
7. Задать заголовок страницы. Для этого между открывающим и закрывающим тегами элемента
HEAD ввести следующий код:
<TITLE>Успеваемость студентов</TITLE>
8. Создание CSS-таблицы стилей
8.1. Создать новый файл в текстовом редакторе «Блокнот»
8.2. Определить стиль представления на HTML-странице горизонтальной линии:
.line {
HEIGHT: 2px; BORDER: #cbd1e0 2px solid
}
8.3. Создать стиль представления на HTML-странице основной таблицы:
.pageborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid; COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid
}
8.4. Построить стиль представления на HTML-странице текста «Успеваемость» в заголовке
страницы:
.text1 {
FONT-SIZE: 16pt; COLOR: #0066cc; FONT-VARIANT: small-caps; FONT-FAMILY: 'Century Schoolbook'
}
8.5. Задать стиль представления на HTML-странице текста «студентов» в заголовке страницы:
.text2 {
FONT-SIZE: 24pt; TEXT-TRANSFORM: uppercase; COLOR: #0000cc; FONT-FAMILY: 'Century Schoolbook'
}
8.6. Задать стиль представления текста .text3 на основе стиля .text1 с размером шрифта 13pt.
8.7. Задать стиль представления таблицы .headborder на основе стиля .pageborder с шириной
правой и нижней границ, равной 2 px.
.headborder {
BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid;
BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid;
COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid
20
}
8.8. Аналогичным образом задать стиль представления таблицы .textborder на основе стиля
.headborder без верхней границы.
8.9. Задать стиль представления текста .headtext на основе стиля .text1 без малых прописных
букв и с размером шрифта 13pt.
8.10. Задать стиль представления текста .tabletext с размером шрифта 10pt.
8.11. Сохранить файл под названием style.css и поместить его в папку images, размещенную в
каталоге с Вашим веб-приложением
9. Задать ссылку на таблицу стилей в файле Default.jsp. Для этого между открывающим и закрывающим тегами элемента HEAD ввести следующий код:
<LINK href="images/style.css" rel="stylesheet" type="text/css"/>
10. Задать тип содержимого для корректного отображения и передачи текстовых данных, содержащих кириллические символы. Для этого между открывающим и закрывающим тегами элемента
HEAD ввести следующий код:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
11. Создать «тело» документа. Для этого после закрывающего тега элемента HEAD и до закрывающего тега элемента BODY ввести следующий код:
<BODY>
</BODY>
12. Создать форму для отправки данных серверу.
12.1. Создать серверный элемент FORM. Для этого между открывающим и закрывающим
тегами элемента BODY ввести следующий код:
<FORM>
</FORM>
12.2. Задать имя формы. Для этого в качестве атрибута элемента FORM указать:
name="form1"
12.3. Указать метод (POST) формы и страницу, на которую будут направлены данные формы. Для этого в элемент FORM ввести следующие атрибуты:
action="Browse.jsp" method="post"
13. Сформировать структуру Web-страницы Index.php в форме одноколоночной таблицы из двух
строк
13.1. Создать «каркас» таблицы шириной 600 px, к которой применен стиль pageborder:
<TABLE class="pageborder" border="0" width="600">
</TABLE >
13.2. Создать «заголовочную» строку «Успеваемость студентов».
13.2.1. Создать новую строку таблицы. Внутри строки задать единственный столбец, ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%). Для этого между
открывающим и закрывающим тегами элемента TABLE (см. п. 13.1) ввести следующий код:
<TR>
<TD width="100%">
</TD>
</TR>
13.2.2. Ввести текстовую строку «Успеваемость» и применить к ней стиль text1:
<SPAN class="text1">Успеваемость</SPAN>
13.2.3. Ввести новую текстовую строку « студентов» с использованием стиля text2:
<BR/>
21
<SPAN class="text2">            студентов</SPAN>
13.2.4. Создать две горизонтальные линии и применить к ним стиль line. Ширина второй
линии – 70%, выравнивание – по левому краю:
<BR/>
<HR class="line"/><HR class="line" width="70%" align="left"/>
14. Создать управляющие элементы отправки запросов формы серверу.
14.1. Создать новую строку таблицы. Внутри строки задать единственный столбец, ширина
которого совпадает с шириной самой таблицы (ширина столбца – 100%), а текст внутри столбца
имеет размер 17 px и выровнен по правому краю. Для этого между открывающим и закрывающим
тегами элемента TABLE (см. п. 13.1) после строки из п. 13.2 ввести следующий код:
<TR>
<TD style="height: 17px; text-align: right;" width="100%">
</TD>
</TR>
14.2. Создать текстовый фрагмент «Выбор», к которому применен следующий стиль: цвет
текста – RGB-код #ff0000, размер шрифта – 13 pt, шрифт – Century Schoolbook:
<SPAN style="color: #ff0000; font-size:13pt; font-family: 'Century Schoolbook'">Выбор
  </SPAN>
14.3. Создать элемент управления А (гиперссылка), к которому применен следующий
стиль: цвет текста – RGB-код #669999, размер шрифта – 13 pt, шрифт – Century Schoolbook. В качестве реакции на выбор гиперссылки определить отправку формы на сервер:
<SPAN style="color: #669999; font-size:13pt; font-family: 'Century Schoolbook'">
<A href="javascript:document.form1.submit();" style="text-decoration: none">Просмотр</A></SPAN>
15. Создать столбцы-параметры запроса.
15.1. Создать новую двухколоночную таблицу в новой строке таблицы из п. 13.1. Таблица
должна быть выровнена по центру и иметь ширину 550 px.
<TR>
<TD><BR/>
<TABLE align="center" width="550">
</TABLE>
</TD>
</TR>
15.2. Создать строку для запроса параметра «Факультет».
15.2.1. Создание новой строки таблицы (п. 13.1) шириной 50 px с верхним вертикальным
выравниванием:
<TR height="50px" valign="top">
</TR>
15.2.2. Создать первый столбец строки из п. 15.2.1. К тексту «Факультет» столбца применить стиль text3:
<TD style="width: 163px"><SPAN class="text3">Факультет</SPAN></TD>
15.2.3. Создать второй столбец с элементом управления SELECT (раскрывающийся список)
шириной 350 px с именем faculty:
<TD>
<select name="faculty" style="width: 350px">
<option selected="selected">Выбор факультета...</option>
</select>
</TD>
15.3. Создать строки для запроса параметров «Специальность» и «Группа» (аналогично
строке из п. 15.2). Имена соответствующих элементов управления – spec и gr.
22
16. Заполнить раскрывающиеся списки SELECT информацией о факультетах, специальностях и
группах, полученной из базы данных.
16.1. Создать экземпляр класса драйвера взаимодействия с СУБД MySQL
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
%>
16.2. Задать текстовую переменную для хранения параметров соединения с базой данных
String connectionURL = "jdbc:mysql:/виртуальный путь к базе
данных?user=пользователь;password=пароль";
16.3. Создать пустые объекты соединения (Connection) и запроса (Statement)
Connection conn = null;
Statement statement = null;
16.4. Установить соединение с базой данных MySQL:
conn = DriverManager.getConnection(connectionURL, "root", "");
16.5. Создать и настроить объект запроса:
statement = conn.createStatement();
conn.setReadOnly(true);
16.6. Выполнить запрос к таблице Faculty (Факультет) для получения данных о факультетах из базы
данных. Для этого ввести в сценарий PHP следующий код:
ResultSet rs = conn.createStatement().executeQuery("SELECT * FROM faculty");
16.7. Аналогичным образом выполнить запросы информации о специальностях и группах.
16.8. Заполнить раскрывающийся список Faculty информацией о факультетах. Для этого в соответствующем элементе SELECT построить цикл по результату выборки из базы данных. После
закрывающего тега элемента OPTION родительского элемента SELECT ввести следующий код:
<%
while (rs.next()) {
%>
<option value="
<%
out.println(rs.getString("id"));
%>
">
<%
out.println(rs.getString("name"));
%>
</option>
<%
}
%>
16.9. Аналогичным образом заполнить списки специальностей и групп.
17. Разработать клиентский сценарий проверки введенных пользователем данных check().
23
17.1. Определить обработчик события отправки формы на сервер (submit). Для этого в открывающем теге элемента FORM (из п. 10) задать атрибут:
onsubmit="javascript:check()"
17.2. Создать клиентский сценарий check(), введя следующий код между открывающим и закрывающим тегами элемента HEAD:
<script language="javascript">
function check()
{
f = document.getElementById('faculty').value;
s = document.getElementById('spec').value
g = document.getElementById('gr').value;
if(f=='0' || s=='0' || g=='0')
{
alert('Один из параметров не был выбран!');
}
}
</script>
18. Добавить в проект новый JSP-файл с именем Browse.jsp, ввести в него корневой HTML-элемент,
элементы HEAD и TITLE, присоединить стилевой файл CSS, элемент BODY.
19. Сформировать заголовок и основную структуру таблицы Browse.jsp, аналогичную странице Default.jsp.
20. Создать новую таблицу во второй строке таблицы (п. 19) для вывода информации об успеваемости студентов выбранной группы.
20.1. Создать «каркас» таблицы. Для этого между открывающим и закрывающим тегами
элемента TD ввести теги элемента TABLE. Задать ширину таблицы равной 500 px, выравнивание по
центру и использование стиля headborder:
<TABLE width="500" align="center" class="headborder">
</TABLE>
20.2. Создать строку таблицы с четырьмя столбцами-заголовками информации об успеваемости. Первый два столбца должны занимать по 30% от общей ширины таблицы, а последние два
– по 20%. К ячейкам таблицы применить стиль представления текста headtext:
<TR>
<TD width="30%"><SPAN class="headtext">Студент</SPAN></TD>
<TD width="30%" align="center"><SPAN class="headtext">Дисциплина</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Дата</SPAN></TD>
<TD width="20%" align="center"><SPAN class="headtext">Оценка</SPAN></TD>
</TR>
20.3. Аналогичным образом создать таблицу того же формата (п. 20), к которой применен
стиль textborder. Задать одну строку, аналогичную строке из п. 20.2, ячейки которой не содержат
никаких данных.
21. Выполнить запрос к базе данных на получение информации об успеваемости студенческой
группы.
21.1. Создать экземпляр класса драйвера, объекты соединения с базой данных и запроса. Установить соединение с базой данных и настроить объект запроса.
21.2. Создать переменную usp_query для хранения текста запроса к базе данных для извлечения
информации об успеваемости студентов заданной переменной gr группы:
String usp_query;
usp_query="SELECT fio, subject, ocenka, data
FROM uspev, student
uspev.student=student.zk AND gr="+request.getParameter("gr");
WHERE
24
21.3. Выполнить запрос к базе данных:
ResultSet rs = conn.createStatement().executeQuery(usp_query);
22. Создать таблицу для вывода на страницу информации об успеваемости заданной студенческой
группы.
22.1. Создать новую таблицу, аналогичную той, что была построена в предыдущем пункте. Применить к таблице стиль textborder.
<TABLE width="500" align="center" class="textborder">
</TABLE>
22.2. Организовать цикл по результатам выборки информации об успеваемости из базы данных.
На каждой итерации цикла создавать новую строку:
<%
while (rs.next()) {
%>
<TR>
</TR>
<%
}
%>
22.3. В строке (п. 22.2) задать столбец для отображения информации о фамилии, имени и отчестве
(ФИО) студента (первое поле из результата запроса):
<TD width="30%">
<SPAN class="tabletext">
<%
out.println(rs.getString("fio"));
%></SPAN></TD>
22.4. Аналогичным образом определить столбцы для представления информации о предметах, датах и оценках.
23. Проверить работоспособность созданного Web-приложения. Для этого в окне визуальной среды Eclipse выбрать пункт меню
Project → Run as… → Run on Server
25
5. Контрольные вопросы
1. Что такое Web-приложение?
2. Каковы основные компоненты архитектуры Web-приложения?
3. Что представляют собой статические и динамические Web-сайты?
4. Что такое сценарии?
5. Какие виды сценариев Вы знаете?
6. В чем отличие серверных элементов управления от клиентских?
7. Какие технологии программирования серверных сценариев Вы знаете? В чем их отличие?
6. Содержание и оформление отчета
Отчет должен содержать:
– титульный лист, название и цель работы;
– вариант задания;
– листинг программного кода;
– скриншоты результатов работы Web-приложения с различными вариантами запросов;
– выводы по работе.
26