- Published on
เรียนรู้การใช้งาน Strapi เบื้องต้น (Population)
![เรียนรู้การใช้งาน Strapi เบื้องต้น (Population)](https://assets.me-idea.in.th/blogs/2024/01-strapi-on-docker-ep2/cover.webp)
มาต่อกันที่บทความเกี่ยวกับ Strapi กันต่อดีกว่าครับ วันนี้เจมส์จะมาเขียนเกี่ยวกับการใช้งาน parameter ชื่อว่า populate ในการ query เพื่อดึงข้อมูลกันครับ
เจมส์จะขออนุญาตทำต่อจากบทความก่อนหน้านี้เลยเน้อครับ เรียนรู้การใช้งาน Strapi เบื้องต้น (find, findOne) หากคุณผู้อ่านอยากลองทำตาม แนะนำให้อ่านบทความนั้นและทำตามก่อนเน้อครับ จะได้ทำตามต่อไปได้
มาเริ่มกันเลย
ขั้นแรก cd ไปที่ Root Project แล้วสั่ง Run
docker-compose up
เพื่อ Run Strapi ขึ้นมาก่อนเลยเน้อครับ แล้วก็เข้าไปที่ http://localhost:1337/admin/auth/login จากนั้นก็ใส่ Email และ Password ที่เคยได้ตั้งค่าไปในบทความก่อน ๆ เพื่อ Login ใช้งานหน้าจัดการของ Strapi ครับ
สร้างตาราง Category
เดี๋ยวเราจะมาเพิ่ม collection อีกหนึ่ง collection ชื่อว่า cateogory กันต่อครับ โดยขั้นแรกให้เลือกที่เมนู Content-Type Builder และเลือกที่เมนู Create new collection type ตามรูปด้านล่างได้เลยครับ
![เลือก Content-Type Builder > Create new collection type](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/001.webp)
จากนั้นให้ใส่ชื่อ Collection ที่ต้องการ ในที่นี้เจมส์จะใส่ชื่อว่า cateogory ครับ แล้วก็คลิกที่ปุ่ม Continue
![ใส่ชื่อเป็น category แล้วกดปุ่ม Continue](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/002.webp)
เลือก Type ของ field ที่จะสร้างเป็น Text
![เลือก Type ของ field ที่จะสร้างเป็น Text](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/003.webp)
ใส่ชื่อ field ที่ต้องการ ในที่นี้เจมส์จะใส่เป็น type จากนั้นให้กดไปที่ Tab Advanced Settings
![ตั้งชื่อ field เป็น type และเลือกไปที่ Tab Advanced Settings](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/004.webp)
จากนั้นให้เลือก Checkbox ที่ Required field และเลือกที่ Unique field แล้วกดที่ปุ่ม Finish
![เลือก Checkbox ที่ Required field แล้วกด Finish](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/005.webp)
แล้วก็กดที่ปุ่ม Save ครับ
![กดที่ปุ่ม Save เพื่อบันทึกการสร้าง collection](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/006.webp)
ในขั้นต่อไปเราจะมาใส่ Relation ระหว่าง Task กับ Category กันครับ
โดยงาน 1 งาน สามารถมีได้แค่ 1 Category ส่วนใน 1 Category สามารถมีได้หลายงาน ดังนั้นความสัมพันธ์ของ Task ต่อ Category คือ One to many (1:n)
กำหนด Relation ใน collection task
ให้เราเลือกไปที่ Collection-Type Builder แล้วเลือกไปที่ Task จากนั้นเลือกไปที่ Add another field to this collection type
![เลือกที่ Add another field to this collection type](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/007.webp)
จากนั้นเลื่อนลงมาที่ด้านล่างสุด ให้เลือกไปที่ปุ่ม Relation
![เลือกที่ปุ่ม Relation](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/008.webp)
จากนั้นเลือกที่ icon แรก และกดที่ Finish ดังรูปด้านล่าง
![เลือก icon แรกจากนั้นกดที่ปุ่ม Finish](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/009.webp)
จากนั้นให้กดที่ปุ่ม Save ครับ
![กดที่ปุ่ม Save](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/010.webp)
เพิ่มข้อมูล Category
เดี๋ยวเรามาเพิ่มข้อมูล Category กันก่อนเน้อครับ โดยจะเลือกที่เมนู Content Manager แล้วเลือกไปที่ Category แล้วเลือกไปที่ Create new entry
![กดที่ Create new entry](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/011.webp)
จากนั้นให้กรอกข้อมูลตาม Form ที่เราสร้างไว้ลงไป ในที่นี้เราสร้างแค่ field ชื่อ type เจมส์ก็จะสร้างข้อมูล type ของ category ให้มีค่าเป็น work จากนั้นให้กดที่ปุ่ม Save
![กรอกข้อมูลที่ต้องการลงไป](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/012.webp)
จากนั้นเจมส์จะให้มัน Publish ด้วย ก็กดที่ปุ่ม Publish
![กดที่ปุ่ม Publish เพื่อ Publish ข้อมูลนี้](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/013.webp)
จากนั้นเดี๋ยวเจมส์จะสร้างข้อมูลเพิ่มไว้อีก 3 ข้อมูลละกันเน้อครับ ข้อมูลที่เพิ่มมาทั้งหมดของเจมส์จะมี 4 ข้อมูลคือจะมี work, life, family, other
![แสดงตาราง category ที่มีข้อมูลที่เพิ่มไป](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/014.webp)
แก้ไขข้อมูล Task
จากนั้นให้เราลองเพิ่มข้อมูลใน Task ต่อครับ หรือหากมีข้อมูล Task อยู่แล้วก็สามารถแก้ไข Task ที่มีอยู่ก็ได้ครับ ซึ่งใน Form ของ Task จะมี Input select ให้เราเลือก Category แสดงเพิ่มเข้ามา
เดี๋ยวในที่นี้เจมส์จะลองแก้ไขข้อมูล Task ที่มีอยู่ โดยใส่ Category เพิ่มเข้าไปเป็น Other จากนั้น Save ข้อมูลให้เรียบร้อยครับ
![เพิ่ม Category ใส่ใน Task เดิมที่เคยสร้างไว้](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/015.webp)
คราวนี้ลองเข้าไปที่ลิงค์ http://localhost:1337/api/tasks?populate=category
![ผลลัพธ์จากการเข้าลิงค์ http://localhost:1337/api/tasks?populate=category](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/016.webp)
จะพบว่าข้อมูล Category ยังไม่แสดง เนื่องจากเรายังไม่ได้ไปตั้งค่า Permissions ให้กับ Category ให้ find, findOne ได้ ดังนั้นเราต้องเข้าไปแก้ในเมนู Settings แล้วเลือกไปที่เมนู Roles และเลือกไปที่ Public ก่อนครับ
![เลือกเมนู Public](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/017.webp)
จากนั้นให้เลือกที่ Category และติ๊กเลือก find และ findOne แล้วกด Save
![ตั้งค่า permission ให้ category find, findOne เรียกใช้แบบ public ได้](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/018.webp)
จากนั้นให้ลองเข้าลิงค์ http://localhost:1337/api/tasks?populate=category อีกรอบนึงครับ
![ผลลัพธ์จากการเข้าลิงค์ http://localhost:1337/api/tasks?populate=category](https://assets.me-idea.in.th/blogs/2024/02-strapi-on-docker-ep3/019.webp)
จะเห็นว่าค่า Category ถูกแสดงมาด้วยแล้ว
ถ้าหากเราไม่ใส่ parameter populate=category จะพบว่าค่าของ category จะไม่ถูกดึงมาแสดงด้วย ถ้าหากเราจะใช้ populate มากกว่า 1 collection เราสามารถใช้ populate[0]=category&populate[1]=blabla แบบนี้ได้ หรือเราจะใช้แบบ populate=* ก็ได้เช่นกัน แต่แบบหลังนี้จะ populate ทั้งหมดเลย
ถ้าหากเราอยากได้แค่ field บาง field ใน collection ที่ populate สามารถเขียนเป็นแบบนี้ได้ครับ
populate[ชื่อcollection][fields][0]=ชื่อfield
เช่น populate[category][fields][0]=type ในที่นี้คือจะดึง field ชื่อ type ใน category มาอย่างเดียว
เย้ ! หากบทความนี้มีส่วนไหนผิดพลาดประการใดก็ขออภัยมา ณ ที่นี้ด้วยเน้อครับ ถ้าหากคุณผู้อ่านมีส่วนไหนสงสัยหรืออยากสอบถาม สามารถพิมพ์ทิ้งไว้ได้ในคอมเม้นท์ได้เลยเน้อครับ