BAB I

Pengenalan

Microsoft Visual Studio LightSwitch

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. Dan pada ebook ini akan

dibahas bagaimana membuat aplikasi dengan menggunakan LightSwitch.

A. LightSwitch Development Environment

Sebelum kita memulai, terlebih dahulu kita membahas IDE pada tool ini satu persatu.

1. Start Page : sesuai dengan nama nya Start Page merupakan tampilan awal pada

saat kita membuka LightSwitch.

2. LightSwitch Designer : Ini akan tampil pada saat kita membuat sebuah project.

Disitu terdapat link untuk membuat table baru ataupun konek ke Database yang

sudah ada.

3. Solution Explorer : Berisi seluruh item dalam sebuah project, missal nya Data

Source maupun Screen.

4. Data Designer : juga dikenal dengan Table Designer, dimana dari sini kita dapat

menambah, menghapus dan mengubah field pada table.

5. Screen Designer : Seperti hal nya Data Designer, Screen Designer merupakan

tempat untuk mengatur antara muka dari Screen

6. Query Designer : Dimana tempat untuk membuat query yang berfungsi untuk

memfilter dan sorting data pada aplikasi.

7. Properties Window : Dimana kita dapat men-setting properties dari item yang

aktif pada designer.

8. Code Editor : Sesuai dengan namanya, di gunakan untuk menulis code pada

aplikasi yang di buat.

9. Application Designer : Untuk mengatur aplikasi seperti Screen Navigation Access

Control dan Application Type.

B. Bekerja Dengan LightSwitch

Setelah selesai membahas mengenai LightSwitch Environment , selanjutnya akan kita

bahas, penggunaan LightSwitch lebih lanjut, seperti membuat Project, table, Screen,

Query, Struktur Menu dan lain-lain.

1. Membuat Project

- Dari Start menu klik Microsoft Visual Studio LightSwitch

- Setelah LightSwitch designer muncul, klik File dan klik New Project.

- Maka akan muncul dialog New Project, pada Installed Templates pilih node

LightSwitch.

- Selanjutnya pilih LightSwitch Application (VB) atau C#

2. Membuat Table

Setelah membuat project, tahap selanjutnya adalah membuat table. Ikuti langkah-

langkah berikut.

- Pada Application Designer, klik “Create new table”, maka Data Designer akan

muncul.

- Lalu pada jendela properties, pilih Property Name dan ketikkan “Anggota”

lalu enter. Coba perhatikan Title akan berubah menjadi Anggota dan pada

Solution Explorer menjadi “Anggotas”

- Pada kolom Name klik <Add Property> lalu ketikkan “Nama” dan tekan

enter. Untuk Data Type yang tepat adalah String pada kolom Type, dan

Required field nya aktif, maksudnya adalah untuk setiap field yang pada

kolom Required nya aktif maka tidak boleh kosong, tapi harus memiliki nilai.

- Klik <Add Property> pada kolom Name dan ketikkan ”Alamat”.

- Klik <Add Property> pada kolom Name dan ketikkan ”Phone”. Pada kolom

Type pilih ”Phone Number” pada drop-down list. Phone Number adalah

Custom Business Type dimana kita bisa membuat format telephone yang kita

inginkan.

- Klik <Add Property> pada kolom Name dan ketikkan ”Email”. Pada kolom

Type pilih ”Email Address” pada drop-down list. Ini merupakan Custom

Business Type yang lain untuk format alamat email yang benar. Dan pada

kolom Required tidak aktif artinya pada field ini email boleh saja tidak di isi

atau kosong.

Berikut merupakan tipe data yang terdapat pada LightSwitch

Type VB Type C# Type Range

Binary Byte() byte[] -128 to 127

Boolean Boolean boolean True / False

Date DateTime DateTime

DateTime DateTime DateTime 12:00:00 AM, Jan 1, 0001 -

11:59:59 PM, Dec 31, 9999

Decimal Decimal decimal ±1.0 × 10⁻²⁸ -

±7.9 × 10²⁸

Double Double double ±5.0e−324 to ±1.7e308

Email

Address

String string

Image Byte() Byte[]

Short

Integer

Short short -32,768 to 32,767

Integer Integer int -2147483647 - 2147483647

Long

Integer

Long long -9,223,372,036,854,775,808 -

9,223,372,036,854,775,807

Money Decimal decimal

Phone

Number

String string

String String string

Koneksi ke external database

Selain menggunakan Internal Database, kita bisa juga melakukan koneksi ke

external seperti ke SQL Server database, Sharepoint atau pun Windows

Communication Foundation (WCF) Rich Internet Application (RIA) service.

Dibawah ini contoh bagaimana melakukan koneksi ke SQL Server Database. Ikuti

langkah-langkah dibawah ini.

- Pada Solution Explorer, klik Node Data Source

- Lalu pada Project Menu, klik Data Source. Maka tampilan Attach Data Source

Wizard akan tampil

- Pada pilihan tipe Data Source (Choose a Data Source Type), pilih Database

dan klik Next.

- Pada Connection Properties, Masukkan Server Name. Selanjutnya pilih jenis

login ke server. Dan pilih nama database. Dan klik OK.

