PinionBlog

FusionCharts (www.fusioncharts.com) เป็นเครื่องมือช่วยสร้างกราฟเพื่อแสดงผลบนเว็บเพจ กราฟที่ออกมาจะมีลักษณะเป็น Flash ที่สวยงามและมีลูกเล่น เราสามารถใส่ link หรือข้อความลักษณะ tooltip ให้แสดงผลเวลาผู้ใช้ลากเมาส์ไปชี้ได้

FusionCharts สามารถเรียกใช้ได้ด้วยเว็บสคริปหลายภาษา ไม่ว่าผู้ใช้จะพัฒนาเว็บแอพพลิเคชั่นด้วย ASP, PHP, JSP หรือ Javascript ก็ใช้บริการได้ ที่สำคัญคือเจ้า FusionCharts มันให้บริการฟรี !!

การใช้งาน FusionCharts ก็ง่ายมากครับ ผมจะแสดงตัวอย่างการเรียกใช้ด้วย PHP นะครับ

1. ขั้นแรกเลยไปดาวน์โหลด FusionCharts รุ่นใช้ฟรี ที่นี่

2. ในโฟลเดอร์ที่ดาวน์โหลดมาจะมีไฟล์ชื่อ Index.html หน้านี้มีประโยชน์มากครับ ลองกดเข้าไปจะมีตัวอย่างการใช้งานมากมาย

3. การติดตั้งง่ายมากครับ เราสร้างโฟลเดอร์หนึ่งในเว็บแอพพลิเคชั่นที่เราจะเรียกใช้ขึ้นมาก่อน ผมตั้งชื่อว่า FusionChart

4. ทีนี้กลับไปโฟลเดอร์ที่เราดาวน์โหลดมา ก็อปปี้ทุกอย่างในโฟลเดอร์ชื่อ Chart มาไว้ในโฟลเดอร์ FusionChart ในขั้นตอนที่แล้ว ไฟล์ swf นี้เองที่จะใช้ในการสร้างกราฟขึ้นมา แต่ละตัวก็จะสร้างในลักษณะต่างกันไป เช่น FCF_Bar2D.swf จะใช้สร้างแผนภูมิแท่งแนวนอน FCF_Pie3D.swf ใช้สร้างแผนภูมิวงกลมสามมิติ เป็นต้น

5. เราจะใช้ PHP ในการวาดกราฟ ดังนั้นให้ก็อปปี้ FusionCharts.php ในโฟลเดอร์ Code/PHP/Includes/ มาด้วยนะครับ

6. คราวนี้มาลองสร้างกราฟง่ายๆ กันดีกว่า ผมจะสร้างในลักษณะแผนภูมิแท่งแนวตั้งสามมิติที่เป็นชุดๆ ตามรูปนี้

โค้ด php เป็นแบบนี้ครับ [...]

สวัสดีท่านผู้มาเยือนทุกท่านนะครับ
พวกเรา นิสิตจากภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย
จะมาเชิญชวนทุกๆ ท่านไปร่วมงาน นิทรรศการวิชาการทางวิศวกรรมครั้งที่ 15 หรือที่รู้จักกันในชื่อ NITAD 15 ซึ่งจะจัดขึ้นในวันที่ 26 – 30 พฤศจิกายนนี้ ร่วมกับงานจุฬาวิชาการครับ

สำหรับงาน NITAD ในส่วนที่ทางภาควิชาวิศวกรรมคอมพิวเตอร์เราจัดขึ้นนั้น จะมีการจัดแสดงโครงการต่างๆ ที่น่าสนใจดังต่อไปนี้

