การเชื่อมต่อ FTP Server โดยใช้โปรแกรม Dreamweaver

       หลายท่านคงเลยใช้โปรแกรม Filezilla ซึ่งเป็นโปรแกรมที่ใช้สำหรับติดต่อกับ FTP  Server เพื่อเข้าถึงไฟล์ที่อยู่ใน Server ทำให้สามารถดาวน์โหลดมาไว้ในคอมพิวเตอร์ของเรา หรืออัพโหลดไฟล์ที่อยู่ในคอมพิวเตอร์ของเราไปเก็บไว้ใน Server
       แต่สำหรับ Web Programmer อย่างผม มันไม่ค่อยสะดวกต่อผมเป็นอย่างมาก ในกรณีที่ต้องทดสอบเว็บไซต์กับHostจริงๆ และจะต้องแก้ไขโค๊ดอยู่ตลอด โดยต้องเปิดโปรแกรม Filezilla ค้างไว้ และแก้โค๊ดไฟล์ของเว็บไซต์ที่อยู่ในเครื่อง แล้วโยนไฟล์ไปที่ Filezilla ทุกครั้งที่แก้ไขไฟล์ จะต้องทำอย่างนี้ทุกครั้งมันดูน่าเบื่อมาก ผมก็เลยใช้Dreamweaverช่วยซะเลย โดยมันสามารถดึงไฟล์ที่อยู่ใน Server ของเรามาโชว์ในโปรแกรม และสามารถเปิดไฟล์แก้ไขได้เลยทันที ทำให้สะดวกมากไม่ต้องเสียทำหลายขั้นตอนให้ยุ่งยาก

มาดูวิธีเชื่อมต่อกับ FTP Server ของโปรแกรม Dreamweaver กันเลยครับ

1.เปิดโปรแกรม Dreamweaver ขึ้นมาแล้วไปที่แท็บ FILES เลือก Manage Sites… ดังรูป

2.หน้าต่าง Manage Sites จะปรากฏขึ้นมา ให้เราเลือกที่ New เพื่อสร้างโปรเจ็คใหม่

3.ที่เมนู Site ให้ตั้งชื่อโปรเจ็ค หรือ Site Name และกำหนดPathสำหรับเก็บไฟล์จาก Server เอาไว้ในเครื่องของเรา โดยมันจะเก็บเฉพาะไฟล์ที่เราแก้ไขเท่านั้น

4.ต่อมาเลือกเมนู Servers แล้วคลิกเครื่องหมาย + ดังรูป

5.หลังจากที่กดเครื่องหมาย + แล้ว จะปรากฏหน้าต่าง ให้เรากรอกรายละเอียดของ FTP Server ที่เราต้องการจะเชื่อมต่อ ขึ้นมาดังรูป

ให้กำหนดค่าตามรูปข้างบนได้เลย โดยเปลี่ยนข้อมูลให้ตรงกับ Server ของท่านเท่านั้น และให้สังเกตุ Port ของ Server ของท่านให้ดีครับว่าใช้ Port อะไร สำหรับ Server ของผมใช้ Port 2002 ครับ

Joomla 2.5 กับการเพิ่มเมนูด้านบน (Top Menu)

     หลังจากที่ได้สอนเพิ่มตำแหน่ง(Position) ในเทมเพลทของ Joomla 2.5 เพื่อแสดงผลโมดูลมาแล้ว สามารถศึกษาได้จาก >> วิธีเพิ่มตำแหน่งใหม่ในTemplateของ Joomla 2.5
     คราวนี้จะสอนเพิ่มเมนูด้านบนหรือTop Menu บ้างครับ แต่ก่อนอื่นเราจำเป็นจะต้องรู้ตำแหน่งแสดงผลของเมนูก่อน สำหรับผมแล้ว ผมใช้เทมเพลทหลัก ที่ได้ถูกติดตั้งให้อัตโนมัติ ในขั้นตอนติดตั้งจูมล่าตั้งแต่แรกแล้วครับ โดยที่ไม่ได้เปลี่ยนไปใช้เทมเพลทอื่นแต่อย่างใด
     สำหรับวีธีหาตำแหน่งให้ศึกษาตามนี้ http://www.ostraining.com/blog/joomla/how-to-find-the-module-postions-in-a-joomla-16-template จากนั้นให้พิมพ์ /index.php?tp=1 ในช่อง Address Bar ต่อจากชื่อโดเมนของคุณ เช่น http://www.domain.com/index.php?tp=1 เราจะเห็นตำแหน่งดังรูป

แสดงตำแหน่งTemplateของJoomla

     จากรูปข้างบน ผมใช้Templateชื่อว่า beez_20 และเลือกตำแหน่งของเทมเพลท คือตำแหน่ง positon-1 จะเห็นได้ว่าตำแหน่งที่Joomlaแสดงให้เราเห็นนั้น ค่อนข้างจะเพี๊ยนไปซักเล็กน้อย ซึ่งผมเองก็หาสาเหตุไม่ได้ ทำให้งงอยุ่เหมือนกัน ^^’’ แต่ก็พอให้เราสามารถเดาออก ว่าควรแสดงโมดูลในตำแหน่งใดบ้าง

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

วิธีเพิ่มตำแหน่งใหม่(Position)ในTemplateของJoomla 2.5

Template ของ Joomla ส่วนมากแล้วแต่ละตัวจะถูกกำหนดการแสดงผลโมดูลเอาไว้ไม่เหมือนกัน ดังนั้นถ้าเราได้เลือกใช้ Template ที่เราถูกใจไปแล้ว แต่มีตำแหน่งไม่พอที่เราจะเพิ่มเนื้อหาบางส่วนเข้าไป ซึ่งใน Template ของ Joomla เองค่อนข้างที่จะมีความยืดหยุ่นพอสมควร สามารถเพิ่มตำแหน่งใหม่ได้ไม่จำกัด

วิธีเพิ่มตำแหน่งใหม่ใน Template ของ Joomla
1.เปิดไฟล์ templateDetails.xml ในโฟลเดอร์ templates/โฟลเดอร์templateของคุณ/templateDetails.xml ให้เพิ่มตำแหน่งเข้าไปโดยแทรกคำสั่ง <position>ชื่อตำแหน่ง</position> ดังรูป

