is 532 praktikum pemrograman visual

Upload: vanchaqimoet

Post on 13-Jul-2015

283 views

Category:

Documents


0 download

TRANSCRIPT

Politeknik Telkom

Pemrograman Visual

PEMROGRAMAN VISUAL

POLITEKNIK TELKOM BANDUNG 2009

i

Politeknik Telkom

Pemrograman Visual

PENULIS: SURYATININGSIH, S.T. LUTCE RUSTYANA, S.T. RITA RISMALA YOGI ARJAN

Dilarang menerbitkan kembali, menyebarluaskan, atau menyimpan baik sebagian maupun seluruh isi buku dalam bentuk dan dengan cara apapun tanpa izin tertulis dari Politeknik Telkom Hak cipta dilindungi undang-undang @ Politeknik Telkom 2008 No part of this document may be copied, reproduced, printed, distributed, modified, removed and amended in any form by any means without prior written authorization of Telkom Polytechnic. Copyright @ 2009 Telkom Polytechnic. All rights reservedii

Politeknik Telkom

Pemrograman Visual

KATA PENGANTAR

Assalamualaikum Wr. Wb Segala puji bagi Allah SWT karena dengan karunia-Nya courseware ini dapat diselesaikan. Atas nama Politeknik Telkom, kami sangat menghargai dan ingin menyampaikan terima kasih kepada penulis, penerjemah dan penyunting yang telah memberikan tenaga, pikiran, dan waktu sehingga courseware ini dapat tersusun. Tak ada gading yang tak retak, di dunia ini tidak ada yang sempurna, oleh karena itu kami harapkan para pengguna buku ini dapat memberikan masukan perbaikan demi pengembangan selanjutnya. Semoga courseware ini dapat memberikan manfaat dan membantu seluruh Sivitas Akademika Politeknik Telkom dalam memahami dan mengikuti materi perkuliahan di Politeknik Telkom. Amin. Wassalamualaikum Wr. Wb. Bandung, Desember 2007

Christanto Triwibisono Wakil Direktur I Bidang Akademik & Pengembangan

iii

Politeknik Telkom

Pemrograman Visual

DAFTAR ISI KATA PENGANTAR ............................................................................................... iii DAFTAR ISI ................................................................................................................ iv DAFTAR GAMBAR ................................................................................................. vii 1 PEMROGRAMAN VISUAL ...................................................................... 1-1 1.1 Visual Programming ................................................................................... 1-2 1.2 Integrated Development Environment.................................................. 1-2 1.3 Rapid Application Development ............................................................. 1-4 2 PENGENALAN IDE BORLAND DELPHI ............................................ 2-1 2.1 Instalasi Borland Delphi ............................................................................ 2-2 2.2 Pengenalan IDE Borland Delphi .............................................................. 2-5 2.2.1 Main Menu ................................................................................................... 2-5 2.2.2 Code Editor ................................................................................................. 2-6 2.2.3 Component Palette ................................................................................... 2-6 2.2.4 Form View ................................................................................................... 2-7 2.2.5 Object Inspector ........................................................................................ 2-7 2.3 File Project, Unit dan Form Borland Delphi ........................................ 2-8 2.3.1 Project File ................................................................................................... 2-8 2.3.2 Unit File ........................................................................................................ 2-9 2.3.3 Form File ...................................................................................................... 2-9 2.4 Event Driven Programming...................................................................... 2-9 2.5 Properties .................................................................................................... 2-9 2.6 Event ........................................................................................................... 2-10 2.7 Container ................................................................................................... 2-11 3 PENGENALAN FORM SDI DAN MDI ................................................ 3-1 3.1 MDI dan SDI ................................................................................................ 3-2 3.2 Struktur Aplikasi MDI ............................................................................... 3-3 3.3 Aplikasi MDI di Delphi .............................................................................. 3-3 3.4 Implementasi aplikasi MDI........................................................................ 3-4 4 TIPE DATA, STRUKTUR PROGRAM, FUNGSI DAN PROSEDUR ........................................................................................................................ 4-1 4.1 Tipe Data ..................................................................................................... 4-2 4.1.1 Integer........................................................................................................... 4-2 4.1.2 Real ........................................................................................................... 4-2 4.1.3 Boolean......................................................................................................... 4-3 4.1.4 Character ..................................................................................................... 4-3 4.1.5 String ........................................................................................................... 4-3 4.1.6 Array ........................................................................................................... 4-4iv

Politeknik Telkom

Pemrograman Visual

4.1.7 4.2 4.2.1 4.3 4.4 4.4.1 4.4.2 4.5 4.5.1 4.5.2 4.5.3 4.5.4 4.6 4.6.1 4.6.2 4.7 4.8 4.8.1 4.8.2 5 5.1 5.1.1 6 6.1 6.1.1 6.1.2 6.2.1. 7 7.1 7.2 7.3 7.4 7.4.1 7.4.2 7.4.3 7.4.4 7.5 7.5.1

Record .......................................................................................................... 4-4 Tipe Terenumerasi dan Subrange ........................................................... 4-4 Ordinal ......................................................................................................... 4-5 Konstanta ..................................................................................................... 4-5 Variabel ......................................................................................................... 4-6 Variabel Global ........................................................................................... 4-6 Variabel Lokal.............................................................................................. 4-6 Operator ...................................................................................................... 4-6 Operator Penugasan .................................................................................. 4-6 Operator Aritmatika ................................................................................. 4-6 Operator Relasi .......................................................................................... 4-7 Operator Logika ......................................................................................... 4-7 Kontrol Program ........................................................................................ 4-8 Pencabangan ................................................................................................ 4-8 Perulangan .................................................................................................... 4-9 Function dan Procedure ........................................................................... 4-9 Studi Kasus ................................................................................................ 4-10 Apikasi Stopwatch .................................................................................... 4-10 Aplikasi Notepad ...................................................................................... 4-14 KONVERSI TIPE DATA ........................................................................... 5-1 Konversi Tipe Data.................................................................................... 5-2 Studi Kasus : Aplikasi Currency Converter ......................................... 5-3 MICROSOFT ACCESS ............................................................................. 6-1 Relational Database ................................................................................... 6-2 Membuat Relational Database dengan Microsoft Access.................. 6-2 Membuat Relational Database dengan Microsoft Access 2003 ....... 6-4 Membuat Relational Database dengan................................................. 6-11 PENGANTAR APLIKASI DATABASE MENGGUNAKAN DELPHI ........................................................................................................................ 7-1 Aplikasi Database ....................................................................................... 7-2 Mekanisme Akses Data Dengan Delphi ................................................ 7-2 Arsitektur Dasar Aplikasi Database dalam Delphi ............................. 7-3 User Interface (UI)..................................................................................... 7-4 DataSource .................................................................................................. 7-4 DataSet ......................................................................................................... 7-4 Connection .................................................................................................. 7-4 DataModule ................................................................................................. 7-5 Menggunakan Database Desktop............................................................ 7-5 Membuat file Database Desktop ............................................................ 7-6v

Politeknik Telkom

Pemrograman Visual

7.6 7.7 8

Mengolah Database MS Access ............................................................... 7-9 Menghubungkan Database ke dalam Form ........................................... 7-9 PEMAKAIAN KOMPONEN DATA CONTROL DAN IMPLEMENTASI SINTAKS QUERY PADA DELPHI .......................... 8-1 8.1 Insert Data ................................................................................................... 8-2 8.2 Select Data................................................................................................... 8-2 8.3 Update Data ................................................................................................ 8-4 8.4 Delete Data ................................................................................................. 8-4 8.5 Karakter Spesial .......................................................................................... 8-5 8.6 ADOConnection........................................................................................ 8-6 8.7 Aplikasi Insert, Update, Delete Anggota ............................................... 8-6 8.8 Aplikasi Insert, Update, Delete dengan menggunakan DBNavigator ... ...................................................................................................................... 8-17 8.9 Aplikasi Searching ..................................................................................... 8-21 9 APLIKASI DATABASE MASTER DETAIL ........................................... 9-1 9.1 Aplikasi Database Master Detail ............................................................. 9-2 10 DELPHI REPORTING MENGGUNAKAN QUICK REPORT ....... 10-1 10.1 Installasi Quick Report............................................................................ 10-2 10.2 Komponen Quick Report ...................................................................... 10-4 10.3 Membuat Laporan dengan Quick Report ........................................... 10-5 10.3.1 Membuat Form Aplikasi Laporan ......................................................... 10-5 10.3.2 Mendesain Laporan ............................................................................... 10-10 10.3.3 Menulis Kode Program Laporan ........................................................ 10-13 11 TUTORIAL PEMBUATAN APLIKASI RENTAL VCD ..................... 11-1 11.1 Pengantar Aplikasi Rental VCD ............................................................ 11-2 11.2 Perancangan dan Pembuatan Database Rental VCD ........................ 11-2 11.3 Merancang dan Membuat Form menggunakan Borland Delphi .. 11-12 11.4 Menulis Kode Program VCD Rental ................................................. 11-37 11.5 Menjalankan Program VCD Rental ................................................... 11-63 DAFTAR PUSTAKA ................................................................................................ xii

vi

Politeknik Telkom

Pemrograman Visual

DAFTAR GAMBAR Gambar 1-1 - Flowcode IDE .................................................................................... 1-3 Gambar 1-2 - Anjuta IDE C / C++ Editor ......................................................... 1-4 Gambar 1-3 Impelementasi KonsepRAD dengan Codegear Delphi IDE ... 1-5 Gambar 2-1 - Menu Installer Borland .................................................................... 2-3 Gambar 2-2 Welcome Screen ............................................................................. 2-3 Gambar 2-3 - Verifikasi Serial Number ................................................................. 2-4 Gambar 2-4 - Pilihan Opsi Instalasi ........................................................................ 2-4 Gambar 2-5 - Proses Installasi ................................................................................. 2-5 Gambar 2-6 - Main Menu (Component Palette, Context Menu, Main Toolbar)........................................................................................................................ 2-5 Gambar 2-7 - Code Editor ....................................................................................... 2-6 Gambar 2-8 - Main Component Palette................................................................ 2-6 Gambar 2-9 - Form View dengan satu komponen button dan satu label ...... 2-7 Gambar 2-10 - Object Inspector digunakan untuk melakukan perubahan atribut dari komponen. ............................................................................................. 2-8 Gambar 2-11 - Pengaturan properties sebuah komponen melalui Object Insector....................................................................................................................... 2-10 Gambar 2-12 - Pembuatan sebuah event dengan mengakses event dalam object inspector ........................................................................................................ 2-11 Gambar 2-13 - Kerangka yang di generate secara otomatis ketika event oncreate di Object Inspector Form1 di klik-ganda ........................................... 2-11 Gambar 3-1 - Tampilan Form Utama..................................................................... 3-5 Gambar 3-2 - Dialog MainMenu .............................................................................. 3-5 Gambar 3-3 - Menu dan Submenu.......................................................................... 3-7 Gambar 3-4 - Form Utama dengan Menu ............................................................. 3-8 Gambar 3-5 - Project Option .................................................................................. 3-9 Gambar 3-6 - Running Program ............................................................................ 3-11 Gambar 4-1 - Gambar Tampilan Stop Watch .................................................... 4-10 Gambar 4-2 - System Tab Component Palette.............................................. 4-11 Gambar 4-3 - Delphi Notepad .............................................................................. 4-15 Gambar 5-1 - gambaran umum fungsi konversi dengan studi kasus converter mata uang ..................................................................................................................... 5-2 Gambar 5-2 - Rancangan Form Currency Converter ........................................ 5-4 Gambar 5-3 - Tampilan konversi US Dollar ke Rupiah atau sebaliknya ....... 5-10 Gambar 5-4 - Tampilan konversi EURO ke Rupiah atau sebaliknya ............. 5-10 Gambar 5-5 - Tampilan konversi Yen Jepang ke Rupiah atau sebaliknya ..... 5-11 Gambar 6-1 - Microsoft Access 2007 .................................................................... 6-4