1. โครงการเลือกซื้อฮาร์ดแวร์ทางคอมพิวเตอร์ โครงการนี้เป็นกิจกรรมให้ความรู้ ความสนุกสนาน แก่บุคคลทั่วไปที่สนใจในฮาร์ดแวร์คอมพิวเตอร์ ซึ่งจะเป็นการให้ความรู้ทางคอมพิวเตอร์ที่เกี่ยวข้องในชิ้นส่วนฮาร์ดแวร์ ต่าง ๆ เพื่อใช้ในการตัดสินใจเลือกซื้อและเปลี่ยนแปลงฮาร์ดแวร์ได้อย่างถูกต้อง ไม่ต้องมีการปรึกษากับผู้เชี่ยวชาญในทุกครั้งที่จะมีการซื้ออุปกรณ์ คอมพิวเตอร์ อ่านรายละเอียดเพิ่มเติม
2. โครงการแนะแนวภาควิชาวิศวกรรมคอมพิวเตอร์ เป็นโครงการที่จัดขึ้น สำหรับผู้ที่มีความสนใจที่จะเข้าศึกษาในสาขาวิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์ จุฬาลงกรณ์มหาวิทยาลัย เพื่อให้ผู้ที่สนใจได้รับทราบข้อมูลที่ถูกต้องและกำจัดความเข้าใจผิดที่พบ อยู่ได้ทั่วไปเกี่ยวกับการศึกษาในสาขาวิชานี้ อ่านรายละเอียดเพิ่มเติม
3. โครงการโลกวิศวกรรมคอมพิวเตอร์ผ่านระบบซอฟต์แวร์ขนาดใหญ่ นำเสนอ ขั้นตอนในการออกแบบที่จำเป็นสำหรับ ซอฟต์แวร์เพื่อชี้ให้เห็นถึงที่มาแนวความคิดและการบริหารงานต่างๆจนกระทั่ง ออกมาเป็นผลิตภัณฑ์ ซึ่งนอกจากจะใช้ในการจัดการซอฟต์แวร์แล้วยังสามารถนำมาประยุกต์ใช้ในชีวิต ประจำวันได้ด้วย นอกจากนี้ผู้ที่เข้าชมจะได้รับความรู้เกี่ยวกับกระบวนการและขั้นตอนต่างๆ รวมถึงมุมมองที่น่าสนใจ ในสายงานที่เกี่ยวข้องกับงานทางด้าน System Analysis , Software Engineering อ่านรายละเอียดเพิ่มเติม
4. โครงการระบบวิสาหกิจที่ยั่งยืน (Sustainable Enterprise Systems) ผู้ เข้าชมโครงการจะได้รับสาระความรู้และความบันเทิงในแง่มุมที่เกี่ยวข้องกับ ระบบวิสาหกิจ ผ่านการนำเสนอในรูปแบบโปสเตอร์ การบรรยาย การสาธิตการใช้งานซอฟต์แวร์แง่มุมที่ถือเป็นหัวใจสำคัญของระบบวิสาหกิจ อ่านรายละเอียดเพิ่มเติม

นอกจากนี้ ยังมีการนำเสนอผลงานต่างๆ ทั้งที่เป็นผลงานสำหรับประกวดแข่งขัน และ Senior Project ที่จัดทำขึ้นโดยนิสิตจากภาควิชาวิศวกรรมคอมพิวเตอร์ ดังนี้

เชื่อว่าบางคนที่เคยทดลองเขียน Web Appication กับฐานข้อมูลมากกว่า 1 ยี่ห้อ น่าจะเคยประสบปัญหานี้กันมาบ้างพอสมควร
ตัวอย่างเช่น สมมติว่าเราจะเขียน PHP เพื่อเรียกดูข้อมูลจาก MySQL เราจะทำตามขั้นตอนต่อไปนี้

1. เชื่อมต่อกับฐานข้อมูลด้วย mysql_connect หรือ mysql_pconnect
2. เลือกฐานข้อมูลด้วย mysql_select_db
3. ส่ง query ไปประมวลผลด้วย mysql_query
4. เรียกดูข้อมูลทีละ row ด้วย mysql_fetch_array, mysql_fetch_assoc หรือ mysql_fetch_row หรืออะไรก็ตาม แล้ววนลูป

ถ้าเปลี่ยนมาเขียน PHP (ผู้เขียนเขียน .NET กับ jsp ไม่เป็นครับ เห็นใจหน่อยละกัน) เพื่อเรียกข้อมูลจาก Oracle จะมีขั้นตอนต่อไปนี้

