Thursday, December 6, 2012

8:15 AM
2
หลังจากได้เห็นโครงสร้างความสัมพันธ์กันในแต่ละ table แล้ว ขั้นต่อมา เราก็จะเข้าสู่การออกแบบ layout ครับ จะเห็นได้ว่า ในครั้งแรกที่เราออกแบบใบเสนอราคาไว้นั้น มันได้ออกมาเป็นแบบนี้

invoice

ต่อไป หลังจาก เรากำหนด filed และสร้างความสัมพันธ์ให้แต่ละ table แล้ว เราก็จะเข้าสู่ขั้นตอนการการออกแบบ layout เพื่อให้ฐานข้อมูลของเรา เหมือนอย่างที่เราออกแบบไว้แต่แรก

002

001

เริ่มด้วย การที่เราต้องรู้จัด mode การทำงานพื้นฐานของ filemaker ก่อน รูปด้านบนนั้น เป็นการแสดงวิธีการเข้าถึง mode การทำงาน ซึ่งจะมีทั้งสิ้นอยู่ 4 mode ก็คือ

- Browse Mode เป็น mode ที่เราใช้ในการกรอกข้อมูล ,เรียงลำดับ , ลบข้อมูล แก้ไข ข้อมูล แสดงลักษณะของข้อมูล และ อื่นๆ อีกมากมาย
- Find Mode คือ mode ที่ใช้ในการค้นหาข้อมูลโดยเฉพาะครับ
- Layout Mode เป็น mode ที่ใช้ในการออกแบบหน้าตาของโปรแกรม ตลอดจนเลยเถิดถึงการพิมพ์โน่นครับ
- Preview Mode  mode นี้ เอาไว้ดูข้อมูลการก่อนการพิมพ์เป็นหลักครับ ไม่มีอะไรซับซ้อน

การเข้าถึง mode ต่างๆ นั้น ทำได้ 2 วิธีใหญ่ๆ คือ

1. เลือก mode จาก menu ตรงมุมล่างซ้ายของ window โปรแกรม filemaker pro
2. เลือกจาก menu bar ชื่อ view ด้านบน ซึ่งตรง menu ก็จะบอกว่า แต่ละ mode มีการเข้าถึงอย่างไรบ้าง โดยใช้ Keyboard Shortcut

003

เมื่อรู้แล้ว ก็ให้เลือกเข้า mode layout เลยนะครับ จะได้ผลดังรูปด้านบน จะเห็นว่า filemaker จะทำการจัดเรียง field ให้เรียงกันลงมาแบบธรรมดาๆ ซึ่งไม่ใช่แบบที่เราต้องการ .. โดยองค์ประกอบแล้ว เราจะเห็นว่า filemaker ได้สร้าง part ให้เรา 3 part คือ

1. Header จะเป็น part ที่เราเอาอะไรใส่ลงไปใน part นี้ มันจะปรากฏในทุกๆ หน้า ของการพิิมพ์เลยครับ
2. Body part นี้เป็นส่วนที่สำคัญที่สุด เอาออกไม่ได้ เพราะเป็นส่วนที่ field ทั้งหมด ใช้ในการแสดงผลครับ
3. Footer อันนี้เหมือนกัน header ครับ เอาอะไรใส่ มันก็จะปรากฏในทุกแผ่นที่พิมพ์ออกมาเลย แต่ออกตรงท้ายกระดาษนะ

ที่ผมจะทำคือเอา footer ออก เพราะไม่ได้ใช้ วิธีเอาออก ก็โดยการจับตรงขอบล่างของ footer แล้วก็ดันมันเข้าไปหา body เลย footer ก็จะหายไป

004

จากนั้นก็เข้าสู่กระบวนการตกแต่งหน้าตา ก่อนอื่นใด ผมอยากให้ทำการตั้งค่าหน้ากระกระดาษก่อนนะครับ เช่นเรารู้แน่ๆ ว่าเราจะพิมพ์ใบเสนอราคาบนกระดาษ a4 ก็ให้ทำการเลือก File --> Page Setup

