ใน workshop นี้จะพาทำหน้าแรกของเว็บไซต์ และมีการใช้ bootstrap ในการช่วยออกแบบโครงของหน้าเว็บ (Layout) อย่างง่ายๆ  โดยจะแสดงสินค้าจากฐานข้อมูลของเรา และรองรับการใช้งานบนหลายๆ อุปกรณ์  (Responsive)

มาดูโค๊ดตัวอย่างเทมเพลตของเรา ในโค๊ดนี้จะรวมกันเป็นไฟล์เดียว  แต่ผมจะพาแยกทุกอย่างออกเป็นส่วนๆ และนำมา include อีกที เพราะว่าถ้าเราใส่โค๊ดแบบนี้ รวมทั้งเมนู ส่วนแสดงสินค้า และส่วนท้าย (Footer) อยู่ด้วยกันทั้งหมด เวลาเราทำเว็บไปหลายๆหน้าเราก็ต้องตามแก้ทุกหน้า ซึ่งมันเสียเวลามากๆ   เพราะฉะนั้นเราแยกเป็นไฟล์ๆ แยกเป็นส่วนๆดีกว่า เวลาแก้ก็แก้แค่ไฟล์เดียวและเปลี่ยนตามทุกหน้า  ดูตามคลิปนะครับ  ^_^

index.php

ตอนที่ 1

YouTube Preview Image

 

 

ตอนที่ 2

YouTube Preview Image

 

 

 

code หน้า index ที่มีการ include แล้ว

 

 

 

ติดตรงไหนไปคุยกันที่แฟนเพจนะครับ  ^_^

https://www.facebook.com/sornwebsites/

 

มีความสนใจเทคโนโลยีที่ใช้พัฒนาเว็บไซต์ และอยากแบ่งปันความรู้ด้านการพัฒนาเว็บไซต์และอื่นๆอีกมากมาย…

(Visited 6,341 times, 137 visits today)

Related posts:

Bootstrap.3 : ทำลิงค์ธรรมดาให้สวยงาม, ทำลิงค์ให้เป็นปุ่ม, Link button
Bootstrap.4 slide web, สไลด์หน้าเว็บ, ทำสไลด์แปะหน้าเว็บไซต์
ป้องกันการบันทึกข้อมูลซ้ำ PHP
WEB.4 โปรแกรมเพิ่มข้อมูลเข้าไปใน database โดยไม่ต้องเขียน code, PHP, [devba...
WEB.9 ระบบ Login, Logout, กำหนดสิทธิ์การเข้าใช้งาน Dreamweaver+php[devbanba...
WEB.25 ตะกร้าสินค้า php + ตัดสต๊อก, Dreamweaver, Bootstrap ตอนที่ 4 Save or...
php หาวันเริ่มต้นและวันสุดท้ายของเดือน, First day of this month PHP
Free Template 16 : Free Backend design by bootstrap + google chart
php, comma, array, rtrime, implode, ตัดคอมม่า php
เว็บไซต์ : สาขาการจัดการชุมชน มหาวิทยาลัยราชภัฏธนบุรี 2017