Get Adobe Flash player

HTML 5 canvas คืออะไร

HTML5 Canvas เป็นหนึ่งใน feature ที่มีคุณสมบัติทางด้านกราฟฟิคที่มาพร้อมกับ HTML5 ซึ่ง Canvas element นี่แหละมันอาจจะเป็นพระเอกของ HTML5 เพราะเจ้ากราฟฟิกตัวนี้ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform

Canvas เป็น Element หนึ่งใน HTML5 เหมือนอย่าง <img> หรือ <a> โดยใน <img> หรือ <a> จะมี attributes เช่น src และ href แต่ใน <canvas> จะมีเพียงแค่ 2 attributes คือ width และ height (ความกว้างและความสูงของ Canvas) เท่านั้น

ข้อดีของ แท็ก Canvas
    ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ “วาดภาพ” ลงบนเว็บเพจได้โดยตรง โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
   ลักษณะของ canvas แตกต่างจากภาพชนิดอื่นๆ คือ มันไม่ได้จะแสดงได้เป็นภาพนิ่งเท่านั้น แต่มันสามารถเป็นภาพเคลื่อนไหวได้ด้วย และก็ไม่ได้เกิดจากการเรียกไฟล์ภาพขึ้นมาแสดงตรงๆ แต่เป็นการสั่งโดย javascript ทุกๆเส้นหรือทุกๆจุด และทุกๆการเคลื่อนไหวที่เกิดภายใต้ <canvas> เกิดจากการสั่งงานโดย javascript ทั้งสิ้น แล้วนำเข้ามาโชว์ด้วยการเรียกผ่าน id ของ <canvas> เข้าไป

การใช้งาน HTML 5 canvas เบื้องต้น

เริ่มแรกทำการสร้างไฟล์ HTML ขึ้นมา ผมทำการตั้งชื่อ ว่า index.html และมี element <canvas> ดังตัวอย่าง


จากนั้นลิงค์สคริปไปยังไฟล์ JavaScript ของเรา โดยทำการตั้งชื่อว่า main.js

ตัวอย่างการทำ Canvas

ผลที่ได้ก็จะเหมือนๆกับเราสร้าง Element DIV แต่ว่าความสามารถของ Canvas นั้นมันมีมากกว่า และถ้าคลิกขวาที่ Canvas เราสามารถที่จะ Save ออกมาเป็น Image ได้ด้วยนะครับ

UNSIGNED ใน MySQL คืออะไร

ใน MySQL เมื่อเรากำหนด Datatype ที่เป็นตัวเลขจำนวนเต็ม อย่างเช่น INT จะมี attribute Unsigned ซึ่งเป็นตัวระบุว่าจะยอมให้มีค่าติดลบหรือไม่ ซึ่งก็คือ INT ปกติ จะมีค่าตั้งแต่ -2147483648 ถึง 2147483647 (ยอมให้ติดลบ) ส่วน INT Unsigned ที่ไม่มีค่าติดลบ จะมีค่าตั้งแต่ 0 ถึง 4294967295 (นำช่วงติดลบไปทบเป็นค่าบวกเพิ่ม)

วิธีการเลือกใช้

ให้พิจารณาว่าค่าใน Field หรือ Column นี้จะมีค่าติดลบหรือไม่ ถ้าไม่มีค่าติดลบเช่น “อายุ”  ก็ให้ใช้เป็นแบบ Unsigned ก็จะได้ช่วงเก็บข้อมูลเยอะขึ้น รวมทั้งป้องกันความผิดพลาด เพราะ Column นี้จะไม่ติดลบแน่ ๆ

การสร้าง Project MVC .Net Core บน Visual Studio Code

ต้องมี 3 อย่างนี้ก่อน

1.ไปยัง Terminal และเลือก New Terminal

2. ขั้นแรกพาทไปยังโฟรเดอร์ที่ต้องการเก็บ และใช้คำสั่งในการสร้างคือ

dotnet new mvc -o (ตามด้วยชื่อที่ต้องการ)

3. เมื่อสร้างเสร็จจะได้ ดั้งภาพ

