Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > บทความจากสมาชิก > PHP and Web Site Structure : PHP กับการออกแบบและวางโครงสร้างหน้า Webpage



 
Clound SSD Virtual Server

PHP and Web Site Structure : PHP กับการออกแบบและวางโครงสร้างหน้า Webpage

PHP and Web Site Structure ตัวอย่าง PHP กับการออกแบบและวางโครงสร้างหน้า Web Page ที่ได้รับความนิยม และใช้งานมากที่สุด และยังยึดหยุ่นต่อการใช้งาน และการแก้ไขปรับปรุง Content ในเว็บไซต์

ปัญหาสำหรับนักโปรแกรมเมอร์มือใหม่ ๆ ที่จะเริ่มสร้าง Project ขึ้นมาซะ 1 โปรเจค ก็คือการออกแบบและวางโครงสร้างของหน้าเว็บไซต์ เพราะถ้ายังขาดความรู้และการออกแบบที่ดี เช่นการวางโครงสร้างของ header , menu หรือ footer ไม่ได้มีการแยกไว้อย่างเป็นสัดส่วน โดยมีการสร้างเนื้อหาเหล่านั้นไว้ในทุก ๆ ไฟล์ โดยไม่มีการแยกเป็น include ไฟล์เอาไว้ เมื่อ Project เริ่มมีการพัฒนาได้ในระดับหนึ่ง หากต้องการแก้ไขค่าเหล่านี้ ซึ่งเป็นข้อมูลที่ซ้ำ ๆ กันในทุกหน้า Web Page จเห็นว่าจะต้องตามแก้ไขในทุก ๆ ไฟล์ ซึ่งยากต่อการจัดการและการทำงานที่ซ้ำซ้อนเป็นอย่างมาก


โครงสร้างของเว็บไซต์ทั่ว ๆ ไปที่ได้รับความนิยมจะประกอบด้วย 4 ส่วนหลัก ๆ คือ

- Header สำหรับ Logo หรือ Banner ของเว็บไซต์
- Menu สำหรับ Menu ต่าง ๆ
- Footer สำหรับใส่ข้อความใน Footer
- Container คือส่วนของเนื้อหา ที่จะเปลี่ยนเมื่อมีการคลิก Link ต่าง ๆ


PHP and Web Site Structure

ดังนั้นจากรูปจะเห็นว่าเว็บไซต์มีการแบ่งโครงสร้างไว้อย่างชัดเชน ดังนั้น เราสามารถแยกส่วนของ

- Header
- Menu
- Footer


โดยแยก 3 ส่วนนี้ไว้ในไฟล์ .php ต่าง ๆ แล้วทำการ include เข้ามาในไฟล์ โดยตั้งชื่อไฟล์เป็น header.php , menu.php และ footer.php

ในส่วนของ Container เหตุผลที่ไม่แยกเป็นไฟล์นั้น เพราะในส่วนนี้เราจะใส่ Code ของ php ที่เป็นเงื่อนไขในการดึง page ต่าง ๆ มาแสดง

เมื่อแยกไฟล์เหล่านี้ได้แล้วเราสามารถนำมา include เข้าไปในส่วนต่าง ๆ ของโครงสร้างของหน้าเว็บ

การ include โครงสร้างไน้าเว็บ

PHP and Web Site Structure


สิ่งที่ได้เมื่อมีการ include โครงสร้างเข้ามาในหน้า webpage

PHP and Web Site Structure


ซึ่งตอนนี้เราได้ออกแบบเสร็จไป 3 ส่วนแล้วคือ Header , Menu และ Footer ซึ่งยังเหลือในส่วนของ Container ที่ใช้สำหรับการดึงค่าต่าง ๆ ของแต่ล่ะหน้าเว็บไซต์มาแสดงผล








เพิ่มเติม
อันเนื่องจากการออกแบบโครงสร้างหน้าเว็บด้วยวิธีนี้ การทำงานทั้งหมดของหน้าเว็บจะอยู่ที่ไฟล์ index.php ซึ่งเป็นหน้าหลักของเว็บไซต์ และมีส่วนเดียวของเว็บไวต์ที่เปลี่ยนแปลงคือ Container ด้วยวิธีนี้เองในหน้า Menu ของเว็บไวต์ เราจะทำการส่งค่า Parameter เพื่อดึงเนื้อหาส่วนนั้น ๆ มาแสดงผลในหน้าเว็บ

<!-- Menu -->
<table width="150"  border="0">
  <tr>
    <td><div align="center"><a href="index.php?page=home">Home</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=service">Service</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=product">Product</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=aboutus">About Us</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=contactus">Contact Us</a></div></td>
  </tr>
</table>