1. เชื่อมต่อกับฐานข้อมูลด้วย oci_connect
2. เตรียมประมวลผล query ด้วย oci_parse
3. ประมวลผลด้วย oci_execute
4. เรียกดูข้อมูลด้วย oci_fetch_array

จะเห็นว่ามี 4 ขั้นตอนเหมือนกันก็จริง แต่แต่ละขั้นตอนกลับต่างกัน เช่น
กรณีของ MySQL: ไม่ต้องมา parse แล้วตามด้วย execute เพราะ mysql_query อย่างเดียวก็เหมือนได้ทำสองขั้นตอนนั้นครบแล้ว
กรณีของ Oracle: ไม่ต้องมีการเลือกฐานข้อมูล (mysql_select_db)

เมื่อเป็นเช่นนี้แล้ว ปัญหาย่อมตามมาแน่่ถ้าเกิดมีคนคิดพิเรนทร์ อยากจะเปลี่ยนจากฐานข้อมูลยี่ห้อหนึ่งไปใช้อีกยี่ห้อหนึ่ง
และอีกปัจจัยหนึ่งคือ CMS บางยี่ห้อ เช่น phpBB มีข้อได้เปรียบคือ สามารถใช้งานกับฐานข้อมูลได้หลายๆ ยี่ห้อ
ดังนั้นคงจะไม่ดีแน่ที่จะให้มาเขียนโปรแกรมเดียวกันออกเป็นหลาย copy เพื่อให้สามารถใช้งานกับโปรแกรมฐานข้อมูลหลายๆ ตัว

แนวคิดเกี่ยวกับ sql layer ก็มีแนวคิดคล้ายๆ กับเรื่อง virtual machine แหละครับ
คือ sql layer จะเป็น layer ที่ซ่อนความแตกต่างระหว่างฐานข้อมูลแต่ละยี่ห้อเอาไว้ เหมือนกับที่โปรแกรมภาษาจาวาสามารถรันได้บน JVM โดยที่ไม่ต้องคำนึงว่าอยู่บน OS อะไร

SQL Layer ของ phpBB เป็นโอเพนซอร์สครับ สามารถดาวน์โหลดมาศึกษาดูได้จากการดาวน์โหลด phpBB (SQL Layer ของphpBB3 ถูกเขียนขึ้นมาใหม่ ซึ่งแตกต่างจาก phpBB2 ในที่นี้ขอใช้ phpBB2)
ไฟล์ที่เกี่ยวข้องกับ SQL Layer จะอยู่ใน /phpBB2/db ครับ
เมื่อ ลองเปิดดูแต่ละไฟล์ (เช่น db2.php, msaccess.php, mssql.php, mysql.php, oracle.php, ฯลฯ) จะพบว่าชื่อฟังก์ชันแต่ละฟังก์ชันภายในคลาส sql_db ของแต่ละไฟล์ จะตรงกันหมด ต่างกันที่การทำงานภายในฟังก์ชันเท่านั้น

ขอแนะนำฟังก์ชันที่ใช้กันบ่อยๆ แล้วกันครับ

1. sql_db เป็น constructor การเปิดการเชื่อมต่อกับฐานข้อมูลรวมทั้งการเลือกกระทำกับฐานข้อมูลใดฐาน ข้อมูลหนึ่ง จะเกิดขึ้นจากการเรียกฟังก์ชันนี้
2. นอกจากนี้ ในกรณีที่เราต้องการ manipulate ข้อมูลที่เป็นภาษาไทย ก็สามารถเข้ามาแก้ไขโค้ดได้ที่ฟังก์ชันนี้ครับ (ว่าแต่ แก้จากข้างนอกดีกว่ามั้ง)
3. sql_query สำหรับผู้ที่คุ้นเคยกับ mysql ฟังก์ชันนี้ทำหน้าที่เหมือนกับฟังก์ชัน mysql_query ครับ
4. sql_fetchrow เป็นฟังก์ชันที่ดึงข้อมูลที่ได้จากฟังก์ชัน sql_query มาแสดงทีละแถว
5. sql_numfields คืนค่าจำนวนฟิลด์ของตาราง
6. sql_numrows คืนค่าจำนวนแถว