4. ทำการ Open Folder Project ที่สร้างขึ้นมาก่อน และวิธีการ Run คือ F5 หรือ ctrl+F5 และเลือก Run .Net Core

6. เมื่อรันจะได้ผลตามภาพ

Encoding utf8mb4 vs utf8 ใน MySQL แตกต่างกันอย่างไร

โดยปกติแล้ว utf8 นั้นคือรูปแบบการ Encode ตัวอักษรโดยการใช้ 4 byte ต่อ 1 ตัวอักษร แต่ใน MySQL กลับใช้ เพียง 3 byte ต่อ 1 ตัวอักษร ดังนั้น utf8 นั้นจริง ๆ มีชื่อเต็มว่า utf8mb3 ต่อมา MySQL จึงได้ออก Encode utf8 ใหม่ที่ใช้ 4 byte ต่อ 1 ตัวอักษร นั่นคือ utf8mb4 นั่นเอง

utf8mb4 ที่ใช้ 4 byte ต่อ 1 ตัวอัษรดีกว่ายังไง ?

แน่นอนว่า utf8mb4 จะต้องรองรับตัวอักษรได้มากกว่า utf8 ธรรมดา โดย utf8 ปกติใน MySQL นั้นจะรองรับเฉพาะ Basic Multilingual Plane (BMP) ซึ่งก็คือภาษาทั้งหมดที่มีใช้ในจริงในปัจจุบัน รวมทั้งตัวเลขและสัญลักษณ์ (นั่นก็เพียงพอแล้ว) แต่ utf8mb4 จะรองรับสัญลักษณ์อื่น ๆ เพิ่มเติมอีก รวมทั้ง Emoji

ดังนั้นปัจจุบัน Software ต่าง ๆ เข่น WordPress หรือ Framework ก็จะแนะนำให้ใช้ utf8mb4 เป็น Character Set เริ่มต้น

วิธีการใช้ FTP-Simple บน VScode

ftp-simple เป็น Extensions ที่ไว้ใช้ Remote FTP ไปยังเครื่องเซิฟเวอร์

 

ขั้นตอนการติดตั้งไปที่เมนู Extensions ทางด้านซ้ายมือ

 

Search คำว่า ftp-simple ถ้าเจอแล้วกด Install

 

จากนั้นกด F1 จะปรากฏหน้าต่างดังรูปด้านล่างขึ้นมา

จากนั้นเลือก FTP connection setting แล้วจะปรากฏหน้าดังกล่าวขึ้นมา

จากนั้นให้ทำการ setting เพื่อที่จะใช้งาน FTP-simple

{
“name”: “my server2”,          // ชื่อ(ตั้งชื่ออะไรก็ได้)
“host”: “127.0.0.1”,                // IP Address ของเครื่องเซิฟเวอร์
“port”: 22,                              // Port SSH
“type”: “sftp”,                        // ใส่ sftp (Secured File Transfer protocol) หรือ ftp (File Transfer protocol)
“username”: “id”,                 // username ที่ใช้ login บนเครื่อง Server
“password”: “password”,   // password ที่ใช้ login บนเครื่อง Server
“path” : “/”,                          // path file ที่ต้องการเข้าถึงบนเครื่อง Server
“autosave” : false                // true จะเป็นการบันทึกการทำงานแบบ auto
                                                    false เป็นการบันทึกการทำงานโดยการกด Save หรือ Ctrl+s
“confirm”: false                  // true ก่อนบันทึกการทำงานจะมีหน้าต่างขึ้นมาให้กดยืนยัน
}                                            // false ก่อนบันทึกการทำงานจะไม่มีหน้าต่างขึ้นมาให้กดยืนยัน

Devexpress Gridview การปรับแต่งส่วนต่างๆ [Part3]

การปรับแต่ง Edit ใน Gridview

  1. คลิกที่ GridView และเลือก Show Edit Button

2. ไปที่ช่อง Column แก้ไข และเลือก ButtonRender Mode เพื่อปรับให้เป็น IMAGE และกด OK

3. ไปยัง Properties  SettingsCommandButton เพื่อตั้งค่ารูปที่ไว้ใช้กด

 

