หัด Grails ใน 2 นาที

หลังจากติดตั้ง Grails แล้ว เราก็สามารถลองพัฒนาแอพพลิเคชั่นด้วย Grails ได้

ในบทความนี้ เราจะทดลองสร้างเว็บล็อก (weblog) กัน โดยบทความนี้จะเน้นการทำตามเป็นขั้น ๆ เพื่อให้เข้าใจการสร้างแอพพลิเคชั่นด้วย Grails ทั้งคำสั่งพื้นฐานที่จำเป็น และแนวคิด scaffolding ที่ช่วยย่นเวลาในการพัฒนา -- แล้วเราจะพบว่าภายใน 2 นาที เราก็สามารถเขียนเว็บบล็อกเองได้แล้ว!

โจทย์: สร้างเว็บล็อกที่ผู้ใช้สามารถเพิ่มความคิดเห็น (comment) ได้

ขั้นตอนโดยรวม 

• กำหนด domain class ที่ต้องการ
  
• กำหนดค่าต่างๆ ใน domain class พร้อมทั้งกำหนดความสัมพันธ์
• สร้าง กำหนดค่า และคำสั่งใน controller
• สร้าง และปรับแต่งหน้า view

เริ่มต้นสร้างแอพพลิเคชั่น 

ใน Grails เราสร้างแอพพลิเคชั่นได้โดยใช้คำสั่ง

$> grails create-app <ชื่อแอพพลิเคชั่น>

ในที่นี้ เราจะตั้งชื่อแอพพลิเคชั่นของเราว่า "blog" เราก็พิมพ์ว่า:

$> grails create-app blog 

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

ทดลองเรียกใช้งานแอพพลิเคชั่นที่ Grails สร้างให้นี้ โดยไปที่ไดเรกทอรีบ้านของแอพพลิเคชั่น ซึ่งในที่นี้ก็คือไดเรกทอรีที่ชื่อ "blog" นั่นเอง จากนั้นพิมพ์คำสั่ง

$grails run-app

และดูผลการทำงานได้ที่ http://localhost:8080/blog จะได้ผลดังรูป

สร้างโดเมนคลาส

จากนั้นเริ่มพัฒนาแอพพลิเคชั่น โดยการพิจารณาจาก domain class ก่อน (ตัว domain class นี้ ตามศัพท์ MVC ก็คือตัว "Model" นั่นเอง) ว่าจะให้มี attribute อะไรบ้าง โดยจากแผนภาพเราจะมี domain class อยู่ 2 ตัวหลักๆคือ Entry และ Comment และมีความสัมพันธ์กันแบบ One-to-Many โดยในแต่ละ Entry จะมี comment ได้หลายๆ comment หรือไม่มีเลย 

เริ่มสร้าง domain class ได้โดย เข้าไปใน root directory ของแอพพลิเคชั่นที่เราจะสร้าง ซึ่งก็คือ เข้าไปในไดเรกทอรีชื่อว่า blog ที่ Grails สร้างมาให้นั่นเอง จากนั้นใช้คำสั่งผ่านทาง CLI (Commanl Line Interface) ในการสร้าง domain class ชื่อว่า Entry

$> grails create-domain-class Entry

จากนั้นเราจะพบว่า grails ได้สร้างไฟล์ชื่อ Entry.groovy ขึ้นมาใน grails-app/domain/ ดังรูป

จากนั้น เปิดไฟล์ Entry.groovy ที่ grails สร้างให้ เพื่อกำหนด property ให้ Entry โดย property ที่จะกำหนดได้แก่ ชื่อของ entry ชื่อผู้เขียน เนื้อหาของ entry นั้น และวันที่เขียน โดยการพิมพ์คำสั่งต่อไปนี้ในไฟล์ Entry.groovy (ตัวหนาคือสิ่งที่เราพิมพ์เพิ่มเข้าไป)

class Entry {
    String title
    String authorName
    Date dateCreated

    String content
}

ต่อไปเราจะสร้าง Domain Class ของ Comment โดยทำแบบเดิมที่ผ่านมาคือ

$> grails create-domain-class Comment 

Comment.groovy จะถูกสร้างขึ้นมาที่ grails-app/domain/ จากนั้นเข้าไปกำหนด property ของ domain class ชื่อ comment ในไฟล์ Comment.groovy ซึ่ง property ที่จะกำหนดคือ ชื่อผู้ comment เนื้อหาของ comment และวันที่ที่ comment

class Comment {
    String authorName
    String content

    Date dateCreated 

}

แอพพลิเคชั่นทันใจด้วย Scaffold

ถึงตอนนี้ เราลองมาทดสอบดู ว่า domain class ที่เราสร้างสามารถใช้งาน และหน้าตาออกมาเป็นอย่างไร โดยการสร้าง controller เพื่อเชื่อมไปยัง Entry และ Comment โดย

$> grails create-controller Entry

ด้วยคำสั่งนี้ grails จะทำการสร้างไฟล์ EntryController.groovy ให้ที่ grails-app/controllers/ จากนั้น เข้าไปเพิ่มคำสั่งในไฟล์ EntryController.groovy ดังนี้

class EntryController {
    static scaffold = Entry
    //def index = { }
}

จากนั้นทดสอบโดยการ browse ไปที่ http://localhost:8080/blog เราจะเห็นชื่อ controller (เป็น link) ปรากฏอยู่ด้านล่าง ดังรูป

