#64 การแก้ไขข้อมูล

การแก้ไขข้อมูล ผู้ใช้จะต้องเลือกข้อมูลจาก Combo Box ให้รายชื่อหนังสือมาแสดงที่ Text Field ก่อน จากนั้นจึงแก้ไขข้อมูลตามต้องการ และกดที่ปุ่ม “แก้ไข” ซึ่งจะมีขั้นตอนการทำงานดังนี้

 

ขั้นตอนการทำงาน

1. ตรวจสอบว่า bookName เป็นค่าว่างหรือไม่

2. ถ้าเป็นค่าว่างให้แจ้งผู้ใช้ให้เลือกข้อมูลมาแก้ไข

3. ถ้าไม่ใช่ค่าว่าง ให้กำหนดค่าให้ส่วนของ Model

4. ทำการ update ข้อมูล พร้อมกับตรวจสอบผลลัพธ์การทำงาน

5. แจ้งผลลัพธ์การทำงานไปยังผู้ใช้

 

 

ขั้นตอนการเตรียมควบคุมปุ่ม “แก้ไข”

1. มาที่ไฟล์ BooksController.java ในเมธอด actionPerformed() มองมาที่คำสั่ง if ของการแก้ไขข้อมูล

TH-JAVA-JAVA-Connect-Database-64-1

ภาพที่ 64-1 แสดงโค้ดส่วนของการแก้ไขข้อมูล

 

2. ลบคำสั่งแสดงผลทิ้งไป เราจะเหลือโค้ด ดังภาพที่ 64-2

TH-JAVA-JAVA-Connect-Database-64-2

ภาพที่ 64-2 แสดงการเตรียมเขียนโค้ด

 

 

ขั้นตอนการตรวจสอบค่าว่าง

1. ใช้คำสั่ง if…else เพื่อตรวจสอบว่า bookName เป็นค่าว่างหรือไม่

TH-JAVA-JAVA-Connect-Database-64-3

ภาพที่ 64-3 แสดงการเพิ่มโค้ด

 

2. ในวงเล็บของ if ให้กลับสมการ โดยใส่เครื่องหมาย ! ไว้หน้าเงื่อนไข

TH-JAVA-JAVA-Connect-Database-64-4

ภาพที่ 64-4 แสดงการเพิ่มโค้ด

 

3. การกลับสมการจะทำให้เราอ่านโค้ดได้ว่า ถ้า bookName ไม่เท่ากับค่าว่าง คำสั่งการทำงานจะอยู่ในบล๊อก if แต่ถ้า bookName เป็นค่าว่าง คำสั่งการทำงานจะอยู่ในบล๊อก else

TH-JAVA-JAVA-Connect-Database-64-5

ภาพที่ 64-5 แสดงคอมเมนต์อธิบายโค้ด

 

 

การแจ้งผู้ใช้ให้เลือกรายชื่อหนังสือ

เราจะเขียนคำสั่งในบล๊อก else ก่อนนะคะ ถ้าผู้ใช้ยังไม่ได้เลือกรายชื่อหนังสือที่ต้องการแก้ไข เราก็แจ้งผู้ใช้ให้เลือกชื่อหนังสือผ่านทางกล่องข้อความดังนี้

 

1. ประกาศตัวแปรชนิด String ตั้งชื่อว่า msg (ย่อมาจาก message ที่แปลว่าข้อความ) เก็บข้อความว่า “กรุณาเลือกรายชื่อหนังสือที่ต้องการแก้ไข”

TH-JAVA-JAVA-Connect-Database-64-6

ภาพที่ 64-6 แสดงการเพิ่มโค้ด

 

2. เรียกใช้เมธอด alert() และส่ง msg กับเลข 2 ไปให้ (2 คือ WARNING_MESSAGE หรือแจ้งเตือน)

TH-JAVA-JAVA-Connect-Database-64-7

ภาพที่ 64-7 แสดงการเพิ่มโค้ด

 

3. กด F6 เพื่อ Run โปรเจ็กต์ จะปรากฏหน้าจอโปรแกรมขึ้นมา ลองกดที่ปุ่ม “แก้ไข” จะพบกล่องข้อความแจ้งเตือน

TH-JAVA-JAVA-Connect-Database-64-8

