PBO A - Pertemuan 14 - GUI

 Nama    : Erlangga Rizqi Dwi Raswanto

NRP      : 5025241179

Kelas     : PBO A

1. Pendahuluan

Pada pertemuan 14 ini, materi berfokus pada pembuatan antarmuka grafis (GUI) menggunakan Java Swing.
Berbeda dengan program console yang hanya menggunakan System.out.println, pada GUI kita mulai memakai:

• JFrame sebagai window utama

• JPanel sebagai kontainer komponen

• Komponen input seperti JTextField, JPasswordField, JButton

• Layout Manager untuk mengatur posisi komponen

• Event Handling (misalnya ActionListener) untuk merespons aksi user seperti klik tombol.

Terdapat dua latihan utama:

1. Latihan 1 – Membuat form login dengan username dan password.

2. Latihan 2 – Membuat aplikasi Image Viewer sederhana untuk membuka dan menampilkan gambar.

---

2. Latihan 1 – Form Login (Username & Password)

2.1 Tujuan

• Memahami cara membuat window (JFrame) sederhana.

• Menggunakan komponen input dasar: JTextField, JPasswordField, JButton, dan JLabel.

• Menggunakan layout manager (GridBagLayout) untuk mengatur tampilan formulir.

• Menerapkan event handling dengan ActionListener untuk memproses aksi tombol Login dan Reset.

2.2 Desain Program

Form login memiliki komponen sebagai berikut:

• Label Username dan Password

• Field input:

  • JTextField untuk username

  • JPasswordField untuk password

• Dua tombol:

  • Login → mengecek apakah username & password benar

  • Reset → mengosongkan input

• Label status di bawah untuk menampilkan pesan error / sukses.

Validasi sederhana:

• Username benar: "admin"

• Password benar: "12345"

Jika benar → tampil JOptionPane dan label status hijau.
Jika salah → label status merah: “Username atau password salah.”

2.3 Source Code LoginForm.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
 * LoginForm
 * Form login sederhana dengan username & password,
 * tombol Login dan Reset, serta label status.
 */
public class LoginForm extends JFrame implements ActionListener {

    private JTextField usernameField;
    private JPasswordField passwordField;
    private JButton loginButton;
    private JButton resetButton;
    private JLabel statusLabel;

    public LoginForm() {
        // Judul window
        setTitle("Form Login");
        // Ukuran window
        setSize(400, 220);
        // Tutup aplikasi saat window di-close
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // Posisikan di tengah layar
        setLocationRelativeTo(null);

        // Panel utama dengan GridBagLayout
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.insets = new Insets(8, 8, 8, 8); // jarak antar komponen
        gbc.fill = GridBagConstraints.HORIZONTAL;

        // Label Username
        JLabel usernameLabel = new JLabel("Username:");
        gbc.gridx = 0;
        gbc.gridy = 0;
        panel.add(usernameLabel, gbc);

        // TextField Username
        usernameField = new JTextField(15);
        gbc.gridx = 1;
        gbc.gridy = 0;
        panel.add(usernameField, gbc);

        // Label Password
        JLabel passwordLabel = new JLabel("Password:");
        gbc.gridx = 0;
        gbc.gridy = 1;
        panel.add(passwordLabel, gbc);

        // PasswordField
        passwordField = new JPasswordField(15);
        gbc.gridx = 1;
        gbc.gridy = 1;
        panel.add(passwordField, gbc);

        // Tombol Login dan Reset
        loginButton = new JButton("Login");
        resetButton = new JButton("Reset");

        loginButton.addActionListener(this);
        resetButton.addActionListener(this);

        JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT, 10, 0));
        buttonPanel.add(loginButton);
        buttonPanel.add(resetButton);

        gbc.gridx = 0;
        gbc.gridy = 2;
        gbc.gridwidth = 2;
        gbc.anchor = GridBagConstraints.EAST;
        panel.add(buttonPanel, gbc);

        // Label Status
        statusLabel = new JLabel(" ");
        statusLabel.setForeground(Color.RED);
        gbc.gridx = 0;
        gbc.gridy = 3;
        gbc.gridwidth = 2;
        gbc.anchor = GridBagConstraints.CENTER;
        panel.add(statusLabel, gbc);

        // Tambahkan panel ke frame
        add(panel);

        // Tampilkan GUI
        setVisible(true);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        Object source = e.getSource();

        // Tombol Login ditekan
        if (source == loginButton) {
            String username = usernameField.getText();
            String password = new String(passwordField.getPassword());

            if (username.equals("admin") && password.equals("12345")) {
                statusLabel.setForeground(Color.GREEN.darker());
                statusLabel.setText("Login berhasil.");
                JOptionPane.showMessageDialog(this,
                        "Selamat datang, " + username + "!",
                        "Login Berhasil",
                        JOptionPane.INFORMATION_MESSAGE);
            } else {
                statusLabel.setForeground(Color.RED);
                statusLabel.setText("Username atau password salah.");
            }
        }
        // Tombol Reset ditekan
        else if (source == resetButton) {
            usernameField.setText("");
            passwordField.setText("");
            statusLabel.setForeground(Color.RED);
            statusLabel.setText(" ");
        }
    }

    public static void main(String[] args) {
        // Jalankan GUI di Event Dispatch Thread
        SwingUtilities.invokeLater(() -> new LoginForm());
    }
}

