Junindar - Will Code With LightSwitch

1 will code with lightswitch

KATA PENGANTAR

Microsoft Visual Studio LightSwitch adalah tool yang dapat di gunakan dalam membuat aplikasi

bisnis untuk desktop dan cloud menjadi lebih cepat dan sederhana. Aplikasi yang dikembangkan

oleh Visual Studio LightSwitch juga berkualitas. Dengan kemudahan yang di miliki oleh

LightSwitch maka tool ini dapat juga di gunakan oleh orang yang background nya bukan seorang

developer/programmer.

Apa saja kemudahan yang terdapat pada LightSwitch, sehingga orang awam pun dapat membuat

aplikasi bisnis dengan tool ini. Salah satu kemudahan nya LightSwitch dapat men-generate form

tanpa harus melakukan coding sedikitpun.

Pada ebook ini akan di jelaskan bekerja dengan LightSwitch dengan menggunakan code yaitu

Visual Basic. Selain itu materi-materi yang dibahas juga lebih lengkap dan mendalam, dari

bagaimana mengakses data hingga melakukan deployment aplikasi. Untuk lebih memudahkan

dalam mempelajari ebook ini, disarankan terlebih dahulu membaca dan mempraktekkan ebook

LightSwitch pertama penulis yang berkolaborasi dengan Erick Kurniawan (Microsoft Visual

Studio LightSwitch Learning By Doing).

Tetapi penulis juga manusia, jadi ebook ini masih jauh dari sempurna dan untuk itu

penulis menantikan saran dan usulan dari para pembaca untuk perbaikan penulisan di masa yang

akan datang. Saran dan usulan para pembaca dapat dilayangkan ke alamat email penulis

[email protected].

Penulis panjatkan puja-puji syukur kehadirat Allah SWT, yang telah melimpahkan

rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan penulisan buku ini.

“titip rinduku dari negeri harimau Malaya”

Junindar

mailto:[email protected]


Biografi Penulis.

Junindar Lahir di Tanjung Pinang, 21 Juni 1982. Menyelesaikan Program

S1 pada jurusan Teknik Informatika di Sekolah Tinggi Sains dan

Teknologi Indonesia (ST-INTEN-Bandung). Junindar mendapatkan

Award Microsoft MVP VB pertanggal 1 oktober 2009 hingga saat ini.

Penulis merupakan Ketua Microsoft User Group Indonesia Regional

Batam (MUGI – Batam). Senang mengutak-atik computer yang berkaitan

dengan bahasa pemrograman. Keahlian, sedikit mengerti beberapa bahasa

pemrograman seperti : VB.Net, ASP.NET, VBA. Reporting: Crystal

Report dan Report Builder. Database: MS Access, MY SQL dan SQL

Server. Simulation / Modeling Packages: Visio Enterprise, Rational Rose

dan Power Designer. Dan senang bermain gitar, karena untuk bisa menjadi

pemain gitar dan seorang programmer sama-sama membutuhkan seni.

Pada saat ini bekerja di salah satu Perusahaan Consulting dan Project

Management di Malaysia sebagai Senior Consultant. Memiliki beberapa

sertifikasi dari Microsoft yaitu MOS (Microsoft Office Specialist) dan

MCT (Microsoft Certified Trainer) Mempunyai moto hidup : “Jauh lebih

baik menjadi Orang Bodoh yang giat belajar, dari pada orang Pintar

yang tidak pernah mengimplementasikan ilmunya”.

Kritik dan saran kirim ke : [email protected]

mailto:[email protected]


BAB I

Visual Studio LightSwitch dan Data

A. Koneksi ke Data Source

Pada Visual Studio LightSwitch ada beberapa cara agar kita dapat bekerja dengan data, yaitu

Existing Data atau External Data Source. Seperti gambar dibawah, terdapat 3 (tiga) eksternal

Data Source yang tersedia, yaitu :

1. Database (Microsoft SQL Server)

2. SharePoint

3. WCF RIA Service

Pada bab ini akan di jelaskan bagaimana melakukan koneksi ke beberapa eksternal Data

Source tersebut.

- Database (Microsoft SQL Server)

a. Pada Screen Start with data klik link Attach to external Data Source


b. Selanjutnya akan tampil sebuah jendela dialog Attach Data Source Wizard, pilih

Database dan klik button (tombol) Next.

1

2


c. Dan pilih Data source Microsoft SQL Server dan Continue, pada jendela Choose

Data Source.

d. Pilih atau ketik nama server pada Combo Box Server Name. Dan pilih database yang

dinginkan pada “Select or enter a database name”. Dan klik OK

e. Selanjutnya akan tampil database objek (table dan view), pilih objek-objek yang di

inginkan. Dan klik Finish


f. Maka objek yang kita import tadi akan ada pada project LightSwitch kita

- SharePoint

Lakukan langkah pertama seperti pada Database (MS SQL Server), lalu pilih SharePoint

dan klik Next.

a. Ketikkan Site Address pada textbox, dan klik Next.

b. Selanjutnya item-item pada SharePoint seperti List dan lain-lain akan tampil. Pilih

item yang di inginkan dan klik Finish


- WCF RIA Service

Lakukan langkah pertama seperti pada Database (MS SQL Server), lalu pilih WCF Ria

Service dan klik Next.

a. Klik Add Reference


b. Pilih project WCF Service, yang di inginkan, dan klik OK

c. WCF Ria Service akan tampil, lalu klik Next


d. Pilih objek yang di perlukan, dan klik Finish

e. Objek yang dipilih terdapat pada LightSwitch project

Selanjutnya adalah bekerja dengan data pada Visual Studio LightSwitch (Intrinsic Database).

Untuk cara ini telah di jelaskan pada eBook saya sebelumnya (LightSwitch Learning By


Doing) bagaimana membuat table pada LightSwitch, yaitu dengan cara klik kanan Node Data

Sources pilih Add Table

B. Pengenalan LightSwitch Data Type

String

Pada saat membuat field dengan tipe String, default dari panjang karakter adalah 255.

Secara otomatis LightSwitch akan membuat nvarchar kolom dengan mengikuti

panjang karakter yang kita setting dari LightSwitch. Jika ingin membuat panjang

karakter yang unlimited maka hapus nilai pada Maximum Length pada LightSwitch

field properties. Dan secara otomatis LightSwitch akan membuat kolom dengan tipe

nvarchar (max) pada SQL Server.


Phone Number

Phone Number merupakan salah satu dari business type yang ada pada LightSwitch.

Sedangkan secara otomatis kolom yang dibuat didalam database bertipe nvarchar.

Kita dapat mengubah format dari pada nomor telepon, gambar dibawah ini merupakan

daftar dari format nomor telepon pada LightSwitch.

Berikut adalah penjelasan symbol pada format

- C : Kode Negara (Country Code)

- A : Kode Area/Kota

- N : Nomor lokal

- + , - , ( , ) , . : Symbol tambahan yang di perbolehkan

Email Address

Sama seperti Phone Number Email Address juga merupakan salah satu business type

dan bertipe nvarchar pada database. Setelah memilih Email Address sebagai tipe data

pada LightSwitch, pada properties kita dapat memasukkan nama domain pada textbox

Default Email Domain . Ini berguna jika data-data email yang di masukkan

menggunakan satu Email Domain. Sehingga user hanya perlu memasukkan Email ID

tanpa perlu mengertikkan Email Domain nya (secara otomatis akan tampil setelah focus

berpindah)


Money

Money adalah Business Type ke tiga yang ada pada LightSwitch, setelah dua tipe

di atas. Pada properties kita dapat melakukan perubahan pada Currency Code,

Symbol Mode dan lain-lain.Pada Symbol Mode ada 3 pilihan seperti dibawah.

- Currency Symbol : Rp123.45

- ISO Currency Symbol : 123.45 Rp

- No Currency Symbol : 123.45


Images

Tipe ini berfungsi untuk menyimpan gambar. Pada LightSwitch terdapat 2 control Image

Editor dan Image Viewer untuk tipe images. Pada LightSwitch 2011 file gambar yang di

dukung adalah JPG dan PNG saja.

Binary

Tipe ini berfungsi untuk menyimpan objek binary yang besar seperti dokumen, video

dan beberapa tipe file yang lain.

C. Relationships

LightSwitch juga mempunyai kemampuan untuk melakukan relasi antar table. Sedangkan

jenis-jenis relasi yang dapat di buat oleh LightSwitch adalah

1. One to Many

Satu ke banyak (One to Many) merupakan relasi standar yang dapat dibuat didalam

LightSwitch. Untuk membuat relasi antara table klik button “Relationships” pada jendela

table designer.


2. Self-Referencing Relationships

Relasi ini merupakan table yang berelasi dengan entity pada table itu sendiri. Seperti

contoh pada database Northwind, table Employee mempunya field Manager, field

tersebut melakukan relasi pada table yang sama.

3. Many to Many

Untuk relasi many to many pada LightSwitch harus menggunakan sedikit trik, tidak bisa

