Wednesday, May 21, 2008

Fusionchart+PHP+MySQL แบบทีละ Step คับ

วิธีการแสดงกราฟ Fusionchart v.3 โดยดึงข้อมูลมาจากฐานข้อมูล MySQL โดยใช้ภาษา PHP ครับ

step1. เริ่มจากสร้างฐานข้อมูลที่ชื่อ fusion-test [Download] และสร้างตารางที่ชื่อ data1 และเพิ่มข้อมูลลงไปตามรูปครับ


step2. โหลดกราฟ [download] และ unzip ไว้ในเวป root โดยของผมจะเก็บไว้ที่นี่ C:\AppServ\www\FusionCharts_Evaluation\ จากนั้นก็ลองเรียกดูเลยครับตาม path นี้
http://localhost/FusionCharts_Evaluation/Code/PHP/DBExample/Default.php
ถ้ารันได้แบบนี้ก็โอเคแล้วครับ


หมายเหตุ กราฟที่ผมให้โหลดเป็นตัวที่ผมตัดบางส่วนออกเอาเฉพาะไฟล์ที่เกี่ยวข้องเท่านั้นและแก้ไขเรียบร้อยแล้วน่ะครับโดยใครอยากโหลดเอาไฟล์ทั้งหมดทุกภาษาสามารถโหลดได้ที่เวปนี้ www.fusioncharts.com

โดยกราฟที่ผมต้องการแสดงคือ แสดงจำนวนที่เหลือของสินค้าแต่ละประเภท
ไฟล์ที่ผมแก้ไขมีตามนี้ครับ
1.ไปที่ C:\AppServ\www\FusionCharts_Evaluation\Code\PHP\Includes แก้ไฟล์ DBConn.php ตามนี้
    $hostdb = 'localhost';   // MySQl host
    $userdb = 'root';    // MySQL username
    $passdb = 'Your-Password';    // MySQL password ถ้าไม่มีก็ใส่ ''
    $namedb = 'fusion-test'; // MySQL database name


2.ไปที่ C:\AppServ\www\FusionCharts_Evaluation\Code\PHP\DBExample แก้ไฟล์ Default.php ตามนี้
$strQuery = "select distinct(type) as type_name , 
             sum(amount) as count_amt 
             from data1 
             group by type_name";

$strXML .= "<set label='" . $ors2['type_name'] .
           "' value='" . $ors2['count_amt'] . "' />";


และหากต้องการเปลี่ยนกราฟแท่งก็แค่แก้ตรงคำสั่ง เปลี่ยนจาก Pie3D.swf เป็น Column3D.swf ตามนี้
echo renderChart("../../FusionCharts/Column3D.swf",
                 "", $strXML, "FactorySum", 600, 300, false, false);



ที่ต้องแก้หลักๆก็มีแค่นี้ครับ คือ query คำสั่งใหม่ แล้วก็ set ค่า label เพื่อส่งค่า xml ให้ตรงกับ query ไปยังตัวกราฟ
เสร็จแล้วค๊าบ ง่ายป่าว อิอิ

Tuesday, May 20, 2008

วิธีการใช้งาน date selector ด้วย PopCalendarXP เพื่อรองรับกับวันที่ MySQL


PopCalendarXP เป็นของฟรีอีกแล้วครับ ผมเอามาใช้กับโค้ด php ซึ่งเปลี่ยนให้เป็นภาษาไทยเรียบร้อยแล้ว เหลือแต่ปีที่ยังเป็นคริสศักราช อยู่ ทำเป็นปีไทยไม่เป็นแต่ก็พอใช้งานได้ครับ ใครสนใจรายละเอียดเพิ่มเติมก็เวปนี้เลย www.calendarxp.net/

วิธีใช้น่ะครับ
  • unzip ไฟล์ออกมาแล้วไปวางในเวปpath ของ server เช่น ของผมวางไว้ที่
    C:\AppServ\www\date1\

  • ในโฟลเดอร์ date1 ผมจะสร้างไว้ สองไฟล์ไว้ test น่ะครับคือ date01.php และ date02.php ซึ่งสองไฟล์นี้ก็ใช้ dreamweaver สร้างมาครับง่ายดีและจะมีโฟลเดอร์ PopCalendarXP ซึ่งเป็นไฟล์ที่ผมโหลดมาและแก้เป็นภาษาไทยเรียบร้อยแล้ว
  • ลองรันตามนี้น่ะครับ http://localhost/date1/date01.php
  • ซึ่งวิธีการ install ผมขอสรุปคร่าวๆดังนี้น่ะครับ
  1. สร้าง form ขึ้นมาและสมมุติตั้งชื่อ form เป็น testform
  2. สร้าง text field ขึ้นมาและสมมุติตั้งชื่อว่า dc
  3. ให้นำโค้ดนี้วางไว้หลังคำสั่ง text field


    <a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.testform.dc);return false;" ><img class="PopcalTrigger" align="absmiddle" src="PopCalendarXP/calbtn.gif" width="34" height="22" border="0" alt=""></a>




  4. สังเกตในโค้ดตรง (document.testform.dc) จะเห็นว่า form_name.textfield_name จะต้องเหมือนกันกับที่เราตั้งไว้น่ะครับซึ่งหากเราต้องการใช้งาน selector หลายตัวใน form เดียวกันเราก็แค่เปลี่ยนเฉพาะชื่อ text field ให้ต่างกันก็พอครับซึ่งในโค้ด date01.php ผมจะใช้เป็น (document.testform.dc)และ (document.testform.dc1)เพื่อใช้ตัว selector สองตัว
  5. ลืมขั้นตอนสุดท้ายก็ต้องเอาโค้ดข้างล่างนี้น่ะครับไปวางไว้ก่อนtag </body> นะครับ

    <!-- PopCalendar(tag name and id must match) Tags should not be enclosed in tags other than the html body tag. -->
    <iframe width=174 height=189 name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="PopCalendarXP/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;">
    </iframe>


