การสร้าง login form โดยใช้ Grails อย่างง่ายๆ ไม่เน้นอธิบายถึงที่มาที่ไป และไม่เน้นอะไรที่ซับซ้อน แต่เน้นให้ทำได้ ให้เห็นภาพในเบื้องต้น และให้มีกำลังใจในการเริ่มต้นกับ Grails ต่อไป

1. Grails login/logout
Simple
tutorial
http://khomkrit.wordpress.com

2. Part I
สราง View

3. เริ่มตน
สรางโปรเจคใหม
> grails create-app simple-login
สราง controller ชื่อ user สำหรับจัดการเรื่องของ
การ login และ logout
> grails create-controller user

4. เริ่มตน
สรางไฟลชื่อ “index.gsp” ไว∙ี่
grails-app/views/user/ Directory

5. สรางหนา Login
แกไขไฟล “index.gsp” ∙ี่เราสรางไวดังนี้

6. สรางหนา Login
แกไขไฟล “index.gsp” ∙ี่เราสรางไวดังนี้
เพิ่ม style
สราง form สำหรับกรอก
username และ password

7. สรางหนา Login
สราง form โดยใช <g:form> แ∙็ก

8. สรางหนา Login
ถาไมอยากใช <g:form> แ∙็ก เราก็สามารถใช HTML
form ธรรมาดาๆได เพราะสุด∙ายแลว Grails ก็จะ
สราง HTML form จาก <g:form> ใหเราอยูดี
<g:form> แ∙็ก บอกอะไร∙ี่มีความหมายชัดเจนกวา เชน
บอกวา action ∙ี่จะรับ request ชื่อวาอะไร
<g:form action=”login”/>

9. สรางหนา Login
<g:form action=”login”/>
สง request ไป∙ี่ action ชื่อ “login”
แลวสงไป∙ี่ controller ไหนละ? ถาเราไมกำหนดชื่อ
controller Grails จะสราง form ∙ี่สง request ไป
∙ี่ controller ∙ี่สอดคลองกับ∙ี่อยูของไฟลให
ตอนนี้ index.gsp อยูใน /grails-app/user/
directory ดังนั้นมันจะสง request ไป∙ี่ user
controller

10. สรางหนา Login
<g:form controller=”user” action=”login”/>
อยางไรก็ตาม เราก็ยังกำหนดชื่อ controller
∙ี่เราจะสง request ไปเองไดเชนกัน

11. เริ่ม Grails Application โดยใชคำสั่งนี้
> grails run-app
เบราซไป∙ี่ http://localhost:8080/simple-login/user

12. ตอนนี้เรายังไมสามารถ∙ำอะไรกับ form ได และ
เมื่อกดปุม Login ก็จะโดน Grails ดากลับมา
เพราะวา action ∙ี่เรากำหนดไวกอนหนายังไมได
ถูกสรางขึ้นมา

13. action ไหนละ∙ี่เรากำหนดไวกอนหนานี้?
กลับไปดู∙ี่ไฟลชื่อ login.gsp เราจะเห็น action ∙ี่เรา
กำหนดไว มันชื่อวา “login”
action ชื่อวา “login” จะรับ
request จาก form นี้

14. Part II
สราง Action

15. Tip
เราสามารถ แกไข, เชนแกไข domain และ
แกไข controller ได, โดยไมจำเปนตอง
restart web server ใหม
แตบาง∙ีก็ตองการการ restart web server
เชน การสราง controller และ action หรือ
แมแตการแกไข domain ใหม

16. สราง action
ปกติ∙ุกๆ action จะถูกสรางไวใน controller ใน
กรณีนี้เราตองการสง request ไป∙ี่ controller ชื่อ
user และ action ชื่อ name
ดังนั้นเปดไฟลชื่อ UserController.groovy เพื่อสราง
action ชื่อวา login

17. แกไข controller
ปกติ∙ุกๆ controller จะอยูใน
/grails-app/controllers/

18. แกไข controller
เปดไฟล UserController.groovy
แลวสราง action ชื่อ “login”

19. แกไข controller
ไป∙ี่ http://localhost:8080/simple-login/user/ อีกครั้ง
แลว∙ดลอง login ดู

20. แกไข controller
พบวา Grails ตอบ 404 กลับมา! ∙ำไม?

21. โดยปริยายแลว เมื่อเราเรียก action ใดๆก็ตาม Grails
จะพยายามหาไฟล∙ี่มีชื่อสอดคลองกับ action
ในกรณีนี้เราสง request ไป∙ี่ http://localhost:8080/
simple-login/user/login, หมายความวาเราพยายาม
เรียก action ชื่อ “login” ∙ี่อยูใน user controller
ดังนั้น Grails จะพยายามหาไฟลชื่อ “login.gsp” ใน /
grails-app/views/user/ เพื่อ∙ี่จะ render กลับไป
แตตอนนี้เรายังไมมีไฟลนี้!

22. แกไข controller
เรายังไมมีไฟลชื่อ login.gsp ∙ำให Grails ไมรูวาจะ
render อะไรกลับไปให client ดี
เราสามารถใช method ชื่อ “render” เพื่อบอก
Grails วาจะให render อะไรกลับไปให client

23. แกไข controller
ไป∙ี่ http://localhost:8080/simple-login/user/ อีกครั้ง
จากนั้นลอง login ดู