4. และปุ่มที่จำเป็นต้องตั้ง ได้แก่

UpdateButton =ปุ่มตอนกดแก้ไขข้อมูลเสร็จ

EditButton =ปุ่มที่ไว้ใช้กด แก้ไขข้อมูล

CancelButton= ไว้ยกเลิกตอน ไม่แก้ไข

เมื่อกดปุ่ม …  จะไปหน้ายันรูปภาพ เพื่อเลือกรูปที่ต้องการแทนปุ่ม

 

เมื่อตั้งค่าเสร็จจะได้ดั้งรูป

re-Config Pure-FTPd-Mysql, php, phpMyAdmin หลังจาก Update Ubuntu 18.04

หลังจาก Update Ubuntu-18.04 และ Component อื่น ๆ จะพบปัญหาดังนี้

  1. รัน php ไม่ได้ เนื่องจาก PHP จะอัพเกรดเป็น 7.2 และยังไม่ enable *
  2. ไม่สามารถใช้ FTP ได้ เนื่องจาก pure-ftpd-mysql ไฟล์ config เดิมหาย *
  3. phpMyAdmin มีแจ้งเตือน error เนื่องจาก code ยังไม่ compatible กับ PHP 7.2
  4. ไม่สามารถใช้ .htaccess เนื่องจากยังไม่ AllowOverRide All ใน apache config

* สำคัญมากต้องรีบทำ เพราะมีผลต่อความปลอดภัย และการใช้งานเว็บไซต์

 

1. Enable PHP module ใน Apache

ข้อสังเกตคือ เมื่อเข้าเว็บไซต์จะพบว่าไม่รัน PHP แต่จะแสดง Code PHP ออกมาทางหน้าเว็บไซต์แทน (อันตรายมาก) วิธีการ Enable PHP ใช้คำสั่ง a2enmod (Apache2 Enable Module) เพื่อ enable PHP 7.2 จากนั้นให้ Restart Service Apache

จากนั้นลองเข้าเว็บไซต์ตรวจสอบว่าสามารถรัน PHP ได้เป็นปกติ

 

2. Re-Config pure-ftpd-mysql

ข้อสังเกตคือ จะไม่สามารถ Login เข้า FTP ได้ จะต้องแก้ไข Config pure-ftpd-mysql ใหม่ เริ่มต้นให้เข้า phpMyAdmin เพื่อตั้งค่า User pureftpd ใหม่

ไม่แน่ใจว่าใช้ pureftpd@localhost.localdomain ด้วยหรือไม่ ให้ Reset และ Gen-Passwordใหม่ และนำไปใช้ทั้ง 2 user นี้ได้เลย

เมื่อแก้ Password เสร็จ ให้ทำการเปลี่ยนชื่อ Table ใน Datebase pureftpd ด้วย จาก ftpd เป็น users (เพราะ  pure-ftpd รุ่นใหม่มีการเปลี่ยนชื่อ table ใน config)

จากนั้นให้ ssh(putty) ไปที่ Server และทำการแก้ไข Config ที่ไฟล์ /etc/pure-ftpd/db/mysql.conf โดยจุดที่ต้องแก้คือ

  • MYSQLUser = pureftpd
  • MYSQLPassword = รหัสผ่านใหม่ (ของเดิมหายไปพร้อมกับ Config file)
  • MYSQLCrypt = md5

แล้วทำการ Restart Service pure-ftpd-mysql ด้วยคำสั่ง ทดลอง Login FTP จะต้องสามารถ Login ได้ตามปกติ

 

3. แก้ไข Error phpMyAdmin

Error นั้นอาจจะไม่เหมือนกันในแต่ละเครื่อง อยู่ที่คนอัพเดท Ubuntu ว่าตั้งค่าอะไรไว้บ้าง สามารถแบ่ง Error ได้ดังนี้

  • 3.1 Error Mysql Connect phpmyadmin@localhost Password Yes
  • 3.2 Error “Warning in ./libraries/sql.lib.php#613 count(): Parameter must be an array or an object that implements Countable”
  • 3.3 Blowfish too short

 

