Home

ตารางใน html5

ใน html5 ได้ปรับปรุงโครงสร้างตารางให้สามารถอธิบายข้อมูลภายในได้มากขึ้น โดยมีโครงสร้าง

<table border="1">
  <caption>
  ตารางเงินเดือน
  </caption>
  <thead>
    <tr>
      <th scope="cal">เดือนที่</th>
      <th scope="cal">เดือน</th>
      <th scope="cal">รายได้</th>
      <th scope="cal">รวม</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ม.ค.</td>
      <td>10,000</td>
      <td>10,000</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>ก.พ.</td>
      <td>1,000</td>
      <td>11,000</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>มิ.ค.</td>
      <td>1,040</td>
      <td>12,040</td>
    </tr>
  ...........
    </tbody>
  <tfoot>
    <tr>
      <td colspan="3">รวม</td>
      <td scope="cal">100,000</td>
    </tr>
  </tfoot>
</table>

จะเห็นส่วนที่เพิ่มมาคือ

  1. caption อธิบายรายละเอียดตาราง
  2. th จะใช้แทน td ในกรณีที่เป็นหัวตารางทั้งคอลัมน์และแถว (ทำไมไม่ใช้สดมและแถว ?) จะมี scope Attribute โดยมีค่า
    • col = คอลัมน์
    • colgroup = กลุ่มคอลัมน์
    • row = แถว
    • rowgroup = กลุ่มของแถว

    ถ้าเป็นคอลัมน์ที่เป็นผลรวมของทั้งตารางละ ?

  3. thead table tfoot คือ หัวตาราง เนื้อหา และท้ายตารางตามลำดับ

จะเห็นได้ว่าเป็นโครงสร้างที่สามารถอธิบายข้อมูลภายในได้มากกว่าเดิม น่าเสียดายที่ Adobe Dreamweaver ไม่ช่วยปรับพวก scope เวลารวมตารางต้องมาปรับเอง

db2:odbc

code เดิมติดต่อ database ผ่าน odbc (ถ้าเขียนใหม่ แนะนำให้ใช้ pdo จะดีกว่าครับ มี .dll อยู่ใน folder ที่ download มา) ดังนั้นจำเป็นต้องลง เวอร์ชั่นให้ตรงกับ windows ถ้าเราใช้ windows 64 bit ก็ต้องใช้ ก็ต้องใช้ version 64 เท่านั้น bit version 32 bit ลงได้แต่จะไม่มี odbc driver ใน ODBC Data Source Administrator
ถ้า db2 อยู่คนละเครื่องอาจจะลง db2 connect เพื่อที่จะลง driver เพิ่ม จะเจอใน fix tool ครับ
เราจะสามารถกำหนด datasource ได้ 3 แบบครับ

  1. user dsn จะสามารถใช้ได้เฉพาะผู้สร้างเท่านั้น
  2. systems dsn ผู้อื่นสามารถเรียกใช้ได้
  3. file dsn คือการเก็บ config ไว้ในรูปแบบไฟล์

แต่เพราะเครื่องผมเป็น windows 64 bit จะพบกับ error

SQLSTATE Error Description
IM014 The specified DSN contains an architecture mismatch between the Driver and Application (DM) 32-bit application uses a DSN connecting to a 64-bit driver; or vice versa.

ตอนนี้ยังไม่มี php 64 bit สำหรับ windows อย่างเป็นทางการครับ สรุปคือตันครับ คงต้องหาวิธีอื่น

DB2

ผมรับงานที่ใช้ database db2 ต่อจากคนอื่นมาชิ้นหนึ่ง
ครั้งแรกที่ได้พังเกี่ยวปัญหาที่น้องเค้าเจอมา export ไม่ได้ คำสั่ง sql ไม่ได้มาตราฐาน (ติดใจ MySql กัน ) ก็บอกกับตัวเองว่า “งานเข้าละ”

ถึงเวลาไปทำงานที่บริษัทลูกค้า เจอกับเครื่องไข่ในหิน เปิดเว็บจากข้างนอกได้ แต่ remote เข้ามาไม่ได้ เอาไงดี ถ้าต้องมาทุกวันก็ค่ารถบานปลายแน่ ทางที่ดีต้อง copy database ไปทำงานที่บริษัท แจคพอร์ตแรก export ได้แต่เอาเข้าไม่ได้ซะงั้น เครื่องเดียวกันนะเนี่ย search เจอคู่มือใน net
Using DB2 utilities to clone databases across different platforms

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

