Resume Slide 11

 Komponen Antarmuka Grafis

A.    Pengertian Komponen Antar Muka Grafis

Komponen Antar muka grafis adalah bentuk-bentu tampilan yang dapat dilihat dan bersifat tetap umumnya yang selalu digunakan pada sebuah program aplikasi computer. Tujuan dari pada komponen antar muka grafis yaitu mendapat perhatian pengguna kepada program aplikasi yang telah dibuat, sebuah program aplikasi harus mempunyai tampilan yang menarik perhatian pengguna.

B.    Tujuan Perancangan komponen antar muka grafis

Tujuan perancangan antarmuka pada dasarnya adalah untuk mendapatkan satu kriteria yang sangat penting dalam pengoperasian sebuah program aplikasi, yakni aspek ramah dengan pengguna (user friendly).

Keluwesan

•      Antar muka grafis yang luwes adalah antar muka yang mempunyai kemampuan untuk mencapai suatu tujuan dengan sejumlah cara yang berbeda.

•      Karakteristik penting dalam mencapai keluwesan adalah bahwa antar muka grafis harus dapat menyesuaikan diri dengan keinginan pengguna dan bukan pengguna yang menyesuaikan diri dengan kerangka antar muka grafis yang telah ditetapkan perancang sistem.

•      Salah satu ciri keluwesan adalah adanya kesempatan bagi pengguna untuk memperluas antarmuka sistem untuk memenuhi kebutuhan pribadinya.

Kompleksitas

•      Antarmuka tidak perlu dibuat atau digunakan lebih dari yang diperlukan,karena tidak ada keuntungan yang diperoleh, justru aka membuat implementasinya lebih sulit.

Konsistensi

•      Atribut yang sangat penting untuk membantu pengguna mengembangkan mentalitas yang diperlukan dalam pengoperasian sebuah sistem computer dengan antar muka grafis.

•      mendorong pengembangan mentalitas dengan cara memberikan semacam petunjuk kepada pengguna.

•      Biasanya jika seorang pengguna sudah dapat menggunakan sebuah perintah dengan suatu pilhan , maka ia terdorong untuk menggunakan perintah yang sama dengan berbagai pilihan yang berbeda.

Observabilitas

Dapat berfungsi secara benar dan Nampak sederhana bagi pengguna , meskipun sesungguhnya pengolahan internalnya sangat rumit.

Umpan balik

Program yang baik akan selalu memberikan umpan balik yang dapat berupa pesan tentang apa yang dikerjakan computer serta statusnya saat itu.

Contoh umpan balik yang seringkali diperlukan, misalnya jika pengguna harus memilih suatu pilihan dari sejumlah pilihan yang ada, maka program harus memberitahu pengguna cara yang dapt dipakai untuk memilih suatu pilihan, dan jika terjadi suatu kesalahan komputasi, program akan menampilkan suatu pesan salah yang sesuai.

Kontrolabilitas

Sistem selalu berada dibawah kontrol pengguna. Agar tujuan ini tercapai, antarmuka harus mempunyai sarana yang memungkinkan  pengguna untuk dapat menentukan :

•      Dimana sebelumnya ia berada

•      Dimana sekarang ia berada

•      Kemana ia dapat pergi

•      Apakah pekerjaan yang sudah dilakukan dapat dibatalkan

C.    Keuntungan perancangan antar muka grafis

1.     Antarmuka yang dihasilkan menjadi lebih baik.

•      Hasil rancangan sementara dapat dibuat prototype dan diimplementasikan, bahkan sebelum aplikasinya ditulis.

•      Perubahan yang diinginkan pengguna dapat segera dilakukan karena antarmukanya mudah dimodifikasi.

•      Sebuah aplikasi dapat mempunyai lebih dari sebuah antarmuka.

•      Sejumlah aplikasi yang berbeda dapat mempunyai antarmuka yang konsisten, karena mereka dapat dibangun dengan menggunakan peranti bantu yang sama.

•      Memberikan wjah yang unik dari sebuah program aplikasi dan sentuhan khusus kepada sebah program aplikasi.

•      Memungkinkan sejumlah ahli bekerja bersama untuk memberikan kontribusinya masing-masing, misalnya ahli grafis, psikolog, ahli kognitif.

2.     Program antarmuka menjadi mudah ditulis dan lebih ekonomis untuk dipelihara

•      Program antarmuka menjadi lebuh terstruktur dan lebih modular Karena sudah dipisahkan dari aplikasinya.

