Membuat Aplikasi CRUD (Create, Read, Update, Delete) dengan JSP dan MySQL

Pada tutorial kali ini penulis akan membahas cara membuat sebuah aplikasi dasar dari semua aplikasi yang memerlukan database sebagai penyimpanan datanya, sebenarnya aplikasi yang menggunakan database datanya dapat dinamis karena gak cuma hanya digunakan pada suatu platform saja tapi bisa digunakan untuk data berbagai aplikasi asal bertujuan sama tetapi program dan bahasa pemrogramannya berbeda.

Untuk bisa membuat aplikasi dasar ini yaitu membuat aplikasi crud maka dibutuhkan aplikasi ide dan aplikasi database, untuk mendapatkan semuanya silahkan download disitus resmi mereka. Program ide yang akan digunakan adalah netbeans (java) dan mysql (database).

Pertama tama yang harus dibuat adalah database, buka aplikasi mysql atau bisa menggunakan tool-tool DBMS seperti phpmyadmin atau mysql workbench, untuk syntaxnya lihat dibawah ini.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `biodata` (
  `kode` varchar(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `kelamin` varchar(20) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  `ortu` varchar(45) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `biodata` (`kode`, `nama`, `kelamin`, `alamat`, `ortu`) VALUES
('11111', 'Ghazali', 'Laki-laki', 'Sigli', 'Zulkifli'),
('11112', 'Julinda', 'Perempuan', 'Ulim', 'Yusuf'),
('11113', 'Monicha', 'Perempuan', 'Bambi', 'Rahman'),
('11113', 'Andrian', 'Laki-laki', 'Bambi', 'Ramli'),
('11115', 'Andrian', 'Laki-laki', 'Krung', 'Ramli'),
('12345', 'Reza', 'Laki-laki', 'Desa', 'Kure');

Buatlah sebuah project dengan nama apa saja terserah anda namun disini penulis menggunakan nama WebCrud dan buatlah file jspnya seperti syntax dan filenya dibawah ini.

index.jsp

<%-- 
    Document   : index
    Created on : Feb 13, 2014, 7:44:48 PM
    Author     : ghazali
--%>

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div id="con">
            <h3 align="center">Aplikasi Crud JSP dan MySQL</h3>
            <a href="tambah.jsp">Tambah</a>
            <p></p>
            <%
            try {
                String Host = "jdbc:mysql://localhost:3306/basisdata";
                Connection connection = null;
                Statement statement = null;
                ResultSet rs = null;
                Class.forName("com.mysql.jdbc.Driver");
                connection = DriverManager.getConnection(Host, "root", "kodokijo");
                statement = connection.createStatement();
                String Data = "select * from crud";
                rs = statement.executeQuery(Data);
            %>
            <table border="1" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Tanggal Lahir</th>
                    <th>Jenis Kelamin</th>
                    <th>Alamat</th>
                    <th>Aksi</th>
                </tr>
                <%
                while (rs.next()) {
                %>
                <tr>
                    <td><%=rs.getString("kode")%></td>
                    <td><%=rs.getString("nama")%></td>
                    <td><%=rs.getString("tgl")%></td>
                    <td><%=rs.getString("jk")%></td>
                    <td><%=rs.getString("alamat")%></td>
                    <td><a href="update.jsp?u=<%=rs.getString("kode")%>" >edit</a> / <a href="delete.jsp?d=<%=rs.getString("kode")%>" > hapus</a></td>
                </tr>
                <%   }    %>
            </table>
            <%
                rs.close();
                statement.close();
                connection.close();
            } catch (Exception ex) {
                out.println("Can't connect to database.");
            }
            %>
        </div>
    </body>
</html>

crudjsp-352016
tambah.jsp

<%-- 
    Document   : tambah
    Created on : Feb 13, 2014, 8:05:40 PM
    Author     : ghazali
--%>

<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            *{margin:auto;padding:0;}
            #con2{width:500px;padding:30px;}
            p{margin-bottom:10px;}
            label{display:inline-block;width:150px;}
        </style>
    </head>
    <body>
        <div id="con2">
            <h3 align="center">Tambah Data</h3><p></p>
            <form action="" method="post">
                <p>
                    <label>Kode</label><input type="text" name="kode"/>
                </p>
                <p>
                    <label>Nama</label><input type="text" name="nama"/>
                </p>
                <p>
                    <label>Tanggal Lahir</label><input type="text" name="tgl" placeholder="YYYY-MM-DD"/>
                </p>
                <p>
                    <label>Jenis Kelamin</label>
                    <input type="radio" name="jk" value="Laki-laki"/> Laki-laki
                    <input type="radio" name="jk" value="Perempuan"/> Perempuan
                </p>
                <p>
                    <label>Alamat</label><input type="text" name="alamat"/>
                </p>
                <p>
                    <label></label><input type="submit" name="submit" value="Simpan"/>
                    <a href="index.jsp">Kembali</a>
                </p>
            </form>
        </div>
    </body>
</html>
<%


String a=request.getParameter("kode");
String b=request.getParameter("nama");
String c=request.getParameter("tgl");
String d=request.getParameter("jk");
String e=request.getParameter("alamat");

//membuat variabel untuk nampung alamat untuk akses database nantinya.

String url="jdbc:mysql://localhost:3306/basisdata";

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

Class.forName("com.mysql.jdbc.Driver").newInstance();

int updateQuery=0;


//untuk mengecek textbox name, city, dan phone tidak kosong

if(a!=null && b!=null && c!=null && d!=null && e!=null){


    if(a!="" && b!="" && c!="" && d!="" && e!=""){
         try{
        conn=DriverManager.getConnection(url,"root","kodokijo");
        String query="Insert into crud(kode,nama,tgl,jk,alamat) values(?,?,?,?,?)";
        ps=conn.prepareStatement(query);
        ps.setString(1,a);
        ps.setString(2,b);
        ps.setString(3,c);
        ps.setString(4,d);
        ps.setString(5,e);
        updateQuery=ps.executeUpdate();
        if(updateQuery!=0){
            JOptionPane.showMessageDialog(null, "Berhasil Tambah Data");
            response.sendRedirect("index.jsp");
        }

    }catch(Exception ex){
        out.println("Koneksi bermasalah");
        
 
    }finally{
        ps.close();
        conn.close();
    }


    }
}
%>

tambahjsp-352016
update.jsp

<%-- 
    Document   : update
    Created on : Feb 13, 2014, 8:29:16 PM
    Author     : ghazali
--%>

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            *{margin:auto;padding:0;}
            #con2{width:500px;padding:30px;}
            p{margin-bottom:10px;}
            label{display:inline-block;width:150px;}
        </style>
    </head>
    <body>
        <div id="con2">
            <h3 align="center">Update Data</h3><p></p>
            <form action="" method="post">
                 <%
                try {
                    String Host = "jdbc:mysql://localhost:3306/basisdata";
                    Connection connection = null;
                    Statement statement = null;
                    ResultSet rs = null;
                    Class.forName("com.mysql.jdbc.Driver");
                    connection = DriverManager.getConnection(Host, "root", "kodokijo");
                    statement = connection.createStatement();
                    String u=request.getParameter("u");
                    int num=Integer.parseInt(u);
                    String Data = "select * from crud where kode='"+num+"'";
                    rs = statement.executeQuery(Data);
                    while (rs.next()) {
                %>   
                <p>
                    <label></label><input type="hidden" name="kode" value='<%=rs.getString("kode")%>'/>
                </p>
                <p>
                    <label>Nama</label><input type="text" name="nama" value='<%=rs.getString("nama")%>'/>
                </p>
                <p>
                    <label>Tanggal Lahir</label><input type="text" name="tgl"  value='<%=rs.getString("tgl")%>'/>
                </p>
                <p>
                    <label>Jenis Kelamin</label>
                    <input type="radio" name="jk" value="Laki-laki"/> Laki-laki
                    <input type="radio" name="jk" value="Perempuan"/> Perempuan
                </p>
                <p>
                    <label>Alamat</label><input type="text" name="alamat" value='<%=rs.getString("alamat")%>'/>
                </p>
                <p>
                    <label></label><input type="submit" name="submit" value="Update"/>
                    <a href="index.jsp">Kembali</a>
                </p>
                <%   }
                    rs.close();
                    statement.close();
                    connection.close();
                } catch (Exception ex) {
                    out.println("Can't connect to database.");
                }
                %>
            </form>
        </div>
    </body>
</html>
<%


String a=request.getParameter("kode");
String b=request.getParameter("nama");
String c=request.getParameter("tgl");
String d=request.getParameter("jk");
String e=request.getParameter("alamat");

//membuat variabel untuk nampung alamat untuk akses database nantinya.

String url="jdbc:mysql://localhost:3306/basisdata";

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

Class.forName("com.mysql.jdbc.Driver").newInstance();

int updateQuery=0;


//untuk mengecek textbox name, city, dan phone tidak kosong

if(a!=null && b!=null && c!=null && d!=null && e!=null){


    if(a!="" && b!="" && c!="" && d!="" && e!=""){
         try{
        conn=DriverManager.getConnection(url,"root","kodokijo");
        String query="update crud set nama=?,tgl=?,jk=?,alamat=? where kode='"+a+"'";
        ps=conn.prepareStatement(query);
        ps.setString(1,b);
        ps.setString(2,c);
        ps.setString(3,d);
        ps.setString(4,e);
        updateQuery=ps.executeUpdate();
        if(updateQuery!=0){
            JOptionPane.showMessageDialog(null, "Berhasil Update Data");
            response.sendRedirect("index.jsp");
        }

    }catch(Exception ex){
        out.println("Koneksi bermasalah");
        
 
    }finally{
        ps.close();
        conn.close();
    }


    }
}
%>

updatejsp-352016
delete.jsp

<%-- 
    Document   : delete
    Created on : Feb 13, 2014, 8:47:02 PM
    Author     : ghazali
--%>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
         <%
        String id=request.getParameter("d");
        int no=Integer.parseInt(id);
        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/basisdata", "root", "kodokijo");
            Statement st = conn.createStatement();
            st.executeUpdate("DELETE FROM crud WHERE kode = '"+no+"'");
            response.sendRedirect("index.jsp");
        } catch(Exception e){}
        %>
    </body>
</html>

Download Source Code