vii

Politeknik Telkom

Pemrograman Visual

Gambar 6-2 - Microsoft Access New File Dialog............................................ 6-5 Gambar 6-3 - Microsoft Access Create Table ................................................. 6-6 Gambar 6-4 - Microsoft Access - Table Designer .............................................. 6-6 Gambar 6-5 - Microsoft Access Save Table Dialog......................................... 6-7 Gambar 6-6 - Microsoft Access Console .......................................................... 6-8 Gambar 6-7 - Microsoft Access Show Table .................................................... 6-9 Gambar 6-8 - Microsoft Access Relationship Dialog ...................................... 6-9 Gambar 6-9 - Edit Relationship ............................................................................. 6-10 Gambar 6-10 - Microsoft Access Relationship............................................... 6-11 Gambar 6-11 - Microsoft Access 2007 ............................................................... 6-12 Gambar 6-12 - Microsoft Access New Database Pane ................................ 6-12 Gambar 6-13 - Microsoft Access 2007 New File Dialog ............................. 6-13 Gambar 6-14 - Microsoft Access 2007 Database console .......................... 6-14 Gambar 6-15 - Microsoft Access 2007 Table Save Dialog .......................... 6-15 Gambar 6-16 - Microsoft Access 2007 Console ........................................... 6-15 Gambar 6-17 - Microsoft Access 2007 Show Table Dialog ........................ 6-16 Gambar 6-18 - Microsoft Access 2007 Relationship .................................... 6-17 Gambar 6-19 - Microsoft Access 2007 Edit Relationship Dialog ............... 6-17 Gambar 6-20 - Access 2007 Relationship ....................................................... 6-18 Gambar 7-1- Arsitektur Aplikasi Database pada Delphi ................................... 7-4 Gambar 7-2 - Database Desktop ............................................................................ 7-5 Gambar 7-3 - Format database ............................................................................... 7-6 Gambar 7-4 - struktur table database ................................................................... 7-7 Gambar 7-5 - pengisian Nama Field pada table ................................................... 7-8 Gambar 7-6 - menyimpan table ............................................................................... 7-8 Gambar 7-7 - Form View TAdoTable Component ...................................... 7-10 Gambar 7-8 - Form View ConnectionString Properties .............................. 7-10 Gambar 7-9 - Form View Data Link Dialog .................................................... 7-11 Gambar 7-10 Form View Connection Success........................................... 7-12 Gambar 7-11 - Form View TDataSource ........................................................ 7-13 Gambar 7-12 Form View TDBGrid .............................................................. 7-14 Gambar 7-13 DbGrid Properties ...................................................................... 7-14 Gambar 8-1- Tampilan Form Anggota ................................................................... 8-7 Gambar 8-2 - Data Module ...................................................................................... 8-9 Gambar 8-3 - Connection String ............................................................................ 8-9 Gambar 8-4 - Data Link Properties Provider .................................................... 8-10 Gambar 8-5 - Data Link Properties Connection............................................... 8-11 Gambar 8-6 - SQL String List Editor ................................................................... 8-11 Gambar 8-7 - Tampilan Form Anggota Lengkap ............................................... 8-12

viii

Politeknik Telkom

Pemrograman Visual

Gambar 8-8 - Setting Column DBGrid................................................................ 8-13 Gambar 8-9 - Tampilan Form Anggota................................................................ 8-18 Gambar 8-10 - Data Module.................................................................................. 8-19 Gambar 8-11 - Setting column DBGrid............................................................... 8-20 Gambar 8-12 - Running PrjDBAnggotaVCD ...................................................... 8-21 Gambar 8-13 - Gbr 10.18 Form Search .............................................................. 8-21 Gambar 8-14 - String List Editor........................................................................... 8-23 Gambar 8-15 - Running Program Search ............................................................ 8-25 Gambar 9-1 - Form Master-Detail Anggota ......................................................... 9-2 Gambar 9-2 - Data Module ...................................................................................... 9-3 Gambar 9-3 - Field Link Designer .......................................................................... 9-5 Gambar 9-4 - Aplikasi Running ................................................................................ 9-5 Gambar 10-1 - Project Options ............................................................................ 10-2 Gambar 10-2 - Browse - pencarian library quickreport .................................. 10-3 Gambar 10-3 - Component Pallete QReport .................................................... 10-3 Gambar 10-4 - Component Pallete QReport - Detail ..................................... 10-4 Gambar 10-5 - Form Navigasi Laporan .............................................................. 10-6 Gambar 10-6 Lembar Kerja Laporan ............................................................... 10-9 Gambar 10-7 - Design Laporan .......................................................................... 10-10 Gambar 10-8 - Report Setting ............................................................................ 10-13 Gambar 10-9 - Form Navigasi Laporan Running ........................................... 10-16 Gambar 10-10 - Display Report......................................................................... 10-17 Gambar 11-1 Tampilan Awal MS Access 2007 .............................................. 11-2 Gambar 11-2 Membuat Database Baru ........................................................... 11-3 Gambar 11-3 Membuat Database Baru ........................................................... 11-3 Gambar 11-4 Memilih Format Access 2003 dan memasukkan nama........ 11-3 Gambar 11-5 Create new table ......................................................................... 11-5 Gambar 11-6 Memberi nama pada table baru ................................................. 11-5 Gambar 11-7 Detil Table Anggota .................................................................... 11-6 Gambar 11-8 Detil Tabel VCD ........................................................................... 11-6 Gambar 11-9 Detil Tabel PenyewaanDetil ....................................................... 11-6 Gambar 11-10 - Detil Tabel PenyewaanDetil .................................................... 11-7 Gambar 11-11 Membuat Relationship.............................................................. 11-7 Gambar 11-12 Memilih table yang akan digunakan di relationship ............ 11-8 Gambar 11-13 - Relationship Anggota - PenyewaanMaster ........................... 11-8 Gambar 11-14 Relationship PenyewaanDetil - PenyewaanMaster ............ 11-9 Gambar 11-15 - Relationship VCD - PenyewaanDetil ..................................... 11-9 Gambar 11-16 - Menghubungkan dua field dalam sebuah relasi ................. 11-10 Gambar 11-17 - Relationship Complete .......................................................... 11-10ix

Politeknik Telkom

Pemrograman Visual

Gambar 11-18 - Database yang saling terhubung dan detil .......................... 11-11 Gambar 11-19 - Membuat aplikasi baru ........................................................... 11-12 Gambar 11-20 - Menambahkan beberapa form baru .................................... 11-12 Gambar 11-21 - Form Utama ............................................................................. 11-13 Gambar 11-22 - Edit Main Menu........................................................................ 11-14 Gambar 11-23 - Properties Windows Form Utama ..................................... 11-16 Gambar 11-24 - Form VCD ................................................................................ 11-17 Gambar 1-25 - Form Anggota ............................................................................ 11-19 Gambar 11-26 - Properties Windows Form Anggota .................................. 11-21 Gambar 11-27 Form Transaksi Penyewaan ................................................. 11-22 Gambar 11-28 Form Laporan Transaksi Peminjaman ............................... 11-24 Gambar 11-29 Install Quickreport ................................................................ 11-26 Gambar 11-30 Menambah Package dari file bpl (Borland Package Library) ................................................................................................................................... 11-26 Gambar 11-31 Memilih file dclqrt70.bpl ....................................................... 11-27 Gambar 11-32 Menu Use Unit untuk menggunakan Unit pada form utama ................................................................................................................................... 11-28 Gambar 11-33 Daftar Unit yang akan digunakan ........................................ 11-28 Gambar 11-34 Representasi Sintaksis Uses pada Unit .............................. 11-29 Gambar 11-35 Click Project Options untuk menambahkan form child MDI sehingga ditampilkan hanya ketika di akses melalui form utama ........ 11-29 Gambar 11-36 Daftar Form-Form yang Tersedia dalam Project ............ 11-30 Gambar 11-37 Daftar Form-Form yang telah dipilih ................................. 11-30 Gambar 11-38 Menu create new Data Module .......................................... 11-31 Gambar 11-39 Data Access component: ADOConnection, ADOQuery, dan ADODataSet .................................................................................................. 11-31 Gambar 11-40 Properties Window ADOConnRentalVCD .................... 11-34 Gambar 11-41 ConnectionString Dialog ...................................................... 11-35 Gambar 11-42 Data Link Properties - ConnectionString Builder Dialog ........ ................................................................................................................................... 11-35 Gambar 11-43 Data Link Properties Test Connection Success .......... 11-36 Gambar 11-44 Memasukkan string SQL pada property SQL ADOQueryLaporanPeminjaman ........................................................................ 11-36 Gambar 11-45 Cara 1 Mengakses object untuk memasukkan code ... 11-37 Gambar 11-46 Cara 2 Men-generate procedure baru dengan menggunakan event OnClick pada properties ................................................ 11-37 Gambar 11-47 Membuat procedure baru dengan meng-klik ganda pada button....................................................................................................................... 11-38 Gambar 11-48 - Aplikasi Rental VCD Running - Form Utama ................... 11-64x

Politeknik Telkom

Pemrograman Visual

Gambar 11-49 - Aplikasi Rental VCD Running - Form Anggota............. 11-65 Gambar 11-50 - - Aplikasi Rental VCD Running - Form VCD Gambar 11-51 - Aplikasi Rental VCD Running Penyewaan Running ................................. 11-66 Gambar 11-52 - Aplikasi Rental VCD Running Nama dan No Anggota 11-68 Gambar 11-53 Error Message ID Peminjam ............................................ 11-68 Gambar 11-54 Aplikasi Rental VCD Running Judul VCD ......................... 11-69 Gambar 11-55 Aplikasi Rental VCD Running Harga sewa otomatis .. 11-70 Gambar 11-56 Error Message Judul VCD ................................................ 11-70 Gambar 11-57 Aplikasi Rental VCD Running Data Peminjaman Sukses disimpan ................................................................................................................... 11-71 Gambar 11-58 - Aplikasi Rental VCD Running Tampilan Report ........... 11-72

xi

Politeknik Telkom

Pemrograman Visual

1 PEMROGRAMAN VISUAL

Overview

Bab ini akan menjelaskan tentang konsep pemrograman visual secara umum. Memperkenalkan konsep Rapid Application Development dan Integrated Development Environment, dan memperenalkan beberapa aplikasi pegembangan visual.

Tujuan

