thought snippets » webdev

สร้าง Sitemap ด้วย HTML+CSS3

nice — Thu, 11 Mar 2010 12:52:17 +0000

สำหรับคนที่ทำเว็บและใช้เว็บก็คงจะคุ้นเคยกันดีกับหน้า sitemap ซึ่งโดยปกติก็จะเป็นหน้าที่รวบรวมลิงค์ไปยังทุกๆหน้ามาเรียงกันไว้อย่างมีระบบ สำหรับตัวเราเองเวลาทำเว็บแล้วก็จะทิ้งส่วนนี้ไว้เป็นส่วนสุดท้าย ซึ่งยอมรับเลยว่าบางครั้งไม่อยากทำเท่าไหร่ เพราะมันออกแนวน่าเบื่อและสำหรับหลายๆงานมันก็ไม่ได้อยู่ใน requirement ด้วยซ้ำ แต่ก็ต้องทำเพราะเป็นส่วนที่ควรจะทำ ซึ่งเวลาทำเข้าจริงๆแล้วก็ไม่พ้นต้องใช้ unordered list ไปเรื่อยๆ เหตุผลเพราะมันง่ายที่สุด แต่ผลลัพท์ที่ได้ออกมาก็ไม่ได้สวยงามเลยซักนิด

วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้

โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง ว่าไปเยอะแล้ว มาดูโค้ทบ้าง

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

ในส่วนของ HTML ก็จะใช้ unordered list ตามปกติ สามารถใส่ซ้อนกันไปได้เรื่อยๆ เช่น


  Home
    
      Product
          
            Computer
            Printer
            Scanner
          
      
      Client
      About
      Contact

จากนั้นในส่วนของ css ก็จะเขียนให้มาควบคุมการแสดงผล โดยนอกจาก css แล้วยังได้ใช้รูป gif อีกทั้งหมด 4 รูปเพื่อให้ลากเส้นของโครงสร้างต้นไม้ ดังนี้

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

สุดท้ายก็ใช้ javascript hack สำหรับ ie โดยในที่นี้ใช้ ie-css3 ร่วมกับ jquery ประมาณนี้

*ไม่ต้องใช้ hack ก็ยังสามารถดู sitemap ได้ใน ie แต่เส้นที่ลากอาจจะผิดเพี้ยนไปบ้าง

แค่นี้ก็ได้ sitemap ง่ายๆ โดยไม่ต้องเสียเวลาไปกับมันมากอีกต่อไป!

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

แสดง Stat หน้าเว็บจาก Google Analytics

nice — Wed, 10 Feb 2010 11:15:48 +0000

จากบล๊อคที่แล้ว ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP ทำให้เกิดอยากเขียนสิ่งที่คนชอบให้เอามาไว้หน้าเว็บอีกอย่างหนึ่ง คือ Visible Stat หรือ Counter แบบเดิมๆที่เราเคยเห็นนั่นเอง ซึ่งโดยธรรมชาติของ google analytics นั้นเราไม่สามารถดึงจำนวนครั้งที่มีคนเข้าเว็บมาโชว์หน้าเว็บได้ แต่ด้วย Analytic Data Extract API ก็เลยทำให้มีวิธีดึงข้อมูลออกมาได้ เป็น counter แบบเชยๆที่คุ้นตาได้ ดังตัวอย่าง

GA Visible Stat

วิธีใช้ก็ง่ายๆ ดังนี้

โหลด GAAPI (เพื่อนบอกว่าอ่านว่า กะปิ -*-) ที่เขียนไว้จากบล๊อคที่แล้วก่อน ซึ่งไฟล์ที่เราจะนำมาใช้มีไฟล์เดียวคือ gaapi.class.php
เรียกคลาสมาใช้ โดยข้อมูลที่จะนำมาแสดงคือ All Time Page Views (คือจำนวนหน้าที่ถูกเรียกดูทั้งหมด)
```
include_once('gaapi.class.php');
$ga=new gaApi('google username','password','ga:site id');
$allTimeSummery=$ga->getAllTimeSummery();
```

จากนั้นก็แสดง Counter โดยใช้โค้ท HTML ร่วมกับ CSS สามารถเปลี่ยนแปลงหน้าตาได้ตามสะดวก
CSS:

#vGA{
	width: 100px;
	position: relative;
	font-size: 9px;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	padding-bottom: 15px;
	background: url(poweredBy.gif) no-repeat bottom left;
}
#vGA div{
	text-align: right;
	border: 2px solid #4f6db0;
	color: #555;
	line-height: 15px;
}
#vGA #vGALabel{
	background: #4f6db0;
	text-align: center;
	color: white;
	float: right;
	padding: 0 0 0 2px;
	margin: 0 0 0 2px;
}

HTML:



       Views

เซฟรูป Powered By Google นี้ไปไว้ในโฟลเดอร์เดียวกับไฟล์อื่น
Powered By

เท่านี้ก็ได้ Visible Stat จาก Google Analytic อย่างง่ายๆแล้ว ซึ่งหากต้องการให้แสดงข้อมูลอื่นๆนอกจาก Pageviews ก็สามารถทำได้โดยดูวิธีใช้งาน gaapi คลาสได้จากบล๊อคที่แล้ว ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP

เอาโค้ทมารวมกัน






getAllTimeSummery();
?>


       Views

ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP

nice — Mon, 08 Feb 2010 20:30:41 +0000