- Selanjutnya akan tampil list dari Database Object. Buka Node Table dan pilih

Employees(dbo), lalu klik Finish.

- Lalu pada project kita akan bertambah sebuah Data Source seperti gambar

dibawah.

3. Membuat Screen

Setelah selesai dengan membuat Table, pembahasan selanjutnya adalah

bagaimana membuat screen pada LightSwitch. Ikuti langkah-langkah dibawah ini.

- Pada Solution Explorer klik Node Screen, lalu pada Project Menu pilih Add

Screen, maka tampilan “Add New Screen” tampil seperti dibawah.

- Lalu pada “Select a Screen Tempate” Pili List and Details Screen.

- Pada Screen Name ketikkan DaftarDetailAnggota

- Dan pada drop-down-list Screen Data pilih Anggota. Maka Screen Designer

akan tampil, seperti gambar dibawah.

- Jalankan program dengan menekan F5

Bagaimana sangat mudah bukan???

Tapi alangkah bagusnya kita juga membahas lebih dalam mengenai screen.

- Screen Template

Pada LightSwitch terdapat 5 template screen sebagai berikut.

1. 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.

2. 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.

3. List and Details 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.

4. 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.

5. 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.

- Screen Designer

Screen Designer terdiri dari screen member list (1), command bar (2) dan

screen content tree (3).

- Membuat Query

Sebelum kita membahas bagaimana membuat query, terlebih dahulu adalah

mengetahui kegunaan dari Query. Dengan menggunakan query kita bisa mem-

filter maupun sorting data sesuai yang kita inginkan. Sebagai contoh jika kita

ingin mengetahui berapa banyak anggota yang tempat tanggal lahir nya di

Batam. Dan untuk lebih mengerti, mari kita buat query sederhana seperti

dibawah. Sebagai contoh kita akan membuat query dengan Query Designer.

1

2

3

Pada Solution Explorer, expand node Data Source, lalu klik ganda pada

table (Anggota)

Lalu pada command bar klik Query, maka Query Designer akan tampil.

Selanjutnya menambahkan Filter Condition Expand Filter.

Lalu klik Add Filter, pada drop-down list pertama pilih ”Where”,

selanjutnya ”TempatLahir” dan lanjutkan seperti gambar dibawah.

Keterangan:

1. Kondisi atau Boolean Operator

2. Property (Field)

3. Operator

4. Tipe dari pembanding

5. Nilai dari pembanding

1 2 3 4 5

Langkah selanjutnya adalah menggunakan Query pada Screen. Tambah

screen dengan Template nya adalah Search Data Screen. Screen Name =

CariAnggota dan Screen Data nya pilih Query1. lalu klik OK.

Jalankan program dengan menekan F5. Maka screen akan menampilkan

data anggota yang tempat lahir nya di kota Batam, seperti gambar

dibawah.

4. Mengubah tampilan screen pada saat program dijalankan

Salah satu kelebihan dari LightSwitch adalah dapat merubah tampilan pada saat

program di jalankan. Seperti kita ketahui untuk tool yang lain, jika kita ingin

mengubah tampilan seperti title dari label, posisi maka kita harus mematikan

program terlebih dahulu. Hal itu tidak perlu di lakukan di LightSwitch, sehingga

kita dapat menghemat waktu dalam pengerjaan program. Hal ini di karenakan

pada LightSwitch terdapat Customization Mode, untuk mengaktifkannya klik

button Design Screen yang berada pada top screen.

Berikut merupakan beberapa hal yang dapat di ubah pada saat Customization

Mode.

- Menambah Group

Kita dapat menambah group dengan cara, pada Screen Content Tree. Pilih

Node yang akan kita tambah group nya. Selanjutnya Add Group Button

. Dan tambahkan item yang dinginkan.

- Merubah Layout pada Group

- Menambah Button

- Remove Items

- Mengubah Caption Item

- Mengganti label position dari item.

- Show dan Hide item

- Mengganti tipe dari control pada item

5. Screen Navigation

Screen Navigation ini terdapat pada Project Properties, yang berfungsi untuk

mengatur navigasi dari screen. Dengan menggunakan fungsi ini kita dapat

mengelompokkan Screen sesuai dengan kebutuhan kita. Sebagai contoh kita ingin

mengelompokkan Screen pencarian, maka kita tinggal membuat group pada

Screen Navigation. Setelah membuka Properties dari Project, klik tab Screen

Navigation.

Untuk menambahkan Group baru klik Add Group dan ketikkan nama yang group

yang di inginkan. Dan kita juga dapat merubah posisi dari screen maupun juga

group. Dengan menggunakan button Up / Down disamping, dan dari sini juga kita

dapat mengganti startup screen pada aplikasi yang kita buat. Dengan cara klik

Screen yang di inginkan dan klik button Set. Sedangkan button clear berfungsi

untuk menghilangkan startup screen, sehingga tidak ada satu form pun yang akan

tampil pada saat aplikasi di buka.

6. Application Type

Fitur ini merupakan hal yang menurut saya sangat membantu dan luar biasa.

Kenapa saya katakan seperti itu, karena untuk mengubah suatu aplikasi dari

Desktop ke Web atau sebaliknya tidak di butuhkan sedikit code, hanya tinggal