1. 2. 3.

Mahasiswa mengetahui konsep pemrograman visual Mahasiswa mengerti Integrated Development Environment Mahasiswa mengenal konsep RAD (Rapid Application Development)

Pemrograman Visual

1-1

Politeknik Telkom

Pemrograman Visual

Pada awal diperkenalkannya pemrograman menggunakan komputer, representasi sintaksis perintah-perintah program (command syntax) adalah berupa rangkaian karakter atau tekstual. Interaksi pengguna dengan komputer juga terbatas pada inptut keyboard dan representasi tombol, table dan garis yang merupakan gabungan dan manipulasi dari karakter ASCII. Seiring dengan perkembangan pada teknologi hardware/perangkat keras komputer, visualisasi antarmuka pengguna (user interface) komputer yang pada awalnya berupa text-based mengalami kemajuan dan berkembang menjadi graphical-based. Hal ini juga memicu perkembangan pengembangan aplikasi-aplikasi komputer yang lebih menuntut tampilan dan menu yang interaktif dan bersahabat (user friendly) seperti aplikasi pengolah kata, pengolah angka, aplikasi permainan (game), aplikasi pemutar musik/video (multimedia) dan lain sebagainya. 1.1 Visual Programming

Perkembangan pada antarmuka pengguna komputer berupa graphicalbased juga berdampak pada aplikasi pengembangan yang digunakan, saat ini dikenal istilah VPL (Visual Programming Language) dimana artinya adalah bahasa pemrograman yang dibantu atau lebih menggantungkan pada aplikasi pengembangan bersifat visual dibanding secara textual. Pengembangan aplikasi secara visual ini menggunakan penggabungan antara form, icon, notasi simbolik (symbolic notation) dan sintaksis program yang merupakan notasi sekunder dari sebuah lingkungan aplikasi pengembangan visual atau bisa kita sebut kode (Code). 1.2 Integrated Development Environment

Aplikasi pengembangan visual menitikberatkan pada penggunaan alatalat visual untuk pengembangan aplikasinya seperti tombol, kotat text, kotak dialog, label, table, bar, selain itu juga berbagai opsi untuk pengaturan atribut dari komponen visual, kustomisasi kode dan lain sebagainya. Hal ini menuntut sebuah lingkungan pengembangan yang terpadu dan terintegrasi atau dikenal dengan IDE (Integrated Development Environment).Pemrograman Visual 1-2

Politeknik Telkom

Pemrograman Visual

Saat ini banyak sekali digunakan berbagai macam IDE dari berbagai pengembang aplikasi yang berbeda baik komersil maupun opensource. Yang terkenal dan banyak digunakan pada saat ini diantaranya adalah: 1. Microsoft Visual Studio .Net IDE 2. Borland RAD IDE Delphi, C++ Builder, dan Builder series lainnya 3. Eclipse IDE 4. Netbeans IDE, dan sebagainya.

Gambar 1-1 - Flowcode IDE Dengan adanya konsep IDE ini memungkinkan aktifitas pengembangan aplikasi lebih mudah dan lebih bersifat drag-drop untuk pengaturan kebanyakan opsi dan atribut visual.Pemrograman Visual 1-3

Politeknik Telkom

Pemrograman Visual

Gambar 1-2 - Anjuta IDE C / C++ Editor 1.3 Rapid Application Development

RAD (Rapid Application Development) atau pengembangan aplikasi secara cepat, adalah sebuah tipe SDLC (Software Development Liffe Cycle) yang memungkinkan pengembangan aplikasi dengan menggunakan prototipe. RAD banyak diusung oleh aplikasi pengembangan visual yang memungkinkan pengembangan dari mulai perancangan fungsi, implementasi, dan pengujian secara cepat (rapid). Konsep RAD ini dimungkinkan dengan penggunaan IDE dalam aplikasi pengembangan visual.

Pemrograman Visual

1-4

Politeknik Telkom

Pemrograman Visual

Gambar 1-3 Impelementasi KonsepRAD dengan Codegear Delphi IDE

Pemrograman Visual

1-5

Politeknik Telkom

Pemrograman Visual

Rangkuman

1.

Aplikasi pengembangan visual merupakan aplikasi pengembangan yang dibantu dan menitikberatkan penggunaan notasi visual dibandingkan tekstual. IDE adalah lingkungan pengembangan aplikasi visual yang terpadu dan terintegrasi. RAD memungkinkan pengembangan dari mulai perangcangan fungsi, implementasi, dan testing secara cepat (rapid)

2.

3.

Kuis Benar Salah 1. 2. Pemrograman yang menitikberatkan pengembangannya pada alat bantu tekstual disebut pemrograman visual Rapid Application Development memperlambat pengembangan aplikasi secara signifikan

Pemrograman Visual

1-6

Politeknik Telkom

Pemrograman Visual

2 PENGENALAN IDE BORLAND DELPHI

Overview

Bab ini memperkenalkan Borland Delphi sebagai alat pengembangan aplikasi visual termasuk petunjuk instalasi, pengenalan lingkungan dan pengantar pembuatan aplikasi menggunakan IDE Delphi.

Tujuan

1 Mahasiswa mengenal Borland Delphi sebagai aplikasi pengembangan visual 2 Mahasiswa mengerti cara instalasi borland delphi 3 Mahasiswa mengenal ligkungan kerja IDE delphi yang terintegrasi 4 Mehasiswa mengerti struktur file Borland DelphiPengenalan IDE Borland Delphi 2-1

Politeknik Telkom

Pemrograman Visual

Delphi adalah sebuah aplikasi pengembangan visual produksi Borland dan sekarang telah berganti nama menjadi Codegear Delphi setelah divisi software Borland di akuisisi oleh Codegear pada pertengahan tahun 2004. Sebagai aplikasi pengembagan visual, Delphi memakai notasi sintaksis sekunder berupa Object Pascal, dimana object pascal ini merupakan pengembangan dari bahasa pemrograman Pascal yang merupakan bahasa pemrograman yang bersifat prosedural. Dengan penggunaan pascal sebagai programming language atau notasi sekunder, membuat Borland Delphi lebih mudah dipelajari untuk programmer yang telah terbiasa memakai bahasa pascal atau programmer yang awam sekalipun dengan bantuan dan petunjuk dari fitur help (dokumentasi) nya yang terintegrasi dan mudah di akses. IDE Delphi pun lebih mudah digunakan dan memungkinkan adaptasi yang lebih cepat secara visual karena di lengkapi dengan penggunaan alat bantu visual berupa tombol-tombol dan icon yang mudah di akses dan di ingat. Saat ini Borland Delphi telah mengalami beberapa perubahan versi, yang terakhir adalah Codegear Delphi 2009 yang mendukung teknologi .Net 3.5 dari Microsoft dan komponen-komponen grafis yang mendukung trend antarmuka pengguna (user interface). Pada courseware ini digunakan Borland Delphi versi 7 yang cukup lengkap dan masih cukup banyak pemakaiannya di industri-industri pengembang aplikasi perangkat lunak.

2.1

Instalasi Borland Delphi

Instalasi Borland Delphi 7 cukup mudah dan jelas, dengan panduan grafis berupa wizard yang memandu pengguna langkah demi langkah. Instalasi dimulai dengan menu dari Borland yang berisi beberapa opsi yaitu Delphi 7 itu sendiri, lalu Interbase, ModelMaker dan juga InstallShield Express yang mana merupakan aplikasi untuk membuat sebuah paket instalasi buatan kita sendiri.

Pengenalan IDE Borland Delphi

2-2

Politeknik Telkom

Pemrograman Visual

Gambar 2-1 - Menu Installer Borland

Gambar 2-2 Welcome Screen

Pengenalan IDE Borland Delphi

2-3

Politeknik Telkom

Pemrograman Visual

Gambar 2-3 - Verifikasi Serial Number

Gambar 2-4 - Pilihan Opsi Instalasi

Pengenalan IDE Borland Delphi

2-4

Politeknik Telkom

Pemrograman Visual

Gambar 2-5 - Proses Installasi

2.2

Pengenalan IDE Borland Delphi

Borland Delphi merupakan aplikasi pengembangan visual dengan lingkungan pengembangan yang terintegrasi (IDE Intergrated Development Environment). IDE Borland Delphi terdiri dari beberapa bagian sebagai berikut:

2.2.1

Main Menu

Pada main menu terdapat main toolbar, component palette, dan context menu. Toolbar berfungsi untuk mengatur semua fungsi pengembangan aplikasi. Component palette berfungsi untuk menyimpan semua komponen-komponen yang bisa digunakan oleh sebuah program yang sedang dikembangkan.

Gambar 2-6 - Main Menu (Component Palette, Context Menu, Main Toolbar)

Pengenalan IDE Borland Delphi

2-5

Politeknik Telkom

Pemrograman Visual

2.2.2

Code Editor

Code Editor berfungsi untuk menambahkan notasi sintaksis sekunder berupa teks kode program, pascal. Code Editor ini dilengkapi dengan fitur code completion yaitu sebuah fitur dimana kita bisa menyisipkan deklarasi kelas, object, properties, tipe data, dan lain sebagainya dalam bentuk teks.

Gambar 2-7 - Code Editor

2.2.3

Component Palette

Component Palette menampung berbagai macam notasi simbolis berupa icon-icon yang mewakili fungsi-fungsi tertentu sebuah komponen.

Gambar 2-8 - Main Component Palette

Pengenalan IDE Borland Delphi

2-6

Politeknik Telkom

Pemrograman Visual

2.2.4

Form View

Form view merupakan area kerja visual anda. Anda dapat menambahkan berbagai macam fungsi dengan penambahan komponenkomponen yang tersedia di component palette seperti label, button, text edit, memo, dan lain-lain.

Gambar 2-9 - Form View dengan satu komponen button dan satu label

2.2.5

Object Inspector

Setiap komponen yang mempunyai representasi visual seperti button, label, edit, numedit dan lain-lain memiliki atribut-atribut seperti warna, ukuran, tipe font dan lain sebagainya yang bisa di ubah sesuai dengan kebutuhan di Object Inspector.

Pengenalan IDE Borland Delphi

2-7

Politeknik Telkom

Pemrograman Visual

Gambar 2-10 - Object Inspector digunakan untuk melakukan perubahan atribut dari komponen.

2.3

File Project, Unit dan Form Borland Delphi

Dalam sebuah project yang kita buat dalam Borland Delphi, secara default terdapat file-file yang diciptakan pada saat project tersebut di buat.

2.3.1

Project File

File .dpr adalah file pusat atau utama dari sebuah project Delphi (satu file .dpr per project). File berekstensi *.dpr ini sebenarnya merupakan file sumber berisi kode bahasa pascal. File ini berfungsi sebagai pintu masuk untuk Delphi kedalam sebuah project. Meskipun file .dpr bisa di edit secara manual, tetapi tidak dianjurkan untuk mengubah isi dari file ini.

Pengenalan IDE Borland Delphi

2-8

Politeknik Telkom

Pemrograman Visual

2.3.2

Unit File

File berekstensi .pas ini berisi source code program dalam bahasa Object Pascal. File source ini merupakan impelementasi fungsi dari event yang ada di form atau sebuah file source yang digunakan untuk unit lain.

