Java Web MVC ตอนที่ 5 Controller และ View

Controller เป็นส่วนที่ทำหน้าที่คอยควบคุมการทำงานและรับคำสั่งจากผู้ใช้ว่าจะให้ทำอะไร ตอนนี้เรากำลังจะนำข้อมูลจากฐานข้อมูลมาแสดง ผู้ใช้จะต้องเป็นคนสั่งให้ Controller ทำงาน เพราะฉะนั้นเราไปที่หน้า index.jsp ก่อนและพิมพ์โค้ดลงไปดังนี้…

java-mvc-5-01

ภาพที่ 1 index.jsp

หลังจากนั้นเราก็ไปสร้าง Controller ซึ่งเราใช้ Servlet ในการทำหน้าที่เป็น Controller คลิกขวาที่ web.mvc.controller และเลือก New -> Servlet…  ตั้งชื่อว่า ShowProduct และคลิกปุ่ม Next จะปรากฏดังภาพที่ 2

java-mvc-5-02

ภาพที่ 2 สร้าง Servlet

เมื่อได้ Servlet ชื่อ ShowProduct.java ขึ้นมาแล้ว Netbeans  จะสร้างโค้ดต่าง ๆ ให้เรามากมาย เราไปดูที่เมธอด processRequest() จะมีโค้ดต่าง ๆ ดังนี้

java-mvc-5-03

ภาพที่ 3 ShowProduct.java | เมธอด processRequest()

ทดสอบลอง Run Project ดูนะคะ คลิกขวาที่ชื่อโปรเจ็กต์ และเลือก Run จะปรากฏดังภาพที่ 4 ลองคลิกที่ลิงค์

java-mvc-5-04

ภาพที่ 4 คลิกลิงค์ เพื่อเรียกให้ Controller ทำงาน (ShowProduct)

มาถึงตรงนี้เราก็ทราบแล้วนะคะว่าจะทำให้ Controller ทำงานได้อย่างไร ยังจำคำสั่งใน index.jsp ได้มั้ยคะ

<a href=”ShowProduct”>ดูสินค้าทั้งหมด</a>   เมื่อลิงค์ถูกคลิกก็จะเรียกใช้ Servlet ตามชื่อที่เราเขียนเอาไว้ทันที

คราวนี้เราจะนำข้อมูลจากฐานข้อมูลมาแสดง ที่ส่วนของ View ได้อย่างไร?  ไม่ต้องกังวลค่ะ ตอนนี้เราเรียก Servlet ให้ทำงานได้แล้ว ต่อไปเราอยากให้มันทำอะไรก็เพียงแค่เขียนโค้ดลงไปแค่นั้นนั้นเอง กลับไปดูภาพที่ 3 อีกครั้ง แล้วลบโค้ดที่อยู่ในกรอบสีแดงทิ้งไป แล้วเขียนโค้ดเหล่านี้ลงไปแทน

java-mvc-5-05

ภาพที่ 5 ShowProduct | เมธอด processRequest()

จากภาพที่ 5 เราสร้างออปเจ็กต์ dao แล้วเรียกใช้เมธอด findAll() เพื่อดึงข้อมูลจากตาราง Product ขึ้นมาเก็บไว้ในตัวแปร pList จำคำสั่งเหล่านี้ได้มั้ยคะ ? เราเคยสร้างเมธอด main() ขึ้นมาแล้วเขียนมันเพื่อทดสอบว่าสามารถดึงข้อมูลขึ้นมาได้จริงหรือไม่ ตอนนี้เราใช้คำสั่งเดิมแต่เปลี่ยมาเขียนที่เมธอด processRequest() และไม่ได้เรียกใช้มันด้วยเมธอด main() แต่มันจะถูกเรียกให้ทำงานจากหน้า View โดยการที่ผู้ใช้คลิกที่ลิงค์ที่มีชื่อของ Servlet นั้น ๆ

เมื่อดึงข้อมูลขึ้นมาได้แล้วเราจะส่งมันไปแสดงที่ไฟล์ manage_product.jsp ที่อยู่ในโฟล์เดอร์ view ด้วยคำสั่งเหล่านี้

 เราไปสร้างไฟล์ manage_product.jsp เอาไว้ในโฟล์เดอร์ view โดยยังไม่ต้องเขียนอะไรมากแค่ให้รู้ว่าเราสามารถคลิกที่ลิงค์ให้ Servlet ทำงาน และส่งไปที่หน้า manage_product.jsp ได้ก็พอ ดังภาพที่ 6

java-mvc-5-06

ภาพที่ 6 view/ manage_product.jsp

ลองกลับไปหน้าแรกของโปรเจ็กต์ Refresh หน้าใหม่แล้วคลิกที่ลิงค์อีกครั้ง จะปรากฏดังภาพที่  7

java-mvc-5-07

ภาพที่ 7  Servlet เรียก view/ manage_product.jsp

ตอนนี้เราส่งข้อมูลที่ดึงมาจากฐานข้อมูล มาถึงหน้า manage_product.jsp แล้วที่มันไม่แสดงผลเพราะเรายังไม่ได้เขียนโค้ดในไฟล์ manage_product.jsp เพื่อให้นำข้อมูลที่ส่งมาแล้วมาแสดงผล ให้เราเขียนโค้ดต่อไปนี้ลงไป

เมื่อกลับไป Refresh หรือคลิกลิงค์ใหม่อีกครั้งจะปรากฏผลลัพธ์ดังภาพที่  8

java-mvc-5-08

ตอนนี้เราก็ได้เห็นการทำงานของ MCV แล้วนะคะ เดี๋ยวเราไปดูสรุปคราว ๆ และประโยชน์ของ MVC ในบทความต่อไปนะคะ


>>> เรียนรู้ MVC ด้วยโปรเจกต์ Java WebMVC

Java Web MVC ตอนที่ 1 เริ่มต้น
Java Web MVC ตอนที่ 2 โครงสร้าง
Java Web MVC ตอนที่ 3 Model
Java Web MVC ตอนที่ 4 DAO
Java Web MVC ตอนที่ 5 Controller และ View
Java Web MVC ตอนที่ 6 ประโยชน์ของ MVC
Java Web MVC ตอนที่ 7 เพิ่มข้อมูล
Java Web MVC ตอนที่ 8 แก้ไขข้อมูล
Java Web MVC ตอนที่ 9 ลบข้อมูล
Java Web MVC ตอนที่ 10 สรุป


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

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

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

1 thought to “Java Web MVC ตอนที่ 5 Controller และ View”

  1. ไม่แสดงข้อมูลในตารางอ่าค่ะ

Comments are closed.