langsung dilakukan antara table ke table yang berelasi. Disini kita harus membuat sebuah

table penghubung antara table-tabel tersebut. Seperti contoh, table Mahasiswa dan table


Mata Kuliah. Seorang mahasiswa bisa memiliki banyak mata kuliah dan satu mata kuliah

bisa dimiliki banyak mahasiswa. Lalu untuk membuat relasi many to many, kita harus

membuat sebuah table Mahasiswa_MataKuliah untuk menampung data mahasiswa yang

mengambil mata kuliah tersebut.

4. One To One

Tidak di dukung oleh LightSwitch.

D. Akses Data Dengan Menggunakan Code

Pada bagian ini akan di jelaskan bagaimana melakukan pengaksesan data dengan

menggunakan code. Seperti di ketahui oleh banyak orang bahwa LightSwitch ada tool untuk

membuat aplikasi yang mudah, si programmer hanya memerlukan sedikit waktu untuk

membuat sebuah aplikasi tanpa memerlukan code sedikit pun. Lalu bagaimana jika kita ingin


melakukan perubahan-perubahan program. Oleh karena itu untuk masalah tersebut

diperlukan code atau teknik pemograman untuk dapat melakukannya.

1. Penggunaan Computed Properties

Computed properties adalah read-only field yang biasanya di gunakan sebagai field

tambahan untuk kalkulasi atau sebagai tambahan informasi. Disini akan di jelaskan

contoh-contoh untuk penggunaan computed properties.

- Summary

Pada contoh kali ini kita akan menggabungkan dua buah field pada satu table yang

sama sebagai tambahan informasi. Contohnya field NIM dan nama mahasiswa di

gabungkan akan menjadi “0001 – Junindar”, untuk melakukan hal tersebut ikuti

langkah-langkah berikut.

Klik button Computed Property

Ganti nama computed field

Pada Properties field computed property yang baru di buat, klik link “Edit

Method”

Dan ketikkan sintaks berikut

Pada properties table mahasiswa, ganti Summary Property menjadi field

computed property yang baru di buat.

result = String.Format("{0} - {1}", Me.Nim, Me.Nama)


- Kalkulasi

Dengan menggunakan Computed Property kita dapat melakukan perhitungan

matematika, seperti mencari nilai total, rata-rata dan lain-lain. Pada contoh dibawah

ini terdapat dua buah table, yang pertama table Penjualan Header dan yang kedua

table detail Penjualan. Dimana satu header dapat memiliki banyak detail (one to

many). Dan untuk mengetahui total harga penjualan dari table Penjualan Detail, kita

dapat membuat sebuah computed property pada table Penjualan Header. Lalu

ketikkan sintaks berikut.

Private Sub MyTotalHarga_Compute(ByRef result As Decimal) ' Set result to the desired field value result = Me.tblJualDetaiLightSwitch .Sum(Function(item) item.Total) End Sub


- Kalkulasi tanggal

Contoh diatas adalah sintaks untuk menghitung umur seseorang, dimana

menggunakan dua parameter yaitu tanggal saat ini dan tanggal lahir.

2. Melakukan Pengaturan Value pada Text Box

Dengan menggunakan sintaks kita dapat melakukan pengaturan kepada value pada text

box. Seperti mengubah value menjadi Upper ataupun Lower Case. Sebagai contoh

terdapat satu button pada Screen, dimana jika screen tersebut di klik maka value pada text

box nama akan berubah menjadi huruf besar semua (huruf capital). Ikuti langkah-langkah

berikut.

- Pada jendela form designer, klik button “Add Data Item”

Private Sub Umur_Compute(ByRef result As String) ' Set result to the desired field value result = DateDiff(DateInterval.Year, Me.TglLahir, Now.Date) & " tahun" End Sub


- Pilih Method pada Screen Member Type, lalu ketikkan nama Method pada text box

name. Dan klik button OK.

- Klik method yang baru saja kita buat (MyUpperCase), lalu pada drop down Write

Code Klik nama method_Excecute (MyUpperCase_Execute)

- Ketikkan sintaks dibawah ini

- Lalu pada form designer, tambahkan sebuah button dibawah Screen Command Bar,

dan pilih Existing Method nya menjadi nama method yang kita buat diatas. Dan klik

button OK, maka akan bertambah satu button pada command bar

2

1

Private Sub MyUpperCase_Execute() ' Write your code here. MahasiswaProperty.Nama = MahasiswaProperty.Nama.ToUpper End Sub


3. Perubahan value pada Grid.

Buat sebuah method dan button seperti diatas. Lalu pada method ketikkan sintaks berikut

ini. Button ini berfungsi untuk mengubah semua data pada field TglLahir menjadi tanggal

hari ini.

Private Sub UbahTanggalLahir_Execute() ' Write your code here. For Each order In Me.Mahasiswas order.TglLahir = DateTime.Now Next End Sub


E. Validasi Data Pada LightSwitch

Pada LightSwitch validasi dilakukan oleh Client dan Server. Validasi yang dilakukan client

adalah validasi screen dan entity. Sebagai contoh jika kita memasukkan format email

ataupun nomor telepon yang salah maka LightSwitch akan menampilkan pesan kesalahan

tersebut. Validasi ini di lakukan sebelum data dikirim ke server. Lali pada server akan di

lakukan validasi entity yang selanjutnya akan divalidasi oleh database.

Save Save Client Server Database

Predefined

Custom

Property

Screen

Custom

Property

Data Service

(Entity)

Storage

Validation


1. Predefined Validation

Pada validasi jenis ini dilakukan pada properties masing-masing field. Sebagai contoh

Check Box Is Required jika di aktifkan maka field tersebut wajib di isi atau tidak boleh

empty. Untuk field bertipe tanggal ada validasi lain yang dapat kita lakukan, seperti

Minimum Value dan Maximum Value. Sedangkan untuk yang bertipe String ada Data

Length validasi, LightSwitch akan melakukan validasi terhadap panjang karakter yang di

masukkan.

2. Membuat Validasi dengan Custom Validation (Client Validation)


3. Setelah kita klik link Custom Validation maka secara otomatis LightSwitch akan

mengenerate code seperti berikut.

Terdapat 4 method pada EntityValidationResultBuilder yaitu : AddPropertyError,

AddPropertyResult, AddEntityError dan AddEntityResult. Untuk method

AddPropertyError dan AddEntityError data tidak dapat disimpan sebelum di perbaiki

terlebih dahulu. Sedangkan untuk AddPropertyResult dan AddEntityResult masih dapat

atau boleh disimpan.

Private Sub TglLahir_Validate(results As EntityValidationResultsBuilder) ' results.AddPropertyError("<Error-Message>") End Sub

Private Sub Nama_Validate(results As EntityValidationResultsBuilder) If Me.Nama IsNot Nothing AndALightSwitch o Not System.Text.RegularExpressions.Regex.IsMatch(Me.Nama, "^[a-zA-Z]+$") Then

results.AddPropertyResult("Karakter yang di masukkan salah", ValidationSeverity.Warning)

End If End Sub Private Sub Nim_Validate(results As EntityValidationResultsBuilder) If Me.Nim IsNot Nothing AndALightSwitch o Me.Nim.Length > 5 Then results.AddPropertyError("Panjang karakter tidak boleh lebih dari 5") End If End Sub


Berikut adalah contoh-contoh Custom Validation

- Validasi Membandingkan (Compare Validation)

Validasi dimana tanggal lahir tidak boleh lebih besar dari hari ini.

- Regular Expression

Membuat validasi dimana karakter yang boleh dimasukkan pada field adalah a-z dan

A-Z. diluar dari karakter-karakter tersebut maka akan muncul pesan error.

- File Size

Melakukan validasi untuk mengecek file gambar yang akan di upload. Sebagai contoh

aplikasi akan membatasi size dari file gambar yang akan di upload atau disimpan.

- Mengecek Child Collection (Server Validasi)

Untuk contoh yang ini merupakan validasi yang di lakukan pada server. Validasi

dilakukan setelah user meng-klik button save. Tidak seperti Client validasi dilakukan

pada saat leave focus atau perpindahan dari satu objek ke objek yang lain. Disini akan

di berikan sebuah contoh bagaimana cara untuk mengecek sebuah child collection

disini kita akan mengecek jumlah row dari sebuah child collection. Sebagai contoh,

kita memiliki 2 buah table yang berelasi ont to many. Yaitu table Jual dan Jual item,

dimana table jual item ini untuk menampung item-item dari penjualan. Untuk contoh

Private Sub TglLahir_Validate(results As EntityValidationResultsBuilder) If Me.TglLahir > Now.Date Then results.AddPropertyError("Tanggal lahir tidak boleh lebih kecil dari hari ini") End If End Sub

Private Sub Nama_Validate(results As EntityValidationResultsBuilder) If Me.Nama IsNot Nothing AndALightSwitch o Not System.Text.RegularExpressions.Regex.IsMatch(Me.Nama, "^[a-zA-Z]+$") Then

