Data Flow
Diagram (DFD)
Sebelum
membuat aplikasi, alangkah baiknya kita terlebih dahulu merancangang suatu Data Flow Diagram (DFD) agar dapat
mempermudah dalam pembangunan aplikasi tersebut.
Data Flow Diagram (DFD) adalah alat
pembuatan model yang memungkinkan profesional sistem untuk menggambarkan sistem
sebagai suatu jaringan proses fungsional yang dihubungkan satu sama lain dengan
alur data, baik secara manual maupun komputerisasi. DFD ini sering disebut juga
dengan nama Bubble chart, Bubble diagram,
model proses, diagram alur kerja, atau model fungsi.
DFD
ini adalah salah satu alat pembuatan model yang sering digunakan, khususnya
bila fungsi-fungsi sistem merupakan bagian yang lebih penting dan kompleks dari
pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat
pembuatan model yang memberikan penekanan hanya pada fungsi sistem.
DFD
ini merupakan alat perancangan sistem
yang berorientasi pada alur data dengan konsep dekomposisi dapat
digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan
oleh profesional sistem kepada pemakai maupun pembuat program.
Adapun
untuk notasi-notasi pada DFD yang sering kita digunakan yaitu menurut Edward
Yourdon dan Tom Demarco adalah sebagai berikut.
Tabel 2. 1 Notasi-notasi DFD menurut Edward Yourdon
dan Tom Demarco
|
Notasi |
Keterangan |
|
|
|
Entitas luar (external entity)
atau masukan (input) atau keluaran
(output) atau orang yang
memakai/berinteraksi dengan perangkat lunak yang dimodelkan atau sistem lain
yang terkait dengan aliran data dari sistem yang dimodelkan. Catatan: Nama yang digunakan pada masukan (input)
atau keluaran (output) biasanya
berupa kata benda. |
|
|
|
Proses atau fungsi
atau prosedur; pada pemodelan perangkat lunak yang akan diimplementasikan
dengan pemrograman terstruktur, maka pemodelan notasi inilah yang seharusnya
menjadi fungsi atau prosedur di dalam kode program. Catatan: Nama yang diberikan pada sebuah proses biasanya berupa kata kerja. |
|
|
|
File atau basis data atau
penyimpanan (storage); pada
pemodelan perangkat lunak yang akan diimplementasikan dengan pemrograman
terstruktur, maka pemodelan notasi ilmiah yang harusnya dibuat menjadi
tabel-tabel basis data yang dibutuhkan, tabel-tabel ini juga harus sesuai
dengan perancangan tabel-tabel pada basis data (Entity Relationship Diagram (ERD), Conceptual Data Model (CDM), Physical
Data Model (PDM). Catatan: Nama yang diberikan pada sebuah penyimpanan biasanya kata benda. |
|
|
|
Aliran data; merupakan data yang dikirim antar proses, dari penyimpanan
ke proses, atau dari proses ke masukan (input)
atau keluaran(output). Catatan; Nama yang digunakan pada aliran data biasanya berupa kata benda, dapat
diawali dengan kata data misalnya “data siswa” atau tanpa kata data misalnya
“siswa” |
|
2.2 CRUD VB .NET
CRUD
merupakan singkatan dar Create, Read, Update, dan Delete. CRUD
sudah banyak dipakai dikalangan pemrograman dimana dasar dalam membuat aplikasi
berbasis database adalah dengan CRUD.
Adapaun arti secara umum CRUD VB .NET adalah membuat form Input, Edit, dan Hapus data di dalam database menggunakan Visual Basic .NET.
1.
Create
Create
merupakan proses pembuatan data baru. Data yang dimasukkan akan disimpan ke
dalam database.
2.
Read
Read merupakan
proses pengambilan data dari database.
Proses ini biasanya terjadi ketika kita ingin melakukan proses login. Pada saat kita klik “Login”, maka
kita akan diarahkan ke halaman awal, pada saat itulah proses Read berjalan.
3.
Update
Update
merupakan proses mengubah data yang berada di dalam database.
4.
Delete
Delete merupakan
proses untuk menghapus data yang ada di dalam database. Proses ini mirip dengan Update, hanya saja proses Delete
ini akan mengubah data yang ada di database
menjadi ‘tidak ada’.
2.3 MySQL Connector
MySQL
merupakan salah satu teknologi yang paling dikenal dalam ekosistem big data modern. Sering disebut sebagai basis data paling populer saat ini.
Dengan MySQL, bahkan mereka yang baru mengenal sistem relasional dapat segera
membangun sistem penyimpanan data yang cepat, kuat, dan aman.
MySQL
adalah sebuah Database Management System
(DBMS) yang bersifat multiatur dan multipengguna, implementasi dari Sistem
Manajemen Basis Data Relasional (RDBMS). MySQL dikembangkan oleh Oracle yang
didasarkan pada bahasa query
terstruktur (SQL). Database adalah
kumpulan data yang terstruktur.
Adapun
pada MySQL ini juga terdapat MySQL Connector, yang biasa disebut sebagai MySQL
ODBC atau MyODBC. MySQL Connector merupakan driver
untuk menghubungkan ke server database MySQL melalui antarmuka program
aplikasi Open Database Connectivity
(ODBC), yang artinya sarana standar untuk menghubungkan ke database apapun.
Fungsi
dari MySQL Connector adalah sebagai sarana komunikasi antara program VB.Net
(ataupun program jadinya yang kita buat dengan VB) dengan database MySQL sehingga data yang kita inputkan dari program VB.Net (program jadi) bisa tersimpan di database MySQL, begitupun sebaliknya
ketika kita ingin mengambil data dari database
dan menampilkannya, maka data tersebut bisa kita ambil melalui MySQL Connector.
3.1
Deskripsi Studi Kasus
Aplikasi Pendataan Obat pada Apotek Bunda Ningsih merupakan sebuah
aplikasi untuk mengolah informasi yang diperlukan dalam suatu toko obat yang
meliputi data obat, data jenis obat, data user, data level, dan data catatan. Maka
dari itu dubatlah suatu rancangan database
tokoobat dan perancangan suatu Data Flow Diagram (DFD). Aplikasi ini
nantinya akan menggunakan proses input
data, dan tampil data. Selain itu, aplikasi ini juga terdapat MySQL Connector
yang merupakan driver untuk
menghubungkan ke server database MySQL melalui antarmuka program
aplikasi Open Database Connectivity
(ODBC), yang artinya sarana standar untuk menghubungkan ke database apapun.
3.2
Alat dan Bahan
Alat dan bahan yang
digunakan dalam dalam praktikum ini adalah sebagai berikut:
1.
Laptop.
2.
Browser.
3.
Koneksi Internet.
4.
XAMPP (Apache dan MySQL)
5.
Command
Prompt
6.
MySQL Connector
3.3
Koneksi Database dan Melakukan Login
3.3.1 MySQL Connector
1.
Pada praktikum ini kita memerlukan diver MySQL Connector versi .Net agar
Visual Basic dapat terkoneksi dengan database
MySQL, karena kita akan menggunakan database
MySQL tersebut.
Gambar 3. 1 Mencari MySQL Connector Net melalui Google.com
2.
Sebelum itu, buka aplikasi Visual Studio
Community terlebih dahulu untuk mengetahui framework
dari VB.Net yang kita punya. Untuk mengetahui framework tersebut, kita buat projek baru terlebih dahulu
menggunakan Templates: Visual Basic. Lalu Store Apps: Windows Dekstop. Kemudian pilih Windows Forms Application. Beri nama projek dengan nama Aplikasi Database lalu klik OK.
Gambar 3. 2 Membuat projek baru
3.
Maka akan otomatis akan muncul tampilan design baru untuk form seperti berikut.
Gambar 3. 3 Tampilan design baru untuk form
4.
Lalu pada menu PROJECT, pilih Aplikasi
Database Properties.
Gambar 3. 4 Pilih Aplikasi Database Properties pada menu PROJECT
5.
Pada properti Aplikasi Database tersebut,
terdapat beberapa properti. Terutama untuk Target
framework. Target framewok pada
Visual Studio ini adalah .NET Framework
4.5. Tetapi framework ini
berbeda-beda tergantung versi dari
Visual Studio.
Gambar 3. 5 Melihat versi framework dari Visual Studio
6.
Kemudian kita cari kembali MySQL Connector Net
pada browser (Google.com), karena
kita akan mendownload MySQL Connector
tersebut. Pilih site yang paling
atas.
Gambar 3. 6 Mencari MySQL Connector Net melalui browser (Google.com)
7.
Setelah dipilih, maka akan muncul tampilan
seperti berikut. Lalu pilih menu Archives.
Gambar 3. 7 Pilih menu Archives
8.
Pada halaman ini kita akan memilih versi MySQL Connector. Perhatikan pada Product Version, kita pilih dengan
versi 6.9.10. Artinya MySQL
Connector Net 6.9.10 yang memiliki framework 4.5. setelah itu klik Download.
Gambar 3. 8 Memilih versi dan mendownload MySQL Connector
9.
Setelah terdownload
maka akan muncul hasil download pada
Windows Explorer.
Gambar 3.
9 Hasil download MySQL Connector
10. Selanjutnya
kita lakukan installasi pada MySQL
Connector tersebut. Lakukan penginstallan
dengan mengikuti langkah demi langkah proses installasi tersebut.
Gambar 3. 10 Installasi MySQL Connector Net
11. Setelah
selesai menginstall MySQL Connector,
lihat hasilnya pada folder C:\Program Files (x86)\MySQL\MySQL
Connector Net 6.9.10\Assemblies. Disana terdapat 2 versi framework. Untuk v4.0 digunakan pada framework 4.0, sedangkan v4.5 digunakan untuk framework 4.5.
Gambar 3. 11 Melihat versi framework
3.3.2 Studi Kasus Aplikasi Pendataan Obat pada
Apotek Bunda Ningsih
Studi kasus yang digunakan yaitu
Aplikasi Pendataan Obat pada Apotek Bunda Ningsih. Pada kasus ini terdapat 2
pengguna yaitu Admin dan Petugas.
1.
Pertama-tama buat database terlebih dahulu melalui localhost phpmyadmin, beri nama database dengan nama tokoobat, lalu klik Buat.
Gambar 3. 12 Membuat database baru
2.
Lalu buat tabel jenisobat dengan atribut-atribut seperti berikut. Tabel jenisobat ini digunakan untuk mendata
apa saja jenis-jenis obat yang terdapat pada toko obat tersebut.
Gambar 3. 13 Membuat tabel jenisobat
3.
Buat tabel obat
dengan atribut-atribut seperti berikut. Tabel obat ini digunakan untuk mendata apa saja obat-obat yang terdapat
pada toko obat tersebut.
Gambar 3. 14 Membuat tabel obat
4.
Buat tabel level
dengan atribut-atribut seperti berikut. Tabel level ini digunakan untuk mendata 2 pengguna yaitu Admin dan
Petugas.
Gambar 3. 15 Membuat tabel level
5.
Buat tabel user
dengan atribut-atribut seperti berikut. Tabel user ini digunakan untuk mendata siapa saja pengguna yang dapat
menggunakan aplikasi tersebut.
Gambar 3. 16 Membuat tabel user
6.
Buat juga tabel catatan dengan atribut-atribut seperti berikut. Tabel catatan ini digunakan untuk mencatat
semua aksi yang dilakukan oleh pengguna, seperti menambahkan data obat,
mengubah data obat, atau menghapus data obat.
Gambar 3. 17 Membuat tabel catatan
7.
Sehingga Relasi Antar Tabel (RAT) dari aplikasi
ini adalah sebagai berikut.
Gambar 3. 18 Relasi Antar Tabel (RAT) Studi Kasus
8.
Selanjutnya buka aplikasi XAMPP, aktifkan Apache dan MySQL. Karena disini kita akan melakukan pengisian data pada
masing-masing tabel melalui Command Prompt
sehingga harus menjalankan Apache
dan MySQL agar dapat terhubung
dengan database.
Gambar 3. 19 Aktifkan Apache dan MySQL
9.
Kemudian buka Command Prompt, lalu
masukkan perintah \xampp\mysql\bin\mysql
–u root –p untuk bisa masuk ke MariaDB/localhost.
Gambar 3. 20 Masuk ke localhost
10. Kita
bisa melihat beberapa database yang
kita miliki dengan memasukkan perintah show
databases;. Terutama database
dengan nama tokoobat.
Gambar 3. 21 Melihat beberapa database
11. Kemudian
masuk ke database tokoobat dengan memasukkan perintah use tokoobat.
Gambar 3. 22 Masuk ke database tokoobat
12. Lalu
lihat tabel-tabel yang berada pada database
tokoobat dengan memasukkan perintah show tables;.
Gambar 3. 23 Melihat tabel-tabel yang berada pada database obat
13. Selanjutnya
lakukan pengisian data-data pada tabel level
berikut.
Gambar 3. 24 Pengisian data-data pada tabel level
14. Kemudian
lihat data-data yang sudah terisi tersebut pada tabel level.
Gambar 3. 25 Melihat data-data pada tabel level
15. Pengisian
data-data pada tabel user. Kemudian
lihat data-data tersebut pada tabel user.
Gambar 3. 26 Pengisian data-data sekaligus melihat data-data pada tabel user
16. Pengisian
data-data pada tabel jenisobat.
Kemudian lihat data-data tersebut pada tabel jenisobat.
Gambar 3. 27 Pengisian data-data sekaligus melihat data-data pada tabel jenisobat
17. Pengisian
data-data pada tabel obat. Kemudian
lihat data-data tersebut pada tabel obat.
Gambar 3. 28 Pengisian data-data sekaligus melihat data-data pada tabel obat
18. Disini
kita akan menggunakan beberapa diagram DFD. Berikut ini adalah diagram konteks
studi kasus.
Gambar 3. 29 Diagram Konteks Studi Kasus
19. Diagram
dekomposisi studi kasus.
Gambar 3. 30 Diagram dekomposisi studi kasus
20. DFD
level 1 studi kasus.
Gambar 3. 31 DFD level 1 studi kasus
21. DFD
level 2 proses 2 studi kasus.
Gambar 3. 32 DFD level 2 proses 2 studi kasus
22. DFD
level 2 proses 3 studi kasus.
Gambar 3. 33 DFD level 2 proses 3 studi kasus
23. DFD
level 2 proses 4 studi kasus.
Gambar 3. 34 DFD level 2 proses 4 studi kasus
24. DFD
level 2 proses 5 studi kasus.
Gambar 3. 35 DFD level 2 proses 5 studi kasus
25. Selanjutnya
kita memerlukan Module Koneksi agar dapat diakses oleh seluruh class di dalam aplikasi, karena Module Koneksi
ini memuat variabel, procedure, dan function global sehingga sangat diperlukan dalam kepentingan koneksi
aplikasi berdasarkan database yang
dibangun. Untuk membuat Module Koneksi tersebut, cukup pilih menu PROJECT lalu klik Add Module.
Gambar 3. 36 Membuat Module Koneksi
26. Maka
akan muncul tampilan seperti berikut. Pada bagian ini akan otomatis terpilih Module karena sebelumnya kita sudah
memilih pada menu PROJECT. Lalu beri
nama koneksi.vb kemudian klik Add.
Gambar 3. 37 Memberi nama Module Koneksi
27. Berikut
adalah tampilan ketika Module Koneksi telah dibuat.
Gambar 3. 38 Tampilan ketika Module Koneksi telah dibuat
28. Kemudian
kita gunakan MySQL Connector agar dapat menghubungkan aplikasi yang dibangun
dengan menggunakan database MySQL.
Pilih PROJECT lalu klik Add Reference.
Gambar 3. 39 Memilih Add Reference pada menu PROJECT
29. Lalu
pada Assemblies pilih Extensions, cari MySql.Data. setelah menemukan MySql.Data
tersebut, lihat versinya karena
disana terdapat 2 MySql.Data. cara
melihatnya dengan mengarahkan cursor
ke tulisan MySql.Data tersebut.
Untuk framework dari Visual Studio
yang digunakan adalah 4.5, sehingga
pilih MySql.Data dengan v4.5.
Gambar 3. 40 Menentukan MySql.Data sesuai dengan framework yang digunakan
30. Setelah
menentukan MySql.Data, kita beri
centang pada MySql.Data yang kita
pilih tersebut. Lalu klik OK.
Gambar 3. 41 Memberi centang pada MySql.Data
31. Kembali
pada Module Koneksi yang kita buat sebelumnya. Pada Module Koneksi ini, kita
panggil namespace dari MySql.Data dengan menggunakan perintah Imports.
Gambar 3. 42 Memanggil namespace dari MySql.Data menggunakan perintah Imports
32. Lalu
deklarasikan variabel yang ingin kita
gunakan agar dapat terkoneksi dengan database.
Untuk pendeklarasiannya secara Public.
Gambar 3. 43 Pendeklarasian variabel
33. Kemudian
isikan nilai variabel conn dengan menggunakan alamat dari database yang digunakan, yaitu nama database nya adalah tokoobat yang berada pada server
localhost.
Gambar 3. 44 Mengisi nilai variabel conn dengan alamat dari database
34. Selanjutnya
kita lakukan cek koneksi terlebih dahulu untuk memastikan bahwa aplikasi yang
akan dibangun telah terkoneksi dengan database
yang digunakan. Pengecekkan koneksi ini dilakukan sebelum membangun aplikasi
yang menggunakan database. Maka kita
buat procedure global di Module Koneksi dengan nama CekKoneksi.
Gambar 3. 45 Membuat procedure global di Module Koneksi
35. Tambahkan
kode program untuk membuka dan menutup database
dengan fungsi open() dan close(). Pada kode program ini kita
juga menggunakan Handling Exception untuk
menangani kesalahan yang dimana pada perintah open() dan close() cukup
kita masukkan ke dalam try.
Sehinggan apabila terjadi error, maka
akan ditangani pada bagian catch.
Gambar 3. 46 Menambahkan kode program dengan fungsi
open() dan close() serta Handling Exception
36. Setelah
itu kita double click Form1.vb [Design] untuk memunculkan method Form1_Load.
Gambar 3. 47 Memunculkan method Form1_Load
37. Lalu
kita panggil procedure CekKoneksi ketika aplikasi dijalankan.
Gambar 3. 48 Memanggil procedure CekKoneksi
38. Sebelum
menjalankan aplikasi tersebut, pastikan Apache
dan MySQL pada XAMPP sudah
diaktifkan agar aplikasi dapat berjalan dan terhubung dengan database.
Gambar 3. 49 Mengaktifkan Apache dan MySQL
39. Selanjutnya
jalankan aplikasi. Pada gambar dibawah ini terdapat bahwa Koneksi Berhasil, yang artinya aplikasi tersebut berhasil
dijalankan dan sudah bisa terhubung ke database.
Gambar 3. 50 Menjalankan aplikasi
40. Setelah
aplikasi berhasil dijalankan dan koneksi sudah berhasil, kita tutup pemanggilan
procedure CekKoneksi dengan menjadikan komentar pada method Form1_Load tersebut. Untuk menjadikan
komentar, cukup meletakkan tanda petik satu di depan sintaks yang ingin
dijadikan komentar. Ini berlaku pada VB.Net.
Gambar 3. 51 Menutup pemanggilan procedure CekKoneksi dengan menjadikan komentar
41. Langkah
selanjutnya yaitu kita membuat proses login
pada halaman login. Artinya semua user harus melakukan login terlebih dahulu pada aplikasi ini.
Gunakan Form1 untuk menjadikannya
sebagai halaman login. Kemudian atur
dengan meletakkan objek-objek kontrol di dalam form tersebut seperti berikut.
Gambar 3. 52 Meletakkan objek-objek kontrol pada form
42. Lalu
atur properti-properti dari objek kontrol pada gambar di atas berdasarkan
dengan tabel berikut ini.
Tabel 3. 1 Mengatur properties pada form login
|
Object |
Properties |
Nilai |
|
Form1 |
Text |
Halaman Login |
|
Label1 |
Text |
Username |
|
Label2 |
Text |
Password |
|
TextBox1 |
Name |
txtUser |
|
TextBox2 |
Name |
txtPass |
|
UseSystemPasswordChar |
True |
|
|
Button1 |
Name |
btnLogin |
|
Text |
&Login |
Sehingga tampilannya menjadi seperti berikut.
Gambar 3. 53 Tampilan halaman login
43. Kemudian
tambahkan 1 Module lalu beri nama dengan proses.vb.
Module proses ini digunakan untuk
menyimpan procedure dan function. Selain itu, juga digunakan
untuk menyimpan beberapa variabel
yang diperlukan secara global seperti
iduser dan level.
Gambar 3. 54 Menambahkan 1 Module proses
44. Deklarasikan
variabel iduser dan level pada Module
proses.
Gambar 3. 55 Deklarasi variabel iduser dan level
45. Lalu
membuat halaman Master Menu yang
digunakan sebagai referensi bagi halaman-halaman lainnya. Halaman Master Menu ini dibuat agar memudahkan
dalam mengatur menu untuk setiap halaman yang akan dibuat. Untuk membuat
halaman Master Menu tersebut, pilih
menu PROJECT, klik Add Windows From.
Gambar 3. 56 Membuat halaman Master Menu
46. Beri
nama form tersebut dengan nama MasterMenu.vb.
Gambar 3. 57 Memberi nama halaman Master Menu
47. Disini
kita memerlukan objek kontrol dengan MenuStrip.
Cukup cari pada bagian Toolbars.
Lalu double click tulisan MenuStrip tersebut.
Gambar 3. 58 Mencari objek kontrol MenuStrip
48. Maka
MenuStrip akan muncul seperti
berikut. Kemudian atur properties StartPosition dari MasterMenu menjadi CenterScreen.
Lalu klik pada bagian panah kecil tersebut yang berada pada bagian pojok kanan
atas form.
Gambar 3. 59 Menambahkan MenuStrip
49. Disini
kita mengatur posisi untuk menunya nanti untuk mengganti Dock menjadi Left dengan
mengklik pada bagian kiri dari Dock,
sehingga terganti menjadi Left.
Gambar 3. 60 Mengganti Dock menjadi Left
50. Maka
tampilan menunya seperti berikut, berada di bagian kiri.
Gambar 3. 61 Tampilan menu bagian kiri
51. Selanjutnya
atur warna dari MenuStrip tersebut,
ganti properties dengan mengatur BackColor. Sehingga warna MenuStrip nya berubah seperti gambar
dibawah.
Gambar 3. 62 Mengatur warna MenuStrip
52. Lalu
isikan menu-menunya pada bagian Type
Here. Yang pertama isikan dengan tulisan Beranda.
Gambar 3. 63 Mengisi menu-menu
53. Isikan
lagi menu lainnya sehingga menjadi beberapa menu berikut.
Gambar 3. 64 Bagian menu-menu aplikasi
54. Kemudian
atur name dari tiap menu-menu
tersebut sebagai berikut.
Tabel 3. 2 Mengatur properties pada beberapa menu
|
Tampilan Menu |
Properties |
Nilai |
|
Beranda |
Name |
menuBeranda |
|
Level |
Name |
menuLevel |
|
Jenis |
Name |
menuJenis |
|
Obat |
Name |
menuObat |
|
Catatan |
Name |
menuCatatan |
|
User |
Name |
menuUser |
|
Logout |
Name |
menuLogout |
Lalu atur lebar menu strip dengan mengubah nilainya
menjadi False pada AutoSize, dan atur lebar MenuStrip1 secara manual. Sehingga MenuStrip menjadi seperti berikut.
Gambar 3. 65 Mengatur lebar MenuStrip
55. Selanjutnya
atur tampil tidaknya menu tersebut berdasarkan dengan level pengguna. Pada
aplikasi ini, menurut DFD yang dibuat sebelumnya, Admin dapat mengakses semuanya.
Sedangkan Petugas hanya dapat mengakses menu Beranda, menu Obat, menu User, dan
menu Logout. Double click pada MasterMenu untuk memunculkan MasterMenu_Load.
Gambar 3. 66 Kode program MasterMenu_Load
56. Tambahkan
kode program pada MasterMenu_Load,
disana ada 2 level yaitu admin dan petugas.
Gambar 3. 67 Kode program pada MasterMenu_Load
57. Lalu
tambahkan kode program untuk menu Logout dengan mengklik double pada menu Logout. Lalu tambahkan kode program berikut.
Gambar 3. 68 Kode program untuk menu logout
58. Lakukan
Build Solution agar MasterMenu dapat di inherited/diwariskan pada form lainnya dengan memilih menu BUILD kemudian pilih Build Solution.
Gambar 3. 69 Build Solution
59. Selanjutnya
kita buat halaman beranda dengan memanfaatkan inherited dari halaman MasterMenu.
Buat terlebih dahulu halaman beranda dengan memilih menu PROJECT lalu pilih Add
Windows Form.
Gambar 3. 70 Membuat halaman beranda
60. Kemudian
pilih Windows Forms lalu klik Inherited Form, lalu beri nama dengan formBeranda.vb. klik Add.
Gambar 3. 71 Memilih inherited dan memberi nama form
61. Lalu
pilih MasterMenu dan klik OK.
Gambar 3. 72 Memilih MasterMenu
62. Maka
tampilannya sama seperti MasterMenu
sebelumnya.
Gambar 3. 73 Tampilan formBeranda dari MasterMenu
63. Susun
objek kontrol formBeranda seperti berikut.
Gambar 3. 74 Menyusun objek kontrol
64. Lalu
atur properties dari setiap objek
kontrol tersebut berdasarkan tabel berikut.
Tabel 3. 3 Mengatur properties pada form beranda
|
Object |
Properties |
Nilai |
|
Form |
Text |
Halaman Beranda |
|
Label1 |
Text |
Data Obat |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumnsMode |
AllCells |
Sehingga setelah diatur menjadi seperti berikut.
Gambar 3. 75 Mengatur properties
65. Selanjutnya
kita gunakan DataAdapter dan
function getResult(). DataAdapter digunakan agar data
tersebut dapat diambil dari database
dengan menggunakan suatu variabel global
(Public). Agar variabel tersebut
dapat ditampilkan, maka perlu dikonversi terlebih dahulu ke variabel lain dengan tipe data DataTable yang dimana pada DataTable ini, nilai dari DataAdapter diubah menjadi bentuk array sehingga dapat ditampilkan dalam DataGridView. Kemudian terdapat getResult() untuk membungkus semua
tahapan tersebut yang nantinya akan dibangun di dalam Module Koneksi.
Gambar 3. 76 Menambahkan DataAdapter dan getResult()
66. Disini
kita akan membuat procedure Login(). Data login berupa username dan
password yang diinputkan pengguna. Berikut kode program procedure global login pada Module proses.
Gambar 3. 77 Procedure Login()
67. Lalu
kita gunakan procedure Login() pada halaman login. Procedure Login() dipanggil ketika btnLogin
di klik.
Gambar 3. 78 Memanggil procedure Login()
68. Setelah
itu jalankan aplikasi, maka tampilan awal adalah halaman login.
Gambar 3. 79 Halaman login
69. Kita
coba untuk memasukkan username dan password yang salah.
Gambar 3. 80 Memasukkan username dan password yang salah
70. Maka
terdapat keterangan seperti berikut.
Gambar 3. 81 Keterangan bahwa username dan password salah
71. Selanjutnya
memasukkan username dan password dari admin.
Gambar 3. 82 Memasukkan username dan password dari admin
72. Maka
terdapat keterangan seperti dibawah ini.
Gambar 3. 83 Keterangan Admin berhasil masuk
73. Maka
akan ditujukan pada halaman beranda untuk Admin.
Gambar 3. 84 Halaman beranda Admin
74. Kemudian
memasukkan username dan password dari Petugas.
Gambar 3. 85 Memasukkan username dan password dari Petugas
75. Maka
terdapat keterangan seperti berikut.
Gambar 3. 86 Keterangan bahwa Petugas berhasil masuk
76. Maka
akan ditujukan pada halaman beranda untuk Petugas.
Gambar 3. 87 Halaman beranda Petugas
3.4
Menampilkan Data
3.4.1 Tampil Obat
1.
Setelah user
melakukan login baik Admin atau Petugas,
maka akan diarahkan ke halaman beranda. Halaman beranda tersebut nantinya akan
menampilkan data-data obat. Perhatikan pada DFD Level 2 Proses 5 yang merupakan
proses KelolaObat.
Gambar 3. 88 DFD Level 2 Proses 5
2.
Lalu perlu kita deklarasikan function TampilObat pada Module proses.vb,
tanpa parameter dan memiliki tipe data DataTable.
Gambar 3. 89 Deklarasi function TampilObat
3.
Setelah itu kita deklarasikan variabel-variabel
yang ingin kita perlukan, seperti query
dan variabel DataTable itu sendiri.
Gambar 3. 90 Deklarasi variabel query dan DataTable
4.
Deklarasi query
tersebut bertujuan untuk menjoinkan
tabel obat dan jenisobat, lalu menjadikan atribut yang tampil sesuai dengan yang
diinginkan.
Gambar 3. 91 Deklarasi query untuk menjoinkan tabel obat dan jenisobat
5.
Query
tersebut kemudian akan terhubung ke database
dan dari database akan mendapatkan
hasil query tersebut. Pada query SELECT kita menggunakan function getResult untuk mengambil data dari database berdasarkan dengan query
yang terhubung, dan hasilnya akan disimpan sebagai dt yang merupakan nilai kembali pada function TampilObat.
Gambar 3. 92 Nilai dt yang menyimpan hasil nilai query
6.
Kemudian kita memanggil TampilObat pada formBeranda.
Untuk menampilkan data obat, maka kita buat pada FormBeranda_Load. Lalu klik FormBeranda
dua kali untuk membangun method ini.
Gambar 3. 93 Kode program untuk menampilkan data obat
7.
Jalankan aplikasi. Berikut adalah halaman
beranda ketika aplikasi dijalankan. Disana telah muncul beberapa data obat.
Gambar 3. 94 Halaman beranda beserta data obat yang ditampilkan
3.4.2 Tampil Level
1.
Pada aplikasi ini juga terdapat menu Level.
Sehingga apabila menu Level di klik, maka akan muncul tampil level. Proses
tampil level ini hanya Admin yang dapat mengelola. Maka dari itu kita buat
terlebih dahulu formLevel menggunakan
Inhetited Form, sama dengan saat
kita membuat formBeranda.
Gambar 3. 95 Membuat formLevel
2.
Pilih MasterMenu.
Klik OK.
Gambar 3. 96 Memilih MasterMenu
3.
Selanjutnya kita susun objek-objek kontrol pada formLevel sebagai berikut.
Gambar 3. 97 Menyusun objek-objek kontrol
4.
Lalu atur properties
berdasarkan tabel berikut.
Tabel 3. 4 Mengatur properties form level
|
Object |
Properties |
Nilai |
|
formLevel |
Text |
Halaman Level |
|
Label1 |
Text |
Level |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumns |
AllCells |
|
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah Level |
Sehingga hasilnya seperti berikut.
Gambar 3. 98 Halaman Level
5.
Selanjutnya kita perhatikan DFD Level 2 Proses
2. Terlihat pada DFD tersebut bahwa method
TampilLevel tidak memerlukan
parameter. Proses tampil level hanya bisa dikelola oleh Admin saja.
Gambar 3. 99 DFD Level 2 proses 2
6.
Berikut function
TampilLevel yang digunakan pada Module
proses.vb.
Gambar 3. 100 Function TampilLevel
7.
Lalu kita tangani perpindahan menu beranda-level
dengan kode program berikut.
Gambar 3. 101 Menangani perpindahan menu beranda-level
8.
Kemudian memanggil TampilLevel pada formLevel.
Gambar 3. 102 Memanggil TampilLevel
9.
Setelah itu jalankan aplikasi.
Gambar 3. 103 Halaman beranda
10. Kita
coba klik menu Level, maka akan muncul data level.
Gambar 3. 104 Halaman level
3.4.3 Tampil User
1.
Kita juga memiliki menu User, dimana menu ini
untuk menampilkan data user. Maka kita buat formUser terlebih dahulu yang merupakan inherited dari MasterMenu.
Beri nama dengan formUser.vb.
Gambar 3. 105 Membuat formUser
2.
Pilih MasterMenu
lalu klik OK.
Gambar 3. 106 Pilih MasterMenu
3.
Selanjutnya susun objek kontrol pada formUser seperti berikut.
Gambar 3. 107 Menyusun objek kontrol
4.
Kemudian atur properties nya berdasarkan tabel berikut.
Tabel 3. 5 Mengatur properties form user
|
Object |
Properties |
Nilai |
|
formUser |
Text |
Halaman User |
|
Label1 |
Text |
User |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumnsMode |
AllCells |
|
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah User |
Sehingga hasinya seperti berikut.
Gambar 3. 108 Mengatur properties
5.
Perhatikan DFD Level 2 Proses 3 berikut. Pada
menu User ini dapat dikelola oleh Admin dan Petugas. Tetapi tampil user ini
hanya dilakukan oleh Admin saja, tanpa memerlukan parameter.
Gambar 3. 109 DFD Level 2 Proses 3
6.
Berikut ini function
TampilUser yang di bangun pada Module
proses.vb.
Gambar 3. 110 Function TampilUser
7.
Lalu kita akan mengelola menuUser_Click di MasterMenu
dengan mengklik dua kali pada menu User pada halaman MasterMenu.
Gambar 3. 111 Mengelola menu user
8.
Kemudian kita memanggil TampilUser di formUser
dengan mengklik dua kali di formUser.
Lalu masukkan kode program berikut untuk mengisi DataGridView DG dengan memanggil method TampilUser.
Gambar 3. 112 Memanggil TampilUser di formUser
9.
Berikut ini adalah tampilan menu User pada Admin.
Gambar 3. 113 Halaman user
3.4.4 Tampil Jenis
1.
Kita juga memiliki menu Jenis, dimana menu ini
untuk menampilkan data jenis obat. Maka kita buat formJenis terlebih dahulu yang merupakan inherited dari MasterMenu.
Beri nama dengan formJenis.vb.
Gambar 3. 114 Membuat menu Jenis
2.
Pilih MasterMenu
lalu klik OK.
Gambar 3. 115 Memilih MasterMenu
3.
Selanjutnya susun objek kontrol pada formJenis seperti berikut.
Gambar 3. 116 Menyusun objek kontrol
4.
Kemudian atur properties nya berdasarkan tabel berikut.
Tabel 3. 6 Mengatur properties form jenis
|
Object |
Properties |
Nilai |
|
formJenis |
Text |
Halaman Jenis Obat |
|
Label1 |
Text |
Jenis Obat |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumnsMode |
AllCells |
|
|
Button 1 |
Name |
btnTambah |
|
Text |
Tambah Jenis Obat |
Sehingga hasinya seperti berikut.
Gambar 3. 117 Mengatur properties
5.
Perhatikan DFD Level 2 Proses 4 berikut. Pada
menu Jenis ini Admin dan Petugas dapat mengakses, tetapi ada sedikit perbedaan.
Admin diberikan akses untuk dapat melihat jenis obat melalui menu tersebut.
Sedangkan Petugas tidak diberikan akses untuk mengklik menu tersebut. Petugas
mengakses TampilJenis melalui combo box
pada saat ingin menambahkan atau merubah data obat.
Gambar 3. 118 DFD Level 2 Proses 4
6.
Berikut ini function
TampilJenis yang di bangun pada Module
proses.vb.
Gambar 3. 119 Function TampilJenis
7.
Lalu kita akan mengelola menuJenis_Click di MasterMenu
dengan mengklik dua kali pada menu Jenis pada halaman MasterMenu.
Gambar 3. 120 Mengelola menu Jenis
8.
Kemudian kita memanggil TampilJenis di formJenis
dengan mengklik dua kali di formJenis.
Lalu masukkan kode program berikut untuk mengisi DataGridView DG dengan memanggil method TampilJenis.
Gambar 3. 121 Memanggil TampilJenis di formJenis
9.
Berikut ini adalah tampilan menu Jenis pada Admin.
Gambar 3. 122 Halaman jenis obat
3.4.5 Tampil Catatan
1.
Kita juga memiliki menu Catatan, dimana menu ini
untuk menampilkan data catatan. Maka kita buat formCatatan terlebih dahulu yang merupakan inherited dari MasterMenu.
Beri nama dengan formCatatan.vb.
Gambar 3. 123 Membuat menu Catatan
2.
Pilih MasterMenu
lalu klik OK.
Gambar 3. 124 Memilih MasterMenu
3.
Selanjutnya susun objek kontrol pada formCatatan seperti berikut.
Gambar 3. 125 Menyusun objek kontrol
4.
Kemudian atur properties nya berdasarkan tabel berikut.
Tabel
3. 7 Mengatur properties formCatatan
|
Object |
Properties |
Nilai |
|
formCatatan |
Text |
Halaman Catatan |
|
Label1 |
Text |
Catatan |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumns |
AllCells |
Sehingga hasilnya seperti berikut.
Gambar 3. 126 Mengatur properties
5.
Berikut ini function
TampilCatatan yang di bangun pada Module
proses.vb.
Gambar 3. 127 Function TampilCatatan
6.
Lalu kita akan mengelola menuCatatan_Click di MasterMenu
dengan mengklik dua kali pada menu Catatan pada halaman MasterMenu.
Gambar 3. 128 Mengelola memuCatatan_Click
7.
Kemudian kita memanggil TampilCatatan di formCatatan
dengan mengklik dua kali di formCatatan.
Lalu masukkan kode program berikut untuk mengisi DataGridView DG dengan memanggil method TampilCatatan.
Gambar 3. 129 Memanggil TampilCatatan di formCatatan
8.
Berikut ini adalah tampilan menu Catatan.
Catatan hanya bisa ditampilkan saja, oleh karena itu kita tidak perlu
menambahkan button Tambah Catatan.
Gambar 3. 130 Halaman catatan
3.4.6 Tampil Obat
1.
Kita juga memiliki menu Obat, dimana menu ini
untuk menampilkan data obat. Maka kita buat formObat terlebih dahulu yang merupakan inherited dari MasterMenu.
Beri nama dengan formObat.vb.
Gambar 3. 131 Membuat
menu Obat
2.
Pilih MasterMenu
lalu klik OK.
Gambar 3. 132 Memilih
MasterMenu
3.
Selanjutnya susun objek kontrol pada formObat seperti berikut.
Gambar 3. 133 Menyusun
objek kontrol
4.
Kemudian atur properties nya berdasarkan tabel berikut.
Tabel
3. 8 Mengatur properties formObat
|
Object |
Properties |
Nilai |
|
formObat |
Text |
Halaman Obat |
|
Label1 |
Text |
Data Obat |
|
DataGridView1 |
Name |
DG |
|
AutoSizeColumns |
AllCells |
|
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah Obat |
Sehingga hasilnya seperti berikut.
Gambar 3. 134 Mengatur properties
5.
Berikut ini function
TampilObat yang di bangun pada
Module proses.vb.
Gambar 3. 135 Function TampilObat
6.
Lalu kita akan mengelola menuObat_Click di MasterMenu
dengan mengklik dua kali pada menu Obat pada halaman MasterMenu.
Gambar 3. 136 Mengelola
menuObat_Click
7.
Kemudian kita memanggil TampilObat di formObat
dengan mengklik dua kali di formObat.
Lalu masukkan kode program berikut untuk mengisi DataGridView DG dengan memanggil method TampilObat.
Gambar 3. 137 Memanggil
TampilObat di formObat
8.
Berikut ini adalah tampilan menu Obat.
Gambar 3. 138 Halaman obat
3.5
Menambahkan Data
3.5.1 MysqlCommand, ExecuteNonQuery, dan Function
Eksekusi
1.
Pertama-tama kita buat terlebih dahulu deklarasi
variabel myCmd dengan tipe data MySqlCommand
dan deklarasi function Eksekusi yang mengembalikan nilai boolean pada koneksi.vb. karena disini kita akan menggunakan class
MySqlCommand.
Gambar 3. 139 Souce code dari koneksi.vb
3.5.2 Proses Tambah Level
1.
Perhatikan DFD Level 2 Proses 2 berikut. Tambah
level ini mempunyai parameter yang berupa Data Level. Tabel level dari database ini mempunyai 2 atribut yakni idlevel dan level. Atribut idlevel tersebut
merupakan Auto Increment sehingga
pada tambah level tidak perlu diperhitungkan, dan hanya sisa atribut level saja
yang akan kita bangun formnya.
Gambar 3. 140 DFD Level 2 Proses 2
2.
Kita buat form
biasa artinya bukan inherited form
untuk form tambah level ini dengan
memilih menu PROJECT lalu klik Add Windows Form. Beri nama dengan formTambahLevel.vb. klik Add.
Gambar 3. 141 Membuat formTambahLevel
3.
Kemudian susun objek kontrol ke dalam formTambahLevel berikut.
Gambar 3. 142 Menyusun objek kontrol formTambahLevel
4.
Lalu atur properties
nya menyesuaikan dengan tabel berikut.
Tabel 3. 9 Mengatur properties pada formTambahLevel
|
Object Control |
Properties |
Value |
|
formTambahLevel |
Text |
Halaman Tambah Level |
|
StartPosition |
Center Screen |
|
|
Label1 |
Text |
Level |
|
TextBox1 |
Name |
txtLevel |
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah |
|
|
Button2 |
Name |
btnBatal |
|
Text |
Batal |
Sehingga hasilnya seperti berikut.
Gambar 3. 143 Mengatur properties pada formTambahLevel
5.
Selanjutnya kita buat method TambahLevel()
pada Module proses.vb dibawah method TampilLevel().
Gambar 3. 144 Membuat method TambahLevel()
6.
Perhatikan formLevel
berikut. Pada form tersebut terdapat btnTambah. Pada saat kita klik button tersebut, maka akan memunculkan formTambahLevel. Lalu untuk menambahkan
kode programnya, kita klik btnTambah
tersebut dua kali.
Gambar 3. 145 Design halaman level
7.
Maka akan otomatis akan muncul kode program
sebagai berikut.
Gambar 3. 146 Kode program btnTambah_Click
8.
Kemudian masukkan kode program berikut untuk
menampilkan formTambahLevel di dalam
method btnTambah_Click tersebut.
Gambar 3. 147 Menambahkan kode program untuk menampilkan formTambahLevel
9.
Lalu kita akan memanggil method TambahLevel()
dari btnTambah pada formTambahLevel. Sebelumnya kita klik
dua kali terlebih dahulu pada btnBatal.
Gambar 3. 148 Design halaman tambah level
10. Masukkan
kode program berikut.
Gambar 3. 149 Memasukkan kode program
11. Selanjutnya
pada btnTambah kita klik dua kali,
lalu masukkan kode program untuk memanggil procedure
TambahLevel.
Gambar 3. 150 Memanggil procedure TambahLevel
12. Kemudian,
kita kosongkan TextBox pada formTambahLevel agar saat menambahkan
data level selanjutnya, bekas isian sebelumnya sudah kosong atau tidak tersisa
lagi pada TextBox. Kode program ini
dibangun pada method formTambahLevel_Load.
Gambar 3. 151
Mengosongkan TextBox pada formTambahLevel
13. Setelah
itu jalankan aplikasi, masuk sebagai Admin.
Gambar 3. 152 Halaman beranda
14. Lalu
klik menu Level. Kemudian klik button
Tambah Level.
Gambar 3. 153 Halaman level
15. Maka
akan diarahkan ke halaman Tambah Level.
Gambar 3. 154 Halaman Tambah Level
16. Kita
isikan data level tersebut. Setelah di isi, klik button Tambah.
Gambar 3. 155 Mengisi data level
17. Maka
akan muncul keterangan dibawah ini setelah berhasil ditambahkan.
Gambar 3. 156 Keterangan bahwa tambah level berhasil
18. Setelah
kita klik OK, maka langsung
diarahkan ke halaman level, dan disana sudah terdapat data level yang baru saja
kita tambahkan tadi.
Gambar 3. 157 Halaman level
3.5.3 Proses Tambah User
1.
Perhatikan DFD Level 2 Proses 2 berikut. Menu
User ini dapat di kelola oleh Admin dan Petugas. Untuk proses Tambah user hanya
dapat dilakukan oleh Admin saja. Kelola user
ini diperlukan parameter yang berupa data user pada proses tambah user. Pada
tabel user tersebut, terdapat
beberapa atribut diantaranya iduser,
idlevel, username, password, namauser, alamat, dan nohp. Adapun
atribut iduser merupakan Auto Increment sehingga paramater yang
digunakan yaitu idlevel, username, password, namauser, alamat, dan nohp.
Gambar 3. 158 DFD Level
2 Proses 3
2.
Kita buat form
biasa artinya bukan inherited form
untuk form tambah user ini dengan
memilih menu PROJECT lalu klik Add Windows Form. Beri nama dengan formTambahUser.vb. klik Add.
Gambar 3. 159 Membuat formTambahUser
3.
Kemudian susun objek kontrol ke dalam formTambahUser berikut.
Gambar 3. 160 Menyusun
objek kontrol formTambahUser
4.
Lalu atur properties
nya menyesuaikan dengan tabel berikut.
Tabel
3. 10 Mengatur properties pada formTambahUser
|
Object Control |
Properties |
Value |
|
formTambahUser |
Text |
Halaman Tambah User |
|
StartPosition |
Center Screen |
|
|
Label1 |
Text |
Nama |
|
Label2 |
Text |
Alamat |
|
Label3 |
Text |
No HP |
|
Label4 |
Text |
Username |
|
Label5 |
Text |
Password |
|
Label6 |
Text |
Level |
|
TextBox1 |
Name |
txtNama |
|
TextBox2 |
Name |
txtAlamat |
|
TextBox3 |
Name |
txtNoHP |
|
TextBox4 |
Name |
txtUser |
|
TextBox5 |
Name |
txtPass |
|
UseSystemPasswordChar |
True |
|
|
ComboBox1 |
Name |
CB |
|
DropDownStyle |
DropDownList |
|
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah |
|
|
Button2 |
Name |
btnBatal |
|
Text |
Batal |
Sehingga hasilnya seperti berikut.
Gambar 3. 161 Mengatur properties pada formTambahUser
5.
Selanjutnya kita buat method TambahUser() pada
Module proses.vb dibawah method TampilUser().
Gambar 3. 162 Membuat method TambahUser()
6.
Kemudian masukkan kode program berikut untuk
menampilkan formTambahUser di dalam method btnTambah_Click tersebut.
Gambar 3. 163 Menambahkan kode program untuk menampilkan formTambahUser
7.
Kita perlu menyediakan isi pada ComboBox CB pada formTambahUser agar
dapat digunakan untuk menampilkan data level. ComboBox ini sudah seharusnya terisi data level ketika formTambahUser dimuat/dimunculkan. Maka
dari itu, pengisian ComboBox CB dapat kita lakukan pada method formTambahUser_Load. Oleh karena itu, kita buat method tersebut dengan mengklik dua kali
pada formTambahUser. Lalu masukkan
kode program berikut dengan memanggil method
TampilLevel.
Gambar 3. 164
Menyediakan isi pada ComboBox CB pada
formTambahUser
8.
Setelah itu jalankan aplikasinya sebagai Admin.
Pada menu User, klik Tambah User.
Gambar 3. 165 Halaman
user
9.
Lalu akan diarahkan pada halaman tambah user
berikut. Pada halaman ini terdapat beberapa level yang akan dipilih user sesuai dengan bidangnya.
Gambar 3. 166 Halaman
tambah user
10. Lalu
kita akan memanggil method TambahUser() dari btnTambah pada formTambahUser.
Klik dua kali terlebih dahulu pada btnTambah
pada formTambahUser.
Gambar 3. 167 Memanggil
method TambahUser()
dari btnTambah pada formTambahUser
11. Masukkan
juga kode program berikut untuk btnBatal_Click.
Gambar 3. 168
Memasukkan kode program untuk btnBatal_Click
12. Kemudian,
kita kosongkan TextBox pada formTambahUser agar saat menambahkan
data user selanjutnya, bekas isian
sebelumnya sudah kosong atau tidak tersisa lagi pada TextBox. Kode program ini dibangun pada method formTambahUser_Load.
Gambar 3. 169
Mengosongkan TextBox pada
formTambahUser
13. Setelah
itu jalankan aplikasi, masuk sebagai Admin. Lalu masuk ke menu User. Klik Tambah User.
Gambar 3. 170 Halaman user
14. Maka
akan diarahkan ke Halaman Tambah User.
Gambar 3. 171 Halaman Tambah
User
15. Isikan
data user seperti berikut lalu klik Tambah.
Gambar 3. 172 Halaman
Tambah User
16. Maka
akan muncul keterangan dibawah ini setelah berhasil ditambahkan.
Gambar 3. 173 Keterangan
bahwa tambah data user berhasil
17. Setelah
kita klik OK, maka langsung
diarahkan ke halaman user, dan disana
sudah terdapat data user yang baru
saja kita tambahkan tadi.
Gambar 3. 174 Halaman user
18. Tampilan
pada database pada tabel user sebagai berikut.
Gambar 3. 175 Tampilan database pada tabel user
3.5.4 Proses Tambah Jenis
1.
Proses tambah jenis hanya dapat dilakukan oleh
Admin. Kita buat form biasa artinya
bukan inherited form untuk form tambah jenis ini dengan memilih
menu PROJECT lalu klik Add Windows Form. Beri nama dengan formTambahJenis.vb. klik Add.
Gambar 3. 176 Membuat formTambahJenis
2.
Kemudian susun objek kontrol ke dalam formTambahJenis berikut.
Gambar 3. 177 Menyusun
objek kontrol formTambahJenis
3.
Lalu atur properties
nya menyesuaikan dengan tabel berikut.
Tabel
3. 11 Mengatur properties pada formTambahJenis
|
Object Control |
Properties |
Value |
|
formTambahJenis |
Text |
Halaman Tambah Jenis |
|
StartPosition |
Center Screen |
|
|
Label1 |
Text |
Jenis Obat |
|
TextBox1 |
Name |
txtJenis |
|
TextBox2 |
Name |
txtAlamat |
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah |
|
|
Button2 |
Name |
btnBatal |
|
Text |
Batal |
Sehingga hasilnya seperti berikut.
Gambar 3. 178 Mengatur properties pada formTambahJenis
4.
Selanjutnya kita buat method TambahJenis()
pada Module proses.vb dibawah method TampilJenis().
Gambar 3. 179 Membuat method TambahJenis()
5.
Kemudian masukkan kode program berikut untuk
menampilkan formTambahJenis di dalam
method btnTambah_Click tersebut.
Gambar 3. 180 Menambahkan kode program untuk
menampilkan formTambahJenis
6.
Lalu kita akan memanggil method TambahJenis()
dari btnTambah pada formTambahJenis. Klik dua kali terlebih
dahulu pada btnTambah pada formTambahJenis.
Gambar 3. 181 Memanggil method TambahJenis() dari btnTambah pada
formTambahJenis
1.
Masukkan juga kode program berikut untuk btnBatal_Click.
Gambar 3. 182
Memasukkan kode program untuk btnBatal_Click
2.
Kemudian, kita kosongkan TextBox pada formTambahJenis
agar saat menambahkan data jenis selanjutnya, bekas isian sebelumnya sudah
kosong atau tidak tersisa lagi pada TextBox.
Kode program ini dibangun pada method formTambahJenis_Load.
Gambar 3. 183
Mengosongkan TextBox pada
formTambahUser
3.
Setelah itu jalankan aplikasi, masuk sebagai
Admin. Lalu masuk ke menu Jenis. Klik Tambah
Jenis Obat.
Gambar 3. 184 Halaman jenis obat
4.
Maka akan diarahkan ke Halaman Tambah Jenis Obat.
Gambar 3. 185 Halaman
Tambah User
5.
Isikan data seperti berikut lalu klik Tambah.
Gambar 3. 186 Halaman
Tambah Jenis Obat
6.
Maka akan muncul keterangan dibawah ini setelah
berhasil ditambahkan.
Gambar 3. 187 Keterangan
bahwa tambah data berhasil
7.
Setelah kita klik OK, maka langsung diarahkan ke halaman jenis, dan disana sudah
terdapat data jenis yang baru saja kita tambahkan tadi.
Gambar 3. 188 Halaman jenis
obat
3.5.5 Proses Tambah Obat
1.
Proses tambah jenis hanya dapat dilakukan oleh
Admin. Kita buat form biasa artinya
bukan inherited form untuk form tambah jenis ini dengan memilih
menu PROJECT lalu klik Add Windows Form. Beri nama dengan formTambahJenis.vb. klik Add.
Gambar 3. 189 Membuat formTambahObat
2.
Kemudian susun objek kontrol ke dalam formTambahJenis berikut.
Gambar 3. 190 Menyusun
objek kontrol formTambahObat
3.
Lalu atur properties
nya menyesuaikan dengan tabel berikut.
Tabel
3. 12 Mengatur properties pada formTambahJenis
|
Object Control |
Properties |
Value |
|
formTambahObat |
Text |
Halaman Tambah Obat |
|
StartPosition |
Center Screen |
|
|
Label1 |
Text |
Jenis Obat |
|
Label2 |
Text |
Nama |
|
Label3 |
Text |
Dosis |
|
Label4 |
Text |
Stok |
|
Label5 |
Text |
Harga (Rp) |
|
ComboBox1 |
Name |
CB |
|
DropDownStyle |
DropDownList |
|
|
TextBox1 |
Name |
txtNama |
|
TextBox2 |
Name |
txtDosis |
|
TextBox3 |
Name |
txtStok |
|
TextBox4 |
Name |
txtHarga |
|
Button1 |
Name |
btnTambah |
|
Text |
Tambah |
|
|
Button2 |
Name |
btnBatal |
|
Text |
Batal |
Sehingga hasilnya seperti berikut.
Gambar 3. 191 Mengatur properties pada formTambahObat
4.
Selanjutnya kita buat method TambahObat() pada
Module proses.vb dibawah method TampilObat(). Sebelumnya, method
berbeda dengan method penambahan
data yang sudah ada karena proses tambah obat ini disertai dengan proses
penyimpanan history ke dalam tabel catatan, seperti DFD dibawah ini.
Gambar 3. 192 DFD level
2 proses 5
5.
Pada tabel obat
memiliki atribut-atribut sebagai berikut.
Gambar 3. 193 Tabel
obat
6.
Sedangkan tabel catatan memiliki atribut-atribut sebagai berikut.
1.
Berdasarkan penjelasan tersebut, kita akan
membuat method TambahObat yang dimana selain menyimpan data ke tabel obat, juga
menyimpan history ke dalam tabel catatan.
Gambar 3. 195 Membuat method TambahObat()
2.
Kemudian masukkan kode program berikut untuk
menampilkan formTambahObat di dalam method btnTambah_Click tersebut.
Gambar 3. 196 Menambahkan kode program untuk
menampilkan formTambahObat
3.
Selanjutnya menyediakan isi pada ComboBox CB pada formTambahObat. ComboBos ini digunakan untuk menampilkan
data jenis obat. Untuk membangun method tersebut,
kita klik dua kali pada formTambahObat lalu
isikan kode program berikut dengan memanggil method TampilJenis.
Gambar 3. 197
Menyediakan isi pada ComboBox CB pada formTambahObat
4.
Jalankan aplikasi, lalu cek Jenis Obat di ComboBox pada halaman tambah obat.
Gambar 3. 198 Halaman
Tambah Obat
5.
Lalu kita akan memanggil method TambahObat() dari
btnTambah pada formTambahObat. Klik dua kali terlebih dahulu pada btnTambah pada formTambahObat. Lalu masukkan kode program berikut.
Gambar 3. 199 Memanggil
method TambahObat()
dari btnTambah pada formTambahObat
6.
Masukkan juga kode program berikut untuk btnBatal_Click.
Gambar 3. 200
Memasukkan kode program untuk btnBatal_Click
7.
Kemudian, kita kosongkan TextBox pada formTambahObat
agar saat menambahkan data obat selanjutnya, bekas isian sebelumnya sudah
kosong atau tidak tersisa lagi pada TextBox.
Kode program ini dibangun pada method formTambahObat_Load.
Gambar 3. 201
Mengosongkan TextBox pada
formTambahObat
8.
Setelah itu jalankan aplikasi, masuk sebagai
Admin. Lalu masuk ke menu Obat. Klik Tambah
Obat.
Gambar 3. 202 Halaman obat
9.
Maka akan diarahkan ke Halaman Tambah Obat.
Gambar 3. 203 Halaman
Tambah Obat
10. Isikan
data seperti berikut lalu klik Tambah.
Gambar 3. 204 Halaman
Tambah Obat
11. Maka
akan muncul keterangan dibawah ini setelah berhasil ditambahkan.
Gambar 3. 205 Keterangan
bahwa tambah data obat berhasil
12. Setelah
kita klik OK, maka langsung
diarahkan ke halaman obat, dan disana sudah terdapat data obat yang baru saja
kita tambahkan tadi.
Gambar 3. 206 Halaman
obat
13. Lalu
kita klik menu Catatan.
Gambar 3. 207 Halaman
catatan
14. Kemudian
kita coba Petugas yang menambahkan data obat. Pada halaman obat tampilannya
adalah sebagai berikut. Lalu klik Tambah Obat.
Gambar 3. 208 Halaman
obat
15. Maka
akan diarahkan ke Halaman Tambah Obat.
Gambar 3. 209 Halaman
Tambah Obat
16. Isikan
data seperti berikut lalu klik Tambah.
Gambar 3. 210 Halaman
Tambah Obat
17. Maka
akan muncul keterangan dibawah ini setelah berhasil ditambahkan.
Gambar 3. 211 Keterangan bahwa
tambah data obat berhasil
18. Setelah
kita klik OK, maka langsung
diarahkan ke halaman obat, dan disana sudah terdapat data obat yang baru saja
kita tambahkan tadi.
Gambar 3. 212 Halaman
obat
Komentar
Posting Komentar