005

แล้วก็จัดการตั้งให้เป็นกระดาษ a4 เสียนะครับ

006

ผมทำงานบนเครื่อง mac เป็นส่วนใหญ่ หาก menu การตั้งค่าไม่เหมือน ก็ งม งม เอาก็แล้วกันครับ ไม่ใช่ ก็ใกล้เคียง

จากนั้นก็ให้ทำการขยายพื้นที่ของ header ออกมาให้เรียบร้อยดังรูปครับ วิธีการก็จับตรงขอบล่างของ header แล้วก็ดึงมันลงมาเท่านั้นเอง

007

ข้อสังเกตุ เห็นไหมว่าชื่อ header กับ body มันย้ายไปแสดงในแนวตั้งแทน เป็นผลมาจากการกดที่รูป

001 ซึ่งปรากฏอยู่ตรงมุมล่างซ้ายของ window นะครับ และจะปรากฏเฉพาะใน mode layout เท่านั้นครับ

จากนั้นผมก็หาเอารูป logo ของบริษัท ใน format .jpg หรือ .bmp ก็ได้ มาทำการแปะลงใน mode layout โดยคำสั่ง insert --> picture ครับ

008

แล้วก็เลือกเลยว่า รุป logo ของเราอยู่หนายยย แน่นอนว่าเครื่อง pc จะได้รูปการ browse ไม่เหมือนกันนี้ แต่ไม่ใช่ก็ใกล้เคียง เหมือนเดิม อย่าคิดมาก

009

เลือกรูปได้ ก็กด โชะ เข้าไปใน layout เลย จากนั้นก็ทำการจัดเรียงดี ดี ส่วนที่ต้องพิมพ์เข้าไป ก็ให้ใช้เครื่องมือรูปตัว A มาทำการพิมพ์นะครับ หวังว่าคงจะเดาได้ เครื่องมืออื่น สัญลักษณ์มันก็บอกอยู่แล้ว ลอง งมๆ ดูครับ ไม่เข้าใจ ให้ ถามมมมมม ....

002

เรื่อง font เรื่อง size นั้น คงทำเป็นนะครับ โดย font ไทย ที่แนะนำให้ใช้ ก็ให้ไป download มาได้จาก www.f0nt.com ครับ รู้เรื่องแล้วก็ให้ทำการทดลองจัดวาง layout เองนะครับ ไม่ใช่เด็กอมมือแล้ว นะ แต่ถ้าเด็กๆ ต้องการทำตามก็ดูนะ

อ้อ menu ที่อยากให้เปิดก็คือ formatting bar ครับ อยู่ใน view --> formatting bar

011

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

ขั้นต่อมา ผมลบ filed ทั้งหมด ออกก่อน เพราะรกตา เดี๋ยวค่อยดึงเข้ามาใหม่ การลบก็เลือก แล้วก็กด delete หรือ back space บน keyboard

003

ได้หน้าตาเกลี้ยงเกลาแล้ว ก็ดึงเอา field แรกที่ต้องการออกมา โดยการกดที่รูป field tools

004

รู้ได้ไง ว่าปุ่มไหน ทำอะไร ก็เอา mouse ไปชี้มันสิ เดี๋ยวมันก็บอกเอง ว่ามันทำอะไรได้บ้าง การใช้งานเขาบอกให้ drag นะ ก็คือกดค้างที่ปุ่มนี้ แล้วลากมันมาวางที่ body (โปรดสังเกตุ ผมไม่ได้แตะ header แล้วนะ ปล่อยมันไว้แค่นั้นหน่ะ)

001

ลากออกมาแล้ว มันก็จะถามว่า เอา field อะไร จะเห็นได้ว่า เรามีหลาย table นะ ตอนนี้กำลังทำงานกับ table ชื่อ order ดังนั้น ให้ลาก filed ของ table order นะ  อย่า งง ... ดังตัวอย่าง ผมเลือก field ชื่อ order number ออกมา แต่ไม่เอา label จึง ไม่ check ถูกตรง create label

