Kotchasan PHP Framework

พื้นฐานขั้นตอนการออกแบบเว็บไซต์ไสตล์ผมเอง

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

ขั้นตอนในการออกแบบเว็บไซต์
  1. กำหนดขอบเขตของงานให้ชัดเจน ถ้าเป็นงานที่รับจ้างมา ก็ต้องเจรจากับผู้ว่าจ้างให้เรียบร้อยว่ารายละเอียดของงานมีอะไรบ้าง ขั้นตอนนี้เป็นขั้นตอนที่สำคัญที่สุดในการออกแบบ ยิ่งขอบเขตงานละเอียดเท่าไร การออกแบบจะง่ายมากขึ้นเท่านั้น เนื่องจากขั้นตอนในการออกแบบจะถูกกำหนดในขั้นตอนนี้
  2. ขึ้นหน้าเว็บให้ได้ ขั้นตอนนี้เป็นกระบวนการสร้างระบบพื้นฐานต่างๆให้กับเว็บไซต์ เพื่อให้ออกมาเป็นเว็บไซต์ที่สามารถใช้งานได้ ซึ่งต้องประกอบด้วยระบบที่จำเป็นต่างๆ เช่น การโหลดหน้าเว็บต่างๆ เมนู การตั้งค่าพื้นฐานของเว็บไซต์ ระบบสมาชิก การ Login
  3. สร้างฐานข้อมูลพร้อมข้อมูลตัวอย่างจำนวนหนึ่งตามขอบเขตของงาน อาจยังไม่ต้องสมบูรณ์ก็ได้ ข้อมูลนี้จะใช้ในการแสดงผลออกหน้าเว็บไซต์เท่านั้น และอาจต้องมีการแก้ไขข้อมูลให้เหมาะสมในภายหลัง การดำเนินการในขั้นตอนนี้ต้องกลั่นกรองมาจากขอบเขตของงานตามข้อ 1 แล้วนะครับ
  4. นำข้อมูลที่เตรียมไว้ มาจัดการแสดงผล ถ้าข้อมูลที่เตรียมไว้ครบถ้วนถูกต้อง ควรจะแสดงผลได้สมบุรณ์ตามขอบเขตของงาน ในกรณีที่ไม่สามารถ Query เพื่อแสดงผลได้ให้กลับไปแก้ไขข้อ 3 จนกว่าการแสดงจะครบถ้วนถูกต้อง ซึ่งถ้าสามารถแสดงผลได้ครบถ้วนดีแล้วก็มีแนวโน้มว่าการออกแบบฐานข้อมูลของเราถูกต้อง (การออกแบบฐานข้อมูลที่ดี คือการออกแบบที่สามารถนำข้อมูลไปใช้งานต่อได้ง่าย)
  5. ดำเนินการส่วนแอดมินสำหรับการจัดเตรียมข้อมูล ตามข้อ 3 เช่นการเพิ่ม และ แก้ไขข้อมูล (CRUD) ในขั้นตอนนี้อาจต้องมีการแก้ไขฐานข้อมูลใหม่อีกครั้ง (รวมถึงอาจต้องเพิ่มฟิลด์ที่จำเป็น) ซึ่งหากมีการแก้ไขใดๆในฐานข้อมูลให้กลับไปตรวจสอบส่วนแสดงผลตามข้อ 4 จะต้องแสดงผลได้ถูกต้องเหมือนเดิม
  6. ตกแต่งเว็บไซต์ให้เรียบร้อยสวยงาม ขั้นตอนนี้ส่วนใหญ่จะเป็นการเก็บรายละเอียดมากกว่า เนื่องจากงานส่วนใหญ่ในขั้นตอนนี้อาจเสร็จตั้งแต่ขั้นตอนก่อนหน้าไปบ้างแล้ว
  7. ผ่านมา 6 ข้อ ตอนนี้เว็บไซต์ของเราก็เกือบจะสมบูรณ์แล้วครับ ขั้นตอนสุดท้ายที่ไม่ควรขาดคือการทดสอบระบบโดยมนุษย์ ขั้นตอนนี้ยิ่งหาคนมาร่วมทดสอบได้มากเท่าไรยิ่งดี เพราะข้อผิดพลาดของสคริปต์ ไม่น่าเบื่อเท่าข้อผิดพลาดของมนุษย์ เนื่องจากมนุษย์คิดได้หลากหลายวิธีซึ่งแต่ละวิธีอาจก่อให้เกิดข้อผิดพลาดของระบบได้แตกต่างกัน และเราต้องแก้ไขเพื่อให้ข้อผิดพลาดต่างๆเกิดขึ้นได้น้อยที่สุด
