Get Adobe Flash player

การจัดการความรู้ KM

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

MVC 5 Keyboard Short cut

Ctrl+m+g ไปกลับ control และ view ได้

ctrl+shift+b เป็นการ build code

Ctrl+k+c,Ctrl+k+u  = block comment / unblock comment

กด alt+ลูกษรขึ้นลงย้ายโค้ดได้

พิมพ์ prop กด tab tab จะสร้าง properties

พิมพ์ ctor กด tab tab เป็นการสร้าง constructor จะถูกทำงานอัตโนมัติ

@forr click tab tab = for reword

กด Ctrl+k+d เป็นการจัดไลน์โค้ด
mvc1

 

การเรียกใช้ Script จากเพจลูกมาแสดงใน Page Layout

mvc2กดไปยังโค้ดที่ต้องการจากการใช้ go to definition

Mvc3

ถ้าใช้ bootstarp css pull-right or pull-left จะต้อง clearfix ด้วย

Mvc4การใช้ Asure สำหรับสร้าง HTML Tag แบบ Inteligent โดยถ้าสร้าง table สามารถพิมพ์

table>tr>td*5 กด Tab 2 ครั้ง จะได้

ถ้าจะใส่คลาสจะให้พิมพ์

table.table>tr>td*5 กด Tab 2 ครั้ง

การสร้างปุ่ม Link โดยใช้ @Html.ActionLink เมื่อต้องการประกาศให้มันใช้ html attribute class จะได้ดังภาพด้านล่าง

Mvc6

 

การใช้ code MVC สร้าง Form และ Element ต่างๆ

mvcD2_1

 

 

HTML : การใส่ลูกเล่นให้รูปภาพเปลี่ยนรูปเมื่อนำเมาส์ไปชี้

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

<img src=”urlรูปภาพที่ 1” border=”0″
onmouseover=”this.src=’urlรูปภาพที่ 2‘;”
onmouseout=”this.src=’urlรูปภาพที่ 1‘;”
/>

ตัวอย่างการใส่โค้ด :

ในการนำรูปภาพมาใส่ลูกเล่น ให้นำ url รูปภาพมากำหนดให้กับค่า src ซึ่งจะต้องตรงกับ url ที่ใช้กับ onmouseout (ตามตัวอย่างใช้ไอคอนพื้นหลังสีฟ้า) ในขณะที่ url ที่ใช้กับ onmouseover จะกำหนดเป็นอีก url หนึ่ง (ตามตัวอย่างใช้ไอคอนพื้นหลังสีเขียว)

ซึ่งจะแสดงผลได้ดังนี้

  • ลักษณะรูปภาพในหน้าเว็บปกติ จะแสดงรูปที่ 1 (url รูปใน src และ onmouseout)

 

  • เมื่อนำเมาสืชี้ไปที่รูปภาพไอคอนที่เชตไว้ ลักษณะรูปภาพในหน้าเว็บจะเปลี่ยนเป็นรูปที่ 2 (onmouseover)

ทั้งนี้ หากผู้ใช้นำเมาส์ออกห่างจากพื้นที่ของรูปภาพ รูปภาพเดิมที่เซตไว้ก็จะกลับคืนมาเป็นหน้าเว็บไซต์ปกติ

การใช้ 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

DevexPress ต้องการ Set GridView Detail ซึ่งเป็น GridView ลูกให้แสดงสีพื้นหลัง

DevexPress ต้องการ Set GridView Detail ซึ่งเป็น GridView ลูกให้แสดงสีพื้นหลัง เพื่อจะได้ไฮไลทข้อมูลดังภาพ

ให้ไปปรับในส่วนของ GridView ตัวที่ 2 ที่เป็น GridView ลูก ที่จะแสดงเมื่อมีการกดเครื่องหมายจาก GridView ตัวที่ 1 แล้วเพิ่ม OnHtmlRowCreated=”ASPxGridView2_HtmlRowCreated” ลงไป ดังภาพด้านล่าง

หลังจากนั้นในส่วนของ CodeBehide ให้ใส่โค้ดดังนี้

หมายเหตุ Cells[7] ให้ดูว่าคอลัมน์ใน GridView 2 ของเราอยากให้มันแสดงตรงไหนก็ใส่ตัวเลขนั้นลงไป