จากนั้นคลิกเข้าไปดู จะพบว่า grails ได้ generate ฟังก์ชั่นเบื้องต้น 4 อย่าง หรือ CRUD (Create, Read, Update, Delete) (สร้าง, อ่าน, แก้, ลบ) ให้กับ domain class Entry ให้แล้ว ดังรูป

จากแผนภาพข้างต้น เราจะเห็นได้ว่า Entry มีความสัมพันธ์กับ Comment แบบ One-to-Many ดังนั้น ต่อจากนี้เราจะมากำหนดความสัมพันธ์ ระหว่าง Entry กับ Comment ให้มีความสัมพันธ์แบบ One-to-Many โดยการเพิ่ม code ที่ ไฟล์ Entry.groovy ดังนี้

 class Entry {
    static hasMany = [comments : Comment]
    String title
    String authorName
    Date dateCreated

    String content
}    

และเพิ่ม code ที่ไฟล์ Comment.groovy ดังนี้

class Comment {
    static belongsTo = Entry

    Entry entry
    String authorName
    String content
    Date dateCreated
}

จากนั้นทดสอบผลโดยการ browse ไปที่ http://localhost:8080/blog/entry/list จากนั้นเลือก New Entry และลอง input ข้อมูลใน text field ต่างๆ จากนั้นกดปุ่ม create จากนั้นจะเป็นหน้าของการแสดง ข้อมูลที่เราได้ใส่ลงไป ตอนนี้เราจะสังเกตเห็นว่ามี attribute ชื่อ Comments ปรากฏมาด้วย และเมื่อเรากดปุ่ม Edit จะมี link Add Comment ให้เราเพิ่ม Comment ดังรูป

แต่เรายังไม่สามารถเพิ่ม comment ได้ และเราสามารถแก้ไขได้โดยสั่ง

$> grails create-controller Comment

จากนั้น grails จะสร้างไฟล์ Comment.groovy ที่ grails-app/controllers/ และแก้ไขไฟล์ข้างในดังนี้

class CommentController {
    static scaffold = Comment
    //def index = { }
}

ถึงตอนนี้เราสามารถเพิ่ม comment ได้แล้ว

ตรวจสอบการ Input ข้อมูล

หลังจากที่เรามีการ Input ข้อมูลเข้าแล้ว เราก็จะมีการตรวจสอบข้อมูล ว่ามีการ Input ในรูปแบบที่เราต้องการหรือไม่ ซึ่งใน Grails เราสามารถกำหนดรูปแบบของข้อมูลเข้าได้โดยเข้าไปแก้ไข code ดังนี้

      1 class Entry {
      2     static hasMany = [comments : Comment]
      3 
      4     String title
      5     String authorName
      6     Date dateCreated
      7     String content
      8
      9     static constraints = {
     10         title(blank:false)
     11         dateCreated()
     12         content(blank:false, maxSize:2000)
     13         authorName(blank:false)
     14     }
     15 }

การ Validate ข้อมูลก่อนที่เราจะทำการเก็บลงในฐานข้อมูล เราจะกำหนดไว้ใน Domain Class นั้นๆ ซึ่งจากตัวอย่างข้างบน หมายความว่าเรากำลังจะกำหนดการ Validate ของ Domain Class ชื่อ Entry นั่นเอง

เราสามารถกำหนดการ Validate โดยการสร้าง Closure ขึ้นมา และภายในเป็นการกำหนดในรูปแบบดังนี้

ตัวแปร(เงื่อนไข)

บรรทัดที่ 10 เป็นการตรวจสอบไม่ให้ title เป็นค่าว่าง บรรทัดที่ 12 เป็นการกำหนดค่า content ให้มีขนาดมากที่สุด 2000 ตัวอักษร และบรรทัดที 13 ทำเช่นเดียวกับบรรทัดที่ 10 คือไม่ให้เป็นค่าว่าง  แต่เราจะสังเกตได้ว่า ทำไม dateCreated เราเขียนไว้แต่ไม่ได้กำหนดเงื่อนไขอะไรให้ล่ะ? ก็เพราะว่า การเรียงกันของการกำหนดตรงนี้ จะส่งผมต่อการเรียงกันของ field ต่างๆในหน้าเวปนั่นเอง

จากนั้นทำเช่นเดียวกันในไฟล์ Comment.groovy ดังนี้

      1 class Comment {
      2     static belongsTo = Entry
      3
      4     Entry entry
      5     String authorName
      6     String content
      7     Date dateCreated
      8
      9     static constraints = {
     10         authorName(blank:false)
     11         content(blank:false, maxSize:2000)
     12         dateCreated()
     13     }      
     14  }

จากนั้น ถ้าเราอยากจะรู้ว่าเราจะกำหนดค่าอะไรได้บ้าง เราสามารถดูรายละเอียดของเงื่อนไขต่างๆ พร้อมตัวอย่างเพิ่มเติมได้จาก Domain Class Validation ได้เลย

ซึ่งเมื่อเราทดสอบดูผลจากการเพิ่ม code จะพบว่าผลเป็นไปดังที่เราได้เปลี่ยนแปลงไว้ ดังรูป

จากรูปจะเห็นได้ว่า field แต่ละ field ได้เรียงตามที่เราได้กำหนดไว้ใน constraints 

และเมื่อเราลองทดสอบ โดยการไม่ใส่่ค่าใน field Title จะพบว่าระบบได้แจ้งเตือนข้อผิดพลาดกลับมาดังรูป