ทฤษฎีที่ต้องเข้าใจก่อนลงมือ

อ่านรอบแรกแบบคร่าว ๆ ก็ได้ — เมื่อถึง Step ไหนที่ใช้เรื่องนั้น จะมีลิงก์ย้อนกลับมาที่นี่ทุกครั้ง ทฤษฎีจะเกาะเมื่อเห็นของจริง

ชุด Component Swing ที่ใช้ใน Lab นี้

แต่ละการ์ด: หน้าที่ · ใช้ที่หน้าจอไหน (ชื่อตัวแปรที่จะตั้ง) · จุดพลาดประจำตัว — เปิดหน้านี้คู่ไว้ตอนลาก control ได้เลย

ภาพรวมตำแหน่งของแต่ละ component บนหน้าจอจริง

การ์ดคู่มือราย component

Step 1 — เปิดโปรเจกต์ MoogataLab เดิม แล้วพิสูจน์ว่าของเดิมยังรันผ่าน

1. เปิด NetBeans → File → Open Project → เลือกโฟลเดอร์ MoogataLab ของตัวเอง (จาก lab 10)
2. รันไฟล์ทดสอบเดิม 2 ไฟล์ (คลิกไฟล์ → Shift+F6):
   • TestEmployeeService.java → ต้องได้ Welcome user : somchai (แคชเชียร์) และ Error, wrong username or password — พิสูจน์ว่าเลเยอร์ service + dao + ฐานข้อมูลคุยกันได้ครบ
   • TestEmployeeDao.java → ต้องเห็นพนักงาน 3 คน (somjai, somchai, malee) — พิสูจน์ว่า seed data ใน moogata.db ยังอยู่ครบ

Step 2 — ปรับของเก่า: เปิดบริการ CRUD ใน EmployeeService

เปิดไฟล์ service/EmployeeService.java — เพิ่ม import ด้านบนไฟล์:

import java.util.List;

แล้วเพิ่มเมธอดต่อท้าย login() (ก่อนปิดคลาส):

// ===== เพิ่มใน Lab 11 — เปิดบริการ CRUD ที่ EmployeeDao รองรับอยู่แล้ว ให้หน้าจอใช้ =====

/** พนักงานทุกคน — ใช้โดย EmployeeFrame เพื่อเติมตาราง */
public List<Employee> getAll() {
    return employeeDao.getAll();
}

/** พนักงาน 1 คนจาก id — ใช้โดย EmployeeFrame ตอนคลิกเลือกแถวในตาราง */
public Employee get(int id) {
    return employeeDao.get(id);
}

/** เพิ่มพนักงานใหม่ — สำเร็จได้ object กลับมาพร้อม id, ล้มเหลว (ชื่อซ้ำ) ได้ null */
public Employee save(Employee employee) {
    return employeeDao.save(employee);
}

/** แก้ไขพนักงาน — สำเร็จได้ object กลับมา, ไม่พบแถว/ล้มเหลวได้ null */
public Employee update(Employee employee) {
    return employeeDao.update(employee);
}

/** ลบพนักงานตาม id — คืนจำนวนแถวที่ถูกลบ (0 = ไม่พบ, -1 = ผิดพลาด) */
public int delete(int id) {
    Employee target = new Employee();
    target.setId(id);
    return employeeDao.delete(target);
}

รัน TestEmployeeService ซ้ำ — ผลต้องเหมือนเดิมทุกบรรทัด (นี่คือแบบฝึกหัดสไตล์นักพัฒนา: แก้โค้ดแล้วต้องรู้ว่าของเดิมไม่พัง — เราจะทำแบบนี้ทุกครั้งที่แตะของเก่า)

Step 3 — สร้าง package ui + ออกแบบหน้าจอ LoginFrame

1. คลิกขวา package com.example.moogata → New → Java Package ชื่อ ui — package ใหม่เพื่อแยก "หน้าจอ" ออกจากโค้ดหลังบ้าน ตามกฎเลเยอร์ที่แผนภาพ lab 10 วางไว้
2. คลิกขวา package ui → New → JFrame Form (หมวด Swing GUI Forms) ชื่อ LoginFrame — NetBeans จะเปิดหน้าออกแบบ (Design) ให้ลากวาง control ได้เลย และสลับดูโค้ดได้ที่ปุ่ม Source
3. ลาก control จาก Palette มาวางตามภาพ แล้ว เปลี่ยนชื่อตัวแปรให้ตรงเป๊ะ (คลิกขวา control → Change Variable Name…) — เลขวงกลมในภาพ = เลขแถวในตารางด้านล่าง ชื่อที่แท็กไว้คือชื่อที่โค้ดใน Step 4 จะอ้างถึง ถ้าตั้งไม่ตรงโค้ดจะคอมไพล์ไม่ผ่าน

ตั้งค่าฟอร์ม (คลิกพื้นหลัง → Properties): title เข้าสู่ระบบ — BONUS SUKI POS · defaultCloseOperation EXIT_ON_CLOSE (ปิดหน้านี้ = จบโปรแกรม เพราะเป็นหน้าแรก) · resizable ออก · ขนาด: ลากขอบฟอร์มใน designer ให้ได้ราว ~380 × 310 (NetBeans จัดการขนาดให้เอง — พิมพ์ตัวเลขใน Properties ไม่มีผล)

