ลองศึกษา HTMX กับ Go เล่น ๆ นิดหน่อย

ช่วงหลัง ๆ มีการพูดถึง HTMX เยอะพอสมควร
ก็เลยลองมาศึกษานิดหน่อย แต่พอไปอ่านเอกสารแล้วเยอะน่าดู
เลยลองเขียน program เล่น ๆ เพื่อศึกษาไปดีกว่า
โดยเลือกใช้งาน HTMX กับ Go มาพัฒนา server-side กัน
มาดูว่าทำอย่างไรบ้าง ?

จากที่อ่านเอกสารของ HTMX นั้น
บอกว่าจะทำการส่ง request ไปยัง server-side ให้เลย (AJAX หรือ XHR)
แล้วนำ response มาทำการ render ให้เลย

ดังนั้นก็เลยตั้งโจทย์แรกว่า

ให้ทำการดึงข้อมูลจาก server-side ทุก ๆ 5 วินาทีไปเลย
สามารถเขียนได้ดังนี้

ฝั่ง Frontend ด้วย HTMX

โดยทำการดังข้อมูลผ่าน GET /data
กำหนด interval ใน attribute ชื่อว่า hx-trigger ทำงานแบบ polling

[gist id="952874b663a5f7a9298dd92820071aad" file="1.htmx"]

ฝั่ง Backend ด้วยภาษา Go

[gist id="952874b663a5f7a9298dd92820071aad" file="1.go"]

จากดึงข้อมูลก็ลองทำการ submit form ง่าย ๆ กันหน่อย

มาลองทำการ login ซึ่งฝั่ง backend จะทำการรับ request ผ่าน POST /login
และทำการส่งผลกลับมาคือ

• 200 = Success
• 401 = Unauthorized

สามารถเขียนด้วย HTMX กับ extension response-targets
เพื่อให้ง่ายต่อการแสดงผลการทำงานในแต่ละกรณี

[gist id="952874b663a5f7a9298dd92820071aad" file="2.htmx"]

ส่วน code ฝั่ง backend เป็นดังนี้

[gist id="952874b663a5f7a9298dd92820071aad" file="2.go"]

ผลการทำงาน

ส่วนการจัดเก็บข้อมูลการ login ก็สามารถเขียนได้เลยในฝั่ง backend
ทั้ง cookie หรือ session ไปได้เลย

[gist id="952874b663a5f7a9298dd92820071aad" file="3.go"]

จากนั้นการตรวจสอบเครื่อง authorize ก็นำไปไว้ที่ middleware ต่อไป

[gist id="952874b663a5f7a9298dd92820071aad" file="4.go"]

มีตัวอย่างให้ลองศึกษาเพิ่มเติมได้ที่ HTMX Example

ไว้ลองเล่นเพิ่มเติม แล้วจะนำมาเล่าต่อไปครับ
ขอให้สนุกกับการเขียน code