Visual Studio LightSwitch #5: Web – Desktop Switching, Publishing, dan Mekanisme Update

Hai.. Setelah selesai mempelajari Relasi dan Computed Data sekarang kita sudah sampai pada pembahasan ke-5, yaitu tentang Web – Desktop Switching, Publishing, dan Mekanisme Update.

Dari bahan-bahan sebelumnya yang kita hasilkan adalah sebuah aplikasi desktop. Lalu bagaimana kalau ternyata yang kita butuhkan adalah aplikasi web? Oh, mudah saja.. Mari kita lakukan bersama.

Masih menggunakan contoh project yang sebelumnya. Kita masuk ke Application Designer (Solution Explorer – klik kanan nama aplikasi – Properties). Lalu pindah ke tab Application Type. Apa yang Anda temukan? J Mari kita ubah pada bagian Client, ubah dari Desktop menjadi Web. Application Server akan secara otomatis berubah ke opsi kedua (IIS), biarkan apa adanya, lalu Run.

Jika mengalami masalah coba gunakan IE (Internet Explorer) ya.. Dan hasilnya..

Sama persis dengan desktop application yang tadi kita buat, namun sekarang sudah menjadi web application.

Sekarang masuk ke Publishing.

Ngomong-ngomong selama ini ada yang memperhatikan button di kanan atas (Layar Desain)? Sudah mencoba masuk ke sana? Ini adalah fitur untuk mengubah screen kita selagi aplikasi di-Run sehingga memudahkan kita untuk menyesuaikan tampilan tanpa melakukan Run berulang-ulang kali seperti jika kita mengubah dari editor (Visual Studio). Silahkan dicoba.

Lalu, apa yang akan terjadi kalau fungsi itu terus ada, nanti aplikasi kita bisa diacak-acak user dong? Tenang saja, fitur tersebut hanya muncul ketika proses development (Solution Configuration = Debug). Jika Solution Configuration kita ganti ke Release akan hilang sendiri.. 🙂

Untuk publish kita masuk ke Application Designer lagi, lalu di tab Application Type ada tombol Publish, klik saja. Oya, untuk contoh ini saya kembali ke settingan awal, Desktop, Run application services on the end user’s machine, supaya lebih cepat.

Berikut ini langkah-langkah dalam LightSwitch Publish Application Wizard yang saya lakukan:

  • Client Configuration: Desktop
  • Application Server Configuration: Local
  • Lihat Publish Output
  • Publish

Untuk tab-tab yang lain dalam contoh ini tidak perlu diganti, namun jika Anda membutuhkan konfigurasi lebih lanjut dengan tab yang lain, silahkan dilakukan.

Setelah proses publishing selesai kita akan mendaptkan file untuk instalasi aplikasi yang kita buat. File tersebut terletak pada lokasi seperti yang tertulis pada tab Publish Output tadi. Jika sudah menemukannya, maka itulah installer aplikasi kita, silahkan coba install.

Sudah? Hasilnya sama kan? Yap, Publishing telah selesai.

Lalu muncul pertanyaan, ini kan aplikasi desktop, kalau kita install pada banyak computer, ketika ada perubahan apakah harus kita install ulang semua? Bagaimana dengan update aplikasi? Tenang saja, LightSwitch sudah menangani masalah itu dengan Mekanisme Updatenya.

Pastikan Anda sudah menginstall aplikasi yang Anda buat tadi. Kita kembali ke Visual Studio, kali ini saya gunakan contoh perubahan berupa penggantian uturan menu. Kita ke Application Designer – masuk ke tab Screen Navigation. Pada Tasks akan muncul:

  1. Customers List Detail
  2. Transaksi Headers List Detail

Kita akan ubah urutan ini, pilih Customers List Detail, lalu pada sisi kanan ada tombol berupa panah, tekan panah ke bawah (Move Down), sehingga urutan menjadi:

  1. Transaksi Headers List Detail
  2. Customers List Detail

Pilih Transaksi Headers List Detail, pada bagian bawah, “Current startup screen”, klik Set. Hal ini akan membuat Transaksi Headers List Detail menjadi stratup screen ketika aplikasi baru dijalankan. Hasil akhirnya menjadi:

  1. Transaksi Headers List Detail
  2. Customers List Detail

Setelah selesai mengubah Screen Navigation, publish lagi dengan cara yang sama dengan yang telah kita lakukan. Pada LightSwitch Publish Application Wizard, jika kita perhatikan pada tab Summary, Application Version akan berubah dari yang sebelumnya (sebelunya 1.0.0.0 menjadi 1.0.1.0) menandakan kita telah melakukan perubahan.

Setelah publish selesai, jalankan lagi aplikasi kita.

