MODUL PRAKTIKUM PEMROGRAMAN

Praktikum 4
Grafis, Applet
MODUL PRAKTIKUM
PEMROGRAMAN BERORIENTASI OBJEK
Deskripsi Singkat
Praktikum pemrograman berorientasi objek adalah praktikum yang menggunakan bahasa Java sebagai
bantuan dalam memahami konsep pemrograman berorientasi objek. Materi praktikum berisi teori,
latihan dan soal pemrograman.
Tujuan
1. Memahami konsep Grafis dan Applet.
2. Membuat aplikasi sederhana dengan menggunakan konsep Grafis.
3. Membuat aplikasi sederhana dengan menggunakan konsep Applet.
Prasyarat
Siswa telah mendapat pelajaran mata kuliah Algoritma dan Pemrograman.
Materi 1 : Grafis
Pemrograman grafis digunakan dalam banyak hal mulai dari upaya untuk memperoleh tampilan yang
indah, aplikasi animasi, aplikasi simulasi, aplikasi pengolahan citra sampai visi komputer. Berikut ini
adalah beberapa pemrograman dasar di bidang grafis dalam java yang diharapkan dapat menjadi bekal
awal untuk memahami berbagai topik seputar grafis yang begitu luas. Pembahasan pemograman grafis
akan dimulai dari menggambar obyek-obyek sederhana menggunakan garis, menggambar bentuk 2
dimensi dan bagaimana dapat menampilkan dan mengolah data gambar (image processing) dengan
pembahasan yang sangat sederhana.
Bahasa Java merupakan salah satu bahasa dengan fasilitas berupa komponen-komponen grafis yang
lengkap. Karena itulah banyak program grafik, dan permainan yang berbasis grafik dibuat menggunakan
bahasa Java, khususnya untuk permainan di perangkat-perangkat mobile.
Salah satu cara untuk membuat aplikasi grafis dengan java adalah dengan membuat class yang
merupakan turunan dari class Canvas. Dalam class inilah kita meletakkan gambar atau animasi, dan
membentuk sebuah obyek untuk mengakses gambar kita tersebut.
Beberapa method yang sering digunakan dalam aplikasi grafis yaitu:
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet

drawstring(String str, int x, int y) --> membuat sebuah text menggunakan font dan color standar
pada posisi koodinat x dan y.

drawLine(int x1, int y1, int x2, int y2) --> membuat sebuah garis dari titik x1,y1 ke titik x2,y2.

drawRect(int x, int y, int width, int height) --> membuat sebuah kotak dengan titik kiri atas
pada(x,y) dan mempunyai ukuran tertentu.

drawOval(int x, int y, int width, int height) --> membuat sebuah oval dengan ukuran tertentu.

drawRoundRect(int x, int y, int width, int height, int xdiam, int ydiam) --> membuat kotak dengan
sudut yang tidak tegak lurus.

draw3DRect(int x, int y, int width, int height, boolean raised) --> membuat kotak dengan efek 3
dimensi (sebaiknya warna gambar disesuaikan dengan warna background).

drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) --> membuat sebuah
lingkaran yang tidak penuh.

fillRect(int x, int y, int width, int height ) --> membuat kotak yang dalamnya berwarna.

fillOval(int x, int y, int width, int height) --> membuat oval yang mempunyai warna.

fillRoundRect(int x, int y, int width, int height, int xdiam, int ydiam) --> membuat kotak yang
berwarna.

fill3DRect(int x, int y, int width, int height, Boolean raised)

fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
Kelas yang berkait erat dengan grafis adalah kelas Color.
Materi 2 : Applet
Sebuah applet adalah tipe yang spesial dari program java yang dieksekusi melalui internet. Secara
khusus berjalan pada suatu web browser seperti Firefox, Internet Explorer, Google Chrome dan Opera.
Applet ini cukup terbatas jika dibandingkan dengan aplikasi desktop java.
Class Applet adalah sebuah subclass dari class Panel yang didefinisikan dalam AWT. Applet adalah
aplikasi java yang spesial. Mereka tidak dieksekusi menggunakan perintah java melainkan applet
berjalan pada web browser atau menggunakan applet viewer. Untuk membuka applet melalui sebuah
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
web browser, secara sederhana buka dokumen HTML dimana applet terintegrasi kedalamnya
menggunakan applet HTML tag. Cara lain untuk menjalankan sebuah applet adalah melalui perintah
appletviewer. Untuk memudahkan ikuti syntax berikut ini:
appletviewer <java filename>
Ketika membuat sebuah applet, dibutuhkan suatu extend class Applet. Sebagaimana yang disebutkan
sebelumnya, classnya dapat ditemukan dalam paket java.applet. Oleh karena itu, perlu mengimport
paket java.applet.
Class JApplet adalah bagian dari paket javax.swing yang menyediakan fungsi yang sama seperti Applet.
Cara membuatnya juga sama yaitu dengan meng-extends JApplet. Bermakna class tersebut merupakan
sub-kelas dari JApplet.
Berikut ini adalah beberapa method dalam applet:





