GRAPHICAL USER INTERFACE (GUI)

Praktikum 14 GRAPHICAL USER INTERFACE (GUI) A. T U J U A N 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. B. DASAR TEORI Zenity Zenity mempunyai peran sebagai pembuat GUI pada shell programing atau yang disebut Grafik User Interface dimana mempunyai fungsi mempermudah user untuk mengoperasikan programnya melalui grafis secara interaktif. Zenity mempunyai banyak opsi seperti: --entry : meminta input dari keyboard --info : menampilkan text yang dimana berfungsi sebagai sebuah info --list : membuat list berdasarkan column dan row secara tertabel dan lainlain. Dengan opsi seperti diatas zenity dapat digunakan untuk membuat sebuah question dialog box. Disamping itu zenity juga dapat digunakan untuk aplikasi yang lain seperti calendar, entry, error, info, file selection, list, notification, progress, warning, scale dan text info. Pada bab ini akan di ilustrasikan bagaimana membuat aplikasi zenity dialog. Contoh sintak zenity : 124

Kalender Dialog Dengan menggunakan option -calendar dapat dibuat sebuah kalender dialog. Pada kalender dialog ini user diijinkan untuk memilih inisial yang khusus pada perintah date yaitu dengan menggunakan option : --text=text Spesikasi text digunakan untuk menampilkan teks pada kalender dialog. --day=day Spesifikasi day digunakan untuk memilih tanggal di dalam kalender dialog. Day harus diberi nilai angka untuk tanggal dari 1 sampai 31. --month=month Spesifikasi month digunakan untuk memilih bulan di dalam kalender dialog. Month harus diberi nilai untuk bulan dari 1 sampai 12. --year=year Spesifikasi year digunakan untuk memilih tahun di dalam kalender dialog. --date-format=format Menentukan kembali format dari dialog kalender setelah seleksi tanggal (date). Format standar tergantung pada system lokal dan format yang dapat diterima oleh fungsi strftime misalnya %A %d/%m/%y. File Selection Dialog Untuk membuat file selection dialog digunakan opsi --file-selection. Zenity akan melakukan seleksi file atau direktori ke output standard. Mode default file selection dialog adalah buka file. File selection dialog memiliki beberapa opsi: --filename=filename Menentukan file atau direktori yang dipilih pada dialog pemilihan file ketika dialog yang pertama ditampilkan. 125

--multiple Menentukan pemilihan beberapa nama file dalam dialog pemilihan file. --directory Menentukan pilihan direktori pada dialog pemilihan file. --save Set dialog pemilihan file ke mode save. --separator=separator Menentukan string yang digunakan untuk membagi kembali daftar nama file. List Dialog Menggunakan opsi --list Untuk membuat list dialog. Zenity akan mengembalikan entry dalam kolom pertama baris teks yang dipilih ke output standar. Data untuk dialog kolom harus ditentukan menurut kolom, baris demi baris. Data dapat disediakan untuk dialog melalui input standar. Setiap entri harus dipisahkan oleh karakter baris baru. Jika menggunakan opsi --checklist atau --radiolist, setiap baris harus dimulai dengan TRUE atau FALSE. List dialog memiliki opsi berikut: --column=column Menentukan header kolom yang ditampilkan dalam list dialog. Harus ditentukan opsi colomn untuk setiap kolom yang ingin ditampilkan dalam dialog. --checklist Menentukan bahwa kolom pertama pada list dialog berisi kotak cek. --radiolist Menentukan bahwa kolom pertama pada list dialog berisi kotak radio. --editable Memungkinkan ditampilkan item yang akan diedit. --separator=separator Menentukan string apa yang digunakan ketika dialog mengembalikan daftar entry yang dipilih. --print-column=column Menentukan apakah kolom harus dicetak pada seleksi. Default kolom adalah '1 '. ALL yang dapat digunakan untuk encetak semua kolom dalam list. 126

Untuk melihat penjelasan lebih detail tentang penggunaan zenity, dapat dilihat di terminal dengan mengetik man zenity, maka akan muncul petunjuk penggunaan zenity. C. PROSEDUR 1. Masuk ke sistem operasi Linux. 2. Login sebagai user yang telah ditentukan. 3. Gunakan gedit/text editor untuk editor penulisan program, perintah eog, dan zenity pada pemrograman shell. 4. Catatlah hasil dari setiap program pada prosedur no.3 sebagai laporan sementara. D. PERCOBAAN Percobaan 1 : Kalender Dialog 1. Membuat kalender dialog melalui baris perintah pada prompt. $ szdate=$(zenity --calendar --text "Pick a day" -- title "Medical Leave" --day 23 --month 5 --year 2008); echo $szdate 2. Membuat kalender dialog dengan program shell. szdate=$(zenity --calendar --text "Pick a day" -- title "Medical Leave" --day 23 --month 5 --year 2008); echo $szdate 3. Menggunakan perintah if pada program kalender dialog. 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 Percobaan 2 : File Selection Dialog 1. Membuat file selection dialog melalui baris perintah pada prompt. 127