24. แกไข controller
Grails ไมบนกลับมาแลว :)

25. แกไข controller
เราสามารถเพิ่ม logic สำหรับจัดการการ login ได
ตรงนี้ เชนการเก็บสถานะการ login ไวใน session
และสงขอความอะไรบางอยางกลับไปให client
กำหนด logic
บางอยางไวตรงนี้

26. Part III
เพิ่ม logic สำหรับจัดการ
การ login

27. ตรวจสอบการ login
เพิ่มการตรวจสอบความถูกตองของการ login อยางงายๆ
parameter ∙ุกตัว∙ี่ถูกสงมาจะถูกเก็บไวในตัวแปรชื่อ
“params” ดังนั้น code ก็นาจะออกมาหนาตาลักษณะนี้

28. ตรวจสอบการ login
ลอง∙ดสอบโดยการพยายาม login อีกครั้ง
ถา username เปน “admin” และ password
คือ “pass” เราก็จะสามารถ login ได แตถา
เปนอยางอื่นก็จะ login ไมได

29. ตรวจสอบการ login
ตอไป หลังจาก∙ี่ user login เสร็จแลว Grails จะ
redirect user ไป∙ี่หนา login อีกครั้ง (/user/
index) และบอกอะไรบางอยางโดยใชตัวแปร “flash”
เกี่ยวกับ flash โดยละเอียดนั้นจะไมพูดใน แตก็สังเกต
ไดวา flash มันจะนำมาใชในลักษณะไหน ในหนาตอๆ
ไป

30. การใช flash
ใชตัวแปร flash เก็บคาอะไรบางอยางไวแบบนี้ จาก
นั้น redirect ไป∙ี่หนาสำหรับ login (index.gsp)
อีกครั้ง

31. การใช flash
การ redirect ไป∙ี่ action ชื่อ “index” โดยปกติ
Grails จะคนหาไฟลชื่อ “index.gsp” ใน grails-app/
views/user/ directory.
flash message ∙ี่เรากำหนดไวก็จะถูกสงไปให action
ชื่อ “index” และไฟล index.gsp ใหสามารถเขาถึงและ
นำมาใชได

32. การใช flash
เพิ่ม ${flash.message} ในหนา login ถามัน
มีคาอะไรบางอยาง คานั้นจะถูกแสดงออกมา
สำหรับการแสดงคาในตัวแปรเราสามารถเขียน
ไดในลักษณะนี้ ${ชื่อตัวแปร}

33. การใช flash
∙ดสอบโดยพยายาม login อีกครั้ง
หลังจากพยายาม login แลว เราจะเห็น flash
message แสดงออกมา

34. เก็บสถานะ
เราสามารถใช “session” ในการเก็บขอมูล
เกี่ยวกับการ login ไดในลักษณะนี้

35. จัดการการ Logout
สราง action ใหมชื่อ “logout” สำหรับจัดการการ logout
เราอาจตองเคลียรคาใน session.user เมื่อมีการ
logout

36. แกไขหนา Loginuser login
เพิ่ม logic มากกวานี้โดยตรวจสอบวาถา
แลวจะไมเสดงฟอรมสำหรับ login อีก และใหแสดง link
สำหรับ logout แ∙น
ใช <g:if>, <g:else> แ∙็กสำหรับตรวจสอบบางอยาง

37. แกไขหนา login
การใช <g:if> แ∙็ก
<g:if test=”${boolean-logic}”>
ตัวอยาง:
<g:if test=”${5 == 6}”>

38. แกไขหนา login
เราสามารถใช <g:link> แ∙็กเพื่อสราง link
สำหรับการ logout

39. แกไขหนา login
แนนอนวาเราสามารถใช HTML แ∙็ก <a href=””>
แ∙นได แตแนะนำใหใช <g:link> ดวยเหตุผลเดียวกับ
∙ี่วา∙ำไมตองใช <g:form>
<g:link controller=”” action=””>
ถาเราไมกำหนดชื่อของ controller Grails จะคนหา
controller เชนเดียวกับพฤติกรรมตอนใช <g:form>
<g:link action=””>

40. Check Point!
ตอนนี้เราสรางหนาสำหรับ login ไดแลว
ถา login สำหร็จเราจะเห็น link สำหรับ logout
และ form สำหรับ login จะหายไป
ถา login ไมสำเร็จ form สำหรับ login ก็ยังอยู
หลังจากพยายาม login แลว เราจะเห็น flash
message เสมอ

41. เพิ่มอะไรบางอยาง
โปรเจค∙ี่สรางดวย Grails จะมีไฟล CSS มา
ใหใช และถูก include ใชโดยอัตโนมัติ
ลองใช CSS∙ี่มากับ Grails
class=”message”

42. เพิ่มอะไรบางอยาง
ดูดีขึ้นกวาเดิม สำหรับการแสดงคาของ
flash.message

43. เพิ่มอะไรบางอยาง
สำหรับ style แบบอื่นๆ สามารถดูเพิ่มได∙ี่ /web-app/
css/
resource อื่นๆ∙ี่มีอยูแลวก็เชนกัน สามารถดูเพิ่ม
ได∙ี่ /web-app/images/ และ web-app/js/

44. หัวขอตอไป
Layout และ template
Filter
Tag Library
Service
URL Mapping

45. Thank You
Font: 2005_iannnnnGMO - http://www.f0nt.com