Computer: 2014

16 October 2014

ก. เกม: [ Yii ตอนที่ 19 ] การใช้งาน Relations หรือการ join...

ก. เกม: [ Yii ตอนที่ 19 ] การใช้งาน Relations หรือการ join...: การใช้งานฐานข้อมูล จะต้องมีการสร้างความสัมพันธ์ ระหว่างตารางด้วยกัน ปกติใน mysql เราจะเคยชินกับการใช้ join table แต่ใน yii เราจะใช้ Relati...

23 September 2014

กำหนด FOREIGN KEY ใน Mysql ครับ

Storage Engine: ของตารางต้องเป็น InnoDB ก่อนนะครับ ถึงจะสามารถ add ได้

คำสั่ง SQL

ALTER TABLE `ตารางที่ต้องการกำหนด` ADD CONSTRAINT `ชื่อของการเชื่อมต่อ`
FOREIGN KEY ( `ชื่อของ attribute ของตารางที่จะกำหนด `)
REFERENCES `ชื่อตารางเป้าหมาย` ( `ชื่อของ attribute ของตารางเป้าหมาย` )
ON DELETE CASCADE ON UPDATE CASCADE;
----------------------------------------------------------------------------------------------------------------
ตัวอย่าง
ALTER TABLE `room` ADD FOREIGN KEY (`id`) REFERENCES `asset`.`area`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
----------------------------------------------------------------------------------------------------------------

ON DELETE CASCADE ON UPDATE CASCADE
เป็นการกำหนดว่า เมื่อ แก้ไข หรือ ลบ
แถวใน Primary KEY จะทำให้มีส่วนเปลี่ยนแปลง ที่ตาราง Foreign KEY ด้วย

แต่ถ้าไม่กำหนด คำสั่งข้างต้น จะทำให้ ไม่มีผล แต่กลับจะมีผลว่า เมื่อคุณต้องการที่จะลบข้อมูลใน Foreign KEY คุณจะต้องลบที่ Primary KEY ก่อนเสมอ ไม่อย่างนั้นจะลบไม่ได้ นะครับ

08 May 2014

รวมบทเรียน Yii Framework ทั้งหมด

06 May 2014

Testing การทดสอบ โปรแกรม Yii

การทดสอบเป็นกระบวนการที่ขาดไม่ได้ของการพัฒนาซอฟต์แวร์ เราควรให้ความสำคัญกับมันให้มาก และควรจะทดสอบทุกๆ ขั้นตอนในกระหว่างการพัฒนา ตัวอย่างเช่นเมื่อเราเขียนคลาส ใน php เพื่อใช้งาน เราอาจใช้ คำสั่ง echo, print, print_r หรือ functiondie(),exit() เพื่อ หยุดการทำงานของ methods และแสดงข้อมูลที่เราอยากรู้ว่าทำงานได้ถูกต้องตรงตามต้องการหรือไม่ และ เมื่อเราจะทดสอบหน้าเว็บที่มี ฟอร์มกรอกข้อมูล เราต้องกรอกข้อมูลลงไปในฟอร์มเพื่อทดสอบว่าเพจนั้นๅ ทำงานถูกต้องหรือไม่ นอกจากวิธีข้างต้นแล้วยังมีวิธีทดสอบการทำงานของโปรแกรม ที่สะดวกและรวดเร็วกว่า คือ ทำให้คอมพิวเตอร์ทำการทดสอบแทนเรา ซึ่งเรียกว่า "automated testing"

สำหรับ Yii Framework สนับสนุนการทำแบบนั้นอยู่ แล้วโดยจะมี unit testing และ functional testing.

Unit test คือ เป็นการทดสอบ ส่วนที่เล็กที่สุดของโค้ดว่าทำงานได้ถูกต้องหรือไม่ ในการเขียนโปรแกรมแบบ OOP ส่วนที่เล็กที่สุดของโค้ดก็คือ Class ดังนั้นการทดสอบการทำงานของ Class ก็จะมุ่งเน้นไปที่ methods การทำงานสัมพันธ์กันของ methods ใน Class โดยการป้อนพารามิเตอร์ที่แตกต่างกันเพื่อทดสอบดูผลที่ได้จาก methods ว่าถูกต้องหรือไม่ โดยที่ Unit tests ต้องถูกเขียนโดยผู้พัฒนาที่เป็นคนเริ่มเขียน Classes เชื่อเช็คความถูกต้องของ Classes นั่นเอง

