Первое приложение

В этом разделе мы создадим простейший сайт, собирающий список дел.

Исходники этого приложения можно скачать здесь.

Хотя в JDK и включено довольно много готовых решений типовых задач, но далеко не все. Дополнительные прикладные библиотеки можно найти, например, в Apache Commons.

Но всё же библиотеки решают типовые алгоритмические задачи. Помимо типовых алгоритмических задач есть и типовые архитектурные решения. Их называют фреймворками. Самый известный фреймворк для Java - это Spring. Им мы и воспользуемся для разработки нашего приложения.

Работу сайта можно разделить на три принципиально разные части. Это разделение называется MVC (Model View Controller)

Первая часть - это модель хранения(Model). Вторая - это представление модели(View), то, как данные модели необходимо рисовать. Третья - это контроллер, то, что соединяет модель и представление.

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

Создание приложение

Для создания веб-сервера в меню выберите New->Project...

В появившемся окне выберите Spring Initializr

Проект строится на основе maven, подробнее о нём можно прочитать в соответствующем разделе

В следующем окне выберите пункты

• Developer Tools->Lombok позволяет за счёт аннотаций не писать часть тривиального кода в духе сеттеров и геттеров
• Web->Spring Web - набор решений для создания веб-приложений
• Template Engines->Thymeleaf упрощает создание HTML-страниц при помощи шаблонов
• SQL->Spring Data JPA связывает Spring с базами данных
• SQL->PostgreSQL Driver драйвер для работы с PostgreSQL

В итоге в правом нижнем углу у вас должен появиться такой же список. Жмём Finish.

Выберите пункт "This Window", если хотите открыть новый проект в текущем окне и "New Window" - если в новом

Откроется проект

Все настройки приложения задаются в специальном файле application.properties. Пока что он пустой.

Обратите внимание: файл настроек не добавлен в список индексации, его нужно создать вручную. Как это сделать, будет рассказано ниже.

Нам необходимо указать в нём настройки для подключения к базе данных. База данных - это чаще всего набор таблиц, в которых хранятся записи с той или иной информацией. Мы будем работать с наиболее распространённой PostgreSQL

База данных

Чтобы использовать базу данных в heroku, нам нужно добавить её в ресурсы приложения.

Для этого перейдём в раздел Resources нашего приложения на сайте heroku

Теперь в поле поиска введите Post, в появившемся списке выберите Heroku Postgress.

В новом окне вам необходимо выбрать тарифный план. Hobby dev - бесплатный план, его и выберем

Теперь Postgress появилось в списке ресурсов

Чтобы узнать данные для подключения, кликните по ресурсу. Откроется панель управления ресурсом Postgres

Перейдите во вкладку Settings, а в ней выберите пункт View Creditals

В раскрывшемся поле будут указаны все данные для подключения к БД

Соответствующие строки нужно скопировать в параметры программы

Общий вид параметров по данным базы

spring.datasource.url=jdbc:postgresql://Host:Port/Database
spring.datasource.username=User
spring.datasource.password=Password
spring.datasource.driverClassName=org.postgresql.Driver

Например, если данные базы такие:

Host	test1.compute.amazonaws.com
Port	5432
Database	dbexqe3d
User	bocxxsadfar
Password	b12dd116c55986ce49bad37a40605f8833c38f9e0f28

То файл параметров программы будет таким:

application.properties

spring.datasource.url=jdbc:postgresql://test1.compute.amazonaws.com:5432/dbexqe3d
spring.datasource.username=bocxxsadfar
spring.datasource.password=b12dd116c55986ce49bad37a40605f8833c38f9e0f28
spring.datasource.driverClassName=org.postgresql.Driver

Запуск

Если по каким-то причинам сразу не подтянется главное приложение, т.е. не появится зелёный крестик

Тогда откройте класс DemoApplication (Если вы назвали по-другому свой проект, то и класс будет называться немного по-другому).

в меню выберите Run->Run...

В списке выберите пункт с зелёной иконкой. Так Idea будет знать, что запускает именно Spring приложение

