PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ว่าด้วยเรื่องของ Template Engine กับ PHP รู้จักมาตั้งแต่เป็นโปรแกรมเมอร์ฝึกหัด $tpl->parseHtml() กับคำสั่งนี้สามารถโหลดหน้า html ทั้งหมดพร้อมกับแทรกค่าลงตัวแปรต่างๆให้เรียบร้อยเสร็จสรรพ มันดูดีมากที่ได้แยกโค๊ด PHP ออกจาก HTML ผมไม่รู้ว่า $tpl เก็บค่าจากไลบรารี่ตัวไหนแต่มันก็น่าใช้มากแต่ก็ไม่เคยแกะไล่ดูโค๊ดส่วนที่ประกาศค่านั้นเลย จนกระทั่งได้พบกับ $TPLN ของเว็บ http://tpln.h2lsoft.com/ ก็คิดว่าเจ๋งเหมือนกันเผลอๆทำได้ดีกว่าตรงที่ Multiple Loop Bloc ได้ด้วย เหมาะกับการสร้างตารางซ้อนตารางคือตัวแปรอาร์เรย์หลายชั้น ((ไม่แน่ว่า $tpl ที่ใช้อยู่ก็อาจจะทำได้ แต่ไม่เคยได้อ่าน Document ของมันเลย)) ถ้าเป็น PHP Framework ผมจะเลือก CodeIgniter เพราะมันมี $this->parser->parse() ที่ใช้โหลด view ที่เป็นเทมเพลตมาแสดง ใช้ง่ายโค๊ดสะอาดตาในสไตล์ Framework https://ellislab.com/codeigniter/user-guide/libraries/parser.html สำหรับหลักการที่ทำให้ผมหลงไหลอ่านได้ที่ (Sixhead Template) www.scriptdd.com/webtip/sixhead_template_php_template_engine_part1.html นอกจากนั้นยังมี smarty template engine...

วันนี้มีตัวช่วยสร้าง select box ของเราให้เป็นตัวเลือกแบบสวยๆ และสามารถค้นหา option ด้วยคำที่ต้องการได้ด้วย ตามไปดูตัวอย่างได้ที่ https://select2.github.io/examples.html ถ้าให้แนะนำคงจะเป็นส่วนของการเพิ่ม "Placeholders" และ สามารถเคลียร์ค่าได้ด้วย allowClear ซึ่งจะต้องสร้าง option เปล่าๆไว้ 1 ตัว จะทำให้ปรากฏเครื่องหมายกากบาท สำหรับล้างค้าที่เลือกไปแล้วได้ด้วย สำหรับวิธีติดตั้งก็ดูที่หน้า "Home" ได้เลยครับ https://select2.github.io/ ไฟล์ที่ต้องการก็มี select2.min.css และสคริปต์ select2.min.js ส่วนการเรียกใช้ก็ง่ายๆ <script type="text/javascript"> $('select').select2(); </script> สำหรับการปรับแต่งเพิ่มเติมก็ดูตาม https://select2.github.io/options.html หรือแกะไปตาม Examples เอาละกันนะครับว่าเรียกใช้ยังไงบ้าง และที่สำคัญหากนำมาใช้แล้วแสดงผลแล้วไม่เหมือนตัวอย่าง อาจจะเป็นเพราะต้องใช้ไฟล์ bootstrap และสัญลักษณ์ต่างๆจาก font-awesome เข้ามาช่วยด้วยนะครับ

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

       การสร้างเว็บไซต์นั้น นอกจาก notepad หรือ gedit ที่เป็น text editor มาพร้อมระบบปฏิบัติการ(OS)ที่ติดตั้งแล้วนั้น ยังมีโปรแกรมอีกมากมายหลายตัวที่ช่วยให้เราเขียนโค๊ด HTML ได้ง่ายขึ้น จึงทำให้การสร้างเว็บเพจขึ้นมาแต่ละหน้านั้น ง่ายขึ้นกว่าการเขียนเว็บด้วยซอร์สโค๊ด HTML ล้วนๆเพียงอย่างเดียว        สำหรับโปรแกรมที่ผมจะนำเสนอควบคู่ไปกับทุกบทความที่เกี่ยวกับการสร้างเว็บไซต์ ผมจะใช้โปรแกรมที่ชื่อว่า BlueGriffon   ซึ่งเป็นโปรแกรมที่เรียกว่า WYSIWYG คือสามารถปรับแต่งหน้าเว็บของเราผ่านการคลิกที่เมนูต่างๆ ได้สะดวกยิ่งขึ้นโดยไม่ต้องเสียเวลากับการพิมพ์โค๊ดแท็กต่างๆ        โปรแกรมที่ใช้ออกแบบหน้าเว็บเหล่านี้ (รวมถึง Dreamweaver ด้วย) จะมีข้อเสียอยู่เล็กน้อยคือ การสร้างโค๊ดที่เกินความจำเป็นให้กับหน้าเว็บเพจของเรามากเกินไป เช่นการกำหนดสไตล์ต่างๆ มักจะกำหนดลงไปที่แท็กแต่ละแท็กไปเลย ที่จริงปัญหานี้เราสามารถแก้ไขได้โดยการเขียน css ควบคุมหน้าเว็บเอง แล้วมากำหนด class ให้กับแท็กต่างๆที่ต้องปรับเปลี่ยน...

       การสร้างเว็บไซต์ที่มีหน้าตาสวยงามให้เห็นกันนั้น ที่จริงแล้วเบื้องหลังประกอบด้วยโค๊ด HTML ต่างๆมากมายเพื่อจัดรูปแบบการแสดงผลต่างๆให้อยู่ในตำแหน่งที่ต้องการ จะบอกว่า HTML คือคำสั่งในการจัดหน้ากระดาษ และรูปแบบการแสดงผล ในหน้ากระดาษ หรือหน้าเว็บนั้นๆก็ว่าได้

