การสร้าง Webboard ด้วย PHP MySQL ตอนที่ 3 ทำระบบสมัครสมาชิก(Register)/เข้าสู่ระบบ(Login)/ออกจากระบบ(Logout)

     คราวนี้จะเข้าสู่ส่วนของการ Codding จริงๆแล้วครับ หลังจากที่สอนไปแล้ว 2 บทความเรื่องของการออกแบบหน้าจอของWebboard ออกแบบฐานข้อมูล และแยกส่วนของเว็บไซต์/คำสั่งเชื่อมต่อกับฐานข้อมูล เพื่อง่ายต่อการเรียกใช้หรือแก้ไขข้อมูลในภายหลัง

     บทความนี้จะสอนในส่วนของระบบสมาชิก ซึ่งจะมีการสมัครสมาชิก (Register) การเข้าสู่ระบบ (Login) และการออกจากระบบ (Logout) บทความนี้จะต่อเนื่องจากบทความตอนที่ 2 นะครับ เพราะจะมีคำสั่งหรือโค๊ดบางส่วนที่อาจจะทำให้งง ไม่รู้ที่มาของมัน ให้กลับไปศึกษาตอนที่ 2 ให้หายงงก่อนครับ

    อันดับแรก ก่อนที่เราจะสร้างฟอร์มสำหรับกรอกข้อมูล การลงทะเบียนสมาชิก และฟอร์มเข้าสู่ระบบ เราจะต้องมีปลั๊กอินสำหรับเป็นผู้ช่วยในการตรวจสอบความถูกต้องของข้อมูล ซึ่ง Bootstrap เองก็มีปลั๊กอินตัวหนึ่งให้สามารถเรียกใช้งาน และมีคุณสมบัติที่เจ๋งฝุดๆเลยครับ ให้ดาวน์โหลดจากเว็บนี้ครับ http://bootstrapvalidator.com/

     ให้ Extact ไฟล์แล้วเปลี่ยนชื่อโฟลเดอร์ว่า btvalidate แล้วเอาไปไว้ในตำแหน่งเดียวกับไฟล์ index.php ดังรูป ให้สังเกตุโฟลเดอร์ที่ 3 ชื่อ btvalidate นะครับ ให้ทำตามนี้เลย (ขออนุญาติรีไซเคิลรูปจากบทความก่อนมาลงประกอบ เพื่อช่วยGoogleประหยัดพื้นที่จัดเก็บรูปครับ อิอิ)

เท่านี้ก็ถือว่าเรามีเครื่องมือสำหรับก้าวไปสู่ Step ต่อไปครบแล้วครับ

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

การทำ Webboard ด้วย PHP MySQL ตอนที่ 2 การแยกส่วนต่างๆของเว็บดีไซน์และการเชื่อมต่อกับฐานข้อมูล

     หลังจากที่ได้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 class="row"><div class="ws-footer">Copy Right 2014 MyWebboard By php-for-ecommerce.blogspot.com</div></div>

การทำ Webboard ด้วย PHP MySQL ตอนที่ 1 เตรียมความพร้อม/ออกแบบหน้าจอ/ออกแบบฐานข้อมูล

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

การออกแบบฐานข้อมูล
     ให้สร้างฐานข้อมูลชื่อ db_wb และให้สร้างเทเบิลตามนี้ครับ (จะขอข้ามเรื่องของการวิเคราะห์ระบบด้วยDiagramแบบต่างๆนะครับ เพราะระบบไม่ได้ซับซ้อนอะไรมากครับ)

Bootstrap คือ

     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 ด้วย Chrome Dev Tool

    ในเวลาที่เราได้ออกแบบหน้าจอของเว็บไซต์ ให้แสดงผลแบบ 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
จากนั้นให้คลิกขวา เลือก ตรวจองค์ประกอบ ดังรูป