วิธีการติดตั้ง

1. ดาวน์โหลด Source code CKEditor ได้ที่เว็บไซต์ http://ckeditor.com/download โดยให้เราเลือกแบบ Full Package (ความแตกต่างของการดาวน์โหลดคือจะมีส่วนเสริมมาเยอะกว่า)
2. แตกไฟล์และ นำ Source code ที่ได้ไปวางไว้ในโปรเจคของเรา
3. เรียกไฟล์ javascript ของ ckeditor ตัวอย่างบทความของผมจะเป็นแบบนี้ครับ <script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
4. การเรียกใช้งาน สามารถทำได้โดย กำหนด id ของ textarea เป็นชื่ออะไรก็ได้ ตัวอย่างบทความ ชื่อ id คือ detail แล้วนำโค๊ดนี้ไปวางไว้ด้านล่าง textarea ตามตัวอย่างโค๊ดนี้ครับ

<textarea name="detail" id="detail"></textarea>
<script>
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace('detail');
    function CKupdate() {
        for (instance in CKEDITOR.instances)
            CKEDITOR.instances[instance].updateElement();
    }
</script>

แล้วลองดูตัวอย่าง กันครับ จะได้ผลลัพธ์ออกมาเป็นแบบนี้

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

เข้าไปที่ โฟล์เดอร์ ckeditor แล้ว หาคำว่า “config.js” ให้เปิดไฟล์นี้มาครับ
ไฟล์นี้จะเป็นไฟล์ที่กำหนดค่าแล้วจะเป็นทุกๆ การใช้งาน ckeditor นะครับ

ต้องการกำหนดให้เวลา กด enter ให้เคาะบรรทัดใหม่ไม่ใช้ขึ้นบรรทัดใหม่ โดยความแตกต่างจะอยู่ที่ระยะห่างระหว่างบรรทัดครับ ลองดูตัวอย่าง code

config.enterMode = CKEDITOR.ENTER_DIV;

ต้องการแสดงเครื่องมือบางอย่าง ลองดู code ครับ

