Anda di halaman 1dari 13

TUGAS 3 RBPL A

Creating simple web application

Moh. Hafid Ichsani | 5211100058

Moh. Hafid Ichsani | 5211100058 RBPL A Pada tugas 3 ini, tujuannya adalah membuat aplikasi web sederhana melalui netbeans yang menggunakan database mysql dan server glassfish. 1. Seperti biasa, untuk membuat project baru kita pilih new new project. Plih kategori Java Web Web application. Kemudian tinggal ikuti langkah langkah seperti yang ada pada tutorial. 2. Kemudian kita memulai dengan membuat interface dari apliaksi web yang akan kita buat. Double klik pada index.jsp, lakukan pengaturan seperti pada tutorial.

Maka ketika di run akan muncul seperti ini.

3. Kemudian, buat file jsp baru pada proyek dab beri nama response.jsp

Moh. Hafid Ichsani | 5211100058 RBPL A

Dan ketika di run akan muncul seperti ini.

4. Untuk mempercantik tampilannya, maka kita buat file css pada proyek. Pilih new file web cascading style sheet. Beri nama style.css

Moh. Hafid Ichsani | 5211100058 RBPL A

Lalu tambahkan link Pada index.jsp dan response.jsp, letakkan link tersebut dibawah tag <head>. Maka tampilannya akan berubah seperti ini.

Moh. Hafid Ichsani | 5211100058 RBPL A Creating database 1. Setelah tampilan selesai, kita perlu membuat database dahulu untuk membuat aplikasi lebih dinamis. 2. Lakukan konfigurasi mySql seperti yang ada pada tutorial mulai dari register mySQL server hingga membuat database. 3. Pada database MyNewDatabase terdapat 2 tabel yaitu tabel subject dan counselor, pada tutorial menyediakan file .sql yang berisi sample data dari database. Buka file ifpwafcad.sql dan run SQL.

Maka akan terbentuk 2 tabel beserta sampel datanya.

Moh. Hafid Ichsani | 5211100058 RBPL A Setting JDBC 1. Pilih new file kategori glassfish JDBC resource. Lalu klik next.

2. Pilih create new JDBC connection pool, dan pada JNDI name isikan jdbc/IFPWAFCAD.

3. Skip langkah 3, kemudian pilih next. Pada langkah choose database connection pilih extract form existing connection dengan SQL server yang sudah deregister tadi. Dan pada JDBC connection pool name isikan ifpwacfad. Klik next

4. Pada tahap 5 berisi informasi mengenai konfigurasi yang telah kita lakukan tadi. Klik finish.

Moh. Hafid Ichsani | 5211100058 RBPL A

Deploy Setelah membuat JDBC, kita perlu memasangnya pada server glassfish. Berikut langkahnya. 1. Klik kanan pada project IFPWAFCAD pilih deploy

2. Maka pada server glassfish akan terpasang jdbc/ifpwafcad yang telah kita buat tadi.

Moh. Hafid Ichsani | 5211100058 RBPL A

JSTL 1. Sebelum mengimplementasikan JSTL, pastikan bahwa library untuk jstl sudah terpasang. Expand pada project library dan pilih glassfish.

2. Buka index.jsp, arahkan kursor diatas <%@page...> lalu double klik pada DB report lalu isikan seperti pada tutorial.

Maka akan ter generate code form untuk menampilkan data.

Moh. Hafid Ichsani | 5211100058 RBPL A

3. Kemudian integrasikan tag <c:forEach> ke dalam form HTML. Tambahkan line code seperti pada gambar di bawah ini.

4. Kemudian hapus code untuk tabel.

Moh. Hafid Ichsani | 5211100058 RBPL A 5. Save project, Kemudian run (Shift+F6), maka pada browser akan muncul tampilan dari aplikasi.

Moh. Hafid Ichsani | 5211100058 RBPL A Selanjutnya kita akan mengimplementasikan JSTL pada response.jsp untuk menampilkan detail dari counselor. 1. Pilih response.jsp editor, letakkan cursor sebelum <%@page...> dan double klik pada DB Query.

2. Isikan detail seperti pada gambar di bawah untuk membuat query dari database. Klik OK

3. Maka akan ter generated code untuk query yang ada pada response.jsp

4. Lalu tambahkan code di bawah ini pada bagian setelah sql:query.

Moh. Hafid Ichsani | 5211100058 RBPL A 5. Lalu tambahkan taglib seperti gambar di bawah ini

6. Kemudian pada HTML, replace {placeholder} dengan EL statement seperti pada tutorial.

7. Tekan save. 8. Run project

Moh. Hafid Ichsani | 5211100058 RBPL A