1

WEB JSP DENGAN DATABASE MYSQL

Dwi Remawati, M.Kom Hendro Wijayanto, M.Kom

Buku Ajar

WEB JSP DENGAN DATABASE MYSQL

Dwi Remawati, S. Kom, M. Kom

Hendro Wijayanto, S. Kom, M. Kom

Penerbit LEMBAGA PENELITIAN DAN PENGABDIAN KEPADA MASYARAKAT

UNIVERSITAS DIAN NUSWANTORO SEMARANG

2021

Buku Ajar. Web JSP Dengan Database MySQL Penulis/Penyusun: Dwi Remawati, S. Kom, M. Kom Hendro Wijayanto, S. Kom, M. Kom ISBN : 978-623-96867-8-9 Penerbit : Lembaga Penelitian dan Pengabdian Kepada Masyarakat Universitas Dian Nuswantoro Semarang Redaksi : LPPM UDINUS Jl. Nakula I No. 5-11 Semarang 50131 Telp : (024) 352-7261, 352-0165 Fax : (024) 356-9684 E-mail : sekretariat@lppm. dinus. ac. id Desain sampul : Hendro Wijayanto Pencetak :Percetakan Universitas Dian Nuswantoro Semarang Hak Cipta 2021 dilindungi oleh undang-undang, Dilarang mengutip Sebagian atau seluruh isi tanpa seijin penulis.

Kata Pengantar Puji Syukur Kami panjatkan pada Tuhan Yang Maha Esa atas

berkat rahmat serta nikmatnya atas terselesaikannya Buku dengan judul Web JSP dengan Database MySQL.

Buku ini merupakan buku tutorial praktikum serta teori dasar yang dapat digunakan sebagai panduan perkuliahan maupun tutorial mandiri. Didalamnya berisi tentang dasar-dasar database MySQL, pengenalan Java Server Page (JSP), dan Create Read Update Delete (CRUD) menggunakan JSP-MySQL di dalam Netbeans Tools. Dalam buku ini disertai tahapan-tahapan secara runtut berupa gambar, script program yang saling berkaitan. Sehingga mahasiswa atau para pembaca dapat memahami secara utuh, dan setelah mencoba mempraktekkan, di akhir praktikum akan mendapatkan sebuah aplikasi sederhana berupa aplikasi CRUD dengan JSP-MySQL.

Kami menyadari masih banyak kekurangan dalam buku ini, sehingga Kami berharap masukan dari pembaca. Yang terakhir sebagai penulis Kami berharap buku ini dapat berguna untuk materi praktikum perkuliahan maupun praktikum mandiri.

Surakarta, Juni 2021 Penulis

Daftar Isi Kata Pengantar ............................................................................................ iv

Daftar Isi ........................................................................................................ v

Daftar Gambar .............................................................................................vii

Daftar Tabel ................................................................................................... ix

Bagian 1 Pengenalan Netbeans dan JSP.................................................... 1

A. Instalasi Netbeans ............................................................................... 1

B. Konfigurasi Netbeans .......................................................................... 5

B.1. Konfigurasi Plugins ...................................................................... 5

B.2. Menambah Server di Netbeans ................................................10

C. Memulai Java Server Page ................................................................14

C.1. Memulai Project Web Application .............................................14

C.2. Memulai Java Server Page (JSP) dengan Netbeans................17

Bagian 2 Query Database MySQL ..............................................................21

A. Dasar-dasar Database MySQL ..........................................................21

A.1. Normalisasi Database ...............................................................21

A.2. Perintah Dasar MySQL ...............................................................24

B. Mengenal XAMPP ...............................................................................25

C. Membuat Database di XAMPP ..........................................................25

Bagian 3 Membuat Koneksi Database .....................................................30

Bagian 4 Menampilkan Data .....................................................................33

Bagian 5 Menambah Data .........................................................................36

Bagian 6 Memodifikasi Data......................................................................40

Bagian 7 Menghapus Data ........................................................................44

Bagian 8 Ekspor dan Cetak Dokumen ......................................................46

A. Ekspor Dokumen ................................................................................46

B. Cetak Dokumen .................................................................................48

Bagian 9 Membuat Template Web ............................................................49

Daftar Pustaka ............................................................................................55

