Get Adobe Flash player

pamok.r

UNSIGNED ใน MySQL คืออะไร

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

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

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

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 เริ่มต้น

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 แนะนำ

 

DataTables Plug-in เพิ่มความสามารถให้ตารางข้อมูล รองรับหลาย CSS Framework

ปกติตารางข้อมูลที่ถูกสร้างด้วย HTML Table จะทำหน้าที่เพียงแค่แสดงผลตารางเท่านั้น เราสามารถใช้ DataTables ซึ่งเป็น jQuery Plugin ที่เป็น Open source โดย DataTable สามารถเปลี่ยนให้ตารางข้อมูลธรรมดา มีความสามารถเพิ่มขึ้นประกอบด้วย

  1. Pagination
  2. Instant search
  3. Multi-column ordering
  4. Use almost any data source
  5. Easily theme-able (รองรับหลาย CSS Framework)
  6. Wide variety of extensions
  7. Mobile friendly
  8. Fully internationalisable

การใช้งานเริ่มต้นด้วยการแนบไฟล์ CSS และ JavaScript (ต้องการ jQuery ด้วย) ของ DataTables

หรือถ้าต้องการใช้ร่วมกับ CSS Framework สามารถเลือกที่ Download Builder เพื่อเลือกว่าจะใช้อะไรบ้าง

จากนั้นสามารถเรียกใช้ Function ผ่าน Selector ของ jQuery ได้ดังนี้

ผลที่ได้ จะได้ตารางที่มีคุณสมบัติในการค้นหา เรียงลำดับ แบ่งหน้าได้ตามภาพ

CSS Effect zoom รูปภาพเพื่อเพิ่ม Interaction กับผู้ใช้

จากตัวอย่างใน Video เมื่อ hover ที่รูปใดใน Gallery รูปนั้นจะถูกซูมเพื่อให้ผู้ใช้ทราบว่ากำลังชี้ที่รูปใดอยู่ สามารถทำได้ดังนี้

HTML

 

CSS

ใน Class gallery-item สามารถนำ overflow: hidden; ออก เวลาที่ Hover ภาพจะขยายใหญ่เกินกรอบ ก็เป็นอีกทางเลือกหนึ่ง

Smart Slider 3 WordPress Plugin สำหรับทำ slide ที่ฟรีและดีที่สุดในตอนนี้

โดยปกติ theme wordpress ส่วนใหญ่จะมีระบบ slide ติดมาด้วยเสมอเป็นของคู่กัน แต่ส่วนมากถ้าเป็น theme ฟรีมักจะแถม slide ที่มีตัวเลือกไม่เยอะ ปรับแต่งอะไรมากไม่ได้ ดังนั้นการเลือกใช้ plugin เสริมเพื่อทำหน้าที่แสดง slide จึงเป็นอีกทางเลือกที่หน้าสนใจ

ซึ่งในปัจจุบันถ้าเราค้นหา slide plugin จะพบว่า MetaSlideer มีผู้ใช้งานมากที่สุด (9 แสนเว็บไซต์) แต่เท่าที่ลองใช้ยังเป็นการทำ slide แบบเก่า และมีตัวเลือกน้อย จึงแนะนำให้ใช้ slide plugin Smart Slider 3 แทน ซึ่งมีผู้ใช้งานเป็นอันดับสอง (2 แสนเว็บไซต์) ดังภาพ

 

คุณสมบัติเด่นของ Smart Slider 3

  1. มีตัวเลือกเยอะมาก แม้ว่าจะเป็น Free version
  2. ไม่จำกัดจำนวน slide (แต่ไม่ควรใส่เยอะ 4 slide ถือว่าเยอะพอสมควรแล้ว)
  3. รองรับสีพื้นหลัง (background-color) ทั้งแบบสีเดียว และแบบไล่เฉดสี (gradient)
  4. รองรับ รูปภาพ, วิดีโอ,  post (สามารถกำหนด opacity ของรูปภาพได้)
  5. สามารถแทรก layer ได้หลาย layer
  6. ในแต่ละ layer รองรับทั้งข้อความ รูปภาพ ปุ่มกด รวมทั้งการกำหนด CSS หรือ Style ได้ค่อนข้างอิสระ
  7. สามารถจัด layout ของ layer ได้ด้วย

จากคุณสมบัติเด่นทั้งหมดที่ยกมา จะเห็นว่าเพียงพอต่อการทำ slide ดีๆ สวยๆ มีคุณภาพได้ไม่ยาก โดยไม่ต้องใช้เงินซื้อรุ่น pro

AngularJS วิธี setDirty และ setTouched กับ required input ที่ผู้ใช้ไม่ได้กรอก

