PEMERINTAH PROVINSI JAWA TIMUR

DINAS PENDIDIKAN
SEKOLAH MENENGAH KEJURUAN NEGERI 1
PASURUAN
Jalan Veteran 11 Pasuruan, Telp/Fax (0343) 421380
Website : www.smkn1-pasuruan.sch.id, Email : smk1pasuruan@yahoo.com
PASURUAN KodePos 67122

JOBSHEET : USER INTERFACE (ANTAR MUKA)

Standar Kompetensi :
Nama Siswa :
Pemrograman Berorientasi Obyek (PBO)
Kompetensi Dasar :
3.15 Merancang antar muka atau User Interface (UI)
4.15 Membuat kode program untuk antar muka
Kelas :
atau User Interface (UI)
3.16 Menerapkan konektifitas dalam akses basis data
4.16 Membuat konektifitas basis data
gas : Judul Tugas Jobsheet :
Membuat Program Login pada Aplikasi Poliklinik Pengajar : Didik Suryawan, S.Pd., M.T .
Sederhana atau Aplikasi yang lain (Penjualan, dll)

A. Tujuan
3.15.1 Menjelaskan konsep antar muka atau User Interface (UI) dalam pemrograman aplikasi
berorientasi obyek.
3.15.2 Menjelaskan prosedur antar muka atau User Interface (UI) dalam pemrograman aplikasi
berorientasi obyek.
3.15.3 Menentukan penggunaan antar muka atau User Interface (UI) dalam pemrograman aplikasi
berorientasi obyek.
3.15.4 Menerapkan antar muka atau User Interface (UI) pemrograman aplikasi berorientasi obyek.
4.15.1 Merancang program aplikasi berorientasi obyek dengan penerapan antar muka atau User
Interface (UI).
4.15.2 Membuat kode program aplikasi berorientasi obyek yang menerapkan antar muka atau User
Interface (UI).
4.15.3 Menguji program aplikasi berorientasi obyek yang menerapkan antar muka atau User Interface
(UI).

3.16.1 Menjelaskan konsep konektifitas akses basis data dalam pemrograman aplikasi berorientasi
obyek.
3.16.2 Menjelaskan prosedur akses basis data menggunakan library konektor dalam pemrograman
aplikasi berorientasi obyek.
3.16.3 Menentukan penggunaan konektor basis data dalam pemrograman aplikasi berorientasi obyek.
3.16.4 Menerapkan library konektor akses basis data dalam pemrograman aplikasi berorientasi obyek.
4.16.1 Merancang program aplikasi berorientasi obyek akses basis data menggunakan library
konektor.
4.16.2 Membuat kode program aplikasi berorientasi obyek akses basis data menggunakan library
konektor.
4.16.3 Menguji program aplikasi berorientasi obyek akses basis data yang menggunakan library
konektor.

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 1 dari 9
B. Materi (Praktikum)

1. Membuat Database dan Tabel

Buatlah Database (misal: Poliklinik_NamaAnda atau nama Database yang lain) dan Tabel (misal:
Login) pada MySQL server Xampp dengan struktur tabel sebagai berikut :

Field Jenis
username varchar(25)
password varchar(15)
typeuser enum(‘Admin’,’Petugas’)

Gambar 1. Struktur Tabel : Login

2. Membuat 2 Form yaitu Form Login dan Menu

a. Membuat Form Login
Membuat User Interface (Antar Muka) : Form Login
 Buka NetBeans > Java > Java Application > Project Name (misal: Program_Poliklinik_NamaAnda
atau yang lain), cari tempat penyimpanan tugas, tanda centang dihilangkan.
 Klik kanan Source Packages > New > Folder : beri nama Master > Finish
 Klik kanan Master > JFrame Form > Class Name (misal: Login > Finish
 Silahkan di desain tampilan LOGIN, seperti contoh dibawah ini:

(Text Field)
username

(Password Field)
password

(Check Box)
tampil

(Button) - Keluar
keluar

Gambar 1. Tampilan Form : Login (Button) - Login

masuk

Cara pemberian aksi pada tombol tampil, masuk, dan keluar :

Contoh untuk tombol masuk begitu pula untuk tombol tampil dan keluar:

Klik kanan tombol masuk > Events > Action > actionPerformed[masukActionPerformed] > ketikkan
kodenya

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 2 dari 9
Pengkodean (Coding) untuk Login :

package Master;

import javax.swing.JOptionPane;
import java.sql.*;
import java.awt.Dimension;
import java.awt.Toolkit;
import javax.swing.*;

/**
*
* @author RPL - SMKN 1 Pasuruan
*/

public class Login extends javax.swing.JFrame {

public Connection con;
public Statement stt;
public ResultSet rs;
public static int kondisiLogin=3;
public static String userLogin="tidak terdeteksi";

/**
* Creates new form Login
*/

public Login() {
initComponents();
this.setLocationRelativeTo(null);
}

/**
* This method is called from within the constructor to initialize the form.
* WARNING: Do NOT modify this code. The content of this method is always
* regenerated by the Form Editor.
*/
@SuppressWarnings("unchecked")
Generated Code

private void masukActionPerformed(java.awt.event.ActionEvent evt) {

// TODO add your handling code here:
try{
Statement stt = (Statement)Koneksi.GetConnection().createStatement();
ResultSet result = stt.executeQuery("Select username,typeuser From login where username = '"+
username.getText() +"'"
+ "and password = '" + password.getText() + "'");
if(result.next()){
new Menu(result.getString(1), result.getString(2)).setVisible(true);
this.dispose();
}else{
JOptionPane.showMessageDialog(rootPane, "Data tidak valid.");
}
}catch(Exception e){
JOptionPane.showMessageDialog(rootPane, "Login gagal.");
}
}

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 3 dari 9
 private void tampilActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
if(tampil.isSelected() = = false){
password.setEchoChar('*');
}else{
password.setEchoChar((char) 0);
}
}

private void keluarActionPerformed(java.awt.event.ActionEvent evt) {

// TODO add your handling code here:
dispose();
}

/**
* @param args the command line arguments
*/
public static void main(String args[]) {
/* Set the Nimbus look and feel */

Look and feel setting code (optional)

java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new Login1().setVisible(true);
}
});
}