Daftar Gambar Gambar 1 Aplikasi Apache Netbeans .......................................................... 1 Gambar 2 Welcome Apache Netbeans Installer......................................... 2 Gambar 3 License Agreement ..................................................................... 2 Gambar 4 Installation Path .......................................................................... 3 Gambar 5 Summary ..................................................................................... 3 Gambar 6 Installation ................................................................................... 4 Gambar 7 Installation Finish ........................................................................ 4 Gambar 8 Aplikasi Netbeans Sudah Ready ................................................ 5 Gambar 9 Apache Netbeans pertama kali ................................................. 6 Gambar 10 Menu Tools - Plugins ................................................................ 6 Gambar 11 Pilihan Plugins .......................................................................... 7 Gambar 12 Activate Plugins......................................................................... 7 Gambar 13 Proses Aktifasi Plugin ............................................................... 8 Gambar 14 Plugins selesai .......................................................................... 8 Gambar 15 Netbeans Siap Digunakan ....................................................... 9 Gambar 16 Server Netbeans ....................................................................... 9 Gambar 17 Glassfish ..................................................................................10 Gambar 18 Glassfish ..................................................................................11 Gambar 19 Server Netbeans .....................................................................11 Gambar 20 Choose Server .........................................................................12 Gambar 21 Server Location .......................................................................12 Gambar 22 Domain Location .....................................................................13 Gambar 23 Server Netbeans Finish ..........................................................14 Gambar 24 New Projcet .............................................................................14 Gambar 25 Choose Project ........................................................................15 Gambar 26 Name and Location ................................................................15 Gambar 27 Server and Settings ................................................................16 Gambar 28 Halaman Default.....................................................................16 Gambar 29 index.html diganti index.jsp ...................................................17 Gambar 30 Pilihan JSP ...............................................................................17 Gambar 31 Name and Location ................................................................18 Gambar 32 index.jsp ..................................................................................18 Gambar 33 Deployment Project ................................................................19

Gambar 34 Proses Deploy berhasil ...........................................................19 Gambar 35 Hello World! Netbeans ...........................................................20 Gambar 36 Kwitansi Rumah Sakit ............................................................22 Gambar 37 Diagram relasional database.................................................23 Gambar 38 phpmyadmin ...........................................................................27 Gambar 39 Create Database .....................................................................27 Gambar 40 Struktur tabel di dalam phpmyadmin ...................................29 Gambar 41 Add Library ..............................................................................30 Gambar 42 Available Library......................................................................31 Gambar 43 Directory Libraries ..................................................................31 Gambar 44 Script Koneksi .........................................................................32 Gambar 45 Script menampilkan data .......................................................34 Gambar 46 Tampilan di web browser .......................................................34 Gambar 47 Tampilan di web browser setelah dimodifikasi ....................35 Gambar 48 Link Tambah Data ..................................................................36 Gambar 49 Tampilan Link Tambah Data ..................................................36 Gambar 50 tambah.jsp ..............................................................................37 Gambar 51 Form Tambah Data .................................................................37 Gambar 52 Tampilan Web Form ...............................................................38 Gambar 53 Script Proses Tambah ............................................................39 Gambar 54 Link edit.jsp .............................................................................40 Gambar 55 Tampilan Web Aksi Edit ..........................................................40 Gambar 56 edit.jsp .....................................................................................41 Gambar 57 Script edit.jsp ..........................................................................42 Gambar 58 Tampilan Form Edit ................................................................42 Gambar 59 Script Proses Edit ...................................................................42 Gambar 60 Tampilan Aksi Delete ..............................................................44 Gambar 61 delete.jsp .................................................................................44 Gambar 62 Script delete.jsp ......................................................................45 Gambar 63 Ekspor.jsp ................................................................................46 Gambar 64 Script ekspor.jsp .....................................................................47 Gambar 65 Link ekspor.jsp ........................................................................48 Gambar 66 Tampilan Web Browser ..........................................................48

Daftar Tabel

Tabel 1 Tabel Unnormalisasi......................................................................22 Tabel 2 Normalisasi Pertama ....................................................................22 Tabel 3 Tabel mahasiswa...........................................................................26 Tabel 4 Tabel program studi ......................................................................26 Tabel 5 Tabel agama ..................................................................................26

1

Bagian 1 Pengenalan Netbeans dan JSP

A. Instalasi Netbeans

Dalam Pemrograman Web 1, Netbeans merupakan salah satu Tools Editor yang dapat digunakan. Terdapat banyak editor lain selain Netbeans seperti Eclipse, dan editor lainnya. Versi terbaru dari Netbeans adalah Apache Netbeans 12.3 yang dapat diperoleh di https://netbeans.apache.org/download/index.html. Langkah-langkah instalasi Netbeans 12.3 adalah sebagai berikut :

1. Pastikan Aplikasi Netbean sudah terdownload

Gambar 1 Aplikasi Apache Netbeans

2. Double clik file aplikasi Netbeans yang sudah terdownload. Kemudian Pilih Next

2

Gambar 2 Welcome Apache Netbeans Installer

3. Checklist License Agreement dan Klik Next

Gambar 3 License Agreement

4. Pastikan sebelum menginstall Netbeans, sudah terinstal JDK terlebih dahulu. Sehingga Patch instalasi Netbeans dapat dipilih.

3