ขอแสดงตัวอย่างการใช้งานโดยเปรียบเทียบกับสคริปต์ที่เขียนปกติโดยไม่ใช้เครื่องมือตัวนี้ (กับฐานข้อมูล MySQL)

//กรณีที่ไม่ใช้ sql_db
<?php
$link = mysql_connect(‘mysql_host’, ‘mysql_user’, ‘mysql_password’)
or die(‘Could not connect: ‘ . mysql_error());
mysql_select_db(‘my_database’) or die(‘Could not select database’);
$query = ‘SELECT * FROM my_table’;
$result = mysql_query($query) or die(‘Query failed: ‘ . mysql_error());
while ($line = mysql_fetch_array($result)) {
…
}
mysql_free_result($result);
mysql_close($link);
?>

//กรณีที่ใช้ sql_db
<?php
include(“./db/mysql.php”);
$db = new sql_db(‘mysql_host’, ‘mysql_user’, ‘mysql_password’, ‘my_database’, false);
$query = ‘SELECT * FROM my_table’;
$result = $db->sql_query($query);
while ($line = $db->sql_fetchrow($result)) {
…
}
$db->sql_close();
?>

สังเกต ว่า โค้ดสั้นลง ทั้งนี้เพราะภายในฟังก์ชันของ sql_db มีการจัดการเกี่ยวกับ error ภายในฟังก์ชันอยู่แล้ว เราไม่จำเป็นต้องมา or die(‘error message’) เอาเอง

สุดท้ายนี้ สิ่งที่อยากจะบอกคือ ฟังก์ชัน sql_rowseek ใน oracle.php มันทำงานผิดครับ
ถ้าอยากให้มันทำงานได้ถูกต้อง ลองเข้าไปแก้ไขดูแล้วกัน แก้ไม่เกิน 2 บรรทัด รับรอง ^ ^

เชื่อว่าผู้อ่านทั้งหลายที่เคยลองเขียน Web Application (ในที่นี้จะขอกล่าวถึงเฉพาะการเขียน Web Application ด้วยภาษา PHP) ไม่ว่าจะเพิ่งหัดใหม่หรืออยู่ในระดับมือโปร น่าจะคุ้นเคยกับการแทรกสคริปต์ PHP เข้าไปใน HTML แล้วเซฟไฟล์ด้วยนามสกุล .php กันเป็นอย่างดี
ว่าแต่ ว่ามีผู้อ่านคนไหนเคยสงสัยมั้ยครับว่า การแทรกสคริปต์เข้าไปใน HTML อย่างนี้ ถ้าเกิดในอนาคตเราอยากจะเปลี่ยนดีไซน์ให้มัน จะทำอย่างไรล่ะ
ถ้าท่านสงสัย ท่านน่าจะเจอคำตอบที่ถูกใจแล้วล่ะครับ

จากปัญหาที่ได้กล่าวมาข้างต้น จะเห็นว่าเป็นปัญหาที่เกิดจากการที่เราเขียนโปรแกรมให้ส่วนของ Presentation กับ Logic มันปนกันอยู่
ทีนี้เวลาเราอยากจะแก้ Presentation เราก็ต้องมาพะวงว่ามันจะไปทำให้ Logic มันผิดหรือเปล่า
หรือ เวลาเราอยากจะเพิ่มฟังก์ชันการทำงาน (หรือก็คือต้องแก้ไข Logic) เราก็ต้องมาพะวงอีกล่ะว่ามันจะไปทำให้ Presentation เพี้ยนไปอีกหรือเปล่า

