pertemuan 2 & 3 pembuatan halaman master data barang ... · setelah pembuatan barang.jsp dan...

24
Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang & Supplier

Upload: others

Post on 17-Jun-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Pertemuan 2 & 3

Pembuatan Halaman Master Data Barang & Supplier

Page 2: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Pembuatan Master Data Barang

Master data barang terdiri dari 1 file JSP, 1 fileServlet dan 1 file Model. Untuk file Model sudahdibuat di pertemuan 1.

Page 3: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Form barang.jsp

Sumber: Hasil Perancangan (2019)

Page 4: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding barang.jsp

Note : Baris ke 14 dan 15 serta baris ke 18 dan 19 dijadikan 1 baris kesamping

Page 5: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding barang.jsp (lanjutan)

Note : Baris ke 45 dan 46 dijadikan 1 baris kesamping

Page 6: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Pembuatan File setting.js

Langkahnya :1. Buat Folder “config” di dalam folder “Web Pages”

2. Lalu buat file dengan type Java Script File (jika tidak ada klik kanan di folder config lalupilih new dan klik Other)

Sumber: Hasil Perancangan (2019)

Sumber: Hasil Perancangan (2019)

Page 7: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

3. Lalu berikan nama file seperti dibawah ini, setelah itu klik Finish

Pembuatan File setting.js

Sumber: Hasil Perancangan (2019)

Page 8: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Pembuatan File setting.js4. Setelah itu ketik Coding Berikut di dalam File setting.js

Page 9: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan denganpembuatan BarangServlet.jsp yang akan digunakan untuk menjalankanfungsi CRUD dari keseluruhan form Barang. Buat file Servlet baru dengannama BarangServlet.java. Simpan di dalam Package Control di dalamSource Package.

Page 10: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding BarangServlet.java (lanjutan)

Page 11: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding BarangServlet.java (lanjutan)

Note : Baris ke 43 sampai 82 sudah bawaan dari servlet, apabila ada tanda warning berupaLampu berwarna merah di klik kanan lalu pilih surround statement with try catch.

Page 12: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Pembuatan Master Data Supplier

Master data supplier terdiri dari 1 file JSP, 1 fileServlet dan 1 file Model. Untuk file Model sudahdibuat di pertemuan 1.

Page 13: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Form supplier.jsp

Sumber: Hasil Perancangan (2019)

Page 14: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding supplier.jsp

Note : Baris ke 17 dan 18 dijadikan 1 baris kesamping

Page 15: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding supplier.jsp (Lanjutan)

Note : Baris ke 44 dan 45 dijadikan 1 baris kesamping

Page 16: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Penambahan Coding File setting.js1. Tambahkan Coding Berikut di dalam File setting.js

Page 17: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Coding Servlet Supplier

Untuk Servlet Supplier Harap Mahasiswa Membuat Coding Sendiri, Mengacu dari coding

servlet barang dan di pandu oleh dosen pengajar

Page 18: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Modifikasi beranda.jsp

Modifikasi coding beranda.jsp untuk dapat menampilkan filebarang dan supplier serta menjalankan fungsi java script, berikutlangkah – langkahnya :1. Buka File Beranda.jsp2. Tambahkan coding dari Baris Ke 13 di dalam file beranda.jsp

(pastikan posisi nya di dalam tag head

Page 19: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Modifikasi beranda.jsp

3. Setelah itu tambahkan coding untuk pemanggilan file masterbarang dan supplier seperti dibawah ini (tambahkan tanpamenghilangkan coding yang sudah ada sebelumnya)

Page 20: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Modifikasi beranda.jsp

4. Setelah itu tambahkan coding berikut ini (jangan terpakudengan baris nomor disebelah kiri, pastikan posisipenempatan codingnya tepat)

5. Selesai, silahkan running file program dari beranda.jsp

Page 21: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Tugas 2

Pembuatan Master Data Akun dan Master Data User

Page 22: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Form Master Akun

Sumber: Hasil Perancangan (2019)

Page 23: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Form Master User

Sumber: Hasil Perancangan (2019)

Page 24: Pertemuan 2 & 3 Pembuatan Halaman Master Data Barang ... · Setelah pembuatan barang.jsp dan setting.js lalu dilanjutkan dengan pembuatan BarangServlet.jsp yang akan digunakan untuk

Ketentuan Tugas 2

1. Untuk masing masing form dibuat tampilan tambah, ubah, dantampil data nya

2. Dibuatkan juga Servlet untuk masing masing form3. Modifikasi beranda untuk menampilkan master akun dan user di

dalam beranda web