JavaRush/Java Курсы/Модуль 3. Java Professional/Проект по теме: JSP и сервлеты

Проект по теме: JSP и сервлеты

Открыта

Сегодня будем писать игру «Крестики-Нолики» используя сервлеты и JSP.

Этот проект будет немного отличаться от предыдущих. В нем будут не только задания, но и объяснения как их сделать. То есть это будет проект из серии «HOW TO …».

Инструкция:

Сделать fork из репозитория: https://github.com/vasylmalik/project-servlet.git
Скачать свою версию проекта к себе на компьютер.
Настроить запуск приложения в IDEA:

Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom (в строку поиска) -> Local.
После этого нужно нажать “CONFIGURE” и указать, куда скачан и распакован архив с Tomcat.
Во вкладке “Deployment”: Alt + insert -> Artifact… -> tic-tac-toe:war exploded -> OK.
В поле “Application context”: оставить только “/” (слеш).
Нажать “APPLY”.
Закрыть окно настройки.
Сделать первый пробный запуск настроенной конфигурации. Если все сделал правильно – откроется твой браузер по умолчанию, в котором будет:

Открой файл “pom.xml”. В блоке “dependencies” есть 2 зависимости.

javax.servlet-api отвечает за спецификацию сервлетов. Scope “provided” нужен во время разработки, но не нужен в рантайме (у Tomcat уже есть эта зависимость в папке lib).
jstl – можно рассматривать как шаблонизатор.

В папке “webapp” есть 3 файла:

index.jsp – это наш шаблон (аналог HTML страницы). В ней будет разметка и скрипты. Именно файл с названием “index” отдается как начальная страница, если нет каких-либо конфигураций, что мы и увидели в п.3.
/static/main.css – файл для стилей. Как и в прошлом проекте, здесь все на твое усмотрение, крась как хочешь.
/static/jquery-3.6.0.min.js – фронтенд зависимость, которую наш сервер будет раздавать как статику.

В пакете “com.tictactoe” будет весь Java-код. Сейчас там есть 2 класса:

Sign – enum, который отвечает за “крестик/нолик/пустота”.
Field – это наше поле. В этом классе есть мапа “field”. Принцип хранения данных будет таким: ячейки поля крестиков-ноликов пронумерованы с нуля. В первой строке 0, 1 и 2. Во второй: 3, 4 и 5. И так далее. Есть также 3 метода. “getEmptyFieldIndex” ищет первую незанятую ячейку (да, соперник у нас будет не очень умным). “checkWin” проверяет не завершена ли игра. Если есть ряд из трех крестиков – возвращает крестик, если из трех ноликов – нолик. Иначе – пустоту. “getFieldData” – возвращает значения мапы “field” в виде списка, отсортированного в порядке возрастания индексов.

Объяснения оп темплиту закончены, теперь можно приступать к выполнению задания. Начнем с того, что отрисуем таблицу 3 на 3. Для этого в “index.jsp” добавь код:
```
<table>
	<tr>
		<td>0</td>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>
```
Числа в таблице потом уберем и заменим их на крестик, нолик или пустое поле. Также внутри тега “head” подключи файл стилей. Для этого добавь строку: <link href="static/main.css" rel="stylesheet">
Содержимое файла стилей остается на твое усмотрение. Я использовал такой:
```
td {
    border: 3px solid black;
    padding: 10px;
    border-collapse: separate;
    margin: 10px;
    width: 100px;
    height: 100px;
    font-size: 50px;
    text-align: center;
    empty-cells: show;
}
```
После запуска у меня результат выглядит так:
Теперь давай добавим такой функционал: при клике на ячейку, на сервер будет отправляться запрос, в котором параметром передадим индекс ячейки, по которой был произведен клик. Эту задачу можно разделить на две части: с фронта запрос отправить, на сервере запрос принять. Давай, ради разнообразия, начнем с фронта.
Давай каждому тегу “d” добавим параметр “onclick”. В значении укажем смену текущей страницы на указанный URL. Сервлет, который будет отвечать за логику, будет иметь URL “/logic”. И будет принимать параметр с названием “click”. Так будем передавать индекс ячейки, по которой кликнул пользователь.
```
<table>
    <tr>
        <td onclick="window.location='/logic?click=0'">0</td>
        <td onclick="window.location='/logic?click=1'">1</td>
        <td onclick="window.location='/logic?click=2'">2</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=3'">3</td>
        <td onclick="window.location='/logic?click=4'">4</td>
        <td onclick="window.location='/logic?click=5'">5</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=6'">6</td>
        <td onclick="window.location='/logic?click=7'">7</td>
        <td onclick="window.location='/logic?click=8'">8</td>
    </tr>
</table>
```
Проверить, что все сделано правильно, можно через панель разработчика в браузере. Например, в Chrome она открывается по кнопке F12. В результате клика на ячейку с индексом 4 картина будет такая: Ошибку мы получаем потому, что сервлета, который может отдать сервер по адресу “logic”, мы еще не создали.

