Get Adobe Flash player

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

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 ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ

credit: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015

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 ขึ้นมา
1) เริ่มจากสร้างตัวแปร
public class criteriaListArr
{
public String nameTH { get; set; }
public String nameEN { get; set; }
public int obtain { get; set; }
public int criteria { get; set; }
}
2) จากนั้นให้สร้าง ArrayList
public List GetcriteriaListArr()
{
var res = new List()
{
//case 1
new criteriaListArr()
{
nameTH = “กิจกรรมมหาวิทยาลัย ไม่น้อยกว่า 10 กิจกรรม”,
nameEN = “กิจกรรมมหาวิทยาลัย ไม่น้อยกว่า 10 กิจกรรม”,
obtain =8,
criteria=10
},
//case 2
new criteriaListArr()
{
nameTH = “กิจกรรมมหาวิทยาลัย ไม่น้อยกว่า 120 ชั่วโมง”,
nameEN = “กิจกรรมมหาวิทยาลัย ไม่น้อยกว่า 120 ชั่วโมง”,
obtain =50,
criteria=120
},
//case 3
new criteriaListArr()
{
nameTH = “กิจกรรมพัฒนานักศึกษาสู่การเป็นบัณฑิตพึงประสงค์ ครบ 5 ด้าน”,
nameEN = “กิจกรรมพัฒนานักศึกษาสู่การเป็นบัณฑิตพึงประสงค์ ครบ 5 ด้าน”,
obtain =4,
criteria=5
}

};

return res;
}
3) แล้วขั้นตอนการเรียกใช้ให้เรียกใช้โดยกำหนดตัวแปรเท่ากับ ArrayList ที่สร้าง
criteriaList = GetcriteriaListArr()

Code หน้า Controller ทั้งหมด

 

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/

mvc1

 

หลังจากนั้นให้ทำการ install Node.js ตั้วล่าสุดลงไป

2) เมื่อลง Node.js ให้เปิด CMD ขึ้นมาเพื่อทำการสั่งให้ Node.js ทำการ install package ที่ต้องการใช้งานดังนี้

ติดตั้ง bower ใช้คำสั่ง npm install -g bower

 

mvc2

 

 

ติดตั้ง typescript (ไม่ใช้ก็ได้) ใช้คำสั่ง npm install -g typescript

mvc3

 

ติดตั้ง tsd ใช้คำสั่ง npm install -g tsd 

mvc4

 

STEP 2 ติดตั้ง Git โดยเข้าไปโหลดตัวติดตั้งได้ที่ https://git-scm.com/ หลังจากนั้นให้ install

mvc6

หลังจากนั้นให้กด next ไปเรื่อยๆ

mvc7

หลังจากนั้นให้กด next ไปเรื่อยๆ  จนพบหน้า Adjust PATH environment

mvc8

ในหัวข้อ Configuring the line ending conversion

mvc9

ในหัวข้อ Configuring the terminal emulator to use with Git Bash

mvc10

STEP 3 หลังจากนั้นเราจะใช้ bower สำหรับ install bootstrap และ AngularJS ลงใน folder project ของเรา

อันดับแรกให้สร้าง folder project ขี้นมาก่อนให้เปิด visual studio -> new project asp.net empty และกำหนดชื่อ project แล้วกด ok จะได้โปรเจ็คดังภาพด้านล่าง และต้องใช้ part สำหรับติดตั้ง bootstrap กับ AngularJS

mvc5

เปิด CMD ขึ้นมาแล้วพิมพ์ bower install bootstrap AngularJS ลงไป

mvc11

หลังจากนั้น bower จะทำการลงไฟล์ที่ต้องการใช้ในโปรเจ็คของเราตาม path ที่ประกาศไว้

mvc12

 

 

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

 

 

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

 

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 ภายในให้เลือก