results.AddPropertyResult("Karakter yang di masukkan salah", ValidationSeverity.Warning)

End If End Sub

Private Sub Photo_Validate(results As EntityValidationResultsBuilder) If Me.Photo IsNot Nothing Then Dim iSize = Me.Photo.Length / 1024 If iSize > 2 Then results.AddPropertyError("File gambar tidak boleh lebih besar dari 512 kb") End If End If End Sub


kali ini kita akan membuah sebuah validasi untuk membatasi jumlah item pada setiap

penjualan adalah 3, jika lebih dari tiga aka nada pesan error. Ikuti langkah-langkah

dibawah ini.

Pada table jual, klik Write Code dan pilih nama table_Validate sebagai contoh

JuaLightSwitch _Validate

Dan ketikkan sintaks dibawah ini.

Private Sub JuaLightSwitch _Validate(entity As Jual, results As EntitySetValidationResultsBuilder) If entity.JualItems.Count() > 3 Then results.AddEntityError("Maksimal penjualan hanya 3 items") End If End Sub


F. Query Data pada LightSwitch

Pada LightSwitch kita dapat membuat query untuk melakukan filter data yang nanti nya

dapat digunakan oleh screen. Untuk query-query sederhana kita dapat menggunakan

query designer tapi untuk query yang lebih complex di perlukan LINQ code untuk

membuat nya.

Default Query

Untuk masing-masing table pada aplikasi, LightSwitch akan secara otomatis

membuat dua buah query yaitu Single dan All. Sebagai contoh jika kita membuat

sebuah table Mahasiswa, LightSwitch akan membuat query dengan nama

Mahassiswas_All untuk mengambil semua data dan Mahasiswas_Single untuk

mengambil single data berdasarkan ID.

Filter dan Sort data menggunakan designer

a) Query Filter Data

Dengan menggunakan designer kita dapat membuat query filter yang sederhana.

Berikut merupakan gambar elemen-elemen pada query designer.


1) Tipe Query Kriteria

Terdapat dua pilihan yaitu Where dan Where Not. Jika menggunakan Where,

query akan menampilkan data yang cocok dengan kondisi yang di buat.

Sebaliknya untuk Where Not akan menampilkan data yang tidak cocok

dengan kondisi yang di buat.

2) Selection Property

Property yang akan digunakan untuk filter data.

3) Operator

Beberapa dari operator di atas, bergantung pada tipe data pada property yang

dipilih.

1 2 3 4 5


Operator Penjelasan

= Untuk semua tipe data

<> Untuk semua tipe data

> Tidak tersedia untuk tipe Boolean,

binary dan images

< Tidak tersedia untuk tipe Boolean,

binary dan images

>= Tidak tersedia untuk tipe Boolean,

binary dan images

<= Tidak tersedia untuk tipe Boolean,

binary dan images

Contains Untuk tipe data String

Does Not Contain Untuk tipe data String

Is Between Tidak tersedia untuk tipe Boolean,

binary dan images

Is Not Between Tidak tersedia untuk tipe Boolean,

binary dan images

Is Null Tersedia hanya untuk field yang boleh

tidak di isi. (nonrequired)

Is Not Null Tersedia hanya untuk field yang boleh

tidak di isi. (nonrequired)

4) Comparison Type


Literal : melakukan filter dengan teks yang langsung di masukkan (Hard-

Coded Value)

Property : membandingkan dengan property yang memiliki tipe data sama.

Parameter : membandingkan dengan parameter yang di buat.

Dari ketiga comparison type diatas, parameter yang paling sering di gunakan

karena lebih fleksible. Pada bagian ini akan dijelaskan bagaimana membuat

query dengan menggunakan parameter dan di implementasi ke Screen, ikuti

langkah-langkah dibawah ini.

Sebelumnya sebagai ilustrasi, kita memiliki 2 buah table (tblBarang dan

tblSatuan) dengan relasi 1 satuan memiliki banyak barang (one to many).

Dan query yang akan di buat adalah pencarian data barang berdasarkan

satuan, dengan menggunakan control dropdown.


Pada Tabel tblBarang, lalu klik kanan dan pilih Add Query.

Ganti nama query menjadi BarangBySatuan

Lalu pada Query Designer, tambahkan Filter dengan Property nya

tblSatuan.Id,Operator nya sama dengan (=) dan tipe pembanding nya

adalah @Parameter.

Selanjutnya tambahkan Parameter, dengan nama Parameternya

”IdSatuan”,Tipe nya String dan terakhir Aktifkan Check Box ”Is

Optional” pada properties Parameter


Lalu pada filter Klik Drop-Down dari Comparison Value, dan pilih

IdSatuan.

Sehingga tampilan dari Query Designer nya seperti gambar dibawah.


Tambahkan sebuah Screen dengan template nya ”Search Data Screen”,

Screen Name adalah “SearchBarangBySatuan” dan Screen Data nya

”BarangBySatuan”.

Selanjutnya pada Screen Designer, delete tblBarangIdSatuan


Lalu klik ”Add Data Item” pada Command Bar. Pada jendela Add Data

Item klik Radio Button “Local Property”, dan pada Drop Down Type Pilih

“tblSatuan” dan pada TextBox Name ketikkan “Satuan”, klik button Ok.

Pilih CategoryID pada Query Parameter, lalu ketikkan Satuan.IdSatuan

pada Parameter Binding text box

Drag dan drop Satuan Property kedalam Screen Content Tree, yaitu diatas

Data Grid


Selanjutnya klik Satuan, lalu ganti Horizontal Alignment menjadi Left dan

MinWidth menjadi “150”

5) Comparison Value

Nilai yang di gunakan untuk menfilter data.


b) Sorting Query

Pada query designer kita dapat melakukan sorting data sesuai dengan field yang

kita inginkan. Klik Add Sort dan pilih nama field selanjutnya pilih jenis sorting

(Ascending atau Descending). Seperti pada gambar dibawah ini.

c) LINQ

LINQ merupakan fitur yang diperkenalkan pertama kali pada .Net 3.5. Ada

beberapa macam LINQ Provider seperti LINQ to Object, LINQ to XML, LINQ to

SQL, LINQ to Datasets. Kita dapat membuat query yang lebih kompleks dengan

mengunakan Language Integrated Query (LINQ) pada LightSwitch.

Berikut merupakan contoh sintaks LINQ pada LightSwitch untuk menampilkan

data Mahasiswa pada message box.

Private Sub ShowSatuan_Execute() ' Write your code here. Dim message = New StringBuilder Dim items = From dataItem In DataWorkspace.ApplicationData.Mahasiswas Order By dataItem.Nama Select dataItem For Each item As Mahasiswa In items message.AppendLine( String.Format("{0} - {1}", item.Nim, item.Nama)) Next ShowMessageBox(message.ToString, "Daftar Mahasiswa", MessageBoxOption.Ok) End Sub


Berikut akan di jelaskan contoh-contoh penggunaan LINQ pada LightSwitch.

Filter berdasarkan child table (table anak)

Jika kita menggunakan query designer pada LightSwitch, dan bekerja pada

child table kita dapat mengakses fiel-field yang terdapat pada child table. Tapi

hal tersebut tidak dapat dilakukan sebaliknya (dari parent mengakses ke child

field table). Lalu untuk mengatasi hal ini, kita dapat menggunakan LINQ.

Buat sebuah query pada Table Jual (Parent Table), lalu pada Write Code Pilih

Method “NamaQuery_PreprocessQuery”, dan ketikkan sintak LINQ berikut.


Exists atau Select IN Query

Contoh query diatas berfungsi untuk menampilkan data buah yang ada

(exists) pada table jual. Lalu bagaimana cara nya jika query tersebut mau di

implementasikan di LightSwitch menggunakan LINQ.

Maka hasil di dapat dari sintaks LINQ diatas adalah daftar buah-buahan yang

telah ada pada table JualItem.

Non Exists atau Select NOT IN Query

Fungsi ini merupakan kebalikan dari pada fungsi diatas. Non Exists berfungsi

untuk menampilkan data-data yang tidak ada (non exist) pada table yang di

rujuk.

Private Sub JualQuery_PreprocessQuery(ByRef query As System.Linq.IQueryable(Of LightSwitchApplication.Jual)) query = query.Where( Function(Myjual) Myjual.JualItems.Where( Function(jualitem) jualitem.Jumlah > 2).Any()) End Sub

Select BuahID,NamaBuah From tblBuah

Where BuahID IN (Select BuahID From tblJual)

Private Sub QueryBuah_PreprocessQuery(ByRef query As System.Linq.IQueryable(Of LightSwitchApplication.JenisBuah)) query = query.Where(Function(buahItem) buahItem.JualItems.Any()) End Sub

Private Sub QueryBuah_PreprocessQuery(ByRef query As System.Linq.IQueryable(Of LightSwitchApplication.JenisBuah)) query = query.Where(Function(buahItem) Not buahItem.JualItems.Any()) End Sub


Top N Record

Sering sekali dalam suatu aplikasi, terdapat fungsi menampilkan data 10 atau