В пакете “com.tictactoe” создай класс “LogicServlet”, который нужно унаследовать от класса “javax.servlet.http.HttpServlet”. В классе переопредели метод “doGet”.
И давай добавим метод, который будет получать индекс ячейки, по которой произошел клик. Также нужно добавить маппинг (адрес, по которому этот сервлет будет перехватывать запрос). Предлагаю это делать через аннотацию (но если любишь трудности – можно и через web.xml). Общий код сервлета:
```
package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int index = getSelectedIndex(req);
        resp.sendRedirect("/index.jsp");
    }


    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

}
```
Теперь, при клике по любой ячейке, мы будем на сервере получать индекс этой ячейки (можно убедиться, запустив сервер в дебаге). И будет происходить редирект на эту же страницу, с которой был произведен клик.

Теперь мы можем кликать, но это еще не игра. Для того, чтоб игра имела логику, нужно сохранять состояние игры (где стоят крестики, где нолики) между запросами. Самый простой метод это сделать – сохранять эти данные в сессии. При таком подходе сессия будет храниться на сервере, а клиент получит идентификатор сессии в куке с именем “JSESSIONID”. Но сессию не нужно создавать каждый раз, а только в начале игры. Давай для этого заведем еще один сервлет, который назовем “InitServlet”. В нем переопределим метод “doGet”, в котором создадим новую сессию, создадим игровое поле, положим это игровое поле и список типа Sign в атрибуты сессии, и отправим “forward” на страницу index.jsp. Код:

package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
import java.util.Map;

@WebServlet(name = "InitServlet", value = "/start")
public class InitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Создание новой сессии
        HttpSession currentSession = req.getSession(true);

        // Создание игрового поля
        Field field = new Field();
        Map<Integer, Sign> fieldData = field.getField();

        // Получение списка значений поля
        List<Sign> data = field.getFieldData();

        // Добавление в сессию параметров поля (нужно будет для хранения состояния между запросами)
        currentSession.setAttribute("field", field);
        // и значений поля, отсортированных по индексу (нужно для отрисовки крестиков и ноликов)
        currentSession.setAttribute("data", data);

        // Перенаправление запроса на страницу index.jsp через сервер
        getServletContext().getRequestDispatcher("/index.jsp").forward(req, resp);
    }
}

И чтоб не забыть, давай стартовую страницу, которая открывается в браузере после запуска сервера, сменим на “/start”:

Теперь после перезапуска сервера и клика по любой ячейке поля в меню разработчика браузера в секции “Request Headers” будет присутствовать кука с идентификатором сессии:

Когда у нас появилось хранилище, в котором мы можем хранить состояние между запросами с клиента (браузера), можно начинать писать логику игры. Логика у нас находится в “LogicServlet”. Работать нам нужно с методом “doGet”. Давай в метод добавим такое поведение:

получим объект “field” типа Field из сессии (вынесем в метод “extractField”).
поставим крестик там, где кликнул пользователь (пока что без каких-либо проверок).

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // Получаем текущую сессию
    HttpSession currentSession = req.getSession();

    // Получаем объект игрового поля из сессии
    Field field = extractField(currentSession);

    // получаем индекс ячейки, по которой произошел клик
    int index = getSelectedIndex(req);

    // ставим крестик в ячейке, по которой кликнул пользователь
    field.getField().put(index, Sign.CROSS);

    // Считаем список значков
    List<Sign> data = field.getFieldData();

    // Обновляем объект поля и список значков в сессии
    currentSession.setAttribute("data", data);
    currentSession.setAttribute("field", field);

    resp.sendRedirect("/index.jsp");
}