Gambar 4 Installation Path

5. Aktifkan Update Automatic untuk mendapatkan fitur terbaru di Netbeans. Kemudian klik Install

Gambar 5 Summary

6. Proses instalasi akan berjalan. Tunggu sampai proses selesai

4

Gambar 6 Installation

7. Klik Finish jika proses instalasi telah selesai

Gambar 7 Installation Finish

8. Aplikasi Netbeans Sudah terinstall

5

Gambar 8 Aplikasi Netbeans Sudah Ready

B. Konfigurasi Netbeans Setelah Tools Netbean terinstall di computer, perlu dilakukan

konfigurasi agar plugins didalamnya aktif, dan konfigurasi Server agar Netbeans dapat melakukan kompilasi script program yang membutuhkan server. B.1. Konfigurasi Plugins

1. Tampilan awal Netbeans setelah selesai di Install dan belum dilakukan konfigurasi.

6

Gambar 9 Apache Netbeans pertama kali

2. Pilih menu Tools - Kemudian pilih Plugins

Gambar 10 Menu Tools - Plugins

3. Masuk ke Tab Menu Installed

7

Gambar 11 Pilihan Plugins

4. Kemudian checklist seluruh item yang ada. Kemudian klik Activate

Gambar 12 Activate Plugins

5. Kemudian klik Activate. Tunggu sampai proses Activate Plugins selesai

8

Gambar 13 Proses Aktifasi Plugin

6. Klik Finish setelah selesai

Gambar 14 Plugins selesai

7. Setelah proses aktivasi plugins selesai, maka menu bar Netbeans akan berubah. Perubahan terdapat pada jumlah menu yang ada

9

Gambar 15 Netbeans Siap Digunakan

Dalam Tools Netbeans, keberadaan Server sangat penting sekali. Karena Server ini akan menjadi tempat hasil kompailer sebelum hasil kompailer ditampilkan/dirunning. Apabila aplikasi Netbeans yang di Download adalah versi Full, maka server sudah terinstall langsung dan terintegrasi dengan Netbeans. Untuk melihatnya dapat dipilih menu Tools – kemudian pilih Server.

Gambar 16 Server Netbeans

10

Dari gambar tersebut, dapat dilihat bahwa Server yang sudah terintegrasi dengan Netbeans adalah Apache Tomcat dan Glassfish Server. Apabila di Netbeans belum terinstall Server sama sekali, maka dapat menambahkan server secara manual.

B.2. Menambah Server di Netbeans

Dalam Netbeans versi 12.0, Server yang dapat terinstegrasi dengan Netbeans adalah Apache Tomcat (TomEE), GlassFish Server, Payara Server dan WildFly Application Server. Untuk menambah server, perlu mendownload terlebih dahulu satu dari beberapa server tersebut. Disini dicontohkan menambahkan GlassFish server.

1. Download terlebih dahulu Glassfish Server di https://javaee.github.io/glassfish/download. Pilih yang Full Platform. Biasanya akan didapatkan dalam bentuk archive (zip, rar, gz, dll). Disini akan didownload Glassfish Server versi 5.0 Full Platform

Gambar 17 Glassfish

2. Extract Glassfish server 5.0 tersebut di sembarang tempat. Direkomendasikan di Drive C atau system operasi.

11

Gambar 18 Glassfish

3. Di Tools Netbeans pilih menu Tools, pilih sub menu Server.

Gambar 19 Server Netbeans

4. Pilih Add Server. Pada Choose Server pilih pilihan GlassFish server. Kemudian klik Next

12

Gambar 20 Choose Server

5. Pada Server Location. Pada Installation Location pilih dengan klik Browse, dan arahkan ke folder Glassfish 5.0 yang sudah di Extract sebelumnya.

Gambar 21 Server Location

13

6. Apabila Netbeans berhasil mendeteksi keberadaan Server, maka akan muncul notifikasi tulisan warna biru (Detected GlassFish Server 5.0 install. Click Next to register remote or custome local domains). Kemudian klik Next

Gambar 22 Domain Location

7. Akan muncul Domain Location. Klik Finish. Maka satu buah server akan bertambah di Server Netbeans

14

Gambar 23 Server Netbeans Finish

C. Memulai Java Server Page Setelah Netbeans terintegrasi dengan server yang sudah ada,

maka Netbeans sudah dapat digunakan untuk belajar programming. Berikut cara memulai menggunakan Netbeans dalam pemrograman Java Server Page (JSP). C.1. Memulai Project Web Application

1. Buka Tools Netbeans kemudian pilih File – New Project

Gambar 24 New Projcet

15

2. Pada pilihan Choose Project, pilih Categories Java Web, dan pilih Web Applications pada Project. Kemudian klik Next

Gambar 25 Choose Project

