November 24, 2017 [PEMROGRAMAN LANJUT]

MODUL PRAKTIKUM 9
HALAMAN OLAH DATA SEKOLAH ASAL
PEMROGRAMAN LANJUT S1 INFORMATIKA
STEVI EMA WIJAYANTI
 November 24, 2017 [PEMROGRAMAN LANJUT]

IMPLEMENTASI MVC (MODEL VIEW CONTROLLER) DALAM APLIKASI

PEKERJAAN (HALAMAN OLAH DATA SEKOLAH ASAL)

Halaman olah data sekolah asal (Interface/antarmuka)

Halaman data sekolah asal digunakan untuk mengolah data sekolah asal pendaftar. Di dalamnya
terdapat beberapa fitur seperti menampilkan data dalam DataGridView dan pada TextBox,
kemudian terdapat fasilitas untuk menambah data, mengubah data dan menghapus data dari
database melalui aplikasi. Fasilitas lain yang tersedia dalam halaman asal sekolah yaitu pencarian
data sekolah asal berdasarkan kode sekolah atau nama sekolah.
Sama seperti halaman Login, pada halaman data sekolah asal juga diterapkan konsep MVC (Model
View Controller). Langkah-langkah untuk mengimplementasikan konsep MVC ke dalam halaman
data pekerjaan adalah sebagai berikut :
1. Buka SekolahPage.xaml dan buka SekolahPage.xaml.cs
2. Buat class baru pada folder Model berikan nama class SekolahModel.cs

Nama Class :

STEVI EMA WIJAYANTI Page 2

 November 24, 2017 [PEMROGRAMAN LANJUT]

3. Seperti pada pola yang telah diterapkan pada program sebelumnya, class Model berisi data,
dan method-method yang akan mengeksekusi query dari/ke database. Maka tambahkan 2
using seperti berikut ini :

4. Seperti pada pola yang telah diterapkan pada program sebelumnya, pada class Model
diterapkan konsep Enkapsulasi (Information Hiding dan Interface for Access Data).
a. Information Hiding (variabel)
Langkah pertama yang perlu dilakukan pada class SekolahModel adalah mendeklarasikan
variable dengan hak akses PRIVATE. Variabel yang dideklarasikan adalah kolom/field yang
ada di tabel tb_asal_sekolah.
Jika dilihat pada tabel tb_asal_sekolah maka kolom-kolomnya sebagai berikut :

Maka variable dan tipe data yang dideklarasikan sesuai dengan kolom yang ada di tabel
tb_asal_sekolah.

b. Interface for Access Data (variabel)

Setelah variable dideklarasikan, langkah selanjutnya adalah membuat fungsi Set dan Get
agar variable tersebut dapat diakses oleh class lain.

STEVI EMA WIJAYANTI Page 3

 November 24, 2017 [PEMROGRAMAN LANJUT]

5. Apabila variable dan fungsi Set serta Get telah ditambahkan dalam class SekolahModel.
Langkah selanjutnya adalah menambahkan object dari class Connection dan class Command.

6. Selain itu tambahkan juga deklarasi variable seperti berikut :

7. Langkah selanjutnya adalah mengkoneksikan class Model dengan database agar dapat
mengeksekusi query. Untuk mengkoneksikannya tambahkan Constructor Default yang
didalamnya terdapat pernyataan untuk memanggil class Koneksi.

STEVI EMA WIJAYANTI Page 4

 November 24, 2017 [PEMROGRAMAN LANJUT]

8. Setelah koneksi database ditambahkan, langkah selanjutnya adalah menambahkan fungsi

SelectSekolah() untuk menampilkan data sekolah asal dari database ke dalam aplikasi.

9. Sesuai dengan rancangan antarmuka halaman data sekolah asal, fungsi kedua yang disediakan
adalah untuk menambahkan data sekolah melalui aplikasi, maka dibuat fungsi InsertSekolah().

STEVI EMA WIJAYANTI Page 5

 November 24, 2017 [PEMROGRAMAN LANJUT]

10. Fungsi ketiga yang disediakan adalah untuk mengubah data sekolah asal melalui aplikasi, maka
dibuat fungsi UpdateSekolah().

