Category: คลังความรู้ปี 2560

การใช้งาน Popover Bootstrap

Popover คือเครื่องมือที่มีลักษณะเหมือนกล่องข้อความที่เป็นแบบ pop up เด้งขึ้นมา การใช้งาน popover เบื้องต้น โดยใส่ BootstrapCDN ไว้ในหน้า html ในส่วนของ <head>

เราสามารถกำหนดทิศทางการแสดงข้อความของ popover ได้ 4 ทาง คือ ซ้าย ขวา บนและล่าง   ในส่วนของการกำหนดทิศทางเราสามารถแก้ไขในส่วน data-placement = top / left / right / bottom ข้อความที่ต้องการใส่อยู่ในส่วนของ data-content   popover นั้นต้องใช้ Javascript ในการทำงาน   จากนั้นก็สามารถใช้ popover ได้        

ionic 2 : Create Page (ionic generate page)

ionic 2 : Create Page สร้าง Page ด้วยคำสั่ง ionic generate page เนื่องจาก ionic 2 เมื่อสร้างไฟล์ใหม่จะต้องมีไฟล์ที่ประกอบไปด้วย ไฟล์ .html, .ts (typescript), .scss (css) ใช้คำสั่งในการสร้าง Page จะได้ไฟล์ทั้งหมดทันทีดังภาพด้านล่าง คำสั่งทั้งหมดที่เกี่ยวกับสร้าง Page

HTML5 picture element เพื่อทำ responsive image ที่ดีกว่า

ในปัจจุบันเป็นที่รู้กันว่าเราต้องทำเว็บไซต์ให้รองรับกับหน้าจอหลาย ๆ ขนาด (responsive web) รวมทั้งรูปภาพที่ใช้ในเว็บด้วย โดยวิธีที่ใช้กันมากคือการกำหนด CSS ให้ที่ทำให้รูปภาพมีความกว้างตามขนาดพื้นที่ที่มี เช่น

การใช้ CSS กำหนดให้รูปภาพเป็น responsive image สามารถใช้งานได้ดี แต่ก็ยังมีปัญหาเรื่องประสิทธิภาพ เพราะต้องเตรียมรูปภาพขนาดใหญ่เผื่อไว้รองรับหน้าจอขนาดใหญ่ เมื่อถูกเปิดด้วยหน้าจอขนาดเล็กก็ต้องโหลดรูปภาพขนาดใหญ่โดยไม่จำเป็น และหากพื้นที่เป็นแนวตั้ง แต่รูปภาพเป็นแนวนอน ก็จะส่งผลให้รูปภาพถูกย่อจนเล็กดังภาพ   ซึ่งในจุดนี้ HTML5 picture element จะเข้ามาช่วยได้ โดยการยอมให้เราเตรียมรูปภาพหลากหลายขนาดที่เหมาะสมกับหน้าจอขนาดต่าง ๆ และ picture element จะสั่งให้ web browser โหลดเฉพาะไฟล์ขนาดที่เหมาะสมตามที่เราตั้งค่าไว้  (เงื่อนไขเหมือนกับ media screen ของ CSS) โดยมีตัวอย่างดังนี้

ถ้าหน้าจอขนาด 600px ก็จะโหลดรูป img_pink_flowers แทน img_orange_flowers ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ […]

ASP.NET MVC LESSON 2 return Json data

ASP.NET MVC LESSON 2 return Json data โดยเราสามารถกำหนดการ return ค่าเป็นแบบ string หรือ Array Object ได้ดังภาพ ในส่วนของ Controller ปกติจะ return View(); ให้  return Json(data,JsonRequestBehavior.AllowGet); Json จากภาพด้านบนจะมีการส่งค่ากลับสามแบบ แบบที่ 1 status = “0”, statusTextTH = “ไม่ผ่าน”, statusTextEN= “fail”,   แบบที่ 2 summary=new { obtainAct=15, obtainHour=37, criteriaAct=30, criteriaHour=120 } แบบที่ 3 จะต้องทำ Array เพราะสังเกตุว่าจะมี […..] ครอบ data ไว้อยู่ ให้สร้าง array […]

ASP.NET MVC LESSON 1 การเรียกใช้ Parameter

ASP.NET MVC LESSON 1 การเรียกใช้ Parameter แบบที่ 1 เรียกผ่าน string query รูปแบบเดิมๆ ดังภาพ ขั้นตอนการทำแก้ไขไฟล์ RouteConfig.cs เพื่อให้เรียก parameter ดังในภาพ สร้าง Controller ชื่อ ActivityTranscript แล้วในส่วนของ Action ให้กำหนดตัวรับ Parameter ด้วย หลังจากนั้นส่วนของ View ให้สร้าง View Index เพื่อแสดงผล ViewBag.StudentCode ที่เก็บค่ามาแสดง แบบที่ 2 จะใช้แสลช / แยกเพื่อความสวยงาม เป็นแบบที่นิยมใช้  ดังภาพด้านล่าง ไฟล์ RouteConfig.cs จะเหมือนเดิม หน้า Controller เพิ่ม [Route(……….)] เพื่อระบุค่า Parameter กรณีที่มี Route เยอะๆ จะใช้วิธีรับค่า Parameter แทน   […]

วิธีการใช้ Node.js และ Git เพื่อทำการติดตั้ง bower, typescript, tsd และใช้ bower ติดตั้ง bootstrap, AngularJS

ขั้นตอนการติดตั้งจะต้องติดตั้ง Node.js ก่อนเพื่อใช้คำสั่ง npm ติดตั้ง bower หลังจากนั้นติดตั้ง Git เพื่อให้สามารถใช้งาน bower ติดตั้งไฟล์ลงใน path ที่ต้องการได้ หลังจากนั้นใช้คำสั่ง bower เพื่อติดตั้ง bootstarp,AngularJS ลง Proejct ได้ STEP 1 จะต้องติดตั้ง node.js ก่อน เพราะจะต้องใช้คำสั่ง npm เพื่อทำการติดตั้ง bower, typescript, tsd ฯลฯ 1) ติดตั้ง node.js จากเว็บ https://nodejs.org/en/   หลังจากนั้นให้ทำการ install Node.js ตั้วล่าสุดลงไป 2) เมื่อลง Node.js ให้เปิด CMD ขึ้นมาเพื่อทำการสั่งให้ Node.js ทำการ install package ที่ต้องการใช้งานดังนี้ ติดตั้ง bower ใช้คำสั่ง npm […]

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 เป็นการจัดไลน์โค้ด   การเรียกใช้ Script จากเพจลูกมาแสดงใน Page Layout กดไปยังโค้ดที่ต้องการจากการใช้ go […]

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/   เมื่อติดตั้งเสร็จแล้วให้ลองเปิดโปรเจ็คขึ้นมาแล้วลองพิมพ์ code html ดังนี้ table>tr*2>td*5 แล้วกด tab 2 ครั้ง จะได้ table ที่มี 2 row และ 5 column  

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

Microsoft Access Database จะ Error เมื่อมีการเรียกใช้พร้อมกันผ่านเว็บไซต์จะพบ error ดังนี้ วิธีแก้คือให้เปิด Permission ให้ไฟล์ .ldb และ .mdb ให้สิทธิ IIS_IUSR เข้าใช้งาน ด้วยสิทธิ Full control