ในรูปผมได้เพิ่มตำแหน่งใหม่เข้าไป ชื่อว่า position-15 กับ position-16

การใช้งาน TRIGGER ใน MySQL

     หลายท่านคงจะเคยเขียนคำสั่งExecuteกับฐานข้อมูลหลายๆเทเบิลในเวลาเดียวกัน เช่น Insert เสร็จ แล้วดึงค่า id ล่าสุดไปใส่อีกเทเบิลนึงที่สัมพันธ์กัน ซึ่งมันจะทำงานซ้ำๆกันอย่างนี้ทุกครั้ง ความจริงแล้วเราสามารถกำหนดการทำงานแบบนี้ได้ 2 วิธี คือ

1.กำหนดการทำงานที่ Code PHP ได้เลย คือ เพิ่มเสร็จแล้วเขียนคำสั่งดึงค่า id ล่าสุด
(mysql_insert_id()) ออกมา แล้วเขียนคำสั่งเพิ่มลงไปในเทเบิลอื่นอีกครั้ง จะเห็นได้ว่ามันมีหลายขั้นตอนเกินไปและค่อนข้างยุ่งยากพอสมควร

2.การเขียน Trigger โดยเจ้าTriggerนี้จะทำงานที่ตัว MySQL เลยครับ ไม่ต้องเขียนโค๊ด PHP หลายขั้นตอนให้เหนื่อย
Codeก็เขียนง่ายแสนง่าย เช่น

วิธีสร้าง Trigger

CREATE TRIGGER after_insert_product
   AFTER INSERT ON  product FOR EACH ROW
    BEGIN
      UPDATE category
      SET category_pd_count= (NEW.category_pd_count+1)
      WHERE category_id = NEW.category_id;
END

     จากคำสั่งด้านบน อธิบายได้แว่ เอ้ย ว่า Trigger ตัวนี้มีชื่อว่า after_insert_product ทำงานหลังจากเพิ่มสินค้าลงเทเบิล product ให้มันไปบวกจำนวนสินค้า(category_pd_count)ในเทเบิล category เพิ่มอีก 1 โดยมีเงื่อนไขว่า category_id ของเทเบิล category เท่ากับ category_id ของเทเบิล product ที่เพิ่มไปล่าสุดเท่านั้น (NEW.category_id)

คำสั่งแสดงชื่อ TRIGGER ที่เราได้สร้าง

SHOW TRIGGERS;->แสดงทั้งหมด
SHOW TRIGGERS LIKE 'ins%';->ค้นหาtriggerที่ขึ้นต้นด้วย ins

ถ้าเราจะต้องการลบการทำงานของ Trigger ชื่อ after_insert_product ก็แค่ใช้คำสั่ง

DROP TRIGGER IF  EXISTS after_insert_product ;

มาดูคำสั่งอื่นๆที่ผมรวบรวมมาครับ

jQuery กับการส่งค่าข้ามเพจ

     วันนี้มีเทคนิคเด็ดๆเกี่ยวกับ jQuery ที่น่าสนใจมานำเสนอครับ บางท่านอาจจะเคยใช้เทคนิคนี้มาแล้ว นั่นคือการส่งค่าจากหน้าเว็บหนึ่งไปยังอีกหน้าเว็บหนึ่่ง
      ซึ่งการทำงานของมันคือ หน้าเว็บปลายทางจะสามารถส่งค่าไปยังหน้าเว็บต้นทางที่เรียกใช้มันเท่านั้น โดยเราจะประยุกต์ใช้คำสั่ง window.opener กับหน้าเว็บปลายทางครับ หน้าเว็บปลายทางสามารถเข้าถึง Method หรือ Function และ Element ต่างๆที่อยู่หน้าเว็บต้นทางที่เรียกใช้มันได้ทั้งหมด

มาดูโค๊ดตัวอย่างกัน

หน้าเว็บต้นทาง ตั้งชื่อว่า mainfile.html พิมพ์Codeตามนี้ครับ

ส่วนของ Javascript

<script type="text/javascript">
function showHello(){
 alert('Hello World');
}
</script>

ส่วนของ body

<div id="hello"></div>
<!--<a href="popup.html" target="_blank">ไฟล์หน้า POPUP</a> -->
<input type="button" name="callPopUp" id="callPopUp" value="เรียกหน้า POPUP" onclick="window.open('popup.html', '_blank', 'height=200, width=400');" />

MySQL กับคำสั่งCopyแถวข้อมูล

     วันนี้มีคำสั่งของ MySQL มาแนะนำครับ ซึ่งมีประโยชน์ต่อการเพิ่มข้อมูลโดยที่เราไม่ต้องกรอกข้อมูลใหม่ทั้งหมด เช่น เราทำเว็บขายของหรือร้านค้าออนไลน์ มีสินค้าที่เป็นยี่ห้อเดียวกันแตกต่างกันที่รุ่นของสินค้าและมีรายละเอียดหรือสเป็คของสินค้าที่แตกต่างกันเล็กน้อย แต่ไม่ต้องการเพิ่มใหม่เองทั้งหมด แค่ต้องการจะนำข้อมูลเดิมจากสินค้าที่เพิ่มไปแล้วมาCopyเป็นRecordใหม่ และแก้ไขข้อมูลเพียงเล็กน้อยเท่านั้น เป็นต้น
รูปแบบของคำสั่งSQL

INSERT INTO tableที่จะเพิ่ม  (field1, field2)
SELECT field1,field2  FROM tableที่จะCopy
WHERE ใส่เงื่อนไข (ถ้ามี)

การใช้งาน
1.คัดลอกในเทเบิลเดียว
 เช่นผมมีเทเบิลสินค้าชื่อ products และต้องการคัดลอกสินค้ารหัส 2 (product_id=2) ให้เพิ่มแถวใหม่ แต่จะมีข้อมูลเหมือนสินค้ารหัส 2
ใช้คำสั่งSQLดังนี้

INSERT INTO products  (product_name, product_detail,product_qty)
SELECT product_name, product_detail ,0 FROM products
WHERE product_id=2