3. Pada Project Name, berilah nama yang tidak mengandung karakter spasi. Kemudian Klik Next

Gambar 26 Name and Location

16

4. Pada pilihan Server and Settings, pilih Server sesuai server yang ada di Netbeans. Apabila server lebih dari satu, pilihlah salah satu yang dianggap paling ringan saat kompilasi. Dalam contoh kali ini menggunakan Server GlassFish 5.0. Kemudian langsung klik Finish

Gambar 27 Server and Settings

5. Berikut tampilan Default Web Apllication

Gambar 28 Halaman Default

17

C.2. Memulai Java Server Page (JSP) dengan Netbeans Setelah mencoba membuat Web Application seperti di bab sebelumnya. Dapat dilanjutkan dengan membuat Java Server Page (JSP) sederhana.

1. Apabila di Web Pages masih terdapat index.html, dapat dihapus terlebih dahulu

Gambar 29 index.html diganti index.jsp

2. Klik kanan pada Nama Project (Praktikum1) – Pilih New – Pilih JSP

Gambar 30 Pilihan JSP

18

3. Pada pilihan File Name isi dengan nama index. Kemudian klik Finish

Gambar 31 Name and Location

4. Akan muncul tampilan index.jsp

Gambar 32 index.jsp

5. Sebelum meruning script tersebut, Project harus di deploy terlebih dahulu. Proses deployment ini merupakan proses kompailer Java ke Server Netbeans untuk disiapkan proses running. Klik Kanan Project Praktikum1 – Pilih Deploy

19

Gambar 33 Deployment Project

6. Jika Proses Deploy berhasil, output running dibagian bawah Netbeans akan muncul notifikasi success

Gambar 34 Proses Deploy berhasil

7. Proses Deploy yang gagal dipengaruhi oleh Server yang tidak running / crash port dengan aplikasi lain, dipengaruhi oleh JDK yang tidak support atau dipengaruhi oleh script Java yang Error

8. Untuk me running script JSP yang sudah dibuat, klik kanan pada index.jsp – kemudian pilih Run File. Atau klik kanan pada Project Praktikum1 – kemudian pilih Run. Maka akan muncul default Browser yang akan menampilkan hasil script JSP yang telah dibuat.

20

Gambar 35 Hello World! Netbeans

21

Bagian 2 Query Database MySQL

Database merupakan kumpulan data yang digunakan untuk mendukung suatu aplikasi atau sistem agar berfungsi secara dinamis. Pada umumnya aplikasi atau sistem merupakan perangkat lunak yang mengolah suatu data. Data ini disimpan dalam tempat dan bentuk tertentu yang disebut dengan Database.

MySQL adalah sebuah DBMS (Database Management System) menggunakan perintah SQL (Structured Query Language) yang banyak digunakan saat ini dalam pembuatan aplikasi berbasis website. MySQL dibagi menjadi dua lisensi, pertama adalah Free Software dimana perangkat lunak dapat diakses oleh siapa saja. Dan kedua adalah Shareware dimana perangkat lunak berpemilik memiliki batasan dalam penggunaannya.

MySQL termasuk ke dalam RDBMS (Relational Database Management System). Sehingga, menggunakan tabel, kolom, baris, di dalam struktur database -nya. Jadi, dalam proses pengambilan data menggunakan metode relational database. Dan juga menjadi penghubung antara perangkat lunak dan database server.

A. Dasar-dasar Database MySQL A.1. Normalisasi Database

Normalisasi adalah suatu proses mendesain struktur database sehingga bisa menghasilkan sebuah table yang normal.

Bentuk-bentuk normalisasi antara lain : UNF, 1NF, 2NF, 3NF dan BCNF. Adapun Tujuan Dari Normalisasi adalah

• Untuk menghilangkan kerangkapan data/ redudansi. • Untuk mengurangi kompleksitas • Untuk mempermudah pemodifikasian data • Untuk menghilangkan anomali data

Normalisasi merupakan salah satu teknik perancangan basis data selain ERD (Entity Relationship Diagram). Inti dari normalisasi itu sendiri yaitu untuk menghasilkan struktur tabel yang normal/baik.Jadi

22

normalisasi itu adalah sebuah cara untuk memisahkan / memecah tabel yang mengalami redudansi data ke dalam tabel dua entitas / tabel atau lebih . Tahapan-tahapan normalisasi:

1. Unnormalisasi 2. Normalisasi 1 (1 NF) 3. Normalisasi 2 (2 NF) 4. Normalisasi 3 (3 NF)

Berikut adalah dokumen dasar berupa kwitansi dari Rumah Sakit yang akan di normalisasi :

Gambar 36 Kwitansi Rumah Sakit

Tahapan Normalisasi Untuk Kwitansi RS: 1. Unnormalisasi (Tidak Normalisasi/Unnormalize) Tabel 1 Tabel Unnormalisasi