init() : method yang dipanggil pertama kali dan dipanggil hanya sekali. Init() biasaya berisi instruksi
untuk menginisialisasi applet. Bisa dikatakan tingkah laku init() mirip dengan method constructor
walaupun init() bukan berguna untuk mencipta objek applet.
start() : method ini dipanggil sesudah method init().
stop() : method ini dipanggil ketika web browser menutup dokumen HTML yang berisi applet.
Method ini dipanggil untuk menginformasikan kepada applet agar ia menghentikan proses
eksekusinya.
destroy() : method ini dipanggil sesudah method stop() yang berguna untuk menghapus applet dari
memory.
paint() : method ini dipanggil setelah init() sesudah startup. Method ini akan dipanggil otomatis
setiap saat applet window harus digambar ulang. Applet window perlu digambar ulang jika window
diubah ukurannya, ditutupi oleh window lain atau di-minimized. Paint() tidak boleh langsung
dipanggil dari program Applet, namun ia dapat dipanggil dengan perintah repaint().
Struktur dari coding Applet dapat dilihat di bawah:
import javax.swing.JApplet;
import java.awt.Graphics;
public class ShellApplet extends JApplet
{
// declare fields here
public void init( )
{
// initialize data here
}
public void paint( Graphics g )
{
super.paint( g );
//call to the paint() method of the super
class
// include graphics code here
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
}
}
Struktur Applet tag pada file HTML dapat dilihat pada coding di bawah:
<html>
<head>
<title>Applet Shell HTML</title>
</head>
<body>
<h1>Applet Shell</h1>
<hr>
<applet code=“AppletShell.class"
width=500
height=500
codebase = “.”
alt=“The applet isn’t running, for some reason.">
Your browser is ignoring the <APPLET> tag!
</applet>
<hr>
</body>
</html>
Kaitan Applet dengan Graphics
Method paint() menggunakan objek Graphics sebagai formal parameter. Oleh karena itu semua method
pada Graphics dapat digunakan untuk menggambar pada applet window.
LATIHAN 1
Buka BlueJ. Download projek grafis-praktikum yang terdapat pada website:
http://informatika.unsyiah.ac.id/viska/pbo/grafis-praktikum.zip
Di dalam projek tersebut terdapat beberapa class yang berkaitan dengan grafis sederhana. Grafis
tersebut menggunakan kelas Canvas. Kemudian Canvas tersebut dimasukkan dalam JFrame. Beberapa
contoh dalam projek tersebut:
1. Class Kanvas1 merupakan sub-kelas dari Canvas yang memiliki method paint untuk menggambar.
Class Kanvas1 kemudian dimasukkan dalam JFrame yang terdapat pada class Gambar1. Tampilan
jika Gambar1 dijalankan dengan menciptakan objek Gambar1, seperti di bawah:
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
Garis lurus warna merah dibuat dengan coding di bawah:
Persegi panjang warna biru dibuat dengan coding di bawah:
Lingkaran merah dibuat dengan coding di bawah:
Tulisan Selamat Belajar dibuat dengan coding di bawah:
2. Class AnimasiFont merupakan sub-kelas dari Canvas sehingga memiliki method paint untuk
menggambar. Class AnimasiFont dimasukkan dalam JFrame pada class AnimasiFontFrame. Jika class
AnimasiFontFrame dijalankan maka akan mencipta objek AnimasiFont yang menampilkan 25 buah
tulisan “Java” pada background warna hitam. Setiap framenya diklik, maka AnimasiFont akan
digambar ulang dengan menggunakan repaint, seperti coding di bawah:
Tampilan jika dijalankan:
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
3. Class berikutnya adalah PaintKanvas yang merupakan aplikasi melukis sederhana. Konsepnya tetap
sama yaitu dengan meng-extend class Canvas dan menggunakan method paint untuk menggambar
tampilan pada Canvas. Canvas ini dimasukkan dalam JFrame untuk ditampilkan. Contoh
tampilannya:
Pelajari kesemua kelas-kelas tersebut, dan coba buat program grafis sederhana lainnya.
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
LATIHAN 2
Buka BlueJ. Download projek grafis-praktikum yang terdapat pada website:
http://informatika.unsyiah.ac.id/viska/pbo/ applet-praktikum.zip
Di dalam projek tersebut terdapat beberapa class yang menggunakan Applet. Jalankan Applet tersebut
dengan klik kanan dan memilih Run Applet. Beberapa contoh dalam projek tersebut:
1. Class Kanvas1Applet merupakan applet sederhana yang diadaptasi dari class Kanvas1 pada projek
grafis-praktikum. Tampilannya:
Coba anda ubah kelas AnimasiFont dan PaintKanvas ke dalam bentuk Applet.
2. Class DisplayImageApplet merupakan applet sederhana yang mencontohkan cara menampilkan
image pada Applet. Caranya sangat sederhana, hanya dengan loading image dalam method init():
Kemudian menggambarkannya pada method paint():
Coba anda ubah imagenya menjadi image yang lain.
3. Class BallMoveApplet merupakan applet sederhana yang mencontohkan cara membuat animasi ball
moving pada Applet. Caranya hanya dengan mengubah posisi x dan y. Pada contoh ini ball
berpindah horizontal, maka hanya nilai x yang berubah.
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
Disini digunakan thread untuk memberikan waktu jeda pada animasi:
Coba anda praktekkan ball moving secara vertikal. Tips: nilai y yang akan berubah.
4. Berikutnya class MoveImageApplet mencontohkan perpindahan image di atas image yang lain
dengan menggunakan tanda panah pada keyboard dengan memanfaatkan event KeyPressed pada
interface KeyListener. Pelajari codingnya.
Anda dapat mencoba bereksperimen jika menggunakan interface MouseListener dan
memanfaatkan method mousePressed, mouseReleased dan mouseDragged. Anda dapat melihat
contoh MouseListener pada class PaintKanvas dalam projek grafis-praktikum.
SOAL-SOAL
1. Buatlah tampilan animasi image berpindah secara horizontal dengan menggunakan sub-kelas
Canvas. Jangan lupa buat frame untuk menampilkan canvas tersebut.
2. Buatlah tampilan GUI lampu lintas seperti gambar di bawah. Gambar tersebut harus mampu
melakukan tindakan seperti: jika tombol Hijau diklik maka lampu berwarna hijau akan menyala, jika
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala
Praktikum 4
Grafis, Applet
tombol Kuning diklik maka lampu berwarna kuning akan menyala dan jika tombol Merah diklik maka
lampu berwarna merah akan menyala. Jika tombol Exit diklik maka window akan tertutup.
3. Ubah class DisplayImageApplet dengan menambahkan satu image lain sebagai image background.
Untuk image backgroundnya anda dapat mengambil image background.jpg pada projek appletpraktikum.
4. Ubah class BallMoveApplet sehingga ball akan berpindah seperti meloncat. Tips: nilai x dan y akan
berubah secara bersama-sama. Jika ball menaik maka nilai x bertambah dan y berkurang. Jika ball
menurun maka nilai x dan y akan bertambah.
Viska Mutiawani, MSc
Jurusan Informatika Universitas Syiah Kuala