Get Adobe Flash player

การประชุม

การสร้าง chart.js บน ionic 4

  • เข้าไปที่โฟลเดอร์ที่บันทึกไฟล์ ionic ไว้ ทำการลง chart.js

 

  • นำโค้ดตัวอย่างไปใส่ไว้ที่หน้าที่ทำการเพิ่ม charts ไฟล์ .ts (typescripts)

  • ngOnInit เป็นการสั่งให้ทำงาน function ก่อนทำการโหลด page

 

  • จากนั้นกลับไปยังหน้าไฟล์ .html เพื่อเรียกใช้ฟังชั่นก์ charts เรียกเป็นในรูปแบบอ้างอิง id

 

  • ทำการ save เพื่อ compile code

การSet ค่าใน Report ตามที่เราต้องการ Devexpress XtraReport

  1. . ให้เราสร้าง XtraReport  และจัดให้เรียบร้อย

2. ให้เราทำการตั้งชื่อ ตัวแปลของเรา

3. จากนั้นเราไปที่ Code Behide ของ XtraReport   โดยในตอนแรก ตัวแปลของเรายังเป็น Private ให้เราปรับเป็น Public

4. เป็นขั้นตอนของการ Set ตัวแปลลง คือ  ให้เรา new Obj ของหน้า Report  เราจึงจะเห็นตัวแปลใน Class นั้น และเราสามารถเอาไปเทียบตัวแปลได้ดังในรูป

แนะนำ Plugin WordPress รับมือ Error 404 หรือการเปลี่ยนแปลง URL

เป็นปกติเมื่อเปิดเว็บไซต์ (WordPress) มาระยะเวลาหนึ่ง มักจะมีการเปลี่ยนแปลง URL ของ Post, Page หรือแม้แต่ไฟล์ Media ต่าง ๆ เสมอ เช่น

  • เปลี่ยนจากเดิม URL ของ Post จาก /some-title เป็น /some-new-title
  • จากไฟล์รูปภาพเดิมที่เคยมีถูกลบ หรือเปลี่ยนเป็นไฟล์รูปภาพใหม่ (URL รูปภาพเปลี่ยน)
  • URL เว็บไซต์ถูกเปลี่ยน เช่นจาก abc.com/2019 เป็น abc.com เฉย ๆ

ทั้งหมดนี้ เมื่อมีการเปลี่ยนแปลง URL ผลที่ตามมาคือ ถ้ายังมีการนำ URL เก่าไปใช้ในเว็บไซต์อื่น เวลาคลิกเข้าที่ URL เก่าก็จะไม่พบหน้าที่ต้องการหา หรือ Error 404 (not found) นอกจากนั้นจะส่งผลเสียต่อ SEO อีกด้วย (Google มองว่าเป็น Dead link)

จึงขอแนะนำ Plugin WordPress ที่จะมาช่วยแก้ปัญหานี้คือ

สำหรับ All 404 Redirect to Homepage คือ Plugin ที่จะช่วยเปลี่ยนจากหน้า Not found ของ WordPress ให้ Redirect ไปหน้าแรกของเว็บไซต์แทน เวลาที่ผู้ใช้เรียกหน้าที่ต้องการไม่พบ ซึ่งจุดนี้ผู้ดูแลเว็บไซต์ต้องเลือกระหว่าง ถ้าไม่เจอไปหน้าเว็บให้ไปหน้าแรก หรือ แสดงตรงๆ ไปเลยว่าไม่พบข้อมูล (ขึ้นอยู่กับความต้องการ)

ส่วน Redirection คือ Plugin ที่จะช่วย Map ระหว่าง URL เดิมที่เคยใช้ และ URL ปัจจุบัน ยกตัวอย่างเช่น ถ้าเราต้องการแก้ URL ของ Post ก็จะต้องมาใส่ข้อมูล URL Map ใน Redirection ด้วย เมื่อมีการเข้าด้วย URL เดิม Plugin จะ Redirect ไป URL ใหม่ให้อัตโนมัติ นอกจากนี้ Plugin ยังคอยเก็บสถิติการเข้าผ่าน URL ที่ Map ไว้ เพื่อให้ผู้ดูแลเว็บเห็นว่ามีการเข้าจาก URL เดิมจำนวนมากแค่ไหน