อธิบายคำสั่งข้อ 1
1.ฟิลด์ product_name ของเทเบิล products จะถูกเพิ่มลงฟิลด์ product_name และกลายเป็นแถวใหม่
2.ฟิลด์ product_detail ของเทเบิล products จะถูกเพิ่มลงฟิลด์ product_detail และกลายเป็นแถวใหม่
3.ค่า 0 (จำนวนสินค้า)  จะถูกเพิ่มลงฟิลด์ product_qty เพื่อเซตจำนวนสินค้าให้เป็นศูนย์ และกลายเป็นแถวใหม่

.htaccess กับการปิดปรับปรุงเว็บไซต์

ภาพนี้ไม่เกี่ยวข้องกับเนื้อหาที่สอน โปรดใช้วิจารณญาณในการอ่าน

     หากเว็บไซต์ที่คุณพัฒนาด้วยตนเอง (เขียนCodeเอง) หรือใช้ CMS บางเจ้า ที่อาจไม่มีอ๊อปชั่นปิดปรับปรุงเว็บ (แต่ส่วนมากแล้วจะมี) วันดีคืนดีเจอปัญหาบางอย่าง เช่น เว็บโหลดช้า ซึ่งอาจเกิดจากฐานข้อมูล หรือเว็บขายของออนไลน์บางท่าน อยากปิดร้านไปเที่ยวชิวๆ เพื่อไม่ให้ลูกค้าโทรมากวนใจ ก็เลยคิดว่า เมื่อลูกค้าเสริชเจอสินค้าใน google ไม่ว่าจะเข้ามาจากทางลิงค์ไหนในเว็บไซต์ของเรา ก็ให้มันแสดงข้อความบางอย่างขึ้นมาหรือRedirectไปหน้าแจ้งปิดปรับปรุงเว็บไซต์

สรุปแล้วมันมีสองวิธีที่ผมแนะนำครับ

วิธีที่ 1 แสดงป๊อปอัพขึ้นมาเพื่อแจ้งลูกค้าว่าปิดปรับปรุงร้านค้าออนไลน์ ผมได้เขียนบทความเอาไว้แล้ว ศึกษาได้จาก สอนทำข้อความต้อนรับแบบ Popup ด้วย jQuery UI  สามารถนำมาประยุกต์ใช้แจ้งปิดปรับปรุงร้านได้แน่นอนครับ  โดยเลือกเอาโค๊ดเหล่านี้ออก
ส่วนที่ 1 เอาCode เรียกใช้ Plugin jQuery Cookie ออก

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" type="text/javascript"></script>

ส่วนที่ 2 เอาCodeที่เกี่ยวกับ jQuery Cookie ออก ให้เหลือแค่

สอน Web Services PHP ตอนที่ 2 การแสดงข้อมูลสินค้าโดย return ค่าแบบ Array

     วันนี้ประสบความสำเร็จในการศึกษา วิธีสร้าง Web Services ด้วย PHP โดยใช้libraryของ nusoap  ให้สามารถคืนค่าข้อมูลที่เรียกใช้งานไปยังฝั่งClient ในรูปแบบของArrayได้ ผมได้เจอปัญหางงๆอยู่พักนึง คือ ไม่แสดงผลลัพธ์แบบในบทความของฝรั่งที่ผมได้ศึกษา ทั้งที่โค๊ดก็ถูกต้องหมดแล้ว และแสดง Error ประมาณว่า XML error parsing SOAP payload on line 2: Invalid document end

     ซึ่งก็สรุปได้ว่า มันไม่ค่อยรองรับการรีเทิร์นค่าแบบอาเรย์หลายมิติใน PHP เวอร์ชั่นที่ผมใช้งานอยู่ครับ คือ 5.4.2 ก็เลยกลับมาใช้ 5.2.10 และเวอร์ชั่น 5.3 ก็รองรับเหมือนกันครับ ดาวน์โหลดได้จาก http://sourceforge.net/projects/nusoap/    ให้แตกไฟล์ออกมาจะได้โฟลเดอร์ lib กับ samples แล้วCopyเอาไว้ในโฟลเดอร์โปรเจ็คของคุณได้เลย  สำหรับของผม ผมเอาไว้ในโฟเดอร์โปรเจ็คชื่อ soap ซึ่งก็ถือว่าเราได้ติดตั้ง nusoap Web Services สมบูรณ์แล้วครับ
     ต่อไปเราจะมาทดลองเขียนโค๊ดง่ายๆ ในการดึงข้อมูลสินค้าจากฐานข้อมูลร้านค้าออนไลน์มาแสดงกัน โดยเราจะเขียนCodeในฝั่ง Server กับ ฝั่ง Client กันครับ
     ผมได้สร้างโค๊ดฝั่ง Server โดยตั้งชื่อไฟล์ว่า myserver.php และฝั่ง Client ตั้งชื่อว่า myclient.php
ไฟล์ myserver.php เราจะเขียนโค๊ดดังนี้

สอน Web Services (เว็บเซอร์วิส) PHP ตอนที่ 1

     ในการทำเว็บไซต์ทางด้านธุรกิจ อย่างเช่น Web E-Commerce  (ร้านค้าออนไลน์,เว็บขายของ)เราอาจมีเว็บไซต์ในเครืออยู่หลายเว็บไซต์ และมีเว็บหลักอยู่ 1 เว็บ ซึ่งมีข้อมูลสำคัญต่างๆ ของสินค้า สมาชิก หรือข้อมูลสำคัญอื่นๆ อยู่ในเว็บหลักนี้ทั้งหมด แต่ถ้าเราอยาก กระจายข้อมูลจากเว็บแม่ไปยังเว็บลูกด้วย โดยให้ใช้ฐานข้อมูลเฉพาะบางส่วน เช่น ให้สามารถเข้าถึงเทเบิลสามาชิกได้ แสดงข้อมูลได้เท่านั้น แต่ไม่สามารถเพิ่ม,แก้ไข,ลบข้อมูล หรือต้องการให้แสดงสินค้าเฉพาะบางหมวดเท่านั้น เป็นต้น
     เราอาจใช้วิธีแชร์ข้อมูลแบบง่ายๆ โดยให้เว็บแม่สร้าง feed.xml ให้เว็บลูกเข้าไปดึงข้อมูลในรูปแบบ XML มาแสดงได้ แต่ก็ยังขาดความปลอดภัยของข้อมูลอยู่ดีครับ เพราะคนอื่นๆสามารถเข้าถึงข้อมูลและดึงข้อมูลของเราไปใช้ได้ และความสามารถจะถูกจำกัดได้แค่แสดงข้อมูลเท่านั้น ไม่สามารถกำหนดให้ เพิ่ม/ลบ/แก้ไขข้อมูลได้
     เว็บเซอร์วิส (Web Services) จึงถูกสร้างมา เพื่อเข้าถึง/จัดการกับข้อมูลระหว่างคอมพิวเตอร์ โดยเฉพาะเลยครับ เราสามารถสั่งให้มันบริการข้อมูลต่างๆได้ดั่งใจของเราเลย โดยสามารถกำหนดสิทธิ์ ให้แสดง เพิ่ม ลบ แก้ไขข้อมูล ในเทเบิลนี้ได้ เทเบิลนั้นเข้าได้แต่ต้องมีรหัสผ่าน
