Object Oriented

Programming 2
CRUD dengan SPRING
(Menampilkan Data)

Sena Wijayanto, S.Pd., M.T.

POLITEKNIK HARAPAN BERSAMA
 Object Oriented Programming 2

CRUD dengan SPRING (Menampilkan Data)

A. Membuat Database
1. Buat database dengan nama bebas, misal : db_websisteminformasi
2. Buat tabel dengan nama mahasiswa dengan struktur seperti berikut ini
Kolom Tipe Keterangan
nim Varchar (8) not null primary key
nama Varchar (30)
prodi Varchar (50)

3. Isi tabel tersebut dengan data sample untuk praktek menampilkan data dari database.

B. Membuat project
1. Buka alamat http://start.spring.io

2. Isikan Group dengan nama OOP2.kelas.nama (contoh: OOP2.5A.SenaWijayanto)

sedangkan pada Artifact isi dengan nama aplikasi yang akan dibuat.
3. Pada dependencies tambahkan beberapa pustaka berikut ini :
a. JPA. Yang nantinya kita butuhkan untuk memudahkan melakukan operasi
manipulasi basis data.
b. Thymeleaf. Digunakan untuk melakukan templating halaman html.
c. Web. Digunakan untuk implementasi MVC pada aplikasi web yang kita bangun.
d. MySQL. Digunakan sebagai driver basis data yang menghubungkan Java
dengan basis data mysql.
e. Lombok. Digunakan untuk menjadikan kode yang kita buat lebih bersih.

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

4. Klik Generate, maka akan Nanti kita akan mendapat sebuah file terkompres dengan
ekstensi zip
5. Ekstrak file tersebut, kemudian buka project dengan IntelliJ IDEA. Tunggu hingga
proses download plugin selesai
6. Buatlah sebuah file html sebagai bagian dari View dalam konsep MVC di bagian
resources - templates dengan nama bebas, misal kita berikan nama home.html

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

Isi home.html dengan kode berikut:

7. Berikutnya kita membuat sebuah controller yang menghubungkan antara aplikasi

backend dengan frontend, biasanya untuk controller ini dibuatkan dalam sebuah
Packages tersendiri dalam dengan nama controller.

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

8. Buatlah sebuah file controller disana, misalkan kita beri nama AppController seperti
terlihat pada gambar berikut

9. Isi kode AppController.java dengan kode berikut ini :

Perhatikan bahwa parameter dari @RequestMapping harus sama dengan nama file
html yang kita buat sebelumnya.

C. Menampilkan Data
1. Buat konfigurasi koneksi ke basis data agar Spring Data JPA dapat melakukan akses
data secara penuh ke sistem basis data yang kita gunakan. Konfigurasi ini ada pada
file application.properties.

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

2. Isi konfigurasinya dengan kode berikut:

Baris ke-4 di-disable karena pada settingan mysql tidak terdapat password

3. Buat file html dengan nama daftar-mahasiswa.html untuk menampilkan semua data
dari tabel mahasiswa

4. Isi file daftar-mahasiswa.html dengan kode berikut:

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

Perhatikan pada baris ke-18, disana ada deklarasi variabel mhs yang nantinya akan
diisikan oleh setiap nilai yang ada pada variabel daftarMahasiswa. Variabel
daftarMahasiswa sendiri sebetulnya akan dikirimkan dari controller di server.

Nilai dari masing-masing daftarMahasiswa itu sebetulnya adalah sebuah objek yang
nantinya dititipkan ke variabel mhs yang kemudian pada baris ke-19 sampai ke-21
akan ditampilkan satu-satu berdasarkan nama propertinya, yaitu nim, nama, dan
prodi.

5. Selanjutnya ubah AppController yang telah kita buat sebelumnya agar file html tadi
dapat dijalankan di browser. Tambahkan RequestMapping baru pada AppController
sehingga kode akan menjadi seperti berikut :

Perhatikan bahwa di kelas controller ini, ada anotasi baru yang kita gunakan, yaitu
Autowired dimana ini adalah feature dari Spring untuk dependency injection yang
secara otomatis akan membuatkan kita instan dari interface MahasiswaRepo.

Perhatikan juga pada baris ke-17, dimana kita membentuk mapping baru untuk
daftar-mahasiswa, kemudian pada method getDaftarMahasiswa pada baris ke-18
memiliki sebuah parameter model yang merupakan pengait data antara backend
service dengan frontend service.

Yang terakhir adalah pada baris ke-19 dimana pada model ditambahkan atribut
daftarMahasiswa sebagaimana dibutuhkan sebelumnya pada file daftar-
mahasiswa.html, yang isinya diambilkan dari basis data dengan memanggil
repository kelas hasil turunan / pewarisan dari JpaRepository

6. Buat file interface MahasiswaRepo yang kita simpan pada package tersendiri yaitu
pada package repo

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

7. Kemudian ubah file MahasiswaRepo.java menjadi kode berikut:

Yang perlu di perhatikan adalah pada bagian deklarasi JpaRepository, disana

membutuhkan 2 (dua) parameter, yaitu kelas entitasnya, kelas yang berfungsi sebagai
tampungan data dari basis data, kemudian yang kedua adalah tipe data key dari tabel
mahasiswa. Kebetulan yang menjadi key di tabel mahasiswa adalah nim dengan tipe
data String.
8. Membuat kelas entitas untuk menampung data dari tabel mahasiswa. Nama file atau
nama kelas harap diperhatikan bahwa harus sama dengan nama tabel di basis data,
perbedaannya adalah pada nama kelas, huruf awalnya harus huruf kapital, sedangkan
sisanya adalah huruf kecil biasa.

Kelas entitas ini kita beri nama Mahasiswa dengan penempatan pada lokasi package
tersendiri agar lebih mudah kita pelihara aplikasinya.

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

9. Isi file Mahasiswa.java dengan kode berikut ini:

Kode dari kelas Mahasiswa ini tampak biasa saja, ada tambahan anotasi Entity
sebagai penanda bahwa ini adalah kelas entitas, ada anotasi Id yang melekat pada
properti nim yang tujuannya adalah memberikan tanda bahwa primary key di tabel
basis data akan disimpan disini, kemudian ada beberapa anotasi Getter dan Setter
yang diambilkan dari pustaka lombok agar kode program yang kita buat lebih bersih
dan lebih mudah untuk dibaca.
10. Jalankan project, kemudian pada browser akses alamat http://localhost:8080/daftar-
mahasiswa sehingga akan muncul tampilan aplikasi web seperti berikut:

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)

 Object Oriented Programming 2

Sena Wijayanto, S.Pd., M.T. | CRUD dengan SPRING (Menampilkan Data)