เล่าเบื้องหลังการทำงานออกแบบระบบจัดเก็บข้อมูล

วันนี้ผมมาเล่าถึงเรื่องราวการทำงานให้กับโปรเจ็คตัวหนึ่งครับผม หลังจากที่ทำเสร็จแล้วก็อยากจะมาแบ่งปันว่าทำงานนี้ใช้เครื่องมือตัวไหนบ้าง เผื่อจะเป็นประโยชน์สำหรับท่านอื่นๆครับ . โปรเจ็คตัวนี้ เป็นโปรเจ็คที่ออกแบบให้ภาควิชาชีวเคมี ของจุฬาลงกรณ์มหาวิทยาลัยครับ โดยโจทย์ก็เหมือน Chart ที่เต็มหน้ากระดาษที่ผมเคยโพสต์ไปนั่นแหละครับ มันมี Relation กันเต็มไปหมดเลย ซึ่งหลังจากได้บรีฟงานกันแล้ว ผมก็นำมาออกแบบและพัฒนาขึ้นโดยใช้ตัว WordPress เป็น Core หลักในการพัฒนา

Chart สำหรับจัดเก็บข้อมูลที่ได้จากภาควิชา

หลังจากที่ได้รับบรีฟงานเรียบร้อยแล้ว หน้าที่ของผมก็คือมาวางโครงสร้างการออกแบบสถาปัตยกรรมข้อมูล และหน้าตา User Interface Design ครับว่าจะให้ออกมาในรูปแบบไหน ซึ่งคนใช้งานจริงๆคือเจ้าหน้าที่ในองค์กร ไม่ได้เปิดให้สาธารณชนเข้าไปใช้งานครับ

=======

01. การสร้าง Custom Post Type

ผมแยกรูปแบบการจัดเก็บข้อมูลเป็นชนิดแยกใครแยกมัน จะได้ไม่สับสน อีกอย่างคือแต่ละชนิดข้อมูลที่ต้องการจัดเก็บนั้นมีการเก็บค่าต่างๆไม่เหมือนกันด้วย ผมใช้ปลักอิน Custom Post Type UI ในการสร้าง Type ของข้อมูลแต่ละชนิด

ลิงค์เกี่ยวข้อง https://wordpress.org/plugins/custom-post-type-ui/

=======

02. การสร้าง Custom Fields

เนื่องจาก WordPress ที่ให้มาแบบฟรีๆตั้งแต่ตอนต้นนั้น จะมีฟิลด์สำหรับรับค่ามาไม่กี่ตัว และไม่ตรงกับโปรเจ็คตัวนี้ด้วย แต่นั่นแหละครับ เพราะว่า WordPress สามารถสร้างฟิลด์เองขึ้นมาก็ได้ ผมใช้ Advanced Custom Fields แบบ Pro Version สำหรับสร้าง Custom Fields เนื่องจากต้องการใช้การรับค่าฟิลด์แบบ Repeater ด้วย

ลิงค์เกี่ยวข้อง https://www.advancedcustomfields.com/

=======

03. การสร้างกราฟ

กราฟผมใช้ Open Source ชื่อว่า Chart JS ครับ ฟรีและสร้างลูกเล่นได้สวยงามมากๆ การปรับแต่งก็ไม่ยุ่งยากอะไรด้วย การเอาค่ามาแสดงก็หลักๆ รับค่าข้อมูลจากการ Query มาเก็บใน Array แล้วก็ไปแสดง Array แต่ละตัวลงใน Javascript

ลิงค์เกี่ยวข้อง http://www.chartjs.org/

=======

04. ตารางสำหรับแสดงข้อมูล

โปรเจ็คนี้เน้นแสดงข้อมูลในรูปแบบตาราง เพราะคนใช้งานหลักคุ้นเคยกับรูปแบบนี้ และผมเองก็ต้องการให้ตารางมันสามารถเรียง (Sorting) ข้อมูลได้ เลยเลือกใช้ DataTable มาใช้งาน ซึ่งเป็น Opensources เช่นเดียวกัน ดีงามพระรามแปดมากสำหรับคนที่อยากจะใช้ตารางมาทำงานร่วมกับโปรเจ็คตัวเอง

ลิงค์เกี่ยวข้อง https://datatables.net/

=======

05. Export & Import ตารางในหน้าเว็บ

