Get Adobe Flash player

pamok.r

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/

แนะนำ Materialize CSS Framework ใหม่สำหรับพัฒนา Web App

เป็นอีกทางเลือกหนึ่งสำหรับผู้ที่ต้องการพัฒนา Web App ให้มีหน้าตาที่ทันสมัยถูกหลักการของ Material Design ของ Google โดย Materialize CSS นั้นเป็นอีกหนึ่งใน Framework ที่ได้พัฒนาโดยอิงตามหลักการของ Material Design มาทั้งหมด

คุณลักษณะที่สำคัญเมื่อเทียบกับ Bootstrap

Grid System

ทั้ง Materialize ใช้หลักการแบ่ง Column แบบเดียวกับ Bootstrap โดยการแบ่งเป็น 12 Column ใช้งานง่ายทั้งคู่แต่ Materialize ใช้ชื่อ Class ในระบบ Grid system ได้สั้นและดูง่ายกว่า ดังภาพ

Grid System (Materialize CSS)

Grid System (Materialize CSS)

Grid System (Bootstrap)

Grid System (Bootstrap)

ในเรื่องความละเอียดของระดับหน้าจอ Materialize และ Bootstrap แบ่งหน้าจอเป็น 4 ขนาดประกอบด้วยตารางด้านล่าง

Screen Size (Materialize CSS)

 

Screen Size (Bootstrap)

 

Container System

Container System คือ Layout หรือกรอบรอบนอกสุดที่ทำหน้าที่บรรจุดเนื้อหาของเว็บไซต์ทั้งหมด โดย Container ของ Bootstrap นั้นจะแบ่งเป็น 2 แบบคือแบบ Fix จะมีความกว้างไม่เกิน 1170px (ดูได้จากรูป Screen Size Bootstrap) และแบบ Fluid คือจะกว้างเต็มตามขนาดหน้าจอ แต่ในขณะเดียวกัน Materialize CSS นั้นใช้หลักการ Material Design จาก Google ซึ่งมองว่าเนื้อหาของเว็บไซต์ควรจะรวมอยู่กึ่งกลางเพื่อให้ผู้ใช้ดูง่าย ดังนั้น Container ของ Materialize CSS จึงมีความกว้างประมาณ 70% ของหน้าจอขนาดใหญ่ (ดูได้จากรูป Screen Size Material CSS)

ดูเพิ่มเติม: http://materializecss.com/

การใช้ PowerShell ในการจัดดาร License บน Microsoft Office 365

จะต้องเตรียมเครื่องด้วยการติดตั้ง Plugin และ Module สำหรับเชื่อมต่อไปยัง Office 365 ดังนี้

  1. Microsoft Online Services Sign-In Assistant for IT Professionals RTW
  2. Azure Active Directory Module for Windows PowerShell (64-bit version)

เมื่อติดตั้งเสร็จแล้วให้เปิด Azure Active Directory PowerShell ขึ้นมาและใช้คำสั่ง “connect-msolservice” เพื่อเชื่อมต่อไปยังบริการ Office 365 โดยระบบจะแจ้งให้ทำการ Login

ตรวจสอบยอดการใช้งาน License ของหน่วยงานด้วยคำสั่ง “Get-MsolAccountSku”

เมื่อตรวจเสร็จแล้วให้ใช้คำสั่ง

เมื่อรันคำสั่งแล้วจะใช้เวลาทำงานประมาณครึ่งวัน หรืออาจเร็วกว่านั้นขึ้นอยู่กับปริมาณ User บน Office 365

แนะนำ Plupload เป็น Library สำหรับการ Upload file บนเว็บไซต์

ที่ผ่านมา Library สำหรับช่วยในการ Upload file (เช่น Uplodidy) จะใช้ Flash ช่วยในการ Browse และ Upload ไฟล์ เพื่อให้ผู้ใช้สามารถ Browse ไฟล์ได้หลายไฟล์พร้อม ๆ กัน รวมทั้งการ Upload แบบ Asynchronous แต่อย่างไรก็ตามเวลาผ่านไป Flash กลายเป็นเทคโนโลยีที่ตายแล้ว Web Browser สมัยใหม่ปิดกั้นการทำงานของ Flash เป็นค่าเริ่มต้น ผลกระทบที่ตามมาคือ Library Upload file จึงไม่สามารถทำงานได้ตามปกติ

