CRUD dengan JSP dan MySQL

CRUD dengan JSP dan MySQL

author

Teguh Bagas M

Web Developer

Tags

Share this post

CRUD dengan JSP dan MySQL

CRUD adalah singkatan dari Create, Read, Update, dan Deleteβ€”empat operasi dasar yang digunakan saat kita berinteraksi dengan database. Dalam tutorial ini, kita akan membuat aplikasi sederhana menggunakan JSP (Java Server Pages) untuk melakukan operasi CRUD pada database MySQL.

CRUD JSP

Persiapan Awal

1. Siapkan Database

Buat database MySQL bernama test. Caranya:

  1. Buka phpMyAdmin
  2. Klik tombol New
  3. Isi nama database dengan test
  4. Klik Create

Contohnya seperti gambar di bawah:

CRUD JSP

2. Membuat tabel mahasiswa

Setelah database berhasil dibuat, selanjutnya buat sebuah tabel dengan nama mahasiswa.

Masuk ke database test yang baru saja dibuat.

Pada bagian Create table, isi nama tabel dengan mahasiswa.

Isi jumlah kolom (Number of columns) dengan 4, lalu klik Go atau Lanjut.

Contohnya bisa dilihat pada gambar di bawah:

CRUD JSP

3. Menambahkan Kolom (Field) ke Tabel

Isi 4 kolom berikut ini ke dalam tabel mahasiswa:

  1. id
  • Tipe: INT

  • Length/Values: 10

  • Centang kolom A_I (Auto Increment)

  • Set sebagai Primary Key Contohnya bisa dilihat di gambar ini:

    CRUD JSP
  1. nim
  • Tipe: INT
  • Length/Values: 10
  1. nama
  • Tipe: VARCHAR
  • Length/Values: 100
  1. nilai
  • Tipe: FLOAT

Terakhir, klik tombol Save atau Simpan di bagian bawah untuk menyimpan tabel.

CRUD JSP

lalu klik tombol simpan / save di bawah

Catatan: Anda bisa melihat tabel yang anda buat di menu structure / struktur

Saya menyediakan dua cara untuk menghubungkan project ke MySQL, tergantung apakah NetBeans kamu sudah menyediakan library MySQL secara bawaan atau tidak.

2. Tambahkan Library MySQL (Jika Ada di NetBeans)

Jika NetBeans kamu sudah menyediakan library MySQL, kamu bisa menambahkannya dengan langkah berikut:

  1. Klik kanan pada folder Libraries di project Java Web kamu.
  2. Pilih Add Library
  3. Pilih MySQL JDBC Driver

Berikut tampilan langkah-langkahnya:

CRUD JSP CRUD JSP

3. Install MySQL Connector/J (Jika Tidak Ada Library MySQL)

Jika NetBeans kamu tidak memiliki library MySQL bawaan, kamu bisa menambahkannya secara manual dengan MySQL Connector/J.

πŸ”— Download MySQL Connector/J

Langkah-langkah:

  1. Pilih versi Platform Independent dan unduh file .zip.
  2. Ekstrak file tersebut, lalu cari file mysql-connector-j-x.x.x.jar.
  3. Di NetBeans:
    • Klik kanan pada Libraries
    • Pilih Add JAR/Folder
    • Tambahkan file .jar yang tadi diekstrak

Membaca Data (Read)

CRUD JSP

Contoh membaca data dari tabel mahasiswa dan menampilkannya ke halaman JSP.

index.jsp
<%@ page import="java.sql.*" %> <% String DBDRIVER = "com.mysql.cj.jdbc.Driver"; // test = sesuaiin sm nama db String DBCONNECTION = "jdbc:mysql://localhost:3306/test"; String DBUSER = "root"; String DBPASS = ""; Connection conn = null; Statement st = null; ResultSet rs = null; try { Class.forName(DBDRIVER); conn = DriverManager.getConnection(DBCONNECTION, DBUSER, DBPASS); st = conn.createStatement(); rs = st.executeQuery("SELECT * FROM mahasiswa"); } catch (Exception e) { out.println("Error"); } %> <%@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> <% while (rs.next()) {%> <%= rs.getInt("id")%><br> <%= rs.getString("nama")%><br> <%= rs.getInt("nilai")%><br> <hr> <% } %> <% rs.close(); st.close(); conn.close(); %> </body> </html>
  • βœ… executeQuery() digunakan untuk query SELECT.
  • βœ… Gunakan rs.getString() atau rs.getInt() sesuai tipe data kolom

