Get Adobe Flash player

pamok.r

CSS Table text-overflow ellipsis ตัดข้อความทิ้งเมื่อข้อความในตารางยาวเกินไป

เมื่อมีข้อความที่ยาวมาก ๆ ในตารางจนเกิดการเว้นบรรทัดข้อมูลเกิดขึ้นทำให้ข้อมูลในตารางดูไม่เรียบร้อย วิธีแก้ไขปัญหาเราสามารถใช้ CSS Property  text-overflow มาช่วยได้ โดยการกำหนดค่าให้เป็น ellipsis (ตัดข้อความทิ้ง) และใช้ Property white-space กำหนดค่าเป็น nowrap (ไม่ต้องเว้นบรรทัด)

แต่ปัญหานี้ไม่ได้แก้ง่ายขนาดนั้น สาเหตุเพราะตารางใน html นั้นจะมี Property table-layout ที่มีค่าเริ่มต้นเป็น auto (ยืดหยุ่นตามข้อมูล) ก็คือถ้าข้อมูลยาวมากแล้วไม่สามารถเว้นบรรทัดได้ ตารางจะทำการยืดความกว้างของ column นั้นออกไปเพิ่ม ทำให้ text-overflow ellipsis นั้นไม่ทำงาน ดังนี้จึงต้องมีการเปลี่ยน table-layout ของตารางใหม่จาก auto เป็น fixed

ตัวอย่างที่ข้อมูลใน column สุดท้ายมีความยาวมาก

ตัวอย่าง CSS

ดูเพิ่มเติมที่ https://codepen.io/anon/pen/RdrGbX

 

Laravel การนำ public folder ออกจาก url ให้เหลือเพียงแค่ domain

โดยปกติการติดตั้ง Laravel นั้นจะต้องติดตั้งด้านนอก public_html (Folder Web Root โดยทั่ว ๆ ไป) แล้วทำการ Config Web Server ให้ชี้ไปยัง Folder Public ของ Laravel แทนเพื่อให้ url เหลือเพียงแค่ domain เท่านั้น ดังภาพ

และการ Config Virtualhost ให้ชี้ไปที่ Folder public ของ Apache

แต่ในบางครั้งเราไม่สามารถ Config Apache หรือ Web Server ที่ใช้บริการอยู่ได้ ดังนั้นจึงต้องใช้วิธีการเปลี่ยน Pointer จาก Folder Laravel ให้ชี้ไปยัง Folder public แทน โดยวิธีการทำนั้นง่ายมาก เพียงแค่ 2 ขั้นตอนคือ

  1. Copy File .htaccess จาก Folder public ไปไว้ด้านนอก (Folder Laravel)
  2. เปลี่ยนชื่อไฟล์ server.php เป็น index.php

เพียงเท่านี้ ก็จะสามารถเข้าถึงเว็บได้โดยตรงโดยใช้เพียงแค่ domain บน url เช่น http://abc.com แทนที่จะเป็น http://abc.com/public แต่การใช้วิธีนี้ก็จะมีปัญหาใหญ่มาก ในด้านความปลอดภัยตามมาเพราะ ใน Folder Laravel นั้นมีไฟล์ Config ที่เป็น Text file อยู่ (.env) เราสามารถเข้าถึงได้ และดู Config หรือ Password ได้โดยตรง จำเป็นที่จะต้องปิดช่องโหว่ในส่วนนี้ โดยวิธีที่แนะนำคือการตั้งค่าเพิ่มใน File .htaccess ใน Folder Laravel โดยการ Config ให้ไม่อนุญาติให้เปิดอ่าน Extension env หรือ Extension อื่น ๆ ที่ส่งผลต่อความปลอดภัย ดังนี้

เพียงเท่านี้ก็จะไม่สามารถเปิดอ่านไฟล์ Config ได้โดยตรง

แนะนำ Plugin WordPress รับมือ Error 404 หรือการเปลี่ยนแปลง URL

เป็นปกติเมื่อเปิดเว็บไซต์ (WordPress) มาระยะเวลาหนึ่ง มักจะมีการเปลี่ยนแปลง URL ของ Post, Page หรือแม้แต่ไฟล์ Media ต่าง ๆ เสมอ เช่น

  • เปลี่ยนจากเดิม URL ของ Post จาก /some-title เป็น /some-new-title
  • จากไฟล์รูปภาพเดิมที่เคยมีถูกลบ หรือเปลี่ยนเป็นไฟล์รูปภาพใหม่ (URL รูปภาพเปลี่ยน)
  • URL เว็บไซต์ถูกเปลี่ยน เช่นจาก abc.com/2019 เป็น abc.com เฉย ๆ

ทั้งหมดนี้ เมื่อมีการเปลี่ยนแปลง URL ผลที่ตามมาคือ ถ้ายังมีการนำ URL เก่าไปใช้ในเว็บไซต์อื่น เวลาคลิกเข้าที่ URL เก่าก็จะไม่พบหน้าที่ต้องการหา หรือ Error 404 (not found) นอกจากนั้นจะส่งผลเสียต่อ SEO อีกด้วย (Google มองว่าเป็น Dead link)

จึงขอแนะนำ Plugin WordPress ที่จะมาช่วยแก้ปัญหานี้คือ

สำหรับ All 404 Redirect to Homepage คือ Plugin ที่จะช่วยเปลี่ยนจากหน้า Not found ของ WordPress ให้ Redirect ไปหน้าแรกของเว็บไซต์แทน เวลาที่ผู้ใช้เรียกหน้าที่ต้องการไม่พบ ซึ่งจุดนี้ผู้ดูแลเว็บไซต์ต้องเลือกระหว่าง ถ้าไม่เจอไปหน้าเว็บให้ไปหน้าแรก หรือ แสดงตรงๆ ไปเลยว่าไม่พบข้อมูล (ขึ้นอยู่กับความต้องการ)

ส่วน Redirection คือ Plugin ที่จะช่วย Map ระหว่าง URL เดิมที่เคยใช้ และ URL ปัจจุบัน ยกตัวอย่างเช่น ถ้าเราต้องการแก้ URL ของ Post ก็จะต้องมาใส่ข้อมูล URL Map ใน Redirection ด้วย เมื่อมีการเข้าด้วย URL เดิม Plugin จะ Redirect ไป URL ใหม่ให้อัตโนมัติ นอกจากนี้ Plugin ยังคอยเก็บสถิติการเข้าผ่าน URL ที่ Map ไว้ เพื่อให้ผู้ดูแลเว็บเห็นว่ามีการเข้าจาก URL เดิมจำนวนมากแค่ไหน

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