ปัญหามันเกิดจากบางครั้งเราทำเว็บให้คนที่ไม่ค่อยมีความรู้เรื่องคอม แล้วจะใช้ Google Analytic ในเว็บเขา ทีนี้ก็สมัคร Account ให้ เอาโค้ทมาใส่ให้ สอนให้ลอคอินเข้าไปดูสถิติในเว็บ google แต่ไม่นานก็จะเกิดงานเข้า เพราะเขาจำไม่ได้ว่าเข้าดูยังไง ภาษาอังกฤษใช้ไม่คล่อง ฯลฯ ก็เลยอยากจะเอาสถิติจาก GA มาไว้ในหน้าแรกของ backoffice เว็บเขาเลย จะได้ดูชัดๆ ง่ายๆ ก็เลยนั่งเขียน PHP class เพื่อติดต่อกับ Google Analytic Data Export API(จริงๆมันก็ยังอยู่ใน lab แต่พอใช้งานได้) และก็ใช้ Google Chart มาช่วยในการแสดงผล ได้ออกมา ดังนี้

Screenshot:

Google Analytic Data Export API with PHP

เขียน PHP Class โดยใช้ cURL เพื่อติดต่อกับ Google โดย

การ auth นั้นจะทำโดย post ไปและหากลอคอินผ่านจะได้ token มาเก็บไว้
จากนั้นการดึงข้อมูลรายงานจะใช้ get โดยส่ง url ที่มีค่าที่ต้องการไป และส่ง token ไปด้วย
รูปแบบของรายงานที่ Google ส่งกลับมานั้นจะเป็น XML ก็ใช้ DOMDocument ค่อยๆ parse ค่าออกมา
นำค่ามาแสดง โดยหากต้องการใช้กราฟก็จะเรียกใช้ Google Graph

วิธีนำไปใช้งาน

ดาวน์โหลดโค้ทตัวเต็มได้ที่นี่ -> GAAPI

สร้างและเรียกใช้คลาส
โดยการ include ไฟล์ class เข้ามา และสร้างโดยต้องใส่ username, password และ site id(ดูได้จากใน google analytic account สังเกต id=xxxxxxxx ใน url)

include_once('gaapi.class.php');
$ga=new gaApi('google username','google password','ga:site id');
//e.g. ('myname@gmail.com','myPassword','ga:1234567');

Site ID ใน Google Analytic URL

Analytic ID

เรียกข้อมูลรายงาน
อันนี้ต้องเข้าใจเรื่อง Dimension และ Metric ของ Google Analytic Data Extract API ก่อน โดยหลักๆมันคือการเอา Dimension และ Metric มาผสมกันทำให้ได้ตารางรายงานออกมา โดยให้เรียกใช้ผ่าน method genReport(array) เช่น

$params = array ('metrics' 		=> 'ga:visits',
				'dimensions'	=> 'ga:source',
				'start-date' 	=> '2010-01-01',
				'end-date' 		=> '2010-02-09',
				'max-results' 	=> '5',
				'filter'		=> 'ga:source != (direct)',
				'sort'			=> '-ga:visits');
$result=$ga->genReport($params);
print_r($result);

สิ่งที่จะได้ออกมาก็จะเป็นชุดของ array หน้าตาประมาณนี้

Array
(
    [0] => Array
        (
            [ga:source] => google
            [ga:visits] => 5029
        )
    [1] => Array
        (
            [ga:source] => xxxxxxx.com
            [ga:visits] => 162
        )
    [2] => Array
        (
            [ga:source] => search
            [ga:visits] => 49
        )
)

แต่หากไม่อยากไปเรียนรู้อะไรของ Google มาก ในคลาสที่เขียนก็มีฟังก์ชั่นมาตรฐานไว้ให้ ดังนี้

$now=date("Y-m-d");
$lastmonth=date('Y-m-d', strtotime('-30 days'));

//Summery: visitors, unique visit, pageview, time on site, new visits, bounce rates
$summery=$ga->getSummery($lastmonth,$now);

//All time summery: visitors, page views
$allTimeSummery=$ga->getAllTimeSummery();

//Last 10 days visitors (for graph)
$visits=$ga->getVisits($lastmonth,$now,10);

//Top 10 search engine keywords
$topKeywords=$ga->getTopKeyword($lastmonth,$now,10);

//Top 10 visitor countries
$topCountries=$ga->getTopCountry($lastmonth,$now,10);

//Top 10 page views
$topPages=$ga->getTopPage($lastmonth,$now,10);

//Top 10 referrer websites
$topReferrer=$ga->getTopReferrer($lastmonth,$now,10);

//Top 10 visitor browsers
$topBrowsers=$ga->getTopBrowser($lastmonth,$now,10);

//Top 10 visitor operating systems
$topOs=$ga->getTopOs($lastmonth,$now,10);

โดยผลลัพท์ของแต่ละ method ก็จะออกมาเป็นชุดของ array มี key เป็นชื่อ dimension และ metric ตามตัวอย่างข้างต้น
*การเรียกใช้ให้ดูเทียบกับตัวอย่างที่นำไปสร้างเป็นตารางในโค้ทที่ให้จะเข้าใจง่ายขึ้น

ดาวน์โหลดโค้ทตัวเต็มได้ที่นี่ -> GAAPI

ใครโหลดไปแล้วเจอบักหรือต้องแก้ไขตรงไหนก็รบกวนแจ้งด้วยน๊า

IE6 ให้(ช่องว่าง)คุณมากกว่า

nice — Fri, 22 Jan 2010 13:24:21 +0000

ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float

กรณีศึกษา “กล่องหล่น”
ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels

เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้

IE8 Boxes

แต่ถ้าดูใน ie6 หล่ะ?

โค้ทเดิม ใน IE6

งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???!

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า

มาดูโค้ทกันก่อน อันแรกเป็น css

div#container{
	width: 400px;
	border:1px solid black;
}
div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
}
div#right{
	background: green;
	width:200px;
	float:left;
}

และ html


This is left content
This is right content

จะเห็นว่ามีกรอบ ขนาด 400 pixels และใส่กล่องเข้าไป 2 กล่อง คือ
- left ขนาด 195px รวมระยะห่างจากขอบ 5px เป็น 200px
- และ right ขนาด 200px