5 teratas dari suatu table. Dengan menggunakan LINQ pada LightSwitch kita

dapat mengimplementasikan fungsi tersebut. Berikut merupakan contoh LINQ

untuk menampilkan 10 mahasiswa teratas berdasarkan nama Mahasiswa. Buat

sebuah query pada table mahasiswa dan pada method PreprocessQuery

ketikkan sintaks dibawah.

Private Sub Top10Mahasiswa_PreprocessQuery(ByRef query As System.Linq.IQueryable(Of LightSwitchApplication.Mahasiswa)) query = query.OrderBy( Function(productItem) productItem.Nama).Take(10) End Sub


BAB II

INTERAKSI DENGAN DATA

A. Screen

Pada bagian akan di jelaskan bagaimana bekerja dengan screen baik menggunakan screen

designer maupun code.

1. Membuat/Menambah Screen

Untuk menambah sebuah screen pada LightSwitch, klik kanan pada Solution Explores,

pilih Add Screen

Terdapat beberapa (5) jenis/template Screen pada dialog Add New Screen diatas yaitu.

a) Detail Screen

Sesuai dengan nama nya, screen ini berfungsi untuk menampilkan data secara detail.

Screen ini akan tampil apabila user meng-klik button “Details” dari screen yang lain.


b) Editable Grid Screen

Screen ini sangat membantu jika kita ingin melakukan perubahan pada banyak baris

dalam satu waktu. Ketika data sudah di ubah seluruh nya, pengguna hanya perlu

menekan button Save.

c) List and Detail Screen

Untuk default template ini memiliki 2 area, dimana salah satu area menampilkan

sebagai list, dan area satu nya lagi detail dari setiap item yang dipilih pada list.


d) New Data Screen

Pada Screen ini berfungsi untuk menambah data baru dalam satu waktu. Jadi setelah

melakukan penambahan data secara default maka screen akan berpindah ke Detail

Screen.


e) Search Data Screen

Sedangkan pada template terakhir ini berfungsi untuk menampilkan data didalam

Data Grid secara read only (default) dan untuk mencari data pengguna dapat

memasukkan kata kedalam text box search. Dan pada awal field (default) memiliki

fungsi menampilkan Details Screen.

2. Elemen pada Screen

a. Save CommandButton

Save button akan tampil pada setiap screen yang di buka. Save button terletak pada

bagian Ribbon Bar. Command Button ini berfungsi sesuai dengan namanya, yaitu

untuk menyimpan data, baik dalam hal penambahan maupun pengubahan yang di

lakukan oleh user baik single ataupun multiple data. Jika pada sebuah screen dimana

kita tidak memerlukan command button Save ini. Selanjutnya kita dapat menghapus

command button ini, dengan cara pada screen designer klik kanan pada command

button lalu pilih “delete”.


Atau jika kita ingin mengubah display name, mengganti gambar, size dari command

button ini, dapat kita lakukan dari properties.

b. Refresh Command Button

Sama seperti Save, command button ini juga ada pada setiap screen, yang berfungsi

untuk merefresh screen sehingga kita mendapatkan data yang up to date. Untuk

beberapa screen, pada saat kita menekan Refresh maka dialog berikut seperti dibawah

akan tampil


- Save : Menyimpan data

- Discard : Mengabaikan perubahan, sebelum melakukan refresh.

- Cancel : Tidak melakukan apa-apa dan kembali ke screen.

3. Elemen pada Screen Designer

1) Command Bar

Posisi command bar ini berada di atas screen designer dan memiliki 6 button.

i. Edit Query

Hanya aktif pada screen Editable Grid Screen dan Search Screen Template.

Button ini berfungsi untuk membuka query editor sehingga kita dapat

melakukan pengubahan pada query.

3 2

1


ii. Add Data Item

Pada saat kita klik button Add Data Item, maka akan tampil sebuah dialog box,

dimana kita dapat manambahkan data item pada screen. Terdapat 3 tipe pada

Screen Member pada dialog box ini.

Method

Dengan memilih method kita dapat menambahkan code pada screen.

Biasanya pembuatan method digunakan pada saat membuat sebuah button.

Setelah kita menambahkan sebuah method, maka method tersebut akan

tampil pada Screen Member List pada Screen Designer, lalu drag kedalam

Screen Content Tree


Dibawah ini merupakan jendela dimana kita dapat menuliskan code yang di

inginkan.

Local Property

Pada saat kita memilih Local Property, maka kita dapat menggunakan drop-

down box untuk memilih tipe. Pada drop-down box ini tersedia semua tipe

data yang ada pada LightSwitch .


Query

Opsi yang terakhir pada Add Data Item adalah Query. Setelah memilih opsi

query makan daftar dari query baik yang default bawaah dari LightSwitch

(Single atau All) maupun query yang kita buat akan aktif.

iii. Add Layout Item

iv. Delete Button

v. Reset Button

vi. Write Code


2) Screen Member List

Screen Member List adalah bagian dari Screen Designer yang berada pada sebelah

kiri. Elemen yang ada pada Screen Member List bergantung pada Screen Template

yang dipilih.

Jika kita memilih Editable Grid Screen Template, maka screen query akan tampil

pada item yang paling atas pada Screen Member List. Sedangkan untuk New Data

Screen Template, LightSwitch akan membuat property berdasarkan entity dari pada

table. LightSwitch akan menambahkan kata Property setelah nama objek yang

dipilih. Seperti contoh jika nama objek merupakan Mahasiswa maka akan menjadi

MahasiswaPropety.

Berikut merupakan penjelasan bagian-bagian Screen Member List secara detail.

a. Screen Query

Editable Grid Screen New Data Screen Detail Screen


Berikut merupakan Item-item pada properties yang dapat kita ubah sesuai dengan

yang diinginkan.

- Query Source : Kita dapat memilih apakah data yang di tampilkan adalah

semua, atau sepuluh teratas (Top 10)

- Property Type : Menampilkan tipe entitiy, dan item ini read only atau tidak

dapat di ganti atau di ubah setting nya.

- Support Paging : Jika kita aktifkan pilihan ini, paging control akan tampil di

grid footer.

- Number of Items to display per page : Item ini akan aktif bila kita memilih

support paging. Default nilai nya adalah 45

- Support Sorting : Apabila item ini di aktifkan, maka proses sorting data dapat

dilakukan dengan cara meng-klik header dari grid.

- Support Search : Mengaktifkan search box untuk mencari data pada grid

- Auto Execute Query : Mengindikasikan apakah query di jalankan pada saat

screen di buka.

b. Selected Item

Merupakan sekumpulan item (entity/property) dari sebuah data collection. Pada

Screen Designer, kita dapat memilih sebuah item dan mengganti UI (control) dari

item tersebut.


c. Related Collections

Fungsi ini akan otomatis ada pada table yang berelasi dengan table lain (Parent-

Child). Kita dapat menambah item collection pada table yang berelasi tersebut

dengan meng-klik Add nama table.

d. Setting Query Parameter

Kita dapat membuat custom query pada screen dengan menggunakan Query

Parameter. Penjelasan ini mengenai fungsi ini telah di jabarkan di bagian Query

pada bab sebelumnya.


3) Screen Content Tree

o Layout Control

Dalam Layout Control terdapat 2 bagian yang harus dipahami.

Presentation Container

Data Item Container

Presentation Container digunakan untuk layout pada screen yang kita buat,

seperti posisi dari pada data control yang ingin di tampilkan pada screen.

Didalam satu presentation container bisa terdapat banyak (multi) presentation

container. Terdapat 4 jenis presentation container pada LightSwitch .

1. Rows Layout : Menampilkan item-item dari atas kebawah.

Command

Data Control

Layout Control

Ribbon Bar

Command


2. Columns Layout: Menampilkan data control dari kiri ke kanan.

3. Table Layout : Dibawah layout akan terdapat item yang terdiri dari table

cell baik itu baris maupun kolom.


4. Tabs Layout: container ini akan membuat tampilan tab. Dimana data item

bisa di pindahkan kedalam tab tersebut.

Sedangkan untuk Data Item Container digunakan untuk menampilkan data

pada screen. Berikut merupakan bagian dari Data Item Container.

Address Editor : Akan terdapat beberapa item pada editor ini yaitu :

STREET LINE 1, STREET LINE 2, CITY, STATE, ZIP CODE dan

COUNTRY


Address Viewer : Hampir sama dengan Address Editor diatas, tapi data

container ini bersifat read only.

Modal Window : Sebuah button yang akan menampilkan sebuah form

Modal Window pada saat button di klik

Picture dan Text : Sebuah data container untuk menampilkan gambar dan

text. Dimana container akan dibagi menjadi dua bagian horizontal.

Sebelah kiri gambar dan kanan text. Untuk bagian text terdapat beberapa

item seperti Title, Subtitle dan Description


Text and Picture : Sama seperti data container diatas, hanya letak dari

gambar dan text di pindah. Gambar kanan dan text menjadi sebelah kiri.

o Data Control