ยกตัวอย่างเช่น ระบบ Login ของ Facebook ครับ ซึ่งสามารถนำมาติดหน้าเว็บไซต์ของเรา แทนหน้าล็อกอินของเราได้ โดยที่สมาชิกไม่จำเป็นต้องสมัครสมาชิก จากหน้าเว็บไซต์ของเรา สามารถเอา Account ของ Facebook มาใช้งานกับเว็บไซต์ของเราได้เลย

สอนทำเมนูแนวตั้ง แสดงผลแบบสไลด์ขึ้น/ลงด้วย jQuery (Dropdown Menu,Verical Menu)

     Jquery เป็น Javascript Framework ตัวหนึ่ง ที่ได้รับความนิยมมากที่สุดเลยก็ว่าได้ครับในตอนนี้ และอนาคตผมคิดว่ามันยังคงได้รับความนิยมไปอีกนานจนโลกแตก!!!

     เพราะมันมีความพิเศษอยู่ในตัวของมันหลายอย่าง นอกจากการใช้งานที่ง่ายแล้ว มันยังช่วยลดภาระให้กับโค๊ด Javascript ที่ยุ่งยากของเราให้สั้นกระชับและเข้าใจง่ายยิ่งขึ้นอีกด้วย รวมถึงเอฟเฟ็ก (Effect) การแสดงผลต่างๆ ที่มีให้เลือกใช้งานหลาก อาทิ การแสดงผลแบบ fadeIn  fadeOut  , สไลด์ขึ้นลง slideUp slideDown รวมถึงคำสั่ง animate ซึ่งเป็นแบบขั้นสูงขึ้นมาหน่อย ซึ่งเราสามารถกำหนดการแสดงผล ตามความต้องการของเราได้ ว่าจะให้มีลูกเล่นแบบไหน ประมาณว่า สั่งได้ดั่งใจ เลยก็ว่าได้

     วันนี้ก็เลยขอหยิบ Effect slideUp กับ slideDown มาทำเมนูให้ดูเป็นขวัญตาซักหน่อยครับ ซึ่งเมนูที่สอนจะเป็นเมนูแนวตั้งนะครับ ฝรั่งมักจะเรียกว่า Vertical Menu หรือDrop down Menu ครับ

     มาดูโค๊ดกันเลยครับ และลองนับบรรทัดโค๊ด jQuery ของผมดูครับว่าใช้กี่ไปบรรทัด แล้วทั่นจะอึ้งในความเทพของมัน อย่างที่ผมต้องคาราวะมันเลยครับ ^^

คำสั่งที่น่าสนใจของ Imacros

     ช่วงนี้ผมสนใจเจ้า Imacros อยู่ครับ มันคือ add on บน Web Browser ซึ่งรองรับทั้ง Firefox , Chorme , IE และมีตัวเต็ม ซึ่งจะเป็นในรูปแบบของโปรแกรม Imacros เลยครับ และต้องเสียตังค์ซื้อ จุดเด่นของมัน คือ สามารถบันทึกการทำงานบางอย่างที่เกิดขึ้นซ้ำๆ บนหน้าWeb Page ของเราครับ

     Imacros มันจะช่วยทุ่นเวลาให้เราได้อย่างมากเลยครับ เช่น มีประโยชน์ต่อการโพสข้อความทำ SEO ตามเว็บต่างๆ เช่นการโพสสินค้าตามเว็บบอร์ดต่างๆ ซึ่งจะทำให้สะดวกและรวดเร็ว โดยที่เราไม่จำเป็นต้องโพสเองทีละเว็บ โดยเราสามารถทำให้สินค้าของเราสามารถโพสกระจายไปยังเว็บต่างๆโดยอัตโนมัติเพียงคลิกเดียว

ถ้าให้ผมแนะนำว่าจะให้ add on ของ Imacros ใช้กับ Web Browser เจ้าไหนดี แนะนำเลยครับว่า ให้ใช้ Firefox
จะดีที่สุดครับ ดาวนโหลดได้จาก https://addons.mozilla.org/en-us/firefox/addon/imacros-for-firefox/
เพราะทำงานได้ไวดี ไม่หน่วง ไม่เออเร่อ โอเคที่สุดแล้วครับ ถ้าเป็น Chrome หรือ IE บางครั้งก็มีค้างอยู่เหมือนกันครับ

ถ้าอยากรู้วิธีใช้งาน สามารถหาอ่านตามเว็บต่างๆได้เลย เพราะมีให้เลือกศึกษาเยอะเลยครับ แต่ที่แนะนำคือเว็บ http://www.hackublog.com/search/label/iMacros?&max-results=3  ซึ่งจะเขียนได้ละเอียดดีครับ

     สำหรับผมจะขอข้ามขั้นตอนพื้นฐานไปเลย เพราะมีคนเขียนไว้แล้ว ตามเว็บที่แนะนำข้างต้น
ผมจะขอรวบรวมคำสั่งต่างๆ ที่สำคัญของ Imacros เอาไว้เตือนความจำของตัวเองหรือคนอื่นที่สนใจเรื่องของ Imacros ด้วยครับ