ด้วยเหตุผลเหล่านี้ จึงเกิดเครื่องมือที่เรียกว่า Template Engine ขึ้นมาครับ
Template Engine คืออะไร ขออธิบายสั้นๆ ว่า มันคือ Tools ตัวหนึ่งที่ช่วยแบ่งแยกส่วน Presentation กับ Logic ให้แยกออกจากกันคนละไฟล์ครับ
เมื่อเราแยกทั้งสองส่วนออกจากกันได้แล้ว พอเราอยากแก้เพียงส่วนใดส่วนหนึ่ง เราก็ไม่ต้องไปกังวลว่าจะเกิดผลกระทบขึ้นกับอีกส่วนหรือไม่อีกต่อไป
มา ถึงตรงนี้แล้ว เชื่อหลายคนคงเริ่มจินตนาการแล้วล่ะว่าจะทำให้เว็บไซต์ที่เราเขียนขึ้นมา เองสามารถเปลี่ยน Theme ได้อย่างสะดวกสบายขึ้นเหมือนกับที่ CMS หลายๆ ยี่ห้อสามารถทำได้
แต่ก่อนที่จะไปถึงตรงนั้น เราควรจะรู้วิธีการใช้งาน Template Engine กันก่อนใช่มั้ยครับ ดังนั้น มาเริ่มกันเลยดีกว่า

Template Engine สำหรับ Web Application ที่เขียนด้วยภาษา PHP ที่เป็นที่นิยมกัน หลายๆ คนอาจจะเคยได้ยินชื่อมาบ้าง นั่นคือ smarty
แต่ในที่นี้ ผมขอยกตัวอย่างการใช้งาน Template Engine ที่พัฒนาขึ้นโดย Nathan Codding แห่ง phpBB group
สำหรับใครที่ต้องการซอร์สโค้ด สามารถดาวน์โหลดได้จาก http://www.phpbb.com/
สำหรับ คนที่หาไม่เจอ ขอบอกว่า ดาวน์โหลดซอร์สโค้ดของ phpBB ทั้งชุดนั่นแหละครับ ชุดที่ใครหลายๆ คนเอามาใช้ติดตั้งเป็นเว็บบอร์ดสำเร็จรูปกัน
ไฟล์ที่เราสนใจคือ template.php จะอยู่ที่ /phpBB2/include/template.php
วิธีการใช้งานมีขั้นตอนดังนี้
ตัวอย่างไฟล์ HTML ชื่อ index_body.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Using Template Engine</title>
</head>

<body>
<h1 align=”center”>{title}</h1>
<table width=”350″ border=”1″ align=”center”>
<tr bgcolor=”#CCFFFF”>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
</tr>
<!– BEGIN person –>
<tr>
<td>{person.fname}</td>
<td>{person.lname}</td>
<td>{person.gender}</td>
</tr>
<!– END person –>
</table>
<p align=”center”> </p>
</body>
</html>

สิ่งที่อยากให้สังเกต มีดังนี้

1. {title} การที่เราเอา { กับ } ไปครอบไว้ที่ข้อความ “title” นั่นเปรียบเหมือนกับเราสร้างตัวแปรชื่อ title เอาไว้ ทีนี้เมื่อเราเขียนส่วน Logic เราก็สามารถนำข้อความใดๆ ไปแทนที่ตรงตำแหน่งของ {title} ได้
2. ส่วนที่ถูกครอบด้วย Comment นั่นคือ <!– BEGIN person –> และ <!– END person –>
   ส่วนนี้บอกว่าจะเกิดการวนลูปตรงนี้นะ โดย <!– BEGIN person –> จะเป็นจุดเริ่มต้นลูป (เสมือนปีกกาเปิดในภาษา C)
   ส่วน <!– END person –> จะเป็นจุดสิ้นสุดของลูป
3. ตัวแปรที่อยู่ระหว่าง <!– BEGIN person –> กับ <!– END person –>
   สังเกตว่าตัวแปรแต่ละตัวจะขึ้นต้นด้วย person ตามด้วย .
   ตรงนี้ขอให้คิดว่า person คือ Array ซึ่งมี index คือ fname, lname และ gender
   เมื่อการวนลูปเกิดขึ้น โปรแกรมจะทำการนำค่าของ person.fname, person.lname และ person.gender ไปแทนที่ในตำแหน่งที่เรากำหนดไว้