$ szsavepath=$(zenity --file-selection --save -- confirm-overwrite);echo $szsavepath 2. Membuat file selection dialog untuk memilih file. FILE=$(zenity --file-selection --confirmoverwrite);echo $FILE 3. Membuat file selection dialog untuk memilih dan menyimpan file. FILE=$(zenity --file-selection -save --confirmoverwrite);echo $FILE 4. Membuat file selection dialog untuk memilih file dengan statement case. 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 Percobaan 3 : Entry Dialog 1. Memasukan teks jawaban pada entry dialog dan menampilkan pada terminal. $ jawab=$(zenity --entry --text "di mana kamu?" -- entry-text "di rumah"); echo $jawab 2. Memasukan password/teks tersembunyi pada entry dialog dan menampilkan pada terminal. #!/bin/sh if zenity --entry \ --title="add an Entry" \ --text="enter your _password:" \ --entry-text "password" \ --hide-text then echo $? else echo "No password entered" fi Percobaan 4 : Information Dialog 1. Menampilkan script zenity berupa informasi pada info dialog. 128

a. $ zenity --info --text "Join us at http//:www.eepisits.edu. Shell programming #2Telkom." b. $ gksudo lsof zenity --text-info --width 530 2. Memilih file dan menampilkan sebagai informasi kemudian perubahan isinya disimpan pada file baru (tmp.txt) FILE=`zenity --file-selection \ --title="select a File"` case $? in 0) zenity --text-info \ --title=$file \ --filename=$file \ --editable >/home/student/tmp.txt;; 1) echo "No file selected.";; -1) echo "No file selected.";; esac Jalankan program, pilih satu file untuk ditampilkan isinya pada info dialog, edit isi file tersebut kemudian close info dialognya. Bandingkan isi file yang telah diedit dengan file tmp.txt. Percobaan 5 : Error Dialog 1. Menampilkan pesan error pada proses instalasi. $ zenity --error --text "Installation failed!" 2. Menampilkan pesan error penulisan program. zenity --error \ --text="bash:./zenity3.sh: /bin/hash: bad interpreter: No such file or directory." Percobaan 6 : Question Dialog 1. Menampilkan pertanyaan pada proses shutdown. $ zenity --question --text "Are you sure you want to shutdown?"; echo $? 2. Menampilkan pertanyaan suatu proses. zenity --question \ --text="are you sure you wish to proceed?" 129

Percobaan 7 : Warning Dialog 1. Menampilkan peringatan untuk menghentikan proses. $ zenity --warning --text "This will kill, are you sure?";echo $? 2. Menampilkan peringatan untuk koneksi kabel. zenity --warning \ --text="disconnect the power cable to avoid electrical shock." Percobaan 8 : Progress Dialog 1. Menampilkan progres hasil perintah gksudo lsof pada file lsof.txt. $ gksudo lsof tee >(zenity --progress --pulsate) >lsof.txt 2. Menampilkan progres update sistem log. #!/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 Percobaan 9 : Notification Icon Dialog 1. Menampilkan file gambar sebagai notification icon. a. dari prompt $ zenity --notification --window-icon="bich6.gif" --text "Please update your system." b. dari program.sh zenity --notification --window-icon="bich6.gif" -- text "Please update your system." 130

2. Menampilkan info sebagai notification icon. zenity --notification\ --window-icon="info" \ --text "There are system updates necessary!" Percobaan 10 : Scale dan List Dialog 1. Menampilkan dialog untuk pengaturan nilai skala. ans=$(zenity --scale --text "pick a number" --minvalue=2 --max-value=100 --value=2 --step 2);echo $ans 2. Menampilkan list dialog dalam bentuk radio (radiolist). 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 3. Menampilkan list dialog dalam bentuk check list. #!/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 4. Menampilkan list dialog dalam bentuk daftar tabel (kolom). #!/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" E. Latihan 1. Buatlah GUI kotak dialog dengan program shell untuk recovery file dengan ketentuan sebagai berikut: 131

step1: ketika program dijalankan akan muncul kotak dialog info yang memberitahukan proses recovery file dengan cara harus memilih tanggal, bulan dan tahun recovery. Step2: jika waktu pada step1 yang dipilih tidak sesuai akan muncul pesan error. Step3: jika pemilihan pada step1 benar proses recovery file dilaksanakan hingga recovery file lengkap. 2. Buatlah program untuk mencari file gambar jpg atau png dan hasilnya ditampilkan pada list dialog. 3. Dari entry dialog terdapat permintaan untuk memasukan nama, jika diisikan nama maka muncul info dialog yang manyapa pemilik nama tersebut dengan teks hello yang dikuti nama yang dimasukan. 4. Pada kalender dialog terdapat teks pertanyaan Kapan anda ulang tahun?, apabila user manjawab dengan memilih tanggal yang tepat akan muncul progres dialog kemudian info dialog ucapan selamat ulang tahun dan gambar sebagai icon pesta ulang tahun. 132