Data control merupakan bagian dari elemen UI, yang membolehkan user

untuk untuk menampilkan atau mengubah data. Berikut beberapa contoh dari

data control pada LightSwitch .

Text Box : Mendukung untuk seluruh Data Type pada LightSwitch .

Merupakan control yang berfungsi untuk menampilkan dan sekaligus

mengubah data.

Sebagai default, text box hanya menampilkan 1 baris data, tetapi kita

dapat mengubah menjadi multiple baris. Dengan memanfaatkan properties

dari Text Box.

Label : label merupakan salah satu control Read Only pada LightSwitch .

Dan mendukung semua jenis Data Type pada LightSwitch . Untuk label

kita dapat mengganti Style dari font dengan menggunakan properties

control.


AutoCompletedBox: control ini hampir sama dengan ComboBox.

Menampilkan data pada saat di drop-down, dan membolehkan user untuk

mengetik kedalam control.

Modal Window Picker : Menampilkan Modal Window, lalu kita dapat

mencari data yang di inginkan.


Data Grid: Control yang menampilkan data pada Grid (semacam table).

User dapat melakukan sorting data dengan cara meng-klik header kolom.

LightSwitch akan menambahkan Data Grid Control pada screen secara

otomatis, pada saat kita membuat screen dengan memilih 2 template

sebagai berikut Editable Grid dan Search Template.


4. Design Screen pada saat Runtime (Aplikasi di jalankan)

Merupakan salah satu kelebihan pada LightSwitch adalah user dapat melakukan

perubahan design screen pada saat aplikasi di jalankan (Runtime). Untuk menggunakan

Runtime Design, pada saat aplikasi dijalankan, klik button Design Screen pada sebelah

kanan atas Screen.

Grid

Command

Grid Column


Pada runtime designer kita dapat mengubah setting dari pada control-control pada screen,

menambah maupun menghapus layout. Jangan lupa selepas mengganti setting pada

control tekan button Save untuk menyimpannya.

5. Bekerja dengan menggunakan Code pada Screen

Menampilkan Message

- ShowMessageBox

Kita dapat menggunakan method ShowMessageBox untuk menampilkan pesan

pada dialog box.

Private Sub Cancel_Execute() If Me.ShowMessageBox("Apakah anda akan membatalkan proses?",

"Confirm", MessageBoxOption.YesNo) = System.Windows.MessageBoxResult.Yes Then

Me.DataWorkspace.ApplicationData.Details.DiscardChanges() Me.ShowMessageBox("Proses telah dibatalkan") End If End Sub


Terdapat beberapa option pada method ini, seperti Ok,OkCancel,YesNo dan

YesNoCancel. Pada contoh diatas, menggunakan Option YesNo, dimana

MessageBox akan menampilkan 2 buah button Yes dan No.

- ShowInputBox

Berbeda dengan ShowMessageBox diatas, untuk ShowInputBox merupakan

method yang menampilkan dialog box dengan terdapat text box didalamnya. Kita

dapat mengambil nilai yang dimasukkan kedalam text box tersebut.

Private Sub TambahMahasiswa_Execute() Dim Nama = Me.ShowInputBox( "Masukkan Nama Mahasiswa?", "Tampil", "") If Not Nama Is Nothing AndAlso Nama.Length > 0 Then Me.ShowMessageBox("Nama Mahasiswa yang di ketik adalah : " & Nama) End If End Sub


Setting Title pada Screen

Pada LightSwitch kita dapat menggunakan code untuk mengganti titel dari screen,

sesuai dengan yang kita inginkan.

Mengganti Perilaku (Behaviour) pada proses simpan di New Data Screen Template

Seperti yang di ketahui default dari cara kerja proses simpan pada New Data Screen

Template adalah ketika user klik button simpan (Save), maka LightSwitch secara

otomatis akan menutup form tersebut dan membuka form baru yang berisi nilai-nilai

yang baru saja di masukkan, dengan menggunakan Detail Screen.

Kita dapat mengubah cara kerja proses pada button simpan, misalnya selepas klik

button save, hanya melakukan refresh pada screen dengan tidak menutup form

tersebut.

Jika di lihat pada code di atas, original code yang ada pada method Saved, kita

remove terlebih dahulu, maru kita tambahkan satu baris code, yang berfungsi untuk

membuat instance baru. Sehingga screen akan clear dan user dapat memasukkan data

baru yang dinginkan.

Membuka Screen Menggunakan Code

Me.DisplayName = "Jun Title"

Private Sub CreateNewMahasiswa_Saved() '//original code start 'Me.Close(False) 'Application.Current.ShowDefaultScreen(Me.MahasiswaProperty) '//original code finish Me.MahasiswaProperty = New Mahasiswa() End Sub


LightSwitch akan secara otomatis membuat method dengan menggunakan nama

screen di tambah kata “Show”. Sebagai contoh jika kita memiliki screen dengan nama

SearchMahasiswa maka secara otomatis LightSwitch akan membuat sebuah method

ShowSearchMahasiswa.

Passing Value ke dalam Screen

Kita dapat melakukan passing sebuah nilai pada saat akan membuka sebuah Screen.

Hal ini bisa di lakukan jika screen yang akan di buka memiliki parameter.

Private Sub BukaCariMahasiswa_Execute() ' Write your code here. Me.Application. ShowSearchMahasiswas() End Sub

Private Sub BukaCariMahasiswa_Execute() ' Write your code here. Me.Application. ShowSearchMahasiswaParam("jun") End Sub


Setting Focus Pada Control

Seperti pada aplikasi-aplikasi lain, pada LightSwitch kita juga dapat mengganti focus

dari pada control di screen.

Hide dan Show Control

Untuk menghilangkan sebuah control pada LightSwitch kita bisa memanfaatkan

property pada setiap control tersebut. Yaitu dengan menggunakan IsVisible property.

Tapi kita juga bisa memanfaatkan code untuk melakukan hal seperti diaatas. Pada

contoh code dibawah kita akan menghilangkan dan menampilkan kembali control

Nama pada screen

Me.FindControl("Nama").Focus()

Private Sub Hilang_Execute() ' Write your code here. Dim MyLayout = Me.FindControl("Nama") MyLayout.IsVisible = Not (MyLayout.IsVisible) End Sub


6. Membuat Custom Screen

Menambahkan Home Page

Pada bagian ini akan di jelaskan cara membuat Home Page pada LightSwitch , pada

Home Page akan terdapat Logo, Text maupun link untuk membuka screen yang lain.

Ikuti langkah-langkah berikut.

a) Membuat Empty Screen

Tambahkan sebuah screen template pada project. Ubah nama Screen Name

menjadi Home, sedangkan untuk Screen Data biarkan tetap None.

b) Menambahkan Static Text pada Screen

Pada Screen Designer, klik Add Data Item

Pada Add Data Item, pilih String pada Local Property dan ganti namanya

menjadi “ScreenTitle”. Dan klik OK


Drag ScreenTitle kedalam ContenTree, lalu ganti tipe control dari text box

menjadi label

Ganti Font Style Menjadi Heading 1

Untuk mengganti text secara static dengan menggunakan code pada

ScreenTitle, pilih method InitializeDataWorkSpace


Ketikkan sintaks berikut .

c) Menambahkan Static Image Pada Screen

Ketika bekerja dengan data pada LightSwitch , sangat mudah sekali bagi kita

untuk menambahkan kolom image kedalam table. Dengan adanya kolom tersebut,

user bisa melakukan upload dan menampilkan gambar. Untuk pada Home Screen

kita tidak menggunakan database dalam menyimpan gambar. Hampir sama

dengan Static Text kita akan menggunakan code untuk mengambil gambar. Ikuti

langkah-langkah dibawah ini untuk membuat Static Image pada Home Page.

Pada Screen Designer, klik Add Data Item

Pilih Image pada Local Property, dan ganti namanya menjadi HomeLogo.

ScreenTitle = "Selamat Datang di Will Code With LightSwitch"


Drag HomeLogo kedalam Content Tree, lalu ganti control nya menjadi

ImageViewer.

Pada Solution Explorer, ganti model project menjadi File View

Pada Solution Explorer, klik kanan Client Project > Add > Existing Item. Cari

gambar yang di inginkan.


Pada properties gambar yang di tambahkan, pilih Build Action menjadi

“Embedded Resource”

Kembali lagi ke Home Page Screen Designer, dan buka Screen Code. Lalu

pada Screen Code kita akan membuat sebuah Function untuk mengambil

gambar dari Client Assembly.


Selanjutnya tambah sebuah baris code pada InitializeDataWorkSpace method

Jalankan Program maka mendapatkan hasil seperti gambar dibawah.

d) Menambahkan Link

Setelah memanbah teks dan gambar pada Home Page, langkah selanjutnya adalah

membuat link untuk membuka screen yang lain. Hal pertama yang akan di

lakukan adalah membuat layout untuk meletakan link-link yang di perlukan. Ikuti

langkah-langkah dibawah ini.

Buat sebuah table layout, column mapun cell seperti gambar dibawah.

