Pembuatan Form Utama Flowchar dari Sistem

3.4.1 Pembuatan Form Utama

Form utama untuk Editor HTML terdiri dari Menu, toolbar, dan tab. Langkah-langkah membuat Editor HTML. 1. Membuka proyek baru pilih Windows Form Aplication dan pada kotak isi Name kita isikan Nama rojrk yang akan kita buat. Untuk lebih jelasnya Kita lihat gambar Gambar 3.7 Membuat Proyek Aplikasi Windows 2. Setelah Kita mengisikan proyek baru terbuka klik tombol OK maka akan terbuka sebuah form baru seperti pada gambar di bawah: Universitas Sumatera Utara Gambar 3.8 Jendela Form Baru 3. Setelah form baru terbuka ubahlah property form baru tersebut dengan aturan propertinya sebagai berikut: Name : FrmUtama Text : Editor Html 4. Kemudian Pada toobox pilih kontrol MenuStrip. Gambar 3.9 Menempatkan Menu Universitas Sumatera Utara 5. Kemudian isikan menu-menu yang akan dibuat dan atur propertynya sesuai tabel dibawah ini Tabel 3.1 Properti untuk semua menu File Gambar 3.10 Tampilan Menu File dan Sub Menu No Text name shortcutKeys 1 File FileToolStripMenuItem 2 New NewToolStripMenuItem CTRL+N 3 Open OpenToolStripMenuItem Ctrl+O 4 Save SaveToolStripMenuItem Ctrl+S 5 Save as SaveAsToolStripMenuItem Ctrl+SHIFT+S 6 Close Tab TutupTabToolStripMenuItem Ctrl+SHIFT+X 7 Print Preview PrintPreviewToolStripMenuItem 8 Print PrintToolStripMenuItem CTRL+P Universitas Sumatera Utara Tabel 3.2 Properti untuk Menu Edit No Text name shortcutKeys 1 Edit EditToolStripMenuItem 2 Undo UndoToolStripMenuItem CTRL+Z 3 Redo RedoToolStripMenuItem CTRL+Y 4 Copy CopyToolStripMenuItem CTRL+C 5 Cut CutToolStripMenuItem CTRL+X 6 Paste PasteToolStripMenuItem CTRL+v 7 Font FontToolStripMenuItem Untuk Lebih jelasnya lihat hasil beriku Gambar 3.11 Menu Edit Tabel 3.3 Properti untuk Menu View No Text Name shortcutKeys 1 View ViewToolStripMenuItem 2 Eksekusi HasliToolStripMenuItem F5 Universitas Sumatera Utara Tampilan hasil dari properti Gambar 3.12 Menu View Tabel 3.4 Properti untuk Menu Editor No Text Name shortcutKeys 1 Editor EditorToolStripMenuItem 2 About AboutToolStripMenuItem Tampilan Sesudah kita buat menu Gambar 3.13 Menu Editor Universitas Sumatera Utara 6. Membuat Toolbar Pada toobox pilih kontrol Toolstrip, letakkan di Form yang akan kita buat toolstrip Gambar 3.14 Tampilan Untuk membuat Toolbar Tabel 3.5 Properti untuk Menu toolbar No Text Name komponen 1 Split BtnSplit ToolStripButton 2 Text btnText ToolStripButton 3 Hasil btnHasil ToolStripButton Gambar 3.15 Tampilan Untuk Toolbar yang sudah dibuat Universitas Sumatera Utara 7. Membuat Tab Page Pada toolbox pilih Tabcontrol kemudian letakkan di form yang akan kita buat. Gambar 3.16 Membuat tab Kemudian Remove hapus semua tab, sehingga hasilnya sebagai berikut Gambar 3.17 Membuat tab kosong Universitas Sumatera Utara Baru ubah property kontrol tab. Tabel 3.6 Properti untuk tab page No Kontrol property Nilai properti 1. TabControl1 Name TabControl1 Anchor Top, Bottom, Left, Right

3.4.2 Pembuatan Form Isi