14 Gui

25
NAMA : BIMANTARA KSATRIA PUTRA KELAS : 2 D3 TELEKOMUNIKASI B NRP : 7211 0300 52 GRAPHICAL USER INTERFACE (GUI) I. Tujuan 1. Membuat aplikasi GUI untuk kotak dialog menggunakan script zenity. 2. Membuat beberapa kotak dialog seperti question, calendar, entry, error, file selection, list, notification, progress, warning, scale, info dan text info dialog II. Percobaan Percobaan 1 : Kalender Dialog 1. Membuat kalender dialog melalui baris perintah pada prompt bimac@bimacx-pc:~$ szDate=$(zenity --calendar --text "Pick a day" --title "Medical Leave" --day 23 --month 5 --year 2012); echo $szDate 05/23/2012 bimac@bimacx-pc:~$

description

gui

Transcript of 14 Gui

NAMA

: BIMANTARA KSATRIA PUTRAKELAS

: 2 D3 TELEKOMUNIKASI B

NRP

: 7211 0300 52

GRAPHICAL USER INTERFACE (GUI)I. Tujuan1. Membuat aplikasi GUI untuk kotak dialog menggunakan script zenity.2. Membuat beberapa kotak dialog seperti question, calendar, entry, error, file selection, list, notification, progress, warning, scale, info dan text info dialogII. PercobaanPercobaan 1 : Kalender Dialog

1. Membuat kalender dialog melalui baris perintah pada prompt

bimac@bimacx-pc:~$ szDate=$(zenity --calendar --text "Pick a day" --title "Medical Leave" --day 23 --month 5 --year 2012); echo $szDate

05/23/2012

bimac@bimacx-pc:~$

2. Membuat kalender dialog dengan program shell.

bimac@bimacx-pc:~$ gedit cal2.sh

#!/bin/bash

szDate=$(zenity --calendar --text "Pick a day" --title "Medical Leave" --day 28 --month 4 --year 2012); echo $szDate

05/23/2012

bimac@bimacx-pc:~$

3. Menggunakan perintah if pada program kalender dialog

bimac@bimacx-pc:~$ gedit cal3.sh

#!/bin/bash

if zenity --calendar \

--title="Select a Date" \

--text="Click on a date to select that date." \

--day=20 --month=8 --year=2010

then echo $?

else echo "No date selected"

fi

bimac@bimacx-pc:~$ bash cal3.sh

08/20/2010

0

bimac@bimacx-pc:~$

Percobaan 2 : File Save Dialog1. Membuat file selection dialog melalui baris perintah pada prompt

bimac@bimacx-pc:~$ szSavePath=$(zenity --file-selection --save --confirm-overwrite); echo $szSavePath

/media/bimac/Satria/bima

bimac@bimacx-pc:~$

2. Membuat file selection dialog untuk memilih file

bimac@bimacx-pc:~$ gedit fsd2.sh

#!/bin/bash

FILE=$(zenity --file-selection --confirm-overwrite);echo $FILE

bimac@bimacx-pc:~$ bash fsd2.sh

/media/bimac/Satria/prak 14 shell.odt

bimac@bimacx-pc:~$

3. Membuat file selection dialog untuk memilih dan menyimpan file

bimac@bimacx-pc:~$ gedit fsd3.sh

#!/bin/bash

FILE=$(zenity --file-selection --save --confirm-overwrite);echo $FILE

bimac@bimacx-pc:~$ bash fsd3.sh

/home/bimac/Desktop/tes.sh

4. Membuat file selection dialog untuk memilih file dengan statement case

bimac@bimacx-pc:~$ gedit fsd4.sh

#!/bin/bash

FILE=`zenity --file-selection --title="Select a File" case $?` in

0)

echo "\"$FILE\" selected.";;

1)

echo "No file selected.";;

-1)

echo "No file selected.";;

esac

bimac@bimacx-pc:~$ bash fsd4.sh

"/home/bimac/Desktop/tes.sh" selected.

bimac@bimacx-pc:~$

Percobaan 3 : Entry Dialog

1. Memasukkan teks jawaban pada entry dialog dan menampilkan pada terminal.

bimac@bimacx-pc:~$ jawab=$(zenity --entry --text "di mana kamu?" --entry-text "di rumah"); echo $jawab

di rumahbimac@bimacx-pc:~$

2. Memasukan password/teks tersembunyi pada entry dialog dan menampilkan pada terminal.

bimac@bimacx-pc:~$ gedit ed2.sh

#!/bin/bash

if zenity --entry \

--title="Add an Entry" \

--text="Enter your _password:" \

--entry-text "password" \

--hide-text

then echo $?

else echo "No password entered"

fi

bimac@bimacx-pc:~$ bash ed2.sh

