Membuat CRUD sederhana menggunakan JSP dan MySQL

Leuly D Juan
[email protected] :: https://juaninfotoday.blogspot.co.id/

Abstrak

Dalam pemrograman computer ada sebuah istilah yang disebut CRUD yaitu buat(Create),
baca(Read), Edit(Update), dan hapus(Delete). CRUD merupakan empat fungsi dasar dalam
mengelolah data data dalam database.

CRUD juga terkadang digunakan untuk menggambarkan konvensi antarmuka pengguna

yang memudahkan melihat, mencari, dan mengubah informasi. Sering menggunakan formulir
berbasis komputer dan laporan. Istilah ini kemungkinan dipopulerkan pertama kali oleh James
Martin dalam bukunya 1983 the Managing Data-base Environment.1

Akronim CRUD mengacu pada semua fungsi utama yang diterapkan dalam aplikasi
database relasional. Setiap huruf dalam akronim dapat memetakan ke pernyataan SQL standar.
Lihat tabel di bawah ini

Operation SQL HTTP DDS

Create Insert PUT/POST write
Read (Reatrieve) Select GET read/take
Update (Modify) Update PUT/POST/PATCH write
Delete (Destroy) Delete DELETE dispose

Pembahasan

Ada beberapa tools yang akan digunakan untuk membuat CRUD sederhana yaitu:
1. Editor
- Netbeans 8.1 (tidak masalah jika kalian menggunakan versi yang lain, asalkan ada
JavaWeb pada netbeans tersebut).
2. Server Database
- Xampp v3.2.1
3. Browser
- Mozilla Firefox

Setelah semua tools sudah disiapkan maka langkah berikutnya yaitu, kita akan membuat:
1. Database dan Table
Nama databasenya adalah db_tugas dan nama tabelnya adalah tb_tugas, adapun field-
field yang dibutuhkan seperti gambar berikut ini

1
https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
2. Project WEB di Netbeans
Buka editor netbeans dan buat sebuah project dengan nama tanpa tanda kutip “Tugas1”
- Klik menu File -> New Project..
- Pada Categories: klik Java Web dan pada Projects: klik Web Application
- Klik Next
- Ganti Project Name dengan Tugas1
- Klik Next
- Harap diperhatikan Server=GlassFish Server dan Java EE Version=Java EE 5
- Klik Next
- Klik Finish

3. File JSP yang dibutuhkan

Sampai disini Project Web sudah selesai dibuat maka secara otomatis file index.jsp
sudah ada di dalamnya dan selanjutnya akan dibuakan file-file lain selain index.jsp
seperti tambah.jsp, edit.jsp, proses_tambah.jsp, proses_edit.jsp, dan
proses_hapus.jsp.
- File tambah.jsp
Klik kanan Web Pages -> New -> klik JSP -> pada File Name diganti dengan tanpa
tanda kutip “tambah” -> klik Finish
- Buatlah file-file yang lain sama dengan langkah membuat file tambah.jsp di atas tapi
ingat harus ubah File Name sesuai dengan file yang dimaksud

4. Library
Semua file JSP telah ada mulai dari index.jsp sampai proses_hapus.jsp. Sekarang akan
ditambahkan library MySQL dan Framework CSS (Bootstrap).
- Klik kanan Libraries -> Klik Add Library.. -> Cari dan klik MySQL JDBC Driver -> klik
Add Library, seperti gambar berikut:
 - Download framework CSS/Bootstrap di http://getbootstrap.com/ selesai download
extract hasil download dan copy folder “css, font-awesome, fonts, dan js” pergi
ke alamat berikut C:\Users\juan\Documents\NetBeansProjects\Tugas1\web yaitu di
dalam folder “web” klik kanan -> Paste atau Ctrl+V

5. Bombardir file-file JSP yang telah dibuat sebelumnya 

File index.jsp
- Buka file index.jsp, masukan code berikut di atas
<%@page contentType="text/html" pageEncoding="UTF-8"%>

