Get Adobe Flash player

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

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 แทน

 

 

Insert ข้อมูลและส่งค่า Primary key กลับมา

Insert ข้อมูลและส่งค่า Primarykey ที่พึ่ง Insert ล่าสุดกลับมาเพื่อนำไปใช้ต่อ โดยใช้ SELECT CAST(scope_identity() AS int ช่วย

ตัวอย่างโค้ด

 

การทำตัวอักษรวิ่งด้วย HTML

นอกจากการเขียนเนื้อหาเว็บไซต์ด้วยตัวอักษรธรรมดาแล้ว ในการเขียนเว็บด้วย HTML ยังสามารถเพิ่มลูกเล่นให้กับตัวอักษรด้วยการกำหนดให้ตัวอักษรสามารถเคลื่อนไหวได้อีกด้วย ซึ่งสามารถเพิ่มความน่าสนใจให้กับเว็บนั้นๆได้ แถมวิธีการเขียนก็ไม่ยุ่งยาก ตัวโค้ดที่ใช้ ได้แก่

<marquee direction=”ทิศทางการวิ่ง” width=”ความกว้าง” height=”ความสูง” scrollamount=”ความเร็วในการวิ่งของตัวอักษร” scrolldelay=”เวลาหน่วง”>ข้อความที่จะแสดง</marquee>

 

ในการเขียนคำสั่งสร้างตัวอักษรที่มีการเคลื่อนไหว เราจะเขียนภายใต้ <marquee> และปิดด้วย </marquee>
ทีนี้ ในการตั้งค่าตัวอักษรว่าจะให้เคลื่อนที่อย่างไร จะมาเซตในส่วนของ <marquee>

– direction=”ทิศทางการวิ่ง” เป็นการกำหนดทิศทางการวิ่งของตัวอักษร มี 4 อย่าง ได้แก่

  • <marquee direction=”left”>ข้อความวิ่งจากขวาไปซ้าย</marquee>
  • <marquee direction=”right”>ข้อความวิ่งจากซ้ายไปขวา</marquee> 
  • <marquee direction=”up”>ข้อความวิ่งจากล่างขึ้นบน</marquee>
  • <marquee direction=”down”>ข้อความวิ่งจากบนลงล่าง</marquee>

– width=”ความกว้าง” เป็นการกำหนดความกว้างของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ left หรือ right) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์

– height=”ความสูง” เป็นการกำหนดความสูงของบรรทัดตัวอักษรที่จะวิ่ง (มักใช้กรณีกำหนดทิศทางการวิ่งแบบ up หรือ down) ใช้กำหนดได้ทั้งตัวเลขโดดๆและแบบเป็นเปอร์เซนต์เช่นเดียวกับการกำหนดความกว้าง

– scrollamount=”ความเร็วในการวิ่งของตัวอักษร” และ scrolldelay=”เวลาหน่วง” เป็นการกำหนดความเร็วในการวิ่งและกำหนดความหน่วงของ โดยกำหนดเป็นตัวเลข ถ้าตัวเลขมากก็ยิ่งเร็วมาก ตัวเลขน้อยก็ยิ่งช้า

 

เพิ่มเติม
หากต้องการเซตให้ข้อความวิ่งไปวิ่งมา จะเซตด้วย behavior=”alternate” เช่น <marquee behavior=”alternate”>ข้อความที่ต้องการ<marquee>

นอกจากนี้ ยังสามารถเซตค่าสีพื้นหลัง สีอักษร ขนาดฟ้อนท์กับ <marquee> ได้เหมือนตัวอักษรตามปกติ