password

0

bimac@bimacx-pc:~$

Percobaan 4 : Information Dialog

1. Menampilkan script zenity berupa informasi pada info dialog.bimac@bimacx-pc:~$ zenity --info --text "Join us at http//:intikaliskiri.blogspot.com Bimantara's Site"

bimac@bimacx-pc:~$ gksudo lsof | zenity --text-info --width 530

2. Memilih file dan menampilkan sebagai informasi kemudian perubahan isinya disimpan pada file baru (tmp.txt)bimac@bimacx-pc:~$ gedit id2.sh

#!/bin/bash

FILE=`zenity --file-selection \ --title="Select a File"`

case $? in

0)

zenity --text-info \

--title=$FILE \

--filename=$FILE \

--editable >/tmp.txt;;

1)

echo "No file selected.";;

-1)

echo "No file selected.";;

esac

bimac@bimacx-pc:~$ bash id2.sh

Percobaan 5 : Error Dialog

1. Menampilkan pesan error pada proses instalasi.bimac@bimacx-pc:~$ zenity --error --text "Installation failed"

2. Menampilkan pesan error penulisan program.bimac@bimacx-pc:~$ gedit erd2.sh

#!/bin/bash

zenity --error \ --text="bash: ./zenity3.sh: /bin/hash: bad interpreter: No such file or directory."

bimac@bimacx-pc:~$ bash erd2.sh

Percobaan 6 : Question Dialog

1. Menampilkan pertanyaan pada proses shutdown.bimac@bimacx-pc:~$ zenity --question --text "Are you sure want to shutdown?"; echo $?

2. Menampilkan pertanyaan suatu proses.

bimac@bimacx-pc:~$ gedit qd2.sh#!/bin/bash

zenity --question \ --text="Are you sure you wish to proceed?"

bimac@bimacx-pc:~$ bash qd2.sh

Percobaan 7 : Warning Dialog

1. Menampilkan peringatan untuk menghentikan proses.

bimac@bimacx-pc:~$ zenity --warning --text "This will kill, are you sure?"; echo $?

2. Menampilkan progress update system log.

bimac@bimacx-pc:~$ gedit wd2.sh#!/bin/bashzenity --warning \ --text="Disconnect the power cable to avoid electrical shock."bimac@bimacx-pc:~$ bash wd2.sh

Percobaan 8 : Progress Dialog

1. Menampilkan progress hasil perintah gksudo lsof pada file lsof.txtbimac@bimacx~pc:~$ gksudo lsof | tee >(zenity --progress pulsate) >lsof.txt

2. Menampilkan progres update sistem log.bimac@bimacx~pc:~$ gedit pd2.sh

#!/bin/sh

(

echo "10" ; sleep 1

echo "# Updating mail logs" ; sleep 1

echo "20" ; sleep 1

echo "# Resetting cron jobs" ; sleep 1

echo "50" ; sleep 1

echo "This line will just be ignored" ; sleep 1

echo "75" ; sleep 1

echo "# Rebooting system" ; sleep 1

echo "100" ; sleep 1

) | zenity --progress \

--title="Update System Logs" \

--text="Scanning mail logs..." \

--percentage=0

if [ "$?" = -1 ] ; then

zenity --error \

--text="Update canceled."

fi

bimac@bimacx~pc:~$ bash pd2.sh

Percobaan 9 : Notification Icon Dialog

1. Menampilkan file gambar sebagai notification icon.Dari Prompt

bimac@bimacx-pc:~$ zenity --notification --windows-icon="bich6.gif" --text "Please update your system."

Dari program.sh

bimac@bimacx-pc:~$ gedit nf1b.sh

#!/bin/bash

zenity --notification window-icon="bich6.gif" --text "Please update your system."

bimac@bimacx-pc:~$ bash nf1b.sh

2. Menampilkan info sebagai notification icon.bimac@bimacx-pc:~$ gedit nf2.sh

#!/bin/bash

zenity --notification\

--window-icon="info" \

--text "There are system updates necessary!"

Percobaan 10 : Scale List and Dialog

1. Menampilkan dialog untuk pengaturan nilai skala.

bimac@bimacx-pc:~$ gedit sl1.sh

#!/bin/bash

ans=$(zenity --scale --text "pick a number" --min- value=2 --max-value=100 --value=2 --step 2);echo $ans

bimac@bimacx-pc:~$ bash sl1.sh

13

2. Menampilkan list dialog dalam bentuk radio (radiolist).bimac@bimacx-pc:~$ gedit sl2.sh

#!/bin/bash

