Desember 2018

Rabu, 26 Desember 2018

PART 7 Implementasi CRUD (Create, Read, Update, and Delete) Web Service Server dan Client dengan Java


Pada part terakhir ini akan dibuat sebuah project yang merupakan implementasi CRUD (Create, Read, Update, and Delete) dalam Web Service. Dalam pembuatannya dibutuhkan beberapa komponen yaitu database, project server yang berisi web service server, project client yang berisi web service client, dan bootstrap untuk mengubah tampilan disisi client. Adapun langkah-langkah pembuatannya adalah sebagai berikut :
  1. Buat sebuah database dengan nama : siakad dan sebuah tabel dengan nama : mahasiswa dengan ketentuan seperti pada tabel berikut.
     Hasilnya akan terlihat seperti pada gambar berikut.
  2. Buka Netbeans 8.2, dengan cara yang sama seperti pada part sebelumnya, buat sebuah project untuk server dengan nama : Siakad, letakkan di direktori penyimpanan khusus dengan nama folder sesuai dengan keinginan. Selanjutnya pilih server yaitu GlassFish Server 4.1.1, lalu klik "Finish". Hasilnya akan terbentuk sebuah project seperti pada gambar berikut.
  3. Berikutnya buat web service di dalam project Siakad, caranya seperti pada part-part sebelumnya. Beri nama web serivce : Mahasiswa dan packagenya : siakad.mahasiswa.
  4. Lalu buat koneksi, caranya klik kanan pada package siakad.mahasiswa,lalu pilih "New", lalu pilih "Java Class", kemudian beri nama koneksiMySQL.
  5. Kemudian untuk script koneksiMySQL, copy paste script berikut.
  6. Langkah selanjutnya adalah setting Library, caranya klik kanan pada project Siakad, lalu pilih "Properties", lalu pilih "Libraries",lalu "Add Library", cari MySQL JDBC Driver, kemudian klik "Add", terus klik "OK".
  7. Setelah itu cek apakah sudah terdapat MySQL JDBC Driver di dalam directory Libraries, jika sudah akan ditampilkan seperti pada gambar berikut.
  8. Buat Web Service dengan cara klik kanan pada package siakad.mahasiswa, pilih "New", pilih "Java Class", beri nama : mhs, dan package : siakad.mahasiswa
  9. Selanjutnya agar data MySQL dapat dipanggil di web service, maka dibutuhkan Getter and Setter" masing-masing data. Masukkan script "Getter and Setter" berikut ke dalam Java Class mhs yang telah dibuat. 
  10. Langkah berikutnya, buka Mahasiswa.java yang berada di package siakad.mahasiswa. Masukkan  script berikut untuk membuat method CRUD (Create, Read, Update, and Delete) di dalam Class Mahasiswa.java.
  11. Dengan cara yang sama seperti part sebelumnya, buat sebuah project baru untuk Client. Beri nama project : ClientSiakad dan simpan pada direktori yang sama dengan project untuk server yaitu project Siakad.
  12. Langkah yang harus dilakukan berikutnya adalah koneksikan Client (project ClientSiakad) dengan Server (project Siakad). Caranya klik kanan pada project ClientSiakad, lalu pilih "New",pilih "Web Service Client". Akan muncul jendela New Web Service Client, lalu klik pada radio button "Project", klik tombol "Browse", pilih project Siakad, buka tanda "+" lalu pilih "Mahasiswa", lalu klik "OK". Terakhir isi package : client.siakad, lalu klik "Finish".

  13. Jika koneksi antara client dengan server berhasil dibuat, hasilnya akan muncul Web Services References disertai dengan lima parameter yang terdapat pada file Mahasiswa.java seperti gambar di bawah ini.
  14. Download terlebih dahulu file template bootstrap, setelah download silahkan copy seluruh file ke bagian diretori penyimpanan project ClientSiakad berada, lalu cari folder web, buka dan paste di folder tersebut.
  15. Hasilnya akan terlihat pada project yang terdapat pada NetBeans seperti gambar berikut. 
  16. Berikutnya hapus file index.html, lalu buat tiga buah file berekstensi .jsp, yaitu file header.jsp, footer.jsp dan index.jsp di web pages project clientsiakad.
  17. Buka file header.jsp, kemudian masukan script berikut.
  18. Buka file footer.jsp, kemudian masukan script berikut.

  19. Buka file index.jsp, kemudian masukan script berikut.
  20. Selanjutnya agar data base tampil didalam  project client maka perlu memanggil wsdl caranya. Caranya drag dan drop method getMahasiswa kedalam index.jsp. Drag kedalam script index.jsp didalam antara <tr>…</tr> perhatikan sehingga scriptnya berikut.
  21. Buat file ekstensi .jsp baru lagi dengan nama tambah-mhs.jsp, lalu masukan script berikut.
  22. Agar proses tambah berhasil maka buat file baru dengan nama proses-tambah-mhs.jsp, masukkan script berikut.
  23. Langkah selanjutnya membuat tampilan Edit dan Delete. Dalam hal ini Edit dan Delete dibuat dalam satu script.
  24. Masuk pada project server yaitu Siakad, lalu buka file Mahasiswa.java, tambahkan script Method tampilMahasiswa berikut.
  25. Untuk membuat proses Hapus, buat satu buah file dengan nama hapus-mhs.jsp. Lalu drag operator hapus dari Web Service Reference. Kemudian ubah script pada parameter int nim=0; karena fungsi ini akan digunakan untuk menerima POST berupa hapus mahasiswa berdasarkan nim, sehingga script hapus-mhs.jsp sehingga menjadi seperti berikut.
  26. Selanjutnya akan dibuat tombol Edit dan Update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk Edit.
  27. Sebelum membuat file Edit, ubah terlebih dahulu method getMahasiswa di project Siakad sehingga berubah menjadi seperti berikut.
  28. Buat file baru dengan nama edit-mhs.jsp. masukkan script berikut.
  29. Selanjutnya buat file baru dengan nama proses-edit-mhs.jsp lalu masukkan script berikut.
  30. Pembuatan project selesai, selanjutnya Deploy semua project baik project Siakad maupun project ClientSiakad. Tunggu masing-masing proses Deploy hingga selesai dan sukses, setelah itu Run project ClientSiakad dan hasilnya akan tampil seperti gambar di bawah ini. 
  31. Lakukan uji coba semua proses yang telah dibuat dimulai dari proses tambah data. Klik tombol "Tambah Mahasiswa" lalu masukkan data mahasiswa seperti pada gambar. 
  32. Akan tampil data mahasiswa sesuai dengan yang ditambahkan.
  33. Selanjutnya klik tombol "Edit" lalu akan muncul form edit mahasiswa. Coba edit data mahasiswa tersebut misalnya pada bagian email (lihat gambar ), lalu klik tombol "Edit".
  34. Hasilnya akan tampil data mahasiswa dengan email yang telah diedit.
  35. Terakhir, klik tombol "Hapus". Hasilnya data akan terhapus, karena jumlah data hanya satu, maka hasil akhir tidak akan ditampilkan data sama sekali.