3.1 Error Mysql Connect phpmyadmin@localhost Password Yes

แก้ไข Config PHP file ที่ /etc/phpmyadmin/config-db.php โดยการลบให้ตัวแปร $dbuser, $dbpass เป็น string เปล่า ๆ ดังนี้

 

3.2 Error “Warning in ./libraries/sql.lib.php#613 count(): Parameter must be an array or an object that implements Countable”

แก้ไข PHP file ที่ /usr/share/phpmyadmin/libraries/sql.lib.php ในบรรทัดที่ 613 โดยเปลี่ยนจาก

 

3.3 Blowfish too short

แก้ไข PHP file ที่ /var/lib/phpmyadmin/blowfish_secret.inc.php โดยการเพิ่มความยาวให้ตัวแปร $cfg[‘blow_secret’] โดยการแทรก Random String ที่เป็น 0-9, A-Z, a-z เพิ่ม ให้เกิน 32 ตัวอักษร ตัวอย่างเช่น

ในแต่ละ Error ของ phpMyAdmin นั้นเมื่อแก้ไขเสร็จให้ลองเข้าตรวจสอบดู Error นั้นจะทยอยหายไป

 

4. Config ให้สามารถใช้ .htaccess ได้โดยการกำหนด AllowOverride All

ข้อสังเกตคือหน้าเว็บ WordPress ที่มีการใช้ Permalink เป็นชื่อ (ต้องใช้ .htaccess) จะไม่สามารถเปิดหน้านั้นได้ แก้ไขที่ไฟล์ Config  /etc/apache2/apache2.conf จากนั้นแก้ไข AllowOverride จาก None เป็น All ใน Directory /var/www ดังภาพ

แล้วสั่ง restart service apache2 ด้วยคำสั่ง

 

การติดตั้ง Apache, PHP และ MySQL บน macOS 10.x

ตั้งแต่ macOS version 10 เป็นต้นไปได้มีการติดตั้ง Apache และ PHP มาให้แล้ว เราเพียงแค่ต้องไปเปิดใช้งานเท่านั้น ส่วน MySQL จะต้องทำการติดตั้งด้วยตนเอง หรือ อาจจะตัดความยุ่งยากในการติดตั้งทั้งหมดนี้ด้วยการใช้ Software ที่ bundle ทุก ๆ อย่างมาให้อย่าง Xampp หรือ Mamp ก็ได้ แต่การติดตั้งทั้งหมดนี้ด้วยตนเองจะทำให้ได้ความรู้ไปด้วย

ในการ Enable Apache และ PHP จะทำผ่าน Terminal ทั้งหมด (macOS ที่ใช้ 10.14)

1. ตรวจสอบ Version ของ Apache เพื่อให้แน่ใจว่ามีการติดตั้ง Apache อยู่จริง โดยใช้คำสั่ง http -v 

2. เมื่อรู้ว่ามี Apache แล้ว สามารถสั่งเปิดการใช้งานด้วยคำสั่ง sudo apachectl start จากนั้นให้ใส่ Passwordของเจ้าของเครื่อง

3. ทดลองเปิด​ url  http://localhost จะเจอหน้า It’s Work ดังรูป

4. โดยปกติ Root directory จะอยู่ที่ /Library/WebServer/Documents/ ดังรูป (สามารถเขียน Website ลงใน Directory นี้ได้เลย)

5. ทดลองเข้าที่ url http://localhost/test/phpinfo.php เพื่อทดสอบ PHP จะพบว่าไม่สามารถรันได้ เพราะค่าเริ่มต้นของ Apache จะยังไม่เปิดการใช้งาน PHP

