- Published on
เรียนรู้การใช้งาน Strapi เบื้องต้น (find, findOne)
![เรียนรู้การใช้งาน Strapi เบื้องต้น (find, findOne)](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/cover.webp)
อันยองงง สวัสดีคุณผู้อ่านทุกท่านเน้อครับ สวัสดีปีใหม่ 2024! บทความวันนี้เจมส์เขียนเกี่ยวกับการใช้งาน Strapi เบื้องต้น จะมีวิธีการทำอะไรยังไงมาเริ่มกันเลยครับ
ก่อนอื่นถ้าหากคุณผู้อ่านยังไม่มีโปรเจค Strapi สามารถเข้าไปอ่านบทความ "ทำ Strapi ให้อยู่บน Docker" เพื่อสร้าง Project ขึ้นมาก่อนก็ได้ครับ
มาเริ่มกันเลย
วันนี้เราจะมาลองทำอะไรเล่น ๆ แบบง่าย ๆ เน้อครับ คือ เดี๋ยวเราจะทำเป็น Todo ที่เราคุ้นเคยเน้อครับ โดยเราจะสร้าง Table ชื่อ Task ขึ้นมาก่อนครับ
ซึ่งใน Task เราจะเก็บข้อมูลดังนี้ครับ
- note -> คือสิ่งที่เราจะทำ
- status -> สถานะของงานนั้น ๆ ว่าเป็นแบบไหน จะมี 3 อย่างคือ pending, in_progress, done
หลังจากที่เรา Login เข้ามาเรียบร้อยแล้ว จะพบหน้าจอแบบนี้เน้อครับ
![หน้าจอหลังจาก Login Strapi](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/002.webp)
จากนั้นให้เลือกที่เมนู Content-Type Builder และเลือกที่ Create new collection type
![เลือกที่ Create new collection type](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/003.webp)
สร้างตาราง Task
หลังจากที่เลือกจะแสดงหน้าจอ Create a collection type ในที่นี้เจมส์จะสร้างตาราง task เลยใส่ task ตรงช่อง Display name ซึ่ง API ID (Singular) และ API ID (Plural) จะถูกกรอกให้อัตโนมัติ จากนั้นให้กดที่ปุ่ม Continue
![แสดงหน้าจอ Create a collection type](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/004.webp)
ในขั้นตอนนี้จะมี field type ต่างๆ ให้เราเลือกที่จะสร้าง ในที่นี้เจมส์จะสร้างเป็น Text
![แสดงหน้าจอ Select a field for your collection type](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/005.webp)
จากนั้นให้เลือก Long text และใส่ Name เป็นชื่อ field ที่ต้องการ ในที่นี้เจมส์จะใส่ชื่อ field เป็นชื่อว่า note เน้อครับ จากนั้นให้คลิกที่ปุ่ม Advanced settings
![แสดงหน้าจอกรอกชื่อ field ที่จะสร้าง](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/006.webp)
ในที่นี้จะมีการตั้งค่าเพิ่มเติม ซึ่งเจมส์จะตั้งค่าให้ field note จำเป็นต้องกรอก เจมส์ก็เลยต้องติ๊กที่ปุ่ม Required field ดังรูปภาพด้านล่าง
![แสดงหน้า Advanced settings](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/007.webp)
เดี๋ยวเจมส์จะเพิ่ม field อื่น ๆ เพิ่มเติม เลยเลือก Add another field
field ต่อไปที่เราจะเพิ่มคือ field ชื่อ status ซึ่งจะมีค่าเป็น string ที่มีให้เลือกแค่ pending, in_progress, done ดังนั้นเราจึงต้องเรามาเพิ่มกับต่อเลยดีกว่าครับ
![เราจะเลือกไปที่ Enumeration](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/008.webp)
เจมส์ก็ใส่ชื่อ field เป็น status และมี value เป็น pending, in_progress, done ซึ่งเราจะแยกแต่ละตัวด้วยบรรทัดใหม่ดังรูปด้านล่างเลยครับ
![สร้าง field status มีตัวเลือกเป็น pending, in_progress และ done](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/009.webp)
ในส่วน Advanced settings เจมส์ก็ตั้งค่าตามรูปด้านล่างเลยครับ คืิอ เลือกค่า Default เป็น pending ตั้งค่า Required field
![ตั้งค่า Advanced settings](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/010.webp)
จากนั้นให้กดปุ่ม Finish ครับ
จากนั้นก็กดปุ่ม Save ที่อยู่ด้านบนฝั่งขวาเพื่อบันทึกการตั้งค่าที่เรา Settings มาครับ
![กดที่ปุ่ม Save เพื่อบันทึกการตั้งค่า](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/011.webp)
![แสดงหน้า Loading หลังจากกด Save](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/012.webp)
หากไม่มีอะไรผิดพลาดจะแสดงตารางขึ้นมาแล้ว ดังรูปด้านล่างครับ
![แสดงตาราง Task ที่เราสร้างขึ้นมาและจะพบว่าปุ่ม Save กดไม่ได้แล้ว](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/013.webp)
เพิ่มเนื้อหาใส่ใน Task
หลังจบขั้นตอนการสร้าง Task Table ไปเรียบร้อยแล้ว ในขั้นตอนนี้จะเป็นการเพิ่มข้อมูลงานที่เราจะบันทึกลงไป
ในขั้นแรกให้เลือกเมนูทางด้านซ้ายมือไปที่ Content Manager
![เลือกเมนู Content Manager](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/014.webp)
ตรงส่วน Collection Types ให้เลือกที่ task ที่เราสร้างไปก่อนหน้า จากนั้นให้เลือกที่ Create new entry
![เลือก Create new entry เพื่อสร้างเนื้อหา](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/015.webp)
จากนั้นให้เรากรอกเนื้อหาเข้าไปครับ
![กรอกเนื้อหาที่ต้องการแล้วกด Save](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/016.webp)
หลังจากกด Save แล้ว ปุ่ม Publish จะแสดงให้กดได้ ในที่นี้เจมส์จะกด Publish ด้วย
Note: ถ้าหากพิมพ์ภาษาไทยแล้วกด Save มันจะ Error เน้อครับ เนื่องจาก MYSQL ที่สร้างมี collection เป็น latin1_swedish_ci
![เปลี่ยน collection เป็น utf8mb4_general_ci](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/017.webp)
หากต้องการให้ใช้งานภาษาไทยได้ ต้องปรับ collection เป็น utf8mb4_general_ci ดังภาพด้านบน
เมื่อเรากด Publish แล้วกลับมาดูที่หน้าตาราง Content Manager จะพบว่าข้อมูลที่เราเพิ่มมามี State เป็น Published แล้ว
![State เปลี่ยนเป็น Published แล้วหลังจากที่กด Published](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/018.webp)
คราวนี้เราลองเข้าไปที่ http://localhost:1337/api/tasks จะยังพบว่า Error status 403 อยู่ ดังรูปด้านล่าง
![เมื่อเข้า http://localhost:1337/api/tasks จะยังคงแสดง Error 403](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/019.webp)
จากนั้นให้ย้อนกลับมาที่หน้า Strapi Dashboard ให้เลือกที่เมนู Settings จากนั้นเลือกเมนู Roles จากนั้นให้กดที่ Public ดังรูป
![เลือก Settings > Roles > Public](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/020.webp)
จากนั้นให้เลือกที่ Task จากนั้นให้คลิกที่ findOne และ find แล้วกด Save
![เลือก findOne และ find แล้วกด Save](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/021.webp)
จากนั้นให้ลองเข้าลิงค์ http://localhost:1337/api/tasks อีกรอบ จะพบว่าข้อมูลที่เรา Published ไปแสดงขึ้นมาแล้ว
![แสดงข้อมูลที่เรา Published แล้ว](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/022.webp)
หากเราต้องการให้แสดงข้อมูล attributes แค่ note เราสามารถเพิ่ม params ชื่อ fields เข้าไปได้ จะได้เป็น http://localhost:1337/api/tasks?fields=note แต่ถ้าหากต้องการแสดง note และ status สามารถใส่ params เพิ่มเติมได้ดังนี้ http://localhost:1337/api/tasks?fields=note&fields=status
หากต้องการ findOne เราสามารถเข้าไปผ่าน http://localhost:1337/api/tasks/:id ได้เช่น http://localhost:1337/api/tasks/1
บทความนี้ขอจบเพียงเท่านี้ก่อนเน้อครับ เดี๋ยวจะทยอย ๆ เขียนบทความเกี่ยวกับ Strapi ค่อย ๆ เพิ่มเข้ามาเน้อครับ หากบทความนี้มีส่วนไหนผิดพลาดประการใดก็ขออภัยมา ณ ที่นี้ด้วยเน้อครับ