ดังนั้นหากต้องการพัฒนา Web App ที่สามารถ Upload file โดยการ Browse ไฟล์พร้อม ๆ กัน รองรับการทำงานแบบ Asynchronous หรือพูดง่าย ๆ ว่า Library ทางเลือกที่สามารถใช้แทน Uplodify ได้โดยที่ไม่กระทบต่อโครงสร้าง Code เดิมของ Web App มากนัก ขอแนะนำให้ใช้ Plupload

Plupload มีดีอย่างไรบ้าง

  • มี Runtime หลากหลายตั้งแต่ HTML5, HTML4, Flash และ SilverLight
  • รองรับการ Drag and drop
  • เมื่อเป็น HTML5 จึงสามารถเปิดตัวอย่างไฟล์มาแสดงได้บนฝั่ง Client เช่น Browse ไฟล์รูป แล้วนำรูปที่ Browse ขึ้นมาแสดงบนหน้าจอ โดยไม่ต้องทำการ Upload
  • กรณีที่เป็นรูปภาพสามารถ ตัดต่อ หรือ ย่อรูปภาพได้บนฝั่ง Client
  • สามารถแบ่งส่วนไฟล์ในการ Upload เช่นไฟล์เต็ม 10Mb สามารถแบ่งเป็นส่วนละ 1Mb แล้วค่อย Upload ทำให้สามารถ Upload ไฟล์ใหญ่กว่าขนาดที่ Server กำหนดได้
  • มีการแปลมากกว่า 30 ภาษา
  • รองรับใช้งานร่วมกับ jQuery

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

Download Plupload ได้ที่เว็บไซต์ http://www.plupload.com/

เรียกใช้งานงาน Script ของ Library ถ้าต้องการใช้เป็น method jQuery ต้องเรียกใช้ไฟล์ CSS, Js ของ jQuery เพิ่มเติม (ผู้พัฒนา Plupload เตรียมไฟล์ให้แล้วใช้ชุดที่ Download มา)

การกำหนด Element บน HTML ในตำแหน่งที่ต้องการให้เป็นปุ่ม Browse และ Upload

การตั้งค่า Plupload

 

วิธี Export User จาก Active Directory โดยใช้ PowerShell

การ Export User จาก Microsoft Active Directory สามารถทำได้โดยใช้คำสั่ง Get-ADUser ในชุดคำสั่ง Active Directory Cmdlets ดูเพิ่มเติมได้ที่ https://technet.microsoft.com/en-us/library/ee617195.aspx การใช้คำสั่ง Get-AdUser จะถูกบังคับให้ใช้ Parameter Filter พร้อมกันเสมอ โดยการรันคำสั่งต่าง ๆ จะใช้ PowerShell เป็นตัวรับคำสั่ง ตัวอย่างเช่น

แสดงรายชื่อ User ทั้งหมด แต่จะแสดงไม่เกิน 1000 รายการ (ถ้ามี Username จำนวนมากควรระบุ Filter)

เมื่อต้องการรายชื่อที่ขึ้นต้นด้วยคำว่า nop จะใช้คำสั่ง (ใช้ -eq (equal) แทนเมื่อต้องการค้นชื่อเต็ม)

กรณีที่ต้องการเลือก OU สามารถใช้ Paremeter -SearchBase เพื่อระบุ base dn

จากนั้นเราสามารถจัดรูปแบบการแสดงผลในรูปแบบตารางได้ด้วยคำสั่ง Select-Object แล้วตามด้วย Attribute ที่ต้องการแสดงผล

หาก Attribute ที่ต้องการไม่มีอยู่ในค่าเริ่มต้น จะต้องใช้ Parameter -Properties เพื่อขอดู Attribute เพิ่มเติม เช่น ต้องการ Title และ Department มาแสดงด้วย

และสุดท้ายการ Export เป็นไฟล์ CSV สามารถทำได้โดยใช้คำสั่ง Export-Csv พร้อม Paremeter -Encoding “UTF8”  เพื่อให้แสดงผลเป็นภาษาไทยอย่างถูกต้อง

 

Protected: วิธีติดตั้งแบบสอบถามความพึงพอใจ xQuiz

There is no excerpt because this is a protected post.

แนะนำ Plugin Query Monitor สำหรับตรวจสอบการทำงานของ WordPress

ในการใช้ WordPress เพื่อจัดทำเว็บไซต์ มักจะมีการติดตั้ง Plugin หรือส่วนเสริม เพื่อเพิ่มความสามารถในการทำงานต่าง ๆ ตามที่ผู้ดูแลเว็บต้องการ บางเว็บไซต์อาจจะต้องติดตั้ง Plugin หลายสิบตัวเพื่อให้เว็บไซต์เป็นไปตามที่ต้องการ อย่างไรก็ตามเมื่อมีการใช้งาน Plugin มากขึ้นอาจจะเกิดปัญหาให้เว็บไซต์โหลดช้า