การตรวจสอบขนาดตัวอักษรในช่อง Input ด้วย Jquery

     วันนี้ได้ลองเขียนโค๊ด Jquery ตรวจสอบขนาดตัวอักษรในช่อง Input ดูครับ ในกรณีที่เราต้องการให้กรอกตัวอักษรไม่เกินกว่าขนาดที่กำหนดไว้ ความสามารถของมันคือ จะตัดคำให้อัตโนมัติ ให้เหลือเท่ากับจำนวนที่เรากำหนดเท่านั้น ในกรณีที่กรอกขนาดเกินกว่าที่กำหนดครับ สามารถนำใช้ได้กับ Tag Input  ที่เป็น textfield กับ textarea ได้เลย

มาดูโค๊ดกันเลย
ส่วนของ Jquery ใช้คำสั่งดังนี้ครับ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 function lenText(ele, len,show_count_area) {
                var strlen = ele.val().length;
                var w = ''; for (var i = 0; i < len; i++) {var x = ele.val().charAt(i); w += x; }
                var result_char=(len*1)-(strlen*1);
                if(result_char>=0){ $('.'+show_count_area).html(result_char);}
                ele.val(w);
            }
</script>

บรรทัดที่ 1 คือการเรียกใช้ไฟล์ jquery (Javascript Framework)
บรรทัดที่ 2 คือฟังก์ชั่น lenText ทำหน้าที่เช็คจำนวนตัวอักษรในช่อง Input ของเราครับ

เวลาใช้งานฟังก์ชั่นนี้ให้ใช้คำสั่งใน Input Tag ของเราดังนี้

<input name="input1" type="text" id="input1" size="50"  onkeyup="lenText($(this), 65,'showctext')"/> 
  <span  style="color:green;">(<span class="showctext">65</span>)</span>
* ไม่เกิน 65 ตัวอักษร<br />

เราจะให้ฟังก์ชั่น lenText ทำงานเมื่อมีคีย์ข้อมูลเกิดขึ้น คือคำสั่ง onkeyup="lenText($(this), 65,'showctext')"
โดยที่มีพารามิเตอร์ ดังนี้
1.$(this) หมายถึง input ตัวปัจจุบันที่เราคีย์ข้อมูลอยู่ครับ เราสามารถใช้ได้กับ Input หลายตัวได้เลย
2.65 คือ ขนาดตัวอักษรที่จะใช้ตรวจว่าต้องไม่เกิน 65 ตัวอักษร เราสามารถกำหนดขนาดตรงนี้ได้เลย
3.showtext คือ ชิ้อของ Att Class ที่เราจะให้แสดงขนาดตัวอักษรทั้งหมดที่เราได้ใช้ไปครับ ว่าตอนนี้เหลืออยู่เท่าไหร่

การใช้ฐานข้อมูล SQLITE ร่วมกับ PHP

     ตอนนี้ผมมีความคิดที่อยากลองนำฐานข้อมูล SQLITE มาใช้จัดเก็บข้อมูลในระบบแชทครับ ซึ่ง SQLITE เป็นฐานข้อมูลขนาดเล็ก เหมือนกับ MS-ACCESS นั้นแหละครับ แต่ข้อดีของมันคือ ฟรี ใช้ได้ไม่จำกัดระบบปฏิบัติการ และมีความสามารถใน การจัดเก็บและจัดการข้อมูลได้มีประสิทธิภาพ ในปริมาณข้อมูลที่มากกว่า MS-ACCESS ครับ
     ส่วนมากแล้วจะนิยมใช้ร่วมกับ การพัฒนาแอฟบนมือถือ เช่น android  เพื่อใช้จัดเก็บข้อมูลทั้งหมดที่ทำงานบนมือถือ เช่น การตั้งค่าต่างๆ ,ข้อมูลการโทรเข้า-ออก รายชื่อเบอร์โทรติดต่อ ฯลฯ รวมถึง Web Browser อย่างเช่น Firefox ก็ใช้ SQLITE จัดเก็บข้อมูลเหมือนกันนะครับ เช่น ประวัติการเข้าเว็บ, ที่คั้นหน้า , การตั้งค่าต่างๆ ฯลฯ PHP เองก็มี Class ที่สร้างเอาไว้ติดต่อกับ SQLITE อยู่ครับ เราสามารถเรียกใช้ได้เลยทันที

มาดูวิธีใช้งานแบบง่ายๆในแบบของผมกันเลยครับ

1.อันดับแรกให้ติดตั้ง Add on ของ Firefox ชื่อว่า SQLite Manager ตัวนี้ก่อน -> https://addons.mozilla.org/en-us/firefox/addon/sqlite-manager/

2.เมื่อติดตั้งเสร็จแล้วให้เปิดโปรแกรมตัวนี้ขึ้นมา โดยไปที่ เครื่องมือ >> SQLite Manager ดังรูป

3.เมื่อโปรแกรมแสดงขึ้นมา ให้เราสร้างฐานข้อมูล โดยไปที่เมนู Database >> New Database ดังรูป

3.ให้ใส่ชื่อฐานข้อมูล ตัวอย่างผมชื่อว่า db_test เมื่อกด ตกลง แล้วมันจะให้เราเลือกที่อยุ่จัดเก็บไฟล์ db_test.sqlite คุณสามารถเลือกที่จัดเก็บได้ตามต้องการ

Google Map API V.3 : ค้นหาแผนที่แบบ Autocomplete

    ผมเคยเขียนบทความสอนใช้งาน Google Map API มาบ้างแล้ว  ดูได้จาก Google Maps API
และบทความนี้ผมจะสอนเพิ่มช่องค้นหาเข้าไปด้วยครับ เพราะจะทำให้สามารถค้นหาตำแหน่งได้รวดเร็วยิ่งขึ้น โดยที่ไม่จำเป็นต้องหาตำแหน่งในแผนที่เองโดยการเลื่อนแผนที่ไปยังตำแหน่งที่เราต้องการ
    เนื่องจากการทำงานของมัน คือ จะเลื่อนหมุดไปยังตำแหน่งที่เราค้นหาให้เราโดยอัตโนมัติ และการค้นหาจะทำงานแบบ Autocomplete
