Get Adobe Flash player

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

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 ของเราอยากให้มันแสดงตรงไหนก็ใส่ตัวเลขนั้นลงไป

ติดตั้ง Web Essentials for Visual Studio เพื่อให้พิมพ์คำสั่ง html แบบรวดเร็ว

เข้าไปดาวน์โหลดและทำการติดตั้งได้ที่ http://vswebessentials.com/

webessential1

 

เมื่อติดตั้งเสร็จแล้วให้ลองเปิดโปรเจ็คขึ้นมาแล้วลองพิมพ์ code html ดังนี้

table>tr*2>td*5 แล้วกด tab 2 ครั้ง จะได้ table ที่มี 2 row และ 5 column

webessential2

 

การใส่ Placeholder ลงใน Text input

Placeholder คือข้อความตัวอย่างหรือคำอธิบายที่ใส่ text input เพื่ออธิบายคุณลักษณะของ text หรือ textarea หรือกระทั่งใช้ในการยกตัวอย่างรูปแบบข้อความที่อยากให้ผู้ใช้งานกรอกลงในหน้าเว็บไซต์ เช่น รูปแบบการกรอกอีเมล หรือ ตัวอย่างการกรอก url เพื่อแสดง link website

Code ที่ใช้ :

placeholder=“ตัวอย่างข้อความ”

 

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

จะแสดงผลได้ดัวตัวอย่าง :

ตัวอย่างเมื่อทำการกรอกข้อมูล :

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

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

 

Microsoft Access Database จะ Error เมื่อมีการเรียกใช้พร้อมกันผ่านเว็บ

Microsoft Access Database จะ Error เมื่อมีการเรียกใช้พร้อมกันผ่านเว็บไซต์จะพบ error ดังนี้

วิธีแก้คือให้เปิด Permission ให้ไฟล์ .ldb และ .mdb ให้สิทธิ IIS_IUSR เข้าใช้งาน ด้วยสิทธิ Full control

 

Google Calendar จัดการ Resources เช่น การจองห้องจองรถภายในมหาวิทยาลัย

Google Calendar จัดการ Resource การจองห้องจองรถภายในมหาวิทยาลัย เมื่อคณะหรือหน่วยงานที่ใช้ account ภายใต้โดเมน @rmutp.ac.th จะเกิดปัญหาตามมาคือทุกคนจะสามารถเข้าไปจอง Resource ได้หมด ทำให้ห้องบางห้องต้องใช้โดยคนภายในหน่วยงานเจ้าของ อาจจะโดนจองจากคนนอกหน่วยงาน ทำให้การควบคุมการจองลำบาก ดังนั้นจะต้องใช้สิทธิแอดมินในการเข้าไปจัดการ Resrouces ที่มีการสร้างขึ้น วิธีการทำดังนี้

จะเห็นว่าเมื่อแชร์ปฏิทินจะสามารถกำหนดให้ แก้ไข หรือ แชร์ต่อได้ หรือแค่ดูรายละเอียด หรือแค่เห็นว่า Resources ว่างไม่ว่าง *กรณีจะมอบสิทธิให้คณะดูแล สามารถไปเปิด Role ในเมนูแอดมินจะมี Setting Calendar Resouces ภายในให้เลือก

 

 

ionic command

ionic command จะพิมพ์ใน command prompt (cmd) เพื่อทำงาน โดยมีคำสั่งที่สำคัญดังนี้

1) คำสั่งสร้าง apps

ตรง app1 คือชื่อ apps ที่จะสร้าง

2) คำสั่งเปิด run serve เพื่อจำลอง app ผ่าน browser เพื่อง่ายต่อการพัฒนา apps เริ่มต้น

3) คำสั่งปิด serve กรณีที่ทำแล้วอยากจำลองผ่าน emulator หรือ ผ่าน device จริงจะต้องปิด serve โดยพิมพ์

4) ให้ ionic download sources สำหรับใช้งานกับ android device

ให้ ionic download sources สำหรับใช้งานกับ iOS device

  • กรณีที่ error จากการ ใช้คำสั่ง ionic platform add สามารถใช้คำสั่ง remove ได้

5) run app

สำหรับ android device / emulator

สำหรับ iOS device (จะต้องใช้บน Mac OS และถ้าจะลงเครื่องจริงจะต้องทำผ่าน x code)

6) build icon / splash screen

ถ้ารูป icon หรือ splash ไม่เปลี่ยนให้พิมพ์เพิ่ม

 

การเซตค่าให้กับ DropdownList (ASP.NET C#)

ในการตั้งค่า Datasurce สำหรับตัว DropDownList จากตาราง ปกติสามารถเซตได้จากการเซตที่หน้า layout โดยเลือกจากไอเท็ม แต่ทั้งนี้ ในการเซตค่าก็สามารถดึงค่า DataTable เขียนผ่านโค้ดได้เช่นกัน ด้วยการเขียนชุดคำสั่งดังนี้

DropDownList1.DataSource = ชื่อ DataSet/DataTable;
DropDownList1.DataTextField = ชื่อ Col;
DropDownList1.DataValueField = ชื่อ Col;
DropDownList1.DataBind();

อธิบายโค้ด :

– DropDownList1.DataSource คือการตั้งค่า DataSource ให้กับตัว DropDownList (ซึ่งชื่อ DropDownList ในที่นี้คือ DropDownList1)
ในการเขียนให้นำชื่อ DataSet หรือ DataTable ที่ต้องการมาเติมหลังเครื่องหมายเท่ากับ

– DropDownList1.DataTextField ส่วนนี้คือการกำหนด Text ที่จะแสดงบนตัว DropDownList
โดยเวลาเซต ต้องเลือกจากชื่อ Column ของ DataTable ที่เลือกมา

– DropDownList1.DataValueField ส่วนนี้คือการกำหนด Value ที่จะแสดงบนตัว DropDownList (ซึ่งเป็นค่าที่จะถูกซ่อนไว้)
เวลาเซต ต้องเลือกจากชื่อ Column ของ DataTable เช่นกัน ซึ่งอาจจะเป็น Column เดียวกันกับ DataTextField หรือไม่ก็ได้
ขึ้นอยู่กับว่าเวลาที่ผู้ใช้งานทำการ Select ค่าบน DropDownList แล้วต้องการให้เก็บค่าในรูปแบบใด