Bab 10 Pemakaian Antar Muka Aplikasi(User Interface)

Bab 10

Pemakaian Antar Muka Aplikasi

(User Interface)

​

Definisi Antarmuka pada Aplikasi

Antarmuka(interface) adalah Komponen untuk berkomunikasi dalam mendapatkan sebuah data ataupun informasi didalam sebuah sistem komputer

Antarmuka dibagi menjadi dua jenis:

• Graphical User Interface(GUI)

• Command Line Interface(CLI)

Antarmuka pengguna(user interface) adalah:

Mekanisme komunikasi antara pengguna dan sistem.

Antarmuka pengguna dapat menerima informasi dari pengguna dan memberikan informasi kepada pengguna untuk membantu mengarahkan alur algoritma

Tujuan Antarmuka pengguna sebagai berikut:

• Mengomunikasikan fitur-fitur yang tersedia sehingga pengguna mudah mengerti dalam menjalankan sistem

• Membuat tampilan program menjadi sederhana dan lebih menarik.

• Menampilkan hasil dari proses data yang diolah pada sistem atau program

• Memudahkan pencarian data yang dihasilkan oleh suatu sistem program

• Efisiensi waktu dalam pengolahan data yang dilakukan oleh pengguna

• Mengurangi kesalahan pada saat memasukkan data

Hal-hal yang perlu dilakukan dalam pembuatan antarmuka pengguna antara lain sebagai berikut:

• Mengumpulkan beberapa data dan informasi yang dibutuhkan oleh sistem untuk mencapai tujuan projek dan kebutuhan pengguna.

• Menganalisis dan informasi pada pengguna melalui diskusi dengan beberapa orang agar pengguna sistem dapat mudah memahami antarmuka pengguna suatu aplikasi.

• Mengembangkan proses atau alur informasi dan data dari sistem menggunakan flowchart(diagram alir sistem).

• Mengembangkan wireframes, dalam bentuk kertas ataupun prototipe layar sederhana.

• Menguji prototipe pada teknik pengguna

• Membuat tampilan yang sederhana dan memudahkan pengguna untuk menjalankannya

Jenis-jenis Antarmuka Pengguna

Ada dua jenis antarmuka pengguna, yaitu command line interface dan graphical user interface

a. Command Line Interface(CLI)

CLI adalah tipe antarmuka pengguna dalam bentuk teks.

Pengguna berkomunikasi dengan sistem atau program melalui terminal dengan mengetikkan perintah-perintah tertentu

b. Graphical User Interface(GUI)

GUI adalah sebuah tampilan antarmuka pengguna dalam bentuk gambar, grafik, ikon dan kursor.

Open Ended

Apa yang kamu ketahui dengan Antarmuka pengguna(user Interface)?

Open Ended

Apa yang kamu ketahui dengan tujuan antarmuka pengguna?

Open Ended

Apa yang kamu ketahui dengan Command Line Interface(CLI)?

Open Ended

Apa yang kamu ketahui dengan Graphical User Interface(GUI)?

Open Ended

Hal-hal apa yang yang perlu dilakukan dalam pembuatan antarmuka pengguna?

B. Perangkat lunak Pembuat Antar Muka Aplikasi

Seiring dengan berkembangnya sistem operasi komputer berbasis GUI, seperti Windows, Linux, dan Mac OS, maka bahasa pemrograman yang mendukung pembuatan aplikasi berbasis GUI pun mengalami banyak kemajuan.

Saat ini ada banyak perangkat lunak pemrograman berupa IDE (Integrated Development Environment )​ untuk membangun aplikasi berbasis GUI

Perangkat lunak yang populer yang digunakan antara lain Microsoft Visual Studio, NetBeans, Gambas, Code::Blocks, Lazarus, dan Mono​Develop.

​

Materi saat ini akan membahas Microsoft Visual Basic yang terdapat di dalam​ Visual Studio, yang digunakan Microsoft Visual Basic 6.0

​1. Instalasi Visual Basic

Untuk menginstall software Microsoft Visual Basic 6.0 sebenarnya sangat mudah dan dapat dilakukan. Agar lebih jelas, silahkan langsung saja ikuti langkah-langkah berikut ini.

