EMI Calculator using JSP, Servlet and Bootstrap

J2EE, Java
EMI-calculator-using-jsp-servlet-bootstrap-featured
EMI-calculator-using-jsp-servlet-bootstrap-blog

EMI Calculator using JSP, Servlet and Bootstrap:

Designing a responsive website reduces the startups to invest separately on android and ios apps. Here we are writting a very simple web application for emi calculator using JSP, Servlet and bootstrap. We used bootstrap in this to integrate responsiveness with JSP pages.

Requirement:

Download bootstrap CSS and JS files from here.
Include the bootstrap css and JS files in the head section,

download
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>EMI Calculator</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript">
		</script>
</head>

index.jsp:

Form which has amount, interest and month input text field.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
			<title>EMI Calculator</title>
			<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
			<script src="bootstrap/js/bootstrap.min.js" type="text/javascript">

			</script>
		</head>
		<body>

			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
							<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
						</button>
					</div>
					<div id="navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="http://www.ngdeveloper.com">Javadomain.in</a></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
			</nav>

			<div class="container" style="margin-top: 150px;">
				<div class="row">

					<div class="form-group">
						<form action="CalculateEMI" method="POST">
							<fieldset>

								<!-- Form Name -->
								<legend>EMI Calculator</legend>

								<!-- Text input-->
								<div class="form-group">
									<label class="col-md-4 control-label" for="amount">Enter
the amount</label>
									<div class="col-md-5">
										<input id="amount" name="amount" type="text" placeholder=""
class="form-control input-md">

										</div>
									</div>

									<!-- Text input-->
									<div class="form-group">
										<label class="col-md-4 control-label" for="rate">Enter
the Interest Rate</label>
										<div class="col-md-5">
											<input id="rate" name="rate" type="text" placeholder=""
class="form-control input-md">

											</div>
										</div>

										<!-- Text input-->
										<div class="form-group">
											<label class="col-md-4 control-label" for="month">Enter
the Number of months</label>
											<div class="col-md-5">
												<input id="month" name="month" type="text" placeholder=""
class="form-control input-md">

												</div>
											</div>

											<!-- Button -->
											<div class="form-group">
												<label class="col-md-4 control-label" for="emi"></label>
												<div class="col-md-4">
													<button id="emi" name="emi" class="btn btn-primary">Calculate
EMI</button>
												</div>
											</div>
										</fieldset>
									</form>
								</div>

							</div>
						</div>
					</div>
				</body>
			</html>

CalculateEMI.java:

Servlet file with EMI Calculation business logics in POST method.

package com.ngdeveloper;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class CalculateEMI
*/
@WebServlet("/CalculateEMI")
public class CalculateEMI extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public CalculateEMI() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String amount = request.getParameter("amount");
Double inter = Double.parseDouble(request.getParameter("rate"));
String month = request.getParameter("month");

double loanAmount = Double.parseDouble(amount);
double rateOfInterest =inter;
int numberOfMonths = Integer.parseInt(month);

double temp = 1200; //100*numberofmonths(12))
double interestPerMonth = rateOfInterest/temp;

double onePlusInterestPerMonth = 1 + interestPerMonth;

double powerOfOnePlusInterestPerMonth = Math.pow(onePlusInterestPerMonth,numberOfMonths);

double powerofOnePlusInterestPerMonthMinusOne = powerOfOnePlusInterestPerMonth-1;

double divides = powerOfOnePlusInterestPerMonth/powerofOnePlusInterestPerMonthMinusOne;

double principleMultiplyInterestPerMonth = loanAmount * interestPerMonth;

double totalEmi = principleMultiplyInterestPerMonth*divides;

double finalValue = Math.round( totalEmi * 100.0 ) / 100.0;

request.setAttribute("emi_payable", finalValue);
request.getRequestDispatcher("/emi.jsp").forward(request,response);
}
}

emi.jsp:

Page to display the calculated EMI Value.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
			<title>EMI Calculator</title>
			<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
			<script src="bootstrap/js/bootstrap.min.js" type="text/javascript">

			</script>
		</head>
		<body>

			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
							<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
						</button>
					</div>
					<div id="navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="http://www.ngdeveloper.com">Javadomain.in</a></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
			</nav>

			<div class="container" style="margin-top: 150px;">
				<!-- Text input-->
				<div class="form-group">
					<label class="col-md-4 control-label" for="textinput">EMI
Amount Payable per Month:</label>
					<div class="col-md-4">${emi_payable}</div>
				</div>
			</div>
		</body>
	</html>

Passing Value From JSP to JSP:

This can be done easily using getParameter() method. This method takes input elements name attribute value.

Passing Value From Servlet to JSP:

This can be done by setting the value in reqest.setAttribute(KEY,VALUE) and in the JSP page we can directly print the value using ${KEY}

Project Structure:

EMI Calculator using JSP, Servlet and Bootstrap


Output:

EMI Calculator using JSP, Servlet and Bootstrap
EMI Calculator using JSP, Servlet and Bootstrap
Leave a comment

Leave a Reply