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 🙂

Visual Studio LightSwitch #3: Interface dan Bahasa

Selamat datang! 🙂

Kali ini saya akan membahas tentang Interface dan Bahasa. Masih ingat atau masih menyimpan project yang lalu tentang Validasi dan Format Data? Sehabis kita menambahkan beberapa atribut pada table Customer (Email, Tanggal Lahir, dan Saldo) lalu kita Run, ada sedikit kejanggalan, atribut tersebut tidak muncul pada kolom kanan Customers List Detail, namun ada pada saat Add atau Edit. Apa yang terjadi? Bagaimana supaya atribut tersebut muncul juga di kolom kanan?

Mari kita munculkan. Kembali ke Visual Studio LightSwitch 2011. Pada Solution Explorer, Double klik Screen CustomersListDetail, akan muncul hirarki dari screen yang kita pilih. Nah, di hirarki ini kita bisa mengubah komponen dari screen kita. Silahkan Anda baca sebentar.. Bagaimana? Terbayang kan? Cukup mudah dimengerti?

Kita pilih baris Customer Details, lalu akan muncul link button Add pada child paling akhir dari Customer Detail. Klik Add, dan silahkan tambahkan semua atribut baru yang ingin Anda tampilkan. Dalam contoh ini saya tambahkan Email, TanggalLahir, dan Saldo.

Silahkan coba Anda Run, bagaimana? Mereka sudah muncul kan? 🙂

Ngomong-ngomong interface, apa tampilan di LightSwitch ini bisa kita custom? Ya, bisa, tapi tidak begitu saja, custom interface bisa dilakukan dengan menggunakan extension.

Saya menggunakan contoh sebuah extension LightSwitch Metro Theme.

Tersedia cukup banyak extension yang mungkin bergunak untuk kita, silahkan jelajahi: Link ini

Download, execute, install, restart Visual Studio LightSwitch 2011, buka kembali project yang Anda buat, klik kanan pada application LightSwitchInAction (bukan Solution) – Properties, kita tiba pada Application Designer.

Pada tab Extensions akan muncul LightSwitch Metro Theme dengan keadaan unchecked, check agar dapat kita gunakan. Lalu pindah ke tab General Properties, pada Theme chooser akan muncul theme yang baru saja Anda install, dipilih saja.. Lalu Run.

Tadaa.. Tampilan aplikasi Anda telah berubah!

Oya, bagaimana dengan bahasa? Apakah mungkin diubah? Saya ingin menjadi Bahasa Indonesia? Bisa kok.. 🙂

Kembali ke Application Designer tadi, pada tab General Properties, di sana ada Culture, ganti saja menjadi Indonesian. Lalu perhatikan apa yang terjadi..

Nah, pembahasan kali ini cukup sekian. Sampai ketemu di episode selanjutnya, di sana saya akan membahas tentang Relasi dan Computed Data.

Terima kasih 🙂

Visual Studio LightSwitch #2: Validasi dan Format Data

Siap untuk kejutan berikutnya? Mungkin ketika mencoba membuat project baru seperti pada Visual Studio LightSwitch #1: Membuat Project, Database, dan Simple Screen Anda masih belum puas dan muncul pertanyaan bagaimana dengan validasi data? Format Data? Sema itu akan dibahas disini.

Saya lanjutkan menggunakan project yang sama dengan sebelumnya. Kembali ke table Customers (Double klik / Klik kanan – Open), tambahkan atribut-atribut baru: Email, TanggalLahir, dan Saldo.

Coba jalankan (Run), lalu edit data yang sudah ada atau masukan data baru. Bisakah Anda mengisi field-field yang seharusnya berupa angka dengan huruf? Bisakah Anda mengisi tanggal lahir bukan dengan format tanggal? Tentu bisa! Karena kita belum memberikan validasi, tipe data pada table kita masih String semua.

Ok, stop dan kembali edit table Customer. Ketika Anda coba mengganti tipe data, Anda akan melihat tipe data yang tidak biasa. Silahkan ikuti saya, ubah tipe data:

  • Telepon, dari String menjadi Phone Number
  • Email, dari String menjadi Email Address
  • TanggalLahir, dari String menjadi Date
  • Saldo, dari String menjadi Money

Tanpa basa-basi, silahkan coba Run kembali, dan masukan data sembarang yang tidak sesuai dengan format seharusnya. Apakah masih bisa? 🙂

Secara ajaib LightSwitch akan mem-validasi data yang Anda inputkan sesuai dengan tipe data yang dipilih. Dan bukan hanya ditinggalkan dengan validation issues seperti itu saja, untuk tipe data tertentu kita akan dibantu untuk mengisi dengan benar.

Contoh isian untuk tipe data Phone Number (dibantu dengan pengkategorian nomor telepon) dan Date (dibantu dengan date picker)

Bagaimana dengan tipe data Money? Kenapa currency-nya Dollar($), apakah bisa diganti ke Rupiah(Rp)? Jika tidak perlu dua digit decimal (.00) apakah bisa dihilangkan? Bisa!

Kembali ke Visual Studio LightSwitch, buka table Customer, klik pada baris Saldo (tipe data Money), buka Window Properties. Untuk mengubah format mata uang, cari Currency Code, ubah dari USD menjadi IDR. Untuk menghilangkan dua digit decimal, cari Decimal Places, ubah menjadi 0. Untuk property yang lain, silahkan explore sendiri ya.

Silahkan coba Run, lalu edit / add data. Bagaimana tipe data Money-nya? Sesuai keinginan Anda?

