Work Shop Java GUI Lab3 จัดการงานด้านฐานข้อมูล

เนื้อหาใน workshop นี้ จะเขียนโปรแกรมด้วย Java GUI  เพื่อจัดการงานด้านฐานข้อมูล 

ความสามารถของโปรแกรมที่เขียน
1. ติดต่อกับฐานข้อมูลได้
2. โปรแกรมสามารถ เพิ่ม ลบ แก้ไข ค้นหารายการได้

โปรแกรมที่ใช้คือ
1. Netbean  เครื่องมือสำหรับใช้เขียนโปรแกรม
2. Appser คือโปรแกรมที่รวบรวมเอา Open Source Software หลายๆ อย่างมารวมกัน โดยมี Package หลักดังนี้ Apache, PHP, MySQL, phpMyAdmin
ขั้นตอนการติดตั้งการใช้งานเบื้องต้นสามารถค้นได้จาก google.com

เตรียมฐานข้อมูล
1. สร้างฐานข้อมูลใน phpMyAdmin ให้ฐานข้อมูลชื่อว่า db_javaphone 

2. จากนั้นทำการสร้างตารางชื่อว่า tb_phone ตามโครงสร้างดังนี้

คำสั่ง sql ในการสร้างตาราง
          CREATE TABLE `tb_phone` (
          `id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
          `name` VARCHAR( 255 ) NOT NULL ,
          `price` INT( 5 ) NOT NULL ,
          `color` VARCHAR( 50 ) NOT NULL 

          ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;

เชื่อมต่อฐานข้อมูล
1. โดยเริ่มจากทำการสร้างโปรเจ๊คใน netbean ขึ้นมาใหม่ ให้เป็นชนิด java application ทำการตั้งชื่อโปรเจ๊ค 

2. สร้างไฟล์ขึ้นมา ในที่นี้ใช้ชื่อว่า JPhone แล้วทำการเพิ่ม jar file เพื่อให้เชื่อมต่อกับฐานข้อมูลได้ โดยคลิ๊กขวาที่ libraries และเลือก Add Library… ตามรูป

จะพบว่ามี libraries เพิ่มเข้ามาดังภาพ

3. ต่อมาสร้างไฟล์ Db.java เพื่อใช้เชื่อมต่อฐานข้อมูล และเขียนโค๊ดดังนี้

import java.sql.Connection; import java.sql.DriverManager; public class Db {     public static Connection getConnection() {         try {             // เตรียมตัวแปรในการเชื่อมต่อ              // url ตามชื่อฐานข้อมูล ส่วน user, pass ตามที่ตั้งค่าตอนติดตั้ง appserv             String url = "jdbc:mysql://localhost/db_javaphone?characterEncoding=UTF-8";             String user = "root";             String pass = "1234";             String driver = "com.mysql.jdbc.Driver";             // load driver เข้าสู่หน่วยความจำ             Class.forName(driver);             // ทำการเชื่อมต่อฐานข้อมูล และ return             return DriverManager.getConnection(url, user, pass);         } catch (Exception e) {             e.printStackTrace();         }         return null;     }//end main }//end class

4. สร้างไฟล์ TestConnect  เพื่อทำการทดสอบการทำงานของ class เขียนโค๊ดดังนี้

import java.sql.Connection; public class TestConnect {     public static void main(String[] args) {         try {             Connection c = Db.getConnection();                if (c != null) {                 System.out.println("pass");             } else {                 System.out.println("fail");             }         } catch (Exception e) {             e.printStackTrace();         }     }//end main }//end class

     หลังจากเขียนโค๊ดแล้วให้ลองรันดู ถ้าขี้นว่า fail ให้ตรวจสอบโค๊ดที่ Db.java อีกครั้ง 
การดึงข้อมูลจากฐานข้อมูลขึ้นมาแสดงบน Table ใน GUI และการเพิ่ม ลบ แก้ไขรายการ 1. เพิ่มข้อมูลในตาราง tb_phone ใน phpMyAdmin 

2. สร้างไฟล์ใหม่ชื่อว่า Main เลือกให้เป็นแบบ jFrame Form…. เมื่อได้แล้วให้ลาก jLable, Table และปุ่ม Button มาจัดเรียงตามรูป

3. Edit text ที่ jLable แก้เป็น ระบบจัดการข้อมูลโทรศัพท์  4. เปลี่ยนชื่อตัวแปรให้กับ jTable เพื่อง่ายต่อการจดจำ เป็น tbPhone หลังจากนั้นคลิ๊กขวาที่ jTable  table content  และกำหนดค่าแต่ละคอลัมน์ ดังรูป

5. หลังจากนั้นทำการเพิ่ม Event ให้กับ jForm  โดยคลิ๊กขวาที่ jForm --> Events --> Window --> windowOpened ดังรูป

     จะเห็นโค๊ดดังนี้

     จากนั้นสร้าง DefaultTableModle เพื่อให้ข้อมูลมาวางบนตารางได้ตามต้องการ โดยเขียนโค๊ดเพิ่มที่ส่วนแรกของคลาส ดังรูป

     หลังจากที่เขียนโค๊ดแล้วจะพบว่ามี error ที่ บรรทัดที่ 11 เนื่องจากเรายังไม่ได้ add class ของ DefaultTableModle ให้เอาเมาท์คลิ๊กที่ไอคอนหลอดไฟสีเหลือง ด้านซ้ายมือ netbeans จะทำการ import คลาสเข้ามาให้ หลังจากนั้นให้ import คลาสต่างๆเพิ่มดังนี้      import javax.swing.table.DefaultTableModel; (import มาจากการที่คลิ๊กที่ไอคอนหลอดไฟสีเหลือง)      import java.sql.Connection;      import java.sql.ResultSet;      import java.util.Vector; // ใช้เพื่อเก็บค่าแถวแต่ละแถว เมื่อดึงขึ้นมาตอนทำการ loop      จากนั้นทำการสร้าง modelPhone  ให้ทำการเขียนโค๊ดลงไปใน  constructor ตามรูป

     เขียนโค๊ดเข้าไปที่ WindowOpened 

ข้อสังเกตุจากรูปที่ผ่านมา - บรรทัดที่ 112-116 ทำการเคลีย์แถวที่มีอยู่เดิมใน jTable - บรรทัดที่ 118-121 ทำการเชื่อมต่อฐานข้อมูล และดึงข้อมูลมาเก็บใน ResultSet ที่ชื่อว่า rs - บรรทัดที่ 123-131 เริ่มทำการ loop ข้อมูลออกมาเพื่อนำไปวางไว้บน vactor แล้ว addRow เข้า modelPhone เพื่อที่จะนำ model นี้ไปวางไว้ใน jTable       หลังจากที่เขียนโค๊ดเสร็จทำการรันไฟล์ จะได้ output ดังนี้

6. Edit Text ที่ปุ่ม button ดังนี้     jButton1 = เพิ่มรายการ, jButton2 = ลบรายการ, jButton3 = แก้ไขรายการ, jButton4 = ค้นหารายการ 7. เปลี่ยนชื่อตัวแปรให้กับปุ่ม button ดังนี้      jButton1 = cmdAdd,     jButton2 = cmdDel     jButton3 = cmdEdit,     jButton4 = cmdFind 8. ปุ่มเพิ่มรายการ     ในการเพิ่มรายการจะต้องทำการสร้างแบบฟอร์ม เพื่อให้เราสามารถเพิ่มรายการได้ โดยเริ่มจากการสร้างไฟล์ชนิด Dialog ก่อน สร้างไฟล์ใหม่ปั้ New --> JDialog Form ดังรูป

     หากหาไม่เจอให้ไปที่ Other เลือก  Categories เป็นแบบ Swing GUI Forms ส่วน File Types เลือกเป็น JDialog Form ตั้งชื่อว่า DialogPhone จากนั้นออกแบบหน้าตา GUI ตามรูป พร้อมทั้งกำหนดชื่อให้กับแต่ละ component ดังนี้      Text  Field สำหรับใส่ชื่อโทรศัพท์ = txtName      Text  Field สำหรับใส่ชื่อสี = txtColor      Text  Field สำหรับใส่ราคา = txtPrice      ปุ่มบันทึก = cmdAdd      ปุ่มยกเลิกเพิ่ม = cmdCan

     เริ่มด้วยการ import ไฟล์ 2 อันนี่ก่อน import java.sql.Connection; และ import java.sql.PreparedStatement;
     จากนั้นไปกำหนด Event ให้กับปุ่มเพิ่ม คลิ๊กเมาท์ขวา --> Events --> Action --> actionPerformed เขียนโค๊ดดังนี้

     ทำการผูก Event ให้เข้ากับหน้าหลัก โดยผูกเข้ากับปุ่ม เพิ่มรายการ


เขียนโค๊ดดังนี้

     ทดสอบการทำงานที่ไฟล์ Main.java เมื่อคลิ๊กปุ่มเพิ่มรายการจะต้องมีไดอะล๊อคสำหรับเพิ่มรายการขึ้นมาดังรูป

กรอกข้อมูลที่ไดอะล๊อคแล้วกดบันทึก

จะพบว่ามีรายการใหม่เพิ่มขึ้นมาในตาราง

9. ปุ่มลบรายการ
     การลบรายการจะต้องเลือกรายการใน jTable ก่อนทำการกดปุ่มลบ เพื่อให้ได้ค่า inex ของรายการ หากผู้ใช้ไม่ทำการเลือกรายการก่อนแล้วกดปุ่มลบจะทำให้เกิด error
     เริ่มจากกำหนด event ให้กับปุ่มลบ โดยคลิ๊กเมาท์ขวา --> Events --> Action --> actionPerformed จากนั้นทำการเขียนโค๊ดดังนี้

ผลรัน

10. ปุ่มแก้ไขรายการ
     การแก้ไขรายการเราจะใช้ไดอะล๊อคเดียวกันกับการเพิ่มรายการ เพียงแค่เขียนโค๊ดเพิ่มเข้าไป ให้สร้าง properties เข้าไปใน DialogPhone.java

     ทำการผูก Event ให้เข้ากับหน้าหลัก โดยผูกเข้ากับปุ่มแก้ไขรายการ แล้วเขียนโค๊ด

ข้อสังเกต
- สามารถส่ง id ไปได้เลยเพราะว่าทำเป็นแบบ public ไว้
- tablePhone.getSelectedRow(); ใช้หาแถวที่กดว่าเป็นแถวที่เท่าไหร่
- ในการหา id ใช้  tablePhone.getValueAt(index, 0) ซึ่ง 0 เท่ากับ columแรกใน jTable

ทำการกำหนด Event ให้กับ DialogPhone เมื่อเปิดหน้าต่าง

ข้อสังเกต
- rs.next() คือการเริ่มอ่านรายการหรือเปิด record
- rs.close()คือการปิดการอ่านรายการ
- หลังจากเขียนโค๊ดเสร็จโปรแกรมจะแจ้งเตือนให้ import คลาสเพิ่ม ให้เรา import java.sql.ResultSet; เพิ่มเข้าไป

    แก้ไขโค๊ดในส่วนของการบันทึกรายการเพิ่ม ที่ DialogPhone.java เขียนโค๊ดดังนี้

     จากนั้นไปเขียน method ชื่อว่า updateRecord ต่อ

     จากนั้นทำการใส่ event ให้กับปุ่มยกเลิก เพื่อล้างรายการที่กรอกไว้ กรณีเพิ่มและแก้ไขข้อมูล โดยคลิ๊กเมาท์ขวา --> Events --> Action --> และเขียนโค๊ดดังนี้

ทดสอบการทำงาน

11. ปุ่มค้นหารายการ

      เริ่มจากการเพิ่ม properties ลงใน Main.java

     ให้ทำการสร้างไดอะล๊อคขึ้นมาให้ใช้ชื่อว่า DialogSearch จัดรูปแบบให้มีหน้าตาดังภาพ และให้  jTextField มีชื่อว่า txtSearch ส่วนปุ่มเริ่มค้นหาให้ชื่อว่า cmdSearch

     จากนั้นสร้าง properties ให้กับ DialogSearch ดังนี้

     ทำการผูก event ให้กับปุ่มเริ่มค้นหา คลิ๊กเมาท์ขวา --> Events --> Action --> actionPerformed เขียนโค๊ดดังนี้

      จากนั้นกำหนดปุ่มค้นหาในไฟล์ Main.java คลิ๊กเมาท์ขวา --> Events --> Action --> actionPerformed เขียนโค๊ดดังนี้

     ไปแก้ไขโค๊ดในส่วนของ formWindowOpened ในไฟล์ Main.java ซึ่งจะเป็นคำสั่ง sql ให้เป็นไปตามหน้า DialogSearch  ให้แก้ไขโค๊ดดังนี้

ผลรัน

     จากการเขียนโปรแกรมที่ผ่านมาเราจะเห็นว่าได้มีการนำ sql มาใช้เขียนเพื่อจัดการข้อมูล เช่น SELECT, DELETE, INSERT, UPDATE ซึ่งหากในการเขียนโปรแกรมมีหลายตารางมากขึ้นและตารางมีความสัมพันธ์กันก็จะมีการใช้ sql ที่หลากหลายมากขึ้น

     Dowload Code ได้ที่นี่