CRUD Netbeans Java Using JSP and Servlets With MySQL Database #1

CRUD Java Netbeans Using JSP and Servlet With MySQL Database

Selamat pagi.. akhirnya bisa ketemu lagi pada pokok bahasan kali ini. Pagi ini saya akan memberikan tutorial mengenai java web dengan database MySQL menggunakan Servlet. Sebelum lanjut pada tutorial, alangkah baiknya jika kita mengetahui terlebih dahulu pengertian JSP dan Servlet.


JSP (Java Server Page)

JSP ialah teknologi yang mengontrol isi atau tampilan halaman web melalui penggunaan Servlet, program kecil yang dijalankan di server web. JSP merupakan perluasan dari Servlet yang memiliki beberapa keunggulan, yang pertama adalah kode yang ditulis dengan jsp relatif lebih singkat, yang kedua proses deployment lebih mudah. Tujuan penggunaan JSP adalah untuk menyederhanakan penulisan Servlet. Pada prosesnya, sebelum dijalankan oleh server JSP akan dikompilasi terlebih dahulu menjadi Servlet dan selanjutnya diperlakukan sama sebagaimana Servlet.


Servlet

Servlet merupakan sebuah class yang digunakan untuk menerima request dan memberikan response melalui protokol HTTP. Servlet dapat dipandang sebagai class yang bisa digunakan untuk menulis response dalam format HTML. Penulisan Servlet layaknya penulisan sebuah class didalam pemrograman Java dan disimpan sebagai file *.java.

Cara Kerja Servlet

Servlet bekerja melayani request dari client, yaitu melalui web browser. Untuk dapat melayani client, Servlet terlebih dahulu harus di deploy didalam web application server, yang menyediakan kemampuan sebagai Servlet container.

Client memanggil Servlet dengan mengirimkan HTTP request ke web application server. HTTP request ini dapat ditransfer dengan metode GET, POST, atau lainnya. Method GET terjadi ketika user membuka sebuah URL seperti melihat data rinci sebuah entitas. Method POST dapat digunakan saat user mensubmit sebuah form.

Saat web application server menerima HTTP request dari client, ia akan menyerahkan request ini ke Servlet container. Servlet container akan mengcreate dua buah objek yaitu HttpServletRequest dan HttpServletResponse. HttpServletRequest mengencapsulate/membungkus request dari client, sedangkan HttpServletResponse dipersiapkan untuk mengencapsulate/membungkus response ke client.

Selanjutnya Servlet container akan menginvoke method dari Servlet dengan melewatkan dua objek ini. Servlet yang diinvoke oleh Servlet container ditentukan oleh URL yang dikirimkan oleh web browser, dan pemetaan yang dibuat melalui configuration. Dalam configuration dapat ditentukan bahwa URL dengan pola tertentu dapat dilayani oleh Servlet tertentu.


CRUD (Insert and Retrieve)

Program ini merupakan program dalam mata kuliah Pemrograman Visual Akuntansi 1 (JAVA1) semester 3 jurusan Komputerisasi Akuntansi pada AMIK Bina Sarana Informatika.

Siapkan sebuah database dengan nama “sia” (tanpa tanda petik), kemudian buat tabel dengan master_akun.

Tabel master_akun

Aplikasi yang akan digunakan meliputi:

  • NetBeans 8.1 sebagai editor.
  • Apache Tomcat 8.0.27.0 sebagai local server untuk menjalankan program.
  • XAMPP 7.0.9 sebagai local server untuk membuat dan mengakses database MySQL.

Sebelumnya mari perhatikan dulu hirarki dari file-file yang akan dibuat seperti yang terlihat pada gambar dibawah ini.

Hirarki File

Langkah pertama yang akan kita lakukan adalah membuat file JSP dengan nama add_akun.jsp. File ini berfungsi sebagai form inputan dimana form ini akan mensubmit/mengirimkan data yang diinputkan oleh user.

add_akun.jsp

File name: add_akun


<%--
Document : add_akun
Created on : Dec 5, 2016, 5:44:37 PM
Author : kutuonline
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data Akun</title>
</head>
<body>
<h1>Tambah Akun</h1>
<form action="akunServlet" method="POST">
<table border="0" cellpadding="4">
<tbody>
<tr>
<td>Jenis Akun</td>
<td>
<select name="jenis">
<option value="Kas/Bank" selected>Kas/Bank</option>
<option value="Aktiva Lancar">Aktiva Lancar</option>
<option value="Aktiva Tetap">Aktiva Tetap</option>
<option value="Kewajiban">Kewajiban</option>
<option value="Modal">Modal</option>
<option value="Pendapatan">Pendapatan</option>
<option value="Beban">Beban</option>
</select>
</td>
</tr>

<tr>
<td>Kode *</td>
<td><input type="text" name="kode" size="5"></td>
</tr>

<tr>
<td>Nama Akun</td>
<td><input type="text" name="nama" size="20"></td>
</tr>

<tr>
<td>Saldo Normal</td>
<td>
<select name="saldo">
<option value="Debet">Debet</option>
<option value="Kredit">Kredit</option>
</select>
</td>
</tr>

<tr>
<td colspan="2">
<input type="submit" name="aksi" value="Insert">&nbsp;
<input type="reset" name="reset" value="Batal">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Berikut penampakan file add_akun.jsp ketika dijalankan via browser.

Tambah Akun

Selanjutnya membuat Package dengan nama model yang didalamnya terdapat class Akun.java.

Akun.java

File name: Akun

Package: model


/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package model;

