Создание простого веб-приложения с использованием базы данных MySQL. Учебное руководство по среде IDE NetBeans.
Создание простого веб-приложения с использованием базы данных MySQL
Автор: Трой Джуниперо (Troy Giunipero)
В этом документе описана процедура создания простого веб-приложения, которое подключается к серверу базы данных MySQL. Здесь также рассмотрены основные идеи и технологии веб-разработки, такие какJavaServer Pages (JSP), библиотека стандартных тегов JavaServer Pages (JSTL), интерфейс API связи с базами данных Java (JDBC) и двухуровневая архитектура между клиентом и сервером. Этот учебный курс разработан для начинающих разработчиков, обладающих базовыми знаниями в области веб-разработок и желающих применить свои знания к базе данных MySQL.
MySQL является популярной системой управления базами данных с открытым кодом, которая обычно используется в веб-приложениях благодаря своей скорости, гибкости и надежности. В MySQL для доступа к данным в базах данных и их обработки используется язык SQL (структурированный язык запросов; Structured Query Language).
Этот учебный курс продолжает учебный курс Подключение к базе данных MySQL и предполагает, что база данных MyNewDatabase уже создана и зарегистрирована для подключения в среде IDE NetBeans. Табличные данные, используемые в этом учебном курсе, содержатся в ifpwafcad.sql и также необходимы для работы с этим учебным курсом. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. При необходимости сохраните этот файл на компьютер, затем откройте его в среде IDE NetBeans и запустите его в базе данных MySQL с именем MyNewDatabase.
С помощью пакета загрузки Java для среды IDE NetBeans можно выполнить установку сервера GlassFish. Для работы с данным учебным курсом требуется сервер GlassFish.
Драйвер JDBC MySQL Connector/J , необходимый для связи между платформами Java и протоколом базы данных MySQL, включен в среду IDE NetBeans.
С помощью двухуровневой архитектуры, в которой клиент взаимодействует с сервером напрямую, можно создать простое веб-приложение. В рамках данного учебного курса веб-приложение Java взаимодействует напрямую с базой данных MySQL с использованием API связи с базами данных Java. В сущности, именно драйвер MySQL Connector/J JDBC обеспечивает обмен данными между кодом Java, распознанным сервером приложения (GlassFish), и любым содержимым на SQL, языке, понятном для сервера базы данных (MySQL).
Приложение, создаваемое в этом учебном курсе, предполагает создание двух страниц JSP. На каждой такой странице с помощью HTML и CSS реализован простой интерфейс, и применяется технология JSTL для выполнения логики, напрямую запрашивающей базу данных с вставкой извлеченных данных на двух страницах. В базе данных MySQL MyNewDatabase содержатся две таблицы базы данных Subject и Counselor, которые были созданы при работе с учебным курсом Подключение базы данных MySQL. Рассмотрим следующий двухуровневый сценарий.
Страница приветствия index.jsp представляется пользователю с помощью простой формы HTML. При запросе обозревателемindex.jsp код JSTL на странице инициирует запрос в MyNewDatabase. Выполняется извлечение данных из таблицы Subject со вставкой их на страницу перед ее передачей в обозреватель. При передаче данных о выборе пользователя в форме HTML на странице приветствия инициируется запрос страницы ответов (response.jsp). И снова код JSTL на странице инициирует запрос в MyNewDatabase. На этот раз данные извлекаются из обеих таблиц - Subject и Counselor. После чего выполняется их вставка на страницу, что позволяет пользователю просматривать данные в зависимости от вариантов выбора при возврате страницы в обозреватель.
Для реализации описанного выше сценария необходимо разработать простое приложение для организации IFPWAFCAD Международной ассоциации по консультированию и развитию для бывших профессиональных борцов.
index.jsp
response.jsp
Создание нового проекта
Сначала необходимо создать новый веб-проект в среде IDE:
Выберите "Файл > Новый проект" (CTRL+SHIFT+N; ⌘+SHIFT+N в Mac ОС) в главном меню. Выберите категорию "Java Web", а затем выберите "Веб-приложение". Нажмите кнопку "Далее".
С помощью этого мастера можно создать пустое веб-приложение в стандартном проекте IDE. В стандартном проекте для компиляции, развертывания и выполнения приложения используется созданный в среде IDE сценарий сборки проекта Ant.
В поле "Имя проекта" введите "IFPWAFCAD". Также укажите местоположение проекта на компьютере. По умолчанию проекты в среде IDE помещаются в папку NetBeansProjects в домашнем каталоге. Нажмите кнопку "Далее".
В панели "Сервер и параметры" укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.
Примечание. Сервер GlassFish отображается в раскрываающемся списке "Сервер", если установлена версия среды IDE NetBeans для Java. Поскольку сервер GlassFish включен в загрузку, он регистрируется в среде IDE автоматически. Для использования в проекте другого сервера нажмите кнопку "Добавить" рядом с полем с раскрывающимся списком "Сервер" и зарегистрируйте другой сервер в среде IDE. Работа с другими серверами, помимо GlassFish в рамках данного учебного курса не рассматривается.
В поле "Версия Java EE" выберите Java EE 5.
Для веб-проектов Java EE 6 использование дескриптора развертывания web.xml не требуется. Шаблон проекта NetBeans не содержит файл web.xml в проектах Java EE 6. Однако в данном учебном курсе рассматривается процесс объявления источника данных в дескрипторе развертывания. Специфичные функции Java EE 6 не требуются, поэтому можно установить версию проекта Java EE 5.
Примечание. Также можно указать версию проекта Java EE 6 и создать дескриптор развертывания web.xml. В мастере создания файла выберите категорию "Web", а затем выберите "Стандартный дескриптор развертывания".
Нажмите кнопку "Готово". Создается шаблон проекта для всего приложения и в редакторе открывается пустая страница JSP (index.jsp). Файл index.jspслужит в приложении страницей приветствия. Новый проект структурирован согласно указаниям Sun Java BluePrints.
Подготовка веб-интерфейса
Начните с подготовки страницы приветствия (index.jsp) и страницы ответов (response.jsp). На странице приветствия реализована форма HTML для сбора пользовательских данных. На обеих страницах для просмотра структурированных данных используется таблица HTML. В этом разделе также рассматривается процесс создания таблицы стилей, которая расширяет внешний вид обеих страниц.
Убедитесь, что в редакторе открыта страница index.jsp. Если она еще не открыта, дважды щелкните index.jsp из "IFPWAFCAD" > "Веб-страницы" в окне "Проекты".
В редакторе измените текст между тегами <title> на Домашняя страница IFPWAFCAD.
Измените текст между тегами <h1> на Добро пожаловать в IFPWAFCAD, Международную ассоциацию по консультированию и развитию для бывших профессиональных борцов!
Откройте палитру среды IDE, выбрав в главном меню "Окно" > "Палитра" (CTRL+SHIFT+8; ⌘+SHIFT+8 в ОС Mac). Наведите курсор на значок "Таблица" в категории "HTML" и обратите внимание на то, что отображается фрагмент кода для элемента по умолчанию.
Для настройки палитры в соответствии с собственными требованиями в контекстном меню в окне "Палитра" выберите "Показать крупные значки" и "Скрыть имена элементов" для получения просмотра, как показано на рисунке выше.
Установите курсор сразу же после тегов <h1>. (Именно в этом месте будет внедрена новая таблица HTML.) Далее в окне "Палитра" дважды щелкните значок "Таблица".
В появившемся диалоговом окне "Вставка таблицы" укажите следующие значения и затем нажмите кнопку "ОК":
Рядов: 2
Столбцов: 1
Размер границы: 0
Код таблицы HTML создан и добавлен на страницу.
Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено полужирным шрифтом):
<table border="0">
<thead>
<tr>
<th>IFPWAFCAD предлагает квалифицированное консультирование по широкому диапазону вопросов.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Для просмотра подробных сведений о контактных данных сертифицированных бывших профессиональных борцов IFPWAFCAD
в вашей области выберите тему ниже:
</td>
</tr>
Для нижней строки таблицы вставьте форму HTML. Для этого поставьте курсор между второй парой тегов <td>, затем дважды щелкните значок формы HTML в окне "Палитра". В диалоговом окне "Вставка формы" введите response.jsp в текстовом поле "Действие" и нажмите кнопку "ОК".
<tr>
<td>
<form action="response.jsp">
<strong>Select a subject:</strong>
</form>
</td>
</tr>
Доступ ко всем элементам в окне "Палитра" можно получить с помощью поддержки дополнения кода в среде IDE. Для использования дополнения кода при работе в редакторе нажмите CTRL+ПРОБЕЛ. В следующих двух шагах с помощью дополнения кода добавляется раскрывающийся список и кнопка отправки данных.
В редакторе для добавления пустой строки после нового содержимого нажмите клавишу ВВОД, а затем нажмите CTRL+ПРОБЕЛ для активации поддержки дополнения кода в среде IDE.
Выберите раскрывающийся список.
В появившемся диалоговом окне "Вставка раскрывающегося списка" введите subject_id в текстовом поле "Имя" и нажмите кнопку "ОК". Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.
Количество параметров для раскрывающегося списка не имеет значения. Позже в этом учебном курсе будет показано добавление тегов JSTL для динамического создания на основе данных, полученных из таблицы базы данных "Subject".
Добавьте элемент кнопки отправки данных () сразу же после нового раскрывающегося списка. Для этого можно использовать окно "Палитра" или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне "Вставка кнопки" в текстовых полях "Подпись" и "Имя" введите Отправить и нажмите кнопку ОК.
Для форматирования кода в контекстном меню редактора выберите "Формат" (ALT+SHIFT+F; CTRL+SHIFT+F для Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:
<body>
<h2>Добро пожаловать в <strong>IFPWAFCAD</strong>, Международную ассоциацию
по консультированию и развитию для бывших профессиональных борцов!
</h2>
<table border="0">
<thead>
<tr>
<th>IFPWAFCAD предлагает квалифицированное консультирование по широкому диапазону вопросов.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Для просмотра подробных сведений о контактных данных сертифицированных бывших
профессиональных борцов IFPWAFCAD в вашей области выберите тему ниже:
</td>
</tr>
<tr>
<td>
<form action="response.jsp">
<strong>Выбрать тему:</strong>
<select name="subject_id">
<option></option>
</select>
<input type="submit" value="submit" name="submit" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
Для просмотра страницы в обозревателе в контекстном меню редактора выберите "Выполнить файл" (SHIFT+F6; Fn+SHIFT-F6 для Mac). После этого страница JSP будет автоматически скомпилирована и развернута на сервере. Открывается обозреватель по умолчанию, и в нем выводится страница из местоположения, где она развернута.
Создание страницы ответов
Для подготовки интерфейса для страницы response.jsp сначала необходимо создать файл в проекте. Обратите внимание на то, что большая часть содержимого, отображаемого на странице, создана динамически с помощью технологии JSP. Поэтому в следующих шагах будет необходимо добавить метки-заполнители, которые позже будут заменены кодом JSP.
Щелкните правой кнопкой мыши узел проекта "IFPWAFCAD" в окне "Проекты" и выберите "Создать > JSP". Откроется диалоговое окно "Новый файл JSP".
В поле "Имя файла JSP" введите response. Обратите внимание на то, что в настоящий момент для поля "Расположение" выбран каталог "Веб-страницы", это означает, что файл будет создан в каталоге проекта web. Это то же местоположение, что и для страницы приветствия index.jsp.
Примите остальные значения по умолчанию и нажмите кнопку "Готово". В редакторе выполняется создание и открытие шаблона новой страницы response.jsp. Новый узел JSP также отображается в каталоге "Веб-страницы" в окне "Проекты".
В редакторе измените заголовок на IFPWAFCAD - {местозаполнитель}
Удалите строку <h1>Hello World!</h1> строка между тегами <body>. Скопируйте и вставьте в тело страницы следующую таблицу HTML:
Для просмотра страницы в обозревателе в контекстном меню редактора выберите "Выполнить файл" (SHIFT+F6; Fn+SHIFT-F6 для Mac). Выполняется компиляция и развертывание страницы на сервере GlassFish с последующим открытием в обозревателе по умолчанию.
Создание таблицы стилей
Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы HTML на страницах index.jsp и response.jsp.
Нажмите кнопку "Создать файл" () на главной панели инструментов в среде IDE для вызова мастера создания файла. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".
Введите style в поле "Имя файла CSS" и нажмите кнопку "Готово". Среда IDE создает пустой файл CSS и располагает его в том же местоположении проекта, что и index.jsp и response.jsp. Обратите внимание на то, что узел для style.css отображается теперь внутри проекта в окне "Проекты", а файл открывается в редакторе.
В редакторе добавьте следующее содержимое к файлу style.css:
Для быстрого перехода между открытыми в редакторе файлами нажмите CTRL+TAB, а затем выберите требуемый файл.
Поддержка CSS в NetBeans
При работе с CSS в среде IDE можно использовать возможности "Конструктор стилей CSS" и "Предварительный просмотр". Вместе эти средства предоставляют мощную поддержку при создании правил стиля и просмотре элементов с атрибутами стиля.
Например, поместите курсор внутри правила h1 в style.css, затем откройте окно "Предварительный просмотр CSS" ("Окно > Прочее > Предварительный просмотр CSS"):
Окно "Предварительный просмотр CSS" демонстрирует визуализацию элемента в обозревателе. Также следует отметить, что предварительный просмотр автоматически обновляется при изменении правила, предоставляя тем самым текстовое описание элементов стиля из среды IDE в реальном времени.
Подготовка средств обмена данными между приложениями и базой данных
Наиболее эффективным способом реализации соединения между сервером и базой данных является настройка пула подключений базы данных. Создание нового подключения для каждого запроса клиента может занимать много времени, особенно для приложений, постоянно получающих огромное количество запросов. Во избежание этого создается и поддерживается множество подключений, организованных в виде пула подключений. Входящие запросы, требующие доступа к данным приложения, используют уже созданное подключение из пула. Аналогичным образом, когда запрос завершен, подключение не закрывается, а возвращается в пул.
После подготовки источника данных и пула подключений для сервера необходимо определить в приложении необходимость использования источника данных. Как правило, для этого создается запись в дескрипторе развертывания приложения web.xml. Наконец, необходимо проверить доступность для сервера драйвера базы данных (JDBC MySQL Connector/J).
Примечание. Для дальнейшей работы необходимо убедиться в том, что база данных MySQL с именем MyNewDatabase настроена корректно и содержит данные примера из ifpwafcad.sql. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. Если это не было выполнено ранее, или с этим заданием возникли сложности, то прежде чем продолжить учебный курс, обратитесь к разделу Подключение к базе данных MySQL.
Помимо этого для создания источника данных и работы с сервером GlassFish в рамках данного учебного курса необходимо защитить базу данных паролем. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.
В качестве пароля в этом учебном курсе используется nbuser. Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:
shell> mysql -u root
mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
-> WHERE User = 'root';
mysql> FLUSH PRIVILEGES;
Настройка источника данных JDBC и пула подключений
Сервер GlassFish Server Open Source Edition содержит библиотеку формирования пула подключений к базе данных (DBCP) с функцией формирования пула подключений в прозрачном для разработчика режиме. Для этого необходимо настроить для сервера источник данныхJDBC (связь с базами данных Java) для использования в приложении при формировании пула подключений.
Источник данных можно настроить непосредственно на консоли администратора сервера GlassFish или, как описано ниже, объявить необходимые для приложения ресурсы в файле sun-resources.xml. При развертывании приложения сервер считывает объявления ресурсов и создает требуемые ресурсы.
Далее рассматривается процесс объявления пула подключений и источника данных, использующего этот пул. Оба действия можно выполнить с помощью мастера ресурсов JDBC NetBeans.
Нажмите кнопку "Создать файл" () на главной панели инструментов в среде IDE для вызова мастера создания файла. Выберите категорию сервера GlassFish, затем выберите "Ресурс JDBC" и нажмите кнопку "Далее".
В шаге 2, в области "Общие атрибуты" выберите параметр "Создать новый пул соединений JDBC", а затем в текстовом поле "Имя JNDI" введите jdbc/IFPWAFCAD.
Источник данных JDBC использует JNDI. В интерфейсе API JNDI предоставляется единый для всех приложений способ поиска источников данных и получения доступа к ним. Дополнительные сведения приведены в Учебном курсе по JND.
Дополнительно можно добавить описание источника данных. Например, укажите Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD.
Нажмите кнопку "Далее". После этого еще раз нажмите кнопку "Далее" и пропустите шаг 3, "Дополнительные свойства".
В шаге 4 укажите имя пула подключений JDBC IfpwafcadPool. Убедитесь, что выбран параметр "Извлечь из существующего соединения" и выберите jdbc:mysql://localhost:3306/MyNewDatabase из раскрывающегося списка.
Примечание. Мастер обнаружит все подключения к базе данных, настроенные в среде IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных MyNewDatabase. Можно проверить, какие подключения были созданы, открыв окно "Службы" (CTRL+5; ⌘+5 для Mac), и выполнив поиск узлов подключения () в категории "Databases".
Нажмите кнопку "Далее". В шаге 5 обратите внимание на то, что в среде IDE информация извлекается из подключенной базы данных, указанной в предыдущем шаге с установка свойств "name-value" для нового пула подключений.
Нажмите кнопку "Готово". Мастер ресурсов создает файл glassfish-resources.xml, который содержит записи для источника данных и указанный пул подключения.
В окне проектов можно открыть вновь созданный файл "Ресурсы сервера" > glassfish-resources.xml. Заметим, что внутри тегов <resources> объявленные источник данных и пул подключения содержат значения, указанные ранее.
Примечание. В среде IDE NetBeans версии 6.9 и более ранних имя созданного файла — sun-resources.xml.
Для подтверждения регистрации нового источника данных и пула подключения на сервере GlassFish, можно развернуть проект на сервере, затем расположить ресурсы в окне "Службы" среды IDE.
В окне "Проекты" щелкните правой кнопкой мыши узел проекта "IFPWAFCAD" и выберите "Развернуть". Запустится сервер, если это не было выполнено ранее, и проект будет скомпилирован и развернут на этом сервере.
Откройте окно "Службы" (CTRL+5; ⌘+5 в системе Mac OS) и разверните узлы "Серверы" > "GlassFish" > "Ресурсы" > "JDBC" > "Ресурсы и пулы подключения JDBC". Проверьте, что теперь отображаются новый источник данных и пул подключений:
Обращение к источнику данных из приложения
Необходимо создать ссылку на только что созданный в веб-приложении ресурс JDBC. Для этого можно создать запись в дескрипторе развертывания приложения web.xml.
Дескрипторы развертывания являются текстовыми файлами на основе XML, содержащими информацию о развертывании приложения в определенной среде. Например, они обычно используются для указания параметров контекста приложения и поведенческих шаблонов, настроек безопасности, а также отображений для сервлетов, фильтров и прослушивающих процессов.
Примечание. Если при создании проекта в качестве версии Java указана Java EE 6, необходимо создать дескриптор развертывания, выбрав "Веб" > "Стандартный дескриптор развертывания" в мастере создания файла.
Произведите следующие действия, чтобы поместить ссылку на источник данных в дескрипторе развертывания приложения.
В окне "Проекты" разверните папку "Файлы настройки" и дважды щелкните web.xml. В главном окне среды IDE откроется графический интерфейс для файла.
Откройте вкладку "Ссылки" в верхней области экрана редактора.
Разверните заголовок "Ссылки на ресурсы" и нажмите кнопку "Добавить", чтобы открыть диалог "Добавление ссылки на ресурс".
В поле "Имя ресурса" введите имя ресурса, указанное выше при настройке источника данных для сервера (jdbc/IFPWAFCAD). Поле "Описание" является необязательным, но можно добавить удобочитаемое описание ресурса, например, База данных для приложения "IFPWAFCAD". Нажмите кнопку "ОК".
Нажмите кнопку "ОК". Новый ресурс теперь перечислен в списке под заголовком "Ссылки на ресурсы".
Для проверки того, что ресурс теперь добавлен к файлу web.xml откройте вкладку "XML" в верхней области экрана редактора. Заметим, что теперь в код включены следующие теги <resource-ref>.
<resource-ref>
<description>База данных для приложения IFPWAFCAD</description>
<res-ref-name>jdbc/IFPWAFCAD</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
<res-sharing-scope>Shareable</res-sharing-scope>
</resource-ref>
Добавление файла JAR драйвера базы данных к серверу
Добавление файла JAR драйвера базы данных является следующим шагом, необходимым для обеспечения взаимодействия сервера с базой данных. Необходимо поместить каталог установки драйвера базы данных и скопировать файл mysql-connector-java-5.1.6.x-bin.jar из корневого каталога драйвера в папку библиотеки на используемом сервере. Управление сервером в среде IDE при развертывании может обнаружить, добавлен ли файл JAR, и если нет, выполняет это автоматически.
Для демонстрации этого процесса, откройте окно "Серверы" (Выберите меню "Сервис" > "Серверы"). В среде IDE предоставляется параметр "Развертывание драйвера JDBC". Если параметр включен, он запускает проверку для определения, требуются ли драйверы для развернутых на сервере приложений. В случае MySQL, если драйвер требуется, но он отсутствует, включенный драйвер среды IDE развертывается в соответствующем месте на сервере.
Для вызова окна "Серверы" выберите в меню "Сервис > "Серверы". На левой панели выберите "GlassFish".
В главном окне выберите параметр "Включить развертывание драйвера JDBC".
Перед закрытием окна запомните путь в текстовом поле папки "Домены". При подключении к серверу GlassFish в среде IDE фактически подключение выполняется к экземпляру сервера приложений. Каждый экземпляр запускает приложения в уникальном домене, а в поле "Имя домена" указано имя используемого сервером домена. Как видно на рисунке выше, файл JAR драйвера должен находиться в domain1. Это домен по умолчанию, созданный при установке сервера GlassFish.
Нажмите кнопку "Закрыть" для закрытия окна "Серверы".
На компьютере перейдите к каталогу установки GlassFish и войдите в подпапку domains > domain1 > lib. Поскольку проект IFPWAFCAD уже должен быть развернут на сервере, должен отображаться файл mysql-connector-java-5.1.6-bin.jar. Если файл JAR драйвера не отображается, выполните следующий шаг.
Разверните проект на сервере. В окне "Проекты" среды IDE в контекстном меню узла проекта выберите "Развернуть". Ход выполнения можно видеть в окне "Вывод" среды IDE (CTRL+4; ⌘+4 для Mac). В окне "Вывод" указывается, что драйвер MySQL развернут в местоположении на сервере GlassFish.
При возврате в подпапку domain1/lib на компьютере видно, что файл mysql-connector-java-5.1.6.x-bin.jar добавлен автоматически.
Добавление динамической логики
Вернемся к местозаполнителям index.jsp и response.jsp, созданным выше при работе с учебным курсом. Теперь можно реализовать код JSTL для динамического (т. е. на основе пользовательского ввода) создания содержимого на страницах. Для этого выполните следующие три задания.
Добавление библиотеки JSTL к пути к классам проекта
Для доступа к данным из базы данных и их просмотра используйте Библиотеку стандартных тегов JavaServer Pages (JSTL). Сервер GlassFish по умолчанию содержит библиотеку JSTL. Для проверки разверните узел IFPWAFCAD "Библиотеки" > "Сервер GlassFish" в окне "Проекты" и найдите файл jstl-impl.jar. Поскольку библиотеки сервера GlassFish добавлены в путь к классам проекта по умолчанию, выполнять шаги для этой задачи не требуется.
JSTL предоставляет четыре основные функциональные области. Это следующие значения:
core: базовые, структурные задачи, такие как итерации и условные выражения для контроля потока операций
fmt: форматирование сообщений интернационализации и локализации
sql: простой доступ к базе данных
xml: обработка содержимого XML
Основное внимание в данном учебном курсе уделяется библиотекам тегов core и sql.
Теперь можно реализовать код для динамического извлечения и просмотра данных на каждой странице. Для обеих страниц требуется реализация запроса SQL с использованием источника данных, созданного выше в рамках данного учебного курса.
В среде IDE предоставляется несколько специфичных для базы данных фрагментов JSTL, доступных для выбора в окне "Палитра" (CTRL+SHIFT+8; ⌘+SHIFT+8 для Mac).
Помимо этого доступ к элементам окна "Палитра" можно получить путем нажатия CTRL+ПРОБЕЛ в редакторе. Для фильтрации элементов базы данных удерживайте нажатой сочетание клавиш CTRL+ПРОБЕЛ и введите "db".
index.jsp
Для динамического отображения содержимого формы на странице index.jsp необходимо получить доступ ко всем именам из таблицы базы данных "Subject":
Наведите курсор мыши на элемент "Отчет БД" в окне "Палитра".
Для элемента "Отчет БД" при создании запроса SQL используется тег <sql:query>, после чего с помощью тега <c:forEach> обрабатывается resultset запроса, а затем выполняется вывод извлеченных данных.
Установите курсор над объявлением <%@page ... %> (строка 7) и дважды щелкните элемент "Отчет БД" в окне "Палитра". В открывшемся диалоговом окне введите следующие подробные сведения:
Имя переменной:subjects
Контекст:страница
Источник данных:jdbc/IFPWAFCAD
Оператор запроса:SELECT subject_id, name FROM Subject
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : index
Created on : Dec 22, 2009, 7:39:49 PM
Author : nbuser
--%>
<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
SELECT subject_id, name FROM Subject
</sql:query>
<table border="1">
<!-- column headers -->
<tr>
<c:forEach var="columnName" items="${subjects.columnNames}">
<th><c:out value="${columnName}"/></th>
</c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${subjects.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Обратите внимание на то, что в среде IDE автоматически добавлены директивы taglib, необходимые для тегов JSTL, используемых в созданном содержимом, (<sql:query> и <c:forEach>). Директива taglib объявляет, что на странице JSP используются пользовательские теги (JSTL), указывает библиотеку тегов, которая их определяет, а также префикс тега.
Запустите проект, чтобы проверить его отображение в обозревателе. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Выполнить".
При выборе "Выполнить", IDE развертывает проект на сервере GlassFish, страница индексов компилируется в сервлет, а страница приветствия открывается в обозревателе по умолчанию. Код, созданный на основе элемента "Отчет БД", определяет следующую таблицу на странице приветствия.
Как видно, с помощью элемента "Отчет БД" можно быстро протестировать подключение к базе данных и просмотреть табличные данные из базы данных в обозревателе. Это особенно рекомендуется при создании прототипов.
В следующих шагах рассматривается интеграция созданного кода в раскрывающийся список HTML, созданный выше при работе с данным учебным курсом.
Проверьте данные столбцов в созданном коде. Используется два тега <c:forEach>, причем один из них вставляется в другой. В результате контейнер JSP (сервер GlassFish) выполняет цикл по всем строкам таблицы с циклическим прохождением всех столбцов. Аналогично отображаются данные для всей таблицы.
Интегрируйте теги <c:forEach> в форму HTML следующим образом. Значение каждого элемента изменяется на subject_id, а текст вывода - на name, как записано в базе данных. (Изменения выделяются полужирным шрифтом).
Во всех случаях теги <c:forEach> циклически обрабатывает значения subject_id и name из запроса SQL со вставкой каждой пары в теги HTML <option>. Таким образом раскрывающийся список формы заполняется данными.
Удалите таблицу, созданную из элемента "Отчет БД". (Удаление показано ниже перечеркнутым текстом.)
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : index
Created on : Dec 22, 2009, 7:39:49 PM
Author : nbuser
--%>
<sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
SELECT subject_id, name FROM Subject
</sql:query>
<table border="1">
<!-- column headers -->
<tr>
<c:forEach var="columnName" items="${subjects.columnNames}">
<th><c:out value="${columnName}"/></th>
</c:forEach>
</tr>
<!-- column data -->
<c:forEach var="row" items="${subjects.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Сохраните изменения (CTRK+S; ⌘+S в Mac OS).
Обновите страницу приветствия проекта в обозревателе.
Заметим, что раскрывающийся список в обозревателе теперь содержит названия тем, полученные из базы данных.
Заметим, что не требуется заново разворачивать поект. По умолчанию, в проекте доступна функция "компиляция при сохранении". Это означает, что при изменении и сохранении файла он автоматически компилируется и развёртывается, и нет необходимости перекомпилировать весь проект. Функцию компиляции при сохранении можно отключать в категории "Компиляция" в окне проекта "Свойства".
response.jsp
На странице ответов предоставляются подробные сведения о консультанте по теме, выбранной на странице приветствия. Созданный запрос должен содержать запись консультанта, идентификатор которого counselor_id соответствует значению counselor_idfk из выбранной записи темы.
Установите курсор над объявлением <%@page ... %> (строка 7), введите db и нажмите CTRL+ПРОБЕЛ. Выберите запрос к БД. (Обратитесь к приведенной выше рекомендации по дополнению кода).
В открывшемся диалоговом окне введите следующие подробные сведения:
Имя переменной:counselorQuery
Контекст:страница
Источник данных:jdbc/IFPWAFCAD
Оператор запроса:SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
Нажмите кнопку "ОК". В файле response.jsp создается следующее содержимое. Новое содержимое выделено полужирным шрифтом.
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : response
Created on : Dec 22, 2009, 8:52:57 PM
Author : nbuser
--%>
<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
SELECT * FROM Subject, Counselor
WHERE Counselor.counselor_id = Subject.counselor_idfk
AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
</sql:query>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Обратите внимание на то, что в среде IDE автоматически добавлена директива taglib для тега <sql:query>. Также отметьте, что непосредственно в запросе использовался тег <sql:param>. Поскольку для этого запроса используется значение subject_id, отправленное с index.jsp, извлечь это значение можно с помощью оператора EL (язык выражений) в форме ${param.subject_id}, а затем передать его для тега <sql:param>. В этом случае его можно использовать вместо вопросительного знака SQL (?) во время выполнения.
Используйте тег <c:set> для установки переменной, соответствующей первой записи (строке) resultset, возвращенного из запроса. Новое содержимое выделено полужирным шрифтом.
<sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
SELECT * FROM Subject, Counselor
WHERE Counselor.counselor_id = Subject.counselor_idfk
AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
</sql:query>
<c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>
Несмотря на то, что возвращенный из запроса resultset должен содержать только одну запись, этот шаг является обязательным, поскольку для страницы необходимо обеспечить доступ к значениям в записи с помощью операторов EL (язык выражений). Вспомните, что на странице index.jsp можно было получить доступ к значениям из resultset просто посредством тега <c:forEach>. Однако тег <c:forEach> функционирует путем настройки переменной для строк из запроса, что позволяет извлекать значения путем включения переменной строки в операторы EL.
Добавьте директиву taglib для базовой библиотеки JSTL файла. Это обеспечит распознавание тега <c:set>. Новое содержимое выделено полужирным шрифтом.
В разметке HTML замените все местозаполнители кодом операторов EL с отображением данных из переменной counselorDetails. (Изменения выделены ниже полужирным шрифтом):
Процесс создания приложения завершен. Попробуйте снова запустить его для просмотра результата в обозревателе. Обратите внимание на то, что благодаря функции NetBeans "Компиляция при сохранении" специально выполнять компиляцию или повторное развертывание приложения не требуется. При выполнении проекта развертывание гарантированно содержит самые последние изменения.
Нажмите кнопку "Выполнить проект" () на главной панели инструментов. В обозревателе по умолчанию среды IDE открывается страница index.jsp..
Когда в обозревателе отображена страница index.jsp, выберите тему из раскрывающегося списка и нажмите кнопку submit. Выполняется переадресация на страницу response.jsp, отображающую подробные сведения в соответствии с выбором.
Это заключительный раздел учебного курса "Создание простого веб-приложения, использующего базу данных MySQL" В этом документе описана процедура создания простого веб-приложения с подключением к базе данных MySQL. Здесь также рассматривается процесс создания приложения с помощью базовой двухуровневой архитектуры при использовании технологий JSTL и JSP для доступа к данным с динамическим просмотром.
Устранение проблем
Большинство проблем в приложении из учебного курса возникают по причине сложностей процесса обмена данными между сервером GlassFish Server Open Source Edition и сервером базы данных MySQL. В случае некорректного отображения приложения или генерации ошибки сервера рекомендуется выполнить следующие проверки.
В среде IDE в окне "Службы" (CTRL+5; ⌘+5 для Mac) проверьте функционирование сервера MySQL, а также доступность MyNewDatabase и наличие в ней соответствующих табличных данных.
Для подключения к серверу базы данных MySQL в контекстном меню узла "Сервер MySQL" выберите "Подключить".
Если узел подключения () для MyNewDatabase в окне "Службы" не отображается, можно создать подключение путем выбора команды "Подключить с помощью" из контекстного меню узла драйвера MySQL (). В появившемся диалоговом окне укажите требуемые подробные сведения.
Поля в диалоговом окне "Новое подключение к базе данных" зеркально отражают строку URL в параметре "Показать URL JDBC". Таким образом, если известен URL (например, jdbc:mysql://localhost:3306/MyNewDatabase), можно вставить его в поле "Показать URL JDBC". При этом остальные поля заполняются автоматически.
Для проверки наличия таблиц Subject и Counselor с данными примера разверните узел подключения MyNewDatabase () и найдите узел каталога MyNewDatabase (). Для просмотра существующих таблиц разверните узел каталога. Для просмотра табличных данных выберите в контекстном меню таблицы "Просмотреть данные".
Существуют ли на сервере пул подключений и источник данных?
После развертывания приложения на сервере GlassFish файл проекта glassfish-resources.xml должен содержать инструкции для сервера по созданию ресурсов и пула подключения JDBC. Их наличие можно проверить в узле "Серверы" в окне "Службы".
Разверните узел "Серверы" > "Сервер GlassFish" > "Ресурсы". Разверните узел "JDBC Resources" (Ресурсы JDBC) , чтобы увидеть источник данных jdbc/IFPWAFCAD, созданный из файла glassfish-resources.xml. Разверните узел "Пул подключения", чтобы увидеть пул подключения IfpwafcadPool, созданный из файла glassfish-resources.xml. Подробное описание приведено выше.
Доступен ли MySQL Connector/драйвер J для сервера GlassFish?
Найдите на компьютере папку установки сервера GlassFish и откройте подпапку GlassFish domains/domain1/lib. В ней должен находиться файл mysql-connector-java-5.1.6-bin.jar.
Защищена ли база данных паролем?
Необходимо защитить базу данных паролем, чтобы при выполнении упражнений данного учебного курса источник данных сервера GlassFish работал корректно. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.
Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:
shell> mysql -u root
mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
-> WHERE User = 'root';
mysql> FLUSH PRIVILEGES;
Корректно ли установлены значения свойств пула подключений?
Проверьте правильность работы пула подключений для сервера.
Откройте окно "Службы" (CTRL+5; ⌘+5 для Mac) и разверните узел "Серверы.
В контекстном меню узла "Сервер GlassFish" выберите "Просмотр консоли администратора".
Введите имя пользователя/пароль по умолчанию admin/adminadmin.
В дереве в левой области консоли разверните узел "Ресурсы" > "JDBC" > "Пулы подключений" > IfpwafcadPool. В главном окне отображаются подробные сведения о пуле подключений IfpwafcadPool.
Нажмите кнопку "Ping". Если пул подключений настроен правильно, отображается сообщение Ping Succeeded.
Если выполнение ping-тестирования завершается неуспешно, откройте вкладку "Дополнительные свойства" для проверки правильности настройки указанных значений свойств.
Введение в инфраструктуру Spring В рамках вводного учебного курса рассматривается процедура создания веб-приложения MVC с использованием инфраструктуры Spring.
в окне "Палитра". В диалоговом окне "Вставка формы" введите 
) сразу же после нового раскрывающегося списка. Для этого можно использовать окно "Палитра" или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне "Вставка кнопки" в текстовых полях "Подпись" и "Имя" введите 
) на главной панели инструментов в среде IDE для вызова мастера создания файла. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".
) в категории "Databases".
) на главной панели инструментов. В обозревателе по умолчанию среды IDE открывается страница 
) для 
). В появившемся диалоговом окне укажите требуемые подробные сведения.
). Для просмотра существующих таблиц разверните узел каталога. Для просмотра табличных данных выберите в контекстном меню таблицы "Просмотреть данные".