ถึงตอนนี้หลายๆคนอาจจะกลับมานั่งบวกลบคูณหารใหม่(แล้วก็แอบคิดว่าเราตกเลขหรือเปล่า) แต่คำนวนยังไงมันก็ไม่ผิดนี่หว่า แล้วมันเกิดอะไรขึ้น?

สิ่งที่เกิดก็คือ เมื่อมีการใช้คำสั่ง float แล้วให้มีช่องว่าง(margin) ในด้านที่ float ไป เจ้า ie6 จะทำการเบิ้ลช่องว่างนั้นไปอีกเท่าตัวโดยไม่มีสาเหตุ หรือที่รู้จักกันในนามว่า Double Margin Bug

ช่องว่างระหว่างเรา
ทดลองดูปัญหากันแบบชัดๆ ลองเขียน css ดังนี้

div#foo {
   float: left;
   border: 1px solid red;
   width: 50px;
   height: 50px;
   margin: 50px;
}

คือ สร้างกล่อง ขนาด 50×50 กรอบสีแดง และให้มีช่องว่างขนาด 50 pixel รอบๆกล่อง

จากนั้นก็เอาไปใส่ใน html แบบนี้

ดูๆโค้ทแล้วก็ไม่น่าจะมีอะไร แต่ลองเปิดดูใน ie6 เทียบกับ ie8

IE8

IE6

จะเห็นว่าใน ie6 มีช่องว่างเพิ่มขึ้นมาทางด้านซ้ายอีก 50 pixels หรืออีกเท่าตัวของที่ตั้งไว้

แก้ยังไงหล่ะ?
วิธีแก้ไขนี้ไม่ยาก แต่ขัดใจพอสมควร ก็คือการเพิ่ม display:inline เข้าไปยังกล่องที่มีปัญหา ดังนี้

div#foo {
   width: 50px;
   height: 50px;
   margin: 50px;
   float:left;
   border: 1px solid red;
   display:inline;
}

ผลลัพท์ใน ie6

IE6 after display:inline

จะเห็นว่าพื้นที่ว่างที่เพิ่มมาหายไปแล้ว ทีนี้ลองมาทำในกรณีกล่องหล่นของเราบ้าง
เพิ่มโค้ท display:inlie เข้าไป

div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
	display:inline;
}

ลองดูผลลัพท์

IE6 กล่องไม่หล่นแล้ว!

สรุป
จะเห็นว่าปัญหาที่เกิดมันดูไม่มีที่มาที่ไป และวิธีแก้ก็ไม่ค่อยถูกต้องตาม standard เท่าไหร่นัก(ตามหลักแล้ว element ที่ float จะไม่เป็น inline และจะไม่กำหนดความกว้างของ element ที่เป็น inline) แต่การรู้ปัญหาอย่างชัดเจนก็น่าจะช่วยให้แก้ปัญหาที่เจอได้อย่างมีหลักการมากขึ้นและเสียเวลาน้อยลง ซึ่งเจ้ากล่องหล่นนี้ไม่ใช่ปัญหาเดียวที่พบบ่อยใน ie6 ถ้าจะเอาทั้งหมดมาเขียนก็รวมกันได้เป็นมหากาพย์เลยทีเดียว ก็ได้แต่หวังว่าจำนวนผู้ใช้ ie6 ในบ้านเราจะลดลง(อย่างรวดเร็ว) เหมือนบ้างเมืองอื่นเขาซักที

จาก php ถึง ruby on rails

nice — Tue, 18 Aug 2009 15:10:13 +0000

จากคนเคยหากินกับ php มาเนิ่นนานจนจำไม่ได้แล้วว่าเริ่มเมื่อไหร่ แต่ด้วยความอยากรู้อยากเห็นเลยตั้งโจทย์กับตัวเองไว้ว่าโปรเจคส่วนตัวชิ้นต่อไปจะใช้ภาษาอื่นที่ไม่ใช่ php ซะบ้าง ก็เริ่มมองหาหลายๆตัวเลือก โดยพิจารณาจริงจังที่ python, ruby on rails และ java แล้วก็ลองศึกษาดูว่ามันยังไงกันบ้างนะ ลองอ่านลองเขียนอยู่นานสุดท้ายก็มาลงเอยที่ ruby on rails ด้วยเหตุผลหลายๆอย่างที่พอมาคิดๆดูก็ไม่ค่อยมีเหตุผลเท่าไหร่ แต่เอาหล่ะ rails ก็ rails

ทำอะไร?

พอเลือกภาษาได้ก็ต้องเลือกโปรเจค พอดีเป็นช่วงที่มีงานเว็บเล็กๆเข้ามาหลายเว็บ แต่ก็ตกลงกับลูกค้าไว้ว่าจะใช้ php ส่วนบางงานก็ต้องเขียนเผื่อคนอื่นมาใช้ต่อ สรุปว่าต้องตัดไป งานรับจ้างชาวบ้านจะมาใช้ภาษาแปลกๆไม่ได้ เกิดเราไปสะดุดยอดหญ้าที่ไหนตายไปเค้าคงหาคนทำต่อลำบาก