002

อย่าลืมว่าตอนนี้เรากำลังออกแบบใบเสนอราคาที่เราจะพิมพ์ออกมานะครับ ดังนั้น ใช้ font และ size ที่มันสร้างสรรค์หน่อย ส่วนใหญ่แล้วจะอยู่ที่ 12 หรือ 14 point สังเกตุดูจะเห็นว่าผมขยายหน้าการทำงานขึ้นมาที่ 200 % นะครับ วิธีการก็ให้กดที่ รูปภูเขาใหญ่ ตรงมุมล่างซ้ายของ window เหมือนเดิม

การดึงข้อมูลจาก Table อื่นที่สัมพันธ์กับ Table หลัก

001

คราวนี้มาเรื่องสำคัญ คือ เรื่องความสัมพันธ์ระหว่าง table ตอนนี้เราจะทำ section ของลูกค้า ดังที่ได้บอกไปแล้วว่า เรามีฐานข้อมูลลูกค้า อยู่ และเราก็ได้ทำการเชื่อม table order เข้ากับ table customer เรียบร้อยแล้ว โดยใช้ key field ชื่อ customer name นั่นก็หมายความว่า ถ้าเราเลือกชื่อในฝั่ง order ให้ตรงกับชื่อที่มีในฐานข้อมูลลูกค้า ข้อมูลอื่นๆ ก็จะถูกดึงมาโดยอัตโนมัติเลย

ดังนั้นสิ่งที่เราต้องทำก็คือ ให้ user แค่เลือกชื่อลูกค้าเท่านั้น ข้อมูลอื่น เป็นข้อมูลอัตโนมัติจึงไม่ต้องทำการแสดงในรูปแบบของ field ผมก็เลย ใช้คำสั่ง insert --> merge field ให้เป็น text ธรรมดาเสียเลย ดังต้วอย่าง

003

จากนั้น มันก็จะถามว่า จะ merge field อะไร ตรงนี้สำคัญ ตั้งใจอ่านให้ดี เนื่องจากว่า ตอนนี้ เรากำลังจะดึงข้อมูลอื่นๆ จากฐานข้อมูลลูกค้ามาแสดง เมื่อ customer name ของทั้ง 2 tables มันตรงกัน ...

จาก table order ซึ่งเป็น table หลัก เราได้ทำการเชื่อมความสัมพันธ์ไปยัง table ชื่อ customer โดยเมื่อสร้างความสัมพันธ์แล้ว filemaker จะเอาชื่อ table ที่เราไปเชื่อม มาเป็นชื่อของความสัมพันธ์ด้วย โดยชื่อนี่สามารถเปลี่ยนได้ตามต้องการ แต่ผมยังไม่เปลี่ยน เพราะแค่นี้ก็ งง มากพอแล้ว แม่นบ่

004

ดังนั้น เมื่อ filemaker ถามว่า จะ merge field อะไร ผมก็เลยเลือกไปว่า ให้ทำการ merge field จากฐานข้อมูล Customer โดยทำการเลือกชื่อจาก list ซึ่งจะเห็นว่า table ที่เชื่อมกันแล้ว จะปรากฏใน section ของ related tables นะขอรับ หากเชื่อมผิดพลาด หรือไม่ได้เชื่อม ก็จะไม่มี list ให้เลือกแบบนี้

005

ต่อมา ก็ให้เลือกว่า จะเอา field ไหนจากฐานข้อมูล customer ซึ่งตอนนี้ผมกำลังจะดึงข้อมูล e-mail มา ผมก็เลยเลือก field e-mail ครับ เมื่อเลือกได้แล้ว ก็จะได้ผลดังรูปด้านล่าง

006

ส่วน ที่อยู่ เบอร์โทร เบอร์ fax ก็แค่ทำซ้ำตามขั้นตอนข้างบนอีกที ก็เท่านั้น ให้สังเกตุนะครับ ว่า field ที่ทำการ merge มันจะบอกด้วยว่า มันมาจาก table ไหน

บทความอื่นๆ