Construct 2 : การค้นหาข้อมูลจาก Text file ด้วย Array

สวัสดีครับเพื่อนสมาชิก หลังจากเงียบหายไปนาน วันหนึ่งก็มีเพื่อนสมาชิกถามมาว่า ทำอย่างไรจึงจะค้นข้อมูลจากฐานข้อมูลแบบออฟไลน์ และเรียกข้อมูลมาแสดงโดยใช้การป้อนข้อมูลในช่อง textbox ก็เลยลองไปค้นๆ ดู ก็ไปพบในกระดานถามตอบของเว็บ construct.net  ก็เลยนำมาขยายความต่อ มาดูกันเลยครับ

1. เปิดโปรแกรม Construct 2 และ เปิดโปรเจ็คใหม่ขึ้นมา ตั้งค่าขนาดของ วินโดวน์และเลย์เอาต์ตามต้องการ

2. เพิ่มออบเจ็คต่างๆ และตั้งชื่อ ดังรูป

3. เพิ่มออบเจ็ค  Function

4. เพิ่มออบเจ็ค  AJAX

5. เพิ่มออบเจ็ค  Array

6. สร้างโฟลเดอร์ย่อย ภายใต้โฟลเดอร์ File ตั้งชื่อว่า pic (หรือชื่ออื่นตามต้องการ) จากนั้นนำเข้าไฟล์รูปภาพไปไว้ในโฟลเดอร์ดังกล่าว

7. สร้างไฟล์ member.txt โดยมีรายละเอียดและโครงสร้างดังรูป

10001;              // รหัสนักเรียน 
m1.png;             // ชื่อไฟล์รูปภาพ 
นายชาย สมศักดิ์ศรี;    // ชื่อและนามสกุลของนักเรียน 
18;                 // ข้อมูล 1 
25;                 // ข้อมูล 2 
15;                 // ข้อมูล 3 
25;                 // ข้อมูล 4
|                   // ตัวกั้นระหว่าง Index

8. บันทึกไฟล์ เลือก Encoding เป็น UTF-8 จากนั้นนำเข้าไฟล์ member.txt ไปไว้ในโฟลเดอร์ File ดังรูป

9. เมื่อสร้างวัตถุบนเลย์เอาต์เสร็จเรียบร้อยแล้ว เราก็มาลงมือเขียนคำสั่งกันเลยครับ

  • เพิ่ม Global variable ชื่อ totalMembership เป็นตัวแปรประเภท Numbr ตั้งค่าเริ่มต้นเป็น 8 (ตามจำนวนสมาชิกทั้งหมดของท่าน)
  • เพิ่ม Global variable ชื่อ dataSearch เป็นตัวแปรประเภท Text ตั้งค่าเริ่มต้นเป็น “” (ว่าง)
  • Add Event > System > On start of layout
    • Add Action > Array > Set site > Width : totalMembership > Height : 1 > Depth : 1
    • Add Action > AJAX > Request file > Tag : “member” > File : member.txt
    • Add Action >Textdetail > Set text > Text : “”
    • Add Action > TextUsername > Set focused
  • Add Event > AJAX > On completed >Tag : “member”
    • Add Action > Function > Call function > Name : “loadData”

  • Add Event > Function > On function> Name : “loadData”
    • Add Sub-event > System > for> Name : Load > Start Index : 0 > End index : totalMembership
    • Add local variable > Name : index > Type : Number > Initial value : 0
      • Add Action >Array > Set Value > X : index > Value : trim(tokenat(AJAX.LastData,index,”|”))
      • Add Action > System > Add to > Variable : index > value : 1

  • Add Event > Button go > On Clicked
    • Add Sub-event > System > Compare variable > Variable : dataSearch  > Comparison : Not equal to > Value : TextUsername.Text
      • Add Action >TextDetail > Set text >Text : “ไม่พบข้อมูล”
      • Add Action > boxpicture > Load image > URL : “./member.png” > Size : Keep current size > Cross origin : anonymous
    • Add Sub-event > System > Compare two value > First value : TextUsername.Text  > Comparison : Not equal to > Second value : TextUsername.Text
      • Add Sub-event > Array > For each element > Axes : X
        • Add Action > System > Set value > Variable : dataSearch > value : trim(tokenat(Array.At(Array.CurX),0,”;”))
        • Add Sub-event > System > Compare variable > Variable : dataSearch  > Comparison : Equal to > Value : TextUsername.Tex
          • Add Action > boxpicture > Load image > URL : “./”&trim(tokenat(Array.At(Array.CurX),1,”;”)) > Size : Keep current size > Cross origin : anonymous
          • Add Action >TextDetail > Set text >Text : 
"ชื่อ : "&trim(tokenat(Array.At(Array.CurX),2,";"))&newline&
"คะแนนสอบครั้งที่ 1 : "&trim(tokenat(Array.At(Array.CurX),3,";"))&" / 20"&newline&
"คะแนนสอบครั้งที่ 2 : "&trim(tokenat(Array.At(Array.CurX),4,";"))&" / 30"&newline&
"คะแนนสอบครั้งที่ 3 : "&trim(tokenat(Array.At(Array.CurX),5,";"))&" / 20"&newline&
"คะแนนสอบครั้งที่ 4 : "&trim(tokenat(Array.At(Array.CurX),6,";"))&" / 30"
  • ที่ Event Button go คลิกขวา
    • Add Sub-event > System > Else
      • Add Action >TextDetail > Set text >Text : “ป้อนรหัสนักเรียน”

ขอให้สนุกกับการสร้างผลงานนะครับ แล้วพบกันใหม่ ในบทความหน้า

สวัสดีครับ