การติดตั้ง Composer


     Composer คืออะไร การติดตั้งบน PHP Composer เช่น XAMPP , Appserv และอื่นๆ การพัฒนาโปรแกรม php เรากำลังอยู่ในยุคของการจัดการกับ Package และ Library ต่าง ๆ ที่เป็น Open Source ที่มีอยู่มากมายตามแหล่งต่างๆ ให้มีความเป็นระบบเรียบร้อย มีความปลอดภัยในการดาวน์โหลดและ นำมาใช้ เพราะก่อนหน้านี้เราจะเห็นว่าในกรณีที่จะต้องใช้ Library ต่างๆ นั้น จะต้องใช้วิธีการดาวน์โหลดไฟล์จากแหล่งนั้นมาใช้งาน ซึ่งจะพบกับความเสี่ยงต่างๆ จากการดาวน์โหลด ไม่ว่าจะเป็นความปลอดภัย ไวรัส มัลแวร์ ความน่าเชื่อถือ รวมทั้งไฟล์นั้นใช้งานตรงกับเวอร์ชั่นของ php ที่จะสามารถใช้งานได้หรือไม่ ซึ่งปัญหาเหล่านี้ได้ถูกพัฒนาจนมาถึงปัจจุบัน โดย Composer แนวคิดคือจะรวบรวมและจัดระเบียบ package และ library ต่างๆ ให้มาอยู่ในแหล่งเดียวกัน สามารถติดตั้ง Library ได้จาก Command ซึ่งโปรแกรมจะทำการตรวจสอลและดาวน์โหลด Package นั้นๆ มาใช้งาน 


เข้าไปยังเว็บไซต์

https://getcomposer.org/

 

คลิกไปยังปุ่ม Download

 

 

ดาวโหลดตัว Composer_Setup.exe

 

คลิกที่ปุ่ม Next >

 

เลือกโฟล์เดอร์ (Path ) ที่เราจะติดตั้ง

 

คลิกปุ่ม Next >

 

ตั้งค่า Proxy เชื่อต่อไปยังเครื่อง Sever (ถ้ามี)

คลิกปุ่ม Next >

 

กดปุ่ม Install

 

คลิกปุ่ม Next >

 

กดปุ่ม Finish

 

จากนั้นเปิด Command Line ขึ้นมา

 

พิมพ์คำว่า Composer จากนั้นจะได้ผลลัพธ์ตามรูปภาพ

การ Backup Database ของ SQL Server 2012

1.เปิดโปรแกรม SQL Server Management Studio และทำการ Login เข้าสู่ Database

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. ทำการเลือก Database ที่ต้องการ Backup

3. ทำการคลิกขวาและเลือก Taks และ เลือก Back up

4. ในตอนต้นโปรแกรมจะทำการตั้ง Path Default ไว้ ให้เราทำการเลือก และกด Remove

5. เลือกไปยัง Path ที่ต้องการและ ทำการกรอกชื่อในช่อง File name xxxx.bak และ กด Ok

6. ทำการกด OK

7. ทำการกด OK

8. เมื่อสำเร็จจะขึ้นหน้าต่างแบบนี้ และทำการกด OK เป็นอันเสร็จ

เราก็จะได้ ไฟล์ Backup .bak ไว้ไปทำการ Restore

Angular-materialize Plugin สำหรับการใช้งาน AngularJS ร่วมกับ Materialize CSS

จากการแนะนำ CSS Framework ที่ออกแบบตามหลักการของ Material Design ที่ผ่านมา http://info.arit.rmutp.ac.th/2017/07/31/materialize/ หากต้องนำมาใช้ร่วมกับ AngularJs (version 1) ควรจะใช้ Plugin นี้เพื่อมาช่วยให้ทำงานร่วมกันได้ เพราะด้วยตัว Materialize CSS มี JavaScript เป็นของตัวเอง

การแนบไฟล์ JavaScript และ CSS ที่ต้องใช้

การเรียกใช้ Module ชื่อ ‘ui.materialize’

จากนั้น Form Input ต่าง ๆ ที่ถูก apply โดย Materialize CSS ไม่ว่าจะเป็น Text, Date และ Time จะถูกผูกค่ากับ ng-model ของ AngularJs ดังตัวอย่างต่อไปนี้

Input-date

HTML

JavaScript ใน Controller

อ่านรายละเอียดเพิ่มเติมได้ที่ https://krescruz.github.io/angular-materialize/

วิธีการใช้ 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

 

 

