JSTL теги - часть 1

Продолжаем писать простое джава веб приложение и сегодня пришло время рассмотреть, как работать с jstl тегами и как очень удобно отобразить информацию на jsp странице с их помощью. На повестке дня:

подключение библиотеки jstl к проекту;
использование тега forEach для вывода списка объектов;
использование out для вывода объекта.

Начнем…

С JSP и JSTl мы уже частично знакомы из предыдущих статей. Теперь, давайте используем уже имеющиеся знания, дополним их и попробуем применить их в нашем простом сайте, который мы пишем уже несколько месяцев.

Для тех, кто тут впервые: мы пишем простое java веб приложение, с целью ознакомиться с основами веб программирования на джава. Весь цикл статей Вы сможете найти в разделе java web.

Прежде всего, чтобы отобразить информацию ее нужно добавить. Я вручную добавил несколько записей в нашу базу данных. В кого ничего не сохранилось вот вам дамп моей базы. Просто создайте файл с расширением sql вставьте содержимое и импортируйте в MySql. Для ленивых, в конце статьи будет ссылка на код гитхаб и в корне каталога будет дамп, который можно будет скачать. Для особенно ленивых, можно попробовать вставить как текст в консоль MySql (не гарантирую, что все заработает):

Код

-- MySQL dump 10.13  Distrib 5.7.19, for Win64 (x86_64)
--
-- Host: localhost    Database: simpleapp
-- ------------------------------------------------------
-- Server version   5.7.19-log
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
 
--
-- Table structure for table `article`
--
 
DROP TABLE IF EXISTS `article`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(45) NOT NULL,
  `body` varchar(3000) DEFAULT NULL,
  `category_id` int(11) NOT NULL,
  `users_id` int(11) NOT NULL,
  PRIMARY KEY (`id`,`category_id`,`users_id`),
  KEY `fk_article_category_idx` (`category_id`),
  KEY `fk_article_users1_idx` (`users_id`),
  CONSTRAINT `fk_article_category` FOREIGN KEY (`category_id`) REFERENCES `category` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION,
  CONSTRAINT `fk_article_users1` FOREIGN KEY (`users_id`) REFERENCES `users` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `article`
--
 
LOCK TABLES `article` WRITE;
/*!40000 ALTER TABLE `article` DISABLE KEYS */;
INSERT INTO `article` VALUES (1,'First java program','My future content about java programming',1,1),(2,'SQL - helpful operations','My future content about SQL',2,1),(3,'Javascript as good frontend solution','My future content about javascript programming',3,1);
/*!40000 ALTER TABLE `article` ENABLE KEYS */;
UNLOCK TABLES;
 
--
-- Table structure for table `category`
--
 
DROP TABLE IF EXISTS `category`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `category`
--
 
LOCK TABLES `category` WRITE;
/*!40000 ALTER TABLE `category` DISABLE KEYS */;
INSERT INTO `category` VALUES (1,'java'),(2,'sql'),(3,'javascript');
/*!40000 ALTER TABLE `category` ENABLE KEYS */;
UNLOCK TABLES;
 
--
-- Table structure for table `role`
--
 
DROP TABLE IF EXISTS `role`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `role`
--
 
LOCK TABLES `role` WRITE;
/*!40000 ALTER TABLE `role` DISABLE KEYS */;
INSERT INTO `role` VALUES (1,'admin'),(2,'user');
/*!40000 ALTER TABLE `role` ENABLE KEYS */;
UNLOCK TABLES;
 
--
-- Table structure for table `users`
--
 