memilih tipe dari aplikasi yang di inginkan, dengan cara pada properties project,

pilih tab Application Type.

7. Validasi Data

Dengan LightSwitch kita dapat menggunakan validasi data terhadap entity, untuk

memastikan agar format data yang dimasukkan benar dan sesuai dengan type dan

kebutuhan nya. Jika kita memasukkan data yang tidak valid maka akan muncul

pesan error sebelum kita menyimpan data tersebut.

Kita dapat membuat Validasi data tanpa melakukan code sedikitpun, sebagai

contoh kita akan memvalidasi data untuk property ”TglLahir‟ pada aplikasi yang

kita buat. Lalu isikan nilai dari minimum value nya ”1/1/1900”, jadi jika

pengguna memasukkan nilai lebih kecil dari tanggal tersebut maka pesan error

akan muncul.

Sedangkan untuk property dengan type Email Address validasi sudah otomatis di

lakukan dengan mengecek format dari email address.

Lalu untuk property dengan type Phone Number, kita dapat memasukkan

berbagai macam jenis format kedalam Jendela Phone Number Format. Sehingga

jika pengguna memasukkan phone number yang tidak sesuai dengan format yang

telah kita tentukan maka pesan error pun akan muncul.

Custom Validasi

Pada pembahasan validasi diatas di buat tanpa melakukan coding sedikit pun dan

tentu hasil yang didapat, mungkin bagi sebagian orang tidak memuaskan ataupun

belum lengkap. Atau pesan error dan validasi yang di inginkan belum tersedia.

Disini kita akan membahas bagaimana membuat custom validasi untuk aplikasi

yang kita buat. Sebagai ilustrasi kita telah memiliki beberapa field di dalam tabel

dan salah satunya ada field bernama TglLahir. Dan kita akan membuat validasi

untuk field ini, salah satunya tanggal lahir tidak boleh lebih besar dari hari ini.

Maka langkah-langkah yang harus kita lakukan adalah sebagai berikut :

- Buka table dengan cara klik ganda

- Klik field yang akan di validasi, disini sebagai contoh TglLahir

- Klik Custom Validation pada properties, dan Code Editor pun akan terbuka

dengan men-generate sebuah method dari field yang dipilih.

- Dan ketikkan sintaks berikut

- Jalankan Program dengan menekan F5

If Me.TglLahir > DateTime.Today Then results.AddPropertyError _ ("Tanggal lahir tidak boleh lebih besar dari hari ini") End If

BAB II

Studi Kasus

(Perancangan Database)

Setelah pada bab sebelumnya kita telah membahas, lightswitch dari membuat project,

table, screen sampai dengan validasi property/field. Seperti kata pepatah “ala bisa karena

biasa”. Agar pembahasan pada bab sebelumnya tidak menjadi sia-sia atau hanya sekedar

teori, maka pada bab ini penulis akan membahas bagaimana membuat aplikasi dengan

LightSwitch. Sehingga ulasan-ulasan pada bab sebelumnya dapat di implementasikan

langsung oleh para pembaca.

Studi kasus yang di ambil adalah membuat aplikasi perpustakaan. aplikasi ini berfungsi

untuk membantu perpustakaan dalam memanage data-data buku, anggota dan tranksaksi

peminjaman. Seperti kita ketahui dengan semakin besarnya sebuah perpustakaan maka

koleksi dari buku yang ada pun juga bertambah. Hal ini akan Sangat menyulitkan jika

masih di kerjakan secara manual. Diharapkan dengan membuat aplikasi ini akan lebih

membantu dalam memahami LightSwitch.

Sebelumnya kita akan merancang proses-proses yang di butuhkan dalam membuat

aplikasi ini.

1. Proses penyimpanan data buku

- Pengguna dapat mengetahui apakah buku tersedia atau di pinjam

- Posisi buku berada. Di asumsikan penyimpanan buku menggunakan rak buku

2. Proses Keanggotaan Perpustakaan (Di asumsikan hanya anggota yang boleh

meminjam buku)

- Registrasi anggota

3. Peminjaman Buku

- Peminjaman buku : Peminjaman gratis dan dalam satu kali peminjaman maksimal

3 buku oleh setiap anggota

- Pemulangan buku : Jika pemulangan buku telat dari masa yang di tentukan maka

akan di kenakan denda perhari sesuai dengan category buku.

Dari Story card diatas, kita dapat mendesain table-tabel yang di butuhkan serta relasi

antar table dalam aplikasi ini.

1. Table Rak = di gunakan untuk menyimpan data rak buku yang ada pada

perpustakaan

2. Table Category = untuk pembagian category buku (komik, fiksi, cerpen dan lain-

lain)

3. Table Buku = di gunakan untuk menyimpan data buku yang tersedia di

perpustakaan.

4. Table Anggota = di gunakan untuk menyimpan data keanggotaan perpustakaan

5. Table Pinjam Master = di gunakan untuk menyimpan data peminjaman

6. Table Pinjam Detail = di gunakan untuk menyimpan data peminjaman per item

Pembuatan Table dan Relasi antar table

A. Table Rak

1. Buka Visual Studio LightSwitch 2011

2. Create New Project, ganti nama project menjadi Pustaka

