How to add static resources in Spring MVC Java Images CSS

Description

It is a descriptive videos tutorial for using static resources like Images, CSS and Javascript in Spring mvc. If you need source code or program of this video tutorial, please write down your email address in comments so that I may send you code

Static Resources in Spring MVC Java Images CSS and JavaScript

Let's add Static resources like CSS, Images, and JavaScript in our previous spring project. You need to add some additional things for importing JavaScript file in view.

Note: We are going to do following things.

Add the resource mapping
Create a new directory css
Add a new style.css file
Create a new directory img
Add a new image
Create a new directory script
Add a new file myscript.js
update users.jsp view.

Step 1: Add the resource mapping

Note: Add code for mapping resource directory in applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

<!-- Enable autowire -->
	<context:annotation-config ></context:annotation>
 	<context:component-scan base-package="com" ></context:component>
 	
	<mvc:annotation-driven ></mvc:annotation> 
	<mvc:resources mapping="/resources/**" location="/resources/" ></mvc:resources>
	
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver" ></property>
		<property name="url" value="jdbc:mysql://localhost:3306/test" ></property>
		<property name="username" value="root" ></property>
		<property name="password" value="12345" ></property>
	</bean>

	<!-- Session Factory Declaration -->
	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
		<property name="dataSource" ref="dataSource" ></property>
		<property name="packagesToScan" value="com.entities" ></property>
		<property name="hibernateProperties">
			<props>
				<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
				<prop key="hibernate.show_sql">true</prop>
				<prop key="hibernate.enable_lazy_load_no_trans">true</prop>
				<prop key="hibernate.default_schema">test</prop>
				<prop key="format_sql">true</prop>
				<prop key="use_sql_comments">true</prop>
				<!-- <prop key="hibernate.hbm2ddl.auto">create</prop> -->
			</props>
		</property>
	</bean>

	<tx:annotation-driven transaction-manager="transactionManager" ></tx:annotation>
	
	 <bean id="transactionManager"
        class="org.springframework.orm.hibernate4.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory" ></property>
    </bean>
</beans>

Step 2: Create a new directory "css"

Note: Create a new css folder in webapp/resources/ directory.

Step 3: Add a new CSS file

Note: Add new css file named style.css in webapp/resources/css directory

@CHARSET "ISO-8859-1";
body{
	background-color:#0D7;
}

table {
	width:50%;
}

table th{
	background-color:#888;
}

table tr{
	background-color:white;
}

button{
	background-color: black;
    color: white;
    width: 12%;
    height: 40px;
}

Step 4: Create a new directory "img"

Note: Create a new img folder in webapp/resources/img directory.

Step 5: Add a new image file

Note: Copy following image file and add to webapp/resources/img

SindhiTutorials

Step 6: Create a new directory "script"

Note: Create a new script folder in webapp/resources/ directory

Step 7: Add a new script file.

Note: Add a new script file named myscript.js in webapp/resources/script. I have moved script from view to this file.

/**
 * 
 */
	data = "";
	submit = function(){
		 
			$.ajax({
				url:'saveOrUpdate',
				type:'POST',
				data:{user_id:$("#user_id").val(),user_name:$('#name').val(),email:$('#email').val()},
				success: function(response){
						alert(response.message);
						load();		
				}				
			});			
	}
	
	delete_ = function(id){		 
		 $.ajax({
			url:'delete',
			type:'POST',
			data:{user_id:id},
			success: function(response){
					alert(response.message);
					load();
			}				
		});
}
	
	edit = function (index){
		$("#user_id").val(data[index].user_id);
		$("#name").val(data[index].user_name);
		$("#email").val(data[index].email);
		
	}
	
	load = function(){	
		$.ajax({
			url:'list',
			type:'POST',
			success: function(response){
					data = response.data;
					$('.tr').remove();
					for(i=0; i<response.data.length; i++){					
						$("#table").append("<tr class='tr'> <td> "+response.data[i].user_name+" </td> <td> "+response.data[i].email+" </td> <td> <a href='#' onclick= edit("+i+");> Edit </a>  </td> </td> <td> <a href='#' onclick='delete_("+response.data[i].user_id+");'> Delete </a>  </td> </tr>");
					}			
			}				
		});
		
	}

Step 8: Update existing view

Add code for tag library.
Add code for importing css file.
Add code for importing JavaScript file.
Add code for importing Image file.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Users</title>
<link rel="stylesheet" href="<c:url value="/resources/css/style.css"></c:url>">
<script type="text/javascript" src="<c:url value="/resources/script/myscript.js"></script>"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>

<body onload="load();">
		<input type="hidden" id="user_id">
		Name: <input type="text" id="name" required="required" name="user_name"><br>
		Email: <input type="email" id="email" required="required" name="email"><br>
		<button onclick="submit();">Submit</button>
	
		<table id="table" border=1>
			<tr> <th> Name </th> <th> Email </th> <th> Edit </th> <th> Delete </th> </tr>
		
		</table>
			
	<img src="<c:url value="/resources/img/sindhitutorials.png"></c:url>"/>	
</body>
</html>

If you need help for your project to use static resources like css file, javascript file and image in spring mvc, please comment blow so that We may reply you asap