private Field extractField(HttpSession currentSession) {
    Object fieldAttribute = currentSession.getAttribute("field");
    if (Field.class != fieldAttribute.getClass()) {
        currentSession.invalidate();
        throw new RuntimeException("Session is broken, try one more time");
    }
    return (Field) fieldAttribute;
}

Поведение пока не изменилось, но если запустить сервер в дебаге и поставить брейкпоинт на строке, где шлется редирект, можно посмотреть “внутренности” объекта “data”. Там действительно появляется “CROSS” под индексом, по котором был клик.

Теперь время отобразить крестик на фронтенде. Для этого поработаем с файлом “index.jsp” и технологией “JSTL”.
- В секции <head> добавим:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- В таблице внутри каждого блока <td> поменяем индекс на конструкцию, которая позволяет вычислять значения. Например, для индекса ноль: <td onclick="window.location='/logic?click=0'">${data.get(0).getSign()}</td> Теперь при клике на ячейку там будет появляться крестик:
Мы свой ход сделали, теперь очередь за “ноликом”. И добавим парочку проверок здесь же, чтоб знаки не ставились в уже занятые клетки.

Нужно проверить, что ячейка, по которой был клик пустая. Иначе ничего не делаем и отправляем пользователя на ту же страницу без изменений параметров сессии.

Так как количество клеток на поле нечетное, возможна ситуация, когда крестик удалось поставить, а для нолика уже нет места. Поэтому, после того как поставили крестик, пытаемся получить индекс незанятой ячейки (метод getEmptyFieldIndex класса Field). Если индекс не отрицательный, тогда ставим туда нолик.

Код:

package com.tictactoe;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Получаем текущую сессию
        HttpSession currentSession = req.getSession();

        // Получаем объект игрового поля из сессии
        Field field = extractField(currentSession);

        // получаем индекс ячейки, по которой произошел клик
        int index = getSelectedIndex(req);
        Sign currentSign = field.getField().get(index);

        // Проверяем, что ячейка, по которой был клик пустая.
        // Иначе ничего не делаем и отправляем пользователя на ту же страницу без изменений
        // параметров в сессии
        if (Sign.EMPTY != currentSign) {
            RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/index.jsp");
            dispatcher.forward(req, resp);
            return;
        }

        // ставим крестик в ячейке, по которой кликнул пользователь
        field.getField().put(index, Sign.CROSS);

        // Получаем пустую ячейку поля
        int emptyFieldIndex = field.getEmptyFieldIndex();

        if (emptyFieldIndex >= 0) {
            field.getField().put(emptyFieldIndex, Sign.NOUGHT);
        }

        // Считаем список значков
        List<Sign> data = field.getFieldData();

        // Обновляем объект поля и список значков в сессии
        currentSession.setAttribute("data", data);
        currentSession.setAttribute("field", field);

        resp.sendRedirect("/index.jsp");
    }

    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

    private Field extractField(HttpSession currentSession) {
        Object fieldAttribute = currentSession.getAttribute("field");
        if (Field.class != fieldAttribute.getClass()) {
            currentSession.invalidate();
            throw new RuntimeException("Session is broken, try one more time");
        }
        return (Field) fieldAttribute;
    }
}

На данном этапе можно ставить крестики, AI отвечает ноликами. Но нет проверки, когда стоит остановить игру. Это может быть в трех случаях:
- после очередного хода крестика образовалась линия из трех крестиков;
- после очередного ответного хода ноликом образовалась линия из трех ноликов;
- после очередного хода крестика закончились пустые клетки.
Добавим метод, который проверяет, нет ли трех крестиков/ноликов в ряд:
```
/**
 * Метод проверяет, нет ли трех крестиков/ноликов в ряд.
 * Возвращает true/false
 */
private boolean checkWin(HttpServletResponse response, HttpSession currentSession, Field field) throws IOException {
    Sign winner = field.checkWin();
    if (Sign.CROSS == winner || Sign.NOUGHT == winner) {
        // Добавляем флаг, который показывает что кто-то победил
        currentSession.setAttribute("winner", winner);

        // Считаем список значков
        List<Sign> data = field.getFieldData();

        // Обновляем этот список в сессии
        currentSession.setAttribute("data", data);

        // Шлем редирект
        response.sendRedirect("/index.jsp");
        return true;
    }
    return false;
}
```
Особенность этого метода в том, что если победитель нашелся – добавляем в сессию еще параметр, используя который, изменим отображение в “index.jsp” в последующих пунктах.

