Get Adobe Flash player

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

การตรวจสอบ 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 ดังภาพ

การค้นหา String ในทุกตารางของ DATABASE SQL Server 2012

นำ Query นี้ลงไปใน New Qurey ของ Sql server และ ใส่คำที่ต้องการหาและกด F5 จะได้ผลลัพธ์ ว่าอยู่ตารางไหน

CSS : การใช้ cursor

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

การเปลี่ยนรูป CURSOR สามารถเขียนด้วย CSS ด้วยคำสั่งนี้

cursor: รูปแบบที่ต้องการให้แสดง;

 

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

<a href=”https://www.yourlink_url.com” style=”cursor:crosshair“>ลากเมาส์มาตรงนี้</a>

 

ผลลัพธ์

ลากเมาส์มาตรงนี้
 

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

Credit :

  • http://coursesweb.net/css/css-cursor-property-custom-cursors
  • https://www.webcodegeeks.com/css/css-cursor-pointer-example/
  • http://www.codetukyang.com/html/technic/mouseover_chg_cursor.htm

การใช้ jQuery Validation

Download File จากลิ้งค์นี้

https://github.com/jquery-validation

 

 

จากนั้นนำไปวางไว้ในโฟลเดอร์

 

เรียกใช้

โดยใส่ไว้ในส่วนของ<head> ของไฟล์ HTML

 

ตั้งชื่อ id ให้ฟรอมที่ต้องการจะตรวจสอบ

 

 

ตั้งชื่อให้ input ที่ต้องการจะให้ตรวจสอบ

 

จากนั้นสร้างไฟล์  validate.js

 

 

rules : จะเป็นส่วนในเงื่อนไขของการตรวจสอบ

messages : จะเป็นการกำหนดข้อความในการแสดง error message

 

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

ผลลัพธ์

ทำให้ Gridview Devexpress (MVC) แก้ไขได้

1 ไปที่ Global.asax

2. จะเจอ Application_Start() ให้ทำการใส่โค้ดนี้ลงไป

3. จะได้ดังในภาพ

4. ให้ทำการ Build โดยกด Ctrl+Shift+B  จะทำการ Build Project  แค่เท่านี้ก็จะสามารถแก้ไขจากตารางได้

 

Asp.net การใช้ DataGrid ใน Devexpress (MVC)

1 ทำการคลิกขวาที่ Model และเลือก ADD และเลือก ADO.NET  Entity Data Model

2 ทำการตั้งชื่อ Model

3 ทำการสร้าง Entity Data Model Wizard โดยเลือก EF Designer from database

4 ทำการ Connect กับดาต้าเบรดที่ต้องการ แล้วกด next  (ถ้าต้องการ Connect ใหม่ให้กด New Connection)

5 ทำการเลือกตาราง และกด Finish

6  ทำการ Bulid Project

7 คลิกขวาในหน้า View ที่ต้องการสร้าง DataGride

8  เลือก Data และเลือก Gridview 

9 ไปเลือกที่ Model Class และเลือก ชื่อตารางที่เราได้สร้าง Modelไว้ตอนแรกในที่นี้ ตารางที่นำเข้าไปชื่อ Login

10  Data Context Class ให้เลือกของ Entity ที่ ADO Entity ได้ทำการสร้างขึ้นมาให้

11  Coloums: เลือกที่เราจะให้มันแสดงใน  Gridview

12  Key Field  หรือ  primary key   ในนี้คือ LID

13 จากนั้น Devexpress จะปรากฎหน้าต่างแบบนี้ให้ก็อปปี้ไปใส่ในหน้า Laout ดังในภาพ

14  ให้ทำการ เอา Scripts ของ Jquery ไปวางไว้ด้านบนของ Scripts ของ Devexpress

 


 

15  ก็จะได้ Gridview  ดังภาพ

Error: The wait operation timed out เวลา Query ด้วย SQL Command

Error: The wait operation timed out เวลา Query ด้วย SQL Command แก้โดยเพิ่ม Timeout ตอนสั่ง Query เพิ่ม

Timeout1

Timeout2

 

 

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

CSS : การใช้ overflow ในการจำกัดพื้นที่แสดงข้อมูล

กรณีที่เราอยากจัด layout บนหน้าเว็บเพจให้สวยงาม โดยกำหนดว่าอยากจะให้ข้อมูลแสดงภายในขนาดพื้นที่ๆจัดไว้ เราสามารถกำหนด style ด้วยคำสั่ง overflow เพื่อช่วยจัดการในกรณีที่ข้อมูลมีเนื้อหาหรือขนาดใหญ่เกินพื้นที่ๆกำหนดได้ ด้วยคำสั่ง

 

– overflow: รูปแบบที่ต้องการให้แสดง;

 

overflow สามารถแสดงผลในรูปแบบต่างๆ ตามตัวอย่าง โดยสมมติกำหนดพื้นที่แสดงข้อมูลเป็นพื้นที่สีฟ้า เมื่อเขียนคำสั่งรูปแบบต่างๆจะให้ผลต่างกันดังนี้

  •  overflow: visible แสดงข้อมูลที่ต้องการทั้งหมด

  • overflow: hidden ซ่อนข้อมูลส่วนที่ล้นเกินพื้นที่

  • overflow: scroll แสดงข้อมูลทั้งหมดภายใต้พื้นที่ที่กำหนด โดยใช้ scroll bar แสดงผลส่วนที่ล้น

  • overflow: auto แสดงผลอัตโนมัติ ถ้าข้อมูลเกินก็จะมีแถบ scroll bar ขึ้นให้ (ในรูปตัวอย่างข้อมูลเกิน จึงแสดงผลเหมือน scroll)