Simple Login Th

2,018 views

Published on

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

Published in: Self Improvement
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,018
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
55
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Simple Login Th

  1. 1. Grails login/logout Simple tutorial http://khomkrit.wordpress.com
  2. 2. Part I สราง View
  3. 3. เริ่มตน สรางโปรเจคใหม > grails create-app simple-login สราง controller ชื่อ user สำหรับจัดการเรื่องของ การ login และ logout > grails create-controller user
  4. 4. เริ่มตน สรางไฟลชื่อ “index.gsp” ไว∙ี่ grails-app/views/user/ Directory
  5. 5. สรางหนา Login แกไขไฟล “index.gsp” ∙ี่เราสรางไวดังนี้
  6. 6. สรางหนา Login แกไขไฟล “index.gsp” ∙ี่เราสรางไวดังนี้ เพิ่ม style สราง form สำหรับกรอก username และ password
  7. 7. สรางหนา Login สราง form โดยใช <g:form> แ∙็ก
  8. 8. สรางหนา Login ถาไมอยากใช <g:form> แ∙็ก เราก็สามารถใช HTML form ธรรมาดาๆได เพราะสุด∙ายแลว Grails ก็จะ สราง HTML form จาก <g:form> ใหเราอยูดี <g:form> แ∙็ก บอกอะไร∙ี่มีความหมายชัดเจนกวา เชน บอกวา action ∙ี่จะรับ request ชื่อวาอะไร <g:form action=”login”/>
  9. 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. 10. สรางหนา Login <g:form controller=”user” action=”login”/> อยางไรก็ตาม เราก็ยังกำหนดชื่อ controller ∙ี่เราจะสง request ไปเองไดเชนกัน
  11. 11. เริ่ม Grails Application โดยใชคำสั่งนี้ > grails run-app เบราซไป∙ี่ http://localhost:8080/simple-login/user
  12. 12. ตอนนี้เรายังไมสามารถ∙ำอะไรกับ form ได และ เมื่อกดปุม Login ก็จะโดน Grails ดากลับมา เพราะวา action ∙ี่เรากำหนดไวกอนหนายังไมได ถูกสรางขึ้นมา
  13. 13. action ไหนละ∙ี่เรากำหนดไวกอนหนานี้? กลับไปดู∙ี่ไฟลชื่อ login.gsp เราจะเห็น action ∙ี่เรา กำหนดไว มันชื่อวา “login” action ชื่อวา “login” จะรับ request จาก form นี้
  14. 14. Part II สราง Action
  15. 15. Tip เราสามารถ แกไข, เชนแกไข domain และ แกไข controller ได, โดยไมจำเปนตอง restart web server ใหม แตบาง∙ีก็ตองการการ restart web server เชน การสราง controller และ action หรือ แมแตการแกไข domain ใหม
  16. 16. สราง action ปกติ∙ุกๆ action จะถูกสรางไวใน controller ใน กรณีนี้เราตองการสง request ไป∙ี่ controller ชื่อ user และ action ชื่อ name ดังนั้นเปดไฟลชื่อ UserController.groovy เพื่อสราง action ชื่อวา login
  17. 17. แกไข controller ปกติ∙ุกๆ controller จะอยูใน /grails-app/controllers/
  18. 18. แกไข controller เปดไฟล UserController.groovy แลวสราง action ชื่อ “login”
  19. 19. แกไข controller ไป∙ี่ http://localhost:8080/simple-login/user/ อีกครั้ง แลว∙ดลอง login ดู
  20. 20. แกไข controller พบวา Grails ตอบ 404 กลับมา! ∙ำไม?
  21. 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. 22. แกไข controller เรายังไมมีไฟลชื่อ login.gsp ∙ำให Grails ไมรูวาจะ render อะไรกลับไปให client ดี เราสามารถใช method ชื่อ “render” เพื่อบอก Grails วาจะให render อะไรกลับไปให client
  23. 23. แกไข controller ไป∙ี่ http://localhost:8080/simple-login/user/ อีกครั้ง จากนั้นลอง login ดู
  24. 24. แกไข controller Grails ไมบนกลับมาแลว :)
  25. 25. แกไข controller เราสามารถเพิ่ม logic สำหรับจัดการการ login ได ตรงนี้ เชนการเก็บสถานะการ login ไวใน session และสงขอความอะไรบางอยางกลับไปให client กำหนด logic บางอยางไวตรงนี้
  26. 26. Part III เพิ่ม logic สำหรับจัดการ การ login
  27. 27. ตรวจสอบการ login เพิ่มการตรวจสอบความถูกตองของการ login อยางงายๆ parameter ∙ุกตัว∙ี่ถูกสงมาจะถูกเก็บไวในตัวแปรชื่อ “params” ดังนั้น code ก็นาจะออกมาหนาตาลักษณะนี้
  28. 28. ตรวจสอบการ login ลอง∙ดสอบโดยการพยายาม login อีกครั้ง ถา username เปน “admin” และ password คือ “pass” เราก็จะสามารถ login ได แตถา เปนอยางอื่นก็จะ login ไมได
  29. 29. ตรวจสอบการ login ตอไป หลังจาก∙ี่ user login เสร็จแลว Grails จะ redirect user ไป∙ี่หนา login อีกครั้ง (/user/ index) และบอกอะไรบางอยางโดยใชตัวแปร “flash” เกี่ยวกับ flash โดยละเอียดนั้นจะไมพูดใน แตก็สังเกต ไดวา flash มันจะนำมาใชในลักษณะไหน ในหนาตอๆ ไป
  30. 30. การใช flash ใชตัวแปร flash เก็บคาอะไรบางอยางไวแบบนี้ จาก นั้น redirect ไป∙ี่หนาสำหรับ login (index.gsp) อีกครั้ง
  31. 31. การใช flash การ redirect ไป∙ี่ action ชื่อ “index” โดยปกติ Grails จะคนหาไฟลชื่อ “index.gsp” ใน grails-app/ views/user/ directory. flash message ∙ี่เรากำหนดไวก็จะถูกสงไปให action ชื่อ “index” และไฟล index.gsp ใหสามารถเขาถึงและ นำมาใชได
  32. 32. การใช flash เพิ่ม ${flash.message} ในหนา login ถามัน มีคาอะไรบางอยาง คานั้นจะถูกแสดงออกมา สำหรับการแสดงคาในตัวแปรเราสามารถเขียน ไดในลักษณะนี้ ${ชื่อตัวแปร}
  33. 33. การใช flash ∙ดสอบโดยพยายาม login อีกครั้ง หลังจากพยายาม login แลว เราจะเห็น flash message แสดงออกมา
  34. 34. เก็บสถานะ เราสามารถใช “session” ในการเก็บขอมูล เกี่ยวกับการ login ไดในลักษณะนี้
  35. 35. จัดการการ Logout สราง action ใหมชื่อ “logout” สำหรับจัดการการ logout เราอาจตองเคลียรคาใน session.user เมื่อมีการ logout
  36. 36. แกไขหนา Loginuser login เพิ่ม logic มากกวานี้โดยตรวจสอบวาถา แลวจะไมเสดงฟอรมสำหรับ login อีก และใหแสดง link สำหรับ logout แ∙น ใช <g:if>, <g:else> แ∙็กสำหรับตรวจสอบบางอยาง
  37. 37. แกไขหนา login การใช <g:if> แ∙็ก <g:if test=”${boolean-logic}”> ตัวอยาง: <g:if test=”${5 == 6}”>
  38. 38. แกไขหนา login เราสามารถใช <g:link> แ∙็กเพื่อสราง link สำหรับการ logout
  39. 39. แกไขหนา login แนนอนวาเราสามารถใช HTML แ∙็ก <a href=””> แ∙นได แตแนะนำใหใช <g:link> ดวยเหตุผลเดียวกับ ∙ี่วา∙ำไมตองใช <g:form> <g:link controller=”” action=””> ถาเราไมกำหนดชื่อของ controller Grails จะคนหา controller เชนเดียวกับพฤติกรรมตอนใช <g:form> <g:link action=””>
  40. 40. Check Point! ตอนนี้เราสรางหนาสำหรับ login ไดแลว ถา login สำหร็จเราจะเห็น link สำหรับ logout และ form สำหรับ login จะหายไป ถา login ไมสำเร็จ form สำหรับ login ก็ยังอยู หลังจากพยายาม login แลว เราจะเห็น flash message เสมอ
  41. 41. เพิ่มอะไรบางอยาง โปรเจค∙ี่สรางดวย Grails จะมีไฟล CSS มา ใหใช และถูก include ใชโดยอัตโนมัติ ลองใช CSS∙ี่มากับ Grails class=”message”
  42. 42. เพิ่มอะไรบางอยาง ดูดีขึ้นกวาเดิม สำหรับการแสดงคาของ flash.message
  43. 43. เพิ่มอะไรบางอยาง สำหรับ style แบบอื่นๆ สามารถดูเพิ่มได∙ี่ /web-app/ css/ resource อื่นๆ∙ี่มีอยูแลวก็เชนกัน สามารถดูเพิ่ม ได∙ี่ /web-app/images/ และ web-app/js/
  44. 44. หัวขอตอไป Layout และ template Filter Tag Library Service URL Mapping
  45. 45. Thank You Font: 2005_iannnnnGMO - http://www.f0nt.com

×