งั้นก็ต้องเป็นโปรเจคส่วนตัว ที่คิดไว้ว่าอยากทำก็มีอยู่มากมายมหาศาลทำเอาเลือกลำบากเหมือนกัน ก็เลยคิดว่าจะเลือกโปรเจคที่มีความซับซ้อนมากประมาณหนึ่ง เพราะถ้าเริ่มแบบที่ง่ายไปเวลาเรียนรู้ลองทำก็จะชิวเกิน ไม่กดดัน สรุปก็เลือกทำโปรเจคที่คุยกับเพื่อนไว้นานแล้วว่าอยากทำ คือทำเว็บสเปกสินค้าไอทีแบบเอาสินค้าต่างๆมาเปรียนเทียบกันตัวต่อตัว ฟังก์ชั่นต่อฟังก์ชั่นได้ ตั้งโจทย์เพิ่มเติมว่าจะต้องสามารถเปรียบเทียบข้ามสายพันธ์ได้ เช่น จะต้องเอา เลเซอร์ปริ้นเตอร์ อิงค์เจ็ท และดอทแมทริกซ์ มาเปรียนเทียบความเร็วในการพิมพ์ได้ และข้อมูลที่ลงจะต้องย่อยมาแล้ว คนเข้ามาใช้เว็บจะได้ไม่เกิด information overload

ยังไงดี?

พอเลือกโปรเจคได้ก็ลงมือศึกษา ruby on rails อย่างเต็มตัว ในตอนที่เริ่มนั้นบ้านเรายังหาหนังสือ ruby และ rails ไม่ค่อยได้(ตอนนี้เห็นมี 3-4 เล่มในตลาด) จะสั่งซื้อหนังสือจาก amazon ก็ไม่อยาก เพราะช่วงนั้นสั่งหนังสือ(ไร้สาระและมีสาระ)ไปหลายเล่ม ออกแนวเกินงบ ก็เลยใช้วิธีโหลดหนังสือเป็น pdf มา ก็อ่านลำบากหน่อย แต่ประโยชน์สูง ประหยัดสุด สรุปรวมๆอ่านไปสี่ห้าเล่มเห็นจะได้ บางเล่มก็อ่านไปลองทำไป บางเล่มก็อ่านผ่านๆ เพราะตัวอย่างเป็นเวอร์ชั่นเก่าและใน rails นั้นการเขียนโค้ทของแต่ละเวอร์ชั่นมีความต่างกันค่อนข้างมาก สรุปว่าใช้เวลาประมาณเดือนนึงเห็นจะได้ในการเรียนรู้อย่างลงเอียดก่อนลงมือเขียนจริง

เอาจริงหล่ะ

ตอนเอาจริงก็มีรายละเอียดมากมายที่ต้องตกลงกับตัวเอง เริ่มจาก text editor ก่อน ด้วยความที่ rails จำเป็นต้องใช้งาน text editor คู่ไปกับ console และเราเป็นคนที่ชอบ online editor คือ แก้ไฟล์ที่อยู่บนเซิฟเวอร์เลย ที่สำคัญคือใช้ทำงานบน mac ไม่ใช่ pc จึงจำกัดตัวเลือกลงบ้าง มองไปมองมาสรุปว่าเลือก coda เพราะสามารถอ่าน ruby ออกบ้าง ช่วย highlight โค้ทได้บางส่วน มี remote ssh และ preview ในตัวเลย ก็ถือว่าครบถ้วนกระบวนความ

จากนั้นก็ต้องดูเรื่องเซิฟเวอร์ ในมือก็มีอยู่หลายตัว ก็เลือกใช้ WHM/cPanel server ด้วยเหตุผลว่ามี plugin ให้ลง rails แบบง่ายๆไม่ปวดใจนัก ใช้เวลาไม่นานก็สามารถรัน rails app บนเซิฟเวอร์ได้โดยไม่ต้องออกแรงมากมายอะไร

รายละเอียดเรื่องเทคนิคครบถ้วน ก็ใช้เวลาร่วมสองเดือนเหมือนกันในการทำทุกอย่างขึ้นมา ตั้งแต่ design ไปจนถึง database ค่อยๆบรรจงเขียนไปวันละหน่อย ช่วงไหนงานเข้าก็เขียนได้น้อย งานไม่มีก็เขียนได้มาก(แต่ตังน้อย) กว่าจะปั้นจนเสร็จได้ก็แทบลากเลือกเหมือนกัน หลักๆเลยก็เพราะมันไม่มี sql ให้ query เหมือนสมัยเขียน php เมื่อทำฐานข้อมูลมาซับซ้อนมากๆก็ต้องใช้เวลาซักพักในการทำตัวให้คุ้นเคยกับ active record แต่พอเคยมือแล้วก็รู้สึกว่าใช้ง่ายดีเหมือนกัน จนบางครั้งกลับมาเขียน php ยังคิดถึง active record ของ rails บ้างเป็นครั้งคราว ส่วนเรื่องความต่างอื่นๆก็จะเป็นเรื่องของ mvc model, rest architecture และอะไรอื่นๆอีกยิบย่อยที่ต้องปรับตัวและเรียนรู้กันใหม่

สรุปเมื่อเสร็จ

พอเขียนเสร็จสมบรูณ์ก็กลับไปมองที่ทำลงไป มันก็ไม่ได้ดีอะไรเท่าไหร่และบางอย่างก็ยังไม่ best practice เท่าที่ควร แต่ก็ทำใจเพราะเป็นเว็บแรก ตัวเว็บนี่ไม่พอใจเท่าไหร่ แต่ความรู้ที่ได้จากการเขียน rails นี้ถือว่าคุ้มค่าพอสมควรทีเดียว ทั้ง MVC, REST, OOP และอื่นๆอีกมากมาย ก็ถือว่าได้เปิดหูเปิดตาจากการเขียน php อย่างเดียวมาเป็นเวลานาน รายละเอียดทางเทคนิคอื่นๆที่พบเจอหรือเป็นอุปสรรคในการเปลี่ยนจาก php มาเขียน ruby นั้นมีอีกมากพอสมควร ไว้มีเวลาเมื่อไหร่จะมาเขียนไล่ทีละตัว ส่วนตอนนี้ขอสรุปง่ายๆเกี่ยวกับตัว ruby ว่าเป็นภาษาที่เจ๋งมาก เขียนได้สนุกและยืดหยุ่น ส่วน rails นั้นก็เป็น framework ที่ออกแบบเป็นอย่างดีและ implement MVC model ได้อย่างลงตัวมากๆ แต่ยังไง php ก็ยังเป็นเครื่องมือหลักที่จะยึดหากินต่อไป โดยเอาความรู้ที่ได้จาก rails มาพัฒนาการเขียน php ของตัวเองให้ดีขึ้น