3. Lalu klik kanan Data Source>Add Table pada Solution Explorer. Maka akan

muncul tampilan seperti dibawah

4. Ganti teks “TableItem” menjadi “Rak”

5. Dan tambahkan 2 buah field sebagai berikut :

Name Type Size Required

NoRak String 4 Yes

NamaRak String 50 Yes

6. Sehingga mendapatkan hasil seperti gambar dibawah

B. Table Category

1. Tambahkan Sebuah table dengan nama “Category”, dengan field-field

sebagai berikut :

Name Type Size Required

NamaCategory String 20 Yes

Durasi Integer Yes

Denda Money

2. Kita akan membuat validasi dari field Durasi, validasi yang dilakukan

adalah dengan membatasi nilai Minimum dan Maksimum.

- Klik field Durasi pada table Category

- Lalu pada properties (tekan F4 untuk menampilkan properties)

- Pada textbox Minimum Value ganti menjadi 1 dan Maximum Value

ganti menjadi 10. Hal ini di maksudkan agar kita membatasi dari nilai

durasi peminjaman buku. Yaitu minimum durasi 1 hari dan maksimum

10 hari untuk setiap category buku. Sehingga jika pengguna

memasukkan nilai kurang dari 1 ataupun lebih dari 10 maka akan

muncul pesan error.

3. Sedangkan untuk denda minimum value nya adalah 0 dan tidak memiliki

Maximum Value (kosongkan Textbox Maximum Value).

4. Tampilan Table Category seperti dibawah.

C. Table Buku dan Relasi

Sebelum kita membuat table Buku, mari kita kilas balik Story Card diatas tentang

buku. Bahwa Buku pada perpustakaan di simpan pada Rak dan terdapat category

untuk masing-masing buku. Jadi dari cerita diatas, dapat di ambil kesimpulan

bahwa Buku memiliki relasi dengan Rak dan Category.

Ikuti langkah-langkah berikut untuk membuat table Buku

1. Tambahkan sebuah table dengan nama Buku, dengan memiliki field-field

sebagai berikut.

Name Type Size Required

ISBN String 15 Yes

TitleBuku String 100 Yes

Pengarang String 255

Penerbit String 100

TglTerbit Date

TglMasuk Date

Sinopsis String 500

Photo Image

Status Boolean

2. Maka kita akan mendapatkan hasil seperti gambar dibawah.

3. Selanjutnya kita akan membuat Relasi antara Table Buku dan Rak, juga Relasi

Table Buku dan Category. Ikuti langkah-langkahnya sebagai berikut.

- Pada Data Designer, klik Relationships pada Command Bar atau dengan

menekan Ctrl+Shift+R

- Maka dialog box ”Add New Relationships” akan tampil seperti gambar

dibawah.

- Pilih Table Category pada Baris “Name” dan Kolom “To”

- Sehingga seperti gambar dibawah dan klik OK

- Lakukan hal yang sama untuk membuat Relasi antara Table Buku dan

Rak.

- Dan kita akan mendapatkan Relasi antara table seperti gambar dibawah.

D. Table Anggota

Tambahkan sebuah table dengan nama Anggota, dengan memiliki field-field

sebagai berikut

Name Type Size Required

IDAnggota String 15 Yes

NamaAnggota String 50 Yes

Alamat String 255

Phone Phone Number

Email Email Address

TanggalJoin Date Yes

Photo Image

Active Boolean

Maka hasil pembuatan table seperti gambar dibawah

E. Table Master dan Detail

Buatlah dua buah table dengan field-field nya seperti dibawah.

Table MyMaster

Name Type Size Required

TglPinjam Date 50 Yes

Table MyDetail

Name Type Size Required

TglKembali Date

Biaya Money

Status Boolean Yes

Dan hasil dari pembuatan 2 buah table di atas adalah sebagai berikut.

Sebelum melanjutkan, kita balik lagi ke Story Card mengenai peminjaman Buku. Bahwa

peminjaman hanya dapat di lakukan oleh anggota dan hanya maksimal 3 buku pada

setiap kali transaksi Sehingga kita dapat menyimpulkan mengenai relasinya adalah Table

Master dan Table Anggota. Table Master Dan Table Detail dan terakhir adalah Table

Detail dan Table Buku. Buat relasi seperti yang telah di sebutkan. Sehingga mendapatkan

hasil relasi seperti gambar-gambar dibawah.

Berikut adalah gambar Relasi dari keseluruhan table.

BAB III

Pembuatan Screen

Setelah selasai membuat table-table beserta relationship, maka selanjutnya kita akan

masuk kedalam pembuatan Screen. Seperti yang telah di jelaskan sebelumnya, bahwa

LightSwitch dapat menggenerate Screen tanpa membutuhkan coding sedikitpun. Hal ini

akan sangat membantu bagi para Non Developer yang ingin membuat aplikasi bisnis.

A. Membuat Screen Master Rak

Ikuti langkah-langkah dibawah ini.

1. Pada Solution Explorer klik kanan Node Screen dan pilih Add Screen.

2. Maka tampilan Add New Screen akan tampil seperti gambar di bawah.

3. Lalu pilih “List and Details Screen” pada List Box Select a screen template.