ภาพที่ 64-8 แสดงการทำงานของโปรแกรม

 

 

ขั้นตอนการกำหนดค่าให้ส่วนของModel

ถ้าผู้ใช้งานเลือกรายชื่อหนังสือที่ต้องการแก้ไขเข้ามาแล้ว เราจะนำค่าไปกำหนดให้กับส่วนของ Model ดังนี้

 

1. ในบล๊อก if ใช้ตัวแปร b เรียกใช้เมธอด setBooksId() พร้อมกับส่ง bookId ไปให้ เราใช้เลข id ในการระบุแถวที่ต้องการแก้ไข

TH-JAVA-JAVA-Connect-Database-64-9

ภาพที่ 64-9 แสดงการเพิ่มโค้ด

 

2. เรียกใช้เมธอด setBookName() พร้อมกับส่ง bookName ไปให้ เราจะแก้ไขข้อมูลตามค่า bookName ใหม่ที่ส่งเข้ามา

TH-JAVA-JAVA-Connect-Database-64-10

ภาพที่ 64-10 แสดงการเพิ่มโค้ด

 

 

ขั้นตอนการอัพเดทข้อมูลและแจ้งผลลัพธ์

1. ใช้ออบเจ็กต์ dao เรียกใช้เมธอด isEditBook(…) พร้อมกับส่งออบเต็กต์ b ไปให้

TH-JAVA-JAVA-Connect-Database-64-11

ภาพที่ 64-11 แสดงการเพิ่มโค้ด

 

2. ใช้คำสั่ง if else เพื่อตรวจสอบผลลัพธ์

TH-JAVA-JAVA-Connect-Database-64-12

ภาพที่ 64-12 แสดงการเพิ่มโค้ดของเงื่อนไข

 

3. ถ้าแก้ไขข้อมูลสำเร็จ โค้ดหลังบล๊อก if จะทำงาน ให้ประกาศตัวแปรชนิด String ขึ้นมา ตั้งชื่อว่า msg กำหนดค่าเริ่มต้นเป็น “แก้ไขข้อมูลสำเร็จ”

TH-JAVA-JAVA-Connect-Database-64-13

ภาพที่ 64-13 แสดงการเพิ่มโค้ดแจ้งผู้ใช้

 

4. เรียกใช้เมธอด alert() ส่ง msg และประเภทข้อมูลเป็น 1 ไปให้ (1 คือ INFORMATION_MESSAGE หรือ แจ้งข้อมูล)

TH-JAVA-JAVA-Connect-Database-64-14

ภาพที่ 64-14 แสดงการเพิ่มโค้ด

 

5. สั่งลบข้อมูลใน Text Field โดยการเรียกใช้เมธอด getTxtBookName() และเรียกใช้เมธอด setText() พร้อมกับส่งค่าว่างไปให้

TH-JAVA-JAVA-Connect-Database-64-15

ภาพที่ 64-15 แสดงการเพิ่มโค้ด

 

6. สุดท้าย เรียกใช้เมธอด refresh() เพื่ออัพเดทข้อมูลใน Combo Box เป็นข้อมูลล่าสุด

TH-JAVA-JAVA-Connect-Database-64-16

ภาพที่ 64-16 แสดงการเพิ่มโค้ด

 

7. ในบล๊อก else ถ้าแก้ไขข้อมูลไม่ได้ ให้ประกาศตัวแปรชนิด String ขึ้นมา ตั้งชื่อว่า msg กำหนดค่าเริ่มต้นเป็น “ไม่สามารถแก้ไขข้อมูลได้ \n กรุณาตรวจสอบฐานข้อมูล”

TH-JAVA-JAVA-Connect-Database-64-17

ภาพที่ 64-17 แสดงการเพิ่มโค้ดส่วนของ else

 

8. เรียกใช้เมธอด alert() และส่ง msg กับชนิดข้อความเป็น 0 (0 คือ ERROR_MESSAGE หรือ แจ้งข้อผิดพลาด)

TH-JAVA-JAVA-Connect-Database-64-18

ภาพที่ 64-18 แสดงการเพิ่มโค้ด alert

 

9. หลังจากนั้นใช้เมธอด System.exit() พร้อมกับส่งเลข 0 ไปให้ เพื่อให้โปรแกรมปิดตัวลง

