Maven Yapılı Spring MVC 4 Web ile AngularJS ve Bootstrap Nasıl Yapılandırılabilir ve Kullanılabilir.
Başla
Kullanılan Teknolojiler
- Maven 4.0
- Netbeans IDE 8.0.2
- Spring 4.1.6.RELEASE
- Glashfish 4.1
- Java EE 7
- Apache Tiles 3.0.5
- SLF4J 1.7.6
- AngularJS 1.4.7
- Bootstrap 3.2.0
Spring Tutorial
Spring MVC
LOG4J Kullanımı ?
LOG4J Hatası Çözümü log4j:WARN No appenders could be found for logger
Adım 1 :
Netbeans Maven Web Projesi Oluşturalım. Nasıl Oluşturulur?
Adım 2 :
Aşağıdaki Proje Yapısını Oluşturalım.
Adım 3 :
Kullanılacak Tüm Teknolojileri Projeye Bağlayalım. (pom.xml)
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.mycompany</groupId> <artifactId>MySpringMVC</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>MySpringMVC</name> <properties> <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <jstl.version>1.2</jstl.version> <javax.servlet.version>3.0.1</javax.servlet.version> </properties> <dependencies> <dependency> <groupId>javax</groupId> <artifactId>javaee-web-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <!-- spring-context which provides core functionality --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.1.6.RELEASE</version> </dependency> <!-- The spring-aop module provides an AOP Alliance-compliant aspect-oriented programming implementation allowing you to define --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>4.1.6.RELEASE</version> </dependency> <!-- The spring-webmvc module (also known as the Web-Servlet module) contains Spring’s model-view-controller (MVC) and REST Web Services implementation for web applications --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.1.6.RELEASE</version> </dependency> <!-- The spring-web module provides basic web-oriented integration features such as multipart file upload functionality and the initialization of the IoC container using Servlet listeners and a web-oriented application context --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.1.6.RELEASE</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>${javax.servlet.version}</version> <scope>provided</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>${jstl.version}</version> </dependency> <!--Twitter Bootstrap--> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.2.0</version> <exclusions> <exclusion> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>2.1.1</version> </dependency> <!--AngularJS--> <dependency> <groupId>org.webjars.bower</groupId> <artifactId>angularjs</artifactId> <version>1.4.7</version> </dependency> <!--Apache Tiles--> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-extras</artifactId> <version>3.0.5</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.6</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>1.7.6</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.7</source> <target>1.7</target> <compilerArguments> <endorseddirs>${endorsed.dir}</endorseddirs> </compilerArguments> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <version>2.6</version> <executions> <execution> <phase>validate</phase> <goals> <goal>copy</goal> </goals> <configuration> <outputDirectory>${endorsed.dir}</outputDirectory> <silent>true</silent> <artifactItems> <artifactItem> <groupId>javax</groupId> <artifactId>javaee-endorsed-api</artifactId> <version>7.0</version> <type>jar</type> </artifactItem> </artifactItems> </configuration> </execution> </executions> </plugin> </plugins> </build> </project>
Adım 4 :
(tiles.xml) Template belirleyelim
Adım 5 :
(log4j.properties)Loglama İçin Gerekli Tanımlamarı Yapalım. Projeyi Build Edelim.
log4j.rootLogger=INFO, CONSOLE log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout log4j.appender.CONSOLE.layout.ConversionPattern=%d{ABSOLUTE} %-5p [%c{1}:%L] %m%n
Adım 6 :
template.jsp
<%-- Document : template Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set> <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="${cp}/resources/css/site.css" /> <link rel='stylesheet' href='${cp}/webjars/bootstrap/3.2.0/css/bootstrap.min.css'> </head> <body> <div class="container"> <div class="row" style="background-color: burlywood;"> <div class="header col-md-12"> <tiles:insertAttribute name="header" /> </div> </div> <div class="row" > <div class="menu col-md-4" style="background-color: coral;"> <tiles:insertAttribute name="menu" /> </div> <div class="body col-md-8" style="background-color: antiquewhite;"> <tiles:insertAttribute name="body" /> </div> </div> <div class="row" style="background-color: chartreuse;"> <div class="footer col-md-12"> <tiles:insertAttribute name="footer" /> </div> </div> </div> <!--Script Bootstrap & Jquery --> <script type="text/javascript" src="${cp}/webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="${cp}/webjars/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="${cp}/webjars/angularjs/1.4.7/angular.min.js"></script> <script type="text/javascript" src="${cp}/resources/js/app.js"></script> </body> </html>
Adım 7 :
body.jsp,header.jsp,footer.jsp dosyalarını şimdilik aşağıdaki gibi sadece belirtelim.
<%-- Document : footer Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <h1>Footer</h1> </body> </html>
Adım 8 :
menu.jsp sayfasını bootstrap kullanmak amacıyla biraz özelleştirelim.
<%-- Document : menu Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <h1>List</h1> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="${cp}/">AnaSayfa</a></li> <li role="presentation"><a href="${cp}/page1">Page1</a></li> <li role="presentation"><a href="${cp}/page2">Page2</a></li> </ul> </body> </html>
Adım 9 :
index.jsp (Dikkat! Sadece template body kısmı override ediliyor.)
<%-- Document : index Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <c:set var="cp" value="${pageContext.request.servletContext.contextPath}" scope="request"></c:set> <!DOCTYPE html> <tiles:insertDefinition name="defaultTemplate" > <tiles:putAttribute name="body" > <body ng-app="myModule"> <h1>Hello World!</h1> <h2${msg}</h2> <h2> <div ng-controller="MyController"> {{myValue}} </div> <c:out value="JSTL Hello World!"></c:out> </h2> <button type="button" class="btn btn-success" id="bas">Click mE</button> </tiles:putAttribute> </tiles:insertDefinition>
Adım 10 :
page1.jsp (Müdahale edilmemiş sayfa)
<%-- Document : page1 Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <!DOCTYPE html> <tiles:insertDefinition name="defaultTemplate" />
Adım 11 :
page2.jsp (Şablonun body kısmı değiştirilmiş.)
<%-- Document : page2 Author : gurkan --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <!DOCTYPE html> <tiles:insertDefinition name="defaultTemplate" > <tiles:putAttribute name="body" > Ben Tasarım Yapılmış Body <input type="button" value="Bootstrap" class="btn btn-success" /> </tiles:putAttribute> </tiles:insertDefinition>
Adım 12 :
app.js (AngularJS ve JQuery Testi İçin Basit Örnek) Ayrıca site.css ile de özelleştirme yapabiliriz.
(function (){ var app = angular.module('myModule', []); app.controller('MyController', ['$scope', function($scope) { $scope.myValue = 'AngularJS Merhaba Dünya!'; }]); })(); $(document).ready(function(){ $('#bas').click(function(){ alert("Bana Tiklandi."); }); });
Adım 13 :
Config.java
package com.mycompany.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.ViewResolver; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; import org.springframework.web.servlet.view.InternalResourceViewResolver; import org.springframework.web.servlet.view.JstlView; import org.springframework.web.servlet.view.UrlBasedViewResolver; import org.springframework.web.servlet.view.tiles3.TilesConfigurer; import org.springframework.web.servlet.view.tiles3.TilesView; @Configuration @ComponentScan("com.mycompany") @EnableWebMvc public class Config extends WebMvcConfigurerAdapter{ @Bean public UrlBasedViewResolver xmlViewResolver(){ UrlBasedViewResolver resolver = new UrlBasedViewResolver(); resolver.setViewClass(TilesView.class); resolver.setOrder(1); return resolver; } @Bean public TilesConfigurer tilesConfigurer() { TilesConfigurer tilesConfigurer = new TilesConfigurer(); tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles.xml" }); tilesConfigurer.setCheckRefresh(true); return tilesConfigurer; } @Bean public ViewResolver viewResolver(){ InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); viewResolver.setViewClass(JstlView.class); viewResolver.setPrefix("/WEB-INF/jsp/view/"); viewResolver.setSuffix(".jsp"); viewResolver.setOrder(0); return viewResolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //css ve js ulaşmak için registry.addResourceHandler("/resources/**").addResourceLocations("/WEB-INF/resources/"); //bootstrap ve jquery sağlayan webjars ulaşmak için registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/"); } }
Adım 14 :
WebInitializer.java
package com.mycompany.config; import javax.servlet.ServletRegistration.Dynamic; import javax.servlet.ServletContext; import javax.servlet.ServletException; import org.springframework.web.WebApplicationInitializer; import org.springframework.web.context.support.AnnotationConfigWebApplicationContext; import org.springframework.web.servlet.DispatcherServlet; public class WebInitializer implements WebApplicationInitializer{ @Override public void onStartup(ServletContext servletContext) throws ServletException { AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext(); ctx.register(Config.class); ctx.setServletContext(servletContext); Dynamic servlet = servletContext.addServlet("dispatcher", new DispatcherServlet(ctx)); servlet.addMapping("/"); servlet.setLoadOnStartup(1); } }
Adım 15 :
DefaultController.java (LOG4J basit kullanım)
package com.mycompany.controllers; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller public class DefaultController { private static final Logger logger = LoggerFactory.getLogger(DefaultController.class); @RequestMapping(value = "/" , method = RequestMethod.GET) public String index(ModelMap map) { logger.info("index deyim"); map.put("msg", "Hello Spring 4 Web MVC!"); return "index"; } @RequestMapping(value = "/page1", method = RequestMethod.GET) public String page1() { logger.info("page1 deyim"); return "page1"; } @RequestMapping(value = "/page2", method = RequestMethod.GET) public String page2(ModelMap model) { logger.info("page2 deyim"); return "page2"; } }
Adım 15 :
Projeyi Build ve Run Edelim.
Download GitHub
Superb blog you have here but I was wondering if you knew of any community forums that cover the same topics discussed in this article? I'd really love to be a part of community where I can get advice from other knowledgeable people that share the same interest. If you have any recommendations, please let me know. Kudos! Our staffing company in chennai's team come with years of industry experience to help takent acquisitions teams find hightly-qualified professionals that align with an organization's culture, goals and objectives.
YanıtlaSil