php oop #2: สร้างและห่อหมีแพนด้า

nice — Sat, 23 May 2009 15:31:53 +0000

จากโพสที่แล้ว php oop #1: panda class ว่าด้วยเรื่องการเขียน php oop แบบง่ายๆ แต่ดูไม่มีประโยชน์เท่าไหร่นัก เพราะถ้าดูดีๆมันก็ไม่ต่างจากเขียนฟังก์ชั่นเท่าไหร่ เลยมาว่าต่อถึงคุณสมบัติจริงๆของ object oriented บ้าง

เริ่มต้นจากอย่างแรกก่อน คือคอนเซปต์การ encapsulation หรือขอเรียกง่ายๆว่า การห่อ ซึ่งก็เป็นเหมือนการซ่อนข้อมูลภายในคลาสไว้ไม่ให้สามารถเข้าถึงได้โดยตรงจากส่วนอื่นๆของโปรแกรม ลองดูโค้ทกันเลยน่าจะง่ายกว่านั่งอธิบายให้ยืดยาว

class Panda{
   private $name;
   function eat(){
       echo "eating bamboo leaf";
   }
}

ก็เล่นกันง่ายๆเลย คือเปลี่ยนตัวแปร name ให้เป็น private ซะ คราวนี้การเรียกถึงตัวแปรแบบตรงๆอย่างที่เห็นในตัวอย่างที่แล้วก็จะไม่สามารถทำได้อีกต่อไป แต่เมื่อต้องการเรียกใช้เราก็อาจจะเพิ่ม method เข้าไป เช่น

function setName($pname){
   $this->name=$pname;
}
function getName(){
   return $this->name;
}

โดย method setName จะรับค่า name มาใน parameter ด้วย ส่วน getName จะไม่ทำอะไรนอกจาก return ค่าในตัวแปร name แล้วเวลาเรียกใช้ก็จะใช้วิธีเรียกหา method เช่น

$p1 = new Panda();
$p1->setName("Lin Hui");
echo $p1->getName();

จะเห็นว่า ถ้าเราไม่เขียน method get,set ขึ้นมาซะอย่าง ใครๆก็ไม่สามารถเข้าถึงข้อมูลภายในคลาสของเราได้ ซึ่งในแง่ของความปลอดภัยแล้ว การทำ encapsulation ถือว่ามีประโยชน์มากเลยทีเดียว

อีกเรื่องหนึ่งต้องรู้ในการเขียนโปรแกรมเชิงวัตถุใน php คือ การสร้าง constructor ของคลาส หรือมันก็คือการสร้าง method ที่จะทำงานตอนเราสร้างวัตถุจากคลาสนั้นๆเท่านั้น ซึ่งใน php นี้จะมีการใช้คำสั่งที่ต่างจากจาวาซักหน่อย คือ

class Panda{
   private $name;
   function __construct($pname){
      $this->name=$pname;
   }
}

ตามโค้ทก็คือ เมื่อมีการสร้างวัตถุจากคลาสนี้ method construct จะถูกเรียกใช้(และในวัตถุนี้จะไม่สามารถเรียกใช้ method construct ได้อีก) และรับค่า ชื่อหมี($pname) มาใส่ไว้ในตัวแปร name ดังนั้นตอนสร้างวัตถุก็ต้องมีการใส่ชื่อไปด้วย ดังนี้

$p1 = new Panda("Lin Hui");

คราวนี้เราเอาทั้งการ encapsulation และ constructor มารวมกัน โดยจะเขียนให้สามารถตั้งชื่อได้ครั้งเดียว และไม่สามารถเปลี่ยนได้ แต่ยังเอาไปใช้งานได้อยู่

class Panda{
   private $name;
   function __construct($pname){
      $this->name=$pname;
   }
   function getName(){
      return $this->name;
   }
}

$p1 = new Panda("Lin Hui");
echo $p1->getName();

จะเห็นว่าตอนสร้าง object เราจะต้องใส่ค่า(ชื่อ) ไปเลย และเมื่อตั้งชื่อไปตอนสร้างแล้วจะเปลี่ยนค่าไม่ได้ เพราะเราเอา method setName ออกไปแล้ว ซึ่งความสามารถในการจะทำแบบนี้ได้เป็นสิ่งที่มีประโยชน์มากในการออกแบบโปรแกรมแบบต่างๆได้ ก็แล้วแต่จะพลิกแพลงกันไป

จากตาราง เปลี่ยนเป็น Div

nice — Mon, 11 May 2009 07:34:40 +0000

วิธีง่ายๆที่จะเปลี่ยนจากการเขียน html layout โดยใช้ตารางมาเป็น css/div layout สำหรับคนที่กำลังลังเลที่จะใช้ css แทนตารางแบบเดิมๆ

ก่อนอื่นดูตารางก่อน

Table Layout

โค้ทของตาราง





This is Header



Main Menu
-Menu1

Content goes here!
This is content!

ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css

ออกมาจะหน้าตาเป็นแบบนี้

Css Div Layout

ก็คล้ายๆกัน ดูเผินๆก็ไม่มีอะไรต่าง แต่ทีนี้มาดูโค้ทกันบ้าง
ส่วนของ html จะเห็นว่าโค้ท html จะไม่ยุ่งยากเหมือนตอนทำตาราง ซึ่ง search engine จะชอบมากกว่า


This is Header
Main Menu
-Menu1
Content goes here!
This is content!

ส่วนของ css

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