สำหรับลูกเล่นตัวนี้ เกิดจากการที่ผมคิดว่า จะดีกว่าไหมนะถ้ากรณีที่ผู้ใช้งานเค้าฟิลเตอร์ข้อมูลในตารางตามที่ต้องการแล้ว เค้าสามารถ Export ข้อมูลชุดนั้นมาไว้อ่านเองทีหลังได้ . ผมพิจารณาแล้วก็คิดว่าเป็นหนึ่งในฟังก์ชั่นที่น่าจะมีประโยชน์ เลยเพิ่มปุ่ม Export เข้าไปด้วย แต่ให้ Export ได้ในรูปแบบ Excel กับ CSV . ซึ่งปุ่มนี้ก็เป็นของ DataTable เช่นเดียวกัน แต่ต้องไปตั้งค่าเพิ่มนะครับ ซึ่งก็ไม่ยาก

ลิงค์เกี่ยวข้อง https://datatables.net/extensions/buttons
https://datatables.net/…/bu…/examples/styling/bootstrap.html

======

06. การเพิ่มข้อมูลและ Export ข้อมูล

โปรเจ็คนี้ผมออกแบบให้เจ้าหน้าที่สามารถเพิ่มเติมข้อมูลแต่ละอย่างได้ด้วยตัวเอง ซึ่งสามารถทำได้สามวิธี คือหนึ่ง การเพิ่มข้อมูลแบบใช้ตัว Default ของ WordPress ที่คลิกเพิ่มทีละอัน . กับแบบที่สอง คือการ Import ผ่านไฟล์ Excel และรูปแบบที่สามคือ Import ผ่าน CSV

เช่นเดียวกัน การ Export ฐานข้อมูล ก็สามารถ Export ได้ในรูปแบบ Excel และ CSV

สำหรับการ Import and Export นั้น ผมใช้ปลักอินของค่ายนี้ครับ http://www.wpallimport.com/

=======

07. Theme หน้าตาของเว็บไซต์

สำหรับธีมผมเขียนขึ้นมาเองครับ เพราะมองแล้ว เขียนขึ้นมาเองเราควบคุมอะไรได้ง่ายและสะดวกกว่า ซึ่งการเขียนธีมนั้นก็ไม่ได้ยากจนเกินไปครับผม ตอนแรกนั้นในฝั่งของเมนูซ้ายมือหลัก ว่าจะเพิ่มไอคอนแต่ละเมนูเข้าไปด้วย แต่ปรากฎว่า หาไอคอนที่เกี่ยวกับชื่อเมนูค่อนข้างยาก และพอใส่แล้ว มันกลายเป็นรก ซึ่งก็หันกลับมาถามตัวเองว่า “มันจำเป็นจริงหรือไม่?” ไม่มีไอคอนแล้วทำให้ใช้งานสับสนหรือเปล่า? ก็เลยตัดออก เอาแบบคลีนๆดีกว่า

 

อันนี้คือเล่าหลังจากทำโปรเจ็คเสร็จแล้วนะครับ แน่นอนว่ามันอ๋อ แค่นี้เองเหรอ เพราะมันเสร็จแล้วไง 555 แต่ก่อนหน้าก็ต้องมาสรุป Requirement ที่ได้รับก่อน แล้วก็มาคิดว่าจะออกแบบฐานข้อมูลอย่างไร แล้วจะใช้ Tools ตัวไหนให้ใช้งาน “ง่าย” ทั้งฝั่งนักออกแบบ และคนใช้งาน

 

นี่แหละครับ ข้อดีของ Opensource มันคือการรวบรวมองค์ความรู้และความชำนาญของแต่ละคนมาใช้ร่วมกัน มันช่วยประหยัดเวลาของเราได้เยอะเลย

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้เพื่อการวิเคราะห์

    คุกกี้ประเภทนี้จะทำการเก็บข้อมูลการใช้งานเว็บไซต์ของคุณ เพื่อเป็นประโยชน์ในการวัดผล ปรับปรุง และพัฒนาประสบการณ์ที่ดีในการใช้งานเว็บไซต์ ถ้าหากท่านไม่ยินยอมให้เราใช้คุกกี้นี้ เราจะไม่สามารถวัดผล ปรับปรุงและพัฒนาเว็บไซต์ได้

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

บันทึก