====================================================================
 <%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet" %>
<%@page import="java.sql.Statement" %>
<%@page import="java.sql.Connection" %>
====================================================================
- Ubah nama title menjadi <title>Beranda</title> dan masukan code berikut di
bawahnya
====================================================================
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/landing-page.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css"/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,
700italic" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
====================================================================
- Masukan code berikut di bawah tag <body>
====================================================================
<div class="container">
<div class="row">
<div class="bs-example">
<a href="tambah.jsp" class="btn btn-danger">Tambah</a>
<p></p>
<%
try{
String host="jdbc:mysql://localhost:3306/db_tugas";
Connection konek=null;
Statement st=null;
ResultSet rs=null;
Class.forName("com.mysql.jdbc.Driver");
konek=DriverManager.getConnection(host,"root","");
st=konek.createStatement();
String data="select * from tb_tugas";
rs=st.executeQuery(data);
%>
<table class="table table-striped" >
<caption>Tabel Mahasiswa</caption>
<thead>
<tr>
<th>No</th>
<th>NIM</th>
 <th>Nama</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Alamat</th>
<th>No.Telp</th>
<th>Hoby</th>
<th>Klas</th>
<th>Jurusan</th>
<th colspan="2">Aksi</th>
</tr>
</thead>
<%
int no=0;
while(rs.next()){
no++;
%>
<tbody>
<tr>
<td><%=no %></td>
<td><%=rs.getString("nim") %></td>
<td><%=rs.getString("nama") %></td>
<td><%=rs.getString("jekel") %></td>
<td><%=rs.getString("agama") %></td>
<td><%=rs.getString("alamat") %></td>
<td><%=rs.getString("no_telp") %></td>
<td><%=rs.getString("hobi") %></td>
<td><%=rs.getString("kls") %></td>
<td><%=rs.getString("jurusan") %></td>
<td>
<a href="edit.jsp?nim=<%=rs.getString("nim") %>">Edit</a> |
<a
href="proses_hapus.jsp?nim=<%=rs.getString("nim")%>">Hapus</a>
</td>
</tr>
</tbody>
<%
}
%>
</table>
<%
rs.close();
st.close();
konek.close();
}catch(Exception e){
 out.println("Can't konek brooooooo!!!!");
}
%>
</div>
</div>
</div>
- File index.jsp adalah merupakan page (halaman) beranda yang menampilkan hasil
inputan dalam bentuk tabel, jika ingin menginput data/menambahkan data silahkan
klik tombol TAMBAH

File tambah.jsp
- Buka file tambah.jsp
- Ubah title menjadi <title>Register</title> dan masukan code berikut di bawahnya
====================================================================
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/landing-page.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css"/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,
700italic" rel="stylesheet" type="text/css">
====================================================================
- Di bawah tag <body> masukan code berikut
====================================================================
<div class="container">
<div class="row">
<div class="bs-example">
<h1>Register</h1>
<hr>
<form class="form-horizontal" action="proses_tambah.jsp" method="post">
<div class="form-group">
<label class="control-label col-xs-3" for="nim">NIM:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="nim" placeholder="NIM"
required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="nama">Nama:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="nama"
placeholder="Masukan Nama" required="">
</div>
 </div>
<div class="form-group">
<label class="control-label col-xs-3">Jenis Kelamin:</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="jekel" value="Laki-laki"> Laki-laki
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="jekel" value="Perempuan"> Perempuan
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Agama:</label>
<div class="col-xs-3">
<select class="form-control" name="agama" required="">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen Katolik</option>
<option value="Kristen">Kristen Protestan</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Kristen">Konghucu</option>
<option value="Kristen">Lainnya</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="Alamat">Alamat:</label>
<div class="col-xs-6">
<textarea rows="3" class="form-control" name="alamat"
placeholder="Masukan Alamat Lengkap" required=""></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="telp">No. Telp:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="no_telp"
placeholder="Nomor Telepon / Handphone" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="hobi">Hoby:</label>
 <div class="col-xs-6">