2. Normalisasi Pertama (1 NF) Tabel 2 Normalisasi Pertama

23

3. Normalisasi Kedua (2NF) Menentukan primary key dari field yang diperoleh : - NoMedrec - NoKwitansi - NoTindakan 3. Normalisasi Ketiga (3NF)

Gambar 37 Diagram relasional database

24

Untuk kasus-kasus yang sederhana seperti contoh diatas, tahapan normalisasi rata-rata cuma sampai pada tahapan normalisasi ketiga, karena sudah menghasilkan tabel yang normal.

Untuk memastikan kebenaran isi tabel dan hubungan antar tabel, harus dilakukan pengujiann data. Caranya lakukan saja relasi tabel dari tabel-tabel yang sudah berhasil dipecah. Bila tidak ada hubungan antar tabel maka dapat dikatakan perancangan suatu basis data yang dilakukan itu adalah ‘gagal’.

A.2. Perintah Dasar MySQL

BAHASA DDL DDL adalah nama pendek dari Data Definition Language, yang

berkaitan dengan skema dan deskripsi basis data, tentang bagaimana data harus berada di dalam basis data. Didalamnya berisi fungsi Create, Alter, Drop, Truncate, Rename, dan Add

BAHASA DML DML adalah nama pendek dari Bahasa Manipulasi Data yang

berhubungan dengan manipulasi data, dan termasuk pernyataan SQL yang paling umum seperti SELECT, INSERT, UPDATE, DELETE, MERGE, LOCK TABLE, dan digunakan untuk menyimpan, memodifikasi, mengambil, menghapus, dan memperbarui data dalam database.

BAHASA DCL DCL adalah nama pendek dari Bahasa Kontrol Data yang

mencakup perintah seperti GRANT, dan sebagian besar berkaitan dengan hak, izin, dan kontrol lain dari sistem basis data.

BAHASA TCL TCL adalah nama pendek dari Bahasa Kontrol Transaksi yang berkaitan dengan transaksi dalam basis data. Meliputi Commit, Rollback, Savepoint, Set Transaction.

25

RELASI Perintah untuk menggabungkan field dari beberapa tabel yang saling berelasi. Sebelum menggabungkan harus menentukan relasi nya terlebih dahulu Relasi pada tabel terbagi 3 jenis : inner join, left join, right join

B. Mengenal XAMPP Membuat aplikasi web tidak bisa sembarangan. Sebelum

meluncurkannya secara online, Anda harus mengembangkannya dulu di server lokal. Anda bisa melakukan pengembangan dan pengujian aplikasi web di server lokal dengan XAMPP.

XAMPP adalah sebuah software yang menjalankan peran sebagai local web server. Local web server artinya, localhost komputer yang berperan menjalankan web server dan juga sistem database. Software ini biasa digunakan untuk pengujian aplikasi web melalui localhost. Aplikasi web yang dikembangkan secara native, menggunakan framework, maupun CMS bisa diuji menggunakan XAMPP.

XAMPP dikembangkan oleh Apache Friends. Apache Friends sendiri merupakan proyek nirlaba yang bertujuan untuk mempromosikan server web Apache. Software ini bisa di download melalui https://www.apachefriends.org/ dan bisa digunakan secara gratis sepenuhnya. Saat artikel ini dibuat, versi terbarunya adalah XAMPP 7.4.12. Cara instal XAMPP cukup sederhana, sama seperti instalasi software pada umumnya.

C. Membuat Database di XAMPP Untuk membuat database di XAMPP, pastikan terlebih dahulu

aplikasi XAMPP sudah terinstall di komputer. Setelah itu pastikan desain database sudah disiapkan. Dalam tutorial ini akan dibentuk sebuah database dan 3 tabel. Dimana tabelnya dapat dilihat pada tabel berikut : Nama Database : praktikum-jsp

26

Tabel 3 Tabel mahasiswa

Field Size Type nim 10 Int nama 50 String kd-prodi 5 Int kd-agama 1 Int

Tabel 4 Tabel program studi

Field Size Type kd-prodi 5 Int nama-prodi 50 String jenjang 2 String

Tabel 5 Tabel agama

Field Size Type kd-agama 10 Int agama 50 String

1. Aktifkan / start XAMPP di Control Panel XAMPP. Pastikan MySQL,

Apache berjalan dengan normal ditandai warna hijau pada notifikasinya. Apabila tidak berjalan normal, dimungkinkan port XAMPP crash atau bentrok dengan aplikasi lain.

2. Kemudian buka web browser dan akses ke alamat http://localhost/phpmyadmin

27

Gambar 38 phpmyadmin

3. Klik menu Database kemudian tuliskan nama databasenya. Kemudian klik Create

