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