Basic JavaWeb ตอนที่ 2 Overview

จากตอนที่แล้วเราได้พูดคุยกันเอาไว้ว่าโปรเจ็กต์ Basic_JavaWeb ของเราจะสร้างขึ้นมาเพื่อจัดการเกี่ยวกับหนังสือ คำว่าจัดการในที่นี้ก็คือ เพิ่ม ลบ แก้ไข ฯลฯ ผ่านทางหน้าเว็บ

โดยพัฒนาในกรอบของ MVC แล้ว MVC คืออะไรล่ะ ? ตอนนี้ยังไม่ต้องสนใจรายละเอียดค่ะ เรามาปฏิบัติก่อนแล้วไปอ่านทฤษฎีทีหลังจะเข้าใจง่ายกว่า ตอนนี้รู้แค่ว่า…

M คือ Model เราจะได้ศึกษาเรียนรู้ในภาคที่ 2

V คือ View คือ ก็เป็นหน้าตาเว็บไซต์ที่เรามองเห็นนั้นแหละค่ะ เราจะได้เรียนรู้มันในภาคที่ 3

C คือ Controller ส่วนของการควบคุมการทำงานระหว่าง View และ Model จะควบคุมยังไงนั้นเราจะได้เรียนรู้ในภาคที่ 3 ค่ะ แล้วทำไม Controller กับ View ถึงต้องศึกษาพร้อมกันด้วยละ ? ก็ด้วยเหตุผลที่ว่า Controller จะเป็นผู้ตัดสินใจว่าจะเลือก View หน้าไหนให้มาแสดงในกรณีต่าง ๆ ในกรอบของ MVC นั้นไม่สามารถแยก View ออกจาก Controller ได้อย่างแท้จริง จึงทำให้เกิดเทคโนโลยีการแก้ปัญหาใหม่ที่ชื่อว่า MVVM ขึ้นมาแล้วเราจะได้เรียนรู้กันในโอกาสหน้าค่ะ

เราไปดูตัวอย่างหน้าเว็บของเราพร้อมกันดีกว่า แต่เดี๋ยวก่อน ลองทายซิว่าที่เรากำลังจะไปดูนี้คือส่วนไหนของ MVC ? (ให้เวลาคิด………) คงไม่มีใครตอบผิดนะคะ มันคือส่วนของ View ค่ะ (พึ่งจะบอกไปเมื่อกี้นี้เอง 555) View คือผลลัพธ์ของโค้ดมากมายที่เราเขียนขึ้นมา…

basic_javaweb_2_01

ภาพที่ 1 เมนู HOME

จากภาพที่ 1 คือหน้าแรกของโปรเจ็กต์เรา อยู่ในส่วนของเมนู HOME เมื่อเราเข้าสู่โปรเจ็กต์จะพบหน้านี้เป็นหน้าแรกเสมอ ฝั่งซ้ายมือจะเป็นป้ายโฆษณาที่หมุนเวียนเปลี่ยนภาพไปเรื่อย ๆ ตามระยะเวลาที่เรากำหนดเอาไว้
basic_javaweb_2_02

ภาพที่ 2 เมนู MY BOOK

ภาพที่ 2 ในส่วนของ เมนู MY BOOK หน้านี้จะแสดงรายการหนังสือทั้งหมดที่มี สามารถคลิกภาพหนังสือเพื่อเข้าไปดูรายละเอียดของหนังสือได้ดั่งภาพที่ 3 (ตัดภาพมาเฉพาะส่วนที่มีการเปลี่ยนแปลงเท่านั้น) และสามารถใช้คำค้น (keyword) ในการค้นหาหนังสือได้โดยแสดงผลการค้นหาในภาพที่ 4

basic_javaweb_2_03

ภาพที่ 3 เมนู MY BOOK -> คลิกที่ภาพหนังสือ

basic_javaweb_2_04

ภาพที่ 4 เมนู MY BOOK-> ค้นหาด้วยคำค้น “บริหาร”

basic_javaweb_2_05

ภาพที่ 5 เมนู ABOUT US

ภาพที่ 5 ในเมนู ABOUT US แสดงข้อมูลในการติดต่อ จากระบบหน้าบ้านหากสังเกตจะพบว่าเราเปลี่ยนข้อมูลเพียงที่เดียวเท่านั้นคือส่วนของ Content ในส่วนของ โลโก้ เมนูด้านบน ป้ายโฆษณา และส่วนล่างสุดของเว็บแสดงข้อมูลเดิม เรื่องนี้เราจะได้เรียนรู้ในเรื่องของการออกแบบ Template ในส่วนของ View และใช้ Controller เป็นผู้ส่งหน้าที่จะแสดงไปประกอบเข้ากับ Template ที่เราทำเอาไว้