•      Program antarmuka lebih reusable karena peranti bantu menggabungkan begian-bagian yang sama.

•      Kehandalan antarmuka menjadi lebih tinggi , karena program itu dibangkitkan secara otomatis dari arah spesifikasi yang lebih tinggi.

•      Spesifikasi antarmuka menjadi lebih mudah dinyatakan,divalidasi, dan dievaluasi serta modifikasi.

D.    Komponen dasar antarmuka grafis

Komponen antarmuka bekerja pada mode teks ataupun mode grafis. Dari sekian banyak antar muka grafis yang dipakai pada paket-paket program aplikasi, sering ditemukan bentuk-bentuk yang selalu tetap. Komponen itulah yang disebut dengan komponen dasar antar muka grafis.

1.     Spin box adalah suatu komponen antar muka grafis yang digunakan untuk mengatur suautu nilai peubah, biasanya bertipe numerik, dengan menambahkan atau mengurangkannya dengan suatu nulai tertentu. Dalam spin box nilai maksimum dan minimum peubah harus dinyatakan dengan jelas, supaya tombol ini tidak memutar (spining) terus menerus.

2.     List box, untuk menampilkan sejumlah pilihan yang tersedia yang dapat dipilih oleh pengguna program. Setelah pengguna memilih sekian banyak pilihan yang tersedia , pilihan terpilih akan disimpan sebagai nilai dari sebuah peubah.

3.     Check box, komponen ini digunakan untuk memilih satu atau lebih pilihan dari jumlah pilihan yang tersedia.

4.     Tombol radio , berbeda dengan check box, tombol radio hanya memungkinkan pengguna untuk memilih satu pilihan diantara beberapa pilihan yang tersedia. Contohnya memilih jenis kelamin.

5.     Tombol tekan, biasanya digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan menggunakan mouse (klik mouse). Jenis tombol ini disebut tombol tekan karena tombol ini seolah masuk kedalam layar computer, seperti halnya anda menekan  sebuah tombol.

E.    Strategi pengembangan antarmuka grafis

Dari beberapa hal yang dijelaskan diatas bahwa sebuah  program aplikasi terdiri atas dua bagian penting. Pertama adalah bagian antarmuka yang berfungsi sebagai sarana dialog antara manusia dengan computer. Bagian kedua bagian aplikasi, yang berfungsi menghasilkan informasi berdasar olahan data yang sudah  dimasukan oleh pengguna lewat algoritma yang diisyaratkan oleh aplikasi tersebut.

Strategi pembuatan antar muka grafis berbasis pengisian (form filling)

Digunakan untuk aktivitas pemasukan data atau pemanggilan data, pada umumnya layout layar tampilan mirip dengan form tercetak.

Berikut ini hal-hal yang perlu diperhatikan dalam pembuatan antarmuka berbasiskan form filling :

1.     Proteksi tampilan. Pembatasan agar pengguna tidak dapat mengakses semua tampilan yang ada dilayar.

2.     Batasan medan tampilan,

3.     Isi medan

4.     Medan opsional. Dapat dinyatakan secara tekstual atau menggunakan aturan tertentu.

5.     Default

6.     Bantuan. Yang menunjukan cara pengisian boring.

7.     Medan penghentian. Masukan data dalam medan dapat diakhiri dengan jalan menekan tombol enter atau return

8.     Navigasi. Kursor dapat digerakkan di sekeliling layar menggunakan tombol tab untuk urutan yang tetap..

9.     Pembetulan kesalahan. Pengguna dapat membetulkan kesalahan dengan menggunakan tombol backspace.

10.   Penyelesaian. Cara yang digunakan untuk memberitahu pengguna bahwa seluruh proses pengisian telah selesai.

Strategi pembuatan antar muka grafis berbasiskan WIMP

Antar muka yang merupakan ragam default dari sebagian besar aplikasi sistem computer saat ini.

a.     Window

Area pada layar yang mempunyai sifat seperti terminal yang independent. Dapat terdiri dari teks atau grafis.

b.     Icon

Berupa lukisan atau gambar berukuran kecil mewakili suatu obyek dalam antarmuka, dapat suatu window atau tindakan.

c.     Menu

Berupa pilihan operasi atau fungsi yang disediakan pada layar.

d.    Pointer / pull up (down)

Komponen tambahan :

Beberapa komponen tambahan dalam model WIMP

a)     Button (tombol)

•      Radio button

