ประสบการณ์การออกแบบ header และ footer
    สารบัญ
    บทนำ
  1. ระบบ Header
    1.1 blank.php :: แฟ้มเปล่า ที่นำมาแก้ไข แล้ว save as เป็นแฟ้มอื่นได้
    1.2 header.php :: แฟ้มส่วนหัว ใช้ควบคุม css และ body อย่างง่าย ๆ
    1.3 menu.php :: แฟ้มเก็บตัวเลือกหลัก ที่อยู่ทางด้านซ้าย
    1.4 footer.php :: แฟ้มส่วนล่างสุด สำหรับรายละเอียด เช่น ชื่อหน่วยงาน
  2. การใส่ตัวเก็บสถิติของ truehits.net
    2.1 รหัสคำสั่งใน html
    2.2 รหัสคำสั่งใน perl
    2.3 รหัสคำสั่งใน asp
    2.4 รหัสคำสั่งใน php
  3. footer แบบต่าง ๆ ที่ใช้ใน thaiall.com
    3.1 footer2.htm ใช้ระหว่างมกราคม 2547 - สิงหาคม 2547
    3.2 footer3.htm ใช้ตั้งแต่กันยายน 2547 - มีนาคม 2548
    3.3 footer6.htm เริ่มใช้มีนาคม 2548
    3.4 footer10.htm เริ่มใช้กรกฎาคม 2551
  4. Google.com Search และมี Banner ของเราในผลสืบค้น
  5. Expert Script ที่น่าสนใจ ทำให้ดูเป็นมืออาชีพ
  6. แบบเสนอ หรือข้อแนะนำเกี่ยวกับรูปแบบโฮมเพจของหน่วยงาน
    เว็บไซต์ที่ใช้ header footer และ menu
    1. 101-idea.com
    2. leasinglampang.com
    3. lampangdisaster.com
    4. aclalumni.com
ใน บทความไอทีในชีวิตประจำวัน ที่เขียนด้วย PHP
ผมได้เพิ่มตัวเลือกสั่ง export เป็น .doc ด้วย
header('Content-type: application/msword');
บทนำ

ระบบ Header อัตโนมัติ ที่ใช้วิธี require จาก external file เคยทดสอบใช้ใน thaiall.com ประมาณปี 2542 - 2543 แต่ต้องยกเลิกไป เพราะมีปัญหาเรื่องปริมาณข้อมูลเข้าออก (Over Datatransfer) และความหลากหลายของรูปแบบเว็บเพจ ทำให้การใช้ระบบ header และ footer ที่ผมใช้ในปัจจุบันเป็นแบบ static มิใช่ dynamic อย่างที่ควรจะเป็น
อีกเหตุผลหนึ่งคือ เว็บเพจของ thaiall.com มากกว่าครึ่ง มีเว็บเพจสำรอง (Backup Webpage) หรือเว็บเพจกระจก (Mirror Webpage) ไว้ในเครื่องบริการหลายแห่ง เช่น hypermart.net, thcity.com, topsiam.com, korattown.com หรือ siamdhost.com เป็นต้น
แนวคิดนี้เคยคิดจะใช้ในสถาบันการศึกษาระดับอุดมศึกษา แต่มีปัญหาเรื่อง การเปลี่ยนรุ่น (version) ผู้ดูแล (Administrator) และนโยบายของการพัฒนา (Policy) ความหลากหลายของหน่วยงาน จำนวนเครื่องบริการต่างประเภท จึงต้องพักแนวคิดนี้ไว้ก่อน และรอเวลาที่เหมาะสม
แล้ววันหนึ่งผมก็มีโอกาสพัฒนา และวางระบบเว็บให้หน่วยงานของราชการระยะหนึ่ง ซึ่งมีคุณสมบัติเหมาะจะใช้ระบบ Header และ Footer อย่างมาก คือ มีเมนูหลักในทุกหน้า ไม่จำกัด datatransfer, ไม่จำกัดปริมาณการประมวลผลด้วย php ทำให้เว็บทุกหน้าของที่นี่ทำด้วย php เพราะสะดวกกว่าการใช้ ssi ใน perl หรือการใช้ Static Webpage
จึงเริ่มด้วยการออกแบบ แล้วสร้าง blank.php ให้สมบูรณ์แล้วค่อย save as เป็นเว็บเพจอื่นตามต้องการ โดยแฟ้มนี้จะเรียกใช้ header.php, menu.php และ footer.php ทำให้สามารถควบคุมส่วนต่าง ๆ ได้ง่าย รวมถึงการปรับการอธิบาย meta ให้เป็นแบบ dynamic เพื่อให้ข้อมูลแก่ search engine ที่เข้ามาดูด keywords และ description อย่างถูกต้อง แม้เมนูในแต่ละหน้าจะไม่เหมือนกัน ก็สามารถควบคุมด้วย header.php ได้
1. ระบบ Header
1.1 blank.php
:: แฟ้มเปล่า ที่นำมาแก้ไข แล้ว save as เป็นแฟ้มอื่น ๆ ต่อไป