Langkah pertama adalah silahkan ekstrak file master installer Microsoft Visual Basic 6.0 yang sudah anda download. Kemudian, buka folder hasil ekstrak dan jalankan (Run as administrator) file SETUP yang tipenya Application.

​Kemudian, pada jendela utama Installation Wizard for Visual Studio 6.0 Enterprise Edition, silahkan langsung saja klik Next.​

Selanjutnya, pada jendela End User License Agremeent, silahkan klik opsi I accept the agreement. Setelah itu, klik Next untuk melanjutkan ke tahap berikutnya.

Selanjutnya, pada jendela End User License Agremeent, silahkan klik opsi I accept the agreement. Setelah itu, klik Next untuk melanjutkan ke tahap berikutnya.

​Nama lengkap

2. Identifikasi antarmuka aplikasi

Antarmuka aplikasi biasanya memiliki menu-menu tertentu yang tersusun membentuk bar menu. Menu-menu pada bar menu kadang memiliki dropdown menu yang berisi beberapa submenu

​

Setiap menu dan subemenu tersebut menunjukkan fungsi atau fitur tertentu​ yang terdapat pada aplikasi atau perangkat lunak tersebut

3. Antarmuka Visual Basic 6.0

​Menu	​Fungsi
​File	​Operasi seputar File
​Edit	Memproses pengeditan objek​
​View	​Untuk mengaktifkan bagian-bagian IDE
​Project	​Untuk manajemen proyek beserta pendukungnya
​Format	​Untuk melakukan proses format tampilan di Form
​Debug	​Untuk Debugging, yakni melacak kesalahan program saat dijalankan
​Run	​Untuk menangani proses kompilasi dan eksekusi program

​4. Bar Menu

​Menu	​Fungsi
​Query	​Untuk mengakses data yang diperlukan pada aplikasi database
​Diagram	​Untuk pengaturan diagram terutama pada proses perancangan
​Tools	​Menyediakan perlengkapan tambahan yang diperlukan dalam penyusunan program
​Add-Ins	​Untuk pengaturan program tambahan pada Visual Basic 6.0
​Window	​Untuk pengaturan jendela program yang sedang aktif (terbuka)
​Help	​Untuk memberikan informasi atau bantuan bagi pengguna

​5. Toolbar

​Jendela Project Explorer terletak di sebelah kanan atas jendela Visual Basic berisi form-form yang telah kita buat

Pada jendela Ptoject Explorer terdapat tiga tombol pengaktif untuk

Windows code​, Windows Object, dan Toggle Folder

6. Project Explorer

​

​Masing-masing Form atau kontrol memiliki properti yang berbeda

​

Jendela Properties terdiri dari tiga bagian sebagai berikut.

• Bagian untuk memilih object

• Bagian pengaturan nilai-nilai properti

• Bagian untuk memilih properti sebuah objek​

7. Properties

​

Jendela Form adalah jendela untuk memasang form. Kamu dapat memperbesar atau memperkecil ukuran form.

Dalam pembuatan program dalam Visual Basic dilakukan dalam 2 tahapan, yaitu merancang form dan membuat kode program​

​8. Jendela Form

​

Toolbox merupakan kotak perangkat yang berisi kumpulan tombol objek atau kontrol untuk mengatur desain dari aplikasi yang akan dibuat

​

9.​Toolbox​

Open Ended

Sebutkan menu-menu yang ada dalam bar menu!

Open Ended

Apa fungsi Menu File?

Open Ended

Apa fungsi menu Edit?

Open Ended

Apa fungsi menu View?

Open Ended

Apa fungsi menu Debug?

Open Ended

Apa fungsi menu Run?

Open Ended

Apa fungsi menu Add-Ins?

Open Ended

Apa fungsi menu Windows?

Open Ended

Apa fungsi menu Help?

Open Ended

Jelaskan kegunaan kotak properties!

Open Ended

Jelaskan kegunaan dari Add Project!

Open Ended

Jelaskan kegunaan dari Add Form

Open Ended

Jelaskan kegunaan dari menu editor

Open Ended

Bagaimana cara mengubah ukuran komponen-komponen pada form?

Open Ended

Jelaskan langkah-langkah mengubah caption pada komponen TextBox