Get Adobe Flash player

pamok.r

การติดตั้ง 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 ใหม่ทันที

การตรวจสอบ OS, Web Browser ของผู้ใช้จาก HTTP User Agent

เมื่อใช้ Web Browser เข้าใช้งานเว็บไซต์จะมีตัวแปร (Object) อยู่ตัวหนึ่งใน JavaScript ชื่อว่า navigator (window.navigator) ดังภาพ

Object navigator นั้นจะมี Property มากมายที่สามารถนำไปใช้ได้ หนึ่งในนั้นคือ userAgent คือสิ่งที่เราจะใช้ในการระบุว่าผู้ใช้นี้ใช้งานเว็บไซต์ของเราผ่าน OS อะไร ด้วย Web Browser อะไร รุ่นไหน ดังภาพ

เมื่อเรียกใช้งาน window.navigator.userAgent ดังตัวอย่างจะได้ข้อความ “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36” เรียกว่า User Agent String โปรดสังเกตจะพบว่าในข้อความมีระบุอยู่ว่าเป็น OS ประเภท Macintosh รุ่น OSX 10_13_2 ส่วน Web Browser เป็น Chrome รุ่น 63

โดยทั้งหมดนี้เป็นการเรียกดูในฝั่งผู้ใช้ (Client) ถ้าต้องการเรียกดูในฝั่ง Server ก็สามารถทำได้เช่นกัน ตัวอย่างในภาษา PHP จะใช้ $_SERVER[‘HTTP_USER_AGENT’]

วิธี Extract เพื่อแยก OS, Web Browser อย่างง่าย ๆ จาก User Agent String ผู้เขียนใช้วิธีการตรวจสอบกับเว็บไซต์ http://www.useragentstring.com/ สามารถค้นหาโดยการใช้ User Agent String ไปค้นโดยตรง หรือเรียกใช้งานผ่าน Web API

ถ้าต้องการใช้งาน Web API แนะนำให้เรียกในฝั่ง Server (เพราะจากการทดลองใช้งาน Web API ด้วย JavaScript จะติดปัญหาเรื่อง Cross domain) ดังตัวอย่างจะเป็นการเรียก Web API ด้วย PHP cURL

 

Web API จะตอบกลับ (Respond) เป็นข้อความในรูปแบบ JSON สามารถใช้ json_decode เพื่อแปลงให้อยู่ตัวแปร Array หรือ Object จากนั้นแสดงผลผ่าน print_r จะได้โครงสร้างทั้งหมดของ $useragent ดังภาพ

Validate confirm password (Angularjs directive)

โดยปกติแล้ว Angularjs จะ build-in validation มาให้สำเร็จแล้ว แต่หากต้องการ validate confirm password เวลาสมัครสมาชิกหรือลงทะเบียนว่าตรงกับ password ที่ตั้งตอนแรกหรือไม่ สามารถใช้ directive ช่วยเพื่อให้การตรวจสอบ form ทำได้ครบสมบูรณ์

เริ่มต้นด้วยการสร้าง directive

Html (Bootstrap 3.x) ใช้ directive ในรูปแบบ attribute แทรกไว้ใน input confirm password

ผลลัพธ์

แนะนำ ng-quill สำหรับทำ Text Editor แบบ wysiwyg บน AngularJS

ng-quill เป็น Library ที่ช่วยในการทำ Text Editor บน Web Application แบบ wysiwyg บน Framework AngularJS โดยตัวมันเองจะดึงเอา Library ที่ชื่อว่า Quill มาใช้งาน ผ่าน Directive และ Model ของ AngularJS

ความต้องการเริ่มต้นต้องทำการ Load JavaScript ที่จำเป็นประกอบด้วย

  1. AngularJS
  2. Quill
  3. ng-quill (JS + CSS)

จากนั้นให้แทรก Module “ngQuill” เข้าสู่ AngularJS

การเรียกใช้จะเรียกใช้ผ่าน Directive และผลลัพธ์จะอยู่ที่ Model โดยสามารถอ่าน Document ของ Quill ประกอบ

ผลลัพธ์บนหน้าจอ ด้านบนจะเป็น Expression แสดงข้อมูลของ Model ด้านล่างจะเป็น Text Editor