<p><strong>Membuat CRUD dengan Java Web : Menampilkan Data dari Database &#8211; </strong>Pada artikel sebelumnya kita sudah menyiapkan tool-tool apa saja yang akan digunakan untuk membuat crud dengan java web ini. Jika anda terlewat pada artikel sebelumnya, sebaiknya anda membaca terlebih dahulu artikel <a href="https://www.tutorialpedia.net/membuat-crud-dengan-java-web-persiapan-awal/">Membuat CRUD dengan Java Web : Persiapan Awal</a>. Karena ada beberapa hal yang harus anda siapkan terlebih dahulu untuk melangkah pada tutorial membuat crud dengan java web menampilkan data dari database. Seperti menyiapkan library dan juga package. Seperti yang sudah saya jelaskan pada artikel sebelumnya kita akan Membuat CRUD dengan Java Web menggunakan pattern MVC.</p>
<h2><strong>Cara </strong><strong>Menampilkan Data dari Database</strong></h2>
<p>Langkah pertama yang harus disiapkan untuk membuat crud dengan java web adalah menampilkan data dari database, tapi sebelumnya kita membuat database terlebih dahulu dengan nama <strong>latihan_crud </strong>dan table dengan nama <strong>tb_user, </strong>lalu mengisi beberapa record yang nantinya akan di tampilkan dari database melalui browser. Anda bisa dumping sql berikut ini:</p>
<pre class="lang:default decode:true">-- phpMyAdmin SQL Dump 
-- version 4.2.7.1 
-- http://www.phpmyadmin.net 
-- 
-- Host: 127.0.0.1 
-- Generation Time: Nov 21, 2016 at 12:51 PM 
-- Server version: 5.6.20 
-- PHP Version: 5.5.15 
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 
SET time_zone = "+00:00"; 
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 
/*!40101 SET NAMES utf8 */; 
 
-- 
-- Database: `latihan_crud` 
-- 
 
-- -------------------------------------------------------- 
 
-- 
-- Table structure for table `tb_user` 
-- 
 