Добавим в метод “doGet” два раза вызов метода “checkWin”. Первый раз после установки крестика, второй – после установки нолика.

// Проверяем, не победил ли крестик после добавления последнего клика пользователя
if (checkWin(resp, currentSession, field)) {
    return;
}

if (emptyFieldIndex >= 0) {
    field.getField().put(emptyFieldIndex, Sign.NOUGHT);
    // Проверяем, не победил ли нолик после добавление последнего нолика
    if (checkWin(resp, currentSession, field)) {
        return;
    }
}

По поведению почти ничего не изменилось (кроме того, что в случае победы одного из знаков перестают ставиться нолики. Давай в “index.jsp” используем параметр “winner” и выведем победителя. Используем директивы c:set и c:if после таблицы:
```
<hr>
<c:set var="CROSSES" value="<%=Sign.CROSS%>"/>
<c:set var="NOUGHTS" value="<%=Sign.NOUGHT%>"/>

<c:if test="${winner == CROSSES}">
    <h1>CROSSES WIN!</h1>
</c:if>
<c:if test="${winner == NOUGHTS}">
    <h1>NOUGHTS WIN!</h1>
</c:if>
```
Если выигрывают крестики, то выведется сообщение “CROSSES WIN!”, если нолики – “NOUGHTS WIN!”. В результате можем получить одну из двух надписей:
Если есть победитель, нужно иметь возможность взять реванш. Для этого нужна кнопка, которая отправит на сервер запрос. А сервер инвалидирует текущую сессию и перенаправит запрос снова на “/start”.
- В “index.jsp” в секции “head” пропишем скрипт “jquery”. Используя эту библиотеку, мы будет отправлять запрос на сервер.
```
<script src="<c:url value="/static/jquery-3.6.0.min.js"/>"></script>
```
- В “index.jsp” в секции “script” добавим функцию, которая умеет оправлять POST запрос на сервер. Функцию сделаем синхронной, и когда придет ответ с сервера – перезагрузит текущую страницу.
```
<script>
    function restart() {
        $.ajax({
            url: '/restart',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            async: false,
            success: function () {
                location.reload();
            }
        });
    }
</script>
```
- Внутри блоков “c:if” добавим кнопку, при клике на которую вызывается только что написанная функция:
```
<c:if test="${winner == CROSSES}">
    <h1>CROSSES WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
<c:if test="${winner == NOUGHTS}">
    <h1>NOUGHTS WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
```
- Создадим новый сервлет, который будет обслуживать URL “/restart”.
```
package com.tictactoe;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "RestartServlet", value = "/restart")
public class RestartServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.getSession().invalidate();
        resp.sendRedirect("/start");
    }
}
```
  После победы появится кнопка “Start again”. После клика по ней – поле полностью очистится, и игра начнется сначала.

Осталось рассмотреть последнюю ситуацию. Что, если крестик пользователь поставил, победы не произошло, и для нолика нету места? Тогда это ничья, именно ее сейчас и обработаем:

В “LogicServlet” в сессию добавим еще один параметр “draw”, обновим поле “data” и отправим редирект на “index.jsp”:

// Если такая ячейка присутствует
if (emptyFieldIndex >= 0) {
    …
}
// Если пустой ячейки нет и никто не победил - значит это ничья
else {
    // Добавляем в сессию флаг, который сигнализирует что произошла ничья
    currentSession.setAttribute("draw", true);

    // Считаем список значков
    List<Sign> data = field.getFieldData();

    // Обновляем этот список в сессии
    currentSession.setAttribute("data", data);

    // Шлем редирект
    response.sendRedirect("/index.jsp");
    return;
}

В “index.jsp” обработаем этот параметр:
```
<c:if test="${draw}">
    <h1>IT'S A DRAW</h1>
    <br>
    <button onclick="restart()">Start again</button>
</c:if>
```
В результате ничьей получим соответствующее сообщение и предложение начать сначала:

На этом написание игры закончено.

Код классов и файлов, с которыми работали

InitServlet

package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
import java.util.Map;

@WebServlet(name = "InitServlet", value = "/start")
public class InitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Создание новой сессии
        HttpSession currentSession = req.getSession(true);

        // Создание игрового поля
        Field field = new Field();
        Map<Integer, Sign> fieldData = field.getField();

        // Получение списка значений поля
        List<Sign> data = field.getFieldData();

        // Добавление с сессию параметров поля (нужно будет для хранения состояния между запросами)
        currentSession.setAttribute("field", field);
        // и значений поля, отсортированных по индексу (нужно для отрисовки крестиков и ноликов)
        currentSession.setAttribute("data", data);

        // Перенаправление запроса на страницу index.jsp через сервер
        getServletContext().getRequestDispatcher("/index.jsp").forward(req, resp);
    }
}