public void bersih(){

username.setText("");
password.setText("");
username.requestFocus();
}

private void koneksi(){

try{
String hubung="jdbc:mysql://localhost/poliklinik_NamaAnda";
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection(hubung,"root","");
stt=con.createStatement(rs.TYPE_SCROLL_SENSITIVE,rs.CONCUR_UPDATABLE);
rs=stt.executeQuery("select*from login");
}catch(Exception e){
JOptionPane.showMessageDialog(null, e);
System.exit(0);
}
}

// Variables declaration - do not modify

private javax.swing.JButton jButton1;
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel2;
private javax.swing.JLabel jLabel3;
private javax.swing.JLabel jLabel5;
private javax.swing.JButton keluar;

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 4 dari 9
 private javax.swing.JButton masuk;
private javax.swing.JPasswordField password;
private javax.swing.JCheckBox tampil;
private javax.swing.JTextField username;
// End of variables declaration
}

b. Membuat Form Menu

Membuat Menu Bar : Form Menu
 Klik kanan Master > JFrame Form > Class Name (misal: Menu > Finish
 Silahkan di desain tampilan MENU, seperti contoh di bawah ini:
Pada Pallete (Swing Menus) pilih Menu Bar > silahkan klik dan digeser ke atas frame.
Kemudian isi Menu Bar (USER, DATA, EXIT) > klik dan geser Menu (satu-satu dan di klik kanan
untuk change variable name nya : user, data, keluar)

Pengkodean (Coding) untuk Menu:

package Master;
import com.mysql.jdbc.Statement;
import java.awt.Color;
import static java.awt.Frame.MAXIMIZED_BOTH;
import java.sql.Connection;
import java.sql.ResultSet;

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 5 dari 9
 import javax.swing.JMenu;
import javax.swing.JMenuItem;
import javax.swing.JOptionPane;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;

/**
*
* @author RPL _ SMKN 1 Pasuruan
*/
public class Menu1 extends javax.swing.JFrame {
Connection koneksi;
public static int kodeLogin=3;
ResultSet resultSet;
Statement statement;

/**
* Creates new form Menu
* @param userName
* @param userRole
*/
public Menu(String userName, String userRole) {
initComponents();
this.setSize(1366,768);
user.setEnabled(true);
data.setVisible(false);
data.setEnabled(false);
user.setEnabled(true);
keluar.setEnabled(true);

setExtendedState(MAXIMIZED_BOTH);
admin.setForeground(Color.red);
kata.setText("Selamat datang di Poliklinik Mitra Medika");
admin.setText(userName);
kata.setEditable(false);
if("Admin".equals(userRole)){
kata.setText("Selamat datang. Anda login sebagai " + userRole + "");
admin.setText(userName);
user.setEnabled(true);

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 6 dari 9
 data.setVisible(true);
data.setEnabled(true);
user.setEnabled(true);
keluar.setEnabled(true);
}if("Petugas".equals(userRole)){
kata.setText("Selamat datang. Anda login sebagai " + userRole + "");
admin.setText(userName);
user.setEnabled(true);
data.setVisible(true);
data.setEnabled(true);
user.setEnabled(false);
keluar.setEnabled(true);
}
}

//To change body of generated methods, choose Tools | Templates.

/**
* This method is called from within the constructor to initialize the form.
* WARNING: Do NOT modify this code. The content of this method is always
* regenerated by the Form Editor.
*/
@SuppressWarnings("unchecked")
Generated Code

private void keluarMouseClicked(java.awt.event.MouseEvent evt) {

// TODO add your handling code here:
dispose();
}

/**
* @param args the command line arguments
*/
public static void main(String args[]) {
/* Set the Nimbus look and feel */
Look and feel setting code (optional)

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 7 dari 9
 java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new Menu("","").setVisible(true);
}
});
}

private void belumLogin() {

data.setEnabled(false);
keluar.setEnabled(true);
}

private void loginAdmin() {

data.setEnabled(true);
user.setVisible(false);
}

private void loginPublik() {

data.setEnabled(false);
user.setVisible(false);
}
// Variables declaration - do not modify
private javax.swing.JLabel admin;
private javax.swing.JMenu data;
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel3;
private javax.swing.JMenuBar jMenuBar1;
private javax.swing.JPopupMenu jPopupMenu1;
private javax.swing.JTextField kata;
private javax.swing.JMenu keluar;
private javax.swing.JMenu user;
// End of variables declaration
}

Hasil Eksekusi:
1. Bila Login sebagai Admin dijalankan dan benar, maka akan masuk ke Menu dengan USER,
DATA dan EXIT aktif (True)
2. Bila Login sebagai Petugas dijalankan dan benar, maka akan masuk ke Menu dengan USER
(False) dengan DATA dan EXIT aktif (True)

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 8 dari 9
Tampilan Login sebagai Admin (JMenu : USER, DATA & EXIT (True))

Tampilan Login sebagai Petugas (JMenu : USER (False), DATA & EXIT (True))

Jobsheet UI – PBO - Kelas XII Software Engineering – SMK Negeri 1 Pasuruan hal 9 dari 9