กลับมาถึงบริษัทอารายอีกเนี่ยลงบนเครื่องไม่ได้ (windows 7) ไม่เป็นไร vmware ก็ได้ยอมช้าหน่อย import ไม่ได้ครับ ผ่ายบุคลมาปิดเอร์แล้ว (นโยบายให้พนักงานไปทำโอฟรีที่บ้าน)

จะลง vmware ก็หนัก ไม่มีเวลา ลองแก้ให้ลงดูอีกครั้ง เจอ error sql5005c เหมือนที่ทำงาน พี่เกิ้ลบอกให้ add user ที่ใช้อยู่เข้าไปในกลุ่ม DB2ADMNS และ DB2USERS ok ผ่านด่านแรก
ด่านสองใช้คำสั่ง ตามตัวอย่างไม่ได้เจอ error command line environment not initialized แปลว่า “ข้อผิดพลาดสิ่งแวดล้อม บรรทัดคำสั่งไม่เริ่มต้นได้” คืออะไรหว่า อย่าบอกดีกว่ามั่ย งง search จนรู้ว่าให้ใช้ db2cmd แทน db2 ในที่สุดก็เคลียร์ด่านสอง
เหลือ ติดต่อ database ไม่ไหวแล้วครับขอพักก่อน ทำมาทั้งวันได้แค่นี้ ถ้าเป็น mysql คงเสร็จภายใน 15 นาทีไปแล้ว รวมเวลาจิบกาแฟแล้วด้วย ยุ่งยากขนาดนี้มันมีอะไรดีเนี่ย!

การใช้ jQuery selectors API

การเขียน JavaScript มักเริ่มต้นโดยการเลือกออบเจ็คที่จะทำงานด้วย ระบุคำสั่งหรือระบุเหตุการณ์ให้ทำงานต่างๆ การเลือกออบเจ็คในภาษา JavaScript ถ้ามีเงือนไขที่ซับซ้อนก็จะเขียนได้ยากเพราะต้องใช้วิธีไต่ Dom เข้าไปที่ละชั้นๆ JQuery เข้ามาแก้ปัญหาส่วนนี้โดยมี API selectors เข้ามาทดแทนให้เขียนได้ง่ายขึ้น อย่างเช่น

<form id="demoF">
  <table class="democlass">
    <tr>
      <td><label for="q0">เพศ</label>
        <select name="prename" id="q0">
          <option value="1">นาย</option>
          <option value="2">นาง</option>
          <option value="3">นางสาว</option>
        </select></td>
    </tr>
    <tr>
      <td><label for="q1">ชื่อ</label>
        <input name="firstname" id="q1" /></td>
    </tr>
    <tr>
      <td><label for="q2">นามสกุล</label>
        <input name="lastname" id="q1" /></td>
    </tr>
    <tr>
      <td><label for="q3">ตกลง</label>
        <input type="checkbox" name="agree" id="q3" value="agree" /></td>
    </tr>
  </table>
