ตัวอย่างโปรเจ็กต์แบบ MVC ตอนที่ 1 (ภาพรวม)

หลังจากที่เราได้เขียนเนื้อหาเกี่ยวกับ GUI ในภาษา Java มาพอสมควรแล้ว ตอนนี้ก็ได้เวลาที่เราจะมาเรียนรู้การเขียนโปรแกรมแบบ MVC อย่างจริงจังกันแล้วค่ะ เราจะเริ่มต้นด้วยโครงสร้างของโปรเจ็กต์ดังนี้

โครงสร้างโปรเจ็กต์

เรากำลังจะเขียนโปรแกรมเกี่ยวกับการบันทึกข้อมูลผู้ติดต่อ (contacts) ของเรา ซึ่งคราวนี้จะทำการเชื่อมต่อกับฐานข้อมูลด้วย มีทั้งหมด 5 ไฟล์ ทำหน้าที่และใช้งานร่วมกันดังนี้

Java-Basic-ง่ายนิดเดียว-MVC-1-2-new

V = View: หน้าจอแสดงผล

ส่วนนี้เราคงจะคุ้นเคยในชื่อ Interface หรือ ส่วนต่อประสานผู้ใช้ หน้าตาแบบนี้

Java-Basic-ง่ายนิดเดียว-MVC-1-3

หน้าที่ของมันคือรับข้อมูลจากผู้ใช้เข้ามา เมื่อผู้ใช้กดปุ่มใด ๆ มันก็จะรู้ เหตุการณ์นั้น ๆ จะถูกดึงไปให้ Controller เพื่อที่ Controller จะได้ทำงานตามคำสั่งของปุ่มนั้น ๆ ต่อไป

 

S = Service: ไฟล์บริการต่าง ๆ

ในที่นี้เราจะสร้างไฟล์ให้บริการเกี่ยวกับการจัดการ JFrame หรือ View ซึ่งก็คือหน้าจอแสดงผลเพิ่มเติม คือจัดให้แสดงผลตรงกลางหน้าจอ และช่วยแสดงข้อความ Dialog ต่าง ๆ เช่น

Java-Basic-ง่ายนิดเดียว-MVC-1-4

จะแสดงผลในกรณีที่ผู้ใช้กรอกข้อมูลไม่ครบถ้วน แล้วกดที่ปุ่ม “เพิ่ม”

 

DB = Database: ติดต่อฐานข้อมูล

ทำหน้าที่เชื่อมต่อฐานข้อมูล รวมถึงการประมวลผลคำส่ง SQL ต่าง ๆ เช่น การเพิ่มข้อมูล (INSERT), ลบข้อมูล (DELETE), แก้ไข (UPDATE) และดึงข้อมูลมาแสดงผล (SELECT) เป็นต้น

 

M = Model: ออบเจ็กต์ของข้อมูล

ในกรณีที่เรากรอกข้อมูลจากหน้า View ข้อมูลจะถูก Controller ดึงมากำหนดค่าให้ออบเจ็กต์ของ Model ซึ่งถูกออกแบบมาตามรูปแบบข้อมูลในหน้าจอนั้น ๆ ข้อมูลที่กระจัดกระจายอยู่ในตัวแปรจะถูกเก็บลงใน ออบเจ็กต์ Model และรอถูกส่งไปใช้งานในขั้นตอนต่อไป

 

C = Controller: ส่วนของการควบคุม

เป็นส่วนที่ขาดไม่ได้เลย มันทำหน้าที่ควบคุมทุก ๆ ไฟล์ให้ทำงานร่วมกันจนได้ผลลัพธ์กลับมาในที่สุด

 

บางคนคงเริ่มจะสงสัยแล้วว่า… เราเขียนโปรแกรมแบบ MVC ไม่ใช่เหรอ ? แล้ว DB กับ S มันมาจากไหน ?

คำตอบคือ กระบวนการแยกไฟล์ตรงนี้เกิดจากขั้นตอนในการสร้าง Package ค่ะ ประโยชน์ของการสร้าง Package คือการจัดไฟล์ต่าง ๆ ให้เป็นระเบียบ เป็นหมวดหมู่ ไฟล์ไหนประเภทเดียวกัน ทำงานคล้าย ๆ กันก็จะได้อยู่ด้วยกัน เวลาเรียกใช้งานเราเองก็จะได้ไม่สับสน

 

