Login Project using Spring MVC
Download Jar Files from below Jar File
index.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Inventory Management</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
.j1 .jumbotron{
background: #0f0c29; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 200px;
}
.jumbotron h1{
color: white;
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align:center;
}
.panel-login>.panel-heading a{
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
color: #029f5b;
font-size: 18px;
}
.panel-login>.panel-heading hr{
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
.btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}
</style>
<script type="text/javascript">
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="j1">
<div class="jumbotron jumbotron-fluid" align="center">
<h1>Inventory Management</h1>
</div>
</div>
<div class="j2">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<a class="active" id="login-form-link">Login</a>
</div>
<div class="col-xs-6">
<a id="register-form-link">Register</a>
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="login" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="email" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
<form id="register-form" action="register" method="post" role="form" style="display: none;">
<div class="form-group">
<input type="text" name="name" id="name" tabindex="1" class="form-control" placeholder="Name" value="">
</div>
<div class="form-group">
<input type="tel" name="mobile" id="mobile" tabindex="1" class="form-control" placeholder="Mobile" value="">
</div>
<div class="form-group">
<input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="Address" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<div class="form-check">
<label class="form-check-label" for="sellor"><input class="form-check-input" type="radio" name="vendortype" id="sellor" value="sellor">
sellor
</label>
<label class="form-check-label" for="buyer"><input class="form-check-input" type="radio" name="vendortype" id="buyer" value="buyer">
buyer
</label>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
com.springmvc - InventoryController
package com.springmvc;
import java.util.List;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class InventoryController {
@Autowired
private InventoryDao inventorydao;
@RequestMapping(value="login", method=RequestMethod.POST)
public String getLogin(@ModelAttribute("login") LoginForm login, HttpSession session) {
List<VendorForm> user = inventorydao.getLoginUser(login);
if(user == null)
{
session.setAttribute("logstatus", "logfailed");
System.out.println(user);
return "redirect:/";
}else {
session.setAttribute("logstatus", "logsuccess");
return "Homepage";
}
}
@RequestMapping(value="register", method=RequestMethod.POST)
public String getRegister(@ModelAttribute("vendorform") VendorForm vendorform,HttpSession session) {
int user = inventorydao.reguser(vendorform);
if(user < 0) {
session.setAttribute("regstatus", "regfailed");
return "redirect:/";
}else {
session.setAttribute("regstatus", "regsuccess");
return "Homepage";
}
}
}
InventoryDao
package com.springmvc;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
public class InventoryDao {
private JdbcTemplate jdbcTemplate;
public JdbcTemplate getJdbcTemplate() {
return jdbcTemplate;
}
public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
this.jdbcTemplate = jdbcTemplate;
}
public List<VendorForm> getLoginUser(LoginForm login) {
String sql = "select * from invdata where email='"+login.getEmail()+"' and password='"+login.getPassword()+"'";
List<VendorForm> users = jdbcTemplate.query(sql, new RowMapper<VendorForm>() {
@Override
public VendorForm mapRow(ResultSet rs, int arg1) throws SQLException {
VendorForm form = new VendorForm();
form.setEmail(rs.getString("email"));
form.setPassword(rs.getString("password"));
return form;
}
});
List<VendorForm> list = users.size()>0?users:null;
return list;
}
public int reguser(VendorForm vendorform) {
String sql = "insert into invdata values('"+vendorform.getName()+"','"+vendorform.getAddress()+"','"+vendorform.getMobile()+"','"+vendorform.getEmail()+"','"+vendorform.getPassword()+"','"+vendorform.getVendortype()+"')";
return jdbcTemplate.update(sql);
}
}
LoginForm
package com.springmvc;
public class LoginForm {
private String email;
private String password;
private String vendorType;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getVendorType() {
return vendorType;
}
public void setVendorType(String vendorType) {
this.vendorType = vendorType;
}
}
VendorForm
package com.springmvc;
public class VendorForm {
private String name;
private String address;
private String mobile;
private String email;
private String password;
private String vendortype;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getVendortype() {
return vendortype;
}
public void setVendortype(String vendortype) {
this.vendortype = vendortype;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
spring-servlet
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="com.springmvc"/>
<mvc:annotation-driven/>
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<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=""></property>
</bean>
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource" ref="dataSource"></property>
</bean>
<bean id="inventorydao" class="com.springmvc.InventoryDao">
<property name="jdbcTemplate" ref="jdbcTemplate"></property>
</bean>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
<property name="prefix">
<value>/WEB-INF/view/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
</beans>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>InventoryManagement</display-name>
<absolute-ordering></absolute-ordering>
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
view/Homepage.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Grandstander&display=swap");
body {
font-family: "Grandstander", cursive;
}
* {
margin: 0;
padding: 5px;
box-sizing: border-box;
}
.container {
height: 100vh;
width: 100%;
}
.side-nav,
.nav-menu {
height: 100%;
}
.side-nav .nav-menu {
list-style: none;
padding: 40px 0;
width: 240px;
background-color: #3498db;
}
.side-nav .nav-item {
position: relative;
padding: 10px 20px;
}
.nav-item.active {
background-color: #fff;
box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}
.nav-item.active a {
color: #2980b9;
}
.nav-item a {
text-decoration: none;
color: #fff;
}
.menu-text {
padding: 0 20px;
}
.side-nav .nav-item.active::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 100%;
width: 20px;
border-bottom-right-radius: 25px;
box-shadow: 0 20px 0 0 #fff;
}
.side-nav .nav-item.active::after {
content: "";
position: absolute;
background-color: transparent;
top: 100%;
right: 0;
height: 100%;
width: 20px;
border-top-right-radius: 25px;
box-shadow: 0 -20px 0 0 #fff;
}
.body-main {
background: #ffffff;
border-bottom: 15px solid #1E1F23;
border-top: 15px solid #1E1F23;
margin-top: 30px;
margin-bottom: 30px;
padding: 40px 30px !important;
position: relative;
box-shadow: 0 1px 21px #808080;
font-size: 10px
}
.main thead {
background: #1E1F23;
color: #fff
}
.img {
height: 200px;
}
h1 {
text-align: center
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-3">
<nav class="side-nav">
<ul class="nav-menu">
<li class="nav-item active" ><a href="#" id="unitform" ><i class="fas fa-play"></i><span class="menu-text">Unit Form</span></a></li>
<li class="nav-item"><a href="#" id="itemform"><i class="fas fa-sitemap"></i><span class="menu-text">Item Form</span></a></li>
<li class="nav-item"><a href="#" id="vendorform"><i class="fas fa-play"></i><span class="menu-text">Vendor Form</span></a></li>
<li class="nav-item"><a href="#" id="purchaseform"><i class="fas fa-play "></i><span class="menu-text">Purchase Order</span></a></li>
<li class="nav-item"><a href="#" id="inventoryform"><i class="fas fa-play "></i><span class="menu-text">Billing Report</span></a></li>
</ul>
</nav>
</div>
<div class="col col-lg-9">
<form id="uform" action="uform1" method="post" role="form" style="display: block; padding-left: 20%;padding-right: 20%; padding-top:10%;">
<div class="form-group">
<input type="text" id="unitid" tabindex="1" class="form-control" value="unitid" name="unitid" disabled="disabled">
<button type="button" onclick="myFunction()">Generate Unit Id</button>
</div>
<div class="form-group">
<input type="text" name="unitname" id="unitname" tabindex="2" class="form-control" placeholder="Unit Name">
</div>
<div class="form-group">
<input type="number" name="quantity" id="quantity" tabindex="3" class="form-control" placeholder="unit quantity">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Add">
</div>
</div>
</div>
</form>
<form id="iform" action="iform1" method="post" role="form" style="display: block; padding-left: 20%;padding-right: 20%; padding-top:10%;">
<div class="form-group">
<input type="number" name="itemcode" id="itemcode" tabindex="1" class="form-control" placeholder="Item Code" value="" onclick="myFunctionItem()">
</div>
<div class="form-group">
<select class="form-select" aria-label="Default select example" name="ptype">
<option selected disabled="disabled">Unit Type</option>
<option >${name}</option>
</select>
</div>
<div class="form-group">
<input type="text" name="itemname" id="itemname" tabindex="2" class="form-control" placeholder="Item Name">
</div>
<div class="form-group">
<input type="text" name="quantity" id="quantity" tabindex="3" class="form-control" placeholder="Item Quantity">
</div>
<div class="form-group">
<input type="number" name="priceperitem" id="priceperitem" tabindex="3" class="form-control" placeholder="Price per Item">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Add">
</div>
</div>
</div>
</form>
<form id="vform" action="vform1" method="post" role="form" style="display: block; padding-left: 20%;padding-right: 20%; padding-top:10%;">
<div class="form-group">
<input type="number" name="vendorcode" id="vendorcode" tabindex="1" class="form-control" placeholder="Vendor Code" value="" onclick="myFunctionVendor()">
</div>
<div class="form-group">
<input type="text" name="name" id="name" tabindex="2" class="form-control" placeholder="Vendor Name" value="">
</div>
<div class="form-group">
<input type="text" name="address" id="address" tabindex="3" class="form-control" placeholder="Vendor Address" value="">
</div>
<div class="form-group">
<input type="tel" name="mobile" id="mobile" tabindex="4" class="form-control" placeholder="Vendor Mobile" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="5" class="form-control" placeholder="Vendor Email" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="5" class="form-control" placeholder="Password" value="">
</div>
<div class="form-group text-center">
<div class="form-check">
<label class="form-check-label" for="sellor"><input class="form-check-input" type="radio" name="vendortype" id="sellor" value="sellor">
sellor
</label>
<label class="form-check-label" for="buyer"><input class="form-check-input" type="radio" name="vendortype" id="buyer" value="buyer">
buyer
</label>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Save">
</div>
</div>
</div>
</form>
<form id="pform" action="pform1" method="post" role="form" style="display: block;">
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</form>
<form id="invform" action="invform1" method="post" role="form" id="myfrm">
<div class="container" id="myfrm">
<div class="row">
<div class="col-md-10" style="padding: 80px;">
<div class="row">
<div class="col-md-4"> <img class="img" alt="Invoce Template" src="https://www.freepnglogos.com/uploads/shopping-cart-png/shopping-cart-donations-shopping-carts-forms-membershipworks-21.png" width="200" alt="shopping cart, donations shopping carts forms membershipworks" /> </div>
<div class="col-md-8 text-right">
<h4 style="color: #F81D2D;"><strong>${vendorcode}</strong></h4>
<p>221 ,Baker Street</p>
<p>9370780286</p>
<p>himanshuitankar1@gmail.com</p>
</div>
</div> <br />
<div class="row">
<div class="col-md-12 text-center">
<h2>INVOICE</h2>
<h5 style="color: green;"><b>${vname}</b></h5>
</div>
</div> <br />
<div>
<table class="table">
<thead>
<tr>
<th>
<h5>Description</h5>
</th>
<th>
<h5>Amount</h5>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9">${itemname}</td>
<td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 50,000 </td>
</tr>
<tr>
<td class="col-md-9">JBL Bluetooth Speaker</td>
<td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 5,200 </td>
</tr>
<tr>
<td class="col-md-9">Apple Iphone 6s 16GB</td>
<td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 25,000 </td>
</tr>
<tr>
<td class="col-md-9">MI Smartwatch 2</td>
<td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 2,200 </td>
</tr>
<tr>
<td class="text-right">
<p> <strong>Shipment and Taxes:</strong> </p>
<p> <strong>Total Amount: </strong> </p>
<p> <strong>Discount: </strong> </p>
<p> <strong>Payable Amount: </strong> </p>
</td>
<td>
<p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 500 </strong> </p>
<p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 82,900</strong> </p>
<p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 3,000 </strong> </p>
<p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 79,900</strong> </p>
</td>
</tr>
<tr style="color: #F81D2D;">
<td class="text-right">
<h4><strong>Total:</strong></h4>
</td>
<td class="text-left">
<h4><strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 79,900 </strong></h4>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div class="col-md-12">
<p><b>Date :</b> 6 June 2019</p> <br />
<p><b>Signature</b></p>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myPrint('myfrm')">Print</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#uform').show();
$('#iform').hide();
$('#vform').hide();
$('#pform').hide();
$('#invform').hide();
$('#tform').hide();
});
$(document).ready(function(){
$("#unitform").click(function(){
$('#uform').show();
$('#iform').hide();
$('#vform').hide();
$('#pform').hide();
$('#invform').hide();
$('#tform').hide();
});
});
$(document).ready(function(){
$("#itemform").click(function(){
$('#uform').hide();
$('#iform').show();
$('#vform').hide();
$('#pform').hide();
$('#invform').hide();
$('#tform').hide();
});
});
$(document).ready(function(){
$("#vendorform").click(function(){
$('#uform').hide();
$('#iform').hide();
$('#vform').show();
$('#pform').hide();
$('#invform').hide();
$('#tform').hide();
});
});
$(document).ready(function(){
$("#purchaseform").click(function(){
$('#uform').hide();
$('#iform').hide();
$('#vform').hide();
$('#pform').show();
$('#invform').hide();
$('#tform').show();
});
});
$(document).ready(function(){
$("#deliveryform").click(function(){
$('#uform').hide();
$('#iform').hide();
$('#vform').hide();
$('#pform').hide();
$('#inwardform').hide();
$('#sform').hide();
$('#dform').show();
$('#invform').hide();
$('#tform').hide();
});
});
$(document).ready(function(){
$("#inventoryform").click(function(){
$('#uform').hide();
$('#iform').hide();
$('#vform').hide();
$('#pform').hide();
$('#invform').show();
$('#tform').hide();
});
});
$(document).ready(function(){
$("#enterIntoTable").click(function(){
$('#itemtable').show();
});
});
</script>
<script>
function myFunction() {
document.getElementById("unitid").value = Math.floor((Math.random() * 10000) + 1);
}
function myFunctionItem(){
document.getElementById("itemcode").value = Math.floor((Math.random() * 10000) + 1);
}
function myFunctionVendor() {
document.getElementById("vendorcode").value = Math.floor((Math.random() * 10000) + 1);
}
</script>
<script type="text/javascript">
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.print();
newwin.close();
}
</script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</html>