2.3.3

Form File

File berekstensi .frm ini berisi seluruh informasi mengenai form, baik itu ukuran, caption, warna, event dan bahkan informasi komponen-komponen child yang berada di dalam form tersebut.

2.4

Event Driven Programming

Event driven programming adalah tipe pemrograman yang hampir semua prosesnya dimulai/dipicu dari sebuah event yang terjadi di lingkungan atau siklus aktifnya sebuah aplikasi dalam memori.

2.5

Properties

Setiap komponen di dalam delphi diperlakukan sebagai objek, objek tentunya memiliki atribut, dan method (metoda2) yang bisa dijalankan pada dirinya. Setiap atribut yang bisa diubah oleh programmer disebut properties, contoh properties untuk sebuah form adalah caption (nama di title bar), ukuran (width x height), anchor (jangkar), cursor, warna latar (color), visibility (tampak atau tidak), dan lain-lain. Properties ini pun bisa di akses secara tekstual atau kode dari code editor, tentunya dengan event tertentu.

Pengenalan IDE Borland Delphi

2-9

Politeknik Telkom

Pemrograman Visual

Gambar 2-11 - Pengaturan properties sebuah komponen melalui Object Insector.

2.6

Event

Event adalah sebuah kejadian atau yang lebih tepat adalah sebuah aksi yang dilakukan ketika aplikasi menemui sebuah kondisi tertentu, misal ketika sebuah form pertama kali ditampilkan maka sebuah event bernama onCreate milik form tersebut dieksekusi, nah event onCreate memiliki notasi tekstual berupa prosedur di code editor nah sebagai contoh jika anda ingin mengeksekusi sebuah program pada event on create, anda bisa mengaktifkan nya dengan cara klik ganda di bagian event onCreate yang teradapat di Object Inspector, dan Delphi akan secara otomatis menyediakan kerangka untuk prosedur tersebut di dalam unit yang terdapat di code editor.

Pengenalan IDE Borland Delphi

2-10

Politeknik Telkom

Pemrograman Visual

Gambar 2-12 - Pembuatan sebuah event dengan mengakses event dalam object inspector

Gambar 2-13 - Kerangka yang di generate secara otomatis ketika event oncreate di Object Inspector Form1 di klik-ganda

2.7

Container

Bayangkan sebuah "truk container", isinya bermacam-macam bukan? Begitu juga analoginya dengan pemrograman visual dengan Delphi. Sebuah component, bisa menjadi container atau wadah untuk component lainnya. container yang paling utama di dalam sebuah aplikasi di delphi adalah Form,Pengenalan IDE Borland Delphi 2-11

Politeknik Telkom

Pemrograman Visual

setiap kali anda membuat sebuah program baru di delphi atau ketika anda membuka delphi untuk pertama kalinya, maka akan dibuatkan sebuah form dengan nama Form1, nah di dalam container berupa Form1 ini lah anda dapat memasukkan berbagai macam komponen lainnya yang mana sifat dari komponen tersebut disebut child (anak) dan Form1 disebut sebagai parent (orangtua).

Gambar 2.12 Contoh Implementasi Container dengan satu panel dan satu button

Pengenalan IDE Borland Delphi

2-12

Politeknik Telkom

Pemrograman Visual

Rangkuman

1.

Borland Delphi merupakan aplikasi pengembangan software visual yang memiliki lingkungan IDE yang terintegrasi dan mudah digunakan Event adalah sebuah kejadian atau yang lebih tepat adalah sebuah aksi yang dilakukan ketika aplikasi menemui sebuah kondisi tertentu Dalam Delphi, Container merupakan komponen yang menjadi parent atau tempat bagi komponen yang lainnya. Setiap atribut yang bisa dirubah oleh programmer disebut properties File .dpr adalah file utama dari sebuah project Delphi (satu file .dpr per project). Yang berisi kode pascal. File Unit yang berekstensi .pas ini berisi source ccode program dalam bahasa Object Pascal. File source ini merupakan impelementasi fungsi dari event yang ada di form, atau sebuah file source yang digunakan untuk unit lain. Form File memuat semua atribut baik form itu sendiri maupun komponen-komponen yang diperlukan dalam sebuah aplikasi

2.

3.

4. 5.

6.

7.

Pengenalan IDE Borland Delphi

2-13

Politeknik Telkom

Pemrograman Visual

Kuis Benar Salah

1. 2. 3.

Komponen Child adalah komponen yang menjadi tempat untuk komponen lainnya. Event dalam Delphi hanya bisa digunakan melalui komponen visual IDE Borland Delphi memiliki fitur code completion untuk mempermudah pengembang aplikasi dalam menuliskan kode program

Pilihan Ganda 1 Fitur dalam code editor yang menampilkan snippet (contoh kode) adalah a. Code master b. Code syntax c. Syntax Assistant d. Code Assist e. Code Completion Fitur dalam code editor yang menampilkan snippet (contoh kode) adalah a. Code master b. Code syntax c. Syntax Assistant d. Code Assist e. Code Completion

2

Pengenalan IDE Borland Delphi

2-14

Politeknik Telkom

Pemrograman Visual

3 PENGENALAN FORM SDI DAN MDI

Overview

Bab ini akan menjelaskan tentang aplikasi berupa form MDI dan SDI, dan juga akan dijelaskan cara pembuatan form MDI dan SDI beserta contoh implementasinya.

Tujuan

1. 2. 3.

Mengetahui perbedaan form SDI dan MDI Mengetahui cara pembuatan aplikasi SDI Mengetahui cara pembuatan form MDI

Pengenalan Form SDI dan MDI

3-1

Politeknik Telkom

Pemrograman Visual

3.1

MDI dan SDI

MDI merupakan kepanjangan dari Multiple Document Interface. Di dalam suatu aplikasi MDI terdapat lebih dari satu dokumen atau child window, dimana child window ini dapat dibuka pada satu form induk (parent window). Penggunaan MDI banyak terdapat pada aplikasi seperti spreadsheet. Jadi secara keseluruhan MDI terdiri dari dua bagian yaitu sebuah form induk atau MDI Container atau MDI Parent dan satu atau lebih form anak atau disebut sebagai child forms. Child forms dibuka di MDI Container. Aplikasi yang mengimplementasikan MDI biasanya terdiri dari tiga komponen dasar yaitu : 1. Satu (dan hanya satu) form MDI Container atau form induk 2. Satu atau lebih form MDI Child 3. Menu utama MDI Aplikasi MDI biasanya dibuat untuk aplikasi yang menggunakan banyak file tetapi untuk memberi kemudahan akses, semua file itu ingin ditampilkan dalam sebuah form. SDI merupakan kepanjangan dari Single Document Interface. Di dalam suatu aplikasi SDI hanya terdapat sebuah form untuk sebuah file. Contoh aplikasi SDI adalah Notepad, dimana jika kita membuka notepad maka akan muncul sebuah form dan apabila kita akan membuat file notepad baru, maka akan muncul form yang kedua. Setiap kita membuat file baru maka akan muncul form (jendela) notepad yang baru. Contoh aplikasi MDI adalah Microsoft Word, dimana ketika kita membuka MS Word untuk pertama kalinya, maka akan muncul sebuah form (jendela) yang terdapat menu-menu dan sebuah form (jendela) tempat kita menulis. Jika kita ingin membuat file baru maka akan muncul form baru untuk menulis, tetapi form menu tetap satu. MS Word menggunakan MDI Application, dimana form yang terdapat menu-menu tersebut merupakan MDI Container (form induk) sedangkan form tempat kita menulis adalah Form MDI Child.

Pengenalan Form SDI dan MDI

3-2

Politeknik Telkom

Pemrograman Visual

3.21. 2.

Struktur Aplikasi MDISuatu aplikasi MDI mempunyai suatu struktur, yaitu : Form utama aplikasi asalah sebuah frame atau sebuah container Form khusus yang dinamakan MDI client, meliputi seluruh area client dari frame yang dilengkapi dengan kemampuan-kemampuan khusus. Misalnya MDI Client menangani sejumlah form anak. Sejumlah form anak yang tipenya sama atau berbeda. Form anak tersebut tidak langsung ditempatkan di frame tetapi di definisikan sebagai anak dari form MDI Client, dimana MDI Client berada di dalam frame.

3.

Untuk menampilkan form anak jumlahnya lebih dari satu, maka diperlukan struktur penyusunan form, terdapat dua cara penyusunan form yaitu : 1. Cascade Form child akan diatur mulai dari ujung kiri atas frame dan bergerak ke ujung kanan bawah. Jendela akan saling tumpang tindih. 2. Tile Form child akan diatur seperti susunan ubin, sehingga tidak saling tumpang tindih. Area Form utama akan dibagi sama rata untuk semua form child.

3.3

Aplikasi MDI di Delphi

Aplikasi MDI di Delphi dapat dilakukan dengan dua cara, cara yang pertama adalah dengan membuat beberapa form, sebuah form akan disetting menjadi form induk (MDI Container) dan form yang lain akan disetting menjadi form child (MDI Child). Membuat form menjadi MDI Container atau MDI Child dapat dilakukan dari properties FormStyle pada komponen Form, pada properties ini akan terdapat pilihan fsMDIForm untuk membuat form menjadi MDI Container dan fsMDIChild untuk membuat form menjadi MDI Child. Sedangkan cara yang kedua, kita dapat menggunakan aplikasi MDI dengan menggunakan wizard yang terdapat pada File > New > Other kemudian pilih tab Projects dan pilih MDI Application.

Pengenalan Form SDI dan MDI

3-3

Politeknik Telkom

Pemrograman Visual

Pada studi kasus pada bab ini akan dicontohkan penggunaan cara yang pertama.

3.41. 2.

Implementasi aplikasi MDIUntuk membuat aplikasi MDI lakukan langkah-langkah berikut : Siapkan sebuah folder untuk menyimpan aplikasi dengan nama ProjectMDI1 Membuat Form Parent atau MDI Container a. Buat aplikasi baru dengan memilih menu File > New > Application, sehingga akan muncul Form1 b. Ubah properties Form1 sebagai berikut : Tabel 3-1 Properties Form1 Komponen Form Properties Name Caption FormStyle Align BorderStyle Height Width Position Nilai Properties FormMain Form Utama fsMDIForm alCustom bsSizeToolWindow 500 600 poDesktopCenter

c.

Simpan file unit dengan nama UnitMain.pas dan file project dengan nama PrjMDIApplication.dpr

3.

FormStyle fsMDIForm merupakan setting untuk form yang akan berperan sebagai MDI Parent atau MDI Container, dan hanya sebuah form yang mempunyai style fsMDIForm. MDI Parent biasanya berisi menu-menu untuk memproses MDI Child. Masukkan komponen berikut ke dalam FormMain

Pengenalan Form SDI dan MDI

3-4

Politeknik Telkom

Pemrograman Visual

Gambar 3-1 - Tampilan Form Utama

Tabel 3-2 Komponen pada FormMain Komponen MainMenu Label1 Label2 Properties Name Caption Caption Nilai Properties MainMenu1 SISTEM INFORMASI RENTAL VCD MERIAH pada tool pallete pada