และเพิ่มบรรทัดเดียวใน constructor (หลัง initComponents();) เพื่อให้หน้าต่างเปิดกลางจอ ไม่ติดมุมซ้ายบน:

    setLocationRelativeTo(null); // null = กึ่งกลางหน้าจอ

Step 4 — โค้ด event ของ LoginFrame + คำสั่ง start แล้วทดสอบล็อกอิน

ดับเบิลคลิกปุ่ม btnLogin ใน designer (NetBeans จะสร้างเมธอด event ให้เอง — อย่าพิมพ์เมธอดเองลอย ๆ เพราะต้องมีการผูก event ที่โค้ดส่วน NetBeans ดูแล) แล้ววางโค้ด:

private void btnLoginActionPerformed(java.awt.event.ActionEvent evt) {
    // getPassword() คืน char[] (ไม่ใช่ String) — เพื่อความปลอดภัย ต้องแปลงก่อนใช้
    String login = txtLogin.getText().trim();
    String password = new String(txtPassword.getPassword());

    EmployeeService employeeService = new EmployeeService();
    Employee employee = employeeService.login(login, password);

    if (employee == null) {
        JOptionPane.showMessageDialog(this,
                "ชื่อเข้าใช้หรือรหัสผ่านไม่ถูกต้อง",
                "เข้าสู่ระบบไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
        return;
    }

    // (Step 6 จะเปลี่ยนข้อความชั่วคราวนี้เป็นการเปิดหน้าจัดการพนักงาน)
    JOptionPane.showMessageDialog(this,
            "ยินดีต้อนรับ " + employee.getName() + " (" + employee.getPosition() + ")",
            "เข้าสู่ระบบสำเร็จ", JOptionPane.INFORMATION_MESSAGE);
}

ดับเบิลคลิก btnExit:

private void btnExitActionPerformed(java.awt.event.ActionEvent evt) {
    System.exit(0);
}

main() — NetBeans สร้างมาให้แล้วใน template ของ JFrame Form (อยู่ท้ายคลาส มีโค้ดตั้งค่า Nimbus ยาว ๆ ข้างใน) — ห้ามเพิ่ม main ซ้ำเด็ดขาด (จะ compile ไม่ผ่านเพราะมี main สองตัว) ให้แทนที่เนื้อในด้วยแบบสั้น ๆ ตามด้านล่าง:

/** คำสั่ง start โปรแกรม — รัน LoginFrame บนเธรดของ Swing (EDT) */
public static void main(String args[]) {
    java.awt.EventQueue.invokeLater(() -> new LoginFrame().setVisible(true));
}

import com.example.moogata.model.Employee;
import com.example.moogata.service.EmployeeService;
import javax.swing.JOptionPane;

รัน LoginFrame (Shift+F6) แล้วลอง 2 กรณี: พิมพ์ somchai / 0000 กดเข้าสู่ระบบ — ต้องได้กล่องแดง:

จากนั้นลอง somchai / 1234 — ต้องได้กล่อง "ยินดีต้อนรับ สมชาย มานะงาน (แคชเชียร์)" = login วิ่งลงไปถึงฐานข้อมูลจริงแล้วกลับมาถูก

Step 5 — ออกแบบหน้าจอ EmployeeFrame — ฟอร์มบน + ตารางล่าง

New → JFrame Form ชื่อ EmployeeFrame ใน package ui แล้วลาก control ตามภาพ:

ตั้งค่าฟอร์ม: title จัดการพนักงานระบบ POS — BONUS SUKI · defaultCloseOperation DISPOSE_ON_CLOSE (ต่างจากหน้าล็อกอิน — ปิดหน้านี้แค่หน้านี้ปิด โปรแกรมไม่ตาย และหน้าแรกก็ปิดไปแล้วตอนเข้ามา) · resizable ออก · ขนาด: ลากขอบฟอร์มใน designer ให้ได้ราว ~656 × 560

Step 6 — โค้ดส่วนอ่านข้อมูล: ตารางโชว์พนักงานจริง + เชื่อม LoginFrame → EmployeeFrame

สลับไปแท็บ Source ของ EmployeeFrame แล้วแก้ 3 จุด:

(1) field + constructor (แก้ constructor ที่ NetBeans สร้างให้ — เพิ่มพารามิเตอร์ loginUser เพื่อให้หน้านี้รู้ว่า "ใคร" เข้ามาใช้ จะได้โชว์ชื่อและกันลบบัญชีตัวเองใน Step 7):

/** พนักงานที่ล็อกอินเข้ามา (เก็บไว้โชว์ที่ lblWelcome และกันลบบัญชีตัวเอง) */
private final Employee loginUser;
private final EmployeeService employeeService = new EmployeeService();

/** id ของแถวที่กำลังแก้ไข (-1 = ไม่ได้แก้ไข คือโหมดเพิ่มใหม่) */
private int editingId = -1;

public EmployeeFrame(Employee loginUser) {
    this.loginUser = loginUser;
    initComponents();
    tblEmployee.setSelectionMode(javax.swing.ListSelectionModel.SINGLE_SELECTION);
    tblEmployee.getTableHeader().setReorderingAllowed(false); // ล็อกลำดับคอลัมน์ — กันลากสลับแล้วโค้ดอ่านค่าผิดคอลัมน์
    // (บรรทัดผูก listener "คลิกแถว → เติมฟอร์ม" จะเพิ่มใน Step 7)
    lblWelcome.setText("ผู้ใช้งาน: " + loginUser.getName() + " (" + loginUser.getPosition() + ")");
    showEmployees();
}

(2) เมธอดเติมตาราง — หัวใจของครึ่งล่าง สังเกตว่าเราสร้าง model ใหม่ทุกครั้ง (หัวคอลัมน์ + แถวจากฐานข้อมูลสด ๆ) ไม่ใช่แก้ทีละแถว — วิธี "ล้างแล้วเติมใหม่ทั้งชุด" ง่ายและไม่มีทางข้อมูลค้าง (ทฤษฎีข้อ 6 หน้า 2) พร้อมตั้งให้ช่องในตาราง แก้ไขไม่ได้: ตารางทำหน้าที่โชว์เท่านั้น ถ้าให้พิมพ์ทับบนจอ ค่าจะเปลี่ยนแต่ไม่ลงฐานข้อมูล (แล้วผู้ใช้จะเข้าใจผิดว่าบันทึกแล้ว):

/** อ่านข้อมูลพนักงานทุกคนจาก service แล้วเติมลงตาราง — เรียกทุกครั้งที่ข้อมูลเปลี่ยน */
private void showEmployees() {
    // ตั้งหัวคอลัมน์แล้วเติมแถวจากฐานข้อมูลใหม่ทั้งหมด
    // isCellEditable = false: ตารางไว้ "ดู" เท่านั้น — แก้ข้อมูลต้องผ่านฟอร์มด้านบนแล้วบันทึก จึงลงฐานข้อมูลจริง
    DefaultTableModel model = new DefaultTableModel(
            new Object[][]{},
            new String[]{
                "รหัส", "ชื่อล็อกอิน", "ตำแหน่ง", "รหัสผ่าน", "บทบาท"
            }) {
        @Override
        public boolean isCellEditable(int row, int column) {
            return false;
        }
    };

    for (Employee emp : employeeService.getAll()) {
        model.addRow(new Object[]{
            emp.getId(),
            emp.getName(),
            emp.getPosition(),
            emp.getPassword(),
            roleName(emp.getRole())
        });
    }
    tblEmployee.setModel(model);
}

(3) เมธอดช่วยแปลงบทบาท — ตารางโชว์ข้อความไทย ("ผู้จัดการ"/"พนักงาน") ไม่ใช่เลข 1/2 — ใส่ไว้เลยเพื่อให้จบ Step 6 แล้ว compile ผ่าน:

/** แปลงเลขบทบาทเป็นข้อความสำหรับคอลัมน์ "บทบาท" ในตาราง */
private String roleName(int role) {
    return role == 1 ? "ผู้จัดการ" : "พนักงาน";
}

(4) ปุ่มรีเฟรช + import: ดับเบิลคลิก btnRefresh → วางโค้ด แล้วเพิ่ม import

private void btnRefreshActionPerformed(java.awt.event.ActionEvent evt) {
    showEmployees();
}

import com.example.moogata.model.Employee;
import com.example.moogata.service.EmployeeService;
import javax.swing.JOptionPane;
import javax.swing.table.DefaultTableModel;

จากนั้นกลับไปที่ LoginFrame — แทนข้อความชั่วคราวท้าย btnLoginActionPerformed ด้วย "ประตูที่สอง" คือกฎเรื่องสิทธิ์ + การเปิดหน้าจัดการ:

// เดิม (Step 4):  JOptionPane.showMessageDialog(this, "ยินดีต้อนรับ ...");
// เปลี่ยนเป็น:
// กฎธุรกิจ: หน้าจัดการพนักงานเปิดเฉพาะผู้จัดการ (role = 1) เท่านั้น
if (employee.getRole() != 1) {
    JOptionPane.showMessageDialog(this,
            employee.getName() + " ไม่ใช่ผู้จัดการ จึงเข้าหน้าจัดการพนักงานไม่ได้",
            "ไม่มีสิทธิ์เข้าใช้", JOptionPane.WARNING_MESSAGE);
    return;
}

EmployeeFrame employeeFrame = new EmployeeFrame(employee);
employeeFrame.setLocationRelativeTo(this);
employeeFrame.setVisible(true);
this.dispose();

รัน LoginFrame → login somjai / 1234 → ต้องเห็นหน้าจัดการพนักงาน มีตาราง 3 แถว ทดลองกดรีเฟรช: เปิด Letos ไปแก้ข้อมูล (เช่นเปลี่ยนตำแหน่ง malee) แล้วกดรีเฟรชในโปรแกรม — ตารางต้องเปลี่ยนตาม = พิสูจน์ว่าตารางอ่านจากฐานข้อมูลจริงทุกครั้ง ไม่ใช่จำค่าเก่า

Step 7 — คลิกแถว → ค่าขึ้นฟอร์ม + ปุ่มบันทึก/ล้างฟอร์ม/ลบ (CRUD ครบบนฟอร์มเดียว)

(1) คลิกเลือกแถวแล้วค่าขึ้นฟอร์ม — handler ของตารางต่างจากปุ่ม: ไม่มีเมนู Events → ListSelection ให้ใช้ (JTable ไม่มี addListSelectionListener ของตัวเอง — มีเฉพาะ JList) ทำ 2 ขั้น:

ขั้นแรก — ผูก listener ใน constructor (เพิ่มบรรทัดนี้ต่อจาก setSelectionMode ที่เขียนไว้ใน Step 6):

    // ผูก listener "คลิกแถว → เติมฟอร์ม"
    tblEmployee.getSelectionModel().addListSelectionListener(this::tblEmployeeValueChanged);

ขั้นต่อมา — เขียนเมธอด handler วางใน Source:

/** คลิกเลือกแถวในตาราง → อ่านข้อมูลจากฐานข้อมูลแล้วเติมลงฟอร์มด้านบน (เข้าสู่โหมดแก้ไข) */
private void tblEmployeeValueChanged(javax.swing.event.ListSelectionEvent evt) {
    if (evt.getValueIsAdjusting()) {
        return; // event นี้ยิง 2 รอบต่อการคลิก 1 ครั้ง — รอบแรก (selection ยังปรับไม่จบ) ข้ามไปก่อน
    }
    int row = tblEmployee.getSelectedRow();
    if (row == -1) {
        return; // ช่วงล้างตาราง/ล้างฟอร์ม — ไม่มีแถวถูกเลือก ไม่ต้องทำอะไร
    }
    int id = (Integer) tblEmployee.getValueAt(row, 0);
    Employee emp = employeeService.get(id);
    if (emp == null) {
        return;
    }
    editingId = emp.getId();
    txtLogin.setText(emp.getName());
    txtPosition.setText(emp.getPosition());
    txtPassword.setText(emp.getPassword());
    setSelectedRole(emp.getRole());
}

(2) ปุ่มบันทึก (ดับเบิลคลิก btnSave) — ปุ่มเดียวสองพฤติกรรม แยกด้วยสถานะ editingId:

private void btnSaveActionPerformed(java.awt.event.ActionEvent evt) {
    String name = txtLogin.getText().trim();
    String position = txtPosition.getText().trim();
    String password = new String(txtPassword.getPassword());

    if (name.isEmpty() || position.isEmpty() || password.isEmpty()) {
        JOptionPane.showMessageDialog(this,
                "กรอกข้อมูลให้ครบทุกช่องก่อนบันทึก",
                "ข้อมูลไม่ครบ", JOptionPane.WARNING_MESSAGE);
        return;
    }

    Employee emp = new Employee(name, position, password, getSelectedRole());

    if (editingId > 0) {
        // มีแถวถูกเลือกอยู่ = โหมดแก้ไข (ใช้ id ของแถวที่คลิก)
        emp.setId(editingId);
        if (employeeService.update(emp) == null) {
            JOptionPane.showMessageDialog(this,
                    "แก้ไขไม่สำเร็จ (ชื่อล็อกอินซ้ำกับคนอื่น หรือไม่พบแถวเดิม)",
                    "แก้ไขไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
            return;
        }
    } else {
        // ฟอร์มว่างจากการล้าง = โหมดเพิ่มใหม่
        if (employeeService.save(emp) == null) {
            JOptionPane.showMessageDialog(this,
                    "บันทึกไม่สำเร็จ (ชื่อล็อกอินซ้ำกับคนอื่น)",
                    "บันทึกไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
            return;
        }
    }
    clearForm();
    showEmployees();
}

(3) ปุ่มล้างฟอร์ม (ดับเบิลคลิก btnNew) — หน้าที่เดียวคือพาฟอร์มกลับสู่โหมดเพิ่ม:

private void btnNewActionPerformed(java.awt.event.ActionEvent evt) {
    clearForm();
}

(4) ปุ่มลบ (ดับเบิลคลิก btnDelete) — ลบเป็นการกระทำที่กู้ไม่ได้ จึงมีกันตัว 2 ชั้น: ห้ามลบบัญชีที่ล็อกอินอยู่ และถามยืนยันก่อนทุกครั้ง:

private void btnDeleteActionPerformed(java.awt.event.ActionEvent evt) {
    int row = tblEmployee.getSelectedRow();
    if (row == -1) {
        JOptionPane.showMessageDialog(this,
                "เลือกพนักงานในตารางก่อนกดลบ",
                "ยังไม่ได้เลือก", JOptionPane.WARNING_MESSAGE);
        return;
    }
    int id = (Integer) tblEmployee.getValueAt(row, 0);
    String selectedName = (String) tblEmployee.getValueAt(row, 1);

    // กฎธุรกิจ: ห้ามลบบัญชีที่กำลังล็อกอินอยู่ (กันผู้จัดการลบตัวเองจนเข้าระบบไม่ได้)
    if (selectedName.equals(loginUser.getName())) {
        JOptionPane.showMessageDialog(this,
                "ลบบัญชีที่กำลังใช้งานอยู่ไม่ได้",
                "ลบไม่ได้", JOptionPane.WARNING_MESSAGE);
        return;
    }

    int choice = JOptionPane.showConfirmDialog(this,
            "ต้องการลบพนักงาน " + selectedName + " ใช่หรือไม่?",
            "ยืนยันการลบ", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE);
    if (choice != JOptionPane.YES_OPTION) {
        return;
    }

    int deleted = employeeService.delete(id);
    if (deleted > 0) {
        clearForm();
        showEmployees();
    } else {
        JOptionPane.showMessageDialog(this,
                "ลบไม่สำเร็จ (อาจถูกลบไปก่อนแล้ว)",
                "ลบไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
    }
}

(5) เมธอดช่วย — เพิ่มท้ายคลาส (roleName() ใส่ไว้แล้วใน Step 6):

/** ล้างฟอร์มกลับสู่โหมดเพิ่มใหม่ (editingId = -1) */
private void clearForm() {
    editingId = -1;
    tblEmployee.clearSelection(); // จะเรียก valueChanged กลับมาด้วยแถว -1 (มี guard รออยู่)
    txtLogin.setText("");
    txtPosition.setText("");
    txtPassword.setText("");
    cmbRole.setSelectedIndex(0);
}

/** แปลงรายการที่เลือกใน cmbRole เป็นเลข role ที่เก็บในฐานข้อมูล */
private int getSelectedRole() {
    return cmbRole.getSelectedIndex() == 1 ? 1 : 2;
}

/** ตั้ง cmbRole ให้ตรงกับเลข role ที่เก็บในฐานข้อมูล */
private void setSelectedRole(int role) {
    cmbRole.setSelectedIndex(role == 1 ? 1 : 0);
}

ทดสอบชิ้นนี้ทันที: รัน → login somjai → คลิกแถว somchai → ฟอร์มต้องเติมค่าเดิมทันที:

Step 8 — ทดสอบส่วนที่ 1 ครบ 8 สถานการณ์ (ทำตามสคริปต์ทีละข้อ)

เตรียมก่อนทดสอบ (2 นาที)

1. เปิด Letos → ตาราง employee → ต้องเหลือเดิม 3 แถว (somjai, somchai, malee) — ถ้ามีคนอื่นค้างจากตอนลองโค้ด ลบทิ้งให้เหลือ 3 คนนี้ก่อน (ข้อมูลสะอาด = ผลทดสอบเชื่อถือได้)
2. รัน LoginFrame จาก NetBeans แล้ววางหน้าต่าง Letos ไว้ข้าง ๆ — เราจะยืนยัน "ของจริงใน db" คู่กับ "บนจอ" ไปด้วย

สคริปต์ทดสอบ — ทำตามลำดับ 1 → 8

2) พนักงานล็อกอิน (รหัสถูก แต่ไม่ใช่ผู้จัดการ)

ทำ: พิมพ์ somchai / 1234 → เข้าสู่ระบบ

ต้องเห็น: กล่องเหลือง "สมชาย มานะงาน ไม่ใช่ผู้จัดการ จึงเข้าหน้าจัดการพนักงานไม่ได้"

ทำไม: พิสูจน์กฎสิทธิ์ — รหัสถูกเพียงอย่างเดียวไม่พอ role ต้องถูกด้วย

8) ลบพนักงานคนอื่น

ทำ: คลิกแถว sompong → ลบ → อ่านกล่องยืนยัน → กด Yes

ต้องเห็น: กล่องคำถาม "ต้องการลบพนักงาน sompong ใช่หรือไม่?" → ตารางกลับเป็น 3 แถว ฟอร์มถูกล้าง

ทำไม: พิสูจน์ลบจริง + ปิดจบข้อมูลทดสอบให้ db กลับสภาพเดิม 3 คน

ปิดการทดสอบ

เช็ค Letos อีกครั้ง — ตารางต้องกลับมา 3 แถวเดิม (somjai/somchai/malee โดย somchai อาจเป็น "หัวหน้ากะ" จากข้อ 6 — จะแก้คืนใน Letos ก็ได้) = ฐานข้อมูลสะอาดเท่าก่อนทดสอบ และถ่ายภาพหน้าจออย่างน้อย 3 ภาพเก็บเป็นหลักฐาน (ข้อ 3, ข้อ 4/7, ข้อ 8)

Step 9 — คัดลอกโปรเจกต์ MoogataLab → MoogataLabDialog

1. ใน NetBeans: คลิกขวาโปรเจกต์ MoogataLab → Close (ปิดก่อนคัดลอก — กันไฟล์ถูกล็อกจากโปรแกรมที่กำลังรันอยู่)
2. เปิด File Explorer เข้าไปที่โฟลเดอร์ NetBeansProjects → คลิกขวาโฟลเดอร์ MoogataLab → Copy → Paste → ตั้งชื่อ MoogataLabDialog (คัดลอกทั้งโฟลเดอร์ = ได้โค้ด + moogata.db ที่มีข้อมูลครบมาด้วย)
3. เปิดโฟลเดอร์ MoogataLabDialog → แก้ไฟล์ pom.xml 2 จุด: ① เปลี่ยน <artifactId>moogata-lab</artifactId> เป็น <artifactId>moogata-lab-dialog</artifactId> ② เปลี่ยน <name>moogata-lab</name> เป็น <name>moogata-lab-dialog</name> — จุดที่ 2 สำคัญ: NetBeans แสดงชื่อโปรเจกต์จาก <name> ถ้าไม่แก้จะเห็นสองโปรเจกต์ชื่อเดียวกันจนเปิดผิด)
4. ถ้าใช้ git เก็บงาน: โฟลเดอร์ที่คัดลอกมาจะมี .git ติดมาด้วย (ประวัติ commit ของส่วนที่ 1) — เปิดให้เห็นไฟล์ซ่อนก่อน: File Explorer → View → Show → Hidden items (Windows 11) / แท็บ View ติ๊ก Hidden items (Windows 10) แล้วลบโฟลเดอร์ .git ใน MoogataLabDialog ทิ้ง แล้ว git init ใหม่ เพื่อให้สองโปรเจกต์มีประวัติแยกกัน (ส่วนที่ 1 อยู่ repo เดิม ส่วนที่ 2 เริ่ม repo ใหม่)
5. คลิกขวาโฟลเดอร์ MoogataLabDialog → ลบโฟลเดอร์ target/ ทิ้ง (ของเก่าที่คัดลอกมาด้วย) — หรือเปิดแล้วกด Clean and Build หนึ่งรอบ
6. กลับมาที่ NetBeans → File → Open Project → เลือก MoogataLabDialog → Open
7. ทดสอบทันที: รัน TestEmployeeService ต้องผ่านเหมือนเดิมทันที (พิสูจน์ว่าคัดลอกมาครบ — รัน LoginFrame ดูหน้าจอก็ได้ ต้องใช้งานได้ปกติ)

Step 10 — สร้าง EmployeeDialog — ฟอร์มพนักงาน 1 คนในกล่อง

New → JDialog Form ชื่อ EmployeeDialog ใน package ui แล้วลาก control ตามภาพ:

ตั้งค่า: resizable ออก · ขนาด: ลากขอบใน designer ราว ~480 × 330 (title ตั้งในโค้ดตอนเปิด)

ฟอร์มนี้ใช้ร่วม 2 โหมด (เพิ่ม = ช่องว่าง / แก้ไข = เติมค่าเดิม) — สลับไป Source แล้วแก้ constructor ที่ NetBeans สร้างให้เป็น 2 แบบ + เพิ่ม field/เมธอดช่วย:

private final EmployeeService employeeService = new EmployeeService();
private boolean saved = false;
private int employeeId = -1;        // > 0 เมื่อเป็นโหมดแก้ไข

/** โหมดเพิ่มพนักงานใหม่ */
public EmployeeDialog(java.awt.Frame owner, String title) {
    super(owner, title, true);
    initComponents();
    setLocationRelativeTo(owner); // เปิดกลางหน้าต่างหลัก
}

/** โหมดแก้ไข — เติมค่าเดิมของพนักงานที่เลือกให้ทุกช่อง */
public EmployeeDialog(java.awt.Frame owner, String title, Employee editEmployee) {
    super(owner, title, true);
    initComponents();
    setLocationRelativeTo(owner); // เปิดกลางหน้าต่างหลัก
    this.employeeId = editEmployee.getId();
    txtLogin.setText(editEmployee.getName());
    txtPosition.setText(editEmployee.getPosition());
    txtPassword.setText(editEmployee.getPassword());
    setSelectedRole(editEmployee.getRole());
}

/** EmployeeFrame ใช้ตรวจหลัง dialog ปิด: true = บันทึกสำเร็จ ควรรีเฟรชตาราง */
public boolean isSaved() {
    return saved;
}

/** แปลงรายการที่เลือกใน cmbRole เป็นเลข role ที่เก็บในฐานข้อมูล */
private int getSelectedRole() {
    return cmbRole.getSelectedIndex() == 1 ? 1 : 2;
}

/** ตั้ง cmbRole ให้ตรงกับเลข role ที่เก็บในฐานข้อมูล */
private void setSelectedRole(int role) {
    cmbRole.setSelectedIndex(role == 1 ? 1 : 0);
}

ดับเบิลคลิก btnOK:

private void btnOKActionPerformed(java.awt.event.ActionEvent evt) {
    String name = txtLogin.getText().trim();
    String position = txtPosition.getText().trim();
    String password = new String(txtPassword.getPassword());

    if (name.isEmpty() || position.isEmpty() || password.isEmpty()) {
        JOptionPane.showMessageDialog(this,
                "กรอกข้อมูลให้ครบทุกช่องก่อนบันทึก",
                "ข้อมูลไม่ครบ", JOptionPane.WARNING_MESSAGE);
        return;
    }

    Employee emp = new Employee(name, position, password, getSelectedRole());

    if (employeeId > 0) {
        // โหมดแก้ไข — ใส่ id เดิมกลับเข้าไปก่อน update
        emp.setId(employeeId);
        if (employeeService.update(emp) == null) {
            JOptionPane.showMessageDialog(this,
                    "แก้ไขไม่สำเร็จ (ชื่อล็อกอินซ้ำกับคนอื่น หรือไม่พบแถวเดิม)",
                    "แก้ไขไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
            return;
        }
    } else {
        // โหมดเพิ่ม — save จะคืน object พร้อม id ใหม่ หรือ null ถ้าล้มเหลว
        if (employeeService.save(emp) == null) {
            JOptionPane.showMessageDialog(this,
                    "บันทึกไม่สำเร็จ (ชื่อล็อกอินซ้ำกับคนอื่น)",
                    "บันทึกไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
            return;
        }
    }

    saved = true;
    dispose();
}

ดับเบิลคลิก btnCancel:

private void btnCancelActionPerformed(java.awt.event.ActionEvent evt) {
    dispose();
}

เพิ่ม import: com.example.moogata.model.Employee, com.example.moogata.service.EmployeeService, javax.swing.JOptionPane (ตอนนี้ dialog ยังไม่มีใครเรียก — โปรแกรมรันได้ปกติ เราจะเชื่อมใน Step 11)

Step 11 — รื้อ EmployeeFrame: ลบฟอร์มด้านบน เหลือตาราง + ปุ่ม (เรียก dialog แทน)

เป้าหมายของหน้าจอหลังรื้อ (ตารางเต็มหน้าต่าง ปุ่มอยู่แถวล่าง — ไม่มีฟอร์ม):

1. ลบ control ฝั่งฟอร์มออกจาก designer: คลิกเลือก lblLogin, txtLogin, lblPosition, txtPosition, lblPassword, txtPassword, lblRole, cmbRole แล้วกด Delete (ลบใน designer เท่านั้น — อย่าไปลบโค้ดใน guarded block เอง)
2. ลบปุ่มเก่า 2 ตัว: btnSave และ btnNew ทิ้ง (หน้าที่ของทั้งคู่ย้ายไปอยู่ที่ btnOK ของ dialog แล้ว)
3. ลาก Button ใหม่ 2 ตัว มาไว้หัวแถวปุ่ม: text เพิ่มพนักงาน → ตั้งชื่อตัวแปร btnAdd · text แก้ไข → ตั้งชื่อตัวแปร btnEdit (ส่วนที่ 1 ไม่มีปุ่มแก้ไข — เพราะเคยแก้ผ่านฟอร์มบน) · จากนั้น ลากตารางขยายสูงขึ้นกินพื้นที่ว่างของฟอร์มเดิม และจัดปุ่มเรียงใต้ตาราง: เพิ่มพนักงาน · แก้ไข · ลบ · รีเฟรช (ดูตำแหน่งจากภาพ · ขนาดฟอร์ม: ลากขอบให้ได้ราว ~656 × 470)
4. แก้โค้ดฝั่ง Source: ถอด event ของ btnSave/btnNew ผ่าน designer ก่อน (ดูกล่องเตือนด้านบน) และลบบรรทัดผูก listener ของตาราง + เมธอด tblEmployeeValueChanged เองใน Source จากนั้นลบโค้ดเก่าที่เกี่ยวกับฟอร์มออก (editingId, btnSaveActionPerformed, btnNewActionPerformed, clearForm, getSelectedRole, setSelectedRole) — ส่วน constructor, showEmployees(), btnRefreshActionPerformed, roleName() คงไว้ (ยังใช้อยู่) แล้วเพิ่ม handler ใหม่ 2 ตัว (btnAdd, btnEdit — ดับเบิลคลิกสร้างก่อน) และแทนที่เนื้อในของ btnDeleteActionPerformed ที่มีอยู่แล้วจากส่วนที่ 1 (ห้ามสร้างเมธอดซ้ำ) ตามด้านล่าง

private void btnAddActionPerformed(java.awt.event.ActionEvent evt) {
    EmployeeDialog dialog = new EmployeeDialog(this, "เพิ่มพนักงานใหม่");
    dialog.setVisible(true);            // modal — โปรแกรมรอตรงนี้จนกว่า dialog จะถูกปิด
    if (dialog.isSaved()) {
        showEmployees();                // ข้อมูลเปลี่ยน → อ่านใหม่จากฐานข้อมูล
    }
}

private void btnEditActionPerformed(java.awt.event.ActionEvent evt) {
    int row = tblEmployee.getSelectedRow();
    if (row == -1) {
        JOptionPane.showMessageDialog(this,
                "เลือกพนักงานในตารางก่อนกดแก้ไข",
                "ยังไม่ได้เลือก", JOptionPane.WARNING_MESSAGE);
        return;
    }
    int id = (Integer) tblEmployee.getValueAt(row, 0);
    Employee emp = employeeService.get(id);
    if (emp == null) {
        JOptionPane.showMessageDialog(this,
                "หาพนักงานรหัส " + id + " ไม่พบ (อาจถูกลบไปแล้ว)",
                "ไม่พบข้อมูล", JOptionPane.ERROR_MESSAGE);
        return;
    }
    EmployeeDialog dialog = new EmployeeDialog(this, "แก้ไขพนักงาน: " + emp.getName(), emp);
    dialog.setVisible(true);
    if (dialog.isSaved()) {
        showEmployees();
    }
}

private void btnDeleteActionPerformed(java.awt.event.ActionEvent evt) {
    int row = tblEmployee.getSelectedRow();
    if (row == -1) {
        JOptionPane.showMessageDialog(this,
                "เลือกพนักงานในตารางก่อนกดลบ",
                "ยังไม่ได้เลือก", JOptionPane.WARNING_MESSAGE);
        return;
    }
    int id = (Integer) tblEmployee.getValueAt(row, 0);
    String selectedName = (String) tblEmployee.getValueAt(row, 1);

    // กฎธุรกิจ: ห้ามลบบัญชีที่กำลังล็อกอินอยู่ (กันผู้จัดการลบตัวเองจนเข้าระบบไม่ได้)
    if (selectedName.equals(loginUser.getName())) {
        JOptionPane.showMessageDialog(this,
                "ลบบัญชีที่กำลังใช้งานอยู่ไม่ได้",
                "ลบไม่ได้", JOptionPane.WARNING_MESSAGE);
        return;
    }

    int choice = JOptionPane.showConfirmDialog(this,
            "ต้องการลบพนักงาน " + selectedName + " ใช่หรือไม่?",
            "ยืนยันการลบ", JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE);
    if (choice != JOptionPane.YES_OPTION) {
        return;
    }

    int deleted = employeeService.delete(id);
    if (deleted > 0) {
        showEmployees();
    } else {
        JOptionPane.showMessageDialog(this,
                "ลบไม่สำเร็จ (อาจถูกลบไปก่อนแล้ว)",
                "ลบไม่สำเร็จ", JOptionPane.ERROR_MESSAGE);
    }
}

Step 12 — ทดสอบส่วนที่ 2 ครบ 10 สถานการณ์ (สังเกตพฤติกรรมที่ต่างจากแบบรวม)

เตรียม + สัมผัสพฤติกรรม modal ก่อน (2 นาที)

1. เช็ค Letos: ตาราง employee ต้องเหลือ 3 แถวเดิม (เหมือนตอนเตรียมของ Step 8)
2. รัน LoginFrame ของโปรเจกต์ MoogataLabDialog (อย่าสับสนกับโปรเจกต์เดิม!) → login somjai / 1234
3. กด "เพิ่มพนักงาน" ให้ dialog เปิดขึ้น → ลองคลิกแถวในตารางด้านหลัง → ต้องคลิกไม่ได้ (มือถือกล่อง dialog อยู่) = พิสูจน์ว่า modal ทำงาน → กด "ยกเลิก" ปิดไปก่อน

สคริปต์ทดสอบ — 10 สถานการณ์

ปิดการทดสอบ

เช็ค Letos ต้องเหลือ 3 แถวเดิม · ปิดโปรแกรม · ลองเปิดโปรเจกต์ MoogataLab เดิม รันเทียบ — ทั้งสองโปรเจกต์ต้องยังใช้งานได้ครบ = เรามีระบบ 2 รูปแบบบนหลังบ้านชุดเดียวกัน

Troubleshooting — อาการที่เจอบ่อยและวิธีแก้

เช็คลิสต์ส่งงาน + สรุปเรื่องราวทั้ง lab

เช็คลิสต์ส่งงาน

• [ ] ส่วนที่ 1 ทำในโปรเจกต์ MoogataLab เดิม (ไม่สร้างโปรเจกต์ใหม่ ไม่แก้ตาราง/ฐานข้อมูล)
• [ ] ส่วนที่ 2 ทำในโปรเจกต์ MoogataLabDialog (คัดลอกมาจากส่วนที่ 1)
• [ ] git history รายโปรเจกต์: MoogataLab ≥ 4 commit (ช่วง 1–4) · MoogataLabDialog ≥ 3 commit (ช่วง 5–7) — รวม ≥ 7 ตามข้อความกำกับ (git log --oneline ทั้งสอง repo)
• [ ] ทดสอบเดิมจาก lab 10 (TestEmployeeDao, TestEmployeeService) ยังผ่านทั้งสองโปรเจกต์
• [ ] แบบฟอร์มรวมผ่านครบ 8 สถานการณ์ (Step 8) และแบบ dialog ผ่านครบ 10 สถานการณ์ (Step 12) — ถ่ายภาพหน้าจอเป็นหลักฐานอย่างน้อย 3 ภาพ: login ผ่านเห็นตาราง · ฟอร์ม/dialog เติมค่าตอนแก้ไข · ตารางหลังเพิ่มข้อมูล
• [ ] เขียนสั้น ๆ 5 บรรทัด: "แบบฟอร์มรวม vs แบบ dialog แบบไหนเหมาะกับงานอะไร เพราะอะไร" (ส่งพร้อมงาน)

สรุปเรื่องราวทั้ง lab — เราได้อะไรมาบ้าง

เอกสารอ้างอิงเต็ม (README ของแต่ละแบบ)

• ฉบับแบบรวม (ฟอร์มบน-ตารางล่าง) — labs/week11-employee-ui-continue/README.md
• ฉบับแบบ dialog (โครงสำเนา) — labs/week11-employee-ui-dialog/README.md
• ฉบับเสริมอีกทางเลือก: สร้างโปรเจกต์ใหม่ตามโครง buu_softdev/usercrud + จัดการตาราง user — labs/week11-user-ui/README.md
• แผนที่คอร์สทั้งหมด — teaching-sequence.md