LogicServlet

package com.tictactoe;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Получаем текущую сессию
        HttpSession currentSession = req.getSession();

        // Получаем объект игрового поля из сессии
        Field field = extractField(currentSession);

        // получаем индекс ячейки, по которой произошел клик
        int index = getSelectedIndex(req);
        Sign currentSign = field.getField().get(index);

        // Проверяем, что ячейка, по которой был клик пустая.
        // Иначе ничего не делаем и отправляем пользователя на ту же страницу без изменений
        // параметров в сессии
        if (Sign.EMPTY != currentSign) {
            RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/index.jsp");
            dispatcher.forward(req, resp);
            return;
        }

        // ставим крестик в ячейке, по которой кликнул пользователь
        field.getField().put(index, Sign.CROSS);

        // Проверяем, не победил ли крестик после добавление последнего клика пользователя
        if (checkWin(resp, currentSession, field)) {
            return;
        }

        // Получаем пустую ячейку поля
        int emptyFieldIndex = field.getEmptyFieldIndex();

        if (emptyFieldIndex >= 0) {
            field.getField().put(emptyFieldIndex, Sign.NOUGHT);
            // Проверяем, не победил ли нолик после добавление последнего нолика
            if (checkWin(resp, currentSession, field)) {
                return;
            }
        }
        // Если пустой ячейки нет и никто не победил - значит это ничья
        else {
            // Добавляем в сессию флаг, который сигнализирует что произошла ничья
            currentSession.setAttribute("draw", true);

            // Считаем список значков
            List<Sign> data = field.getFieldData();

            // Обновляем этот список в сессии
            currentSession.setAttribute("data", data);

            // Шлем редирект
            resp.sendRedirect("/index.jsp");
            return;
        }

        // Считаем список значков
        List<Sign> data = field.getFieldData();

        // Обновляем объект поля и список значков в сессии
        currentSession.setAttribute("data", data);
        currentSession.setAttribute("field", field);

        resp.sendRedirect("/index.jsp");
    }

    /**
     * Метод проверяет, нет ли трех крестиков/ноликов в ряд.
     * Возвращает true/false
     */
    private boolean checkWin(HttpServletResponse response, HttpSession currentSession, Field field) throws IOException {
        Sign winner = field.checkWin();
        if (Sign.CROSS == winner || Sign.NOUGHT == winner) {
            // Добавляем флаг, который показывает что кто-то победил
            currentSession.setAttribute("winner", winner);

            // Считаем список значков
            List<Sign> data = field.getFieldData();

            // Обновляем этот список в сессии
            currentSession.setAttribute("data", data);

            // Шлем редирект
            response.sendRedirect("/index.jsp");
            return true;
        }
        return false;
    }

    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

    private Field extractField(HttpSession currentSession) {
        Object fieldAttribute = currentSession.getAttribute("field");
        if (Field.class != fieldAttribute.getClass()) {
            currentSession.invalidate();
            throw new RuntimeException("Session is broken, try one more time");
        }
        return (Field) fieldAttribute;
    }
}

RestartServlet

package com.tictactoe;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "RestartServlet", value = "/restart")
public class RestartServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.getSession().invalidate();
        resp.sendRedirect("/start");
    }
}

index.jsp

<%@ page import="com.tictactoe.Sign" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <link href="static/main.css" rel="stylesheet">
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <script src="<c:url value="/static/jquery-3.6.0.min.js"/>"></script>
    <title>Tic-Tac-Toe</title>
</head>
<body>
<h1>Tic-Tac-Toe</h1>

