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>