Untuk memasukkan komponen MainMenu, klik tanda

Standard. Kemudian klik pada komponen MainMenu1, klik tanda properties Items sehingga akan keluar dialog seperti berikut :

Gambar 3-2 - Dialog MainMenu

Pengenalan Form SDI dan MDI

3-5

Politeknik Telkom

Pemrograman Visual

Klik pada bagian yg berwarna kuning, kemudian ubah isi properties Caption menjadi Persewaan. Klik menu Persewaan sehingga akan muncul submenu dan seterusnya. Untuk selengkapnya struktur menu dapat dilihat dalam tabel berikut : Tabel 3-3 Struktur Menu Menu Persewaan Submenu Data Sewa Data Anggota Data VCD Sewa Anggota VCD About

Search Laporan

Help Exit

Maka hasilnya akan seperti gambar berikut ini

Pengenalan Form SDI dan MDI

3-6

Politeknik Telkom

Pemrograman Visual

Gambar 3-3 - Menu dan Submenu

Tutup dialog Main Menu dan di dalam Form Main akan muncul Menu seperti gambar berikut :

Pengenalan Form SDI dan MDI

3-7

Politeknik Telkom

Pemrograman Visual

Gambar 3-4 - Form Utama dengan Menu

4.

Membuat MDI Children Setiap MDI Container mempunyai paling tidak sebuah MDI Child. MDI Child hanya boleh tampil di dalam form MDI Container, dan jika di minimize maka icon MDI Child berada di dalam MDI Mother. Untuk membuat MDI Child adalah : a. b. Pilih menu File > New > Form, maka akan muncul Form1 Ubah properties Form1 sebagai berikut Tabel 3-4 Pengubahan Properties Form1 Komponen Form Properties Name Caption FormStyle Align BorderStyle Height Width Position Nilai Properties FormAnggota Data Anggota fsMDIChild alCustom bsSizeable 440 580 poMainFormCenter

Pengenalan Form SDI dan MDI

3-8

Politeknik Telkom

Pemrograman Visual

c.

Simpan file unit dengan nama UnitAnggota.pas di dalam folder yang sama dengan file UnitMain.pas dan PrjMDIApplication.dpr.

FormStyle fsMDIChild merupakan setting untuk form yang akan berperan sebagai MDI Child, dan dapat terdiri dari satu atau lebih form. 5. Secara default FormAnggota akan langsung ditampilkan di Form Utama setelah di-Create ketika program dijalankan, seharusnya form ini akan tampil hanya ketika dipilih menu Persewaan > Data Anggota, oleh karena itu FormAnggota harus masuk ke Available Form. Cara membuat suatu form menjadi Available form adalah dengan memilih menu Project > Option sehingga akan muncul dialog sebagai berikut :

Gambar 3-5 - Project Option

Pilih FormAnggota pada Auto-create Forms kemudian klik tanda sehingga FormAnggota akan masuk ke Available Forms. 6. Simpan perubahan dengan memilih menu File > Save All

Pengenalan Form SDI dan MDI

3-9

Politeknik Telkom

Pemrograman Visual

7. 8.

Hubungkan FormMain dengan FormAnggota. Pindah ke FormMain kemudian pilih menu File > Use Unit, pilih UnitAnggota. Ketika form menjadi Available form maka untuk menampilkannya form tersebut harus di-Create terlebih dahulu, yaitu dengan cara : Pindah ke FormMain, klik pada menu Persewaan > Data Anggota yang terdapat di dalam FormMain, sehingga akan muncul procedure TFormMain.DataAnggota.Click. Lengkapilah kode didalamnya sebagai berikut :procedure TFormMain.DataAnggotaClick(Sender: TObject); begin Application.CreateForm(TFormAnggota,FormAnggota); end;

Kode diatas menyebabkan form Anggota hanya muncul ketika user memilih menu Persewaan > Data Anggota 9. Jika Form Anggota ditutup maka form tersebut tidak tertutup tetapi menjadi minimize dan akan tampil di bagian bawah Form Parent. Hal ini terjadi karena aksi default yang ditimbulkan ketika form Child di close adalah menyembunyikan (hide). Untuk menutup form MDI harus dilakukan membebaskan dan melepaskan memori yang berkaitan dengan form tersebut. Caranya adalah : Pindah ke Form Anggota, klik bagian kosong pada form Anggota, kemudian pilih event OnClose sehingga akan muncul prosedur TFormAnggota.FormClose, lengkapi kode didalamnya sebagai berikut :procedure TFormAnggota.FormClose(Sender: TObject; var Action: TCloseAction); begin Action:=caFree; end;

10. Buatlah form baru dengan memilih menu File > New > Form, kemudian lakukan langkah 3 8 untuk Menu yang lain. Dengan penamaan Form dan file sebagai berikut :Pengenalan Form SDI dan MDI 3-10

Politeknik Telkom

Pemrograman Visual

Tabel 3-5 Penamaan Form dan File baru Komponen Form1 (Menu Data Sewa) Save : UnitSewa.pas Form2(Menu Data VCD) Save : UnitVCD.pas Form3 (Menu Search) Save : UnitSearch.pas Form4 (Menu Laporan Sewa) Save : UnitLapSewa.pas Form5 (Menu Laporan Anggota) Save : UnitLapAnggota.pas Form6 (Menu Laporan VCD) Save : UnitLapVCD.pas Form7 (Menu About) Save : UnitAbout.pas Properties Name Caption Name Caption Name Caption Name Caption Name Caption Name Caption Name Caption Nilai Properties FormSewa Data Sewa FormVCD Data VCD FormSearch Search Data FormLapSewa Laporan Sewa FormLapAnggota Laporan Anggota FormLapVCD Laporan VCD FormAbout Laporan About

11. Hasil running adalah sebagai berikut :

Gambar 3-6 - Running Program

Pengenalan Form SDI dan MDI

3-11

Politeknik Telkom

Pemrograman Visual

Rangkuman 1. 2. MDI merupakan kepanjangan dari Multiple Document Interface MDI Application terdiri dari dua bagian yaitu sebuah form induk atau MDI Parent dan satu atau lebih form anak atau disebut sebagai child forms. SDI merupakan kepanjangan dari Single Document Interface. Di dalam suatu aplikasi SDI hanya terdapat sebuah form untuk sebuah file. Membuat form menjadi MDI Container atau MDI Child dapat dilakukan dari properties FormStyle pada komponen Form. Nilai propertis FormStyle fsMDIForm digunakan untuk membuat form menjadi MDI Container dan fsMDIChild untuk membuat form menjadi MDI Child. Penutupan (close) form MDI dilakukan dengan membebaskan dan melepaskan memory yang berkaitan dengan form tersebut

3. 4. 5. 6.

7.

Kuis Benar Salah 1. 2. 3. 4. 5. Aplikasi MDI dipergunakan untuk menampilkan banyak file dalam satu form Pada Aplikasi MDI jumlah form child tidak boleh lebih dari satu form Pada Aplikasi SDI jumlah form child harus lebih dari satu form Jumlah MDI Container pada suatu aplikasi MDI hanya satu sedangkan jumlah MDI Parent boleh lebih dari satu. Untuk membuat suatu form menjadi MDI Parent, maka nilai pada properties FormStyle diubah menjadi fsMDIForm

Pengenalan Form SDI dan MDI

3-12

Politeknik Telkom

Pemrograman Visual

Latihan

Setelah mengerjakan file MDI di bab ini, lengkapi program anda sesuai dengan menu yang telah dibuat. Implementasikan hal-hal yang sudah anda pelajari di bab sebelumnya. Spesifikasi dari program Persewaan VCD adalah sebagai berikut : 1. Menu Persewaan a. Menu Persewaan > Anggota akan menampilkan form untuk memanipulasi Data Anggota yaitu Insert, Update, dan Delete data Anggota b. Menu Persewaan > Sewa akan menampilkan form untuk memanipulasi Data Sewa yaitu Insert, Update, dan Delete data Sewa c. Menu Persewaan > VCD akan menampilkan form Menu Search a. Menu Search akan menampilkan sebuah form untuk searching. Di dalam form ini digunakan untuk searching ke tiga table yaitu Table Anggota, Table Sewa, dan Table VCD. Untuk setiap pilihan Table sediakan pilihan pencarian dengan nilai tertentu. Misal dipilih searching Data Anggota dengan kata kunci pencarian pada Nama Anggota. Menu Laporan a. Menu Laporan > Sewa akan menampilkan form Laporan untuk data sewa b. Menu Laporan > Anggota akan menampilkan form Laporan untuk data anggota c. Menu Laporan > VCD akan menampilkan form Laporan untuk data VCD

2.

3.

Pengenalan Form SDI dan MDI

3-13

Politeknik Telkom

Pemrograman Visual

4.

5.

Menu Help a. Menu Help akan menampilkan sebuah form yang berisi tentang pembuat program Menu Exit a. Menu Exit akan membuat program tertutup

Untuk referensi tampilan dan fungsi, silahkan melihat file Persewaan.exe yang diberikan.

Pengenalan Form SDI dan MDI

3-14

Politeknik Telkom

Pemrograman Visual

4 TIPE DATA, STRUKTUR PROGRAM, FUNGSI DAN PROSEDUR

Overview

Bab ini akan menjelaskan tentang tipe data yang disediakan oleh Delphi. Juga akan dijelaskan tentang struktur program dalam Delphi, Fungsi dan Prosedur. Di dalam bab ini akan diberikan implementasi dari penggunaan tipe data, struktur program dan fungsi built in dengan membuat aplikasi Stop Watch. Juga mengajarkan pengolahan string mengunakan Delphi dan pemakaian komponen Dialog untuk mengimplementasikan pemrosesan File dan stream text menggunakan Delphi.

Tujuan1 2 3 4 5 6 7 Mengetahui tipe data di Delphi Mengetahui struktur program yang didukung oleh Delphi Mengetahui cara pendeklarasian struktur perulangan dan pencabangan Mengetahui tujuan penggunaan fungsi dan prosedur Mengetahui beberapa fungsi built in dan tujuan penggunaannya Mengetahui cara penggunaan tipe data, struktur pencabangan dan fungsi built ini dengan studi kasus aplikasi Stop Watch Mengerti pemakaian berbagai macam komponen dialog Mengerti pemrosesan File IO menggunakan File Dialog Delphi4-1

8

Tipe Data Struktur Program Fungsi dan Prosedur

Politeknik Telkom

Pemrograman Visual

4.1

Tipe Data

Delphi menyediakan tipe data yang cukup banyak sehingga akan memberi keleluasaan pada pemrogram dalam membuat program sesuai permintaan. Penggunaan tipe data seharusnya disesuaikan dengan kebutuhan dan dibisaakan untuk menggunakan tipe data yang tepat sesuai dengan program sehingga tidak muncul permasalahan memori. Tipe data yang disediakan oleh Delphi adalah :

4.1.1

Integer

Digunakan untuk menyatakan bilangan yang tidak mempunyai angka desimal. Tabel 4-1 Tipe Data Integer Tipe Byte Word Longword ShortInt LongInt Integer Cardinal Int64 Rentang Nilai 0255 065535 04294967295 -128127 -21474836482147483647 -21474836482147483647 04294967295 -226263-1 Byte 1 2 4 1 4 4 4 8

