สร้างเว็บไซต์สวย…ด้วย Bootstrap 3

1. เทคโนโลยีหน้าจอหลายขนาด มาตรฐานขนาดหน้าจอ การแสดงผลเว็บไซต์บนอุปกรณ์หน้าจอขนาดเล็ก
2. ทำความรู้จักกับ Responsive Web Desig เทคโนโลยีการพัฒนาเว็บไซต์ให้แสดงผลได้ดีบนทุกขนาดหน้าจอ และการตรวจสอบขนาดของหน้าจอด้วย Media Queries
3. ทำความรู้จักกับ Bootstrap ด้วยการพัฒนาเว็บไซต์ Portfolio
- การติดตั้ง Bootstrap
- กำหนดพื้นหลัง (Background) ให้กับเว็บไซต์
- รูปแบบการจัดวาง (Layout) ของ Bootstrap (Grid System)
- การจัดการรูปภาพด้วย img-round img-circle img-responsive
- การใช้งาน List แบบ dl-horizontal และ ul
- การใช้งาน icon ด้วย Glyphicon
- การสร้างเมนูด้วย Navbar การสร้าง link ในเมนู การแทรกฟอร์ม (form) ในเมนู
- จัดการเมนูแบบ Responsive เพื่อให้เหมาะกับหน้าจอขนาดเล็ก
- การสร้างตารางแบบ Responsive
- สร้าง Animation อย่างง่ายด้วย CSS3 โดยใช้ Transform + Rotate และ Keyframe + Animation
4. การใช้งาน JavaScript
- การใช้งาน Carousel และ Modal
- การใช้งาน Nav และ Scrollspy
5. การใช้งาน Bootstrap ร่วมกับ PHP โดยพัฒนาร้านค้าอย่างง่าย
- ติดตั้ง XAMPP (เอ็กซ์แซม)
- สร้างฐานข้อมูลร้านค้า (shop) สร้างตารางสินค้า (product) และตารางสมาชิก (user)
- จัดการหน้าแรกของร้าน (index.php) และการใช้ page-header
- สร้างเมนูของร้านค้าด้วย navbar
- ติดต่อฐานข้อมูลเพื่อนำสินค้ามาแสดงผล จัดการการแสดงผลด้วย thumbnail
- การเข้าสู่ระบบ (login.php) โดยส่งค่า username และ password จากฟอร์มผ่าน AJAX ด้วยเมธอด POST
- การรับค่า Username และ Password เพื่อตรวจสอบกับฐานข้อมูล การสร้าง Session
- การจัดการเมื่อสมาชิกเข้าสู่ระบบสำเร็จและไม่สำเร็จ ด้วยการใช้ Alert
- การออกจากระบบ และการล้าง Session
- แสดงรายละเอียดสินค้า (product_detail.php)
6. ระบบลงทะเบียน (register.php)
- การสร้างฟอร์มลงทะเบียนด้วย form control ของ Bootstrap
- ตรวจสอบความถูกต้องของฟอร์มบนบราวเซอร์ก่อนส่งด้วย jQuery Mobile Validator
- ส่งข้อมูลไปยังระบบลงทะเบียน ตรวจสอบชื่อผู้ใช้ว่าซ้ำหรือไม่ และบันทึกลงฐานข้อมูลถ้าไม่ซ้ำ
7. พัฒนาเว็บเซอร์วิสแบบ RESTful ด้วยข้อมูล JSON
- พัฒนาโปรแกรมฝั่ง Server เพื่อให้บริการข้อมูลรายการสินค้า การใช้คำสั่ง json_encode การตรวจสอบความถูกต้องของโครงสร้างไฟล์ JSON
- พัฒนาโปรแกรมฝั่ง Client เพื่อขอใช้บริการข้อมูลด้วยฟังก์ชัน $.getJSON การตรวจสอบว่ามีข้อมูลส่งกลับมาหรือไม่ และการวนลูปในข้อมูล JSON ด้วย $.each