Gambar 39 Create Database

4. Bentuk masing-masing tabel sesuai desain tabel 1, tabel 2 dan tabel 3

28

29

Gambar 40 Struktur tabel di dalam phpmyadmin

5. Kemudian isikan masing-masing tabel dengan data sesuai tabel dan fieldnya.

30

Bagian 3 Membuat Koneksi Database

Sebelum membuat koneksi, perlu membuat project baru pada

Tools Netbeans. Langkah awal sudah disampaikan pada bab sebelumnya di sub bab memulai Java Server Page (JSP). Koneksi database merupakan bagian utama dalam sebuah aplikasi untuk menghubungkan antara Tools Editor program dan aplikasi database. Dalam hal ini akan menghubungkan antara aplikasi phpmyadmin yang berada di XAMPP dengan Netbeans.

Perlu diketahui untuk dapat terhubung antara phpmyadmin dan Netbeans, perlu membutuhkan driver yang bernama JDBC Driver. JDBC kepanjangan dari Java Database Conectivity. Yaitu sebuah tools atau sering disebut driver yang menghubungkan antara database dan platform Java. Karena menggunakan platform Java, selain JDBC Driver, juga perlu JDK atau Java Development Kit.

1. Buat terlebih dahulu projectnya. Dalam kasus ini project bernama Latihan-JSP-MySQL

2. Tambahkan library pada direktori Libraries. Klik kanan pada Libraries, kemudian pilih Add Library

Gambar 41 Add Library

31

3. Pilih MySQL JDBC Driver kemudian klik Add Library

Gambar 42 Available Library

4. Maka di dalam direktori Libraries akan muncul library yang sudah ditambahkan

Gambar 43 Directory Libraries

5. Pada index.jsp tuliskan script koneksi seperti gambar berikut pada tag body

32

Gambar 44 Script Koneksi

Yang perlu diperhatikan dalam membuat koneksi adalah import library java sql, URL database dan user passwordnya. Setelah koneksi ditulis tanpa terdapat error script, ketika dijalankan maka browser akan menampilkan halaman putih saja, tetapi jika koneksi gagal, akan muncul tulisan GAGAL KONEKSI diikuti dengan pesan errornya.

33

Bagian 4 Menampilkan Data

Untuk menampilkan data dari dalam database tentu perlu membuat koneksi database terlebih dahulu. Tutorial ini berkelanjutan, sehingga apa yang sudah dilakukan pada bab sebelumnya, akan digunakan kembali di bab selanjutnya.

Akan dibuat script untuk menampilkan data dari dalam database praktikum-jsp untuk tabel mahasiswa. Edit saja pada index.jsp menjadi script berikut ini

34

Gambar 45 Script menampilkan data

Kemudian silahkan di running untuk melihat hasilnya. Akan muncul data yang ada di dalam tabel mahasiswa.

Gambar 46 Tampilan di web browser

Jika dilihat dari hasil tampilan tersebut terlihat program studi dan agama masih dalam bentuk kode. Dalam database terdapat 3 tabel yang saling berelasi. Dimana tabel program studi dan tabel agama merupakan tabel master untuk tabel mahasiswa. Sehingga untuk dapat memunculkan dalam bentuk nama program studi dan nama agama, maka perlu dilakukan modifikasi query MySQL.

Banyak cara yang dapat digunakan, seperti yang telah dijelaskan pada bab sebelumnya, dapat menggunakan model sederhana atau menggunakan query join.

Yang semula query SQL nya

35

SELECT * FROM mahasiswa

Menjadi SELECT * FROM `mahasiswa` JOIN prodi ON mahasiswa.`kd-prodi`=prodi.`kd-prodi` JOIN agama ON mahasiswa.`kd-agama`=agama.`kd-agama`

Dimana hasil akhirnya adalah sebagai berikut

Gambar 47 Tampilan di web browser setelah dimodifikasi

Program studi dan agama yang sebelumnya tertampil dalam bentuk kode, akan berubah menjadi nama program studi dan agama. Hal ini dikarenakan query MySQL sudah menggunakan Query antar tabel (dalam contoh ini adalah JOIN…ON).

36

Bagian 5 Menambah Data

Sedikit berbeda dengan menampilkan data yang dapat menggunakan sebuah file JSP saja. Untuk menambah data, perlu form inputan dan proses inputan selain menampilkan data. Sehingga minimal harus ada 2 buah JSP. Pertama untuk menampilkan data dan kedua sebagai proses inputan. 1. Tambahkan sebuah script pada index.jsp untuk dapat mengakses

tambah.jsp. Dalam tutorial ini script link tambah diletakkan diatas tabel.

Gambar 48 Link Tambah Data

2. Sehingga tampilan pada hasilnya akan muncul sebuah link URL dengan nama Tambah Data Mahasiswa