Functional test เป็นการตรวจสอบความถูกต้องของ feature ต่างๆ ว่าทำงานถูกต้องหรือไม่ เช่น การจัดการ post ในระบบ blog ถ้าจะเทียบ Functional test กับ Unit test แล้ว Functional test จะเป็นการทดสอบการทำงานของหลายๆ Classes ซึ่งรวมกันขึ้นเป็นเป็นระบบ Functional tests สามารถทำได้โดยคนที่รู้ความต้องการโดยรวมของระบบทั้งหมด

--------------------------------------------------------------------
credit : http://www.mindphp.com
--------------------------------------------------------------------

ออกรายงาน pdf ด้วย Yii

ETcPdf เป็น extension ของ Yii Framework ซึ่งใช้ class หลักของ TCPDF ซึ่ง เจ้า TCPDF นี้ทางเว็บไซต์เราได้นำมาใช้ ทำ Pdf Creator online
วิธี
1. ดาวน์โหลด TCPDF จาก http://www.tcpdf.org/
2. ดาวน์โหลด TCPDF extension จาก http://www.yiiframework.com/extension/tcpdf/
unzip ไฟล์ ทั้งข้อ 1 และข้อ 2 ไว้ใน
protected/extensions/tcpdf/
ตัวอย่างการใช้งาน

<?php
$pdf = Yii::createComponent('application.extensions.tcpdf.ETcPdf', 
                            'P', 'cm', 'A4', true, 'UTF-8');
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor("Nicola Asuni");
$pdf->SetTitle("TCPDF Example 002");
$pdf->SetSubject("TCPDF Tutorial");
$pdf->SetKeywords("TCPDF, PDF, example, test, guide");
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->SetFont("times", "BI", 20);
$pdf->Cell(0,10,"Example 002",1,1,'C');
$pdf->Output("example_002.pdf", "I");
?>

------------------------------------------------------------------------------------------------------------------------

credit : http://www.mindphp.com/

------------------------------------------------------------------------------------------------------------------------

Profiling แสดงคำสั่ง SQL ของ Activerecord Yii Framework

แสดงคำสั่ง SQL ของ Activerecord Yii Framework
ประโยชน์ของมันคือ เราจะได้รู้คำสั่ง sql ที่ ถูกสร้างจาก Activerecord ตรงตามต้องการหรือเปล่า นอกจากนี้ เจ้า Profiling ยังรายงานให้เราทราบว่ารันคำสั่ง sql แต่ละคำสั่ง กี่ครั้งและแต่ละครั้งใช้เวลาเท่าไร
วิธี enableProfiling
เปิดไฟล์
protected/config/main.phpเพิ่ม
'enableProfiling'=> true,
ในส่วนของ
'db'=>array(....),

จะได้
        'db'=>array(
           'connectionString' => 'mysql:host=localhost;dbname=dbname',
           'emulatePrepare' => true,
           'username' => 'root',
           'password' => '',
           'charset' => 'utf8',
           'enableProfiling'=> true,
       ),