<input type="text" class="form-control" name="hobi"
placeholder="Masukan hoby" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="kls">Kelas:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="kls" placeholder="Masukan
Kelas" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Jurusan:</label>
<div class="col-xs-3">
<select class="form-control" name="jurusan" required="">
<option value="Sistem Informasi">SI</option>
<option value="Manajemen Informatika">MI</option>
<option value="Komputerisasi Akuntansi">KA</option>
<option value="Teknik Komputer">TK</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="Setuju" required=""> Saya Setuju dengan
<a href="#">Kebijakan dan Ketentuan</a> yang berlaku.
</label>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<input type="submit" class="btn btn-primary" name="simpan"
value="Kirim">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</div>
</form>
</div>
</div>
</div>
- File tambah.jsp yaitu merupakan form input data, ketika semua data telah diinput
kemudian tekan tombol KIRIM maka data akan tersimpan dan kembali ke halaman
index.jsp

File edit.jsp
- Buka file edit.jsp
- Tambahkan code berikut di atas <%@page contentType="text/html"
pageEncoding="UTF-8"%>
====================================================================
<%@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" %>
====================================================================
- Ubah title menjadi <title>Edit</title> dan masukan code berikut untuk memanggil
bootstrap di bawahnya
====================================================================
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/landing-page.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css"/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,
700italic" rel="stylesheet" type="text/css">
====================================================================
- Di bawah tag <body> masukan code berikut
<div class="container">
<div class="row">
<div class="bs-example">
<h1>Edit</h1>
<hr>
<form class="form-horizontal" action="proses_edit.jsp"
method="post">
<%
try{
String host="jdbc:mysql://localhost:3306/db_tugas";
Connection konek=null;
Statement st=null;
ResultSet rs=null;
Class.forName("com.mysql.jdbc.Driver");
konek=DriverManager.getConnection(host,"root","");
 st=konek.createStatement();

String nim1=request.getParameter("nim");
//int nm=Integer.parseInt(nim1);
String data="select * from tb_tugas where nim='"+nim1+"'";
rs=st.executeQuery(data);
if(rs.next()){

String jekel=rs.getString("jekel");
String agama=rs.getString("agama");
String jurusan=rs.getString("jurusan");
%>
<%!
String[] pil_jk={"Laki-laki","Perempuan"};
String[] pil_agama ={"Islam","Kristen Katolik","Kristen
Protestan","Hindu","Budha","Konghucu","Lainnya"};
String[] pil_jurusan={"Sistem Informasi","Manajemen
Informatika","Komputerisasi Akuntansi","Teknik Komputer"};
%>
<div class="form-group">
<label class="control-label col-xs-3" for="nim">NIM:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="nim"
value="<%=rs.getString("nim") %>" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="nama">Nama:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="nama"
value="<%=rs.getString("nama") %>" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Jenis
Kelamin:</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="jekel" value="Laki-laki"
required="">Laki-laki
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
 <input type="radio" name="jekel" value="Perempuan"
required=""> Perempuan
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Agama:</label>
<div class="col-xs-3">
<select class="form-control" name="agama" required="">
<option
value="<%=rs.getString("agama")%>"><%=rs.getString("agama")%></option>
<option
value="<%=pil_agama[0]%>"><%=pil_agama[0]%></option>
<option
value="<%=pil_agama[1]%>"><%=pil_agama[1]%></option>
<option
value="<%=pil_agama[2]%>"><%=pil_agama[2]%></option>
<option
value="<%=pil_agama[3]%>"><%=pil_agama[3]%></option>
<option
value="<%=pil_agama[4]%>"><%=pil_agama[4]%></option>
<option
value="<%=pil_agama[5]%>"><%=pil_agama[5]%></option>
<option
value="<%=pil_agama[6]%>"><%=pil_agama[6]%></option>
</select>
</div>
</div>

<div class="form-group">
<label class="control-label col-xs-3" for="Alamat">Alamat:</label>
<div class="col-xs-6">
<textarea rows="3" class="form-control" name="alamat"
placeholder="Masukan Alamat Lengkap"
required=""><%=rs.getString("alamat")%></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="telp">No. Telp:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="no_telp"
value="<%=rs.getString("no_telp")%>" required="">
</div>
</div>
 <div class="form-group">
<label class="control-label col-xs-3" for="hobi">Hoby:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="hobi"
value="<%=rs.getString("hobi")%>" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="kls">Kelas:</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="kls"
value="<%=rs.getString("kls")%>" required="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Jurusan:</label>
<div class="col-xs-3">
<select class="form-control" name="jurusan" required="">
<option
value="<%=rs.getString("jurusan")%>"><%=rs.getString("jurusan")%></option>
<option
value="<%=pil_jurusan[0]%>"><%=pil_jurusan[0]%></option>
<option
value="<%=pil_jurusan[1]%>"><%=pil_jurusan[1]%></option>
<option
value="<%=pil_jurusan[2]%>"><%=pil_jurusan[2]%></option>
<option
value="<%=pil_jurusan[3]%>"><%=pil_jurusan[3]%></option>

</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="Setuju" required=""> Saya Setuju
dengan <a href="#">Kebijakan dan Ketentuan</a> yang berlaku.
</label>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
 <input type="submit" class="btn btn-primary" name="edit"
value="Kirim">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</div>

</form>
<%
}
rs.close();
st.close();
konek.close();
}catch(Exception ex){
out.println("tidak bisa konek kwong");
}
%>
</div>
</div>
</div>
- File edit.jsp adalah form untuk mengubah data yang telah disimpan dalam
database/tabel

File proses_tambah.jsp
- Buka file proses_tambah.jsp
- Masukan code berikut di atas <%@page contentType="text/html"
pageEncoding="UTF-8"%>
====================================================================
<%@page import="com.mysql.jdbc.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javax.swing.JOptionPane" %>
<%@page import="java.sql.DriverManager" %>
<%@page import="java.sql.PreparedStatement" %>
<%@page import="java.sql.Connection" %>
====================================================================
- Di bawah tag <body> sisipkan code berikut
<%
if(request.getParameter("simpan")!= null){

String host="jdbc:mysql://localhost:3306/db_tugas";
Connection konek=null;
Statement st=null;
ResultSet rs=null;
Class.forName("com.mysql.jdbc.Driver");
konek=DriverManager.getConnection(host,"root","");
 try{

String query="insert into tb_tugas

values('"+request.getParameter("nim")+"','"+request.getParameter("nama")+"','"+re
quest.getParameter("jekel")+"','"+request.getParameter("agama")+"','"+request.get
Parameter("alamat")+"','"+request.getParameter("no_telp")+"','"+request.getParam
eter("hobi")+"','"+request.getParameter("kls")+"','"+request.getParameter("jurusan"
)+"')";
PreparedStatement pst=konek.prepareStatement(query);
pst.execute();
response.sendRedirect("index.jsp");
pst.close();
konek.close();
}catch(Exception ex){
out.println("Koneksi bermasalah");
}
}
%>
- File proses_tambah.jsp adalah halaman (page) yang di dalamnya berisi code proses
penyimpanan data yang di ambil dari form input dan disimpan ke database/tabel

File proses_edit.jsp
- Buka file proses_edit.jsp
- Masukan code berikut di atas <%@page contentType="text/html"
pageEncoding="UTF-8"%>
====================================================================
<%@page import="com.mysql.jdbc.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javax.swing.JOptionPane" %>
<%@page import="java.sql.DriverManager" %>
<%@page import="java.sql.PreparedStatement" %>
<%@page import="java.sql.Connection" %>
====================================================================
- Masukan code berikut di bawah tag <body>
<%
if(request.getParameter("edit")!= null){
String host="jdbc:mysql://localhost:3306/db_tugas";
Connection konek=null;
Statement st=null;
ResultSet rs=null;
Class.forName("com.mysql.jdbc.Driver");
konek=DriverManager.getConnection(host,"root","");
 try{
String query="update tb_tugas set
nama='"+request.getParameter("nama")+"',jekel='"+request.getParameter("jekel")+
"',agama='"+request.getParameter("agama")+"',alamat='"+request.getParameter("al
amat")+"',no_telp='"+request.getParameter("no_telp")+"',hobi='"+request.getPara
meter("hobi")+"',kls='"+request.getParameter("kls")+"',jurusan='"+request.getPara
meter("jurusan")+"' where nim='"+request.getParameter("nim")+"'";
PreparedStatement pst=konek.prepareStatement(query);
pst.execute();
response.sendRedirect("index.jsp");
pst.close();
konek.close();
}catch(Exception ex){
out.println("Koneksi bermasalah");
}
}
%>
- File proses_edit.jsp merupakan sekumpulan code yang berfungsi untuk
memperbaharui data yang diperoleh dari form edit dan akan disimpan kembali ke
database/tabel

File proses_hapus.jsp
- Buka file proses_hapus.jsp
- Masukan code berikut di atas <%@page contentType="text/html"
pageEncoding="UTF-8"%>
====================================================================
<%@page import="com.mysql.jdbc.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javax.swing.JOptionPane" %>
<%@page import="java.sql.DriverManager" %>
<%@page import="java.sql.PreparedStatement" %>
<%@page import="java.sql.Connection" %>
====================================================================
- Masukan code berikut di bawah tag <body>
<%
try{
String host="jdbc:mysql://localhost:3306/db_tugas";
Connection konek=null;
Statement st=null;
ResultSet rs=null;
Class.forName("com.mysql.jdbc.Driver");
konek=DriverManager.getConnection(host,"root","");
String n=request.getParameter("nim");
String data="delete from tb_tugas where nim='"+n+"'";
 PreparedStatement pst=konek.prepareStatement(data);
pst.execute();
response.sendRedirect("index.jsp");
pst.close();
konek.close();
}catch(Exception ex){
out.println("Error!!!");
}
%>
- File proses_hapus.jsp tak lain berisi code untuk menghapus data yang telah disimpan
dalam database/tabel
6. Output
Setelah sekian lama perjalanan  yang diawali dari membuat database sampai
bombardir (menyesuaikan) file-file jsp maka kita akan melihat bagaimana interfacenya
sebagai berikut.
- Klik kanan pada file index.jsp -> klik Run File

Halaman Beranda (index.jsp)

Halaman Register(tambah.jsp) 1
 Halaman Edit (edit.jsp)

Penutup

Demikian tutorial dari saya semoga bermanfaat bagi yang membacanya, khususnya
teman-teman di kampus STMIK Profesional Makassar yang kebetulan saat ini dapat mata kuliah
Pemrograman WEB III. Tutorial ini masi jauh dari kata “sempurna” sehingga aplikasi ini masi
berskala kecil atau sangat sederhana dan harapan saya teman-teman bisa mengembangkannya
ke arah yang lebih baik lagi.

Mohon maaaf juga apa bila ada kesalahan dalam penulisan baik kata ataupun kalimat
yang tidak jelas dan tidak dimengerti mohon kiranya jangan dimasukan ke hati sebab
kebenaran hanya milik Tuhan dan kesalahan itu hanya datang dari kita sebagai manusia biasa.

Referensi

http://ilmuti.org/2014/05/04/membuat-crud-dengan-jsp-mysql/
https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
Biografi
Nama : Julfikar Leuly

TTL : Kailolo, 09 Januari 1992

Study : STMIK Profesional Makassar

Jurusan : Sistem Informasi

Hoby : Watching Anime Movie

Email : [email protected]

Blog : https://juaninfotoday.blogspot.co.id