<table>
    <tr>
        <td onclick="window.location='/logic?click=0'">${data.get(0).getSign()}</td>
        <td onclick="window.location='/logic?click=1'">${data.get(1).getSign()}</td>
        <td onclick="window.location='/logic?click=2'">${data.get(2).getSign()}</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=3'">${data.get(3).getSign()}</td>
        <td onclick="window.location='/logic?click=4'">${data.get(4).getSign()}</td>
        <td onclick="window.location='/logic?click=5'">${data.get(5).getSign()}</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=6'">${data.get(6).getSign()}</td>
        <td onclick="window.location='/logic?click=7'">${data.get(7).getSign()}</td>
        <td onclick="window.location='/logic?click=8'">${data.get(8).getSign()}</td>
    </tr>
</table>

<hr>
<c:set var="CROSSES" value="<%=Sign.CROSS%>"/>
<c:set var="NOUGHTS" value="<%=Sign.NOUGHT%>"/>

<c:if test="${winner == CROSSES}">
    <h1>CROSSES WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
<c:if test="${winner == NOUGHTS}">
    <h1>NOUGHTS WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
<c:if test="${draw}">
    <h1>IT'S A DRAW</h1>
    <button onclick="restart()">Start again</button>
</c:if>

<script>
    function restart() {
        $.ajax({
            url: '/restart',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            async: false,
            success: function () {
                location.reload();
            }
        });
    }
</script>

</body>
</html>

main.css

td {
    border: 3px solid black;
    padding: 10px;
    border-collapse: separate;
    margin: 10px;
    width: 100px;
    height: 100px;
    font-size: 50px;
    text-align: center;
    empty-cells: show;
   }

ПредыдущаяПредыдущая лекция

СледующаяСледующая лекция

Комментарии (31)

популярные
новые
старые

Для того, чтобы оставить комментарий Вы должны авторизоваться

Taurnil Technical Lead в ООО "Теком"

Expert

28 февраля, 06:35

Если вы знаете, хотя бы примерно, что такое MVC и как оно устроено - у вас глазки вытекут от того, как тут логика размазана. Показать, что такое сервлеты, и с чем их едят - это проект может. А еще он покажет, как писать не надо. Тут есть несколько концептуальных ошибок в логике. Проект интересный, если из него попытаться сделать конфетку :) Привести его к MVC, исправить ошибки, попробовать прикрутить алгоритм MiniMax, например.

Павел

Уровень 89

Expert

13 января, 08:37

Пришлось поэкспериментировать, чтобы крестики-нолики были в рабочем состоянии. Idea Ultimate от Javarush перестала работать на территории России поэтому установил Idea Community, Tomcat 10.1.17 и плагин Smart Tomcat. B pom.xml оказались другие зависимости. У меня этот файл выглядит так

Павел

Уровень 89

Expert

13 января, 08:40

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.javarush</groupId>
    <artifactId>tic-tac-toe</artifactId>
    <version>1.0</version>
    <name>tic-tac-toe</name>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.target>18</maven.compiler.target>
        <maven.compiler.source>18</maven.compiler.source>
    </properties>

    <dependencies>

        <!-- https://mvnrepository.com/artifact/jakarta.servlet.jsp.jstl/jakarta.servlet.jsp.jstl-api -->
        <dependency>
            <groupId>jakarta.servlet.jsp.jstl</groupId>
            <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.maven.plugins/maven-deploy-plugin -->
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-deploy-plugin</artifactId>
            <version>3.1.1</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-catalina -->
        <dependency>
            <groupId>org.apache.tomcat</groupId>
            <artifactId>tomcat-catalina</artifactId>
            <version>11.0.0-M16</version>
        </dependency>

    </dependencies>

    <build>
        <plugins

Павел

Уровень 89

Expert

13 января, 08:42

файл целиком не размещается...

<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.2</version>
            </plugin>
        </plugins>
    </build>
</project>

В Community Крестики-нолики у меня не стартуют в браузере автоматически после перезагрузки Tomcat. Важно: начинать игру необходимо со страницы http://localhost:8080/start

Дмитрий

Уровень 99

Expert

9 января, 00:09

1. Как запретить проставлять значения, если игра завершилась? 2. Почему после завершения игры новая иногда начинается не с пустым полем (если несколько раз кликнуть ещё после окончания)? 3. Зачем нам вообще был

Map<Integer, Sign> fieldData = field.getField();

если мы нигде это не использовали?

Антон

Уровень 85

10 января, 15:51