Запускаем приложение

Во время первой сборки Idea в правом нижнем углу выдаст сообщение, что ей нужно разрешить обрабатывать аннотации Lombok, жмём Enable

При первом запуске Windows запросит разрешение на доступ этого приложения к сети. Нажмите Разрешить доступ

Приложение запустилось

Если теперь открыть в браузере перейти по адресу http://localhost:8080/, то получим такую страницу

На ней сообщается, что страница не найдена и не указан обработчик такого события.

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

Главная страница

Главная страница у сайта располагается по адресу /. Так обозначается корень дерева сайта. Пропишем сначала её.

Чтобы фреймворк знал, как и какие шаблоны загружать, необходимо писать контроллеры, но для главной страницы это необязательно. Достаточно просто создать файл index.html в папке resource/static

index.html

По умолчанию он создаст прототип страницы

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

Да, можно было бы писать полноценную программу под каждую страницу, но проще разработать набор инструкций, как разметить страницу, каждую из них хранить в отдельном файле. Тогда программа будет всего одна, просто в зависимости от страницы она будет отображать страницу по инструкциям в том или ином файле.

Самый распространённый формат таких инструкций - это как раз HTML. Основное отличие языков разметки от языков программирования, в том, что в языках разметки мы просто оборачиваем те или иные участки страницы в теги. Тэг - это последовательность символов, обёрнутая в угловые скобки <...>.

Тэг может состоять из одного слова, например <div> либо может содержать некоторые аргументы. У тегов аргументы - некий аналог аргументов при вызове функции. Т.е. интерпретация аргументов выполняется программой-обработчиком(интерпретатором), а мы просто уточняем, что именно мы хотим получить помещая тот или иной тег в код страницы. Например, можно указать id тега, чтобы отличать его от остальных

<div id="example1">

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

<div>текст, который размечает парный тэг</div>

Поэтому их и называют парными. Чтобы отличить открывающий тэг от закрывающего, у закрывающего, т.е. второго в названии добавляют косую черту /. Все аргументы(параметры) парных тегов указываются у открывающего.

<div id="example2">текст, который размечает парный тэг</div>

Теперь рассмотрим, что за файл создался автоматически:

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Главная страница</title>
</head>
<body>

Это главная страница веб-сервера

</body>
</html>

Первый тег - одиночный, он говорит интерпретатору, что разметка задана с помощью языка HTML. Следующий тег <html>...</html> уже парный и отвечает за всё содержимое страницы, в аргументе можно указать основной язык страницы. Я поменял его на ru, т.е. на русский.

Следующий тег - тоже парный, он задаёт все заголовочные данные страницы. Все запросы по протоколу HTTP и HTTPS имеют две основные части: заголовок и тело запроса. Часть запросов просто загружает ту или иную веб-страницу, а остальные нужны для более сложной организации веб-сервера. Например, для написания REST запросов. Их мы рассмотрим ниже.

В заголовке находится вся техническая информация, а в теле - значащая. У HTML заголовок выполняет такие же функции. В нём мы указываем всю техническую информацию, напрямую не связанную с рисованием страницы. Эта часть разметки выделяется парным тегом <head>...</head>.

В нём с помощью одиночного тега <meta> мы указываем, в какой кодировке следует работать. UTF-8 - самая распространённая.

С помощью парного тега <title>...</title> указывается заголовок страницы. То, что отображается в названии вкладки браузера.

Последний тег - это <body>...</body>. Он оборачивает всё, что должно быть выведено на страницу.\ Мы проста написали текст, он и будет выведен на страницу.

Исходники этого приложения можно скачать здесь.

Если открыть этот файл любым из браузеров, отобразится та же страница, что и при обращении к серверу. По сути выполняется GET запрос к серверу, в ответ на который он и возвращает соответствующий HTML файл.

Файл настроек специально добавлен в игнор-лист для безопасности. Ведь в нём хранятся все параметры, которые используются для подключения к базе данных.

Поэтому если вы будете скачивать исходники, вам необходимо создать файл настроек самостоятельно.