Gambar 49 Tampilan Link Tambah Data

3. Kemudian dibuat sebuah file JSP dengan nama file tambah.jsp.

37

Gambar 50 tambah.jsp

4. Didalam tambah.jsp tulis script untuk form inputan seperti script berikut ini

Gambar 51 Form Tambah Data

5. Apabila tambah.jsp ini di running, maka akan tampil seperti tampilan berikut ini

38

Gambar 52 Tampilan Web Form

6. Kemudian dibuat script query untuk menangkap hasil inputan dari form tersebut, sehingga inputan dapat tersimpan di database. Hal ini dapat menggunakan file jsp baru, atau jadi satu dengan jsp yang terdapat formnya. Sehingga ketika di klik button Simpan maka akan mengirim data untuk segera direspon apakah akan disimpan atau gagal disimpan. Dalam tutorial kali ini, script proses input akan dijadikan satu dengan tambah.jsp. Tulis script berikut dibawah tag </html> di file tambah.jsp.

39

Gambar 53 Script Proses Tambah

Yang menjadi perhatian dalam script tersebut adalah pada Query SQL. Hal ini dikarenakan beberapa nama field menggunakan tanda baca “-“ sehingga jika tidak diberi tanda petik, maka akan dianggap karakter sebelum dan sesudah tanda tersebut berbeda. Untuk meminimalisir kesalahan/error serta membuat nyaman penulisan, penggunaan karakter unik pada nama field disarankan untuk dihindari.

40

Bagian 6 Memodifikasi Data

Untuk dapat melakukan modifikasi atau edit masing-masing data yang ditampilkan, maka perlu adanya aksi di masing-masing datanya. Sehingga pada index.jsp perlu menambahkan satu kolom disebelah kanan kolom agama dengan nama kolom aksi.

Gambar 54 Link edit.jsp

Lakukan penambahan script di baris nomo 38 dan nomor 46. Dimana pada baris no 38 berisi script <th>Aksi</th> yang merupakan header kolom Aksi. Dan pada baris 46 berisi <td><a href="edit.jsp?nim=<%out.println(rs.getInt("nim"));%>">Edit</a></td>. Untuk hasil tampilannya akan muncul seperti gambar berikut

Gambar 55 Tampilan Web Aksi Edit

Agar link Edit berfungsi untuk merubah data, maka perlu adanya 2 buah file JSP lagi untuk melakukan proses edit. Dimana ketika di klik link Edit, akan masuk ke file JSP yang berisi form Edit. Kemudian setelah di edit, dan di klik Update, maka data yang ada di form Edit akan diproses untuk disimpan kembali. 1. Tambahkan 1 buah file JSP dengan nama edit.jsp

41

Gambar 56 edit.jsp

2. Kemudian tulis script berikut untuk form edit

42

Gambar 57 Script edit.jsp

3. Untuk tampilan hasilnya seperti berikut

Gambar 58 Tampilan Form Edit

4. Kemudian agar proses Update berjalan, perlu 1 buah file JSP lagi dengan nama proses-edit.jsp sesuai di Form Action form edit tersebut

Gambar 59 Script Proses Edit

Dari proses edit data ini masih terdapat beberapa kekurangan, salah satunya adalah menampilkan data di dalam List Menu langsung

43

dari dalam database. Sehingga pada form edit, List Menu akan menunjukkan data sesuai data di database.

44

Bagian 7 Menghapus Data

Sama halnya seperti proses Edit, untuk proses hapus data perlu adanya aksi di masing-masing data yang tampil dalam tabel. Sehingga perlu ditambahkan satu baris script untuk link hapus data di index.jsp. Tambahkan <a href="delete.jsp?nim= <%out.println (rs.getInt("nim")); %>">Delete</a> disamping link Edit. Sehingga tampilan hasilnya akan seperti gambar berikut

Gambar 60 Tampilan Aksi Delete

Kemudian tambahkan 1 buah file JSP dengan nama file delete.jsp.

Gambar 61 delete.jsp

Kemudian tuliskan script berikut pada file delete.jsp.

45

Gambar 62 Script delete.jsp

46

Bagian 8 Ekspor dan Cetak Dokumen

A. Ekspor Dokumen

Proses ekspor merupakan salah satu bagian yang cukup penting ketika menangani data dalam bentuk tabel dan jumlah yang banyak. Pengguna dapat mengambil data sekali klik berupa dokumen tertentu. Dalam praktikum kali ini, ekspor dokumen dilakukan ke dalam format Microsoft Office Excel (xls). Sehingga nantinya ketika button atau link download data di klik, akan langsung terdownload dalam bentuk file Excel.

Script yang digunakan untuk proses ekspor hampir sama dengan script index.jsp yang ada di bab sebelumnya. Perbedaannya terletak pada penambahan script untuk proses ekspor.

