วิธีการสร้าง Panel ใหม่

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

บทความนี้ สอนอยู่บนพื้นฐานของ phpFusion ใครยังไม่มีใช้ก็โหลดและอ่านวิธีติดตั้งเอาได้เลยนะครับ โดยใช้เครื่องมือค้นหา ค้นคำว่า fusion ก็ได้ครับ

วิธีที่ง่ายสุดแสนจะง่ายโดยที่ท่านไม่ต้องนั่งเขียน tag เองทั้งหมด นั่นก็คือ การใช้โปรแกรม dreamweaver เวอร์ชั่นใหนก็ได้ครับ มันเป็นโปรแกรม สำหรับการเขียนเว็บ ซึ่งมีหน้าตาการทำงานเหมือน word เลยครับ แต่ว่า ขณะที่เราจัดหน้าอยุ่นั้น มันก็จะเขียน code html ตามที่เราจัดหน้านั่นเอง

สำหรับใครที่อ่านบทความนี้ ควรโหลด testcode_meewebfree.com ไปด้วยนะครับ เพื่อเปิดศึกษาควบคู่กันไปครับ

โดยเปิดมาจะเจอหน้าหลักที่ชื่อ testcode กับแฟ้ม อีก1แฟ้ม ตอนนี้ สมมุติว่าหน้า testcode ที่ท่านเห็นนั้น เปรียบกับหน้า index (หน้าหลัก)ของเวบเรา และโฟลเดอร์ที่บรรจุหน้า tesecode นี้ และแฟ้มอีก1แฟ้มนี้ เราเรียกมันว่าระดับ root ครับ(root คือแฟ้มหลักของเวบเป็นแฟ้มที่อยู่บนสุด)

สรุปคือ ตอนนี้ เราได้แฟ้ม root มาแล้ว และแฟ้ม root นี้บรรจุด้วย testcode_meewebfree.htm รูป tick และแฟ้ม newfolder01ครับ โดยวิธีการเปิดเพื่อดูโค้ดของหน้าpage ในเครื่อง ก็คือ คลิกขวาที่ testcode แล้วเลือก openwith>>notepad สำหรับคนที่ไม่มีโปรแกรมDream นะครับ แต่ผมแนะนำอีกอย่างว่า ถ้าไม่อยากโหลด dream มาใช้ขอให้โหลด Ultra Edit (หรือ Edit Plus) มาใช้ก็ได้ครับ มันไม่ได้ช่วยเขียนโค้ด แต่มันจะช่วยแยก สี ของ Tag ครับ ไม่ใช่มีแต่ตัวหนังสือสีดำแบบ notepad

เราก็มาเริ่มด้วยการศึกษา โค้ด ตาราง table กันก่อนครับ ซึ่งการจัดหน้าเว็บเนี่ย ตารางสามารถช่วยจัดได้เป็นอย่างดีทีเดียวครับ ลองดูโค้ดที่หน้าเว็บผมก็ได้ครับ ก็ใช้ตารางเป็นหลักนั่นล่ะครับ รวมไปถึงกรอบข้อความต้อนรับที่อยู่ที่หน้าแรกด้วย นั่นก็ใช้ตารางครับ วิธีดูโค้ด หน้าที่เรากำลังเปิดคือ คลิกที่ Views>>Source ครับ บางที่เค้าจะล็อกไม่ให้ดูก็ไม่เป็นไร ช่างเค้าเถอะครับ แต่ของผมไม่ได้หวงอะไร ดูดเอาเลยเต็มที่ครับ

เอาล่ะครับ ไอเจ้า tag tableเนี่ย มันมีหน้าตาดังรูปด้านล่างนี้ล่ะครับ

โดย tr และ td สามารถลดหรือเพิ่มได้ตามใจท่านครับ แต่สิ่งนึงใน html (และทุกๆภาษาคอมพิวเตอร์) ที่ต้องจำคือ เปิด tag แล้ว อย่าลืมปิด การปิดก็มีลักษณะที่คล้ายๆกับเปิด แต่เติม/ เข้ามานั้นเองครับ โดยจากรูปเราจะเห็นว่า tr เป็นตัวกำหนด แถวครับ เปิดเท่าไร ต้องปิดเท่านั้นนะครับ ส่วนtag อื่นๆ ที่มันคร่อมอยู่นั่นคือเนื้อหา ในtag นั้นเองครับ โดยtd ที่เห็นนั้นคือการแบ่งคอลัมน์ครับ1ชุด คือ1คอลัมน์

เมื่อเราแสดงผลจะได้ดังนี้

ต่อมาคือการแสดงผลรูปภาพครับมี tag ดังนี้ แต่..... แทกรูปภาพพิเศษคือ เปิดแล้วไม่ต้องปิดครับส่วน br นั้นคือการขึ้นบรรทัดใหม่ในการแสดงผลผ่านเว็บนั่นล่ะครับ