11. Fungsi keempat yang disediakan adalah untuk menghapus data sekolah asal melalui aplikasi,
maka dibuat fungsi DeleteSekolah().

STEVI EMA WIJAYANTI Page 6

 November 24, 2017 [PEMROGRAMAN LANJUT]

12. Fungsi yang kelima adalah fungsi tambahan untuk membuat kode sekolah asal otomatis
sehingga user tidak perlu menginputkan id_sekolah secara manual. Hal ini dimaksudkan untuk
mengurangi resiko kesalahan pada saat input data karena id_sekolah merupakan Primary Key
sehingga datanya tidak boleh ada yang sama.

13. Pastikan baris kode yang dituliskan tidak ada kesalahan kemudian simpan SekolahModel.cs
14. Buat class baru pada folder Controller, berikan nama class SekolahController.cs

STEVI EMA WIJAYANTI Page 7

 November 24, 2017 [PEMROGRAMAN LANJUT]

Nama class

15. Sebelum menambahkan baris kode pada SekolahController, tambahkan using seperti berikut :

16. Kemudian tambahkan deklarasi object untuk class SekolahPage dan SekolahModel serta
deklarasikan variable tambahan.

17. Tambahkan Contructor berparameter untuk melakukan instance ke 2 class tersebut.

18. Langkah selanjutnya adalah menambahkan fungsi SelectSekolah() seperti berikut ini :

19. Langkah selanjutnya adalah menambahkan fungsi InsertSekolah() seperti berikut ini :

20. Langkah selanjutnya adalah menambahkan fungsi DeleteSekolah() seperti berikut ini :

STEVI EMA WIJAYANTI Page 8

 November 24, 2017 [PEMROGRAMAN LANJUT]

21. Langkah selanjutnya adalah menambahkan fungsi UpdateSekolah() seperti berikut ini :

22. Langkah selanjutnya adalah menambahkan fungsi BuatKode() untuk ditampilkan ke dalam
txtKode seperti berikut ini :

23. Pastikan baris kode yang dituliskan tidak ada pesan kesalahan, kemudian simpan class
SekolahController.
24. Buka kembali class SekolahPage.xaml.cs, tambahkan deklarasi object dari class
SekolahController dan variable tambahan seperti berikut ini :

25. Kemudian tambahkan fungsi untuk mengatur enable/disable button dan text yang ada di
Halaman Sekolah Asal.

STEVI EMA WIJAYANTI Page 9

 November 24, 2017 [PEMROGRAMAN LANJUT]

26. Langkah selanjutnya adalah membuat fungsi untuk menampilkan data ke dalam DataGridView.

27. Modifikasi di bagian Contructor PekerjaanPage tambahkan baris kode seperti berikut ini :

28. Tambahkan baris kode ke fungsi btnCari_Click() dan btnRefresh_Click(), tuliskan baris kode
seperti berikut :

29. Arahkan baris kode ke fungsi btnTambah_Click(), tuliskan baris kode seperti berikut ini :

STEVI EMA WIJAYANTI Page 10

 November 24, 2017 [PEMROGRAMAN LANJUT]

30. Tambahkan baris kode pada fungsi btnUbah_Click()

31. Langkah selanjutnya adalah menambahkan baris kode pada fungsi btnSimpan_Click() seperti
berikut ini :

32. Sama seperti button yang lain, tambahkan baris kode pada button Hapus seperti berikut :

STEVI EMA WIJAYANTI Page 11

 November 24, 2017 [PEMROGRAMAN LANJUT]

33. Yang terakhir adalah menambahkan baris kode pada saat button Cancel di-klik.

34. Sebelum halaman sekolah asal dijalankan cek terlebih dahulu data sekolah yang ada di dalam
database. Tuliskan query seperti berikut ini pada SQL Server.

Kemudian tekan F5 atau klik Toolbar maka hasilnya akan ditampilkan seperti berikut
ini : (Pastikan data yang tampil di dataGridView sama seperti data pada database)

35. Jalankan aplikasi (login terlebih dahulu) kemudian akses menu Data Sekolah Asal.

STEVI EMA WIJAYANTI Page 12