โปรแกรมนี้ทำหน้าที่เรียกโปรแกรม 3 โปรแกรมมาแสดงผล แต่มิได้แยกส่วน head จริง ๆ ออกไป เพราะเว็บแต่ละหน้าจำเป็นต้องมี meta เกี่ยวกับ keywords และ description ซึ่งแตกต่างในทุกหน้า ถูกเตรียมไว้ให้ robot จาก search engine ต่าง ๆ เข้ามาดูดไปทำฐานข้อมูล
<html><head><title>สำนักงานเทศบาลนครลำปาง (Lampang City Municipality)</title>
<meta name="Keywords" content="เทศบาล,ลำปาง">
<meta name="Description" content="สำนักงานเทศบาลนครลำปาง">

<? require("header.php"); ?>
<? require("menu.php"); ?>
<! ส่วนกลาง >
<td width=450 valign=top>
<! === >
abc abc
<! === >
<? require("footer.php"); ?>
</body></html>

1.2 header.php :: แฟ้มส่วนหัว ใช้ควบคุม css และ body อย่างง่าย ๆ

ส่วนนี้จะซ้ำ ๆ กันในทุกหน้า เพราะทำหน้าที่กำหนด style และ body หากนักพัฒนาต้องการทำให้เป็น dynamic คือเปลี่ยนสีทุกครั้งที่เปิดเว็บ ก็สามารถแก้ไขในส่วนนี้ได้โดยง่าย และเป็นการประหยัดเนื้อที่เก็บแฟ้ม ของหน้าเว็บต่าง ๆ ที่คัดลอกจาก blank.php ไป
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type=text/css>
A:link {COLOR:#FF0000; TEXT-DECORATION:none;font-size:10pt;font-family:microsoft sans serif;}
A:visited {COLOR:#0000FF; TEXT-DECORATION:none;font-size:10pt;font-family:microsoft sans serif;}
A:hover {COLOR:#FF0000; TEXT-DECORATION:none;font-size:10pt;font-family:microsoft sans serif;}
body {font-family:microsoft sans serif; font-size:10pt;}
td {font-family:microsoft sans serif; font-size:10pt}
</style>
</head>
<body text=blue vLink=purple aLink=red link=blue bgColor=white topmargin=0 leftmargin=0>

1.3 menu.php :: แฟ้มเก็บตัวเลือกหลัก ที่อยู่ทางด้านซ้าย

ใช้แสดงเมนูทางด้านซ้าย หากเจ้าของเว็บต้องการให้มีเมนูด้านซ้ายในทุกหน้าเว็บ การแก้ไขจะต้องถูกพิจารณาเป็นอันดับแรก หากไม่ใช้โปรแกรมช่วยจัดการอัตโนมัติ จะจัดการได้ยุ่งยาก การใช้ menu.php ใน case นี้จะช่วยให้การแก้ไขทำได้ง่ายอย่างมาก
<table bordercolordark=black width=755 bordercolorlight=black border=0>
<tr><td width=170 valign=top align=center>

<! start of left>
<table width=95% border=0 align=center cellpadding=0 cellspacing=1>
<tr bgcolor=#009999><font color=white><b>:: เทศบาลนครลำปาง ::</b></font></td></tr>
<tr bgcolor=#ffffdd><td>
<?
$x = str_replace("/", "_", $PHP_SELF);
$x = str_replace(".", "_", $x);
if ($x != "_main_php") {
echo "<img src=/img/bot1.gif> <a href=/ target=_top>หน้าแรก</a><br>";
}
?>
<img src=/img/bot1.gif> <a href=/localgov/localgov.php>การปกครองส่วนท้องถิ่น</a><br>
<img src=/img/bot1.gif> <a href=/gen/history.php>ประวัติการจัดตั้ง</a><br>
<img src=/img/bot1.gif> <a href=/gen/counciller.php>คณะเทศมนตรี</a><br>
<img src=/img/bot1.gif> <b><a href=/webboard>กระดานข่าว เทศบาลนคร</a></b><br>
</td></tr></table>
<? } ?>
<! end of left >
</td>

1.4 footer.php :: แฟ้มส่วนล่างสุด สำหรับรายละเอียดเช่น counter ชื่อหน่วยงาน เป็นต้น

เว็บเพจที่ดีส่วนใหญ่ควรมีส่วนปิดหน้าเว็บ ที่บอกรายละเอียดต่าง ๆ ของนักพัฒนา เช่น e-mail หรือ โทรศัพท์ นอกจากนี้ยังเป็นจุดที่เหมาะจะใส่ counter ที่ใช้นับจำนวนผู้เข้าใช้บริการ ทำให้ทราบความก้าวหน้าของเว็บไซต์ได้เป็นอย่างดี
</td></tr></table>
<! ==============================>
<table width=100% cellpadding=0 cellspacing=0 border=0 bgcolor=black>
<tr bgcolor=#cccccc><td height=2 colspan=2></td></tr>
<tr bgcolor=#808080><td height=4 colspan=2></td></tr>
<tr bgcolor=#404040><td height=5 colspan=2></td></tr>
<tr><td width=200 align=center><font color=yellow>
<?
$x = str_replace("/", "_", $PHP_SELF);
$x = str_replace(".", "_", $x);
?>
<SCRIPT LANGUAGE="javascript1.1">page="<?=$x; ?>";</SCRIPT>
<SCRIPT LANGUAGE="javascript1.1"
src="http://hits.truehits.in.th/data/h0000001.js"></SCRIPT>
</td>
<td align=center><font color=white>
<b>สำนักงานเทศบาลนคร (City Municipality)</b><br>
<br> Copyright 2003. By...City Municipality
</td></tr></table>

2. การใส่ตัวเก็บสถิติของ truehits.net
2.1 รหัสคำสั่งใน html
<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_webboard";</SCRIPT>
<SCRIPT LANGUAGE="javascript1.1" src="http://hits.truehits.in.th/data/h0000001.js"></SCRIPT>

2.2 รหัสคำสั่งใน perl
#!/usr/bin/perl
# <!--#exec cgi="/cgi/bottom.pl"-->
print "Content-type:text/html\n\n";
$x = $ENV{'SCRIPT_URL'};
$x=~s/\//_/g;
print '<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_';
print $x;
print '";</SCRIPT>';
print '<SCRIPT LANGUAGE="javascript1.1" src="http://hits.truehits.in.th/data/h0000001.js"></SCRIPT>';

2.3 รหัสคำสั่งใน asp
<%
' <!--#include file="scripturl.asp"-->
s = replace(request.servervariables("SCRIPT_NAME"),"/","_")
s = replace(s,".","_")
response.write("<SCRIPT LANGUAGE=javascript1.1>page='lampang_go_th_" & s & "';</SCRIPT>")
response.write("<SCRIPT LANGUAGE=javascript1.1 src=http://hits.truehits.in.th/data/h0000001.js></SCRIPT>")
%>

2.4 รหัสคำสั่งใน php
<?
# require("counter.php")
$s = $_ENV["SCRIPT_NAME"];
$s = str_replace("/","_",$s);
$s = str_replace(".","_",$s);
echo '<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_' . $s . '";</SCRIPT>';
echo '<SCRIPT LANGUAGE="javascript1.1" src="http://hits.truehits.in.th/data/h0000001.js"></SCRIPT>';
?>

3. footer แบบต่าง ๆ ที่ใช้ใน thaiall.com
3.1 footer2.htm
ใช้ระหว่างมกราคม 2547 - สิงหาคม 2547

3.2 footer3.htm
ใช้ตั้งแต่กันยายน 2547 - มีนาคม 2548

3.3 footer6.htm
ใช้ตั้งแต่มีนาคม 2548

4. Google.com Search
และมี Banner ของเราในผลสืบค้น

5. Expert Script ที่น่าสนใจ ทำให้ดูเป็นมืออาชีพ
หลายครั้งที่พัฒนาเว็บไซต์ให้บริษัท แล้วเขาไม่มีอะไรจะนำเสนอ ก็ได้ script เหล่านี้ ทำให้เว็บไซต์มีเนื้อหาน่าสนใจอย่างน่าประหลาด คนไม่รู้ก็นึกว่า เว็บไซต์นี้ขยัน .. เหลือเชื่อ ลองนำไปใช้ดูนะครับ คนทำข่าวเขาจะได้ภูมิใจว่ามีคนใช้โปรแกรมที่เขาพัฒนา
การทำดีย่อมได้ดี .. ขอส่งเสริมให้คนไทย เชื่อมั่นในคำกล่าวนี้
แนะนำเว็บไซต์ใหม่ : แก้วสารพัดนึก : ฟรีโฮมเพจ : ฟรีอีเมล : korattown.com : siamdhost.com : topsiam.com : มหาวิทยาลัยเนชั่น
ทีมงานชาวลำปาง ที่ มีฝันเพื่อการศึกษา โทร.08-1992-7223
ขอบคุณที่เข้ามาเยี่ยมเยือน .. แล้วเข้ามาใหม่นะครับ .. ยินดีต้อนรับเสมอ