จะเห็นได้ว่า มีทั้งหมด3รูปครับ แต่ที่เก็บรูปอยู่ต่างที่กันอันแรกคือรูปอยุ่ชั้นเดียวกับpage ที่แสดงผลครับ อันที่2เอาใส่ไว้ในแฟ้มnewfolder01 และอันที่3 เอาใส่ในแฟ้ม newfolder02ซึ่งแฟ้มนี้เก็บอยู่ในแฟ้ม newfolder01อีกทีนึงครับ (ลองเปิดไฟล์ที่โหลดดูประกอบก็ได้ครับ) จะแสดงผลได้ดังนี้

ต่อมาคือโค้ดการลิ้งค์ครับ

โดยมีที่น่าสังเกตุคืออันที่2ครับ ที่ target="_blank" เพิ่มมเข้ามา เป็นการกำหนดให้ลิ้งค์นั้นเปิดที่ page หน้าใหม่ครับ หรือ Open in New Windows นั่นเอง โค้ดนี้แสดงผลได้ดังนี้

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

อย่างรูปที่ท่านเห็นเนี่ย จะเห็นว่าใหญ่ที่สุดคือ tag ตาราง ใช่แล้วครับ ผมสร้างตารางขึ้นมา แล้วเอาทั้งรูปไปใส่ ทั้งลิ้งค์ไปใส่ รวมถึงลิ้งค์รูปด้วยครับ เห็นใหมครับ ที่มี แทกลิ้งค์คร่อม แทกรูปอยู่นั่นล่ะครับ(บรรทัดที่5) ดังโค้ดด้านบนแสดงผลได้ดังนี้

เอาล่ะครับ เรื่องโค้ดพื้นฐานเนี่ยคงต้องค่อยๆลองกันไปเรื่อยๆนั่นล่ะครับ เดี๋ยวก็ชินไปเอง ส่วนใครที่มี appserv ในเครื่อง(ยังไม่มีก็โหลดเอาได้จากเว็บเรานี้ล่ะครับ) ก็ลองไปเขียนแล้วรันผ่าน localhost ก็ได้นะครับ โดย appserv จะมีแฟ้ม rootอยู่ที่ c:\Appserv\www เอาpage ไปวางใน wwwได้เลยครับ

เอาล่ะคราวนี้ก็มาถึงการสร้าง panelจริงๆบ้างแล้ว เริ่มจาก login เข้าเป็น admin เว็บก่อนครับ แล้วคลิกดังด้านล่าง

จะเจอดังรูปด้านล่างครับ ไอตรงเนื้อหา panel เนี่ยล่ะครับ ที่เราจะใส่มันลงไป วิธีใส่มีดังนี้ครับ

ชื่อพาแนลคือ ชื่อของ panel ที่เราใช้ในเมนูผู้ควบคุม(ส่วนนี้ไม่ได้ถูกแสดงออกหน้าเว็บ) โดยให้เปลี่ยน name เป็นชื่อของตารางนั้นๆครับ ส่วนนี้แสดงออกทางหน้าเว็บครับ

อย่าลืมใส่ก่อนใส่ html นะครับ อันนี้ใส่เฉพาะเมื่อเจอแบบนี้เท่านั้นครับ คือมีฟังก์ชั่นให้เราเห็นน่ะครับ Ex. closeside(); เพราะว่ามันคือภาษา php ครับ เราต้องเบรก php ก่อน จึงค่อยรัน html แล้วจึง เปิด เพื่อรัน php ใหม่อีกที

หลังจากที่เรากดบันทึกเรียบร้อยแล้ว เราจะต้องมาคลิกเพื่อ active พาแนลนี้ด้วยครับ โดยกลับมาคลิกที่นี่น่ะครับ

เอาล่ะครับที่นี้เราก็ไปดูที่หน้าหลักกัน

อา.............................เรียบร้อยอีกแล้ว................ง่ายจัง อิๆๆๆ โดยตารางที่คุณเห็นนั้นมีโค้ดดังนี้ครับ

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

ป.ล.บทความนี้ อาจจะไม่ตรงต้องตามหลักการทางวิชาการเท่าไรนัก แต่มันเป็นแบบลูกทุ่งที่เอามาใช้งานได้จริงน่ะครับ เอาเป็นว่าใช้เป็น ก็ok แล้วครับ และสำหรับใครที่สนใจหาความรู้เพิ่มเติมด้าน html หรือ php ก็ดีนะครับ เพื่อการประยุกต์ที่หลากหลายมากขึ้นครับ

Keyword : สร้าง panel ในphp-fusion, create panel, panel php-fusion, html, สร้างตาราง, สร้าง panel