มาดูโค๊ดกันเลยดีกว่า

เริ่มต้นสร้าง Chart อย่างเทพกับ jqPlot

     ผมสนใจตัวทำแผนภูมิหรือ Charts ซึ่งเป็น Plugin ของ jQuery อยู่ตัวนึง  ที่ฟรีแบบไม่มีเงื่อนไขใดๆ  ซึ่งจะไม่เหมือนกับ Highchart  ที่หลายคนอาจรู้จักและเคยใช้ แต่เราไม่สามารถเอามาใช้ในเชิงพาณิชย์แบบฟรีๆได้
     ส่วนเจ้าตัวนี้มีชื่อว่า jqPlot ครับ เราสามารถเอามาพัฒนาดัดแปลงใช้กับเว็บไซต์ที่แสวงผลกำไรอย่างเช่นเว็บอีคอมเมิร์ซได้แบบไม่ต้องกลัวโดนฟ้องว่าละเมิดลิขสิทธิ์ และถึงแม้หน้าตาหรือลุกเล่นจะสู้ Highchart ไม่ได้ และแสดงผลอาจจะเพี๊ยนอยู่บ้างบน IE แต่ก็มีวิธีแก้ปัญหานี้ได้ เดี๋ยวผมจะสอนทีหลังว่าต้องแก้ไขยังไงครับ ถึงแม้ว่ามันจะทำงานแบบ Javascript แต่ก็สามารถใช้ภาษา PHP ดึงข้อมูลจากฐานข้อมุล MySQL มาแสดงได้นะครับ

1.ให้ดาวน์โหลดได้จากเว็บไซต์ https://bitbucket.org/cleonello/jqplot/downloads/ ถ้าได้ไฟล์มาแล้ว ก็ให้ Extract จะได้โฟลเดอร์ชื่อ dist ให้เปลี่ยนชื่อใหม่เป็น jqplot เพื่อจะได้สื่อความหมายหน่อยแล้วเอาไปติดตั้งไว้ใน Web Server ของเรา
2. jqplot มันพัฒนาจาก jQuery คับ ถ้าจะใช้งานก็ต้องมีการเรียกไฟล์ jquery.js เข้ามาในโปรเจ็คของเราก่อน

ถ้าเราใส่โค๊ดนี้เข้าไป ในส่วนของ <head>

สอนทำ Autocomplete และ Autofill แสดงข้อมูลจากฐานข้อมูล

      สืบเนื่องมาจากบทความ สอนทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า มีสมาชิกท่านหนึ่งถามผมว่า ถ้าเราเลือกที่ตัวเลือกใดตัวเลือกหนึ่งใน Autocomplete สามารถดึงข้อมูลรายละเอียดต่างๆที่เกี่ยวข้องมาแสดงแบบอัตโนมัติหรือ Autofill ในช่อง Input อื่นๆได้ไหม
     ผมจึงต้องขออนุญาตเขียนบทความสอนทำ Autocomplete และ Autofill ให้อ่านกันไปเลยครับ เพราะวิธีทำก็ไม่ยากอะไรเลย เราจะใช้ Autocomplete ของ jQuery UI นะครับ ผมจะไม่ใช้ Autocomplete ที่ผมสร้างขึ้นเองและได้สอนจากบทความก่อนมาดัดแปลง เพราะขี้เกียจและยอมรับว่าฝีมือยังกากมาก ^^”” ในเมื่อมันมี Plugin ขั้นเทพอย่าง jQuery UI ของ jQuery ให้ใช้ แล้วไยต้องมาเขียนโค๊ดเองให้ปวดกบาลทำไมครับ ว่าไหม!!!

Yii Framework กับการทำ Friendly URL

     วันนี้จะมาสอนปรับแต่ง URL ของ Yii (PHP Framework) กันครับ URL โดยปกติของ Yii Framework ที่เป็นค่าเริ่มต้น จะมีรูปแบบ เช่น http://localhost/myyii/index.php?r=site/login แต่เราก็สามารถเปลี่ยน URL ได้อีกครับ เราจะเรียกวิธีนี้ว่า SEO Friendly URL เช่น อยากเปลี่ยนเป็น http://localhost/myyii/site/login ก็สามารถทำได้
     มีวิธีเปลี่ยน URL หรือ Mod Rewrite มีอยู่ 2 วิธีด้วยกัน วิธีแรกสามารถเปลี่ยนโดยที่ไม่ต้องไปConfig Web Server ให้เปิด Mod Rewrite ส่วนที่วิธีที่้สอง จะต้องเข้า Config Web Server เพื่อเปิดใช้ก่อน และต้องใช้ร่วมกับไฟล์ .htaccess

1.มาดูวิธีแรกกันเลยครับ ไปที่โปรเจ็ค Yii /protected/config.main.php เปิดไฟล์ main.php ขึ้นมา ตรง component ให้เปิดคอมเม้นท์คำสั่ง urlManager ดังรูป