DROP TABLE IF EXISTS `users`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `login` varchar(45) NOT NULL,
  `password` varchar(50) DEFAULT NULL,
  `email` varchar(45) DEFAULT NULL,
  `role_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `fk_users_role1_idx` (`role_id`),
  CONSTRAINT `fk_users_role1` FOREIGN KEY (`role_id`) REFERENCES `role` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 
--
-- Dumping data for table `users`
--
 
LOCK TABLES `users` WRITE;
/*!40000 ALTER TABLE `users` DISABLE KEYS */;
INSERT INTO `users` VALUES (1,'admin',NULL,NULL,1);
/*!40000 ALTER TABLE `users` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
 
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
 
-- Dump completed on 2017-10-15 16:29:50

Базу данных наполнили, теперь можно приступить к слою представления. Как помним слой доступа к базе данных мы уже написали в статье: Работа с базой данных MySql в Java и договорились, что в этом проекте мы пропустим слой сервисом, а будем работать непосредственно через слой DAO.

Предлагаю вывести на главную страницу сайта все статьи, которые есть в базе. Для этого переходим в наш сервлет и создаем объект ArticleDao, который отвечает за работу с сущностью статьи. private ArticleDao articleDao = new ArticleDaoImpl().

Далее нужно выбрать в список все статьи и передать их на jsp. Делается это очень просто. Нужно поместить атрибут в HttpServletRequest request переменную.

Полный вид класса HomeServlet:

Код

package com.javamaster.controller;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import com.javamaster.dao.ArticleDao;
import com.javamaster.dao.impl.ArticleDaoImpl;
import com.javamaster.entity.Article;
import com.javamaster.entity.Category;
 
/**
 * Servlet implementation class HomeServlet
 */
public class HomeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
   
    private ArticleDao articleDao = new ArticleDaoImpl();
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HomeServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = request.getServletPath();
        if (path.equals("/")){
            List<Article> articles = articleDao.getAllArticles();
            request.setAttribute("title", "Title of our application");
            request.setAttribute("articles", articles);
            request.getRequestDispatcher("/WEB-INF/view/index.jsp").forward(request, response);
        }
        else if (path.equals("/welcome")){
            request.getRequestDispatcher("/WEB-INF/view/welcome.jsp").forward(request, response);
        }
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }
 
}

Как видно из кода выше, используя метод setAttribute() можно поместить как объект, так и список объектов.

Теперь стоит задача получить наши атрибуты на странице jsp. В данном случае нам отлично поможет библиотека jstl тегов, в которой есть все необходимое для работы с объектами. В крайнем случае, Вы всегда можете написать свой собственный тег. Я обязательно напишу статью, как создавать собственные теги, но уверяю, jstl библиотеки вполне хватает для стандартных ситуаций.

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

Да, это очевидные вещи, но практика показывает, что лучше все таки об этом упомянуть. Вводим в гугле фразу jstl maven и первая ссылка будет весть на репозиторий нашей библиотеки. Или можете просто скопировать код ниже.

Код

<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

Полный код pom.xml:

Код

<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 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.javamaster</groupId>
  <artifactId>simplewebapp</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>simplewebapp Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>
   
    <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>6.0</version>
            <scope>provided</scope>
        </dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.34</version>
        </dependency>
 
       
  </dependencies>
  <build>
    <finalName>simplewebapp</finalName>
  </build>
</project>

Далее подключаем библиотеку jstl непосредственно на нашей странице: <%@ taglib prefix=«c« uri=«http://java.sun.com/jsp/jstl/core« %>

Чтобы вывести значение атрибута title можно воспользоваться тегом out: <c:out value=»${attribute}»>

В нашем случае: <title><c:out value=»${title}»></title>. Данный атрибут можно заменить на ${attribute} — выражение.

Для вывода списка объектов воспользуемся тегом forEach:

<c:forEach var="variable" items="${variableList}" >
        <tr><td><c:out value="${variable.parameter}"></td></tr>
    </c:forEach>

Строку <c:out value=«${variable.parameter}»> можно заменить на ${variable.parameter}

Пример с нашего проекта. Весь код index.jsp очень большой (никак не приведу его в порядок), так что выложу только часть. Весь код будет по ссылке в конце статьи.

Код

<!-- Articles -->
            <c:forEach items="${articles}" var="article">
            <div class="row">
                <article class="col-xs-12">
                    <h2>${article.title}</h2>
                    <p>${article.body}</p>
                    <p><button class="btn btn-default">Read More</button></p>
                    <p class="pull-right"><span class="label label-default">keyword</span> <span class="label label-default">tag</span> <span class="label label-default">post</span></p>
                    <ul class="list-inline">
                        <li><a href="#">Today</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-comment"></span> 2 Comments</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-share"></span> 8 Shares</a></li>
                    </ul>
                </article>
            </div>
            </c:forEach>

Обратите внимание: мы в атрибут var поместили просто переменную. Мы можем называть ее по собственному желанию. Потом мы используем эту переменную в выражении типа ${}. В атрибут items мы поместили то название атрибута, которое мы создали и поместили в метод setAttribute. Будьте внимательны, когда меняете названия атрибутов в сервлете. Тогда его придется поменять и в jsp.

Давайте запустим наше приложение и посмотрим, что вышло в итоге.

На этом и закончим нашу статью. Практически ничего нового мы тут не узнали. Просто хотелось показать, как использовать jstl теги на практике. На самом деле мы сейчас рассматривали теги JSTL core. Есть еще и другие: fmt, sql, xml для работы с соответственными технологиями. Я разделил эту статью на две часть и во второй часть мы рассмотрим больше тегов JSTL core и немного fmt отдельно от контекста нашего веб приложения.

Код на гит как и обещал: https://github.com/caligula95/simplewebapp-part6

И как принято, записал видео:

JSTL теги — часть 1

Добавить комментарий Отменить ответ

Понравилась статья? Поделиться ссылкой:

Еще по теме

Работа с базой данных MySql в Java

Пул соединений (Connection pool)

Подключение базы данных MySql к Java приложению. Простой сайт на Java часть 3

Добавить комментарий Отменить ответ