---

3. Latihan 2 – Aplikasi Image Viewer Sederhana

3.1 Tujuan

• Memahami penggunaan komponen JFileChooser untuk memilih file dari disk.

• Menampilkan gambar pada panel khusus dengan melakukan override paintComponent.

• Mengorganisasi program menjadi beberapa kelas dengan tanggung jawab yang jelas:

  • Kelas yang menyimpan data gambar

  • Kelas panel untuk menggambar gambar

  • Kelas helper untuk membuka file

  • Kelas main / viewer yang mengatur window dan menu

3.2 Struktur Program

Struktur project (package default):

• OFImage.java → wrapper untuk BufferedImage

• ImagePanel.java → panel yang menampilkan gambar

• ImageFileManager.java → baca file gambar dari disk

• ImageViewer.java → window utama (JFrame) + menu "Open Image" dan "Exit"

Alur kerja:

1. User menjalankan ImageViewer.

2. User memilih menu File → Open Image.

3. ImageFileManager membuka file menggunakan JFileChooser dan membaca BufferedImage.

4. Gambar dibungkus ke OFImage lalu dikirim ke ImagePanel.

5. ImagePanel memanggil repaint() dan menggambar gambar di tengah panel.

---

3.3 Source Code

Pastikan semua file berikut disimpan di folder project yang sama.

---

3.3.1 OFImage.java

import java.awt.image.BufferedImage;

/**
 * OFImage
 * Kelas pembungkus (wrapper) untuk BufferedImage
 * agar lebih mudah dikelola dalam aplikasi.
 */
public class OFImage {
    private final BufferedImage image;

    public OFImage(BufferedImage image) {
        this.image = image;
    }

    public BufferedImage getImage() {
        return image;
    }

    public int getWidth() {
        return (image != null) ? image.getWidth() : 0;
    }

    public int getHeight() {
        return (image != null) ? image.getHeight() : 0;
    }
}

---

3.3.2 ImagePanel.java

import javax.swing.*;
import java.awt.*;

/**
 * ImagePanel
 * Panel yang bertanggung jawab menampilkan objek OFImage.
 * Gambar akan dirender di tengah panel.
 */
public class ImagePanel extends JPanel {

    private OFImage currentImage;

    public ImagePanel() {
        setBackground(Color.DARK_GRAY);
    }

    /**
     * Set gambar yang akan ditampilkan.
     */
    public void setImage(OFImage image) {
        this.currentImage = image;
        revalidate();
        repaint();
    }