วิธีกำหนดสิทธิการใช้งาน MySQL เพื่อให้เครื่องอื่นสามารถเรียกใช้ได้

 

     โดยความจริงแล้วเราสามารถเข้าไปใช้งานฐานข้อมูลจากเครื่องอื่นได้ผ่าน phpMyadmin โดยพิมพ์ ip ของเครื่องที่ติดตั้ง MySQL เช่น http://192.168.0.22/phpmyadmin ก็สามารถเข้าใช้งานได้ แต่ถ้าเราจะใช้เครื่องมืออื่นๆเช่น Navicat,Visual Studio,Dreamweaver เพื่อดึงข้อมูลฐานข้อมูลจากเครื่องอื่นมาแสดงที่เครื่องของเรา ก็จะเจอปัญหาคือ ไม่สามารถเข้าถึงได้เพราะยังไม่ได้กำหนดสิทธิให้ ip เครื่องของเราให้เข้าใช้งานได้
     ดังนั้นเราจะต้องเข้าไปกำหนดสิทธิให้กับ MySQL ก่อน เพื่อเปิดให้เครื่องอื่นเข้าใช้งานได้

Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator

 

       บทความนี้ผมจะมาสอนเรื่องของ Yii Framework กันต่อครับ คราวนี้เราจะมาเชื่อมต่อกับฐานข้อมูล MySQL กันครับ และเราจะใช้ Gii Generator ซึ่งเป็นโมดูลเสริมที่จะช่วยสร้างไฟล์และโค๊ดบางส่วนที่จำเป็นของ Yii ให้กับเรา โดยที่เราไม่ต้องกังวลว่าเราจะสร้างไฟล์ MVC ถูกหลักการของ Yii Framework หรือป่าว เพราะ Gii Generator มันจะสร้างให้เรานั่นเอง ทำให้มีความสะดวก รวดเร็ว ในการสร้างไฟล์และโค๊ดบางส่วนช่วยเรานั่นเองครับ
      สำหรับการเชื่อมต่อกับ MySQL เจ้า Yii Framework มันจะสนับสนุนการเชื่อมต่อแบบ PDO Class ของ PHP เท่านั่น โดยเราจะต้องเปิดใช้งาน extension ให้มันก่อน โดยเข้าไปที่ไฟล์ php.ini และเอาเครื่องหมาย ; ออกจากบรรทัดคำสั่ง extension=php_pdo.dll และ extension=php_pdo_mysql.dll ดังรูป

ขั้นตอนการติดตั้ง Yii Framework

      หลังจากที่ผมได้สอนใช้งาน CakePHP มาแล้ว บทความสอน PHP บทความนี้ผมจะสอน Yii Framework  (ผมอ่านว่า ยี้) บ้าง  ซึ่ง CakePHP กับ Yii Framework คือ PHP Framework เหมือนกัน แต่พัฒนาคนละทีมงาน  Yii Framework มีจุดเด่นที่ดีกว่า CakePHP อยู่นิดหน่อย คือ ความเร็ว และความยืดหยุ่น อาทิ การสร้างฐานข้อมูล ไม่ไม่ยืดติดกฏเกณฑ์ตายตัวแบบ CakePHP รวมถึงความง่ายต่อการเรียนรู้ด้วยครับ ตอนนี้ผมค่อนข้างจะเทใจให้กับ Yii อยู่นิดหน่อย เพราะเป็น PHP Framework อันดับหนึ่ง และนิยมใช้กันมาก ถ้าเปรียบเทียบกับ Javascript Framework ก็ประมาณ jQuery เลยครับ
      มาดูขั้นตอนการติดตั้งแบบง่ายกันเลย (ผมใช้ Appserv 2.5.10 บน Win 7 32บิต โดยติดตั้งไว้ในไดร์ฟ C นะครับ)

1.อันดับแรก ไปดาวน์โหลด Yii ให้เรียบร้อยครับ แตกไฟล์ให้เรียบร้อย เปลี่ยนชื่อโฟลเดอร์ให้ชื่อว่า yii  ก็ได้ครับ เอาไปไว้ใน C:\Appserv\www\yii

2.เปิด Command Line ขึ้นมา เราจะสร้างโปรเจ็ค Yii ของเราขึ้นมา ให้พิมพ์คำสั่งตามด้านล่าง โดยจะต้อง cd เข้าไปในพาธที่เราได้เก็บโฟลเดอร์ yii เอาไว้ให้ถูกต้องด้วยนะครับ

CakePHP กับการแสดง/แบ่งหน้า/เพิ่ม/ลบ/แก้ไขข้อมูลในฐานข้อมูล MySQL

       บทความนี้ผมจะสอนเขียนโค๊ด CakePHP จัดการกับข้อมูลใน MySQL Database ซึ่งจัดเต็มทีเดียวครบทุกฟังก์ชั่นเลยครับ ไม่ต้องไปค้นหาในGoogleให้ลำบากเลย ว่าฟังชั่นเพิ่ม/ลบ/แก้ไข/แบ่งหน้าข้อมูล อัปโหลดรูป ต้องเขียนยังไง ผมได้รวบรวมมาไว้ในบทความนี้ไว้หมดแล้ว ทีเหลือก็แค่เอาไปพัฒนาดัดแปลงเป็นของท่านเอง หวังว่าบทความสอน PHP บทความนี้จะมีประโยชน์กับทุกคนครับ
มาดูกันว่า เราจะมาเขียนโค๊ดทำงานกับฐานข้อมูล MySQL กันยังไง

1.อันดับแรกให้สร้างเทเบิลในฐานข้อมูลว่า products ใช้โค๊ดตามนี้

Cakephp กับ Form Validation ด้วย Javascript

 

       วันนี้ได้ลองศึกษาการทำ Form Validation หรือการตรวจสอบข้อมูลในฟอร์มกรอกข้อมูลด้วย Javascript ใน CakePHP ดูครับ โดยใช้ Plugin Validation ของ JQuery ซึ่งรองรับทุกตัวครับ แต่ที่ผมสนใจเป็นพิเศษคือจากบทความนี้ครับ http://bakery.cakephp.org/articles/mattc/2008/10/26/automagic-javascript-validation-helper แต่ก็มีปัญหาคือเป็นเวอร์ชั่นเก่า (อีกแล้ว) ก็เลยค้นหาต่อไป และไปเจอในเว็บนี้ https://github.com/mcurry/js_validate ปรากฏว่า ใช้ได้เลยครับ เลยขอยืมมาปรับใช้ซะหน่อย ความสามารถของมันคือ มันจะไปดึง Validation จากใน Model ใน CakePHP ของเรามาแปลงให้เป็น Validation ของ Javascript ได้เลย แต่จะมีปัญหากับการใช้ Regular  Expression เช่นถ้าใช้คำสั่ง ‘rule’=>’/^[0-9]+/i’  มันจะErrorทันที เพราะมันจะรองรับคำสั่งตรวจสอบพื้นฐานเท่านั้นครับ แต่ก็ไม่เป็นไร (พูดปลอบใจตัวเอง ^_^) เพราะคำสั่งตรวจสอบพื้นฐาน เช่น ตรวจสอบอีเมล,ตัวเลข,วันที่,อื่นๆ มีให้ค่อนข้างครบครันเลยทีเดียว