TH-JAVA-JAVA-Connect-Database-64-19

ภาพที่ 64-19 แสดงการเพิ่มโค้ดเพื่อปิดโปรแกรม

 

 

สรุปโค้ด

โค้ดในส่วนของการควบคุมปุ่ม “แก้ไข” มีดังนี้

TH-JAVA-JAVA-Connect-Database-64-20

ภาพที่ 64-20 แสดงโค้ดทั้งหมดในส่วนของการแก้ไข

 

 

ขั้นตอนการทดสอบโปรแกรม

1. กด F6 เพื่อ Run โปรเจ็กต์ จะปรากฏหน้าจอโปรแกรมขึ้นมา ลองเลือกรายการหนังสือที่ต้องการแก้ไข

TH-JAVA-JAVA-Connect-Database-64-21

ภาพที่ 64-21 แสดงการทำงานของโปรแกรม

 

2. แก้ไขข้อมูลจาก “Java GUI” เป็น “การพัฒนาซอฟต์แวร์”

TH-JAVA-JAVA-Connect-Database-64-22

ภาพที่ 64-22 แสดงการแก้ไขข้อมูล

 

3. กดปุ่ม “แก้ไข” จะปรากฏหน้าจอแจ้งว่าไม่สามารถแก้ไขข้อมูลได้! เกิดอะไรขึ้น!

TH-JAVA-JAVA-Connect-Database-64-23

ภาพที่ 64-23 แสดงข้อผิดพลาดของโปรแกรม

 

4. กดปุ่ม OK แล้วโปรแกรมจะปิดตัวลงไป

TH-JAVA-JAVA-Connect-Database-64-24

ภาพที่ 64-24 แสดงการคลิกปุ่ม OK

 

 

วิเคราะห์ปัญหา

ในหัวข้อนี้ค่อนข้างสำคัญนะคะ เวลาเราเจอข้อผิดพลาด หรือเขียนโค้ดแล้วไม่ได้ผลลัพธ์ตามที่ต้องการ เราต้องลำดับความคิด ถึงเหตุการณ์ที่ผ่านมา ว่าข้อผิดพลาดมันน่าจะเกิดขึ้นที่จุดไหน เช่น

 

จากโปรเจ็กต์ที่ 1 – 4 เราทดสอบเมธอดการแก้ไขข้อมูลผ่านหมดแล้ว แน่นอนว่า เราคงไม่ไปไล่โค้ดตั้งแต่คลาส Database.java หรือตั้งแต่ส่วนของ DAO เพราะเมธอดทุกๆ เมธอดถูกทดสอบว่าใช้งานได้แล้ว 100%

 

นั่นหมายความว่าปัญหามันอยู่ที่ 2 จุดเท่านั้น

 

1. ส่วนของ View หรือหน้าจอแสดงผล

2. ส่วนของ Controller หรือคลาส BooksController ที่เรากำลังเขียนมันอยู่นี่แหละ

 

พิจารณาส่วนของ View เราดึงข้อมูลมาถูกต้องหรือเปล่า ?

 

เช็คข้อมูลในตารางดูซิ

TH-JAVA-JAVA-Connect-Database-64-25

ภาพที่ 64-25 แสดงรายการข้อมูลในตาราง

 

ข้อมูลในส่วนของ Model ที่ถูกต้องคือ

bookId ต้องมีค่าเป็น 1

bookName ก็คือค่าใหม่ที่เราจะแก้ไข

 

คำถามคือ: แล้วตอนนี้ออบเจ็กต์ b หรือส่วนของ Model เก็บข้อมูลอะไรเอาไว้ ?

 

ได้เวลาหาคำตอบ

งั้นก็สั่งมันแสดงผลออกมาดูที่ output กันดีกว่า โดยทำตามขั้นตอนดังนี้

 

1. มาที่ไฟล์ BooksController.java ในเมธอด actionPerformed(…) ส่วนของ if การแก้ไขข้อมูล เตรียมเขียนโค้ดแสดงข้อมูลในออบเจ็กต์ b

TH-JAVA-JAVA-Connect-Database-64-26

ภาพที่ 64-26 แสดงการเตรียมเขียนโค้ด

 