คราวนี้ DB คือ Database ทำหน้าที่เชื่อมต่อฐานข้อมูล มันจะไปอยู่กับ M ได้มั้ย ? ไม่น่าจะได้ แล้วให้ไปอยู่กับ C ได้รึเปล่า ? ก็ไม่ได้อีกนั่นแหละ แล้ว V ล่ะ? ยิ่งไม่ได้ใหญ่เลย Ok… สรุป งั่นแยกมันออกมาอีก Package นึ่งเลยละกัน

 

แล้ว S ล่ะ ? ทำหน้าที่ให้บริการไฟล์อื่น ๆ มันก็ไม่ใช่ทั้ง M, V หรือ C อีกนั่นแหละ สรุป ก็ต้องสร้าง Package ใหม่ให้มันอยู่เช่นกัน

 

เมื่อไหร่ที่เรามีประสบการณ์การเขียนโปรแกรมมากขึ้น สัญชาตญาณจะบอกเราเองว่าจะแก้ไขปัญหาอย่างไร ซึ่งสิ่งเหล่านี้เบื้องหลังมันเกิดจากการ Review โค้ดที่เราเคยเขียน ๆ ไป แล้ววันหนึ่งรู้สึกว่า “เราน่าจะเขียนได้ดีกว่านี้นะ” หลักการเขียนโปรแกรมแบบ OOP คือเราต้องลดความซ้ำซ้อนของเโค้ด และมองโปรแกรมเดิม ๆ ที่เขียนไปแล้วเพื่อนำมาใช้ซ้ำ หรือเขียนเพิ่มอีกนิดหน่อยก็ใช้งานได้แล้ว เราจึงต้องทบทวนสิ่งที่เราเขียนไปแล้วอยู่เสมอ ^^

 

เราจะทำอะไรกัน ?

มาดูหน้าตาโปรแกรมของเรากันค่ะ

Java-Basic-ง่ายนิดเดียว-MVC-1-3

 

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

Java-Basic-ง่ายนิดเดียว-MVC-1-4

 

เมื่อกดปุ่ม “OK” และกลับไปกรอกข้อมูลให้ครบ ก็จะสามารถบันทึกข้อมูลได้

Java-Basic-ง่ายนิดเดียว-MVC-1-6

 

หลังจากบันทึกข้อมูล รายการข้อมูลที่ถูกบันทึกลงตารางในฐานข้อมูลแล้ว จะถูกลบออกจากช่องที่กรอกทันที เพื่อรอให้ผู้ใช้กรอกข้อมูลอื่น ๆ ต่อไป ซึ่งการทำงานนี้เป็นกระบวนการเดียวกันกับตอนที่ผู้ใช้กดปุ่ม “รีเซ็ต”

 

สรุป

ตอนนี้เราก็ทำความเข้าใจเบื้องต้นของระบบ MVC ระบบแรกของเราไปแล้วนะคะ จะเห็นว่าเรื่อง MVC ไม่ใช่เรื่องยากเลย ขอแค่เข้าใจพื้นฐานมันเท่านั้น ต่อไปการประยุกต์ใช้ก็กลายเป็นเรื่องง่ายแล้ว ในตอนต่อไป เราจะมาดูในเรื่องการออกแบบตารางในฐานข้อมูล และการเชื่อมต่อฐานข้อมูลกันค่ะ แล้วพบกันนะคะ 🙂

 


เรื่องที่เกี่ยวข้อง

MVC ตอนที่ 1 การดึงปุ่ม JButton มาทำงานที่ Controller

MVC ตอนที่ 2 การดึง JTextField มาทำงานที่ Controller

ตัวอย่างโปรเจ็กต์: รายชื่อผู้ติดต่อ

ตอนที่ 1 (ภาพรวม)

ตอนที่ 2 (ฐานข้อมูล)

ตอนที่ 3 (Model)

ตอนที่ 4 (View)

ตอนที่ 5 (Controller & Service)

ตอนที่ 6 (ทดสอบโปรแกรม)

ตอนที่ 7 (DAO)


 

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

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

|:- เราเชื่อมั่นว่าการเสียสละและการแบ่งปันจะทำให้โลกใบนี้สวยงามมากขึ้น ทุกๆ จุดเริ่มต้นของการเรียนรู้ นำไปสู่การเรียนรู้ถัดไป เว็บไซต์แห่งนี้ขอเป็นส่วนหนึ่งของการแบ่งปันความรู้ที่ไม่มีที่สิ้นสุด มาร่วมกันผลักดันโลกของเราให้หมุนไปพร้อมกับพลังแห่งความรักด้วยกันนะคะ :) >>> |:- About Me! -:|