Dan, apa yang Anda dapatkan? Pasti Anda akan melihat sebuah window kecil terbuka sebelum masuk ke aplikasi Anda, saat itulah update aplikasi dilakukan. Lalu bagaimana dengan aplikasi Anda? Pastinya sudah berubah sesuai dengan keinginan, dalam hal ini urutan menu sudah berubah dan startup screen menjadi Transaksi Headers List Detail. Mudah kan?

Ok, cukup sekian untuk tema kali ini. Berikutnya saya masih akan kembali dengan topic Hak Akses, User dan Login, dan Fungsi Tambahan

Terima kasih 🙂

Visual Studio LightSwitch #4: Relasi dan Computed Data

Hai.. Kembali lagi ke LightSwitch, setelah bermain-main dengan Interface dan Bahasa kali ini saya akan membahas tentang Relasi dan Computed Data.

Sedari awal kita hanya menggunakan sebuah table, bagaimana kalo kita punya banyak table dan memiliki relasi? Mari kita lakukan!

Kita buat dua table baru, seperti contoh-contoh pada umumnya, kita ambil kasus penjualan. Tabel pertama adalah TransaksiHeader, dimana table ini akan memiliki relasi dengan Customer (Customer melakukan transaksi), dan table kedua adalah TransaksiDetail dimana table ini akan berhubungan dengan TransaksiHeader (TransaksiDetail adalah item dari TransaksiHeader).

Dari Solution Explorer, klik kanan pada ApplicationData, Add Table, lalu perhatikan pada item-item diatas nama table, pilih Add: Relationship, dan bentuk relasi one to many dari Customer ke TransaksiHeader (lihat gambar). Visual Studio LightSwitch 2011 akan membantu kita dengan memberikan deskripsi tentang relasi yang kita buat di bawah gambar relasi. Lalu OK.

Lalu, pada TransaksiHeader kita tambahkan TanggalTransaksi dengan tipe Date. Hasilkan akan tampak seperti ini.

Lanjut ke table kedua, buat lagi table baru dengan langkah awal yang sama, beri nama TransaksiDetail. Buat relationship one to many dari TransaksiHeader ke TransaksiDetail.

Yap, dengan begitu kita sudah memiliki table yang saling ber-relasi. Customer – TransaksiHeader – TransaksiDetail.

Kita langsung lanjut ke acara Computed Data. Nah, kita tambahkan lagi atribut pada TransaksiDetail:

  • NamaItem, tipe data String
  • HargaSatuan, tipe data Money, ubah currency menjadi IDR
  • Quantity, tipe data Integer
  • SubTotal, tipe data Money, ubah currency menjadi IDR

Sekarang kita pilih SubTotal, lalu ke window Properties, lihat ada Is Computed? Check itu. Sekejap muncul link button Edit Method, klik saja, dan kita akan meluncur ke TransaksiDetail.cs, mari mulai sedikit menulis 😀

Hasil dari pengolahan harus di-set ke dalam variable result. Dalam contoh ini saya membuat perhitungan agar atribut SubTotal akan terisi dengan hasil dari HargaSatuan * Quantity.

Kita buat satu atribut Computed lagi ya. Kali ini kita buat di TransaksiHeader. Tambahkan lagi sebuah atribut dengan nama GrandTotal dengan tipe data Money. GrandTotal akan berisi jumlah dari SubTotal item-item yang memiliki relasi dengan TransaksiHeader.

Seperti tadi, kita masuk ke Edit Method, TransaksiHeader.cs, lalu tuliskan:

Nah, membuat computed atribut sudah selesai, tapi jangan buru-buru di Run dulu, soalnya kita belum membuat screen untuk table Transaksi ini. Mari kita buat dulu.

Seperti cara yang sebelumnya telah dibahas. Solution ExplorerScreensAdd ScreenList and Detail Screen – untuk Screen Data pilih TransaksiHeaders – lalu jangan sampai ketinggalan centang TransaksiHeader TransaksiDetails.

Kita centang TransaksiHeader TransaksiDetails maksudnya supaya screen tersebut selain menampilkan details (atribut-atribut) dari TransaksiHeader sendiri, menampilkan juga TransaksiDetail- TransaksiDetail yang ber-relasi dengan TransaksiHeader yang dipilih. Setelah selesai membuat screen, silahkan Run.

Ketika kita Add TransaksiHeader, customer akan berupa list karena TransaksiHeader telah memiliki relasi dengan Customer. Ketika kita Add TransaksiDetail, SubTotal dan GrandTotal akan secara otomatis terhitung. Begitulah contoh penggunaan relasi table dan computed atribut.

Selesai sudah bahan kali ini.. Semoga bermanfaat. Topik selanjutnya akan membahas tentang Web – Desktop Switching, Publishing, dan Mekanisme Update

Terima kasih 🙂