Projeto JSP com JQuery-Ui e Janela Modal

Projeto em JSP com JQuery-Ui com gravação de Cliente em Banco (MySql) e Servlet, utilizando Janela Modal para o cadastro.


As Libs utilizadas no projeto:
- mysql-connector-java-5.1.23-bin.jar
- servlet3-api.jar

Não esquecer de colocar as libs do Jquery-ui na pasta WebContent:
- jquery.js
- jquery-ui.js

Criando a Classe Cliente

Atenção na formatação da data...

package entity;

import java.text.SimpleDateFormat;
import java.util.Date;

public class Cliente {
	
	private Integer idCliente;
	private String  nome;
	private Double  valorCompra;
	private Date    dataCadastro;

	
	public Cliente() {
	}

	public Cliente(Integer idCliente, String nome, Double valorCompra, Date dataCadastro) {
		this.idCliente = idCliente;
		this.nome = nome;
		this.valorCompra = valorCompra;
		this.dataCadastro = dataCadastro;
	}
	
	
	@Override
	public String toString() {
		return "Cliente [idCliente=" + idCliente + ", nome=" + nome + ", valorCompra=" + valorCompra + ", dataCadastro=" + new SimpleDateFormat("dd/MM/yyyy").format(dataCadastro) +  "]";
	}

	public Integer getIdCliente() {
		return idCliente;
	}
	public void setIdCliente(Integer idCliente) {
		this.idCliente = idCliente;
	}
	public String getNome() {
		return nome;
	}
	public void setNome(String nome) {
		this.nome = nome;
	}
	public Double getValorCompra() {
		return valorCompra;
	}
	public void setValorCompra(Double valorCompra) {
		this.valorCompra = valorCompra;
	}
	public Date getDataCadastro() {
		return dataCadastro;
	}
	public void setDataCadastro(Date dataCadastro) {
		this.dataCadastro = dataCadastro;
	}
}

Criando script do banco

Atenção quando for apagar (drop) o banco. No MySql não há necessidade de dar commit.

drop database if exists web2;

create database web2;

use web2;

 create table cliente (idCliente int primary key auto_increment,
    nome varchar (35),
    valorCompra double,
    data     date);
    
 insert into cliente values (null,'lu', 1300.,'2016/01/19' );
 insert into cliente values (null,'paulo', 700.,'2016/02/10' );
 insert into cliente values (null,'jadir', 900.,'2016/03/11' );
 
 commit;        

Classe Dao de conexão ao banco

package persistence;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class Dao {

	Connection con;
	PreparedStatement stmt;
	ResultSet rs;
	
	 public void open() throws Exception{
		 Class.forName("com.mysql.jdbc.Driver");
		 con = DriverManager.
	getConnection("jdbc:mysql://localhost:3306/web2","nome do usuario","senha");
	 }
	 
	 public void close() throws Exception{
		 con.close();
	 }
}    

Criando uma interface genérica

package persistence;

import java.util.List;

public interface IClasseDao {
 
	 public T create(Classe c) throws Exception;
	 public List findAll();
	 public void update(Classe c) throws Exception;
	 public void delete(T t) throws Exception;
	 public Classe findByCode(T t)throws Exception;
}    

Criando Cliente Dao

package persistence;

import java.sql.PreparedStatement;
import java.util.Date;
import java.util.List;

import entity.Cliente;

public class ClienteDao extends Dao 
  implements IClasseDao{

	@Override
	public Integer create(Cliente c) throws Exception {
		 open();
		   stmt = con.
	        prepareStatement("insert into cliente values(null,?,?,?)",
	        	PreparedStatement.RETURN_GENERATED_KEYS);
		   stmt.setString(1, c.getNome());
		   stmt.setDouble(2, c.getValorCompra());
		    java.sql.Date datasql =
		      new java.sql.Date(c.getDataCadastro().getTime());
		    stmt.setDate(3, datasql);
		    stmt.execute();
		    rs = stmt.getGeneratedKeys();
		    rs.next();
		    int chave = rs.getInt(1);
		 close();
		 return chave; 
	}
	
	@Override
	public List findAll() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void update(Cliente c) throws Exception {
		// TODO Auto-generated method stub
	}

	@Override
	public void delete(Integer t) throws Exception {
		// TODO Auto-generated method stub
	}

	@Override
	public Cliente findByCode(Integer t) throws Exception {
		// TODO Auto-generated method stub
		return null;
	}
}    

No banco:

Criando o Servlet

package control;

import java.io.IOException;
import java.util.Date;

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

import entity.Cliente;
import persistence.ClienteDao;
 
@WebServlet("/Controle")
public class Controle extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

	 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try{

	     String nome= request.getParameter("nome");
	     Double valor= new Double(request.getParameter("valorcompra"));
		 String data = request.getParameter("data");
	
		 Date data2= new Date(data.substring(3, 5)+ "/" + 
		                      data.substring(0,2) + "/" +
				              data.substring(6,10)
				            );

		 
		 ClienteDao cd = new ClienteDao();
		 Cliente c = new Cliente(null,nome,valor, data2);
		         c.setIdCliente( cd.create(c)  );
		 response.getWriter().print( "Dados :" + c );
//Imprime aqui aparece direto na view (ajax) ...
		}catch(Exception ex){
			response.getWriter().print(ex.getMessage());
		}
	}
}        

Criando a página index.jsp

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-ui/external/jquery/jquery.js"></script>
  <script src="jquery-ui/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css">

<script>
$(function(){
	
	 $("#tela").hide();
	 $("#btnenviar, #cadastrar").button();
     $("#data").datepicker({
    	  dateFormat : 'dd/mm/yy'
       });
     
     
     $("#cadastrar").on('click',function(){
    	   $(".limpar").val("");
    	   $("#resp").html("");
           $('#tela').dialog({modal : true}); 
     });
     
     
      
      $("#btnenviar").on('click',function(){
    	  $.post('Controle',
    			   {
    		        nome : $("#nome").val(),
    		        valorcompra : $("#valorcompra").val(),
    		        data : $("#data").val()
    			   },
    		  function(result){
    				   $("#resp").html(result);
    			   }
    			);   
    	  return false;
      });
      
}); 	  
</script>
</head>
<body>
  <h3>Dados do Cliente</h3>
   <a href="#" id="cadastrar">Cadastrar</a>
   <hr/>
   
<div id="tela" title="Sistema do Cliente">
   <form>
     Nome:<br/>
     <input type="text" name="nome" id="nome" class="limpar" />
   <br/><br/>
     Valor Compra:<br/>
     <input type="text" name="valorcompra" id="valorcompra" class="limpar" />
   <br/><br/>
     Data Cadastro:<br/>
     <input type="text" name="data" id="data" class="limpar" />
   <br/><br/>
     <input type="submit" value="Enviar" id="btnenviar" />
   </form>
     <div id="resp" class="limpar"></div>
  </div>
   </body>
</html>