CREATE TABLE IF NOT EXISTS `tb_user` ( 
`id` int(5) NOT NULL, 
 `nama` varchar(20) NOT NULL, 
 `alamat` text NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; 
 
-- 
-- Dumping data for table `tb_user` 
-- 
 
INSERT INTO `tb_user` (`id`, `nama`, `alamat`) VALUES 
(1, 'Tutorialpedia', 'Jakarta'), 
(2, 'Fikriansyah', 'Bandar Lampung'); 
 
-- 
-- Indexes for dumped tables 
-- 
 
-- 
-- Indexes for table `tb_user` 
-- 
ALTER TABLE `tb_user` 
 ADD PRIMARY KEY (`id`); 
 
-- 
-- AUTO_INCREMENT for dumped tables 
-- 
 
-- 
-- AUTO_INCREMENT for table `tb_user` 
-- 
ALTER TABLE `tb_user` 
MODIFY `id` int(5) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3; 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 
</pre>
<p> ;</p>
<h3><strong>Membuat Class Koneksi</strong></h3>
<p>Untuk membuat koneksi ke database kita membuat class koneksi terlebih dahulu pada package model.</p>
<p>Klik kanan pada package <strong>net.tutorialpedia.model</strong><strong> </strong>yang sebelumnya telah kita buat pada artikel <em>Membuat CRUD dengan Java Web : Persiapan Awal</em>, lalu pilih <strong>New >; Java Class </strong>dan beri nama dengan <strong>Koneksi. </strong>Lihat gambar dibawah ini<br />
<a href="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_189.png"><img class="aligncenter size-full wp-image-2542" src="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_189.png" alt="membuat crud dengan java web" width="273" height="146" /></a></p>
<p>Lalu isi dengan kode berikut ini.</p>
<p><strong>Koneksi.java</strong></p>
<pre class="lang:java decode:true">/* 
 * 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 net.tutorialpedia.model; 
 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.ResultSet; 
import java.sql.Statement; 
 
/** 
 * 
 * @author PH4NTHOM 
 */ 
public class Koneksi { 
 private Connection conn; 
 private Statement st; 
 
 public static void ambilKoneksi() { 
 try { 
 String db = "jdbc:mysql://localhost:3306/latihan_crud"; 
 String user = "root"; 
 String pass = ""; 
 Class.forName("com.mysql.jdbc.Driver"); 
 Connection con = DriverManager.getConnection(db, user, pass); 
 } catch (Exception x) { 
 System.out.println("Terjadi kesalahan ambil koneksi : " + x); 
 } 
 } 
 
 public void koneksi() { 
 try { 
 String db = "jdbc:mysql://localhost:3306/latihan_crud"; 
 String user = "root"; 
 String pass = ""; 
 Class.forName("com.mysql.jdbc.Driver"); 
 conn = DriverManager.getConnection(db, user, pass); 
 st = conn.createStatement(); 
 } catch (Exception x) { 
 
 System.out.println("Terjadi kesalahan koneksi : " + x); 
 } 
 } 
 
 public void diskonek(ResultSet rs) { 
 try { 
 if (rs != null) { 
 rs.close(); 
 } 
 st.close(); 
 conn.close(); 
 } catch (Exception x) { 
 System.out.println("Terjadi kesalahan diskoneksi : " + x); 
 } 
 } 
 
 public ResultSet ambilData(String sql) { 
 ResultSet rs = null; 
 try { 
 koneksi(); 
 rs = st.executeQuery(sql); 
 } catch (Exception x) { 
 System.out.println("Terjadi kesalahan ambil data : " + x); 
 } 
 return rs; 
 } 
 
 public void simpanData(String sql) { 
 try { 
 koneksi(); 
 st.executeUpdate(sql); 
 } catch (Exception x) { 
 System.out.println("Terjadi kesalahan simpan data : " + x); 
 } 
 } 
} 
</pre>
<p><strong>Penjelasan:</strong></p>
<pre class="lang:default decode:true "> String db = "jdbc:mysql://localhost:3306/latihan_crud";</pre>
<p>String db digunakan untuk mendeklarasikan nama database yang anda gunakan, pada tutorial ini saya menggunakan database dengan nama <strong>latihan_crud.</strong></p>
<pre class="lang:java decode:true">String user = "root"; 
String pass = "";</pre>
<p>Sedangkan string user dan pass digunakan untuk mendeklar user dan password database MySQL anda. Jika MySQL anda tidak diberi password maka cukup kosongkan saja.</p>
<p> ;</p>
<h3><strong>Membuat Class UserModel</strong></h3>
<p>Pada class user model ini digunakan untuk menyimpan semua query mysql yang didalamnya terdapat insert,update dan delete. yang mana ketiga query ini sangat di perlukan dalam membuat crud dengan java web</p>
<p>Klik kanan pada package <strong>net.tutorialpedia.model</strong> lalu klik <strong>New >; Java Class. </strong>Isi nama dengan <strong>UserModel</strong></p>
<p>Lalu buat setter dan getter berdasarkan field yang telah dibuat pada table <strong>tb_user. </strong>Anda bisa membuatnya dengan mudah melalui gambar bergerak berikut ini:</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/11/getter.gif"><img class="aligncenter size-full wp-image-2544" src="https://www.tutorialpedia.net/wp-content/uploads/2016/11/getter.gif" alt="membuat crud dengan java web" width="649" height="375" /></a></p>
<p>lalu tambahkan <strong>constructor </strong>di bawah String.</p>
<pre class="lang:default decode:true "> Koneksi db = null; 
 
 public UserModel() { 
 db = new Koneksi(); 
 }</pre>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_190.png"><img class="aligncenter size-full wp-image-2546" src="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_190.png" alt="membuat crud dengan java web" width="377" height="174" /></a></p>
<p>lalu tambahkan kode untuk menampilkan data dari database sebelum tanda kurung kurawal terakhir.</p>
<pre class="lang:java decode:true"> public List tampil() { 
 List<;UserModel>; data = new ArrayList<;UserModel>;(); 
 ResultSet rs = null; 
 
 try { 
 String sql = "select * from tb_user order by nama asc"; 
 rs = db.ambilData(sql); 
 while (rs.next()) { 
 UserModel um = new UserModel(); 
 um.setId(rs.getString("id")); 
 um.setNama(rs.getString("nama")); 
 um.setAlamat(rs.getString("alamat")); 
 data.add(um); 
 
 } 
 db.diskonek(rs); 
 } catch (Exception ex) { 
 System.out.println("Terjadi Kesalahan Saat menampilkan data User" + ex); 
 } 
 return data; 
 }</pre>
<p>Sehingga hasil kode pada <strong>UserModel.java </strong>akan menjadi seperti dibawah ini.</p>
<pre class="lang:java decode:true">/* 
 * 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 net.tutorialpedia.model; 
 
import java.sql.ResultSet; 
import java.util.ArrayList; 
import java.util.List; 
 
/** 
 * 
 * @author TutorialPedia 
 */ 
public class UserModel { 
 String id,nama,alamat; 
 Koneksi db = null; 
 
 public UserModel() { 
 db = new Koneksi(); 
 } 
 
 public String getId() { 
 return id; 
 } 
 
 public void setId(String id) { 
 this.id = id; 
 } 
 
 public String getNama() { 
 return nama; 
 } 
 
 public void setNama(String nama) { 
 this.nama = nama; 
 } 
 
 public String getAlamat() { 
 return alamat; 
 } 
 
 public void setAlamat(String alamat) { 
 this.alamat = alamat; 
 } 
 
 public List tampil() { 
 List<;UserModel>; data = new ArrayList<;UserModel>;(); 
 ResultSet rs = null; 
 
 try { 
 String sql = "select * from tb_user order by nama asc"; 
 rs = db.ambilData(sql); 
 while (rs.next()) { 
 UserModel um = new UserModel(); 
 um.setId(rs.getString("id")); 
 um.setNama(rs.getString("nama")); 
 um.setAlamat(rs.getString("alamat")); 
 data.add(um); 
 
 } 
 db.diskonek(rs); 
 } catch (Exception ex) { 
 System.out.println("Terjadi Kesalahan Saat menampilkan data User" + ex); 
 } 
 return data; 
 } 
} 
</pre>
<p>Pada Class <strong>UserModel.java </strong>cukup sampai disini saja karena yang kita perlukan saat ini hanya koding tampilnya saja.</p>
<p>Sekarang kita beralih ke view (JSP) yang akan kita lakukan adalah menampilkan data pada web browser melalui halaman JSP <em>(Java Server Pages).</em></p>
<p>Buka halaman <strong>index.jsp </strong>anda pada <strong>Web Pages. </strong>Lalu isi denga kode berikut ini:</p>
<pre class="lang:java decode:true"><;!DOCTYPE html>; 
<;html>; 
 <;head>; 
 <;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">; 
 <;title>;Latihan Java Web | TutorialPedia.NET<;/title>; 
 <;/head>; 
 <;body>; 
 <;center>;<;h1>;Membuat CRUD dengan Java Web | TutorialPedia.NET<;/h1>;<;/center>; 
 <;table style="margin:20px auto;" border="1">; 
	<;tr>; 
 <;th>;No<;/th>; 
 <;th>;Nama<;/th>; 
 <;th>;Alamat<;/th>; 
 <;th>;Action<;/th>; 
	<;/tr>; 
 <;% 
 UserModel km = new UserModel(); 
 List<;UserModel>; data = new ArrayList<;UserModel>;(); 
 String ket = request.getParameter("ket"); 
 if (ket == null) { 
 data = km.tampil(); 
 } 
 for (int x = 0; x <; data.size(); x++) { 
 %>; 
 <;tr>; 
 <;td>;<;%=x + 1%>;<;/td>; 
 <;td>;<;%=data.get(x).getNama()%>;<;/td>; 
 <;td>;<;%=data.get(x).getAlamat()%>;<;/td>; 
 <;td>; 
 <;a href="#">;Edit<;/a>; 
 <;a href="#">;Hapus<;/a>; 
 <;/td>; 
 <;/tr>; 
 <;%}%>; 
 <;/table>; 
 <;/body>; 
<;/html>;</pre>
<p><strong>Penjelasan</strong></p>
<pre class="lang:java decode:true"> <;% 
 UserModel km = new UserModel(); 
 List<;UserModel>; data = new ArrayList<;UserModel>;(); 
 String ket = request.getParameter("ket"); 
 if (ket == null) { 
 data = km.tampil(); 
 } 
 for (int x = 0; x <; data.size(); x++) { 
 %>;</pre>
<p>Merupakan fungsi pengulangan pada java yang terbungkus pada tag scriptlet <strong><;%%>;. </strong> Jika terjadi error itu di karenakan anda belum mengimport package yang diperlukan anda bisa memperbaikinya dengan cara berikut ini.</p>
<p><a href="https://s5.postimg.org/ua6m6wylj/error_import.gif"><img class="aligncenter size-large" src="https://s5.postimg.org/ua6m6wylj/error_import.gif" alt="membuat crud dengan java web" width="649" height="375" /></a></p>
<p>lalu<strong> Save ALL</strong></p>
<p>Jika sudah anda bisa melakukan testing dengan cara me <em><strong>run </strong></em>project, dengan cara klik kanan pada folder project anda lalu klik <strong>RUN.</strong></p>
<p>ketika keterangan pada output sudah sukses, anda bisa menjalankannya pada browser dengan memasukkan alamat <strong>http://localhost:8084/latihan_crud </strong>pada browser.</p>
<p>Apabila tidak ada error maka akan tampil data yang sudah kita input tadi pada database seperti berikut ini:</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_192.png"><img class="aligncenter size-large wp-image-2547" src="https://www.tutorialpedia.net/wp-content/uploads/2016/11/Screenshot_192-1024x341.png" alt="membuat crud dengan java web" width="900" height="300" /></a></p>
<p>Sampai disini kita telah berhasil membuat crud dengan java web menampilkan data dari database. Untuk tutorial kali ini kita belum bermain dengan controller karena kita belum membutuhkan request apapun. Pada tutorial membuat crud dengan java web selanjutnya kita akan belajar bagaimana menyimpan data ke database.</p>
<p>Sekian artikel Membuat CRUD dengan Java Web pada sub Menampilkan data dari database.</p>
<p>Sampai bertemu pada artikel berikutnya.</p>
<p><strong>Baca :</strong></p>
<h4>1. <a href="https://www.tutorialpedia.net/membuat-crud-dengan-java-web-persiapan-awal/">Membuat CRUD dengan Java Web : Persiapan Awal</a></h4>
<h4>2. <a href="https://www.tutorialpedia.net/membuat-crud-dengan-java-web-application-menampilkan-data/">Membuat CRUD dengan Java Web : Menampilkan Data dari Database</a></h4>

Membuat CRUD dengan Java Web : Menampilkan Data dari Database
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
19 Comments
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Kalo menampilkan data ke table menggunakan ajax gimana bang ? Mohon bantuanya
Ini gan:
https://www.tutorialpedia.net/contoh-penggunaan-ajax-jquery-pada-servlet-dan-jsp/
Packpage yang mana kita import? Kalo error
gak ada error si mas tapi kenapa kosong ya data nya gak ada? mohon bantuannya
coba cek error log nya kan di console netbean (kalau pakai netbean)
ada kemungkinan di salah di query slq nya
mau tanya kenapa pada user model masih ada yang eror pada list tampil? mohon bantuannya
tolong cantumkan bentuk error nya seperti apa.
karena kami bukan dukun yang bisa menerawang error tersebut. 😀
eror yg tdi udh jadi hehe
tapi kenapa masih saja, ketika di run masih belum ada datanya
Boleh minta emailnya, biar bisa lebih jelas menunjukan erornya
silahkan : email@tutorialpedia.net
Sya melihat contact ,Kak boleh , tau alamat di mana/ bandar lampung mana?
sya mau berguru/belajar langsung
saat ini saya sudah ga belajar java lagi. jadi sudah banyak yg lupa.
maaf ya
Min, bagian Controller nya mana min ?
ga pake controller, diatasnya langsung tambah import kyk gini
Semua Error sudah engga ada, kok masih aja datanya tidak muncul ya min?
coba cek querynya mas
*Jika terjadi error itu di karenakan anda belum mengimport package yang diperlukan anda bisa memperbaikinya dengan cara berikut ini.
min gambar rusak min,,, tolong di fix min, nanggung udah bisa eh gambar broken.
gambarnya rusak karena link external tersebut situsnya down.
importnya biasa kok sama seperti import package lainnya
Kirimin bang gambarnya, nangung bnget ni