PHP กับการออกแบบและวางโครงสร้างหน้า Webpage
ปัญหาสำหรับนักโปรแกรมเมอร์มือใหม่ ๆ ที่จะเริ่มสร้าง Project ขึ้นมาซะ 1 โปรเจค ก็คือการออกแบบและวางโครงสร้างของหน้าเว็บไซต์ เพราะถ้ายังขาดความรู้และการออกแบบที่ดี เช่นการวางโครงสร้างของ header , menu หรือ footer ไม่ได้มีการแยกไว้อย่างเป็นสัดส่วน โดยมีการสร้างเนื้อหาเหล่านั้นไว้ในทุก ๆ ไฟล์ โดยไม่มีการแยกเป็น include ไฟล์เอาไว้ เมื่อ Project เริ่มมีการพัฒนาได้ในระดับหนึ่ง หากต้องการแก้ไขค่าเหล่านี้ ซึ่งเป็นข้อมูลที่ซ้ำ ๆ กันในทุกหน้า Web Page จเห็นว่าจะต้องตามแก้ไขในทุก ๆ ไฟล์ ซึ่งยากต่อการจัดการและการทำงานที่ซ้ำซ้อนเป็นอย่างมาก
โครงสร้างของเว็บไซต์ทั่ว ๆ ไปที่ได้รับความนิยมจะประกอบด้วย 4 ส่วนหลัก ๆ คือ
ดังนั้นจากรูปจะเห็นว่าเว็บไซต์มีการแบ่งโครงสร้างไว้อย่างชัดเชน ดังนั้น เราสามารถแยกส่วนของ
โดยแยก 3 ส่วนนี้ไว้ในไฟล์ .php ต่าง ๆ แล้วทำการ include เข้ามาในไฟล์ โดยตั้งชื่อไฟล์เป็น header.php , menu.php และ footer.php
ในส่วนของ Container เหตุผลที่ไม่แยกเป็นไฟล์นั้น เพราะในส่วนนี้เราจะใส่ Code ของ php ที่เป็นเงื่อนไขในการดึง page ต่าง ๆ มาแสดง
เมื่อแยกไฟล์เหล่านี้ได้แล้วเราสามารถนำมา include เข้าไปในส่วนต่าง ๆ ของโครงสร้างของหน้าเว็บ
การ include โครงสร้างไน้าเว็บ
สิ่งที่ได้เมื่อมีการ include โครงสร้างเข้ามาในหน้า webpage
ซึ่งตอนนี้เราได้ออกแบบเสร็จไป 3 ส่วนแล้วคือ Header , Menu และ Footer ซึ่งยังเหลือในส่วนของ Container ที่ใช้สำหรับการดึงค่าต่าง ๆ ของแต่ล่ะหน้าเว็บไซต์มาแสดงผล
เพิ่มเติม
อันเนื่องจากการออกแบบโครงสร้างหน้าเว็บด้วยวิธีนี้ การทำงานทั้งหมดของหน้าเว็บจะอยู่ที่ไฟล์ index.php ซึ่งเป็นหน้าหลักของเว็บไซต์ และมีส่วนเดียวของเว็บไวต์ที่เปลี่ยนแปลงคือ Container ด้วยวิธีนี้เองในหน้า Menu ของเว็บไวต์ เราจะทำการส่งค่า Parameter เพื่อดึงเนื้อหาส่วนนั้น ๆ มาแสดงผลในหน้าเว็บ
จะเห็นว่าในไฟล์ menu.php มีการส่งตัวแปร index.php?page=service เมื่อเราอ่านค่าด้วย $_GET["page"] ก็จะได้ค่าว่า service ซึ่งในส่วนของ Container สามารถนำค่านี้เพื่อไปกำหนดเงื่อนไขการแสดงได้
รูปการ include หน้า Webpage เข้ามานส่วนของ Container เมื่อมีการคลิกที่เมนู service โดยเรียกไฟล์ชื่อ page_service.php
กรณีที่มีหลาย Web page ก็ใช้ function switch ในการกหนดเงื่อนและดึงเนื้อหาที่ต้องการ
และเมื่อนำไปใช้งานจริง URL ที่ได้จะได้เป็น
ในกรณีที่ไฟล์ default เป็น index.php แล้ว สามารถลบคำว่า index.php ทิ้งได้เลย
โดยแค่ใส่ Link<a href="?page=service">Service</a> ไม่ต้องมี index.php
Code ทั้งหมด
index.php
menu.php
header.php
footer.php
page_home.php
page_service.php
page_product.php
page_aboutus.php
page_contactus.php
Screenshot
โครงสร้างของเว็บไซต์ทั่ว ๆ ไปที่ได้รับความนิยมจะประกอบด้วย 4 ส่วนหลัก ๆ คือ
- Header สำหรับ Logo หรือ Banner ของเว็บไซต์
- Menu สำหรับ Menu ต่าง ๆ
- Footer สำหรับใส่ข้อความใน Footer
- Container คือส่วนของเนื้อหา ที่จะเปลี่ยนเมื่อมีการคลิก Link ต่าง ๆ
- Menu สำหรับ Menu ต่าง ๆ
- Footer สำหรับใส่ข้อความใน Footer
- Container คือส่วนของเนื้อหา ที่จะเปลี่ยนเมื่อมีการคลิก Link ต่าง ๆ
ดังนั้นจากรูปจะเห็นว่าเว็บไซต์มีการแบ่งโครงสร้างไว้อย่างชัดเชน ดังนั้น เราสามารถแยกส่วนของ
- Header
- Menu
- Footer
- Menu
- Footer
โดยแยก 3 ส่วนนี้ไว้ในไฟล์ .php ต่าง ๆ แล้วทำการ include เข้ามาในไฟล์ โดยตั้งชื่อไฟล์เป็น header.php , menu.php และ footer.php
ในส่วนของ Container เหตุผลที่ไม่แยกเป็นไฟล์นั้น เพราะในส่วนนี้เราจะใส่ Code ของ php ที่เป็นเงื่อนไขในการดึง page ต่าง ๆ มาแสดง
เมื่อแยกไฟล์เหล่านี้ได้แล้วเราสามารถนำมา include เข้าไปในส่วนต่าง ๆ ของโครงสร้างของหน้าเว็บ
การ include โครงสร้างไน้าเว็บ
สิ่งที่ได้เมื่อมีการ include โครงสร้างเข้ามาในหน้า webpage
ซึ่งตอนนี้เราได้ออกแบบเสร็จไป 3 ส่วนแล้วคือ Header , Menu และ Footer ซึ่งยังเหลือในส่วนของ Container ที่ใช้สำหรับการดึงค่าต่าง ๆ ของแต่ล่ะหน้าเว็บไซต์มาแสดงผล
เพิ่มเติม
อันเนื่องจากการออกแบบโครงสร้างหน้าเว็บด้วยวิธีนี้ การทำงานทั้งหมดของหน้าเว็บจะอยู่ที่ไฟล์ index.php ซึ่งเป็นหน้าหลักของเว็บไซต์ และมีส่วนเดียวของเว็บไวต์ที่เปลี่ยนแปลงคือ Container ด้วยวิธีนี้เองในหน้า Menu ของเว็บไวต์ เราจะทำการส่งค่า Parameter เพื่อดึงเนื้อหาส่วนนั้น ๆ มาแสดงผลในหน้าเว็บ
01.<!-- Menu -->02.<table width="150" border="0">03.<tr>04.<td><div align="center"><a href="index.php?page=home">Home</a></div></td>05.</tr>06.<tr>07.<td><div align="center"><a href="index.php?page=service">Service</a></div></td>08.</tr>09.<tr>10.<td><div align="center"><a href="index.php?page=product">Product</a></div></td>11.</tr>12.<tr>13.<td><div align="center"><a href="index.php?page=aboutus">About Us</a></div></td>14.</tr>15.<tr>16.<td><div align="center"><a href="index.php?page=contactus">Contact Us</a></div></td>17.</tr>18.</table>จะเห็นว่าในไฟล์ menu.php มีการส่งตัวแปร index.php?page=service เมื่อเราอ่านค่าด้วย $_GET["page"] ก็จะได้ค่าว่า service ซึ่งในส่วนของ Container สามารถนำค่านี้เพื่อไปกำหนดเงื่อนไขการแสดงได้
รูปการ include หน้า Webpage เข้ามานส่วนของ Container เมื่อมีการคลิกที่เมนู service โดยเรียกไฟล์ชื่อ page_service.php
01.<!-- Container -->02.<?03.switch ($_GET["page"]) {04.case "home":05.include("page_home.php");06.break;07.case "service":08.include("page_service.php");09.break;10.case "product":11.include("page_product.php");12.break;13.case "aboutus":14.include("page_aboutus.php");15.break;16.case "contactus":17.include("page_contactus.php");18.break;19.default:20.include("page_home.php");21.}22.?>กรณีที่มีหลาย Web page ก็ใช้ function switch ในการกหนดเงื่อนและดึงเนื้อหาที่ต้องการ
และเมื่อนำไปใช้งานจริง URL ที่ได้จะได้เป็น
http://www.thaicreate.com/index.php?page=service
ในกรณีที่ไฟล์ default เป็น index.php แล้ว สามารถลบคำว่า index.php ทิ้งได้เลย
โดยแค่ใส่ Link<a href="?page=service">Service</a> ไม่ต้องมี index.php
http://www.thaicreate.com/?page=service
Code ทั้งหมด
index.php
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"03.<html>04.<head>05.<title>ThaiCreate.Com</title>06.<meta http-equiv="Content-Type" content="text/html; charset=windows-874">07.</head>08. 09.<body>10.<table width="100%" border="1">11.<tr>12.<td colspan="2"><div align="center">13. 14.<!-- Header -->15.<? include("header.php"); ?>16. 17.</div></td>18.</tr>19.<tr>20.<td width="24%"><div align="center">21. 22.<!-- Menu -->23.<? include("menu.php"); ?>24. 25.</div></td>26.<td width="76%">27. 28.<!-- Container -->29.<?30.switch ($_GET["page"]) {31.case "home":32.echo "Home";33.include("page_home.php");34.break;35.case "service":36.echo "Home -> Service";37.include("page_service.php");38.break;39.case "product":40.echo "Home -> Product";41.include("page_product.php");42.break;43.case "aboutus":44.echo "Home -> About Us";45.include("page_aboutus.php");46.break;47.case "contactus":48.echo "Home -> Contact Us";49.include("page_contactus.php");50.break;51.default:52.echo "Home";53.include("page_home.php");54.}55.?>56. 57.</td>58.</tr>59.<tr>60.<td colspan="2"><div align="center">61. 62.<!-- Footer -->63.<? include("footer.php"); ?>64. 65.</div></td>66.</tr>67.</table>68.</body>69.</html>menu.php
01.<table width="150" border="0">02.<tr>03.<td><div align="center"><a href="index.php?page=home">Home</a></div></td>04.</tr>05.<tr>06.<td><div align="center"><a href="index.php?page=service">Service</a></div></td>07.</tr>08.<tr>09.<td><div align="center"><a href="index.php?page=product">Product</a></div></td>10.</tr>11.<tr>12.<td><div align="center"><a href="index.php?page=aboutus">About Us</a></div></td>13.</tr>14.<tr>15.<td><div align="center"><a href="index.php?page=contactus">Contact Us</a></div></td>16.</tr>17.</table>header.php
1.<table width="100%" border="0">2.<tr>3.<td width="27%"><div align="center"><strong>Your Logo</strong></div></td>4.<td width="73%"><img src="468x60.gif" width="468" height="60"></td>5.</tr>6.</table>footer.php
1.<table width="100%" border="0">2.<tr>3.<td><div align="center"><strong>CopyRight 2011</strong></div></td>4.</tr>5.</table>page_home.php
1.<table width="569" height="255" border="0">2.<tr>3.<td bgcolor="#FFCCCC"><div align="center"><h1>Home</h1>4.</div></td>5.</tr>6.</table>page_service.php
1.<table width="569" height="255" border="0">2.<tr>3.<td bgcolor="#00CC66"><div align="center"><h1>Service</h1>4.</div></td>5.</tr>6.</table>page_product.php
1.<table width="569" height="255" border="0">2.<tr>3.<td bgcolor="#CCCCFF"><div align="center"><h1>Product</h1>4.</div></td>5.</tr>6.</table>page_aboutus.php
1.<table width="569" height="255" border="0">2.<tr>3.<td bgcolor="#99CC33"><div align="center"><h1>About Us</h1>4.</div></td>5.</tr>6.</table>page_contactus.php
1.<table width="569" height="255" border="0">2.<tr>3.<td bgcolor="#33CCFF"><div align="center"><h1>Contact Us</h1>4.</div></td>5.</tr>6.</table>Screenshot
