Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL - 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. 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.

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

Pembahasan CRUD menggunakan Java Server Page (JSP) dan MySQL

Ada beberapa tools yang akan digunakan untuk membuat CRUD sederhana yaitu:

Editor 

- Netbeans 8.1 (tidak masalah jika kalian menggunakan versi yang lain, asalkan ada JavaWeb pada netbeans tersebut).

Server Database 

- Xampp v3.2.1

Browser 

- Mozilla Firefox

Setelah semua tools sudah disiapkan maka langkah berikutnya yaitu, kita akan membuat:

Database dan Table

Nama databasenya adalah db_tugas dan nama tabelnya adalah tb_tugas, adapun field-field yang dibutuhkan seperti gambar berikut ini:

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

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

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.

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

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL


  • 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

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL


Masukan source code di bawa ini:

File index.jsp

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 

Buka file index.jsp, masukan code berikut:

<%@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 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 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

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

  • 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_edit.jsp

File proses_edit.jsp merupakan sekumpulan code yang berfungsi untuk memperbaharui data yang diperoleh dari form edit dan akan disimpan kembali ke database/tabel

  • 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_hapus.jsp

File proses_hapus.jsp tak lain berisi code untuk menghapus data yang telah disimpan dalam database/tabel

  • 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!!!");
 }
 %>
Output/Interface

Klik kanan pada file index.jsp -> klik Run File

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

Tutorial CRUD menggunakan Java Server Page (JSP) dan MySQL

Demikian tutorial dari saya semoga bermanfaat bagi yang membacanya, khususnya teman-teman masi berada di bangku kuliah. 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

Terimakasih sudah berkunjung di blog kami, semoga bermanfaat. Jika ada pertanyaan dari teman-teman, silahkan sampaikan pada kolom komentar atau bisa langsung hubungi pada kontak yang sudah kami lampirkan di menu Contact Us.

Comments

Post a Comment