ปัญหาอย่างหนึ่งในการทำงาน คือการเปลี่ยนแปลงขอบเขตของระบบระหว่างการทำงาน ซึ่งไม่ว่าจะเกิดขึ้นด้วยเหตุผลใดหรือมากน้อยแค่ไหน รวมถึงการเพิ่มหรือแม้กระทั่งการลดขอบเขตของงาน (เอาเป็นว่าไม่ว่าจะเกิดการเปลี่ยนแปลงใดๆก็ตามในชิ้นงาน) ย่อมส่งผลกระทบกับการทำงานตั้งแต่ขั้นตอนที่ 1 มาเลยทีเดียว ซึ่งเมื่อเกิดเหตุการณ์ดังกล่าวเกิดขึ้น สิ่งที่ต้องทำคือกลับไปเริ่มตั้งแต่ข้อ 1 ใหม่ (เป็นเหตุผลว่าทำไมข้อ 1 จึงสำคัญที่สุด)

ประเด็นสำคัญของบทความนี้ อยู่ที่ข้อ 2 ครับ ซึ่งเป็นขั้นตอนพื้นฐานที่แทบจะไม่แตกต่างกันเลยในงานแต่ละชิ้น สิ่งที่ผมจะแนะนำก็คือ เราควรมีการออกแบบระบบพื้นฐานเหล่านี้เตรียมไว้ ซึ่งเมื่อไรก็ตามที่เราจะเริ่มงานใหม่เราก็สามารถหยิบเอาระบบพื้นฐานเหล่านี้มาใช้ได้เลย ซึ่งส่วนตัวผมมี 2 ระบบที่ใช้งานจริงอยู่
  • GCMS เป็นระบบ CMS หรือเป็นระบบเว็บไซต์ที่สมบูรณ์เลย ผมใช้ตัวนี้กับงานส่วนใหญ่ที่มีหน้าเว็บไซต์ ซึ่ง GCMS เป็นระบบเว็บไซต์ที่มีระบบต่างๆสมบูรณ์พร้อมใช้งานได้ทันที ซึ่งสิ่งที่ผมต้องทำเพิ่มเติมตามขอบเขตของงานของลูกค้าคือการสร้างโมดูลหรือปลั๊กอินขึ้นมาใช้ ซึ่ง GCMS ช่วยให้งานที่ใช้เวลาเป็นเดือนลดลงเหลือเพียง 1 อาทิตย์เท่านั้น
  • Personnel เป็นระบบพื้นฐานของส่วนผู้ดูแลระบบ (Back-End) การเข้าใช้งานต้องผ่านการเข้าระบบก่อน ระบบนี้ประกอบไปด้วย ส่วนจัดการหน้าเว็บอย่างง่าย ตลอดจนมีระบบสมาชิก ระบบอีเมล์ ระบบการตั้งค่าพื้นฐาน ซึ่งเป็นสิ่งจำเป็นที่จะต้องมีในทุกระบบอยู่แล้ว ระบบนี้จะใช้กับงานหลังบ้านเป็นส่วนใหญ่ ซึ่งสามารถใช้ GCMS ได้ก็จริงแต่ GCMS จะใหญ่โตและซับซ้อนเกินไป
การออกแบบระบบเหล่านี้เตรียมไว้มีจุดประสงค์หลักเพื่อลดขั้นตอนเริ่มต้นในการออกแบบ เนื่องจากจริงๆแล้วในแทบทุกโปรเจ็คที่เราทำก็ต้องมีส่วนประกอบเหล่านี้เป็นอย่างน้อยอยู่ด้วยแล้ว ยิ้งเราเตรียมระบบพื้นฐานเหล่านี้ไว้ได้ครอบคลุมและมีประสิทธิภาพมากเท่าไร การดำเนินการในขั้นตอนต่อไปก็จะง่ายมากขึ้นเท่านั้น โดยเฉพาะหากเราสามารถเตรียมระบบพื้นฐานเหล่านี้ด้วยตัวเอง หรือมีความเข้าใจในระบบพื้นฐานนี้ ก็จะทำให้การออกแบบส่วนต่อไปง่ายขึ้นเป็นอย่างมาก
หมายเหตุ ทั้ง GCMS และ Personnel มีลักษณะโครงสร้างพื้นฐานคล้ายๆกัน สามารถนำโมดูลของทั้งสองระบบมาใช้ทดแทนกันได้ โดยอาจต้องดัดแปลงเพิ่มเติมเล็กน้อย