Get Adobe Flash player

pamok.r

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

วิธีการนับจำนวน User บน Microsoft Active Directory แยกตาม OU โดยใช้ PowerShell

เริ่มต้นด้วยการ Login (ด้วย User ที่มีสิทธิเพียงพอเช่น User ในกลุ่ม Admin Domain) เข้าสู่เครื่องที่เป็น Domain Controller บนระบบ Microsoft Active Directory จากนั้นให้ทำการเปิด Windows PowerShell

จากในให้ใช้คำสั่ง Get-ADUser ในชุดคำสั่ง Active Directory Cmdlets ดังนี้

ผลลัพธ์ที่ได้จะเป็นจำนวน User แยกตาม OU ทั้งหมด

ในกรณีที่ต้องการระบุเฉพาะ OU ที่ต้องการสามารใส่คำสั่ง -SearchBase และใส่ BaseDN เพิ่มเข้าไปได้ดังตัวอย่าง

 

HTML5 picture element เพื่อทำ responsive image ที่ดีกว่า

ในปัจจุบันเป็นที่รู้กันว่าเราต้องทำเว็บไซต์ให้รองรับกับหน้าจอหลาย ๆ ขนาด (responsive web) รวมทั้งรูปภาพที่ใช้ในเว็บด้วย โดยวิธีที่ใช้กันมากคือการกำหนด CSS ให้ที่ทำให้รูปภาพมีความกว้างตามขนาดพื้นที่ที่มี เช่น

การใช้ CSS กำหนดให้รูปภาพเป็น responsive image สามารถใช้งานได้ดี แต่ก็ยังมีปัญหาเรื่องประสิทธิภาพ เพราะต้องเตรียมรูปภาพขนาดใหญ่เผื่อไว้รองรับหน้าจอขนาดใหญ่ เมื่อถูกเปิดด้วยหน้าจอขนาดเล็กก็ต้องโหลดรูปภาพขนาดใหญ่โดยไม่จำเป็น และหากพื้นที่เป็นแนวตั้ง แต่รูปภาพเป็นแนวนอน ก็จะส่งผลให้รูปภาพถูกย่อจนเล็กดังภาพ

 

ซึ่งในจุดนี้ HTML5 picture element จะเข้ามาช่วยได้ โดยการยอมให้เราเตรียมรูปภาพหลากหลายขนาดที่เหมาะสมกับหน้าจอขนาดต่าง ๆ และ picture element จะสั่งให้ web browser โหลดเฉพาะไฟล์ขนาดที่เหมาะสมตามที่เราตั้งค่าไว้  (เงื่อนไขเหมือนกับ media screen ของ CSS) โดยมีตัวอย่างดังนี้

ถ้าหน้าจอขนาด 600px ก็จะโหลดรูป img_pink_flowers แทน img_orange_flowers ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ

credit: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015

Favicon Best Practice 2017 ฉบับภาษาไทย

ในอดีดเราสามารถใช้ไฟล์ favicon.ico ขนาด 16×16 pixels ไฟล์เดียววางไว้บน root directory ของเว็บไซต์ เพื่อให้ Web Browser สามารถนำ Icon มาแสดงไว้หน้า Web Title ซึ่งก็ยังคงใช้งานได้จนถึงทุกวันนี้บนเว็บไซต์ แต่ในปัจจุบันเว็บไซต์ถูกนำไปเปิดบนหลากหลายอุปกรณ์ซึ่งมีความละเอียดของหน้าจอแตกต่างกัน นอกจากนั้นหากผู้ใช้ Add Website เป็น Bookmark หรือเพิ่มลงใน Home Screen ของโทรศัพท์ก็จะต้องใช้ Icon ขนาดใหญ่กว่าเดิม จึงทำให้ใน HTML5 มีคุณสมบัติใหม่เพิ่มเพื่อช่วยแก้ไขปัญหาเหล่านี้