ปกติเมื่อใช้ AngularJS จะมีการ Validate Form ให้อัตโนมัติโดยปกติจะมีเงื่อนไขในการแสดงข้อความแจ้งเตือนให้กรอกข้อมูลดังนี้

  1. Invalid คือ Input ที่ไม่ถูกต้อง เช่น ต้องกรอก (required) แต่ไม่กรอก หรือ กรอกข้อมูลผิด format / ผิดประเภท
  2. Dirty คือ Input มีการคีย์ข้อมูล หรือเลือกข้อมูลแล้ว
  3. Touched คือ Input ที่เคยถูกคลิกเลือก หรือแตะเพื่อจะคีย์  (Focus)

แต่ก็มีปัญหาอยู่ว่า ถ้า require input ที่ยังไม่ได้กรอก หรือยังไม่ได้แตะต้องเลย จะไม่มี Dirty หรือ Touched พอผู้ใช้กด Submit Form ก็จะไม่เห็นการแจ้งเตือน จึงจำเป็นที่จะต้องมีการสั่ง Set Dirty และ Touched เพื่อให้ข้อความแจ้งเตือนในแต่ละ input ที่ Invalid แสดง โดยใช้ Code ดังนี้

อย่างไรก็ตาม Code นี้สามารถรองรับเมื่อมีการใช้ Sub Form ด้วย

CSS Order List แบบหลายระดับเช่นข้อ 1. มีข้อย่อยเป็น 1.1 ย่อยอีกเป็น 1.1.1.

โดยปกติการใช้ HTML Order List แบบหลายระดับดังภาพ

จะมีการแสดงผลในแต่ละข้อเพียงระดับเดียว เช่น ข้อ 1. มีข้อย่อยก็จะเป็น 1. ดังภาพ

ถ้าหากเราต้องการให้แสดงแบบหลายระดับ เช่น ข้อ 1. มีข้อย่อยเป็น 1.1 ย่อยอีกเป็น 1.1.1. สามารถกำหนด CSS โดยใช้ counter ดังนี้

ผลลัพธ์ที่ได้

การใช้ Sass ฉบับย่อเพื่อช่วยเขียน CSS ให้มีประสิทธิภาพมากขึ้น

Sass คืออะไร ?

Sass คือ CSS Preprocessor หรือพูดง่าย ๆ ว่าเราจะเขียน Sass ตามที่ต้องการโดยอาศัยเทคนิคทางด้านการเขียนโปรแกรมโปรแกรมมาช่วยให้เขียนง่ายขึ้น หลังจากนั้นหากต้องการนำไปใช้ จำต้องทำการ Compile เป็น CSS ก่อนจึงจะนำไปใช้ได้

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

วิธีการเขียน Sass

การเขียน Sass จะมี Syntax คล้ายคลึงกับ CSS คือถ้าเราเขียน CSS ได้ก็เข้าใจ Sass ได้ไม่ยาก การเขียนจะแบ่งออกเป็น 2 Syntax คือ .sass และ .scss สามารถดูเพิ่มเติมได้ที่ https://sass-lang.com/guide

โดยในตัวอย่างจะใช้ Syntax แบบ SCSS (เหมือน CSS มากกว่า) ดังเช่นการตั้งค่าเป็นตัวแปร แล้วนำไปใช้

เมื่อเขียนเสร็จจะได้ไฟล์ .scss เรายังไม่สามารถนำไปใช้ได้ จะต้องทำการ Compile เป็น CSS ก่อน

วิธีการ Compile Sass เป็น CSS

สามาถทำได้ 2 วิธีคือใช้ Application และ Command line ดูเพิ่มเติมที่ https://sass-lang.com/install แต่ในตัวอย่างจะใช้ Application โดยจะแนะนำให้ใช้เป็น Koala สามารถใช้งานได้ทั้งบน Windows และ Mac และยังเป็น Opensource สามารถ Download ได้ที่ http://koala-app.com/

เมื่อติดตั้งเสร็จแล้วสามารถเปิด Koala แล้วคลิกปุ่ม + เพื่อเลือก Folder Project งานที่ต้องการ ระบบจะแสดงไฟล์ที่ Koala รองรับ (Koala เป็น Tool สำหรับ develop web app ที่ทำได้หลายอย่าง) เราสามารถเลือกไฟล์ .scss ที่ต้องการ แล้วจะมีแถบเมนูขึ้นด้านขวา สามารถคลิกปุ่ม Complie เพื่อสร้างไฟล์ CSS ได้เลย

แต่ถ้าเราเลือก Auto Compile ไว้ ถ้ามีการแก้ไขไฟล์ .scss อีกครั้ง Koala จะทำการ Complie CSS ใหม่ทันที