สองส่วนนี้เท่านั้น เป็นอันจบ ไม่เจ็บปวดอย่างที่คิด ตอนเอามาประกอบรวมกันก็สามารถทำได้ 2 แบบ คือ

ใส่โค้ท css ไว้ในส่วน head ของ html ใต้ tag
แยกโค้ท css ไว้ในไฟล์ .css แล้วทำลิงค์ไปหา โดยใช้ tag

ซึ่งการแยกโค้ทออกไปนั้นมีประโยชน์หลายอย่าง เช่น

ลดเวลาโหลดหน้าต่อๆไป ประหยัดแบนด์วิธ เนื่องจากบราวเซอร์จะเก็บ cache ของไฟล์ css ไว้ในเครื่อง
สามารถแก้ไขได้ง่ายถ้านำไปใช้หลายๆหน้า html เพราะจะแก้ที่ไฟล์ css ที่เดียว
อีกทั้งในส่วน media=”xxx” นั้นสามารถกำหนดได้หลายอย่าง เช่น print,screen เพื่อเปลี่ยน layout สำหรับการดูแบบต่างๆ

การทำตารางไปเป็น div นั้นเป็นแค่การเริ่มต้นให้เห็นภายเท่านั้นว่าถ้าไม่มีตารางจะทำ layout อย่างไร ซึ่งถ้าใช้จริงๆแล้วตัว css จะสามารถใช้ทำหน้าเว็บได้อย่างอิสระมากกว่าใช้ตาราง และ powerful กว่ามากในแง่ของการออกแบบ ซึ่งมันแจ่มมาก และหากใช้คล่องๆแล้วจะพบว่ามันง่ายกว่าใช้ table มากมายนัก

php oop #1: panda class

nice — Sun, 08 Mar 2009 13:31:28 +0000

ว่ากันเรื่องการเขียนโปรแกรม php แบบ oop หรือ object oriented programming นั่นเอง

ก่อนจะไปว่ากันเรื่อง php ก็ต้องอธิบาย oop กันก่อน สำหรับคนที่คุ้นๆกันอยู่แล้วก็ข้ามไปได้เลย

เอาง่ายๆแบบไม่ยืดยาว oop คือการเขียนโปรแกรมที่ให้ความสำคัญกับ “วัตถุ” คุณสมบัติ และความสัมพันธ์ของมัน โดยมีศัพท์ที่ต้องรู้จัก ดังนี้

Class(ชนิดของวัตถุ) เป็นเหมือนเทมเพลท เพื่อบอกว่าวัตถุชนิดนี้จะมีคุณสมบัติใดบ้าง โดยคุณสมบัติประกอบด้วย 2 อย่าง คือ สถานะ(state) และ พฤติกรรม(behavior)

คลาส หมีแพนด้า มีสถานะคือ ชื่อหมี และมีพฤติกรรมคือ กินไผ่
Object(วัตถุ) สร้างขึ้นมาจากคลาส โดยเมื่อเป็นวัตถุแล้ว state จะกลายเป็น instance variable(ตัวแปรนั่นแหละ) และ behavior จะถูกเรียกว่า method

วัตถุ หมีแพนด้า ที่มีชื่อ หลินฮุ่ย สามารถ กินไผ่ ได้

นั่นคือ ถ้าพูดว่า “หมีแพนด้า” ขึ้นมาลอยๆโดยไม่ระบุวัตถุว่าเป็นแพนด้าตัวไหน มันก็จะไม่มีชื่อ และกินไผ่ไม่ได้ งงไหม? ถ้างงก็ลงไปดูโค้ท php กันเลย มันง่ายกว่า จริงๆ

โค้ทตัวอย่างการใช้ oo ใน php แบบง่ายๆ โดยใช้เราจะสร้างคลาสแพนด้ากันก่อน

class Panda{
   var $name;
   function eat(){
       echo "eating bamboo leaf";
   }
}

เมื่อได้คลาสแล้ว มันก็จะไม่มีประโยชน์ใดๆ ถ้าเราไม่สร้างวัตถุขึ้นมาใช้เจ้าคลาสนี้

$p1 = new Panda();
$p1->name="Lin Hui";
$p1->eat();

อธิบายโค้ทคือ
บรรทัดที่ 1 สร้างวัตถุจากคลาส แพนด้า ใส่ในตัวแปรชื่อ p1
บรรทัดที่ 2 ใส่ค่า name ว่า “Lin Hui” ให้วัตถุชนิดแพนด้า p1 นี้
บรรทัดที่ 3 สั่งให้หลินฮุ่ยกินไผ่ เมื่อจบบรรทัดนี้จะมีข้อความ “eating bamboo leaf” พิมพ์ออกมา

ถ้ากลัวหลินฮุ่ยเหงา เราก็จะสร้างแพนด้าขึ้นมาอีกตัว ชื่อ ช่วงๆ โดยเราจะสร้างแค่วัตถุเพิ่ม โดยไม่ยุ่งกับคลาสเลย

$p2 = new Panda();
$p2->name="Chung Chung";

ทีนี้เอาโค้ทมารวมกัน แล้วสั่งให้พิมพ์ชื่อหมีออกมาทั้งสองตัว

class Panda{
   var $name;
   function eat(){
       echo "eating bamboo leaf";
   }
}

$p1 = new Panda();
$p1->name="Lin Hui";

$p2 = new Panda();
$p2->name="Chung Chung";

echo $p1->name;
echo "
";
echo $p2->name;

ก็คงจะเดากันได้ ว่าผลลัพท์ที่จะได้ก็คือจะมีข้อความ
Lin Hui
Chung Chung
พิมพ์ออกมา ซึ่งแสดงว่าตัวแปรในทั้งสอง object นั้นถูกเก็บแยกเป็นอิสระจากกัน

