Scriptcase เล่นๆ ตอนที่ 3 DEMO ระบบบันทึกข้อมูลรถตู้โดยสารประจำทาง - สร้าง form app บันทึกข้อมูลคนขับ

ภาพจาก http://interactioninstitute.org/blog/2014/03/13/networks-and-articulating-needs/

ในตอนที่ 1 ลืมท้าวความเรื่องความต้องการของระบบก่อนทำฐานข้อมูล ตัวระบบจริงๆ พัฒนาไปมากแล้วครับ แต่ที่จะทำนี้คือระบบที่จะ DEMO ให้พอเป็นพื้นฐานการใช้งาน Scriptcase (SC) และเอามาว่ากันแค่เพียงการบันทึกข้อมูลรายรับของแต่ละวัน ของคนขับแต่ละคน

กล่าวคือ ขาไปคนขับออกจากคิวต้นทางไปปลายทาง ขายตั๋วใบละกี่บาท กี่ใบ และขากลับเช่นเดียวกัน พอสิ้นวันคนขับต้องมาส่งบิลพร้อมเงินที่คิวทุกวัน ทุกคน

รูปแบบที่อยากให้เป็นคือ คนขับมาถึงคิว เอาบัตรประจำตัวยิง barcode เครื่อง touch screen แสดงข้อมูลคนขับพร้อมบันทึกรายการประจำวัน คนขับป้อนข้อมูล บันทึกพร้อม print ให้เสมียนลงนาม
(เอาแค่นี้ก่อน พอเป็นพื้นฐาน ฟังก์ชั่นอื่นๆ ค่อยว่ากันต่อในอนาคต)

มาว่ากันที่การสร้าง app ตัวแรกต่อจากตอนที่แล้วเลยครับ



app แรกที่เราจะต้องทำคือ ระบบต้องมีการบันทึกข้อมูลผู้ขับขี่ของเราก่อนนะครับ สำหรับ SC อะไรก็ตามที่เป็นการนำเข้าข้อมูลเขาจะใช้ app ที่เรียกว่า Form

หลังจากเข้ามาที่ project เราแล้วจะเป็นหน้า New Application ด้านซ้ายมือให้เลือก Form เราก็กรอกข้อมูล ชื่อ app อะไรต่อมิอะไร และเลือกตารางในฐานข้อมูลชื่อ drivers ซึ่งออกแบบไว้เก็บข้อมูลคนขับของเราจะได้ดังภาพด้านล่าง

ภาพแสดงการเริ่มสร้าง form

หลังจากคลิก Create แล้วจะเข้ามาที่หน้าสำหรับจัดการ Form ที่เราสร้าง เราสามารถตั้งค่าต่างๆ เงื่อนไขต่างๆ รูปแบบต่างๆ ฯลฯ เพื่อให้ Form ของเราทำงานได้ตามที่เราต้องการ ดังภาพ

ถึงตรงนี้มือใหม่เหมือนผมตอนแรกๆ ถึงกับงง อะไรจะเยอะขนาดนี้

ไม่ต้องสนใจครับ มองหาปุ่มด้านบนแถบเครื่องมือ หน้าตาแบบนี้ครับ

จากภาพ ปุ่มซ้ายไปขวา
1. Save: สำหรับบันทึกสิ่งที่เราแก้ไขไว้ในหน้าปัจจุบัน เช่น แก้ค่าความกว้างของตารางเสร็จก็ save ก่อนไปทำอย่างอื่น เป็นต้น
2. Generate: เป็นการสั่งให้ SC สร้าง app ตัวจริงของเราจากสิ่งที่เราตั้งค่าไว้ใน app การ gen นี้เป็นเพียงการสังเคราะห์ code ให้เป็นปัจจุบัน เพื่อนำไปใช้ร่วมกับ app ตัวอื่นๆ ไม่ได้เป็นการแสดงผลใดๆ หากอยากเห็น app จริงๆ ต้องคลิกปุ่มต่อไป
3. Run: เป็นปุ่ม gen และหลังจาก gen เสร็จก็จะเรียก app ตัวนั้นมาแสดงผลให้เห็นด้วย
4. Deploy: เป็นการปรับใช้กับ server ตัวจริง เอาไว้เวลาเราพัฒนา app เสร็จสมบูรณ์พร้อมใช้งานก็สามารถส่งต่อออกมาเป็น files ที่ใช้งานบน server หรืออาจเป็น zip เอาไปแตกบน server อีกทีนึงครับ

ไม่ต้องคิดมากลองคลิกปุ่ม Run ก่อนเลย เพื่อดูว่า app แรกของเราหน้าตาเป็นอย่างไร