ต่อเนื่องจากการใช้ข้อมูลในรูปแบบอาร์เรย์ของ PHP มาสร้างตารางแสดงผลวันเวลาที่มีประชุมในห้องประชุมแต่ละห้อง ( ส่วนแสดงผล แบบระบายสีตามช่วงเวลา ระบบจองห้องประชุม ) นำมาดัดแปลงเป็นตารางแสดงวันเวลาที่มีการอบรม โดยดึงข้อมูลมาจากฐานข้อมูล MySQL ซึ่งมีตัวอย่างโครงสร้างฐานข้อมูล และปรับเปลี่ยนวิธีการเขียนโค๊ดดังตัวอย่างต่อไปนี้

๋ในหัวข้อ ปรับแต่ง Code ให้เป็นมิตรกับ Server ผมได้นำเสนอเกี่ยวกับการเขียนโปรแกรมแบบประหยัดแบนด์วิธในแบบต่างๆ รวมถึงการลดจำนวนครั้งในการคิวรี่ และการสร้าง Template Engine ด้วย Javascript ซึ่งที่ผมให้ความสนใจเป็นพิเศษก็คือ Ajax Template Parser : เรียกใช้งานเทมเพลต CodeIgniter ด้วย Ajax ซึ่งได้แสดงผลการเปรียบเทียบการคืนค่ากลับมายังหน้าเว็บบราวเซอร์ดังภาพตัวอย่างในบทความนั้นแล้ว สำหรับในหัวข้อนี้ยังมีเรื่องที่ผมจะกล่าวถึงอีกสองเรื่องที่ยังไม่มีเวลาได้ลองเขียนโค๊ดทดสอบการทำงาน นั่นก็คือ การสร้างตัวแบ่งหน้าสำหรับแสดงข้อมูลรายการที่มีหลายบรรทัด แบบใช้ Javascript + AJAX ในการตรวจสอบจำนวนข้อมูลที่แสดงอยู่ในหน้าปัจจุบัน และหน้าที่จะต้องเริ่มโหลดข้อมูลชุดใหม่ด้วย AJAX อีกครั้งก่อนจะแสดงผลด้วย Javascript แบบซ่อนและแสดงผลอีกครั้ง สำหรับอีกเรื่องหนึ่งก็คือ การนำ Javascript Template Engine ที่ใช้สำหรับ CodeIgniter มาสาธิตการทำงานแบบเต็มรูปแบบ โดยจะแนะนำวิธีการเรียกใช้งาน ซึ่งไม่ได้มีหลักการอะไรยุ่งยาก เพียงแค่โหลดไฟล์ HTML มาเก็บไว้ในตัวแปร Javascript แล้วก็รอเรียกข้อมูลผ่าน AJAX ด้วย jQuery...