</form>
เลือก รูปแบบ JQuery ตัวอย่าง
id $(‘#ชื่อ id’) $(‘#demoF’)
attribute $ (‘[attribute|=value]’) $ (‘[name|=firstname]’)
Checkbox ที่ถูกเลือก $(“:checkbox”) $(‘:checkbox’)
Selected ที่ถูกเลือก $(“select option:selected”) $(“select option:selected”)
เลือกจาก CSS class $(.ชื่อ class) $(‘.democlass’)
ลูกตัวแรก $(“แม่:first”) $(“tr:first”)

สูตรคณิตศาสตร์‏

ถ้าทำเว็บอีเลิร์นนิ่งเกี่ยวกับการเรียนการสอนคณิตศาสตร์‏จะเขียนสูตรที่ซับซ้อนได้ยาก แนะนำให้ลง ASCIIMathML กับ TinyMCE จะใส่เนื้อหาได้ง่ายขึ้นเยอะ
ทดลองเขียนสูตรได้ที่
TinyMCE Math/Graph Plugins Example
http://www1.chapman.edu/~jipsen/mathml/asciimathdemo.html
http://www.imathas.com/editordemo/demo.html
มีตัวอย่างสูตรที่
http://www1.chapman.edu/~jipsen/mathml/asciimath.html

load balance

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

  1. ให้แต่ละตัวรับไปแต่ละภาค ปัญหาคือเกือบทั้งหมดวิ่งผ่านไอเอสพีไม่กี่ที่ และแยกแทบไม่ได้ว่ามากจากภาคไหน
  2. ใช้ function random สุ่ม server ดูปรากฏว่าการกระจายค่อนข้างกระจุกอยู่ที่ server ตัวหลังๆ เกือบทุกครั้ง
  3. ทำให้ระบบจำได้ว่าจ่ายงานครั้งสุดท้ายไปที่ตัวไหนแล้วขยับไปตัวต่อไปเรื่อยๆ เหมือนเราแจกไพ่ การจะทำให้ php จำค่าล่าสุดได้นั้นมีการรักษาตัวแปรไว้ได้ 4 วิธี
    1. เขียนเป็นไฟล์ อันนี้จะมีปัญหาการเข้าถึงพร้อมกันของแต่ละเทรด(Threads)
    2. Cookie ใช้ไม่ได้เพราะเก็บไว้ที่เครื่องผู้ใช้คนอื่นเข้ามาก็จะอ่านค่าไม่ได้
    3. Session ข้อมูลจะเก็บบนเครื่องเซิร์ฟเวอร์แต่ก็เป็นการเก็บข้อมูลของแต่ละคนเหมือน cookie
    4. เก็บในฐานข้อมูล ใช้ร่วมกันได้ แต่เราต้องการแต่ให้ทำงานได้เร็วที่สุด
      DROP TABLE IF EXISTS `lastserv`;
          CREATE TABLE `lastserv` (
          `used` int(11) default NULL
          ) ENGINE=MEMORY DEFAULT CHARSET=utf8 COMMENT='จำ server ที่ใช้ล่าสุด';
          INSERT INTO `lastserv` VALUES (1);

      จะเห็นคำสั่งแปลกๆ ENGINE=MEMORY คือ MySQL จะมีระบบบริหารดาต้าเบสอยู่หลายตัวให้เลือกใช้ให้เหมาะกับงานต่างๆอ่านเพิ่มเติมได้จาก MySQL Storage Engine Architecture ในบรรดาเอ็นจิ้นของ MySQL จะมีเอ็นจิ้น Memory ซึ่งจะเก็บข้อมูลใน ram ทำให้อัตราการเข้าถึงข้อมูลเร็วที่สุดโดยเราสามาถเลือกได้ตอนสร้างตารางให้ระบุ engine ลงไปด้วย
      ในส่วนโค้ท php ไม่มีอะไรเป็นพิเศษเพียงมีการออพติไมซ์เพิ่มเล็กน้อยคือ

      <?php
      $dsn = mysql_connect('localhost', 'database user', 'databae password');
      mysql_select_db('database name' ,$dsn);
      /* การระบุ datasource จะทำงานได้เร็วขึ้น */
      $sql="SELECT used
      FROM lastserv;";
      $row = mysql_fetch_assoc(mysql_unbuffered_query($sql ,$dsn));
      /* คิวรี่แบบใช้ข้อมูลเพียงครั้งเดียวทิ้งลดการใช้ memory */
      if($row['used'] == 4){
        $next = 1;
      }else{
        $next = $row['used'] + 1;
      }
      $sql="UPDATE lastserv
      SET used= $next LIMIT 1;";
      mysql_unbuffered_query($sql ,$dsn);
      switch($row['used']){
        case '1' : {
          header('Location: http://192.168.1.1');
        }break;
        case '2' : {
          header('Location: http://192.168.1.2');
        }break;
        case '3' : {
          header('Location: http://192.168.1.3');
        }break;
        case '4' : {
          header('Location: http://192.168.1.4');
        }break;
      }

api,framework,ide,library

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

  • ฟังชั่น (function) คือชุดคำสั่งที่ทำหน้าที่ใดหน้าที่หนึ่งโดยเฉพาะ
  • เอพีไอ (api) คือส่วนติดต่อที่อนุญาติให้เอาไปใช้เวลาเขียนโปรแกรม เช่นเอพีไอที่ทำหน้าที่ติดต่อกับดาด้าเบส ตัวทีทำหน้าที่ติดต่อกับกล้องถ่ายภาพ แต่ละเอพีไอประกอบด้วยฟังก์ชั่นทำหน้าที่ต่างๆ กันไป
  • ไลบารี (library) เปรียบเหมือนห้องสมุดที่มีชุดคำสั่งสำรับอำนวยความสดวกในการเขียนด้านใดด้านหนึ่ง เหมือนห้องสมุดจะมีหนังหนังสือให้เลือกใช้ เช่น jquery เป็นไลบารี (ห้องสมุดเฉพาะด้าน javascript) ซึ่งมีเอพีไอ (หนังสือ) ให้เรียกใช้ เช่น Selectors ไว้เลือกส่วนต่างๆ ของโค้ท html มี Manipulation ไว้แก้ไขโค้ท html
  • เฟรมเวิร์ค (framework) ตามตัวอักษรคือ กรอบการทำงาน โครงสร้างหรือจะเรียกว่านั่งร้านก็ได้ โดยจะต่างจากไลบารีเพราะ
    1. คำสั่งเราจะอยู่ในเฟรมเวิร์ค(กรอบ) ได้เพียงตัวเดียวเท่านั้นต่างจากไลบารีที่สามารถเรียกใช้พร้อมกันหลายตัว
    2. การทำงานจะไม่มีการเรียกใช้เอพีไอโดยตรงแต่จะผ่านเฟรมเวิร์คทำให้สามารถเขียนครั้งเดียวเอาไปใช้ในสภาพแวดล้อมต่างกันได้ เช่น ภาษาตะกูลดอทเน็ตคำสั่งของเราจะไม่เรียกใช้เอพีไอของวินโดวส์โดยตรงแต่จะผ่านดอทเน็ตเฟรมเวิร์คอีกที ทำให้ถึงเป็นวินโดวส์ต่างเวอร์ชั่นกัน แต่ถ้าเฟรมเวิร์คเวอร์ชั่นเดียวกันเป็นล่ามให้ก็จะทำงานเหมือนกัน
  • ไอดีอี (ide) คือสภาพแวดล้อมที่เราใช้เขียนโปรแกรม ประกอบด้วยหลายส่วน
    • เครื่องมือที่เราใช้เขียนโปรแกรม เช่น อิดิพลัส ,ดรีมวีฟเวอร์ ,วิชวลสตูดิโอ
    • ตัวแปรภาษาต่างๆ
    • ตัวดีบัคโค้ท
    • เซิร์ฟเวอร์

mysql ใครบอกว่ารับงานหนักๆ ไม่ได้

เคยไปรับงานลูกค้าซึ่งเป็นองค์กรรัฐกึ่งเอกชนแหน่งหนึ่ง โดยมีความต้องการขัดใจโปรแกรมเมอร์อย่างหนึ่งคือย้ายจาก mysql เป็น microsoft sql server ซึ่งทำให้การ query ซับซ้อนขึ้นมาก โดยเหตุผลของทางลูกค้าคือไม่มั่นใจว่าจะรองรับข้อมูลจำนวนมากได้ ผมจำได้ว่าแม้แต่ google ที่มีข้อมูลมหาศาลยังใช้ mysql แต่ขณะนั้นไม่มีหลักฐานที่จะแย้งลูกค้าได้ จำใจต้อมยอมรับเงื่อนไขไป

จนวันนี้ได้อ่านเจอว่าระบบเว็บที่มีคนใช้งานติดอันดับต้นๆ ของโลกอย่าง youtube เจ้าของคือ google ใช้ mysql เป็น database ลองเข้าไปอ่าน YouTube Architecture จะเห็นว่าถ้ามี knowleage และการจัดการที่ถูกต้องคนจำนวนน้อยตัวหลักแค่ 10 คน โปรแกรม opensource ก็ไม่น้อยหน้าระบบที่ขายอยู่เป็นหลักแสน หลักล้าน

ขยาย iframe อัตโนมัติตามเนื้อหา

ถ้าต้องการให้ iframe ขยายอัตโนมัติตามเนื้อหาที่อยู่ข้างในเราสามารถใช้โค้ทด้านล่างปรับความสูงได้ครับ

<script>
function iframeHeight(obj){
    the_height= obj.contentWindow.document.body.offsetHeight;
    obj.height=the_height+10;
}
<iframe id="some" onload="iframeHeight(this)"></iframe>