4. Pada textbox Screen Name, ganti menjadi “ScreenMasterRak”

5. Dan pada Dropdown Screen Data, pilih Rak, dan klik OK.

6. Maka kita akan mendapati design Screen seperti gambar dibawah.

7. Lalu coba jalankan program dengan menekan F5.

o Mengubah tampilan Screen

Disini kita juga dapat mengubah tampilan Screen agar lebih berbeda. Sebagai

contoh untuk mengubah Display Name maupun layout dari Screen adalah sebagai

berikut :

a) Untuk mengubah Display Name, pada properties Screen ubah textbox Display

Name menjadi Screen Rak.

b) Sedangkan untuk mengubah layout, pada dropdown Control Type ubah ke

“Rows Layout”

c) Lalu jalankan Program dengan menekan F5. Maka tampilan akan berubah

seperti dibawah.

o Mengubah nilai Summary pada list (Screen Rak)

Seperti kita lihat pada gambar di atas, nilai yang tampil pada list (summary)

adalah nilai dari field RakNo, sebenarnya kita dapat mengganti nilai pada field

apa yang akan tampil ataupun gabungan dari dua buah field. Ikuti langkah-

langkah berikut.

1. Buka table Rak pada solution explorer (Raks > Open)

2. Lalu pada Data Designer, klik “Computed Property” (Ctrl+Shift+C), maka

pada table akan muncul sebuah field dengan nama Property1, ganti menjadi

“Summary”.

3. Lalu pada properties field Summary, klik link “Edit Method”, maka secara

otomatis sebuah method akan terbentuk. Dan ketikkan sintaks dibawah.

4. Sintaks ini berfungsi untuk menggabungkan nilai field NoRak dan NamaRak.

result = Me.NoRak & " - " & Me.NamaRak

5. Terakhir pada properties Table Rak (Raks), ganti pada Dropdown Summary

Property dari NoRak menjadi Summary. Dan jalankan program, seperti yang

kita lihat pada gambar dibawah nilai dari NoRak dan NamaRak di gabung

dengan tanda “-“ yang menjadi pemisah.

B. Membuat Screen Category

Selanjutnya adalah membuat Screen untuk memanipulasi data Category. Karena

fungsi dan kegunaannya hampir sama dengan Screen Rak maka untuk pembuatan

Screen ini, pembaca bisa mengikut langkah-langkah pada pembuatan Screen Rak.

Untuk hasil dari Screen ini dapat dilihat pada gambar dibawah.

C. Membuat Screen Anggota

I. Screen Create New Anggota

Untuk pengolahan data anggota perpustakaan, Screen yang pertama kali kita buat

adalah Screen untuk menambah data anggota. Ikuti langkah-langkah berikut :

1. Tambah Screen dengan cara sama seperti diatas.

2. Untuk Screen Template pilih New Data Screen sedangkan untuk Screen Data

pilih Anggota. Lalu klik OK.

3. Jalankan Program dan hasilnya dapat dilihat pada gambar dibawah.

Mengubah layout pada Screen Create New Anggota

Pada Bagian ini kita akan mengubah tampilan Screen seperti gambar dibawah.

Ikuti langkah-langkah dibawah ini.

a. Buka Screen Create New Anggota, seperti yang kita lihat bahwa default

layout yang di buat adalah Rows Layout dengan memiliki 1 Group yang

berjenis Rows Layout juga.

b. Sedangkan untuk membuat Screen seperti pada contoh diatas adalah Rows

Layout dengan memiliki 1 Column Layout, dan Column Layout ini

memiliki 2 Rows Layout. Rows pertama untuk Photo sedangkan Rows

kedua untuk data-data lain.

c. Ganti jenis Layout untuk “Anggota Property” (Rows Layout) menjadi

Column Layout

d. Tambahkan 2 buah group (Rows Layout), dibawah Active

e. Drag dan Drop Photo kedalam Group sisa nya drag kedalam Group1

f. Pada Rows Layout (Group) ubah Properties Horizontal Alignment

menjadi “Left”

g. Lalu ganti ukuran photo menjadi 150 X 200 pixels

h. Sedangkan untuk ”Alamat” ganti Properties Line menjadi 3.

i. Jalankan program dengan menekan F5.

II. Screen Search Anggota

Setelah selesai dengan membuat Screen Create New Anggota, langkah

selanjutnya adalah membuat Screen Search Anggota. Sesuai dengan namanya

Screen ini berfungsi untuk mencari data-data anggota yang dinginkan. Ikuti

langkah-langkah dibawah ini.

a. Buat Screen baru

b. Untuk Screen Template pilih Search Data Screen sedangkan untuk Screen

Data pilih Anggota. Lalu klik OK. Dan hasil generate seperti gambar dibawah.

c. Delete field-field berikut, Alamat, Tanggal Join dan Photo. Dengan cara klik

kanan pada field lalu pilih delete.

d. Klik field Nama Anggota, lalu aktifkan CheckBox “Show as Link”. Seperti

nama nya, bila check box ini di aktifkan maka field tersebut akan tampil

sebagai Link, yang mana jika field tersebut di klik akan menampilkan data

Anggota Detail.

e. Jalankan program (F5)