เรื่องแพนด้าและวัตถุนี้ก็เอาไว้คร่าวๆแค่นี้ก่อนให้มองเห็นภาพวิธีการเขียน php แบบ object oriented โดยไม่ได้หวังว่าจะเป็นประโยชน์แก่ใครเท่าไหร่นัก เขียนเพื่อความมันส์ส่วนตัวล้วนๆ แต่ถ้ามีใครอ่านแล้วได้ประโยชน์ก็(แอบ)ดีใจด้วย!

ie6.png !

nice — Mon, 08 Dec 2008 16:16:15 +0000

ไฟล์ .png กับการทำเว็บสมัยนี้เป็นของคู่กัน ซึ่งคนที่รู้จักกับมันแล้วจะลืม .gif ไปเลย หลักๆคือความสามารถในการทำให้ส่วนใดๆของภาพโปร่งแสง(transparent) และพื้นหลังใสได้อย่างสนิทใจ

แต่ปัญหามันก็เกิดกับบราวเซอร์ที่รักเจ้าเก่าของเรา ไม่ใช่ใครที่ไหน ie6 นั่นเอง สำหรับคนทำเว็บแล้วก็อยากจะลืมๆเจ้าบราวเซอร์นี้มันไปซะ แต่พอเหลือบมาดูสถิติ browser ที่ใช้กันในบ้านเราแล้วก็ไม่สามารถจริงๆ (Truehits.net::2008-11 IE6 51.1%) ดังนั้นก็ต้องมาตามแก้กันไป

วิธีทำให้ไฟล์ png แสดงผลได้อย่างปกติสุขใน ie6 นั้นมีหลายวิธีแล้วแต่ความถนัด สำหรับวิธีที่จะพูดถึงนี้ส่วนตัวแล้วชอบเพราะว่าไม่ต้องดัดแปลงโค้ทมากนัก ก่อนอื่นก็มาดูการแสดงผลไฟล์ png ของ ie6 เทียบกับ ie7 กันก่อน

Original PNG File

IE7

IE6 !!!

จะเห็นว่าใน ie6 นั้นส่วนพื้นหลังมันไม่ใสจริง แต่มีพื้นที่สีเทาๆมาทับ background(รูปไม้บรรทัด) ด้านข้างหมด คราวนี้มาดูวิธีแก้กัน

IE PNG FIX

โค้ทที่ใช้แก้นี้คือ iepngfix ต้นฉบับคือ Twin Helix: IE PNG Fix

วิธีใช้งานก็ง่ายๆ ไม่ปวดสมอง โดย

ดาวน์โหลดไฟล์ iepngfix.zip ได้ที่เว็บต้นฉบับเลย
แตกซิปแล้วนำไฟล์ iepngfix.htc กับ blank.gif ไปใว้ในโฟลเดอร์ที่ต้องการ
เพิ่ม style เข้าไปในไฟล์ html คือ
```
 
```
โดยที่ url(“iepngfix.htc”) ใส่เป็น path เรียกไปหาไฟล์นี้ ทั้งหมดใส่ไว้ใน tag lte IE6 เพื่อบราวเซอร์อื่นๆ รวมทั้ง ie7+ จะได้ไม่ต้องสนใจมัน

จากนั้นรีเฟรชดูใหม่ใน ie6

IE6 ใช้ได้แล้ว!

หมายเหตุ: หากไฟล์ iepngfix.htc และ blank.gif ไม่ได้อยู่ที่เดียวกัน ให้เปิดไฟล์ iepngfix.htc ด้วย notepad และแก้ไข path ที่ IEPNGFix.blankImg = thisFolder + ‘blank.gif’; <–อาจแก้เป็น absolute path เช่น IEPNGFix.blankImg =’/images/blank.gif’;

เว็บไซต์…ไม่ใส่ตาราง

nice — Thu, 06 Nov 2008 03:15:04 +0000

มันเริ่มจากการอ่านเว็บไปเรื่อยๆและเจอกระแส tableless html layout มานาน แต่ก็บอกตัวเองว่าไม่มีเวลาสักทีที่จะเปลี่ยนสไตล์การเขียนเว็บของตัวเองจาก “old school html” ที่เน้นใช้ตารางในการจัดหน้า html มาเป็น css based layout ที่ใช้ div และ css เป็นหลัก บอกว่าไม่มีเวลาจริงๆแล้วก็เป็นข้ออ้างนั่นแหละ เพราะการเปลี่ยนจากสิ่งที่คุ้นเคยมาใช้อะไรใหม่ๆมันต้องเรียนรู้อะไรมากมาย ทำให้ไม่อยากจะเปลี่ยนแปลงอะไรในบางจังหวะของชีวิตที่ยึดเอาความขี้เกียจเป็นที่ตั้ง จนกระทั่งได้จังหวะก็เริ่มมาศึกษาจริงๆจัง กว่าจะเขียนได้คล่องก็ไม่ง่ายแต่ก็ไม่ได้ยากมากมายอย่างที่คิดไว้

มันคืออะไรบ้างนะ?

“table based html” หรือที่เรียกกันว่า old school html table ก็คือการจัดหน้าเว็บโดยใช้ html table หรือ ตาราง เป็นหลัก ซึ่งเป็นการเขียนแบบที่ทำกันมานานแล้ว จะจัดหน้าหรือกำหนดอะไรก็มันจะใส่ลงไปในโค้ทส่วนของตารางเลย

“css based layout”คือการใช้ cascading style sheet เข้ามาช่วยในการกำหนด layout และใช้ตารางเฉพาะส่วนที่เนื้อหามันเป็นตารางจริงๆ เช่น ตารางเปรียบเทียบ แมทริกซ์ต่างๆ โดยมักจะแยกไฟล์ css ออกจากโค้ทส่วนของเนื้อหาเว็บไซต์

ดีกว่ายังไง?

