web-programmirovanie_metodicheskie_ukazania

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

Беляев С.А. Методические указания по выполнению лабораторных работ по разработке web-приложений на языке Java

Спб.: Изд-во СпбГЭТУ «ЛЭТИ», 2014, 34 с.

Методические указания по выполнению лабораторных работ по разработке web-приложений на языке Java посвящено разработке веб-

приложений на Java 1.6 на основании таких технологий как сервлеты, Java Server Pages (JSP) с использованием стандартных и настраиваемых тегов с учётом необходимости локализации приложений и работой с базами данных.

Особенностью представленного материала является его небольшой объём,

наличие наглядных примеров по всем лабораторным работам.

Методические указания по выполнению лабораторных работ применимо в дисциплине «Web-технологии», которая входит в учебные планы подготовки бакалавров по направлению 231000.62 - «Программная инженерия», и в дисциплине «Разработка web-приложений», которая входит в учебные планы подготовки подготовки магистров по направлениям 231000.68 - «Программная инженерия», 231051.68 - «Разработка распределенных программных систем».

© Беляев С.А. © СпбГЭТУ «ЛЭТИ», 2014

- 2 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

Лабораторная работа №1. Разработка приложений с использованием сервлетов

Цель: научить студентов использовать сервлеты для разработки приложений.

1.1.Понятие Java Servlet

Сервлеты (Servlets) - это java-программы, которые выполняются на серверной стороне web-приложения. Точно так же, как апплеты динамически расширяют функциональные возможности web-браузера, сервлеты динамически расширяют функциональные возможности web-сервера [http://www.java2ee.ru/servlets/].

Работу сервлета можно описать следующим образом: при приходе запроса от клиента Web-сервер с помощью специального конфигурационного файла может определить, какой сервлет необходимо выполнить. После этого Web-сервер запускает java-машину, которая в свою очередь выполняет сервлет. Сервлет создает HTML-страницу и передает содержимое web-серверу. Web-сервер отправляет клиенту сформированную сервлетом HTML-страницу.

Сервер по сути является неким контейнером, который загружает сервлеты, выполняет их и, получив от них результат, отправляет его клиенту.

В общем случае сервлет может отправить на клиента не только HTML-страницу, но и поток байт (например, файл для загрузки).

1.2. Основные методы и классы

1.2.1. javax.servlet.GenericServlet

Класс абстрактной реализации сервлета GenericServlet содержит следующие основные методы:

Enumeration<String> getInitParameterNames() - получение имён параметров инициализации.

ServletConfig getServletConfig() - получение конфигурации сервлета. ServletContext getServletContext() - получение контекста сервлета. void log(String msg) — запись сообщения в журнал web-сервера.

void log(String message, Throwable t) — запись в журнал web-сервера сообщения об ошибке.

abstract void service(ServletRequest req, ServletResponse res)

— обслуживание запроса с клиента.

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

1.2.2. javax.servlet.http.HttpServlet

- 3 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

Класс абстрактной реализации сервлета HttpServlet (наследуется от GenericServlet) содержит следующие основные методы:

protected void doGet(HttpServletRequest req, HttpServletResponse resp) — реализация метода GET.

protected void doPost(HttpServletRequest req, HttpServletResponse resp) — реализация метода POST.

При необходимости можно обработать и другие команды, такие как DELETE, TRACE,

OPTIONS, PUT.

При реализации методов GET и POST в качестве параметров передаются

HttpServletRequest и HttpServletResponse.

1.2.3. javax.servlet.ServletRequest

Интерфейс запроса ServletRequest содержит следующие основные методы:

параметра, переданного методами GET или SET.

Enumeration<String> getParameterNames() — получение имён параметров,

переданных методами GET или SET.

RequestDispatcher getRequestDispatcher(String path) — получение диспатчера, который позволяет передать управление другому сервлету или web-странице.

void setAttribute(String name, Object o) — установка значения атрибута с заданным именем name.

void setCharacterEncoding(String env) — установка кодировки для запроса.

1.2.4. javax.servlet.http.HttpServletRequest

Основные методы HttpServletRequest:

Cookie[] getCookies() - получение списка Cookie.

String getRemoteUser() - получение имени пользователя, который аутентифицировался на сервере.

boolean isUserInRole(String role) — проверка, что пользователь принадлежит роли role.

1.2.5. javax.servlet.ServletResponse

Интерфейс ответа ServletResponse содержит следующие основные методы:

ServletOutputStream getOutputStream() - получение потока, с помощью которого можно на клиента передать поток байт (например, файл).

PrintWriter getWriter() - получение класса, с помощью которого на клиента

- 4 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

передаётся HTML-страница.

void setCharacterEncoding(String charset) — установка кодировки результата.

void setContentLength(int len) — установка длины результата (при передачи потока).

void setContentType(String type) — установка типа результата.

1.2.6. javax.servlet.http.HttpServletResponse

void addCookie(Cookie cookie) — добавление Cookie к ответу для сохранения на клиенте.

void sendError(int sc) — отправка клиенту сообщения об ошибке с заданным кодом.

void sendError(int sc, String msg) — отправка клиенту сообщения об ошибке с заданным кодом и заданным текстом.

void sendRedirect(String location) — перенаправление вывода.

1.3. Решение задач лабораторной работы

1.3.1. Создание сервлета

Создаём класс ServletName.java:

package edu.etu.web;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ServletName extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

StringBuilder sb = new StringBuilder(); sb.append("<html><body>"); sb.append("Мой первый сервлет!!!");

sb.append("</body></html>");

- 5 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

response.setContentType("text/html; charset=UTF-8"); PrintWriter out = response.getWriter();

out.println(sb.toString());

out.close();

}

}