f. Selanjutntya klik nilai dari field ID ataupun Nama, maka Screen baru akan

tampil seperti gambar dibawah.

D. Membuat Screen Buku

a) Screen Create New Buku

Untuk pembuatan Screen ini, langkah-langkah nya sama dengan membuat Screen

Create New Anggota. Ikuti langkah-langkah dibawah ini.

1. Tambah Screen dengan cara seperti pada sebelumnya

2. Untuk Screen Template pilih New Data Screen sedangkan untuk Screen Data

pilih Anggota. Lalu klik OK.

3. Jalankan program dan hasil yang di dapat seperti gambar dibawah.

4. Jika ingin merubah dari layout, dapat mengikuti langkah-langkah pada Screen

Create New Anggota, sehingga mendapatkan hasil seperti dibawah.

Jika kita perhatikan terdapat perbedaan antara Screen ini dan yang

sebelumnya. Dimana pada Screen ini, terdapat 2 field yang merujuk pada

table yang lain yaitu Category dan Rak. Sehingga kita dapat memilih data

Category atau Rak dalam Dropdown seperti gambar diatas.

b) Screen Search Buku

Untuk Screen ini, ikuti langkah-langkah pada Screen Search Anggota, dan tampilan

akhir yang didapat adalah seperti gambar dibawah ini.

E. Menampilkan data Buku berdasarkan Nomor Rak

Screen selanjutnya yang akan kita buat adalah Screen pencarian buku berdasarkan

Rak, Screen ini berfungsi untuk mengetahui buku-buku apa saja yang ada pada suatu

Rak. Sehingga memudahkan pengguna/anggota dalam mencari buku yang di

inginkan. Mari ikuti langkah-langkah seperti dibawah ini :

1. Tambah sebuah Screen dengan nama ListBukuByRak

2. Untuk Screen Template pilih New Data Screen sedangkan untuk Screen Data

pilih Anggota. Lalu klik OK.

3. Jalankan program dan hasil nya adalah seperti gambar dibawah ini.

Seperti yang kita inginkan, Screen ini berfungsi hanya untuk menampilkan data buku

berdasarkan Rak. Jadi untuk Add, Update dan Delete button harus kita hilangkan, dan

Data Grid yang menampilkan data buku pun harus bersifat Read Only. Selanjutnya

untuk melakukan hal-hal tersebut, ikuti langkah-langkah seperti berikut :

1. Pada Screen Designer, expand Command Bar pada List Column.

2. Seperti pada gambar di atas, di dalam Command Bar akan terdapat 3 buah button,

hapus semua button tersebut, dengan cara klik kanan pada button dan pilih delete.

3. Dan lakukan hal yang sama pada button yang terdapat pada Data Grid Command

Bar. Sehingga semua button akan hilang pada Screen Designer. Seperti gambar

dibawah.

4. Selanjutnya klik Pada Properties Data Grid Row (Buku), dan aktifkan check box

”Use Read-Only Controls”. Check box ini berfungsi agar Data Grid menjadi read

only yaitu agar nilai-nilai nya tidak dapat di ubah. Jalankan program dengan

menekan F5. Dan hasil yang di dapat seperti gambar dibawah.

F. Menampilkan data Buku berdasarkan Category

Untuk Screen ini cara kerja dan fungsi nya sama dengan Screen Buku by Rak, hanya

saja pada Screen ini menampilkan daftar buku berdasarkan Category buku. Seperti

gambar dibawah ini.

Akan sangat mudah sekali jika membuat Screen yang sama seperti diatas. Oleh

karena itu disini penulis akan menerangkan membuat form ini dengan menggunakan

Query, sehingga menghasilkan Screen seperti berikut.

Pada gambar sebelumnya untuk menampilkan daftar dari buku berdasarkan Category

kita hanya perlu meng-klik salah satu Category pada list, sedangkan pada gambar

kedua kita pilih category pada Drop-Down-List lalu daftar buku akan difilter

berdasarkan Category. Penasaran bagaimana caranya?? Ikuti langkah-langkah

dibawah ini.

- Pada Solution Explorer, klik kanan Table Buku lalu pilih Add Query

- Maka akan muncul tampilan seperti diatas, ganti property Name nya menjadi

BukuByCategory

- Lalu pada Query Designer, tambahkan Filter dengan Property nya Category.Id,

Operator nya sama dengan (=) dan tipe pembanding nya adalah @Parameter.

- Selanjutnya tambahkan Parameter, dengan nama Parameternya ”CategoryId”,

Tipe nya Integer dan terakhir Aktifkan Check Box ”Is Optional” pada properties

Parameter.

- Lalu pada filter Klik Drop-Down dari Nilai pembanding, dan pilih CategoryId.

- Sehingga tampilan dari Query Designer nya seperti gambar dibawah.

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

Name adalah “ListBukuByCategory” dan Screen Data nya ”BukuByCategory”.

- Selanjutnya pada Screen Designer , Delete BukuCategoryID

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

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

(Entity)” dan pada TextBox Name ketikkan “Category”, klik button OK.

- Pilih CategoryID pada Query Parameter, lalu pada ketikkan Category.Id pada

Parameter Binding Property.