Private Function GetImageFromAssembly(fileName As String) As Byte() Dim assembly As Reflection.Assembly = Reflection.Assembly.GetExecutingAssembly() Dim stream As Stream = assembly.GetManifestResourceStream(fileName) Dim streamLength As Integer = CInt(stream.Length) Dim fileData(streamLength - 1) As Byte stream.Read(fileData, 0, streamLength) stream.Close() Return fileData End Function

'//Kode Memanggil Method di atas HomeLogo = GetImageFromAssembly("Penguins.jpg")


Lalu klik button Add Layout Item, dan tambahkan 2 buah button dengan nama

masing-masing LinkAddNew dan LinkSearch.

Ubah Control button menjadi Link

Ketik code dibawah untuk menampilkan screen-screen yang di inginkan.


Hasil yang di dapatkan seperti gambar dibawah ini.

Membuat Custom Search Screen

Pada LightSwitch kita dapat menggunakan Search Data Screen Template, untuk

membuat screen pencarian. Tapi screen yang di hasilkan sangatlah terbatas. Untuk

membuat screen pencarian yang lebih power full di perlukan sedikit teknik baik

menggunakan query maupun code.

Pada contoh kali ini kita aka membuat sebuah screen pencarian dengan menggunakan

2 parameter. Yang pertama menggunakan AutoCompleteBox, yang di gunakan untuk

menfilter mahasiswa berdasarkan nama kelas. Yang kedua user dapat melakukan

filtering dengan menggunakan nama mahasiswa.

o Buat sebuah query dengan nama CariMahasiswa, dengan memfilter 2 field

(KelasSiswa.Id dan Nama), seperti gambar dibawah. Untuk di ketahui table

Private Sub LinkAddNew_Execute() ' Write your code here. Me.Application.ShowCreateNewMahasiswa() End Sub Private Sub LinkSearch_Execute() ' Write your code here. Me.Application.ShowSearchMahasiswas() End Sub


Mahasiswa berelasi dengan table KelasSiswa. Lalu buat 2 buah parameter dengan

nama masing-masing KelasIdParam dan NamaParam.

o Selanjutnya tambah sebuah screen, pilih Search Screen Template. Pada Screen

Data pilih CariMahasiswa query. Dan klik Ok button.

o Lalu buat sebuah AutoCompleteBox untuk menampilkan daftar kelas. Untuk

membuat AutoCompleteBox, klik Add Data Item button lalu pada Local Property

pilih KelasSiswa (Entity), dan pada Name ubah menjadi KelasProperty.


o Lalu drag KelasProperty dan drop di Content Tree seperti gambar dibawah.

o Ubah Parameter Binding untuk KelasIdParam menjadi KelasProperty.Id


o Jalankan program dan akan mendapatkan hasil seperti gambar dibawah.

7. Bekerja dengan File

Pada LightSwitch terdapat sebuah type dengan jenis Binary, dengan menggunakan tipe

data tersebut kita dapat membuat aplikasi yang dapat bekerja dengan file baik upload

maupun download file.

A. Upload File

Untuk membuat fungsi upload file, pertama-tama buat terlebih dahulu sebuah table

seperti diatas. Dan ikuti langkah-langkah berikut ini

- Buat sebuah screen dengan menggunakan MahasiswaDocument table.

- Tambahkan sebuah button dengan nama UploadFileToDatabase


- Buka Screen Code, dan tambahkan 3 baris code ini, pada baris paling atas.

- Selanjuntya pada Write Code, pilih UploadFileToDatabase, dan ketikkan sintaks

dibawah.

Imports System.Windows.Controls Imports Microsoft.LightSwitch.Threading Imports System.Windows


LightSwitch akan menampilkan open dialog, agar user dapat memilih file yang

dinginkan. Dengan menggunakan File Stream, file akan di baca kedalam byte

array. Selain menyimpan byte array, kita juga akan meyimpan nama file beserta

dengan extension file tersebut.

B. Download File

Hampir sama dengan upload file, buat sebuah Add Data Item button dengan nama

SaveFileFromDatabase . Selanjutnya ketikkan sintaks berikut.

Setelah user memilih lokasi yang di inginkan, MemoryStream akan menulis data

kedalam file.

Private Sub UploadFileToDatabase_Execute() ' Write your code here. Dispatchers.Main.Invoke(Sub() Dim openDialog As New Controls.OpenFileDialog openDialog.Filter = "All files|*.*" If openDialog.ShowDialog = True Then Using fileData As System.IO.FileStream = openDialog.File.OpenRead Dim fileLen As Long = fileData.Length If (fileLen > 0) Then Dim fileBArray(fileLen - 1) As Byte fileData.Read(fileBArray, 0, fileLen) fileData.Close() Me.MahasiswaDocumentProperty.File = fileBArray Me.MahasiswaDocumentProperty.FileExtension = openDialog.File.Extension.ToString() Me.MahasiswaDocumentProperty.FileName = openDialog.File.Name End If End Using End If End Sub) End Sub

Private Sub SaveFileFromDatabase_Execute() Dispatchers.Main.Invoke(Sub() Dim ms As System.IO.MemoryStream = New System.IO.MemoryStream(MahasiswaDocument.File) Dispatchers.Main.Invoke(Sub() Dim saveDialog As New Controls.SaveFileDialog If saveDialog.ShowDialog = True Then Using fileStream As Stream = saveDialog.OpenFile ms.WriteTo(fileStream) End Using End If End Sub) End Sub) End Sub


C. Open (Membuka) File

Setelah menyelesaikan dua fungsi diatas (Upload dan Download), selanjutnya kita

membuat suatu fungsi yaitu membuka file yang terdapat dalam database dari screen.

Hal yang perlu diketahui dalam proses membuka file, pertama adalah menyimpan file

kedalam local storage (lokasi temporary). Menggunakan Shell untuk membuka file

yang disimpan tersebut.

Catatan : Untuk ketiga fungsi (Upload, Download dan Open) file ini hanya berjalan

pada Desktop aplikasi.

8. Setting User Interface

Private Sub OpenFileFromDatabase_Execute() Try If (AutomationFactory.IsAvailable) Then Dim fullFilePath As String = System.IO.Path.Combine( Environment.GetFolderPath( Environment.SpecialFolder.MyDocuments), MahasiswaDocument.FileName) Dim fileData As Byte() = MahasiswaDocument.File.ToArray() If (fileData IsNot Nothing) Then Using fs As New FileStream( fullFilePath, FileMode.OpenOrCreate, FileAccess.Write) fs.Write(fileData, 0, fileData.Length) fs.Close() End Using End If Dim shell = AutomationFactory.CreateObject("Shell.Application") shell.ShellExecute(fullFilePath) End If Catch ex As Exception Me.ShowMessageBox(ex.ToString()) End Try End Sub


Application Name : Nama aplikasi yang tampil pada Title Bar pada aplikasi

Logo Image : Pada saat aplikasi berbasis desktop telah di deploy, logo image

digunakan pada desktop icon.

Application Icon : Icon yang tampil pada title bar

Application Version : Versi dari aplikasi

Culture : Digunakan untuk mengganti culture pada aplikasi. LightSwitch mendukung

culture yang menggunakan bahasa dari kanan ke kiri seperti Arabic atau Chinese.

Contoh aplikasi yang menggunakan Culture Arabic

Screen Navigation


Screen Navigation menu tampil di sebelah kiri pada saat aplikasi di

jalankan. Kita dapat menggunakan screen navigation tab pada project

properties untuk mengatur item-item pada menu, display text dan

membuat group pada menu.

Selanjutnya kita dapat mengatur screen mana yang akan tampil pada saat

aplikasi di jalankan, dengan menggunakan button set.

Application Type

Application Type digunakan untuk menentukan/memilih jenis aplikasi

yang akan berjalan pada client, apakah Dekstop maupun Web. Juga

untuk menentukan topology dari application server apakah berjalan pada

end user mesin, memisahkan Host aplikasi pada Internet Information

Services (IIS) Server atau menggunakan Windows Azure.



BAB III

CUSTOM CONTROL DAN EXTENSION

A. Custom Control

Seperti telah di jelaskan di atas, pada LightSwitch terdapat beberapa built –in control seperti

label, text box, datagrid dan lain-lain. Dan tidak menutup kemungkinan untuk kita membuat

custom control agar aplikasi yang ada semakin menarik dan power full, sebagai contoh dengan

membuat chart ataupun control-control yang tidak disediakan oleh LightSwitch . Perlu di

ketahui control-control pada LightSwitch berbasiskan pada Silverlight, dan kita dapat

menggunakan teknologi Silverlight untuk membuat custom control yang di inginkan.

1. PasswordBox

PasswordBox merupakan control yang mirip seperti textbox, hanya saja semua karakter

yang ketikkan akan diganti menjadi titik. Disini akan diberikan contoh bagaimana

menggunakan control PasswordBox ini. Buat sebuah table dengan nama “Pengguna”,

dengan field-field sebagai berikut : Username, Nama dan Password.