Прописываем информацию в дескриптор развертывания web.xml:

<servlet> <servlet-name>ServletName</servlet-name>

<servlet-class>edu.etu.web.ServletName </servlet-class> </servlet>

<servlet-mapping> <servlet-name>ServletName</servlet-name> <url-pattern>/ServletName</url-pattern>

</servlet-mapping>

1.3.2. Получение параметров инициализации сервлета

Параметры инициализации сервлета прописываются в дескрипторе развертывания web.xml:

<servlet> <servlet-name>ServletName</servlet-name>

<servlet-class>edu.etu.web.ServletName </servlet-class> <init-param>

<param-name>parameterName1</param-name> <param-value>parameterValue1</param-value>

</init-param> <init-param>

<param-name>parameterName2</param-name> <param-value>parameterValue2</param-value>

</init-param> </servlet>

Получение значения параметра инициализации сервлета в методе сервлета (например,

в doGet()):

String value = getInitParameter("parameterName1");

- 6 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

1.3.3. Изменение значения div с использованием JavaScript-кода

В HTML-странице должен быть создан DIV, значение которого будет изменяться JavaScript. Обращение к нему будет осуществляться по идентификатору.

<div id='TextDiv'></div>

В HTML-странице должен быть определён JavaScript-код, обеспечивающий соответствующее изменение значения DIV.

<script type="text/javascript"> function changeText(){

document.getElementById('TextDiv').innerHTML = 'HTML,

который появится в DIV';

}

</script>

Для изменения текста можно воспользоваться обычной HTML-кнопкой button:

<input type='button' onclick='changeText()' value='Изменить'/>

Полный пример:

<div id='TextDiv'></div> <script type="text/javascript">

function changeText(value){ document.getElementById('TextDiv').innerHTML = value;

}

</script>

<input type='button' onclick='changeText("HTML 1")' value='Изменить 1'/>

<input type='button' onclick='changeText("HTML 2")' value='Изменить 2'/>

Но в современных Интернет-магазинах не принято использовать обычные кнопки, лучше использовать рисунки кнопок.

1.3.4. Отображение различных div с использованием JavaScript-кода

На странице должны быть определены описания DIV, которые будут скрываться или отображаться. Внутри DIV может быть произвольный HTML-код.

<div id='one' style=' display:block; '>Текст 1</div>

- 7 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

<div id='two' style=' display:none; '>Текст 2</div>

Необходимо написать JavaScript, который будет скрывать или отображать DIV.

<script type="text/javascript"> function show1(){

document.getElementById('one').style.display = 'block'; document.getElementById('two').style.display = 'none';

}

function show2(){ document.getElementById('one').style.display = 'none'; document.getElementById('two').style.display = 'block';

}

</script>

Для переключения между DIV нужны элементы управления.

<input type='button' onclick='show1()' value='Показать 1'/>

<input type='button' onclick='show2()' value='Показать 2'/>