Favicon ใน link (HTML5) จะมีคุณสมบัติเพิ่มขึ้นใหม่ประกอบด้วย

  1. รองรับไฟล์ชนิด png และ svg เพิ่ม นอกเหนือจาก ico (แต่รองรับไม่ครบทุก Web Browser)
  2. Attribute ใหม่คือ size ใช้กำหนดขนาดของ Icon เพื่อให้ Web Browser เลือกใช้ตามความเหมาะสม

ตัวอย่าง

ถ้าต้องการให้ Favicon ของเรารองรับทุก ๆ หน้าจอและอุปกรณ์จะต้องใส่ไฟล์ครบทุกขนาดตามตารางนี้

Size Name Purpose
32×32 favicon-32.png Standard for most desktop browsers
57×57 favicon-57.png Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
76×76 favicon-76.png iPad home screen icon
96×96 favicon-96.png GoogleTV icon
120×120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114×114)
128×128 favicon-128.png Chrome Web Store icon & Small Windows 8 Star Screen Icon*
144×144 favicon-144.png IE10 Metro tile for pinned site*
152×152 favicon-152.png iPad touch icon (Change for iOS 7: up from 144×144)
167×167 favicon-167.png iPad Retina touch icon
(change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
180×180 favicon-180.png iPhone 6 plus
195×195 favicon-195.png Opera Speed Dial icon
(Not working in Opera 15 and later)
196×196 favicon-196.png Chrome for Android home screen icon
228×228 favicon-228.png Opera Coast icon

* Microsoft ต้องการ Meta tag msapplication-TileColor และ msapplication-TileImage สำหรับ IE10 บน Windows 8 และ Windows10 IE11 ขึ้นไปต้องการ browserconfig.xml.

จะเห็นว่าหากต้องการให้ Favicon สามารถรองรับแบบ Cross platform ได้เราจะต้องเหนื่อยมากในการเตรียมไฟล์และ Config ดังนั้นอาจจะพิจารณาเพื่อตัดตัวเลือกที่ไม่จำเป็นทิ้ง หรือใช้บริการเว็บไซต์ https://www.favicon-generator.org/ เพียงแค่ Upload ไฟล์ icon ที่มีขนาดมากกว่า 228×228 pixels จากนั้นระบบจะ generate ไฟล์ icon และ confg ที่จำเป็นทั้งหมด โดยมีขั้นตอนดังนี้

1) เลือกไฟล์ icon ที่ต้องการและเลือก Generate icons for Web, Androidm Microsoft and iOS

2) คลิกปุ่ม Create Favicon ระบบจะให้ Download ไฟล์สามารถ Extract ได้รายการไฟล์ดังนี้

3) จากนั้นให้นำไฟล์ทั้งหมด Upload เข้าสู่เว็บไซต์ และแทรก Script ด้านล่างนี้ไว้ใน Tag head สามารถแก้ไข path ให้ตรงกับที่อยู่ของไฟล์ได้ตามสะดวก

 

Angular-materialize Plugin สำหรับการใช้งาน AngularJS ร่วมกับ Materialize CSS

จากการแนะนำ CSS Framework ที่ออกแบบตามหลักการของ Material Design ที่ผ่านมา http://info.arit.rmutp.ac.th/2017/07/31/materialize/ หากต้องนำมาใช้ร่วมกับ AngularJs (version 1) ควรจะใช้ Plugin นี้เพื่อมาช่วยให้ทำงานร่วมกันได้ เพราะด้วยตัว Materialize CSS มี JavaScript เป็นของตัวเอง

การแนบไฟล์ JavaScript และ CSS ที่ต้องใช้

การเรียกใช้ Module ชื่อ ‘ui.materialize’

จากนั้น Form Input ต่าง ๆ ที่ถูก apply โดย Materialize CSS ไม่ว่าจะเป็น Text, Date และ Time จะถูกผูกค่ากับ ng-model ของ AngularJs ดังตัวอย่างต่อไปนี้

Input-date

HTML

JavaScript ใน Controller

อ่านรายละเอียดเพิ่มเติมได้ที่ https://krescruz.github.io/angular-materialize/