HTML 5 canvas คืออะไร

HTML5 Canvas เป็นหนึ่งใน feature ที่มีคุณสมบัติทางด้านกราฟฟิคที่มาพร้อมกับ HTML5 ซึ่ง Canvas element นี่แหละมันอาจจะเป็นพระเอกของ HTML5 เพราะเจ้ากราฟฟิกตัวนี้ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform

Canvas เป็น Element หนึ่งใน HTML5 เหมือนอย่าง <img> หรือ <a> โดยใน <img> หรือ <a> จะมี attributes เช่น src และ href แต่ใน <canvas> จะมีเพียงแค่ 2 attributes คือ width และ height (ความกว้างและความสูงของ Canvas) เท่านั้น

ข้อดีของ แท็ก Canvas
    ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ “วาดภาพ” ลงบนเว็บเพจได้โดยตรง โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
   ลักษณะของ canvas แตกต่างจากภาพชนิดอื่นๆ คือ มันไม่ได้จะแสดงได้เป็นภาพนิ่งเท่านั้น แต่มันสามารถเป็นภาพเคลื่อนไหวได้ด้วย และก็ไม่ได้เกิดจากการเรียกไฟล์ภาพขึ้นมาแสดงตรงๆ แต่เป็นการสั่งโดย javascript ทุกๆเส้นหรือทุกๆจุด และทุกๆการเคลื่อนไหวที่เกิดภายใต้ <canvas> เกิดจากการสั่งงานโดย javascript ทั้งสิ้น แล้วนำเข้ามาโชว์ด้วยการเรียกผ่าน id ของ <canvas> เข้าไป

การใช้งาน HTML 5 canvas เบื้องต้น

เริ่มแรกทำการสร้างไฟล์ HTML ขึ้นมา ผมทำการตั้งชื่อ ว่า index.html และมี element <canvas> ดังตัวอย่าง


จากนั้นลิงค์สคริปไปยังไฟล์ JavaScript ของเรา โดยทำการตั้งชื่อว่า main.js

ตัวอย่างการทำ Canvas

ผลที่ได้ก็จะเหมือนๆกับเราสร้าง Element DIV แต่ว่าความสามารถของ Canvas นั้นมันมีมากกว่า และถ้าคลิกขวาที่ Canvas เราสามารถที่จะ Save ออกมาเป็น Image ได้ด้วยนะครับ

การสร้าง Project MVC .Net Core บน Visual Studio Code

ต้องมี 3 อย่างนี้ก่อน

1.ไปยัง Terminal และเลือก New Terminal

2. ขั้นแรกพาทไปยังโฟรเดอร์ที่ต้องการเก็บ และใช้คำสั่งในการสร้างคือ

dotnet new mvc -o (ตามด้วยชื่อที่ต้องการ)

3. เมื่อสร้างเสร็จจะได้ ดั้งภาพ

4. ทำการ Open Folder Project ที่สร้างขึ้นมาก่อน และวิธีการ Run คือ F5 หรือ ctrl+F5 และเลือก Run .Net Core

6. เมื่อรันจะได้ผลตามภาพ

Devexpress Gridview การปรับแต่งส่วนต่างๆ [Part3]

การปรับแต่ง Edit ใน Gridview

  1. คลิกที่ GridView และเลือก Show Edit Button

2. ไปที่ช่อง Column แก้ไข และเลือก ButtonRender Mode เพื่อปรับให้เป็น IMAGE และกด OK

3. ไปยัง Properties  SettingsCommandButton เพื่อตั้งค่ารูปที่ไว้ใช้กด

 

4. และปุ่มที่จำเป็นต้องตั้ง ได้แก่

UpdateButton =ปุ่มตอนกดแก้ไขข้อมูลเสร็จ

EditButton =ปุ่มที่ไว้ใช้กด แก้ไขข้อมูล