จะเห็นว่าในไฟล์ menu.php มีการส่งตัวแปร index.php?page=service เมื่อเราอ่านค่าด้วย $_GET["page"] ก็จะได้ค่าว่า service ซึ่งในส่วนของ Container สามารถนำค่านี้เพื่อไปกำหนดเงื่อนไขการแสดงได้


PHP and Web Site Structure

รูปการ include หน้า Webpage เข้ามานส่วนของ Container เมื่อมีการคลิกที่เมนู service โดยเรียกไฟล์ชื่อ page_service.php

	<!-- Container -->
	<?php 
	switch ($_GET["page"]) {
	case "home":
		include("page_home.php");
		break;
	case "service":
		include("page_service.php");
		break;
	case "product":
		include("page_product.php");
		break;
	case "aboutus":
		include("page_aboutus.php");
		break;
	case "contactus":
		include("page_contactus.php");
		break;
	default:
		include("page_home.php");
	}
	?>


กรณีที่มีหลาย Web page ก็ใช้ function switch ในการกหนดเงื่อนและดึงเนื้อหาที่ต้องการ

และเมื่อนำไปใช้งานจริง URL ที่ได้จะได้เป็น
https://www.thaicreate.com/index.php?page=service


ในกรณีที่ไฟล์ default เป็น index.php แล้ว สามารถลบคำว่า index.php ทิ้งได้เลย
โดยแค่ใส่ Link<a href="?page=service">Service</a> ไม่ต้องมี index.php
https://www.thaicreate.com/?page=service



Code ทั้งหมด

index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</head>

<body>
<table width="100%" border="1">
  <tr>
    <td colspan="2"><div align="center">

	<!-- Header -->
	<?php include("header.php"); ?>

	</div></td>
  </tr>
  <tr>
    <td width="24%"><div align="center">

	<!-- Menu -->
	<?php include("menu.php"); ?>

	</div></td>
    <td width="76%">

	<!-- Container -->
	<?php 
	switch ($_GET["page"]) {
	case "home":
		echo "Home";
		include("page_home.php");
		break;
	case "service":
		echo "Home -> Service";
		include("page_service.php");
		break;
	case "product":
		echo "Home -> Product";
		include("page_product.php");
		break;
	case "aboutus":
		echo "Home -> About Us";
		include("page_aboutus.php");
		break;
	case "contactus":
		echo "Home -> Contact Us";
		include("page_contactus.php");
		break;
	default:
		echo "Home";
		include("page_home.php");
	}
	?>

	</td>
  </tr>
  <tr>
    <td colspan="2"><div align="center">

	<!-- Footer -->
	<?php include("footer.php"); ?>

	</div></td>
  </tr>
</table>
</body>
</html>


menu.php
<table width="150"  border="0">
  <tr>
    <td><div align="center"><a href="index.php?page=home">Home</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=service">Service</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=product">Product</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=aboutus">About Us</a></div></td>
  </tr>
  <tr>
    <td><div align="center"><a href="index.php?page=contactus">Contact Us</a></div></td>
  </tr>
</table>


header.php
<table width="100%"  border="0">
  <tr>
    <td width="27%"><div align="center"><strong>Your Logo</strong></div></td>
    <td width="73%"><img src="468x60.gif" width="468" height="60"></td>
  </tr>
</table>


footer.php
<table width="100%"  border="0">
  <tr>
    <td><div align="center"><strong>CopyRight 2011</strong></div></td>
  </tr>
</table>


page_home.php
<table width="569" height="255"  border="0">
  <tr>
    <td bgcolor="#FFCCCC"><div align="center"><h1>Home</h1>
    </div></td>
  </tr>
</table>


page_service.php
<table width="569" height="255"  border="0">
  <tr>
    <td bgcolor="#00CC66"><div align="center"><h1>Service</h1>
    </div></td>
  </tr>
</table>


page_product.php
<table width="569" height="255"  border="0">
  <tr>
    <td bgcolor="#CCCCFF"><div align="center"><h1>Product</h1>
    </div></td>
  </tr>
</table>


page_aboutus.php
<table width="569" height="255"  border="0">
  <tr>
    <td bgcolor="#99CC33"><div align="center"><h1>About Us</h1>
    </div></td>
  </tr>
</table>









page_contactus.php
<table width="569" height="255"  border="0">
  <tr>
    <td bgcolor="#33CCFF"><div align="center"><h1>Contact Us</h1>
    </div></td>
  </tr>
</table>



Screenshot

PHP and Web Site Structure


PHP and Web Site Structure


PHP and Web Site Structure


PHP and Web Site Structure


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2011-09-06
  Download : No files
Sponsored Links
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่