เนื้อหาใน 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 เพื่อใช้เชื่อมต่อฐานข้อมูล และเขียนโค๊ดดังนี้
4. สร้างไฟล์ TestConnect เพื่อทำการทดสอบการทำงานของ 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 ให้แก้ไขโค๊ดดังนี้
ผลรัน
ความสามารถของโปรแกรมที่เขียน
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 |
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 |
จากนั้นไปกำหนด 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 เขียนโค๊ดดังนี้
จากนั้นทำการใส่ 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 ได้ที่นี่
Dowload Code ได้ที่นี่