    /**
     * Hapus gambar dari panel.
     */
    public void clearImage() {
        this.currentImage = null;
        revalidate();
        repaint();
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        if (currentImage != null && currentImage.getImage() != null) {
            int imgW = currentImage.getWidth();
            int imgH = currentImage.getHeight();

            // Hitung posisi supaya gambar di tengah
            int x = (getWidth() - imgW) / 2;
            int y = (getHeight() - imgH) / 2;

            g.drawImage(currentImage.getImage(), x, y, this);
        } else {
            // Jika belum ada gambar
            g.setColor(Color.WHITE);
            g.drawString("Belum ada gambar yang dimuat.", 10, 20);
        }
    }

    @Override
    public Dimension getPreferredSize() {
        if (currentImage != null) {
            return new Dimension(currentImage.getWidth(), currentImage.getHeight());
        }
        return new Dimension(600, 400);
    }
}

---

3.3.3 ImageFileManager.java

import javax.swing.*;
import javax.swing.filechooser.FileNameExtensionFilter;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

/**
 * ImageFileManager
 * Mengurus pemilihan file gambar dari disk dan
 * mengembalikannya sebagai OFImage.
 */
public class ImageFileManager {

    /**
     * Buka dialog untuk memilih file gambar dan
     * mengembalikan OFImage jika berhasil, null jika gagal/batal.
     */
    public static OFImage loadImage() {
        JFileChooser fileChooser = new JFileChooser();

        FileNameExtensionFilter filter = new FileNameExtensionFilter(
                "Image Files (JPG, PNG, GIF)", "jpg", "jpeg", "png", "gif");
        fileChooser.setFileFilter(filter);

        int result = fileChooser.showOpenDialog(null);

        if (result == JFileChooser.APPROVE_OPTION) {
            File selectedFile = fileChooser.getSelectedFile();
            try {
                BufferedImage bImg = ImageIO.read(selectedFile);
                if (bImg != null) {
                    return new OFImage(bImg);
                } else {
                    JOptionPane.showMessageDialog(null,
                            "File yang dipilih bukan gambar yang valid.",
                            "Error",
                            JOptionPane.ERROR_MESSAGE);
                }
            } catch (IOException e) {
                JOptionPane.showMessageDialog(null,
                        "Gagal membaca file gambar: " + e.getMessage(),
                        "Error",
                        JOptionPane.ERROR_MESSAGE);
            }
        }
        return null;
    }
}

---

3.3.4 ImageViewer.java

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
 * ImageViewer
 * Aplikasi Image Viewer sederhana:
 * - Menu File -> Open Image
 * - Menu File -> Exit
 * Menampilkan gambar di tengah window.
 */
public class ImageViewer {

    private JFrame frame;
    private ImagePanel imagePanel;

    public ImageViewer() {
        makeFrame();
    }

    /**
     * Membuat dan mengatur frame utama beserta menu dan panel.
     */
    private void makeFrame() {
        frame = new JFrame("Aplikasi Image Viewer Sederhana");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Panel untuk menampilkan gambar
        imagePanel = new ImagePanel();
        JScrollPane scrollPane = new JScrollPane(imagePanel);

        // Menu bar
        JMenuBar menuBar = new JMenuBar();
        JMenu fileMenu = new JMenu("File");
        JMenuItem openItem = new JMenuItem("Open Image");
        JMenuItem clearItem = new JMenuItem("Clear");
        JMenuItem exitItem = new JMenuItem("Exit");

        // Event menu Open
        openItem.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                openFile();
            }
        });

        // Event menu Clear
        clearItem.addActionListener(e -> imagePanel.clearImage());

        // Event menu Exit
        exitItem.addActionListener(e -> System.exit(0));

        fileMenu.add(openItem);
        fileMenu.add(clearItem);
        fileMenu.addSeparator();
        fileMenu.add(exitItem);
        menuBar.add(fileMenu);

        frame.setJMenuBar(menuBar);
        frame.add(scrollPane, BorderLayout.CENTER);

        frame.setSize(800, 600);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    /**
     * Memanggil ImageFileManager untuk memilih dan memuat gambar.
     */
    private void openFile() {
        OFImage image = ImageFileManager.loadImage();
        if (image != null) {
            imagePanel.setImage(image);
        }
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new ImageViewer());
    }
}