2. ใช้คำสั่ง System.out.println() เพื่อแสดงค่าออบเจ็กต์ b ออกมา (พอจะเห็นประโยชน์ของเมธอด toString() หรือยังคะ)

TH-JAVA-JAVA-Connect-Database-64-27

ภาพที่ 64-27 แสดงการเพิ่มโค้ดการแสดงผลที่ output

 

3. กด F6 สั่ง Run โปรเจ็กต์อีกครั้ง ลองเลือกที่รายการ “Java GUI” แก้ไขข้อมูลเป็น “การพัฒนาซอฟต์แวร์” และกดที่ปุ่ม “แก้ไข” จากนั้นมองมาที่ส่วนของ output

TH-JAVA-JAVA-Connect-Database-64-28

ภาพที่ 64-28 แสดงผลลัพธ์

 

4. เจอตัวปัญหาแล้วค่ะ ปรากฏว่า bookId ไม่ตรงกับข้อมูลในตาราง

TH-JAVA-JAVA-Connect-Database-64-29

ภาพที่ 64-29 แสดง id ที่ไม่ตรงกัน

 

5. มีข้อสังเกตุอีกว่า ผลลัพธ์ด้านบนของเรา bookId ก็มีค่าเป็น 1 ถูกต้องนี้น่า... แล้วตอนนำข้อมูลไปเซ็ตให้ส่วนของ Model กลายมาเป็น 0 ได้อย่างไร ?

TH-JAVA-JAVA-Connect-Database-64-30

ภาพที่ 64-30 แสดงการไล่โค้ด

 

6. กด OK ปิดหน้าจอโปรแกรมไปก่อน

 

ได้เวลาไล่โค้ด

ปัญหานี้เราต้องวนกลับมาในเรื่องพื้นฐานกันเลยค่ะ มาไล่ดูตัวแปร bookId กัน ว่ามันอยู่ที่ไหน? และมีการกำหนดค่ายังไงบ้าง ?

 

1. มาที่โปรแกรม NetBeans IDE กดคีย์ลัด Ctrl+F จะปรากฏช่องให้ค้นหาข้อมูลขึ้นมาบนส่วนของ output

TH-JAVA-JAVA-Connect-Database-64-31

ภาพที่ 64-31 แสดงหน้าจอ Find

 

2. พิมพ์ชื่อตัวแปร bookId จะเห็นว่าคำค้นถูกไฮไลท์เอาไว้

TH-JAVA-JAVA-Connect-Database-64-32

ภาพที่ 64-32 แสดงการค้นหา bookId

 

3. เราสามารถกด Previous หรือ Next เพื่อไล่ดูคำค้นได้

TH-JAVA-JAVA-Connect-Database-64-33

ภาพที่ 64-33 แสดงการใช้งาน Find

 

4. มาดูที่คำแรกกันค่ะ เราประกาศตัวแปร bookId เอาไว้ในเมธอด actionPerformed(…) กำหนดค่าเริ่มต้นให้เท่ากับ 0

TH-JAVA-JAVA-Connect-Database-64-34

ภาพที่ 64-34 แสดงการไล่โค้ด

 

5. ต่อมาเมื่อ Combo Box ถูกคลิก เราดึงค่า bookId มาแสดงผลได้อย่างถูกต้อง

TH-JAVA-JAVA-Connect-Database-64-35

ภาพที่ 64-35 แสดงการไล่โค้ด

 

6. พอมาที่ส่วนของโค้ดปุ่มแก้ไข เรานำค่า bookId มาเซ็ตให้ออบเจ็กต์ b ค่าที่ได้กลับเป็น 0

TH-JAVA-JAVA-Connect-Database-64-36

ภาพที่ 64-36 แสดงการไล่โค้ด

 

7. หมายความว่า ตัวแปร bookId ไม่รู้ว่าค่าของตัวเองได้ถูกกำหนดใหม่แล้ว ตอนที่ผู้ใช้งานเลือกข้อมูลที่ Combo Box

 

 

ทำความเข้าใจขอบเขตของตัวแปร

เรามาทบทวนความรู้เดิมกันหน่อยนะคะ กฏง่ายๆ 2 ข้อคือ