- Drag dan drop Category Property kedalam Screen Content Tree, yaitu diatas Data

Grid.

- Selanjutnya klik Category, lalu ganti Horizontal Alignment menjadi Left dan

MinWidth menjadi “150”

- Jalankan Program dan lihat hasilnya

BAB IV

Master Detail

Pada bab sebelumnya kita sudah membuat beberapa screen yang digunakan untuk

menambah, mencari, dan menampilkan data. Namun pada contoh-contoh sebelumnya

kita hanya menggunakan satu table sebagai sumber data. Pada bab ini kita akan

membahas bagaimana membuat master detail form untuk membuat screen Form

Peminjaman buku.

Membuat Screen Detail Anggota

Pertama buat screen detail anggota yang digunakan untuk menampilkan anggota dan

transaksi peminjamannya. Klik kanan pada screen, pilih Add Screen, kemudian buat

screen baru dengan nama AnggotaDetail.

Screen diatas akan digunakan sebagai default detail screen, jadi ketika anda membuka

screen SearchAnggota dan memilih salah satu dari record anggota, maka screen

AnggotaDetail akan otomatis ditampilkan.

Sekarang kita akan menambahkan informasi dari table MyMaster yang berisi data

peminjaman buku kedalam AnggotaDetail. Informasi tentang data peminjaman akan

diletakan dibawah data detail anggota. Caranya pada screen AnggotaDetail pilih „Add

MyMaster‟ seperti ditunjukan pada gambar berikut.

Maka otomatis akan ditambahkan link yang menghubungkan antara table MyMaster dan

Anggota.

Kemudian tambahkan informasi MyMaster pada screen AnggotaDetail sebagai berikut:

Ubah tampilan Data Grid menjadi List untuk menampilkan data peminjaman.

Pastikan summary property yang ditampilkan pada MyMaster adalah tanggal pinjam.

Pada data sources MyMasters pastikan bahwa summary property adalah tanggal pinjam.

Pada table MyDetails pastikan juga nilai summary property adalah biaya.

Jalankan aplikasi untuk melihat perubahan yang sudah kita buat. Ketika screen

AnggotaDetail ditampilkan maka anda dapat menambahkan data tanggal peminjaman.

Jangan lupa untuk menekan tombol save setelah menambahkan data baru.

Agar tanggal pinjam yang ditampilkan pada list dapat berupa link, maka pada aplikasi

pilih Design Screen, kemudian klik pada summary MyMaster, dan check pada pilihan

„show as link‟, kemudian terakhir klik save untuk menyimpan perubahan yang anda

sudah lakukan.

Setelah perubahan yang dilakukan dapat dilihat bahwa informasi tanggal (summary

MyMaster) menjadi link. Anda dapat mengklik link tersebut untuk melihat detail

peminjaman.

Menambahkan Screen Detail Peminjaman

Untuk menampilkan informasi buku yang dipinjam beserta biaya buat detail screen baru

untuk table MyHeader. Pilih juga „MyMaster MyDetails‟ untuk menampilkan informasi

detail buku yang dipinjam.

Pada tampilan screen MyMasterDetail, hapus summary MyDetail pada DataGrid

MyDetail, ubah DropDown Anggota menjadi summary Anggota (check show as link),

dan atur urutan property sebagai berikut:

Pastikan summary property pada table anggota adalah „NamaAnggota‟.

Jalankan aplikasi anda, kemudian klik link tanggal pada AnggotaDetail untuk berpindah

ke screen MyMasterDetail. Pada screen MyMasterDetail akan ditampilkan buku yang

dipinjam.

Anda juga dapat menambahkan data buku yang akan dipinjam.

Anda juga dapat menampilkan detail data yang sudah terbinding dengan data yang ada

pada DataGrid. Untuk menambahkan detail data MyDetail, klik Add, kemudian pilih

MyDetails – Selected Item.

Jika aplikasi dijalankan maka hasilnya dapat dilihat pada gambar berikut:

BAB V

Menambahkan Business Rule dan Calculated Field

Pada bab ini akan dipelajari bagaimana cara menambahkan business rule sederhana dan

calculated fields pada aplikasi yang anda buat. Calculated fields yang akan dibuat adalah

untuk menghitung total biaya dari transaksi peminjaman buku, dan business rule yang

akan dibuat adalah tanggal kembali tidak boleh lebih kecil dari tanggal peminjaman.

Menambahkan Calculated Field

Sebelum menambahkan calculated field pada table MyMaster, buka dulu table MyDetail

untuk menambahkan business rule agar biaya mempunyai nilai default 0. Pada field biaya

check pada pilihan Required, kemudian pada property ubah minimum value menjadi 0.

Untuk menambahkan calculated field untuk menghitung total harga dari buku yang

dipinjam, klik pada table MyMaster, kemudian tambahkan Computed Property dengan

nama TotalHarga dan tipe money.

Pada propery ubah currency code menjadi „IDR‟ agar satuan mata uang yang digunakan

menjadi rupiah.

Kemudian pada propery klik „edit method‟ untuk menambahkan kode untuk

menjumlahkan semua biaya.