Uji coba yang dilakukan pada semua proses yang ada yaitu untuk menampilkan data, menambah data, mengedit data, dan menghapus data berhasil dilakukan, dengan demikian implementasi CRUD (Create, Read, Update, and Delete) Web Service Server dan Client dengan Java sukses.
 

Jumat, 21 Desember 2018

Part 6 Fungsi Tampil dan Fungsi Penambahan Data sebagai Pengantar Implementasi CRUD (Create Read Update and Delete) dengan JAX-WS


A.     Membuat Fungsi Tampil Data dengan JAX-WS
Bagian pertama tutorial praktikum kali ini akan ditampilkan data yang berada di dalam database menggunakan JAX-WS. Adapun langkah-langkahnya adalah sebagai berikut :
  1. Buka Aplikasi Netbeans 8.2 kemudian, dengan cara yang sama pada tutorial sebelumnya, buatlah sebuah project dengan nama ServerGudang.
  2. Selanjutnya buat Web Service dengan nama : DaftarBarang dan untuk packagenya : server.barang.
  3. Selanjutnya buat Java Class di package yang telah dibuat tadi, untuk membuat koneksi database MySQL. Caranya adalah klik kanan pada package server.barang lalu pilih"New", lalu pilih "Java Class", beri nama ConnectionMySQL.
  4. Selanjutnya masukan script koneksi berikut ke halaman ConnectionMySQL.java
  5. Setelah itu setting Library MySQL Drive untuk Java. Caranya klik kanan pada project ServerGudang, lalu pilih "Properties", lalu pilih "Libraries", lalu klik "Add Library", lalu pilih "MySQL JDBC Driver". (Lihat postingan Part 5 untuk lebih jelasnya).
  6. Setelah itu buat database dengan nama gudang dan buat table dengan nama barang dengan ketentuan sebagai berikut.

  7. Buat lagi Java Class di package server.barang dengan nama Barang, class ini akan digunakan untuk konfigurasi setter-getter. Caranya klik kanan pada server.barang, lalu pilih "New", lalu pilih "Java Class".
  8. Lalu tambahkan script berikut di halaman Barang.java.
  9. Langkah berikutnya buat konfigurasi Setter-Getter. Caranya klik kanan pada script (di dalam public class Barang) dan pilih "Insert Code".
  10. Akan langsung secara otomatis ada pilihan. Pilih "Insert Code", lalu pilih "Setter-Getter".
  11. Selanjutnya cek list semuanya, lalu pilih "Generate".
  12. Hasilnya akan ditampilkan seperti pada gambar berikut.
  13. Langkah berikutnya masuk Web Service DaftarBarang, lalu hapus Operator hello (atau hapus semua script) hapus semua script yang diblok.
  14. Selanjutnya ubah script untuk menampilkan daftar barang dari database adalah sebagai berikut. 
  15. Terakhir silahkan Deploy lalu Test Web Service. Hasilnya akan ditampilkan seperti pada gambar di bawah ini.
