Gambar 1: Tampilan Web desktop V1.0 setelah berhasil login.

Pendahuluan

Web Desktop ExtJs 4 Versi 1.0 adalah sebuah aplikasi menggunakan ExtJs 4 yang gunanya sebagai aplikasi utama dalam membuat sebuah sistem informasi yang diinginkan.

Manfaat

Manfaat dari aplikasi Web Desktop ExtJs 4 versi 1.0 adalah sebagai berikut:

1. Tidak perlu memikirkan lagi tampilan aplikasi. Karena sudah berbentuk aplikasi web desktop.
2. Mudah untuk menambahkan modul/form yang ingin ditambahkan oleh programmer.
3. Hak akses modul dapat diatur tanpa harus merubah koding.
4. Menambahkan shortcut,menu dan submenu dengan mudah.
5. User dapat ditambah dan diatur dengan mudah.
6. ExtJs menggunakan mvc.

Fasilitas

1. Kelompok Menu

Fasilitas ini dipakai jika user ingin menambahkan beberapa kelompok menu yang diinginkan. Terlihat pada gambar 1 posisinya berada sebelah kiri setelah tombol Menu diklik Secara default aplikasi sudah menyediakan kelompok menu Pengaturan yaitu kelompok menu untuk pengaturan dasar.

Gambar 2: Pengaturan Kelompok Menu (Baru, Edit, dan Hapus).

2. Modul/Menu

Fasilitas untuk menambahkan modul/menu. Fasilitas ini berfungsi untuk mapping atau menempatkan kelas modul yang dibuat user untuk di tampilkan didalam Web Desktop Versi 1.0.

Gambar 3: Pengaturan Modul/ Menu (Baru, Edit, dan Hapus).

Gambar 4: Penjelasan saat akan menambah baru atau mengedit modul/menu.

3. Pengguna/User

Fasilitas ini digunakan untuk menambah, edit dan hapus pengguna/user. Serta pengaturan hak akses user terhadap menu-menu yang telah di buat.

Gambar 5: Pengaturan Pengguna (Baru, Edit, dan Hapus).

Gambar 6: Penjelasan saat akan menambah baru atau mengedit pengguna/user.

4. Shortcut

Gambar 7: Pengaturan Shortcut (Baru, Edit, dan Hapus).

Fasilitasi ini untuk mengatur shortcut seperti yang tampil pada gambar 1.

Gambar 8: Penjelasan saat akan menambah baru atau mengedit shortcut.

5. Ganti Password

Fasilitas ini digunakan untuk mengganti password user saat user sudah berhasil masuk. MenuGanti Password.

6. Logout

Fasilitas untuk keluar dari menu utama. Menu->Logout.

Cara Penggunaan

Berikut ini penjelasan bagaimana cara menambahkan/mengembangkan aplikasi web desktop V1.0 ini dengan menambahkan modul sendiri. Sebelumnya yang harus di persiapkan adalah. Bentuk penulisan kode. Penulisan kode ExtJs 4 harus berbentuk MVC. Yaitu yang harus di sediakan file model, view, dan controller.

Contoh berikut ini kita akan menambah menu master pelanggan. Dimana master pelangan ini terdapat akses tambah, edit dan hapus. Di aplikasi web desktop versi 1.0 ada kelas view yang bernama plgrid. Kelas yang merupakan turunan dari grid. Plgrid ini sudah bisa menempatkan fasilitas tambah edit dan hapus. Sehingga bisa langsung dipakai.

Selanjutnya jika source nya sudah disiapkan sebagai berikut:

app/view/pelanggan/list.js perhatikan gambar 9 Potongan kode PL.view.pelanggan.list.

app/view/pelanggan/edit.js yaitu form untuk edit dan tambah pelanggan.

app/model/pelanggan/edit.js (model untuk kelas PL.view.pelanggan.edit).

app/controller/pelanggan.js (Kendali semua kelas modul pelanggan).

Gambar 9. Potongan kode PL.view.pelanggan.list

Penempatan File

Yang perlu di perhatikan adalah penempatan source code. Letakkankanlah sourcecode sesuai dengan folder masing-masing. Sebagai berikut:

Folder app/view: semua sourcecode yang merupakan view.

Folder app/model: semua sourcecode yang merupakan model.

Folder app/controller: semua sourcecode yang merupakan controller.

Gambar 11. Struktur file Web Desktop V1.0

Mendaftarkan file controller

Jangan lupa untuk mendaftarkan file controller pada file app.js

Gambar 12. Sourcecode app.js

Tahap Selanjutnya

Jika kelas-kelas untuk modul pelanggan diatas sudah selesai dibuat. Tahap selanjutnya yaitu mendaftarkan kelas kedalam web desktop V 1.0. Yaitu masuk ke fasilitas no 2 yaitu modul/menu.  Jika tambah modul baru kolom alamat modul isikan PL.view.pelanggan.list.

Lakukan hal yang sama untuk modul-modul lainnya.

Penting

Penting untuk diketahui setiap kelas yang dibuat penulisan didahului dengan tag PL.

Rahasia

Rahasia kelas plgird untuk pengaturan hak akses yaitu didalam kelas plgrid tersebut terdapat tombol tambah, edit, dan hapus. Masing – masing tombol terdapat itemId.

Kemudian ada kelas PL.view.akses. kelas inilah akan menghilangkan tombol-tombol diatas jika tidak terdapt hak akses. Dengan menggunakan perintah sbb:

new PL.view.akses().cekMenu(win, akses);

dimana variabel win adalah kelas view sebagai contoh PL.view.pelanggan.list. Sementara akses adalah akses user untuk modul di variabel win tersebut.

Modifikasi

Untuk pengembangan hak akses bisa modifikasi source di kelas PL.view.akses.

Demikian tutorial penggunaan aplikasi Web Desktop Versi 1.0. Segala pertanyaan bisa melalui email ke dwansoft@gmail.com