ภาพแสดง app ชื่อ form_driver

จากการ run ครั้งแรกจะเห็นว่า app ของเราสามารถกรอกข้อมูลเพื่อบันทึกลงฐานข้อมูลยังไม่ได้ เพราะบาง field ยังมีข้อจำกัด เช่น Image แต่อย่างน้อยก็พอจะเห็นภาพคร่าวๆ แล้ว

มาลองตั้งค่า Fields (หรือช่องบันทึกข้อมูล) แต่ละอันกัน

ปิดหน้าต่าง app เขาเราไปครับ กลับไปที่ SC ด้านซ้ายมือมี folder ชื่อ "Fields" คลิก "+" ข้างหน้าเลยครับ

จะเห็นว่า SC แสดง fields ต่างๆ เหมือนกันกับในฐานข้อมูล เราสามารถกำหนดค่าต่างๆ ในแต่ละ field ได้ ว่าจะให้ field ไหน เป็น field สำหรับป้อนค่าอะไร มีรูปแบบอย่างไร เริ่มที่ sex แล้วกัน

คลิกที่ sex field ครับ ด้านขวาจะเปลี่ยนเป็นคุณสมบัติต่างๆ ของ field นี้ ผมต้องการเปลี่ยนเป็นแบบ radio
โดยให้ 1 แทนชาย 2 แทนหญิง ก็ให้เปลี่ยน Data Type จากเดิมให้เป็น Radio

 จากนั้นเลื่อนไปด้านล่างตรง Lookup settings ให้เปลี่ยนจาก Automatic เป็น Manual

จากนั้นกำหนดค่า 1 ให้เป็น ชาย และ 2 ให้เป็น หญิง โดยป้อนคำว่า ชายที่ Label และ 1 ที่ Value จากนั้นคลิก Insert ตามลำดับ ทำแบบเดียวกันหญิง หากต้องการแก้ไข คลิกรายการด้านขวาแล้วแก้ไขข้อมูลด้านซ้ายจากนั้นคลิก Update หากต้องการลบคลิก Remove หากต้องการลบทั้งหมดคลิก Clear

จากนั้นคลิกปุ่ม Save ด้านบนแถบเครื่องมือ แล้วลอง Run ดูอีกทีครับ

จะเห็นว่า Sex หรือเพศของเรากลายเป็นตัวเลือกแบบ Radio แล้ว
ต่อไปมาดูรหัสบัตรประจำตัวประชาชนกันครับ (P Id)

ช่องรหัสบัตรประชาชนต้องอยากให้เป็น #-####-#####-##-# ก็คลิกที่รายการ field ด้านซ้ายที่ p_id จากนั้นด้านขวาในช่อง Grid Mask ให้ใส่ "#-####-#####-##-#" จากนั้นคลิก Save ด้านบน

ลอง Run แล้วกรอกข้อมูลรหัสบัตรประชาชนกันดู

กรอกไปมันก็จะมี "-" มากั้นให้เองอัตโนมัติครับ ต่อไปดู field Image กันครับ

เลือก Fields->Image ด้านซ้าย ด้านขวาเลือก Data Type->Image (File Name) จากนั้น Save แล้วลอง Run ดู

จะเห็นว่าช่อง Image กลายเป็นแบบเลือกไฟล์จากเครื่องเพื่อ upload หรือเราสามารถลากไฟล์จากเครื่องไปวางไว้บริเวณ "Drag an image here" ได้เลย



เป็นอันว่าเสร็จ app แรกนะครับเวลาเรากรอกข้อมูลเสร็จแล้วจะมีปุ่ม "add" และ "cancel" ด้านบน กรอกเสร็จคลิก "add" ครับ ผมลองกรอกข้อมูลคนขับและภาพถ่ายลงไป 4-5 คน ได้ผลประมาณนี้ครับ

***หมายเหตุ que ผมยังไม่ได้โยงข้อมูลนะครับ ผมกรอกเป็นตัวเลขไว้เฉยๆ ซึ่งเป็นตัวเลขที่เป็น foreign key มาจากตารางคิวครับ ว่าคนขับคนนี้ประจำคิวไหน

จากภาพเราสามารถใช้เครื่องมือสืบค้นหรือ Quick search เพื่อค้นหาข้อมูลจากทุก fields ได้เลยครับ ด้านล่างมี Navigation สำหรับเลือกดูรายคน

ตำแหน่งของปุ่มต่างๆ นี้สามารถโยกย้ายปรับเปลี่ยนได้หมดครับ ลองเล่นได้ใน Form Settings->Toolbar

คราวหน้ามาว่ากันด้วยเรื่อง look up table ครับ