jsp+mysql+javascript simple CRUD

let’s go—->>
structure folder contain, you look image :

connection.jsp

<%@page import="java.sql.*"  %>

<%
    Class.forName("org.gjt.mm.mysql.Driver");
    String url = "jdbc:mysql://localhost:3306/myfirst";
    String user = "root";
    String passwd = "root";
    Connection konek = DriverManager.getConnection(url,user,passwd);
    Statement sttmt = konek.createStatement();

%>

update.jsp

<%-- 

--%>
<%@include file="WEB-INF/webcon/connectmysql.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%
    String id = request.getParameter("id");
    String nama = request.getParameter("nama");
    String password = request.getParameter("password");
    
    ResultSet rs = sttmt.executeQuery("select * from admin where id ='"+ id +"'");
    rs.next();
%>

actiontambah.jsp


<%-- 

--%>
<%@include file="WEB-INF/webcon/connectmysql.jsp" %>

<%
    String id = request.getParameter("id");
    String nama = request.getParameter("nama");
    String password = request.getParameter("password");

    sttmt.executeUpdate
            ("insert into admin(id,nama,password) values ('"+ id +"','"+ nama +"','"+ password +"')");



%>
<jsp:forward page="index.jsp"></jsp:forward>

index.jsp

<%-- 
    Document   : index
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="WEB-INF/webcon/connectmysql.jsp"  %>
<link rel="stylesheet" type="text/css" href="css/CSS.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/junction.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%
    ResultSet rsKon = sttmt.executeQuery("Select * from admin order by id asc limit 8 ");
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div id="wrapper"> <!-- body main -->
            <div id="page-container">
                <ul id="page" class="jcarousel-skin-tango">

                    <li>
                        <span class="content">
        <h1><b>SAMPLE JSP CREATE,UPDATE,DELETE WITH JQUERY</b></h1>
         <br><br>
        <table border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>nama</th>
                    <th>password</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <%
                while(rsKon.next()){
                    String id = rsKon.getString(1);
                    String nama = rsKon.getString(2);
                    String password = rsKon.getString(3);

            %>
            <tbody>
                <tr>
                    <td><%=id%></td>
                    <td><%=nama%></td>
                    <td><%=password%></td>        
                    <td>
                        <a href="Update.jsp?id=<%= id %>"><b>Update</b></a><b> | </b>
                        <a href="./DeleteData?id=<%= id %>"><b>delete</b></a>
                    </td>
                </tr>
                 <%
                    }
                 %>
                
            </tbody>
        </table>
                 <br><br><br><br><br>
                 <b>Click here to create data</b>
                 <a class="control" href="#" onClick="jq.validationEngine.closePrompt('.formError',true)">2</a>

                 </span>
                 </li>

                 <li>
                     <span class="content">
                <br>
                <br>
                <form name="actiontambah" action="actiontambah.jsp" method="POST">
                    <table border="1" id="margintable">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>input</th>
                               
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="100">id</td>
                                <td><input type="text" name="id" value="" size="60" /></td>
                                
                            </tr>
                            <tr>
                                <td width="100">nama</td>
                                <td><input type="text" name="nama" value="" size="60" /></td>
                                
                            <tr>
                                <td width="100">password</td>
                                <td><input type="text" name="password" value="" size="60" /></td>
                                
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="submit" value="POST" name="kirim" /></td>
                            </tr>
                        </tbody>
                    </table>
                     
                </form>
                 <br><br><br><br><br>
                <a class="control2" href="#" onClick="jq.validationEngine.closePrompt('.formError',true)">1</a>   </span>
                </li>
                <br>

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


DeleteData.java

package javaweb;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 *
 * @author ???-blackhat
 */
public class DeleteData extends HttpServlet {
    //redirect to jsp
   private String indexpage = "index.jsp";
    /** 
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            Class.forName("org.gjt.mm.mysql.Driver");
            String url = "jdbc:mysql://localhost:3306/myfirst";
            String user = "root";
            String passwd = "root";
            Connection con = DriverManager.getConnection(url,user,passwd);
            Statement sttmt = con.createStatement();


            String id = request.getParameter("id");
            String query =  "Delete from admin where id = '"+ id +"'";
            sttmt.executeUpdate(query);
            /* TODO output your page here
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet DeleteData</title>");  
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Servlet DeleteData at " + request.getContextPath () + "</h1>");
            out.println("</body>");
            out.println("</html>");
            */
        } catch(Exception e) {
            out.println("error" + e);
            //out.close();
        }
        out.println("<b>Data sudah dihapus</b>");
        out.println("<a href=\'index.jsp'>klik disini atau redirect automatically</a>");
        response.sendRedirect(indexpage);
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
     * Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
     * Returns a short description of the servlet.
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

UpdateData.java

package javaweb;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author ???-blackhat
 */
public class UpdateData extends HttpServlet {

    private String index = "index.jsp";
    /** 
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            Class.forName("org.gjt.mm.mysql.Driver");
            String url = "jdbc:mysql://localhost:3306/myfirst";
            String user = "root";
            String passwd = "root";
            Connection con = DriverManager.getConnection(url,user,passwd);
            Statement sttmt = con.createStatement();

            String idLama = request.getParameter("idLama");
            String id = request.getParameter("id");
            String nama = request.getParameter("nama");
            String password = request.getParameter("password");

            
            String query = "Update admin set id = '"+ id +"',nama = '"+ nama +"',password = '"+ password +"' where id = '"+ id +"'";
            sttmt.executeUpdate(query);
           
           
           
        } catch(Exception e) {
            out.println("error" + e);
            
            //out.close();
        }
        response.sendRedirect(index);
    } 

sekian dan terimakasih…untuk penjelasannya silahkan comment, guwe males nulis banyak…:D

10 thoughts on “jsp+mysql+javascript simple CRUD

  1. Thanks for the tutorial, do you have the source code for this? maybe you can upload so that we download. thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s