Gambar di atas merupakan tampilan halaman SOAP Response yang diperoleh dari isi data dalam database. Data yang ditampilkan menunjukkan bahwa pembuatan fungsi tampil data dengan JAX-WS berhasil.

B.    Membuat Fungsi Penambahan Data dari Web Service

Selanjutnya akan diimplementasikan sebuah fungsi untuk menambahkan data ke dalam database melalui client dengan web service sebagai jembatannya. Adapun langkah-langkahnya adalah sebagai berikut :
  1. Pertama-tama buuat penambahan parameter untuk insert data. Caranya adalah dengan menambahkan script berikut pada web service DaftarBarang di bagian bawahnya.
  2. Setelah  itu di Deploy dan Test Web Service, hasilnya akan tampil seperti pada gambar di bawah ini. Isikan data tambah barang seperti pada gambar dengan urutan atau ketentuan kolom 1 : kd_barang, kolom 2 : nama_barang, kolom 3 : jml_barang. Lalu klik tombol "tambangBarang".
  3. Hasilnya akan ditampilkan seperti pada gambar berikut.
  4. Langkah berikutnya buka database, cek apakah data yang ditambahkan masuk ke dalam database yang telah dibuat.
Gambar di atas menunjukkan bahwa data yang baru saja ditambahkan berhasil masuk ke dalam database yang telah dibuat, dengan demikian pembuatan fungsi penambahan data dari web service berhasil dan dapat berjalan dengan baik.

Part 5 Menampilkan Data dari Database Menggunakan Web Service



Tahapan praktikum web service selanjutnya adalah menampilkan data yang dibuat di dalam sebuah database. Tahapan ini merupakan proses awal sebelum menuju praktikum dengan sistem CRUD (Create, Read, Update, and Delete). Adapun langkah-langkahnya adalah sebagai berikut :
  1. Buka software NetBeans 8.2, kemudian buat project baru dengan  nama “Mahasiswa”, dengan cara klik "File", lalu pilih "New Project", lalu pilih "Java Web", pilih "Web Application", lalu klik tombol "Next". Jangan lupa simpan project ke direktori sesuai dengan yang diinginkan.
  2. Selanjutnya, pilih Server GlassFish 4.1.1. Lalu klik tombol "Finish".
  3. Hasilnya akan terbentuk sebuah project dengan nama “Mahasiswa”.
  4. Setelah project berhasil dibuat, kemudian buat koneksi melalui Package Session Bean untuk koneksi ke Database. Caranya klik kanan pada project Mahasiswa, lalu pilih "New", lalu pilih "Session Bean" (jika tidak ada cari via Other).
  5. Setelah itu akan tampil jendela "New Session Bean", lalu berikan Nama EJBnya adalah Koneksi dan packagenya adalah koneksi, lalu klik tombol "Finsih".
  6. Hasilnya akan terbentuk sebuah package koneksi seperti pada gambar berikut.
  7. Langkah beirkutnya adalah buat sebuah database sederhana di MySQL dengan nama database adalah mahasiswa, nama tabel adalah mahasiswa, dengan ketentuan seperti pada tabel berikut.
  8. Hasil pembuatan database tersebut tampil dalam gambar berikut. Jangan lupa berikan isi data dengan cara pilih "Insert", kemudian isikan sesuai dengan ketentuan atau setting field yang dibuat.
  9. Kembali ke NetBeans, lalu buka file Koneksi.java, kemudian isikan script koneksi berikut.
  10. Langkah selanjutnya, masukkan MySQL JDBC Driver ke dalam project. Caranya, klik kanan pada project Mahasiswa, lalu pilih "Properties", lalu pilih "Libraries", lalu pilih "Add Library", dan pilih "MySQL JDBC Driver", lalu pilih "Add Library".
  11. Setelah di klik Add Library, maka akan tampil seperti pada gambar berikut. Klik tombol "OK".
  12. Langkah berikutnya, buat Web Service dengan nama TampilMahasiswa, caranya klik kanan pada project Mahasiswa, lalu pilih "New", lalu pilih "Web Service". Pada jendela "New Web Service" berikan nama TampilMahasiswa dengan packagenya adalah com.server.tampil, selanjutnya pilih "Next".
  13. Setelah itu klik "Create Web Service From Existing Session Bean", lalu "Browse", kemudian pilih dan bongkar Mahasiswa, hingga menemukan submenu yaitu Koneksi, lalu klik "OK".
  14. Langkah berikutnya, copykan script berikut ke file TampilMahasiswa.java.
  15. Selanjutnya Deploy project Mahasiswa, kemudian lakukan "Test Web Service". Hasilnya akan ditampilkan seperti gambar di bawah ini. Pilih dan klik tombol "mahasiswaMethod()".
  16. Hasilnya akan ditampilan seperti gambar di bawah ini.
Hasilnya ditampilkan data sesuai yang ada dalam database yang telah dibuat, yaitu data mahasiswa. Praktikum pembuatan project untuk menampilkan data dari database menggunakan web service berhasil.