วิธีติดตั้ง Ckeditor ใน Cakephp และการปรับแต่ง

ติดตั้ง Ckeditor ใน textarea ของ Cakephp

       บทความสอน PHP บทความนี้จะสอนวิธีติดตั้ง ckeditor ให้กับ cakephp (PHP Framework) กันครับ วิธีติดตั้งไม่ยากเลยครับ เพราะผมได้ทำตามในบทความนี้ครับ  http://bakery.cakephp.org/articles/Valkum/2009/11/08/ckeditor-3-x-new-fckeditor-version แต่ต้องปรับโค๊ดอีกนิดหน่อย เพราะบทความที่สอนมันเป็นเวอร์ชั่นเก่าครับ cakephp ของผม ตอนนี้ได้อัปเกรดเป็นเวอร์ชั่นล่าสุดแล้ว (2.2.5 ในตอนนี้คือเวอร์ชั่นล่าสุด) วิธีอัปเกรดก็ไม่ยากครับ แค่Copyโฟลเดอร์ lib มาทับของเดิม และ Copy โฟลเดอร์ Console ไปทับของเดิมที่อยู่ในโฟลเดอร์ app นั่นเองครับ หรือติดตั้งใหม่เลยก็ได้ครับ

      มาดูวิธีติดตั้ง Ckeditor ในTextareaของ cakephp กันครับ

1.อันดับแรกต้องไปดาวน์โหลด Ckeditor มาก่อนครับ ตามลิงค์นี้ครับ http://ckeditor.com/builder แนะนำให้ใช้ตัวเต็ม (Full version) เลยนะครับ โดยเลือกที่ Full แล้ว เลือกภาษา Thai ด้วยนะครับ และคลิกที่  Source (Big N’Slow) เราจะได้ตัวเต็มของมันมาครับ และกด Download ได้เลย ดูตามรูป

สอนประยุกต์ใช้ Google Chart Tools กับการแสดงรายงานสรุปยอดขายประจำเดือน (PHP MySQL)

       วันนี้ได้ลองประยุกต์ใช้ Google Chart Tools ในรายการสรุปยอดขายประจำเดือนดูครับ ทำให้รายงานมีสีสันและดูเข้าใจง่ายขึ้นครับ ว่ารายได้ในแต่ละเดือนมีแนวโน้มเป็นยังไงบ้าง ความจริงแล้วต้องมีรายงานประจำวันและรายงานประจำปีอีกครับที่ต้องทำ โดยใช้หลักการดึงข้อมูลจากฐานข้อมูลเดียวกันครับ เพียงแค่เปลี่ยนข้อมูลที่จะเอามาแสดงเท่านั้นว่าจะแสดงแบบวันหรือเดือนหรือปีครับ บทความนี้จะสอนฉพาะรายงานประจำเดือนก่อนครับ ถ้ามีเวลาผมจะสอนแสดงรายงานให้ครบทุกรายงานเลยครับ
      เมื่อเราได้เครื่องมือสร้าง Chart มาแล้ว ก็คือ Google Chart Tools ต่อมาให้เราเลือกรูปแบบกราฟให้เหมาะสมกับรายงานครับ โดยผมได้เลือก กราฟแบบแท่งแนวตั้งครับ เพราะจะทำให้เห็นแนวโน้มยอดขายจากซ้ายไปขวาครับ ว่ามีเพิ่มหรือลดลงไปเท่าไหร่ หรืออาจใช้กราฟแท่งแนวนอนก็ได้ครับแล้วแต่ความชอบ และกราฟแบบแนวตั้งและแนวนอนมันจะรองรับจำนวนแท่งของกราฟได้แตกต่างกันครับ กราฟแนวตั้งจะรองรับค่อนข้างจำกัดเพราะเราต้องFixความกว้างให้กับหน้าเว็บ ส่วนกราฟแนวนอนถ้าเราไม่Fixความสูง มันก็จะสามารถแสดงกราฟได้ไม่จำกัดเลยครับ ดังนั้นที่ผมเลือกกราฟแท่งตั้งเพราะผมรู้ข้อมูลว่ามันแสดงแค่ 12 แท่งเท่านั้น ก็คือเดือนทั้ง12เดือนนั้นเองครับ
    สำหรับฐานข้อมูลที่ใช้มาจากที่นี่เลยครับ-> http://php-for-ecommerce.blogspot.com/p/blog-page_18.html

เข้ารหัส Source Code ของเรา ไม่ให้คนอื่นเอาไปแก้ไขได้

       สำหรับคนที่ไม่ต้องการให้คนอื่นนำโค๊ด ที่เราพัฒนาด้วยความยากลำบาก ไปดัดแปลงเป็นของตัวเอง ความจริงก็มีวิธีอยู่หลายวิธีครับ อย่าง AROHA PHPencoder แต่มันจะเข้ารหัสได้แค่ PHP เท่านั้น ถ้าอยากให้เข้ารหัสภาษาอื่นด้วยล่ะทำยังไงดี??
       คำตอบก็คือใช้ตัวนี้เลยครับ http://dean.edwards.name/packer/ มันบอกว่ารองรับ .NET , Perl , Javascript ,PHP สามารถนำโค๊ดของเราไปใส่ในช่อง Paste -> แล้วเลือกที่ Base62 encode และติ๊กที่ Shrink variables โดยมันจะเข้ารหัสแบบ Base62 ครับ -> กดปุ่ม Pack ก็จะได้โค๊ดที่เข้ารหัสเรียบร้อยแล้วแสดงในช่องด้านล่าง ให้Copyไปวางทับโค๊ดเดิมของเราได้เลยครับ แต่ต้องทำสำรองโค๊ดที่ยังไม่เข้ารหัสเอาไว้ด้วยนะครับ เดี๋ยวจะแก้ไขไม่ได้ ^_^ แต่ก็ไม่ได้การันตีว่าจะสามารถป้องกันการแก้ไขโค๊ดของเราได้ 100% นะครับ เพราะมีการเข้ารหัสก็ต้องมีการถอดรหัสครับ แต่ต้องเป็นผู้ที่มีความรู้จริงๆจึงจะสามารถถอดรหัสได้