4.1.2

RealDigunakan untuk menyatakan bilangan yang mempunyai angka desimal. Tabel 4-2 Tipe Data Real

Tipe Real48 Single Double Real Extended

Rentang Nilai

Byte 6 4 8 8 104-2

Tipe Data Struktur Program Fungsi dan Prosedur

Politeknik Telkom

Pemrograman Visual

Comp Currency

8 8

4.1.3(salah).

BooleanDigunakan untuk menyatakan data logika, yaitu True (benar) dan False Tabel 4-3 Tipe Data Boolean Tipe Boolean ByteBool WorldBool LongBool Byte 1 1 2 4

4.1.4

CharacterDigunakan untuk menyatakan data berupa sebuah karakter. Tabel 4-4 Tipe Data Character

Tipe Char AnsiChar WideChar

Isi 1 karakter ANSI 1 karakter ANSI 1 karakter Unicode

Byte 1 1 2

4.1.5

String

Digunakan untuk menyatakan sederetan karakter yang membentuk satu kesatuan. Tipe string ini dapat digunakan untuk menyimpan karakter kosong dan juga sebuah karakter. Tabel 4-5 Tipe Data String Tipe ShortString AnsiString WideString Byte 2 sampai dengan 256 4 sampai dengan 2 GB 4 sampai dengan 2 GB Isi Maksimum 256 karakter 231 karakter 230 karakter4-3

Tipe Data Struktur Program Fungsi dan Prosedur

Politeknik Telkom

Pemrograman Visual

4.1.6

Array

Digunakan untuk menyatakan sebuah variabel tunggal yang dapat menyimpan sekumpulan data yang sejenis. Pendeklarasian array pada Delphi : Nilai : array [1..10] of integer; Pendeklarasian diatas akan membuat sebuah variabel bernama Nilai yang dapat digunakan untuk menyimpan 10 data bertipe integer. Sedangkan untuk pemberian nilai pada array Nilai harus diikuti dengan nomor elemen yang akan diakses. Nilai[1] := 80;

4.1.7

Record

Digunakan untuk menyimpan sekumpulan data yang mungkin berbeda tipe tetapi saling berhubungan. Misal tipe data record untuk menyimpan data pribadi mahasiswa yang berisi Nama, Nim, dan Umur. Cara pendeklarasian tipe data record adalah sebagai berikut : type RecMhs = record NIM : AnsiString[10]; Nama : AnsiString[30]; Umur : integer; end; var Mahasiswa : RecMhs;

4.2

Tipe Terenumerasi dan Subrange

Tipe data terenumerasi dan subrange digunakan untuk menyatakan data berurutan yang mempunyai tipe data yang sama. Contoh deklarasi tipe terenumerasi : type warna = (Merah, Biru, Hijau, Kuning, Orange, Hitam, Putih); var WarnaCrayon : warna;Tipe Data Struktur Program Fungsi dan Prosedur 4-4

Politeknik Telkom

Pemrograman Visual

Contoh deklarasi tipe subrange Type Huruf = A .. Z; Angka = 1 .. 100; var Nilai : Angka; HurufBesar : Huruf;

4.2.1

Ordinal

Tipe data ini terdiri dari tipe integer, character, Boolean, enumerated, dan subrange. Data bertipe ordinal dioperasikan dengan beberapa fungsi yang dirancang pada tipe ordinal. Misal argumen n adalah suatu bilangan integer. Tabel 4-6 Tipe Data Ordinal Function Ord(n) Pred(n) Succ(n) High(n) Low(n) Hasil n n-1 n+1 Nilai tertinggi tipe data n Nilai terendah tipe data n Keterangan Misal n=3, hasil = 3 Misal n=3, hasil = 2 Misal n=3, hasil = 4 Misal n adalah integer, maka hasil = 2147483647 Misal n adalah integer, maka hasil = -2147483648

4.3

Konstanta

Konstanta merupakan suatu nilai yang bersifat tetap dan digunakan untuk mendeklarasikan suatu ketetapan. Konstanta tidak dapat diubah nilainya di dalam program, jika ingin mengubah nilainya maka harus melalui pendeklarasiannya. const phi = 3.14;

Tipe Data Struktur Program Fungsi dan Prosedur

4-5

Politeknik Telkom

Pemrograman Visual

4.4

Variabel

Variabel merupakan suatu tempat penyimpanan yang dialokasikan ke dalam memori, variabel diberi nama untuk pengenal dan digunakan untuk menyimpan sebuah data dengan nilai tertentu. Setiap variabel pasti mempunyai nama, penulisan nama variabel pada Delphi tidak memperhatikan besar kecilnya huruf. Aturan penulisan nama variabel : 1. Dimulai dengan karakter Alphabet 2. Harus unik pada lingkungan variabel yang sama

4.4.1

Variabel Global

Variabel global adalah variabel yang mempunyai ruang lingkup luas yaitu variabel yang dideklarasikan di dalam ruang lingkup unit atau program.

4.4.2

Variabel Lokal

Variabel Lokal adalah variabel yang mempunyai ruang lingkup kecil yaitu variabel yang di deklarasikan di dalam ruang lingkup function atau procedure.

4.5

Operator

Operator digunakan untuk memanipulasi dan mengolah data. Delphi menyediakan bermacam-macam operator.

4.5.1

Operator Penugasan

Berfungsi untuk memasukkan suatu data ke dalam suatu variabel. := Judul := Pemrograman Visual; Nilai1 := 50;

4.5.2

Operator AritmatikaDigunakan untuk melakukan operasi Aritmatika.

Tipe Data Struktur Program Fungsi dan Prosedur

4-6

Politeknik Telkom

Pemrograman Visual

Tabel 4-7 Operator Aritmatika Operator * / Div Mod + Operasi Perkalian Pembagian Pembagian bulat Sisa pembagian Penambahan Pengurangan

4.5.3

Operator Relasi

Digunakan untuk membandingkan suatu nilai dengan nilai yang lain. Hasil dari penggunaan operator ini berupa Boolean TRUE atau FALSE. Tabel 4-8 Operator Relasi Operator = < > = Keterangan Sama dengan Tidak sama dengan Lebih Kecil Lebih besar Lebih kecil sama dengan Lebih besar sama dengan

4.5.4

Operator Logika

Digunakan untuk mengekspresikan satu atau lebih data dan menghasilkan data Boolean yang baru. Tabel 4-9 Operator Logika Operator Not And Or Xor Keterangan Tidak Dan Atau Exclusive Or

Tipe Data Struktur Program Fungsi dan Prosedur

4-7

Politeknik Telkom

Pemrograman Visual

4.6

Kontrol Program

Kontrol program digunakan untuk mengatur jalannya program. Dengan adanya kontrol program maka dapat diatur apakah suatu pernyataan perlu dijalankan atau tidak. Jenis kontrol program yang disediakan oleh Delphi adalah :

4.6.1

Pencabangan

4.6.1.1 If then elseIf then else If pertama akan menguji kondisi jika bernilai true maka akan menjalankan pernyataan 1, jika bernilai false maka akan menjalankan pernyataan 2. Selain bentuk if then else, juga terdapat bentuk nested if jika kondisi yang akan diuji lebih dari satu.

4.6.1.2 Case ofDigunakan untuk mencabangkan ke pilihan tertentu berdasar pengujian suatu nilai. Pencabangan case ..of digunakan sebagai alternatif jika pencabangan cukup banyak. Case of : : ... : end;