Kumpulan pilihan yang harus memilih salah satu, tidak boleh lebih dari satu.

•      Check box

Kumpulan dari pilihan-pilihan yang boleh memilih satu atau lebih dari satu.

b)    Palleters (palet) : kumpulan kemungkinan mode yang tersedia

c)     Combo box, list box

d)    Kotak dialog : jendela yang berisi informasi penting

e)     Kotak peringatan

Sumber :  

Buku Interaksi Manusia & Komputer

Karya Supriyanta

Deepublish, 23 Jun 2015 - 154 halaman

                     

cara membuat guestbook / buku tamu

asssalamualaikum wr.wb
agusss
selamat datang di blog saya ,saya akan berbagi pengalaman tentang pembuatan guestbook dengan mengunakan php dan mysql ..
  saya sendiri adalah siswa dari smk al ittihad cianjur dan mengambil jurusan RPL (rekayasa perangkat lunak) oleh karena itu saya akan berbagi sedikit pengalaman..

 sebelum membuat guestbook anda harus menginstal xampp terlebih dahulu jika sudah terinstal maka ayo kita mulai.
pertama kalian harus membuat database cara nya :
1.buka web browser.
2.buka phpmyadmin ( localhost\phpmyadmin ).

3.buat buat database dengan nama ( latihan ).

4.buat lah tabel di dalam database latihan dengan nama ( guestbook ) dengan field (3).

5.isi field itu dengan "1.nama varchar  30  2.email varchar 30, 3.komentar  text.".

6. jika selesai maka akan tampil.

perjalanan baru mencapai 35% kawan ,jika sudah membuat database nya mari kita membuat sintax nya ..

1.siap kan macromedia atau notepad atau apa saja software yang bisa membuat .php ( di sini saya           membuat dengan macromedia dreamweave 8 )
2.buat halaman baru.
3.ketikan pada halaman tersebut sintax ini:
<html>
<body>  
<form method="post" action="">
 nama: <input type="text" size="30" maxlength="40" name="nama"   placeholder="input name"/>
email : <input type="text" size="30" maxlength="40" name="email" placeholder="input email
komentar:<br><textarea rows="5" cols="20" name="komentar"></textarea>
<input type="submit" value="kirim" name="kirim"/>

</form>

<?php
 mysql_connect('localhost','root','') or die ("koneksi gagal");
mysql_select_db('latihan');

if(isset($_POST['kirim']))
{ $sql="insert into guestbook values (
'".$_POST['nama']."'
,
'".$_POST['email']"'
,
'".$_POST['komentar']."'
)";

$query=mysql_query($sql);
} 
$sql="select nama,komentar from guestbook";
if($query=mysql_query($sql));

for($row=0;$row=mysql_fetch_array($query);++$row )

{

echo "nama : $row[nama]<br>";
echo "email : $row[email]<br>";
echo "komentar : $row[komentar]<br>";
}
?>
</body>
</html>

 sintax html yang tadi adalah
<html>
<body>  
<form method="post" action="">
 nama: <input type="text" size="30" maxlength="40" name="nama"   placeholder="input name"/>
email : <input type="text" size="30" maxlength="40" name="email" placeholder="input email
komentar:<br><textarea rows="5" cols="20" name="komentar"></textarea>
<input type="submit" value="kirim" name="kirim"/>

</form>

 dan ini adalah sintax yang menghubungkan php ke mysql nya:
mysql_connect('localhost','root','') or die ("koneksi gagal");
mysql_select_db('latihan');

if(isset($_POST['kirim']))
{ $sql="insert into guestbook values (
'".$_POST['nama']."'
,
'".$_POST['email']"'
,
'".$_POST['komentar']."'
)";

$query=mysql_query($sql);
}

 dan yang ini adalah sintax yang menghubungkan mysql ke php:
$sql="select nama,komentar from guestbook";
if($query=mysql_query($sql));

for($row=0;$row=mysql_fetch_array($query);++$row )

{

echo "nama : $row[nama]<br>";
echo "email : $row[email]<br>";
echo "komentar : $row[komentar]<br>";
}
?>
</body>
</html>

  

 nah jika sudah selesai maka simpan di data xampp/htdocs lalu simpan dengan folder baru.
cara melihat nya anda harus membuka web browser seperti berikut:
localhost\ (nama folder buatan anda).



selesai ...

selamat mencoba dan jangan mudah putus asa....
GOOD LUCK..  "MA'ANAJAH" !!!dasdadads