การทำ Datasource และกำหนดค่าเริ่มต้นให้กับ Combobox (ASP.NET C#)

DropDownList กับ Combobox มีความคล้ายคลึงกันในแง่ของการเอาไปใช้งาน และในส่วนของการตั้งค่า Datasource สำหรับตัว DropDownList กับ Combobox เองก็มีความคล้ายคลึงกัน ดังนี้

ชื่อ combobox.Item.Clear();
ชื่อ combobox.TextField = ชื่อ col ของ dataset;
ชื่อ combobox.ValueField = ชื่อ col ของ dataset;
ชื่อ combobox.DataSource = ชื่อของ dataset;
ชื่อ combobox.DataBind();

ตัวอย่างโค้ด

จะเห็นได้ว่าโค้ด มีความคล้ายคลึงกันมากในส่วนการนำค่า Dataset มากำหนดค่าให้กับ
แต่จะมีข้อแตกต่างเล็กน้อยในกรณีที่มีการกำหนด index หรือการกำหนด combobox ค่าใดค่าหนึ่งเริ่มต้นไว้ ดังรูป

สิ่งที่ใช้ในการเซตค่าเริ่มต้น นั่นคือส่วน .Value

ชื่อ combobox.SelectIndex = -1;
ชื่อ combobox.Value = ค่าที่กำหนด;

.SelectIndex ปกติแล้วจะใช้ในการกำหนด index ของตัว combobox และ dropdownlist
แต่ในที่นี้ ที่กำหนดเป็น -1 ตายตัว ก็คือการเคลียร์ค่า select เดิมก่อนจะกำหนดค่าใหม่

.Value 
ส่วนนี้จะเป็นโค้ดสำหรับการเซตค่าเริ่มต้นให้กับตัว combobox
ในขณะที่การกำหนดค่าเริ่มต้นของ dropdownlist จะใช้โค้ด

  • ชื่อdropdownlist.Items.FindByValue(ค่าที่กำหนดเป็น string).Selected = true;
  • ชื่อdropdownlist.SelectedValue = ค่าที่กำหนด;

แนะนำ Materialize CSS Framework ใหม่สำหรับพัฒนา Web App

เป็นอีกทางเลือกหนึ่งสำหรับผู้ที่ต้องการพัฒนา Web App ให้มีหน้าตาที่ทันสมัยถูกหลักการของ Material Design ของ Google โดย Materialize CSS นั้นเป็นอีกหนึ่งใน Framework ที่ได้พัฒนาโดยอิงตามหลักการของ Material Design มาทั้งหมด

คุณลักษณะที่สำคัญเมื่อเทียบกับ Bootstrap

Grid System

ทั้ง Materialize ใช้หลักการแบ่ง Column แบบเดียวกับ Bootstrap โดยการแบ่งเป็น 12 Column ใช้งานง่ายทั้งคู่แต่ Materialize ใช้ชื่อ Class ในระบบ Grid system ได้สั้นและดูง่ายกว่า ดังภาพ

Grid System (Materialize CSS)

Grid System (Materialize CSS)

Grid System (Bootstrap)

Grid System (Bootstrap)

ในเรื่องความละเอียดของระดับหน้าจอ Materialize และ Bootstrap แบ่งหน้าจอเป็น 4 ขนาดประกอบด้วยตารางด้านล่าง

Screen Size (Materialize CSS)

 

Screen Size (Bootstrap)

 

Container System

Container System คือ Layout หรือกรอบรอบนอกสุดที่ทำหน้าที่บรรจุดเนื้อหาของเว็บไซต์ทั้งหมด โดย Container ของ Bootstrap นั้นจะแบ่งเป็น 2 แบบคือแบบ Fix จะมีความกว้างไม่เกิน 1170px (ดูได้จากรูป Screen Size Bootstrap) และแบบ Fluid คือจะกว้างเต็มตามขนาดหน้าจอ แต่ในขณะเดียวกัน Materialize CSS นั้นใช้หลักการ Material Design จาก Google ซึ่งมองว่าเนื้อหาของเว็บไซต์ควรจะรวมอยู่กึ่งกลางเพื่อให้ผู้ใช้ดูง่าย ดังนั้น Container ของ Materialize CSS จึงมีความกว้างประมาณ 70% ของหน้าจอขนาดใหญ่ (ดูได้จากรูป Screen Size Material CSS)

ดูเพิ่มเติม: http://materializecss.com/

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