จึงเป็นที่มาของ Plugin Query Monitor สามารถ Install ได้ผ่านระบบจัดการของ WordPress โดย Query Monitor เมื่อ Active ใช้งานแล้วจะทำการ Capture การทำงานทั้งหมดตั้งแต่มีการเรียกหน้าเว็บไซต์ ไม่ว่าจะเป็น HTTP Request, Query ฐานข้อมูล และการโหลด Script ต่าง ๆ ดังภาพ

screenshot-11

screenshot-41

จะเห็นว่ารายงานของ Query Monitor จะแสดงให้ผู้ดูแลเว็บไซต์สามารถตรวจสอบได้ว่าอะไรคือสาเหตุที่ทำให้เว็บไซต์โหลดช้า

รายละเอียดเพิ่มเติม https://wordpress.org/plugins/query-monitor/

การจัด Layout บนหน้าเว็บไซต์แบบอิสระโดยใช้ CSS Relative+Absolute

ในบางครั้งเราต้องการวาง Element ไว้บนตำแหน่งที่ไม่ชิดซ้าย ไม่ชิดขวา และไม่อยู่กึ่งกลางของพื้นที่ ซึ่งอาจจะเป็นตำแหน่งเยื้องขวาบนเล็กน้อยแต่ไม่สุด การใช้ CSS ในการกำหนดให้ Element ที่ต้องการอยู่ในตำแหน่งนั้นพอดีโดยใช้เทคนิค Relative+Absolute จะช่วยให้เราจัดตำแหน่งในกรณีนี้ได้ง่าย

CSS Relative+Absolute คือการกำหนดคุณสมบัติ Position ของ Element โดยกำหนดให้ Element แม่มี Position เป็น Relative ส่วน Element ลูกมี Position เป็น Absolute จากนั้นใช้การกำหนด Element ลูก ให้มีระยะห่างจากขอบตามต้องการโดยใช้คุณสมบัติ top, left, right หรือ bottom ดังตัวอย่างนี้

css-re-ab1

ดังในตัวอย่าง Element ลูกกำหนด top เป็น 80px คือเว้นระยะจากด้านบนลงมา 80px และ right เป็น 0 คือชิดขอบขวาผลที่ได้ Element จะอยู่ในตำแน่งดังภาพ

css-re-ab2

สามารถศึกษาคุณสมบัติอื่น ๆ ของ CSS Position เพิ่มเติมได้ที่ http://www.w3schools.com/css/css_positioning.asp

Atom/Emmet Bug

Open File -> Keymap…

การใช้ CSS3 @font-face Rule เพื่อนำฟอนต์ประจำมหาวิทยาลัยมาแสดงบนเว็บไซต์

ใน CSS3 (Version 3) สามารถนำฟอนต์ที่ไม่ใช่ฟอนต์มาตรฐานบนเว็บไซต์ (CSS Web Safe Font Combinations) มาใช้บนเว็บไซต์ได้ด้วยการใช้ @font-face Rule

โดยเริ่มต้นจากการดาวน์โหลดไฟล์ฟอนต์ประจำมหาวิทยาลัย fonts.zip

ซึ่งแต่ละ Web Browser จะสนับสนุนชนิดของไฟล์ฟอนต์ที่แตกต่างกัน ดังนี้

font-face-support

จากนั้นใส่ CSS3 @font-face Rule เพื่อเรียกใช้ไฟล์ฟอนต์ ที่ประกอบด้วยฟอนต์ตัวอักษรปกติ (db_chidlom_xregular) และฟอนต์ตัวอักษรแบบหนา (db_chidlom_xbold) ให้พิจารณาที่อยู่ของไฟล์ฟอนต์ให้ถูกต้อง ตรงกับที่อยู่ไฟล์ฟอนต์จริงบนเว็บไซต์

สำหรับการเรียกใช้ฟอนต์ประจำมหาวิทยาลัยสามารถเรียกใช้ได้โดยตรงเช่น

<h3 style=”font-family:’db_chidlom_xbold’, sans-serif, Arial”>หัวข้อฟอนต์มหาวิทยาลัย</h3>

หรือการกำหนดผ่าน Id หรือ Class ผ่าน CSS เช่น

ตัวอย่างผลลัพธ์จากการใช้ฟอนต์ประจำมหาวิทยาลัย