6. การเปิดใช้งาน PHP จะต้องแก้ไข Config ของ Apache ที่ /private/etc/apache2/httpd.conf โดยไฟล์ Config นี้จะต้องใช้สิทธิเจ้าของเครื่องเพื่อทำการแก้ไขไฟล์ ให้ทำการเปิด Terminal อีกครั้งและใช้คำสั่ง sudo vi /private/etc/apache2/httpd.conf จากนั้นให้ใส่ Password ของเจ้าของเครื่อง (vi เป็น Text editor สามารถดูวิธีการใช้ได้ที่ https://staff.washington.edu/rells/R110/)

7. การแก้ไข httpd.conf เพื่อเปิดใช้งาน PHP ให้ใช้คำสั่ง /php ใน Command Mode เพื่อค้นหาคำว่า “php” ใน config จากนั้นให้เข้าสู่ Insert Mode เพื่อแก้ไข Config โดยการเอาเครื่องหมาย “#” ออก (LoadModule php7_module…)  ดังรูป

8. จากนั้นออกจาก Insert Mode เข้าสู่ Command Mode และใช้คำสั่ง :wq เพื่อบันทึกและออกจาก vi

9. จะต้อง Restart Apache โดยใช้คำสั่ง sudo apachectl restart จากนั้น ทดลองเข้าที่ url http://localhost/test/phpinfo.php จะสามารถรัน phpinfo ได้

10. การติดตั้ง MySQL ให้ใช้รุ่น Free คือ MySQL Community Edition สามารถ Download ที่ https://dev.mysql.com/downloads/mysql/  ดังรูป ส่วนการติดตั้งก็สามารถติดตั้งได้ตามปกติ

11. การ เปิด/ปิด Service MySQL บน macOS ใช้คำสั่ง (ตั้งแต่ macOS Sierra เป็นต้นไป)

  • sudo launchctl load -F /Library/LaunchDaemons/com.oracle.oss.mysql.mysqld.plist
  • sudo launchctl unload -F /Library/LaunchDaemons/com.oracle.oss.mysql.mysqld.plist

12. Database Tool สำหรับ MySQL แนะนำ

 

SQL : การ Copy ข้อมูลจาก Column ไปยังอีก Column

ในการ Copy  ข้อมูลจากคอลัมน์ไปยังอีกคอลัมน์ ในที่นี้จะหมายถึงการทำสำเนาข้อมูลทั้งหมดในคอลันน์นั้น ซึ่งเหมาะกับการทำงานกับจำนวนข้อมูลมากๆ ทำให้ผู้ใช้งานไม่ต้องเสียเวลาในการระบุ Value ของแต่ละ record

รูปแบบคำสั่ง

UPDATE ชื่อตาราง

SET ชื่อColumnB = ชื่อColumnA

WHERE เงื่อนไข (ถ้ามี)

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

ซึ่งหากเป็นการ Copy ข้อมูลจากคอลัมน์จากตารางอื่น จะใช้รูปแบบคำสั่งนี้

รูปแบบคำสั่ง

UPDATE ชื่อตารางB

SET ชื่อColumnB = (SELECT ชื่อColumnA FROMชื่อตารางA

WHERE ชื่อตารางB.ชื่อColumnIDของB = ชื่อตารางA.ชื่อColumnIDของA)

จะเห็นได้ว่า การ Copy ข้อมูลจากอีกตารางมา จะต้องมีการ Select ค่าซ้อนภายใต้วงเล็บก่อนที่จะเอามาเทียบค่ากับคอลัมน์ B บนตาราง B
ซึ่งจะต้องมีการเช็คค่าด้วยคอลัมน์ตัวกลางอีกตัวหนึ่งว่าสองตารางมีค่าตรงกัน (ให้เสมือนว่าสองตารางเชื่อมกันอยู่)

PHP การส่งค่าแบบ GET ผ่านทาง URL

PHP จะมีการส่งค่าตัวแปร 2 แบบ คือแบบ GET และ POST

การส่งค่าตัวแปรแบบ GET จะแสดงค่าที่ส่งผ่านทาง URL ซึ่งทำให้คนอื่นเห็นข้อมูลได้

ตัวอย่างการใช้งาน

เราจะส่งค่า id จากปุ่ม button ผ่าน url ไปยังอีกหน้า ซึ่งเรากำหนดชื่อตัวแปรไว้หลังเครื่องหมาย ?

จากตัวอย่าง

edit.php?id=
ค่าจาก button ที่ส่งค่ามานั้นมีค่า 1
การเรียกใช้ตัวแปรที่ส่งค่าผ่านมาจาก URL
ผลลัพธ์