และเปลี่ยน
        'log'=>array(
           'class'=>'CLogRouter',
           'routes'=>array(
               array(
                   'class'=>'CFileLogRoute',
                   'levels'=>'error, warning',
               ),
เป็น
        'log'=>array(
           'class'=>'CLogRouter',
           'routes'=>array(
               array(
                   'class'=>'CProfileLogRoute',
                   'levels'=>'error, warning',
               ),เท่านี้เราก็จะเห็นคำสั่ง sql โชว์ขึ้่นมาด้านล่างทุกๆ หน้าของโปรแกรมของเราแล้ว
------------------------------------------------------------------------------------------------------------------------
credit : http://www.mindphp.com/
------------------------------------------------------------------------------------------------------------------------

เริ่มต้นกับ YII

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

11 April 2014

แก้ปัญหา php_mbstring.dll is missing ครับ

เมื่อเปิดใช้งาน extension ตัวนี้แล้วเกิดปัญหาในการโหลด module ของตัว php เองครับ

เราจึงต้องทำการแก้ไขลำดับการ load module ใน file php.ini ดังนี้

extension=php_mbstring.dll
extension=php_exif.dll

โดยย้าย extension=php_mbstring.dll ขึ้นมาให้อยู่บน extension=php_exif.dll
เพื่อให้ php โหลด module mbstring ก่อนครับ เท่านี้ error ก็จะหายไปแล้วครับผม

^ ^

02 April 2014

แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด

การเริ่มต้นอย่างถูกวิธีและมีแนวทาง ถือเป็นก้าวสำคัญที่สามารถส่งผลให้การเรียนรู้ ศึกษาเรื่องราวใดๆ ก็ตามเป็นไปอย่างมีแบบแผนและพัฒนาก้าวหน้าได้อย่างรวดเร็ว ไม่ต้องไปเสียเวลาทดลองหรือซุ่มเสี่ยงในสิ่งที่ยังไม่รู้ว่าถูก หรือผิด เพียงแค่เอาเวลาที่เหลือนั้นไปพัฒนา ต่อยอดสิ่งที่มีอยู่นั้นให้ดียิ่งขึ้นไป

แต่ถ้าหากว่า สิ่งที่มันมีอยู่นั้น มันอยู่ตรงไหนกัน “คำถามนี้ ถือเป็นปัญหาหลัก” ในแวดวงการทำงานในส่วนของ CSS และ HTML ของเมืองไทยเรามาหลายปี หรือจะบอกได้ว่าตั้งแต่เริ่มมีคำว่า Tableless หรือ CSS ไหลเข้ามาในหัวของนักพัฒนาเว็บชาวไทยโน่นเลยก็ว่าได้

เพราะมันเพิ่งเริ่ม เพิ่งเกิด จึงไม่มี หรือมีน้อย ส่วนที่มีน้อยนั้นก็ใช่ว่าจะเปี่ยมไปด้วยคุณภาพ หรือที่มีอยู่ดันเปี่ยมไปด้วยความด้อยคุณภาพ จึงทำให้ส่วนงานที่กล่าวมานั้น ยังไม่มีแนวทางหรือต้นแบบในการเรียนรู้ ปฏิบัติอย่างชัดเจน

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

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

ผมอยากเพียงแค่ วางแบบแผน หรือแนะแนวทางสำหรับผู้ที่รัก จะเขียน CSS และ HTML เป็นอาชีพเป็นหลักนะครับ เพราะในบางประเด็นนั้น มันอาจจะฟังดูแล้วยากลำบากเกินกว่าคนที่ต้องทำแบบ ผ่านผิว

Guideline สำหรับ อาชีพเขียน CSS และ HTML

อย่าดูถูก HTML

ทำไมผมจึงต้องเอาเรื่องนี้ขึ้นก่อน ทำไมผมจึงพยายามบอกเสมอว่า HTML ไม่ใช่เรื่องง่าย ผมเคยคิดว่าภาษา HTML ง่ายมาก มาแล้ว และเขียน HTML แบบผิดๆ มานักต่อนัก สาเหตุหลักๆ เพราะไม่รู้จักว่า HTML มันมีอะไรบ้าง ซึ่งเมื่อก่อนเราเขียนเว็บด้วยการใช้ <table> เป็นตัวนำ มีอะไรก็ <table> กว่าจะรู้ว่า <table> นั้น คือ HTML tag หนึ่ง ที่เอาไว้จัดการกับข้อมูลที่แสดงเป็น “ตารางเอกสารเท่านั้น” ก็เสียจริตกันไปนาน

ก่อนที่เราจะเลือกใช้ HTML ในหน้าเอกสารของเรานั้น เราต้องรู้ก่อนเป็นอันดับแรกว่า เนื้อหาที่เรากำลังเขียนอยู่นั้น มันประกอบไปด้วยการแสดงผลแบบไหนบ้าง เช่น แบ่งกลุ่ม Layout ไหม แสดงผลเป็น List ด้วยหรือไม่ มี Form กี่อัน มีตารางหรือเปล่า แทรกรูปภาพตรงไหน

ซึ่งการคิดแยกแยะตามย่อหน้าข้างต้นนั้น ภาษา HTML มี tags เอาไว้จัดการกับเนื้อหาที่แตกต่างกันทั้งหมด เพราะฉะนั้น เราจึงจำเป็นต้องเรียนรู้ภาษา HTML ก่อนเป็นอันดับแรก แยกแยะให้ออกก่อนว่า จะใช้ Element ใด ตรงไหน ไม่ใช่ <div> แหลก

แยกให้ออกว่า อะไรคือ CSS และ อะไรคือ HTML เอามาใช้ร่วมกันยังไง

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

HTML คือ ภาษาโครงสร้าง ไม่มี HTML เราก็ไม่รู้จะเขียน CSS ไปจัดการกับอะไร นอกจากจะไปเขียนจัดการกับ XML หรือภาษาอื่นๆ ที่อนุญาตให้ CSS จัดการได้ แต่ในที่นี้เราพูดถึง HTML

CSS คือภาษาที่เอาไว้ทำให้ HTML แสดงผลให้สวยงามตามท้องเรื่องในอุปกรณ์ต่างๆ (User Agents)

เพราะฉะนั้น ทั้งสองภาษาจึงควบคู่กันไป

เริ่มศึกษา HTML อย่างมีหลักการ

ผมคงไม่สามารถขอให้ทุกๆ คนเข้าไปอ่านวีธีการเขียน HTML หรือ หลักการของภาษา HTML ใน W3C ได้ทั้งหมด ซึ่งที่ที่สามารถศึกษาได้เป็นอย่างดีก็คือ เว็บของ W3C อยู่วันยังค่ำ

โดยเราควรเริ่มจากเรียนรู้ว่า HTML5 มีพฤติกรรมข้อมูลอยู่ 7 ประเภท และกลุ่ม Element อยู่ 15 หมวดหมู่ โดย 7 ประเภทของ HTML5 นั้นเอาไว้แยกแยะรูปแบบการวางโครงสร้างของเอกสาร ส่วน 15 หมวดหมู่นั้น เอาไว้จัดการกับเนื้อหาแบบต่างๆ ที่เกิดขึ้น เช่น <article> เราต้องบอกได้ว่า tag <article> นั้น อยู่ในหมวดหมู่ Sections (จาก 15 หมวดหมู่) ซึ่งมีพฤติกรรมข้อมูล เป็น Flow content และ Sectioning content (จาก 7 ประเภท)

เมื่อมองย้อนกลับไปยัง XHTML การแยกแยะหมวดหมู่ของภาษา ไม่ได้แยกเหมือน HTML5 เพราะ XHTML นั้นถือเอาการวางโครงสร้างเอกสารเป็นหลัก XHTML จะแยก Element ออกตาม Modules ซึ่งแต่ละ Module นั้นจะดูจากการใช้งาน เช่น Text Module มีอะไรบ้าง หรือ List Module มีอะไรบ้าง หรือ Form Module มีอะไรบ้าง (ทั้งหมดประมาณ 17 Modules) แล้วค่อยไปเจาะจงอีกทีว่า ค่าพื้นฐานแสดงผลแบบไหน แล้วมีกฎการใช้งานยังไง ซึ่งจะสวนทางกับ HTML5 เพราะ HTML5 นั้นวางกฎการใช้งานตามประเภทมาก่อน เพื่อที่จะแยกแยะรูปแบบการเขียนทีหลัง

หมวดหมู่ Elements ของ HTML5

The Root Element: html
Document metadata: head, title, base, link, meta, style
Scripting: script, noscript
Sections: body, section, nav, article, aside, h1-h6, hgroup, header, footer, address
Grouping contents: p, hr, pre, blockqoute, ol, ul, li, dl, dt, dd, figure, figcaption, div
Text-level semantics: a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, mark, ruby, rt, rp, bdo, span, br, wbr
Edit: ins, del
Embedded content: img, iframe, embed, object, param, video, audio, source, canvas, map, area
Tabular data: table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
Forms: form, fieldset, legend, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter
APIs for the text field selections
Interactive: details, summary, command, menu
Link and link type
Common idioms without dedicated elements
Matching HTML elements using selectors

หัวใจสำคัญของการศึกษา HTML5 สำหรับทำเว็บ ให้เน้นทำความเข้าใจ 3 หมวดหมู่หลักนี้ก่อนครับ Sections, Grouping content และ Text-level Semantics หลังจากนั้น ค่อยขยับขยายไปหาอีก 12 หมวดหมู่ที่เหลือ

กฎการใช้งาน HTML5 Elements แยกตามพฤติกรรม

เมื่อเรารู้แล้วว่า Elements แต่ละตัว อยู่ในหมวดหมู่ไหน ขั้นต่อไป ให้ตามไปดูพฤติกรรมของเหล่า Element นั้นๆ คำว่า พฤติกรรมของเหล่า Element นั้นคืออะไรหรือ เอากันง่ายๆ ว่ากันซึ่งๆ หน้า คือ สิ่งที่จะบอกว่า “เราสามารถเขียน tag A เข้าไปใน tag B ได้หรือไม่” เพราะในภาษา HTML5 นั้น มีกฎเกณฑ์ควบคุมเอาไว้หมดแล้วครับ โดยที่ทั้ง 7 พฤติกรรมนั้น มีประมาณนี้

Metadata content คือ กลุ่มของ Elements ที่เอาไว้ตั้งค่าหรือบอกพฤติกรรมหลักของเอกสาร หรือเอาไว้แสดงความสัมพันธ์กับเอกสารอื่นๆ มี base, command, link,meta, noscript, script, style, title
Flow content โดยกฎพื้นฐาน Element เกือบทั้งหมดของ HTML5 นั้นมีพฤติกรรมเป็น Flow content อยู่แล้ว ข้อสำคัญที่สุดคือ ห้ามมี tag เปล่า
Sectioning content คือ กลุ่มที่เอาไว้แสดงรูปแบบความเป็นหน้าเอกสาร มี article, aside, nav, section
Heading content คือ กลุ่มที่เอาไว้บอกการเป็น “หัวข้อ” โดยหลักๆ แล้วเอาไว้ใช้ร่วมกับ Sectioning content โดยมี h1-h6 และ hgroup
Phrasing content คือ หน่วยที่ติดต่อโดยตรงกับ “ตัวหนังสือ” หรือ Element ที่เป็น Phrasing content ด้วยกันเอง หรือ ถ้าอยากจำให้ง่าย มันคือ “inline element” ตามแบบฉบับของ XHTML นั่นเอง ห้ามเอา Phrasing content ไปเขียนครอบ Element ใดๆ ที่ไม่ใช่ Phrasing content โดยเด็ดขาด เช่น อย่าเอา span ไป ครอบ aside หรือ อย่าเอา em ไปครอบ section
Embedded content คือ กลุ่มที่เอาไว้ แทรกเนื้อหาที่เป็น Media ทั้งหลาย หรือแทรกเนื้อหาจากแหล่งอื่น มี audio, canvas, embed, iframe, img, math, object, svg, video
Interactive content คือ กลุ่มของ Element ที่ทำหน้าที่ ปฏิสนธิกับผู้ใช้โดยตรง เช่น ปุ่มกดต่างๆ ส่วนมากจะอยู่ในหมวดหมู่ของ Form และ tag <a> ถือเป็น Interactive content ด้วย

โดยใน HTML5 Element ใดๆ นั้น สามารถมีพฤติกรรมได้มากกว่า 1 อย่าง ดั่งเช่น <article> ที่ผมยกตัวอย่างมาไว้ก่อนหน้า ซึ่งมีพฤติกรรมเป็นทั้ง Flow content และ Sectioning content

ขั้นตอนการเรียนรู้ CSS3

CSS3 แตกต่างไปจาก CSS2 แบบยกเครื่อง การเริ่มต้นเรียนรู้จึงจำเป็นต้องปรับเปลี่ยนรูปแบบไปด้วย ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module)

CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors

ใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลยครับ

CSS3 Modules ที่จำเป็นต้องเรียนรู้ก่อนเมื่อมีเวลา

CSS Selectors
CSS Background and Borders
CSS Color
CSS Fonts
CSS Basic Box model
CSS Multi-column layout
CSS 2D Transformations
CSS Transitions
CSS Animation
CSS Basic user interface
CSS Values and Units

ตัวอย่างการเริ่มต้นศึกษาก็เช่น CSS Basic Box Model คืออะไร และมันมีอะไรบ้าง

ส่วนประกอบ (Properties) ของ Module นี้ มีอะไรบ้าง คือคำถามหลักที่เกิดขึ้น เมื่อเราได้ยินคำว่า “Box Model” ให้จดจำเอาไว้ว่า มันมีประมาณนี้

ประเภทของ Box
1. Display
2. Block-Level
3. Run-in การสั่ง run-in นั้น กระทำก็ต่อเมื่อ เราต้องการเอา Element ที่เป็น formattedBlock มาเรียงต่อกันกัน ให้สั่ง display: run-in;
4. Compact
Padding
Margin ซึ่ง Margin แยกออกเป็น 2 แบบ
1. Margin properties ปรกติ
2. Collapsing Margins ใน Collapsing นี้ มันจะอยู่ใน <table>
Width และ Height
min-width, min-height, max-width, max-height
กฎการคำนาณ ความกว้าง สูงและ margins
Float
Overflow
Visibility

* หมายเหตุ คำถามต่อมา หลายคนคงอยากถามว่า แล้วไอ้ Element ของ HTML5 ที่มันเป็น Block element มันมีอะไรบ้างหละ? วิธีการจดจำ ให้มองไปที่ หมวดหมู่ของ HTML5 ในส่วนของ Sections และ Grouping Contents

เมื่อเรารู้ว่า HTML Element ที่เรากำลังสั่งงานอยู่นั้น คืออะไร เราก็สามารถที่จะใช้ Properties สั่งงานได้ถูกต้อง เช่น เช่น เราต้องการสั่งงาน <aside> ซึ่ง tag <aside> นั้นถือเป็น formattedBlock Candidate สามารถที่จะใช้ Properties ต่างๆ ที่เป็นของ Basic box model นั้น สั่งงานได้เลย

การสังเกตว่า Element ไม่มีคุณสมบัติเป็น Block Element ให้จดจำง่ายๆ คือ HTML5 เกือบทุกตัวที่มีพฤติกรรมเป็น Phrasing content โดยถ้าเราอยากให้ Elements เหล่านี้ต้องการเปลี่ยนรูปแบบการแสดงผลเป็น Block และสามารถใช้ Box model properties สั่งงานได้อย่างสมบูรณ์ เราสามารถทำได้โดย สั่งให้ Element นั้นๆ display เป็น block ก่อนได้ เช่น ถ้าเราต้องการสั่งงาน <abbr> ให้แสดงผลแบบ <footer> ให้ได้ เราสามารถเขียนได้ ประมาณนี้
abbr {display: block;} หลังจากสั่ง display เป็น block แล้ว เราก็สามารถใช้ properties อื่นๆ ที่สามารถใช้ได้กับ Block element โดยตรง

ง่ายๆ สำหรับหลักการ ในการเรียนรู้อย่างเป็นระบบคือ ให้มุ่งไปที่ Modules ต่างๆ ของ CSS3 ก่อน แล้วจดจำ Properties ที่มีอยู่ให้ได้ รวมถึงใช้ Values ให้เป็น

ผมขอ พักบทความยาวเยื้อยชิ้นนี้เอาไว้ตรงนี้ก่อนนะครับ บทความต่อๆ ไป ผมจะค่อยๆ แนะนำไม่ว่าจะเป็น CSS3 ในแต่ละ Modules หรือ HTML5 ในแต่ละกลุ่มพฤติกรรมข้อมูล และการนำไปใช้งานจริง ต่อไปเรื่อยๆ

มีความสุขกับการใช้ชีวิต ตามอัตภาพบ้าง จะเป็นไรไป อย่างน้อยชีวิตนี้ เราก็ไม่ได้ทุกข์ไปซะหมด

--------------------------------------------------------------
credit : http://thaicss.com/แนวทางการเรียนรู้ css3 และ html5/
--------------------------------------------------------------

Pages