Подключаем статические ресурсы к веб приложению. Простой сайт на Java часть 2.

Продолжаем писать наш сайт на Java и в этой части мы подключим статические ресурсы к нашему веб приложению: таблицы стилей (CSS), javascript, картинки. Если Вы еще не читали первую статью, вот ссылка. Для начала, откроем наш проект в таком виде, в которым мы его оставили в прошлый раз. Если проекта нет, можно скачать код с первой статьи: https://github.com/caligula95/simplewebapp и открыть его у себя в IDEE. Как это сделать читайте в статье “Как открыть мавен проект в Еклипс”. Теперь нужно добавить в наш web.xml урл ресурсов и назначить сервлет, который будет ими управлять. Мы не зря используем Tomcat. У него есть так называемый дефолтный сервлет, который отвечает за обслуживание статических ресурсов. В нашем web.xml нужно так и прописать:

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>

Полный вид нашего файла web.xml:

Код

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>HomeServlet</servlet-name>
    <display-name>HomeServlet</display-name>
    <description></description>
    <servlet-class>com.javamaster.controller.HomeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>/resources/*</url-pattern>
  </servlet-mapping>
</web-app>

Сохраняем и закрываем наш файл.

Далее нужно добавить папку с именем resources в наш каталог 

Для того, чтобы посмотреть и убедиться, что мы все делаем правильно, предлагаю создать небольшой файл CSS. Кто не знает это таблица стилей для сайта, чтобы делать красивый и удобный дизайн. Назовем наш файл style.css и добавим в него небольшое свойство, которое делает заголовки первого уровня (h1 тег) красным цветом: 

Код

h1 {
    color:red;
}

И теперь, когда в нас есть статический ресурс style.css подключим его к нашем страничке welcome.jsp, так как именно там есть заголовок первого уровня. Подключаются стили как и в обычном HTML: <link href=“resources/css/style.css“ rel=“stylesheet“>.

Теперь осталось только запустить наше приложение и наслаждаться красивым дизайном, который мы прописали)).

Конечно, таким сайтом никого не удивишь. Предлагаю поискать в Интернете бесплатные шаблоны страниц и попробовать залить их на наш проект. Бесплатных шаблонов очень много и Вам, как правило, в качестве платы нужно просто не удалять ссылку на автора внизу страницы. Я ввел в гугле: “simple site template free download” и получил массу шаблонов страниц. Мне понравился вот этот: 

Я уже даже для удобства разметил, какой блок будет за что отвечать. Лишнее всегда можно удалить. С шаблоном шли ресурсы стилей, джаваскриптов и шрифты. Все это я заливаю в папку resources: для удобства можно просто копировать папки из каталога шаблона и вставлять в наш проект.

Теперь можно удалить наш файл welcome.jsp, а в index.jsp вставить содержимое скачанного шаблона. Теперь очень внимательно нужно найти все подключения ресурсов в шаблоне и немного изменить путь к файлам добавив в начало путь к нашей папке:

Сохраняем, запускаем и получаем шаблон сайта у себя на сервере:

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

Всегда перед тем, как делать что-то глобальное. Подключение ресурсов или базы данных, проверьте работает ли это вообще на простых примерах, как мы это делали с изменением цвета заголовка. Этот пример не занял много времени но, его было достаточно чтобы мы убедились что все работает и можно продолжать работать. На простых и небольших примерах легче отловить ошибку.

В следующей статье мы разберемся с принципом работы Servlet-ов и jsp. А потом продолжим работать с нашим проектом.

Как всегда видео на Youtube:

Код для проекта в описании к видео.