Private Sub TotalHarga_Compute(ByRef result As Decimal) ' Set result to the desired field value Dim total As Decimal = 0.0 For Each m In Me.MyDetails total += m.Biaya Next result = total End Sub

Buka screen MyMasterDetail untuk menambahkan field TotalHarga. Tambahkan field

TotalHarga diatas DataGrid.

Jalankan aplikasi anda, maka Total harga akan ditampilkan pada screen MyMasterDetail.

Menambahkan Business Rule

Bussines Rule yang akan ditambahkan pada contoh berikut adalah pengecekan tanggal

kembali untuk buku yang dipinjam. Tanggal kembali tidak boleh lebih lama daripada

tanggal pinjam.

Untuk menambahkan business rule diatas, buka table MyDetails, klik pada field

TglKembali, kemudian pilih „write code‟.

Pada menu write code pilih property method „TglKembali_Validate‟, kemudian

tambahkan kode untuk validasi sebagai berikut:

Private Sub TglKembali_Validate(results As EntityValidationResultsBuilder) ' results.AddPropertyError("<Error-Message>") 'jika tanggal kembali lebih baru dari tanggal sekarang If Me.TglKembali > Date.Today Then results.AddPropertyError("Tanggal Kembali lebih baru dari pada tanggal sekarang") End If 'jika tanggal kembali lebih lama dari tanggal pinjam

If Me.TglKembali.HasValue AndAlso Me.TglKembali < Me.MyMaster.TglPinjam Then results.AddPropertyError("Tanggal Kembali lebih lama dari tanggal pinjam") End If End Sub

Pengecekan pertama digunakan untuk membandingkan apakah tanggal kembali yang

diinputkan oleh pengguna lebih baru dari tanggal sekarang, jika lebih baru maka pesan

kesalahan akan ditampilkan.

Pengecekan kedua digunakan untuk membandingkan apakah tanggal kembali lebih lama

dari tanggal pinjam, jika lebih lama maka pesan kesalahan akan ditampilkan.

Untuk melakukan pengecekan apakah business rule yang sudah kita buat dapat berjalan,

jalankan screen MyMaster detail kemudian ubah tanggal kembali.

Pada tampilan diatas dapat dilihat jika anda memasukan tanggal kembali yang lebih baru

dari tanggal sekarang, maka akan muncul pesan kesalahan. Demikian pula jika anda

memasukan tanggal yang lebih lama dari tanggal pinjam.

Pengecekan Duplikasi Buku

Business rule terakhir yang akan ditambahkan adalah pengecekan duplikasi buku yang

dipinjam. Jika buku dengan judul tertentu sudah dipinjam maka pengguna tidak dapat

menambahkan buku dengan judul yang sama. Untuk menambahkan business rule ini

buka table MyDetails, pilih field Buku, kemudian pilih write code, pilih property method

„Buku_Validate‟ untuk menambahkan kode.

Kemudian tambahkan kode berikut untuk memeriksa apakah ada Buku yang sama yang

akan dipinjam.

Private Sub Buku_Validate(results As EntityValidationResultsBuilder) ' results.AddPropertyError("<Error-Message>") If Me.Buku IsNot Nothing Then Dim dup = From d In Me.MyMaster.MyDetails Where d.Buku IsNot Nothing AndAlso d.Buku.Id = Me.Buku.Id AndAlso d IsNot Me If dup.Any Then results.AddPropertyError("Duplikasi pada buku yang akan ditambahkan !") End If End If End Sub

Untuk memeriksa apakah business rule yang kita buat dapat berjalan dengan baik,

jalankan aplikasi anda, kemudian tambahkan buku baru dengan judul yang sama kedalam

screen MyMasterDetail. Karena buku yang ditambahkan sudah ada, maka akan

ditampilkan pesan kesalahan sebagai berikut.

Pada kasus diatas buku dengan judul Visual Basic 2011 sudah ada, maka pesan kesalahan

akan ditampilkan jika dimasukan buku dengan judul yang sama.

Tentang Penulis

Penulis menyelesaikan pendidikan S1 jurusan Teknik Informatika di UKDW pada tahun

2004, kemudian melanjutkan pendidikan S2 di jurusan Ilmu Komputer UGM dan selesai

pada tahun 2006.

Saat ini penulis bekerja sebagai Professional Trainer, Dosen, Konsultan IT, dan

Pengembang Software. Penulis memiliki beberapa sertifikasi professional untuk produk

Microsoft seperti MCTS (Microsoft Certified Technology Specialist), MCPD (Microsoft

Certified Professional Developer), dan MCT (Microsoft Certified Trainer).

Pada tahun 2009, 2010, dan 2011 penulis mendapatkan award MVP (Most Valuable

Professional) dari Microsoft pada expertise Visual Basic

(https://mvp.support.microsoft.com/profile/erick).

Penulis juga aktif di beberapa kegiatan komunitas diantaranya MUGI (Microsoft User

Group) dan INDC (Indonesia .NET Developer Community). Penulis juga tercatat sebagai

ketua komunitas MUGI Jogjakarta.

Untuk menghubungi penulis anda dapat mengirimkan email ke

erick.kurniawan@gmail.com

Anda dapat mengunjungi blog penulis di http://mugi.or.id/blogs/erick dan

http://actualtraining.wordpress.com