1. Buat terlebih dahulu file ekspor.jsp

Gambar 63 Ekspor.jsp

2. Copykan seluruh isi dari index.jsp ke dalam file ekspor.jsp 3. Kemudian edit beberapa bagian sehingga menjadi seperti berikut

ini

47

Gambar 64 Script ekspor.jsp

4. Kemudian kembali lagi ke index.jsp. Dimana di file tersebut perlu ditambahkan link yang menuju ke ekspor.jsp. Digambar dibawah ini terdapat penambahan pada baris ke 32.

48

Gambar 65 Link ekspor.jsp

5. Kemudian hasil akhirnya akan muncul seperti gambar berikut

Gambar 66 Tampilan Web Browser

Apabila Download Data Mahasiswa di klik maka akan muncul file data.xls yang terdownload. Sebagai catatan, terkadang proses ekspor dan cetak mengalami kendala karena beberapa hal, diantaranya versi JDK dan Netbeans yang kurang kompatibel.

B. Cetak Dokumen Untuk mencetak dokumen terdapat beberapa cara. Yang paling

sederhana adalah dengan cara mencetak layar / page. Hal ini cukup mudah karena tidak perlu memanggil berbagai macam library. Kelemahannya adalah seluruh halaman akan tercetak sesuai dengan tampilan tersebut.

Seperti halnya dengan membuat button. Untuk script cetak halaman dapat menambahkan script berikut di dalam index.jsp.

49

<input type="submit" value="print" onClick="window.print()"/> Atau dalam bentuk link label

<a href="#" onclick="javascript:window.print();" >Print this page</a>

Bagian 9 Membuat Template Web Template web digunakan untuk memperindah tampilan sebuah

website. Selain itu template web juga berfungsi untuk mengatur dan merapikan konten yang berada didalam website. Banyak sekali template web yang dapat digunakan. Salah satunya adalah Bootstrap. Anda dapat mendownload Bootstrap di https://getbootstrap.com/docs/4.1/getting-started/download/.

Untuk dapat menggunakan Bootstrap, tinggal dicopy paste ke dalam project yang telah dibuat. Kemudian Bootstrap dipanggil di dalam file index.jsp. Tutorial di bagian ini berbeda dengan tahapan sebelumnya. 1. Download terlebih dahulu Bootstrap. Dan extract apabila masih

dalam bentuk archive 2. Akan muncul 3 folder utama. Css, fonts dan js

Gambar 67 Isi dari Bootstrap

3. Kemudian panggil seluruh folder tersebut ke dalam folder Web Pages di Project yang sudah dibuat

50

Gambar 68 folder css, fonts dan js di Web Pages

4. Didalam sebuah layout website pasti terdapat header, footer dan tentu isinya. Isi dari web adalah index.jsp dimana file index.jsp sudah tersedia seperti bagian sebelumnya.

5. Tambahkan 2 buah file jsp. Masing-masing bernama header.jsp dan footer.jsp

Gambar 69 footer.jsp dan header.jsp

6. Tuliskan script berikut pada footer.jsp

51

Gambar 70 footer.jsp

7. Tuliskan script berikut pada header.jsp

52

Gambar 71 header.jsp

8. Kemudian hilangkan <html> dan </html> serta <body> dan </body> dalam index.jsp. Ganti dengan memanggil header.jsp dan footer.jsp. Terdapat pembaharuan pada baris ke 7 dan baris ke 56.

53

Gambar 72 index.jsp

9. Hasil akhirnya ketika di runing akan muncul seperti tampilan berikut

Gambar 73 Tampilan dengan Bootstrap

54

Untuk dapat memaksimalkan tampilan, dapat dilakukan modifikasi tampilan dengan memanfaatkan plugin bootstrap. Pada dasarnya plugins dan komponen-komponen css, js, fonts Bootstrap tinggal memanggilnya saja. Hal utama adalah pemanggilan pada header serta footer

<link href="css/bootstrap.min.css" rel="stylesheet"/> Dan

<script src="js/bootstrap.min.js"></script>

55

Daftar Pustaka

Kadir, A. (2008). Tuntunan praktis belajar database menggunakan MySQL

Prabowo, I. A., Wijayanto, H., Yudanto, B. W., & Nugroho, S. (2021). Buku Ajar: Pemrograman Mobile Berbasis Android (teori, latihan dan tugas mandiri). Lembaga Penelitian dan Pengabdian pada Masyarakat Universitas Dian Nuswantoro.

Saragih, R. R. (2016). Pemrograman dan bahasa pemrograman. https://www.tutorialpedia.net/layouting-template-bootstrap-pada-jsp/ https://getbootstrap.com/docs/4.3/getting-started/introduction/

56

View publication statsView publication stats