Ok, sekian saja bahasan mengenai Validasi dan Format Data pada LightSwitch 2011. Masih banyak sekali yang bisa di-explore, namun tidak memungkinkan saya tuliskan semua disini, jadi tidak cukup jika Anda berhenti disini, lanjutkan!

Bahasan berikutnya adalah tentang Interface dan Bahasa, sampai jumpa..

Terima Kasih 🙂

Visual Studio LightSwitch #1: Membuat Project, Database, dan Simple Screen

Hola! Setelah membaca sedikit tentang Visual Studio LightSwitch di (Microsoft Visual Studio) LightSwitch? Apa itu?, mari kita mulai untuk mencoba praktek langsung.

Kali ini saya akan membahas tentang bagaimana membuat project LightSwitch, membuat database untuk LightSwitch, dan membuat sebuah screen sederhana.

Pertama, pastikan Anda sudah meng-install Visual Studio LightSwitch 2011, jalankan aplikasi tersebut. Lalu pilih New Project dan gunakan template Lightswitch. Akan ada dua pilihan default, yaitu C# dan VB (dua teratas), sesuaikan dengan kebutuhan Anda. Dalam contoh ini, saya menggunakan C#.

Silahkan mengganti nama project, lokasi, dll jika perlu. Setelah itu tekan OK. Menunggu sebentar, akan muncul tampilan dimana Anda dipersilahkan untuk menentukan database yang mau digunakan. Apakah membuat database baru atau menggunakan database yang sudah ada. Pilih Create new table untuk database baru atau Attach to external Data Source untuk menghubungkan project ini dengan database yang sudah ada. Dalam contoh ini saya menggunakan database baru.

Setelah memilih Create new table, akan muncul sebuah tampilan yang table yang siap digunakan, silahkan buat table sesuai dengan kebutuhan Anda. Dalam contoh kali ini saya membuat sebuah table Customer dengan atribut berupa: Nama, Alamat, dan Telepon.

Setelah table Customer terbentuk. Sekarang kita tinggal membuat sebuah screen sebagai interface dari table Customer. Caranya dengan membuka Solution Explorer Klik kanan pada folder Screens Add Screen.

Akan muncul tampilan untuk memilih jenis screen yang mau kita gunakan. Dalam contoh ini saya gunakan List and Details Screen dan jangan lupa untuk mengubah Screen Data dari None menjadi table yang kita inginkan (Customers), lalu klik OK. Untuk jenis-jenis screen yang lain, silahkan dibaca atau dicoba sendiri 🙂

Selesai membuat screen, kita akan dibawa ke tampilan berbentuk hirarki yang merupakan komponen dari screen yang baru saja kita buat. Tidak usah diutak-atik, silahkan Run (F5). Dan…

Boom! Jadilah sebuah screen yang memiliki fungsi View, Add, Edit, Delete, Export data to Excel, Search, Filter & Sort dan Paging. Silahkan Anda coba untuk bermain dengan fungsi-fungsi yang ada. Setelah melakukan aktifitas, jangan lupa untuk menekan tombol Save di kiri atas untuk memastikan perubahan yang Anda lakukan tersimpan ke database.

Sekian untuk babak pertama. Bagaimana? Berapa menit yang Anda habiskan untuk membuat aplikasi seperti itu? Penasaran dengan fitur lainnya? Silahkan baca babak berikutnya yang akan membahas Validasi dan Format Data di Visual Studio LightSwitch #2: Validasi dan Format Data

Terima kasih 🙂

(Microsoft Visual Studio) LightSwitch? Apa itu?

Microsoft Visual Studio LightSwitch adalah sebuah development tool yang menyederhanakan dan mempermudah proses pembuatan aplikasi data-driven baik untuk desktop maupun web application.

LightSwitch membantu kita dalam menghadapai kebutuhan aplikasi yang fleksibel dan terus menerus bertumbuh sedangkan resource, dalam hal ini waktu dan orang, tidak selalu tersedia. Karena LightSwitch dapat digunakan dengan mudah tanpa memerlukan kemampuan teknis (coding) yang tinggi namun bisa menghasilkan aplikasi dengan cepat dan user friendly.

Dalam LightSwitch coding mungkin saja tidak dilakukan. LightSwitch menyederhanakan berbagai proses development mulai dari design UI sampai deployment.

LightSwitch membantu developer untuk menghasilkan lebih banyak dengan sedikit menulis (coding) dengan jalan meng-handle hal-hal rutin seperti: design, pembuatan menu, fungsi CRUD (Create, Read, Update, Delete), fungsi export, validasi, dll.

LightSwitch mendukung dua bahasa, yaitu C# dan VB.NET. Ketika meng-install LightSwitch 2011, jika kita memiliiki Visual Studio 2010 Professional atau Ultimate, LightSwitch akan menjadi seperti project template pada Visual Studio, namun jika tidak LightSwitch akan terinstall sebagai aplikasi terpisah.

10 Keuntungan Utama LightSwitch 2011:

  • Membangun aplikasi bisnis layaknya dibuat oleh seorang profesional
  • Membangan aplikasi yang baik dengan lebih cepat
  • Menyederhanakan proses development
  • Membangun aplikasi yang fleksibel terhadap perubahan
  • Dapat menambahkan fitur yang user-friendly dengan cepat
  • Dapat dengan mudah menambahkan fitur authentication yang kuat
  • Membuat aplikasi custom sesuai dengan bisnis yang dijalankan
  • Dapat di-custom menggunakan extensions
  • LightSwitch 2011 merupakan pasangan dari Visual Studio
  • Development dan mekanisme update yang cepat

 

Selengkapnya: Visual Studio LightSwitch 2011 Datasheet

Home Page Visual Studio LightSwitch 2011: www.microsoft.com/lightswitch