BAB I Pengenalan Microsoft Visual Studio LightSwitchMicrosoft 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 langkahlangkah 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 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 pada kolom Name dan ketikkan Alamat. Klik 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 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 Binary Boolean Date VB Type Byte() Boolean DateTime C# Type byte[] boolean DateTime Range -128 to 127 True / False

DateTime DateTime

DateTime

12:00:00 AM, Jan 1, 0001 11:59:59 PM, Dec 31, 9999

Decimal

Decimal

decimal

1.0 1028 7.9 1028

-

Double Email Address Image Short Integer Integer Long Integer Money Phone Number String

Double String

double string

5.0e324 to 1.7e308

Byte() Short

Byte[] short -32,768 to 32,767

Integer Long

int long

-2147483647 - 2147483647 -9,223,372,036,854,775,808 9,223,372,036,854,775,807 -

Decimal String

decimal 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).

21

3

-

Membuat Query Sebelum kita membahas bagaimana membuat query, terlebih dahulu adalah mengetahui kegunaan dari Query. Dengan menggunakan query kita bisa memfilter 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.

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.

1 Keterangan:

2

3

4

5

1. Kondisi atau Boolean Operator 2. Property (Field) 3. Operator 4. Tipe dari pembanding 5. Nilai dari pembanding

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 berikutIf Me.TglLahir > DateTime.Today Then results.AddPropertyError _ ("Tanggal lahir tidak boleh lebih besar dari hari ini") End If

-

Jalankan Program dengan menekan F5

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 lainlain) 3. Table Buku = di gunakan untuk menyimpan data buku yang tersedia di perpustakaan. 4. 5. 6. Table Anggota = di gunakan untuk menyimpan data keanggotaan perpustakaan Table Pinjam Master = di gunakan untuk menyimpan data peminjaman 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 NoRak NamaRak

Type String String

Size 4 50

Required Yes 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 20 Required Yes Yes

NamaCategory String Durasi Denda Integer 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 ISBN TitleBuku Pengarang Penerbit TglTerbit TglMasuk Sinopsis Photo Status Type String String String String Date Date String Image Boolean 500 Size 15 100 255 100 Required Yes Yes

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 IDAnggota Type String Size 15 50 255 Required Yes Yes

NamaAnggota String Alamat Phone Email TanggalJoin Photo Active String Phone Number Email Address Date Image Boolean

Yes

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 TglPinjam Type Date Size 50 Required Yes

Table MyDetail Name Type Size Required

TglKembali Date Biaya Status Money 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 ScreenSetelah 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 langkahlangkah 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.result = Me.NoRak & " - " & Me.NamaRak

4. Sintaks ini berfungsi untuk menggabungkan nilai field NoRak dan 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 EntityValidationResultsBu ilder) ' results.AddPropertyError("") '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 EntityValidationResults Builder) ' results.AddPropertyError("") 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 ya ng 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