Конечно, желающие могут использовать вкладки с использованием CSS или JQuery как инструмент управления вкладками, но приведённые реализации существенно проще.

Но в современных Интернет-магазинах не принято использовать обычные кнопки, лучше использовать рисунки кнопок.

1.3.5. Замена рисунка при наведении мыши с использованием CSS

Заметно оживляют внешний вид экранной формы активные элементы. Например, при создании активной кнопки, которая нарисована в jpg, gif или png можно использовать код

CSS.

Для этого в заголовке HTML-страницы (тег HEAD) необходимо добавить описание

стиля:

<style>

.izo {

background: url(http://изо1.jpg) no-repeat 50% 50%; display: block;

width: 400px; height: 400px;

}

- 8 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

.izo:hover {

background: url(http://изо2.jpg) no-repeat 50% 50%;

}

</style>

А на странице необходимо разместить ссылку с указанием соответствующего класса:

<a href="#" class="izo"></a>

Естественно, имя класса, путь до изображения и содержимое href определяет разработчик. Кстати, тег <a> поддерживает onclick (см. 1.3.3 и 1.3.4).

Возможны другие реализации замены картинки с использованием CSS при наведении мыши. Автору известны ещё минимум 5 способов, попробуйте найти их сами.

1.3.6. Интернационализация сервлета

Локализация веб-приложений необходима для обеспечения возможности использогвания одних и тех же приложений в разных странах. При этом осуществляется перевод слов, форматирование чисел и дат.

Для локализации используется класс java.util.Locale.

Ресурсы локализации имеют постфикс в формате xx_YY:

◦xx — код языка

◦YY — код страны

В итоге файлы локализации переводов с языка на язык могут храниться в файлах ресурсов: имя_xx_YY.properties и имя_xx.properties.

Для обращения к файлу ресурсов используется класс java.util.ResourceBundle, его ключевые методы:

ResourceBundle getBundle(String name) - получение ресурса с заданным именем

Enumeration getKeys() - получение всех имён ресурсов Locale getLocale() - получение локализации файла ресурсов

Object getObject(String key) - получение объекта (в случае локализации с использованием java-класса — данный способ выходит за рамких нашего курса) String getString(String key) - получение строкового значения (читается из файла ресурсов)

Файл ресурсов по-умолчанию myres.properties может выглядеть так submit = ввод

Файл ресурсов для английского языка myres_en.properties может выглядеть так submit = submit

- 9 -

Методические указания по выполнению лабораторных работ по разработке web-приложений (2014)

В сервлете файл свойств можно использовать так:

Locale locale = Locale.ENGLISH;

ResourceBundle myres = ResourceBundle.getBundle("myres", locale);

String submit = myres.getString("submit");

Локализация даты и времени выполняется с использованенм java.text.DateFormat. Форматирование валюты осуществляется с использованием java.util.Currency.

Форматирование чисел — java.text.NumberFormat.

1.4. Задание

Необходимо создать сервлет, реализующий страницу продукта интернет-магазина. Основные требования:

1.Карточка товара реализована с использованием сервлета.

2.На карточке есть фотография товара.

3.На карточке есть закладки: краткий просмотр, просмотр с отображением детальных характеристик и отзывы. Переключение между закладками реализовано с использованием

JavaScript.

4.Закладка, отображаемая по умолчанию, настраивается в параметрах инициализации сервлета.

5.На карточке есть кнопка «Купить» (реализация появится после создания «Корзины»).

6.На карточке есть и реализована кнопка локализации для трёх языков (обязательные: русский, английский).

7.Оформление карточки выполнено с использованием CSS.

Необязательно: поддерживается несколько фотографий товара с возможностью просмотра увеличенного изображения (с использованием CSS).

Постарайтесь сделать такую карточку интернет-магазина, которая была бы удобна

Вам.

Лабораторная работа №2. Разработка приложений с использованием Java

Server Pages (JSP)

Цель: научить студентов использовать JSP для разработки приложений.

2.1.Понятие JSP

Java Server Pages (JSP) — это технология Java 2 Platform Enterprise Edition (J2EE) для создания приложений, генерирующих динамическое web-содержимое - HTML, DHTML, XHTML и XML. JSP строятся на основании HTML, расширяемого языком java. Файлы при этом имеют расширение *.jsp.

- 10 -