⚠ Hati-hati dengan SQL Injection! Untuk itu, gunakan PreparedStatement seperti di bawah ini.

Menambah Data dengan Parameter (PreparedStatement)

create.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@page import="java.sql.*" %> <% String DBDRIVER = "com.mysql.cj.jdbc.Driver"; String DBCONNECTION = "jdbc:mysql://localhost:3306/test"; String DBUSER = "root"; String DBPASS = ""; Connection conn = null; Statement st; String nama = "Engguh"; String nim = "22110397"; Integer nilai = 34; try { Class.forName(DBDRIVER); conn = DriverManager.getConnection(DBCONNECTION, DBUSER, DBPASS); // prepare select statement String sql = "INSERT INTO mahasiswa (nim,nama,nilai) values ('"+nim+"','"+nama+"',"+nilai+")"; st = conn.createStatement(); st.executeUpdate(sql); conn.close(); } catch (Exception ex) { out.println("Error" + ex.getMessage()); } %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Data Baru</title> </head> <body> NIM: <%= nim %><br> Nama: <%= nama %><br> Nilai: <%= nilai %><br> </body> </html>

Pisahkan Akses Database ke Class Java

Dalam pendekatan MVC, logika database sebaiknya dipisahkan dari tampilan JSP. Buat package baru dengan nama model, lalu buat Java Class dengan nama Mahasiswa

model/Mahasiswa.java
package model; import java.sql.*; public class Mahasiswa { public String nim; public String nama; public int nilai; public void tambah() throws Exception { Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/test", "root", ""); String sql = "INSERT INTO mahasiswa (nim, nama, nilai) VALUES (?, ?, ?)"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, nim); ps.setString(2, nama); ps.setInt(3, nilai); ps.executeUpdate(); ps.close(); conn.close(); } public void update() throws Exception { Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/test", "root", ""); String sql = "UPDATE mahasiswa SET nama=?, nilai=? WHERE nim=?"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, nama); ps.setInt(2, nilai); ps.setString(3, nim); ps.executeUpdate(); ps.close(); conn.close(); } public void baca(String cariNim) throws Exception { Class.forName("com.mysql.cj.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/test", "root", ""); String sql = "SELECT * FROM mahasiswa WHERE nim=?"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, cariNim); ResultSet rs = ps.executeQuery(); if (rs.next()) { this.nim = rs.getString("nim"); this.nama = rs.getString("nama"); this.nilai = rs.getInt("nilai"); } rs.close(); ps.close(); conn.close(); } }

File: mahasiswa.baca.jsp

<%@ page import="model.Mahasiswa" %> <% Mahasiswa mhs = new Mahasiswa(); try { mhs.baca("22110397"); } catch (Exception e) { out.print("Error baca: " + e.getMessage()); } %> NIM: <%= mhs.nim %><br> Nama: <%= mhs.nama %><br> Nilai: <%= mhs.nilai %><br>

File: mahasiswa.tambah.jsp

<%@page import="model.Mahasiswa"%> <% Mahasiswa mahasiswa = new Mahasiswa(); mahasiswa.nim = "22110397"; mahasiswa.nama = "Bahara"; mahasiswa.nilai = 30; try { mahasiswa.tambah(); out.println("Data berhasil ditambahkan"); } catch (Exception e) { out.println("Data gagal disimpan"); } %>

File: mahasiswa.update.jsp

mahasiswa.update.jsp
<%@ page import="model.Mahasiswa" %> <% Mahasiswa mhs = new Mahasiswa(); mhs.nim = "22110397"; mhs.nama = "Bahara Update"; mhs.nilai = 90; try { mhs.update(); out.println("Data berhasil diubah"); } catch (Exception e) { out.print("Error update: " + e.getMessage()); } %>

Catatan: jika ingin melihat hasil semua data yang ada di database cek url ini http://localhost:8080/crud-jsp/index.jsp dan jika dicari url

βœ… Method tambah() akan mengembalikan true jika berhasil, dan false jika gagal.

Kesimpulan

Dalam tutorial ini, kamu telah belajar bagaimana:

Membaca data dari database ke halaman JSP

Menambahkan data menggunakan Statement dan PreparedStatement

Memisahkan logika database ke dalam class Java

Langkah selanjutnya, kamu bisa menambahkan fitur Update dan Delete dengan prinsip yang sama, serta menyempurnakan struktur proyek menggunakan pattern MVC.