/**
*
* @author kutuonline
*/
public class Akun {

private String kode_akun;
private String nama_akun;
private String jenis_akun;
private String saldo_normal;

public String getSaldo_normal() {
return saldo_normal;
}

public void setSaldo_normal(String saldo_normal) {
this.saldo_normal = saldo_normal;
}
public String getJenis_akun() {
return jenis_akun;
}

public void setJenis_akun(String jenis_akun) {
this.jenis_akun = jenis_akun;
}
public String getNama_akun() {
return nama_akun;
}

public void setNama_akun(String nama_akun) {
this.nama_akun = nama_akun;
}
public String getKode_akun() {
return kode_akun;
}

public void setKode_akun(String kode_akun) {
this.kode_akun = kode_akun;
}

@Override
public String toString() {
return "Akun{" + "kode_akun=" + kode_akun + ", nama_akun=" + nama_akun + ", jenis_akun=" + jenis_akun + ", saldo_normal=" + saldo_normal + '}';
}

}

Model diatas digunakan untuk menangkap/menampung data yang diinputkan oleh user sebelum diproses didalam Servlet dan disimpan kedalam tabel yang telah disediakan.

Berikutnya membuat Servlet dengan nama akunServlet.java yang terdapat didalam Package control. Karena pengiriman data menggunakan method POST, maka perintah untuk melakukan penyimpanan data kedalam tabel dituliskan dibawah void doPost.

Dalam pembuatan Servlet, jangan lupa memberi tanda ceklis pada Add information to deployment descriptor (web.xml) agar dibuatkan file web.xml didalam folder Configuration Files.

Configure Servlet Deployment

akunServlet.java

File name: akunServlet

Package: control


/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package control;

import java.io.IOException;
import java.io.PrintWriter;
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 model.Akun;
import java.sql.*;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
*
* @author kutuonline
*/
@WebServlet(name = "akunServlet", urlPatterns = {"/akunServlet"})
public class akunServlet extends HttpServlet {

/**
* 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 {

}

// <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
*/

/* dinonaktifkan
@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
*/
/**
* 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
*/
/**
* 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 {

Akun akun = new Akun();

String URL = "jdbc:mysql://localhost:3306/sia";
String USERNAME = "root";
String PASSWORD = "";

Connection koneksi = null;
PreparedStatement pstmt = null;
int result = 0;

try (PrintWriter out = response.getWriter()) {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);

String aksi = request.getParameter("aksi");
if (aksi != null) {
akun.setKode_akun(request.getParameter("kode"));
akun.setNama_akun(request.getParameter("nama"));
akun.setJenis_akun(request.getParameter("jenis"));
akun.setSaldo_normal(request.getParameter("saldo"));

switch (aksi) {
case "Insert":
pstmt = koneksi.prepareStatement("INSERT INTO master_akun "
+ " VALUES (?, ?, ?, ?)");
pstmt.setString(1, akun.getKode_akun());
pstmt.setString(2, akun.getNama_akun());
pstmt.setString(3, akun.getJenis_akun());
pstmt.setString(4, akun.getSaldo_normal());

result = pstmt.executeUpdate();
if (result > 0) {
out.println("<script> "
+ "alert('Data akun telah ditambahkan');"
+ "document.location='add_akun.jsp';"
+ "</script>");
}
break;
default:
break;
}
}
} catch (ClassNotFoundException | SQLException ex) {
Logger.getLogger(akunServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}

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

Berikut file web.xml yang di create secara otomatis ketika membuat Servlet. File ini tersimpan didalam Configuration Files.

web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>akunServlet</servlet-name>
<servlet-class>control.akunServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>akunServlet</servlet-name>
<url-pattern>/akunServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>

 

Untuk dapat menampilkan data yang berhasil diinputkan, maka langkah selanjutnya adalah membuat file JSP dengan nama tampil_akun.jsp.

tampil_akun.jsp

File name: tampil_akun


<%--
Document : tampil_akun
Created on : Dec 6, 2016, 2:54:19 PM
Author : kutuonline
--%>

<%@page import="java.sql.*" %>
<%
/* koneksi database */
Connection koneksi = null;
Statement stmt = null;
ResultSet rs = null;

try {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection("jdbc:mysql://localhost:3306/sia", "root", "");
stmt = koneksi.createStatement();
rs = stmt.executeQuery("SELECT * FROM master_akun ORDER BY kode_akun");
}catch(Exception e){
e.printStackTrace();
}
%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daftar Akun</title>

<style>
table {
border-collapse: collapse;
width: 680px;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Daftar Rekening [Akun]</h1>
<table border="1">
<tr>
<th>Kode *</th>
<th>Nama Akun</th>
<th>Jenis Akun</th>
<th>Saldo Normal</th>
<th>Aksi</th>
</tr>

<%
while (rs.next()){
out.println("<tr>"
+ "<td>" + rs.getString("kode_akun") + "</td>"
+ "<td>" + rs.getString("nama_akun") + "</td>"
+ "<td>" + rs.getString("jenis_akun") + "</td>"
+ "<td>" + rs.getString("saldo_normal") + "</td>"
+ "<td><a href=edit_akun.jsp?kode="
+ rs.getString("kode_akun") + ">Edit</a> | "
+ "<a href=akunServlet?aksi=delete&kode="
+ rs.getString("kode_akun") + ">Hapus</a></td>"
+ "</tr>");

}
%>

</table>
</body>
</html>

Berikut penampakan file tampil_akun.jsp setelah dijalankan via browser.

Tampil Akun

Terakhir, jangan lupa menambahkan Library MySQL JDBC Driver agar program dapat terhubung dengan database MySQL yang telah disiapkan sebelumnya.

Demikian tutorial CRUD Java Netbeans menggunakan JSP dan Servlet dengan database MySQL. Pada pertemuan berikutnya akan kita tambahkan file untuk edit dan hapus.

Semoga bermanfaat.

Advertisements

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