Lin Lin Dev

     คราวนี้จะเข้าสู่ส่วนของ การ Codding จริงๆแล้วครับ หลังจากที่ สอน ไปแล้ว 2 บทความเรื่องของการออกแบบหน้าจอของ Webboard ออกแบบฐานข้อมูล และแยกส่วนของเว็บไซต์/คำสั่งเชื่อมต่อกับฐานข้อมูล เพื่อง่ายต่อการเรียกใช้หรือแก้ไขข้อมูลในภายหลัง      บทความนี้จะ สอน ในส่วนของระบบสมาชิก ซึ่งจะมีการสมัครสมาชิก (Register) การเข้าสู่ระบบ (Login) และ การ ออกจากระบบ (Logout) บทความนี้จะต่อเนื่องจากบทความตอนที่ 2 นะครับ เพราะจะมีคำสั่งหรือโค๊ดบางส่วนที่อาจจะ ทำ ให้งง ไม่รู้ที่มาของมัน ให้กลับไปศึกษาตอนที่ 2 ให้หายงงก่อนครับ     อันดับแรก ก่อนที่เราจะสร้างฟอร์มสำหรับกรอกข้อมูล การ ลงทะเบียนสมาชิก และฟอร์มเข้าสู่ระบบ เราจะต้องมีปลั๊กอินสำหรับเป็นผู้ช่วยในการตรวจสอบความถูกต้องของข้อมูล ซึ่ง Bootstrap เองก็มีปลั๊กอินตัวหนึ่งให้สามารถเรียกใช้งาน และมีคุณสมบัติที่เจ๋งฝุดๆเลยครับ ให้ดาวน์โหลดจากเว็บนี้ครับ http://bootstrapvalidator.com/      ให้ Extact ไฟล์แล้วเปลี่ยนชื่อโฟลเดอร์ว่า btvalidate แล้วเอาไปไว้ในตำแหน่งเดียวกับไฟล์...

     หลังจากที่ได้Designเว็บเสร็จแล้ว ต่อไปผมจะสอนแยกส่วนต่างๆของเว็บที่เราดีไซน์ให้ออกเป็นส่วนๆ เพื่อง่ายต่อการแก้ไขการดีไซน์หรือข้อมูลในอนาคต เราจะแยกส่วนออกเป็นดังนี้ 1.โฟลเดอร์ css ให้สร้างไฟล์ main.css  ให้พิมพ์โค๊ดดังนี้ body{ background:#E8E8E8; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#828282; } .ws-content h1{ font-size:14px; line-height: 1; border-bottom:1px dashed #0075EA; padding:5px; margin:5px 0px 10px 0px; font-weight:bold; color:#0075EA; } .container{ margin-top:2px; color:#646464; } .ws-name{ font-size:3em; } .ws-head{ margin-top:50px; padding-bottom:5px; background:#DBDBDB; color:#666; } .ws-footer{ color: #666666; font-size: 0.8em; text-align:center; margin-top:10px; } .ws-content{ margin-top:3px; } table{ font-size:14px; } table th{ color:#666666; } 2.footer.php เป็นไฟล์ส่วนท้ายของเว็บ  ให้พิมพ์โค๊ดดังนี้ <div cl...

     บทความต่อจากนี้ไป ผมจะ สอนทำ Webboard กันครับ โดยใช้ภาษา PHP กับ โปรแกรมฐานข้อมูล MySQL เป็นตัวหลักในการพัฒนาโปรแกรม และที่พิเศษคือ ผมจะให้ Webboard สามารถแสดงผลแบบ Responsive โดยใช้ Bootstrap เพื่อให้รองรับการแสดงผลบนอุปกรณ์จำพวก Smart Device เช่น มือถือ แท็บเลต และผมเอง เพิ่งเริ่มต้นศึกษา Bootstrap อยู่เหมือนกัน และต้องการให้ Webboard ที่ผมสอนมีความแปลกใหม่ รองรับเทคโนโลยีใหม่ๆ ที่ค่อนข้างที่จะเปลี่ยนแปลงไวมาก และต้องตามให้ทันอยู่เสมอ      เว็บบอร์ดที่สอนจะเป็นเว็บบอร์ดแบบง่ายๆ ไม่มีOptionมากมายแบบ Smf หรือ phpbb จะมีเพียงการใช้งานหลักๆที่จำเป็นเท่านั้น เช่น การตั้งกระทู้/แสดง/ตอบกระทู้/ปักหมุด ,  มีระบบหมวดกระทู้ , มีระบบสมัครสมาชิก สมาชิกสามารถลงทะเบียน//Login เข้าสู่ระบบ เป็นต้น การออกแบบฐานข้อมูล      ให้สร้างฐานข้อมูลชื่อ db_wb และให้สร้างเทเบิลตามนี้ครับ (จะขอข้ามเรื่องของการวิเคราะห์ระบบด้วยDiagramแบบต่างๆนะครับ เพราะระบบไม่ได้ซับซ้อนอะไรมากครับ)

     Bootstrap คือ Framwork สำหรับการแสดงผลของเว็บไซต์ โดยใช้ Css เวอร์ชั่น 3 และคำสั่ง Javascript บางส่วน ที่ถูกออกแบบเป็นเครื่องมือให้นักพัฒนาเว็บไซต์สามารถออกแบบการแสดงผลได้แบบง่ายๆ และมีความสวยงาม ทันสมัย และรองรับการแสดงผลบนหน้าจอขนาดต่างๆได้ เช่น อุปกรณ์ Smart Device อาทิ iPhone,iPad,Tablet,Android Phone ต่างๆ รวมถึงการแสดงผลบนหน้าจอขนาดใหญ่ อย่างเช่น Smart Tv เป็นต้น      เราเรียกการแสดงผลแบบนี้ว่า Responsive Web Design นักพัฒนาเว็บไซต์จะเรียก Bootstrap ว่าเป็น Front-end Framework ตอนนี้ Bootstrap พัฒนาถึงเวอร์ชั่นที่ 3 ( Bootstrap 3 ) แล้วครับ โดยมีการเปลี่ยนแปลง Grid Layout ให้สามารถแสดงผลบนอุปกรณ์ Smart Device ที่หลากหลาย ให้ศึกษาจาก -> http://getbootstrap.com/css/#grid

    ในเวลาที่เราได้ออกแบบหน้าจอของเว็บไซต์ ให้แสดงผลแบบ Responsive อาจจะใช้ front-end framework อย่าง Bootstrap ช่วยสร้างสรรค์หน้าจอแบบ Resposive ขึ้นมา หรือเขียนขึ้นมาเองโดยใช้ Css3+Html 5 เพื่อสำหรับแสดงผลบนอุปกรณ์ Smart Device อย่าง Smart Phone,Tablet  ซึ่งเวลาออกแบบนั้นเราจะพัฒนาบนโน๊ตบุคหรือพีซี ทำให้ไม่สะดวกต่อการนำไปทดสอบบนอุปกรณ์ Smart Device      Google Chrome จึงมีสิ่งที่เรียกว่า Chrome Dev Tool เพื่อช่วยให้นักพัฒนาสามารถดูผลลัพธุ์ของหน้าจอที่เราได้ออกแบบ ผ่านทางหน้าจอของ Google Chorme ได้เลย     วิธีใช้งาน  Chrome Dev Tool เพื่อดูการแสดงผลแบบ Responsive - เปิด Browser ของ Google Chrome ขึ้นมา แล้วไปที่เว็บของเราหรือเว็บตัวอย่างที่ออกแบบหน้าจอแบบ Responsive จากนั้นให้คลิกขวา เลือก ตรวจองค์ประกอบ ดังรูป