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
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
2 will code with lightswitch
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]
3 will code with lightswitch
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
4 will code with lightswitch
b. Selanjutnya akan tampil sebuah jendela dialog Attach Data Source Wizard, pilih
Database dan klik button (tombol) Next.
1
2
5 will code with lightswitch
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
6 will code with lightswitch
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
7 will code with lightswitch
- WCF RIA Service
Lakukan langkah pertama seperti pada Database (MS SQL Server), lalu pilih WCF Ria
Service dan klik Next.
a. Klik Add Reference
8 will code with lightswitch
b. Pilih project WCF Service, yang di inginkan, dan klik OK
c. WCF Ria Service akan tampil, lalu klik Next
9 will code with lightswitch
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
10 will code with lightswitch
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.
11 will code with lightswitch
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)
12 will code with lightswitch
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
13 will code with lightswitch
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.
14 will code with lightswitch
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
15 will code with lightswitch
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
16 will code with lightswitch
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)
17 will code with lightswitch
- 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
18 will code with lightswitch
- 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
19 will code with lightswitch
- 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
20 will code with lightswitch
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
21 will code with lightswitch
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
22 will code with lightswitch
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)
23 will code with lightswitch
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
24 will code with lightswitch
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
25 will code with lightswitch
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
26 will code with lightswitch
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.
27 will code with lightswitch
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
28 will code with lightswitch
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
29 will code with lightswitch
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.
30 will code with lightswitch
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
31 will code with lightswitch
Lalu pada filter Klik Drop-Down dari Comparison Value, dan pilih
IdSatuan.
Sehingga tampilan dari Query Designer nya seperti gambar dibawah.
32 will code with lightswitch
Tambahkan sebuah Screen dengan template nya ”Search Data Screen”,
Screen Name adalah “SearchBarangBySatuan” dan Screen Data nya
”BarangBySatuan”.
Selanjutnya pada Screen Designer, delete tblBarangIdSatuan
33 will code with lightswitch
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
34 will code with lightswitch
Selanjutnya klik Satuan, lalu ganti Horizontal Alignment menjadi Left dan
MinWidth menjadi “150”
5) Comparison Value
Nilai yang di gunakan untuk menfilter data.
35 will code with lightswitch
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
36 will code with lightswitch
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.
37 will code with lightswitch
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
38 will code with lightswitch
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
39 will code with lightswitch
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.
40 will code with lightswitch
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.
41 will code with lightswitch
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.
42 will code with lightswitch
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”.
43 will code with lightswitch
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
44 will code with lightswitch
- 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
45 will code with lightswitch
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
46 will code with lightswitch
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 .
47 will code with 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
48 will code with lightswitch
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
49 will code with lightswitch
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.
50 will code with lightswitch
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.
51 will code with lightswitch
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
52 will code with lightswitch
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.
53 will code with lightswitch
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
54 will code with lightswitch
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
55 will code with lightswitch
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.
56 will code with lightswitch
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.
57 will code with lightswitch
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.
58 will code with lightswitch
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
59 will code with lightswitch
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
60 will code with lightswitch
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
61 will code with lightswitch
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
62 will code with lightswitch
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
63 will code with lightswitch
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
64 will code with lightswitch
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
65 will code with lightswitch
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
66 will code with lightswitch
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"
67 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.
68 will code with lightswitch
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.
69 will code with lightswitch
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")
70 will code with lightswitch
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.
71 will code with lightswitch
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
72 will code with lightswitch
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.
73 will code with lightswitch
o Lalu drag KelasProperty dan drop di Content Tree seperti gambar dibawah.
o Ubah Parameter Binding untuk KelasIdParam menjadi KelasProperty.Id
74 will code with lightswitch
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
75 will code with lightswitch
- 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
76 will code with lightswitch
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
77 will code with lightswitch
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
78 will code with lightswitch
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
79 will code with lightswitch
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.
80 will code with lightswitch
81 will code with lightswitch
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.
82 will code with lightswitch
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.
83 will code with lightswitch
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
84 will code with lightswitch
- 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.
85 will code with lightswitch
- 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",
86 will code with lightswitch
- 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.
87 will code with lightswitch
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.
88 will code with lightswitch
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
89 will code with lightswitch
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
90 will code with lightswitch
- 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.
91 will code with lightswitch
- 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
92 will code with lightswitch
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
93 will code with lightswitch
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.
94 will code with lightswitch
- 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.
95 will code with lightswitch
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.
96 will code with lightswitch
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”.
97 will code with lightswitch
- 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.
98 will code with lightswitch
- 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
99 will code with lightswitch
- 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.
100 will code with lightswitch
- 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.
101 will code with lightswitch
- 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”.
102 will code with lightswitch
- 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 .
103 will code with lightswitch
- Buat sebuah screen untuk table mahasiswa dengan jenis template “Editable Grid Screen”.
- Selanjutnya untuk field Nim, ganti control nya menjadi Custom Control
(HypelinkButton)
104 will code with lightswitch
- Dan buat sebuah property dengan nama “HyperlinkTarget” dan Type String
105 will code with lightswitch
- 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
106 will code with lightswitch
107 will code with lightswitch
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.
108 will code with lightswitch
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.
109 will code with lightswitch
4. Pilih “Publish directly to the database now” dan browse dimana aplikasi akan disimpan.
110 will code with lightswitch
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.
111 will code with lightswitch
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)
112 will code with lightswitch
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>
113 will code with lightswitch
- 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.
114 will code with lightswitch
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
115 will code with lightswitch
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
116 will code with lightswitch
5. Pilih certificate jika di perlukan
117 will code with lightswitch
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
118 will code with lightswitch
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.
Top Related