อ้อ ถ้าเกิดเราอยากใช้ชื่ออื่นแทน person เช่น จะใช้คำว่า temp อย่าลืมแก้คำที่อยู่ในคอมเมนต์ด้วยนะครับ โดยแก้เป็น และ ตามลำดับ

จบในส่วนของ Presentation กันแล้ว มาเริ่มกันที่ส่วนของ Logic กันได้เลย
มาดูตัวอย่างโค้ดกันก่อน
ชื่อไฟล์ index.php

1. <?php
2. include(“includes/template.php”);
3. $template = new Template(“./templates/”);
4. $template->set_filenames(array(“body” => “index_body.html”));
5. $template->assign_var(“title”, “This is TITLE”);
6. $arr[] = array(“firstname” => “Warot”,
7. “lastname” => “Anusakprasit”,
8. “gender” => “male”);
9. $arr[] = array(“firstname” => “Thaksin”,
10. “lastname” => “Shinawatra”,
11. “gender” => “male”);
12. $arr[] = array(“firstname” => “Khemanij”,
13. “lastname” => “Jamikorn”,
14. “gender” => “female”);
15. foreach($arr as $value) {
16. $data["fname"] = $value["firstname"];
17. $data["lname"] = $value["lastname"];
18. $data["gender"] = $value["gender"];
19. $template->assign_block_vars(“person”, $data);
20. }
21. $template->pparse(“body”);
22. ?>

บรรทัดที่ 2 คือ include ไฟล์ template.php เข้ามาก่อน มิฉะนั้นจะไม่สามารถใช้งานได้
บรรทัดที่ 4 คือ สร้าง object ของคลาส Template โดยมีพารามิเตอร์ 1 ตัว คือพาธที่เก็บไฟล์ html ไว้ ในที่นี้จะเก็บไว้ในโฟลเดอร์ชื่อ templates
บรรทัดที่ 5 บอกไฟล์สคริปต์ index.php มองหาไฟล์ index_body.html
บรรทัดที่ 7 บอกให้นำข้อความ “This is TITLE” ไปแทนที่ {title} ด้วยฟังก์ชัน assign_var
บรรทัดที่ 9-17 สร้าง Array ชื่อ $arr ที่เก็บชื่อ สกุล และเพศ เอาไว้ เพื่อนำไปแทนที่ในตำแหน่งของ person
บรรทัดที่ 19-25 นำค่าจาก Array ชื่อ $arr ไปใส่แทนที่ person.fname, person.lname และ person.gender ตามลำดับ โดยนำไปฝากไว้ใน Array ชื่อ $data แล้วให้ $data ไปใส่ใน “person” อีกที ด้วยคำสั่ง assign_block_vars
บรรทัดที่ 26 หลังจาก assign อะไรต่อมิอะไรเรียบร้อยแล้ว อย่าลืมสั่งให้มันโหลดไฟล์เพื่อแสดงผล

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

ง่ายล่ะสิ !!!

จากตัวอย่างข้างต้น ขอสรุปการทำงานของฟังก์ชันที่สำคัญๆ ดังนี้

1. constructor สร้าง object ของคลาส Template และสั่งให้มองหาตำแหน่งที่เก็บ HTML ไว้
2. set_filenames สั่งให้ Handler มองหาไฟล์ HTML ตามที่พารามิเตอร์ระบุ
3. assign_var แทนที่ตำแหน่งที่กำหนดไว้ใน HTML ด้วย String ตามที่เราต้องการ
4. assign_block_vars แทนที่ตำแหน่งที่กำหนดไว้ใน HTML ด้วย String ตามที่เราต้องการ แบบ Iterative
5. pparse โหลดและคอมไพล์ไฟล์

ยังมีวิธีการใช้งานที่ advance ยิ่งกว่านี้อีกมากครับ สามารถเข้าไปศึกษาได้ที่ http://area51.phpbb.com/docs/coding-guidelines.html#templating