คราวนี้มาดูระบบหลังบ้านกันบ้างนะคะ เมื่อเข้าสู่ระบบหลังบ้านเราจะพบหน้าจอดังภาพที่ 6

basic_javaweb_2_06

ภาพที่ 6 หน้าจอหลักของระบบหลังบ้าน (backoffice)

จากภาพที่ 6 เราจะพบว่าด้านบนและด้านล่างเหมือนกันกับระบบหน้าบ้านเลย ต่างก็แค่เปลี่ยนเมนูมาไว้ฝั่งซ้ายมือแทน โดยมีเพียงเมนูเดียวคือ Manage Book เมื่อคลิกที่ Manage Book จะปรากฏหน้าจอในการจัดการหนังสือดังภาพที่ 7

basic_javaweb_2_07

ภาพที่ 7 Backoffice -> Manage Book

ในส่วนของ Manage Book สามารถเพิ่มหนังสือได้ โดยการคลิกที่ปุ่มเพิ่ม จะปรากฏหน้าจอดังภาพที่ 8 หากต้องการลบหนังสือก็ทำการคลิกภาพกากบาทสีแดง จะปรากฏกล่องข้อความยืนยันการลบดังภาพที่ 9 และหากต้องการแก้ไขข้อมูลหนังสือก็คลิกที่รูปดินสอ แล้วจะปรากฏหน้าจอให้แก้ไขข้อมูลดังภาพที่ 10

basic_javaweb_2_08

ภาพที่ 8 Backoffice -> Manage Book -> เพิ่มหนังสือ

เมื่อเพิ่มหนังสือสำเร็จจะมีกล่องข้อความแจ้งบอกว่าบันทึกข้อมูลสำเร็จ

basic_javaweb_2_09

ภาพที่ 9 Backoffice -> Manage Book -> ลบหนังสือ

คลิกที่ OK เพื่อยืนยันการลบ หากคลิกที่ Cancel ข้อมูลจะไม่ถูกลบ

basic_javaweb_2_10

ภาพที่ 10 Backoffice -> Manage Book -> แก้ไขหนังสือ

เมื่อแก้ไขหนังสือสำเร็จจะมีกล่องข้อความแจ้งบอกว่าแก้ไขข้อมูลสำเร็จ

โปรเจ็กต์นี้ไม่มีอะไรซับซ้อนเลยนะคะถ้าเทียบกับระบบการทำงานจริง ๆ แต่ก็เหมาะสำหรับการเริ่มต้นค่ะ สิ่งเหล่านี้ทุกระบบต้องมี เริ่มต้นได้แค่นี้ก็ดีแล้วค่ะ ต่อไปจะสามารถศึกษาโปรเจ็กต์อื่น ๆ ได้ง่ายขึ้น ภาพทั้งหมดคือเบื้องหน้า อีกไม่นานเราจะได้เห็นเบื้องหลังค่ะ ในบทความต่อไปเราจะมาดูโครงสร้างของระบบกันนะคะ แล้วพบกันค่ะ ^_^


>>> เรียนรู้ MVC ด้วย โปรเจ็กต์ Basic JavaWeb

ภาคที่ 1 ภาพรวมของระบบ (Overview)

Basic JavaWeb ตอนที่ 1 Introduction
Basic JavaWeb ตอนที่ 2 Overview
Basic JavaWeb ตอนที่ 3 Structure

ภาคที่ 2 Model (ส่วนติดต่อกับข้อมูล)
Basic JavaWeb ตอนที่ 4 Connection Datebase
Basic JavaWeb ตอนที่ 5 Create Model
Basic JavaWeb ตอนที่ 6 Create DAO
Basic JavaWeb ตอนที่ 7 Method getAll()
Basic JavaWeb ตอนที่ 8 Method isInsert()
Basic JavaWeb ตอนที่ 9 Method isUpdate()
Basic JavaWeb ตอนที่ 10 Method isDelete()
Basic JavaWeb ตอนที่ 11 Method getById()
Basic JavaWeb ตอนที่ 12 Method getByKeyword()

ภาคที่ 3 Controller และView (ส่วนของการควบคุมการทำงานและการแสดงผล)

ออกแบบ Template
– HTML
– CSS
– JavaScript
– JSP (EL, JSTL)

เชื่อมต่อ Controller และ View

เชื่อมต่อ Model -> Controller -> View

สรุป


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

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

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