ซึ่งเท่านี้เราก็จะได้การส่งค่าวันที่ไปเก็บลงในฐานข้อมูลแบบdefault ของMySQL เรียบร้อยครับ
โหลดโค้ดทั้งหมดได้ที่นี่ครับ date1.zip

Monday, May 19, 2008

Function ใช้งานที่ 2 : แสดงวันที่ภาษาไทย

ฟังก์ชันอันนี้เอาไว้แสดงผลวันที่ภาษาไทยจากข้อมูลที่เก็บในฐานข้อมูล MySQL ที่เป็นแบบ date() น่ะครับโดย ค่า default ที่เก็บจะอยู่ในรูปแบบ YYYY-MM-DD เช่น 2008-05-19

 
<?php
function ThaiEachDate($vardate="") {
$_month_name = array("01"=>"มกราคม", "02"=>"กุมภาพันธ์", "03"=>"มีนาคม",
"04"=>"เมษายน", "05"=>"พฤษภาคม", "06"=>"มิถุนายน",
"07"=>"กรกฎาคม", "08"=>"สิงหาคม", "09"=>"กันยายน",
"10"=>"ตุลาคม", "11"=>"พฤศจิกายน", "12"=>"ธันวาคม");
$yy =substr($vardate,0,4);$mm =substr($vardate,5,2);$dd =substr($vardate,8,2);
$yy += 543;
if ($yy==543){
$dateT = "-";
}else{
$dateT=$dd ." ".$_month_name[$mm]." ".$yy;
}
return $dateT;
}
}
?>

วิธีเรียกใช้งานก็
 
<?php
echo ThaiEachDate("2008-05-19");
?>

ผลลัพธ์ที่ได้
 
19 พฤษภาคม 2551

Function ใช้งานที่ 1 : เดือนภาษาไทย

ฟังก์ชันอันแรกอันนี้ผมเอาไว้ใช้ในกรณีที่ต้องการใช้ตัวเลขเป็นเดือนไว้แสดงผลเป็นเดือนภาษาไทยครับโดยการประยุกต์ใช้งาน array ง่ายๆ

 
<?php
function GET_Month($mm="") {
$_month_name = array("1"=>"มกราคม", "2"=>"กุมภาพันธ์", "3"=>"มีนาคม",
"4"=>"เมษายน", "5"=>"พฤษภาคม", "6"=>"มิถุนายน",
"7"=>"กรกฎาคม", "8"=>"สิงหาคม", "9"=>"กันยายน",
"10"=>"ตุลาคม", "11"=>"พฤศจิกายน", "12"=>"ธันวาคม");
$monthN= $_month_name[$mm];
return $monthN;
}
?>

วิธีเรียกใช้งานก็
 
<?php
echo "ส่งค่าเลข 5 ไปเรียกฟังก์ชันจะได้เดือน ".GET_Month(5);
?>

จะได้
 
ส่งค่าเลข 5 ไปเรียกฟังก์ชันจะได้เดือน พฤษภาคม

Sunday, May 18, 2008

โชว์โค้ด PHP ใน BLOGGER โดยใช้ SyntaxHighlighter