Тебя же ни кто не заставляет делать 1:1 как в решении. Они тут вообще по моему многое делают, чтобы максимальное количество плюшек в эти крестики воткнуть.

Дмитрий

Уровень 99

Expert

23 января, 10:23

Спасибо за ответ, но он не особо подходит ни к одному из пунктов вопроса.

Taurnil Technical Lead в ООО "Теком"

Expert

28 февраля, 06:24

1. Абстрагировать проверку на окончание игры в один метод и вызывать его перед каждым ходом. Окончанием игры считать победу одного из участников и/или недоступность новых ходов. 2. Что-то у тебя не так в коде. В стоковом решении такой проблемы нет. 3. Незачем. Это один из бесполезных "хвостов" наскоро слепленного приложения. Видимо, хотели как лучше, но получилось, как стало потом :)

Дмитрий

Уровень 99

Expert

8 января, 22:58

Не нужно ли на всякий случай тут проверку на null делать прежде чем вызывать getClass()? А то мало ли...

private Field extractField(HttpSession currentSession) {
    Object fieldAttribute = currentSession.getAttribute("field");
    if (Field.class != fieldAttribute.getClass()) {
        currentSession.invalidate();
        throw new RuntimeException("Session is broken, try one more time");
    }
    return (Field) fieldAttribute;
}

Дмитрий Саргаев co-founder в formatiqa.com

Expert

4 октября 2023, 22:26

Полностью рабочий стэк (теперь это не javax, а jakarta): Tomcat 10.1 директива

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

до тэга

<html>

в index.jsp Maven pom.xml

<dependency>
    <groupId>jakarta.servlet</groupId>
    <artifactId>jakarta.servlet-api</artifactId>
    <version>6.0.0</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>jakarta.servlet.jsp.jstl</groupId>
    <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
    <version>3.0.0</version>
</dependency>
<dependency>
    <groupId>org.glassfish.web</groupId>
    <artifactId>jakarta.servlet.jsp.jstl</artifactId>
    <version>3.0.1</version>
</dependency>

Дмитрий Саргаев co-founder в formatiqa.com

Expert

4 октября 2023, 22:30

И, соответственно, импорты теперь выглядят так:

import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;

Iriska

Уровень 111

Expert

7 октября 2023, 09:16

Спасибо, Дмитрий! Много времени потратила в поисках ошибки... Заменила javax на jakarta и всё работает!

Дмитрий Саргаев co-founder в formatiqa.com

Expert

13 октября 2023, 21:58

Welcome)

Anonymous #3322801

Уровень 110

Expert

1 сентября 2023, 16:04

/* Комментарий удален */

Надежда

Уровень 104

Expert

13 июля 2023, 12:38

В приведенном решении есть баг: если кликаешь на ячейки 6,7,8, то нолики делают свой третий ход (хотя стоит проверка на 3 крестика в ряд, и третий ход нолики делать не должны) и выдает результат, что нолики выиграли. Хотя выиграли крестики (у них был первый ход).

Ошибка в методе public Sign checkWin(). Надо добавить еще одно условие: for (List<Integer> winPossibility : winPossibilities) { if (field.get(winPossibility.get(0)) == field.get(winPossibility.get(1)) && field.get(winPossibility.get(0)) == field.get(winPossibility.get(2)) && field.get(winPossibility.get(0)) != Sign.EMPTY) { return field.get(winPossibility.get(0)); } } return Sign.EMPTY;

Семён

Уровень 67

Expert

16 октября 2023, 19:03

Спасибо, работает. Но почему? Почему понадобилась это доп. проверка? Мы вроде как ставим крестик, только потом начинается проверка на победителя. Почему код думает, что вместо крестика может быть пустота (Sign.EMPTY)?

Сергей

Уровень 98

Expert

10 ноября 2023, 11:20

Можно просто порядок листов в методе поменять - чтобы строка (6, 7, 8) раньше проверялась - тогда тоже все работает. List<List<Integer>> winPossibilities = List.of( List.of(6, 7, 8), List.of(0, 1, 2), List.of(3, 4, 5), List.of(0, 3, 6), List.of(1, 4, 7), List.of(2, 5, 8), List.of(0, 4, 8), List.of(2, 4, 6) );

Taurnil Technical Lead в ООО "Теком"

Expert

28 февраля, 06:21