1. การที่เราเลือกตัวแปรที่เราประกาศเอาไว้ระดับคลาส เพราะเราตั้งใจจะให้ทุกๆ เมธอดเรียกใช้งานมันได้ เช่นตัวแปรเหล่านี้ อยู่ในคลาส แต่อยู่นอกเมธอด ดังภาพที่ 64-38

TH-JAVA-JAVA-Connect-Database-64-37

ภาพที่ 64-37 แสดงตัวแปรระดับคลาส

 

ในการเรียกใช้งานจะเห็นว่า เมธอด connectDB() และ refresh() ต่างก็เรียกใช้งานตัวแปรในระดับคลาสได้

TH-JAVA-JAVA-Connect-Database-64-38

ภาพที่ 64-38 แสดงเมธอดต่างๆ เรียกใช้ตัวแปรระดับคลาส

 

2. ตัวแปรที่เราประกาศเอาไว้ในเมธอด เราตั้งใจจะใช้งานแค่ในเมธอด เสร็จแล้วก็ไม่ได้ใช้งานต่อ หรือไม่ก็อาจจะคืนค่า (return) อะไรบางอย่างกลับไป หรือส่งค่าไปให้เมธอดอื่น ๆ ทำงานต่อไป เช่น

 

- ตัวแปร sql ถูกประกาศขึ้นมาในเมธอด และส่งไปให้เมธอด select() ใช้งาน

- ตัวแปร bList และ result ถูกประกาศขึ้นมาในเมธอด เพื่อรับค่าบางอย่าง และส่งค่าไปยังตำแหน่งที่เรียกใช้ผ่านทางคำสั่ง return ดังภาพที่ 64-40 เป็นต้น

 

TH-JAVA-JAVA-Connect-Database-64-39

ภาพที่ 64-39 แสดงตัวแปรภายในเมธอด

 

ตัวแปรที่ประกาศเอาไว้ในเมธอดจะถูกทำลายทันทีที่เมธอดทำงานเสร็จสิ้นลงไป

 

3. จะเห็นว่าตำแหน่งการประกาศตัวแปรนั่น เกิดขึ้นมาคนละวัตถุประสงค์ ถ้าเราอยากให้ตัวแปร bookId รับรู้การเปลี่ยนค่าเมื่อถูกคำสั่งใดๆ เรียกใช้แล้วละก็ เราต้องประกาศมันเอาไว้ในระดับคลาส ให้ทำการคอมเมนต์การประกาศตัวแปร bookId เอาไว้

TH-JAVA-JAVA-Connect-Database-64-40

ภาพที่ 64-40 แสดงการคอมเมนต์โค้ด

 

5. จากนั้นประกาศตัวแปร bookId ในระดับคลาสแทน (ไม่ต้องกำหนดค่าเริ่มต้น เพราะ int มีค่า default เป็น 0 อยู่แล้ว)

TH-JAVA-JAVA-Connect-Database-64-41

ภาพที่ 64-41 แสดงการประกาศตัวแปรระดับคลาส

 

6. กด F6 เพื่อ Run โปรเจ็กต์อีกครั้ง เลือกรายการแรก “Java GUI” และแก้ไขข้อมูลเป็น “การพัฒนาซอฟต์แวร์”

TH-JAVA-JAVA-Connect-Database-64-42

ภาพที่ 64-42 แสดงการทำงานของโปรแกรม

 

7. คลิกที่ปุ่ม “แก้ไข”

TH-JAVA-JAVA-Connect-Database-64-43

ภาพที่ 64-43 แสดงการคลิกปุ่ม แก้ไข

 

8. ปรากฏหน้าจอแจ้งผลการทำงาน คลิกปุ่ม “OK”

TH-JAVA-JAVA-Connect-Database-64-44

ภาพที่ 64-44 แสดงผลลัพธ์การทำงาน

 

9. คลิกดูรายการชื่อหนังสือ จะเห็นว่าตอนนี้สามารถแก้ไขข้อมูลได้แล้ว

TH-JAVA-JAVA-Connect-Database-64-45

ภาพที่ 64-45 แสดงผลลัพธ์การแก้ไขข้อมูล

ในตอนต่อไปเราจะทำการเขียนโค้ดเพื่อควบคุมปุ่ม “ลบ” กันค่ะ

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