Pendesainan Form Desain Antar Muka

5. Toolbar Exit Digunakan untuk keluar dari program aplikasi.

4.4.2 Pendesainan Form

Pada langkah pendesain form, dirancang tampilan-tampilan grafis yang dapat dibuat sebagai antar muka pemakai aplikasi. Hal-hal yang perlu dipertimbangkan adalah: 1. Bagaimana membuat form-form yang efektif serta sesuai dengan kebutuhan. 2. Bagaimana mengatur tata letak form layout, baik itu pewarnaan serta penentuan seperti kontrol-kontrol pada form yang akan mempenngaruhi segi estetika sebuah antar muka pemakai. Adapun tampilan atau model dari setiap form input data dalam sistem yang dibuat adalah sebagai berikut: Name : frmhalaman.frm Caption : PROGRAM PENGENDALI SURAT Icon : Sembarang Universitas Sumatera Utara 1. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting Toolbar Name Caption Toolbar1 - Picturebox Name Caption Picture1 - Label1 Name Caption Label1 PT. PERSERO ANGKASA PURA II Label2 Name Caption Label2 BANDAR UDARA POLONIA Label3 Name Caption Label3 MEDAN Monthview Name Caption MonthView1 - Frame Name Caption Frame1 - Picturebox Name Caption Picture2 - Textbox Name Caption Text1 - Tabel 3.0 propertis Tampilan frmhalaman Selanjutnya mengedit menu Toolbar terlihat pada gambar berikut: Gambar 3.0 Atur Properties Toolbar Universitas Sumatera Utara Setelah itu akan muncul gambar berikut Gambar 3.1 Property Pages Pada menu Button masukkan nama menu yang akan diklik. Klik tombol insert menu untuk memasukkan daftar menu yang akan diklik.terlihat pada gambar berikut: Gambar 3.2 Buttons Universitas Sumatera Utara Maka akan menghasilkan Desain Berikut ini: Gambar 3.3 Hasil Desain frmhalaman Selanjutnya membuat tampilan surat masuk berikut cara memmbuatnya: 2. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar Tabel 3.1 Edit tampilan frmsuratmasuk Universitas Sumatera Utara Maka akan terlihat Hasil Desain berikut: Gambar 3.4 Hasil Desain frmsuratmasuk Selanjutnya membuat tampilan Tambah surat masuk berikut cara memmbuatnya: Objek Properti Setting Label1 Name Caption Label1 Tanggal Diterima Label2 Name Caption Label2 Tanggal Diajukan Label3 Name Caption Label3 Perihal Surat Label4 Name Caption Label4 Kepada Label5 Name Caption Label5 DariPengirim TextBox Name Caption Txttanggalditerima - TextBox Name Caption Txtdiajukan - TextBox Name Caption Txthalsurat - TextBox Name Caption Txtkepada - TextBox Name Caption txt1 - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Tabel 3.2 Desain Form Tambah dan Edit Universitas Sumatera Utara Maka akan terkihat hasil desain sebagai berikut: Gambar 3.5 Desain Form Edit Data Surat Masuk Selanjutnya membuat tampilan surat keluar berikut cara memmbuatnya: 3. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar CommandButton Name Caption Cmdedit Edit Tabel 3.3 Desain Form Surat Masuk Universitas Sumatera Utara Maka akan terlihat Hasil Desain berikut: Gambar 3.6 Desain Daftar Data Surat Masuk Selanjutnya membuat tampilan Tambah dan Edit surat masuk berikut cara membuatnya: Objek Properti Setting Label1 Name Caption Label1 Nama Surat Label2 Name Caption Label2 Lampiran Label3 Name Caption Label3 Tujuan Universitas Sumatera Utara Label4 Name Caption Label4 Perihal Label5 Name Caption Label5 Pengirim Label6 Name Caption Label6 Tembusan TextBox Name Caption txtnamasurat - TextBox Name Caption txtlampiran - TextBox Name Caption txttujuan - TextBox Name Properti txtperihal - TextBox Name Caption txtpengirim - TextBox Name Caption Txttembusan - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Tabel 3.4 Properties Data Tambah dan Edit Surat Keluar Maka akan terlihat Hasil Desain berikut: Gambar 3.7 Hasil Desain Data Surat Keluar Universitas Sumatera Utara Selanjutnya membuat tampilan Data Agenda berikut cara membuatnya: 4. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar CommandButton Name Caption Cmdedit Edit Tabel 3.5 Properties Data Agenda Maka akan terlihat Hasil Desain berikut: Gambar 3.8 Hasil Desain Data Agenda Universitas Sumatera Utara Selanjutnya membuat tampilan Tambah dan Edit surat masuk berikut cara membuatnya: Objek Properti Setting Label1 Name Caption Label1 No_Surat Label2 Name Caption Label2 Dari Label3 Name Caption Label3 Keterangan TextBox Name Caption txtnosurat - TextBox Name Caption Txtdari - TextBox Name Caption Txtket - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Tabel 3.6 Properti Data Tambah dan Edit Agenda Maka akan terlihat Hasil Desain berikut: Gambar 3.9 Hasil Desain Tambah dan Edit Data Agenda Universitas Sumatera Utara Selanjutnya membuat tampilan Data Terusan berikut cara membuatnya: 5. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar CommandButton Name Caption Cmdedit Edit Tabel 3.7 Properti Data Terusan Maka akan terlihat Hasil Desain berikut : Gambar 3.10 Hasil Desain Data Terusan Universitas Sumatera Utara Selanjutnya membuat tampilan Tambah dan Edit surat masuk berikut cara membuatnya: Objek Properti Setting Label1 Name Caption Label1 Kode_Terusan Label2 Name Caption Label2 Terusan TextBox Name Caption Txtkoter - TextBox Name Caption Txtterusan - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Tabel 3.8 Properties Tambah dan Edit Data Terusan Maka akan terlihat Hasil Desain berikut Gambar 3.11 Hasil Desain Tambah dan Edit Data Terusan Universitas Sumatera Utara Selanjutnya membuat tampilan Data Terusan berikut cara membuatnya: 6. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar CommandButton Name Caption Cmdedit Edit Tabel 3.9 Properties Data Masalah Maka akan terlihat Hasil Desain berikut Gambar 3.12 Hasil Desain Data Masalah Universitas Sumatera Utara Selanjutnya membuat tampilan Tambah dan Edit Data Masalah berikut cara membuatnya: Objek Properti Setting Label1 Name Caption Label1 Kode_Masalah Label2 Name Caption Label2 Masalah TextBox Name Caption Txtkode - TextBox Name Caption Txtmasalah - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Table 3.10 Properties data Tambah dan Edit Data Masalah Maka akan terlihat Hasil Desain berikut Gambar 3.13 Hasil Desain Tambah dan Edit Data Masalah Universitas Sumatera Utara Selanjutnya membuat tampilan Data Disposisi berikut cara membuatnya: 7. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting DataGrid Name Caption DataGrid1 - CommandButton Name Caption Cmdtambah Tambah CommandButton Name Caption Cmdhapus Hapus CommandButton Name Caption Cmdkeluar Keluar CommandButton Name Caption Cmdedit Edit Table 3.11 Properties Data Disposisi Maka akan terlihat Hasil Desain berikut Gambar 3.14 Hasil Desain Data Disposisi Universitas Sumatera Utara Selanjutnya membuat tampilan Tambah dan Edit Data Disposisi berikut cara membuatnya: Objek Properti Setting Label1 Name Caption Label1 Kode_Disposisi Label2 Name Caption Label2 Disposisi TextBox Name Caption Txtkodis - TextBox Name Caption Txtdisposisi - CommandButton Name Caption Cmdsimpan Simpan CommandButton Name Caption Cmdbatal Batal Tabel 3.12 Properties Tambah dan Edit Data Disposisi Maka akan terlihat Hasil Desain berikut Gambar 3.15 Hasil Desain Tambah dan Edit Data Diposisi Universitas Sumatera Utara Selanjutnya membuat tampilan Form About berikut cara membuatnya: 8. Aktifkan Menu Editor, Kemudian desainlah menu seperti dibawah ini : Objek Properti Setting Picture Box Name Picture1 Picture Box Name Picture2 Text Box Name Text1 DMSXpButton1 Name cmdVisitMe DMSXpButton2 Name cmd_tutup Timer Name Timer1 Tabel 3.13 Properties Form About Maka akan terlihat Hasil Desain berikut Gambar 3.16 Hasil Desain From About Universitas Sumatera Utara

4.5 Algoritma