SyntaxHighlighter ของฟรีครับเป็นตัวแสดง syntax highlighter เขียนโดยภาษา javascript ซึ่งแน่นอนครับเหมาะสำหรับใช้ใน BLOGGER ได้เพราะทำงานทางฝั่ง Client-side โดยตัวนี้สามารถโชว์โค้ดที่เป็นสีได้ในหน้า blogger ได้
วิธีการติดตั้งทำได้ตาม step นี้เลยน่ะครับ

  1. ดาวโหลดไฟล์ SyntaxHighlighter . และอัพโหลดไฟล์ที่จำเป็นต้องใช้ผ่านทาง Google Page Creator
  2. Login เข้าที่ BLOGGER แล้วไปที่ "Settings > Template > Edit HTML", จากนั้นก็เปลี่ยนค่าตามโค้ดด้านล่างเลยครับ



  3. </div></div> <!-- end outer-wrapper -->
    <link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
    <script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>

    <script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/>
    <script src='http://[YOUR HOST]/shBrushPhp.js' type='text/javascript'/>

    <script class='javascript'>
    // <![CDATA[
    function FindTagsByName(container, name, Tag)
    {
    var elements = document.getElementsByTagName(Tag);
    for (var i = 0; i < elements.length; i++)
    {
    if (elements[i].getAttribute("name") == name)
    {
    container.push(elements[i]);
    }
    }
    }
    var elements = [];
    FindTagsByName(elements, "code", "pre");
    FindTagsByName(elements, "code", "textarea");

    for(var i=0; i < elements.length; i++) {
    if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
    var childNode = elements[i].childNodes[0];
    var newNode = document.createTextNode(childNode.nodeValue.replace(//gi,'\n'));
    elements[i].replaceChild(newNode, childNode);

    }
    else if(elements[i].nodeName.toUpperCase() == "PRE") {
    brs = elements[i].getElementsByTagName("br");
    for(var j = 0, brLength = brs.length; j < brLength; j++) {
    var newNode = document.createTextNode("\n");
    elements[i].replaceChild(newNode, brs[0]);
    }
    }
    }
    //clipboard does not work well, no line breaks
    // dp.SyntaxHighlighter.ClipboardSwf =
    //"http://[YOUR HOST]/clipboard.swf";
    dp.SyntaxHighlighter.HighlightAll("code");
    // ]]>
    </script>
    </body>
    </html>


    เสร็จแล้วครับวิธีเรียกใช้ก็ตามนี้เลย

    <pre name="code" class="php">
    ... โค้ดวางตรงนี้ครับ ...
    </pre>

    หรือหากต้องการดูรายละเอียดดูได้ที่เวปเจ้าของที่นี่เลย syntaxhighlighter usage
  4. หมายเหตุนิดนึงสำหรับหากต้องการโพสเป็น HTML code ให้เราแทนค่า
    เครื่องหมาย < ด้วย & l t ; (เขียนติดกันไม่มีช่องว่างน่ะครับ)
    เครื่องหมาย > ด้วย & g t ; (เขียนติดกันไม่มีช่องว่างน่ะครับ)
  5. thank for http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html

Saturday, May 17, 2008

ปัญหาการแสดงผลภาษาไทยเป็น ??? ใน MySQL4.1.x ขึ้นไป

  • หลายๆคนคงเจอปัญหาเรื่องการแสดงผลภาษาไทยเมื่อเปลี่ยนจากฐานข้อมูล MySQL เวอร์ชั่นเก่าๆมาเป็นเวอร์ชัน 4.1.x ขึ้นไป วันนี้ผมมีคำตอบและวิธีแก้ไขครับ
  • หลักการก็คือเมื่อมีการ connect mysql ที่มีการรับส่งภาษาไทยเมื่อไร ให้นำ TAG
mysql_query("SET NAMES 'tis620' ");
  • ไปวางไว้หลังบรรทัดคำสั่ง mysql_connect หรือ mysql_pconnect ทันทีครับ ปัญหาเรื่องภาษาไทย กับ MySQL เวอร์ชั่น 4.1.X ก็จะหมดไปทันทีครับ แต่ก็ต้องไม่ลืมที่จะต้องตั้ง charset ต่างๆของฐานข้อมูลให้เป็น TIS620 ด้วยนะครับ ตรวจสอบลึกเข้าไปถึงในตารางด้วย ว่า charset ของแต่ละตารางเป็น TIS620 ด้วยหรือไม่
  • สุดท้าย สคริปใดสามารถใช้งาน UTF-8 ได้ แนะนำให้ใช้ทันที เพราะจะทำให้ไม่ต้องแก้ tag ดังกล่าวข้างต้นที่กล่าวมาทั้งหมดครับ เพราะสามารถใช้งานในภาษาไทยได้ครับ ซึ่งสคริป ที่รองรับ UTF-8 ส่วนใหญ่จะเป็นสคริปที่ใหม่ๆครับ

รวมโปรแกรมที่จำเป็น

อันนี้เป็นโปรแกรมที่ผมใช้บ่อยๆติดตั้งประจำเครื่องไว้น่ะครับ
  • Dreamweaver
  • Appserv
  • MyODBC for Mysql
  • FusionCharts
  • Navicat 7.22
  • EditPlus

การตั้งรหัสผ่านของ MySQL

การตั้งรหัสผ่านของ MySQL ในกรณีที่ลง Appserv เวอร์ชันเก่าๆที่ไม่ได้ถาม password ของ root นะครับลองแบบนี้นะครับ เข้าไปที่ start menu -> run แล้วพิมพ์ cmd จากนั้นเปลี่ยน path แล้วพิมพ์
C:\AppServ\MySQL\bin>mysql -u root
พอเข้าไปแล้วก็พิมพ์
>SET PASSWORD FOR root@localhost=PASSWORD('new_password');
เท่านี้แหล่ะครับตอนจะ login เข้าใช้ mysql ก็ใช้แบบนี้ครับ
C:\AppServ\MySQL\bin>mysql -u root -p
Enter password:new_password