โหลดเร็วกว่า จากเดิมที่ในไฟล์ html จะต้องมีการกำหนดรูปแบบการแสดงผลที่ตาราง แต่หากเขียนแบบ css จะกำหนดการแสดงผลไว้ในไฟล์ css แยก ทำให้สามารถใช้ร่วมกันได้ในหลายๆหน้า และไฟล์ดังกล่าวจะถูกเก็บไว้ใน catch ของบราวเซอร์ และไม่ถูกโหลดซ้ำๆหลายๆหน ทำให้ผู้ใช้งานเปิดเว็บได้เร็วขึ้นและประหยัดแบนวิธของเซิฟเวอร์ได้อีกด้วย
แก้ไขรูปแบบการแสดงผลง่าย หากต้องการแก้ก็ไม่ต้องไปนั่งแก้ทั้งเว็บ เพียงแค่แก้ในไฟล์ css ก็จะส่งผลไปถึงทุกๆหน้า
เกิดผลดีต่อ search engine และโปรแกรมช่วยเหลือคนพิการ(ประเภท screen reader) ทำให้อ่านเนื้อหาในเว็บเราได้ดีขึ้น การใช้ css จะลดโค้ทส่วนการแสดงผลออกไปจากหน้า html ทำให้โปรแกรมเข้าถึงเนื้อหาจริงได้ง่ายขึ้น อีกทั้งการใช้ html tag ที่มีความหมาย(sementic) เช่น h1, h2, p ทำให้โปรแกรมเข้าใจเนื้อหาในเว็บเรามากขึ้น และเว็บมาสเตอร์สามารถกำหนดได้ว่าอยากให้โปรแกรมมองว่าส่วนไหนสำคัญ
search engine friendly ยกตัวอย่างเช่น หากเราออกแบบเว็บให้มีเมนูย่อยด้านซ้ายและเนื้อหาอยู่ด้านขวาและเราต้องการเน้นเนื้อหาด้านขวามากกว่าซ้าย หากใช้ตาราง โค้ทของเราจะมีเนื้อหาส่วนเมนูย่อยด้านซ้ายขึ้นมาก่อน และด้านขวามาทีหลัง ทำให้ search engine ให้ความสำคัญกับเนื้อหาที่มาก่อนมากกว่า แต่หากใช้ css เราสามารถเขียนเนื้อหาด้านขวาให้มาก่อน และด้านซ้ายมาหลัง จากนั้นจึงค่อยจัดการแสดงผลให้อยู่ในตำแหน่งที่ต้องการได้ โดยรักษาลำดับความสำคัญของเนื้อหาที่มีต่อ search engine ไว้ได้ครบถ้วน
out of the box หากใช้ css layout จนคล่องแล้วจะพบว่ามีวิธีการเขียนมากมายที่ทำให้สามารถเขียนเว็บไซต์ได้โดยไม่ถูกจำกัดโดยระบบของตาราง เช่น การซ้อนวัตถุต่างๆเป็นชั้นๆที่ตำแหน่งเดียวกันได้ การกำหนดให้วัตถุใดๆอยู่กับที่ก็ทำได้ และการจัดรูปแบบอื่นๆอีกมากมายตามแต่จะจินตนาการได้เลยทีเดียว
อื่นๆอีกมากมาย เช่น การที่โค้ท html ไม่รก ก็ทำให้ใช้งานคู่กับการเขียนภาษาโปรแกรมเช่น php แทรกลงไปได้ง่ายขึ้น ไม่ต้องสู้รบกับ tr th td เป็นต้น

มันยากกว่าใช้ table?

สำหรับคนที่เคยเขียนเว็บโดยใช้ table เป็นหลัก มันก็จะเกิดความยากขึ้นแน่ๆ เพราะต้องมานั่งเรียนรู้ เปลี่ยนวิธีคิด วิธีขึ้นโครงของเว็บซะใหม่ แต่หากตั้งใจจริงมันจะยากแค่ชั่วคราวเท่านั้น หลังจากฝึกใช้จนคุ้นเคยแล้วก็จะพบว่าบางอย่างยังจะทำได้ง่ายกว่าใช้ html table เสียอีก แต่ก็จริงอยู่ว่าบางส่วนจะพบว่าใช้ html table จะทำได้ง่ายกว่า และเสียเวลามากหากใช้ css เช่น การทำฟอร์มกรอกข้อมูล ซึ่งถ้าเจอปัญหาตรงนี้ จะกลับไปใช้ตารางบ้างก็คงไม่ว่าอะไรกัน

คุ้มหรือไม่?

ต้องยอมรับว่าการใช้ css ทำให้ทำเว็บได้ลำบากมากกว่าใช้ html table โดยเฉพาะช่วงแรกๆ คือใช้เวลามากกว่า และต้องวางแผนรูปแบบมาเป็นอย่างดี ไม่นับเวลาที่เสียไปในการเรียนรู้กว่าจะใช้ได้จนคล่อง จนบางครั้งหากมีงานเร่งรีบก็ต้องหันกลับไปใช้ตารางบ้างเหมือนกัน อีกทั้งหากต้องทำงานร่วมกับผู้อื่นก็อาจจะไม่ใช่ทุกคนที่สามารถใช้ css ได้อย่างคล่องแคล่ว ฉะนั้นไม่ใช่ว่าจะใช้ css มันไปทุกสถานการณ์โดยไม่ดูตาม้าตาเรือ ของทุกอย่างมีข้อดีและเสียของมันอยู่ การใช้ระบบตารางก็ไม่ใช่จะเป็นความผิดอาญาอะไร เพราะงั้น เลือกใช้เครื่องมือให้ถูกกับงานก็คงเป็นทางออกที่ดีที่สุดนั่นเอง

This is Header
Main Menu -Menu1	Content goes here! This is content!