Dan buat sebuah screen berdasarkan table diatas, dengan menggunakan New Data Screen

Template.


Pada screen designer, pilih control Password dan pada properties Control Type ganti

menjadi Custom Control.

Masih dengan control yang sama, selanjutnya pada Properties Custom Control, klik Label

“Change”, dan akan tampil sebuah jendela “Add Custom Control”. Lalu pada Node

System.Windows > System.Windows.Controls , pilih PasswordBox.

Langkah terakhir adalah melakukan Binding terhadapat control. Pada screen designer,

pilih method “Activated” pada Write Code. Dan ketikkan sintaks dibawah ini. Lalu jalan

kan program maka akan mendapatkan hasil seperti gambar dibawah, dimana karakter

yang di ketikkan ke dalam textbox akan berubah menjadi tanda titik.


2. ComboBox

ComboBox merupakan control alternative yang dapat di gunakan sebagai pengganti dari

AutoCompleteBox pada LightSwitch . Fungsi yang dimiliki dari kedua control ini hampir

sama, yaitu menampilkan data secara dropdown dan dapat dipilih oleh pengguna. Lalu

apa perbedaan dari kedua control ini? Untuk AutoCompleteBox data yang di tampilkan

tidak bersifat read only, artinya pengguna dapat mengetikkan text kedalam control

tersebut, sebaliknya tidak untuk ComboBox. Jadi jika kita ingin menggunakan control

bersifat dropdown yang read only maka kita dapat menggunakan custom control seperti

ComboBox. Untuk memudahkan dalam memahami, disini akan dijelaskan bagaimana

menggunakan control tersebut dengan menggunakan contoh sebagai berikut. Sebelumnya

kita telah memiliki 2 buah table yang saling berelasi, yaitu Table Mahasiswa dan

KelasSiswa, dimana satu kelas dapat memiliki banyak Mahasiswa. Buat sebuah Screen

berdasarkan table Mahasiswa dengan template New Data Screen. Jika kita lihat pada

screen yang baru saja kita buat, akan secara otomatis terdapat sebuah control

AutoCompleteBox pada screen. Tidak seperti PasswordBox yang secara langsung

mengganti jenis control menjadi custom control, untuk kasus ini kita terlebih dahulu

harus membuat sebuah query sebagai berikut.

- Lalu pada screen designer klik button Add Data Item, pilih Radio Button Query dan

cari query KelasSiswa (All) query, dan ganti nama query menjadi KelasSiswas.

Private Sub CreateNewPengguna_Activated() ' Write your code here. Dim password As IContentItemProxy = Me.FindControl("Password") Password.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", Windows.Data.BindingMode.TwoWay) End Sub


- Drag Query KelasSiswas kedalam screen designer.

- Lalu pada properties, ganti Control Type menjadi Custom Control, pada Custom

Control ganti menjadi ComboBox dan terakhir Name menjadi KelasSiswa.


- Lalu pada Method _Activated, ketikkan sintaks berikut.

Private Sub CreateNewMyMahasiswa_Activated() ' Write your code here. Dim comboControl As IContentItemProxy = Me.FindControl("KelasSiswa") comboControl.SetBinding( System.Windows.Controls.ComboBox.ItemsSourceProperty,"Screen.KelasSiswas", Windows.Data.BindingMode.TwoWay) comboControl.SetBinding( System.Windows.Controls.ComboBox.SelectedItemProperty, "Screen.MahasiswaProperty.KelasSiswa", Windows.Data.BindingMode.TwoWay) End Sub

Dim comboControl As IContentItemProxy = Me.FindControl("KelasSiswa")

System.Windows.Controls.ComboBox.ItemsSourceProperty,"Screen.KelasSiswas",


- Dan jalankan program, maka akan mendapatkan hasil seperti dibawah.

B. Extension

Extension bisa kita dapatkan dari third party vendor, LightSwitch Community maupun di

develop sendiri (in house). Beberapa extension yang dapat kita download ada yang berjenis

free dan berbayar. Terdapat dua jenis untuk extension berbayar, yang pertama menggunakan

free trial dan kedua kita harus membeli terlebih dahulu baru bisa menggunakan produk

tersebut.

Untuk mendapatkan extension kita dapat mengunjungi web site Visual Studio Galery

(http://visualstudiogallery.msdn.microsoft.com/site/search) pada site tersebut merupakan

sebuah web site khusus untuk Visual Studio Extension termasuk LightSwitch didalam nya.

http://visualstudiogallery.msdn.microsoft.com/site/search


Extension Manager

Extension Manager merupakan sebuah tool (Tools > Extension Manager) pada Visual

Studio untuk mengakses extension pada Visual Studio Galery tanpa harus menggunakan

browser. Pada Extension Manager kita dapat melihat extension-extension apa saja yang

telah di install sebelumnya , melakukan disable dan uninstall extension.


Terdapat dua cara untuk mengakses Extension Manager.

1. LightSwitch Properties Screen

Kita dapat mengakses Extension Manager via Extension tab pada project properties.

- Klik Project > Nama Project Properties

- Klik Tab Extensions

- Klik link Browse for more extension online

- Dan Extension Manager akan tampil

2. Visual Studio Tools Menu

- Klik Menu Tools

- Lalu klik Extension Manager

- Dan Extension Manager akan tampil


Setelah Extension Manager tampil, sekarang saatnya kita menggunakan dari tool tersebut.

a) Klik Online Galery

b) Maka akan tampil extension yang tersedia pada online gallery, extension yang tampil

bukan hanya untuk LightSwitch .

c) Ketikkan LightSwitch pada textbox Search

d) Selanjutnya LightSwitch extension akan tampil.

Menginstall Extension

Untuk menginstal LightSwitch extension juga dapat dilakukan dengan berbagai cara

antara lain.

Melalui Visual Studio Extension Manager

- Pilih extension yang akan diinstall, dan klik download button


- Selanjutnya proses download akan berjalan

- Setelah selesai proses download, maka anak tampil sebuah dialog untuk

menginstall extension tersebut.

- Dan restart Visual Studio LightSwitch

Double Click VSIX file

- Download terlebih dahulu extension yang akan di install pada Visual Studio

Galery Web Site. Dan klik button download.


- Klik button save untuk menyimpang file VSIX

- Setelah selesai mendownload, klik ganda file yang baru saja didownload.

- Lalu klik button Install pada jendela Visual Studio Extension Installer


Mengaktifkan Extension pada LightSwitch Project

Setelah menginstall extension, langkah selanjutnya adalah mengaktifkan extension

tersebut pada project yang kita buat. Buka project properties dan Extensions Tab dan

akan terdapat extension-extension yang telah di install untuk LightSwitch. Lalu pada

kolom Use in new projects, aktifkan check box untuk extension yang akan di gunakan.

Contoh-contoh extension pada LightSwitch

1) Theme

Pada LightSwitch kita dapat mengganti Theme dari pada aplikasi dengan

menggunakan extension. Setelah menginstall theme extension dan mengaktifkannya


seperti cara diatas, selanjutnya pada Tab General Properties (Project Properties),

pilih Theme pada dropdown. Lalu jalankan program maka theme pada aplikasi akan

berubah sesuai dengan theme yang kita pilih.

2) Luminos LightSwitch Command

Extension ini berfungsi untuk menambah 3 buah Command pada aplikasi yaitu :

- Close (Cancel): Menutup screen dengan tidak menyimpan datanya terlebih

dahulu.


- Close (Save) : Menutup screen dengan menyimpan datanya terlebih dahulu

- Exit : Menutup aplikasi

3) Webcam Extension

Merupakan extension yang dapat di integrasikan dengan webcam pada PC maupun

laptop.

Masih banyak lagi extension-extension yang dapat membantu kita dalam membangun sebuah

aplikasi menggunakan LightSwitch , seperti yang telah di utarakan diatas.


BAB IV

REPORTING

Report/Laporan merupakan suatu bagian yang sangat penting dalam suatu aplikasi. Bagian yang

merupakan output dari suatu pengolahan data yang biasanya di gunakan untuk mengambil

sebuah keputusan oleh tingkat manajemen. Oleh karena itu aplikasi yang baik harus selalu

terdapat fitur reporting yang lengkap dan memudahkan pengguna untuk mendapatkannya.

Membuat Report Dengan Menggunakan ASP.NET

Untuk membuat report dengan menggunakan asp.net adalah dengan membuat page (.aspx)

dimana page tersebut yang akan menampilkan data-data sebagai report/laporan yang

diinginkan. Untuk itu kita memerlukan sebuah asp.net project, selanjutnya ikuti langkah-

langkah dibawah ini.

- Tambahkan sebuah Asp.Net project pada solution

- Pada jendela Add New Web Site pilih “ASP.NET Web Site” dan klik OK.


Selanjutnya kita akan memiliki 2 buah project dalam 1 Solution, seperti pada gambar

diatas.

- Tambahkan sebuah Page (Web Form) pada Asp.Net project, dengan nama

“ReportPage.aspx”.


