DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
Modul ii
1. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Modul Kelas Programer Part II
Pada modul bagian II kita akan membahas bagaimana pembuatan form transaksi. Perlu diketahui
bahwa form transaksi dalam sebuah aplikasi merupkan satu form yang sangat vital, karena pokok dari
sebuah aplikasi adalah harus mampu mengolah transaksi yang terjadi pada sebuah sistem yang
selanjut nya dari transaksi ini akan bisa menghasilkan sebuah laporan yang bisa digunakan sebagai
analisa pada level menager dan juga sebagai control pada sebuah sistem yang ada pada suatu
organisasi atau perusahaan. Jadi untuk form transaksi ini akan sedikit berbeda dan mungkin akan lebih
sedikit panjang dalam proses pembuatan nya, so..konsen yach . Selamat mengikuti.
Oleh : Arik Sofan Tohir, S.Kom
2013
2. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Transaksi Penjualan Barang
Oke mas-mas dan mbak-mbak untu bagian ini kita akan coba belajar membuat sebuah form untuk
melakukan proses transaksi penjualan barang, dimana fungsi dari form ini adalah untuk mencatat
proses transaksi penjualan dan sekaligus form ini juga berfungsi untuk mengurangi stock barang yang
ada ketika terjadi penjualan. Karena form ini berbeda dengan form-form sebelum nya maka kita desain
form ini dari awal, berikut langkah-langkah nya :
1. Klik File New Form – Delphi, maka akan tercipta sebuah form baru seperti berikut
2. Lalu klik Save All (Ctrl + Shift + S) dan simpan pada Folder anak, simpan dengan nama
u_trans_jual
Berikut nya tekan tombol Save
Oleh : Arik Sofan Tohir, S.Kom
2013
3. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
3. Berikut nya atur telebih dahulu semua properties form nya.
Properties Name f_trans_jual
4. Berikut nya tambahkan terlebih dahulu data module nya (dm), cara nya klik File Use Unit
maka akan muncul jendela Use Unit
Lalu pilih u_dm.pas dan klik OK
5. Letakkan component Panel dan atur propeties Align alTop, Caption Kosongkan
6. Letakkan juga component TuniStroreProc, ganti properties name spTrans
7. Letakkkan juga component DataSource, ganti properties Name dsTrans, pada properties
DataSet hubungkan dengan spTrans
8. Letakkan component DbGrid dan atur properties Align alClient, properties DataSource
hubungkan dengan dsTrans
Oleh : Arik Sofan Tohir, S.Kom
2013
4. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
9. Berikut nya desain form seperti berikut ini
Untuk pertama kali kita buat dulu procedure untuk menciptakan nomor transaksi secara
otomatis, dimana fungsi ini kita buat berdasarkan waktu terjadi nya transksi. Cara membuat
nya Tekan tombol F12 maka akan tampil jendela editor, lalu pada bagian Private buat sebuah
procedure createNotransaksi
Berikut nya letakkan cursor pada akhir procedure dan tekan tombol Ctrl + Shift + C, maka akan
tercipta sebuah procedure baru secara otomatis dan ketikkan perintah diantara begin end
seperti berikut
Berikut nya cari Eveent OnShow form lalu diantara begin dan end, kemudian ketikkan code
program seperti berikut
Oleh : Arik Sofan Tohir, S.Kom
2013
5. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
10. Berikut nya hubungkan
t_det_jual_view
component
unistoreprocedure
dengan
store
procedure
Pilih tdet_jual_view lalu klik tombol Generate maka akan didapatkan sebuah tampilan seperti
berikut :
Lalu klik OK
Oleh : Arik Sofan Tohir, S.Kom
2013
6. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Masih pada unistoreProc sekarang klik kanan dan pilih Fields Editor dan akan muncul sebuah
kotak dialog, lalu klik kanan dan pilih Add All Fields
Berikut nya double klik pada DbGrid dan akan muncul kotak dialog dan pilih Add All Fields
Oleh : Arik Sofan Tohir, S.Kom
2013
7. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
11. Sekarang tambahkan satu component UniStoreProc dan ubah properties name menjadi
spTransAdd dan double klik pada spTransAdd lalu pilih tdet_jual_add
Selanjut nya klik generate, maka akan muncul tampilan seperti berikut
Berikut nya klik OK
Oleh : Arik Sofan Tohir, S.Kom
2013
8. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
12. Tambahkan satu component UniStoreProc dan ubah properties name menjadi spMjualAdd
dan double klik pada spMjualAdd lalu pilih tm_jual_add
Lalu click Generate maka akan muncul tampilan seperti berikut
13. Selanjutnya buka jendela code editor atau tekan F12, maka akan tampil jendela code editor
dan buat sebuah procedure untuk menyimpan data transaksi. Pada bagian public buat
prosedure seperti terlihat pada gambar berikut :
Oleh : Arik Sofan Tohir, S.Kom
2013
9. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
14. Berikut nya letakkan cursor pada akhir procedure / setelah tanda ; lalu tekan Ctrl +Shift + C,
maka scara otomatis akan terbentuk sebuah procedure baru seperti berikut :
Selanjut nya ketikkan code program diantara begin end, seperti berikut
15. Sekarang tambahkan satu component UniStoreProc dan ubah properties name menjadi
spupstock dan double klik pada spupstock lalu pilih sp_stock_kurang
Oleh : Arik Sofan Tohir, S.Kom
2013
10. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Lalu klik Generate maka akan muncul tampilan seperti berikut:
Selanjut nya klik OK
16. Sekarang masuk jendela code editor atau tekan F12, dan tambah kan procedure untuk
melakukan update stock dan letakkan procedure dibagian public, seperti berikut :
Berikutnya letakkan cursor di akhir procedure (setelah tanda ; ) lalu tekan Ctrl + Shift + C,
maka akan tercipta sebuah procedure baru seperti berikut
Ketikkan code program diantara begin end sperti berikut :
Oleh : Arik Sofan Tohir, S.Kom
2013
11. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
17. Berikut nya kita membuat sebuah function total belanja, dimana fungsi ini nanti digunakan
untuk melakukan proses perhitungan total belanja
Pada bagian public tambahkan sebuah function totalBelanja
Berikut nya letakkan cursor pada akhir function totalBelanja dan tekan Ctrl + Shift + C, maka secara
otomatis akan dibuatkan sebuah function baru, ketikkan code program diantara begin dan end
seperti berikut :
Sampai disini untuk persiapan procedure dan function transaksi sudah selesai, berikut nya kita
membuat form untuk melakukan pencarian data barang.
Pencarian data barang
Untuk membuat pencarian barang disini kita akan memanfaatkan shortcut, untuk membuat
shortcut kita menggunakan component TactionList, langkah-langkah nya sebagai berikut :
1. Letakkan coponent ActionList
2. Berikut nya double click pada component ActionList, maka akan muncul jendela seperti
berikut :
Oleh : Arik Sofan Tohir, S.Kom
2013
12. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Untuk menambahkan ActionList klik New Action, buat tiga (3) ActionList dan atur beberapa
properties nya seperti berikut :
Nama Component
Action1
Action2
Action3
Properties
Name : F1
Shortcut : F1
Name : F2
Shortcut : F2
Name : F3
Shortcut : F3
Sehingga akan didapatkan sebuah tampilan seperti berikut
3. Berikut nya click File New Other maka akan muncul jendela New Items pada jendela
sebalah kiri cari Inheritable Items, lalu pada jendela sebelah kanan cari f_induk_cari
Oleh : Arik Sofan Tohir, S.Kom
2013
13. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
4. Setelah itu klik OK maka akan muncul sebuah form baru, lalu atur beberapa properties
Form
Name : f_cari_barang
Label1
Caption : Nama Barang
5. Berikut nya simpan form dengan menekan tombol Save All dan letakkan form ini pada folder
anak. Untuk penamaan unit di beri nama u_cari_barang
Selanjut nya click Save
6. Masih pada form pencarian barang, selanjut nya lakukan double click pada spcari maka akan
muncul jendel dialog, cari tab Stored Proc Call Generator. Pada Stored Procedure Name cari
sp_cari_barang lalu klik Generate dan terakhir klik OK
Oleh : Arik Sofan Tohir, S.Kom
2013
14. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Selanjut nya klik kanan pada spcari pilih Field Editor maka akan muncul jendela Field Editor,
pada jendela field editor klik kanan dan cari Add All Fields atau bisa menggunakan shortcut
Ctrl + F
Selanjutnya double click pada dbgrid dan cari click menu Add all fields maka akan didapatkan
tampilan seperti berikut
Setelah langkah ini selesai, berikut nya kita menghubungkan form ini dengan ActionList,
dimana ketika terjadi penekanan tombol F1 maka Form pencarian barang akan muncul dan
ketika barang sudah di pilih maka secara otomatis barang yang kita pilih dimasukkan kedalam
daftar penjualan barang.
7. Kembali ke form f_trans_jual dan double click pada ActionList1 lalu pada jendela sebelah
kanan pilih F1 lalu pada Object Inspector cari Events OnExecute
Oleh : Arik Sofan Tohir, S.Kom
2013
15. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Berikut nya lakukan double click maka akan tampil jendela code editor dan ketikkan code
program seperti berikut
Selanjutnya atur form pencarian barang pada posisi Available Form, cara nya klik menu Project
Options Forms
Lakukan double click pada f_cari_barang, maka secara otomatis f_cari_barang akan berpindah
ke jendela sebelah kanan.
Oleh : Arik Sofan Tohir, S.Kom
2013
16. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
8. Selanjut kita membuat tampilan untuk merubah jumlah pembelian, langkah nya sebagai
berikut :
- Sebelum membuat form untuk melakukan perubahan data jumlah pembelian maka perlu
kita persiapkan terlebih dahulu Store Procedure untuk melakukan perubahan jumlah
penjualan, ketikkan script sql berikut pada code MySQL
-
Selanjutnya tambahkan component TuniStoreProc dan ubah properties Name menjadi
spupqty
-
Selanjut nya double click pada spupqty dan pada tab Stored Proc Call Generator dan cari
sp_ubah_qty
-
-
Lalu click generate dan OK
Lanhkah berikut nya adalah buat sebuah form baru dari menu File New Form, maka
akan tercipta form baru, berikut nya simpan dengan nama U_ubah_qty dan taruh pada
folder anak
Selanjut nya ganti propertiees Name pada form menjadi f_ubah_qty
Selanjut nya pada events OnClose lakukan double click dan tambahkan secript
Action:=cafree diantara begin dan end.
Oleh : Arik Sofan Tohir, S.Kom
2013
17. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
-
Atur form sedemikian rupa seperti terlihat pada gambar berikut
-
Click pada Edit1 dan cari Events OnKeyPress lalu double click dan ketikkan script berikut
diantara begin dan end
9. Berikut nya kembali keform transaksi barang dan pilih menu Project Options Forms,
pindahkan f_ubah_qty ke jendela sebalah kanan dengan melakukan double click
-
Berikut nya double click pada ActionList dan pilih F2 dan cari Events OnExecute
Oleh : Arik Sofan Tohir, S.Kom
2013
18. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Ketikkan potongan program seperti berikut
10. Selanjut nya kita akan membuat tombol untuk melakukan pembayaran dimana fungsi nya
untuk menghitung sisa pembayaran dan sekaligus melakukan cetak ke printer, langkahlangkah nya sebagai berikut
- Sebelum kita siapkan dulu rancangan report diman report ini berfungsi untuk mencetak
struk belanja ke printer, letakkan komponen frxdbdataset dan frxreport seperti gambar
berikut.
-
Klik pada frxDBDataset1 dan cari properties dataset dan pilih spTrans, seperti berikut
-
Selanjut nya double click pada frxReport1 maka akan muncul sebuah form baru lalu cari
menu Report Data
Oleh : Arik Sofan Tohir, S.Kom
2013
19. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
-
Maka akan muncul tampilan seperti berikut
-
Centang frxDBDatase1 lalu klik OK
Maka sekarang tampilan akan seperti berikut
Oleh : Arik Sofan Tohir, S.Kom
2013
20. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
-
Selanjut nya cari menu Insert Band pada menu paling kiri seperti berikut
Lalu klik secara berturut-turut, ReportTitle, Header, Master Data, ketika anda mengklik
Master Data, akan muncul sebuah kotak dialog seperti berikut
Maka pilih frxDBDataSet1 lalu klik OK
Oleh : Arik Sofan Tohir, S.Kom
2013
21. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
-
Berikut nya desain laporan seperti berikut, untuk meletakkan keterangan silahkan anda
cari component Text Object pada palette sebelah kiri
Dengan comonent text object desain model report seperti berikut
-
Selanjut nya untuk mengisi MasterData1, perhatikan jendela paling kanan seperti
terlihat pada gambar berikut
-
Letakkan nama, qty, harga_jual dan subtotal ke MasterData1 dengan cara click dan
tahan lalu taruh ke ke MasterData1 sehingga tampilan pada MasterData1 seperti
berikut
Selanjut nya klik simpan dan taruh pada folder Laporan, simpan dengan nama fr_nota.
Untuk desain laporan sudah selesai, berikut nya kita akan menghubungkan laporan ini ke
form transaksi dan memangil report ini ketika terjadi transaksi pembayaran.
11. Berikut nya buat form baru File New Form dan atur properties Name menjadi f_bayar,
dan simpan di folder Anak dengan nama u_bayar
Oleh : Arik Sofan Tohir, S.Kom
2013
22. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
12. Masih pad f_bayar sekarang cari events OnClose dan ketikkan code program berikut diantara
begin dan End.
Action := CaFree;
13. Desain form seperti terlihata pa da gambar berikut
Selanjut nya atur properties edit1
Text : kosongkan
Nama : mBayar
- Selanjut nya kita akan membuat procudere dan function untuk memformat isi mBayar
dalam baentuk rupiah, Tekan tombol F12 maka akan masuk pada jendela code editor dan
pada Private buat procedure seperti berikut
-
Selanjutnya letakkan cursor pada akhir procedure dan tekan Ctrl + Shift + C, maka secara
otomatis akan dibuatkan sebuah procedure baru dan tambahkan code program diantara
begin dan End seperti terlihat pada gambar berikut :
Oleh : Arik Sofan Tohir, S.Kom
2013
23. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
-
Click pada componenet mBayar dan cari Events OnChange dan ketikkan potongan
program seperti berikut :
-
Masih pada events mbayar, sekarang cari Events OnKeypress dan lakukan double click
setelah itu ketikkan code program seperti berikut
-
Atur f_bayar pada Availabel Forms dengan mengklik menu Project Options Forms
dan pindahkan f_bayar pada jendela sebalah kanan seperti terlihat pada gambar berikut
Double click f_bayar dan Klik OK
Oleh : Arik Sofan Tohir, S.Kom
2013
24. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
14. Kembali ke f_trans_jual dan click ActionList dan cari menu F3
lalu cari events OnExecute dan double klik dan akan masuk ke jendela code editor dan
ketikkan program seperti berikut
15. Selanjut nya kita menghubungkan form pejualan dengan menu utama langkah-langkah nya
- Pastikan bahwa form transaksi sudah berada pada Availabel Forms, cara ngecek nya lewat
menu Project Options Form, jika belum berada pada Availabel Forms maka klik
lakukan double pada Form penjualan sehingga form penjualan akan berpindah pada
jendela sebalah kanan (berada pada posisi Available Forms)
Oleh : Arik Sofan Tohir, S.Kom
2013
25. Kelas Programer
Sekolah Tinggi Manajemen Informatika Dan Komputer (STMIK) KADIRI KEDIRI
Buka Form menu dan double Click Mainmenu lalu tambahkan menu Transaksi Point Of Sale
(POS)
-
Selanjut nya double click pada Menu Point Of Sale (POS) dan ketikkan code program
diantara begin end seperti dibawah ini :
-
Oleh : Arik Sofan Tohir, S.Kom
2013