config.toolbarGroups = [
    {name: 'clipboard', groups: ['clipboard', 'undo']},
    {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
    {name: 'links'},
    {name: 'insert'},
    {name: 'forms'},
    {name: 'tools'},
    {name: 'document', groups: ['mode', 'document', 'doctools']},
    {name: 'others'},
    '/',
    {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
    {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
    {name: 'styles'},
    {name: 'colors'},
    {name: 'about'}
];

ดูผลลัพธ์ที่ได้นะครับ

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

ดาวน์โหลด Source code ตัวอย่างที่ผมทำประกอบบทความ ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด

สำหรับบทความนี้ มีเพียงเท่านี้ หากมีข้อสงสัย comment ไว้ด้านล่างครับ…

The post การใช้งาน CKEditor (Text Editor WYSIWYG) และการตั้งค่าแบบง่ายๆ first appeared on การเขียนโปรแกรม, เทคโนโลยี.

1. NetBeans IDE
2. PHP เวอร์ชั่น 5 ขึ้นไป (บทความการติดตั้ง PHP บน Windows Server)
3. Web Server ในตัวอย่างนี้ใช้ Apache ซึ่งเป็นชุดติดตั้งที่มาจาก XAMPP 1.8.x4. xDebug ซึ่งจะติดตั้งในบทความนี้
4. xDebug จะติดตั้งในบทความนี้

ขั้นตอนแรก คุณต้องติดตั้ง xDebug ก่อน โดยสามารถดาวน์โหลด dll ได้ที่เว็บไซต์ http://xdebug.org/download.php เมื่อเข้ามาแล้วให้คุณคลิกลิงค์ custom installation instructions. เพื่อโหลดไฟล์ติดตั้งแบบกำหนดเองตามเวอร์ชั่น PHP ที่ติดตั้ง (ตามรูปภาพด้านล่าง)

เปิดบราวเซอร์ขึ้นมาใหม่แล้วเช็คเวอร์ชั่น PHP โดยใช้คำสั่ง phpinfo(); แล้วคลุมดำหน้า phpinfo ทั้งหมด(สามารถกด CTRL+A) แล้ว Copy (สามารถกด CTRL+C) ตามรูปภาพด้านล่าง

เปิดหน้าจอ custom installation instructions. ในขั้นตอนแรกเพื่อที่จะนำข้อมูลที่คุณได้ Copy มาใส่ในช่อง Text Area นี้แล้วคลิกปุ่ม Analyse my phpinfo output ตามรูปภาพตัวอย่างด้านล่าง

ให้คลิกลิงค์ Download php_xdebug-2.2.3-5.4-vc9.dll เพื่อดาวน์โหลดไฟล์

– นำไฟล์ php_xdebug-2.2.3-5.4-vc9.dll ที่ดาวน์โหลด วางไว้ที่โฟล์เดอร์ C:\xampp\php\ext? ซึ่งโฟล์เดอร์ในตัวอย่างบทความนี้เป็น php ที่ถูกติดตั้งจากโปรแกรม XMAPP 1.8.x หากว่าคุณไม่ได้ติดตั้งโปรแกรมจาก XMAPP คุณต้องทำการหาโฟล์เดอร์ที่ติดตั้ง php ในเครื่องของคุณเอง

– หลังจากนั้นคุณต้องเข้าไปแก้ไขไฟล์ php.ini ซึ่งอยู่ในโฟล์เดอร์ C:\xampp\php\php.ini

– ค้นหาคำว่า “[XDebug]” แล้วแก้ไขข้อมูลตามตัวอย่างด้านล่างนี้
ลบ คอมม่า (;) ออกหน้าข้อความในบรรทัดด้านล่างนี้

• zend_extension = C:\xampp\php\ext\php_xdebug-2.2.3-5.4-vc9.dll (ค่า php_xdebug-2.2.3-5.4-vc9.dll ของคุณอาจจะไม่เหมือนในบทความ)
• xdebug.remote_host=localhost
• xdebug.remote_enable=1 (ค่าเดิมเป็น 0 ให้คุณเปลี่ยนเป็น 1)
• xdebug.remote_handler = dbgp
• xdebug.remote_port=9000

ตามรูปภาพด้านล่าง เมื่อแก้ไขแล้ว กด Save

– หลังจากที่คุณแก้ไขไฟล์ php.ini เรียบร้อยแล้วให้คุณ Restart Apache (หรือ Restart เครื่องคอมพิวเตอร์)

ขั้นตอนสอง ตั้งค่าและการใช้งาน NetBeans IDE ร่วมกับ xDebug

– เปิดโปรแกรม NetBeans IDE แล้วคลิกเมนู Tools — Options ตามลำดับ (ดูตัวอย่างจากรูปภาพด้านล่าง)

– ปรากฏหน้าต่าง Opitons ให้คุณเลือกเมนู PHP (1) — แล้วคลิกเลือกแท๊บ Debugging (2) — จากนั้นเปลี่ยนค่า Debugger Port เป็น 9000 (3) เมื่อแก้ไขเสร็จแล้วคลิกปุ่ม OK (4) ตามลำดับ (ตัวอย่างตามรูปภาพด้านล่าง)

– สร้าง Project ใหม่ชื่อว่า xdebug เพื่อทดสอบการใช้งาน xDebug บนโปรแกรม NetBeans IDE

– ให้คุณ Copy โค๊ดที่ผมได้เขียนไว้เป็นตัวอย่างด้านล่างนี้ นำไปวางไว้ในไฟล์ index.php เพื่อทดสอบการใช้งาน debug

<?php

$apple = 5;
$banana = 2;
echo “Price total is ” . sum_price($apple, $banana);
function sum_price($one, $two) {
$price_one = checkPrice($one);
$price_two = checkPrice($two);
$result = $price_one + $price_two;
return $result;
}

function checkPrice($qty) {
$price = 1;
$result = 1;
for ($i = 0; $i < $qty; $i++) {
$result = $result * ($price + $i);
}
return $result;
}
?>

ตามรูปภาพด้านล่าง

– การใช้งาน Debug เพียงคุณต้องการให้โปรแกรมหยุดทำงานเพื่อตรวจสอบโค๊ด ก็เพียงคลิก Break Point ตรงหน้าตัวเลขบรรทัด เมื่อคุณคลิกแล้วจะเป็นสัญลักษณ์สีแดง ตามรูปภาพด้านล่าง (ในกรอบสีแดงสามารถคลิกเพื่อหยุดโปรแกรมเพื่อตรวจสอบได้)

– จากนั้นให้คุณคลิกปุ่ม Debug หรือพิมพ์คีย์บอร์ด CTRL + F5 (ตัวอย่างรูปภาพด้านล่าง)

– Run Debug แล้วโปรแกรม NetBeans IDE จะเด้งมาหน้าเว็บโหลดค้าง เหมือนรูปภาพด้านล่างนี้ แสดงว่าคุณทำ Debug ได้แล้ว

– ให้คุณกลับมาที่โปรแกรม NetBeans IDE ซึ่งตอนนี้ NetBeans IDE อยู่ในสถานะ Debug (เตรียมตัวตรวจสอบโค๊ด)

ความหมายของปุ่ม Debug ในโปรแกรม NetBeans IDE
ปุ่ม Continue หมายถึงให้โปรแกรมทำงานตามปกติเมื่อคุณกดปุ่มนี้ (กดปุ่มลัด F5)

ปุ่ม?Finish Session หมายถึงจบการ Debug โปรแกรมซึ่งหากคุณทำการ Debug โปรแกรมเสร็จแล้วควรคลิกปุ่มนี้ (กดปุ่มลัด Ship+F5)

? ปุ่ม Step infoหมายถึงการ Debug รายละเอียดทั้งหมดในฟังก์ชั่นทั้งหมด (และส่วนอื่นๆของโปรแกรม) (กดปุ่มลัด F7)

ปุ่ม Step Over หมายถึงการ Debug ข้ามรายละเอียดการทำงานในฟังก์ชั่น (กดปุ่มลัด F8)

ปุ่ม Step out หมายถึง การออกจากการ Debug ในฟังก์ชั่นการทำงานที่ทำอยู่ขณะนั้น (กดปุ่มลัด Ctrl+F7)

ปุ่ม Run to cursor หมายถึง การ Debug ในตำแหน่งที่ Cursor ชี้อยู่ขณะนั้น (กดปุ่มลัด F4)

ในบทความนี้แนะใช้การ Debug โดยกดปุ่ม F7 เพื่อดูรายละเอียดขั้นตอนการทำงานและคุณสามารถใช้เมาส์ Hover ตัวแปร PHP เพื่อดูค่าตัวแปรได้อีกด้วย

การ Debug Netbeans IDE นอกจากจะตรวจสอบแล้วยังสามารถแก้ไขประเภทตัวแปรและค่าตัวแปรได้ตามกรอบสีแดง

สำหรับบทความการใช้งาน NetBeans IDE ในการ Debug โปรแกรมภาษา PHP ก็มีเพียงเท่านี้ซึ่งผมหวังว่ามีประโยชน์ไม่มากก็น้อยในการเขียนโปรแกรม หากใครมีปัญหา แนะนำหรือติชม สามารถแสดงความคิดเห็นได้ครับ

The post Debug PHP ด้วยเครื่องมือ NetBeans IDE และ xDebug first appeared on การเขียนโปรแกรม, เทคโนโลยี.

MySQL คือระบบจัดการฐานข้อมูลที่เป็น Open Source โดยเป็นที่นิยมในการนำมาใช้งานกับเว็บไซต์แอพลิเคชั่น ซึ่ง MySQL มีความเร็ว, ความเสถียร ในการประมวลผล จึงเหมาะสำหรับจะใช้เป็นฐานข้อมูลพัฒนาระบบร่วมกับภาษา PHP

เครื่องมือที่ต้องเตรียมมีดังนี้

1. NetBeans IDE เวอร์ชั่น 7.x
2. Java Development Kit (JDK) เวอร์ชั่น 6 หรือ 7
3. MySQL database server เวอร์ชั่น 5.x

เปิดโปรแกรม NetBeans IDE ขึ้นมา สักเกตุ Panel ด้านซ้ายมือ คลิก Services -> Drivers แล้วคลิกขวาเมนู MySQL เลือกรายการ Connect Using… ตามรูปภาพด้านล่าง

จากนั้นจะปรากฎไดอะล๊อกบ๊อก ให้ใส่ข้อมูลรายละเอียดเกี่ยวกับฐานข้อมูล เมื่อใส่ข้อมูลครบถูกต้อง กด Test Connection เพื่อตรวจสอบการเชื่อมต่อ หากขึ้นข้อความ ” Success connected” แล้วคุณค่อยกด Next ตามรูปภาพด้านล่าง (เช็คถูกตรง Remeber password)

– Host : โฮสของ mysql
– Database : ฐานข้อมูลที่ต้องการเชื่อมต่อ (ในตัวอย่างบทความได้มีการสร้างฐานข้อมูลทดสอบไว้)
– user Name : ชื่อผู้ใช้ฐานข้อมูล
– password : รหัสผ่าน

ในหน้าจอนี้กด Next

ในหน้าจอนี้กด Finish เพื่อเชื่อมต่อฐานข้อมูล

เมื่อทำการเพิ่มการเชื่อมต่อจะมีเมนูเพิ่มขึ้นมาตามรูปภาพด้านล่าง ตรงเมนูนี้ คุณสามารถจัดการฐานข้อมูล MySQL ได้

หลังจากคุณตั้งค่าการเชื่อมต่อสำเร็จ จากนี้บทความจะแนะนำการใช้งานที่เกี่ยวกับโปรแกรม Netbeans IDE และ MySQL Database

การสร้างตาราง (table)
เข้าไปที่ ฐานข้อมูล-> Tables แล้วคลิกขวาเลือกรายการ Create Table…

เมื่อปรากฎไดอะล๊อกบ๊อก ขึ้นมาให้ใส่ชื่อตารางฐานข้อมูล(ในตัวอย่างตั้งชื่อ product) แล้วกด Add column เพื่อเพิ่มฟิล์ดตามรูปภาพด้านล่าง

ให้กรอกรายละเอียดของฟิล์ดตารางข้อมูล

Name : ชื่อฟิล์ดข้อมูล
Type : ประเภทข้อมูล
Size : ขนาดของข้อมูล
Scale : ความจุ
Constraints : กำหนดรายละเอียด PK,Uq,Null,Index ให้กับฟิล์ดข้อมูล

เมื่อสร้างฟิล์ดเสร็จเรียบร้อยแล้ว กด OK เพื่อสร้างตารางข้อมูล(Table) ตามรูปภาพด้านล่าง

ผลลัพธ์การสร้างตาราง

เมื่อคุณสร้างตารางเสร็จแล้วต่อไปเป็นการเพิ่มข้อมูล ให้คลิกขวาตารางที่เพิ่งสร้างแล้ว(ในบทความตารางชื่อ product) เลือกรายการ View Data… ตามรูปภาพด้านล่าง

จากนั้นคลิกปุ่ม Insert Record ตามรูปภาพสี่เหลี่ยมตีกรอบไว้ด้านล่าง

ในหน้าจอนี้หากคุณคลิกปุ่ม Show SQL/Hide SQL หมายถึง เปิดปิด Sql text และ หากคุณเพิ่มข้อมูลแถวแรกเรียบร้อยแล้วหากต้องการเพิ่มเข้าไปอีกให้คลิกปุ่ม Add Row จึงจะสามารถเพิ่มข้อมูลลงไปได้

ถ้าคุณใส่ข้อมูลลงไปให้เรียบร้อยแล้วกด OK

สรุปหน้าจอ Run sql query

sql query text : ใช้สำหรับเขียนภาษา sql เช่น select, insert, update, delete
run button : หลังจากเขียนสคริป sql แล้วสามารถกดปุ่ม run sql ได้
data : เมื่อกดปุ่ม run sql จะมีข้อมูลแสดงผล
result : ผลลัพธ์แสดงรายละเอียดต่างๆในการ run sql

หากมีข้อสงสัยหรือปัญหาการติดตั้งสามารถเขียนคอมเม้นต์ด้านล่างได้เลยครับ

The post การเชื่อมต่อและจัดการฐานข้อมูล MySQL โดยใช้ Netbeans IDE first appeared on การเขียนโปรแกรม, เทคโนโลยี.

1. คลิก ปุ่มสร้าง Project (วงกลมรูปภาพด้านล่าง) หรือจะคลิกเมนู File – New Project…

2. ในหน้าจอนี้เลือก Project เป็น PHP Application ตามรูปภาพด้านล่าง แล้วกด Next

3. ในหน้าจอนี้ให้กรอกข้อมูล

• Project Name : ชื่อ Project ของคุณ
• Sources Folder : เลือกที่อยู่ของ Project ในตัวอย่างใช้ XMAPP แต่ถ้าหากเป็น Appser ให้เลือกเป็น C:\appserv\www\Projectname (สามารถกด Browse.. หาโฟล์เดอร์ได้)
• PHP Version : เลือกเวอร์ชั่น PHP ในการพัฒนา

เมื่อกรอกรายละเอียดครับเรียบร้อยแล้วให้คลิกปุ่ม Next

4. ตั้งค่า Run Configuration คุณสามารถเลือกได้ว่า Run as ที่บน Server ได้แต่ในตัวอย่างนี้จะ Run บนเครื่องของตัวเองให้เลือกตามรูปภาพด้านล่าง แล้วกด Next

5. สร้าง Project PHP เสร็จเรียบร้อยแล้ว โฟล์เดอร์งาน Project จะอยู่ด้านซ้าย

หากมีข้อสงสัยหรือปัญหาการติดตั้งสามารถเขียนคอมเม้นต์ด้านล่างได้เลยครับ

The post การสร้าง Project ใหม่ในโปรแกรม NetBeans IDE PHP first appeared on การเขียนโปรแกรม, เทคโนโลยี.

อันดับแรกให้คุณดาวน์โหลดโปรแกรมก่อนที่เว็บ https://netbeans.org/ เมื่อดาวน์โหลดมาเสร็จแล้วให้ทำการติดตั้ง กรณีที่ติดตั้งไม่ได้ให้โหลดโปรแกรม JDK แล้วติดตั้งก่อนโดยหาดาวน์โหลดได้จากเว็บ http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

หลังจากที่ติดตั้งโปรแกรมเรียบร้อย ให้เปิดโปรแกรมเข้ามาใช้งาน มีหน้าตาโปรแกรมแบบนี้

บทความต่อไปจะเขียนเรื่องการสร้าง Project การจัดการไฟล์ใน Project และการตั้งค่าพื้นฐาน NetBeans

หากมีข้อสงสัยหรือปัญหาการติดตั้งสามารถเขียนคอมเม้นต์ด้านล่างได้เลยครับ

The post NetBeans เครื่องมือในการเขียนโปรแกรมภาษา PHP first appeared on การเขียนโปรแกรม, เทคโนโลยี.