- Tambahkan sebuah control “SqlDataSource” pada ReportPage.aspx, lalu lakukan

configure Data Source

- Setelah kita klik link “Configure Data Source” pada SqlDataSource seperti pada gambar

diatas, maka selanjutnya akan tampil sebuah jendela Configure Data Source. Lalu klik

New Connection button untuk melakukan konfigurasi ke LightSwitch database.


- Masukkan Server name, untuk Log on to the server pilih “Use Windows Authentication”

dan selanjutnya untuk “Connect to a database name”, pilih” Attach a database file”. Dan

cari ApplicationDatabase.mdf pada \Bin\Data folder dan ketikkan “Logical name”. Lalu

klik “Test Connection” dan OK button.

- Klik Next Button


- Pada jendela ini kita bisa memilih apakah configurasi ke database yang telah kita lakukan

sebelumnya disimpan kedalam ConfigurationFile. Lalu klik Next Button

- Selanjutnya pilih “Specify columns from a table or view”, dan pilih nama table atau view

pada pada DropDown. Lalu pilih field-field yang diinginkan.


- Klik button Where, dan akan tampil form seperti dibawah, lalu pilih Column yang akan

dijadikan field untuk pencarian, lalu pilih operator dan jenis dari Source. Untuk contoh

kali ini kita akan menggunakan “QueryString”. Ketikkan QueryString field dan klik

button Add dan selanjutnya OK.

- Untuk mengtahui hasil dari query bisa di lakukan dengan meng-klik button Test Query”,

selanjutnya klik button Finish.


- Pada ReportPage.aspx, drag dan drop control GridView kedalam page, selanjutnya pilih

SqlDataSource1 untuk data DataSourceID properties

- Selanjutnya pada Asp.Net project properties ganti “Use dynamic ports” menjadi “False”.


- Selanjutnya jalankan program, dengan ReportPage.aspx sebagai Start Page dan tambah

kan url menjadi http://localhost:8730/MyReporting/ReportPage.aspx?nim=1

Setelah berhasil membuat asp.net page seperti diatas, langkah selanjutnya adalah memanggil

page yang kita buat diatas melalui screen pada LightSwitch .

http://localhost:8730/MyReporting/ReportPage.aspx?nim=1


- Buat sebuah screen untuk table mahasiswa dengan jenis template “Editable Grid Screen”.

- Selanjutnya untuk field Nim, ganti control nya menjadi Custom Control

(HypelinkButton)


- Dan buat sebuah property dengan nama “HyperlinkTarget” dan Type String


- Dan ketikkan sintaks seperti dibawah ini.

- Jalankan Program, makan akan mendapatkan hasil seperti gambar dibawah.

Imports System.Windows.Data Imports System.Windows.Controls

Private Sub ScreenEditMahasiswa_Activated() Dim control = Me.FindControl("Nim") HyperlinkTarget = "_blank" Dim converter As New String2UriConverter() control.SetBinding(HyperlinkButton.ContentProperty, "Value", BindingMode.OneWay) control.SetBinding(HyperlinkButton.NavigateUriProperty, _ "Details.Entity.Nim", converter, BindingMode.OneWay) control.SetBinding(HyperlinkButton.TargetNameProperty, _ "Screen.HyperlinkTarget ", BindingMode.OneWay) End Sub End Class Public Class String2UriConverter Implements IValueConverter Public Function Convert(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert If Not value Is Nothing Then

Return New Uri("http://localhost:4767/WebReport/ReportPage.aspx?nim=" & value.ToString)

Else Return New Uri("http://localhost:4767/WebReport/ReportPage.aspx?nim=") End If End Function Public Function ConvertBack(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack Throw New NotImplementedException End Function End Class



BAB V

DEPLOY APLIKASI

Pada bagian terakhir ini akan di jelaskan bagaimana melakukan deployment sebuah

aplikasi LightSwitch . Seperti yang kita ketahui pada LightSwitch kita dapat membuat aplikasi

desktop maupun web hanya dengan mengganti pilihan pada project properties pada aplikasi.

Dan kita dapat men-deploy aplikasi tersebut dengan menggunakan model 2 atau 3 tier.

Yang perlu di perhatikan dalam memilih model dari aplikasi, untuk desktop kita dapat

men-deploy dengan menggunakan 2 atau 3 tier aplikasi, sedangkan untuk web aplikasi harus

menggunakan 3 tier aplikasi. Jika kita memilih untuk menggunakan 3 tier aplikasi, kita

membutuhkan sebuah web server dan IIS Manager didalam server. Sedangkan untuk 2 tier

aplikasi kita tidak membutuhkan IIS dalam mendeploy aplikasi.

Untuk lebih mengerti bagaimana cara melakukan deploying sebuah aplikasi pada

LightSwitch , ikuti langkah-langkah dibawah ini.


1. Klik Build > Publish pada menu

2. Selanjutnya akan tampil sebuah wizard, dimana pada jendela tersebut terdapat 2 pilihan jenis

aplikasi yang akan di deploy. Pilih salah satu apakah desktop atau web.

3. Lalu pilih dimana aplikasi akan di tempatkan, disini terdapat 3 pilihan local, IIS server dan

Windows Azure.


4. Pilih “Publish directly to the database now” dan browse dimana aplikasi akan disimpan.


5. Selanjutnya masuk kebagian Database Connections, dimana secara default akan terdapat dua

buah connection.

Agar dapat melihat jenis connection secara detail, kita dapat klik button (…), sehingga akan

tampil sebuah jendela seperti berikut.


6. Kita dapat memilih program apa saja yang di butuhkan agar aplikasi yang kita buat dapat

berjalan dengan baik. Dan dimana untuk mendapatkan program-program yang di butuhkan

tersebut.

7. Cari certificate jika ingin menggunakan nya (optional)


8. Klik button Publish untuk mengakhiri proses dari deployment ini.

Setelah kita berhasil mendeploy aplikasi, langkah selanjutnya adalah bagaimana cara untuk

melakukan instalasi dari hasil deployment. Berikut adalah cara-cara untuk menginstall aplikasi

LightSwitch sesuai dengan Topology dan jenis aplikasinya.

A. 2 Tier Desktop Aplikasi

Berikut merupakan langkah-langkah yang harus di ikuti :

- Mengganti koneksi string untuk database

Pada folder “Application Files”, dengan menggunakan notepad, buka web.config file

ganti nama server, sesuai dengan nama server dimana aplikasi akan di install.

<connectionStrings> <add name="_IntrinsicData" connectionString="Data Source=NamaServer\SQLEXPRESS;

Initial Catalog=LightSwitch eBook;Integrated Security=True;Pooling=True;Connect Timeout=30;User Instance=False" />

</connectionStrings>


- Menginstall Aplikasi

Klik ganda file setup.exe pada folder Publish, dan klik button Install untuk menginstall

aplikasi. Seperti pada aplikasi-aplikasi desktop pada umumnya, maka aplikasi

LightSwitch yang kita install juga akan terdapat pada Start Menu dan Program and

Features.


B. 3 Tier Aplikasi Dekstop

Sebelum kita masuk bagaimana cara untuk menginstal aplikasi dengan topology 3 tier, disini

akan dijelaskan cara untuk mendeploy aplikasi untuk topology tersebut. Ikuti langkah-

langkah dibawah ini.

1. Pada Publish Application Wizard, pilih Desktop untuk jenis aplikasi lalu klik Next

Button.

2. Selanjutnya pilih IIS Server untuk jenis dari topology aplikasi


3. Pada Publish Output dialog, pilih “Remotly publish to a server now”. Pada service URL

ketikkan http://NamaServer dan Site/Application ketikkan nama aplikasi

4. Selanjutnya adalah melakukan setting untuk koneksi ke database

http://namaserver/


5. Pilih certificate jika di perlukan


6. Klik publish untuk mendeploy aplikasi

Setelah selesai mendeploy aplikasi seperti diatas, langkah selanjutnya adalah menginstal

aplikasi tersebut ke server. Pastikan di server terdapat IIS dan berjalan dengan baik. Untuk

mengujinya, ketikkan pada browser http://namaserver maka akan tampil web seperti gambar

dibawah

Sekarang saat nya untuk menginstal aplikasi yang telah kita deploy seperti diatas.

Pada browser ketikkan http://NamaServer/NamaAplikasi

http://namaserver/

http://namaserver/NamaAplikasi


Klik button Install, maka secara otomatis aplikasi kita akan terinstall termasuk dengan

database yang telah kita set seperti diatas.

C. 3 Tier Web Aplikasi

Untuk web aplikasi langkah-langkah bisa dilakukan sama seperti diatas atau dengan

menggunakan Import Application pada IIS Manager. Untuk melakukan hal tersebut, pada

saat melakukan publish tepatnya pada langkah “Project Output”, pilih “Create a package on a

disk”. Lalu pada folder Publish, akan terdapat sebuah file dengan extensi .zip, file tersebut

yang nanti nya akan di gunakan untuk di import pada IIS manager.