ans=$(zenity --list --text "Is linux.byexamples.com

helpful?" --radiolist --column "Pick" --column

"Opinion" TRUE Amazing FALSE Average FALSE "Difficult

to follow" FALSE "Not helpful"); echo $ans

bimac@bimacx-pc:~$ bash sl2.sh

Difficult to follow

3. Menampilkan list dialog dalam bentuk check list.bimac@bimacx-pc:~$ gedit sl3.sh

#!/bin/sh

ans=$(zenity --list --text "How linux.byexamples

can be improved?" --checklist --column "Pick" --

column "options" TRUE "More pictures" TRUE "More

complete post" FALSE "Includes Installation

guidelines" FALSE "Create a forum for question

queries" --separator=":"); echo $ans

bimac@bimacx-pc:~$ bash sl3.sh

More pictures:More complete post

4. Menampilkan list dialog dalam bentuk daftar table (kolom)

bimac@bimacx-pc:~$ gedit sl4.sh

#!/bin/sh

zenity --list \

--title="Choose the Bugs You Wish to View" \

--column="Bug Number" --column="Severity"

--column="Description" \

992383 Normal "GtkTreeView crashes on multiple

selections" \

293823 High "GNOME Dictionary does not handle

proxy" \

393823 Critical "Menu editing does not work in

GNOME 2.0"

bimac@bimacx-pc:~$ bash sl4.sh

III. ANALISA

Percobaan kali ini adalah mengenai GUI (Graphical User Interface). GUI digunakan untuk menampilkan kotak dialog yang menunjukan proses dari program sehingga program menjadi lebih mudah dijalankan dan lebih interaktif. Pada percobaan kali ini dicoba beberapa GUI menggunakan zenity.

Percobaan pertama adalah penggunaan script zenity untuk menampilkan dialog kalender. Untuk menampilkan dialog kalender dapat langsung memanggilnya melalui prompt juga melalui file bashscript. Untuk memanggilnya melalui prompt digunakan perintah berikut :

bimac@bimacx-pc:~$ szDate=$(zenity --calendar --text "Pick a day" --title "Medical Leave" --day 23 --month 5 --year 2012); echo $szDate

text digunakan untuk memberi kalimat pada window, sedangkan title untuk memberi judul pada window. Untuk memanggilnya melalui file bash script perintah tersebut cukup dituliskan dalam file bash script. Dan file bash script tersebut dijalankan. Percobaan ketiga pada dialog kalender adalah mengenai pengkondisian dimana jika tanggal dipilih maka tanggal yang dipilih akan dicetak, jika tidak maka akan ditampilkan kalimat No date selected

Percobaan kedua adalah file save dialog. Yaitu dialog yang membuka direktori untuk menyimpan file. Untuk menampilkan file save dialog digunakan zenity dengan perintah berikut :

szSavePath=$(zenity --file-selection --save --confirm-overwrite); echo $szSavePath

perintah zenity disimpan dalam variable, kemudian untuk menampilkan jendela dialognya variable tersebut dicetak. Dalam pemilihan direktori untuk mentimpan file dapat dikombinasikan dengan beberapa perintah pengkondisian. Misalnya untuk menyimpan file pada suatu direktori dengan nama file yang sama, maka akan ada peringatan untuk mereplace file dengan nama yang sama.

Percobaan ketiga adalah dialog entry yakni dialog yang dapat mengambil inputan dari keyboard. Tipe dari zenity yang digunakan adalah entry. Cara menampilkannya sama dengan tipe zenity yang lain. Untuk menginputkan data password dapat ditambahkan opsi --hide-text yang digunakan untuk menyembunyikan karakter yang diinputkan.

Percobaan selanjutnya adalah zenity untuk menampilkan information dialog. Tipe zenity yang digunakan adalah info. Dan untuk mencetak isi informasinya digunakan text isi informasi. Percobaan kelima adalah menampilkan dialog error. Tipe yang digunakan adalah error, dan pesan yang disampaikan dapat ditulis dengan perintah textpesan error. Dialog error dapat digunakan untuk menampilkan pesan error bilamana ada kesalahan dalam proses-proses tertentu seperti error pada file bash script seperti pada percobaan ke 2. Dialog error dimunculkan bila ada kesalahan dalam penulisan program.

Percobaan keenam adalah Question dialog, dialog ini digunakan untuk menampilkan pertanyaan yang membutuhkan keputusan untuk dijalankan, tipe zenity yang digunakan adalah question. Untuk menampilkan teks pertanyaan dapat digunakan perintah textteks pertanyaan. Selanjutnya adalah mengenai warning dialog. Warning dialog biasanya berisi peringatan, tipe zenity yang digunakan adalah warning, teks peringatannya dapat ditulis dengan perintah textperingatan.

Percobaan kedelapan adalah progress dialog, dialog ini menampilkan jendela loading dari suatu proses. Pada percobaan pertama dialog progress digunakan untuk menampilkan proses dari perintah gksudo lsof. Tipe zenity yang digunakan adalah progress.

gksudo lsof | tee >(zenity --progress pulsate) >lsof.txt

Percobaan kesembilan adalah untuk menampilkan Notification Icon Dialog. Tipe zenity yang digunakan adalah notification. Dalam tipe ini diberi opsi untuk memilig icon sendiri dari file .gif. dengan menambahkan perintah window-icon=nama icon.gif. Percobaan terakhir adalah mengenai scale list dan dialog. Yang pertama adalah untuk menampilkan dialog scale yang digunakan untuk menampilkan scale dengan value tertentu. Perintahnya adalah sbb :

ans=$(zenity --scale --text "pick a number" --min- value=2 --max-value=100 --value=2 --step 2);echo $ansYang kedua adalah list dialog dalam tipe radiolist. Radiolist adalah list yang hanya bisa dipilih 1 pilihan saja. Tipe zenity ayng digunakan adalah list, kemudian ditambahkan printah radiolist. Untuk memberi nama pada kolom digunakan perintah columnnama kolom. Untuk mengisi opsi-opsi yang ada pada radiolist digunakan perintah TRUE opsi1 FALSE opsi2 FALSE opsi3 dst.

Tipe list selanjutnya adalah checklist, tipe yang digunakan adalah list dengan tambahan perintah checklist. Untuk mengisi opsi-opsinya dapat digunakan cara yang sama seperti radiolist. Percobaan terakhir adalah menampilkan list dialog berupa table. Untuk membuat table tipe yang digunakan adalah list namun tidak diberi perintah tambahan apapun. Kemudian untuk memberi nama kolom digunakan perintah columnnama_kolom. Kolom dapat dibuat lebih dari satu, dan untuk mengisi data pada masing-masing kolomnya, antara data pada kolom satu dengan yang lain cukup dipisahkan dengan tanda spasi. Dan untuk berganti baris(mengisi data baru) pada data sebelumnya ditutup dengan tanda /.

KESIMPULAN

GUI menggunakan zenity dapat digunakan untuk menampilkan kotak dialog yang dapat mempermudah kita dalam menjalankan program, tampilan interface dari GUI juga membuat program lebih interaktif. Zenity dapat dijalankan langsung dari prompt maupun melaui file bash. Dalam perintah zenity dapat diberi tambahan perintah-perintah tertentu seperti pengkondisian, loop dsb untuk menyesuaikan GUI dengan program yang dijalankan.LATIHAN

1. Buatlah GUI kotak dialog dengan program shell untuk recovery file dengan ketentuan sebagai berikut:1. Ketika program dijalankan akan muncul kotak dialog info yang memberitahukan proses recovery file dengan cara harus memilih tanggal, bulan dan tahun recovery.

2. Jika waktu pada step 1 yang dipilih tidak sesuai akan muncul pesan error.

3. Jika pemilihan pada step 1 benar proses recovery file dilaksanakan hingga recovery file lengkap.

Program :

#!/bin/bash

zenity --info --text "Pilih waktu untuk recovery";

date=$(zenity --calendar --text "Tanggal recovery : ");

if [ "$date" == "01/01/2013" ]; then

zenity --info --text "Proses recovery akan dijalankan";

else

zenity --error --text "Tanggal tidak sesuai";

fi

2. Buatlah program untuk mencari file gambar jpg atau png dan hasilnya ditampilkan pada list dialog.

Program :

#!/bin/bash

ls | grep jpg > "tmp.txt";

proc=`awk 'BEGIN{i=0}

{

printf "img["i"]="$1" ;";

i+=1;

}' < "tmp.txt"`;

eval "$proc";

zenity --list --title "Mencari gambar" \

--text "${#img[@]} gambar ditemukan." \

--column "FILENAME" "${img[@]}";

3. Dari entry dialog terdapat permintaan untuk memasukkan nama, jika diisikan maka muncul info dialog yang menyapa pemilik nama tersebut dengan teks hello yang diikuti nama yang dimasukkan.

Program :

#!/bin/bash

name=$(zenity --entry --text "Masukan nama : ");

zenity --info --text "Hello $name";

4. Pada kalender dialog terdapat teks pertanyaan Kapan anda ulang tahun?, apabila user menjawab dengan memilih tanggal yang tepat akan muncul proses dialog kemudian info dialog ucapan selamat ulang tahun dan gambar sebagai icon pesta ulang tahun.Program :

#!/bin/bash

date=$(zenity --calendar --title "Ulang Tahun" \

--text "Kapan anda ulang tahun");

if [ "$date" == "04/28/2013" ]; then

zenity --info --text "Selamat ulang tahun";

else

zenity --info --text "Tanggal tidak sesuai";

fi