erick & junindar - lightswitch learning by doing
Post on 29-Nov-2015
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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<sup>−28</sup> -
±7.9 × 10<sup>28</sup>
Double Double double ±5.0e−324 to ±1.7e308
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
top related