CancelButton= ไว้ยกเลิกตอน ไม่แก้ไข

เมื่อกดปุ่ม …  จะไปหน้ายันรูปภาพ เพื่อเลือกรูปที่ต้องการแทนปุ่ม

 

เมื่อตั้งค่าเสร็จจะได้ดั้งรูป

SQL : การ Copy ข้อมูลจาก Column ไปยังอีก Column

ในการ Copy  ข้อมูลจากคอลัมน์ไปยังอีกคอลัมน์ ในที่นี้จะหมายถึงการทำสำเนาข้อมูลทั้งหมดในคอลันน์นั้น ซึ่งเหมาะกับการทำงานกับจำนวนข้อมูลมากๆ ทำให้ผู้ใช้งานไม่ต้องเสียเวลาในการระบุ Value ของแต่ละ record

รูปแบบคำสั่ง

UPDATE ชื่อตาราง

SET ชื่อColumnB = ชื่อColumnA

WHERE เงื่อนไข (ถ้ามี)

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

ซึ่งหากเป็นการ Copy ข้อมูลจากคอลัมน์จากตารางอื่น จะใช้รูปแบบคำสั่งนี้

รูปแบบคำสั่ง

UPDATE ชื่อตารางB

SET ชื่อColumnB = (SELECT ชื่อColumnA FROMชื่อตารางA

WHERE ชื่อตารางB.ชื่อColumnIDของB = ชื่อตารางA.ชื่อColumnIDของA)

จะเห็นได้ว่า การ Copy ข้อมูลจากอีกตารางมา จะต้องมีการ Select ค่าซ้อนภายใต้วงเล็บก่อนที่จะเอามาเทียบค่ากับคอลัมน์ B บนตาราง B
ซึ่งจะต้องมีการเช็คค่าด้วยคอลัมน์ตัวกลางอีกตัวหนึ่งว่าสองตารางมีค่าตรงกัน (ให้เสมือนว่าสองตารางเชื่อมกันอยู่)

การใช้ alert Js SweetAlert ใน ASP.NET C#

1.การติดตั้ง

https://www.jsdelivr.com/package/npm/sweetalert2

2. เราจะใช้แค่ 2 ไฟล์ นี้

 

3.นำ TAG ไปใส่ ทั้ง CSS  JS

4 และใส่ โค้ด Script

โดยเราสามารถดูอ้างอิงจาก เว็ปได้

https://sweetalert2.github.io/

5. โดยวิธีเรียนใช้คือ

successalert1() คือฟังก์ชั่นที่เรียกใช้

วิธีนำ Font ภาษาไทยจาก Google Font มาใช้บน Web Application

1.เข้าเว็ป  https://fonts.google.com/ 

2. แล้วเลือก ภาษาไทย

 

3. เลือกฟอนต์ที่ต้องการและกด รูปบวก

   4. เมื่อกดรูป บวกแล้วจะมีหน้านี้ขึ้นเพื่อในนำ CSS ไปใส่ ดังภาพ

5. ให้นำโค้ด  ไปแปะบนหัวเว็ป

6. และนำ โค้ด CSS ไปใส่  ในส่วนที่ต้องการเปลี่ยนภาษาไทย ถ้า .fontkanit คือ class เอาไปใส่ใน class

ก็จะฟอนต์ภาษาไทยอย่างง่ายไปใช้งาน

Devexpress Gridview การปรับแต่งส่วนต่างๆ [Part2]

ในส่วนนี้คือเป็นการชี้ Row ใน Gridview แล้วจะมีสีโฟกัสที่ Row นั้น

1  เข้าไปที่ SettingBehavior และไปที่ EnableRowHotTrack = True

2 ไปตั้งค่า ส่วนเสริมต่างๆเช่น สีที่เวลาชี้ไปหรือฟอนต์ ต่างๆ โดยเข้าไปที่ Styles
และ RowHotTrack   ถ้าต้องการ BackColor คือสีพื้นหลังก็เลือกตามที่ต้องการ

 

3. ผลลัพธ์ที่ได้