Потому что проверку на окончание игры нужно делать после каждого хода, а не только после хода ноликов. В логике тут несколько концептуальных ошибок, на самом деле, и эта - одна из них. Ход - это одно действие одного игрока. Игра считает, что ход - это по одному действию каждого игрока. Окончание игры - это наличие победителя и/или отсутствие возможности новых ходов. После каждого хода должна производиться проверка на окончание игры. Тогда и проблемы такой не возникнет по определению.

Павел

Уровень 61

Expert

6 марта, 14:37

Нет. Даже если проводить проверку после каждого хода крестиков и ноликов то все равно этот баг остается. А прикол в том, что метод checkWin класса Field работает с багом. Если в первой строке проставлять только нолики, а в последней только крестики, то этот метод не проверяет последнюю строчку. Он сравнивает вторую строку, находит там 3 значения Empty, считает это выигрышной комбинацией и возвращает return эту комбинацию. Т.е. по факту это тоже самое что отработал бы return Sign.EMPTY; А в методе checkWin класса LogicServlet в ите проверка идет только if (Sign.CROSS == winner || Sign.NOUGHT == winner). Естественно мы не заходим в этот if если у нас победитель EMPTY. Поэтому он просто пропускает этот круг, доходит до нолика, нолик делает ход, проверяется первая строчка и о боги, у нас есть победитель. Хотя проверка делается и после ходи крестиков, и после хода ноликов. Чтобы исправить бажину нужно просто добавить еще одну проверку что наш победитель не EMPTY как это предлагает сделать Надежда. И тогда все работает. Не благодарите :)))

Ольга Николенко

Уровень 68

Expert

6 марта, 18:59

А ты проверял такую комбинацию? Насколько вижу, приведенная ошибка не связана с отсутствием проверки на окончание. Проблема в том, что метод checkwin() класса Field не находит выигрышные комбинации, потому что считает за таковую комбинацию пустот и из-за этого прерывает цикл до того, как дойдет до крестов или нулей. Как раз в примере, что указала девушка, ошибку можно увидеть на поле. Но и без него можно дебаггером посмотреть, что при наличии любой "выигрышной комбинации пустот" цикл прерывается, не дойдя до конца. Проверка на наличие победителя в приведенном коде есть после каждого действия. Проверка на возможность новых ходов делается только после крестика, потому что количество ходов не четное, и ходы могут закончиться только на крестике. Хотя мне тоже кажется, что логичнее выделить это в один метод (а уж про качество всего приведенного решения вообще молчу)

Taurnil Technical Lead в ООО "Теком"

Expert

10 марта, 16:51

А где я сказал, что должна остаться стоковая реализация проверки? Где-то выше я это расписал уже. Если кратко, то проверка окончания игры - это один метод. В котором вызывается сначала проверка на три знака в линию(где нет "пустот"), а потом - проверка на доступность хода. Результатом проверки на окончание игры станосится победа одного из игроков или ничья соответственно.

Надежда

Уровень 104

Expert

11 июля 2023, 16:48

Если у вас Tomcat10 и вы дошли до п. 12, после чего получаете ошибку HTTP Status 500 – Internal Server Error Message java.lang.NoClassDefFoundError: javax/servlet/jsp/tagext/TagLibraryValidator, то, скорее всего, у вас не подключается библиотека JSTL. Как пофиксить, читайте здесь: https://ru.stackoverflow.com/questions/1303918/%d0%9f%d0%be%d1%87%d0%b5%d0%bc%d1%83-%d0%bd%d0%b5-%d0%bf%d0%be%d0%b4%d0%ba%d0%bb%d1%8e%d1%87%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%b1%d0%b8%d0%b1%d0%bb%d0%b8%d0%be%d1%82%d0%b5%d0%ba%d0%b0-jstl/1304088#1304088

Виталий

Уровень 78

Expert

5 октября 2023, 11:55

Спасибо!)

Misha Saharin

Уровень 111

Expert

16 февраля 2023, 10:52

стало ярче понимание в чём разница между backend и frontend. и где ты сам. кто за backend?)

Владимир (koloncovvova@mail.ru)

Уровень 108

Expert

22 января 2023, 14:57

так и не понял..вроде бы написано, "инструкция для проекта" если это инструкция, то почему когда по ней все делаешь, то потом кое-что не работает из задуманного?)

Александр

Уровень 111

18 февраля 2023, 09:38

Вроде бы все работает как положено.