4.6.1.3 Go ToPernyataan GoTo dipakai untuk melakukan pencabangan tak bersyarat ke suatu label. Label dapat dibuat dengan kata kunci label dan diikuti nama labelnya. Contoh : Begin Label Awal; A:=A*2; If (A New Application. 2. Pilih object Form1, kemudian ubah properties Caption menjadi Stop Watch. 3. Masukkan 3 TLabel ke Form1 yaitu Label1, Label2, Label3. Atur tata letaknya. Ubah properties Caption pada Label1 menjadi Mulai, Label2 menjadi Selesai, dan Label3 menjadi Lama.

Tipe Data Struktur Program Fungsi dan Prosedur

4-10

Politeknik Telkom

Pemrograman Visual

4.

Masukkan 3 objek TEdit ke Form1 yaitu Edit1, Edit2, Edit3. Atur tata letaknya sehingga Edit1 di samping label Mulai, Edit2 disamping label Selesai dan Edit3 disamping label Lama. Kosongkan properties Text nya. Masukkan 1 object TButton ke Form1, kemudian udabh properties Caption menjadi Start. Dan atur tata letaknya seperti gambar diatas. Untuk memasukkan object Timer, klik kategori System pada tool palette.

5.

6.

Gambar 4-2 - System Tab Component Palette

7. 8.

Pilih TTimer kemudian masukkan ke Form1, TTimer boleh diletakkan dimana saja dalam Form1, karena TTimer tidak akan tampil pada saat aplikasi dijalankan. Tampilkan source editor unit1 untuk menuliskan kode program. Pada deklarasi variabel ketikkan kode sebagai berikut : var Form1: TForm1; awal, akhir : TDateTime; lama : real; Pindah ke form kemudian klik ganda di daerah manapun pada form atau dengan memilih Form1 kemudian pada Object Inspector Event pilih OnCreate, maka akan muncul sebuah prosedur TForm1.FormCreate, kemudian lengkapi prosedur tersebut seperti di bawah :4-11

9.

Tipe Data Struktur Program Fungsi dan Prosedur

Politeknik Telkom

Pemrograman Visual

proedure TForm1.FormCreate(Sender: TObject); begin Timer1.Interval:=1; end; 10. Pindah ke form kemudian klik ganda pada object Timer1 maka akan muncul procedure TForm1.Timer1Timer kemudian lengkapilah program di dalamnya seperti berikut : procedure TForm1.Timer1Timer(Sender: TObject); var Slama : string; begin if Button1.Caption='Stop' then begin akhir := Time; Edit2.Text:=TimeToStr(akhir); lama := (akhir-awal)*100000; Str(lama:12:2,Slama); Edit3.Text:=Slama; end end; 11. Pindah ke form kemudian klik ganda pada object Button1 maka akan muncul procedure TForm1.Button1Click kemudian lengkapilah program di dalamnya seperti berikut : procedure TForm1.Button1Click(Sender: TObject); begin if Button1.Caption='Start' then begin awal := Time; Edit1.Text:=TimeToStr(Time); Button1.Caption:='Stop'; end elseTipe Data Struktur Program Fungsi dan Prosedur 4-12

Politeknik Telkom

Pemrograman Visual

if Button1.Caption='Stop' then begin Button1.Caption:='Selesai' end else Application.Terminate; end; 12. Simpan program dengan Save All. Beri nama file untuk untuk .pas file dengan UStopWatch.pas, dan utnuk .prj file dengan PrjStopWatch.prj 13. Jalankan program dengan klik icon Run 4.8.1.1 CARA KERJA APLIKASI STOP WATCH

Sistem kerja stop watch menggunakan timer untuk mengambil waktu atau jam pada komputer. Ketika program dijalankan pada akan tampil sebuah form yang masih kosong pada bagian object Edit, pada waktu ini procedure TForm1.FormCreate sudah dijalankan yaitu memberikan interval Timer menjadi 1 milidetik. Ketika user klik tombol Start maka procedure TForm1.Button1Click akan dijalankan, procedure ini akan melakukan pengambilan waktu mulai kemudian ditampilkan pada Edit1 dan tombol start akan diubah caption nya menjadi stop. Selama user belum mengklik tombol stop, maka caption pada Button1 akan menjadi Stop sehingga procedure TForm1.Timer1Timer dijalankan, sebenarnya procedure ini sudah berjalan ketika program di run, tetapi terdapat pengkondisian didalamnya dimana kode hanya akan dijalankan ketika caption pada Button1 adalah Stop. Karena procedure TForm.Timer1Timer sudah menemui kondisi yang benar maka pada Edit2 akan ditampilkan waktu yang terus bergerak dan pada Edit3 akan ditampilkan lama penggunaan stop watch. Jika user klik tombol Stop maka caption pada Button1 akan berubah menjadi Selesai, karena Caption pada Button1 sudah tidak Stop lagi makaTipe Data Struktur Program Fungsi dan Prosedur 4-13

Politeknik Telkom

Pemrograman Visual

procedure TForm1.Timer1Timer tidak menemukan kondisi benar, maka tidak dilakukan penampilan nilai timer ke Edit2, sehingga seakan-akan perhitungan waktu telah berhenti. Jika user klik tombol Selesai maka program akan di terminasi. 4.8.2 Aplikasi Notepad

Untuk dapat lebih memahami penggunaan delphi IDE dan hubungannya dengan penjelasan fungsi dan prosedur di atas maka dalam studi kasus yang kedua ini kita akan membuat sebuah aplikasi notepad. Aplikasi notepad yang dibuat memiliki fungsi sedekat mungkin dengan notepad bawaan Windows dimana aplikasi tersebut memiliki fitur-fitur diantaranya: Dapat mengubah type font dari text yang diketikkan Dapat membuka file text menggunakan open file dialog Dapat melakukan pencetakan Dapat melakukan manipulasi text cut, copy, paste dan select all Dapat melakukan saving (penyimpanan) file yang di edit Adapun komponen-komponen yang digunakan diantaranya: Komponen dialog control: Open File Dialog, Save Dialog, Font Dialog. Main Menu Status Bar Memo Komponen dialog adalah sebuah komponen yang digunakan dimiliki Delphi untuk mempermudah pemrogram membangun aplikasi yang membutuhkan inputan paramater dari user. Buatlah tampilan seperti berikut, dengan menggunakan beberapa komponen yang telah disebutkan di atas :

Tipe Data Struktur Program Fungsi dan Prosedur

4-14

Politeknik Telkom

Pemrograman Visual

Gambar 4-3 - Delphi Notepad Adapun properties dan event yang harus di buat untuk masingmasing komponen adalah sebagai berikut: PrintDialog Name PrintDialog1 OpenFileDialog Name DefaultExt Filter InitialDir Title FontDialog Name SaveDialog Name InitialDir

OpenDialog1 *.txt Text Files|*.txt|All Files|*.* C:\MyDocuments Open File...

FontDialog1

SaveDialog1 C:\4-15

Tipe Data Struktur Program Fungsi dan Prosedur

Politeknik Telkom

Pemrograman Visual

Filter DefaultExt ofOverwritePrompt Memo Name Scrollbars Align WordWrap StatusBar Name SimplePanel SimpleText MainMenu Name

Text Files|*.txt|All Files|*.* *.txt True

Memo1 ssBoth alClient True

StatusBar1 True Ready

MainMenu1 Tabel 4-10 Struktur Main Menu

Menu File

Sub Menu New Open Save SaveAs

Properties Enabled: True Name: FileNew Enabled: True Name: FileOpen Enabled: True Name: FileSave Enabled: True Name: FileSaveAs Enabled: True Name: FilePrint

Nama Procedure (Event on Click) FileNewClick FileOpenClick FileSaveClick FileSaveAsClick

Print

FilePrintClick

Tipe Data Struktur Program Fungsi dan Prosedur

4-16

Politeknik Telkom

Pemrograman Visual

Edit Undo Cut Copy Paste Select All Format Word Wrap Font Enabled: True Name: WordWrap Enabled: True Name: Font WordWrapClick Enabled: False Name: Undo Enabled: False Name: Cut Enabled: False Name: Copy Enabled: True Name: Paste Enabled: True Name: SelectAll UndoClick CutClick CopyClick PasteClick SelectAllClick

FontClick

Untuk setiap menu yang ada berikan masing-masing kode seperti tabel berikut : Tabel 4-11 Kode Program untuk setiap Menu Nama Procedure (Event on Click) Fungsi Sintaks Program FileNewClick Membuat file baru procedure TForm1.FileNewClick(Sender: TObject); begin if not (Memo1.Modified) then begin Memo1.Clear; Form1.Caption := 'UnNamed - Delphi Notepad';Tipe Data Struktur Program Fungsi dan Prosedur 4-17

Politeknik Telkom

Pemrograman Visual

OpenDialog1.FileName := ''; SaveDialog1.FileName := ''; end else if (Memo1.Modified) then begin ModalResult := MessageDlg('Save Changes?', mtConfirmation, [mbYes, mbNo, mbCancel], 0); if (ModalResult = mrYes) and (SaveChanges) then begin Memo1.Clear; Form1.Caption := 'UnNamed - Delphi Notepad'; Memo1.Modified := False; OpenDialog1.FileName := ''; SaveDialog1.FileName := ''; end else if ModalResult = mrNo then begin Memo1.Clear; Form1.Caption := 'UnNamed - Delphi Notepad'; OpenDialog1.FileName := ''; SaveDialog1.FileName := ''; Memo1.Modified := False; end; end; end; FileOpenClick Membuka File procedure TForm1.FileOpenClick(Sender: TObject); begin //jika tidak ada modifikasi pada Memo1 maka paggil prosedur OpenTheFile if not (Memo1.Modified) then //untuk bisa melihat detil dari sebuah prosedur maka klik kanan pada nama prosedur tersebutTipe Data Struktur Program Fungsi dan Prosedur 4-18

Politeknik Telkom

Pemrograman Visual

OpenTheFile else if (Memo1.Modified) then begin //untuk mendapatkan nilai button yang di pilih maka bisa di tampung di variable ModalResult ModalResult := MessageDlg('Save Changes?', mtConfirmation, [mbYes, mbNo, mbCancel], 0); if ((ModalResult = mrYes) and (SaveChanges)) or (ModalResult = mrNo) then begin OpenTheFile; Memo1.Modified := False; end; end; end; procedure TForm1.FileSaveClick(Sender: TObject); begin if SaveChanges then Memo1.Modified := False; end; FileSaveClick Menyimpan File procedure TForm1.FileSaveClick(Sender: TObject); begin if SaveChanges then Memo1.Modified := False; end; FileSaveAsClick Menyimpan File denga nama lain procedure TForm1.SaveAs1Click(Sender: TObject); begin if SaveDialog1.Execute then begin Memo1.Lines.SaveToFile(SaveDialog1.FileName); Form1.Caption := SaveDialog1.FileName + ' - Delphi Notepad';Tipe Data Struktur Program Fungsi dan Prosedur 4-19

Politeknik Telkom

Pemrograman Visual

Memo1.Clear; Memo1.Lines.LoadFromFile(SaveDialog1.FileName); end; end; FilePrintClick Mencetak Halaman procedure TForm1.FilePrintClick(Sender: TObject); begin if PrintDialog1.Execute then Print else PrinterSetupDialog1.Execute; end; UndoClick Mengembalikan kondisi procedure TForm1.UndoClick(Sender: TObject); begin if (Memo1.Modified) and (Memo1.CanUndo) then Memo1.Undo; end; CutClick Memotong text dan menyimpannya di memory procedure TForm1.CutClick(Sender: TObject); begin Memo1.CutToClipboard; end; CopyClick Menduplikasi text dan menyimpannya di memory procedure TForm1.CopyClick(Sender: TObject); begin Memo1.CopyToClipboard; end; PasteClick Menyalin text hasil cut/copy pada posisi cursor yang diinginkan procedure TForm1.PasteClick(Sender: TObject); beginTipe Data Struktur Program Fungsi dan Prosedur 4-20

Politeknik Telkom

Pemrograman Visual

Memo1.PasteFromClipboard; end; SelectAllClick Memilih semua text yang ada di lembar kerja procedure TForm1.SelectAllClick(Sender: TObject); begin Memo1.SelectAll; end; WordWrapClick Mengatur agar semua text berada di dalam batas kiri-dan kanan dari sebuah memo edit procedure TForm1.WordWrapClick(Sender: TObject); begin if WordWrap.Checked then begin Memo1.WordWrap := True; Memo1.ScrollBars := ssVertical; end else begin Memo1.WordWrap := False; Memo1.ScrollBars := ssBoth; end; end; FontClick Membuka kotak dialog untuk pengaturan font text yang sedang di edit procedure TForm1.FontClick(Sender: TObject); begin if FontDialog1.Execute then begin Memo1.Font := FontDialog1.Font; Memo1.Font.Color := FontDialog1.Font.Color; end; end;Tipe Data Struktur Program Fungsi dan Prosedur 4-21

Politeknik Telkom

Pemrograman Visual

Rangkuman

1.

2. 3. 4.

5. 6. 7.

Delphi menyediakan cukup banyak tipe data yaitu : Tipe integer, real, boolean, character, string, array, record, terenumerasi, subrange dan ordinal. Variabel merupakan tempat penyimpanan yang digunakan untuk menyimpan sebuah data dengan nilai tertentu. Konstanta digunakan untuk menyimpan suatu nilai yang bersifat tetap, nilai tersebut tidak dapat diubah di dalam program. Operator digunakan untuk memanipulasi dan mengolah data. Operator yang disediakan Delphi antara lain adalah operator penugasan, aritmetika, relasi dan logika. Struktur pencabangan dapat menggunakan struktur Ifthenelse atau caseof Struktur perulangan dapat menggunakan struktur for .. do, while do, atau repeat until. Function (fungsi) dan Procedure (prosedur) merupakan suatu susunan kode yang bisaanya digunakan sebagai alat untuk melakukan tugas tertentu atau mendapatkan nilai tertentu.

Tipe Data Struktur Program Fungsi dan Prosedur

4-22

Politeknik Telkom

Pemrograman Visual

Kuis Benar Salah

1 2

3

4

5

Pada aplikasi Stop Watch, procedure TForm1.Timer1Timer dijalankan ketika button1 di klik Konstanta merupakan suatu penyimpanan yang digunakan untuk menyimpan nilai yang bersifat tetap dan dapat diubah di dalam program Fungsi StrToDate digunakan untuk mendapatkan nilai berupa data bertipe TDateTime dari suatu data string dan untuk mendapatkan nilai bertope String dari data bertipe TDateTime maka digunakan fungsi DateToStr Variabel global adalah variabel yang mempunyai ruang lingkup luas yaitu variabel yang dideklarasikan di dalam ruang lingkup unit atau program Digunakan untuk menyatakan sebuah variabel tunggal yang dapat menyimpan sekumpulan data yang berbeda.

Tipe Data Struktur Program Fungsi dan Prosedur

4-23

Politeknik Telkom

Pemrograman Visual

Pilihan Ganda1 Di bawah ini yang bukan merupakan tipe data integer adalah a. Longword b. Cardinal c. Extended d. Int64 Perhatikan syntax berikut if Button1.Caption='Stop' then Sintaks diatas menggunakan operator a. penugasan b. aritmetika c. logika d. relasi Manakah struktur pencabangan berikut yang merupakan struktur pencabangan tak bersyarat a. If .. else b. Go to c. Case of d. If .. then else Fungsi built in yang digunakan untuk mendapatkan nilai berupa data bertipe extended dari suatu string a. StrToInt b. StrToFloat c. IntToStr d. FloatToStr Procedure yang dijalankan ketika program mulai dijalankan adalah a. TForm1.Button1Click b. TForm.Timer1Timer c. TForm1.Edit1Click d. TForm1.FormActivate

2

3

4

5

Tipe Data Struktur Program Fungsi dan Prosedur

4-24

Politeknik Telkom

Pemrograman Visual

5 KONVERSI TIPE DATA

Overview

Bab ini akan menjelaskan macam-macam konversi tipe data yang didukung oleh Delphi. Dengan studi kasus currency converter (Konversi mata uang). Juga mengajarkan pengolahan string mengunakan Delphi dan pemakaian komponen Dialog untuk mengimplementasikan pemrosesan File dan stream text menggunakan Delphi.

Tujuan

1 2

Mahasiswa mengerti berbagai macam konversi tipe data Mahasiswa dapat mengimplementasikan konversi tipe data dengan Borland Delphi5-1

Konversi Tipe Data

Politeknik Telkom

Pemrograman Visual

5.1

Konversi Tipe Data

Konversi tipe data digunakan untuk mengubah satu tipe data menjadi tipe data lain. Kasus yang paling sering terjadi dimana konversi ini sangat diperlukan adalah ketika membuat suatu aplikasi yang melakukan operasi matematis berdasarkan data yang di-input user kemudian hasil operasi tersebut di-output-kan lagi kepada user. Delphi menerima input dan mengoutput-kan data berupa string, sedangkan untuk melakukan operasi matematis diperlukan data numerik baik integer maupun real sehingga dari input string yang diterima harus dikonversi menjadi data numerik untuk dilakukan operasi matematis, kemudian hasil operasi yang berupa data numerik tersebut dikonversi kembali menjadi string untuk di-output-kan. Seperti pada aplikasi Currency Converter yang akan dibuat pada studi kasus modul ini. Gambaran umum dari kasus tersebut adalah sebagai berikut:Fungsi konversi Fungsi konversi

Input (String)

Operasi matematis (Numerik)

Output (String)

Gambar 5-1 - gambaran umum fungsi konversi dengan studi kasus converter mata uang

Secara umum fungsi untuk melakukan konversi tipe data adalah:

tipe_data_yang_akan_diubah to tipe_data_yang_diinginkan (data_yang_tipenya_akan_diubah)Beberapa fungsi konversi tipe data yang terdapat pada Delphi diantaranya: 1. StrToInt(data_string) Untuk mengubah data bertipe string menjadi data bertipe integer. 2. StrToFloat(data_string) Untuk mengubah data bertipe string menjadi data bertipe real/ floating point. 3. IntToStr(data_integer) Untuk mengubah data bertipe integer menjadi data bertipe string.Konversi Tipe Data 5-2

Politeknik Telkom

Pemrograman Visual

4.

5.

FloatToStr(data_float) Untuk mengubah data bertipe real/ floating point menjadi data bertipe string. Round(data_float) Merupakan fungsi pembulatan untuk mengubah data bertipe real menjadi data bertipe integer.

Selain fungsi konversi di atas, masih banyak lagi fungsi-fungsi konversi tipe data yang lain.

5.1.1

Studi Kasus : Aplikasi Currency Converter

Aplikasi Currency Converter merupakan suatu aplikasi untuk mengkonversi satu nilai mata uang ke mata uang lain berdasarkan nilai tukarnya. Pada aplikasi Currency Converter yang akan kita buat, terdiri dari empat bagian utama yaitu : 1. Change Currency Pada bagian ini user bisa memilih mata uang yang akan dikonversi dengan memilih salah satu item pada RadioGroupChangeCurrency. USD IDR untuk mengkonversi US Dollar ke Rupiah atau sebaliknya. EUR IDR untuk mengkonversi EURO ke Rupiah atau sebaliknya. JPY IDR mengkonversi Yen Jepang ke Rupiah atau sebaliknya.

2. Change Currency RatePada bagian ini user dapat mendefinisikan nilai tukar mata uang yang akan dikonversi dengan menginputnya pada EditChangeCurrencyRate. Pada saat ButtonChange diklik, nilai yang diinput pada EditChangeCurrencyRate akan diambil, disimpan pada variabel currency_rate kemudian dioutputkan pada LabelCurrencyRate4 di bagian Currency Rate.

3. Currency RateBagian ini untuk menampilkan nilai tukar mata uang yang sebelumnya didefinisikan pada Change Currency Rate.Konversi Tipe Data 5-3

Politeknik Telkom

Pemrograman Visual

4. Currency ConverterBagian ini untuk mengkonversi nilai mata uang sesuai dengan pilihan mata uang pada Change Currency dan nilai tukar mata uang pada Currency Rate. Untuk melakukan konversi, disediakan dua buah Edit yang nilainya bisa diinput sendiri oleh user yaitu EditCurrencyConverter1 dan EditCurrencyConverter2. Jika nilai di EditCurrencyConverter1 berubah maka nilai di EditCurrencyConverter2 juga akan berubah sesuai dengan hasil konversi, begitu juga sebaliknya. Tampilan aplikasi Currency Converter yang akan kita buat adalah seperti pada gambar di bawah ini :FormConverter RadioGroupChangeCurrency PanelChange LabelChangeCurrencyRate1 LabelChangeCurrencyRate2 GroupBoxChangeCurrencyRate

LabelChangeCurrencyRate3 EditChangeCurrencyRate ButtonChange GroupBoxCurrencyRate

GroupBoxCurrencyConverter LabelCurrencyRate1 EditCurrencyConverter1 LabelCurrencyRate2 EditCurrencyConverter2

LabelCurrencyRate4 LabelCurrencyRate3 LabelCurrencyConverter2

LabelCurrencyConverter1

PanelConverter

Gambar 5-2 - Rancangan Form Currency Converter

Selain properties Caption dan Name seperti ditunjukkan pada gambar, beberapa objek ada yang memiliki properties tambahan dan event. Berikut objek-objek tersebut :

Konversi Tipe Data

5-4

Politeknik Telkom

Pemrograman Visual

Tabel 5-1 Properties Tambahan pada Beberapa Objek

No1 2

Object NameFormConverter RadioGroupChangeCurrency

PropertiesBorderIcons > biMaximize : False Items : USD - IDR EUR - IDR JPY - IDR

Event

OnClick

3 4 5

ButtonChange EditCurrencyConverter1 EditCurrencyConverter2

OnClick OnChange OnChange

Adapun langkah langkah untuk pembuatan aplikasi Currency Converter ini adalah: 1. Buat sebuah project baru yang terdiri dari satu form. Pada form tersebut, tambahkan objek-objek dengan tampilan seperti pada gambar. Sesuaikan properties dari objek-objek tersebut seperti pada gambar dan tabel. 2. Pada kode program tambahkan sebuah variabel global bertipe real dengan nama currency_rate. Variabel tersebut digunakan untuk menampung nilai tukar mata uang yang diinput dari EditChangeCurrencyRate. Var FormConverter: TFormConverter; currency_rate: real; 3. Buat sebuah fungsi IsNumber untuk mengecek apakah input nilai pada EditChangeCurrencyRate, EditCurrencyConverter1, atau EditCurrencyConverter2 berupa angka atau bukan. Fungsi ini diperlukan untuk menjamin bahwa nilai yang diinput benar-benar berupa angka karena Edit menerima semua input string baik berupa angka atau bukan, sedangkan aplikasi ini hanya menerima input berupa angka. Input tersebut akan dikonversi menjadi nilai numerik yang digunakan dalam operasi perhitungan matematis untuk konversi nilai mata uang.5-5

Konversi Tipe Data

Politeknik Telkom

Pemrograman Visual

function IsNumber(number:String):Boolean; var i,sum:byte; result_IsNumber:boolean; begin result_IsNumber:=false; sum:=0; for i:=1 to length(number) do begin case number[i] of '0'..'9':result_IsNumber:=true; '.':sum:=sum+1; else result_IsNumber:=false; break; end; end; if sum>1 then result_IsNumber:=false; IsNumber:=result_IsNumber; end; 4. Beri event OnClick pada RadioGroupChangeCurrency dan ketikan kode program berikut : //memilih mata uang yang akan dikonversi procedure TFormConverter.RadioGroupChangeCurrencyClick(Sender: TObject); begin //memilih item USD-IDR if RadioGroupChangeCurrency.ItemIndex=0 then begin LabelChangeCurrencyRate1.Caption:='USD';5-6

Konversi Tipe Data

Politeknik Telkom

Pemrograman Visual

LabelCurrencyRate1.Caption:='USD'; LabelCurrencyConverter1.Caption:='USD'; end else //memilih item EUR-IDR if RadioGroupChangeCurrency.ItemIndex=1 then begin LabelChangeCurrencyRate1.Caption:='EUR'; LabelCurrencyRate1.Caption:='EUR'; LabelCurrencyConverter1.Caption:='EUR'; end else //memilih item JPY-IDR if RadioGroupChangeCurrency.ItemIndex=2 then begin LabelChangeCurrencyRate1.Caption:='JPY'; LabelCurrencyRate1.Caption:='JPY'; LabelCurrencyConverter1.Caption:='JPY'; end; //inisialisasi EditChangeCurrencyRate.Text:='0'; LabelCurrencyRate4.Caption:='0'; EditCurrencyConverter1.Text:='0'; EditCurrencyConverter2.Text:='0'; end; 5. Beri event OnClick pada ButtonChange dan ketikan kode program berikut : //mendefinisikan nilai tukar mata uang procedure TFormConverter.ButtonChangeClick(Sender: TObject); begin if (EditChangeCurrencyRate.Text'') and (IsNumber(EditChangeCurrencyRate.Text)) then5-7

Konversi Tipe Data

Politeknik Telkom

Pemrograman Visual

begin //konversi string menjadi real currency_rate:=StrToFloat(EditChangeCurrencyRate.Text); //konversi real menjadi string LabelCurrencyRate4.Caption:=FloatToStr(currency_rate); end else begin currency_rate:=0; LabelCurrencyRate4.Caption:='0'; end; end; 6. Beri event OnChange pada EditCurrencyConverter1 dan ketikan kode program berikut : //mengkonversi nilai mata uang lain ke Rupiah procedure TFormConverter.EditCurrencyConverter1Change(Sender: TObject); var convert_value, result : real; begin if (EditCurrencyConverter1.Text